/** Shopify CDN: Minification failed

Line 21:17 Unexpected "1220"

**/
/* Product page, ported from docs/mockups/pdp.html.
 *
 * GENERATED. Do not edit by hand: run `node tools/build-pdp-css.mjs`.
 *
 * The first block is lifted verbatim in source order, so the cascade is identical
 * by construction rather than hand-resolved. The same selector appears more than
 * once on purpose, and later wins.
 *
 * The responsive band is NOT from the mockup. The mockup draws the phone as a
 * second document; this theme has one DOM at every width. See
 * docs/decisions/2026-08-26-one-dom-responsive.md.
 */

.aps-pdp PDP,
.aps-pdp two columns
   Content width 1220 = .s max-width 1280 minus 30px gutters,
.aps-pdp matching the
   homepage frame exactly so the header and footer do not shift between pages.
   620 + 28 + 572 = 1220. The gallery takes 51% of the row { overflow:clip }
.aps-pdp .pbg { background:var(--aps-ground);padding:14px 0 26px }
.aps-pdp .pw { padding-top:0 }
.aps-pdp .pinfo svg,
.aps-pdp .mpw svg,
.aps-pdp .msec svg,
.aps-pdp .sbar svg,
.aps-pdp .psec svg { fill:none;stroke-linecap:round;
  stroke-linejoin:round;stroke-width:1.7 }
.aps-pdp .gnav svg { stroke-width:2.6 }
.aps-pdp .stars svg { fill:var(--aps-sun)!important;stroke:none!important }
.aps-pdp .crumbs { font-size:12.5px;color:var(--aps-mute);margin:0 0 14px;display:flex;gap:7px;flex-wrap:wrap }
.aps-pdp .crumbs a { color:var(--aps-slate);text-decoration:none }
.aps-pdp .crumbs a:hover { color:var(--aps-brand) }
.aps-pdp .crumbs .sep { color:var(--aps-mute) }
.aps-pdp .crumbs .cur { color:var(--aps-mute) }
.aps-pdp .pdp { display:grid;grid-template-columns:620px 572px;gap:0 28px;align-items:start;
  padding-bottom:8px }
.aps-pdp .pgal { display:grid;grid-template-columns:minmax(0,1fr);gap:12px;position:sticky;top:18px }
.aps-pdp .thumbs { display:flex;flex-direction:row;gap:8px;order:2 }
.aps-pdp .thumbs button { width:72px;height:72px;padding:5px;border:1px solid var(--aps-ctl);border-radius:4px;
  background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  overflow:hidden }
.aps-pdp .thumbs button[aria-current="true"] { border-color:var(--aps-brand);box-shadow:inset 0 0 0 1px var(--aps-brand) }
.aps-pdp .thumbs img { max-width:100%;max-height:100%;width:auto;height:auto;display:block }
.aps-pdp .well { position:relative;height:536px;border:1px solid var(--aps-line);border-radius:4px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:14px;overflow:hidden }
.aps-pdp .well img { max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain }
.aps-pdp .gnav { position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:34px;height:34px;
  border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);
  display:grid;place-items:center;padding:0;
  opacity:0;transition:opacity .15s ease;box-shadow:0 2px 8px rgba(5,42,92,.28) }
.aps-pdp .well:hover .gnav,
.aps-pdp .gnav:focus-visible { opacity:1 }
.aps-pdp .gnav.prev { left:12px }
.aps-pdp .gnav.next { right:12px }
.aps-pdp .gnav svg { width:16px;height:16px;stroke:var(--aps-deep);fill:none;stroke-width:2.6;
  stroke-linecap:round }
.aps-pdp .wchip { position:absolute;top:12px;left:12px;background:var(--aps-deep);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:3px;z-index:2 }
.aps-pdp .brandline { display:flex;align-items:center;gap:10px;margin-bottom:8px }
.aps-pdp .brandline img { height:28px;width:auto;max-width:75px;object-fit:contain;display:block }
.aps-pdp .brandline a { font-size:13px;font-weight:500;color:var(--aps-brand);text-decoration:none }
.aps-pdp .brandline a:hover { text-decoration:underline }
.aps-pdp .brandline a.blogo { display:block;line-height:0 }
.aps-pdp .brandline a.blogo:hover { text-decoration:none }
.aps-pdp h1.pt { margin:0 0 10px;font-size:26px;font-weight:750;letter-spacing:-.024em;line-height:1.2;
  color:var(--aps-ink);text-wrap:balance }
.aps-pdp .meta { display:flex;flex-wrap:wrap;align-items:center;gap:7px 20px;font-size:13px;
  color:var(--aps-slate);margin-bottom:9px }
.aps-pdp .meta .grp { display:flex;align-items:center;gap:7px }
.aps-pdp .stockline { display:flex;flex-wrap:wrap;align-items:center;gap:7px 20px;font-size:13px;
  margin-bottom:15px }
.aps-pdp .stars { display:flex;gap:1.5px;align-items:center }
.aps-pdp .stars svg { width:14px;height:14px;fill:var(--aps-sun);stroke:none }
.aps-pdp .meta a { color:var(--aps-brand);text-decoration:none;font-weight:600 }
.aps-pdp .meta a:hover { text-decoration:underline }
.aps-pdp .meta .n { font-variant-numeric:tabular-nums;font-weight:650;color:var(--aps-ink) }
.aps-pdp .pnv { font-size:13px;font-weight:400;color:var(--aps-slate);letter-spacing:0 }
.aps-pdp .instock { display:flex;align-items:center;gap:6px;font-weight:700;color:var(--aps-green) }
.aps-pdp .instock svg { width:16px;height:16px;stroke:var(--aps-green);stroke-width:2;flex:none }
.aps-pdp .price { display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:16px }
.aps-pdp .price .per { font-size:14px;font-weight:650;color:var(--aps-slate);font-variant-numeric:tabular-nums }
.aps-pdp .price .now { font-size:36px;font-weight:800;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--aps-ink) }
.aps-pdp .price .now sup { font-size:16px;font-weight:700;vertical-align:baseline;position:relative;top:-.8em }
.aps-pdp .price .was { font-size:15px;color:var(--aps-mute);text-decoration:line-through;
  font-variant-numeric:tabular-nums }
.aps-pdp .save { display:inline-block;background:var(--aps-sun);color:var(--aps-deep);font-size:11.5px;font-weight:800;
  letter-spacing:.04em;padding:3px 8px;border-radius:3px }
.aps-pdp .sizes { margin-bottom:16px }
.aps-pdp .sizes .lb { font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aps-mute);margin-bottom:8px }
.aps-pdp .sizes .opts { display:flex;gap:8px }
.aps-pdp .sizes .opt { flex:1;border:1px solid var(--aps-ctl);border-radius:4px;background:#fff;
  padding:9px 10px;cursor:pointer;font:inherit;text-align:left }
.aps-pdp .sizes .opt:hover { border-color:var(--aps-slate) }
.aps-pdp .sizes .opt[aria-checked="true"] { border-color:var(--aps-brand);box-shadow:inset 0 0 0 1px var(--aps-brand);
  background:var(--aps-brand-50) }
