/* shop.elonmuscular.com — v3 (14 Oct 2026). LAYOUT measured from shop.playboy.com/collections/streetwear-selects and
   /products/pb-pleasure-tee (docs/review/playboy-shop/(collection|product)/measure-files): header 36 + 72, hero 550, grid 3 x 437 with 24/48
   gaps and 40px margins (phone 2 x 177, 12/32, 12px), 4:5 images, product media 563 x 704 at x76, info 530 at x870,
   tabs, 4-up "You may also like". SKIN is elonmuscular.com/join/ (founder: "make it cream style like this but keep our
   branding… no brown. no playboy style… cream is part of our brand it looks lux"): paper #f5efe3 with the dot grain, navy
   ink, Big Shoulders display in navy with the black extrusion and the operative word in orange italic, Barlow body,
   Barlow Condensed tracked labels, square corners, navy slabs with an 8px hard black offset, the canonical orange CTA
   (4px black offset + holographic glint), the black strip with orange labels, footer on navy with the 3px orange rule. */
:root {
  --paper: #f5efe3; --paper-2: #ece5d6; --paper-3: #ddd5c4;
  --navy: #053557; --navy-2: #04304f; --navy-3: #0b4470; --deep: #032a46;
  --orange: #f55209; --orange-text: #ffad92;
  --black: #110e0b;
  --ink: #053557; --ink-2: rgba(5, 53, 87, .78); --ink-3: rgba(5, 53, 87, .55);
  --line: rgba(5, 53, 87, .16); --line-2: rgba(5, 53, 87, .3);
  --hair: rgba(245, 239, 227, .16); --hair-2: rgba(245, 239, 227, .28);
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --sans: "Barlow", "Segoe UI", Arial, sans-serif;
  --label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --xo: .09em; --xc: var(--black);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); font: 400 15px/26px var(--sans);
  background: var(--paper) radial-gradient(circle, rgba(17, 14, 11, .05) 1px, transparent 1.3px) 0 0 / 6px 6px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.m { display: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* the brand's eight-step black extrusion (57-skins.css --x) on every display line */
.wm, .hero h1, .seo h2, .ft-poster, .pdp-info h1, .also h2, .drawer h3, .ft-news h3, .meta .p, .price, .qa-p, .pag a.on {
  text-shadow: calc(var(--xo)*.125) calc(var(--xo)*.125) 0 var(--xc), calc(var(--xo)*.25) calc(var(--xo)*.25) 0 var(--xc), calc(var(--xo)*.375) calc(var(--xo)*.375) 0 var(--xc), calc(var(--xo)*.5) calc(var(--xo)*.5) 0 var(--xc), calc(var(--xo)*.625) calc(var(--xo)*.625) 0 var(--xc), calc(var(--xo)*.75) calc(var(--xo)*.75) 0 var(--xc), calc(var(--xo)*.875) calc(var(--xo)*.875) 0 var(--xc), var(--xo) var(--xo) 0 var(--xc); }
em { font-style: italic; color: var(--orange); }

/* ── header: 36px strip + 72px bar (Playboy's 109). The strip is /join/'s black stat strip; the bar is the site's black header ── */
.hdr { position: sticky; top: 0; z-index: 20; }
.announce { height: 36px; background: var(--black); color: var(--paper); text-align: center; font: 600 11px/36px var(--label); letter-spacing: 2.2px; text-transform: uppercase; }
.announce em { font-style: normal; color: var(--orange); }
.nav { background: rgba(17, 14, 11, .96); border-bottom: 3px solid var(--orange); }
.nav-row { height: 72px; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-left { display: flex; align-items: center; gap: 22px; min-width: 0; color: var(--paper); }
.nl { font: 500 12px/48px var(--label); letter-spacing: 1.92px; text-transform: uppercase; color: rgba(245, 239, 227, .85); white-space: nowrap; transition: color .2s; }
.nl:hover { color: var(--orange); }
.pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; background: var(--orange); color: var(--black); box-shadow: 3px 3px 0 var(--paper); white-space: nowrap; }
.pill b { font: 800 15px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.logo { justify-self: center; display: flex; align-items: baseline; gap: 10px; }
.wm { font: 900 26px/1 var(--display); letter-spacing: .01em; color: var(--orange); }
.wm-tag { font: 700 11px/1 var(--label); letter-spacing: 2.4px; text-transform: uppercase; color: var(--paper); border: 1px solid var(--hair-2); padding: 4px 6px 3px; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 26px; color: var(--paper); }
.search { display: flex; align-items: center; gap: 10px; width: 288px; height: 38px; padding: 0 14px; background: rgba(245, 239, 227, .07); border: 1px solid var(--hair); color: rgba(245, 239, 227, .6); }
.search input { border: 0; background: transparent; outline: 0; font: 400 13px/1 var(--sans); color: var(--paper); width: 100%; }
.search input::placeholder { color: rgba(245, 239, 227, .55); }
.m-search, .m-chips { display: none; }

/* ── hero: Playboy's 550 band, our grammar — the photo in a navy frame with the 8px hard offset, display headline on paper ── */
.hero { position: relative; height: 550px; overflow: hidden; background: var(--deep); }
.hero > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(3, 42, 70, 0), rgba(3, 42, 70, .55) 46%, rgba(3, 42, 70, .92)); }
.hero-txt { position: absolute; left: 40px; right: 40px; bottom: 34px; z-index: 1; }
.eyebrow { margin: 0; font: 600 12px/21px var(--label); letter-spacing: 2.4px; text-transform: uppercase; color: var(--paper); }
.eyebrow b { color: var(--orange); font-weight: 700; }
.hero h1 { margin: 6px 0 22px; font: 900 72px/.92 var(--display); text-transform: uppercase; color: var(--paper); letter-spacing: .01em; }
.hero h1 em { color: var(--orange); }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── buttons: the canonical CTA (brand/buttons/README.md) and the outlined secondary, holographic glint on both ── */
.btn, .atc, .buy, .add, .ft-news button { position: relative; isolation: isolate; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 32px; font: 800 17px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; transition: transform .22s cubic-bezier(.19, 1, .22, 1), box-shadow .22s cubic-bezier(.19, 1, .22, 1); }
.btn-light { background: var(--orange); color: var(--black); box-shadow: 4px 4px 0 var(--black); }
.btn-ghost { color: var(--paper); border: 2px solid var(--paper); box-shadow: 4px 4px 0 var(--orange); }
.btn:hover { transform: translate(-1px, -1px); }
.btn-light:hover { box-shadow: 5px 5px 0 var(--black), 0 0 16px rgba(245, 82, 9, .28); }
.btn-ghost:hover { box-shadow: 5px 5px 0 var(--orange); }
:is(.btn, .atc, .buy, .add, .ft-news button)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 40%, rgba(245, 239, 227, .22) 48%, rgba(245, 239, 227, .3) 50%, rgba(245, 239, 227, .22) 52%, transparent 60%) 0 0 / 260% 100% no-repeat; transition: opacity .2s ease-out; }
:is(.btn, .atc, .buy, .add, .ft-news button):is(:hover, :focus-visible):not(:disabled)::before { opacity: 1; animation: holo .9s ease-out 1 both; }
@keyframes holo { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ── toolbar ── */
.toolbar { display: flex; align-items: center; gap: 44px; padding: 40px 40px 24px; font: 600 13px/26px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.tb-filters { display: flex; align-items: center; gap: 13px; }
.tb-sort { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.muted { color: var(--ink-3); }
.m-count { display: none; }

/* ── grid: 3 x 437.33, 24 / 48, 40px margins, 4:5 tiles on a hairline; hover lifts onto the hard offset ── */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; padding: 0 40px; }
.card { min-width: 0; }
.card .ph { display: block; position: relative; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; outline: 1px solid var(--line); transition: box-shadow .22s cubic-bezier(.19, 1, .22, 1), transform .22s cubic-bezier(.19, 1, .22, 1); }
.card .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease-in-out, visibility .3s ease-in-out; }
.card .ph img.b { opacity: 0; visibility: hidden; }
@media (hover: hover) { .card:hover .ph img.b { opacity: 1; visibility: visible; } .card:hover .ph { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--navy); } }
.card .ph .soon { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: var(--navy); color: rgba(245, 239, 227, .7); font: 700 12px/1.6 var(--label); letter-spacing: 2.4px; text-transform: uppercase; }
.card .ph .soon img { position: static; width: 64px; height: 64px; margin: 0 auto 12px; }
.tagl { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--black); color: var(--orange); font: 700 11px/1 var(--label); letter-spacing: 1.6px; text-transform: uppercase; padding: 6px 8px 5px; }
.meta { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding-top: 12px; }
.meta .t, .meta .p, .meta .v { grid-column: 1; }
.meta .t { font: 800 19px/1.05 var(--display); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.meta .t:hover { color: var(--orange); }
.meta .p { --xo: .07em; font: 900 22px/1 var(--display); letter-spacing: .02em; color: var(--orange); margin-top: 8px; }
.meta .v { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.meta .by { grid-column: 1 / -1; margin: 6px 0 0; font: 400 14px/20px var(--sans); color: var(--ink-2); }
.meta .by a { color: var(--orange); text-decoration: underline; text-underline-offset: 2px; }
.sw { display: flex; gap: 5px; }
.sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.vt { font: 600 11px/17px var(--label); letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); }
.plus { grid-row: 1 / span 3; grid-column: 2; width: 40px; height: 40px; margin-top: -2px; display: grid; place-items: center; color: var(--black); background: var(--orange); box-shadow: 3px 3px 0 var(--black); transition: transform .15s; }
.plus:hover { transform: translate(-1px, -1px); }

/* ── pagination: 4 x 56 ── */
.pag { display: flex; justify-content: center; margin: 56px 0 80px; }
.pag a { width: 56px; height: 56px; display: grid; place-items: center; font: 800 18px/1 var(--display); color: var(--ink); border: 1px solid var(--line-2); margin-left: -1px; }
.pag a.on { background: var(--navy); color: var(--paper); border-color: var(--navy); --xo: .06em; }

/* ── trust strip: /join/'s black stat strip, 62px ── */
.trust { background: var(--black); color: var(--paper); height: 62px; display: flex; align-items: center; justify-content: center; gap: 130px; }
.trust > div { display: flex; align-items: center; gap: 12px; }
.trust svg { color: var(--orange); }
.trust p { margin: 0; display: flex; flex-direction: column; }
.trust b { font: 700 12px/13px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange); }
.trust small { font: 500 11px/13px var(--label); letter-spacing: 1px; text-transform: uppercase; color: rgba(245, 239, 227, .7); }

