:root{
    --paper:#FAF8F5;
    --ink:#3B2E29;
    --ink-soft:#6B5B54;
    --wine:#5B1A16;
    --line:rgba(59,46,41,.18);
    --serif:'Cormorant Garamond', Georgia, serif;
    --script:'Pinyon Script', cursive;
    --bar-h:44px;
    --head-h:64px;
  }

  *{box-sizing:border-box;}
  [hidden]{display:none !important;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-weight:300;
    font-size:16px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer;}
  img{display:block;width:100%;height:100%;object-fit:cover;}

  :focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;}

  /* Images fill their container. Until a file exists at the path the box
     shows this neutral tone rather than a broken-image icon. */
  .hero .panel, .show .frame, .cats .tile, .band{background:#EAE4DC;}
  .hero .panel > img, .show .frame > img{position:absolute;inset:0;}
  .band > img{position:absolute;inset:0;z-index:1;}

  /* ---------- Announcement bar ---------- */
  .announce{
    position:relative;z-index:60;
    background:var(--ink);color:var(--paper);
    height:var(--bar-h);
    display:flex;align-items:center;gap:16px;
    padding:0 20px 0 24px;
    font-size:14px;letter-spacing:.02em;
  }
  .announce p{margin:0;flex:1;}
  .announce .switch{
    border:1px solid rgba(250,248,245,.55);
    padding:7px 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
    white-space:nowrap;
  }
  .announce .close{font-size:20px;line-height:1;padding:4px 6px;opacity:.8;}
  .announce[hidden]{display:none;}

  /* ---------- Header ---------- */
  .head{
    position:sticky;top:0;z-index:50;
    height:var(--head-h);
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
    padding:0 22px;
    background:var(--paper);
    color:var(--ink);
    transition:box-shadow .3s ease;
  }
  .head.solid{border-bottom:1px solid var(--line);}

  .burger{display:flex;flex-direction:column;gap:5px;width:26px;padding:6px 0;}
  .burger i{display:block;height:1.5px;background:currentColor;}

  /* Oak wordmark — swap this whole <a> for your SVG:
     <a class="mark" href="/"><img src="/images/oak-logo-white.svg" alt="Oak"></a> */
  .mark{display:flex;justify-content:center;line-height:0;min-width:0;}
  .mark img{width:auto;height:26px;max-width:100%;object-fit:contain;}
  .head-actions{display:flex;justify-content:flex-end;align-items:center;gap:20px;}
  .head-actions svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.1;}
  .flag{width:22px;height:15px;border-radius:2px;overflow:hidden;flex:none;}

  /* ---------- Slide-out nav ---------- */
  .scrim{
    position:fixed;inset:0;z-index:70;background:rgba(20,14,12,.4);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .scrim.open{opacity:1;pointer-events:auto;}
  .drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:80;
    width:min(400px,86vw);background:var(--paper);
    transform:translateX(-100%);transition:transform .38s cubic-bezier(.4,0,.15,1);
    display:flex;flex-direction:column;overflow-y:auto;
  }
  .drawer.open{transform:translateX(0);}
  .drawer .close{align-self:flex-end;font-size:26px;line-height:1;padding:18px 22px;}
  .drawer nav{padding:0 0 48px;}
  .drawer a, .drawer .acc-btn{
    display:block;width:100%;text-align:left;
    padding:15px 32px;font-size:19px;letter-spacing:.06em;
  }
  .drawer .feature{background:var(--wine);color:#F3E8E4;padding:22px 0 26px;margin-bottom:14px;}
  .drawer .feature .title{
    display:block;padding:0 32px 12px;font-size:15px;letter-spacing:.16em;
    text-transform:uppercase;font-weight:500;
  }
  .drawer .feature a{padding:11px 32px 11px 46px;font-size:17px;}
  .drawer .rule{height:1px;background:var(--line);margin:16px 32px;}
  .drawer .minor a{font-size:15px;letter-spacing:.1em;color:var(--ink-soft);padding:11px 32px;}

  /* ---------- Hero ---------- */
  .hero{position:relative;display:grid;grid-template-columns:1fr 1fr;}
  .hero .panel{position:relative;aspect-ratio:3/4;overflow:hidden;}
  .hero .panel::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(30,22,18,.22) 0 22%,transparent 45%,rgba(30,22,18,.28));
    pointer-events:none;
  }
  .hero .cta{
    position:absolute;left:0;right:0;bottom:9%;z-index:3;
    text-align:center;color:#fff;
    font-size:23px;letter-spacing:.06em;
  }
  .hero .cta a{border-bottom:1px solid rgba(255,255,255,.85);padding-bottom:5px;}
  .script{
    position:absolute;z-index:4;left:0;right:0;top:47%;
    transform:translateY(-50%);
    text-align:center;color:#fff;pointer-events:none;
    font-family:var(--script);
    font-size:clamp(46px,7.5vw,120px);
    line-height:1;letter-spacing:.02em;
    text-shadow:0 2px 22px rgba(30,20,16,.28);
  }

  .hero-mobile{display:none;}

  /* ---------- Mobile slideshow ---------- */
  .show{position:relative;aspect-ratio:3/4;overflow:hidden;}
  .show .frame{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;}
  .show .frame.on{opacity:1;}
  .show .frame::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(30,22,18,.2) 0 20%,transparent 42%,rgba(30,22,18,.3));
  }
  .show .overlay{position:absolute;inset:0;z-index:5;pointer-events:none;}
  .show .overlay .script{position:absolute;top:46%;}
  .show .links{
    position:absolute;left:0;right:0;bottom:10%;z-index:6;
    display:flex;justify-content:center;gap:12%;
    color:#fff;font-size:20px;letter-spacing:.05em;
  }
  .show .links a{border-bottom:1px solid rgba(255,255,255,.85);padding-bottom:4px;}
  .dots{
    position:absolute;left:0;right:0;bottom:4%;z-index:6;
    display:flex;justify-content:center;gap:9px;
  }
  .dots button{
    width:6px;height:6px;border-radius:50%;
    background:rgba(255,255,255,.45);padding:0;
  }
  .dots button[aria-current="true"]{background:#fff;}

  /* ---------- Service bar ---------- */
  .services{
    display:grid;grid-template-columns:repeat(4,1fr);
    padding:30px 24px;gap:20px;text-align:center;
    font-size:15px;letter-spacing:.03em;
    border-bottom:1px solid var(--line);
  }
  .services p{margin:0;}

  /* ---------- Category strip ---------- */
  .cats{padding:64px 22px 72px;}
  .cats h2{
    margin:0 0 34px;text-align:center;font-weight:300;
    font-size:15px;letter-spacing:.24em;text-transform:uppercase;
  }
  /* A swipeable row on every screen size — about four and a half
     tiles on desktop, so the next one peeks in */
  .cats{position:relative;}
  .cats .row{
    display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scroll-padding-inline:22px;
    overscroll-behavior-x:contain;scrollbar-width:none;
    padding:0 22px 18px;
  }
  .cats .row::-webkit-scrollbar{display:none;}
  .cats .row .tile{flex:0 0 calc((100% - 36px) / 4.4);scroll-snap-align:start;}
  .cats .tile{position:relative;aspect-ratio:3/4;overflow:hidden;display:block;}
  .cats .tile > img{
    transition:transform .8s cubic-bezier(.2,0,.1,1);
  }
  .cats .tile .label{transition:letter-spacing .5s cubic-bezier(.2,0,.1,1);}
  @media (hover:hover){
    .cats .tile:hover > img{transform:scale(1.05);}
    .cats .tile:hover .label{letter-spacing:.14em;}
  }
  .cats .tile .label{
    position:absolute;left:0;right:0;bottom:22px;z-index:3;
    text-align:center;color:#fff;font-size:19px;letter-spacing:.06em;
    text-shadow:0 1px 14px rgba(30,20,16,.45);
  }
  .cats .tile::after{
    content:"";position:absolute;inset:0;z-index:2;
    background:linear-gradient(to top,rgba(30,22,18,.42),transparent 52%);
  }
  .cats .prog{display:flex;height:1px;background:var(--line);margin:0 22px;position:relative;}
  .cats .prog i{position:absolute;top:-0.5px;left:0;height:2px;width:30%;background:var(--ink);transition:transform .18s linear;}
  .cats-arrow{
    position:absolute;top:calc(50% + 8px);transform:translateY(-50%);z-index:4;
    width:44px;height:44px;border-radius:50%;background:rgba(250,248,245,.92);
    box-shadow:0 4px 18px rgba(40,28,22,.14);font-size:26px;line-height:1;color:var(--ink);
    transition:opacity .25s ease;
  }
  .cats-arrow.prev{left:30px;} .cats-arrow.next{right:30px;}
  .cats-arrow.off{opacity:0;pointer-events:none;}
  @media (max-width:900px){ .cats-arrow{display:none;} }

  /* ---------- Weddings band ---------- */
  .band{
    position:relative;min-height:520px;display:grid;place-items:center;
    text-align:center;color:#fff;overflow:hidden;padding:80px 24px;
  }
  .band::after{content:"";position:absolute;inset:0;z-index:2;background:rgba(30,20,16,.34);}
  .band .inner{position:relative;z-index:3;max-width:520px;}
  .band .eyebrow{font-size:13px;letter-spacing:.26em;text-transform:uppercase;margin:0 0 18px;}
  .band h2{font-family:var(--script);font-size:clamp(44px,6vw,76px);font-weight:400;margin:0 0 20px;line-height:1;}
  .band p{margin:0 0 30px;font-size:18px;line-height:1.7;}
  .band a{
    display:inline-block;border:1px solid rgba(255,255,255,.8);
    padding:14px 34px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    transition:background .25s ease,color .25s ease;
  }
  .band a:hover{background:#fff;color:var(--ink);}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:56px 32px 64px;}
  .socials{display:flex;justify-content:center;gap:34px;margin-bottom:52px;}
  .socials a{
    width:42px;height:42px;border-radius:50%;background:var(--ink);
    display:grid;place-items:center;
  }
  .socials svg{width:20px;height:20px;fill:var(--paper);}
  .foot-grid{
    display:grid;grid-template-columns:1.1fr 1fr .7fr;gap:56px;
    max-width:1500px;margin:0 auto;
  }
  .foot-grid h3{margin:0 0 26px;font-size:17px;font-weight:600;letter-spacing:.02em;}
  .field{position:relative;margin-bottom:26px;}
  .field input{
    width:100%;border:0;border-bottom:1px solid var(--ink);
    background:none;padding:8px 0;font-family:var(--serif);font-size:17px;font-weight:300;
    color:var(--ink);
  }
  .field input::placeholder{color:var(--ink-soft);}
  .sub-row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
  .checks{display:flex;gap:26px;}
  .checks label{display:flex;align-items:center;gap:9px;font-size:16px;cursor:pointer;}
  .checks input{width:17px;height:17px;accent-color:var(--ink);}
  .subscribe{
    border:1px solid var(--ink);padding:13px 40px;
    font-size:13px;letter-spacing:.16em;text-transform:uppercase;
    transition:background .25s ease,color .25s ease;
  }
  .subscribe:hover{background:var(--ink);color:var(--paper);}
  .acc{border-bottom:1px solid var(--line);}
  .acc button{
    width:100%;display:flex;justify-content:space-between;align-items:center;
    padding:17px 0;font-size:17px;text-align:left;
  }
  .acc button .chev{transition:transform .25s ease;font-size:13px;}
  .acc button[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .acc .body{display:none;padding:0 0 18px;}
  .acc .body.open{display:block;}
  .acc .body a{display:block;padding:7px 0;font-size:16px;color:var(--ink-soft);}
  .pay{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;margin-top:26px;}
  .pay span{
    border:1px solid var(--line);border-radius:3px;padding:6px 11px;
    font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  }
  .legal{
    max-width:1500px;margin:52px auto 0;padding-top:24px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    font-size:14px;color:var(--ink-soft);
  }

  /* ---------- Motion ---------- */
  /* Elements fade up as they enter the viewport. Stagger with --d. */
  .reveal{
    opacity:0;transform:translateY(20px);
    transition:opacity .95s ease var(--d,0s),
               transform .95s cubic-bezier(.2,0,.1,1) var(--d,0s);
  }
  .reveal.in{opacity:1;transform:none;}

  /* Page-load sequence: image settles, then the script, then the links. */
  @keyframes riseIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  @keyframes settle{from{transform:scale(1.06);}to{transform:scale(1);}}

  .hero .panel > img,
  .show .frame > img{
    animation:settle 1.8s cubic-bezier(.2,0,.1,1) both;
  }
  @keyframes riseInCentred{
    from{opacity:0;transform:translateY(calc(-50% + 16px));}
    to{opacity:1;transform:translateY(-50%);}
  }
  .script{animation:riseInCentred 1.1s ease .45s both;}
  .hero .cta, .show .links{animation:riseIn 1s ease .75s both;}

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    /* Header — everything scales down so the wordmark has room to breathe */
    .head{height:56px;padding:0 14px;gap:8px;}
    .burger{width:21px;gap:4.5px;}
    .mark img{height:18px;}
    .head-actions{gap:14px;}
    .head-actions svg{width:18px;height:18px;}
    /* Search lives inside the menu on mobile, as it does on the reference site */
    .head-actions a[href="/search"]{display:none;}

    /* Announcement bar — stacked tighter, smaller call to action */
    .announce{height:auto;min-height:40px;padding:8px 12px 8px 14px;gap:8px;font-size:12.5px;line-height:1.35;}
    .announce .switch{padding:5px 10px;font-size:10px;letter-spacing:.09em;}
    .announce .close{font-size:17px;padding:2px 4px;}

    .hero{display:none;}
    .hero-mobile{display:block;}
    .services{grid-template-columns:1fr;gap:13px;padding:26px 20px;}
    .cats{padding:48px 0 52px;}
    .cats h2{margin-bottom:26px;}
    /* Horizontal snap carousel — swipe, with the next tile peeking.
       Wobble fixes: one consistent snap alignment, no vertical
       drift inside the scroller, and no fade-up animation on tiles
       while they are being swiped into view. */
    .cats .row{
      display:flex;grid-template-columns:none;gap:10px;
      overflow-x:auto;overflow-y:hidden;
      overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory;
      scroll-padding-inline:16px;
      -webkit-overflow-scrolling:touch;
      touch-action:pan-x pan-y;
      padding:0 16px 16px;scrollbar-width:none;
    }
    .cats .row::-webkit-scrollbar{display:none;}
    .cats .row .tile{
      flex:0 0 74%;aspect-ratio:3/4;
      scroll-snap-align:start;scroll-snap-stop:always;
    }
    .cats .row .tile.reveal{opacity:1;transform:none;transition:none;}
    .cats .row .tile > img{transition:none;}
    .cats .prog{
      display:flex;height:1px;background:var(--line);
      margin:0 16px;position:relative;
    }
    .cats .prog i{
      position:absolute;top:-0.5px;left:0;height:2px;width:30%;
      background:var(--ink);transition:transform .18s linear;
    }
    .foot-grid{grid-template-columns:1fr;gap:44px;}
    .pay{justify-content:flex-start;}
    .announce{font-size:13px;padding:0 12px 0 16px;gap:10px;}
    .announce .switch{padding:6px 12px;font-size:11px;}
    footer{padding:44px 20px 52px;}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  }

/* ════════════════════════════════════════════════════════════════
   SHOP / COLLECTION PAGE
   ════════════════════════════════════════════════════════════════ */

  .coll-head{padding:44px 24px 6px;text-align:center;}
  .coll-head h1{
    font-family:var(--script);font-weight:400;
    font-size:clamp(38px,4.6vw,60px);line-height:1;margin:0 0 14px;
  }
  .coll-head .count{margin:0;font-size:15px;letter-spacing:.04em;color:var(--ink-soft);}

  /* ---------- Sort + filter bar ---------- */
  .coll-bar{
    position:sticky;top:var(--head-h);z-index:40;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:16px 24px;
  }
  .bar-inner{display:flex;align-items:center;gap:20px;}
  .bar-rule{width:1px;height:17px;background:var(--line);}

  .dd{position:relative;}
  .dd-btn{
    display:flex;align-items:center;gap:8px;
    font-size:17px;letter-spacing:.03em;padding:4px 0;
  }
  .dd-btn .chev{font-size:12px;transition:transform .25s ease;}
  .dd-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}

  .dd-panel{
    position:absolute;top:calc(100% + 14px);left:0;z-index:45;
    min-width:230px;background:var(--paper);
    border:1px solid var(--line);padding:8px 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    box-shadow:0 14px 40px rgba(40,28,22,.09);
  }
  .dd-panel.open{opacity:1;visibility:visible;transform:none;}
  .dd-panel.wide{min-width:250px;padding-bottom:4px;}

  .dd-opt{
    display:block;width:100%;text-align:left;
    padding:11px 20px;font-size:16px;
    transition:background .2s ease;
  }
  .dd-opt:hover{background:rgba(59,46,41,.05);}
  .dd-opt.is-on{font-weight:500;}
  .dd-opt.is-on::after{content:" ·";}

  .dd-label{
    margin:6px 0 4px;padding:0 20px;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  }
  .dd-check{
    display:flex;align-items:center;gap:11px;
    padding:10px 20px;font-size:16px;cursor:pointer;
    transition:background .2s ease;
  }
  .dd-check:hover{background:rgba(59,46,41,.05);}
  .dd-check input{width:16px;height:16px;accent-color:var(--ink);}
  .dd-clear{
    display:block;width:100%;text-align:left;
    padding:12px 20px 10px;margin-top:4px;
    border-top:1px solid var(--line);
    font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  }
  .dd-clear:hover{color:var(--ink);}

  /* ---------- Grid ---------- */
  .grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:2px 2px;padding:2px 0 80px;
  }
  .empty{text-align:center;padding:60px 24px 100px;font-size:18px;color:var(--ink-soft);}

  .card-media{
    display:block;position:relative;aspect-ratio:3/4;
    overflow:hidden;background:#EFEBE5;
  }
  .card-media img{transition:transform .9s cubic-bezier(.2,0,.1,1);}
  .card:hover .card-media img{transform:scale(1.04);}

  .card-body{padding:14px 16px 4px;}
  .tag{
    display:inline-block;font-style:italic;font-size:14px;
    border-bottom:1px solid var(--line);padding-bottom:2px;margin-bottom:12px;
  }
  .tag.empty-tag{border:0;height:14px;}

  .card-row{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
  .pname{font-family:var(--script);font-size:22px;line-height:1;flex:none;}
  .swatches{display:flex;flex-wrap:wrap;gap:5px;flex:1;}
  .swatches i{
    width:15px;height:15px;display:block;
    border:1px solid rgba(59,46,41,.22);
  }
  .wish{flex:none;padding:2px;line-height:0;}
  .wish svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.1;}
  .wish.on svg{fill:var(--ink);}

  .ptitle{margin:0 0 9px;font-size:17px;line-height:1.4;}
  .price{margin:0;font-size:17px;}

  @media (max-width:900px){
    .coll-head{padding:26px 20px 4px;}
    .coll-bar{top:56px;padding:12px 16px;}
    .bar-inner{gap:14px;}
    .dd-btn{font-size:15px;}
    .dd-panel{min-width:200px;}

    .grid{grid-template-columns:repeat(2,1fr);gap:2px;padding:2px 0 64px;}
    .card-body{padding:12px 12px 2px;}
    .tag{font-size:12.5px;margin-bottom:9px;}
    .card-row{gap:9px;margin-bottom:9px;flex-wrap:wrap;}
    .pname{font-size:19px;}
    .swatches i{width:13px;height:13px;}
    .wish svg{width:17px;height:17px;}
    .ptitle{font-size:14.5px;line-height:1.35;}
    .price{font-size:14.5px;}
  }