.aps-pdp .sizes .opt .sz { display:block;font-size:13.5px;font-weight:700;color:var(--aps-ink);margin-bottom:2px }
.aps-pdp .sizes .opt .pl { display:block;font-size:11.5px;color:var(--aps-slate);font-variant-numeric:tabular-nums;
  line-height:1.35 }
.aps-pdp .qrow { display:flex;gap:10px;margin-bottom:16px }
.aps-pdp .qty { display:flex;align-items:center;border:1px solid var(--aps-ctl);border-radius:4px;overflow:hidden;
  flex:none;background:#fff }
.aps-pdp .qty button { width:40px;height:46px;border:0;background:#fff;cursor:pointer;color:var(--aps-slate);
  font-size:18px;font-weight:600;line-height:1 }
.aps-pdp .qty button:hover { background:var(--aps-surface) }
.aps-pdp .qty span { width:44px;text-align:center;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums }
.aps-pdp .atc { flex:1;height:46px;border:0;border-radius:4px;background:var(--aps-sun);
  color:var(--aps-deep);font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;
  letter-spacing:-.005em }
.aps-pdp .atc:hover { background:var(--aps-star) }
.aps-pdp .sec2 { display:flex;gap:10px }
.aps-pdp .sec2 button { flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;border:1px solid var(--aps-ctl);border-radius:4px;background:#fff;font:inherit;
  font-size:13.5px;font-weight:700;color:var(--aps-ink);cursor:pointer }
.aps-pdp .sec2 button:hover { border-color:var(--aps-brand);color:var(--aps-brand) }
.aps-pdp .sec2 svg { width:16px;height:16px;stroke:currentColor;flex:none }
.aps-pdp .retline { margin:11px 0 0;text-align:center;font-size:12.5px;color:var(--aps-slate) }
.aps-pdp .retline a { color:var(--aps-ink);text-decoration:underline;text-underline-offset:2px;font-weight:650 }
.aps-pdp .ipanel { border:1px solid var(--aps-line);border-radius:5px;background:#fff;padding:16px 18px;
  margin-bottom:10px }
.aps-pdp .ipanel:last-child { margin-bottom:0 }
.aps-pdp .ipanel.buy { padding:18px }
.aps-pdp .deliv { display:flex;gap:11px;align-items:flex-start }
.aps-pdp .deliv svg { width:19px;height:19px;stroke:var(--aps-brand);fill:none;stroke-width:1.7;flex:none;margin-top:1px }
.aps-pdp .deliv .when { font-size:14px;font-weight:750;color:var(--aps-ink);letter-spacing:-.012em;margin-bottom:2px }
.aps-pdp .deliv .when[hidden] { display:none }
.aps-pdp .deliv .when .cdown { font-size:12.5px;font-weight:500;color:var(--aps-slate);letter-spacing:0 }
.aps-pdp .deliv .where { font-size:12.5px;color:var(--aps-slate);line-height:1.45 }
.aps-pdp .deliv .where a { color:var(--aps-brand);text-decoration:none;font-weight:650 }
.aps-pdp .deliv .dbody { min-width:0;flex:1 }
.aps-pdp .deliv-pim .relative { min-height:0 !important }
.aps-pdp .deliv-pim .flex-shrink0 { display:none }
.aps-pdp .deliv-pim .mb-5 { margin-bottom:0 }
.aps-pdp .deliv-pim .flex.mb-5>div:last-child>:not(.body-2) { display:none }
.aps-pdp .deliv-pim .body-2 { font-size:12.5px;color:var(--aps-slate);line-height:1.45 }
.aps-pdp .deliv-pim .body-2+.body-2 { margin-top:1px }
.aps-pdp .deliv-pim .body-2 .font-semibold { font-weight:700;color:var(--aps-ink) }
.aps-pdp .deliv-pim .text-primary-100 { color:var(--aps-brand);font-weight:650;cursor:pointer }
.aps-pdp .deliv-pim .text-primary-100:hover { text-decoration:underline }
.aps-pdp .deliv-pim [hidden] { display:none !important }
.aps-pdp .deliv-pim .tool-tip-section { display:none }
.aps-pdp .deliv-pim .deliv-showhead { display:block !important;font-size:14px;font-weight:750;
  color:var(--aps-ink);letter-spacing:-.012em;margin-bottom:2px }
.aps-pdp .deliv-pim .relative>div+div { margin-top:10px;padding-top:10px;border-top:1px solid var(--aps-line) }
.aps-pdp .ipanel.deliv-pim label { display:block;margin-bottom:5px;font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--aps-mute) }
.aps-pdp .ipanel.deliv-pim input[type=text] { width:104px;border:1px solid var(--aps-ctl);border-radius:4px;
  padding:6px 9px;font:inherit;font-size:13px;color:var(--aps-ink);background:#fff }
.aps-pdp .ipanel.deliv-pim input[type=text]:focus { outline:none;border-color:var(--aps-brand);
  box-shadow:0 0 0 3px var(--aps-brand-50) }
.aps-pdp .ipanel.deliv-pim button { margin-left:7px;border:1px solid var(--aps-brand);border-radius:4px;
  background:var(--aps-brand);color:#fff;font:inherit;font-size:12.5px;font-weight:700;
  padding:7px 13px;cursor:pointer }
.aps-pdp .ipanel.deliv-pim button:hover { background:var(--aps-brand-700);border-color:var(--aps-brand-700) }
.aps-pdp .ov h3 { margin:0 0 9px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--aps-mute) }
.aps-pdp .bullets { margin:0;padding:0;list-style:none }
.aps-pdp .bullets li { position:relative;padding-left:20px;font-size:13.5px;line-height:1.5;
  margin-bottom:7px;color:var(--aps-slate) }
.aps-pdp .bullets li:last-child { margin-bottom:0 }
.aps-pdp .bullets li::before { content:"";position:absolute;left:4px;top:7px;width:6px;height:6px;
  border-radius:999px;background:currentColor }
.aps-pdp .bullets li b { color:var(--aps-ink);font-weight:650 }
.aps-pdp .more { display:inline-block;margin-top:10px;font-size:12.5px;font-weight:650;color:var(--aps-brand);
  text-decoration:none }
.aps-pdp .more:hover { text-decoration:underline }
.aps-pdp .help { display:flex;gap:16px;align-items:flex-start }
.aps-pdp .help .av { width:74px;height:74px;border-radius:999px;background:var(--aps-surface);flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden }
.aps-pdp .help .av svg { width:38px;height:38px;stroke:var(--aps-mute);fill:none;stroke-width:1.5 }
.aps-pdp .help .av.pic { background:none }
.aps-pdp .help .av img { width:100%;height:100%;object-fit:cover;display:block }
.aps-pdp .help .bd { min-width:0;flex:1 }
.aps-pdp .help h3 { margin:0 0 3px;font-size:16px;font-weight:800;letter-spacing:-.018em;color:var(--aps-ink) }
.aps-pdp .help .sub2 { font-size:12.5px;color:var(--aps-slate);margin-bottom:11px }
.aps-pdp .help .btns { display:flex;gap:8px;flex-wrap:wrap }
.aps-pdp .help .btns a { display:inline-flex;align-items:center;gap:7px;border:1px solid var(--aps-ctl);
  border-radius:4px;background:#fff;padding:8px 12px;font-size:12.5px;font-weight:700;
  color:var(--aps-ink);text-decoration:none;white-space:nowrap }
