/* CLZTURE — matched to the live Astra/WooCommerce theme.
   Values lifted from clzture.com: IBM Plex Mono, #111 on #fff, #f1f1f1 tiles,
   4-up edge-to-edge grid with a 1px gutter, 11px/1.1px uppercase titles. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --ink:#111; --dim:#8a8a8a; --line:#e3e3e3;
  --tile:#f1f1f1; --bg:#fff;
  --bar:44px;                 /* announcement bar */
  --head:62px;                /* main header */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:400 14px/1.6 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.02em;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}

/* ---------- announcement ---------- */
.promo{
  background:#000; color:#fff; text-align:center;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  padding:0 16px; height:var(--bar);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.promo b{font-weight:600}

/* ---------- header ---------- */
.bar{
  position:sticky; top:0; z-index:40; background:var(--bg);
  border-bottom:1px solid var(--line);
  height:var(--head); display:flex; align-items:center;
  padding:0 clamp(14px,2.5vw,34px); gap:18px;
}
.brand{
  font-weight:600; font-size:20px; letter-spacing:-.02em;
  font-style:italic; white-space:nowrap;
}
.nav{
  flex:1; display:flex; justify-content:center; gap:clamp(12px,2vw,26px);
  font-size:12px; font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  overflow-x:auto; scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap; padding:4px 0; border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{border-bottom-color:var(--ink)}
.tools{
  display:flex; align-items:center; gap:14px;
  font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
}
.chip{border:1px solid var(--line); padding:3px 7px; font-size:10px}
#cartCount{font-variant-numeric:tabular-nums}

/* ---------- sub bar (FILTER / TITLE / SORT) ---------- */
.subbar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  border-bottom:1px solid var(--line);
  padding:14px clamp(14px,2.5vw,34px);
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
}
.subbar .mid{text-align:center; font-weight:500}
.subbar .rt{text-align:right; color:var(--dim)}
.subbar .lf{color:var(--dim)}

/* ---------- product grid ---------- */
main{min-height:60vh}
.grid{
  display:grid; gap:1px; background:var(--bg);
  grid-template-columns:repeat(4,1fr);
}
@media(max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:820px){ .grid{grid-template-columns:repeat(2,1fr)} }

.card{background:var(--tile); padding:0 0 20px; display:block}
.card .ph{aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden}
.card .ph img{
  width:80%; height:80%; object-fit:contain;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.card:hover .ph img{transform:scale(1.045)}
.card .row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:10px; padding:0 16px 6px;
}
.card .bd{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.card .pr{font-size:11px; letter-spacing:.04em; white-space:nowrap}
.card .nm{
  padding:0 16px; font-size:11px; font-weight:400;
  letter-spacing:1.1px; line-height:1.72; text-transform:uppercase; color:var(--ink);
}
.was{color:var(--dim); text-decoration:line-through; margin-left:6px}

.head{padding:26px clamp(14px,2.5vw,34px) 6px}
.head h1{font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase}
.head .sub{color:var(--dim); font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-top:5px}
.pad{padding:0 clamp(14px,2.5vw,34px)}
.empty{padding:80px 0; text-align:center; color:var(--dim); font-size:12px;
  letter-spacing:.1em; text-transform:uppercase}

/* ---------- product page ---------- */
.pdp{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line)}
@media(min-width:900px){ .pdp{grid-template-columns:1.15fr .85fr} }
.shots{background:var(--tile); display:grid; gap:1px; background:var(--bg)}
.shot{background:var(--tile); aspect-ratio:1/1; display:grid; place-items:center}
.shot img{width:82%; height:82%; object-fit:contain}
.info{padding:clamp(22px,4vw,54px); border-left:1px solid var(--line)}
@media(max-width:899px){ .info{border-left:0; border-top:1px solid var(--line)} }
.info .bd{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.info h1{font-size:15px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; margin:8px 0 16px; line-height:1.7}
.price{font-size:15px; letter-spacing:.04em; margin-bottom:30px}
.lbl{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:10px}
.sizes{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:26px}
.sizes button{
  min-width:74px; padding:11px 10px; background:transparent; border:1px solid var(--line);
  cursor:pointer; font-size:11px; letter-spacing:.06em;
}
.sizes button:hover{border-color:var(--ink)}
.sizes button.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn{
  width:100%; padding:16px; background:var(--ink); color:#fff; border:1.5px solid var(--ink);
  cursor:pointer; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.btn:hover{background:#fff; color:var(--ink)}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:#fff}
.note{margin-top:14px; font-size:11px; letter-spacing:.06em; color:var(--dim); min-height:1.3em}
.note.err{color:#c0392b}
.note.ok{color:var(--ink)}
.desc{margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
  color:#4a4a4a; font-size:12.5px; line-height:1.85}

/* ---------- cart & checkout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(14px,2.5vw,34px) 60px}
.line{display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center}
.line .ph{width:88px; height:88px; background:var(--tile); display:grid; place-items:center; flex:0 0 auto}
.line .ph img{width:80%; height:80%; object-fit:contain}
.line .who{flex:1; min-width:0}
.line .who b{font-weight:400; font-size:11px; letter-spacing:1.1px; text-transform:uppercase; display:block}
.line .who span{color:var(--dim); font-size:11px; letter-spacing:.06em}
.qty{display:flex; align-items:center; gap:10px; font-size:12px}
.qty button{width:30px; height:30px; background:transparent; border:1px solid var(--line); cursor:pointer}
.qty button:hover{border-color:var(--ink)}
.rm{background:none; border:0; color:var(--dim); cursor:pointer; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:underline}
.totals{margin:26px 0; padding-top:18px; border-top:1px solid var(--ink)}
.row{display:flex; justify-content:space-between; padding:6px 0; font-size:12px; letter-spacing:.06em}
.row.big{font-size:15px; margin-top:10px; text-transform:uppercase}
form.co{display:grid; gap:12px; max-width:540px}
form.co input{width:100%; padding:14px; background:var(--tile); border:1px solid var(--line); outline:none;
  font-size:12px; letter-spacing:.05em}
form.co input:focus{border-color:var(--ink); background:#fff}
.two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ok-box{border:1px solid var(--ink); padding:44px 28px; text-align:center; margin-top:30px}
.ok-box h1{font-size:14px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px}

.foot{
  border-top:1px solid var(--line); padding:34px clamp(14px,2.5vw,34px);
  color:var(--dim); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between;
}


/* ---------- collection card: sizes + add to cart ---------- */
.card{position:relative;display:flex;flex-direction:column}
.card .ph{display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden}
.card .meta{padding:0 16px 16px;display:flex;flex-direction:column;gap:8px}
.card .nm{display:block}
.chips{display:flex;flex-wrap:wrap;gap:4px;min-height:26px}
.chip{
  font:inherit;font-size:9.5px;letter-spacing:.06em;padding:4px 6px;
  background:transparent;border:1px solid var(--line);cursor:pointer;color:var(--ink);
  transition:background .12s,border-color .12s,color .12s;
}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.off{opacity:.32;cursor:not-allowed;text-decoration:line-through}
.chip.off:hover{border-color:var(--line)}
.add{
  width:100%;padding:11px;background:var(--ink);color:#fff;border:1px solid var(--ink);
  cursor:pointer;font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:background .15s,color .15s,opacity .15s;
}
.add:hover{background:#fff;color:var(--ink)}
.add.warn{background:#fff;color:#c0392b;border-color:#c0392b}
.add.busy{opacity:.6;cursor:progress}
.add.done{background:#1d7a45;border-color:#1d7a45;color:#fff}
.add.sold,.add:disabled{background:transparent;color:var(--dim);border-color:var(--line);cursor:not-allowed}
.sizes button.off{opacity:.32;cursor:not-allowed;text-decoration:line-through}

/* skeletons keep the grid from jumping while a page loads */
.card.skel{background:var(--tile);min-height:340px}
.card.skel::after{
  content:"";display:block;aspect-ratio:1/1;
  background:linear-gradient(100deg,#f1f1f1 30%,#e8e8e8 50%,#f1f1f1 70%);
  background-size:220% 100%;animation:sk 1.1s linear infinite;
}
@keyframes sk{to{background-position:-220% 0}}

/* ---------- sort ---------- */
.sortw{display:inline-flex;align-items:center;gap:6px;color:var(--dim)}
.sortw select{
  font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:2px 0;color:var(--ink);cursor:pointer;
}

/* ---------- pagination ---------- */
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;
  padding:38px clamp(14px,2.5vw,34px);border-top:1px solid var(--line);
}
.pg{
  min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;border:1px solid var(--line);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;transition:border-color .12s,background .12s,color .12s;
}
.pg:hover{border-color:var(--ink)}
.pg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pg.gap{border-color:transparent;min-width:20px;color:var(--dim)}
.pg.off{opacity:.3;cursor:not-allowed}
.pg.prev,.pg.next{letter-spacing:.12em}
@media(max-width:560px){
  .pg{min-width:34px;height:34px;padding:0 7px;font-size:10px}
}

/* ---------- trust ---------- */
.assure{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:grid;gap:7px}
.assure li{font-size:11px;letter-spacing:.05em;color:var(--dim);padding-left:16px;position:relative}
.assure li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;
  border-left:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(-45deg)}
.trust{border-top:1px solid var(--line);background:var(--tile)}
.tw{max-width:var(--shell);margin:0 auto;padding:34px clamp(14px,2.5vw,34px);
  display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:760px){.tw{grid-template-columns:repeat(3,1fr)}}
.ti b{display:block;font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:7px}
.ti span{font-size:11.5px;line-height:1.7;color:var(--dim)}


/* ---------- 3-D Secure ----------
   The bank's page runs in a modal, so the shopper never leaves the store and
   never loses the form they just filled in. */
.tds-back{
  position:fixed;inset:0;z-index:1000;background:rgba(17,17,17,.72);
  display:grid;place-items:center;padding:16px;
}
.tds{
  position:relative;width:min(460px,100%);height:min(620px,88vh);
  background:#fff;border:1px solid var(--ink);
}
.tds iframe{width:100%;height:100%;border:0;display:block}
.tds-x{
  position:absolute;top:-13px;right:-13px;width:28px;height:28px;
  background:#fff;border:1px solid var(--ink);cursor:pointer;
  font-size:15px;line-height:1;display:grid;place-items:center;color:var(--ink);
}
@media(max-width:560px){ .tds{height:92vh} }


/* ---------- home ---------- */
.hero{
  min-height:min(78vh,660px); background-size:cover; background-position:center;
  display:grid; place-items:center; text-align:center; color:#fff;
  padding:70px clamp(16px,4vw,40px);
}
.hin{max-width:640px}
.hero h1{
  font-size:clamp(30px,6vw,58px); font-weight:600; letter-spacing:-.02em;
  font-style:italic; line-height:1.05; margin-bottom:20px;
}
.hero p{font-size:12.5px; letter-spacing:.05em; line-height:1.9; opacity:.92}
.hcta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px}
.hcta a{
  border:1.5px solid #fff; padding:14px 26px; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:underline;
  text-underline-offset:3px; transition:background .15s,color .15s;
}
.hcta a:hover{background:#fff; color:var(--ink)}

.tiles{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--bg)}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.tiles{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--tile); display:block}
.tile img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile .tl{
  position:absolute; inset:auto 0 0 0; padding:16px;
  display:flex; align-items:center; justify-content:space-between;
  color:#fff; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}
.tile .tl i{font-style:normal; opacity:.85}

.secttl{
  text-align:center; padding:26px 16px; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
}
.morewrap{padding:38px 16px; text-align:center; border-top:1px solid var(--line)}
.more{display:inline-block; width:auto; padding:15px 34px}

/* ---- collection card: quick add on hover -------------------------------
   The sizes used to print under the product name, which pushed the button to a
   different height on every card. Lifting them into an overlay takes them out
   of the flow entirely, so every card in a row ends at the same line whatever
   it sells. */
.card{position:relative}
.phwrap{position:relative; overflow:hidden}
.card .ph{display:block; aspect-ratio:1/1; position:relative}
.card .ph img{
  width:100%; height:100%; object-fit:contain;
  transition:opacity .28s ease, transform .5s ease;
}
.card .ph img.alt{
  position:absolute; inset:0; opacity:0;
}
.card:hover .ph img.alt{opacity:1}
.card:hover .ph img:not(.alt){opacity:0}

.quick{
  position:absolute; left:0; right:0; bottom:0;
  background:rgba(255,255,255,.97);
  border-top:1px solid var(--line);
  padding:8px 8px 9px;
  opacity:0; transform:translateY(100%);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.card:hover .quick, .card:focus-within .quick{opacity:1; transform:none; pointer-events:auto}
@media(hover:none){                     /* touch: no hover to reveal it */
  .quick{opacity:1; transform:none; pointer-events:auto; position:static; border-top:0; background:none; padding:8px 0 0}
}
.qsizes{display:flex; flex-wrap:wrap; gap:4px; justify-content:center}
.qs, .qadd{
  font:inherit; font-size:10px; letter-spacing:.04em;
  border:1px solid var(--line); background:#fff; color:inherit;
  padding:5px 7px; cursor:pointer; line-height:1;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.qs:hover:not(:disabled), .qadd:hover{background:#111; color:#fff; border-color:#111}
.qs.off, .qs:disabled{opacity:.32; cursor:not-allowed; text-decoration:line-through}
.qs.done, .qadd.done{background:#12805a; color:#fff; border-color:#12805a}
.qadd{display:block; width:100%; padding:9px; letter-spacing:.1em; text-transform:uppercase}
.qsold{display:block; text-align:center; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); padding:7px 0}

/* Two lines reserved for the title so a one-line name and a two-line name
   still end the card at the same height. */
.card .nm{display:block; min-height:2.7em}
.grid{align-items:stretch}
.card{display:flex; flex-direction:column}
.card .meta{flex:1}

/* ---- primary nav with dropdowns ---------------------------------------- */
.nav{display:flex; align-items:center; gap:22px; justify-content:center}
.nav > a, .nav .hasKids > a{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 0; white-space:nowrap;
}
.nav .on > a, .nav a.on{text-decoration:underline; text-underline-offset:5px}
.hasKids{position:relative}
.car{width:5px; height:5px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-1px); display:inline-block; opacity:.6}
.drop{
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(4px);
  background:#fff; border:1px solid var(--line);
  opacity:0; visibility:hidden; transition:opacity .14s ease, visibility .14s;
  z-index:60; min-width:210px; box-shadow:0 12px 34px rgba(0,0,0,.10);
}
.hasKids:hover .drop, .hasKids:focus-within .drop{opacity:1; visibility:visible}
/* A 22-item list needs columns, or it runs off the bottom of the screen. */
.dropIn{display:grid; grid-template-columns:repeat(2,minmax(150px,1fr)); padding:10px 6px}
.dropIn > a{
  display:block; padding:7px 12px; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap;
}
.dropIn > a:hover{background:#f3f3f3}
@media(max-width:1100px){ .nav{gap:14px} .nav > a, .nav .hasKids > a{font-size:10px} }

/* ---- trust: product page ------------------------------------------------ */
.rate{display:flex; align-items:center; gap:7px; font-size:11px; color:var(--dim);
  letter-spacing:.04em; margin-bottom:6px}
.rate .st{color:#111; letter-spacing:1px}
.assure{
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px 14px;
  border-top:1px solid var(--line); margin-top:16px; padding-top:14px;
}
.as{display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.03em; color:#333}
.as svg{flex:0 0 15px; color:#111}
.pay{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px;
  border-top:1px solid var(--line); padding-top:12px}
.payl{font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim)}
.pms{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.pm{display:inline-flex; align-items:center; border:1px solid var(--line);
  border-radius:3px; padding:2px 5px; background:#fff}
.delnote{margin-top:14px; border:1px solid var(--line); padding:12px 14px;
  font-size:11.5px; color:#333; letter-spacing:.02em}

/* ---- trust: under the grid --------------------------------------------- */
.trust{border-top:1px solid var(--line); margin-top:34px; padding:26px 20px 34px}
.trust .tw{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  max-width:1180px; margin:0 auto}
.trust .ti{display:flex; flex-direction:column; gap:5px}
.trust .ti svg{color:#111; margin-bottom:3px}
.trust .ti b{font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.trust .ti span{font-size:11.5px; line-height:1.55; color:var(--dim)}
@media(max-width:900px){ .trust .tw{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .assure{grid-template-columns:1fr} }

/* ---- editorial pages (about, contact) ---------------------------------- */
.page{max-width:760px; margin:0 auto; padding:52px 22px 20px}
.page h1{font-size:clamp(26px,4vw,40px); line-height:1.08; letter-spacing:-.01em; margin-bottom:18px}
.page h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:44px 0 16px}
.page h3{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.page p{font-size:14px; line-height:1.75; margin-bottom:14px; color:#333}
.page .lede{font-size:16px; line-height:1.65; color:#111}
.vals{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.val .n{font-size:10px; letter-spacing:.16em; color:var(--dim)}
.val b{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin:5px 0 6px}
.val p{font-size:13px; margin:0}
.figs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin:40px 0; padding:24px 0; text-align:center}
.fig b{display:block; font-size:20px; letter-spacing:-.01em}
.fig span{font-size:10px; letter-spacing:.11em; text-transform:uppercase; color:var(--dim)}
.cta{text-align:center; padding:14px 0 34px}
.cta .btn{display:inline-block; width:auto; padding:13px 26px; margin:6px 4px 0}
.cta .btn.ghost{background:none; color:#111; border:1px solid #111}
.cols{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:26px}
@media(max-width:700px){ .vals,.cols{grid-template-columns:1fr} .figs{grid-template-columns:repeat(2,1fr)} }

/* `hidden` was losing to .subbar{display:grid} — an author rule beats the user
   agent's [hidden]{display:none}, so the search field sat open on every page. */
.subbar[hidden]{display:none}

/* Wordmark instead of the italic text stand-in. */
.brand{display:inline-flex; align-items:center}
.brand img{height:20px; width:auto; display:block}
@media(max-width:820px){ .brand img{height:16px} }

/* Hero: the signature lettering WordPress overlays on the photo. */
.hero-mark{width:min(58vw,760px); height:auto; display:block; margin:0 auto 18px;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.45))}

/* Product gallery: one large shot, thumbnails under it. Four full-size images
   stacked meant scrolling past a metre of shoe to reach the description. */
.gal{display:flex; flex-direction:column; gap:12px}
.gmain{background:var(--tile); aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden}
.gmain img{width:100%; height:100%; object-fit:contain}
.gthumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gthumbs button{
  background:var(--tile); border:1px solid transparent; padding:0; cursor:pointer;
  aspect-ratio:1/1; overflow:hidden; display:grid; place-items:center;
}
.gthumbs button.on{border-color:#111}
.gthumbs img{width:100%; height:100%; object-fit:contain}

/* Filter panel */
.filt{display:inline-flex; align-items:center; gap:7px; cursor:pointer; background:none;
  border:0; font:inherit; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:inherit}
.filt svg{opacity:.7}
.fpanel{border-bottom:1px solid var(--line); background:#fafafa; padding:18px 22px}
.fpanel h4{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-bottom:10px}
.fcats{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px 14px}
.fcats a{font-size:11.5px; letter-spacing:.03em; padding:3px 0}
.fcats a.on{text-decoration:underline; text-underline-offset:4px}
.subbar .lf{display:flex; align-items:center; gap:16px}
.subbar .cnt{color:var(--dim)}
.fcats .dim{color:var(--dim)}
.fpanel[hidden]{display:none}

/* The gallery filled the whole column, so the thumbnails sat below the fold and
   the description was a metre further down. Capped to match the WordPress
   proportions. */
.gal{max-width:640px; margin:0 auto}

/* =====================================================================
   2026-08-05 — trust, footer, always-visible add to cart, size select.
   Appended rather than merged into the blocks above so the diff against
   the WooCommerce-matched original stays readable.
   ===================================================================== */

/* ---------- accessibility plumbing ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:#fff; padding:11px 18px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{left:0}
/* Keyboard focus was invisible on every control in the shop. */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline:2px solid var(--ink); outline-offset:2px;
}
#app:focus{outline:none}

/* ---------- collection card: the buy control is always in the card ---------- */
.card .act{position:relative; margin-top:2px}
.cadd{
  display:block; width:100%; padding:10px 8px;
  background:var(--ink); color:#fff; border:1px solid var(--ink);
  font:inherit; font-size:10px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; cursor:pointer; line-height:1;
  transition:background .15s, color .15s;
}
.cadd:hover:not(:disabled){background:#fff; color:var(--ink)}
.cadd.open{background:#fff; color:var(--ink)}
.cadd.sold, .cadd:disabled{
  background:transparent; color:var(--dim); border-color:var(--line); cursor:not-allowed;
}
/* The size row floats over the meta block, so opening it cannot change the
   height of one card and break the row it sits in. */
.csizes{
  position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:5;
  background:#fff; border:1px solid var(--ink); padding:8px;
  display:flex; flex-wrap:wrap; gap:4px; justify-content:center;
  box-shadow:0 6px 22px rgba(0,0,0,.13);
}
.csizes[hidden]{display:none}

/* ---------- product page: size as a select ---------- */
.lbl{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.sizeguide{
  font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line);
}
.sizeguide:hover{color:var(--ink); border-bottom-color:var(--ink)}
.selwrap{position:relative; margin:8px 0 16px}
.selwrap::after{
  content:""; position:absolute; right:14px; top:50%; width:7px; height:7px;
  border-right:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink);
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.selwrap select{
  -webkit-appearance:none; appearance:none;
  width:100%; padding:14px 38px 14px 14px;
  background:#fff; border:1px solid var(--ink); border-radius:0;
  font:inherit; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer;
}
.selwrap select:disabled{color:var(--dim); border-color:var(--line); cursor:not-allowed}
.selwrap select option:disabled{color:#bbb}

/* ---------- honest authenticity line (replaced the 5-star rating) ---------- */
.rate{
  display:flex; align-items:center; gap:7px; margin:8px 0 2px;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--dim);
}
.rate svg{flex:none; color:#1d7a45}

/* ---------- homepage trust band + payment marks ---------- */
.htrust{border-bottom:1px solid var(--line); background:var(--tile)}
.htw{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 34px;
  padding:15px clamp(14px,2.5vw,34px);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
.htw span{display:inline-flex; align-items:center; gap:7px}
.htw svg{flex:none; color:#1d7a45}
.hpay{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:22px clamp(14px,2.5vw,34px) 34px; border-top:1px solid var(--line);
}

/* ---------- cart totals ---------- */
.totals .free{color:#1d7a45}
.taxnote{
  margin-top:8px; font-size:10px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--dim);
}

/* ---------- policy pages ---------- */
.page.doc h2{
  margin:30px 0 10px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
}
.page.doc p{margin-bottom:12px}
.page.doc a{border-bottom:1px solid var(--line)}
.page.doc a:hover{border-bottom-color:var(--ink)}
.warn{
  border:1px solid #c0392b; color:#c0392b; padding:12px 14px; margin-bottom:20px;
  font-size:11px; letter-spacing:.05em;
}
.tblwrap{overflow-x:auto; margin:16px 0 8px}
table.sz{border-collapse:collapse; width:100%; min-width:460px; font-size:12px}
table.sz th, table.sz td{border:1px solid var(--line); padding:8px 10px; text-align:center}
table.sz th{
  background:var(--tile); font-weight:500; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
}
.page.nf{text-align:center}
.page.nf .cta{margin-top:26px}

/* ---------- footer ---------- */
.foot{
  display:block; text-transform:none; letter-spacing:.02em;
  font-size:12px; color:var(--ink); padding:0;
}
.fgrid{
  display:grid; gap:30px clamp(20px,4vw,60px);
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  padding:44px clamp(14px,2.5vw,34px) 34px;
}
.fbrand img{width:150px; height:auto; margin-bottom:14px}
.fbrand p{color:var(--dim); font-size:11.5px; line-height:1.7; max-width:34ch}
.fpay{display:flex; margin-top:16px}
.fcol h3{
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:14px; font-weight:500;
}
.fcol a{
  display:block; padding:5px 0; font-size:11.5px; color:var(--dim);
  transition:color .12s;
}
.fcol a:hover{color:var(--ink)}
.fbase{
  border-top:1px solid var(--line);
  padding:16px clamp(14px,2.5vw,34px);
  display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
}
@media(max-width:900px){
  .fgrid{grid-template-columns:1fr 1fr}
  .fbrand{grid-column:1/-1}
}
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr; gap:26px}
  .htw{gap:8px 18px; font-size:9.5px}
}

/* ---------- discount codes ---------- */
.coupon{
  display:grid; grid-template-columns:1fr auto; gap:0;
  border:1px solid var(--line); margin:22px 0 10px;
}
.coupon input{
  border:0; outline:none; background:transparent; padding:14px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.capply{
  border:0; border-left:1px solid var(--line); background:var(--ink); color:#fff;
  padding:0 22px; cursor:pointer; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  transition:background .15s, color .15s;
}
.capply:hover:not(:disabled){background:#fff; color:var(--ink)}
.capply:disabled{opacity:.55; cursor:progress}
.coupon.on{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-color:#1d7a45; background:#f2fbf6; padding:12px 14px;
}
.cinfo{display:flex; flex-direction:column; gap:2px; min-width:0}
.cinfo b{font-size:12px; letter-spacing:.1em; color:#12653c}
.cinfo span{font-size:10.5px; letter-spacing:.05em; color:#4a7c60}
.clink{
  border:0; background:none; cursor:pointer; color:var(--dim);
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--line); padding:0 0 1px;
}
.clink:hover{color:var(--ink); border-bottom-color:var(--ink)}
.cmsg{min-height:16px; font-size:10.5px; letter-spacing:.05em; color:var(--dim)}
.cmsg.err{color:#c0392b}
.totals .row.disc span{color:#1d7a45}
.promo.live{background:#12653c}