/* ---------- Card hover swap (photo 01 → 02) ---------- */
  .card-media .shot-b{
    position:absolute;inset:0;opacity:0;
    transition:opacity .55s ease;
  }
  .card:hover .card-media .shot-b{opacity:1;}
  .ptitle{display:block;}
  .pname{display:inline-block;}

/* ---------- Load more ---------- */
  .more{position:relative;display:grid;place-items:center;padding:22px 24px 96px;min-height:120px;}
  .more-btn{
    border:1px solid var(--ink);padding:15px 54px;
    font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    transition:background .3s ease,color .3s ease;
  }
  .more-btn:hover{background:var(--ink);color:var(--paper);}

  /* "Oak Deluxe" writes itself across, then fades */
  .load-ink{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--script);font-size:clamp(40px,6vw,86px);
    line-height:1;white-space:nowrap;color:var(--ink);
    clip-path:inset(0 100% 0 0);opacity:0;pointer-events:none;
  }
  .load-ink.writing{animation:writeIn 1.75s cubic-bezier(.35,0,.2,1) forwards;}
  @keyframes writeIn{
    0%  {clip-path:inset(0 100% 0 0);opacity:1;}
    52% {clip-path:inset(0 0 0 0);   opacity:1;}
    78% {opacity:1;}
    100%{clip-path:inset(0 0 0 0);   opacity:0;}
  }