.aps-pdp .help .btns a:hover { border-color:var(--aps-brand);color:var(--aps-brand) }
.aps-pdp .help .btns svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none }
.aps-pdp .psec { background:#fff;border:1px solid var(--aps-line);border-radius:5px;padding:20px 22px;
  margin-bottom:14px }
.aps-pdp .psec > h2 { margin:0 0 4px;font-size:20px;font-weight:800;letter-spacing:-.022em;color:var(--aps-ink) }
.aps-pdp .psec > .sh { margin:0 0 14px;font-size:13px;color:var(--aps-mute);max-width:70ch }
.aps-pdp .psec > h2 + .cols,
.aps-pdp .psec > h2 + .grid4,
.aps-pdp .psec > h2 + .revs { margin-top:13px }
.aps-pdp .cols { display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:32px;align-items:start }
.aps-pdp .rte { font-size:14.5px;line-height:1.6;color:var(--aps-ink) }
.aps-pdp .rte p { margin:0 0 11px }
.aps-pdp .rte h4 { margin:18px 0 7px;font-size:14px;font-weight:750;letter-spacing:-.01em }
.aps-pdp .spec { width:100%;border-collapse:collapse;font-size:13px;border:1px solid var(--aps-line);
  border-radius:5px;overflow:hidden }
.aps-pdp .spec caption { caption-side:top;text-align:left;font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--aps-mute);padding:0 0 8px }
.aps-pdp .spec th { text-align:left;font-weight:600;color:var(--aps-slate);padding:8px 12px;width:47%;
  background:var(--aps-surface);border-bottom:1px solid var(--aps-line);vertical-align:top;font-size:12.5px }
.aps-pdp .spec td { padding:8px 12px;border-bottom:1px solid var(--aps-line);color:var(--aps-ink);font-weight:650 }
.aps-pdp .spec tr:last-child th,
.aps-pdp .spec tr:last-child td { border-bottom:0 }
.aps-pdp .spec td.mono { font-size:13px }
.aps-pdp .fbt-row { display:flex;align-items:stretch;gap:0;margin-bottom:18px }
.aps-pdp .fbt-i.this { flex:none;width:262px }
.aps-pdp .fbt-trackwrap { position:relative;flex:1;min-width:0 }
.aps-pdp .fbt-trackwrap::after { content:"";position:absolute;top:0;bottom:0;right:0;width:72px;z-index:2;
  pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 78%);
  transition:opacity .15s ease }
.aps-pdp .fbt-trackwrap.at-end::after { opacity:0 }
.aps-pdp .fbt-track { display:flex;align-items:stretch;gap:0;overflow-x:auto;
  scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch }
.aps-pdp .fbt-track::-webkit-scrollbar { display:none }
.aps-pdp .fbt-track .fbt-i { flex:none;width:228px;scroll-snap-align:start }
.aps-pdp .fbt-nav { opacity:0 }
.aps-pdp .fbt-trackwrap:hover .fbt-nav,
.aps-pdp .fbt-nav:focus-visible { opacity:1 }
.aps-pdp .fbt-nav.prev { left:6px }
.aps-pdp .fbt-nav.next { right:6px }
.aps-pdp .fbt-nav[disabled] { opacity:0!important;pointer-events:none }
.aps-pdp .fbt-i { flex:1;min-width:0;display:flex;flex-direction:column;padding:0 13px 14px;
  border:1px solid transparent;border-radius:5px }
.aps-pdp .fbt-i.this { background:var(--aps-surface);border-color:var(--aps-line) }
.aps-pdp .fbt-i .cur { margin:0 -13px 11px;padding:7px 12px;background:var(--aps-brand-50);
  border-bottom:1px solid var(--aps-line);border-radius:4px 4px 0 0;text-align:center;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--aps-brand-700) }
.aps-pdp .fbt-i .sel { display:flex;align-items:center;gap:9px;font-size:13px;font-weight:650;
  color:var(--aps-ink);margin:14px 0 11px;cursor:pointer }
.aps-pdp .fbt-i.this .sel { margin-top:0 }
.aps-pdp .fbt-i .sel input { width:16px;height:16px;accent-color:var(--aps-brand);margin:0;flex:none }
.aps-pdp .fbt-i .im2 { height:152px;display:flex;align-items:center;justify-content:center;margin-bottom:12px }
.aps-pdp .fbt-i .im2 img { max-width:100%;max-height:100%;width:auto;height:auto }
.aps-pdp .fbt-i .br2 { font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--aps-slate);margin-bottom:4px }
.aps-pdp .fbt-i h4 { margin:0 0 10px;font-size:13px;font-weight:600;line-height:1.4;color:var(--aps-ink);
  min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden }
.aps-pdp .fbt-i .pp2 { margin-top:auto;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--aps-ink);
  font-variant-numeric:tabular-nums }
.aps-pdp .fbt-i .pp2 sup { font-size:10px;font-weight:700;vertical-align:baseline;position:relative;top:-.64em }
.aps-pdp .fbt-i.off { opacity:.45 }
.aps-pdp .fbt-plus { flex:none;width:42px;display:flex;align-items:center;justify-content:center;
  color:var(--aps-mute);font-size:22px;font-weight:500;line-height:1;margin-top:-32px }
.aps-pdp .fbt-foot { display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  border-top:1px solid var(--aps-line);padding-top:16px }
.aps-pdp .fbt-foot .sub3 { font-size:14px;color:var(--aps-slate);display:flex;align-items:baseline;gap:9px }
.aps-pdp .fbt-foot .sub3 b { font-size:26px;font-weight:800;letter-spacing:-.035em;color:var(--aps-ink);
  font-variant-numeric:tabular-nums }
.aps-pdp .fbt-foot .sub3 b sup { font-size:12px;font-weight:700;vertical-align:baseline;position:relative;
  top:-.72em }
.aps-pdp .fbt-foot button { height:46px;padding:0 28px;border:0;border-radius:4px;background:var(--aps-sun);
  color:var(--aps-deep);font:inherit;font-size:15px;font-weight:800;cursor:pointer }
.aps-pdp .fbt-foot button:hover { background:var(--aps-star) }
.aps-pdp .fbt-foot button:disabled { background:var(--aps-line);color:var(--aps-mute);cursor:default }
.aps-pdp .mfbt { margin:0;padding:0;list-style:none }
.aps-pdp .mfbt li { display:flex;gap:10px;align-items:center;font-size:13px;color:var(--aps-slate);
  padding:10px 0;border-bottom:1px solid var(--aps-line) }
.aps-pdp .mfbt li:last-child { border-bottom:0 }
.aps-pdp .mfbt input { width:16px;height:16px;accent-color:var(--aps-brand);margin:0;flex:none }
.aps-pdp .mfbt .th2 { width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--aps-line);border-radius:4px;background:#fff;padding:4px }
.aps-pdp .mfbt .th2 img { max-width:100%;max-height:100% }
.aps-pdp .mfbt b { color:var(--aps-ink);font-weight:650 }
.aps-pdp .mfbt .tag { display:block;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--aps-brand-700);margin-bottom:2px }
.aps-pdp .mfbt .pr2 { margin-left:auto;font-weight:700;color:var(--aps-ink);font-variant-numeric:tabular-nums;
  white-space:nowrap }
