/* Prostringer — brand styles matched to the live site */
:root{
  --blue:#0099CC; --blue-dark:#007AA3; --orange:#E98B4E; --orange-dark:#D3742F;
  --panel:#F2F2F2; --bar:#E8E8E8; --ink:#333; --black:#1A1A1A; --mute:#8C8C8C;
  --line:#DBDBDB; --red:#C0392B; --tick:#E6F5FB;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;color:var(--ink);background:#fff}
a{color:var(--blue)} .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
.btn{display:inline-block;border:none;border-radius:6px;padding:12px 20px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;text-align:center}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-dark)}
.btn-orange{background:var(--orange);color:#fff}.btn-orange:hover{background:var(--orange-dark)}
.btn-plain{background:#fff;border:1px solid var(--line);color:var(--ink)}
.btn[disabled]{background:var(--line);color:#999;cursor:not-allowed}
header.site{position:sticky;top:0;z-index:40;background:#fff;box-shadow:0 1px 0 var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;flex-wrap:wrap}
.logo{background:var(--blue);color:#fff;font-weight:800;padding:10px 16px;border-radius:6px;font-size:17px;text-decoration:none;letter-spacing:.2px}
nav.main a{margin:0 6px;font-weight:600;text-decoration:none;font-size:15px}
.trust{background:var(--bar);padding:9px 16px;text-align:center;font-size:14px;font-weight:500}
.trust span{margin:0 14px;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}

/* Address confirmation. Hidden until an address has been chosen, so the form
   presents one box and one action rather than four boxes to fill in. Once it is
   filled it reads as a result — muted, with the fields still editable for the
   rare address the lookup gets wrong. */
.addr-confirm{max-height:0;opacity:0;overflow:hidden;transition:max-height .28s ease,opacity .2s ease,margin .28s ease;margin-top:0}
.addr-confirm.on{max-height:220px;opacity:1;margin-top:14px}
.addr-confirm .f{color:var(--mute)}
.addr-confirm input{background:#FAFAFA}
.addr-note{font-size:12.5px;color:var(--mute);margin:8px 0 0}
/* Sized in em so the icons scale with the strip's own type rather than being
   pinned to a pixel size that stops matching if the text ever changes. */
.trust .ti{width:1.25em;height:1.25em;flex:0 0 auto;opacity:.7;stroke:currentColor}

h1.brand{color:var(--blue);font-weight:600;font-size:clamp(1.9rem,5vw,3rem);margin:24px 0 4px}
.sub{color:var(--mute);font-size:clamp(1.05rem,3vw,1.4rem);margin:0 0 16px}
h2.brand{color:var(--blue);font-weight:600}
.card{background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.06);padding:20px;margin:16px 0}
.panel{background:var(--panel);border-radius:8px;padding:20px}
.stepnum{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--black);color:#fff;font-weight:700;align-items:center;justify-content:center;margin-right:8px;font-size:14px}
.opt{display:flex;align-items:flex-start;gap:10px;border:2px solid var(--line);border-radius:6px;padding:12px;margin:8px 0;cursor:pointer;font-size:15px}
.opt input{margin-top:3px}
.opt.on{border-color:var(--blue);background:var(--tick)}
.opt.oos{opacity:.55;cursor:not-allowed}
.opt .price{margin-left:auto;font-weight:700;white-space:nowrap}
.tag{background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle}
.tag.oos{background:var(--red)}
.sports{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sports button{padding:14px 6px;border:2px solid var(--line);border-radius:6px;background:var(--panel);font-weight:700;font-size:14px;cursor:pointer}
.sports button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sports .ic{display:block;font-size:22px;margin-bottom:4px;line-height:0}
.sports .ic-on{display:none}
.sports button.on .ic-off{display:none}
.sports button.on .ic-on{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{border:2px solid var(--line);background:#fff;border-radius:6px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer}
.chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.slider{background:var(--panel);border-radius:6px;padding:12px;margin-top:10px}
.slider input[type=range]{width:100%;accent-color:var(--blue)}
.srow{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}
.summary{background:var(--black);color:#fff;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-radius:0 0 8px 8px}
.summary .d{font-size:14px;color:rgba(255,255,255,.75)}
select,input[type=text],input[type=email],input[type=password],input[type=tel]{width:100%;padding:11px;border:1px solid var(--line);border-radius:6px;font-size:15px;background:#fff}
label.f{display:block;font-size:12px;font-weight:700;color:var(--mute);margin:10px 0 4px;text-transform:uppercase}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.flash{background:var(--tick);border:1px solid var(--blue);border-radius:6px;padding:10px 14px;margin:12px 0;font-size:14px;font-weight:600}
.flash.err{background:#FDF0EC;border-color:var(--red)}
.bline{display:flex;justify-content:space-between;gap:10px;font-size:15px;padding:6px 0}
.total{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-weight:800;font-size:17px}
.pointsbox{background:var(--panel);border-radius:6px;padding:9px 12px;font-size:13px;font-weight:600;margin:10px 0}
.ledger{background:var(--blue);color:#fff;border-radius:8px;padding:20px;margin:16px 0}
.ledger .n{font-size:38px;font-weight:800}
.meter{height:8px;background:rgba(255,255,255,.25);border-radius:99px;margin-top:10px}
.meter div{height:8px;background:var(--orange);border-radius:99px}
.steps4{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}
@media(min-width:800px){.steps4{grid-template-columns:repeat(4,1fr)}}
.cols{display:grid;gap:20px}
@media(min-width:900px){.cols{grid-template-columns:3fr 2fr}.sticky{position:sticky;top:84px}}
footer.site{background:var(--black);color:rgba(255,255,255,.8);margin-top:60px;padding:36px 16px;font-size:14px}
footer.site .cols3{max-width:1000px;margin:0 auto;display:grid;gap:20px}
@media(min-width:700px){footer.site .cols3{grid-template-columns:repeat(3,1fr)}}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.tabs a{border:1px solid var(--line);border-radius:6px;padding:9px 14px;font-weight:700;font-size:14px;text-decoration:none;color:var(--ink);background:#fff}
.tabs a.on{background:var(--blue);border-color:var(--blue);color:#fff}
#paypal-buttons,#applepay-btn,#googlepay-btn{margin:8px 0}
apple-pay-button{--apple-pay-button-width:100%;--apple-pay-button-height:44px;--apple-pay-button-border-radius:6px;display:block}
.hide{display:none}

/* Payment processing overlay */
#pay-overlay{position:fixed;inset:0;background:rgba(255,255,255,.94);z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
#pay-overlay .spin{width:56px;height:56px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--blue);animation:ps-spin .9s linear infinite}
#pay-overlay h2{color:var(--blue);margin:18px 0 6px;font-weight:600}
#pay-overlay p{color:var(--mute);margin:0;font-size:14px}
#pay-overlay .lock{margin-top:14px;font-size:12px;color:var(--mute)}
@keyframes ps-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#pay-overlay .spin{animation:none;border-top-color:var(--line);}#pay-overlay .spin::after{content:"⏳"}}

/* ===== Premium header & slide-out menu (v4) ===== */
header.site{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:nowrap}
.menu-btn{background:none;border:none;padding:8px;border-radius:8px;color:var(--ink);display:flex;align-items:center}
.menu-btn:hover{background:var(--panel)}
header.site .logo{white-space:nowrap;font-size:15px;padding:9px 13px}
.dnav{display:none;align-items:center;gap:2px;margin-left:auto}
.dnav a{color:var(--blue);font-weight:600;text-decoration:none;font-size:15px;padding:9px 11px;border-radius:6px}
.dnav a:hover{background:var(--tick)}
.dnav a.btn{color:#fff;margin-left:6px}
.hdr-actions{display:flex;align-items:center;gap:2px;margin-left:auto}
.dnav + .hdr-actions{margin-left:6px}
.icon-link{position:relative;display:flex;padding:9px;border-radius:8px;color:var(--ink)}
.icon-link:hover{background:var(--panel)}
.bcount{position:absolute;top:2px;right:0;background:var(--orange);color:#fff;font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
.maccount{color:#1A1A1A}
.maccount .acct-tick{position:absolute;top:3px;right:2px;width:14px;height:14px;background:#3DAE5A;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.maccount .acct-tick svg{width:9px;height:9px}
.dnav-hi{color:var(--blue);font-weight:700}
@media(min-width:900px){
  .menu-btn{display:none}
  .dnav{display:flex}
  /* .maccount now shows on desktop too, next to basket, for consistency */
  header.site{padding:10px 20px}
  header.site .logo{font-size:17px}
}

/* Slide-out panel */
body.no-scroll{overflow:hidden}
.mnav{position:fixed;inset:0;z-index:90;visibility:hidden;transition:visibility 0s .32s}
.mnav.open{visibility:visible;transition:none}
.mnav-backdrop{position:absolute;inset:0;background:rgba(20,30,40,.45);opacity:0;transition:opacity .3s}
.mnav.open .mnav-backdrop{opacity:1}
.mnav-panel{position:absolute;top:0;left:0;bottom:0;width:min(400px,92vw);background:#fff;display:flex;flex-direction:column;transform:translateX(-102%);transition:transform .32s cubic-bezier(.32,.72,.28,1);box-shadow:4px 0 30px rgba(0,0,0,.14);overflow-y:auto;overscroll-behavior:contain}
.mnav.open .mnav-panel{transform:translateX(0)}
.mnav-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.mnav-rows{padding:10px 8px;flex:1}
.mrow{display:flex;align-items:center;gap:16px;padding:16px 14px;text-decoration:none;color:var(--ink);border-radius:10px;font-weight:700;font-size:17px;letter-spacing:.2px}
.mrow:hover,.mrow:focus-visible{background:var(--tick)}
.mrow:active{background:var(--tick);transform:scale(.99)}
.mico{color:var(--blue);display:flex;flex-shrink:0}
.mlabel{flex:1;display:flex;align-items:center;gap:8px}
.mchev{color:var(--mute);display:flex}
.mcount{background:var(--orange);color:#fff;font-size:12px;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.mjoin{margin:8px 16px 20px;background:var(--panel);border-radius:12px;padding:18px}
.mjoin h2{margin:0 0 6px;font-size:18px}
.mjoin p{margin:0 0 12px;color:var(--mute);font-size:14px;line-height:1.45}
.mjoin .btn{display:block;text-align:center}
@media(prefers-reduced-motion:reduce){.mnav-panel,.mnav-backdrop{transition:none}}

/* Trust bar: rotate one message at a time on small screens */
@media(max-width:640px){
  .trust{position:relative;height:38px;padding:0;overflow:hidden}
  .trust span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;opacity:0;animation:trustfade 12s infinite}
  .trust span:nth-child(2){animation-delay:4s}
  .trust span:nth-child(3){animation-delay:8s}
  @keyframes trustfade{0%,33.3%,100%{opacity:0}5%,28%{opacity:1}}
  @media(prefers-reduced-motion:reduce){
    .trust span{animation:none}
    .trust span:first-child{opacity:1}
  }
}

/* ===== FAQ / Help Centre (v5) ===== */
.faqwrap{max-width:680px;margin:0 auto;padding:8px 16px 40px}
.crumb{font-size:13px;font-weight:800;letter-spacing:1px;color:var(--blue);margin:18px 0 6px}
.crumb a{text-decoration:none}
.crumb span{color:var(--mute)}
.faqwrap h1{text-align:center;font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.15;margin:18px 0 26px}
.fcat{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.05);margin:0 0 20px;overflow:hidden}
.fcat h2{color:var(--blue);font-size:17px;margin:0;padding:18px 20px 14px}
.fcat details{border-top:1px solid var(--line)}
.fcat summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;font-weight:600;font-size:16px;cursor:pointer;list-style:none}
.fcat summary::-webkit-details-marker{display:none}
.fcat summary:hover{background:#FAFCFE}
.fchev{color:var(--mute);flex-shrink:0;transition:transform .25s}
.fcat details[open] .fchev{transform:rotate(180deg)}
.fcat details[open] summary{color:var(--blue-dark)}
.fans{padding:0 20px 18px;color:#555;font-size:15px;line-height:1.6}
.fans a{font-weight:600}
.fstill{text-align:center;margin-top:36px}
.fstill h2{font-size:22px}
@media(prefers-reduced-motion:reduce){.fchev{transition:none}}

/* ===== Footer v2 — Mous-style on brand blue (v6) ===== */
footer.site2{background:var(--blue);color:#fff;margin-top:60px;padding:34px 20px 26px}
.fsocial{display:flex;justify-content:center;gap:22px;margin-bottom:26px}
.fsocial a{color:#fff;opacity:.92;display:flex;padding:6px}
.fsocial a:hover{opacity:1;transform:translateY(-1px)}
.fsecs{max-width:1000px;margin:0 auto}
.fsec{border-top:1px solid rgba(255,255,255,.35)}
.fhead{width:100%;background:none;border:none;color:#fff;font-weight:700;font-size:17px;display:flex;justify-content:space-between;align-items:center;padding:18px 2px;text-align:left;font-family:inherit}
.fcv{transition:transform .25s}
.fsec.open .fcv{transform:rotate(180deg)}
.fbody{display:none;padding:0 2px 16px}
.fsec.open .fbody{display:block}
.fbody a{display:block;color:rgba(255,255,255,.92);text-decoration:none;font-size:15px;padding:8px 0}
.fbody a:hover{color:#fff;text-decoration:underline}
.fpay{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:28px auto 0;max-width:520px;border-top:1px solid rgba(255,255,255,.35);padding-top:26px}
.pay{background:#fff;border-radius:6px;height:30px;min-width:52px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#1A1A1A;letter-spacing:.3px}
.pay.pv{color:#1A1F71;font-style:italic}
.pay.pa{background:#2E77BC;color:#fff}
.pay.pp{color:#003087}.pay.pp i{color:#009CDE;font-style:italic}
.pay.pb{font-weight:600}
.pay.pg{color:#5F6368;font-weight:600}
.fbase{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:24px;font-size:13px;color:rgba(255,255,255,.85)}
@media(min-width:900px){
  .fsecs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .fsec{border-top:none}
  .fhead{pointer-events:none;padding:0 0 10px}
  .fcv{display:none}
  .fbody{display:block;padding:0}
  .fbase{flex-direction:row;justify-content:space-between;max-width:1000px;margin:30px auto 0}
}
@media(prefers-reduced-motion:reduce){.fcv{transition:none}.fsocial a:hover{transform:none}}

/* Footer desktop centring fix (v7): columns sized to content, group centred */
@media(min-width:900px){
  .fsecs{grid-template-columns:repeat(3,max-content);justify-content:center;column-gap:clamp(48px,9vw,120px)}
  .fbase{max-width:640px;justify-content:center;gap:28px}
}

/* ===== Reasons to restring with us (v10) ===== */
.reasons{background:var(--panel);margin-top:60px;padding:40px 20px}
footer.site2{margin-top:0}
.rwrap{max-width:1000px;margin:0 auto}
.reasons h2{color:var(--blue);font-weight:600;font-size:clamp(1.4rem,4vw,1.8rem);text-align:center;margin:0 0 28px}
.rgrid{display:grid;gap:26px;grid-template-columns:1fr}
.ritem{display:flex;gap:16px;align-items:flex-start}
.rico{color:var(--blue);flex-shrink:0;background:#fff;border-radius:12px;width:54px;height:54px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.ritem h3{margin:2px 0 6px;font-size:17px;color:var(--ink)}
.ritem p{margin:0;color:var(--mute);font-size:14px;line-height:1.55}
@media(min-width:700px){.rgrid{grid-template-columns:1fr 1fr;gap:30px 40px}}
@media(min-width:1000px){.rgrid{grid-template-columns:1fr 1fr 1fr}}

/* Referral scheme (v11) */
.refbanner{background:var(--blue);color:#fff;text-align:center;font-size:14px;padding:9px 14px}

/* Postcode assist (v12) */
.pc-wrap{position:relative}
.pc-wrap .pc-mark{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-weight:800;pointer-events:none}
.pc-mark.ok{color:#2E8B57}.pc-mark.bad{color:var(--red)}.pc-mark.busy{color:var(--mute)}
input.pc-ok{border-color:#2E8B57!important}
input.pc-bad{border-color:var(--red)!important}

/* Address type-ahead dropdown (v13) */
.ta-wrap{position:relative}
.ta-list{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:0 0 8px 8px;box-shadow:0 8px 20px rgba(0,0,0,.12);z-index:30;max-height:260px;overflow-y:auto}
.ta-item{padding:11px 14px;font-size:14px;cursor:pointer;border-top:1px solid var(--panel)}
.ta-item:hover,.ta-item.on{background:var(--tick)}

/* Footer logo lockup (v14) */
.flogo{display:flex;align-items:center;justify-content:center;gap:18px;margin:30px auto 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.35);max-width:520px}
.flogo img{width:64px;height:auto;flex-shrink:0}
.flogo-n{font-weight:800;font-size:19px;letter-spacing:1px;color:#fff}
.flogo-s{font-size:12.5px;letter-spacing:.5px;color:rgba(255,255,255,.85);margin-top:3px}
.fpay{border-top:none;padding-top:18px}
@media(min-width:900px){.flogo img{width:84px}.flogo-n{font-size:23px}.flogo-s{font-size:14px}}

/* Empty states & back links (v16) */
.empty{text-align:center;max-width:420px;margin:40px auto;padding:36px 24px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.empty-ico{display:inline-flex;width:84px;height:84px;border-radius:50%;background:var(--tick);color:var(--blue);align-items:center;justify-content:center;margin-bottom:14px}
.empty h2{margin:0 0 8px;font-size:22px}
.empty p{color:var(--mute);font-size:14.5px;line-height:1.55;margin:0 0 18px}
.empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.empty-actions .btn{min-width:150px}
.backlink{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;color:var(--blue);text-decoration:none;padding:8px 14px 8px 10px;border:1px solid var(--line);border-radius:99px;background:#fff;transition:background .15s,border-color .15s}
.backlink:hover{background:var(--tick);border-color:var(--blue)}

/* ===== Basket v2: unified layout + upsells (v17) ===== */
.bk-grid{display:grid;gap:20px;margin-top:6px}
@media(min-width:900px){.bk-grid{grid-template-columns:3fr 2fr;align-items:start}}
.bk-card{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);overflow:hidden}
.bk-item{display:flex;gap:14px;padding:18px;align-items:flex-start}
.bk-item + .bk-item{border-top:1px solid var(--panel)}
.bk-ico{flex-shrink:0;width:48px;height:48px;border-radius:12px;background:var(--tick);color:var(--blue);display:flex;align-items:center;justify-content:center}
.bk-info{flex:1;min-width:0}
.bk-title{font-weight:700;font-size:15px}
.bk-save{background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;margin-left:6px;vertical-align:middle}
.bk-meta{color:var(--mute);font-size:13.5px;margin-top:2px;line-height:1.45}
.bk-remove-f{margin:6px 0 0}
.bk-remove{background:none;border:none;color:var(--mute);font-size:12.5px;font-weight:600;padding:0;text-decoration:underline;cursor:pointer}
.bk-remove:hover{color:var(--red)}
.bk-price{font-weight:800;font-size:15px;white-space:nowrap}
.up-block{margin-top:22px}
.up-block h2{font-size:17px;margin:0 0 10px;color:var(--ink)}
.up-hero{display:flex;align-items:center;gap:14px;background:var(--blue);color:#fff;border-radius:14px;padding:16px 18px;text-decoration:none;margin-bottom:12px;transition:background .15s}
.up-hero:hover{background:var(--blue-dark)}
.up-hero-ico{flex-shrink:0}
.up-hero-t{flex:1;font-size:15px;line-height:1.35}
.up-hero-t span{font-size:13px;color:rgba(255,255,255,.85)}
.up-hero-cta{font-weight:800;white-space:nowrap}
.up-scroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.up-card{flex:0 0 190px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;margin:0}
.up-name{font-weight:600;font-size:13.5px;line-height:1.35;flex:1}
.up-foot{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:14px}
.up-add{background:var(--blue);color:#fff;border:none;border-radius:99px;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer}
.up-add:hover{background:var(--blue-dark)}
.bk-summary{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.05);padding:20px;position:sticky;top:84px}
.bk-summary h2{margin:0 0 12px;font-size:18px}
.bk-line{display:flex;justify-content:space-between;font-size:14.5px;padding:5px 0}
.bk-dim{color:var(--mute)}
.bk-total{display:flex;justify-content:space-between;font-weight:800;font-size:17px;border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.pts-banner{display:flex;gap:10px;align-items:flex-start;background:var(--tick);border-radius:10px;padding:12px;margin:14px 0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.pts-banner svg{flex-shrink:0;color:var(--blue);margin-top:1px}
.pts-guest{background:#FFF6EC}
.pts-guest svg{color:var(--orange)}
.pts-banner a{font-weight:700}
.bk-checkout{display:block;width:100%;text-align:center;font-size:16px;padding:14px}
.bk-paylogos{display:flex;justify-content:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.bk-paylogos .pay{height:24px;min-width:40px;font-size:11px;padding:0 8px}
.bk-secure{text-align:center;color:var(--mute);font-size:12px;margin-top:10px}
.lastchance{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border:1px dashed var(--line);border-radius:12px;padding:12px 14px}
.lc-label{font-weight:700;font-size:13.5px;color:var(--mute)}
.lc-form{margin:0}
.lc-chip{display:inline-block;background:var(--tick);color:var(--blue-dark);border:1px solid transparent;border-radius:99px;padding:8px 13px;font-weight:700;font-size:13px;text-decoration:none;cursor:pointer}
.lc-chip:hover{border-color:var(--blue)}

/* Mobile overflow fix (v18): grid children may shrink; scroller stays contained */
.bk-grid > *{min-width:0}
.up-scroll{max-width:100%}
html{overflow-x:clip}

/* ===== Order form v2 (v19) ===== */
.summary{background:var(--blue)}
.summary .sl{font-size:14px;font-weight:600;margin:2px 0}
.summary .sl .dim,.summary .sl.dim{color:rgba(255,255,255,.8);font-weight:500}
.sports button{text-transform:uppercase;letter-spacing:.6px}
section[id],h2[id],div[id="how"],div[id="order"]{scroll-margin-top:92px}
#how,#order{scroll-margin-top:92px}
.r2-toggle{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--tick);border:1.5px dashed var(--blue);color:var(--blue-dark);font-weight:800;font-size:15px;border-radius:12px;padding:14px;cursor:pointer;font-family:inherit;transition:background .15s}
.r2-toggle:hover{background:#D9EEF8}
.r2-head{background:var(--orange);color:#fff;font-weight:700;font-size:14px;padding:8px 20px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.r2-head button{background:none;border:none;color:#fff;text-decoration:underline;font-size:12.5px;cursor:pointer;font-family:inherit}
.bk-edit{color:var(--blue);font-weight:600;font-size:12.5px;text-decoration:underline;margin-right:12px}
.bk-edit:hover{color:var(--blue-dark)}
.up-sub{color:var(--mute);font-size:13px;margin:-6px 0 12px}

/* Racket 2 remove pill + checkout points banner (v20) */
.r2-head button{background:rgba(255,255,255,.18);border:none;color:#fff;border-radius:99px;padding:7px 13px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:background .15s}
.r2-head button:hover{background:rgba(255,255,255,.32)}

/* ===== Door 2 Door (v21) ===== */
.svc-d2d{border:2px solid var(--blue);position:relative}
.svc-d2d.on{background:var(--tick)}
.d2d-badge{background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:10px;vertical-align:middle}
.d2d-slots{display:none;gap:12px;margin-top:12px;flex-wrap:wrap;position:relative}
.opt.on .d2d-slots{display:flex}
.d2d-slot{flex:1;min-width:170px}
.d2d-slot select{width:100%}
.d2d-teaser{border:1.5px dashed var(--blue);border-radius:12px;padding:14px 16px;font-size:14px;margin-top:10px;background:#FBFDFF}
.d2d-check{display:inline-flex;gap:8px;margin:8px 8px 0 0;vertical-align:middle}
.d2d-check input{width:130px;text-transform:uppercase}
#d2d-msg{display:inline-block;margin-top:8px;font-weight:600;font-size:13px;color:var(--blue-dark)}

.howtabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.howtabs button{border:1px solid var(--line);background:#fff;border-radius:99px;padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
.howtabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.howpane{display:none}
.howpane.on{display:block}

/* ===== Postcode-first homepage (v22) ===== */
body{overflow-x:clip}
.trust{background:#fff;border-bottom:1px solid var(--line)}

.howtabs button{border-radius:6px}
.steps4>div{min-width:0}

/* Gate spacing, checkout flow order, announcements (v24) */

.cols{display:grid;gap:20px;grid-template-columns:1fr;grid-template-areas:"main" "side" "pay"}
.ck-main{grid-area:main;min-width:0}
.ck-side{grid-area:side;min-width:0}
.ck-pay{grid-area:pay;min-width:0}
@media(min-width:900px){
  .cols{grid-template-columns:3fr 2fr;grid-template-areas:"main side" "pay side";align-items:start}
}
#ck-toast{position:fixed;left:0;right:0;top:0;padding:14px clamp(16px,4vw,40px);font-weight:600;font-size:15px;line-height:1.4;color:#fff;opacity:0;pointer-events:none;transition:opacity .3s;z-index:60;box-shadow:0 6px 22px rgba(0,0,0,.22);text-align:center}
#ck-toast.show{opacity:1;animation:ck-drop .4s ease-out}
@keyframes ck-drop{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
#ck-toast.good{background:var(--blue)}
#ck-toast.warn{background:#B4632A}
@keyframes ck-pulse{0%{box-shadow:0 0 0 0 rgba(0,153,204,.5)}100%{box-shadow:0 0 0 16px rgba(0,153,204,0)}}
#delivery-options.pulse{animation:ck-pulse 1.1s ease-out 2;border-color:var(--blue)}

/* ---------- Where's my racket ---------- */
.trk-form{display:grid;grid-template-columns:1fr;gap:2px 14px;align-items:end}
@media(min-width:700px){.trk-form{grid-template-columns:230px 1fr auto}}
.trk-form .btn{padding:12px 24px;white-space:nowrap;margin-top:10px}
.trk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.trk-ref{font-size:22px;font-weight:800;letter-spacing:.5px}
.trk-meta{color:var(--mute);font-size:13px;margin-top:3px}
.chip{display:inline-block;color:#fff;font-size:12px;font-weight:800;letter-spacing:.3px;border-radius:999px;padding:5px 12px;white-space:nowrap}
.tl{list-style:none;margin:22px 0 8px;padding:0}
.tl li{position:relative;padding:0 0 30px 48px}
.tl li:last-child{padding-bottom:6px}
.tl li::before{content:'';position:absolute;left:16px;top:32px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child::before{display:none}
.tl li.done::before{background:var(--blue)}
.tl .dot{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--line);color:var(--mute);font-weight:800;font-size:13px}
.tl li.done .dot{background:var(--blue);border-color:var(--blue);color:#fff}
.tl li.active .dot{border-color:var(--blue);color:var(--blue);animation:tl-pulse 1.8s ease-out infinite}
@keyframes tl-pulse{0%{box-shadow:0 0 0 0 rgba(0,153,204,.45)}70%{box-shadow:0 0 0 12px rgba(0,153,204,0)}100%{box-shadow:0 0 0 0 rgba(0,153,204,0)}}
.tl .t{font-weight:700;font-size:15px;padding-top:6px}
.tl li.todo .t{color:var(--mute);font-weight:600}
.tl li.active .t{color:var(--blue-dark)}
.tl .s{color:var(--mute);font-size:13px;margin-top:2px;max-width:520px}
.tl .here{display:inline-block;background:var(--blue);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.5px;border-radius:999px;padding:3px 9px;margin-left:8px;vertical-align:2px;animation:tl-pulse 1.8s ease-out infinite}

/* ---------- FAQ service roadmaps ---------- */
.rmap-grid{display:grid;gap:16px;margin-top:14px}
.rmap-svc{min-width:0;border:1px solid var(--line);border-radius:8px;padding:18px 16px;background:#fff;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.rmap-name{font-weight:800;font-size:16px}
.rmap-tag{display:inline-block;max-width:100%;background:var(--tick);color:var(--blue-dark);font-size:10.5px;font-weight:800;letter-spacing:.4px;border-radius:999px;padding:3px 12px;margin:8px 0 14px;line-height:1.6}
@media(min-width:900px){
  .rmap-wide{width:min(1000px,calc(100vw - 40px));margin-left:50%;transform:translateX(-50%)}
  .rmap-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .rmap-svc{display:flex;flex-direction:column;align-items:center}
  .rmap-steps{display:flex;flex-direction:column;flex:1;width:100%}
  .rmap-steps li{flex:1}
}
.rmap-steps{list-style:none;counter-reset:rs;margin:0 auto;padding:0;max-width:340px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.rmap-steps li{counter-increment:rs;position:relative;display:flex;flex-direction:column;justify-content:center;text-align:center;background:var(--tick);color:var(--blue-dark);font-weight:700;font-size:13.5px;line-height:1.35;padding:25px 48px;margin-top:-9px;-webkit-clip-path:polygon(0 0,50% 12px,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px));clip-path:polygon(0 0,50% 12px,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px))}
.rmap-steps li::before{content:counter(rs);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
.rmap-steps li:first-child{margin-top:0;padding-top:16px;-webkit-clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px));clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px))}
.rmap-steps li:last-child{padding-bottom:16px;background:var(--blue);color:#fff;-webkit-clip-path:polygon(0 0,50% 12px,100% 0,100% 100%,0 100%);clip-path:polygon(0 0,50% 12px,100% 0,100% 100%,0 100%)}
.rmap-steps li:last-child::before{background:#fff;color:var(--blue)}

/* ---------- Checkout pay-time validation ---------- */
input.invalid{border-color:var(--red) !important;background:#FFF8F7}

/* ---------- Order form: compact grip/overgrip pick rows ---------- */
.opt.mini{padding:9px 11px;font-size:13.5px;margin:6px 0;align-items:center}
.opt.mini .tag{font-size:10px;padding:2px 7px}

/* ---------- Order form: lifted, blue-washed journey panel ---------- */
#order-form{background:linear-gradient(180deg,#F9FCFE 0%,#EFF7FB 100%);border-color:#C7E3F0;border-top:4px solid var(--blue);box-shadow:0 14px 34px rgba(0,90,125,.13),0 2px 8px rgba(0,90,125,.07)}
#order-form .opt{background:#fff}
#order-form .opt.on{background:var(--blue);border-color:var(--blue);color:#fff}
#order-form .sports button:not(.on){background:#fff}
#order-form .slider{background:#fff;border:1px solid var(--line)}

/* ---------- Checkout: account-or-guest fork ---------- */
.ck-gate .card{margin:10px 0}
.ck-or{display:flex;align-items:center;justify-content:center;gap:14px;max-width:460px;margin:2px auto;color:var(--blue-dark);font-weight:800;font-size:13px;letter-spacing:2.5px}
.ck-or::before,.ck-or::after{content:'';flex:1;height:2px;border-radius:2px;background:#C7D6DE}
.btn-ghost{background:#fff;color:var(--blue-dark);border:2px solid var(--blue);padding:10px 18px}

/* ---------- Checkout: in-place upsell chip states ---------- */
.lc-chip:disabled{cursor:default}
.lc-chip.lc-added{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- D2D popup calendar ---------- */
.d2d-datebtn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink);text-align:left}
.d2d-datebtn:hover{border-color:var(--blue)}
.d2d-datebtn:disabled{color:var(--mute);cursor:default}
.d2d-cal{position:absolute;z-index:55;top:calc(100% + 6px);left:0;width:min(320px,100%);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,90,125,.18);padding:12px;display:block}
.d2d-cal.hide{display:none}
.d2d-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}
.d2d-cal-nav{background:var(--tick);color:var(--blue-dark);border:none;border-radius:6px;width:34px;height:34px;font-size:17px;font-weight:800;cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.d2d-cal-nav:hover:not(:disabled),.d2d-cal-nav:active:not(:disabled){background:var(--blue);color:#fff}
.d2d-cal-nav:disabled{opacity:.35;cursor:default}
.d2d-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.d2d-dow{text-align:center;font-size:10.5px;font-weight:800;color:var(--mute);padding:2px 0}
.d2d-day{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:36px;border-radius:6px;font-size:13px;font-weight:600;border:none;background:none;font-family:inherit;padding:2px 0}
.d2d-day.av{background:var(--tick);color:var(--blue-dark);cursor:pointer}
.d2d-day.av:hover{background:var(--blue);color:#fff}
.d2d-day.av i{font-style:normal;font-size:8.5px;font-weight:800;color:var(--orange-dark);line-height:1.1}
.d2d-day.av:hover i,.d2d-day.on i{color:#fff}
.d2d-day.on{background:var(--blue);color:#fff}
.d2d-day.off{color:#C6C6C6}
.d2d-day.off.we{background:#F7F7F7;color:#BDBDBD}

/* ---------- Checkout same-day cutoff countdown ---------- */
.cutoff{color:var(--orange-dark);font-weight:700;font-size:13.5px;margin:-6px 0 12px}
.cutoff b{font-variant-numeric:tabular-nums}


/* ===== Slim homepage hero strip + inline How-it-works checker (v27) ===== */
.hh-hero{position:relative;overflow:hidden;background:#0B2A3A;display:flex;align-items:flex-end;min-height:clamp(360px,48vh,560px)}
.hh-hero picture,.hh-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;z-index:0}
.hh-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,26,38,.30) 0%,rgba(6,26,38,.60) 55%,rgba(6,26,38,.86) 100%)}
.hh-inner{position:relative;z-index:2;width:100%;max-width:1000px;margin:0 auto;padding:44px 16px 40px;color:#fff}
.hh-inner h1{font-size:clamp(1.95rem,6vw,2.9rem);font-weight:800;letter-spacing:-.5px;margin:0 0 10px}
.hh-inner p{font-size:clamp(1.05rem,3vw,1.35rem);line-height:1.4;margin:0 0 20px;max-width:640px;color:rgba(255,255,255,.94)}
.hh-tools{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hh-check{width:100%;max-width:420px}
.hh-check-l{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.9);margin:0 0 7px}
.hh-check-row{display:flex;gap:8px;max-width:340px}
.hh-check-row input{flex:1;min-width:0;border:1.5px solid rgba(255,255,255,.55);background:rgba(255,255,255,.96);border-radius:6px;padding:11px 12px;font-size:16px;text-transform:uppercase;font-family:inherit}
.hh-check-row input:focus{border-color:#fff;outline:none}
.hh-check-row .btn{padding:11px 20px}
.hh-check-msg{font-size:13px;font-weight:600;color:#fff;margin-top:8px}
.hh-check-msg:empty{margin:0}
.hh-login{display:inline-flex;align-items:center;gap:9px;border:1.5px solid rgba(255,255,255,.5);border-radius:6px;padding:10px 16px;font-weight:700;font-size:14px;color:#fff;text-decoration:none;background:rgba(255,255,255,.08);transition:background .15s}
.hh-login:hover{background:rgba(255,255,255,.18)}
.hh-login svg{color:#fff}
.hh-user{display:flex;align-items:center;gap:12px;padding:9px 14px;border:1.5px solid rgba(255,255,255,.5);border-radius:6px;background:rgba(255,255,255,.08);text-decoration:none;transition:background .15s}
.hh-user:hover{background:rgba(255,255,255,.18)}
.hh-user-cta{font-size:13px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:2px}
.hh-av{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hh-user b{font-size:14.5px;color:#fff}
.hh-user a{font-size:13px;font-weight:700;color:#fff}

/* Next available D2D collection callout (v29) */
.d2d-next{display:flex;align-items:center;gap:9px;background:#E9F5FB;border:1px solid #B7DCF0;color:var(--blue-dark);font-size:14.5px;font-weight:600;padding:10px 14px;border-radius:8px;margin:0 0 14px}
.d2d-next b{font-weight:800}


/* ===== Funnel headings: responsive How-it-works label + attention shimmer (v28) ===== */
.hw-a::after{content:":"}
.hw-b{display:block}
@media(min-width:721px){
  /* Literal em dash, not \2014 — in CSS the space after a hex escape is eaten
     as the escape terminator, so " \2014 " renders as " —" with nothing after it. */
  .hw-a::after{content:" — "}
  .hw-b{display:inline}
}
.shimmer{color:var(--blue)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .shimmer{
    background:linear-gradient(100deg,var(--blue) 0,var(--blue) 42%,#eaf7fe 50%,var(--blue) 58%,var(--blue) 100%);
    background-size:250% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:shimmer 5s ease-in-out infinite;
  }
  .brand.shimmer{color:transparent}
}
@keyframes shimmer{0%{background-position:150% 0}18%{background-position:-50% 0}100%{background-position:-50% 0}}
@media(prefers-reduced-motion:reduce){
  .shimmer{animation:none;-webkit-text-fill-color:currentColor}
  .brand.shimmer{color:var(--blue)}
}

/* Nav logo hover: same-blue ring that visually enlarges the button (v30) */
a.logo{transition:box-shadow .15s ease}
a.logo:hover{box-shadow:0 0 0 3px var(--blue)}

/* ===== Checkout: what-happens-next, consent + policy notice (v31) ===== */
.whatnext{border:1px solid var(--line);border-radius:12px;background:#FBFDFF;padding:18px 20px;margin:18px 0 0}
.whatnext h2{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--blue-dark)}
.whatnext .wn-steps{margin:0;padding-left:20px;display:grid;gap:9px}
.whatnext .wn-steps li{font-size:14px;line-height:1.5;color:var(--ink)}
.whatnext-foot{margin:12px 0 0;font-size:13px;color:var(--mute)}
.ck-optin{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;font-size:13.5px;line-height:1.45;cursor:pointer}
.ck-optin input{width:auto;margin-top:2px;flex-shrink:0}
.ck-terms{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--mute)}
.ck-terms a{color:var(--blue-dark);font-weight:600}

/* Footer legal links, seated in the existing .fbase row (v32) */
.flegal{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.flegal a{color:inherit;text-decoration:none}
.flegal a:hover{color:#fff;text-decoration:underline}

/* Site-wide status banner, e.g. sign-out confirmation (v33) */
.sitebanner{background:#E9F5FB;border-bottom:1px solid #B7DCF0;color:var(--blue-dark);font-weight:600;font-size:14.5px;text-align:center;padding:11px 16px}

/* Close account — deliberately quiet. Collapsed to a single muted line so it is
   findable but never invites itself; the full explanation lives in the confirm
   dialog rather than on the page (v34). */
.closebox{max-width:440px;margin:26px 0 8px}
.closebox summary{list-style:none;cursor:pointer;color:var(--mute);font-size:13px;padding:4px 0;display:inline-block}
.closebox summary::-webkit-details-marker{display:none}
.closebox summary:hover{color:var(--red);text-decoration:underline}
.closebox form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.closebox input[type=password]{flex:1;min-width:170px;font-size:14px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;font-family:inherit}
.closebtn{border:1px solid var(--line);background:#fff;color:var(--red);font-weight:600;font-size:13px;padding:9px 14px;border-radius:6px;cursor:pointer;font-family:inherit}
.closebtn:hover{border-color:var(--red)}

/* Points ledger — lives inside the blue balance panel it explains (v35) */
.ptslog{margin-top:14px;border-top:1px solid rgba(255,255,255,.25);padding-top:10px}
.ptslog summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:7px;padding:2px 0}
.ptslog summary::-webkit-details-marker{display:none}
.ptslog summary::after{content:"\25BE";font-size:11px;transition:transform .15s}
.ptslog[open] summary::after{transform:rotate(180deg)}
.ptslog summary:hover{text-decoration:underline}
.ptslog-scroll{max-height:320px;overflow-y:auto;margin-top:10px;-webkit-overflow-scrolling:touch}
.ptslog table{width:100%;border-collapse:collapse;font-size:13px}
.ptslog th{text-align:left;font-weight:700;font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.75);padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.3);position:sticky;top:0;background:var(--blue)}
.ptslog td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.14);vertical-align:top;line-height:1.35}
.ptslog tr:last-child td{border-bottom:none}
.ptslog .pl-r{text-align:right;white-space:nowrap}
.ptslog .pl-d{white-space:nowrap;color:rgba(255,255,255,.82)}
.ptslog .pl-p{font-weight:800}
.ptslog .pl-p.neg{color:#FFD9CE}
.ptslog .pl-bal{color:rgba(255,255,255,.82)}
.ptslog .pl-ref{display:block;font-size:11.5px;color:rgba(255,255,255,.7);margin-top:2px}
.ptslog-note{margin:10px 0 0;font-size:12px;color:rgba(255,255,255,.75);line-height:1.45}
.ptslog-none{margin:14px 0 0;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);font-size:13px;color:rgba(255,255,255,.85)}
@media(max-width:560px){
  .ptslog .pl-bal{display:none}
  .ptslog td,.ptslog th{padding:8px 5px}
}

/* ===== Checkout: racket journey + share panel (v36) ===== */
.wn-v{display:none}
.wn-v.on{display:block}
.wn-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:0 0 16px}
.wn-eta{font-size:clamp(19px,4.5vw,24px);font-weight:800;color:var(--blue-dark);line-height:1.1}
.wn-eta-l{font-size:13.5px;color:var(--mute)}
.jrny{display:flex;list-style:none;margin:0 0 18px;padding:0}
.jrny li{flex:1;text-align:center;position:relative;padding:0 3px;min-width:0}
.jrny li::after{content:"";position:absolute;top:19px;left:50%;width:100%;height:2px;background:var(--line);z-index:0}
.jrny li:last-child::after{display:none}
.jrny-i{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff}
.jrny-d{display:block;font-weight:800;font-size:13px;margin-top:9px;color:var(--ink)}
.jrny-l{display:block;font-size:11.5px;color:var(--mute);line-height:1.35;margin-top:3px}
.wn-note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute)}
.shareck{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:22px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left}
.shareck-t{font-size:14.5px;font-weight:800;color:var(--ink)}
.shareck-sub{display:block;font-size:12px;font-weight:600;color:var(--blue-dark);margin-top:2px}
.shareck-b{display:inline-flex;gap:9px}
.shareck-b a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--panel);color:var(--mute);text-decoration:none;transition:background .15s,color .15s}
.shareck-b a:hover{background:var(--blue);color:#fff}
@media(max-width:560px){
  .jrny-l{font-size:11px}
  .jrny-i{width:34px;height:34px}
  .jrny li::after{top:17px}
  .shareck{justify-content:center;text-align:center}
}