/* OMS Store — the whole stylesheet.
   Deliberately one small file. Every value a merchant can change is a custom
   property set by the layout from theme settings, so the CSS never needs editing
   to re-skin a store. */

:root{
  --w: 1200px; --r: 8px;
  --text:#171A2B; --bg:#fff; --muted:#F4F5F9; --accent:#171A2B;
  --accent-ink:#fff; --line:rgba(23,26,43,.12);
  --fs: 16px; --hs: 1;
  --oms-ph-bg: var(--muted); --oms-ph-ink: rgba(23,26,43,.18); --oms-ph-radius: var(--r);
  --gap: clamp(16px, 3vw, 32px);
  --pad: clamp(40px, 7vw, 96px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--font-heading); line-height:1.1; letter-spacing:-.02em; margin:0 0 .4em; text-wrap:balance}
h1{font-size:calc(clamp(2.2rem, 5.5vw, 4rem) * var(--hs))}
h2{font-size:calc(clamp(1.7rem, 3.4vw, 2.6rem) * var(--hs))}
h3{font-size:calc(clamp(1.1rem, 1.8vw, 1.35rem) * var(--hs))}
p{margin:0 0 1em; max-width:68ch}
.eyebrow{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin:0 0 .8em}

.wrap{width:min(100% - 2*var(--gap), var(--w)); margin-inline:auto}
.sec{padding-block:var(--pad)}
.sec--muted{background:var(--muted)}

.btn{
  display:inline-block; padding:.85em 1.6em; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); text-decoration:none;
  font-weight:600; font-size:.95rem; border:1px solid var(--accent);
}
.btn:hover{opacity:.88}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--line)}

/* The one grid every section uses. `--cols` is set per section. */
.grid{display:grid; gap:var(--gap); grid-template-columns:repeat(var(--cols,3), minmax(0,1fr))}
@media (max-width:900px){ .grid{grid-template-columns:repeat(min(var(--cols,3),2), minmax(0,1fr))} }
@media (max-width:560px){ .grid{grid-template-columns:1fr} }

.media{border-radius:var(--r); overflow:hidden; background:var(--muted)}
.media img{width:100%; height:100%; object-fit:cover}

.card{display:flex; flex-direction:column; gap:.7rem}
.card h3{margin:0}
.card .meta{opacity:.65; font-size:.9rem}
/* 🔴 EVERY CARD IN A ROW IS THE SAME HEIGHT. `.media` has no height of its own,
   so `.media img{height:100%}` resolves to auto and each photo set its own —
   which left a product grid where the titles sat at four different heights and
   a placeholder was a different size from the photo beside it. One ratio for
   the slot; `object-fit:cover` on the photo and `aspect-ratio` on the
   placeholder then agree. */
.card .media{aspect-ratio:4/5}

.split{display:grid; gap:var(--gap); grid-template-columns:1fr 1fr; align-items:center}
.split--flip > .media{order:2}
@media (max-width:760px){ .split{grid-template-columns:1fr} .split--flip > .media{order:0} }

.stack{display:flex; flex-direction:column; gap:.4rem}
.center{text-align:center; margin-inline:auto}
.center p{margin-inline:auto}

/* Placeholders — injected by lib/store/placeholders.js, styled here so they
   inherit the store's own radius and muted colour. */
.oms-ph{display:grid; place-items:center; width:100%;
  background:var(--oms-ph-bg); color:var(--oms-ph-ink); border-radius:var(--oms-ph-radius); overflow:hidden}
.oms-ph > svg{width:clamp(40px, 22%, 110px); height:auto; display:block}