.aps-pdp .mfbt .pr2 sup { font-size:9.5px;font-weight:700;vertical-align:baseline;position:relative;top:-.62em }
.aps-pdp .grid4 { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px }
.aps-pdp .xc { position:relative;border:1px solid var(--aps-line);border-radius:5px;background:#fff;
  padding:14px;display:flex;flex-direction:column }
.aps-pdp .xc .lnk { position:absolute;inset:0;border-radius:5px }
.aps-pdp .xc .im { height:186px;display:flex;align-items:center;justify-content:center;margin-bottom:13px }
.aps-pdp .xc .im img { max-width:100%;max-height:100%;width:auto;height:auto }
.aps-pdp .xc .br { font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--aps-slate);margin-bottom:4px }
.aps-pdp .xc h4 { margin:0 0 7px;font-size:13.5px;font-weight:600;line-height:1.4;color:var(--aps-ink);
  min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden }
.aps-pdp .xc .pn2 { font-size:12px;color:var(--aps-slate);margin-bottom:10px }
.aps-pdp .xc .pp { font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--aps-ink);
  font-variant-numeric:tabular-nums;margin-bottom:13px }
.aps-pdp .xc .pp sup { font-size:10px;font-weight:700;vertical-align:baseline;position:relative;top:-.64em }
.aps-pdp .xc .buy { margin-top:auto;display:flex;gap:7px;position:relative;z-index:2 }
.aps-pdp .xc .cq { display:flex;align-items:center;border:1px solid var(--aps-ctl);border-radius:4px;
  background:#fff;flex:none;overflow:hidden }
.aps-pdp .xc .cq button { width:28px;height:36px;border:0;background:#fff;cursor:pointer;
  color:var(--aps-slate);font:inherit;font-size:15px;line-height:1 }
.aps-pdp .xc .cq button:hover { background:var(--aps-surface) }
.aps-pdp .xc .cq span { width:24px;text-align:center;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums }
.aps-pdp .xc .add { flex:1;height:36px;border:0;border-radius:4px;background:var(--aps-sun);color:var(--aps-deep);
  font:inherit;font-size:13px;font-weight:800;cursor:pointer }
.aps-pdp .xc .add:hover { background:var(--aps-star) }
.aps-pdp .revs { display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start }
.aps-pdp .rsum { display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:40px;align-items:center;
  padding:4px 0 20px;margin-bottom:20px;border-bottom:1px solid var(--aps-line) }
.aps-pdp .rsum .score { display:flex;align-items:flex-start;gap:12px }
.aps-pdp .rsum .big { font-size:52px;font-weight:800;letter-spacing:-.045em;line-height:.86;color:var(--aps-ink);
  font-variant-numeric:tabular-nums }
.aps-pdp .rsum .sc-r { padding-top:3px }
.aps-pdp .rsum .sc-r .stars { margin-bottom:3px }
.aps-pdp .rsum .sc-r .cnt { font-size:12.5px;color:var(--aps-slate);white-space:nowrap }
.aps-pdp .rdist { display:grid;gap:5px;max-width:560px }
.aps-pdp .rdist .row { display:flex;align-items:center;gap:10px }
.aps-pdp .rdist .lb2 { display:flex;align-items:center;gap:3px;font-size:12px;font-weight:650;color:var(--aps-slate);
  width:26px;flex:none;font-variant-numeric:tabular-nums }
.aps-pdp .rdist .lb2 svg { width:11px;height:11px;fill:var(--aps-sun);stroke:none }
.aps-pdp .rdist .bar { flex:1;height:9px;border-radius:999px;background:var(--aps-track);overflow:hidden }
.aps-pdp .rdist .bar i { display:block;height:100%;border-radius:999px;background:var(--aps-sun) }
.aps-pdp .rdist .n3 { width:22px;text-align:right;font-size:12px;color:var(--aps-slate);flex:none;
  font-variant-numeric:tabular-nums }
.aps-pdp .rsum .acts { display:grid;gap:7px;width:170px }
.aps-pdp .rsum .acts button { width:100%;height:38px;border:1px solid var(--aps-ctl);border-radius:4px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--aps-ink);cursor:pointer }
.aps-pdp .rsum .acts button:hover { border-color:var(--aps-brand);color:var(--aps-brand) }
.aps-pdp .revs { display:block }
.aps-pdp .qna { background:#fff }
.aps-pdp .rsum .big { font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--aps-ink);
  font-variant-numeric:tabular-nums }
.aps-pdp .rsum .stars { margin:7px 0 5px }
.aps-pdp .rsum .cnt { font-size:12.5px;color:var(--aps-slate);margin-bottom:12px }
.aps-pdp .rsum button { width:100%;height:34px;border:1px solid var(--aps-ctl);border-radius:4px;background:#fff;
  font:inherit;font-size:12.5px;font-weight:700;color:var(--aps-ink);cursor:pointer;margin-bottom:6px }
.aps-pdp .rsum button:hover { border-color:var(--aps-brand);color:var(--aps-brand) }
.aps-pdp .rv { border-bottom:1px solid var(--aps-line);padding-bottom:14px;margin-bottom:14px }
.aps-pdp .rv:last-child { border-bottom:0;margin-bottom:0 }
.aps-pdp .rv .hd2 { display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap }
.aps-pdp .rv h4 { margin:0;font-size:13.5px;font-weight:700;color:var(--aps-ink) }
.aps-pdp .rv .vf { font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--aps-stock-ink);background:var(--aps-stock-bg);border-radius:2px;padding:2px 5px }
.aps-pdp .rv p { margin:0 0 5px;font-size:13.5px;line-height:1.5;color:var(--aps-slate) }
.aps-pdp .rv .by { font-size:11.5px;color:var(--aps-mute) }
.aps-pdp .qna { border:1px dashed var(--aps-ctl);border-radius:5px;background:#fff;padding:15px;
  margin-top:16px;font-size:13px;color:var(--aps-slate) }
.aps-pdp .qna b { color:var(--aps-ink) }
.aps-pdp .qna a { color:var(--aps-brand);font-weight:650;text-decoration:none }
.aps-pdp .sbar-wrap { position:sticky;top:0;height:0;z-index:60 }
.aps-pdp .sbar { background:#fff;border-bottom:1px solid var(--aps-line);
  box-shadow:0 4px 14px rgba(5,42,92,.10);
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform .18s ease,opacity .18s ease }
.aps-pdp .sbar.on { transform:none;opacity:1;pointer-events:auto }
.aps-pdp .sbar .in2 { max-width:1280px;margin:0 auto;padding:9px 30px;display:flex;align-items:center;gap:14px }
.aps-pdp .sbar .th { width:40px;height:40px;border:1px solid var(--aps-line);border-radius:4px;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff }
.aps-pdp .sbar .th img { max-width:100%;max-height:100% }
.aps-pdp .sbar .tt { font-size:13px;font-weight:650;color:var(--aps-ink);overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis }
.aps-pdp .sbar .instock { font-size:13px }
.aps-pdp .sbar .pz { margin-left:auto;font-size:20px;font-weight:800;letter-spacing:-.03em;flex:none;
  font-variant-numeric:tabular-nums }