/* ════════════════════════════════════════════════════════════════
   PRODUCT PAGE
   ════════════════════════════════════════════════════════════════ */
  .pdp{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:start;}
  .pdp-shots{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
  .shot{margin:0;aspect-ratio:3/4;overflow:hidden;background:#EFEBE5;}

  .pdp-info{padding:0 clamp(20px,4vw,64px);}
  .pdp-sticky{position:sticky;top:calc(var(--head-h) + 28px);padding:36px 0 60px;max-width:460px;}

  .pdp-name{font-family:var(--script);font-weight:400;font-size:clamp(40px,4.4vw,58px);line-height:1;margin:6px 0 10px;}
  .pdp-title{margin:0 0 16px;font-size:20px;line-height:1.45;}
  .pdp-price{margin:0 0 34px;font-size:20px;}

  .size-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;
    font-size:13px;letter-spacing:.16em;text-transform:uppercase;}
  .size-chart-link{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    border-bottom:1px solid var(--line);padding-bottom:2px;color:var(--ink-soft);}
  .size-chart-link:hover{color:var(--ink);border-color:var(--ink);}

  .sizes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;transition:transform .1s ease;}
  .sizes.nudge{animation:nudge .45s ease;}
  @keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-3px)}}
  .size{
    min-width:56px;padding:12px 14px;border:1px solid var(--line);
    font-size:15px;transition:border-color .25s ease,background .25s ease;
  }
  .size:hover{border-color:var(--ink);}
  .size.on{background:var(--ink);color:var(--paper);border-color:var(--ink);}

  .add-btn{
    width:100%;background:var(--ink);color:var(--paper);
    padding:19px;font-size:15px;letter-spacing:.1em;margin-bottom:34px;
    transition:opacity .25s ease;
  }
  .add-btn:hover{opacity:.88;}

  .pdp-acc .body p{margin:0 0 12px;font-size:16px;line-height:1.65;color:var(--ink-soft);}

/* ---------- Selected for you ---------- */
  .also{padding:70px 0 90px;border-top:1px solid var(--line);}
  .also h2{
    text-align:center;font-family:var(--script);font-weight:400;
    font-size:clamp(34px,3.6vw,48px);margin:0 0 34px;
  }
  .also-row{
    display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:0 2px 14px;scrollbar-width:none;
  }
  .also-row::-webkit-scrollbar{display:none;}
  .also-card{flex:0 0 clamp(200px,17vw,280px);scroll-snap-align:start;}
  .also-media{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;background:#EFEBE5;margin-bottom:12px;}
  .also-media img{transition:transform .8s cubic-bezier(.2,0,.1,1);}
  .also-card:hover .also-media img{transform:scale(1.04);}
  .also-name{display:block;font-family:var(--script);font-size:21px;line-height:1;margin:0 12px 6px;}
  .also-title{display:block;font-size:15px;line-height:1.4;margin:0 12px 5px;}
  .also-price{display:block;font-size:15px;margin:0 12px;}

/* ---------- Size chart modal ---------- */
  .modal{position:fixed;inset:0;z-index:90;background:rgba(25,17,14,.45);
    display:grid;place-items:center;padding:24px;}
  .modal[hidden]{display:none;}
  .modal-card{
    position:relative;background:var(--paper);max-width:560px;width:100%;
    max-height:86vh;overflow-y:auto;padding:40px 36px 32px;
  }
  .modal-close{position:absolute;top:12px;right:16px;font-size:26px;line-height:1;}
  .modal-card h3{margin:0 0 22px;font-size:22px;font-weight:400;letter-spacing:.02em;}
  .chart{width:100%;border-collapse:collapse;font-size:15px;}
  .chart th,.chart td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--line);}
  .chart th{font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:12px;}
  .chart-note{margin:20px 0 0;font-size:14px;line-height:1.6;color:var(--ink-soft);}

  @media (max-width:900px){
    .more{padding:18px 20px 70px;min-height:100px;}
    .more-btn{padding:13px 42px;font-size:12px;}

    .pdp{grid-template-columns:1fr;gap:0;}
    .pdp-shots{grid-template-columns:1fr 1fr;gap:2px;}
    .pdp-sticky{position:static;padding:28px 0 44px;max-width:none;}
    .pdp-info{padding:0 16px;}
    .pdp-title{font-size:17px;}
    .pdp-price{font-size:18px;margin-bottom:26px;}
    .size{min-width:50px;padding:11px 12px;font-size:14px;}
    .add-btn{padding:17px;font-size:14px;}

    .also{padding:48px 0 64px;}
    .also-card{flex:0 0 62%;}
    .modal-card{padding:34px 20px 26px;}
  }

  /* A photo that failed to load leaves a clean tone, not a broken icon */
  img.img-missing{opacity:0;}

/* ════════════════════════════════════════════════════════════════
   GROOMS PAGE
   ════════════════════════════════════════════════════════════════ */

  /* Video hero fills the screen below the header */
  .groom-hero{
    position:relative;overflow:hidden;background:#2A201C;
    min-height:calc(100svh - var(--head-h));
    display:grid;place-items:center;text-align:center;color:#fff;
  }
  /* Six photos crossfade on a loop, each drifting in slightly */
  .groom-slides{position:absolute;inset:0;}
  .groom-slide{
    position:absolute;inset:0;margin:0;opacity:0;
    transition:opacity 1.6s ease;
  }
  .groom-slide img{
    width:100%;height:100%;object-fit:cover;
    transform:scale(1.06);transition:transform 7s ease-out;
  }
  .groom-slide.on{opacity:1;}
  .groom-slide.on img{transform:scale(1);}
  .groom-dots{
    position:absolute;left:0;right:0;bottom:28px;z-index:3;
    display:flex;justify-content:center;gap:10px;
  }
  .groom-dots button{
    width:7px;height:7px;border-radius:50%;padding:0;
    background:rgba(255,255,255,.4);transition:background .3s ease;
  }
  .groom-dots button[aria-current="true"]{background:#fff;}
  @media (prefers-reduced-motion:reduce){
    .groom-slide img{transform:none !important;transition:none;}
  }
  .groom-hero::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,rgba(25,17,14,.18),rgba(25,17,14,.42));
  }
  .groom-hero-inner{position:relative;z-index:2;padding:40px 24px;}
  .groom-hero h1{
    font-family:var(--script);font-weight:400;
    font-size:clamp(56px,9vw,132px);line-height:1;margin:0 0 34px;
    text-shadow:0 2px 26px rgba(20,14,12,.3);
    animation:riseIn 1.2s ease .3s both;
  }
  .btn-light{
    display:inline-block;border:1px solid rgba(255,255,255,.85);
    padding:15px 40px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    transition:background .3s ease,color .3s ease;
    animation:riseIn 1.1s ease .7s both;
  }
  .btn-light:hover{background:#fff;color:var(--ink);}

  .groom-section{padding:80px 0 20px;}
  .section-script{
    text-align:center;font-family:var(--script);font-weight:400;
    font-size:clamp(40px,4.6vw,62px);line-height:1;margin:0 0 38px;
  }
  .section-lead{text-align:center;margin:-22px 0 38px;font-size:17px;color:var(--ink-soft);}
  .section-label{
    margin:10px 24px 20px;font-weight:400;
    font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);
  }
  .section-cta{display:grid;place-items:center;padding:40px 24px 70px;}
  .groom-section .grid{padding-bottom:0;}

