/* A product's page with its pictures beside the buy box (M435, M436, M437, release 1.30.0): the gallery, the buy box,
   What's included, the tabs, help, recently viewed and Why buy here. Every colour comes from the site's tokens. */
.pp{--pp-gold:var(--gold,#E8A23B);--pp-ok:#157F4A;--pp-bad:#D9434B}
.pp-ic{flex:none}
.pp-top{max-width: calc(var(--page-w) + 2 * var(--gutter));margin:0 auto;padding:4px var(--gutter) 10px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"gal box" "inc box";grid-template-rows:auto 1fr;gap:22px 44px;align-items:start}

/* The gallery */
.pp-gal{grid-area:gal;display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px}
.pp-gal:not(:has(.pp-thumbs)){grid-template-columns:minmax(0,1fr)}
.pp-thumbs{display:grid;gap:10px;align-content:start}
.pp-thumbs button{position:relative;display:block;aspect-ratio:1;padding:0;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.75;background:var(--surface,var(--card));cursor:pointer}
.pp-thumbs button.on{border-color:var(--blue);opacity:1}.pp-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pp-thumbs__v{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:color-mix(in oklab,var(--ink) 55%,transparent)}
.pp-main{position:relative;border-radius:var(--r-card,16px);overflow:hidden;aspect-ratio:4/3;border:1px solid var(--border);background:var(--surface,var(--card))}
.pp-shot{margin:0;position:absolute;inset:0}.pp-shot img,.pp-shot video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.pp-shot figcaption{position:absolute;left:12px;bottom:12px;font-size:13px;color:#fff;background:rgba(8,20,50,.5);padding:3px 10px;border-radius:99px}
.pp-shot--art{display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in oklab,var(--blue) 82%,#fff),var(--blue) 55%,color-mix(in oklab,var(--blue) 80%,#000))}
.pp-shot--art svg{width:82%;height:82%}.pp-shot__ic svg{width:120px;height:120px}
.pp-count{position:absolute;right:12px;bottom:12px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(8,20,50,.45);padding:3px 9px;border-radius:99px}
.pp-dots{display:none;gap:6px;justify-content:center;margin-top:10px}.pp-dots i{width:7px;height:7px;border-radius:99px;background:var(--border)}.pp-dots i.on{background:var(--blue);width:18px}

/* The buy box */
.pp-box{grid-area:box;display:grid;gap:16px;min-width:0}
.pp-kick{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.pp-kick a{color:var(--blue);text-decoration:none}
.pp-head{display:flex;gap:14px;align-items:flex-start}
.pp-title{margin:0;flex:1;font:800 clamp(30px,3.4vw,40px)/1.08 var(--font-display);color:var(--ink)}
.pp-save{flex:none;width:44px;height:44px;border-radius:99px;border:1px solid var(--border);display:grid;place-items:center;color:var(--ink);background:var(--card,var(--bg));cursor:pointer}
.pp-save.on{color:var(--pp-bad);border-color:color-mix(in oklab,var(--pp-bad) 40%,var(--border))}.pp-save.on path{fill:currentColor}
.pp-rate{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);text-decoration:none}.pp-rate b{color:var(--ink)}.pp-rate span:last-child{text-decoration:underline;text-underline-offset:3px}
.pp-stars{display:inline-flex;gap:1px;color:var(--pp-gold)}
.pp-lede{margin:0;font-size:16.5px;line-height:1.6;color:var(--muted)}
.pp-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.pp-price small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pp-price b{font:800 32px var(--font-display);color:var(--ink)}.pp-price s{font-size:18px;color:var(--muted)}.pp-price span{font-size:14px;color:var(--muted)}
.pp-price em{font-style:normal;font-size:12.5px;font-weight:800;color:#fff;background:var(--pp-bad);padding:3px 9px;border-radius:99px}
.pp-sub{margin:-8px 0 0;font-size:13.5px;color:var(--muted)}
.pp-ends{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:color-mix(in oklab,var(--pp-bad) 9%,transparent);color:var(--ink);font-size:14.5px}.pp-ends .pp-ic{color:var(--pp-bad)}
.pp-left{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink)}.pp-left__bar{flex:1;max-width:180px;height:6px;border-radius:99px;background:var(--border);overflow:hidden}.pp-left__bar i{display:block;height:100%;background:var(--pp-gold)}
.pp-q > b{display:block;font:800 16px var(--font-display);color:var(--ink)}.pp-q > p{margin:2px 0 0;font-size:14px;color:var(--muted)}
.pp-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.pp-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pp-o{position:relative;display:grid;gap:2px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;background:var(--card,var(--bg));cursor:pointer}
.pp-o input{position:absolute;opacity:0;pointer-events:none}.pp-o:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.pp-o:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.pp-o b{font-size:15px;color:var(--ink)}.pp-o span{font-size:13px;color:var(--muted)}.pp-o strong{font-size:14px;color:var(--ink)}
.pp-o em{position:absolute;top:-9px;right:10px;font-style:normal;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--blue);color:var(--on-blue, #fff)}
.pp-add{border:1px solid var(--border);border-radius:14px;overflow:hidden}.pp-add h3{margin:0;padding:12px 14px;font:800 15px var(--font-display);color:var(--ink);border-bottom:1px solid var(--border);background:var(--surface,var(--card))}
.pp-a{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer}.pp-a+.pp-a{border-top:1px solid var(--border)}
.pp-a input{position:absolute;opacity:0;pointer-events:none}.pp-a > i{width:20px;height:20px;border-radius:6px;border:1.6px solid var(--border);display:grid;place-items:center;flex:none;color:transparent}
.pp-a:has(input:checked) > i{background:var(--blue);border-color:var(--blue);color:var(--on-blue, #fff)}.pp-a:has(input:focus-visible) > i{outline:2px solid var(--blue);outline-offset:2px}
.pp-a__t{flex:1;min-width:0}.pp-a__t b{display:block;font-size:14.5px;color:var(--ink)}.pp-a__t span{font-size:13px;color:var(--muted)}.pp-a__p{font-size:14.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.pp-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.pp-total span{font-size:14px;color:var(--muted)}.pp-total b{font:800 20px var(--font-display);color:var(--ink)}
.pp-then{margin:-12px 0 0;font-size:13.5px;color:var(--muted)}
.pp-go{display:flex;gap:10px}.pp-go .pd__buy{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:8px}
/* Add to basket (M444), beside Order Now. */
.pp-add{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:1.5px solid var(--ink);border-radius:var(--r-btn,10px);background:none;color:var(--ink);font:700 15px var(--font-body);cursor:pointer}
/* How many (M894): the control leads the buy row; on a phone it takes the row above the buttons. */
.pp-go .qty{align-self:stretch;height:auto;min-height:46px}
.pp-box > .qty-left{margin-top:-10px}
@media (max-width:600px){.pp-go:has(.qty){flex-wrap:wrap}.pp-go .qty{flex:1 0 100%}.pp-go .qty input{flex:1}.pp-go .qty button{width:56px}}
.pp-add:hover{background:color-mix(in oklab,var(--ink) 6%,transparent)}
.pp-add:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* What's included, under the pictures */
.pp-inc{grid-area:inc;align-self:start;display:grid;gap:12px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--r-card,16px);background:var(--card,var(--bg))}
.pp-inc h2{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:800 18px var(--font-display);color:var(--ink)}.pp-inc h2 small{font:500 13px var(--font-body);color:var(--muted)}
.pp-inc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.pp-inc li{display:flex;gap:9px;font-size:14.5px;line-height:1.45;color:var(--ink)}.pp-inc li i{flex:none;width:20px;height:20px;margin-top:1px;border-radius:99px;display:grid;place-items:center;background:color-mix(in oklab,var(--pp-ok) 14%,transparent);color:var(--pp-ok)}
.pp-inc li.no{color:var(--muted)}.pp-inc li.no i{background:color-mix(in oklab,var(--muted) 14%,transparent);color:var(--muted)}
.pp-inc__sub{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:10px;border-top:1px solid var(--border)}
.pp-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;color:var(--blue);text-decoration:none}

/* The Order Now bar (M437) */
.pp-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card,var(--bg));border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(8,20,50,.12)}
.pp-bar__in{max-width: calc(var(--page-w) + 2 * var(--gutter));margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;gap:16px}
.pp-bar__t{flex:1;min-width:0}.pp-bar__t b{display:block;font:800 16px var(--font-display);color:var(--ink)}.pp-bar__t span{font-size:13px;color:var(--muted)}
.pp-bar__p{font-size:14px;color:var(--muted);white-space:nowrap}.pp-bar__p b{font:800 18px var(--font-display);color:var(--ink)}
.pp-toast{position:fixed;right:24px;top:96px;z-index:60;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:14px;box-shadow:0 16px 40px rgba(8,15,30,.25)}
.pp-toast a{color:var(--bg);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Under the buy box: the tabs */
.pp-below{max-width: calc(var(--page-w) + 2 * var(--gutter));margin:0 auto;padding:36px var(--gutter) 0}
.pp-tabs{display:flex;gap:28px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.pp-tabs a{padding:12px 0;font:700 15.5px var(--font-display);color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.pp-tabs a[aria-selected="true"]{color:var(--ink);border-color:var(--blue)}.pp-tabs small{font:600 12px var(--font-body);color:var(--muted);margin-left:5px}
.pp-pane{padding:26px 0 10px}.pp-quiet{color:var(--muted);margin:0}.pp-rich{max-width:760px}
.pp-spec{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}.pp-spec h3{margin:0 0 14px;font:800 16px var(--font-display);color:var(--ink)}.pp-spec__n{margin-top:26px!important}
.pp-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.pp-list li{display:flex;gap:10px;font-size:15px;color:var(--ink)}.pp-list .pp-ic{color:var(--blue);margin-top:2px}
.pp-list--no li{color:var(--muted)}.pp-list--no .pp-ic{color:var(--muted)}
.pp-dl{margin:0;border:1px solid var(--border);border-radius:14px;overflow:hidden}.pp-dl div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:11px 16px;font-size:14.5px}
.pp-dl div+div{border-top:1px solid var(--border)}.pp-dl div:nth-child(odd){background:var(--surface,var(--card))}.pp-dl dt{color:var(--muted)}.pp-dl dd{margin:0;color:var(--ink)}
.pp-rv{display:grid;grid-template-columns:300px minmax(0,1fr);gap:36px;align-items:start}
.pp-rv__sum{display:grid;gap:18px}.pp-rv__big{display:flex;align-items:center;gap:14px}.pp-rv__big b{font:800 52px/1 var(--font-display);color:var(--ink)}.pp-rv__big span{font-size:13.5px;color:var(--muted)}
.pp-bars div{display:grid;grid-template-columns:52px minmax(0,1fr) 28px;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);padding:3px 0}
.pp-bars i{display:block;height:8px;border-radius:99px;background:var(--border);overflow:hidden}.pp-bars u{display:block;height:100%;background:var(--pp-gold)}
.pp-r{padding:18px 0;border-top:1px solid var(--border)}.pp-r:first-child{border-top:0;padding-top:0}
.pp-r__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}.pp-r__h b{color:var(--ink)}
.pp-r__v{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;font-weight:700;color:var(--pp-ok)}
.pp-r h4{margin:10px 0 4px;font:800 16px var(--font-display);color:var(--ink)}.pp-r p{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.pp-r__reply{margin-top:12px;padding:12px 14px;border-left:3px solid var(--blue);border-radius:0 10px 10px 0;background:var(--surface,var(--card));font-size:14.5px;color:var(--ink)}.pp-r__reply b{display:block;margin-bottom:4px}
.pp-write,.pp-ask{display:grid;gap:10px;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--surface,var(--card))}
.pp-write > b,.pp-ask h3{margin:0;font:800 17px var(--font-display);color:var(--ink)}.pp-write > span,.pp-ask p{margin:0;font-size:14px;color:var(--muted)}
.pp-ask label{display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}.pp-ask label small{font-weight:500;color:var(--muted)}
.pp-in{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card,var(--bg));color:var(--ink);font:inherit;font-size:15px;box-sizing:border-box}
.pp-rate-in{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:2px;border:0;padding:0;margin:0}.pp-rate-in input{position:absolute;opacity:0}
.pp-rate-in label{cursor:pointer;color:var(--border)}.pp-rate-in label .pp-stars{color:inherit}.pp-rate-in label .pp-stars svg:not(:first-child){display:none}
.pp-rate-in label:hover,.pp-rate-in label:hover ~ label,.pp-rate-in input:checked ~ label{color:var(--pp-gold)}.pp-rate-in input:focus-visible + label{outline:2px solid var(--blue);border-radius:4px}
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:var(--r-btn,10px);border:1.5px solid var(--ink);background:none;color:var(--ink);font-family:inherit;font-weight:800;font-size:14.5px;cursor:pointer;justify-self:start}
.pp-btn--go{border-color:transparent;background:var(--gold-grad,var(--gold));color:var(--on-gold,#142036)}
.pp-msg{font-size:13.5px;color:var(--muted)}.pp-msg.ok{color:var(--pp-ok)}.pp-msg.bad{color:var(--pp-bad)}
.pp-hp,.pp-sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pp-qa{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.pp-qi{padding:16px 0;border-top:1px solid var(--border)}.pp-qi:first-child{border-top:0;padding-top:0}.pp-qi > div{display:flex;gap:12px;font-size:15px;color:var(--ink);line-height:1.55}
.pp-qi > div > span:first-child{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-weight:800;font-size:13px;background:color-mix(in oklab,var(--blue) 12%,transparent);color:var(--blue)}
.pp-qi__a{margin-top:8px}.pp-qi__a > span:first-child{background:color-mix(in oklab,var(--pp-ok) 14%,transparent)!important;color:var(--pp-ok)!important}.pp-qi small{display:block;margin:8px 0 0 36px;color:var(--muted);font-size:13px}

/* Help, recently viewed and Why buy here */
.pp-sec{max-width: calc(var(--page-w) + 2 * var(--gutter));margin:0 auto;padding:40px var(--gutter) 0}
.pp-help h2,.pp-seen h2{margin:0 0 6px;font:800 24px var(--font-display);color:var(--ink)}.pp-help h2{margin-bottom:16px}.pp-seen h2{margin-bottom:16px}
.pp-help__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pp-tile{display:grid;gap:6px;align-content:start;padding:18px;border:1px solid var(--border);border-radius:16px;background:var(--card,var(--bg));text-decoration:none;color:var(--ink)}
.pp-tile__i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:color-mix(in oklab,var(--blue) 12%,transparent);color:var(--blue);margin-bottom:4px}
.pp-tile b{font:800 16px var(--font-display)}.pp-tile > span:not(.pp-tile__i){font-size:14px;color:var(--muted);line-height:1.5}.pp-tile em{font-style:normal;display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--blue);margin-top:4px}
.pp-seen__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pp-card{display:grid;gap:4px;text-decoration:none;color:var(--ink)}.pp-card .p{aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface,var(--card));margin-bottom:6px;display:grid;place-items:center}
.pp-card .p img{width:100%;height:100%;object-fit:cover}.pp-card b{font-size:15px}.pp-card span{font-size:13.5px;color:var(--muted)}
.cms-sec:has(> .pp-why){padding-left:0;padding-right:0;padding-bottom:0}
.pp-why{margin:48px 0 0;padding:28px 0;border-top:1px solid var(--border);background:var(--surface,var(--card))}
.pp-why__g{max-width: calc(var(--page-w) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pp-why__g > div{display:flex;gap:12px;align-items:flex-start}.pp-why__i{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex:none;background:color-mix(in oklab,var(--blue) 12%,transparent);color:var(--blue)}
.pp-why b{display:block;font:800 15px var(--font-display);color:var(--ink)}.pp-why span span{font-size:13.5px;color:var(--muted)}.pp-why a{color:var(--blue);text-decoration:none;font-weight:600}.pp-why a:hover{text-decoration:underline}

@media (max-width:900px){
  .pp-top{grid-template-columns:minmax(0,1fr);grid-template-areas:"gal" "box" "inc";gap:22px;padding:18px 16px 10px}
  .pp-gal{grid-template-columns:minmax(0,1fr)}.pp-thumbs{display:none}.pp-dots{display:flex}
  .pp-opts,.pp-opts--2{grid-template-columns:minmax(0,1fr)}.pp-inc ul{grid-template-columns:minmax(0,1fr)}
  .pp-below,.pp-sec{padding-left:16px;padding-right:16px}.pp-tabs{gap:20px}
  .pp-spec,.pp-rv,.pp-qa{grid-template-columns:minmax(0,1fr)}.pp-dl div{grid-template-columns:120px minmax(0,1fr)}
  .pp-help__g,.pp-seen__g,.pp-why__g{grid-template-columns:repeat(2,minmax(0,1fr))}.pp-why__g{padding:0 16px}
  .pp-bar__in{padding:10px 16px}.pp-bar__t{display:none}.pp-bar__p{flex:1}
  .pp-toast{left:16px;right:16px;top:auto;bottom:16px}
}
@media (max-width:560px){.pp-why__g,.pp-help__g{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (prefers-reduced-motion:reduce){.pp *{scroll-behavior:auto!important}}