/* Servolink shop — hero, family tiles, filter rail and product grid */

.st-wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.st-sec{padding:38px 20px 0}
.st-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--ink,#1B1C1F);border-radius:8px;background:#fff;
  padding:11px 20px;font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:14px;font-weight:700;color:var(--ink,#1B1C1F);cursor:pointer;
  text-decoration:none;transition:background .18s,color .18s,border-color .18s
}
.st-btn:hover{background:var(--ink,#1B1C1F);color:#fff}
.st-btn.red{background:var(--red,#FF2836);border-color:var(--red,#FF2836);color:#fff}
.st-btn.red:hover{background:#D01E2A;border-color:#D01E2A}

.st-eyebrow{
  display:inline-block;font-family:var(--font-mono,monospace);font-size:11.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red,#FF2836);margin-bottom:14px
}
.st-foot-note{font-size:12.5px;line-height:1.7;color:#7A8089;margin:18px 0 0;max-width:900px}
/* the hero's eyebrow carries a small red rule in front of the name */
.st-hero .st-eyebrow{display:inline-flex;align-items:center;gap:9px}
.st-hero .st-eyebrow::before{content:"";width:3px;height:13px;background:var(--red,#FF2836);border-radius:2px}

/* ── hero ── */
.st-hero{background:linear-gradient(180deg,#FAFAFB,#F2F3F5);border-bottom:1px solid var(--hair,#E4E6EA)}
.st-hero-in{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:28px;padding-top:40px;padding-bottom:0}
.st-hero h1{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:clamp(28px,4vw,44px);
  font-weight:800;line-height:1.12;letter-spacing:-.02em;color:var(--ink,#1B1C1F);margin:0 0 14px
}
.st-hero p{font-size:15px;color:#5B6168;margin:0 0 18px}
.st-hero-pic{align-self:end}
.st-hero-pic img{width:100%;height:auto;display:block}
.st-crumb{
  font-family:var(--font-mono,monospace);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8A9099;padding-bottom:26px
}
.st-crumb a{color:#8A9099;text-decoration:none}
.st-crumb a:hover{color:var(--red,#FF2836)}
.st-crumb i{font-style:normal;margin:0 8px;color:#C9CDD3}
.st-crumb span{color:var(--red,#FF2836);font-weight:600}

/* ── section heads ── */
.st-sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.st-sec-hd.tight{align-items:center;margin-bottom:14px}
.st-sec-hd h2{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:clamp(22px,2.6vw,30px);
  font-weight:800;letter-spacing:-.02em;color:var(--ink,#1B1C1F);margin:0 0 6px
}
.st-sec-hd h3{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:19px;font-weight:800;
  color:var(--ink,#1B1C1F);margin:0
}
.st-sec-hd p{font-size:14.5px;color:#5B6168;margin:0}
.st-more{font-size:13px;font-weight:600;color:#5B6168;text-decoration:none}
.st-more:hover{color:var(--red,#FF2836)}

.st-search{position:relative;flex:0 1 420px;min-width:260px}
.st-search svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  fill:none;stroke:#9AA0A8;stroke-width:2
}
.st-search input{
  width:100%;border:1px solid var(--hair,#E4E6EA);border-radius:10px;background:#fff;
  padding:13px 16px 13px 40px;font-size:14px;color:var(--ink,#1B1C1F)
}
.st-search input:focus{outline:none;border-color:var(--ink,#1B1C1F)}

/* ── family tiles ── */
.st-fams{display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:12px}
/* thumbnail left, label right - the whole tile reads as one line */
.st-fam{
  display:flex;align-items:center;gap:12px;min-height:84px;
  border:1px solid var(--hair,#E4E6EA);border-radius:12px;background:#fff;
  padding:12px 14px;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s
}
.st-fam:hover{border-color:#C9CDD3;box-shadow:0 10px 26px rgba(15,23,42,.07);transform:translateY(-2px)}
.st-fam.on{border-color:var(--red,#FF2836)}
/* white, not the usual soft grey: these photos carry their own white
   backdrop, and a grey square behind them reads as a box around the product */
.st-fam .pic{
  flex:0 0 48px;width:48px;height:48px;border-radius:9px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden
}
.st-fam .pic img{width:100%;height:100%;object-fit:contain;display:block}
.st-fam .t{min-width:0}
.st-fam b{
  display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:13px;
  font-weight:700;line-height:1.28;color:var(--ink,#1B1C1F);margin-bottom:4px;
  overflow-wrap:break-word
}
/* the count stays on its own single line - it never earns a second one */
.st-fam .t span{
  display:block;font-size:11.5px;color:#8A9099;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* ── application tiles ── */
.st-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* column layout so every card's "Explore range" sits on the same line,
   however many lines its heading runs to */
.st-app{
  display:flex;flex-direction:column;border:1px solid var(--hair,#E4E6EA);border-radius:12px;
  overflow:hidden;background:#fff;text-decoration:none;transition:border-color .18s,box-shadow .18s
}
.st-app:hover{border-color:#C9CDD3;box-shadow:0 12px 30px rgba(15,23,42,.08)}
/* the photo runs edge to edge across the top of the card */
.st-app .pic{background:#fff;aspect-ratio:4/3;display:block;overflow:hidden}
.st-app .pic img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.st-app .txt{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.st-app .k{
  display:block;font-family:var(--font-mono,monospace);font-size:10px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--red,#FF2836);margin-bottom:9px
}
.st-app b{
  display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:17px;
  font-weight:700;line-height:1.3;color:var(--ink,#1B1C1F);margin-bottom:7px
}
.st-app em{display:block;font-style:normal;font-size:12.5px;color:#8A9099;margin-bottom:14px}
.st-app .go{
  display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;
  color:var(--red,#FF2836);margin-top:auto;align-self:flex-start
}
.st-app:hover .go{text-decoration:underline}

/* ── listing layout ── */
.st-main{display:grid;grid-template-columns:248px minmax(0,1fr);gap:28px;padding-top:34px;padding-bottom:10px;align-items:start}

.st-side{border:1px solid var(--hair,#E4E6EA);border-radius:12px;background:#fff;padding:20px 18px;position:sticky;top:18px}
.st-side-hd{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.st-side-hd h4{font-family:var(--font-display,'Poppins'),sans-serif;font-size:17px;font-weight:800;color:var(--ink,#1B1C1F);margin:0;flex:1}
.st-clear{font-size:12px;font-weight:600;color:var(--red,#FF2836);text-decoration:none}
.st-side-hd button{display:none;border:0;background:none;font-size:26px;line-height:1;color:#8A9099;cursor:pointer}

.st-fg{border-top:1px solid var(--hair,#E4E6EA);padding:16px 0 4px}
.st-fg > label:not(.st-opt),.st-fg .lbl{
  display:block;font-family:var(--font-mono,monospace);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink,#1B1C1F);margin-bottom:10px
}
.st-fg select{
  width:100%;border:1px solid var(--hair,#E4E6EA);border-radius:8px;background:#fff;
  padding:10px 12px;font-size:13.5px;color:var(--ink,#1B1C1F);margin-bottom:10px
}
.st-opt{display:flex;align-items:center;gap:10px;padding:5px 0;cursor:pointer;font-size:13.5px;color:#3E4248}
.st-opt input{accent-color:var(--red,#FF2836);width:15px;height:15px;margin:0}
.st-opt span{flex:1}
.st-opt em{font-style:normal;font-size:12px;color:#9AA0A8}

.st-side-actions{padding-top:14px}
.st-side-actions .st-btn{width:100%}

.st-help{margin-top:18px;border-radius:10px;background:var(--soft,#F7F6F4);padding:16px 16px 14px}
.st-help b{display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:14px;color:var(--ink,#1B1C1F);margin-bottom:6px}
.st-help p{font-size:12.5px;line-height:1.65;color:#5B6168;margin:0 0 10px}
.st-help a{font-size:12.5px;font-weight:700;color:var(--red,#FF2836);text-decoration:none}

/* ── sort bar ── */
.st-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.st-showing{flex:1;font-size:13.5px;color:#5B6168;margin:0}
.st-showing b{color:var(--ink,#1B1C1F);font-weight:700}
.st-sort{display:flex;align-items:center;gap:9px;font-size:13px;color:#5B6168}
.st-sort select{
  border:1px solid var(--hair,#E4E6EA);border-radius:8px;background:#fff;
  padding:9px 12px;font-size:13.5px;color:var(--ink,#1B1C1F)
}
.st-filter-open{
  display:none;align-items:center;gap:8px;border:1px solid var(--hair,#E4E6EA);border-radius:8px;
  background:#fff;padding:10px 14px;font-size:13.5px;font-weight:600;color:var(--ink,#1B1C1F);cursor:pointer
}
.st-filter-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}

/* one line of plain guidance above a picker that needs explaining */
.st-hint{font-size:11.5px;line-height:1.55;color:#8A9099;margin:0 0 9px}

/* ── product cards ── */
/* minmax(0,…) not 1fr: a plain 1fr track refuses to go below its content's
   min-content width, and the side-scrolling picker inside the column made that
   minimum wider than the phone, which stretched the whole page. */
.st-list{min-width:0}
.st-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.st-card{
  display:flex;flex-direction:column;border:1px solid var(--hair,#E4E6EA);border-radius:12px;
  background:#fff;overflow:hidden;transition:border-color .18s,box-shadow .18s
}
.st-card:hover{border-color:#C9CDD3;box-shadow:0 14px 32px rgba(15,23,42,.08)}
.st-card .pic{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:var(--soft,#F7F6F4);padding:18px;overflow:hidden
}
/* width/height rather than max-width/max-height on purpose.
   The box gets its height from aspect-ratio, and Safari on iOS does not
   resolve a percentage max-height against that - so a portrait photo (every
   variac is taller than it is wide) ignored the limit and spilled out of the
   card. Giving the image the full box and letting object-fit letterbox it
   needs no percentage height at all. */
.st-card .pic img{width:100%;height:100%;object-fit:contain;display:block}
.st-card .tag{
  position:absolute;left:12px;top:12px;font-family:var(--font-mono,monospace);font-size:9.5px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#5B6168;
  background:#fff;border:1px solid var(--hair,#E4E6EA);border-radius:4px;padding:4px 8px
}
.st-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.st-card .brand{
  font-family:var(--font-mono,monospace);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red,#FF2836);margin-bottom:8px
}
.st-card h3{font-family:var(--font-display,'Poppins'),sans-serif;font-size:15px;font-weight:700;line-height:1.4;margin:0 0 10px}
.st-card h3 a{color:var(--ink,#1B1C1F);text-decoration:none}
.st-card h3 a:hover{color:var(--red,#FF2836)}
.st-card .chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.st-card .chips span{
  font-size:11px;color:#5B6168;background:var(--soft,#F7F6F4);
  border-radius:4px;padding:4px 8px
}
/* the input range is the chip a buyer compares on, so it is picked out */
.st-card .chips span.volt{
  color:#8E1F27;background:#FFF4F4;border:1px solid #FBD5D8;padding:3px 7px
}
.st-card .price{font-family:var(--font-display,'Poppins'),sans-serif;font-size:21px;font-weight:800;color:var(--ink,#1B1C1F);margin:0}
.st-card .price i{font-style:normal;font-size:12.5px;font-weight:500;color:#8A9099;margin-right:5px}
.st-card .price.quote{font-size:16px}
.st-card .note{font-size:11.5px;color:#9AA0A8;margin:4px 0 14px}
.st-card .choose{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--hair,#E4E6EA);border-radius:8px;padding:11px 14px;
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:13.5px;font-weight:700;
  color:var(--ink,#1B1C1F);text-decoration:none;transition:background .18s,color .18s,border-color .18s
}
.st-card .choose:hover{background:var(--ink,#1B1C1F);border-color:var(--ink,#1B1C1F);color:#fff}

.st-empty{border:1px solid var(--hair,#E4E6EA);border-radius:12px;background:#fff;padding:46px 24px;text-align:center}
.st-empty h3{font-family:var(--font-display,'Poppins'),sans-serif;font-size:19px;margin:0 0 8px;color:var(--ink,#1B1C1F)}
.st-empty p{font-size:14px;color:#5B6168;margin:0 0 18px}

/* while the next page is being fetched the old one dims rather than vanishing,
   so the page does not jump about under the shopper */
.st-list.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s}

/* ── pagination ── */
.st-pages{display:flex;justify-content:center;gap:8px;margin-top:26px;flex-wrap:wrap}
.st-pages a{
  min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hair,#E4E6EA);border-radius:8px;background:#fff;
  font-size:13.5px;font-weight:600;color:var(--ink,#1B1C1F);text-decoration:none
}
.st-pages a:hover{border-color:#9AA0A8}
.st-pages a.on{background:var(--ink,#1B1C1F);border-color:var(--ink,#1B1C1F);color:#fff}

/* ── why / cta ── */
.st-why{background:var(--soft,#F7F6F4);border-top:1px solid var(--hair,#E4E6EA);margin-top:34px}
.st-why-in{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:26px;padding-bottom:26px}
.st-why-i{display:flex;gap:11px}
.st-why-i svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px;fill:none;stroke:var(--red,#FF2836);stroke-width:1.7}
.st-why-i b{display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:13.5px;color:var(--ink,#1B1C1F);margin-bottom:4px}
.st-why-i span{font-size:12.5px;line-height:1.6;color:#5B6168}

.st-cta-wrap{padding-top:28px;padding-bottom:40px}
.st-cta{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border:1px solid var(--hair,#E4E6EA);border-left:4px solid var(--red,#FF2836);
  border-radius:12px;background:#fff;padding:24px 26px
}
.st-cta h3{font-family:var(--font-display,'Poppins'),sans-serif;font-size:20px;font-weight:800;color:var(--ink,#1B1C1F);margin:0 0 6px}
.st-cta p{font-size:14px;color:#5B6168;margin:0}

/* ── narrower screens ── */
/* below this the six-across row gets too tight for the labels */
@media (max-width:1260px){
  .st-fams{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .st-apps{grid-template-columns:repeat(2,1fr)}
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  /* one column, with the range photo tucked into the bottom-right corner
     behind the words instead of stacked underneath them */
  .st-hero-in{grid-template-columns:1fr;position:relative;gap:0;padding-bottom:18px}
  .st-hero-txt{position:relative;z-index:1}
  .st-hero p{max-width:62%}
  .st-hero .st-crumb{margin-top:16px}
  .st-hero-pic{
    position:absolute;right:0;bottom:0;z-index:0;
    width:56%;max-width:300px;align-self:auto;pointer-events:none
  }
  .st-why-in{grid-template-columns:1fr 1fr}

  .st-main{grid-template-columns:1fr;padding-top:24px}
  .st-filter-open{display:inline-flex}
  .st-side-hd button{display:block}

  /* the rail becomes a drawer, opened from the Filters button */
  .st-side{
    position:fixed;z-index:60;top:0;left:0;bottom:0;width:min(86vw,320px);
    border:0;border-radius:0;overflow-y:auto;padding:20px;
    transform:translateX(-102%);transition:transform .25s ease
  }
  .st-side.open{transform:none;box-shadow:0 0 60px rgba(0,0,0,.25)}
  .side-veil{
    position:fixed;inset:0;z-index:55;background:rgba(15,19,25,.45);
    opacity:0;visibility:hidden;transition:opacity .25s
  }
  .side-veil.open{opacity:1;visibility:visible}
}
@media (max-width:620px){
  .st-sec{padding-top:28px}
  .st-why-in{grid-template-columns:1fr}
  /* heading and its link stay side by side instead of stacking */
  .st-sec-hd.tight{flex-wrap:nowrap;gap:12px}
  .st-sec-hd.tight .st-more{flex:0 0 auto;font-size:12px}

  /* two family tiles to a row, still picture left and label right */
  .st-fams{grid-template-columns:1fr 1fr;gap:10px}
  .st-fam{min-height:0;padding:10px;gap:9px}
  .st-fam .pic{flex:0 0 42px;width:42px;height:42px;border-radius:8px}
  .st-fam b{font-size:12px;margin-bottom:3px}
  .st-fam .t span{font-size:10.5px}

  /* the application cards become a swipeable row, the next one peeking */
  .st-apps{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -20px;padding:2px 20px 6px
  }
  .st-apps::-webkit-scrollbar{display:none}
  .st-app{flex:0 0 72%;scroll-snap-align:start}
  .st-app .txt{padding:14px 16px 16px}
  .st-app b{font-size:15px}

  /* two products to a row, the card trimmed to suit the narrower column */
  .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .st-card .pic{padding:12px}
  .st-card .tag{left:8px;top:8px;font-size:8.5px;padding:3px 6px}
  .st-card .body{padding:12px 12px 14px}
  .st-card .brand{font-size:9.5px;margin-bottom:6px}
  .st-card h3{font-size:12.5px;line-height:1.35;margin-bottom:8px}
  .st-card .chips{gap:4px;margin-bottom:9px}
  .st-card .chips span{font-size:9.5px;padding:3px 6px}
  .st-card .price{font-size:16px}
  .st-card .price i{display:block;font-size:10.5px;margin:0 0 1px}
  .st-card .price.quote{font-size:13px}
  .st-card .note{font-size:10px;margin-bottom:11px}
  .st-card .choose{padding:9px 8px;font-size:11.5px;gap:5px}

  /* count on the left, Filters on the right, sort on its own line below */
  .st-bar{gap:10px}
  .st-showing{flex:1 1 auto;order:1;font-size:12.5px}
  .st-filter-open{order:2}
  .st-sort{flex:1 0 100%;order:3}
  .st-sort select{flex:1}
}

/* cart / enquiry message, shown above the hero after an action */
.flash{
  border:1px solid #FBD5D8;border-left:3px solid var(--red,#FF2836);border-radius:8px;
  background:#FFF4F4;padding:12px 16px;font-size:14px;color:#8E1F27
}

/* ═══════════════════════════════════════════════════════════════════
   product page
   ═══════════════════════════════════════════════════════════════════ */

/* a long model name wraps here rather than running off a phone screen */
.pv-crumb{padding-top:18px;margin-bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;line-height:1.9}
.pv-crumb i{margin:0}
.pv-main{
  display:grid;grid-template-columns:1fr 1.05fr;gap:46px;
  padding-top:22px;padding-bottom:10px;align-items:start
}
.pv-main.is-loading{opacity:.45;pointer-events:none;transition:opacity .15s}

/* ── photo ── */
.pv-stage{
  border:1px solid var(--hair,#E4E6EA);border-radius:14px;background:#fff;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  padding:34px;overflow:hidden
}
.pv-stage img{width:100%;height:100%;object-fit:contain;display:block}
.pv-cap{text-align:center;font-size:12.5px;color:#9AA0A8;margin:12px 0 0}
.pv-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.pv-thumb{
  width:70px;height:70px;border:1px solid var(--hair,#E4E6EA);border-radius:9px;background:#fff;
  padding:6px;cursor:pointer;transition:border-color .18s
}
.pv-thumb.on{border-color:var(--red,#FF2836)}
.pv-thumb img{width:100%;height:100%;object-fit:contain;display:block}

/* ── details ── */
.pv-eyebrow{
  display:block;font-family:var(--font-mono,monospace);font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--red,#FF2836);margin-bottom:12px
}
.pv-info h1{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:clamp(24px,3vw,34px);
  font-weight:800;line-height:1.18;letter-spacing:-.015em;color:var(--ink,#1B1C1F);margin:0 0 14px
}
.pv-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.pv-chips span{
  font-size:11.5px;color:#5B6168;background:var(--soft,#F7F6F4);
  border-radius:5px;padding:5px 10px
}
.pv-lede{font-size:14.5px;line-height:1.75;color:#5B6168;margin:0 0 20px}
.pv-rule{height:1px;background:var(--hair,#E4E6EA);margin:0 0 20px}

.pv-price{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:32px;font-weight:800;
  color:var(--ink,#1B1C1F);margin:0 0 5px
}
.pv-price.quote{font-size:22px;color:var(--red,#FF2836)}
.pv-price-note{font-size:12.5px;color:#8A9099;margin:0 0 22px}

.pv-field{margin-bottom:20px}
.pv-flabel{
  display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:13.5px;
  font-weight:700;color:var(--ink,#1B1C1F);margin-bottom:10px
}
.pv-opts{display:flex;flex-wrap:wrap;gap:10px}
.pv-opt{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--hair,#E4E6EA);border-radius:9px;background:#fff;
  padding:11px 16px;font-size:13.5px;font-weight:600;color:var(--ink,#1B1C1F);
  text-decoration:none;cursor:pointer;transition:border-color .18s,color .18s
}
.pv-opt:hover{border-color:#9AA0A8}
.pv-opt.on{border-color:var(--red,#FF2836);color:var(--red,#FF2836)}
.pv-opt.static{cursor:default}

.pv-buy{display:flex;gap:12px;margin-bottom:12px}
.pv-qty{
  display:flex;align-items:center;border:1px solid var(--hair,#E4E6EA);
  border-radius:9px;background:#fff;flex:0 0 auto
}
.pv-qty button{
  width:38px;height:46px;border:0;background:none;font-size:17px;color:#5B6168;cursor:pointer
}
.pv-qty button:hover{color:var(--ink,#1B1C1F)}
.pv-qty input{
  width:38px;height:46px;border:0;text-align:center;font-size:14px;font-weight:600;
  color:var(--ink,#1B1C1F);background:none
}
.pv-qty input:focus{outline:none}
.pv-add{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;
  border-radius:9px;background:var(--red,#FF2836);
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:14.5px;font-weight:700;
  color:#fff;text-decoration:none;transition:background .18s
}
.pv-add:hover{background:#D01E2A;color:#fff}
.pv-second{
  display:flex;align-items:center;justify-content:center;height:46px;
  border:1px solid var(--hair,#E4E6EA);border-radius:9px;background:#fff;
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:14px;font-weight:700;
  color:var(--ink,#1B1C1F);text-decoration:none;transition:border-color .18s
}
.pv-second:hover{border-color:var(--ink,#1B1C1F);color:var(--ink,#1B1C1F)}

.pv-fine{font-size:11.5px;line-height:1.7;color:#9AA0A8;margin:14px 0 0}
.pv-callout{
  border:1px solid var(--hair,#E4E6EA);border-radius:10px;background:var(--soft,#F7F6F4);
  padding:13px 16px;font-size:12.5px;line-height:1.65;color:#5B6168;margin:14px 0 0
}
.pv-help{
  display:inline-block;margin-top:16px;font-size:13.5px;font-weight:700;
  color:var(--red,#FF2836);text-decoration:underline;text-underline-offset:3px
}
.pv-help:hover{color:#D01E2A}

/* ── tabs ── */
.pv-tabs-wrap{padding-top:34px}
.pv-tabs{display:flex;gap:28px;border-bottom:1px solid var(--hair,#E4E6EA);overflow-x:auto;scrollbar-width:none}
.pv-tabs::-webkit-scrollbar{display:none}
.pv-tab{
  border:0;background:none;padding:0 0 12px;cursor:pointer;white-space:nowrap;
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:14px;font-weight:700;
  color:#8A9099;border-bottom:2px solid transparent;margin-bottom:-1px
}
.pv-tab.on{color:var(--red,#FF2836);border-bottom-color:var(--red,#FF2836)}
.pv-panel{display:none;padding-top:24px}
.pv-panel.on{display:block}
.pv-panel h3{font-family:var(--font-display,'Poppins'),sans-serif;font-size:18px;font-weight:700;color:var(--ink,#1B1C1F);margin:0 0 10px}
.pv-panel p{font-size:14px;line-height:1.8;color:#5B6168;margin:0;max-width:820px}

.pv-specs{width:100%;border-collapse:collapse;font-size:13.5px}
.pv-specs tr{border-bottom:1px solid var(--hair,#E4E6EA)}
.pv-specs tr:nth-child(odd){background:var(--soft,#F7F6F4)}
.pv-specs th{
  width:240px;text-align:left;font-weight:600;color:#5B6168;padding:13px 18px;
  border-right:1px solid var(--hair,#E4E6EA)
}
.pv-specs td{padding:13px 18px;color:var(--ink,#1B1C1F)}
.pv-copy{font-size:14px;line-height:1.85;color:#5B6168;margin-top:22px;max-width:860px}

.pv-rel{padding-top:40px}
/* four across, like the shop's own rows of four */
.pv-rel .st-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){ .pv-rel .st-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .pv-rel .st-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }

@media (max-width:980px){
  .pv-main{grid-template-columns:1fr;gap:28px}
  .pv-stage{aspect-ratio:4/3;padding:24px}
  .pv-specs th{width:150px;padding:11px 13px}
  .pv-specs td{padding:11px 13px}
}
@media (max-width:620px){
  .pv-main{padding-top:14px}
  .pv-crumb{font-size:11px}
  .pv-price{font-size:26px}
  .pv-buy{flex-wrap:wrap}
  .pv-add{flex:1 0 100%}
  .pv-qty{flex:1 0 100%;justify-content:center}
  .pv-tabs{gap:18px}
  .pv-tab{font-size:12.5px}
  .pv-specs{font-size:12.5px}
  .pv-specs th{width:118px;padding:10px;font-size:11.5px}
  .pv-specs td{padding:10px}
  .pv-thumb{width:58px;height:58px}
}

/* ═══════════════════════════════════════════════════════════════════
   checkout
   ═══════════════════════════════════════════════════════════════════ */

.co-main{display:grid;grid-template-columns:1fr 360px;gap:30px;align-items:start;padding-bottom:50px}
.co-form h1{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:clamp(23px,3vw,30px);
  font-weight:800;letter-spacing:-.015em;color:var(--ink,#1B1C1F);margin:0 0 8px
}
.co-form h2{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:16px;font-weight:700;
  color:var(--ink,#1B1C1F);margin:26px 0 12px
}
.co-lede{font-size:13.5px;color:#5B6168;margin:0 0 20px}
.co-lede a{color:var(--red,#FF2836);font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:6px}

.co-card{border:1px solid var(--hair,#E4E6EA);border-radius:12px;background:#fff;padding:20px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.co-row.three{grid-template-columns:1fr 1fr .8fr}
.co-fg{margin-bottom:16px}
.co-fg:last-child{margin-bottom:0}
.co-fg label{
  display:block;font-size:12.5px;font-weight:600;color:var(--ink,#1B1C1F);margin-bottom:6px
}
.co-fg label i{font-style:normal;color:var(--red,#FF2836)}
.co-fg label span{font-weight:400;color:#9AA0A8}
.co-fg input,.co-fg textarea{
  width:100%;border:1px solid var(--hair,#E4E6EA);border-radius:9px;background:#fff;
  padding:11px 13px;font-family:inherit;font-size:14px;color:var(--ink,#1B1C1F)
}
.co-fg textarea{resize:vertical;line-height:1.6}
.co-fg input:focus,.co-fg textarea:focus{outline:none;border-color:var(--ink,#1B1C1F)}

.co-pick{display:flex;gap:11px;align-items:flex-start;padding:11px 0;cursor:pointer}
.co-pick + .co-pick{border-top:1px solid var(--hair,#E4E6EA)}
.co-pick input{margin-top:3px;flex:0 0 auto;accent-color:var(--red,#FF2836)}
.co-pick b{display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:13.5px;color:var(--ink,#1B1C1F)}
.co-pick em{display:block;font-style:normal;font-size:12px;color:#8A9099;margin-top:3px;line-height:1.5}
.co-pick input:disabled + span b{color:#9AA0A8}

.co-side{position:sticky;top:96px}
.co-side h3{font-family:var(--font-display,'Poppins'),sans-serif;font-size:15px;font-weight:700;color:var(--ink,#1B1C1F);margin:0 0 14px}
.co-line{
  display:flex;justify-content:space-between;gap:14px;font-size:13px;color:#5B6168;
  padding:9px 0;border-bottom:1px solid var(--hair,#E4E6EA)
}
.co-line i{font-style:normal;color:#9AA0A8}
.co-line b{color:var(--ink,#1B1C1F);white-space:nowrap}
.co-total{
  display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:14px;color:#5B6168
}
.co-total b{font-size:21px;font-weight:800;color:var(--ink,#1B1C1F)}
.co-note{font-size:11.5px;line-height:1.6;color:#9AA0A8;margin:10px 0 0}
.co-go{
  display:block;width:100%;margin-top:16px;border:0;border-radius:9px;
  background:var(--red,#FF2836);padding:14px;cursor:pointer;
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:14.5px;font-weight:700;color:#fff;
  transition:background .18s
}
.co-go:hover{background:#D01E2A}
.co-back{display:block;text-align:center;margin-top:12px;font-size:12.5px;color:#8A9099;text-decoration:none}
.co-back:hover{color:var(--ink,#1B1C1F)}

@media (max-width:980px){
  .co-main{grid-template-columns:1fr}
  .co-side{position:static}
}
@media (max-width:620px){
  .co-row,.co-row.three{grid-template-columns:1fr;gap:0}
  .co-card{padding:16px}
}

/* ── checkout stepper and the step bodies ── */
.co-steps{
  display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;margin:0 0 24px;padding:0 0 18px;
  border-bottom:1px solid var(--hair,#E4E6EA)
}
.co-steps li{
  display:flex;align-items:center;gap:9px;font-family:var(--font-display,'Poppins'),sans-serif;
  font-size:13px;font-weight:600;color:#9AA0A8
}
.co-steps .n{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;border:1px solid var(--hair,#E4E6EA);background:#fff;
  font-size:11.5px;font-weight:700;color:#9AA0A8
}
.co-steps li.on{color:var(--ink,#1B1C1F)}
.co-steps li.on .n{background:var(--red,#FF2836);border-color:var(--red,#FF2836);color:#fff}
.co-steps li.done{color:var(--ink,#1B1C1F)}
.co-steps li.done .n{background:var(--ink,#1B1C1F);border-color:var(--ink,#1B1C1F);color:#fff}

.co-acts{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;flex-wrap:wrap}
.co-acts .co-go{width:auto;margin:0;padding:14px 26px}
.co-ghost{font-size:13px;font-weight:600;color:#8A9099;text-decoration:none}
.co-ghost:hover{color:var(--ink,#1B1C1F)}

.co-item{display:flex;align-items:center;gap:14px;padding:13px 0}
.co-item + .co-item{border-top:1px solid var(--hair,#E4E6EA)}
.co-item img{
  flex:0 0 62px;width:62px;height:62px;object-fit:contain;padding:5px;
  background:var(--soft,#F7F6F4);border-radius:9px
}
.co-item-t{flex:1;min-width:0}
.co-item-t b{display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:13.5px;line-height:1.4;color:var(--ink,#1B1C1F)}
.co-item-t em{display:block;font-style:normal;font-size:12px;color:#8A9099;margin-top:4px}
.co-item-p{font-family:var(--font-display,'Poppins'),sans-serif;font-weight:700;font-size:14px;white-space:nowrap}

.co-addr p{font-size:13.5px;line-height:1.7;color:#5B6168;margin:0}
.co-addr p b{color:var(--ink,#1B1C1F)}
.co-addr .co-ship{font-size:12.5px;color:#8A9099;margin-top:8px}

.co-confirm{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:13px;line-height:1.6;color:#5B6168;cursor:pointer}
.co-confirm input{margin-top:3px;accent-color:var(--red,#FF2836)}

.co-warn{
  border:1px solid #FBD5D8;border-left:3px solid var(--red,#FF2836);border-radius:10px;
  background:#FFF4F4;padding:14px 16px;margin-bottom:16px
}
.co-warn b{display:block;font-family:var(--font-display,'Poppins'),sans-serif;font-size:13px;color:#8E1F27;margin-bottom:4px}
.co-warn p{font-size:12.5px;line-height:1.65;color:#8E1F27;margin:0}

.co-line b.soft{color:#9AA0A8;font-weight:500}

/* ── quick pickers above the grid ──
   each group is a small column, label over its buttons, and the groups sit
   side by side so Phase and Type read as one band across the top */
.st-quick{
  display:flex;flex-wrap:nowrap;gap:16px 44px;align-items:flex-start;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--hair,#E4E6EA);
  /* one line on every screen: on a phone the groups do not fit side by side,
     so the band scrolls sideways rather than stacking */
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.st-quick::-webkit-scrollbar{display:none}
/* when there is more to the right the edge fades, so it reads as swipeable
   instead of looking cut off (class is set from shop-collection.js) */
.st-quick.can-swipe{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 38px),transparent)
}
.st-qrow{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:0 0 auto}
.st-qopts{display:flex;flex-wrap:nowrap;gap:8px}
.st-pill{white-space:nowrap}
.st-qlab{
  font-family:var(--font-display,'Poppins'),sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink,#1B1C1F)
}
.st-pill{
  display:inline-flex;align-items:center;border:1px solid var(--hair,#E4E6EA);border-radius:7px;
  background:#fff;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--ink,#1B1C1F);
  text-decoration:none;transition:border-color .18s,color .18s
}
.st-pill:hover{border-color:#9AA0A8}
.st-pill.on{border-color:var(--red,#FF2836);color:var(--red,#FF2836)}

/* ── what is currently narrowing the list ── */
.st-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.st-chip{
  display:inline-flex;align-items:center;gap:7px;border:1px solid #FBD5D8;border-radius:7px;
  background:#FFF4F4;padding:6px 11px;font-size:12px;font-weight:600;color:#8E1F27;text-decoration:none
}
.st-chip span{font-size:14px;line-height:1;color:#C0636C}
.st-chip:hover{border-color:var(--red,#FF2836);color:#8E1F27}
.st-chip:hover span{color:var(--red,#FF2836)}
.st-chip-clear{font-size:12px;font-weight:600;color:#8A9099;text-decoration:underline;text-underline-offset:3px}
.st-chip-clear:hover{color:var(--ink,#1B1C1F)}

@media (max-width:620px){
  /* runs to the screen edge so the last button does not look clipped */
  .st-quick{
    gap:12px 22px;padding:0 20px 14px;margin:0 -20px 14px
  }
  .st-qrow{gap:7px}
  .st-qopts{gap:6px}
  .st-pill{padding:6px 11px;font-size:12px}
  .st-qlab{font-size:10.5px}
}