.aps-pdp .sbar .pz sup { font-size:10px;font-weight:700;vertical-align:baseline;position:relative;top:-.68em }
.aps-pdp .sbar .atc { flex:none;width:150px;height:38px;font-size:14px;max-width:none }

/* -- element aliases ------------------------------------------------------
   Generated from the rules above, not typed. The mockup's secondary actions are
   <button> and its quantity value is a <span>; ours are an <a> (it navigates, so
   a button would be the wrong element and would lose open-in-new-tab) and an
   <input> (the form has to submit a quantity). Same declarations, by
   construction. */
.aps-pdp .qty input { width:44px;text-align:center;font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums }
.aps-pdp .sec2 a { flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;border:1px solid var(--aps-ctl);border-radius:4px;background:#fff;font:inherit;
  font-size:13.5px;font-weight:700;color:var(--aps-ink);cursor:pointer }
.aps-pdp .sec2 a:hover { border-color:var(--aps-brand);color:var(--aps-brand) }

/* An <input> needs what a <span> never did. */
.aps-pdp .qty input { border:0;background:transparent;appearance:none;-moz-appearance:textfield;padding:0 }
.aps-pdp .qty input::-webkit-outer-spin-button,
.aps-pdp .qty input::-webkit-inner-spin-button { appearance:none;margin:0 }

/* -- collision guard ------------------------------------------------------
   Horizon's styles.css claims some of the class names the mockup uses. Only what
   the verification harness actually caught is listed here; this is not a
   pre-emptive reset. Each line names the rule it is answering.

   styles.css `.price, .compare-at-price, .unit-price { white-space: nowrap }` */
.aps-pdp .price { white-space: normal }


/* -- store reviews, the no-reviews fallback -------------------------------
   NOT from the mockup. It reuses the mockup's own rating summary shell, .revs
   and .rsum and .score, and adds only the list of quotes that sits where the
   distribution bars sit on a product that has been reviewed. */
.aps-pdp .rdist .sr { padding: 0 0 13px; border-bottom: 1px solid var(--aps-line); margin-bottom: 13px }
.aps-pdp .rdist .sr:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0 }
.aps-pdp .rdist .sr p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.5; color: var(--aps-ink) }
.aps-pdp .rdist .sr-by { font-size: 12px; color: var(--aps-mute) }

/* -- store reviews, the no-reviews fallback -------------------------------
   NOT from the mockup, which has no such state. Drawn to the reference Dylan
   supplied on 2026-08-28: a summary bar, then one card per review carrying its
   own stars, author, age and verified mark, then a footer that says plainly
   what these reviews are about. */
.aps-pdp .sarev-top { display: flex; gap: 22px; align-items: flex-start;
  border: 1px solid var(--aps-line); border-radius: var(--aps-r-card, 5px);
  padding: 16px 18px; margin-bottom: 10px }
.aps-pdp .sarev-score { flex: none; width: 108px; text-align: center;
  border-right: 1px solid var(--aps-line); padding-right: 18px }
.aps-pdp .sarev-score .n3 { font-size: 38px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--aps-ink) }
.aps-pdp .sarev-say { flex: 1; min-width: 0 }
.aps-pdp .sarev-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 5px }
.aps-pdp .sarev-h b { font-size: 14px; font-weight: 750; color: var(--aps-ink) }
.aps-pdp .sarev-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px;
  font-weight: 800; letter-spacing: .06em; color: var(--aps-stock-ink) }
.aps-pdp .sarev-badge svg { width: 13px; height: 13px; stroke: var(--aps-stock-ink); stroke-width: 2.6 }
.aps-pdp .sarev-sub { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--aps-slate) }
.aps-pdp .sarev-sub b { color: var(--aps-ink); font-weight: 700 }
.aps-pdp .sarev-more { font-size: 13px; font-weight: 650; color: var(--aps-brand) }
.aps-pdp .sarev-more:hover { text-decoration: underline }

.aps-pdp .sarev-i { border: 1px solid var(--aps-line); border-radius: var(--aps-r-card, 5px);
  padding: 13px 16px; margin-bottom: 8px }
.aps-pdp .sarev-i-h { display: flex; align-items: center; gap: 10px; margin-bottom: 7px }
.aps-pdp .sarev-i-h .stars { margin-right: auto }
.aps-pdp .sarev-by { font-size: 12.5px; font-weight: 700; color: var(--aps-ink) }
.aps-pdp .sarev-v { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  font-weight: 800; letter-spacing: .05em; color: var(--aps-stock-ink) }
.aps-pdp .sarev-i p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--aps-ink) }

/* The star rows here carry empty stars too, which the mockup's summary never
   needed: a review of three out of five has to show the two it did not get. */
.aps-pdp .sarev i { display: inline-block }
.aps-pdp .sarev i svg { width: 15px; height: 15px; fill: var(--aps-line); stroke: none }
.aps-pdp .sarev i.on svg { fill: var(--aps-star) }
.aps-pdp .sarev-score .stars { justify-content: center; margin-top: 5px }
.aps-pdp .sarev .stars { display: flex; gap: 1px }

.aps-pdp .sarev-foot { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-top: 1px dashed var(--aps-line); margin-top: 12px;
  padding-top: 12px; font-size: 12.5px; color: var(--aps-mute) }
.aps-pdp .sarev-foot a { font-size: 13px; font-weight: 650; color: var(--aps-brand) }
.aps-pdp .sarev-foot a:hover { text-decoration: underline }

/* The store rating borrowed into the line under the title. The score and count are
   read as context beside the stars, not as a link, so they take the SKU's grey
   rather than the link blue and the meta row's weight rather than a bolder one. */
.aps-pdp .meta .store-rating { gap: 6px }
.aps-pdp .meta .store-rating .sr-n,
.aps-pdp .meta .store-rating .sr-c { color: var(--aps-slate); font-weight: 400 }

@media (max-width: 767px) {
  .aps-pdp .sarev-top { flex-direction: column; gap: 12px; padding: 14px }
  .aps-pdp .sarev-score { width: auto; text-align: left; border-right: 0; padding-right: 0;
    display: flex; align-items: center; gap: 12px }
  .aps-pdp .sarev-score .stars { margin-top: 0 }
  .aps-pdp .sarev-i-h { flex-wrap: wrap; gap: 6px 10px }
}

/* -- related searches -----------------------------------------------------
   NOT from the mockup. Bubbles, in the same shape as the phone's category chips
   in aps-header.css, so the two read as the same device in two places. */
.aps-pdp .rsx { display: flex; flex-wrap: wrap; gap: 8px }
.aps-pdp .rsx-b { display: inline-flex; align-items: center; padding: 7px 14px;
  border: 1px solid var(--aps-ctl); border-radius: 999px; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--aps-slate); white-space: nowrap }
.aps-pdp .rsx-b:hover { border-color: var(--aps-brand); color: var(--aps-brand);
  background: var(--aps-brand-50) }

