/* ==========================================================================
   Longyu Decor Art — mobile cross-border storefront
   Non-utility layer: things Tailwind can't express cleanly.
   ========================================================================== */

/* --- Device frame ------------------------------------------------------- */
body {
  background: #e7e3dc;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Bottom nav is FIXED to the viewport so it never scrolls away
   (works on mobile, tablet, and desktop — sits over the centered shell) */
#app-tabbar {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 768px;
  padding: 0 12px;
  z-index: 40;
}
/* Keep last content clear of the fixed bar */
#app-footer { padding-bottom: 96px; }
@media (min-width: 640px) {
  body { background: #ded9d0; }
}
/* Rounded "device" frame only on tablet; desktop (>=1024) stays flat. */
@media (min-width: 640px) and (max-width: 1023px) {
  .phone-shell {
    box-shadow: 0 0 0 1px rgba(27, 25, 23, .06), 0 30px 80px -30px rgba(27, 25, 23, .45);
    border-radius: 28px;
    overflow: hidden;
  }
}

/* --- Scrollbars --------------------------------------------------------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.snap-rail {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.snap-rail > * { scroll-snap-align: start; }

/* --- Motion ------------------------------------------------------------- */
@keyframes ly-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.ly-fade-up { animation: ly-fade-up .5s cubic-bezier(.22,.68,.36,1) both; }

@keyframes ly-sheet-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}
@keyframes ly-fade-in { from { opacity: 0 } to { opacity: 1 } }

.ly-sheet { animation: ly-sheet-in .32s cubic-bezier(.32,.72,.28,1) both; }
.ly-backdrop { animation: ly-fade-in .2s linear both; }

@keyframes ly-pop {
  0%   { transform: scale(.9); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.ly-pop { animation: ly-pop .28s cubic-bezier(.34,1.56,.64,1) both; }

@keyframes ly-toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ly-toast { animation: ly-toast-in .26s cubic-bezier(.22,.68,.36,1) both; }

/* --- Accordion (jQuery drives max-height) -------------------------------- */
.ly-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4, 0, .2, 1);
}

/* --- Range slider (filter sheet) ---------------------------------------- */
input[type="range"].ly-range {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: #e1d7c6;
  outline: none;
}
input[type="range"].ly-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c2673f;
  box-shadow: 0 2px 6px rgba(27, 25, 23, .2);
  cursor: pointer;
}
input[type="range"].ly-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #c2673f;
  cursor: pointer;
}