/* Header / footer */
.hdr{position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--line)}
.hdr-in{display:flex; align-items:center; gap:var(--gap); padding-block:14px}
.hdr .brand{font-family:var(--font-heading); font-weight:700; font-size:1.15rem; text-decoration:none; letter-spacing:-.01em}
.hdr nav{display:flex; gap:22px; margin-left:auto; flex-wrap:wrap}
.hdr nav a{text-decoration:none; font-size:.95rem; opacity:.75}
.hdr nav a:hover{opacity:1}
.ftr{border-top:1px solid var(--line); padding-block:var(--pad) 32px; font-size:.92rem}
.ftr-grid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.ftr a{text-decoration:none; opacity:.72} .ftr a:hover{opacity:1}
.ftr .fine{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); opacity:.55; font-size:.85rem}

/* The enquiry form — the one interactive thing in phase 3 */
.form{display:grid; gap:12px; max-width:520px}
.form label{font-size:.85rem; font-weight:600}
.form input,.form textarea{
  width:100%; font:inherit; padding:.7em .85em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); color:var(--text);
}
.form textarea{min-height:120px; resize:vertical}

details.faq{border-bottom:1px solid var(--line); padding:18px 0}
details.faq summary{cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; opacity:.5; font-size:1.3em; line-height:1}
details.faq[open] summary::after{content:"–"}
details.faq p{margin:12px 0 0}

/* Product page — what a product comes in. Not a selector: the cart is 3.4, and a
   size dropdown that cannot add to a cart is a control that does nothing. */
.opt{display:flex; gap:12px; align-items:baseline; margin:0 0 .7em; flex-wrap:wrap}
.opt-nm{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55; min-width:70px}
.opt-vals{display:flex; gap:6px; flex-wrap:wrap}
.chip{border:1px solid var(--line); border-radius:999px; padding:.25em .75em; font-size:.85rem}

/* Collection toolbar and pagination — step C */
.toolbar{display:flex; align-items:center; gap:var(--gap); flex-wrap:wrap; margin-bottom:var(--gap)}
.sorter{display:flex; align-items:center; gap:8px; margin-left:auto}
.sorter label{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; opacity:.55}
.sorter select{
  font:inherit; font-size:.9rem; padding:.5em .7em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); color:var(--text);
}
.sorter .btn{padding:.5em 1em; font-size:.85rem}
/* 🔴 `[hidden]` IS A UA RULE AND ANY AUTHOR `display` BEATS IT.
   `.btn{display:inline-block}` above is an author rule, so setting
   `button.hidden = true` from JavaScript did nothing at all and the "Apply"
   button stayed on screen beside a dropdown that already auto-submits. Seen on
   the rendered page, not in review — the attribute was set correctly and the
   element was still visible. Anything in this stylesheet that sets `display`
   needs this line too.
   ⚠️ `!important` IS THE RIGHT CALL HERE and only here. DESIGN-SYSTEM.md §7 bans
   it in the OMS portals, where five stylesheets plus ~4,000 inline styles stack
   and an `!important` becomes unfixable. This theme is ONE file with nothing
   stacked on it, and the alternative — a more specific selector per button — is
   a trap waiting for the next `hidden` element. */
