/* ============================================================
   USB Makers — Category v2 (filtered shop) styles
   Inspiration: filter-sidebar + product grid retail layout.
   Layered on site.css. Our header/nav/footer unchanged.
   ============================================================ */

/* compact hero (legacy) */
.shop-hero { background: linear-gradient(180deg, var(--panel), #fff); border-bottom: 1px solid var(--line); }

/* ============ big category hero (top) ============ */
.cat-hero2 { position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 120% at 100% 0%, rgba(255,90,175,0.07), transparent 60%), linear-gradient(180deg, var(--panel), #fff 70%); }
.cat-hero2 .container { padding-block: clamp(16px, 2.4vw, 28px) clamp(28px, 4vw, 56px); }
.crumbs { display: flex; align-items: center; gap:4px; font-size:15px; color: var(--ink-soft); margin-bottom: clamp(16px, 3vw, 30px); }
.crumbs a { color: var(--cta); font-weight: 700; }
.crumbs .sep { color: var(--ink-faint); }
.crumbs .here { color: var(--ink); font-weight: 700; }
.ch2-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.ch2-copy h1 { font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing:-.02em; line-height:1.05; color: var(--ink); margin: 0 0 18px; }
.ch2-rule { display: block; width: 64px; height: 4px; border-radius: 4px; background: var(--cta); margin-bottom: 22px; }
.ch2-copy p { max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 26px; }
.ch2-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.ch2-trust { font-size: 14px; font-weight: 600; color: var(--ink-soft); margin-bottom: 14px; }
.ch2-logos { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.ch2-logos span { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink); opacity: 0.46; }
.ch2-media { position: relative; }
.ch2-media img { width: 100%; max-width: 640px; margin-left: auto; display: block; }
@media (max-width: 900px) {
  .ch2-grid { grid-template-columns: 1fr; }
  .ch2-media { order: -1; max-width: 560px; margin: 0 auto; }
}
.shop-hero .container { padding-block: clamp(22px, 3vw, 36px); }
.shop-hero h1 { font-size: clamp(28px, 3.8vw, 44px); font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 8px; }
.shop-hero h1 .hl { color: var(--cta); }
.shop-hero p { max-width: 72ch; font-size: 15px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* layout */
.shop { padding-block: clamp(22px, 3vw, 34px); }
.shop .container { display: grid; grid-template-columns: 256px 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }

/* filters sidebar */
.filters { position: sticky; top: 92px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px 20px 16px; box-shadow: 0 18px 44px -30px rgba(20,26,48,0.34); }
.filters .fil-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 4px; }
.filters .fil-top h2 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0; }
.filters .fil-clear { font-size: 12.5px; font-weight: 700; color: var(--cta); background: none; border: 0; cursor: pointer; padding: 0; }
.filters .fil-clear:hover { text-decoration: underline; }
.fil-group { border-top: 1px solid var(--line); padding: 16px 0; }
.fil-group > h3 { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin: 0; cursor: pointer; user-select: none; }
.fil-group > h3::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint); transform: rotate(45deg); transition: transform .22s var(--ease); }
.fil-group.collapsed > h3::after { transform: rotate(-45deg); }
.fil-group > h3 .sel-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cta); color: #fff; font-size: 11px; font-weight: 800; display: none; place-items: center; }
.fil-group > h3 .sel-badge.on { display: grid; }
.fil-group .fil-opts, .fil-group .fil-swatches { margin-top: 13px; transition: opacity .2s var(--ease); }
.fil-group.collapsed .fil-opts, .fil-group.collapsed .fil-swatches { display: none; }

/* modern chip-toggle filter options */
.fil-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.fil-opt { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1.5px solid var(--line-2); background: #fff; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink-soft); transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease); }
.fil-opt:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.fil-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.fil-box { display: none; }
.fil-opt .fil-c { font-size: 11px; font-weight: 800; color: var(--ink-faint); }
.fil-opt:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }
.fil-opt.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.fil-opt:has(input:checked) .fil-c, .fil-opt.is-on .fil-c { color: rgba(255,255,255,0.65); }
.fil-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--primary-tint); }
.fil-opt:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.fil-opt:has(input:disabled):hover { border-color: var(--line-2); color: var(--ink-soft); transform: none; }

