/* ============================================================
   0. 变量 & 基础重置
   ============================================================ */
:root{
  --bg:#ffffff;
  --fg:#121212;
  --muted:#8a8a86;
  --line:#e6e4e0;
  --soft:#f6f5f3;
  --dark:#111111;

  --serif: "Didot","Bodoni MT","Playfair Display","Cormorant Garamond",
           Georgia,"Songti SC","Times New Roman",serif;
  --sans: -apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC",
          "Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;

  --max:1560px;
  --pad:24px;
  --header-h:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (max-width:768px){
  :root{ --pad:16px; --header-h:56px; }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--fg);
  background:var(--bg);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.no-scroll{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
input{ font:inherit; }
:focus-visible{ outline:1px solid var(--fg); outline-offset:3px; }

/* 通用小字（上方标签） */
.eyebrow{
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow.light{ color:rgba(255,255,255,.85); }

/* ============================================================
   1. 按钮
   ============================================================ */
.btn{
  display:inline-block;
  padding:15px 42px;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:background .35s var(--ease), color .35s var(--ease),
             border-color .35s var(--ease);
}
.btn-light{ background:#fff; color:var(--dark); border-color:#fff; }
.btn-light:hover{ background:transparent; color:#fff; }

.btn-dark{ background:var(--dark); color:#fff; border-color:var(--dark); }
.btn-dark:hover{ background:transparent; color:var(--dark); }

.btn-ghost{ background:transparent; color:var(--dark); border-color:var(--dark); }
.btn-ghost:hover{ background:var(--dark); color:#fff; }

/* Sold out 与尚未开放的 Checkout 都在那里却按不动，样式要先说出这件事 */
.btn[disabled]{ background:var(--soft); color:var(--muted); border-color:var(--soft); cursor:not-allowed; }
.btn[disabled]:hover{ background:var(--soft); color:var(--muted); border-color:var(--soft); }

/* 带下划线的文字链接 */
.link-underline{
  position:relative;
  display:inline-block;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding-bottom:4px;
}
.link-underline::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.link-underline:hover::after{ transform:scaleX(.35); }

/* ============================================================
   3. 顶部导航
   ============================================================ */
.header{
  position:sticky;
  top:0;
  z-index:80;
  /* viewport-fit=cover lets the page run under the status bar on a notched phone. */
  padding-top:env(safe-area-inset-top);
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 12px rgba(0,0,0,.03);
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  height:var(--header-h);
  padding:0 var(--pad);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
}

/* 左区：汉堡 + 站名 + 导航 */
.header-left{ display:flex; align-items:center; gap:clamp(20px,3.4vw,46px); min-width:0; }

.menu-btn{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  margin-left:-12px;
  flex:none;
}
.menu-btn span{
  display:block;
  width:20px; height:1.5px;
  background:var(--fg);
  transition:transform .35s var(--ease), opacity .25s;
}
.menu-btn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.nav > ul{ display:flex; align-items:center; gap:28px; }
.nav a{
  position:relative;
  font-size:12px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:6px 0;
  white-space:nowrap;
}
.nav a::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .38s var(--ease);
}
.nav a:hover::after{ transform:scaleX(1); }

/* 悬停/键盘聚焦展开子分类，面板贴住菜单项底边，鼠标移过去不会断开 */
.nav li{ position:relative; }
.nav-sub{
  position:absolute;
  top:100%; left:-16px;
  min-width:212px;
  max-height:calc(100vh - var(--header-h) - 24px);
  overflow:auto;
  padding:16px 18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 20px 44px rgba(0,0,0,.09);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:70;
}
.nav li:hover > .nav-sub,
.nav li:focus-within > .nav-sub{
  opacity:1;
  visibility:visible;
  transform:none;
}
.nav-sub .sub-list > li + li{ margin-top:2px; }
.nav-sub a{
  display:block;
  padding:7px 0;
  font-size:11.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.nav-sub a::after{ display:none; }
.nav-sub a:hover,
.nav-sub a.is-current{ color:var(--fg); }
/* 更深的层级缩进并画一条竖线，无限级也能读出父子关系 */
.nav-sub .sub-list .sub-list{
  margin:4px 0 8px 12px;
  padding-left:12px;
  border-left:1px solid var(--line);
}
.nav-sub .sub-list .sub-list a{ font-size:11px; }

/* 站名：靠左，与导航同区 */
.logo{
  font-family:var(--serif);
  font-size:22px;
  font-weight:500;
  letter-spacing:.34em;
  line-height:1;
  white-space:nowrap;
}
@media (max-width:768px){
  .header-left{ gap:14px; }
  .logo{ font-size:19px; letter-spacing:.28em; }
}
@media (max-width:400px){
  /* Three icons and a wordmark already fill 320px; the drawer greets touch users instead. */
  .account-chip{ display:none; }
}

/* 右区：图标 */
.actions{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:6px;
}
.icon-btn{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:50%;
  transition:background .3s var(--ease);
}
.icon-btn:hover{ background:var(--soft); }
.icon-btn svg{ width:19px; height:19px; }

.cart-count{
  position:absolute;
  top:6px; right:5px;
  min-width:16px; height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--dark);
  color:#fff;
  font-size:10px;
  line-height:16px;
  text-align:center;
  letter-spacing:0;
}

/* ============================================================
   4. 移动端抽屉菜单
   ============================================================ */
.scrim{
  position:fixed; inset:0;
  z-index:110;
  background:rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s var(--ease);
}
.scrim.open{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:120;
  width:min(84vw,360px);
  background:#fff;
  padding:calc(20px + env(safe-area-inset-top)) var(--pad) calc(40px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  transform:translateX(-100%);
  transition:transform .45s var(--ease);
  display:flex;
  flex-direction:column;
}
.drawer.open{ transform:none; }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:44px;
  margin-bottom:24px;
}
.drawer-close{
  width:44px; height:44px;
  margin-right:-12px;
  display:flex; align-items:center; justify-content:center;
}
.drawer-close svg{ width:20px; height:20px; }

.drawer-nav > ul > li{ border-bottom:1px solid var(--line); }
.drawer-nav a{
  display:block;
  padding:18px 0;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.06em;
}
/* 抽屉里子分类常展开，触屏没有 hover */
.drawer-nav .sub-list{ margin:-6px 0 14px; }
.drawer-nav .sub-list a{
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding:9px 0 9px 16px;
}
.drawer-nav .sub-list a:hover,
.drawer-nav .sub-list a.is-current{ color:var(--fg); }
.drawer-nav .sub-list .sub-list{ margin:0 0 6px 12px; border-left:1px solid var(--line); }
.drawer-foot{
  margin-top:auto;
  padding-top:32px;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.06em;
}
.drawer-foot a{ display:block; padding:7px 0; }

/* ============================================================
   5. 首页轮播 Banner
   ============================================================ */
.banner-carousel{
  position:relative;
  /* Same mechanism as the original prototype: a band sized from the viewport, never from
     the picture, with the image covering it. 45vw bounds the band on a phone, 45vh and
     540px keep it from swallowing the first screen on a wide one. */
  height:min(45vw,45vh,540px);
  background:#111;
  overflow:hidden;
}
/* Every slide shares one grid cell, so the crossfade stacks in a single frame and the
   controls can sit on top of it. */
.carousel-slides{ height:100%; display:grid; }
.carousel-slide{
  grid-area:1 / 1;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s var(--ease);
}
.carousel-slide.is-on{ opacity:1; pointer-events:auto; }
.carousel-slide a{ display:block; height:100%; }
.carousel-slide img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
}

/* The controls sit on top of the picture, so they carry their own thin outline. */
.carousel-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:44px; height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  background:rgba(0,0,0,.18);
  color:#fff;
  cursor:pointer;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.carousel-nav:hover{ background:rgba(0,0,0,.42); border-color:#fff; }
.carousel-nav svg{ width:18px; height:18px; }
.carousel-nav.prev{ left:clamp(12px,2vw,28px); }
.carousel-nav.next{ right:clamp(12px,2vw,28px); }

.carousel-dots{
  position:absolute;
  left:0; right:0;
  bottom:clamp(14px,3vh,26px);
  z-index:2;
  display:flex;
  justify-content:center;
  gap:9px;
}
.carousel-dot{
  width:26px; height:2px;
  /* On a phone this bar is the only control, and a 2px target cannot be hit by a thumb:
     the padding carries a 44px touch area, background-clip keeps the bar 2px, and the
     negative margin cancels the extra space in the layout. */
  box-sizing:content-box;
  padding:21px 9px;
  margin:-21px -9px;
  border:0;
  background-color:rgba(255,255,255,.45);
  background-clip:content-box;
  cursor:pointer;
  transition:background-color .3s var(--ease);
}
/* background-color, not the shorthand: the shorthand would reset background-clip and
   paint the whole touch area white. */
.carousel-dot.is-on{ background-color:#fff; }

@media (max-width:768px){
  /* On a phone the dots are the control; arrows would only crowd the picture. */
  .carousel-nav{ display:none; }
}

/* ============================================================
   6. 通用区块
   ============================================================ */
.section{ padding:clamp(56px,8vw,110px) 0 0; }
.section-head{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad) clamp(28px,4vw,48px);
  text-align:center;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(24px,3.2vw,40px);
  letter-spacing:.1em;
  line-height:1.25;
}
.section-head.left{ text-align:left; }

/* ============================================================
   8. 商品网格
   ============================================================ */
.products{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,2vw,28px);
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--pad);
}
.card{ display:block; }
.card-media{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--soft);
}
.card-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease), opacity .4s;
}
.card:hover .card-media img{ transform:scale(1.045); }

.card-media > a{ display:block; width:100%; height:100%; }

.wish{
  position:absolute;
  top:8px; right:8px;
  z-index:2;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.86);
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.card:hover .wish{ opacity:1; transform:none; }
/* 已经收藏过的心一直露着：不悬停也该看得出哪一件已经在清单里。 */
.wish.on{ opacity:1; transform:none; }
@media (hover:none){
  .wish{ opacity:1; transform:none; }
}
.wish svg{ width:16px; height:16px; }
.wish.on svg{ fill:var(--dark); }

.card-body{ padding:16px 2px 0; }
.card-title{
  font-size:13px;
  font-weight:400;
  letter-spacing:.06em;
  line-height:1.5;
}
.card-cat{
  font-size:11px;
  letter-spacing:.08em;
  color:var(--muted);
  margin-top:3px;
}
.card-price{
  font-size:12.5px;
  letter-spacing:.06em;
  margin-top:8px;
}

@media (max-width:1024px){
  .products{ grid-template-columns:repeat(2,1fr); gap:16px 12px; }
  .card-body{ padding-top:12px; }
  .card-title{ font-size:12.5px; }
}

/* ============================================================
   10. 页脚
   ============================================================ */
.footer{
  margin-top:clamp(64px,9vw,120px);
  border-top:1px solid var(--line);
  padding:clamp(44px,5.5vw,72px) var(--pad) 32px;
}
/* 链接条数由后台的单页面决定，所以排成一行、放不下就自己换行，不再分栏 */
.footer-links{
  max-width:var(--max);
  margin:0 auto clamp(30px,3.6vw,44px);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px 40px;
}
.footer-links a{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.footer-links a:hover{ color:var(--fg); }

/* 底部版权 */
.footer-bottom{
  max-width:var(--max);
  margin:0 auto;
  padding-top:28px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--muted);
}
/* 后台一条单页面都没启用时只剩这一行，上面不该再压一道线 */
.footer-bottom:first-child{ border-top:0; padding-top:0; }

@media (max-width:480px){
  .footer-links{ flex-direction:column; align-items:center; gap:14px; }
}

/* ============================================================
   11. 响应式：导航折叠
   ============================================================ */
@media (max-width:1024px){
  .nav{ display:none; }
  .menu-btn{ display:flex; }
}

/* ============================================================
   12. 面包屑
   ============================================================ */
.breadcrumb{
  max-width:var(--max);
  margin:0 auto;
  padding:18px var(--pad) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.breadcrumb a{ transition:color .3s var(--ease); }
.breadcrumb a:hover{ color:var(--fg); }
.breadcrumb .sep{ opacity:.45; }
.breadcrumb .current{ color:var(--fg); }

/* ============================================================
   13. 列表页
   ============================================================ */
.page-head{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(26px,3.6vw,48px) var(--pad) 0;
}
.page-head h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(28px,3.8vw,48px);
  letter-spacing:.1em;
  line-height:1.2;
  margin:12px 0 10px;
}
.page-head .page-sub{
  font-size:13px;
  letter-spacing:.08em;
  color:var(--muted);
  max-width:560px;
}

.listing{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(22px,3vw,40px) var(--pad) 0;
  display:grid;
  grid-template-columns:232px 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

/* 分类导航侧栏：单击进入子分类，不是多选筛选 */
.catnav{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.catnav-title{
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:14px;
}
.catnav-up{
  display:inline-block;
  margin:-4px 0 14px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.catnav-up:hover{ color:var(--fg); }
.catnav-list li + li{ margin-top:11px; }
.catnav-list a{
  display:flex; align-items:center; gap:10px;
  /* 21px tall is below the 24px touch minimum; padding plus an equal negative margin
     widens the hit area without moving a single pixel of the layout. */
  padding:5px 0; margin:-5px 0;
  font-size:13px; letter-spacing:.04em;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.catnav-list a:hover,
.catnav-list a.is-current{ color:var(--fg); }
.catnav-list .n{ margin-left:auto; font-style:normal; font-size:11px; color:#b4b2ae; }

/* 工具栏：数量 + 排序 + 每页条数 */
.toolbar{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  gap:16px;
  padding-bottom:20px;
  margin-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--line);
}
.result-count{ font-size:12px; letter-spacing:.08em; color:var(--muted); }
.toolbar-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; }
.tool{
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.tool select{
  -webkit-appearance:none; appearance:none;
  border:0; border-bottom:1px solid var(--fg);
  background:transparent no-repeat right center / 10px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23121212' stroke-width='1.2'/%3E%3C/svg%3E");
  padding:6px 20px 6px 0;
  font-family:inherit;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:none;
  color:var(--fg);
  cursor:pointer;
  outline:none;
}

/* 三列商品网格（复用 .card） */
@media (min-width:1025px){
  .products.cols-3{ grid-template-columns:repeat(3,1fr); padding:0; }
}
@media (max-width:480px){
  .products.cols-3{ grid-template-columns:1fr; }
}

/* 分页 */
.pager{
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:6px;
  padding:clamp(40px,6vw,72px) 0 0;
}
.pager a,.pager .now{
  min-width:38px; height:38px; padding:0 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.08em;
  border:1px solid transparent;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.pager a:hover{ border-color:var(--line); }
.pager .now{ background:var(--dark); color:#fff; }
.pager .off{ color:#cfcdc9; pointer-events:none; }

@media (max-width:1024px){
  .listing{ grid-template-columns:1fr; }
  .catnav{ position:static; }
}

/* ============================================================
   14. 商品详情页
   ============================================================ */
.pdp{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(20px,3vw,44px) var(--pad) 0;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(28px,4vw,72px);
  align-items:start;
}

/* 画廊 */
.gallery-main{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--soft);
}
.gallery-main img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .55s var(--ease);
}
.gallery-main img.on{ opacity:1; }
.thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.thumb{
  width:86px; aspect-ratio:4/5;
  /* A button will not shrink below its content by default, which pushed the four
     thumbs past 320px-wide screens. */
  min-width:0;
  overflow:hidden;
  background:var(--soft);
  border:1px solid transparent;
  opacity:.62;
  transition:opacity .35s var(--ease), border-color .35s var(--ease);
}
.thumb:hover{ opacity:.9; }
.thumb.on{ opacity:1; border-color:var(--fg); }
.thumb img{ width:100%; height:100%; object-fit:cover; }

/* 右侧信息区 */
.pdp-info{ position:sticky; top:calc(var(--header-h) + 28px); }
.pdp-info h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3vw,40px);
  letter-spacing:.06em;
  line-height:1.24;
  margin:12px 0 10px;
}
.pdp-ref{
  font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.pdp-price{ font-size:17px; letter-spacing:.06em; margin:20px 0 26px; }
.pdp-stock{
  margin-left:10px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#a3592a;
}
.pdp-desc{
  font-size:13.5px; line-height:1.9;
  letter-spacing:.03em; color:#55534f;
}

.opt-row{ margin-top:28px; }
.opt-label{
  display:flex; align-items:baseline; justify-content:space-between;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  margin-bottom:13px;
}
.opt-label b{ font-weight:400; color:var(--fg); letter-spacing:.06em; text-transform:none; }
.swatches{ display:flex; gap:12px; }
.swatch{
  position:relative;
  width:28px; height:28px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);
  transition:transform .3s var(--ease);
}
.swatch::after{
  content:"";
  position:absolute; inset:-5px;
  border:1px solid transparent;
  border-radius:50%;
  transition:border-color .3s var(--ease);
}
.swatch:hover{ transform:scale(1.06); }
.swatch.on::after{ border-color:var(--fg); }

.sizes{ display:flex; flex-wrap:wrap; gap:8px; }
.size-btn{
  min-width:58px; height:44px; padding:0 14px;
  border:1px solid var(--line);
  font-size:12px; letter-spacing:.1em;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.size-btn:hover{ border-color:var(--fg); }
.size-btn.on{ background:var(--dark); color:#fff; border-color:var(--dark); }
.size-btn.out{
  color:#cfcdc9; border-color:#f0eeeb;
  text-decoration:line-through;
  pointer-events:none;
}

/* 购买操作 */
.buy-row{ display:flex; gap:10px; margin-top:32px; }
/* 心形自己是一个表单，而表单套表单会被浏览器拆开，所以两个表单在这行里平级排着。
   display:contents 让购物袋表单不占盒子，里面的步进器和按钮照常排进这一行 ——
   排版和过去只有一个盒子的样子相同。 */
.buy-form{ display:contents; }
.qty{ display:flex; align-items:center; border:1px solid var(--line); flex:none; }
.qty button{
  width:42px; align-self:stretch;
  font-size:16px; color:var(--muted);
  transition:color .3s var(--ease);
}
.qty button:hover{ color:var(--fg); }
.qty input{
  width:42px; border:0; background:transparent;
  text-align:center; font-size:13px; letter-spacing:.06em;
  outline:none;
  -moz-appearance:textfield; appearance:textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.buy-row .btn{ flex:1; text-align:center; }
@media (max-width:480px){
  /* Three controls on one line leave a thumb-width button on a small phone, so the
     bag button takes the full row underneath them. The stepper and the heart have to
     claim the 44px height themselves once the button no longer stretches the row. */
  .buy-row{ flex-wrap:wrap; }
  .buy-row .btn{ order:3; flex:1 1 100%; }
  .qty, .add-wish{ min-height:44px; }
}
.add-wish{
  flex:none; width:52px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line);
  transition:border-color .3s var(--ease);
}
.add-wish:hover{ border-color:var(--fg); }
.add-wish svg{ width:18px; height:18px; }
.add-wish.on svg{ fill:var(--dark); }

/* 服务说明 */
.pdp-meta{ margin-top:30px; border-top:1px solid var(--line); }
.pdp-meta li{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:12.5px; letter-spacing:.05em; color:var(--muted);
}
.pdp-meta svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--fg); }

/* 手风琴 */
.pdp-extras{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.acc{ margin-top:clamp(40px,6vw,72px); border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-head{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:20px 0;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.acc-head .plus{ position:relative; width:12px; height:12px; flex:none; }
.acc-head .plus::before,
.acc-head .plus::after{
  content:""; position:absolute; background:currentColor;
  transition:transform .35s var(--ease);
}
.acc-head .plus::before{ left:0; right:0; top:50%; height:1px; transform:translateY(-50%); }
.acc-head .plus::after{ top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); }
.acc-item.open .plus::after{ transform:translateX(-50%) scaleY(0); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.acc-body-inner{
  padding:0 0 24px;
  font-size:13.5px; line-height:1.95; letter-spacing:.03em; color:#55534f;
  max-width:68ch;
}
.acc-body-inner ul{ margin-top:10px; }
.acc-body-inner li{ position:relative; padding-left:16px; margin-top:7px; }
.acc-body-inner li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:5px; height:1px; background:var(--muted);
}

@media (max-width:1024px){
  .pdp{ grid-template-columns:1fr; gap:28px; }
  .pdp-info{ position:static; }
  .thumb{ width:72px; }
}

/* ============================================================
   15. 滚动渐显
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   16. Storefront additions (search, prices)
   ============================================================ */
.price-was{
  margin-left:8px;
  font-size:.85em;
  color:var(--muted);
  text-decoration:line-through;
}

.listing-search{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:340px;
}
.listing-search input[type=search]{
  flex:1;
  min-width:0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:8px 0;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--fg);
}
.listing-search input[type=search]::placeholder{ color:var(--muted); }
.listing-search input[type=search]:focus{ outline:none; border-bottom-color:var(--fg); }
.listing-search button{
  width:18px; height:18px;
  box-sizing:content-box;
  padding:13px; margin:-13px;
  color:var(--muted);
  transition:color .3s var(--ease);
}
.listing-search button:hover{ color:var(--fg); }
.listing-search svg{ width:100%; height:100%; }

.empty-state{
  padding:clamp(40px,6vw,80px) 0;
  text-align:center;
}
.empty-state p{ font-size:13.5px; color:var(--muted); margin-top:10px; }

.nav a.is-current{ color:var(--fg); }

/* ============================================================
   17. 账户：登录、注册、头部账号区
   ============================================================ */
.flash{
  max-width:var(--max);
  margin:0 auto;
  padding:16px var(--pad) 0;
  font-size:12.5px;
  letter-spacing:.08em;
}

.account{ position:relative; display:flex; align-items:center; }
.account-chip{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:0 8px;
  white-space:nowrap;
  /* A long first name must not push the wordmark off the header. */
  max-width:132px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-panel{
  position:absolute;
  top:100%; right:0;
  min-width:196px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 18px 40px -28px rgba(17,17,17,.35);
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:70;
}
.account:hover > .account-panel,
.account:focus-within > .account-panel{ opacity:1; visibility:visible; transform:none; }

.account-id{ font-size:12px; letter-spacing:.06em; margin-bottom:6px; }
.account-link{
  display:block; width:100%;
  text-align:left;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 0;
  transition:color .3s var(--ease);
}
.account-link:hover{ color:var(--fg); }

.auth{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(24px,3vw,44px) var(--pad) clamp(60px,8vw,110px);
  display:flex; justify-content:center;
}
.auth-card{ width:min(560px,100%); }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:block; }
/* One gap for every stacked pair. `.field + .field-row` was missing, so a row that
   followed a single field butted its label straight onto the underline above it. */
.field + .field,
.field + .field-row,
.field-row + .field,
.field-row + .field-row{ margin-top:22px; }
/* Two fields share a row, so the pair is spaced by the row, not by each other. */
.field-row .field{ margin-top:0; }

.field-label{
  display:block;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px;
}
/* The star marks a required field, so the form needs no sentence saying the same thing. */
.field-label .req{
  color:#9c2f2f;
  font-size:15px;
  line-height:0;
  letter-spacing:0;
  margin-left:5px;
  vertical-align:2px;
}
.field input{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:9px 0;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--fg);
}
.field input:focus{ outline:none; border-bottom-color:var(--fg); }
.field-help{ display:block; font-size:11.5px; letter-spacing:.04em; color:var(--muted); margin-top:8px; }
.field-error{ display:block; font-size:11.5px; letter-spacing:.04em; color:#9c2f2f; margin-top:8px; }

.captcha-row{ display:flex; align-items:center; gap:14px; }
.captcha-row input{ max-width:118px; }
.captcha-image{ border:1px solid var(--line); cursor:pointer; }
.captcha-refresh{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:color .3s var(--ease);
}
.captcha-refresh:hover{ color:var(--fg); }

.auth-submit{ width:100%; margin-top:34px; text-align:center; }
.auth-switch{ margin-top:24px; font-size:12.5px; color:var(--muted); text-align:center; }
.auth-switch a{ color:var(--fg); }

/* The standing way out of a locked account, above the button that opens it. */
.auth-links{ margin-top:20px; font-size:12.5px; color:var(--muted); }
.auth-links a{ color:var(--fg); }

/* A refusal is answered under the form that produced it, so the next step is never a
   page the shopper has to find on their own. */
.auth-offer{
  margin-top:26px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.auth-offer .auth-submit{ margin-top:18px; }
.auth-offer-note{ margin:0; font-size:12.5px; line-height:1.7; color:var(--muted); }
.auth-offer-note strong{ color:var(--fg); font-weight:500; }

.auth-note{ margin:0 0 26px; font-size:13.5px; line-height:1.65; color:var(--muted); }

.drawer-account{
  margin-top:30px;
  padding:22px 0 2px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
}
.drawer-account a,
.drawer-logout{
  display:block; width:100%;
  text-align:left;
  padding:7px 0;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--fg);
}
.drawer-hello{ padding:7px 0; }

@media (max-width:560px){
  .field-row{ grid-template-columns:1fr; }
  .field-row .field + .field{ margin-top:22px; }
}

/* Without scripting the reveal observer never runs, so nothing may stay hidden. */
.no-js .reveal{ opacity:1; transform:none; }

/* ============================================================
   18. 用户中心：我的资料、地址簿、订单
   ============================================================ */
.account-layout{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(22px,3vw,40px) var(--pad) clamp(60px,8vw,110px);
  display:grid;
  grid-template-columns:212px 1fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

/* 左侧就是那几个入口，不做二级菜单 */
.account-nav{ position:sticky; top:calc(var(--header-h) + 24px); }
.account-nav-title{
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:14px;
}
.account-nav a{
  display:block;
  padding:8px 12px;
  font-size:12px;
  letter-spacing:.08em;
  color:var(--muted);
  border-left:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.account-nav a:hover{ color:var(--fg); }
.account-nav .is-current{ color:var(--fg); border-left-color:var(--fg); }

.account-card{ padding:clamp(20px,2.4vw,32px); border:1px solid var(--line); }
.account-card + .account-card{ margin-top:24px; }
/* 表单卡片不铺满右栏：一行输入框太长反而读不动。 */
form.account-card{ max-width:680px; }
.account-card-title{
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:22px;
}
.addr-add{ margin-bottom:24px; }
.addr-actions{ margin-top:34px; display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; }

/* 邮箱只做展示，输入框留着是为了让访客看清自己登录的是哪个地址。 */
.field select{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:9px 0;
  font-size:14px;
  letter-spacing:.04em;
  color:var(--fg);
}
.field select:focus{ outline:none; border-bottom-color:var(--fg); }
.field input[readonly]{ color:var(--muted); }
/* JS 用 hidden 在同一个 state 的两套控件间切换。 */
[hidden]{ display:none !important; }

.addr-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:24px;
}
.addr-card{ padding:clamp(20px,2.2vw,28px); border:1px solid var(--line); }
.addr-card.is-default{ border-color:var(--fg); }
.addr-badge{
  display:inline-block;
  margin-bottom:12px;
  padding:3px 9px;
  background:var(--dark);
  color:#fff;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.addr-name{
  font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:10px;
}
.addr-lines{
  font-style:normal;
  font-size:13px;
  letter-spacing:.04em;
  line-height:1.7;
  color:var(--muted);
}
.addr-lines span{ display:block; }
.addr-phone{ margin-top:6px; color:var(--fg); }
.addr-tools{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px;
}
.addr-tools form{ display:inline; }
.link-action{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.link-action:hover{ color:var(--fg); border-bottom-color:var(--fg); }
.link-action.danger{ color:#9c2f2f; }
.link-action.danger:hover{ color:#7d2020; border-bottom-color:#7d2020; }

@media (max-width:900px){
  .account-layout{ grid-template-columns:1fr; }
  .account-nav{ position:static; }
  .account-nav ul{ display:flex; flex-wrap:wrap; gap:4px 18px; }
  .account-nav a{ padding:6px 0; border-left:0; border-bottom:1px solid var(--line); }
  .account-nav .is-current{ border-left:0; }
}

/* ============================================================
   19. 购物车
   ============================================================ */
.cart{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(22px,3vw,40px) var(--pad) clamp(60px,8vw,110px);
  display:grid;
  grid-template-columns:1fr 336px;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.cart .empty-state{ grid-column:1/-1; }
.cart-shop{ margin-top:26px; }

.cart-lines{ border-top:1px solid var(--line); }
.cart-line{
  display:grid;
  grid-template-columns:104px 1fr auto;
  gap:clamp(16px,2.4vw,32px);
  padding:26px 0;
  border-bottom:1px solid var(--line);
}
.cart-thumb{ width:104px; }
.cart-thumb img{ width:104px; aspect-ratio:4/5; object-fit:cover; }
.cart-thumb:hover{ opacity:.9; }

.cart-name{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(17px,1.5vw,21px);
  letter-spacing:.06em;
  line-height:1.3;
  margin-top:6px;
}
.cart-name a{
  display:inline-block;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.cart-name a:hover{ border-bottom-color:var(--fg); }
.cart-spec{ margin-top:7px; font-size:12.5px; letter-spacing:.1em; color:var(--muted); }
.cart-ref{ margin-top:8px; font-size:12px; letter-spacing:.06em; color:var(--muted); }

.cart-tools{ margin-top:18px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 26px; }
.cart-qty{ display:flex; align-items:center; gap:16px; }
.cart-stock{
  margin-top:12px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#9c2f2f;
}
.cart-line-total{ font-size:14px; letter-spacing:.06em; white-space:nowrap; }

/* 步进即保存，Update 只留给不跑脚本的访客 */
.cart-update{ display:none; }
.no-js .cart-update{ display:inline-block; }

.cart-summary{
  position:sticky;
  top:calc(var(--header-h) + 24px);
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--line);
}
.cart-summary-title{
  font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:18px;
}
.cart-rows{ margin-bottom:16px; }
.cart-row{
  display:flex; justify-content:space-between; gap:16px;
  padding:7px 0;
  font-size:13px; letter-spacing:.04em;
}
.cart-row dt{ color:var(--muted); }
.cart-row dd{ white-space:nowrap; }
/* 折扣是袋子里唯一的好消息，只把数字染绿，标签仍与其他行同色 */
.cart-row.is-cut dd{ color:#1f6b3a; }

.cart-total{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.cart-total b{ font-size:18px; font-weight:500; letter-spacing:.04em; }
.cart-nudge{ margin-top:14px; font-size:12px; line-height:1.65; color:var(--muted); }
.cart-checkout{ display:block; width:100%; margin-top:22px; text-align:center; }
.cart-note{
  margin-top:16px;
  font-size:11.5px; line-height:1.7; letter-spacing:.04em;
  color:var(--muted);
}

@media (max-width:1024px){
  .cart{ grid-template-columns:1fr; }
  .cart-summary{ position:static; }
}
@media (max-width:520px){
  .cart-line{ grid-template-columns:84px 1fr; }
  .cart-thumb, .cart-thumb img{ width:84px; }
  /* 合计换到第二行时不能掉回图片下面 */
  .cart-line-total{ grid-column:2; }
}

/* ============================================================
   20. 结算
   ============================================================ */
.checkout{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(22px,3vw,40px) var(--pad) clamp(60px,8vw,110px);
  display:grid;
  grid-template-columns:1fr 336px;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.checkout-form{ min-width:0; }
.checkout-card{ padding:clamp(20px,2.4vw,32px); border:1px solid var(--line); }
.checkout-card + .checkout-card{ margin-top:24px; }

/* 每种支付方式都自带算好的总额，脚本只负责切换显示 */
.pay-list{ border-top:1px solid var(--line); }
.pay-row{
  display:flex; align-items:center; gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.pay-row input{ width:15px; height:15px; flex:none; accent-color:var(--fg); }
.pay-name{ font-size:13.5px; letter-spacing:.06em; }
.pay-row.is-picked .pay-name{ font-weight:500; }
.pay-cut{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#1f6b3a;
}
.pay-total{ margin-left:auto; font-size:13.5px; letter-spacing:.06em; white-space:nowrap; }

.checkout-actions{ margin-top:34px; display:flex; align-items:center; flex-wrap:wrap; gap:14px 26px; }

.checkout-lines{ border-bottom:1px solid var(--line); margin-bottom:14px; }
.checkout-line{
  display:flex; justify-content:space-between; gap:14px;
  padding:8px 0;
  font-size:12.5px; letter-spacing:.04em;
}
.checkout-line-spec{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted); }
.checkout-line-total{ white-space:nowrap; }

/* ============================================================
   21. 订单
   ============================================================ */
.order{
  max-width:var(--max);
  margin:0 auto;
  padding:clamp(22px,3vw,40px) var(--pad) clamp(60px,8vw,110px);
  display:grid;
  grid-template-columns:1fr 336px;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.order-main{ min-width:0; }
.order-side{ position:sticky; top:calc(var(--header-h) + 24px); }
.order-lines{ border-top:1px solid var(--line); }
.order-line{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:16px 22px;
  align-items:baseline;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.order-line-name{ font-size:14px; letter-spacing:.04em; }
.order-line-spec,
.order-line-ref{ display:block; margin-top:6px; font-size:12px; letter-spacing:.06em; color:var(--muted); }
.order-line-qty{ font-size:13px; letter-spacing:.06em; color:var(--muted); white-space:nowrap; }
.order-line-total{ font-size:14px; letter-spacing:.06em; white-space:nowrap; }

.order-address{ font-style:normal; font-size:13.5px; line-height:1.85; }
.order-address span{ display:block; }
.order-fax{ margin-top:12px; font-size:12.5px; letter-spacing:.04em; color:var(--muted); }

.order-method{ margin-bottom:18px; font-size:13.5px; letter-spacing:.04em; }
.order-method-cut{
  margin-left:8px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#1f6b3a;
}

@media (max-width:1024px){
  .checkout, .order{ grid-template-columns:1fr; }
  .order-side{ position:static; }
}
@media (max-width:520px){
  /* 数量留在第一行，总额掉到第二行的右列，名称不被挤到数字下面 */
  .order-line{ grid-template-columns:1fr auto; }
  .order-line-qty{ grid-column:2; grid-row:1; }
  .order-line-total{ grid-column:2; grid-row:2; }
  .pay-row{ flex-wrap:wrap; }
  .pay-total{ flex-basis:100%; margin-left:29px; }
}

/* ============================================================
   22. 用户中心：订单历史
   ============================================================ */
.ord-head{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
}
.ord-no{ font-size:13.5px; letter-spacing:.06em; }
.ord-date{ font-size:11.5px; letter-spacing:.08em; color:var(--muted); }
.ord-status{
  margin-left:auto;
  padding:4px 10px;
  border:1px solid var(--line);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
/* 取消的单子不该和还在路上的读起来一模一样 */
.ord-status.is-off{ color:#9c2f2f; }
.ord-lines{ margin-top:14px; }
/* 合计自带一条分隔线，末行再画就成双线了 */
.ord-lines .order-line:last-child{ border-bottom:0; }
.ord-foot{ margin-top:20px; }

/* ============================================================
   23. DAILY NEW：日期子菜单
   ============================================================ */
/* 日期靠左、件数靠右，和左侧栏 .catnav-list 是同一读法 */
.nav-sub .daily-list a,
.drawer-nav .daily-list a{
  display:flex; align-items:baseline; gap:12px;
}
.daily-list .n{
  margin-left:auto;
  font-style:normal;
  font-size:10.5px; letter-spacing:.08em;
  color:#b4b2ae;
}

/* ============================================================
   24. 头部 mega 面板：二级成行，三级挂在二级之后，行多了横向分列
   ============================================================ */
/* 面板从菜单项底下往右开，宽度上限先给左边的 logo + 导航留出位置（240px）；
   列数不写死：装得下几列 200px 就排几列，屏幕变窄时自己收回三列、两列。
   靠右的菜单项还是可能放不下，shop.js 第 16 节再把面板往左挪一点 */
.nav-sub.is-wide{ width: min(100vw - 240px, var(--cols, 1) * 248px); }
.nav-sub.is-wide .mega,
.nav-sub.is-wide .daily-list{
  column-width: 200px;
  column-gap: 34px;
}
/* 一组标题和它底下的行不能被列宽切断 */
.mega > *,
.daily-list > li{ break-inside: avoid; }
.mega > * + *{ margin-top:14px; }

/* 组标题要压过 .nav-sub a 的灰色：那条是「类+元素」，单写 .mega-title 抢不过它，
   所以照抄一层 .nav-sub 再改色。二级近黑、三级留灰，两层一眼就能分开 */
.nav-sub .mega-title{
  display:block;
  padding:7px 0 6px;
  border-bottom:1px solid var(--line);
  color:var(--fg);
  font-weight:600;
}
/* 三级是「读」的，不是「扫」的：不再全大写，字号略大、字距收紧 */
.mega-list a{
  padding:5px 0;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
}

/* ============================================================
   25. 单页面正文：后台富文本写出来的那一叠标签的排版
   ============================================================ */
/* 整栏居中：标题和正文共用同一条 760px 窄栏。只把正文挪到中间会跟贴着左边距的
   h1 断开，看着是两块，所以 .page-doc-head 把 .page-head 的容器宽度也收到同一档。
   字号和详情页折叠里的说明文字同一档 */
.page-doc-head{ max-width:760px; }
.page-body{
  max-width:760px;
  margin:0 auto;
  padding:clamp(26px,3.4vw,44px) var(--pad) 0;
  font-size:14px;
  line-height:2;
  letter-spacing:.03em;
  color:#55534f;
}
.page-body > * + *{ margin-top:20px; }
/* 富文本里 operator 用的是二级和三级小标题，都比正文重，但都不跟 h1 抢衬线 */
.page-body h2{
  margin-top:44px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--fg);
}
.page-body h3{
  margin-top:30px;
  font-size:15px;
  letter-spacing:.04em;
  color:var(--fg);
}
.page-body a{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:3px;
  transition:opacity .3s var(--ease);
}
.page-body a:hover{ opacity:.55; }
/* 通用重置把 ul 的记号去了，正文里要按列表读回来 */
.page-body ul,
.page-body ol{ padding-left:22px; }
.page-body ul{ list-style:disc; }
.page-body ol{ list-style:decimal; }
.page-body li{ margin-top:8px; }
.page-body li::marker{ color:var(--muted); }
.page-body blockquote{
  border-left:2px solid var(--line);
  padding-left:20px;
  color:var(--fg);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.9;
}
.page-body strong{ color:var(--fg); }

@media (max-width:640px){
  .page-body{ font-size:13.5px; line-height:1.9; }
}

/* ============================================================
   26. 错误页：403 / 404 / 419 / 429 / 500 / 503 共用的一屏
   ============================================================ */
/* 这些视图不套前台 layout：layout 每页都要查分类和单页面，还要读会话里的购物袋，
   而报错常常正是这些东西读不出来。所以整块自带排版 —— 站名用 §3 的 .logo，
   按钮用 §1，页脚用 §10，只有中间这段是新写的。 */
.err{
  display:flex;
  flex-direction:column;
  /* 内容不足时也撑满一屏，页脚沉底。手机带地址栏时只有 dvh 不溢出，
     前一行是给不认 dvh 的老浏览器兜底 */
  min-height:100vh;
  min-height:100dvh;
}
.err-head{ padding:clamp(26px,4vw,44px) var(--pad); }
/* 中间这栏自己把高度吃掉，消息就落在视觉中心，而不是贴着站名往下堆 */
.err-main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:clamp(30px,6vh,72px) var(--pad);
  text-align:center;
}
/* 状态码是装饰：大、轻、衬线，读进来的是「这是一页」，数字本身不用看清 */
.err-code{
  font-family:var(--serif);
  font-size:clamp(58px,8.6vw,104px);
  font-weight:400;
  line-height:1;
  letter-spacing:.06em;
  color:#cfcdc9;
}
.err-title{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.1em;
  line-height:1.25;
}
.err-copy{
  max-width:520px;
  font-size:13.5px;
  line-height:1.9;
  letter-spacing:.04em;
  color:#55534f;
}
.err-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:12px;
}
/* .footer 的 margin-top 是给跟在长内容后面的那口气，这里高度已由 .err-main 撑满，
   再留就凭空多出一段滚动 */
.err .footer{ margin-top:0; }

@media (max-width:480px){
  /* 两只按钮并排到 320px 就放不下，改成上下通栏 */
  .err-actions{ flex-direction:column; align-items:stretch; }
  .err-actions .btn{ padding-left:24px; padding-right:24px; text-align:center; }
}

/* ============================================================
   27. 收藏：心形表单与客户中心的收藏页
   ============================================================ */
/* 心形是一个真表单（见 partials/wish.blade.php）：收藏是写操作，不该做成能被爬虫跟着的链接。
   它不占盒子，按钮被算作所在那一行的成员，卡片右上角和详情页购买行都照原样排版。 */
.wish-form{ display:contents; }

/* 收藏页用地址簿那套格子，只是内容换成商品：一行读起来比订单卡片轻。 */
.saved-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:24px;
}
.saved-card{ padding:clamp(14px,1.8vw,20px); border:1px solid var(--line); }
.saved-media{ display:block; aspect-ratio:4/5; overflow:hidden; background:var(--soft); }
.saved-media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .9s var(--ease);
}
.saved-card:hover .saved-media img{ transform:scale(1.045); }
.saved-name{ margin-top:14px; font-size:13px; font-weight:400; letter-spacing:.06em; line-height:1.5; }
.saved-meta{ margin-top:6px; font-size:11px; letter-spacing:.08em; line-height:1.6; color:var(--muted); }
.saved-price{ margin-top:8px; font-size:12.5px; letter-spacing:.06em; }
.saved-tools{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px;
}
.saved-tools form{ display:inline; }