/* ── collection block: /join/'s centred section head (navy display + orange italic, Barlow lede) ── */
.seo { padding: 80px 40px 72px; text-align: center; }
.seo h2 { margin: 0 0 22px; font: 800 68px/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.seo p { margin: 0 auto 14px; font: 400 18px/27px var(--sans); color: var(--ink); max-width: 700px; }

/* ── footer: navy, 3px orange rule, the extruded paper wordmark (elonmuscular.com footer) ── */
.ft { background: var(--navy); color: var(--paper); padding: 40px 40px 26px; border-top: 3px solid var(--orange); }
.ft-poster { margin: 0 0 44px; font: 900 clamp(64px, 12.4vw, 180px)/.9 var(--display); text-align: center; color: var(--paper); letter-spacing: .005em; }
.ft-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.ft-news h3 { margin: 18px 0 8px; font: 900 36px/1 var(--display); text-transform: uppercase; }
.ft-news p { margin: 0 0 18px; font: 400 15px/22px var(--sans); color: rgba(245, 239, 227, .8); max-width: 360px; }
.ft-news form { display: flex; max-width: 420px; gap: 10px; }
.ft-news input { flex: 1; min-width: 0; height: 52px; background: rgba(245, 239, 227, .07); border: 1px solid var(--hair-2); color: var(--paper); padding: 0 14px; font: 400 14px var(--sans); }
.ft-news input::placeholder { color: rgba(245, 239, 227, .55); }
.ft-news button { height: 52px; padding: 0 24px; background: var(--orange); color: var(--black); font: 800 16px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--black); }
.soc { display: flex; gap: 16px; margin-top: 22px; font: 700 12px/1 var(--label); letter-spacing: 1.6px; color: rgba(245, 239, 227, .8); }
.ft-col { display: flex; flex-direction: column; gap: 12px; }
.ft-col h4 { margin: 0 0 6px; font: 700 12px/15px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--orange-text); padding-bottom: 6px; border-bottom: 1px solid var(--orange); width: max-content; }
.ft-col a { font: 700 16px/1.2 var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--paper); }
.ft-col a:hover { color: var(--orange); }
.ft-legal { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--hair); font: 600 11px/16px var(--label); letter-spacing: 1px; text-transform: uppercase; color: rgba(245, 239, 227, .6); }
.ft-legal p { margin: 0; }