/* --- Gallery dots -------------------------------------------------------- */
.ly-dot {
  height: 6px;
  border-radius: 999px;
  background: rgba(27, 25, 23, .18);
  transition: width .25s ease, background-color .25s ease;
}
.ly-dot.is-active { width: 22px; background: #c2673f; }

/* --- Safe area for iOS --------------------------------------------------- */
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* --- Skeleton shimmer ---------------------------------------------------- */
@keyframes ly-shimmer { 100% { transform: translateX(100%); } }
.ly-skeleton { position: relative; overflow: hidden; background: #ede5d8; }
.ly-skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: ly-shimmer 1.4s infinite;
}

/* --- Hide native number spinners ----------------------------------------- */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

/* Checkout form fields (cart / order) */
.ly-field {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid var(--color-line, #E7DFD1);
  background: #fff;
  padding: 0.75rem 1rem;
  font-size: 13.5px;
  color: #1B1917;
  outline: none;
}
.ly-field::placeholder { color: #B3ACA0; }
.ly-field:focus { border-color: #1B1917; }

/* Country <select>: match the input look, add a chevron, gray out when unset */
.ly-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23918A7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.5rem;
}
.ly-select option { color: #1B1917; }
.ly-select.ly-placeholder { color: #B3ACA0; }



/* ==========================================================================
   纯静态版附加样式 —— 交互状态一律用原生 CSS 类，不依赖 Tailwind 运行时生成
   ========================================================================== */

/* 通用隐藏 */
.ly-hide { display: none !important; }
.is-hidden-more { display: none; }

/* 弹层 / 底部抽屉 */
.ly-overlay { display: none; position: fixed; inset: 0; z-index: 70; }
.ly-overlay.is-open { display: block; }
.ly-overlay-bd { position: absolute; inset: 0; background: rgba(27,25,23,.45); animation: ly-fade-in .2s linear both; }
.ly-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86%; overflow-y: auto;
  border-radius: 1.5rem 1.5rem 0 0; background: #fff;
  animation: ly-sheet-in .32s cubic-bezier(.32,.72,.28,1) both;
}
.ly-sheet-head {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #E7DFD1; background: rgba(255,255,255,.96);
  padding: .75rem 1rem; backdrop-filter: blur(8px);
}

/* 顶部下拉搜索面板：从上方滑下，宽度对齐内容区（768px 居中） */
.ly-search-drop {
  position: absolute; left: 0; right: 0; top: 0;
  max-width: 768px; margin: 0 auto;
  padding: calc(.875rem + env(safe-area-inset-top, 0px)) 1rem 1rem;
  background: #fff;
  border-radius: 0 0 1.5rem 1.5rem;
  box-shadow: 0 20px 44px -22px rgba(27,25,23,.45);
  animation: ly-search-in .34s cubic-bezier(.32,.72,.28,1) both;
}
@keyframes ly-search-in {
  from { transform: translateY(-100%); opacity: .3; }
  to   { transform: none; opacity: 1; }
}
.ly-search-bar {
  display: flex; align-items: center; gap: .5rem;
  border: 1px solid #E7DFD1; border-radius: 999px;
  background: #FCFAF6;
  padding: .3125rem .375rem .3125rem .875rem;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ly-search-bar:focus-within {
  border-color: #1B1917; background: #fff;
  box-shadow: 0 0 0 3px rgba(27,25,23,.06);
}
.ly-search-ic { flex: 0 0 auto; display: grid; place-items: center; color: #918A7D; }
.ly-search-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding: 0;
  font-size: 14px; color: #1B1917; outline: none;
}
.ly-search-input::placeholder { color: #B3ACA0; }
.ly-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ly-search-go {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .375rem;
  height: 34px; padding: 0 .875rem; border: 0; border-radius: 999px;
  background: #1B1917; color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: transform .18s ease, opacity .18s ease;
}
.ly-search-go:active { transform: scale(.96); }
.ly-search-x {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; border: 0; border-radius: 999px;
  color: #918A7D; background: #F6F1E8; cursor: pointer;
}
.ly-search-x:hover { color: #1B1917; }
/* 极窄屏：Search 按钮只留图标，避免把输入框挤没 */
@media (max-width: 360px) {
  .ly-search-go { padding: 0 .625rem; }
  .ly-search-go span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ly-search-drop { animation: none; }
  .ly-search-bar { transition: none; }
  .ly-search-go:active { transform: none; }
}

/* 左侧抽屉：分类导航菜单 */
.ly-drawer {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: min(82%, 320px); max-width: 320px;
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: 8px 0 40px -12px rgba(27,25,23,.35);
  animation: ly-drawer-in .32s cubic-bezier(.32,.72,.28,1) both;
}
@keyframes ly-drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: none; }
}
.ly-drawer-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #E7DFD1; background: rgba(255,255,255,.98);
  padding: .75rem 1rem;
}
.ly-drawer-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 1rem 0 1.5rem;
}
.ly-drawer-title {
  padding: .75rem 1rem .375rem;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: #918A7D;
}
.ly-cat-item {
  display: flex; align-items: center; gap: .875rem;
  padding: .75rem 1rem;
  text-decoration: none; color: #1B1917;
  transition: background .15s ease;
}
.ly-cat-item:hover { background: #F6F1E8; }
.ly-cat-ic {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px; background: #F6F1E8;
  color: #6E675C;
}
.ly-cat-name {
  flex: 1 1 auto;
  font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ly-cat-arrow {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  color: #B3ACA0;
}

/* 分类树（手风琴）：原生 <details> 嵌套，零 JS。
   一级点开二级、二级点开三级；叶子才跳转，分组只展开。 */
.ly-cat-tree { margin: 0; }
.ly-cat-group { } /* details 容器 */
.ly-cat-sum {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem 1rem;
  font-size: 14px; font-weight: 600; color: #1B1917;
  transition: background .15s ease, color .15s ease;
}
.ly-cat-sum:hover { background: #F6F1E8; }
.ly-cat-sum::-webkit-details-marker { display: none; }
.ly-cat-sum::marker { content: ""; }
.ly-cat-caret {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 20px; height: 20px; color: #B3ACA0;
  transition: transform .22s cubic-bezier(.32,.72,.28,1);
}
.ly-cat-group[open] > .ly-cat-sum > .ly-cat-caret { transform: rotate(180deg); }
.ly-cat-children {
  margin-left: 1.1rem; padding-left: .85rem;
  border-left: 1px solid #F0EBE0;
}
.ly-cat-d2 > .ly-cat-sum { font-weight: 500; font-size: 13.5px; color: #3D3833; }
.ly-cat-leaf {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem; text-decoration: none;
  color: #554D44; font-size: 13.5px;
  transition: background .15s ease, color .15s ease;
}
.ly-cat-leaf:hover { background: #F6F1E8; color: #1B1917; }
.ly-cat-dot {
  flex: 0 0 auto; width: 5px; height: 5px;
  border-radius: 999px; background: #DCA87F;
}

@media (prefers-reduced-motion: reduce) {
  .ly-drawer { animation: none; }
  .ly-cat-item { transition: none; }
  .ly-cat-sum { transition: none; }
  .ly-cat-leaf { transition: none; }
  .ly-cat-caret { transition: none; }
}

/* Toast */
.ly-toast-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ly-toast {
  display: flex; align-items: center; gap: .5rem;
  border-radius: 999px; background: rgba(27,25,23,.92);
  padding: .625rem 1rem; font-size: 13px; font-weight: 500; color: #fff;
  box-shadow: 0 18px 40px -20px rgba(27,25,23,.5);
  animation: ly-toast-in .26s cubic-bezier(.22,.68,.36,1) both;
}

/* 筛选 chips */
.ly-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px;
  padding: 0 14px; border-radius: 999px; border: 1px solid #E7DFD1;
  background: #fff; color: #3D3833; font-size: 12.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer;
}
.ly-chip-on { background: #1B1917 !important; border-color: #1B1917 !important; color: #fff !important; }

/* 尺码选项 */
.ly-opt.is-on { border-color: #1B1917 !important; background: #1B1917 !important; color: #fff !important; }
.ly-opt.is-on .ly-opt-sub { color: rgba(255,255,255,.72) !important; }

/* 画框选项 */
.ly-frame.is-on { border-color: #1B1917 !important; background: #fff !important; }
.ly-frame-check { display: none; }
.ly-frame.is-on .ly-frame-check { display: inline-flex; }
.ly-frame.is-on .ly-frame-price { color: #C2673F !important; }

/* 列表页空态 / 分页 */
#shop-empty { padding: 4rem 2rem; text-align: center; }

.ly-pager { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.ly-page {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .5rem;
  border-radius: 999px; border: 1px solid #E7DFD1;
  background: #fff; color: #3D3833;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.ly-page:active { transform: scale(.94); }
.ly-page.is-on { background: #1B1917 !important; border-color: #1B1917 !important; color: #fff !important; }
.ly-page-off { opacity: .32; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .ly-page { transition: none; } .ly-page:active { transform: none; } }

/* ================= 会员登录 / 注册表单 ================= */

/* 输入框容器：聚焦和错误态都画在容器上，input 本身保持素颜 */
.ly-field { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.ly-field:focus-within { border-color: #1B1917; box-shadow: 0 0 0 3px rgba(27,25,23,.06); }
.ly-field.is-err { border-color: #C2673F; background: #FDF8F4; }

/* 密码显隐切换：两个图标都渲染，靠 .is-pw-open 二选一 */
.ly-eye-off { display: none; }
.is-pw-open .ly-eye { display: none; }
.is-pw-open .ly-eye-off { display: grid; }

/* 自定义勾选框：原生 input 用 sr-only 藏起来，外观画在紧邻的 .ly-box 上 */
.ly-box { transition: background .16s ease, border-color .16s ease; }
.ly-box > svg { opacity: 0; transition: opacity .16s ease; }
.ly-check:checked + .ly-box { background: #1B1917; border-color: #1B1917; }
.ly-check:checked + .ly-box > svg { opacity: 1; }
.ly-box.is-err { border-color: #C2673F; }

/* 顶部提示条：默认红色（错误），加 .is-info 变绿色（成功 / 告知） */
.ly-err-ok { display: none; }
#auth-error.is-info { border-color: #C9D2C2; background: #E6EBE3; }
#auth-error.is-info .ly-err-alert { display: none; }
#auth-error.is-info .ly-err-ok { display: grid; }
#auth-error.is-info [data-err-text] { color: #4B5A41; }

/* 密码强度条：分数由 auth.js 写到容器的 ly-pw-1..4 上 */
.ly-pw-bar > span { background: #EDE5D8; transition: background .2s ease; }
.ly-pw-bar > span.is-on { background: #C2673F; }
.ly-pw-bar.ly-pw-1 > span.is-on { background: #B4452E; }
.ly-pw-bar.ly-pw-2 > span.is-on { background: #C2673F; }
.ly-pw-bar.ly-pw-3 > span.is-on { background: #B9822F; }
.ly-pw-bar.ly-pw-4 > span.is-on { background: #4B5A41; }

/* ================= 浮动视频小窗（京东式）+ 播放页 ================= */

/* 首页「品牌短片」主卡片里的播放按钮 */
.ly-video-hero { position: relative; }
.ly-video-hero-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 60px; height: 60px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1B1917;
  box-shadow: 0 8px 24px -8px rgba(27, 25, 23, .5);
  transition: transform .2s ease;
}
.ly-video-hero:active .ly-video-hero-btn { transform: translate(-50%, -50%) scale(.94); }

/* 右下角浮动小窗 */
.ly-video-fab {
  position: fixed; right: 14px; bottom: 84px; z-index: 60;
  width: 190px; display: flex; align-items: center; gap: 10px; padding: 8px;
  border-radius: 16px; background: #fff;
  box-shadow: 0 10px 30px -12px rgba(27, 25, 23, .4);
  animation: ly-fab-in .4s cubic-bezier(.22, .68, .36, 1) both;
}
@keyframes ly-fab-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.ly-video-fab-link { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; flex: 1; }
.ly-video-thumb { position: relative; flex: 0 0 auto; line-height: 0; }
.ly-video-fab-img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #EDE5D8; }
.ly-video-fab-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: rgba(27, 25, 23, .62); color: #fff;
}
.ly-video-fab-meta { min-width: 0; display: flex; flex-direction: column; }
.ly-video-fab-title {
  font-size: 12px; font-weight: 600; color: #1B1917;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ly-video-fab-sub { font-size: 10.5px; color: #C2673F; font-style: normal; font-weight: 600; }
.ly-video-fab-x {
  flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 999px; color: #918A7D; background: #F6F1E8; cursor: pointer;
}
.ly-video-fab-x:hover { color: #1B1917; }

/* 视频播放页 */
.ly-video-player { display: block; width: 100%; max-height: 70vh; background: #000; }

@media (prefers-reduced-motion: reduce) {
  .ly-field, .ly-box, .ly-box > svg, .ly-pw-bar > span,
  .ly-video-fab, .ly-video-hero-btn { transition: none; }
  .ly-video-fab { animation: none; }
}


.payment-btn { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 32px; background: #1f1814; color: #fff; border-radius: 999px; font-weight: 700;  transition: .2s; border: none; cursor: pointer; font-size: 16px; }