/* -- the gallery panel ----------------------------------------------------
   The mockup floats the image well on the grey ground with nothing behind the
   thumbnail rail. Asked for on 2026-08-28: the whole left column is one white
   panel, so the rail and the image read as a single piece of the page rather
   than a strip of thumbnails sitting on the background. */
.aps-pdp .pgal { background: #fff; border: 1px solid var(--aps-line);
  border-radius: var(--aps-r-card, 5px); padding: 14px }
.aps-pdp .well { border: 0; border-radius: 0 }

/* Add to cart matches the quantity stepper beside it. The mockup draws 46 against
   the stepper's 48, which reads as a misalignment at this size. */
.aps-pdp .qrow .atc { height: 48px }

/* Cross-sell card controls. The form around Add to cart has to disappear from the
   layout or it becomes the flex item and the button shrinks to its text.

   The button is 38px to match the stepper beside it, which is 36px of buttons
   inside a 1px border. Same correction as the buy box, one size down. */
.aps-pdp .xc .buy form { display: contents }
.aps-pdp .xc .add { height: 38px }

/* The bundle card is a link. The overlay covers the card and the checkbox is raised
   above it; neither gets a stacking context, which would trap the control beneath. */
.aps-pdp .fbt-i { position: relative }
.aps-pdp .fbt-lnk { position: absolute; inset: 0; border-radius: 5px }
.aps-pdp .fbt-i .sel { position: relative; z-index: 2 }
.aps-pdp .fbt-i:hover h4 { color: var(--aps-brand) }

/* An unticked box has to look like something you can tick. The native control
   draws a hairline the same weight as the card's own rules and disappears into
   them, and accent-color only paints the ticked state.

   Drawn on a span rather than on the input's own pseudo-element. An <input> is a
   replaced element and ::after on it is undefined behaviour; Chrome renders
   something with appearance:none but not reliably the shape asked for, which is
   how a correct tick came out as a bracket. The input is still there, still
   focusable, just not the thing being painted. */
.aps-pdp .sel input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer }
.aps-pdp .sel .cbx { width: 20px; height: 20px; flex: none; position: relative;
  display: grid; place-items: center;
  border: 2px solid var(--aps-ctl); border-radius: 4px; background: #fff; cursor: pointer;
  transition: border-color .12s ease, background .12s ease }
.aps-pdp .sel:hover .cbx { border-color: var(--aps-brand) }
.aps-pdp .sel input:checked + .cbx { background: var(--aps-brand); border-color: var(--aps-brand) }
/* Centred by the box rather than measured from its left edge. Positioned at
   left:4px top:0 the tick sat high and left, and the error grew with any change
   to the box. What is left is an optical nudge, not a geometric one: a checkmark
   carries its ink on two edges and reads low and right of the middle. */
.aps-pdp .sel input:checked + .cbx::after { content: ""; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: translate(-1px, -1px) rotate(45deg) }
.aps-pdp .sel input:focus-visible + .cbx { outline: 2px solid var(--aps-brand); outline-offset: 2px }
.aps-pdp .sel input:disabled + .cbx { opacity: .4; cursor: default }

/* -- downloads, under the specifications ----------------------------------
   Same column and the same kind of question: things a customer checks before
   buying rather than reads. The heading borrows the table's caption style so
   the column reads as one thing rather than two stacked panels. */
.aps-pdp .dls { margin-top: 18px }
.aps-pdp .dls-t { font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--aps-mute); padding: 0 0 8px }
.aps-pdp .dl { display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  border: 1px solid var(--aps-line); border-radius: 4px; background: #fff;
  text-decoration: none; color: var(--aps-ink); transition: border-color .12s, background .12s }
.aps-pdp .dl + .dl { margin-top: 8px }
.aps-pdp .dl:hover { border-color: var(--aps-brand); background: var(--aps-brand-50) }
/* Brand, not red. --aps-red has one job in this system and it is out of stock, so a
   red glyph on a file reads as a warning about the file. The tile is a link, and blue
   is what the page uses for something to press. */
.aps-pdp .dl-i { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--aps-brand);
  stroke-width: 1.6; stroke-linejoin: round }
.aps-pdp .dl-x { font: 700 6.4px/1 var(--aps-ui); fill: var(--aps-brand); stroke: none;
  text-anchor: middle; letter-spacing: .04em }
.aps-pdp .dl-n { flex: 1; min-width: 0; font-size: 13px; font-weight: 650 }
.aps-pdp .dl-d { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--aps-mute);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.aps-pdp .dl:hover .dl-d { stroke: var(--aps-brand) }

/* -- the description, as the admin's editor writes it ---------------------
   The mockup's description happens to use h4, and that was the only heading the
   extracted rule styled. A merchant writing in Shopify's rich text editor gets
   h2 and h3 and bold and lists, and those were rendering as plain body text.
   Every level takes the same treatment: the description is one voice, and a
   heading inside it is a lead-in rather than a new document section. */
.aps-pdp .rte h2,
.aps-pdp .rte h3,
.aps-pdp .rte h5,
.aps-pdp .rte h6 { margin: 18px 0 7px; font-size: 14px; font-weight: 750; letter-spacing: -.01em;
  color: var(--aps-ink) }
.aps-pdp .rte h2:first-child,
.aps-pdp .rte h3:first-child,
.aps-pdp .rte h4:first-child { margin-top: 0 }
.aps-pdp .rte strong,
.aps-pdp .rte b { font-weight: 750; color: var(--aps-ink) }
.aps-pdp .rte em,
.aps-pdp .rte i { font-style: italic }
.aps-pdp .rte a { color: var(--aps-brand); text-decoration: underline; text-underline-offset: 2px }
.aps-pdp .rte ul,
.aps-pdp .rte ol { margin: 0 0 11px; padding-left: 20px; list-style: revert }
.aps-pdp .rte li { margin-bottom: 5px }
.aps-pdp .rte table { border-collapse: collapse; margin: 0 0 11px }
.aps-pdp .rte td,
.aps-pdp .rte th { border: 1px solid var(--aps-line); padding: 6px 9px; text-align: left }

/* -- questions and answers ------------------------------------------------
   NOT from the mockup. The mockup's only Q and A element was a "no questions
   yet" note, and it was removed. This is new, written in the page's own idiom:
   the same rule colour, the same 13 to 14px range, the same weights. */
.aps-pdp .qa { border-top: 1px solid var(--aps-line) }
.aps-pdp .qa-i { border-bottom: 1px solid var(--aps-line) }
.aps-pdp .qa-i summary { display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 13px 0; list-style: none; color: var(--aps-ink) }
.aps-pdp .qa-i summary::-webkit-details-marker { display: none }
.aps-pdp .qa-i summary:hover .qa-q { color: var(--aps-brand) }
.aps-pdp .qa-q { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; line-height: 1.4 }
.aps-pdp .qa-i summary svg { width: 18px; height: 18px; flex: none; stroke: var(--aps-mute);
  margin-top: 1px; transition: transform .15s ease }