[hidden]{display:none !important}
.pager{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:var(--pad)}
.pg{
  display:inline-grid; place-items:center; min-width:2.4em; padding:.5em .8em;
  border:1px solid var(--line); border-radius:var(--r); text-decoration:none; font-size:.9rem;
}
.pg:hover{border-color:var(--text)}
.pg--on{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.pg--gap{border-color:transparent; opacity:.45}

/* Facets — step D. Every control is a link, so this is all presentation. */
.withfilters{display:grid; gap:var(--gap); grid-template-columns:230px minmax(0,1fr); align-items:start}
.withfilters--none{grid-template-columns:minmax(0,1fr)}
@media (max-width:860px){ .withfilters{grid-template-columns:minmax(0,1fr)} }
.facets{position:sticky; top:84px}
.facets-head{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.facet-clear{font-size:.85rem; opacity:.7}
.facet{border-top:1px solid var(--line); padding:12px 0}
.facet summary{cursor:pointer; font-weight:600; font-size:.95rem; list-style:none;
  display:flex; align-items:center; gap:8px; justify-content:space-between}
.facet summary::-webkit-details-marker{display:none}
.facet summary::after{content:"+"; opacity:.45; font-size:1.2em; line-height:1}
.facet[open] summary::after{content:"–"}
.facet-on{width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:auto}
.facet ul{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:2px;
  max-height:260px; overflow:auto}
.facet-val{display:flex; align-items:center; gap:9px; padding:4px 2px; text-decoration:none; font-size:.9rem}
.facet-val .box{width:15px; height:15px; border:1px solid var(--line); border-radius:4px; flex:0 0 auto}
.facet-val.on .box{background:var(--accent); border-color:var(--accent)}
.facet-val.on .box::after{content:"✓"; color:var(--accent-ink); font-size:11px; display:grid; place-items:center; line-height:13px}
.facet-val .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.facet-val .n{opacity:.5; font-size:.8rem; font-variant-numeric:tabular-nums}
.facet-val:hover .nm{text-decoration:underline}

/* Search — step E */
.searchform{display:flex; gap:8px; max-width:520px; margin-top:16px}
.searchform input{
  flex:1; min-width:0; font:inherit; padding:.7em .9em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); color:var(--text);
}
.searchform .btn{white-space:nowrap}
/* A label that is read aloud and never seen. `display:none` would take it off
   the accessibility tree too, which is the opposite of the point. */
.vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; border:0}
.hdr .srch{display:flex; gap:6px; align-items:center}
.hdr .srch input{
  font:inherit; font-size:.9rem; padding:.4em .7em; width:clamp(100px, 18vw, 190px);
  border:1px solid var(--line); border-radius:999px; background:var(--bg); color:var(--text);
}

/* Header submenus — a <details>, so they work with no JavaScript */
.navdrop{position:relative}
.navdrop summary{cursor:pointer; list-style:none; font-size:.95rem; opacity:.75}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop summary::after{content:" ⌄"; opacity:.6}
.navdrop[open] summary{opacity:1}
.navdrop-menu{
  position:absolute; top:calc(100% + 10px); left:0; z-index:20; min-width:180px;
  display:flex; flex-direction:column; gap:2px; padding:8px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 10px 30px rgba(0,0,0,.07);
}
.navdrop-menu a{padding:6px 8px; border-radius:6px; font-size:.92rem; opacity:.8}
.navdrop-menu a:hover{background:var(--muted); opacity:1}
@media (max-width:760px){ .navdrop-menu{position:static; border:0; box-shadow:none; padding:4px 0 4px 10px} }

/* Buying — phase 3.4 */
.buy{display:flex; flex-direction:column; gap:12px; margin:0 0 1.6em; max-width:420px}
.fld-row{display:flex; gap:8px}
.buy select{
  flex:1; min-width:0; font:inherit; padding:.7em .85em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); color:var(--text);
}
.buy input[type=number]{
  width:80px; font:inherit; padding:.7em .6em; border:1px solid var(--line);
  border-radius:var(--r); background:var(--bg); color:var(--text); text-align:center;
}
.buy .btn{align-self:flex-start}
.buy .btn[disabled]{opacity:.45; cursor:not-allowed}