/* ── phone: 2 x 177, 12 / 32, 12px margins ── */
@media (max-width: 760px) {
  .d { display: none; } .m { display: inline; }
  .announce { font-size: 10px; letter-spacing: 1.4px; }
  .nav-row { height: 64px; padding: 0 16px; grid-template-columns: 40px 1fr 40px; }
  .nav-left .nl, .nav-left .pill, .nav-right .search, .wm-tag { display: none; }
  .wm { font-size: 24px; }
  .nav-right { gap: 0; }
  .m-search { display: block; padding: 0 16px 10px; }
  .m-search .search { width: 100%; height: 38px; }
  .m-chips { display: flex; gap: 8px; padding: 0 16px 12px; overflow-x: auto; scrollbar-width: none; }
  .chip { flex: none; height: 32px; padding: 0 14px; border: 1px solid var(--hair-2); display: grid; place-items: center; font: 600 12px/1 var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--paper); }
  .m-chips .pill { flex: none; height: 32px; }
  .hero { height: 440px; }
  .hero-txt { left: 16px; right: 16px; bottom: 22px; }
  .hero h1 { font-size: 44px; margin: 4px 0 18px; }
  .hero-btns { flex-direction: column; gap: 14px; }
  .btn { width: 100%; font-size: 15px; }
  .toolbar { padding: 0; gap: 0; border-bottom: 1px solid var(--line); background: var(--paper-2); }
  .tb-filters, .tb-sort { flex: 1; height: 48px; justify-content: center; margin: 0; }
  .tb-filters { border-right: 1px solid var(--line); }
  .m-count { display: block; text-align: center; margin: 22px 0 16px; font: 600 13px/26px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-2); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 32px; padding: 0 12px; }
  .meta .t { font-size: 16px; }
  .meta .p { font-size: 19px; }
  .plus { width: 32px; height: 32px; }
  .trust { height: auto; padding: 16px; gap: 14px; justify-content: space-between; }
  .trust > div { gap: 8px; } .trust svg, .trust img { width: 18px; height: 18px; }
  .trust small { display: none; }
  .seo { padding: 56px 16px 48px; } .seo h2 { font-size: 44px; } .seo p { font-size: 16px; line-height: 25px; }
  .ft { padding: 32px 16px 24px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-news { grid-column: 1 / -1; }
  .ft-legal { flex-direction: column; margin-top: 40px; }
}