/* ---------- Testimonials ---------- */
  /* Change --video-ratio if your films are landscape: 16/9 */
  .testimonials{--video-ratio:9/16;border-top:1px solid var(--line);}
  .t-videos{
    display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
    margin-bottom:2px;
  }
  .t-video{margin:0;aspect-ratio:var(--video-ratio);background:#1E1714;overflow:hidden;}
  .t-video video{width:100%;height:100%;object-fit:cover;display:block;}

  .t-photos{columns:3;column-gap:2px;}
  .t-photos-preview{columns:unset;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
  .t-photos-preview .t-photo{aspect-ratio:4/5;}
  .t-photo{margin:0 0 2px;break-inside:avoid;overflow:hidden;background:#EFEBE5;cursor:zoom-in;}
  .t-photo img{height:auto;display:block;transition:transform .9s cubic-bezier(.2,0,.1,1);}
  .t-photos-preview .t-photo img{height:100%;}
  @media (hover:hover){ .t-photo:hover img{transform:scale(1.035);} }

  .testimonials.all .t-videos{margin-bottom:60px;}
  .t-item.media-missing{display:none;}

/* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed;inset:0;z-index:95;background:rgba(18,12,10,.93);
    display:grid;place-items:center;padding:56px 64px;
  }
  .lightbox[hidden]{display:none;}
  .lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;}
  .lightbox button{position:absolute;color:#fff;font-size:34px;line-height:1;padding:12px 16px;opacity:.8;}
  .lightbox button:hover{opacity:1;}
  .lb-close{top:10px;right:14px;}
  .lb-prev{left:8px;top:50%;transform:translateY(-50%);font-size:48px !important;}
  .lb-next{right:8px;top:50%;transform:translateY(-50%);font-size:48px !important;}

  @media (max-width:900px){
    .groom-hero{min-height:calc(100svh - 56px);}
    .groom-hero h1{margin-bottom:26px;}
    .btn-light{padding:13px 30px;font-size:12px;}

    .groom-section{padding:54px 0 10px;}
    .section-script{margin-bottom:28px;}
    .section-lead{margin:-16px 20px 28px;font-size:15px;}
    .section-label{margin:6px 16px 16px;}
    .section-cta{padding:30px 20px 54px;}

    .t-videos{grid-template-columns:1fr 1fr;}
    .t-videos .t-video:nth-child(3):last-child{grid-column:span 2;aspect-ratio:4/5;}
    .t-photos{columns:2;}
    .t-photos-preview{grid-template-columns:1fr 1fr;}
    .testimonials.all .t-videos{margin-bottom:44px;}
    .lightbox{padding:50px 8px;}
  }

/* ════════════════════════════════════════════════════════════════
   PRODUCT OPTIONS — colour, quantity
   ════════════════════════════════════════════════════════════════ */
  .opt-head,.size-head{
    display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;
    font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  }
  .opt-value{letter-spacing:.04em;text-transform:none;font-size:15px;color:var(--ink-soft);}

  .colours{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
  .colour{
    width:30px;height:30px;padding:3px;display:grid;place-items:center;
    border:1px solid transparent;transition:border-color .2s ease;
  }
  .colour i{display:block;width:100%;height:100%;border:1px solid rgba(59,46,41,.22);}
  .colour svg{width:20px;height:20px;stroke:var(--ink-soft);fill:none;stroke-width:1.2;}
  .colour-original,.colour-custom{border-color:var(--line);}
  .colour:hover{border-color:rgba(59,46,41,.5);}
  .colour.on{border-color:var(--ink);}
  .colour.on svg{stroke:var(--ink);}

  .custom-colour{margin:-10px 0 22px;}
  .custom-colour input{
    width:100%;border:0;border-bottom:1px solid var(--ink);background:none;
    padding:8px 0;font-family:var(--serif);font-size:16px;font-weight:300;color:var(--ink);
  }
  .custom-colour input:focus{outline:none;}
  .custom-colour input::placeholder{color:var(--ink-soft);}
  .custom-colour.nudge,.sizes.nudge{animation:nudge .45s ease;}

  .sizes{margin-bottom:22px;}
  .size.only{cursor:default;}

  .qty{
    display:inline-flex;align-items:center;border:1px solid var(--line);
    margin-bottom:26px;
  }
  .qty button{width:38px;height:38px;font-size:18px;line-height:1;transition:background .2s ease;}
  .qty button:hover{background:rgba(59,46,41,.05);}
  .qty span{min-width:30px;text-align:center;font-size:16px;}
  .qty.small{margin:0;}
  .qty.small button{width:30px;height:30px;font-size:16px;}
  .qty.small span{min-width:24px;font-size:15px;}

/* ---------- Bag count on the header icon ---------- */
  .bag-link{position:relative;}
  .bag-count{
    position:absolute;top:-7px;right:-9px;
    min-width:16px;height:16px;padding:0 4px;border-radius:8px;
    background:var(--ink);color:var(--paper);
    font-family:Arial,sans-serif;font-size:10px;line-height:16px;text-align:center;
  }
  .bag-count[hidden]{display:none;}

/* ---------- Added-to-bag confirmation ---------- */
  .toast{
    position:fixed;right:24px;bottom:24px;z-index:85;
    display:flex;align-items:center;gap:14px;
    width:min(380px,calc(100vw - 32px));padding:12px 16px 12px 12px;
    background:var(--paper);border:1px solid var(--line);
    box-shadow:0 16px 44px rgba(40,28,22,.14);
    opacity:0;transform:translateY(12px);
    transition:opacity .3s ease,transform .3s ease;
  }
  .toast.is-visible{opacity:1;transform:none;}
  .toast[hidden]{display:none;}
  .toast img{width:52px;height:68px;object-fit:cover;flex:none;background:#EFEBE5;}
  .toast-text{flex:1;min-width:0;}
  .toast-title{margin:0 0 3px;font-size:16px;font-weight:500;}
  .toast-meta{margin:0;font-size:13.5px;line-height:1.4;color:var(--ink-soft);}
  .toast-link{
    flex:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    border-bottom:1px solid var(--ink);padding-bottom:2px;
  }

/* ════════════════════════════════════════════════════════════════
   BAG PAGE
   ════════════════════════════════════════════════════════════════ */
  .bag{
    display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start;
    max-width:1200px;margin:0 auto;padding:30px 32px 90px;
  }
  .bag[hidden]{display:none;}
  .bag-lines{border-top:1px solid var(--line);}
  .line{
    display:grid;grid-template-columns:110px 1fr auto;gap:22px;
    padding:22px 0;border-bottom:1px solid var(--line);
  }
  .line-media{display:block;aspect-ratio:3/4;overflow:hidden;background:#EFEBE5;}
  .line-name{display:inline-block;font-family:var(--script);font-size:26px;line-height:1;margin:2px 0 8px;}
  .line-title{margin:0 0 10px;font-size:16px;}
  .line-opt{margin:0 0 4px;font-size:14.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}
  .line-opt b{font-weight:500;color:var(--ink);}
  .mini-swatch{display:inline-block;width:12px;height:12px;border:1px solid rgba(59,46,41,.25);}
  .line-foot{display:flex;align-items:center;gap:22px;margin-top:14px;}
  .line-remove{
    font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
    border-bottom:1px solid var(--line);padding-bottom:2px;
  }
  .line-remove:hover{color:var(--ink);border-color:var(--ink);}
  .line-price{margin:2px 0 0;font-size:17px;text-align:right;white-space:nowrap;}
  .line-price span{display:block;font-size:13px;color:var(--ink-soft);margin-top:4px;}

  .bag-summary{
    position:sticky;top:calc(var(--head-h) + 24px);
    border:1px solid var(--line);padding:26px 24px;
  }
  .free-note{margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line);
    font-size:15px;line-height:1.5;color:var(--ink-soft);}
  .sum-row{display:flex;justify-content:space-between;margin-bottom:10px;font-size:17px;}
  .sum-row.soft{font-size:14.5px;color:var(--ink-soft);margin-bottom:22px;}
  .bag-summary .add-btn{margin-bottom:16px;}
  .continue{display:block;text-align:center;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
  .continue:hover{color:var(--ink);}

  .bag-empty{text-align:center;padding:40px 24px 120px;}
  .bag-empty p{font-size:19px;margin:0 0 26px;color:var(--ink-soft);}
  .bag-empty[hidden]{display:none;}

  @media (max-width:900px){
    .colour{width:28px;height:28px;}
    .colour svg{width:18px;height:18px;}
    .toast{right:16px;bottom:16px;}

    .bag{grid-template-columns:1fr;gap:28px;padding:18px 16px 70px;}
    .line{grid-template-columns:86px 1fr;gap:14px;padding:18px 0;}
    .line-price{grid-column:2;text-align:left;margin-top:-4px;}
    .line-name{font-size:22px;}
    .line-title{font-size:14.5px;}
    .bag-summary{position:static;padding:22px 18px;}
  }

/* ════════════════════════════════════════════════════════════════
   BESPOKE, QUICK ADD, SIZE CHART, CHECKOUT FORM
   ════════════════════════════════════════════════════════════════ */
  body.locked{overflow:hidden;}

  /* Made to Measure sits with the sizes but reads as its own choice */
  .size-mtm{padding-left:18px;padding-right:18px;font-style:italic;}
  .mtm-note{
    margin:-10px 0 22px;font-size:14px;line-height:1.5;color:var(--ink-soft);
  }
  .mtm-note[hidden]{display:none;}
  .fee{margin-left:8px;font-size:13px;color:var(--ink-soft);}

  /* ---------- Quick Add on the grid ---------- */
  .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
  .quick-add{
    flex:none;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
    border-bottom:1px solid var(--line);padding:2px 0;color:var(--ink-soft);
    transition:color .2s ease,border-color .2s ease;
  }
  .quick-add:hover{color:var(--ink);border-color:var(--ink);}

  .sheet{
    position:fixed;inset:0;z-index:88;background:rgba(25,17,14,0);
    display:flex;align-items:center;justify-content:center;padding:24px;
    transition:background .28s ease;
  }
  .sheet[hidden]{display:none;}
  .sheet.is-open{background:rgba(25,17,14,.42);}
  .sheet-card{
    position:relative;width:min(460px,100%);max-height:88vh;overflow-y:auto;
    background:var(--paper);padding:28px 26px 22px;
    opacity:0;transform:translateY(14px);
    transition:opacity .28s ease,transform .28s ease;
  }
  .sheet.is-open .sheet-card{opacity:1;transform:none;}
  .sheet-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;padding-right:24px;}
  .sheet-img{width:78px;height:104px;object-fit:cover;flex:none;background:#EFEBE5;}
  .sheet-name{margin:0 0 6px;font-family:var(--script);font-size:26px;line-height:1;}
  .sheet-title{margin:0 0 8px;font-size:15px;line-height:1.4;}
  .sheet-price{margin:0;font-size:17px;}
  .sheet-card .qty{margin-bottom:20px;}
  .sheet-card .add-btn{margin-bottom:14px;}
  .sheet-more{
    display:block;text-align:center;font-size:12px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .sheet-more:hover{color:var(--ink);}

  /* ---------- Size chart ---------- */
  .chart-card{max-width:720px;}
  .chart-card h3 .chart-unit{font-size:15px;color:var(--ink-soft);}
  .chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .chart{min-width:560px;}
  .chart td:first-child,.chart th:first-child{font-weight:500;}

  /* ---------- Made to measure details form ---------- */
  .form-card{max-width:500px;}
  .form-lead{margin:-8px 0 24px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);}
  .field{display:block;margin-bottom:18px;}
  .field span{
    display:block;margin-bottom:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  }
  .field em{font-style:normal;letter-spacing:.02em;text-transform:none;font-size:13.5px;color:var(--ink-soft);}
  .field input,.field textarea{
    width:100%;border:0;border-bottom:1px solid var(--ink);background:none;border-radius:0;
    padding:8px 0;font-family:var(--serif);font-size:17px;font-weight:300;color:var(--ink);
    resize:vertical;
  }
  .field input:focus,.field textarea:focus{outline:none;border-bottom-width:2px;padding-bottom:7px;}
  .field input::placeholder{color:var(--ink-soft);opacity:.7;}
  .form-error{margin:0 0 16px;font-size:14.5px;color:#9A2A22;}
  .form-error[hidden]{display:none;}
  .form-card .add-btn{margin:6px 0 0;}

  @media (max-width:900px){
    .quick-add{font-size:10.5px;letter-spacing:.1em;}
    .price-row{flex-wrap:wrap;gap:6px;}

    /* Quick Add rises from the bottom on phones */
    .sheet{align-items:flex-end;padding:0;}
    .sheet-card{width:100%;max-height:90vh;padding:24px 18px 20px;transform:translateY(40px);}
    .sheet-img{width:64px;height:86px;}
    .sheet-name{font-size:23px;}

    .modal{padding:12px;}
    .form-card{padding:30px 20px 24px;}
  }

  .t-videos[hidden],.t-photos[hidden],.section-label[hidden],.testimonials[hidden]{display:none;}
  .weddings-empty{text-align:center;margin:10px 24px 0;font-size:17px;color:var(--ink-soft);}
  .weddings-empty[hidden]{display:none;}

/* ════════════════════════════════════════════════════════════════
   CONSULTATION — banner, popup form, sent confirmation
   ════════════════════════════════════════════════════════════════ */
  .consult-banner{
    position:relative;overflow:hidden;background:#2A201C;color:#fff;
    min-height:min(76vh,720px);display:grid;place-items:center;text-align:center;
  }
  .consult-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .consult-banner::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(25,17,14,.45);}
  .consult-inner{position:relative;z-index:2;padding:70px 24px;max-width:640px;}
  .consult-banner .eyebrow{margin:0 0 16px;font-size:13px;letter-spacing:.26em;text-transform:uppercase;}
  .consult-banner h1{
    font-family:var(--script);font-weight:400;font-size:clamp(50px,7.5vw,104px);
    line-height:1;margin:0 0 20px;animation:riseIn 1.1s ease .2s both;
  }
  .consult-lead{margin:0 0 34px;font-size:19px;line-height:1.6;}
  .consult-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;animation:riseIn 1s ease .55s both;}
  .consult-actions .btn-light{animation:none;}
  .btn-solid{
    display:inline-block;background:#fff;color:var(--ink);border:1px solid #fff;
    padding:15px 36px;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
    transition:background .3s ease,color .3s ease;
  }
  .btn-solid:hover{background:transparent;color:#fff;}

  .explore{border-top:0;}

  /* ---------- Popup form ---------- */
  .consult-card{max-width:660px;}
  .consult-card fieldset{border:0;margin:0 0 8px;padding:0;}
  .consult-card legend{
    padding:0;margin:0 0 16px;font-family:var(--script);font-size:28px;line-height:1;
  }
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
  .field select{
    width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;
    padding:8px 0;font-family:var(--serif);font-size:17px;font-weight:300;color:var(--ink);
    -webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
    background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;
    background-size:5px 5px;background-repeat:no-repeat;
  }
  .field select:focus{outline:none;border-bottom-width:2px;padding-bottom:7px;}
  .field input[type=date]{min-height:40px;}
  .choice-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
  .choice{
    display:flex;align-items:center;gap:8px;cursor:pointer;
    border:1px solid var(--line);padding:9px 14px;font-size:15.5px;
    transition:border-color .2s ease,background .2s ease;
  }
  .choice:hover{border-color:rgba(59,46,41,.5);}
  .field .choice input{width:auto;padding:0;border:0;margin:0;accent-color:var(--ink);flex:none;}
  .choice{white-space:nowrap;}
  .choice:has(input:checked){border-color:var(--ink);background:rgba(59,46,41,.05);}
  .form-error a{color:inherit;text-decoration:underline;}
  .field-bad{border-bottom-color:#9A2A22 !important;}

  /* ---------- Sent confirmation — the tick draws itself ---------- */
  .cc-done{text-align:center;padding:30px 10px 16px;}
  .cc-done .tick{width:74px;height:74px;margin:0 auto 22px;display:block;}
  .cc-done .tick circle,.cc-done .tick path{
    fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  }
  .cc-done .tick circle{stroke-dasharray:151;stroke-dashoffset:151;}
  .cc-done .tick path{stroke-dasharray:36;stroke-dashoffset:36;}
  .cc-done.play .tick circle{animation:draw .7s cubic-bezier(.65,0,.35,1) forwards;}
  .cc-done.play .tick path{animation:draw .45s cubic-bezier(.65,0,.35,1) .6s forwards;}
  @keyframes draw{to{stroke-dashoffset:0;}}
  .cc-done h3{
    font-family:var(--script);font-weight:400;font-size:44px;line-height:1;margin:0 0 14px;
    opacity:0;
  }
  .cc-done p{max-width:380px;margin:0 auto 30px;font-size:17px;line-height:1.6;color:var(--ink-soft);opacity:0;}
  .cc-done .cc-close{opacity:0;}
  .cc-done.play h3{animation:riseIn .8s ease .9s both;}
  .cc-done.play p{animation:riseIn .8s ease 1.1s both;}
  .cc-done.play .cc-close{animation:riseIn .8s ease 1.3s both;}
  @media (prefers-reduced-motion:reduce){
    .cc-done .tick circle,.cc-done .tick path{stroke-dashoffset:0;}
    .cc-done h3,.cc-done p,.cc-done .cc-close{opacity:1;}
  }

  @media (max-width:900px){
    .consult-banner{min-height:calc(100svh - 56px - 40px);}
    .consult-lead{font-size:17px;margin-bottom:28px;}
    .consult-actions{flex-direction:column;align-items:stretch;max-width:320px;margin:0 auto;}
    .btn-solid,.consult-actions .btn-light{padding:14px 20px;text-align:center;}
    .field-row{grid-template-columns:1fr;}
    .consult-card legend{font-size:25px;}
    .cc-done h3{font-size:38px;}
  }

  /* Footer "Contact us" — a plain link styled like the accordion rows */
  .acc-link{display:block;padding:17px 0;font-size:17px;}
  .acc-link:hover{color:var(--ink-soft);}

/* ════════════════════════════════════════════════════════════════
   ACCOUNT
   ════════════════════════════════════════════════════════════════ */
  .acct{max-width:560px;margin:0 auto;padding:54px 24px 100px;}
  .acct-loading{text-align:center;padding:60px 0;color:var(--ink-soft);font-size:17px;}
  .test-note{
    margin:0 0 30px;padding:14px 16px;border:1px dashed #B08A3E;background:#FBF4E4;
    font-size:14.5px;line-height:1.55;color:#6B4E16;
  }
  .test-note code{font-size:13px;}

  .acct-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin-bottom:34px;}
  .acct-tabs button{
    padding:14px 0 13px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
    border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s ease,border-color .2s ease;
  }
  .acct-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);}

  .acct-form h1,.acct-hello{
    font-family:var(--script);font-weight:400;font-size:clamp(40px,5vw,54px);line-height:1;
    margin:0 0 22px;text-align:center;
  }
  .acct-form h2{margin:0 0 6px;font-size:22px;font-weight:400;}
  .acct-form .form-lead{margin:0 0 26px;}
  .acct-form .add-btn{margin:10px 0 0;}
  .acct-email{text-align:center;margin:-8px 0 40px;color:var(--ink-soft);font-size:16px;}
  .acct-card.wide{max-width:none;}
  #profileForm{border-top:1px solid var(--line);padding-top:32px;}

  .pw{position:relative;display:block;text-transform:none;letter-spacing:0;margin:0;}
  .pw input{padding-right:58px;}
  .pw-toggle{
    position:absolute;right:0;bottom:8px;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .text-link{
    display:inline-block;margin:0 0 18px;font-size:14.5px;color:var(--ink-soft);
    border-bottom:1px solid var(--line);padding-bottom:1px;
  }
  .text-link:hover{color:var(--ink);border-color:var(--ink);}
  #resetForm .text-link{display:block;margin:20px auto 0;width:max-content;}
  .form-ok{margin:0 0 16px;font-size:15px;line-height:1.55;color:#2C6E49;}

  .acct-links{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:44px;padding-top:32px;border-top:1px solid var(--line);}
  .acct-links .text-link{margin:0 0 0 auto;}

  /* Small dot on the account icon when signed in */
  .account-link{position:relative;}
  .account-link.signed-in::after{
    content:"";position:absolute;right:-3px;bottom:-2px;width:7px;height:7px;border-radius:50%;
    background:#2C6E49;border:1.5px solid var(--paper);
  }

  /* Bag — accounts are optional */
  .guest-note{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--ink-soft);text-align:center;}
  .guest-note a{color:var(--ink);border-bottom:1px solid var(--line);}

  @media (max-width:900px){
    .acct{padding:34px 18px 70px;}
    .acct-links{flex-direction:column;align-items:stretch;}
    .acct-links .more-btn{text-align:center;}
    .acct-links .text-link{margin:10px auto 0;}
  }

/* ════════════════════════════════════════════════════════════════
   PRELOADER — covers the page until its first 5 photos or films
   have loaded, then fades away. Controlled by js/oak.js.
   ════════════════════════════════════════════════════════════════ */
  .preloader{
    position:fixed;inset:0;z-index:300;background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    transition:opacity .6s ease,visibility .6s ease;
    /* Safety net: even if something goes wrong, never cover the site for more than 9 seconds */
    animation:plFailsafe .6s ease 9s forwards;
  }
  .preloader.done{opacity:0;visibility:hidden;pointer-events:none;}
  @keyframes plFailsafe{to{opacity:0;visibility:hidden;pointer-events:none;}}
  body:has(.preloader:not(.done)){overflow:hidden;}

  .pl-ink{
    font-family:var(--script);font-size:clamp(46px,7vw,86px);line-height:1.1;color:var(--ink);
    padding:0 .15em;clip-path:inset(0 100% 0 0);
    animation:plWrite 1.3s cubic-bezier(.35,0,.2,1) .1s forwards;
  }
  @keyframes plWrite{to{clip-path:inset(0 0 0 0);}}
  .pl-bar{position:relative;display:block;width:min(170px,42vw);height:1px;background:var(--line);overflow:hidden;}
  .pl-bar i{
    position:absolute;inset:0;background:var(--ink);
    transform:scaleX(0);transform-origin:left;transition:transform .4s ease;
  }
  @media (prefers-reduced-motion:reduce){
    .pl-ink{clip-path:none;animation:none;}
    .preloader{transition:none;}
  }

/* ---------- Contact emails ---------- */
  .foot-contact{margin:18px 0 0;font-size:15px;line-height:1.8;color:var(--ink-soft);}
  .foot-contact a{color:var(--ink);border-bottom:1px solid var(--line);}
  .consult-email{margin:26px 0 0;font-size:15px;opacity:.9;animation:riseIn 1s ease .8s both;}
  .consult-email a{border-bottom:1px solid rgba(255,255,255,.6);}

/* ---------- Currency switch ---------- */
  .cur{position:relative;}
  .cur-btn{
    display:flex;align-items:baseline;gap:5px;padding:4px 2px;
    font-size:14px;letter-spacing:.08em;color:inherit;
  }
  .cur-sym{font-size:16px;}
  .cur-code{font-size:12px;letter-spacing:.14em;}
  .cur-menu{
    position:absolute;right:0;top:calc(100% + 12px);z-index:60;min-width:200px;
    background:var(--paper);border:1px solid var(--line);padding:8px 0;
    box-shadow:0 14px 40px rgba(40,28,22,.1);color:var(--ink);
  }
  .cur-head{margin:4px 16px 6px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
  .cur-menu button{display:flex;gap:10px;width:100%;text-align:left;padding:10px 16px;font-size:15.5px;}
  .cur-menu button b{font-weight:500;width:14px;}
  .cur-menu button:hover{background:rgba(59,46,41,.05);}
  .cur-menu button.on{font-weight:500;}
  .cur-menu button.on::after{content:"\2713";margin-left:auto;}
  @media (max-width:900px){
    .cur-code{display:none;}
    .cur-sym{font-size:17px;}
  }

/* ---------- Custom colour box, in the colour row ---------- */
  .colour-own{display:flex;align-items:center;height:30px;margin-left:4px;}
  .colour-own input{
    width:120px;height:30px;padding:0 10px;border:1px solid var(--line);border-radius:0;
    background:none;font-family:var(--serif);font-size:14.5px;font-weight:300;color:var(--ink);
    transition:border-color .2s ease;
  }
  .colour-own input::placeholder{color:var(--ink-soft);opacity:.8;}
  .colour-own input:focus{outline:none;border-color:rgba(59,46,41,.5);}
  .colour-own.on input{border-color:var(--ink);}
  .colour-own.nudge{animation:nudge .45s ease;}

/* ---------- Per-category advice, e.g. "Made to measure advised" ---------- */
  .advice{
    margin:-4px 0 8px;font-size:12px;font-style:italic;letter-spacing:.02em;color:var(--ink-soft);
  }
  .pdp-advice{margin:-26px 0 30px;font-size:13.5px;font-style:italic;color:var(--ink-soft);}
  .sheet-advice{margin:2px 0 0;font-size:12.5px;font-style:italic;color:var(--ink-soft);}
  .also-advice{display:block;margin:0 12px 5px;font-size:12px;font-style:italic;color:var(--ink-soft);}
  @media (max-width:900px){
    .colour-own input{width:108px;}
    .advice{font-size:11.5px;}
    .pdp-advice{margin:-18px 0 24px;}
  }

/* ---------- Casuals sub-sections, own-colour buttons, photo swap ---------- */
  .dd-check.sub{padding-left:44px;font-size:15px;}
  .drawer nav > a.sub{padding:9px 32px 9px 52px;font-size:16px;color:var(--ink-soft);}
  .colour-word{
    width:auto;min-width:30px;padding:0 12px;height:30px;
    border:1px solid var(--line);font-size:14px;letter-spacing:.02em;
  }
  .colour-word.on{border-color:var(--ink);}
  .shot img{transition:opacity .35s ease;}
  .shot img.swapping{opacity:.25;}

/* ---------- Products with fewer than 4 photos ---------- */
  .pdp-shots.shots-1{grid-template-columns:1fr;}          /* one large photo, no grid */
  .pdp-shots.shots-1 .shot{aspect-ratio:3/4;}
  .pdp-shots.shots-2{grid-template-columns:1fr 1fr;}      /* two side by side */

/* ════════════════════════════════════════════════════════════════
   POLICIES PAGE
   ════════════════════════════════════════════════════════════════ */
  .policies{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;max-width:1100px;margin:0 auto;padding:30px 32px 100px;}
  .pol-nav{position:sticky;top:calc(var(--head-h) + 40px);align-self:start;display:flex;flex-direction:column;gap:4px;}
  .pol-nav a{padding:9px 0 9px 14px;font-size:15px;letter-spacing:.06em;color:var(--ink-soft);border-left:2px solid transparent;}
  .pol-nav a:hover{color:var(--ink);border-left-color:var(--ink);}
  .pol{padding-bottom:60px;margin-bottom:60px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--head-h) + 28px);}
  .pol:last-child{border-bottom:0;}
  .pol h2{font-family:var(--script);font-weight:400;font-size:clamp(38px,4.2vw,52px);line-height:1;margin:0 0 26px;}
  .pol h3{margin:34px 0 12px;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
  .pol p,.pol li{font-size:16.5px;line-height:1.75;color:#4A3C36;}
  .pol p{margin:0 0 14px;}
  .pol ul{margin:0 0 16px;padding-left:20px;}
  .pol li{margin-bottom:6px;}
  .pol a{color:var(--ink);border-bottom:1px solid var(--line);}
  .pol-date,.pol-note{font-size:14.5px !important;color:var(--ink-soft) !important;}
  .pol-table{overflow-x:auto;margin:0 0 16px;}
  .pol-table table{width:100%;border-collapse:collapse;min-width:420px;}
  .pol-table th,.pol-table td{text-align:left;vertical-align:top;padding:11px 12px;border:1px solid var(--line);font-size:15px;line-height:1.55;}
  .pol-table th{font-weight:500;background:rgba(59,46,41,.035);}
  .pol-table ul{margin:0;padding-left:18px;}
  .pol-table li{font-size:14.5px;}
  .pol-link{border-bottom:1px solid var(--line);}
  .free-note a{color:var(--ink);border-bottom:1px solid var(--line);}
  @media (max-width:900px){
    .policies{grid-template-columns:minmax(0,1fr);gap:0;padding:14px 18px 70px;}
    .pol-body{min-width:0;}
    .pol-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:34px;}
    .pol-nav a{border:1px solid var(--line);padding:8px 12px;font-size:13.5px;}
    .pol{scroll-margin-top:calc(56px + 20px);}
    .pol p,.pol li{font-size:15.5px;}
  }

/* ---------- Typed size, in inches (accessory caps) ---------- */
  .size-typed{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
    border:1px solid var(--line);padding:0 14px;height:44px;transition:border-color .2s ease;}
  .size-typed:focus-within{border-color:var(--ink);}
  .size-typed.bad{border-color:#9A2A22;}
  .size-typed.nudge{animation:nudge .45s ease;}
  .size-typed input{width:74px;border:0;background:none;font-family:var(--serif);font-size:17px;color:var(--ink);}
  .size-typed input:focus{outline:none;}
  .size-typed span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
  .pdp-shots.shots-3{grid-template-columns:1fr 1fr;}      /* three: one large, two beneath */
  .pdp-shots.shots-3 .shot:first-child{grid-column:1 / -1;}

/* ════════════════════════════════════════════════════════════════
   PRODUCT PHOTO ZOOM — see js/product.js
   ════════════════════════════════════════════════════════════════ */
  .shot{position:relative;}
  .shot img{transition:opacity .35s ease, transform .35s cubic-bezier(.2,0,.1,1);}
  @media (hover:hover) and (pointer:fine){
    .shot{cursor:zoom-in;}                                   /* the magnifier cursor */
  }
  @media not all and (hover:hover) and (pointer:fine){
    .shot{cursor:zoom-in;}
    .shot.zoomed{cursor:zoom-out;touch-action:none;}         /* drag to look around */
    /* A small magnifier in the corner tells phone users they can tap */
    .shot::after{
      content:"";position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;
      background:rgba(250,248,245,.85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B2E29' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center/18px no-repeat;
      pointer-events:none;transition:opacity .25s ease;
    }
    .shot.zoomed::after{opacity:0;}
  }
  @media (prefers-reduced-motion:reduce){
    .shot img{transition:opacity .35s ease;}
  }

/* ---------- Order fallback (WhatsApp / email) ---------- */
  #orderFallback .add-btn,#orderFallback .more-btn{display:block;text-align:center;width:100%;margin:0 0 12px;}
  #orderFallback .add-btn{margin-top:8px;}

/* ---------- Bag page: recommended ---------- */
  .recs{margin-top:10px;}
  .recs .recs-grid{grid-template-columns:repeat(4,1fr);padding-bottom:0;}
  @media (max-width:900px){ .recs .recs-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- Colour code box (made-to-measure agbadas) ---------- */
  .colour-hint{
    margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-soft);
  }
  .colour-hint b{font-weight:400;color:var(--ink);font-family:var(--mono,inherit);letter-spacing:.04em;}
  .colour-hint a{border-bottom:1px solid var(--line);}
  .colour-own input{text-transform:uppercase;letter-spacing:.06em;}
  .colour-own.bad input{border-color:#B3453A;}
  /* the typed colour previews itself inside the box */
  .colour-own.shows{position:relative;}
  .colour-own.shows input{padding-left:32px;}
  .colour-own.shows::before{
    content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
    width:15px;height:15px;border:1px solid var(--line);background:var(--swatch);
  }

/* ════════════════════════════════════════════════════════════════
   SEARCH + WISHLIST
   ════════════════════════════════════════════════════════════════ */
/* ---------- Search panel ---------- */
  .search-open{display:flex;align-items:center;color:inherit;}
  .search{
    position:fixed;inset:0;z-index:200;background:rgba(40,28,22,.35);
    opacity:0;transition:opacity .3s ease;
  }
  .search.is-open{opacity:1;}
  .search-top{
    display:flex;align-items:center;gap:14px;padding:22px clamp(18px,4vw,48px);
    background:var(--paper);border-bottom:1px solid var(--line);
    transform:translateY(-100%);transition:transform .32s cubic-bezier(.2,0,.1,1);
  }
  .search.is-open .search-top{transform:none;}
  .search-icon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:var(--ink-soft);stroke-width:1.5;}
  .search-top input{
    flex:1;border:0;background:none;font-family:var(--serif);font-size:clamp(20px,3vw,30px);
    font-weight:300;color:var(--ink);
  }
  .search-top input::placeholder{color:var(--ink-soft);opacity:.65;}
  .search-top input:focus{outline:none;}
  .search-close{font-size:30px;line-height:1;color:var(--ink-soft);padding:0 4px;}
  .search-close:hover{color:var(--ink);}
  .search-body{
    max-height:calc(100vh - 86px);overflow-y:auto;background:var(--paper);
    transform:translateY(-12px);opacity:0;transition:transform .32s ease .06s,opacity .32s ease .06s;
  }
  .search.is-open .search-body{transform:none;opacity:1;}
  .search-hint{
    margin:0;padding:18px clamp(18px,4vw,48px);font-size:13px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-soft);
  }
  .search-grid{padding:0 clamp(18px,4vw,48px) 48px;}
  @media (max-width:900px){
    .search-grid{grid-template-columns:repeat(2,1fr);}
    .search-body{max-height:calc(100vh - 74px);}
  }

/* ---------- Wishlist ---------- */
  .wish-link{position:relative;}
  .wish-count{
    position:absolute;top:-6px;right:-8px;min-width:15px;height:15px;padding:0 3px;
    border-radius:8px;background:var(--ink);color:var(--paper);
    font-size:10px;line-height:15px;text-align:center;letter-spacing:0;
  }
  .card .wish svg{transition:fill .25s ease,stroke .25s ease,transform .25s ease;}
  .card .wish.on svg{fill:var(--ink);stroke:var(--ink);}
  .card .wish.on{transform:scale(1.08);}
  .wish-page{min-height:40vh;}
  /* the browser's own clear button — we have our own × */
  .search-top input::-webkit-search-cancel-button,
  .search-top input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}

/* ---------- Consultation: social links under the email ---------- */
  .consult-social{
    display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-top:18px;
    animation:riseIn 1s ease .9s both;
  }
  .consult-social a{display:flex;align-items:center;gap:7px;color:#fff;font-size:14px;letter-spacing:.03em;opacity:.9;transition:opacity .2s ease;}
  .consult-social a:hover{opacity:1;}
  .consult-social svg{width:19px;height:19px;fill:currentColor;}

/* ---------- Address ---------- */
  address.foot-contact{font-style:normal;}
  .consult-visit{margin:14px 0 0;font-size:15px;opacity:.9;animation:riseIn 1s ease .85s both;}
  .consult-visit a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);}
  .consult-visit span{margin:0 8px;}

/* ════════════════════════════════════════════════════════════════
   ACCOUNT
   ════════════════════════════════════════════════════════════════ */
  .account-link{position:relative;display:flex;align-items:center;}
  .account-link.signed-in svg{fill:currentColor;}
  .account-link.signed-in::after{
    content:"";position:absolute;right:-3px;bottom:-1px;width:7px;height:7px;border-radius:50%;
    background:#3F7A4C;border:1.5px solid var(--paper);
  }
  .acct{min-height:60vh;display:flex;justify-content:center;padding:clamp(48px,8vw,96px) 22px 90px;}
  .acct-card{width:100%;max-width:440px;}
  .acct-title{font-family:var(--script);font-weight:400;font-size:clamp(44px,6vw,62px);line-height:1.1;margin:0 0 26px;text-align:center;}
  .acct-eyebrow{margin:0 0 6px;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);}
  .acct-lead{margin:-10px 0 26px;text-align:center;color:var(--ink-soft);line-height:1.7;}
  .acct-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:28px;}
  .acct-tabs button{
    flex:1;padding:14px 0;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
    border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s ease,border-color .2s ease;
  }
  .acct-tabs button.on{color:var(--ink);border-bottom-color:var(--ink);}
  .acct-form .field{margin-bottom:22px;}
  .acct-form .add-btn{width:100%;margin-top:6px;}
  .acct-link{display:block;margin:18px auto 0;font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:1px;}
  .acct-link:hover{color:var(--ink);}
  .acct-error{margin:0 0 16px;padding:12px 14px;background:#F6E6E2;color:#8A2E22;font-size:14.5px;line-height:1.5;}
  .acct-ok{margin:0 0 16px;padding:12px 14px;background:#E5EFE3;color:#2F5A35;font-size:14.5px;line-height:1.5;}
  .acct-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 26px;margin:6px 0 26px;}
  .acct-links a{font-size:15px;border-bottom:1px solid var(--line);}
  .acct-note{text-align:center;font-size:13.5px;color:var(--ink-soft);margin:0 0 26px;}
  #acctIn .more-btn{display:block;width:100%;text-align:center;}
  .acct-loading{color:var(--ink-soft);font-size:14px;letter-spacing:.1em;}
  .acct-card .add-btn{display:block;text-align:center;}

/* ════════════════════════════════════════════════════════════════
   WELCOME OFFER — popup, bag note, account note
   ════════════════════════════════════════════════════════════════ */
  .welcome{
    position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;
    padding:22px;background:rgba(40,28,22,.45);
    opacity:0;transition:opacity .32s ease;
  }
  .welcome.is-open{opacity:1;}
  .welcome-card{
    position:relative;width:100%;max-width:440px;max-height:calc(100vh - 44px);overflow-y:auto;
    background:var(--paper);padding:52px 40px 34px;text-align:center;
    box-shadow:0 24px 70px rgba(30,20,15,.28);
    transform:translateY(14px) scale(.98);transition:transform .38s cubic-bezier(.2,0,.1,1);
  }
  .welcome.is-open .welcome-card{transform:none;}
  .welcome-close{
    position:absolute;top:10px;right:12px;width:40px;height:40px;
    font-size:30px;line-height:1;color:var(--ink-soft);
  }
  .welcome-close:hover,.welcome-close:focus-visible{color:var(--ink);}
  .welcome-eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);}
  .welcome-title{
    margin:0 0 16px;font-family:var(--script);font-weight:400;
    font-size:clamp(38px,8vw,50px);line-height:1.1;color:var(--ink);
  }
  .welcome-text{margin:0 0 26px;line-height:1.7;color:var(--ink-soft);}
  .welcome-cta{display:block;width:100%;text-align:center;}
  .welcome-signin{
    display:inline-block;margin-top:18px;font-size:14.5px;color:var(--ink);
    border-bottom:1px solid var(--line);padding-bottom:1px;
  }
  .welcome-small{margin:20px 0 0;font-size:12px;letter-spacing:.04em;color:var(--ink-soft);}
  @media (max-width:520px){
    .welcome-card{padding:48px 24px 28px;}
  }
  @media (prefers-reduced-motion:reduce){
    .welcome,.welcome-card{transition:none;}
  }

  .welcome-note{margin:14px 0 4px;font-size:13.5px;line-height:1.6;color:var(--ink-soft);}
  .welcome-note a{color:var(--ink);border-bottom:1px solid var(--line);}
  .acct-offer{
    margin:0 0 26px;padding:12px 14px;text-align:center;font-size:14px;line-height:1.6;
    background:#EFEBE5;color:var(--ink);
  }
  .welcome-card:focus{outline:none;}

/* ---------- Thank-you notice after a paid order ---------- */
  .oak-notice{
    position:fixed;left:50%;bottom:24px;z-index:260;display:flex;align-items:center;gap:14px;
    max-width:calc(100% - 32px);padding:16px 18px 16px 22px;
    background:var(--ink);color:var(--paper);box-shadow:0 14px 40px rgba(30,20,15,.25);
    transform:translate(-50%,20px);opacity:0;pointer-events:none;
    transition:opacity .35s ease,transform .35s ease;
  }
  .oak-notice.oak-notice-on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
  .oak-notice p{margin:0;font-size:15px;line-height:1.5;}
  .oak-notice button{font-size:24px;line-height:1;color:var(--paper);opacity:.7;padding:0 2px;}
  .oak-notice button:hover{opacity:1;}
  @media (prefers-reduced-motion:reduce){ .oak-notice{transition:none;} }

/* ---------- "Bring it back" in the empty bag ---------- */
  .bag-restore{
    max-width:420px;margin:6px auto 26px;padding:20px 22px;text-align:center;
    background:#EFEBE5;
  }
  .bag-restore p{margin:0 0 14px;font-size:15px;line-height:1.6;color:var(--ink);}
  .bag-restore .add-btn{display:inline-block;padding-left:34px;padding-right:34px;}
  .bag-restore .add-btn{margin:0;}

/* ════════════════════════════════════════════════════════════════
   ORDER HISTORY — account page
   ════════════════════════════════════════════════════════════════ */
  .acct-orders{max-width:760px;margin:0 auto;padding:0 22px 100px;}
  .acct-orders-title{
    margin:0 0 30px;text-align:center;font-family:var(--script);font-weight:400;
    font-size:clamp(38px,5vw,52px);line-height:1.1;color:var(--ink);
  }
  .ord-msg{margin:0 0 20px;text-align:center;color:var(--ink-soft);line-height:1.7;}

  .ord-verify{max-width:460px;margin:0 auto;padding:26px 24px;text-align:center;background:#EFEBE5;}
  .ord-verify p{margin:0 0 18px;line-height:1.7;color:var(--ink);}
  .ord-verify b{font-weight:500;}
  .ord-verify .add-btn{display:block;width:100%;margin:0;}
  .ord-verify .acct-link{margin-top:16px;}
  .ord-verify-msg{margin:16px 0 0 !important;font-size:14px;color:var(--ink-soft) !important;}

  .ord-list{display:flex;flex-direction:column;gap:22px;}
  .ord{border:1px solid var(--line);background:var(--paper);}
  .ord-head{
    display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
    padding:20px 22px;border-bottom:1px solid var(--line);
  }
  .ord-num{margin:0 0 3px;font-size:17px;color:var(--ink);letter-spacing:.02em;}
  .ord-date{margin:0;font-size:14px;color:var(--ink-soft);}
  .ord-status{
    margin:0;padding:6px 12px;white-space:nowrap;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  }
  .ord-status--go{background:#EFEBE5;color:var(--ink);}
  .ord-status--done{background:#E5EFE3;color:#2F5A35;}
  .ord-status--wait{background:#F5EEDC;color:#7A5A1E;}
  .ord-status--off{background:#F2E3E0;color:#8A2E22;}

  .ord-items{list-style:none;margin:0;padding:6px 22px;}
  .ord-item{display:flex;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
  .ord-item:last-child{border-bottom:0;}
  .ord-thumb{flex:0 0 64px;height:85px;overflow:hidden;background:#EFEBE5;display:block;}
  .ord-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .ord-item-text{min-width:0;}
  .ord-item-name{margin:0 0 2px;font-size:16px;color:var(--ink);}
  .ord-item-sub{margin:0 0 2px;font-size:14px;color:var(--ink-soft);line-height:1.5;}
  .ord-item-qty{margin:0;font-size:13px;color:var(--ink-soft);}

  .ord-foot{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding:16px 22px;border-top:1px solid var(--line);
  }
  .ord-total{margin:0;color:var(--ink-soft);font-size:15px;}
  .ord-total b{margin-left:8px;font-weight:500;color:var(--ink);font-size:17px;}
  .ord-link{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;}
  @media (max-width:520px){
    .ord-head,.ord-foot{padding-left:16px;padding-right:16px;}
    .ord-items{padding-left:16px;padding-right:16px;}
  }
  .acct-orders{scroll-margin-top:90px;}      /* clear the fixed header when jumping to orders */

/* ---------- Header: "Your orders" icon (signed-in customers only) ---------- */
  .orders-link{display:flex;align-items:center;color:inherit;}
  .orders-link[hidden]{display:none;}

/* ════════════════════════════════════════════════════════════════
   LIVE FROM SHOPIFY — sold out, and items no longer available
   ════════════════════════════════════════════════════════════════ */
  /* sizes and colours Shopify says are sold out: visible, crossed, not choosable */
  .size.sold{
    color:var(--ink-soft);opacity:.45;cursor:not-allowed;
    background:linear-gradient(to top right,transparent calc(50% - .5px),currentColor,transparent calc(50% + .5px));
  }
  .size.sold:hover{border-color:var(--line);}
  .colour.sold{opacity:.35;cursor:not-allowed;position:relative;}
  .colour.sold::after{
    content:"";position:absolute;left:50%;top:50%;width:120%;height:1px;background:var(--ink);
    transform:translate(-50%,-50%) rotate(-45deg);
  }
  .opt-note{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#8A2E22;}

  /* cards */
  .tag.tag-sold{color:#8A2E22;border-color:#C9A49C;}
  .quick-add[disabled]{opacity:.55;cursor:not-allowed;}
  .quick-add[disabled]:hover{color:var(--ink-soft);border-color:var(--line);}

  /* product page and Quick Add button */
  .add-btn[disabled]{opacity:.5;cursor:not-allowed;}

  /* bag */
  .line-warn{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:#8A2E22;}
  .bag-warn{margin:0 0 14px;padding:11px 13px;font-size:13.5px;line-height:1.5;background:#F6E6E2;color:#8A2E22;}