/* Salt Lights - main stylesheet.
   1. Design tokens and components (ported from the approved prototype)
   2. WordPress core classes
   3. WooCommerce overrides
   Lamp and room imagery are injected as CSS custom properties from PHP. */


  :root {
    --paper:#FBF6F0; --paper-2:#F4EAE0; --paper-3:#EADCCD;
    --ink:#1A1411; --soft:#6E5C4E; --line:#E0D0BE;
    --cta:#B44514; --cta-h:#96350B; --gold:#B0813C;
    --dark:#17120E; --dark-2:#221A14; --ok:#2E6A4E;
    --sans:'Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
    --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
    --pad:clamp(1rem,3.2vw,3rem); --r:3px;
    --logo-ink:#241B14;
    --roomimg:none;
    --lampimg:none;
  }
  @media (prefers-color-scheme: dark) {
    :root { --paper:#14100D; --paper-2:#1C1611; --paper-3:#261D16; --ink:#F6EFE7; --soft:#A08A78; --line:#362A21;
      --cta:#B44514; --cta-h:#96350B; --gold:#C79A50; --logo-ink:#F5EFE8; --dark:#0E0B09; --dark-2:#1A1410; }
  }
  :root[data-theme="dark"] {
    --paper:#14100D; --paper-2:#1C1611; --paper-3:#261D16; --ink:#F6EFE7; --soft:#A08A78; --line:#362A21;
    --cta:#B44514; --cta-h:#96350B; --gold:#C79A50; --logo-ink:#F5EFE8; --dark:#0E0B09; --dark-2:#1A1410;
  }
  :root[data-theme="light"] {
    --paper:#FBF6F0; --paper-2:#F4EAE0; --paper-3:#EADCCD; --ink:#1A1411; --soft:#6E5C4E; --line:#E0D0BE;
    --cta:#B44514; --cta-h:#96350B; --gold:#B0813C; --dark:#17120E; --dark-2:#221A14; --logo-ink:#241B14;
  }

  * { box-sizing:border-box; }
  body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  h1,h2,h3,h4 { margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.08; text-wrap:balance; }
  a { color:inherit; text-decoration:none; }
  img { display:block; }
  .wrap, .shell { max-width:1360px; margin-inline:auto; padding-inline:var(--pad); }
  .kicker { font-family:var(--mono); font-size:.66rem; letter-spacing:.17em; text-transform:uppercase; color:var(--cta); display:inline-flex; align-items:center; gap:.6rem; }
  .kicker::before { content:''; width:22px; height:1px; background:currentColor; }
  .muted { color:var(--soft); }

  .btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:0; cursor:pointer; font-family:var(--sans); font-size:.92rem; font-weight:700; padding:.95rem 1.7rem; border-radius:var(--r); transition:background .2s,color .2s,border-color .2s; }
  .btn-cta { background:var(--cta); color:#fff; }
  .btn-cta:hover { background:var(--cta-h); }
  .btn-out { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
  .btn-out:hover { background:var(--ink); color:var(--paper); }
  .btn-lt { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.55); }
  .btn-lt:hover { background:#fff; color:var(--dark); border-color:#fff; }
  .btn-sm { padding:.6rem .9rem; font-size:.8rem; }
  .btn-full { width:100%; }

  /* ================= HEADER ================= */
  .site-hdr { position:sticky; top:0; z-index:70; }
  .hdr-main { background:var(--paper); border-bottom:1px solid var(--line); }
  .hdr-main-in { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
    gap:clamp(1rem,3vw,2.5rem); padding-block:1.05rem; transition:padding .25s; }
  .site-hdr.stuck .hdr-main-in { padding-block:.55rem; }
  .logo { display:block; flex:none; }
  .logo .logomark { height:68px; width:auto; display:block; fill:var(--logo-ink,#241B14); transition:height .25s; }
  .site-hdr.stuck .logo .logomark { height:50px; }
  .custom-logo { width:auto; height:68px; transition:height .25s; }
  .site-hdr.stuck .custom-logo { height:50px; }

  .search { display:flex; align-items:center; gap:.65rem; background:var(--paper-2);
    border:1.5px solid var(--line); border-radius:100px; padding:.66rem 1.15rem; max-width:520px; width:100%;
    justify-self:center; transition:border-color .2s, background .2s; }
  .search:focus-within { border-color:var(--ink); background:var(--paper); }
  .search svg { flex:none; color:var(--soft); }
  .search input { border:0; background:transparent; outline:none; font-family:var(--sans); font-size:.92rem; color:var(--ink); width:100%; }
  .search input::placeholder { color:var(--soft); }

  .hdr-acts { display:flex; align-items:center; gap:1.5rem; }
  .hact { display:flex; align-items:center; gap:.5rem; font-size:.86rem; font-weight:600; color:var(--ink); white-space:nowrap; transition:color .2s; }
  .hact svg { color:var(--soft); transition:color .2s; }
  .hact:hover, .hact:hover svg, .hact.hot, .hact.hot svg { color:var(--cta); }
  .cnt { font-variant-numeric:tabular-nums; }

  .hdr-nav { background:var(--dark); }
  .hdr-nav-in { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
  .hdr-nav-in .mainnav { grid-column:2; justify-self:center; }
  .hdr-nav-in .hdr-ship { grid-column:3; justify-self:end; }
  .mainnav { display:flex; align-items:stretch; margin:0; padding:0; list-style:none; }
  .mainnav > li { position:relative; }
  .mainnav > li > a { display:flex; align-items:center; gap:.45rem; padding:1.05rem 1.15rem; font-size:.85rem;
    font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.8);
    position:relative; transition:color .2s, background .2s; }
  .mainnav > li:hover > a, .mainnav > li > a:focus-visible { color:#fff; background:rgba(255,255,255,.07); }
  .mainnav > li > a::after { content:''; position:absolute; left:1.15rem; right:1.15rem; bottom:.5rem; height:2px;
    background:var(--cta); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
  .mainnav > li:hover > a::after, .mainnav > li > a:focus-visible::after { transform:scaleX(1); }
  .caret { width:7px; height:7px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg) translateY(-2px); opacity:.75; }

  .drop { position:absolute; top:100%; left:0; min-width:255px; background:var(--paper);
    border:1px solid var(--line); box-shadow:0 20px 44px rgba(0,0,0,.18); padding:.45rem 0;
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .2s, transform .2s, visibility .2s; }
  .mainnav > li:hover .drop, .mainnav > li:focus-within .drop { opacity:1; visibility:visible; transform:none; }
  .drop a { display:flex; justify-content:space-between; align-items:baseline; gap:1.2rem; padding:.7rem 1.2rem;
    font-size:.86rem; font-weight:600; color:var(--ink); transition:background .18s, color .18s; }
  .drop a:hover { background:var(--paper-2); color:var(--cta); }
  .drop a span { font-family:var(--mono); font-size:.66rem; color:var(--soft); font-weight:400; }

  .hdr-ship { font-size:.78rem; color:rgba(255,255,255,.6); white-space:nowrap; }
  .hdr-ship b { color:#F0A868; font-weight:600; }

  .nav-toggle, .nav-close, .nav-backdrop, .mobile-nav-head { display:none; }

  @media (max-width:980px) {
    .search { display:none; }
    .hdr-main-in { grid-template-columns:auto 1fr auto; }
    .hdr-nav-in { display:flex; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; }
    .hdr-nav-in::-webkit-scrollbar { display:none; }
    .hdr-ship { display:none; }
    .drop { display:none; }
    .mainnav > li > a { padding:.9rem .8rem; font-size:.78rem; }
  }
  /* ================= HERO ================= */
  .hero { position:relative; min-height:clamp(430px,66svh,620px); display:flex; align-items:center;
    overflow:hidden; background:#0B0806; border-bottom:1px solid var(--line); }
  .hero-bg { position:absolute; inset:0; background:var(--roomimg) center right/cover no-repeat; }
  .hero-scrim { position:absolute; inset:0; background:
      linear-gradient(90deg, rgba(8,6,4,.94) 0%, rgba(8,6,4,.86) 26%, rgba(8,6,4,.42) 54%, rgba(8,6,4,.06) 78%); }
  .hero-in { position:relative; z-index:2; width:100%; padding-block:clamp(2.6rem,6vw,4.6rem); color:#fff; }
  .hero-tx { max-width:34rem; }
  .hero-in .kicker { color:#F0A868; }
  .hero h1 { font-size:clamp(2.3rem,4.6vw,4rem); margin:1.1rem 0 1rem; }
  .hero h1 em { font-style:normal; color:#F0A868; }
  .hero-sub { font-size:1.05rem; color:rgba(255,255,255,.8); max-width:42ch; margin:0 0 1.6rem; }
  .ticks { list-style:none; padding:0; margin:0 0 1.9rem; display:grid; gap:.5rem; }
  .ticks li { display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; font-weight:600; color:rgba(255,255,255,.92); }
  .ticks svg { flex:none; margin-top:.15rem; }
  .hero-cta { display:flex; gap:.7rem; flex-wrap:wrap; align-items:center; }
  .fromprice { font-size:.84rem; color:rgba(255,255,255,.66); margin-left:.2rem; }
  .fromprice b { font-size:1.32rem; color:#fff; letter-spacing:-.02em; }

  /* category rail under the hero */
  .rail { display:grid; grid-template-columns:repeat(5,1fr); background:var(--paper); border-bottom:1px solid var(--line); }
  .rail a { padding:1rem 1.1rem 1.05rem; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:.3rem; transition:background .25s; }
  .rail a:last-child { border-right:0; }
  .rail a:hover { background:var(--paper-2); }
  .rail .rn { font-size:.92rem; font-weight:700; letter-spacing:-.012em; display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
  .rail .rn i { font-style:normal; color:var(--cta); opacity:0; transform:translateX(-4px); transition:opacity .25s,transform .25s; }
  .rail a:hover .rn i { opacity:1; transform:none; }
  .rail .rm { font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); }

  @media (max-width:900px) {
    .hero-scrim { background:linear-gradient(180deg, rgba(8,6,4,.62) 0%, rgba(8,6,4,.88) 55%, rgba(8,6,4,.95) 100%); }
    .hero-tx { max-width:none; }
    .rail { grid-template-columns:repeat(2,1fr); }
    .rail a:nth-child(2n) { border-right:0; }
  }
  /* ================= FEATURED PRODUCT ================= */
  .feat { background:var(--paper-2); border-bottom:1px solid var(--line); }
  .feat-in { display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(1.6rem,3.5vw,3.4rem); padding-block:clamp(2.2rem,4.5vw,3.6rem); align-items:start; }
  .feat-art { position:relative; background:linear-gradient(165deg,#241A13,#100B08); border-radius:var(--r); aspect-ratio:1/.94; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:5% 5% 8%; transition:background .5s ease; }
  .feat-stage { display:flex; align-items:flex-end; justify-content:center; gap:clamp(.9rem,3vw,2.2rem); }
  .feat-lamp { position:relative; flex:none; aspect-ratio:340/537; transition:height .45s cubic-bezier(.2,.7,.3,1); }
  .feat-lamp .lglow { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); width:190%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,150,60,.5),transparent 68%); filter:blur(42px); transition:opacity .5s ease; }
  .feat-lamp .limg { position:absolute; inset:0; background:var(--lampimg); filter:drop-shadow(0 10px 26px rgba(0,0,0,.55)); cursor:zoom-in; }
  .feat-lamp.zooming .limg { filter:none; }
  .feat-art.off { background:linear-gradient(165deg,#1A1512,#0A0807); }
  .feat-art.off .lglow { opacity:0; }
  .feat-art.off .limg,
  .feat-art.off .feat-lamp.zooming .limg { filter:brightness(.46) saturate(.52) contrast(1.06); }
  .feat-mug { position:relative; flex:none; display:flex; align-items:flex-end; opacity:.72; transition:height .45s cubic-bezier(.2,.7,.3,1); }
  .feat-mug .m { height:100%; aspect-ratio:82/95; border:1.5px dashed rgba(255,255,255,.6); border-radius:2px 2px 6px 6px; }
  .feat-mug span { position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:.4rem; font-family:var(--mono); font-size:.55rem; letter-spacing:.12em; color:rgba(255,255,255,.7); white-space:nowrap; }
  .feat-rule { position:relative; flex:none; width:1px; background:rgba(255,255,255,.22); transition:height .45s cubic-bezier(.2,.7,.3,1); }
  .feat-rule b { position:absolute; left:7px; top:-2px; font-family:var(--mono); font-size:.58rem; letter-spacing:.1em; color:rgba(255,255,255,.72); font-weight:400; white-space:nowrap; }

  .lampsw { position:absolute; z-index:4; left:1rem; top:1rem; display:flex; align-items:center; gap:.55rem;
    background:rgba(0,0,0,.42); border:1px solid rgba(255,255,255,.16); border-radius:100px;
    padding:.3rem .85rem .3rem .32rem; cursor:pointer; font-family:var(--mono);
    transition:border-color .25s, background .25s; }
  .lampsw:hover { border-color:rgba(255,255,255,.4); background:rgba(0,0,0,.55); }
  .lampsw:focus-visible { outline:2px solid var(--cta); outline-offset:2px; }
  .lampsw .pw { width:26px; height:26px; border-radius:50%; flex:none; display:grid; place-items:center;
    border:1.5px solid rgba(255,255,255,.28); color:rgba(255,255,255,.55);
    transition:background .3s, border-color .3s, color .3s, box-shadow .3s; }
  .lampsw[aria-checked="true"] .pw { background:var(--cta); border-color:var(--cta); color:#fff; box-shadow:0 0 15px 3px rgba(255,158,69,.6); }
  .lampsw .lbl { font-size:.55rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:color .3s; }
  .lampsw[aria-checked="true"] .lbl { color:rgba(255,255,255,.9); }
  .feat-zoom { position:absolute; z-index:3; right:1rem; bottom:1rem; font-family:var(--mono); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.5); pointer-events:none; transition:opacity .3s; }
  .feat-art.zoomed .feat-zoom { opacity:0; }
  @media (hover:none) { .feat-zoom { display:none; } .feat-lamp .limg { cursor:default; } }

  .pill { display:inline-flex; align-items:center; gap:.45rem; background:var(--cta); color:#fff; font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; text-transform:uppercase; padding:.4rem .65rem; border-radius:2px; }
  .feat-info h2 { font-size:clamp(1.7rem,3.4vw,2.6rem); margin:.85rem 0 .55rem; }
  .feat-lede { color:var(--soft); margin:0 0 1.3rem; max-width:46ch; font-size:.97rem; }
  .feat-price { display:flex; align-items:baseline; gap:.7rem; margin-bottom:1.2rem; }
  .feat-price .now { font-size:2.2rem; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
  .feat-price .ship { font-size:.82rem; font-weight:700; }
  .swlbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
  .szgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:.45rem; margin-bottom:1.1rem; }
  .szbtn { border:1.5px solid var(--line); background:var(--paper); border-radius:var(--r); padding:.6rem .3rem; cursor:pointer; font-family:var(--sans); color:var(--ink); text-align:center; transition:border-color .16s,background .16s,transform .16s; }
  .szbtn:hover { border-color:var(--cta); transform:translateY(-2px); }
  .szbtn[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
  .szbtn b { display:block; font-size:.8rem; font-weight:700; letter-spacing:-.01em; }
  .szbtn small { display:block; font-family:var(--mono); font-size:.62rem; margin-top:.15rem; opacity:.75; font-variant-numeric:tabular-nums; }
  .szbtn[aria-pressed="true"] small { opacity:.9; }
  .szgrid.needpick .szbtn { border-color:var(--cta); animation:nudge .45s ease; }
  @keyframes nudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
  .feat-room { display:flex; align-items:center; gap:.5rem; font-size:.86rem; color:var(--soft); margin-bottom:1.2rem; }
  .feat-room b { color:var(--ink); }
  .feat-buy { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.1rem; }
  .feat-ticks { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
  .feat-ticks li { display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:var(--soft); }
  .feat-ticks b { color:var(--ink); font-weight:600; }


  .tablist { display:flex; gap:.3rem; background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
    padding:.3rem; margin-bottom:1.5rem; overflow-x:auto; scrollbar-width:none; }
  .tablist::-webkit-scrollbar { display:none; }
  .tab { flex:1 1 0; border:0; background:transparent; cursor:pointer; font-family:var(--sans); font-size:.95rem;
    font-weight:700; letter-spacing:-.015em; color:var(--soft); padding:.72rem .5rem; border-radius:2px;
    white-space:nowrap; transition:background .18s, color .18s; }
  .tab:hover { background:var(--paper-2); color:var(--ink); }
  .tab[aria-selected="true"] { background:var(--ink); color:var(--paper); }
  .tab[aria-selected="true"]:hover { background:var(--ink); color:var(--paper); }
  .tab:focus-visible { outline:2px solid var(--cta); outline-offset:1px; }
  .tabpanel { display:none; font-size:.9rem; }
  .tabpanel.on { display:block; }
  .tabpanel p { margin:0 0 .9rem; color:var(--soft); }
  .tabpanel h3, .tabpanel h4 { font-size:.95rem; margin:1.2rem 0 .4rem; }
  .spectbl { width:100%; border-collapse:collapse; font-size:.88rem; }
  .spectbl th, .spectbl td { text-align:left; padding:.55rem .5rem .55rem 0; border-bottom:1px solid var(--line); }
  .spectbl th { font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--soft); font-weight:400; width:40%; }
  .spectbl td { font-variant-numeric:tabular-nums; }

  /* ================= ROOM SCENE ================= */
  .room { background:var(--dark); border-block:1px solid var(--line); }
  .room-hd { text-align:center; max-width:56ch; margin:0 auto clamp(1.5rem,3vw,2.4rem); color:#F6EFE7; }
  .room-hd h2 { font-size:clamp(1.6rem,3.4vw,2.5rem); margin:.6rem 0 .6rem; }
  .room-hd p { color:#B9A796; margin:0; }
  .roomstage { position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:16/9; background:#0C0906; }
  .roomstage .rimg { position:absolute; inset:0; background:var(--roomimg) center/cover no-repeat; transition:filter .7s ease; }
  .roomstage .cool { position:absolute; inset:0; opacity:0; transition:opacity .7s ease; pointer-events:none;
    background:linear-gradient(180deg, rgba(16,24,38,.42), rgba(8,12,20,.62)); }
  .roomstage.off .rimg { filter:brightness(.3) saturate(.24) contrast(1.06); }
  .roomstage.off .cool { opacity:1; }
  .roomcap { position:absolute; z-index:3; right:1rem; bottom:1rem; font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.7); }
  .roomnote { margin-top:1rem; text-align:center; font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:#8A7666; }

  @media (max-width:880px) {
    .tab { flex:0 0 auto; font-size:.86rem; padding:.6rem .85rem; }
  }
  @media (max-width:900px) { .feat-in { grid-template-columns:1fr; } .szgrid { grid-template-columns:repeat(2,1fr); } }

  /* ================= SEO CONTENT ================= */
  .copy { background:var(--paper-2); border-block:1px solid var(--line); }
  .copy-in { max-width:62rem; margin-inline:auto; }
  .copy h2 { font-size:clamp(1.35rem,2.4vw,1.85rem); margin:2.6rem 0 .9rem; letter-spacing:-.02em; }
  .copy h2:first-of-type { margin-top:0; }
  .copy p { margin:0 0 1rem; color:var(--soft); max-width:70ch; line-height:1.7; }
  .copy p strong { color:var(--ink); }
  .copy ul { margin:0 0 1.2rem; padding-left:1.1rem; max-width:70ch; }
  .copy li { margin-bottom:.5rem; color:var(--soft); line-height:1.65; }
  .copy li strong { color:var(--ink); }
  .copy a { color:var(--cta); font-weight:600; border-bottom:1px solid color-mix(in srgb,var(--cta) 35%,transparent); }
  .copy a:hover { border-bottom-color:var(--cta); }
  .copy .lede-big { font-size:1.1rem; color:var(--ink); max-width:62ch; }

  .trust { background:var(--paper); border-bottom:1px solid var(--line); }
  .trust-in { display:grid; grid-template-columns:repeat(4,1fr); }
  .trust-i { display:flex; align-items:center; gap:.8rem; padding:1.15rem 1.2rem; border-right:1px solid var(--line); }
  .trust-i:last-child { border-right:0; }
  .trust-i b { display:block; font-size:.87rem; }
  .trust-i span { font-size:.77rem; color:var(--soft); }

  .sec { padding-block:clamp(3rem,6vw,5rem); }
  .sec-hd { text-align:center; max-width:60ch; margin:0 auto clamp(2rem,4vw,3rem); }
  .sec-hd h2 { font-size:clamp(1.75rem,3.6vw,2.7rem); margin:.7rem 0 .7rem; }
  .sec-hd p { color:var(--soft); margin:0; }

  /* ================= PRODUCT CARDS ================= */
  .pgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
  .card { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .25s,transform .25s; }
  .card:hover { box-shadow:0 12px 30px rgba(0,0,0,.10); transform:translateY(-3px); }
  .shot { position:relative; aspect-ratio:1; background:#191310; display:grid; place-items:center; overflow:hidden; }
  .shot .bloom { position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(255,150,60,.72),transparent 68%); filter:blur(34px); opacity:0; transition:opacity .45s; }
  .shot img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; transition:filter .45s,transform .5s cubic-bezier(.2,.7,.3,1); }
  @media (hover:hover) {
    .shot img { filter:brightness(.42) saturate(.55); }
    .card:hover .shot img { filter:brightness(1.06) saturate(1.04); transform:scale(1.05); }
    .card:hover .shot .bloom { opacity:1; }
  }
  .hint { position:absolute; z-index:2; bottom:.6rem; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.55rem; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.6); transition:opacity .3s; white-space:nowrap; }
  .card:hover .hint { opacity:0; }
  @media (hover:none) { .hint { display:none; } }
  .tag { position:absolute; z-index:2; top:.7rem; left:.7rem; background:var(--cta); color:#fff; font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .52rem; border-radius:2px; }
  .card-b { padding:.9rem 1rem 1.05rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
  .card-b h3 { font-size:.95rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
  .rev { display:flex; align-items:center; gap:.4rem; font-size:.72rem; color:var(--soft); }
  .stars { color:var(--line); letter-spacing:.09em; }

  .swrow { display:flex; flex-wrap:wrap; gap:.32rem; }
  .swrow .sw { border:1.5px solid var(--line); background:transparent; border-radius:2px; padding:.32rem .5rem; cursor:pointer;
    font-family:var(--mono); font-size:.66rem; letter-spacing:.03em; color:var(--ink); font-variant-numeric:tabular-nums; transition:all .16s; }
  .swrow .sw:hover { border-color:var(--cta); color:var(--cta); }
  .swrow .sw[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--paper); }
  .swrow .sw:focus-visible { outline:2px solid var(--cta); outline-offset:2px; }
  .swrow .only { border-style:dashed; cursor:default; color:var(--soft); }
  .swrow .only:hover { border-color:var(--line); color:var(--soft); }
  .swlbl { font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }

  .prow { display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; margin-top:auto; padding-top:.2rem; }
  .price { font-size:1.18rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
  .spec { font-family:var(--mono); font-size:.63rem; letter-spacing:.06em; color:var(--soft); }

  /* added-to-cart state */
  .fromline { display:flex; align-items:baseline; gap:.45rem; margin-top:auto; }
  .fromlbl { font-family:var(--mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--soft); }
  .szpanel { position:absolute; inset:0; z-index:4; background:color-mix(in srgb,var(--paper) 97%,transparent);
    backdrop-filter:blur(4px); display:flex; flex-direction:column; padding:.85rem;
    opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; }
  .card.is-picking .szpanel { opacity:1; visibility:visible; }
  .szhd { display:flex; justify-content:space-between; align-items:center; margin-bottom:.6rem; flex:none; }
  .szhd span { font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
  .szx { border:0; background:transparent; cursor:pointer; font-size:1.15rem; line-height:1; color:var(--soft); padding:.1rem .35rem; }
  .szx:hover { color:var(--cta); }
  .szrows { display:grid; gap:.3rem; overflow-y:auto; }
  .szrow { display:flex; justify-content:space-between; align-items:center; gap:.6rem; padding:.58rem .65rem;
    border:1.5px solid var(--line); border-radius:2px; background:transparent; cursor:pointer; text-align:left;
    font-family:var(--sans); color:var(--ink); transition:border-color .15s,background .15s; }
  .szrow:hover { border-color:var(--cta); background:color-mix(in srgb,var(--cta) 8%,transparent); }
  .szrow:focus-visible { outline:2px solid var(--cta); outline-offset:1px; }
  .szrow b { font-size:.84rem; font-weight:700; display:block; letter-spacing:-.01em; }
  .szrow small { font-family:var(--mono); font-size:.61rem; letter-spacing:.05em; color:var(--soft); }
  .szrow .pp { font-size:.94rem; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .added { position:absolute; inset:0; z-index:5; background:color-mix(in srgb,var(--paper) 96%,transparent); backdrop-filter:blur(3px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; padding:1.2rem; text-align:center;
    opacity:0; visibility:hidden; transition:opacity .28s,visibility .28s; }
  .card.is-added .added { opacity:1; visibility:visible; }
  .added .ok { width:34px; height:34px; border-radius:50%; background:var(--ok); display:grid; place-items:center; }
  .added h4 { font-size:.95rem; }
  .added .what { font-size:.8rem; color:var(--soft); }
  .added .acts { display:grid; gap:.4rem; width:100%; margin-top:.4rem; }

  /* collections */
  .cats { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
  .cat { position:relative; border-radius:var(--r); overflow:hidden; min-height:220px; display:flex; align-items:flex-end; background:var(--dark); }
  .cat img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.6; transition:transform .6s cubic-bezier(.2,.7,.3,1),opacity .4s; }
  .cat:hover img { transform:scale(1.06); opacity:.78; }
  .cat-b { position:relative; padding:1.3rem; color:#fff; width:100%; background:linear-gradient(0deg,rgba(0,0,0,.75),transparent); }
  .cat-b h3 { font-size:1.22rem; }
  .cat-b span { font-size:.82rem; opacity:.86; }
  .cat-b .go { font-size:.84rem; font-weight:700; color:#F0A868; margin-top:.4rem; display:inline-block; }

  /* size chart */
  .chart-band { background:var(--paper-2); border-block:1px solid var(--line); }
  .chart { display:flex; align-items:flex-end; gap:clamp(.5rem,1.5vw,1.3rem); overflow-x:auto; padding-bottom:1.4rem; scrollbar-width:thin; position:relative; }
  .chart::before { content:''; position:absolute; left:0; right:0; bottom:1.4rem; height:1px; background:var(--line); }
  .tier { flex:1 0 92px; display:flex; flex-direction:column; align-items:center; gap:.8rem; padding-bottom:1.4rem; }
  .tier .sil { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; }
  .tier .rock { width:62px; background:linear-gradient(176deg,#F3B27A,#E07A2E 55%,#C2560F); border-radius:46% 54% 38% 62% / 62% 58% 42% 38%; transition:box-shadow .3s,transform .3s; }
  .tier:hover .rock { box-shadow:0 0 30px rgba(224,122,46,.6); transform:translateY(-3px); }
  .tier .wb { width:42px; height:5px; background:#6E4A2C; }
  .tier .lampimg { aspect-ratio:340/537; background:var(--lampimg); display:block; filter:drop-shadow(0 6px 16px rgba(0,0,0,.45)) drop-shadow(0 0 20px rgba(224,122,46,.40)); transition:filter .3s,transform .3s; }
  .tier:hover .lampimg { filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)) drop-shadow(0 0 38px rgba(224,122,46,.85)); transform:translateY(-4px); }
  .tier.ref .rock { background:none; border:1.5px dashed var(--soft); border-radius:2px; opacity:.6; }
  .tier.ref .wb { display:none; }
  .tmeta { text-align:center; display:grid; gap:.2rem; }
  .tkg { font-weight:800; font-size:.88rem; letter-spacing:-.015em; }
  .tcm { font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; color:var(--soft); }
  .tpr { font-family:var(--mono); font-size:.74rem; color:var(--cta); font-weight:700; }

  .bundle { background:var(--dark); color:#F6EFE7; border-radius:var(--r); overflow:hidden; }
  .bundle-in { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,3vw,3rem); align-items:center; padding:clamp(1.8rem,3.5vw,3rem); }
  .bundle h2 { font-size:clamp(1.6rem,3.2vw,2.4rem); margin-bottom:.8rem; }
  .bundle p { color:#C6B5A5; margin:0 0 1.4rem; }
  .bundle-items { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
  .bi { background:var(--dark-2); border:1px solid #3A2C22; border-radius:var(--r); padding:.7rem; width:96px; text-align:center; }
  .bi img { width:100%; aspect-ratio:1; object-fit:contain; }
  .bi span { font-size:.66rem; color:#C6B5A5; display:block; margin-top:.35rem; }
  .plus { font-size:1.3rem; color:#7A6555; }

  .faq { max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
  details { border-bottom:1px solid var(--line); }
  summary { cursor:pointer; list-style:none; padding:1.1rem .2rem; font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
  summary::-webkit-details-marker { display:none; }
  summary::after { content:'+'; font-size:1.35rem; font-weight:400; color:var(--cta); flex:none; transition:transform .25s; }
  details[open] summary::after { transform:rotate(45deg); }
  details p { margin:0 0 1.2rem; color:var(--soft); padding-right:2rem; }

  .news { background:var(--paper-2); border-block:1px solid var(--line); }
  .news-in { display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; padding-block:clamp(2.2rem,4vw,3.4rem); }
  .news h2 { font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:.5rem; }
  .nform { display:flex; gap:.6rem; flex-wrap:wrap; }
  .nform input { flex:1; min-width:200px; padding:.95rem 1rem; border:1.5px solid var(--line); border-radius:var(--r); background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:.94rem; }
  .nform input:focus { outline:none; border-color:var(--cta); }

  .note { border-left:3px solid var(--cta); background:color-mix(in srgb,var(--cta) 8%,transparent); padding:1.1rem 1.3rem; border-radius:0 var(--r) var(--r) 0; font-size:.87rem; color:var(--soft); line-height:1.6; }
  .note b { color:var(--ink); }
  .note ul { margin:.6rem 0 0; padding-left:1.1rem; }
  .note li { margin-bottom:.35rem; }

  .ftr { background:var(--dark); color:#E7DDD2; padding-block:3rem 2rem; }
  .fg { display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:2.4rem; }
  .ftr h4 { font-family:var(--mono); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; color:#9E8B7B; margin-bottom:1rem; font-weight:400; }
  .ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
  .ftr li a { font-size:.87rem; opacity:.85; }
  .ftr li a:hover { color:#F0A868; opacity:1; }
  .pay { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.1rem; }
  .pay span { font-family:var(--mono); font-size:.59rem; letter-spacing:.1em; border:1px solid #3A2C22; padding:.35rem .55rem; border-radius:2px; color:#B9A796; }
  .fbot { margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid #2C2119; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.77rem; color:#9E8B7B; }

  .rv { opacity:1; transform:none; }

  @media (max-width:1024px) {
    .pgrid { grid-template-columns:repeat(2,1fr); }
    .cats { grid-template-columns:1fr; }
    .trust-in { grid-template-columns:repeat(2,1fr); }
    .trust-i:nth-child(2) { border-right:0; }
  }
  @media (max-width:900px) {
    .hero { grid-template-columns:1fr; }
    .hero-tx::after { display:none; }
    .hero-art { padding:0 clamp(1rem,3.2vw,3rem) clamp(1.4rem,3vw,2rem); }
    .nav { display:none; }
    .hdr-in { grid-template-columns:1fr auto; }
    .bundle-in, .news-in { grid-template-columns:1fr; }
    .fg { grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px) { .pgrid { grid-template-columns:1fr 1fr; gap:.8rem; } .card-b { padding:.7rem .7rem .85rem; } }
  @media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; } .rv { opacity:1; transform:none; } }


/* ============================================================
   2. WORDPRESS CORE
   ============================================================ */

.screen-reader-text {
  border:0; clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden;
  padding:0; position:absolute; width:1px; white-space:nowrap;
}
.screen-reader-text:focus {
  clip-path:none; height:auto; width:auto; margin:0; padding:.9rem 1.4rem;
  position:fixed; top:.5rem; left:.5rem; z-index:1000;
  background:var(--paper); color:var(--ink); border:2px solid var(--cta);
  border-radius:var(--r); font-weight:700;
}
.skip-link:focus { outline:none; }

.alignleft  { float:left; margin:0 1.5rem 1rem 0; }
.alignright { float:right; margin:0 0 1rem 1.5rem; }
.aligncenter{ display:block; margin-inline:auto; }
.alignwide  { max-width:1100px; margin-inline:auto; }
.alignfull  { max-width:none; width:100%; }

figure { margin:0 0 1.5rem; }
figcaption, .wp-caption-text {
  font-size:.82rem; color:var(--soft); margin-top:.5rem;
}
img { max-width:100%; height:auto; }

.pagination, .woocommerce-pagination { margin-top:2.5rem; }
.pagination .page-numbers, .woocommerce-pagination .page-numbers {
  display:inline-block; padding:.6rem .9rem; margin-right:.3rem;
  border:1px solid var(--line); border-radius:var(--r);
  font-size:.9rem; font-weight:600; text-decoration:none;
}
.pagination .current, .woocommerce-pagination .current {
  background:var(--ink); color:var(--paper); border-color:var(--ink);
}
.pagination a:hover, .woocommerce-pagination a:hover { border-color:var(--cta); color:var(--cta); }

.post-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:2rem 1.5rem; }
.post-card { display:flex; flex-direction:column; gap:.7rem; }
.post-thumb img { width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r); }
.post-title { font-size:1.05rem; line-height:1.3; }
.post-title a { text-decoration:none; }
.post-title a:hover { color:var(--cta); }
.post-excerpt { color:var(--soft); font-size:.9rem; }
.post-more { font-size:.85rem; font-weight:700; color:var(--cta); }


/* ============================================================
   3. WOOCOMMERCE
   ============================================================ */

.woocommerce-notices-wrapper:empty { display:none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-left:3px solid var(--cta); background:color-mix(in srgb, var(--cta) 7%, transparent);
  padding:1rem 1.2rem; margin-bottom:1.5rem; border-radius:0 3px 3px 0;
  list-style:none; font-size:.92rem;
}
.woocommerce-error { border-left-color:#B3261E; background:rgba(179,38,30,.07); }
.woocommerce-message .button, .woocommerce-info .button { float:right; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background:var(--cta); color:#fff; border:0; border-radius:3px;
  font-family:var(--sans); font-size:.92rem; font-weight:700;
  padding:.95rem 1.7rem; line-height:1; transition:background .2s;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background:var(--cta-h); color:#fff; }
.woocommerce a.button.alt, .woocommerce button.button.alt { background:var(--ink); }
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background:var(--cta); }

.woocommerce .price, .woocommerce-Price-amount {
  font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.woocommerce del { opacity:.5; font-weight:400; margin-right:.4rem; }
.woocommerce ins { text-decoration:none; }

.term-copy { margin-bottom:2.5rem; }

.woocommerce .stock.in-stock { color:var(--ok); font-weight:600; font-size:.86rem; }
.woocommerce .stock.out-of-stock { color:#B3261E; font-weight:600; font-size:.86rem; }
.woocommerce .star-rating { color:var(--cta); }
.woocommerce-review-link { color:var(--soft); font-size:.8rem; }

.variations_form .variations { display:none; }
.variations_form.no-swatches .variations { display:table; }
.woocommerce-variation-price { margin-bottom:1rem; }

.assure-line { font-size:.86rem; color:var(--soft); margin:.8rem 0 0; }

.woocommerce-breadcrumb {
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--soft); margin-bottom:1.5rem;
}
.woocommerce-breadcrumb a { color:var(--soft); }
.woocommerce-breadcrumb a:hover { color:var(--cta); }

.woocommerce table.shop_table,
.woocommerce-product-attributes { width:100%; border-collapse:collapse; font-size:.9rem; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td,
.woocommerce-product-attributes th, .woocommerce-product-attributes td {
  padding:.7rem .6rem; border-bottom:1px solid var(--line); text-align:left;
}
.table-scroll { overflow-x:auto; }


/* ============================================================
   4. THEME CLASSES
   Styles for markup the PHP templates emit. Written against the
   existing tokens so nothing here introduces a new colour or scale.
   ============================================================ */

/* --- shared typography ------------------------------------- */
.eyebrow {
  font-family:var(--mono); font-size:.66rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--soft); display:inline-block; margin-bottom:.35rem;
}
.t-sec { font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.03em; }
.lede { color:var(--soft); font-size:1.02rem; line-height:1.65; max-width:52ch; }
.label { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.value { font-weight:700; }
.meta  { font-family:var(--mono); font-size:.64rem; letter-spacing:.07em; color:var(--soft); }

.site-main { display:block; }
.sec-more  { margin-top:2rem; }

/* --- brand + announcement ---------------------------------- */
.brand { font-size:1.15rem; font-weight:800; letter-spacing:-.03em; color:inherit; }
.logo-text { font-size:1.2rem; font-weight:800; letter-spacing:-.03em; }
.ann { background:var(--dark); color:#F1E8DE; font-size:.8rem; }
.ann > .wrap { padding-block:.6rem; text-align:center; }
.ftr-blurb { color:#9E8B7B; font-size:.87rem; max-width:32ch; margin-top:.9rem; }

/* --- buttons ----------------------------------------------- */
.btn-s {
  background:transparent; color:var(--ink); border:1.5px solid var(--ink);
  border-radius:var(--r); font-weight:700; transition:background .2s,color .2s;
}
.btn-s:hover { background:var(--ink); color:var(--paper); }

/* --- badges ------------------------------------------------ */
.badge {
  display:inline-block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--soft); border:1px solid var(--line);
  padding:.35rem .6rem; border-radius:2px;
}
.tag-quiet { background:var(--soft) !important; }

/* --- product cards ----------------------------------------- */
.products { list-style:none; margin:0; padding:0; }
.card-link { display:block; text-decoration:none; color:inherit; }
.card-title { font-size:.97rem; font-weight:700; line-height:1.3; letter-spacing:-.01em; margin-top:.7rem; }
.card-link:hover .card-title { color:var(--cta); }
.pr { font-size:1.1rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.rev-none { font-size:.74rem; color:var(--soft); }
.act { margin-top:auto; padding-top:.6rem; }
.act .button, .act .btn { width:100%; text-align:center; }

/* --- featured product -------------------------------------- */
.fieldlbl {
  display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--soft); margin-bottom:.6rem;
}
.fitline { font-size:.88rem; color:var(--soft); margin:0 0 1.1rem; }
.fitline b { color:var(--ink); }
.assure { list-style:none; padding:0; margin:1.2rem 0 0; display:grid; gap:.5rem; }
.assure li { display:flex; align-items:flex-start; gap:.55rem; font-size:.86rem; color:var(--soft); line-height:1.5; }
.assure svg { flex:none; margin-top:.25rem; }
.assure b { color:var(--ink); font-weight:650; }
.zoomhint {
  position:absolute; z-index:3; right:1rem; bottom:1rem; font-family:var(--mono);
  font-size:.55rem; letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.45); pointer-events:none; transition:opacity .3s;
}
.limg-empty { display:none; }

/* --- room scene -------------------------------------------- */
.room-scrim {
  position:absolute; inset:0; z-index:2;
  background:linear-gradient(90deg,rgba(10,8,6,.92) 0%,rgba(10,8,6,.7) 34%,transparent 66%);
}
.room-tx { position:relative; z-index:3; padding-block:clamp(3rem,7vw,6rem); max-width:30rem; }
.room-tx .eyebrow { color:rgba(255,255,255,.55); }
.room-tx h2 { color:#fff; margin:.5rem 0 .8rem; }
.room-tx p  { color:rgba(255,255,255,.78); }

/* --- size guide -------------------------------------------- */
.box { border:1.5px dashed var(--soft); border-radius:2px 2px 5px 5px; opacity:.6; width:52px; }

/* --- archives ---------------------------------------------- */
.archive-hd { margin-bottom:2.2rem; }
.cat-links { list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:.6rem; }
.cat-links a {
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:var(--r);
  text-decoration:none; font-weight:600; transition:border-color .2s,color .2s;
}
.cat-links a:hover { border-color:var(--cta); color:var(--cta); }
.cat-links span { font-family:var(--mono); font-size:.66rem; color:var(--soft); font-weight:400; }

/* --- pages and posts --------------------------------------- */
.page-copy { max-width:70ch; }
.page-copy h2 { font-size:clamp(1.3rem,2.2vw,1.7rem); margin:2.2rem 0 .8rem; letter-spacing:-.02em; }
.page-copy h3 { font-size:1.1rem; margin:1.8rem 0 .6rem; }
.page-copy p, .page-copy li { color:var(--soft); line-height:1.7; }
.page-copy ul, .page-copy ol { padding-left:1.2rem; margin-bottom:1.2rem; }
.page-copy li { margin-bottom:.5rem; }
.page-copy a { color:var(--cta); font-weight:600; }
.page-links { margin-top:1.5rem; font-family:var(--mono); font-size:.75rem; }
.post-hero img { width:100%; border-radius:var(--r); margin-bottom:2rem; }
.post-foot { margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.post-cats { font-size:.85rem; color:var(--soft); }
.post-cats a { color:var(--cta); }
.nav-label { display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--soft); margin-bottom:.2rem; }
.post-navigation { margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:2rem; font-weight:700; }
.post-navigation a { text-decoration:none; }
.post-navigation a:hover { color:var(--cta); }

/* --- cart / mini basket ------------------------------------ */
.cart { margin:0; }


/* ============================================================
   5. FEATURED PRODUCT — BUY CONTROLS
   The homepage carries no .woocommerce body class, so WooCommerce's
   own button styling never applies here. These rules are scoped to
   the featured block and match the primary button elsewhere.
   ============================================================ */

.feat-info .button,
.feat-info button.button,
.feat-info input.button,
.feat-info .single_add_to_cart_button {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cta); color:#fff; border:0; border-radius:var(--r);
  font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:-.01em;
  padding:1.05rem 2.2rem; line-height:1; cursor:pointer;
  transition:background .2s, transform .15s;
}
.feat-info .button:hover,
.feat-info button.button:hover,
.feat-info .single_add_to_cart_button:hover { background:var(--cta-h); color:#fff; }
.feat-info .single_add_to_cart_button:active { transform:translateY(1px); }
.feat-info .single_add_to_cart_button:disabled,
.feat-info .single_add_to_cart_button.disabled { opacity:.45; cursor:not-allowed; }

/* quantity box sits beside the button */

.feat-info .quantity input.qty {
  width:4.2rem; padding:.95rem .5rem; text-align:center;
  border:1.5px solid var(--line); border-radius:var(--r);
  font-family:var(--sans); font-size:1rem; font-weight:700; color:var(--ink);
  background:var(--paper);
}
.feat-info .quantity input.qty:focus { outline:none; border-color:var(--ink); }

/* the live price WooCommerce swaps in when a size is chosen */
.feat-info .woocommerce-variation-price { width:100%; margin:0 0 .4rem; }
.feat-info .woocommerce-variation-price .price,
.feat-info .woocommerce-variation-price .amount {
  font-size:2rem; font-weight:800; letter-spacing:-.03em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.feat-info .woocommerce-variation-availability { width:100%; }
.feat-info .woocommerce-variation-availability .stock { font-size:.86rem; font-weight:600; }
.feat-info .woocommerce-variation-description p { color:var(--soft); font-size:.9rem; margin:.3rem 0 0; }
.feat-info .reset_variations { font-size:.8rem; color:var(--soft); margin-left:.6rem; }
.feat-info .reset_variations:hover { color:var(--cta); }


/* ============================================================
   6. SIZE SWATCHES — legibility
   ============================================================ */

.szgrid { gap:.55rem; margin-bottom:1.3rem; }

.szbtn {
  padding:.85rem .45rem;
  border-width:1.5px;
  line-height:1.25;
  transition:border-color .16s, background .16s, transform .16s, box-shadow .16s;
}
.szbtn:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.07); }

.szbtn b {
  display:block;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:-.015em;
}

/* the price was far too small to read */
.szbtn small {
  display:block;
  margin-top:.3rem;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  opacity:1;
  color:var(--soft);
  font-variant-numeric:tabular-nums;
}
.szbtn small .amount,
.szbtn small .woocommerce-Price-amount { font-weight:600; color:inherit; }

.szbtn[aria-pressed="true"] small,
.szbtn[aria-pressed="true"] small .amount,
.szbtn[aria-pressed="true"] small .woocommerce-Price-amount { color:var(--paper); opacity:.92; }

@media (max-width:600px) {
  .szbtn b { font-size:.9rem; }
  .szbtn small { font-size:.84rem; }
}


/* ============================================================
   7. FEATURED PRODUCT — BUY AREA LAYOUT (corrective)
   form.cart wraps the label, swatches, fit line, price, quantity and
   button. Making the form itself a flex row laid all of those out
   side by side. The form stays block; only the final buy row is flex.
   ============================================================ */

.feat-info { text-align:left; }

.feat-info form.cart {
  display:block;
  margin:0;
}

.feat-info .fieldlbl { display:block; width:100%; }
.feat-info .szgrid   { display:grid; grid-template-columns:repeat(4,1fr); width:100%; }

/* WooCommerce prints the variation description; .fitline already shows it */
.feat-info .woocommerce-variation-description { display:none; }

/* Reserve the space the variation block will occupy so choosing a size
   does not shift the button up and down the page. */
.feat-info .single_variation_wrap { display:block; min-height:9.5rem; }
.feat-info .woocommerce-variation { display:block; width:100%; }

.feat-info .woocommerce-variation-price {
  display:block; width:100%; margin:0 0 .5rem; text-align:left;
}
.feat-info .woocommerce-variation-availability { display:block; width:100%; margin:0 0 .9rem; }

.feat-info .woocommerce-variation-add-to-cart {
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; width:100%;
}
.feat-info .quantity { flex:0 0 auto; margin:0; }
.feat-info .single_add_to_cart_button {
  flex:1 1 14rem;
  min-width:0;
  max-width:100%;
  white-space:nowrap;
}

/* the fit line belongs under the swatches, on its own row */
.feat-info .fitline { display:block; width:100%; margin:0 0 1.1rem; }

@media (max-width:1200px) {
  .feat-info .szgrid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px) {
  .feat-info .szgrid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:560px) {
  .feat-info .szgrid { grid-template-columns:repeat(2,1fr); }
  .feat-info .single_add_to_cart_button { flex:1 1 100%; }
}


/* ============================================================
   8. BUY COLOURS
   Green reads as "go" and keeps the buy action distinct from the
   terracotta accent used for prices and links.
   ============================================================ */

:root {
  --buy:#2E6A4E;
  --buy-h:#245741;
  --price:#B0451E;
}

/* --- price --------------------------------------------------- */
.feat-info .woocommerce-variation-price .price,
.feat-info .woocommerce-variation-price .amount,
.feat-info .woocommerce-variation-price .woocommerce-Price-amount {
  color:var(--price);
}
.szbtn small,
.szbtn small .amount,
.szbtn small .woocommerce-Price-amount { color:var(--price); }
.szbtn[aria-pressed="true"] small,
.szbtn[aria-pressed="true"] small .amount,
.szbtn[aria-pressed="true"] small .woocommerce-Price-amount { color:#F0C9A8; opacity:1; }
.card .pr, .card .pr .amount { color:var(--price); }
.tier .tpr { color:var(--price); }

/* --- add to basket ------------------------------------------- */
.feat-info .single_add_to_cart_button,
.feat-info button.button,
.feat-info .button {
  background:var(--buy); color:#fff;
}
.feat-info .single_add_to_cart_button:hover,
.feat-info button.button:hover,
.feat-info .button:hover { background:var(--buy-h); color:#fff; }

.woocommerce .add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.act .add_to_cart_button,
.act a.add_to_cart_button {
  background:var(--buy) !important;
  border-color:var(--buy) !important;
  color:#fff !important;
}
.woocommerce .add_to_cart_button:hover,
.act .add_to_cart_button:hover { background:var(--buy-h) !important; border-color:var(--buy-h) !important; }

/* keep the confirmation panel's Checkout button green too */
.added .btn-cta { background:var(--buy); }
.added .btn-cta:hover { background:var(--buy-h); }

/* --- free delivery ------------------------------------------- */
.assure-line { color:var(--buy); font-weight:650; }
.trust-i b + br + *, .trust-i div { }
.hdr-ship b { color:#8FD3AC; }
.ticks li:nth-child(2) { color:#B9E7CF; }


/* ============================================================
   9. FEATURED PRODUCT — COLUMN HEIGHT
   The information column is capped to the height of the photo by
   JS (see main.js), and the active tab scrolls inside it.
   ============================================================ */

@media (min-width:901px) {
  .feat-in { align-items:start; }
  .feat-info {
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
  }
  .feat-info .tablist { flex:0 0 auto; }
  .feat-info .tabpanel.on {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    padding-right:.6rem;
    scrollbar-width:thin;
  }
  .feat-info .tabpanel.on::-webkit-scrollbar { width:6px; }
  .feat-info .tabpanel.on::-webkit-scrollbar-thumb { background:var(--line); border-radius:3px; }
}


/* ============================================================
   10. FEATURED PRODUCT - FIT THE COLUMN TO THE PHOTO
   The information column is capped to the photo height. Everything
   here trims type and spacing so the Product tab fits inside that
   cap without scrolling. The swatch grid is deliberately untouched -
   only the space around it moves.
   ============================================================ */

@media (min-width:901px) {

  /* --- tab strip --- */
  .feat-info .tablist { margin-bottom:1rem; }
  .feat-info .tab { font-size:.88rem; padding:.6rem .5rem; }

  /* --- heading block --- */
  .feat-info .badge { margin-bottom:.45rem; }
  .feat-info h2,
  .feat-info .t-sec { font-size:clamp(1.5rem,2.2vw,1.9rem); margin:.35rem 0 .4rem; }

  /* The short description repeats the Size / Weight / Includes / Source
     lines that the Specs tab already sets out in full, so two lines is
     enough here. Nothing is lost - it is one tab away. */
  .feat-info .lede {
    font-size:.94rem;
    line-height:1.5;
    margin:0 0 .9rem;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* --- around the swatches (grid itself unchanged) --- */
  .feat-info .fieldlbl { margin-bottom:.5rem; }
  .feat-info .szgrid   { margin-bottom:.9rem; }
  .feat-info .fitline  { margin:0 0 .65rem; font-size:.84rem; }

  /* --- price and buy row --- */
  .feat-info .single_variation_wrap { min-height:7.4rem; }
  .feat-info .woocommerce-variation-price { margin:0 0 .35rem; }
  .feat-info .woocommerce-variation-price .price,
  .feat-info .woocommerce-variation-price .amount,
  .feat-info .woocommerce-variation-price .woocommerce-Price-amount { font-size:1.6rem; }
  .feat-info .woocommerce-variation-availability { margin:0 0 .55rem; }
  .feat-info .woocommerce-variation-availability .stock { font-size:.82rem; }
  .feat-info .single_add_to_cart_button,
  .feat-info button.button,
  .feat-info .button { padding:.85rem 1.6rem; font-size:.95rem; }
  .feat-info .quantity input.qty { padding:.78rem .5rem; }

  /* --- assurance ticks --- */
  .feat-info .assure { margin-top:.8rem; gap:.35rem; }
  .feat-info .assure li { font-size:.82rem; line-height:1.45; }

  /* --- prose tabs --- */
  .feat-info .tabpanel { font-size:.88rem; }
  .feat-info .tabpanel p { margin:0 0 .7rem; }
  .feat-info .tabpanel h3, .tabpanel h4 { margin:.85rem 0 .3rem; }
  .feat-info .spectbl th,
  .feat-info .spectbl td { padding:.42rem .5rem .42rem 0; }

  /* --- safety net -------------------------------------------------
     JS measures the active panel and adds these when a longer product
     description or an extra swatch row still overflows. Swatch sizing
     stays out of both steps. */
  .feat-info.fit-sm .tabpanel,
  .feat-info.fit-sm .assure li { font-size:.84rem; }
  .feat-info.fit-sm h2,
  .feat-info.fit-sm .t-sec { font-size:1.55rem; }
  .feat-info.fit-sm .lede { font-size:.88rem; margin-bottom:.7rem; }
  .feat-info.fit-sm .woocommerce-variation-price .price,
  .feat-info.fit-sm .woocommerce-variation-price .amount,
  .feat-info.fit-sm .woocommerce-variation-price .woocommerce-Price-amount { font-size:1.45rem; }
  .feat-info.fit-sm .single_variation_wrap { min-height:6.8rem; }
  .feat-info.fit-sm .single_add_to_cart_button { padding:.75rem 1.4rem; }

  .feat-info.fit-xs .tabpanel,
  .feat-info.fit-xs .assure li { font-size:.8rem; }
  .feat-info.fit-xs h2,
  .feat-info.fit-xs .t-sec { font-size:1.35rem; margin:.2rem 0 .3rem; }
  .feat-info.fit-xs .lede { -webkit-line-clamp:1; line-clamp:1; font-size:.84rem; margin-bottom:.55rem; }
  .feat-info.fit-xs .assure { margin-top:.55rem; }
  .feat-info.fit-xs .woocommerce-variation-price .price,
  .feat-info.fit-xs .woocommerce-variation-price .amount,
  .feat-info.fit-xs .woocommerce-variation-price .woocommerce-Price-amount { font-size:1.3rem; }
  .feat-info.fit-xs .single_variation_wrap { min-height:6.2rem; }
  .feat-info.fit-xs .single_add_to_cart_button { padding:.7rem 1.2rem; }
  .feat-info.fit-xs .tablist { margin-bottom:.7rem; }
}


/* ============================================================
   11. FEATURED PRODUCT - PRICE BESIDE THE BUTTON
   The price used to sit above the buy row, with ~6rem reserved so
   the button would not jump when a size was chosen. That reserve
   showed as dead space before any selection. A two-column grid
   holds the slot open instead: fixed columns keep their width even
   while the price element is still display:none, so nothing moves
   in either direction and ~40px comes back.
   ============================================================ */

@media (min-width:901px) {
  .feat-info .single_variation_wrap {
    display:grid;
    grid-template-columns:9rem minmax(0,1fr);
    align-items:center;
    gap:1rem;
    min-height:3.6rem;
  }
  .feat-info .woocommerce-variation {
    grid-column:1;
    display:block;
    width:auto;
    margin:0;
  }
  .feat-info .woocommerce-variation-price {
    width:auto;
    margin:0;
    line-height:1.15;
  }
  .feat-info .woocommerce-variation-availability {
    width:auto;
    margin:.15rem 0 0;
  }
  .feat-info .woocommerce-variation-add-to-cart {
    grid-column:2;
    margin:0;
  }
  .feat-info .single_add_to_cart_button { flex:1 1 auto; }

  /* the two fit steps only tighten the row, they no longer reserve */
  .feat-info.fit-sm .single_variation_wrap { min-height:3.4rem; }
  .feat-info.fit-xs .single_variation_wrap { min-height:3.2rem; }
}


/* ============================================================
   12. SMALL SCREENS
   The layout collapsed to one column below 900px but the type,
   logo and tap targets were still desktop-sized, so phones got a
   tall, cramped page. These steps size the page to the device.
   ============================================================ */

html { -webkit-text-size-adjust:100%; }
body { overflow-x:hidden; }
img, video, svg, iframe { max-width:100%; }

@media (max-width:900px) {
  /* the logo was eating a third of the first screen */
  .logo .logomark { height:50px; }
  .site-hdr.stuck .logo .logomark { height:40px; }

  /* the nav strip scrolls sideways - make that legible as a strip */
  .hdr-nav-in { padding-inline:var(--pad); }
  .mainnav > li > a { padding:.85rem .75rem; }

  .sec-hd { margin-bottom:1.8rem; }
  .trust-i { padding:.95rem 1rem; }
}

@media (max-width:600px) {
  .logo .logomark { height:42px; }
  .site-hdr.stuck .logo .logomark { height:36px; }
  .hdr-acts { gap:1rem; }

  /* hero */
  .hero { min-height:clamp(380px,58svh,520px); }
  .hero h1 { font-size:clamp(1.95rem,7.6vw,2.5rem); margin:.85rem 0 .8rem; }
  .hero-sub { font-size:.97rem; margin-bottom:1.25rem; }
  .ticks { margin-bottom:1.4rem; gap:.4rem; }
  .ticks li { font-size:.86rem; }
  .hero-cta { gap:.55rem; }
  .hero-cta .btn { flex:1 1 100%; }
  .fromprice { flex:1 1 100%; margin:.35rem 0 0; }

  /* the four trust cells were 2x2 with borders cutting mid-sentence */
  .trust-in { grid-template-columns:1fr; }
  .trust-i { border-right:0; border-bottom:1px solid var(--line); }
  .trust-i:last-child { border-bottom:0; }

  /* sections */
  .sec { padding-block:2.4rem; }
  .sec-hd h2 { font-size:clamp(1.5rem,6vw,1.9rem); }
  .rail { grid-template-columns:1fr 1fr; }

  /* product cards */
  .pgrid { gap:.7rem; }
  .card-b h3 { font-size:.9rem; }
  .price { font-size:1.05rem; }

  /* featured block */
  .feat-info .tablist { margin-bottom:.9rem; }
  .feat-info h2, .feat-info .t-sec { font-size:clamp(1.45rem,5.6vw,1.8rem); }
  .feat-info .lede { font-size:.92rem; }
  .feat-info .single_add_to_cart_button { padding:.9rem 1.2rem; }

  /* size guide tiers wrap rather than squeeze */
  .tier { flex:1 0 44%; }

  /* footer */
  .fg { grid-template-columns:1fr 1fr; gap:1.6rem; }
  .fg > *:first-child { grid-column:1 / -1; }
  .ftr { padding-block:2.2rem 1.5rem; }
  .fbot { margin-top:1.6rem; }

  /* forms and prose */
  .nform input { min-width:0; flex:1 1 100%; }
  .nform .btn { flex:1 1 100%; }
  summary { font-size:.95rem; padding:.95rem .2rem; }
  details p { padding-right:0; }
}

@media (max-width:420px) {
  .pgrid { grid-template-columns:1fr 1fr; gap:.6rem; }
  .fg { grid-template-columns:1fr; }
  .tier { flex:1 0 100%; }
  .hero h1 { font-size:1.85rem; }
}

/* fingers need a bigger target than a mouse pointer */
@media (hover:none) {
  .hact, .tab, .mainnav > li > a { min-height:44px; }
  .tab { display:flex; align-items:center; justify-content:center; }
  .szbtn { min-height:48px; }
}


/* ============================================================
   13. SIDEWAYS SCROLL
   A bare 1fr track is minmax(auto,1fr): its minimum is the content's
   min-content width, so one nowrap button or a long swatch label
   pushes the whole grid wider than the screen and the page scrolls
   sideways. Every track below is restated as minmax(0,1fr) so the
   columns may shrink instead. This is the actual fix - the overflow
   guards underneath are only a backstop.
   ============================================================ */

/* clip, not hidden: hidden would make body a scroll container and
   break the sticky header. */
html { overflow-x:clip; }
body { overflow-x:clip; }

.hdr-main-in { grid-template-columns:auto minmax(0,1fr) auto; }
.hdr-nav-in  { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
.rail        { grid-template-columns:repeat(5,minmax(0,1fr)); }
.trust-in    { grid-template-columns:repeat(4,minmax(0,1fr)); }
.pgrid       { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cats        { grid-template-columns:repeat(3,minmax(0,1fr)); }
.szgrid      { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bundle-in,
.news-in     { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.fg          { grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)); }
.post-navigation { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }

/* grid and flex children need an explicit floor before they will shrink */
.feat-in > *,
.feat-info,
.feat-art,
.card,
.tabpanel,
.table-scroll,
.woocommerce-variation-add-to-cart { min-width:0; }

/* the one place a wide child is legitimate - let it scroll on its own */
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

@media (max-width:1200px) {
  .feat-info .szgrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:1024px) {
  .pgrid    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cats     { grid-template-columns:minmax(0,1fr); }
  .trust-in { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .feat-in { grid-template-columns:minmax(0,1fr); }
  .szgrid,
  .feat-info .szgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rail    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bundle-in, .news-in { grid-template-columns:minmax(0,1fr); }
  .fg      { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* the button was nowrap, which set the column's minimum width */
  .feat-info .single_add_to_cart_button { white-space:normal; }
}
@media (max-width:600px) {
  .trust-in { grid-template-columns:minmax(0,1fr); }
  .rail     { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fg       { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pgrid    { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px) {
  .pgrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fg    { grid-template-columns:minmax(0,1fr); }
}


/* ============================================================
   14. STRAY "SUITS:" LABEL
   The fit line is printed with the hidden attribute and revealed by
   JS once a size is chosen. Section 7's display:block beat that, so
   an empty "Suits:" showed before any selection.
   ============================================================ */

.feat-info .fitline[hidden],
.fitline[hidden] { display:none !important; }


/* ============================================================
   15. SWATCH HIERARCHY, MOBILE LEDE, TRACK ORDER
   ============================================================ */

/* --- price colour: more saturated so it carries further ------- */
:root { --price:#C2410C; }

/* --- swatches: the price leads, the weight supports ----------- */
.szbtn b {
  font-size:.82rem;
  font-weight:650;
  letter-spacing:-.01em;
  color:var(--soft);
}
.szbtn small {
  display:block;
  margin-top:.22rem;
  font-size:1.06rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--price);
  font-variant-numeric:tabular-nums;
}
.szbtn small .amount,
.szbtn small .woocommerce-Price-amount { font-weight:800; color:inherit; }

.szbtn[aria-pressed="true"] b { color:rgba(255,255,255,.72); }
.szbtn[aria-pressed="true"] small,
.szbtn[aria-pressed="true"] small .amount,
.szbtn[aria-pressed="true"] small .woocommerce-Price-amount { color:#FFC79A; opacity:1; }

/* --- the big variation price matches the new accent ----------- */
.feat-info .woocommerce-variation-price .price,
.feat-info .woocommerce-variation-price .amount,
.feat-info .woocommerce-variation-price .woocommerce-Price-amount {
  color:var(--price);
  font-weight:800;
}

/* --- mobile: drop the lede so swatches sit above the fold ------
   It repeats the Specs tab verbatim, and on a phone it was pushing
   the size buttons a full screen down. Desktop keeps two lines. */
@media (max-width:900px) {
  .feat-info .lede { display:none; }
  .feat-info .badge { margin-bottom:.4rem; }
  .feat-info h2,
  .feat-info .t-sec { margin:.3rem 0 .7rem; }
}

@media (max-width:600px) {
  .szbtn b { font-size:.8rem; }
  .szbtn small { font-size:1.02rem; }
}

/* --- Track Order: solid, so it reads as an action ------------- */
.mainnav > li > a[href*="order-tracking"] {
  background:var(--cta);
  color:#fff;
  border-radius:var(--r);
  margin-block:.42rem;
  margin-inline:.35rem;
  padding-inline:1.1rem;
}
.mainnav > li > a[href*="order-tracking"]:hover,
.mainnav > li:hover > a[href*="order-tracking"],
.mainnav > li > a[href*="order-tracking"]:focus-visible {
  background:var(--cta-h);
  color:#fff;
}
/* the sliding underline is redundant on a filled button */
.mainnav > li > a[href*="order-tracking"]::after { display:none; }

@media (max-width:900px) {
  .mainnav > li > a[href*="order-tracking"] { margin-block:.35rem; }
}


/* ============================================================
   16. SWATCHES SIZED TO THEIR TEXT, COMPACT TRACK ORDER
   ============================================================ */

/* --- swatches ------------------------------------------------
   A 4-column grid divided the full width between the buttons, so
   each one was padded out to a fixed track regardless of how short
   "2-3 kg / £19.99" is. Wrapping flex items size to their content
   instead, and the padding is trimmed to sit close to the text. */

.szgrid,
.feat-info .szgrid {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  width:100%;
}

.szbtn {
  flex:0 0 auto;
  width:auto;
  padding:.4rem .72rem;
  line-height:1.15;
}

.szbtn b {
  font-size:.76rem;
  font-weight:650;
  margin:0;
}

.szbtn small {
  margin-top:.08rem;
  font-size:.98rem;
  font-weight:800;
}

/* the lift on hover was sized for the old large buttons */
.szbtn:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.06); }

@media (max-width:600px) {
  .szgrid, .feat-info .szgrid { gap:.4rem; }
  .szbtn { padding:.4rem .62rem; }
  .szbtn b { font-size:.74rem; }
  .szbtn small { font-size:.94rem; }
}

/* fingers still need a usable target, but only on touch devices */
@media (hover:none) {
  .szbtn { min-height:44px; }
}


/* --- Track Order ---------------------------------------------
   The filled button inherited the nav link's 1.05rem vertical
   padding, so it stood as tall as the whole bar. Centring the item
   and giving it its own compact padding makes it a pill inside the
   bar rather than a full-height block. */

.mainnav > li { display:flex; align-items:center; }

.mainnav > li > a[href*="order-tracking"] {
  padding-block:.58rem;
  padding-inline:1.05rem;
  margin-block:0;
  margin-inline:.4rem;
  line-height:1.1;
  align-self:center;
}

@media (max-width:900px) {
  .mainnav > li > a[href*="order-tracking"] {
    padding-block:.5rem;
    padding-inline:.85rem;
    margin-inline:.3rem;
  }
}


/* ============================================================
   17. THEME-AWARE PRICE COLOUR
   --price was a single flat value used in both themes, so a dark
   burnt orange sat on a dark brown background at 3.7:1 - under the
   readable threshold. It now follows the theme the way --cta
   already did.

     light  #B0451E on cream   5.3:1
     dark   #F0A868 on brown   9.5:1

   --price-sel is the price on a SELECTED swatch, whose background
   is var(--ink): near-black on light, cream on dark. A single value
   could not work on both, which is why it needs its own token.
   ============================================================ */

:root {
  --price:#B0451E;
  --price-sel:#FFC79A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --price:#F0A868;
    --price-sel:#B0451E;
  }
}

/* explicit choices beat the OS preference on specificity, so these
   stay correct whichever order they appear in */
:root[data-theme="dark"] {
  --price:#F0A868;
  --price-sel:#B0451E;
}
:root[data-theme="light"] {
  --price:#B0451E;
  --price-sel:#FFC79A;
}

/* --- selected swatch ------------------------------------------
   Background is var(--ink), so both the weight and the price must
   be expressed relative to var(--paper), never a fixed white. */
.szbtn[aria-pressed="true"] b {
  color:color-mix(in srgb, var(--paper) 74%, var(--ink));
}
.szbtn[aria-pressed="true"] small,
.szbtn[aria-pressed="true"] small .amount,
.szbtn[aria-pressed="true"] small .woocommerce-Price-amount {
  color:var(--price-sel);
  opacity:1;
}

/* --- struck-through original on a sale price ------------------ */
.card .pr del,
.card .pr del .amount,
.price del, .price del .amount {
  color:var(--soft);
  font-weight:600;
  opacity:.75;
}
.card .pr ins,
.price ins { text-decoration:none; color:var(--price); }


/* ============================================================
   18. MOBILE: TABS THAT FIT, TIGHTER BUY COLUMN, FULL SWATCH ROWS
   ============================================================ */

/* --- tabs: all five on screen, no sideways swipe --------------
   They were flex:0 0 auto at .86rem, so the row measured wider
   than the phone and Delivery fell off the end. Equal shares of
   the available width fit all five. */
@media (max-width:900px) {
  .tablist {
    overflow-x:visible;
    padding:.25rem;
  }
  .tab {
    flex:1 1 0;
    min-width:0;
    font-size:.7rem;
    padding:.6rem .18rem;
    letter-spacing:0;
    white-space:nowrap;
    text-align:center;
  }
}
@media (max-width:390px) {
  .tab { font-size:.64rem; }
}

/* --- swatches fill their row ----------------------------------
   Content-width items left a gap after the last button on each
   row. Letting them grow shares the leftover space out instead. */
.szbtn { flex:1 1 auto; }

/* --- the buy column, tightened --------------------------------
   Section 7's 9.5rem reserve and desktop margins were still in
   force below 900px, which is where most of the vertical air came
   from. The reserve only exists to stop the button jumping on a
   wide screen; on mobile nothing needs holding open. */
@media (max-width:900px) {
  .feat-info .single_variation_wrap { min-height:0; }

  .feat-info h2,
  .feat-info .t-sec { margin:.2rem 0 .55rem; }
  .feat-info .badge { margin-bottom:.35rem; }
  .feat-info .fieldlbl { margin-bottom:.4rem; }
  .feat-info .szgrid { margin-bottom:.75rem; }
  .feat-info .fitline { margin:0 0 .6rem; }

  .feat-info .woocommerce-variation-price { margin:0 0 .45rem; }
  .feat-info .woocommerce-variation-price .price,
  .feat-info .woocommerce-variation-price .amount,
  .feat-info .woocommerce-variation-price .woocommerce-Price-amount { font-size:1.55rem; }
  .feat-info .woocommerce-variation-availability { margin:0 0 .5rem; }
  .feat-info .assure { margin-top:.7rem; }

  /* quantity and button share one row rather than stacking */
  .feat-info .woocommerce-variation-add-to-cart {
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:.5rem;
  }
  .feat-info .quantity { flex:0 0 auto; margin:0; }
  .feat-info .quantity input.qty {
    width:3.3rem;
    padding:.85rem .25rem;
    height:100%;
  }
  .feat-info .single_add_to_cart_button {
    flex:1 1 auto;
    width:auto;
    padding:.95rem 1rem;
  }
}

/* section 7 forced the button onto its own row here - it no longer
   needs to, now that the quantity box is narrow */
@media (max-width:560px) {
  .feat-info .single_add_to_cart_button { flex:1 1 auto; }
}

/* --- the switch is a touch target, not just a label ----------- */
.lampsw {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  z-index:6;
}
@media (hover:none) {
  .lampsw { min-height:44px; padding-right:1rem; }
}


/* ============================================================
   19. SEO COPY BLOCK - CENTRE THE MEASURE
   The section is capped at 62rem but every paragraph inside also
   carried max-width:70ch with no auto margin, so the text column
   sat hard left inside a wider box and all the leftover space
   piled up on the right. Capping the container itself at a good
   reading measure puts equal space on both sides instead.
   ============================================================ */

.copy-in { max-width:50rem; }

.copy p,
.copy ul,
.copy li,
.copy .lede-big { max-width:none; }

.copy .lede-big { margin-bottom:1.4rem; }

@media (max-width:900px) {
  .copy-in { max-width:none; }
}

/* ============================================================
   20. LONG-FORM COPY - FILL THE WIDTH
   A single narrow column left most of a wide screen empty, but
   simply stretching the paragraphs is worse: running text past
   roughly 75 characters a line is measurably harder to read.
   Each h2 is now grouped with its own body (see
   saltlights_wrap_copy_sections), so the heading can sit beside
   the text. The block fills the page; the lines stay short.
   ============================================================ */

.copy-in { max-width:none; }
.copy-lede { max-width:60ch; }

.copy-sec { display:block; }

@media (min-width:1000px) {
  .copy-sec {
    display:grid;
    grid-template-columns:minmax(0,15rem) minmax(0,66ch);
    gap:clamp(2rem,4vw,4rem);
    align-items:start;
    justify-content:start;
    padding-block:1.7rem;
    border-top:1px solid var(--line);
  }
  .copy-sec:first-of-type { border-top:0; }

  .copy-sec > h2 {
    grid-column:1;
    margin:0;
    font-size:clamp(1.1rem,1.5vw,1.32rem);
    line-height:1.25;
    letter-spacing:-.015em;
    position:sticky;
    top:7rem;
  }

  /* everything that is not the heading stacks in the second column */
  .copy-sec > *:not(h2) { grid-column:2; max-width:none; }
  .copy-sec > *:not(h2):first-of-type { margin-top:0; }

  .copy-lede {
    max-width:none;
    padding-bottom:.6rem;
    font-size:1.16rem;
    line-height:1.55;
  }

  /* the FAQ reads better as one run than split across a column */
  .copy-sec:has(details) { grid-template-columns:minmax(0,15rem) minmax(0,74ch); }
}

/* the intro above a category grid stays a normal single column */
.term-intro .copy-lede,
.term-intro p { max-width:68ch; }

/* ============================================================
   21. AUDIT FIXES: ACCESSIBILITY, DISCOVERY AND MOBILE NAV
   ============================================================ */

:where(a, button, input, select, summary):focus-visible {
  outline:3px solid #2B76D2;
  outline-offset:3px;
}

.shop-cats {
  display:flex;
  align-items:center;
  gap:.65rem;
  overflow-x:auto;
  padding:0 0 1.4rem;
  margin:-.7rem 0 1.4rem;
  scrollbar-width:thin;
}
.shop-cats > span {
  flex:none;
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--soft);
}
.shop-cats a {
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  min-height:42px;
  padding:.58rem .85rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--paper);
  font-size:.82rem;
  font-weight:700;
}
.shop-cats a:hover { border-color:var(--cta); color:var(--cta); }
.shop-cats small {
  display:grid;
  place-items:center;
  min-width:1.45rem;
  height:1.45rem;
  padding-inline:.3rem;
  border-radius:999px;
  background:var(--paper-2);
  color:var(--soft);
  font:600 .66rem/1 var(--mono);
}

.woocommerce ul.products.pgrid,
.woocommerce-page ul.products.pgrid { margin:0; }
.woocommerce ul.products.pgrid::before,
.woocommerce ul.products.pgrid::after,
.woocommerce-page ul.products.pgrid::before,
.woocommerce-page ul.products.pgrid::after { display:none; content:none; }
.woocommerce ul.products.pgrid li.product,
.woocommerce-page ul.products.pgrid li.product {
  float:none;
  width:auto;
  margin:0;
}

.brand-logo { display:inline-flex; align-items:center; gap:.55rem; }
.brand-logo svg { width:29px; height:38px; flex:none; }
.brand-word { color:var(--ink); font-size:1.02rem; font-weight:800; letter-spacing:.035em; white-space:nowrap; }
.brand-word b { color:var(--cta); }

/* Order tracking remains available without competing with the shop CTA. */
.mainnav > li > a[href*="order-tracking"] {
  background:transparent;
  border:1px solid rgba(255,255,255,.28);
  color:rgba(255,255,255,.8);
}
.mainnav > li > a[href*="order-tracking"]:hover,
.mainnav > li:hover > a[href*="order-tracking"],
.mainnav > li > a[href*="order-tracking"]:focus-visible {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.5);
  color:#fff;
}

@media (prefers-color-scheme:dark) {
  .custom-logo { filter:brightness(0) invert(1); }
}
:root[data-theme="dark"] .custom-logo { filter:brightness(0) invert(1); }
:root[data-theme="light"] .custom-logo { filter:none; }

@media (max-width:980px) {
  body.nav-open { overflow:hidden; }

  .hdr-main-in {
    grid-template-columns:auto 1fr auto;
    gap:.75rem;
    padding-block:.65rem;
  }
  .custom-logo,
  .logo .logomark { height:46px; max-width:150px; }
	.brand-logo svg { width:25px; height:34px; }
	.brand-word { font-size:.91rem; }
  .site-hdr.stuck .custom-logo,
  .site-hdr.stuck .logo .logomark { height:42px; }

  .search {
    display:flex;
    grid-column:1 / -1;
    grid-row:2;
    max-width:none;
    padding:.58rem .9rem;
  }

  .hdr-acts { gap:.6rem; justify-self:end; }
  .hdr-acts .hact { font-size:0; gap:.2rem; min-width:44px; min-height:44px; justify-content:center; }
  .hdr-acts .hact .cnt { font-size:.75rem; }
  .nav-toggle {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.45rem;
    min-width:44px;
    min-height:44px;
    padding:.45rem .65rem;
    border:1px solid var(--line);
    border-radius:var(--r);
    background:var(--paper);
    color:var(--ink);
    font:700 .8rem/1 var(--sans);
    cursor:pointer;
  }
  .nav-toggle-lines { display:grid; gap:3px; }
  .nav-toggle-lines i { display:block; width:16px; height:2px; background:currentColor; }

  .nav-backdrop {
    display:block;
    position:fixed;
    inset:0;
    z-index:90;
    border:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s, visibility .2s;
  }
  .hdr-nav {
    display:block;
    position:fixed;
    inset:0 0 0 auto;
    z-index:100;
    width:min(88vw,380px);
    height:100dvh;
    overflow-y:auto;
    transform:translateX(102%);
    transition:transform .25s ease;
    box-shadow:-18px 0 50px rgba(0,0,0,.28);
  }
  .nav-open .nav-backdrop { opacity:1; visibility:visible; }
  .nav-open .hdr-nav { transform:none; }

  .hdr-nav-in {
    display:block;
    overflow:visible;
    height:auto;
    padding:0 1rem 2rem;
  }
  .mobile-nav-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:68px;
    border-bottom:1px solid rgba(255,255,255,.14);
    color:#fff;
  }
  .nav-close {
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:0;
    background:transparent;
    color:#fff;
    font-size:2rem;
    cursor:pointer;
  }
  .mainnav { display:block; padding-block:.5rem; }
  .mainnav > li { display:block; border-bottom:1px solid rgba(255,255,255,.1); }
  .mainnav > li > a { min-height:50px; padding:.85rem .25rem; font-size:.84rem; }
  .mainnav > li > a::after { display:none; }
  .mainnav .drop {
    display:grid;
    position:static;
    min-width:0;
    padding:0 0 .75rem .75rem;
    border:0;
    box-shadow:none;
    background:transparent;
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .mainnav .drop a { padding:.5rem .65rem; color:rgba(255,255,255,.72); font-size:.8rem; }
  .mainnav .drop a:hover { background:rgba(255,255,255,.07); color:#fff; }
  .hdr-ship { display:block; margin-top:1rem; white-space:normal; color:rgba(255,255,255,.72); }
}

@media (max-width:700px) {
  .nav-toggle > span:last-child { display:none; }
  .hdr-acts .hact:first-of-type:not(#cartBtn) { display:none; }
  .pgrid { grid-template-columns:minmax(0,1fr); gap:1rem; }
  .card-title { font-size:1.02rem; }
  .card .shot { aspect-ratio:4 / 3; }
  .shop-cats { margin-top:-.4rem; }
}