/* All Products (shop.html without ?collection, js/shop-all.js): a header
   with a link to each section, the Monogram Glove as a feature, one section
   per kind of product, the Original Collection as a row of colours, then the
   house's promises. Ink on stone, hairlines, square corners. */

/* the header */
.shop-head{margin-bottom:clamp(34px,4.4vw,56px)}
.shop-lede{max-width:52ch;margin:14px auto 0;font-size:15.5px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
.shop-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.shop-jump[hidden]{display:none}
.shop-jump a{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 16px;border:1px solid var(--rule-2);background:var(--white);font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:border-color .2s}
.shop-jump a:hover{border-color:var(--ink)}
.shop-jump span{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;color:var(--ink-3)}

/* the Monogram Glove, featured */
.shop-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px);margin:0 0 clamp(64px,8vw,112px);padding:clamp(16px,2vw,28px);background:var(--white);border:1px solid var(--rule)}
.sf-media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stage)}
.sf-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .45s ease}
.sf-media .sf-alt{object-fit:cover;opacity:0}
.sf-media.has-alt:hover .sf-alt{opacity:1}
.sf-copy{padding:clamp(4px,1.6vw,20px) clamp(0px,2vw,24px) clamp(4px,1.6vw,20px) 0}
.sf-copy .eyebrow{margin:0 0 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.sf-copy h2{margin:0 0 14px;font-family:var(--display);font-weight:500;font-size:clamp(28px,3vw,42px);line-height:1.12;letter-spacing:.06em;text-transform:uppercase;text-wrap:balance}
.sf-copy h2 a{color:inherit}
.sf-rating{margin:0 0 16px}
.sf-price{display:flex;align-items:baseline;gap:12px;margin:0 0 22px;font-family:var(--display);font-size:26px;font-weight:500}
.sf-price s{font-size:16px;font-weight:400;color:var(--ink-3)}
.sf-facts{list-style:none;margin:0 0 20px;padding:0;border-top:1px solid var(--rule)}
.sf-facts li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--rule);font-size:14.5px;color:var(--ink)}
.sf-facts li::before{content:"";position:absolute;left:5px;top:16px;width:5px;height:9px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.sf-offers{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 18px;padding:0}
.sf-offers li{padding:7px 11px 6px;border:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sf-eta{display:flex;align-items:center;gap:10px;margin:0 0 28px;font-size:14px;color:var(--ink-2)}
.sf-eta svg{flex:0 0 auto;width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sf-eta b{color:var(--ink);font-weight:600}
.sf-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* one section per kind of product */
.shop-group{margin:0 0 clamp(64px,8vw,112px)}
.sg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sg-head .eyebrow{margin:0 0 8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.sg-head h2{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.2vw,30px);letter-spacing:.08em;text-transform:uppercase}
.sg-count{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.shop-group .collection-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.shop-group .collection-grid[data-count="1"]{grid-template-columns:minmax(0,380px);justify-content:start}
.shop-group .collection-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,380px));justify-content:start}

/* the Original Collection: every colour in one row */
.orig-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.orig-grid .card figure img{object-fit:contain}
.orig-grid .card :is(h2,h3){font-size:12px}

/* the house's promises, as on the homepage */
.shop-strip{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));padding:clamp(6px,1vw,14px) var(--pad)}
.shop-strip[hidden]{display:none}
.shop-strip > div{border-right:0;padding:clamp(26px,3vw,40px) 12px}
.shop-strip svg{width:34px;height:34px;margin-bottom:10px;stroke-width:1.7}
.shop-strip b{font-size:12px;line-height:1.35}
.shop-strip span{font-size:13px}

@media(max-width:900px){
  .shop-feature{grid-template-columns:minmax(0,1fr)}
  .sf-copy{padding:4px 4px 8px}
  .orig-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:600px){
  .shop-group .collection-grid,.shop-group .collection-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-group .collection-grid[data-count="1"]{grid-template-columns:minmax(0,1fr)}
  .orig-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-head{align-items:flex-start;flex-direction:column}
  .shop-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-strip > div{border-bottom:0;padding:22px 8px}
}

/* stars in the brand's ink (the reviews stylesheet is not loaded here) */
.sf-rating .rv-stars-fill svg{fill:var(--ink)}
.sf-rating .rv-stars-base svg{fill:var(--rule-2)}

/* a section with a single product: the card beside its description */
.shop-solo{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,72px)}
.ss-copy p{max-width:54ch;margin:0 0 22px;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
@media(max-width:700px){.shop-solo{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){.shop-jump{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);padding:0 var(--pad);scrollbar-width:none}.shop-jump::-webkit-scrollbar{display:none}.shop-jump a{flex:0 0 auto}}
/* Held open while Shopify answers, so the promises and the footer stay below
   the screen instead of showing at the top and jumping away. */
.shop-all:empty{min-height:100vh;min-height:100svh}
.shop-grid:has(> .cat-note.is-loading){min-height:100vh;min-height:100svh}
.is-collection .shop-all{min-height:0}   /* a collection page uses the grid, not this */