/* The cart page */
.cart-table{width:100%; border-collapse:collapse}
.cart-table th{text-align:left; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  opacity:.55; font-weight:600; padding:0 0 10px; border-bottom:1px solid var(--line)}
.cart-table td{padding:16px 0; border-bottom:1px solid var(--line); vertical-align:top}
.cart-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.cart-line{display:flex; gap:14px; align-items:flex-start}
.cart-line .media{width:72px; flex:0 0 72px; aspect-ratio:4/5; border-radius:var(--r)}
.cart-line .nm{font-weight:600}
.cart-line .var{opacity:.6; font-size:.88rem}
.cart-line .warn{color:#B26A00; font-size:.85rem; margin-top:4px}
.cart-line .gone{color:#C0283A; font-size:.85rem; margin-top:4px}
.qtyform{display:flex; gap:6px; align-items:center}
.qtyform input{width:66px; font:inherit; font-size:.9rem; padding:.45em .4em; text-align:center;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--text)}
.qtyform button{border:0; background:none; cursor:pointer; opacity:.5; font-size:.85rem; text-decoration:underline}
.qtyform button:hover{opacity:1}
.totals{margin-left:auto; max-width:360px; width:100%}
.totals .row{display:flex; justify-content:space-between; gap:20px; padding:7px 0; font-size:.95rem}
.totals .row.grand{border-top:1px solid var(--line); margin-top:6px; padding-top:14px;
  font-size:1.25rem; font-weight:600}
.totals .fine{opacity:.6; font-size:.85rem; margin:4px 0 0}
.banner{padding:12px 14px; border-radius:var(--r); background:#FFF6E6; color:#8a5200;
  font-size:.92rem; margin:0 0 var(--gap)}
.banner.bad{background:#FDECEE; color:#8E1F2D}

/* Checkout — phase 3.4 */
.checkout{display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr) 340px; align-items:start}
@media (max-width:860px){ .checkout{grid-template-columns:minmax(0,1fr)} }
.checkout h2{font-size:1.15rem; margin:0 0 .7em}
.checkout .form{max-width:none}
.checkout-side{background:var(--muted); border-radius:var(--r); padding:20px; position:sticky; top:84px}
.sum-line{display:flex; gap:10px; align-items:baseline; font-size:.92rem; padding:5px 0}
.sum-line .q{opacity:.6; font-variant-numeric:tabular-nums}
.sum-line .nm{flex:1; min-width:0}
.sum-line .num{font-variant-numeric:tabular-nums; white-space:nowrap}
.rates{display:flex; flex-direction:column; gap:8px; max-width:520px}
.rate{display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--r); cursor:pointer}
.rate:has(input:checked){border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.rate .nm{flex:1}
.rate .num{font-variant-numeric:tabular-nums}

/* The variant picker — phase 3.7.
   🔴 Swatches are LINKS and sizes are radios, so the whole thing works with no
   JavaScript: colour is navigation, size is a form value. */
.opt .sel{opacity:.8}
.swatches{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 1.4em}
.sw{
  /* `--sw` is set per section from the theme setting; 56px is the fallback for a
     stock Shopify section that does not know about it. */
  display:grid; place-items:center; width:var(--sw,56px); min-height:var(--sw,56px); padding:2px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  text-decoration:none; background:var(--muted); font-size:.72rem; text-align:center;
}
.sw img{width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius:calc(var(--r) - 3px)}
.sw-nm{padding:6px 4px; line-height:1.2; word-break:break-word}
.sw:hover{border-color:var(--text)}
.sw.on{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent)}
/* ⚠️ Dimmed and struck, not hidden: "sold out" is information, a missing swatch
   is a mystery — a shopper cannot tell whether the shop never made it. */
.sw.out{opacity:.4}
.sw.out img{filter:grayscale(1)}
.sizes{display:flex; gap:8px; flex-wrap:wrap}
.sz{position:relative; cursor:pointer}
.sz input{position:absolute; opacity:0; width:0; height:0}
.sz span{
  display:inline-grid; place-items:center; min-width:3em; padding:.55em .9em;
  border:1px solid var(--line); border-radius:var(--r); font-size:.92rem;
}
.sz:hover span{border-color:var(--text)}
.sz input:checked + span{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.sz input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.sz.out{cursor:not-allowed}
.sz.out span{opacity:.35; text-decoration:line-through}
/* A swatch with no photograph but a colour the merchant set (migration 180). */
.sw-hex{display:block; width:100%; aspect-ratio:1/1; border-radius:calc(var(--r) - 3px)}