/* colour swatches filter */
.fil-swatches { display: flex; flex-wrap: wrap; gap: 9px; }
.fil-sw { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; position: relative; border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--line-2); transition: box-shadow .15s, transform .15s; }
.fil-sw:hover { transform: scale(1.08); }
.fil-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--primary); }
.fil-sw[aria-pressed="true"]::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* main: toolbar + grid */
.shop-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.shop-bar .res { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.shop-bar .res b { color: var(--ink); font-weight: 800; }
.shop-bar .bar-right { display: flex; align-items: center; gap: 10px; }
.shop-bar .filter-toggle { display: none; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.shop-bar select { font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1.5px solid var(--line-2); border-radius: 999px; padding: 9px 36px 9px 16px; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2351627a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* hybrid grouped (showroom) state */
.shop-grid.is-grouped { display: block; }
.shop-grid.is-grouped .grp + .grp { margin-top: clamp(30px, 4vw, 46px); }
.shop-grid.is-grouped .grp-h { font-size: clamp(18px, 2.2vw, 24px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.shop-grid.is-grouped .grp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.scard { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: inherit; transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s; }
.scard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.scard .sc-media { aspect-ratio: 1 / 1; background: linear-gradient(180deg, var(--panel), #fff); display: grid; place-items: center; padding: 18px; }
.scard .sc-media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.scard .sc-body { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.scard .sc-name { font-size: 15px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.scard .sc-meta { font-size: 12px; color: var(--ink-faint); font-weight: 600; margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.scard .sc-meta .dot { color: var(--line-2); }
.scard .sc-quote { margin-top: 13px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; color: var(--primary); }
.scard .sc-quote .arrow { transition: transform .2s var(--ease); }
.scard:hover .sc-quote .arrow { transform: translateX(3px); }
.scard .sc-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--cta); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.scard .sc-fav { position: absolute; top: 9px; right: 9px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-faint); cursor: pointer; transition: color .18s, background .18s; }
.scard .sc-fav:hover { color: var(--cta); }
.scard .sc-fav[aria-pressed="true"] { color: var(--cta); background: var(--cta-tint, #fde4f1); border-color: transparent; }

.shop-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--ink-soft); }
.shop-empty b { color: var(--ink); display: block; font-size: 18px; margin-bottom: 6px; }

/* active filter chips */
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-chips .ac { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--primary); background: var(--primary-tint); border-radius: 999px; padding: 6px 8px 6px 13px; }
.active-chips .ac button { width: 16px; height: 16px; border-radius: 50%; border: 0; background: rgba(19,38,71,0.14); color: var(--primary); font-size: 11px; cursor: pointer; display: grid; place-items: center; }

/* mobile drawer */
.fil-backdrop { position: fixed; inset: 0; z-index: 2147483440;/*USBM_FIL_Z*/ background: rgba(20,26,48,0.45); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.fil-backdrop.show { opacity: 1; pointer-events: auto; }

@media (max-width: 1080px) { .shop-grid, .shop-grid.is-grouped .grp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .shop .container { grid-template-columns: 1fr; }
  .filters { position: fixed; top: 0; left: 0; bottom: var(--usbm-cc-h,0px); width: 300px;/*USBM_FIL_CC*/ max-width: 86vw; z-index: 2147483450;/*USBM_FIL_Z*/ border-radius: 0; overflow-y: auto; transform: translateX(-101%); transition: transform .3s var(--ease); box-shadow: 0 0 40px rgba(20,26,48,0.3); }
  .filters.show { transform: none; }
  .shop-bar .filter-toggle { display: inline-flex; }
}
@media (max-width: 560px) { .shop-grid, .shop-grid.is-grouped .grp-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   How ordering works + help CTA + trust row (page bottom)
   ============================================================ */
.how { background: linear-gradient(180deg, #fff, var(--panel)); border-top: 1px solid var(--line); padding-block: clamp(40px, 5vw, 72px); }
.how-title { text-align: center; font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 clamp(28px, 4vw, 44px); }

.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.how-step { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 22px; display: flex; gap: 16px; align-items: flex-start; box-shadow: 0 18px 40px -30px rgba(20,26,48,0.34); }
.how-step .hs-ic { width: 50px; height: 50px; flex-shrink: 0; color: var(--ink); display: grid; place-items: center; }
.how-step .hs-ic svg { width: 42px; height: 42px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.how-step .hs-num { width: 26px; height: 26px; border-radius: 50%; background: var(--cta); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; margin-bottom: 9px; }
.how-step h3 { font-size: 16px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.how-step p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.how-step:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; width: 12px; border-top: 2px dashed var(--line-2); z-index: 1; }

/* help card */
.help-card { position: relative; overflow: hidden; margin-top: 22px; border: 1px solid var(--line); border-radius: 24px; background:
    radial-gradient(60% 120% at 100% 0%, rgba(255,90,175,0.08), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(32,47,94,0.06), transparent 60%), #fff;
  padding: clamp(26px, 3.4vw, 44px); display: grid; grid-template-columns: 1.1fr 0.95fr 0.95fr; gap: clamp(24px, 3vw, 44px); align-items: center; }
.help-card h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); margin: 0 0 14px; line-height: 1.08; }
.help-card .hc-sub { font-size: 15.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; max-width: 42ch; }
.hc-phone .pk { font-size: 15px; color: var(--ink-soft); margin-bottom: 8px; }
.hc-phone .pk b { color: var(--cta); font-weight: 800; }
.hc-phone .pn { display: flex; align-items: center; gap: 12px; font-size: clamp(28px, 3vw, 36px); font-weight: 800; color: var(--ink); margin-bottom: 22px; letter-spacing: -0.01em; }
.hc-phone .pn .ico { width: 34px; height: 34px; flex-shrink: 0; color: var(--ink); }
.hc-phone .pn .ico svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.7; }
.hc-img { align-self: stretch; display: grid; place-items: center; }
.hc-img img { width: 100%; max-width: 380px; object-fit: contain; }

/* trust row */
.trust5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: clamp(26px, 3vw, 38px); }
.trust5 .t5 { display: flex; align-items: center; gap: 12px; padding: 6px 22px; border-left: 1px solid var(--line); }
.trust5 .t5:first-child { border-left: 0; padding-left: 0; }
.t5 .t5-ic { width: 42px; height: 42px; border-radius: 50%; background: #fde4f1; color: var(--cta); display: grid; place-items: center; flex-shrink: 0; }
.t5 .t5-ic svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.t5 .t5-t { font-weight: 800; font-size: 14px; color: var(--ink); }
.t5 .t5-d { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

@media (max-width: 1000px) {
  .how-steps { grid-template-columns: repeat(2, 1fr); }
  .how-step:nth-child(2n)::after { display: none; }
  .help-card { grid-template-columns: 1fr; text-align: left; }
  .hc-img { order: -1; max-width: 460px; }
  .trust5 { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
  .trust5 .t5:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .how-steps { grid-template-columns: 1fr; }
  .how-step::after { display: none !important; }
  .trust5 { grid-template-columns: 1fr; }
  .trust5 .t5 { border-left: 0; padding-left: 0; }
}


/* === USBM category hero (moved from inline template; scoped to .hero.pgx-hero.hero-v2) === */
.hero.pgx-hero.hero-v2{overflow:hidden}.hero.pgx-hero.hero-v2>.container{display:grid;grid-template-columns:minmax(0,1fr);position:relative;max-width:var(--container);margin-inline:auto;padding-block:0;padding-inline:0}.hero.pgx-hero.hero-v2 .hero-stage{grid-area:1/1;align-self:stretch;position:relative;z-index:1;width:100%;aspect-ratio:1672/748;line-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 48px,#000 90%,transparent 100%)}.hero.pgx-hero.hero-v2 .cluster{width:100%;height:100%;object-fit:cover;object-position:50% 72%;display:block}.hero.pgx-hero.hero-v2 .hero-stage::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.5) 32%,rgba(255,255,255,0) 58%);pointer-events:none}.hero.pgx-hero.hero-v2 .hero-copy{grid-area:1/1;align-self:start;justify-self:start;z-index:3;display:flex;flex-direction:column;width:min(520px,44%);margin-left:var(--gutter);padding:60px 0 24px}.hero.pgx-hero.hero-v2 .hero-checks{position:relative;z-index:3}.hero.pgx-hero.hero-v2 .hero-checks .hc::before{content:"\2713";flex:0 0 auto;display:inline-grid;place-items:center;width:21px;height:21px;border-radius:50%;border:1.6px solid var(--cta);background:rgba(255,61,127,.09);color:var(--cta);font-size:12px;font-weight:900;line-height:1}.hero.pgx-hero.hero-v2 .crumbs{position:absolute;align-self:start;height:max-content;min-height:0;bottom:auto;top:clamp(12px,1.6vw,20px);left:var(--gutter);right:auto;z-index:4;max-width:none;width:auto;margin:0;padding:0;pointer-events:none}.hero.pgx-hero.hero-v2 .crumbs a,.hero.pgx-hero.hero-v2 .crumbs strong{pointer-events:auto}@media(max-width:820px){.hero.pgx-hero.hero-v2 .container{display:block;padding-inline:var(--gutter)}.hero.pgx-hero.hero-v2 .hero-copy{
    /* the desktop rule sets margin-left:var(--gutter) to inset the copy inside the
       full-bleed hero; below 820px the .container supplies that gutter itself, so
       leaving the margin double-indented the H1/lead/checks to 2x the gutter while
       the breadcrumb (a sibling, outside .hero-copy) stayed at 1x - 16 vs 32 at
       390px and 31 vs 61 at 768px, on every hero-v2 category page. */
    margin-left: 0;position:static;width:auto;left:auto;padding:24px 0 6px;transform:none}.hero.pgx-hero.hero-v2 .hero-stage{margin-top:6px;aspect-ratio:auto;-webkit-mask-image:none;mask-image:none}.hero.pgx-hero.hero-v2 .cluster{height:auto}.hero.pgx-hero.hero-v2 .hero-stage::after{display:none}.hero.pgx-hero.hero-v2 .crumbs{position:static;left:auto;padding:14px 0 2px}}
.hero.pgx-hero.hero-v2{background:var(--hero-bg,linear-gradient(180deg,#f2f6f9,#fff))}
/* ===== USBM_HEROC: category hero concept C (copy left, bestseller rail right) ===== */
.hero.heroc{background:var(--heroc-bg,linear-gradient(90deg,#F6F7FB 0%,#F6F7FB 40%,#E9E5F8 100%));overflow:hidden;padding:0}
.hero.heroc>.container{position:relative;padding-top:70px;padding-bottom:48px}
.hero.heroc .crumbs{position:absolute;top:clamp(12px,1.6vw,20px);left:var(--gutter);right:auto;margin:0;padding:0;z-index:4;max-width:none}
.heroc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.heroc-kick{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#C21563;margin:0 0 14px}
.heroc-kick span{color:#FF5AAF}
.heroc-copy .lead{font-size:17px;max-width:none}
.heroc-copy .lead + .lead{margin-top:14px}
.heroc-copy .h-actions{margin-top:26px}
.heroc-copy .hero-checks{display:flex;flex-wrap:wrap;gap:12px 22px;margin-top:26px}
.heroc-copy .hc{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--ink)}/*HEROC_TICKS_SECTOR*/
.heroc-copy .hc svg{flex:0 0 auto;width:23px;height:23px}
.heroc-rail{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:18px;min-height:480px;align-self:stretch}
.heroc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e2e6f2;border-radius:20px;padding:18px;text-decoration:none;transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s}
.heroc-card--main{grid-row:1/3;box-shadow:0 18px 40px rgba(32,47,94,.10)}
.heroc-card:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(32,47,94,.16)}
.heroc-badge{position:absolute;top:16px;left:16px;z-index:2;background:#FF5AAF;color:#202F5E;font-size:12px;font-weight:800;letter-spacing:.04em;padding:5px 12px;border-radius:999px}
.heroc-imgwrap{flex:1;display:grid;place-items:center;min-height:0}
.heroc-imgwrap img{max-width:100%;max-height:100%;object-fit:contain}
.heroc-card--main .heroc-imgwrap img{max-height:340px}
.heroc-card:not(.heroc-card--main) .heroc-imgwrap img{max-height:140px}
.heroc-cta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#202F5E;padding-top:10px}
.heroc-cta .arrow{color:#FF5AAF}
.heroc-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:#202F5E;border-radius:20px;padding:18px;text-decoration:none;transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s}
.heroc-tile svg{color:#FF5AAF}
.heroc-tile b{font-size:15px;font-weight:800;color:#fff}
.heroc-tile span{font-size:12.5px;color:#9fb0d8}
.heroc-tile:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(32,47,94,.22)}
@media(max-width:1100px){.heroc-grid{grid-template-columns:1fr;gap:34px}.heroc-rail{min-height:0;grid-template-rows:auto auto}.heroc-card--main .heroc-imgwrap img{max-height:260px}}
@media(max-width:640px){.hero.heroc>.container{padding-top:64px}.heroc-rail{grid-template-columns:1fr 1fr}.heroc-card--main{grid-column:1/3;grid-row:auto}}

/* heroc rail in scard mode: two real product cards + full-width see-all tile below */
.heroc-rail--scard{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.heroc-rail--scard .scard{grid-row:1}
.heroc-rail--scard .heroc-tile{grid-column:1/3;grid-row:2}

/* HEROC_SCARD_FILL: hero rail cards stretch to copy height - extra space goes to the photo, button stays at the foot */
.heroc-rail--scard .scard{display:flex;flex-direction:column}
.heroc-rail--scard .scard .sc-media{height:auto;flex:1 1 auto;min-height:248px}
.heroc-rail--scard .scard .sc-body{flex:0 0 auto}

/* HEROC_BTNS: pink CTA reads white; ghost gets a background change on hover (site base already darkens the pink and recolours the ghost border) */
.heroc-copy .btn-cta{color:#fff}
.heroc-copy .btn-ghost:hover{background:#f4f6fb}

/* HEROC_BADGE_CUP: first hero card badge gets a trophy cup */
.heroc-rail--scard .scard:first-child .sc-badge{display:inline-flex;align-items:center;gap:5px}
.heroc-rail--scard .scard:first-child .sc-badge::before{content:"";flex:0 0 auto;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0Z'/%3E%3Cpath d='M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3'/%3E%3C/svg%3E") center/contain no-repeat}

/* HEROC_BADGE_BIG: larger badge pills on the hero cards */
.heroc-rail--scard .scard .sc-badge{font-size:13.5px;padding:8px 15px;letter-spacing:.05em}
.heroc-rail--scard .scard:first-child .sc-badge::before{width:18px;height:18px}

/* HEROC_BADGE_TREND: white trend-arrow on the TRENDING pill (second hero card) */
.heroc-rail--scard .scard:nth-child(2) .sc-badge{display:inline-flex;align-items:center;gap:5px}
.heroc-rail--scard .scard:nth-child(2) .sc-badge::before{content:"";flex:0 0 auto;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E") center/contain no-repeat}

/* HEROC_CHECKS_ONELINE: four ticks on a single row on desktop */
.heroc-copy .hero-checks{flex-wrap:nowrap;gap:12px 10px;white-space:nowrap;justify-content:space-between;width:100%;max-width:none}
.heroc-copy .hc{font-size:14.5px;gap:7px}
.heroc-copy .hc svg{width:23px;height:23px}
@media(max-width:900px){.heroc-copy .hero-checks{flex-wrap:wrap;white-space:normal}.heroc-copy .hc{font-size:14px}}

/* HEROV2_LEAD_SPLIT: two-paragraph hero-v2 leads */
.hero.pgx-hero.hero-v2 .hero-copy .lead:not(:last-of-type){margin-bottom:0}
.hero.pgx-hero.hero-v2 .hero-copy .lead + .lead{margin-top:26px}

/* USBM_PB_HERO_UP (2026-09-09, Richard): /power-banks hero image moved up 30px; 2026-09-11 Richard asked for another 30px, so now 60px. The image has no vertical overflow in the cover frame (1672x941 into a 1425x826 stage), so it is also scaled 8% from its top edge to keep the bottom of the frame covered (826 x 1.08 = 892, bottom lands 6px past the frame). Desktop widths only. */
@media(min-width:981px){.hero.pgx-hero.hero-v2 .cluster[src*="Power_Banks_Hero"]{transform:translateY(-60px) scale(1.08);transform-origin:50% 0}}