:root{
    --cream:#f3ecdc;
    --paper:#f7f1e2;
    --ink:#3c3327;
    --ink-soft:#6f6555;
    --ink-faint:#958a76;
    --line:#d9cbae;
    --line-soft:#e4d9c2;
    --blue:#56689e;
    --blue-deep:#48588a;
    --rust:#b06a52;
    --brass-d:#6f5d3f;
    --kraft-ink:#4d3d26;
    --kraft-soft:#6e5c40;
    --kraft-edge:#c4a877;
    --shadow:rgba(86,70,42,.16);
    --mono:"Courier Prime","SFMono-Regular",ui-monospace,Menlo,monospace;
    --stamp-blue:#5f6c99;
    --stamp-red:#b65c47;
    --u:max(0.72px, min(calc(100vw / 1920), calc(100svh / 1220)));
    --uw:max(0.72px, calc(100vw / 1920));
    --pad:clamp(24px, 3.6vw, max(48px, calc(48 * var(--uw))));
    --lanew:max(1320px, calc(1788 * var(--uw)));
  }

  *{box-sizing:border-box;}
  html,body{overflow-x:clip;}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
  #new-arrivals,#collections{scroll-margin-top:3vh;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:"EB Garamond",Georgia,serif;
    font-size:16px;
    line-height:1.6;
    position:relative;
  }
  /* paper grain overlay */
  body::before{
    content:"";
    position:fixed;inset:0;pointer-events:none;z-index:9999;
    opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .lane{
    width:100%;
    max-width:var(--lanew);
    margin:0 auto;
    position:relative;
    padding:0 var(--pad);
  }

  a{color:inherit;text-decoration:none;}
  h1,h2,h3,h4{margin:0;font-weight:600;}
  img{display:block;}

  .flower{width:1em;height:1em;display:inline-block;vertical-align:-.12em;}

  /* ============ HERO v8 · FULL-BLEED PHOTO + GLASS CARD ============ */
  .v8hero{width:100%;position:relative;z-index:2;}
  .v8nav{
    display:flex;align-items:center;gap:clamp(18px,3vw,48px);
    min-height:clamp(56px,4.6vw,84px);
    padding:clamp(10px,1vw,16px) clamp(22px,5vw,96px);
    background:rgba(246,238,222,.86);border-bottom:none;
    position:relative;z-index:5;
  }
  .v8brand{
    display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none;
    font-family:"Cormorant Garamond";font-weight:600;letter-spacing:.5px;color:var(--ink);
    font-size:clamp(24px,2vw,34px);
  }
  .v8brand img{width:clamp(20px,1.4vw,26px);height:auto;}
  .v8links{display:flex;gap:clamp(18px,2.6vw,46px);flex:1 1 auto;justify-content:center;}
  .v8links a{
    font-family:"EB Garamond";font-size:clamp(15px,1vw,19px);color:var(--ink);
    text-decoration:none;letter-spacing:.3px;padding-bottom:5px;
    background:linear-gradient(var(--blue),var(--blue)) center 100% / 0% 2px no-repeat;
    transition:color .2s ease, background-size .34s cubic-bezier(.34,1.56,.64,1);
  }
  .v8links a:hover{color:var(--blue-deep);background-size:100% 2px;}
  .v8links a.active{color:var(--ink);background:linear-gradient(var(--ink),var(--ink)) center 100% / 62% 2px no-repeat;}
  .v8links a.active:hover{color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink));background-size:100% 2px;}
  .v8icons{display:flex;gap:clamp(15px,1.4vw,26px);align-items:center;flex:0 0 auto;}
  /* auth 判定前隐藏动作区(留占位不抖动),判定后淡入,消除首页图标先闪后变(首页不引用 site.css,规则须内联) */
  .v8icons:not(.auth-ready){visibility:hidden;}
  .v8icons.auth-ready{animation:v8AuthIn .25s ease both;}
  @keyframes v8AuthIn{from{opacity:0}to{opacity:1}}
  .v8icons a{color:var(--ink);display:inline-flex;transition:transform .25s cubic-bezier(.34,1.56,.64,1), color .2s ease;}
  .v8icons a:hover{color:var(--blue-deep);transform:translateY(-2px) scale(1.14);}
  .v8icons a:active{transform:translateY(0) scale(.94);}
  .v8icons svg{width:clamp(20px,1.4vw,24px);height:clamp(20px,1.4vw,24px);}
  /* code review 2026-08-29 发现:游客态 api.js setGuestHeader() 会把 Log in/Sign up 注入 .v8icons,
     但本页(不引用 site.css)从没写过 .nav-auth 规则,游客访问首页看到的是完全无样式的裸文本链接,
     其它 26 个页面都是胶囊按钮。照抄 site.css:421-426 的 .nav-icons .nav-auth,选择器换成 .v8icons
     ——同样要用两个 class 提权(0,0,2,0),否则会被上面权重(0,0,1,1)的裸 .v8icons a 压过 */
  .v8icons .nav-auth{display:inline-flex;align-items:center;font-family:"EB Garamond";font-size:clamp(13px,1vw,15px);font-weight:600;letter-spacing:.01em;padding:8px 16px;border-radius:999px;color:var(--ink);border:1px solid var(--line);white-space:nowrap;transition:background .2s,color .2s,border-color .2s,transform .2s;}
  .v8icons .nav-auth:hover{border-color:var(--blue);color:var(--blue-deep);transform:translateY(-1px);}
  .v8icons .nav-auth--fill{background:var(--blue);color:#fdf8ec;border-color:var(--blue);}
  .v8icons .nav-auth--fill:hover{background:var(--blue-deep);color:#fff;transform:translateY(-1px);}
  .v8-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  /* hamburger — hidden on desktop, becomes the nav on phones */
  .v8burger{
    display:none;flex:0 0 auto;width:42px;height:42px;padding:0;cursor:pointer;
    border:1px solid var(--line);border-radius:9px;background:rgba(248,242,228,.5);
    flex-direction:column;align-items:center;justify-content:center;gap:5px;
    transition:.2s;
  }
  .v8burger:hover{background:rgba(248,242,228,.9);}
  .v8burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:.25s ease;}
  .v8burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .v8burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .v8burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  /* ====== HERO BASE (< 1300px) · FROSTED-GLASS CARD (v1) ======
     The photo lives on its own layer so ONLY the image dissolves; the glass
     card (z-index:3) stays opaque. A bridge background (v8photobg, z-index:0)
     blends the photo's warm table tone into the page cream. Heights and the
     dissolve gradient are sized by JS so the photo's bottom edge lands on the
     New Arrivals heading baseline at every viewport. */
  .v8stage{
    position:relative;height:min(84vh,860px);min-height:500px;
    overflow:visible;
  }
  .v8photobg{
    position:absolute;left:0;right:0;top:0;
    z-index:0;pointer-events:none;
  }
  .v8photo{
    position:absolute;left:0;right:0;top:0;height:100%;
    z-index:1;pointer-events:none;
    background:
      url("img/hero-handdrawn-paper.webp") 58% 40%/cover no-repeat;
  }
  .v8card{
    position:absolute;z-index:3;top:50%;transform:translateY(-50%);
    left:clamp(20px,5.5vw,112px);width:min(440px,40vw);min-width:344px;
    background:rgba(246,238,224,.42);
    backdrop-filter:blur(26px) saturate(1.5) brightness(1.06);
    -webkit-backdrop-filter:blur(26px) saturate(1.5) brightness(1.06);
    border:1px solid rgba(255,255,255,.5);border-radius:22px;
    padding:clamp(34px,3.2vw,56px) clamp(32px,3vw,52px) clamp(34px,3.2vw,52px);
    box-shadow:0 24px 60px rgba(70,45,20,.16), inset 0 1px 0 rgba(255,255,255,.6);
    --step:clamp(18px,2.1vw,34px);
  }
  .v8eyebrow{
    margin:0 0 clamp(15px,1.4vw,21px);
    font-family:var(--mono);font-size:clamp(10px,.72vw,12px);
    letter-spacing:.32em;text-transform:uppercase;color:#9a7b46;
  }
  .v8card h1{
    font-family:"Cormorant Garamond";font-weight:600;
    font-size:clamp(40px,3.5vw,62px);line-height:1.04;letter-spacing:.3px;
    color:#3a3025;margin:0;text-wrap:balance;
  }
  .v8divider{display:flex;align-items:center;gap:14px;width:min(260px,82%);margin:clamp(20px,1.8vw,28px) 0 clamp(16px,1.4vw,20px);margin-left:0;}
  .v8divider span{flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(120,95,58,.16),rgba(120,95,58,.34),rgba(120,95,58,.16));}
  .v8divider span:last-child{display:block;}
  .v8divider svg{flex:0 0 auto;width:18px;height:18px;opacity:.92;}
  .v8lead{
    font-family:"EB Garamond";font-size:clamp(15px,1.05vw,19px);
    color:#6f6453;line-height:1.62;margin:0;max-width:25em;text-wrap:pretty;letter-spacing:.012em;
  }
  .v8cta{display:flex;flex-direction:column;align-items:stretch;gap:clamp(11px,.9vw,15px);margin-top:clamp(24px,2.2vw,34px);margin-left:0;}
  .v8btn{
    display:inline-flex;align-items:center;justify-content:center;gap:16px;width:100%;
    text-decoration:none;cursor:pointer;box-sizing:border-box;
    font-family:"EB Garamond";font-size:clamp(15px,1.05vw,18px);
    padding:clamp(13px,1.05vw,17px) clamp(20px,1.7vw,28px);border-radius:8px;letter-spacing:.04em;
    border:1px solid transparent;transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;
  }
  .v8btn .arr{transition:transform .2s;font-size:1.05em;}
  .v8btn:hover .arr{transform:translateX(4px);}
  .v8btn--fill{background:#b17b3d;color:#fff7e8;box-shadow:0 10px 22px -13px rgba(95,62,22,.5);}
  .v8btn--fill:hover{background:#9f6d33;transform:translateY(-1px);box-shadow:0 14px 26px -16px rgba(95,62,22,.55);}
  .v8btn--fill:active{transform:translateY(0);}
  .v8btn--outline{background:rgba(255,249,236,.5);color:#6a543a;border-color:rgba(120,95,58,.34);box-shadow:none;}
  .v8btn--outline:hover{background:rgba(255,249,236,.78);border-color:rgba(120,95,58,.5);}
  @media(max-width:880px){
    .v8nav{flex-wrap:wrap;gap:12px;}
    .v8links{order:3;width:100%;justify-content:flex-start;gap:18px;overflow-x:auto;}
  }
  @media(max-width:760px){
    .v8stage{height:min(78vh,680px);min-height:460px;}
    .v8photo{background-color:#fff2de;background-size:auto 52%;background-position:right top;}
    .v8card{left:16px;right:16px;width:auto;min-width:0;top:auto;bottom:20px;transform:none;padding:26px 24px;background:rgba(246,238,224,.96);backdrop-filter:none;-webkit-backdrop-filter:none;}
    .v8card h1{font-size:clamp(34px,8vw,48px);}
    .v8lead{font-size:clamp(15px,3.6vw,18px);}
  }

  /* ====== HERO DESKTOP (≥ 1300px) · OPEN TEXT OVER FULL-BLEED PHOTO (v2) ======
     Above 1300px the glass card opens up into a free typographic group placed
     over a full-viewport photo; a soft cream "air-light" lifts the text. The
     photo still dissolves into the page (overflow stays visible for the JS). */
  @media(min-width:1300px){
    .v8stage{
      height:calc(100dvh - clamp(72px,6.2vw,124px));min-height:620px;
      overflow:visible;
    }
    .v8stage::before{
      content:"";position:absolute;z-index:2;pointer-events:none;
      left:clamp(-40px,-2vw,-18px);top:clamp(72px,10vh,126px);
      width:clamp(520px,48vw,820px);height:clamp(500px,70vh,780px);
      background:
        radial-gradient(ellipse at 24% 42%,
          rgba(255,249,235,.68) 0%,
          rgba(252,241,220,.38) 28%,
          rgba(248,231,200,.11) 48%,
          rgba(248,231,200,0) 70%);
    }
    .v8card{
      top:clamp(130px,17vh,190px);transform:none;
      left:clamp(48px,5.8vw,120px);width:min(520px,34vw);min-width:360px;
      background:none;border:none;border-radius:0;padding:0;box-shadow:none;
      backdrop-filter:none;-webkit-backdrop-filter:none;
    }
    .v8card h1{font-size:clamp(64px,5.4vw,108px);line-height:.98;letter-spacing:.1px;}
    .v8divider{width:min(300px,68%);margin:clamp(24px,2vw,32px) 0 clamp(18px,1.5vw,22px);}
    .v8lead{font-size:clamp(22px,1.55vw,32px);line-height:1.58;letter-spacing:.01em;}
    .v8cta{align-items:flex-start;margin-top:clamp(26px,2.1vw,34px);}
    .v8btn{justify-content:center;width:auto;min-width:220px;font-size:clamp(17px,1.15vw,22px);padding:clamp(13px,1vw,18px) clamp(28px,2.1vw,42px);}
    .v8btn--outline{min-width:200px;padding-left:clamp(22px,1.55vw,30px);padding-right:clamp(22px,1.55vw,30px);background:rgba(255,248,235,.34);border-color:rgba(120,95,58,.24);}
    .v8btn--outline:hover{background:rgba(255,248,235,.52);border-color:rgba(120,95,58,.38);}
  }

  /* ============ SECTION HEAD · SHOP LEDGER ============ */
  .section{padding:calc(66 * var(--u)) 0 calc(68 * var(--u));}
  /* New Arrivals stays in its normal flow position, but its heading, subtitle
     and link sit ABOVE the hero photo (which has hero z-index:2) so the text
     is never touched by the photo's fade — the photo simply dissolves behind it. */
  .new-arrivals .shop-head{position:relative;z-index:3;}
  .shop-head{display:flex;align-items:flex-end;gap:calc(26 * var(--u));border-bottom:1px solid var(--line-soft);padding-bottom:calc(37 * var(--u));}
  .sh-left .sh-kicker{display:block;font-family:var(--mono);font-size:max(9.5px, calc(11 * var(--u)));letter-spacing:.3em;color:var(--ink-faint);text-transform:uppercase;}
  .sec-title{
    font-family:"Cormorant Garamond";
    font-size:max(28px, calc(40 * var(--u)));font-weight:600;letter-spacing:.3px;
    line-height:1;
    display:inline-flex;align-items:baseline;gap:calc(22 * var(--u));
    margin-top:4px;
  }
  .sec-title .flower{width:calc(22 * var(--u));height:calc(22 * var(--u));}
  .shop-head .sec-sub{color:var(--ink-soft);font-size:max(13px, calc(15 * var(--u)));margin:0;}
  .more-link{
    position:relative;
    font-size:max(14px, calc(16.5 * var(--u)));color:#3e3322;
    display:inline-flex;align-items:center;gap:calc(13 * var(--u));
    margin:0 0 4px;margin-left:auto;
    padding:calc(9 * var(--u)) calc(28 * var(--u)) calc(10 * var(--u));
    border:1px solid #ab8e5e;border-radius:calc(10 * var(--u));
    background:#ead9b4;
    box-shadow:0 4px 10px -3px rgba(86,70,42,.28), 0 1px 2px rgba(86,70,42,.18);
    transition:.2s;white-space:nowrap;
  }
  .more-link::before{
    content:"";position:absolute;inset:calc(5 * var(--u));
    border:1px solid #c4aa7d;border-radius:calc(6 * var(--u));
    pointer-events:none;
  }
  .more-link .arr{font-size:1.1em;transition:transform .2s;display:inline-block;}
  .more-link:hover{background:#eedfbe;border-color:#9d8152;box-shadow:0 6px 14px -4px rgba(86,70,42,.32), 0 1px 2px rgba(86,70,42,.18);animation:tagwobble .62s cubic-bezier(.36,1.5,.5,1);transform-origin:18% 50%;}
  .more-link:hover .arr{animation:arrhop .55s ease;}
  .more-link:active{background:#e5d3aa;box-shadow:0 2px 6px -2px rgba(86,70,42,.25);transform:scale(.95,.97);}
  .more-short{display:none;}
  @media(max-width:449px){
    /* 两处 more-link 同步缩短，保留既有 flex-wrap 作为 overflow-x:clip 的最后保险。 */
    .more-full{display:none;}
    .more-short{display:inline;}
  }
  @keyframes tagwobble{
    0%{transform:rotate(0) scale(1);}
    25%{transform:rotate(-2deg) scale(1.05,.95);}
    50%{transform:rotate(1.4deg) scale(.98,1.03);}
    72%{transform:rotate(-.7deg) scale(1.02,.99);}
    100%{transform:rotate(0) scale(1);}
  }
  @keyframes arrhop{
    0%,100%{transform:translateX(0);}
    40%{transform:translateX(5px) scale(1.15);}
    70%{transform:translateX(2px);}
  }
  @media(prefers-reduced-motion:reduce){
    .sbtn.fav:hover svg,.sbtn.fav.on svg,.sbtn.bag:hover svg,.more-link:hover,.more-link:hover .arr{animation:none;}
  }

  /* ============ COLLECTIONS · CARD WALL ============ */
  /* ============ COLLECTIONS · SERIES WALL ============ */
  .colwall{
    --colpad:clamp(16px,1.6vw,30px);
    position:relative;margin-top:clamp(16px,1.6vw,26px);
    padding:var(--colpad);
    background:url("../_ds/myosorie-design-system-9bd9b895-dce4-461e-93ed-d4f5a1cf0616/assets/textures/tex-cork-ref.webp") #c98f4a;
    background-size:72px 560px;
    border-radius:clamp(12px,1.1vw,18px);overflow:hidden;
    box-shadow:
      inset 0 2px 0 #ffe9bf4d,
      inset 0 0 0 1px #7e521f4d,
      inset 0 -26px 34px -30px #5e3a128c,
      0 38px 60px -36px rgba(80,52,20,.6);
  }
  .coltop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.16fr);gap:clamp(14px,1.2vw,22px);align-items:stretch;}
  .colright{display:flex;flex-direction:column;gap:clamp(14px,1.2vw,22px);}
  .crow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.1vw,20px);}
  /* 系列数 <5 时的成型排版(JS 按数量给 #colTop 挂 n1–n4;≥5 走默认 2×2):
     n4=右下一张通栏宽卡;n3=右侧两张宽卡纵叠;n2=双大卡对等并排;n1=单大卡通栏 hero */
  .coltop.n1{grid-template-columns:1fr;}
  .coltop.n1 .cfeat{min-height:clamp(340px,42vw,540px);}
  .coltop.n2{grid-template-columns:1fr 1fr;}
  .coltop.n2 .cfeat{min-height:clamp(320px,38vw,500px);}
  .crow.crow-one{grid-template-columns:1fr;}
  /* 通栏宽卡:照片比率减半,高度与同列小卡协调(小卡是半宽 46.25%) */
  .ccell.cwide .ccell-photo{padding-bottom:calc(24% + 7px);}
  .cpin{
    position:absolute;z-index:6;top:calc(clamp(7px,.65vw,11px) - 7px);left:50%;transform:translateX(-50%);
    width:clamp(13px,1vw,17px);height:clamp(13px,1vw,17px);border-radius:50%;
    background:radial-gradient(circle at 36% 30%, #f6e3ac 0%, #d2a857 42%, #946a2c 78%, #6f4e1d 100%);
    box-shadow:0 3px 4px -1px rgba(40,24,8,.55), inset 0 1px 1px rgba(255,247,214,.85), inset 0 -2px 2px rgba(74,48,14,.55);
  }
  #collections .shop-head{max-width:none;}
  #collections.section{padding-top:max(28px, calc(46 * var(--u)));padding-bottom:max(30px, calc(48 * var(--u)));}
  #collections .shop-head{padding-bottom:max(2px, calc(clamp(20px,1.9vw,30px) - 30px));}
  .cseries{
    position:relative;
    background:#fbf4e1;
    border:1px solid #e0d0ac;
    border-radius:clamp(10px,.85vw,15px);overflow:hidden;
    box-shadow:
      inset 0 1px 0 #ffffffcc,
      2px 2px 4px -2px rgba(40,24,8,.38),
      0 14px 26px -20px rgba(40,24,8,.5);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .cseries:hover{transform:translateY(-3px);box-shadow:inset 0 1px 0 #ffffffcc,2px 2px 4px -2px rgba(40,24,8,.38),0 22px 40px -22px rgba(40,24,8,.55);}
  .cfeat{display:flex;flex-direction:column;padding:clamp(9px,.8vw,13px) clamp(11px,.95vw,16px) clamp(13px,1.1vw,18px);}
  .cfeat-photo{position:relative;flex:1 1 0;min-height:0;border-radius:clamp(8px,.7vw,12px);overflow:hidden;}
  .cfeat-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transition:transform .4s ease;}
  .cfeat:hover .cfeat-photo img{animation:photoSquish .55s cubic-bezier(.34,1.56,.64,1);}
  .cfeat-body{padding:clamp(16px,1.5vw,26px) clamp(7px,.6vw,12px) clamp(8px,.6vw,12px);display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:clamp(16px,1.5vw,28px);}
  .cfeat-body h3{grid-column:1 / -1;font-family:"Cormorant Garamond";font-weight:600;font-size:max(28px, calc(40 * var(--uw)));line-height:1.04;letter-spacing:.3px;color:var(--ink);margin:0;text-wrap:balance;}
  .cfeat-hr{grid-column:1 / -1;height:1px;background:var(--line);border:0;margin:clamp(12px,1.1vw,20px) 0;width:100%;}
  .cfeat-body p{grid-column:1;font-family:"EB Garamond";font-size:max(15px, calc(19 * var(--uw)));line-height:1.55;color:var(--ink-soft);margin:0;text-wrap:pretty;}
  .cfeat-badge{
    position:absolute;z-index:3;top:0;left:0;
    background:#6f5840;color:#f7efdb;
    font-family:"EB Garamond";font-weight:600;
    font-size:max(13px, calc(16 * var(--uw)));letter-spacing:.1em;text-transform:uppercase;
    padding:clamp(8px,.8vw,12px) clamp(16px,1.4vw,24px);
    border-radius:0 0 clamp(10px,.9vw,14px) 0;
    box-shadow:0 7px 16px -7px rgba(40,24,8,.55);
  }
  .cgrid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,1.1vw,20px);}
  .ccell{display:flex;flex-direction:column;padding:calc(clamp(26px,2.1vw,34px) - 7px) clamp(9px,.7vw,13px) clamp(9px,.7vw,13px);}
  .ccell-photo{position:relative;border-radius:clamp(9px,.7vw,14px);overflow:hidden;height:0;padding-bottom:calc(46.25% + 7px);}
  .ccell-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
  .ccell:hover .ccell-photo img{animation:photoSquish .55s cubic-bezier(.34,1.56,.64,1);}
  /* shared: a soft “poke” when you hover a collectible — squashes once and settles, like a squishy */
  @keyframes photoSquish{
    0%{transform:scale(1,1);}
    30%{transform:scale(1.04,.95);}
    60%{transform:scale(.985,1.025);}
    100%{transform:scale(1,1);}
  }
  @media(prefers-reduced-motion:reduce){
    .cfeat:hover .cfeat-photo img,.ccell:hover .ccell-photo img,.ab-card:hover .ab-card-photo img{animation:none;}
  }
  .ccell-body{padding:clamp(11px,.9vw,16px) clamp(8px,.6vw,13px) clamp(11px,.9vw,16px) clamp(9px,.62vw,13px);display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:clamp(10px,1vw,18px);row-gap:clamp(3px,.3vw,6px);}
  .ccell-body h4{grid-column:1;font-family:"Cormorant Garamond";font-weight:600;font-size:max(18px, calc(24 * var(--uw)));letter-spacing:.2px;color:var(--ink);margin:0;}
  .ccell-body p{grid-column:1;font-family:"EB Garamond";font-size:max(13px, calc(16 * var(--uw)));color:var(--ink-soft);line-height:1.4;margin:0;text-wrap:pretty;}
  .cseries-btn{
    position:relative;display:inline-flex;align-items:center;gap:11px;align-self:flex-start;
    font-family:"EB Garamond";color:#3e3322;text-decoration:none;white-space:nowrap;
    background:#f2e8d2;border:1px solid #cdb487;border-radius:10px;
    box-shadow:0 3px 8px -3px rgba(86,70,42,.2), 0 1px 2px rgba(86,70,42,.12);
    transition:.2s;
  }
  .cseries-btn .arr{font-size:1.1em;transition:transform .2s;display:inline-block;}
  .cseries-btn:hover{background:#f9f1e0;border-color:#bda06f;box-shadow:0 6px 13px -4px rgba(86,70,42,.26), 0 1px 2px rgba(86,70,42,.14);transform:translateY(-1px);}
  .cseries-btn:hover .arr{transform:translateX(4px);}
  .cseries-btn:active{background:#ece0c6;box-shadow:0 2px 6px -2px rgba(86,70,42,.2);transform:scale(.97);}
  .cfeat-body .cseries-btn{grid-column:2;align-self:center;margin:0;font-size:max(14px, calc(17 * var(--uw)));padding:clamp(10px,.8vw,14px) clamp(18px,1.4vw,28px);}
  .ccell-body .cseries-btn{grid-column:2;grid-row:1 / 3;align-self:center;margin:0;font-size:max(12px, calc(15 * var(--uw)));padding:clamp(7px,.5vw,10px) clamp(13px,.95vw,17px);}
  @media(max-width:980px){
    .coltop{grid-template-columns:1fr;}
    /* code review 2026-08-29:.coltop.n2(两个选择器,权重0,0,2,0)比这条裸 .coltop(0,0,1,0)高,
       之前没在媒体查询里单独覆盖 n2,导致精选恰好 2 个系列时窄屏永远卡在双列不收
       (.coltop.n1 本来就是 1fr,跟这里目标值相同,不受影响,不用一并覆盖) */
    .coltop.n2{grid-template-columns:1fr;}
    .cfeat{min-height:clamp(380px,52vw,520px);}
  }
  @media(max-width:1214px){
    /* <=1214px 隐藏整节 About，避免窄版留下空洞；fable 已核实无锚点/ARIA 依赖。 */
    section#about{display:none;}
  }

  @media(max-width:600px){
    .crow{grid-template-columns:1fr;}
    .cfeat-panel{top:auto;bottom:14px;right:14px;left:14px;width:auto;transform:none;padding:22px 20px;}
  }

  /* ============ EXHIBITION · WOODEN SHELF ============ */
  .shelfunit{position:relative;margin-top:clamp(30px,3.6vw,48px);--shpad:clamp(20px,2.4vw,38px);}
  .corkboard{
    position:relative;
    background:url("../_ds/myosorie-design-system-9bd9b895-dce4-461e-93ed-d4f5a1cf0616/assets/textures/tex-cork-ref.webp") #c98f4a;
    background-size:72px 560px;
    border-radius:clamp(10px,1.1vw,16px);
    padding:max(4px, calc(var(--shpad) - 20px)) var(--shpad) 0;
    box-shadow:
      inset 0 2px 0 #ffe9bf4d,
      inset 0 0 0 1px #7e521f4d,
      inset 0 -26px 34px -30px #5e3a128c,
      0 38px 60px -36px rgba(80,52,20,.6);
  }
  .shelfrow{
    /* 不设 z-index:一旦设了,本行就成为层叠上下文,里面卡片的 z-index 再也无法与
       木条(.plank.mid z-index:2)比较——这正是 hover 只能写成 `.shelfrow:has(.scard:hover)`
       把整行一起抬起来的原因(2026-09-05 修:整行抬起会让该行全部卡片一起盖住下方内容)。
       现在层级由 .plank.base(0) < .scard(1) < .plank.mid(2) < .scard:hover(3) 直接排定。 */
    position:relative;
    --shelfvis:6;
    --shelfgap:max(12px, calc(22.5 * var(--uw)));
    display:grid;grid-template-columns:repeat(var(--shelfvis),1fr);
    gap:var(--shelfgap);
    margin-bottom:calc(5px - clamp(3px,.4vw,6px));
  }
  /* 窄屏货架(≤1560):不再隐藏超出的商品,改为可左右滑动单行;各断点 --shelfvis
     控制可见整张数(维持原排版张数不露半卡,2026-08-20 用户拍定),超出部分靠滑动查看 */
  @media(max-width:1560px){
    .shelfrow{
      --shelfvis:5;
      display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
      scrollbar-width:none; /* 藏掉网页感滚动条:木框内缘阴影、小把手与触屏横扫共同提示可滑 */
    }
    .shelfrow::-webkit-scrollbar{display:none;}
    .shelfrow .scard{
      flex:0 0 calc((100% - (var(--shelfvis) - 1) * var(--shelfgap)) / var(--shelfvis));
      scroll-snap-align:start;
    }
  }
  /* ── 货架滑轨:每层货物独立滑动,翻页扣嵌在木框与陈列区的交界处 ── */
  .shelflayer{position:relative;}
  .shelflayer::before,.shelflayer::after{
    content:"";position:absolute;z-index:3;top:8%;bottom:8%;width:var(--shpad);
    pointer-events:none;opacity:0;transition:opacity .18s ease;
  }
  .shelflayer::before{left:calc(-1 * var(--shpad));background:linear-gradient(90deg,rgba(78,46,14,.2),rgba(225,191,132,.08));}
  .shelflayer::after{right:calc(-1 * var(--shpad));background:linear-gradient(270deg,rgba(78,46,14,.2),rgba(225,191,132,.08));}
  .shelflayer.has-more-left::before,.shelflayer.has-more-right::after{opacity:1;}
  .shelf-carve{
    position:absolute;z-index:4;top:50%;transform:translateY(-50%);
    width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;
    color:rgba(70,41,14,.68);display:flex;align-items:center;justify-content:center;
    transition:color .18s ease;
  }
  .shelf-carve::before{
    content:"";position:absolute;width:20px;height:30px;border:1px solid rgba(92,58,21,.24);border-radius:8px;
    background:rgba(225,191,132,.28);
    box-shadow:inset 1px 0 rgba(255,232,190,.2),inset -1px 0 rgba(67,39,12,.08);
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
  }
  .shelf-carve svg{position:relative;z-index:1;width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
  .shelf-carve:hover{color:rgba(63,37,11,.86);}
  .shelf-carve:hover::before{
    background:rgba(225,191,132,.38);border-color:rgba(92,58,21,.38);
  }
  .shelf-carve:active::before{transform:scale(.94);background:rgba(198,154,88,.35);}
  .shelf-carve:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:50%;}
  .shelf-carve[hidden]{display:none;}
  .carve-l{left:calc(-1 * var(--shpad) - 2px);}
  .carve-r{right:calc(-1 * var(--shpad) - 2px);}
  @media(prefers-reduced-motion:reduce){
    .shelf-carve,.shelf-carve::before,.shelflayer::before,.shelflayer::after{transition:none;}
  }
  .plank{
    position:relative;pointer-events:none;
    height:clamp(17px,1.8vw,26px);
    margin-inline:calc(-1 * (var(--shpad) + clamp(12px,1.6vw,26px)));
    background-size:100% 100%;
    background-repeat:no-repeat;
    border-radius:clamp(3px,.35vw,5px);
  }
  .plank.mid{
    margin-bottom:calc(clamp(10px,1.2vw,18px) - 15px);
    background-image:url("../_ds/myosorie-design-system-9bd9b895-dce4-461e-93ed-d4f5a1cf0616/assets/textures/tex-plank-mid.webp");
    z-index:2;
    box-shadow:0 4px 7px -2px #4a2c0c66;
  }
  .plank.base{
    /* 显式压到卡片之下:它在 DOM 里排在第二行之后,不给层级的话会盖住该行卡片底边 */
    z-index:0;
    margin-bottom:calc(-1 * clamp(8px,.9vw,13px));
    background-image:url("../_ds/myosorie-design-system-9bd9b895-dce4-461e-93ed-d4f5a1cf0616/assets/textures/tex-plank-base.webp");
  }
  /* shelf cards */
  .scard{
    /* z-index:1 —— 高于 .plank.base(0) 免得底部木条盖住卡片,低于 .plank.mid(2)
       以保留"木条投影压在卡片上沿"的实物观感 */
    position:relative;z-index:1;
    background:#fbf4e1;
    border:1px solid #e0d0ac;
    border-radius:clamp(8px,.9vw,13px);
    padding:7px 7px clamp(10px,1.1vw,15px);
    box-shadow:inset 0 1px 0 #ffffffa6, 2px 1px 3px -2px #50300e4d;
    display:flex;flex-direction:column;
    transition:transform .22s ease, box-shadow .22s ease;
  }
  /* hover:只抬**这一张**卡到木条之上(z-index:3 > .plank.mid 的 2),上浮与投影才不被木条裁掉。
     2026-09-05 修:此前是 `.shelfrow:has(.scard:hover){z-index:3}` —— 把层级加在整行容器上,
     于是悬浮任意一张卡会让**整行所有卡片**一起越过木条、盖住下方内容(实测 row2 的 computed
     z-index 从 1 跳到 3,而 transform 只作用于被悬浮那张)。选择器本身没写宽,是属性加错了元素。 */
  .scard:hover{z-index:3;transform:translateY(-2px);box-shadow:inset 0 1px 0 #ffffffa6, 2px 1px 3px -2px #50300e4d, 0 5px 8px -4px #50300e59;}
  .scard .simg{
    /* 与全站商品卡统一 1:1(2026-08-19 用户拍定,shop/相关推荐/收藏同口径) */
    width:100%;aspect-ratio:1/1;object-fit:cover;flex:1 1 auto;
    border-radius:clamp(5px,.6vw,8px);
    border:1px solid #e6d9bb;
  }
  image-slot.simg{display:block;height:auto;flex:1 1 auto;border-style:dashed;border-color:#d6c298;}
  /* 库存角标(2026-09-05):文案由 SSR 与 api.js 孪生产出。本页不引用 site.css,
     所以 .pstock 的定义必须在这里复制一份(与 site.css 的 .pstock 段保持一致,改一处要同步)。
     .scard>a 补 position:relative 当定位祖先;角标 pointer-events:none 不挡整卡点击导航。 */
  .scard > a{position:relative;}
  .pstock{
    display:inline-flex;align-items:center;line-height:1.2;white-space:nowrap;
    font-family:var(--text,"EB Garamond",Georgia,serif);font-size:14px;font-weight:500;
    letter-spacing:0;text-transform:none;
    padding:4px 8px;border-radius:2px;pointer-events:none;
    border:1px solid var(--line);background:var(--paper);color:var(--ink);
  }
  .pstock.is-oos{background:var(--ink-soft);color:var(--paper);border-color:var(--ink-soft);}
  .pstock.is-low{background:var(--paper);color:#76552f;border-color:#cdb894;}
  .scard .pstock{position:absolute;z-index:3;top:8px;left:8px;}
  /* 售罄卡片的加购钮 disabled 后此前毫无视觉差别;跟 site.css 的 .pbtn[disabled] 同口径 */
  .sbtn[disabled]{opacity:.45;cursor:not-allowed;}
  /* 同 site.css .pbtn[disabled]:必须压过 .sbtn.bag:hover 的背景,否则悬停仍亮成实心金色 */
  .sbtn.bag[disabled]:hover,.sbtn.bag[disabled]:active{background:#b8945e;transform:none;}
  .sbtn[disabled]:hover svg,.sbtn[disabled]:active svg{animation:none;transform:none;}
  .scard .srow{
    display:flex;align-items:flex-start;gap:10px;
    margin:7px clamp(2px,.3vw,5px) 0;
  }
  .scard h4{
    font-family:"Cormorant Garamond";font-weight:600;
    font-size:var(--h4size, clamp(15px,1.35vw,19px));color:var(--kraft-ink);
    margin:0;flex:1 1 auto;line-height:1.25;
  }
  .scard .pin{
    flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:-3px;
    background:radial-gradient(circle at 35% 30%, #f0d9a8, #c19a55 55%, #8a6630);
    box-shadow:0 1px 2px #00000040, inset 0 -1px 1px #00000033;
  }
  .scard .sfoot{
    /* 窄屏两列布局下价格+按钮组硬性下限可能超出卡片宽度,两道独立防线:
       flex-wrap 处理"整行装不下"——挤不下时价格与按钮组换成两行,这是主要防线;
       overflow:hidden 处理另一种情况——.sprice 配合 min-width:0 收缩到比自身文字还窄时
       文字本身会溢出盒子,由它兜底裁掉(不是给 wrap 加保险,是防不同的失效模式) */
    display:flex;flex-wrap:wrap;overflow:hidden;align-items:center;justify-content:space-between;gap:10px;
    margin:clamp(7px,.8vw,11px) clamp(2px,.3vw,5px) 0;
  }
  .scard .sprice{
    font-family:"Cormorant Garamond";font-weight:600;flex:0 1 auto;min-width:0;
    font-size:clamp(18px,1.7vw,23px);color:#4c3a1d;line-height:1;
  }
  /* code review 2026-08-29:补齐促销划线价——site.css 里有 .price-was 但本页不引用 site.css,
     scard() 新加的 list_price>price 判断需要这份定义才有删除线视觉(跟 site.css:208 保持一致) */
  .scard .price-was{font-size:.72em;font-weight:400;color:var(--ink-faint);text-decoration:line-through;margin-right:2px;}
  .sbtns{display:flex;flex:0 0 auto;gap:clamp(6px,.7vw,10px);}
  .sbtn{
    width:clamp(38px,3.2vw,46px);height:clamp(32px,2.8vw,40px);
    border-radius:clamp(6px,.7vw,9px);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:.2s;padding:0;
  }
  .sbtn svg{width:clamp(15px,1.3vw,18px);height:clamp(15px,1.3vw,18px);transition:transform .2s cubic-bezier(.34,1.56,.64,1);}
  .sbtn.fav{background:#fdf8eb;border:1px solid #e0d0ac;color:#7d6638;}
  .sbtn.fav:hover{border-color:#b29457;background:#fffdf5;}
  .sbtn.fav:hover svg{animation:heartbeat 1.1s ease-in-out infinite;}
  .sbtn.fav.on{color:#b65c47;border-color:#c79d83;background:#fdf0e3;}
  .sbtn.fav.on svg path{fill:currentColor;}
  .sbtn.fav.on svg{animation:heartpop .5s cubic-bezier(.34,1.7,.5,1);}
  .sbtn.bag{background:#b8945e;border:none;color:#fdf6e3;}
  .sbtn.bag:hover{background:#a98551;}
  .sbtn.bag:hover svg{animation:bagsquish .65s cubic-bezier(.36,1.5,.5,1) infinite;}
  .sbtn.bag:active{background:#9c7a47;transform:scale(.86,.94);}
  .sbtn.bag:active svg{animation:none;transform:scale(1.1,.8);}
  @keyframes heartbeat{
    0%,100%{transform:scale(1);}
    14%{transform:scale(1.3);}
    28%{transform:scale(.96);}
    42%{transform:scale(1.18);}
    58%{transform:scale(1);}
  }
  @keyframes heartpop{
    0%{transform:scale(.5);}
    55%{transform:scale(1.4);}
    100%{transform:scale(1);}
  }
  @keyframes bagsquish{
    0%,100%{transform:scale(1,1);}
    28%{transform:scale(1.2,.82);}
    52%{transform:scale(.88,1.14);}
    76%{transform:scale(1.06,.95);}
  }

  /* ============ ABOUT · LETTER + STORY CARDS ============ */
  #about.section{padding-top:max(30px,calc(44 * var(--u)));padding-bottom:max(30px,calc(44 * var(--u)));}
  .aboutrow{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(16px,1.4vw,26px);align-items:stretch;}

  .ab-letter{
    position:relative;z-index:3;display:flex;flex-direction:column;
    background:url("../_ds/myosorie-design-system-9bd9b895-dce4-461e-93ed-d4f5a1cf0616/assets/textures/tex-letter-clean.webp");background-size:100% 100%;
    border:1px solid #e3d6b6;border-radius:clamp(12px,1vw,18px);
    padding:max(11px,calc(15 * var(--uw))) max(24px,calc(38 * var(--uw)));
    box-shadow:0 22px 42px -26px rgba(86,70,42,.5), inset 0 1px 0 rgba(255,255,255,.5);
  }
  .ab-title{
    display:flex;align-items:center;gap:.38em;margin:0;
    font-family:"Cormorant Garamond";font-weight:600;letter-spacing:.4px;color:var(--ink);
    font-size:max(30px,calc(44 * var(--uw)));line-height:1.05;
  }
  .ab-title .flower{width:.82em;height:.82em;}
  .ab-rule{display:flex;align-items:center;gap:12px;margin:max(5px,calc(8 * var(--uw))) 0 max(6px,calc(9 * var(--uw)));}
  .ab-rule::before,.ab-rule::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,transparent,#c9b88f,transparent);}
  .ab-rule i{width:6px;height:6px;background:#b29a63;transform:rotate(45deg);flex:0 0 auto;}
  .ab-body{
    --lh:max(25px,calc(25 * var(--uw)));
    font-family:"EB Garamond";color:var(--ink-soft);margin:0;
    font-size:max(16px,calc(16 * var(--uw)));line-height:var(--lh);text-wrap:pretty;
    background-image:repeating-linear-gradient(to bottom,
      transparent 0,
      transparent calc(var(--lh) - 1.5px),
      rgba(150,142,122,.42) calc(var(--lh) - 1.5px),
      rgba(150,142,122,.42) var(--lh));
    background-position:0 0;
  }
  .ab-stamp{
    position:absolute;right:max(8px,calc(14 * var(--uw)));bottom:max(8px,calc(14 * var(--uw)));
    color:#9a7c4c;opacity:.82;
    width:max(110px,calc(153 * var(--uw)));height:max(110px,calc(153 * var(--uw)));
    transform:translate(65px,30px) rotate(-8deg);mix-blend-mode:multiply;pointer-events:none;z-index:4;
  }

  .ab-card{
    position:relative;z-index:1;
    display:flex;flex-direction:column;
    background:#f7f0de;border:1px solid #e6d9bb;border-radius:clamp(12px,1vw,18px);
    padding:max(11px,calc(15 * var(--uw)));
    box-shadow:0 20px 38px -26px rgba(86,70,42,.42), inset 0 1px 0 rgba(255,255,255,.6);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .ab-card:hover{z-index:2;transform:translateY(-3px);box-shadow:0 28px 48px -26px rgba(86,70,42,.5),inset 0 1px 0 rgba(255,255,255,.6);}
  .ab-card-photo{border-radius:clamp(8px,.7vw,13px);overflow:hidden;width:100%;height:220px;}
  .ab-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
  .ab-card:hover .ab-card-photo img{animation:photoSquish .55s cubic-bezier(.34,1.56,.64,1);}
  .ab-cap{
    flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.4em;
    font-family:"Cormorant Garamond";font-weight:600;letter-spacing:.3px;color:var(--ink);
    font-size:max(18px,calc(25 * var(--uw)));text-align:center;
    padding:max(8px,calc(11 * var(--uw))) 8px max(6px,calc(8 * var(--uw)));
  }
  .ab-cap .flower{width:.8em;height:.8em;flex:0 0 auto;}
  /* 这里曾有 @media(max-width:1080px) 与 @media(max-width:620px) 两条 .aboutrow 列数规则。
     section#about 自 2026-09-16 起在 <=1214px 整节 display:none，这两档永远渲染不到，
     属于「声称在为一个不可见区块排版」的孤儿规则，评审删除。若将来放宽隐藏阈值需一并恢复。 */

  /* ============ FOOTER · CLOSING CARD / COLOPHON ============ */
  footer.ftr{
    position:relative;
    background:linear-gradient(180deg,#f8f2e5 0%, #f5edda 100%);
    border-top:1px solid #E3D2B8;
    box-shadow:inset 0 11px 20px -16px rgba(90,69,47,.34);
    margin-top:clamp(20px,2.6vw,36px);
    font-family:"EB Garamond",Georgia,serif;
    color:#6F5D4B;
    overflow:hidden;
  }
  /* footer 花朵水印已移除(用户要求) */
  footer.ftr .lane{position:relative;z-index:1;padding-top:clamp(30px,3vw,46px);}
  .ftr-top{
    display:flex;align-items:center;justify-content:space-between;
    gap:clamp(28px,5vw,80px);flex-wrap:wrap;
    padding-bottom:clamp(22px,2.4vw,36px);
  }
  .ftr-brand{display:flex;align-items:center;gap:clamp(16px,1.7vw,28px);flex-wrap:wrap;}
  .ftr-name{
    display:inline-flex;align-items:center;gap:11px;
    font-family:"Cormorant Garamond","EB Garamond",serif;font-weight:600;
    font-size:clamp(30px,2.5vw,44px);letter-spacing:.4px;color:#5A452F;line-height:1;
  }
  .ftr-flower{width:clamp(22px,1.7vw,32px);height:auto;display:block;transform:translateY(3px);}
  .ftr-flower.sm{width:clamp(18px,1.3vw,25px);transform:translateY(2px);}
  .ftr-rule-v{width:1px;height:clamp(22px,2vw,32px);background:#E3D2B8;}
  .ftr-tag{font-style:italic;font-size:clamp(15px,1.15vw,21px);color:#6F5D4B;letter-spacing:.2px;}
  .ftr-help{display:flex;flex-direction:column;gap:clamp(13px,1.3vw,20px);align-items:flex-end;}
  .ftr-help-head{
    display:flex;align-items:center;gap:clamp(10px,1vw,15px);
    font-family:var(--mono);font-weight:400;text-transform:uppercase;
    font-size:clamp(12px,.92vw,15px);letter-spacing:.32em;color:#7c6446;
  }
  .ftr-rule-h{display:block;width:clamp(28px,4vw,72px);height:1px;background:linear-gradient(90deg,transparent,#cbb487);}
  .ftr-help-head .ftr-rule-h:last-child{background:linear-gradient(90deg,#cbb487,transparent);}
  .ftr-dia{width:5px;height:5px;flex:0 0 auto;transform:rotate(45deg);background:#bf9f64;}
  .ftr-links{display:flex;align-items:center;gap:clamp(20px,2.4vw,46px);flex-wrap:wrap;justify-content:flex-end;}
  .ftr-links a{
    display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
    font-size:clamp(15px,1.1vw,20px);color:#6F5D4B;text-decoration:none;transition:color .2s;
  }
  .ftr-links a .t{
    background:linear-gradient(#B8955E,#B8955E) left 100% / 0% 1px no-repeat;
    transition:background-size .32s ease;padding-bottom:2px;
  }
  .ftr-links svg{width:1.18em;height:1.18em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.82;transition:opacity .2s;}
  .ftr-links a:hover{color:#B8955E;}
  .ftr-links a:hover .t{background-size:100% 1px;}
  .ftr-links a:hover svg{opacity:1;}
  .ftr-bottom{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px);
    flex-wrap:wrap;border-top:1px solid #E3D2B8;
    padding:clamp(15px,1.4vw,21px) 0 clamp(18px,1.8vw,26px);
    font-size:clamp(13px,.98vw,16px);
  }
  /* brass diamond resting on the divider */
  .ftr-bottom::before{
    content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%) rotate(45deg);
    width:7px;height:7px;background:#d8c79f;box-shadow:0 0 0 1px #cbb487 inset;
  }
  .ftr-colophon{display:flex;flex-direction:column;gap:3px;}
  .ftr-copy{color:#6F5D4B;}
  .ftr-ref{font-family:var(--mono);font-size:clamp(10px,.72vw,11.5px);letter-spacing:.16em;text-transform:uppercase;color:#a08c6a;}
  .ftr-legal{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,1vw,16px);}
  .ftr-legal .sep{color:#c2ae84;}
  /* 页脚分隔符「·」在**能换行的宽度下一律不显示**(2026-09-13 第二次修正)。

   为什么不是"把分隔符挂到链接上":上一版把它改成 `a:not(:last-of-type)::after`,
   以为伪元素跟着链接走就不会被拆开 —— **那是错的,而且实测过才发现**。
   伪元素确实跟着链接走,可它跟的是**前一个**链接,于是换行后行尾变成
   「Cookie Policy ·」,那个点还在原地,只是从独立 flex item 变成了链接盒子的一部分
   (实测 about.html @390px:链接盒子右 323.9 / 文字右 309.5,差 14.3px 就是它)。
   挂到后一个链接(`a + a::before`)也一样,只是从行尾挪到行首。
   **CSS 无从知道行在哪断,任何绑在某个链接上的分隔符都会在断点处露出来。**

   所以改成:能换行就不显示。实测换行区间只有一段 —— about.html 320–440px、
   index.html 320–448px(全宽度扫描,>448 一直是一行),断点取 480px 留足余量。
   窄屏下把 gap 调大到 18px 顶替分隔符的视觉分隔作用。

   分隔符退回真实的 <span class="sep">(不再用伪元素),顺带解掉两个副作用:
   · 伪元素在链接盒子内,会把 .ftr-legal a 那条 1px 下划线一起拖长 ~14px,
     前三条链接的下划线因此比第四条长一截,点还成了链接热区的一部分;
   · `content:"\00b7" / ""` 的空 alt 语法要 Chrome 77+/Safari 17.4+/Firefox 133+,
     老引擎整条声明作废 —— 而 .sep 又是 display:none,结果是分隔符**彻底消失**。
   真实 span 没有这两个问题;屏幕阅读器的问题用 aria-hidden="true" 解决
   (此前只有 index.html 加了,其余 27 页会念出来,本次一并补齐)。 */
@media(max-width:480px){.ftr-legal{gap:18px;}.ftr-legal .sep{display:none;}}
  .ftr-legal a{
    color:#6F5D4B;text-decoration:none;padding-bottom:2px;transition:color .2s;
    background:linear-gradient(#cbb78f,#cbb78f) left 100% / 100% 1px no-repeat;
  }
  .ftr-legal a:hover{color:#B8955E;background-image:linear-gradient(#B8955E,#B8955E);}
  .ftr-back{
    position:relative;
    display:inline-flex;align-items:center;gap:8px;font-style:normal;
    font-family:"EB Garamond",Georgia,serif;font-size:clamp(14px,1.02vw,17px);letter-spacing:.4px;
    color:#fbf4e4;text-decoration:none;
    background:#a9824e;border:1px solid #936f3e;border-radius:999px;
    padding:clamp(9px,.78vw,12px) clamp(18px,1.5vw,24px);
    box-shadow:0 9px 18px -10px rgba(120,86,38,.55), inset 0 2px 4px rgba(255,255,255,.32), inset 0 -3px 6px rgba(120,86,38,.4);
    transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, background .25s;
    will-change:transform;
  }
  /* soft “squish”: gentle plump on hover, squash-and-rebound on press */
  .ftr-back:hover{background:#b08a54;box-shadow:0 13px 24px -10px rgba(120,86,38,.6), inset 0 2px 5px rgba(255,255,255,.4), inset 0 -3px 7px rgba(120,86,38,.42);animation:ftrSquish 1.5s cubic-bezier(.22,1,.36,1) forwards;}
  .ftr-back:active{transform:scale(.9,.84);box-shadow:0 4px 9px -7px rgba(120,86,38,.55), inset 0 2px 6px rgba(120,86,38,.5);transition-duration:.08s;animation:none;}
  @keyframes ftrSquish{
    0%{transform:scale(1,1);}
    22%{transform:scale(1.07,.94);}
    50%{transform:scale(1,1.06);}
    75%{transform:scale(1.035,1.025);}
    100%{transform:scale(1.04,1.04);}
  }
  /* arrow lifts off and a fresh one rises from below */
  .ftr-up{
    position:relative;width:1.05em;height:1.05em;
    fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
    transition:transform .2s;
  }
  .ftr-back:hover .ftr-up{animation:ftrLaunch .85s cubic-bezier(.55,0,.3,1) infinite;}
  @keyframes ftrLaunch{
    0%{transform:translateY(0);opacity:1;}
    45%{transform:translateY(-1.4em);opacity:0;}
    46%{transform:translateY(1.1em);opacity:0;}
    70%{opacity:1;}
    100%{transform:translateY(0);opacity:1;}
  }
  @media(prefers-reduced-motion:reduce){
    .ftr-back:hover{animation:none;transform:scale(1.04);}
    .ftr-back:hover .ftr-up{animation:none;transform:translateY(-2px);}
  }
  @media(max-width:760px){
    .ftr-top{flex-direction:column;align-items:flex-start;gap:24px;}
    .ftr-help{align-items:flex-start;}
    .ftr-links{justify-content:flex-start;}
    .ftr-bottom{flex-direction:column;align-items:flex-start;gap:12px;}
    /* footer 花朵水印已移除 */
  }

  /* ============ RESPONSIVE ============ */
  /* 副标题：CSS 视口 1440px 以下整段隐藏 */
  @media(max-width:1440px){
    .shop-head .sec-sub{display:none;}
  }
  /* 木架：窄屏减少每层陈列数量，保持卡片尺寸与单行结构 */
  /* ≤1560 货架已切滑动单行(见上方 --shelfvis 机制),此处只按断点调可见张数 */
  @media(max-width:1240px){
    .shelfrow{--shelfvis:4;}
  }
  @media(max-width:1060px){
    .shop-head .sec-sub{display:none;}
    .shelfrow{--shelfvis:3;}
  }

  @media(max-width:720px){
    .lane{padding:0 24px;}
  }

  /* ============ PHONE (≤600px) · STREAMLINED ============ */
  @media(max-width:600px){
    /* 4 · hide the hero card's descriptive lead; shrink the title to ONE line
           and drop the ✦ divider entirely
           (code review 2026-08-29 发现:此前误写成 block/flex,跟注释意图完全相反,
           600px 以下的手机访客其实一直能看到本该隐藏的 lead 段落和分隔符) */
    .v8card .v8lead{display:none;}
    .v8card .v8divider{display:none;}
    .v8card h1{font-size:clamp(46px,12vw,62px);white-space:normal;}
    .v8card h1 br{display:block;}
    @media(max-width:519px){
      /* 保留 aria-labelledby 目标，仅做视觉隐藏；屏幕阅读器仍能读到 hero 名称。 */
      .v8card h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
      /* 上界 15px 不超过被替代的基础档，避免 520/521px 反向台阶；320–519px 扫描不升。 */
      .v8btn{font-size:clamp(14px,3.5vw,15px);}
    }

    /* New Arrivals / Collections 两处 shop-head 结构完全一致(标题+引言+more-link),
       title + "View All ..." share one line, smaller type;
       flex-wrap 兜底 381-600px 区间(390/393/412 等常见机型)防止两段 nowrap 文本挤压溢出。
       code review 2026-08-29 发现:此前只修了 .new-arrivals,#collections 那份漏了同款修复——
       由于 html,body{overflow-x:clip},窄屏下"View All Collections"链接会被直接裁掉且不可达
       (连横向滚动都没有),不只是视觉问题 */
    .new-arrivals .shop-head,#collections .shop-head{align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;flex-wrap:wrap;}
    .new-arrivals .sh-left{flex:0 1 auto;min-width:0;}
    .new-arrivals .sec-title{font-size:26px !important;white-space:nowrap;}
    .new-arrivals .more-link{flex:0 0 auto;font-size:14px !important;white-space:nowrap;}

    /* New Arrivals shelf · 2 products per row, a plank under every row, 8 total.
       Vertical rhythm matches desktop: even ~5px gap between every card row and
       its plank; desktop negative margins are normalised away here. */
    /* 移动端保持两张完整卡片,可滑提示由木框内缘阴影与小把手承担 */
    .shelfrow{--shelfvis:2;gap:12px;margin-bottom:0;}
    .plank{height:clamp(16px,4.6vw,22px);}
    .plank.mid{margin:5px 0;}
    .plank.base{margin:5px 0 0;}

    /* Collections · drop the descriptive blurbs on every card */
    .cfeat-body p,.ccell-body p{display:none;}

    /* 1 · hide the entire About Myosorie section */

    /* 2 · hide footer brand name + tagline and the back-to-top button */
    .ftr-brand{display:none;}
    .ftr-back{display:none;}
  }

  /* ============ NARROW BAR (≤435px) · let nowrap headings wrap ============ */
  @media(max-width:435px){
    .v8card h1{white-space:normal;font-size:clamp(23px,8.2vw,30px);}
    /* .shop-head 的 flex-wrap 已上移到 600px 断点统一生效,这里不再重复 */
    /* <=435px 的 23px 是用户 2026-09-16 拍定保留，并非扩展条状断点时的误伤。 */
    .new-arrivals .sec-title{white-space:normal !important;font-size:23px !important;}
    .new-arrivals .more-link{white-space:normal;}
    /* 窄屏改成每行一个商品的横向条目；JS 的 <=435px matchMedia 与此断点是孪生。 */
    .new-arrivals .corkboard{background:none;box-shadow:none;padding:0;}
    .new-arrivals .shelflayer + .plank + .shelflayer{display:none;}
    .new-arrivals .plank,.new-arrivals .shelf-carve{display:none;}
    .new-arrivals .shelfrow{display:flex !important;flex-direction:column;gap:8px;overflow:visible !important;--shelfvis:1;}
    .new-arrivals .scard{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;padding:6px;}
    .new-arrivals .scard>a{grid-row:1 / span 2;}
    .new-arrivals .scard .simg{width:64px;height:64px;aspect-ratio:1;}
    .new-arrivals .scard .srow{grid-column:2;grid-row:1;margin:2px 0 0;}
    .new-arrivals .scard .sfoot{grid-column:2;grid-row:2;margin-top:4px;}
  }

/* 首页与内页共用 880px 导航断点，避免平板出现不同的入口。 */
@media(max-width:880px){
    /* 3 · nav collapses to a hamburger; links become a drop panel */
    .v8nav{flex-wrap:nowrap;gap:14px;}
    .v8brand{margin-right:auto;}
    .v8burger{display:flex;}
    .v8links{
      position:absolute;top:100%;left:0;right:0;z-index:6;
      flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
      background:var(--cream);border-bottom:1px solid var(--line);
      box-shadow:0 20px 30px -20px rgba(60,45,25,.5);
      padding:0 clamp(22px,5vw,40px);
      max-height:0;overflow:hidden;visibility:hidden;transition:max-height .32s ease;
    }
    .v8links.open{max-height:70vh;visibility:visible;overflow-y:auto;}
    .v8links a{
      position:relative;font-size:18px;padding:15px 2px 15px 14px;
      border-bottom:1px solid var(--line);background:none;color:var(--ink);
      transition:color .2s ease, background-color .2s ease, padding-left .2s ease;
    }
    /* left accent bar slides in on hover/active */
    .v8links a::before{
      content:"";position:absolute;left:0;top:50%;
      transform:translateY(-50%) scaleY(0);transform-origin:center;
      width:3px;height:58%;border-radius:2px;background:var(--blue);
      transition:transform .24s cubic-bezier(.34,1.56,.64,1);
    }
    .v8links a:hover,.v8links a:focus-visible{
      color:var(--blue-deep);background-color:rgba(86,104,158,.09);padding-left:20px;
    }
    .v8links a:hover::before,.v8links a:focus-visible::before{transform:translateY(-50%) scaleY(1);}
    .v8links a:active{background-color:rgba(86,104,158,.16);}
    .v8links a:last-child{border-bottom:none;}
    .v8links a.active{color:var(--ink-soft);background:none;}
    .v8links a.active::before{transform:translateY(-50%) scaleY(1);background:var(--ink-faint);}
    /* override the desktop active:hover gradient (it would tile and fill the row) */
    .v8links a.active:hover{color:var(--blue-deep);background:rgba(86,104,158,.09);padding-left:20px;}
    .v8links a.active:hover::before{background:var(--blue);}

}
.v8header{position:relative;z-index:50;}