/* Collection pages and product pages */

/* Breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;font-size:.9rem;color:var(--muted);padding:1.1rem 0}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5}
.crumbs a{text-decoration:none;font-weight:600;color:var(--blue-d)}
.crumbs a:hover{text-decoration:underline}
.page-head .crumbs ol{color:#9db2c4}
.page-head .crumbs a{color:var(--blue-l)}

/* Dark page header (collection and info pages) */
.page-head{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff;padding:0 0 4.5rem}
.page-head .g1{--s:620px;background:var(--blue);left:-280px;top:-340px;opacity:.48}
.page-head .g2{--s:460px;background:var(--gold);right:-240px;bottom:-320px;opacity:.16}
.page-head h1{font-size:clamp(2.5rem,5.8vw,5rem);max-width:16ch;margin-top:1.5rem;text-wrap:balance}
.page-head .lead{color:#c3d3e0;font-size:1.12rem;max-width:44rem;margin:1.3rem 0 2rem}
.page-head .lead a{color:#fff;text-underline-offset:4px}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;list-style:none;margin-bottom:2.2rem}
.facts li{padding:1rem 1.2rem;border-radius:16px}
.facts b{display:block;font-size:1.2rem}
.facts span{font-size:.88rem;color:#c3d3e0}

/* Filter chips */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.filters+.filters{margin-bottom:2rem}
.flabel{width:100%;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.chip{font:inherit;font-size:.92rem;font-weight:500;padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--night);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.chip:hover{border-color:var(--night)}
.chip[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:#fff}
.count{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem}
.grid li[hidden]{display:none}

/* Smaller section headings for long content pages */
.sh{font-size:clamp(1.7rem,3vw,2.5rem);max-width:none;margin-bottom:1.2rem}
.prose{max-width:46rem}
.prose p+p{margin-top:1rem}
.prose ul{margin:1rem 0 0 1.2rem;display:grid;gap:.4rem}
.alt{background:#fff}

/* Data tables: specs and comparisons */
.tbl-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.96rem;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{background:var(--mist);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.tbl tbody th{font-weight:600;white-space:nowrap}
.tbl tr:last-child>*{border-bottom:0}
.note{font-size:.92rem;color:var(--muted);margin-top:.8rem}

/* Ordering steps (light) */
.flow{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.flow li{counter-increment:s;padding:1.4rem;border-radius:20px;background:#fff;border:1px solid var(--line)}
.flow li::before{content:counter(s);display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:50%;background:var(--blue-d);color:#fff;font-weight:700;margin-bottom:.8rem}
.flow b{display:block;margin-bottom:.2rem}
.flow span{font-size:.94rem;color:var(--muted)}

/* FAQs */
.faq{display:grid;gap:.7rem;max-width:52rem}
.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 1.3rem}
.faq summary{cursor:pointer;list-style:none;font-weight:600;padding:1.1rem 2rem 1.1rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;translate:0 -50%;font-size:1.5rem;font-weight:400;color:var(--blue-d);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding-bottom:1.2rem;color:var(--muted)}
.faq a{color:var(--blue-d)}

/* Quote banner */
.quote-band{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff;text-align:center}
.quote-band .g1{--s:560px;background:var(--blue);left:-200px;top:-300px;opacity:.45}
.quote-band .g2{--s:420px;background:var(--gold);right:-200px;bottom:-300px;opacity:.18}
.quote-band h2{margin:0 auto 1rem}
.quote-band p{color:#c3d3e0;max-width:36rem;margin:0 auto 2rem}
.quote-band p a{color:#fff}
.quote-band .cta{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* "Your brand on every ball" band */
.design-band{position:relative;isolation:isolate;overflow:hidden;background:var(--night);color:#fff}
.design-band .g1{--s:640px;background:var(--blue);left:-260px;top:-300px;opacity:.45}
.design-band .g2{--s:480px;background:var(--gold);right:-220px;bottom:-320px;opacity:.16}
.design-in{display:grid;grid-template-columns:1.2fr .8fr;gap:3.5rem;align-items:center}
.eyebrow{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-d)}
.design-band .eyebrow{color:var(--blue-l)}
.design-band h2{font-size:clamp(2rem,3.8vw,3.1rem);max-width:18ch;margin:.3rem 0 1rem}
.design-band .lead{color:#c3d3e0;max-width:40rem;margin-bottom:1.6rem}
.feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.8rem}
.feat li{padding:.9rem 1rem;border-radius:16px}
.feat b{display:block;font-size:1rem}
.feat span{font-size:.88rem;color:#c3d3e0;line-height:1.4}
.design-art{border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.design-art img{display:block;width:100%;height:auto}
.design-art figcaption{color:var(--muted);font-size:.85rem;font-weight:500;text-align:center;padding:.6rem;border-top:1px solid var(--line)}

/* ---------- Product page ---------- */
.pdp{display:grid;grid-template-columns:1.08fr .92fr;gap:3.5rem;align-items:start;padding:.5rem 0 4.5rem}
.gallery{position:sticky;top:5.5rem;display:grid;gap:1rem;min-width:0}
.stage{position:relative;overflow:hidden;width:100%;aspect-ratio:1;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:0 40px 70px -50px rgba(6,17,28,.55);cursor:zoom-in}
.stage img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)}
.stage.zoom img{transform:scale(2)}
.stage-tag{position:absolute;left:1rem;top:1rem;padding:.35rem .85rem;border-radius:999px;background:var(--night);color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.04em}
.stage-hint{position:absolute;right:1rem;bottom:1rem;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid var(--line);font-size:.78rem;font-weight:500;color:var(--muted);transition:opacity .3s}
.stage.zoom .stage-hint,.stage.zoom .snav{opacity:0}
@media(hover:none){.stage-hint{display:none}.stage{cursor:default}}
.snav{position:absolute;top:50%;translate:0 -50%;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);cursor:pointer;opacity:0;transition:opacity .3s,transform .25s var(--ease),background .2s;box-shadow:0 10px 24px -12px rgba(6,17,28,.5)}
.snav svg{width:20px;height:20px;fill:none;stroke:var(--night);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.snav:hover{background:#fff;transform:scale(1.08)}
.prev{left:1rem}.next{right:1rem}
.stage:hover .snav,.snav:focus-visible{opacity:1}
@media(hover:none){.snav{opacity:1;width:38px;height:38px}}
.views{display:grid;grid-template-columns:repeat(5,1fr);gap:.7rem}
.views button{padding:0;border:2px solid transparent;border-radius:14px;overflow:hidden;background:#fff;cursor:pointer;opacity:.75;transition:border-color .2s,opacity .2s,transform .3s var(--ease)}
.views button:hover{transform:translateY(-3px);opacity:1}
.views button[aria-pressed="true"]{border-color:var(--blue);opacity:1}
.views img{width:100%;height:auto}

.buy{min-width:0}
.buy h1{font-size:clamp(2rem,3.4vw,2.9rem);line-height:1.06;margin:.35rem 0 .9rem}
.buy h1 .h1-sub{display:block;margin-top:.45rem;font-size:.42em;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin-bottom:1.4rem}
.pills li{padding:.3rem .8rem;border-radius:999px;background:var(--mist);color:var(--night-2);font-size:.85rem;font-weight:500}

/* Quote box: the price, the choices and the two buttons in one card */
.price-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:26px;padding:1.6rem;box-shadow:0 30px 60px -40px rgba(6,17,28,.5);margin-bottom:1.4rem;scroll-margin-top:6.5rem}
.price-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--blue),var(--blue-l) 60%,var(--gold))}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.pc-price{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:.4rem}
.pc-price small{grid-column:1/-1;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pc-price strong{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--night)}
.pc-price strong.ask{font-size:1.8rem}
.pc-price span{color:var(--muted);font-weight:500}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;list-style:none;margin-top:1rem}
.tiers li{display:grid;text-align:center;padding:.55rem .3rem;border-radius:12px;border:1.5px solid var(--line);background:var(--chalk);transition:border-color .2s,background .2s}
.tiers b{font-size:1rem;font-weight:700}
.tiers span{font-size:.75rem;color:var(--muted)}
.tiers li.on{border-color:var(--blue-d);background:#e8f5fc}
.tiers li.on b{color:var(--blue-d)}
.qty-total.warn{color:#c62828}
.pc-now{transition:color .2s}.pc-chip{padding:.35rem .8rem;border-radius:999px;background:#fff6d8;color:#7a5600;font-size:.8rem;font-weight:600;border:1px solid #ffe08a}
.price-card .summary{font-size:1rem;color:var(--muted);margin:.9rem 0 1.2rem}
.opt{border:0;margin-bottom:1rem}
.opt legend{font-size:.85rem;font-weight:600;margin-bottom:.5rem}
.opts{display:flex;flex-wrap:wrap;gap:.45rem}
.opts label{position:relative}
.opts input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.opts span{display:block;padding:.45rem .9rem;border-radius:12px;border:1.5px solid var(--line);font-size:.9rem;font-weight:500;transition:border-color .2s,background .2s,color .2s}
.opts label:hover span{border-color:var(--night)}
.opts input:checked+span{border-color:var(--blue-d);background:#e8f5fc;color:var(--blue-d);box-shadow:inset 0 0 0 1px var(--blue-d)}
.opts input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.qty{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1rem;margin:.2rem 0 1.2rem}
.qty label{font-size:.85rem;font-weight:600}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.stepper button{width:2.6rem;height:2.6rem;border:0;background:var(--chalk);font:inherit;font-size:1.3rem;cursor:pointer;transition:background .2s}
.stepper button:hover{background:var(--mist)}
.stepper input{width:5rem;height:2.6rem;border:0;text-align:center;font:inherit;font-weight:700;font-size:1.05rem;-moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper input:focus{outline:none;background:#f7fbfe}
.qty-total{font-size:.92rem;font-weight:600;color:var(--blue-d)}
.qty-total:empty{display:none}
.pc-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:.7rem}
.pc-cta .btn{text-align:center;padding:1.05rem 1rem;font-size:1.02rem}
.pc-note{font-size:.85rem;color:var(--muted);margin-top:.8rem;text-align:center}
.btn.wa-btn{background:#25d366;border-color:#25d366;color:#04361a}
.btn.wa-btn:hover{background:#1ebe5a;border-color:#1ebe5a;box-shadow:0 14px 26px -14px rgba(37,211,102,.8)}
.perks{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.perks li{display:flex;gap:.7rem;align-items:center;padding:.8rem .95rem;border-radius:16px;background:#fff;border:1px solid var(--line)}
.perks svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--blue-d);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.perks span{display:grid;font-size:.82rem;color:var(--muted);line-height:1.35}
.perks b{font-size:.92rem;color:var(--night)}
.flow-3{grid-template-columns:repeat(3,1fr)}

/* Sticky quote bar (appears once the quote box scrolls away) */
.buybar{position:fixed;left:50%;bottom:1rem;z-index:25;display:flex;align-items:center;gap:.8rem;width:min(calc(100% - 2rem),620px);padding:.55rem .6rem .55rem .55rem;border-radius:20px;background:rgba(6,17,28,.92);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
  transform:translate(-50%,150%);transition:transform .45s var(--ease)}
.buybar.show{transform:translate(-50%,0)}
.buybar img{width:48px;height:48px;border-radius:12px;background:#fff}
.buybar div{display:grid;flex:1;min-width:0;line-height:1.25}
.buybar b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar span{font-size:.82rem;color:var(--blue-l)}
.bar-on .wa{opacity:0;pointer-events:none}

.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.two>*{min-width:0}
.two .tbl{min-width:0}
.two h3{font-size:1.15rem;margin-bottom:.6rem}
.ticks{list-style:none;display:grid;gap:.6rem}
.ticks li{padding-left:1.6rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:.7rem;height:.7rem;border-radius:3px;background:var(--blue);transform:rotate(45deg)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.tags li{padding:.4rem .9rem;border-radius:999px;background:var(--mist);font-size:.92rem;font-weight:500}
section[id]{scroll-margin-top:6rem}

@media(max-width:900px){
  .facts{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr}
  .pdp{grid-template-columns:minmax(0,1fr);gap:1.5rem}
  .gallery{position:static}
  .flow-3{grid-template-columns:1fr}
  .views{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .views button{flex:0 0 22%;scroll-snap-align:start}
  .design-in{grid-template-columns:1fr;gap:2rem}.design-art{max-width:420px}
  .two{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:520px){
  .flow,.keyfacts,.feat{grid-template-columns:1fr}
  .price-card{padding:1.3rem 1.1rem}
  .pc-price strong{font-size:2.2rem}
  .pc-cta{grid-template-columns:1fr}
  .perks{grid-template-columns:1fr 1fr}
  .wrap{padding:0 1rem}
}