.aps-pdp .qa-i[open] summary svg { transform: rotate(180deg) }
.aps-pdp .qa-a { padding: 0 30px 15px 0; font-size: 13.5px; line-height: 1.55; color: var(--aps-slate) }
.aps-pdp .qa-a p { margin: 0 0 9px }
.aps-pdp .qa-a p:last-child { margin-bottom: 0 }
.aps-pdp .qa-ask { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 650;
  color: var(--aps-brand) }
.aps-pdp .qa-ask:hover { text-decoration: underline }

/* -- the title's wrapping, as a setting -----------------------------------
   The extracted rule hard-codes text-wrap:balance, which is the mockup's own
   value and stays the default. It evens the two lines rather than filling the
   first: measured on the seed product in a 534px column, balance gives 282 and
   389 where plain wrapping gives 526 and 145. This sits after the extraction so
   the setting wins. */
.aps-pdp h1.pt { text-wrap: var(--aps-pdp-title-wrap, balance) }

/* -- controls that belong to one width only -------------------------------
   The dot row is the phone's gallery control and the thumbnail rail is the
   desktop's. Both are in the DOM at every width so there is no second copy of
   anything; each is hidden where it does not belong. Left showing, the dots added
   12px to the gallery column and the desktop harness caught it. */
.aps-pdp .gdots { display: none }

/* -- the phone's two wrappers, dissolved above the breakpoint ------------
   .ident and .mbuy exist only so the phone has something to hang its two cards
   on. Everywhere else they are not there at all, so the buy panel lays out as if
   they had never been added and the desktop measurements are unchanged. */
.aps-pdp .ident,
.aps-pdp .mbuy { display: contents }

/* -- settings bridge ------------------------------------------------------
   The five dimensions sections/aps-product.liquid exposes in the theme editor.
   Last in the file so they win, and defaulted to the mockup's own values so an
   unset property changes nothing. */
.aps-pdp .pdp { grid-template-columns: var(--aps-pdp-media, 620px) var(--aps-pdp-details, 572px);
  gap: 0 var(--aps-pdp-gap, 28px) }
/* The gallery is one column on every width, so Thumbnail size no longer sets a
   grid track. It still sizes the squares. */
.aps-pdp .thumbs button { width: var(--aps-pdp-thumb, 72px); height: var(--aps-pdp-thumb, 72px) }
/* A row under the photograph, so the overflow it can have is sideways rather
   than downward. Scrolling rather than wrapping, because wrapping makes the
   gallery's height depend on how many photographs a product happens to have and
   the buy column beside it then moves per product.

   The scrollbar stays hidden, as it was on the vertical rail: the last thumbnail
   cut flush at the edge is the same signal and costs no chrome. */
.aps-pdp .thumbs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior: contain }
.aps-pdp .thumbs::-webkit-scrollbar { display: none }
/* flex:none, or the cap squashes instead of scrolling. A flex item shrinks by
   default, so seven 72px squares under a 536px ceiling quietly became 70px
   rectangles rather than overflowing. The height is the thumbnail's, not the
   container's to negotiate. */
.aps-pdp .thumbs button { flex: none }
.aps-pdp .well { height: var(--aps-pdp-well, 536px) }

/* -- the phone, 390 -------------------------------------------------------
   NOT lifted from the mockup. The mockup draws the phone as a second document
   with its own .m- class names; this theme has one DOM at every width, so these
   rules re-lay-out the desktop markup to the same numbers. Every value here is
   the mockup's own, read from the band it marks "MOBILE, 390". See
   docs/decisions/2026-08-26-one-dom-responsive.md.

   The breakpoint is a literal because a media query cannot read a custom
   property. It matches the homepage's. */