/* ── drawers: paper, navy ink, the 3px orange rule on the edge ── */
body.locked { overflow: hidden; }
.bag { position: relative; }
.bag .dot { position: absolute; top: -6px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--orange); color: var(--black); font: 700 11px/16px var(--label); text-align: center; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(3, 42, 70, .55); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100%); color: var(--ink); overflow-y: auto; padding: 22px 26px 28px; border-left: 3px solid var(--orange);
  background: var(--paper) radial-gradient(circle, rgba(17, 14, 11, .05) 1px, transparent 1.3px) 0 0 / 6px 6px; }
.drawer .x { position: absolute; top: 10px; right: 14px; font: 300 32px/1 var(--sans); width: 40px; height: 40px; color: var(--ink); }
.drawer h3 { margin: 4px 0 6px; font: 900 32px/1 var(--display); text-transform: uppercase; padding-right: 40px; color: var(--ink); }
.drawer h3 span { font: 600 12px var(--label); letter-spacing: 1.6px; color: var(--ink-3); margin-left: 8px; text-shadow: none; }
.qa-img { aspect-ratio: 4 / 5; background: #fff; margin: 34px 0 22px; outline: 1px solid var(--line); box-shadow: 8px 8px 0 var(--navy); }
.qa-img img { width: 100%; height: 100%; object-fit: cover; }
.qa-p { --xo: .07em; margin: 0 0 16px; font: 900 28px/1 var(--display); color: var(--orange); }
.lbl { margin: 0 0 8px; font: 700 12px/15px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.sizes, .szs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sizes button, .szs button { min-width: 52px; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); font: 700 14px/1 var(--label); letter-spacing: 1px; transition: background .15s, color .15s; }
.sizes button:hover, .szs button:hover { border-color: var(--navy); }
.sizes button.on, .szs button.on { background: var(--navy); border-color: var(--navy); color: var(--paper); box-shadow: 3px 3px 0 var(--orange); }
.add { width: 100%; min-height: 56px; background: var(--orange); color: var(--black); font: 800 17px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; margin-top: 6px; box-shadow: 4px 4px 0 var(--black); }
.add:disabled { background: var(--paper-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.fine { margin: 12px 0 0; font: 400 13px/19px var(--sans); color: var(--ink-2); }
.msg { color: #b3260b; }
.lines { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 14px; }
.lines li { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: start; }
.lines img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; background: #fff; outline: 1px solid var(--line); }
.lines b { display: block; font: 800 16px/1.1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.lines small { display: block; margin-top: 2px; font: 600 12px var(--label); letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.qty { display: inline-flex; align-items: center; gap: 12px; margin-top: 8px; border: 1px solid var(--line-2); background: #fff; padding: 2px 8px; font: 700 14px var(--label); }
.qty button { width: 20px; height: 24px; font-size: 16px; }
.lp { font: 800 18px var(--display); color: var(--orange); }
.drawer dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; margin: 6px 0 18px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 13px var(--label); letter-spacing: 1.2px; text-transform: uppercase; }
.drawer dt, .drawer dd { margin: 0; } .drawer dd { text-align: right; }
.drawer .tot { font: 900 24px/1 var(--display); letter-spacing: .02em; color: var(--ink); }
.drawer dd.tot { color: var(--orange); }
.empty { margin: 30px 0 18px; color: var(--ink-2); }

/* ── product page: Playboy's measured grid (media 599 at x40, image at x76, info 530 at x870), /join/ skin ── */
.pdp-wrap { padding-bottom: 20px; }
.crumbs { padding: 26px 40px 30px; font: 600 12px/20px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.crumbs a:hover { color: var(--orange); } .crumbs span { color: var(--ink); }
.pdp { display: grid; grid-template-columns: 599px 530px; justify-content: space-between; gap: 40px; padding: 0 40px; }
.pdp-media { padding-left: 36px; min-width: 0; }
.pdp-main { aspect-ratio: 4 / 5; background: #fff; outline: 1px solid var(--line); box-shadow: 8px 8px 0 var(--navy); }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.thumbs { display: flex; gap: 8px; margin-top: 22px; }
.thumbs button { width: 68px; height: 83px; padding: 0; background: #fff; outline: 1px solid var(--line); }
.thumbs button.on { outline: 2px solid var(--orange); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-info { min-width: 0; }
.pdp-info h1 { margin: 0; font: 900 52px/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink); }
.price { --xo: .07em; margin: 18px 0 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); font: 900 34px/1 var(--display); letter-spacing: .02em; color: var(--orange); }
.opt { margin: 22px 0 10px; font: 700 12px/16px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.opt span { color: var(--ink); }
.sws { display: flex; gap: 10px; }
.sws a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 2px solid transparent; }
.sws a.on { border-color: var(--orange); }
.sws i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-2); }
.szs { margin-bottom: 0; }
.qbox { display: inline-flex; align-items: center; border: 1px solid var(--line-2); background: #fff; height: 42px; }
.qbox button { width: 42px; height: 42px; font-size: 18px; color: var(--ink); }
.qbox span { width: 48px; text-align: center; font: 700 16px/42px var(--label); }
.atc, .buy { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; font: 800 17px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; transition: transform .22s cubic-bezier(.19, 1, .22, 1), box-shadow .22s cubic-bezier(.19, 1, .22, 1); }
.atc { margin-top: 32px; background: var(--orange); color: var(--black); box-shadow: 4px 4px 0 var(--black); }
.buy { margin-top: 16px; color: var(--paper); background: var(--navy); box-shadow: 4px 4px 0 var(--black); }
.atc:hover:not(:disabled), .buy:hover:not(:disabled) { transform: translate(-1px, -1px); }
.atc:disabled, .buy:disabled { background: var(--paper-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; }
.tabs { padding: 88px 40px 0; }
.tab-row { display: flex; gap: 56px; border-bottom: 1px solid var(--line); }
.tab-row button { padding: 0 0 16px; font: 700 14px/17px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab-row button.on { color: var(--ink); border-color: var(--orange); }
.tab { display: grid; grid-template-columns: 655px 1fr; gap: 69px; padding-top: 30px; font: 400 16px/25px var(--sans); color: var(--ink); }
.tab[hidden] { display: none; }
.tab p { margin: 0; } .tab ul { margin: 0; padding-left: 18px; } .tab li { margin-bottom: 4px; } .tab li::marker { color: var(--orange); }
.also { padding: 88px 40px 72px; }
.also h2 { margin: 0 0 32px; font: 800 56px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; text-align: center; color: var(--ink); }
.also-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 0 28px; }
@media (max-width: 1180px) { .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pdp-media { padding-left: 0; } .tab { grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 760px) {
  .crumbs { padding: 16px 16px 14px; }
  .pdp { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0 16px; }
  .pdp-main { box-shadow: 6px 6px 0 var(--navy); }
  .pdp-info h1 { font-size: 38px; }
  .tabs { padding: 52px 16px 0; } .tab-row { gap: 22px; overflow-x: auto; } .tab-row button { white-space: nowrap; }
  .tab { grid-template-columns: 1fr; gap: 16px; }
  .also { padding: 56px 12px 44px; } .also h2 { font-size: 36px; } .also-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* italic display words lean into the next word; give them their own space back */
:is(.hero h1, .seo h2, .ft-news h3, .also h2) em { padding-right: .1em; }
/* the special-order line is information, not a price */
.card .meta .p.so { font: 700 13px/18px var(--label); letter-spacing: 1.4px; text-transform: uppercase; color: var(--navy); text-shadow: none; margin-top: 6px; }
/* the way back to elonmuscular.com (founder 14 Oct: "top bar should have a button back to home") */
.nl.home { color: var(--orange); padding-right: 16px; border-right: 1px solid var(--hair-2); }
.nl.home:hover { color: var(--paper); }
.chip.home { border-color: var(--orange); color: var(--orange); }

/* category state + filter bar + sort select */
.nl.on { color: var(--orange); box-shadow: inset 0 -2px 0 var(--orange); }
.pill.on { box-shadow: 3px 3px 0 var(--orange), 0 0 0 2px var(--paper); }
.card[hidden] { display: none; }
.fbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 40px 24px; }
.fbar .chip { height: 34px; padding: 0 14px; display: inline-grid; place-items: center; border: 1px solid var(--line-2); font: 600 12px/1 var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); }
.fbar .chip.on, .m-chips .chip.on { background: var(--navy); border-color: var(--navy); color: var(--paper); }
.tb-sort select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23053557' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; padding-right: 20px; font: 600 13px/26px var(--label); letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.toolbar { padding-bottom: 24px; }
.grid { margin-bottom: 80px; }
@media (max-width: 760px) { .fbar { padding: 14px 12px 0; } .tb-sort select { font-size: 12px; } }

.soc a { color: rgba(245, 239, 227, .85); text-decoration: underline; text-underline-offset: 3px; }
.soc a:hover { color: var(--orange); }
.nl-msg { margin: 12px 0 0; font: 600 14px/20px var(--sans); color: var(--orange-text); }
.ft-news button:disabled { opacity: .6; }

/* the site's own menu (site/chrome/header.html .navmenu, measured live 14 Oct): navy panel from the right on a 3px orange
   rule, the wordmark top-left, Big Shoulders 800 40px links with the extrusion on hairlines, the orange Join with a 6px
   black offset, Sign in as a tracked label */
.drawer.menud { right: 0; left: auto; width: min(342px, 88vw); background: var(--navy); color: var(--paper); border-left: 3px solid var(--orange); border-right: 0; padding: 22px 22px 28px; }
.menud-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.menud-wm { font: 900 20px/1 var(--display); color: var(--orange); letter-spacing: .01em; }
.drawer.menud .x { position: static; color: var(--paper); font-size: 34px; }
.menu-list { display: flex; flex-direction: column; }
.menu-list a { padding: 10px 4px; border-bottom: 1px solid var(--hair); font: 800 40px/1.1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--paper);
  text-shadow: calc(var(--xo)*.25) calc(var(--xo)*.25) 0 var(--xc), calc(var(--xo)*.5) calc(var(--xo)*.5) 0 var(--xc), calc(var(--xo)*.75) calc(var(--xo)*.75) 0 var(--xc), var(--xo) var(--xo) 0 var(--xc); }
.menu-list a:hover, .menu-list a.here { color: var(--orange); }
.menud-join { display: flex; align-items: center; justify-content: center; margin-top: 32px; min-height: 60px; background: var(--orange); color: var(--black); font: 800 28px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; box-shadow: 6px 6px 0 var(--black); }
.menud-sign { display: inline-block; margin-top: 28px; font: 700 13px/1 var(--label); letter-spacing: 2px; text-transform: uppercase; color: var(--paper-2, #d9d1c4); }
.menud-sign:hover { color: var(--orange); }
/* banner without its text: a quieter shade */
.hero::after { background: linear-gradient(rgba(3, 42, 70, 0) 55%, rgba(3, 42, 70, .55)); }
/* no banner (founder 14 Oct: "remove the picture off the top, just get straight to [the filters]") */
.toolbar { padding-top: 32px; }
@media (max-width: 760px) { .toolbar { padding-top: 0; } }
.fbar[hidden] { display: none; }
/* top bar is just menu · logo · search · bag (founder 14 Oct: "remove all this from the top bar") */
.nav-left { gap: 0; }