@media (max-width: 767px) {

  /* Phone sections run edge to edge. The ground shows only as the seam between
     them, and each block keeps its own inner padding so nothing sits on the bezel. */
  .aps-pdp .pbg { padding: 0; }
  /* .aps-frame.aps-pdp, not .aps-pdp. aps-base.css sets the rail's gutter with
     .aps-frame .s, which ties on specificity, and the winner would then depend on
     the order five sections happen to emit their stylesheet links in. It lost. */
  .aps-frame.aps-pdp .s { padding-left: 0; padding-right: 0; }
  .aps-pdp .crumbs { display: none; }

  /* The identity band sits above the photograph, which is Howdy's phone order and
     the one thing here that is a genuine reordering rather than a resize.
     display:contents dissolves .pinfo and the buy panel so their children become
     items of .pdp and can be ordered against the gallery. The boxes those two
     elements drew are re-established below, because display:contents removes them. */
  /* align-items has to be reset. The desktop rule sets start, so the two columns
     size to their own content; left in place on a column flex it stops every child
     stretching to the page width, and the gallery came out 25px narrow. */
  .aps-pdp .pdp { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .aps-pdp .pinfo,
  .aps-pdp .ipanel.buy,
  /* The buy button lives inside <product-form-component> and a <form>. Those are
     the flex items, not .qrow, so without dissolving them too the row keeps the
     default order of 0 and lands above the brand line. It did exactly that. */
  .aps-pdp .ipanel.buy product-form-component,
  .aps-pdp .ipanel.buy form { display: contents; }

  .aps-pdp .ident,
  .aps-pdp .mbuy { display: block }
  .aps-pdp .ident  { order: 1 }
  .aps-pdp .pgal   { order: 2 }
  .aps-pdp .gdots  { order: 3 }
  .aps-pdp .mbuy   { order: 4 }
  .aps-pdp .ipanel { order: 20 }

  /* One card holds the identity band, the photograph and the buy controls, and it
     carries the 13px padding. The band then bleeds back out to the card's edges
     with negative margins, which is exactly what the mockup does. */
  .aps-pdp .pdp { background: #fff; border: 1px solid var(--aps-line);
    border-left: 0; border-right: 0; padding: 13px; margin-bottom: 10px }
  .aps-pdp .ident { background: var(--aps-ground); margin: -13px -13px 13px;
    padding: 10px 13px 11px; border-bottom: 1px solid var(--aps-line) }
  .aps-pdp .brandline { gap: 9px; margin: 0 0 4px; padding: 0 }
  .aps-pdp .brandline img { height: 28px }
  .aps-pdp .brandline a { font-size: 12px; font-weight: 500 }
  .aps-pdp h1.pt { font-size: 12px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; margin: 0 0 6px }
  /* On the phone the stock line joins the meta row rather than taking one of its
     own, which is what the mockup draws and what was asked for. The band is a wrap
     flex so the two share a line without either being moved in the DOM. */
  .aps-pdp .ident { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px }
  .aps-pdp .brandline,
  .aps-pdp h1.pt { flex: 1 0 100% }
  .aps-pdp .meta { font-size: 12px; gap: 5px 14px; margin: 0; flex: 0 1 auto }
  .aps-pdp .meta .pnv { font-size: 12px }
  /* The store rating adds a group to a row the mockup fits on one line. The stars
     and the score carry the meaning; the words beside them do not survive 375px. */
  .aps-pdp .meta .store-rating .sr-tag { display: none }
  /* Sized to the meta row it now shares. Left at the desktop 13px the chip stands
     18.19px against the row's 16.8px and makes the whole band 1.39px too tall. */
  .aps-pdp .stockline { margin: 0; flex: 0 1 auto; font-size: 12px }
  .aps-pdp .stockline .instock { font-size: 12px; line-height: 16.8px }
  .aps-pdp .stockline .instock svg { width: 14px; height: 14px }

  /* the photograph, on white below the band. The phone keeps the dot indicators
     and drops the thumbnail row: two controls for the same job, in a column that
     is already long.

     display:block is safe here only because the rail is hidden. A block box
     ignores order, and the desktop rule places the thumbnails under the well with
     order:2, so if this ever shows them again it has to become a flex column or
     they will come back above the photograph, which is the markup order. */
  .aps-pdp .pgal { display: block; position: static; background: none; padding: 0;
    border: 0; border-radius: 0 }
  .aps-pdp .thumbs { display: none }
  /* The desktop panel rule squares the well's corners because its own border moves
     to the panel. The phone has no panel, so the radius comes back. */
  .aps-pdp .well { height: var(--aps-pdp-well-mobile, 300px); border: 0; padding: 0;
    margin: 0 0 6px; border-radius: 4px }
  /* margin, not padding: the mockup's dot row measures 6px tall, which is the
     dots themselves, and spaces itself from what follows with a margin. */
  .aps-pdp .gdots { display: flex; gap: 5px; justify-content: center;
    background: none; padding: 0; margin: 0 0 11px }
  .aps-pdp .gdots i { width: 6px; height: 6px; border-radius: 999px; background: var(--aps-ctl); display: block }
  .aps-pdp .gdots i.on { background: var(--aps-brand); width: 16px; border-radius: 3px }

  /* the buy controls, inside the same card */
  .aps-pdp .mbuy { background: none; padding: 0; border: 0 }
  .aps-pdp .sizes .opt .plu { display: none }
  .aps-pdp .price { margin-bottom: 12px; gap: 9px }
  /* The struck price is not tabular on the phone. It inherits that from .price on
     desktop, where the mockup does the same; the phone mockup does not, and the
     difference is 3.8px of width on this product. */
  .aps-pdp .price .was { font-variant-numeric: normal }
  .aps-pdp .price .now { font-size: 31px }
  .aps-pdp .price .now sup { font-size: 14px; top: -.78em }
  .aps-pdp .price .was { font-size: 14px }
  .aps-pdp .price .per { font-size: 13px }
  .aps-pdp .sizes { margin: 0 0 12px }
  .aps-pdp .sizes .opt { padding: 8px 9px }
  .aps-pdp .sizes .opt .pl { line-height: 1.3 }
  .aps-pdp .qrow { margin-bottom: 4px }
  /* The two secondary actions are dropped on the phone: the screen has room for one
     primary action and repeating trade links above the fold costs more than it earns. */
  .aps-pdp .sec2 { display: none }
  .aps-pdp .retline { margin-top: 11px }

  /* stacked info panels, edge to edge */
  .aps-pdp .ipanel { border-radius: 0; border-left: 0; border-right: 0; padding: 14px 15px; margin-bottom: 10px }
  /* Quick overview has the ground above and below it on a phone, which separates it
     already. Its own rules on top of that read as a box inside a box. */
  .aps-pdp .ipanel.ov { border-top: 0; border-bottom: 0 }

  /* sections below the fold */
  .aps-pdp .psec { border-radius: 0; border-left: 0; border-right: 0; padding: 15px; margin-bottom: 10px }
  .aps-pdp .psec > h2 { font-size: 16.5px; letter-spacing: -.02em; margin-bottom: 10px }
  .aps-pdp .cols { display: block }

  /* The bundle becomes a stacked list. Past three rows it scrolls inside itself,
     with the fourth row cut and faded so the overflow is visible rather than implied. */
  .aps-pdp .fbt-row { display: block; margin-bottom: 14px }
  .aps-pdp .fbt-plus { display: none }
  .aps-pdp .fbt-nav { display: none }
  .aps-pdp .fbt-trackwrap { position: relative; flex: none }
  .aps-pdp .fbt-trackwrap::after { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 44px;
    background: linear-gradient(180deg, rgba(255,255,255,0), #fff 82%) }
  .aps-pdp .fbt-track { display: block; max-height: 222px; overflow-x: hidden; overflow-y: auto }
  .aps-pdp .fbt-i,
  .aps-pdp .fbt-track .fbt-i { width: auto; flex: none; display: flex; flex-direction: row;
    align-items: center; gap: 10px; padding: 11px 0; border: 0;
    border-bottom: 1px solid var(--aps-line); border-radius: 0; background: none }
  .aps-pdp .fbt-track .fbt-i:last-child { border-bottom: 0 }
  .aps-pdp .fbt-i .cur { display: none }
  .aps-pdp .fbt-i .sel { margin: 0; gap: 0; font-size: 0; flex: none }
  .aps-pdp .fbt-i .im2 { width: 46px; height: 46px; flex: none; margin: 0;
    border: 1px solid var(--aps-line); border-radius: 4px; background: #fff; padding: 4px }
  .aps-pdp .fbt-i .br2 { display: none }
  .aps-pdp .fbt-i h4 { margin: 0; flex: 1; min-width: 0; font-size: 13px; line-height: 1.35;
    font-weight: 650; min-height: 0; -webkit-line-clamp: 2 }
  .aps-pdp .fbt-i .pp2 { margin: 0 0 0 auto; font-size: 15px; flex: none; white-space: nowrap }
  .aps-pdp .fbt-i .pp2 sup { font-size: 9.5px; top: -.62em }
  /* The subtotal row sits at the foot of a block that is already its own card on a
     phone. The rule above it is a third horizontal line in as many rows. */
  .aps-pdp .fbt-foot { gap: 14px; border-top: 0; padding-top: 0 }

  /* cross-sell cards, two across. A 161px card cannot hold a stepper and a full
     label side by side, so the two stack instead of one squeezing the other out. */
  .aps-pdp .grid4 { grid-template-columns: 1fr 1fr; gap: 9px }
  .aps-pdp .xc { padding: 13px }
  .aps-pdp .xc .buy { flex-direction: column; gap: 8px }
  .aps-pdp .xc .cq { width: 100%; justify-content: space-between }
  .aps-pdp .xc .cq button { flex: none; width: 38px; height: 40px }
  .aps-pdp .xc .cq span { flex: 1 }
  .aps-pdp .xc .add { flex: none; height: 42px; font-size: 13.5px }

  /* the bar moves to the bottom edge */
  .aps-pdp .sbar-wrap { position: sticky; top: auto; bottom: 0 }
  .aps-pdp .sbar { border-top: 1px solid var(--aps-line); border-bottom: 0;
    box-shadow: 0 -4px 14px rgba(5,42,92,.09); transform: translateY(100%) }
  .aps-pdp .sbar.on { transform: none }
  .aps-pdp .sbar .in2 { padding: 9px 14px; gap: 10px }
  .aps-pdp .sbar .th,
  .aps-pdp .sbar .tt,
  .aps-pdp .sbar .instock { display: none }
  .aps-pdp .sbar .pz { margin-left: 0; font-size: 19px }
  .aps-pdp .sbar .pz sup { font-size: 10px; top: -.66em }
  .aps-pdp .sbar .atc { flex: 1; width: auto; height: 40px; font-size: 14.5px }
}