/** Shopify CDN: Minification failed

Line 35:0 Unexpected "@media"

**/
/* ROUGHCUT product pages — generated by build-products.py. Do not hand-edit. */

.rc-product /* ══════════════════════════════════════════════════════════════
   ROUGHCUT — PRODUCT TEMPLATE
   One template, every pattern.

   The old page had twelve sections and repeated the same boilerplate
   on all 37 products. This has six, and asks one question at a time:
   what is it → can I make it → how does it arrive → what do I do
   with it → who helps if it goes wrong.

   Everything above the fold exists to answer "should I buy this".
   Everything below it exists to stop the reasons not to.
   ══════════════════════════════════════════════════════════════ */
:root{
  --ink:#2A2A30; --bone:#F5F5F7; --grey:#95959C; --line:#4B4B53;
  --card:#42424C; --gold:#C9A227; --green:#22C55E;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --s24:24px;
  --lift:0.16; --rim:0.09;
}
.rc-product *{box-sizing:border-box}
.rc-product{-webkit-text-size-adjust:100%;background:var(--ink);scrollbar-width:none}

.rc-product{margin:0;background:var(--ink);color:var(--bone);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:76px}
.rc-product /* room for the sticky bar on phones */
@media(min-width:860px){
.rc-product{padding-bottom:0}}
.rc-product img{max-width:100%;display:block}
.rc-product a{color:inherit;text-decoration:none}
.rc-product .wrap{max-width:1120px;margin:0 auto;padding:0 var(--s24)}
@media(max-width:700px){
.rc-product{--s24:22px}}
.rc-product h1, .rc-product h2, .rc-product h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;margin:0}
.rc-product h1{font-size:clamp(34px,7.4vw,54px);line-height:1.04}
.rc-product h2{font-size:clamp(23px,4.4vw,34px);line-height:1.1}
.rc-product em{font-style:italic}
.rc-product .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.rc-product .pad{padding:clamp(46px,8vw,84px) 0}
.rc-product [data-rv]{opacity:0;transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,0,.2,1),transform .7s cubic-bezier(.2,0,.2,1)}
.rc-product [data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.rc-product [data-rv]{opacity:1;transform:none;transition:none}}
.rc-product /* ── Instagram warning — the single most expensive support ticket ── */
.igBar{display:none;background:#35353D;border-bottom:1px solid var(--line);
  padding:11px var(--s24);font-size:12.5px;align-items:center;gap:11px}
.rc-product .igBar.on{display:flex}
.rc-product .igBar b{font-weight:600}
.rc-product .igDot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.rc-product .igBar .x{margin-left:auto;width:26px;height:26px;border:0;background:none;
  color:var(--grey);font-size:17px;cursor:pointer;line-height:1;flex:none}
.rc-product /* ══ 1 · THE BUY BLOCK ═══════════════════════════════════════════
   Everything needed to decide, in one screen. On a phone the garment
   comes first because that is what they came for; the price and the
   button sit directly under it, not a scroll away. */
.buy{display:grid;gap:26px;grid-template-columns:1fr;padding-top:clamp(20px,5vw,44px)}
@media(min-width:860px){
.rc-product .buy{grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:56px}}
.rc-product .shots{position:relative}
.rc-product .hero{position:relative;aspect-ratio:1;border-radius:22px;overflow:hidden;
  background:var(--card);display:grid;place-items:center}
.rc-product .hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(58% 52% at 50% 46%,rgba(245,245,247,var(--lift)) 0%,transparent 70%)}
.rc-product .hero img{position:relative;width:92%;height:92%;object-fit:contain;
  filter:drop-shadow(0 0 1px rgba(245,245,247,var(--rim)))}
.rc-product /* Three kinds of image, three treatments. A cut-out floats on the tile with a
   light behind it. A photograph is the subject — it fills the frame, corner to
   corner, and the glow would only wash it out. A measurement chart has to stay
   readable, so it is contained rather than cropped. */
.hero.fill img{width:100%;height:100%;object-fit:cover;filter:none}
.rc-product .hero.fill::before{opacity:0}
.rc-product .hero.doc{background:#F5F5F7}
.rc-product .hero.doc img{width:100%;height:100%;object-fit:contain;filter:none}
.rc-product .hero.doc::before{opacity:0}
.rc-product .thumbs button.cut img{object-fit:contain;padding:9%}
.rc-product .thumbs{display:flex;gap:9px;margin-top:9px}
.rc-product .thumbs button{flex:1;aspect-ratio:1;border-radius:11px;overflow:hidden;padding:0;
  border:1px solid var(--line);background:var(--card);cursor:pointer;opacity:.62;
  transition:opacity .25s,border-color .25s}
.rc-product .thumbs button.on{opacity:1;border-color:#7A7A86}
.rc-product .thumbs img{width:100%;height:100%;object-fit:cover}
.rc-product .info h1{margin:10px 0 0}
.rc-product .sub{color:var(--grey);font-size:15.5px;line-height:1.68;margin:14px 0 0;max-width:46ch}
.rc-product /* skill — five marks, not a paragraph about difficulty */
.skill{display:flex;align-items:center;gap:11px;margin:20px 0 0}
.rc-product .pips{display:flex;gap:4px}
.rc-product .pips i{width:17px;height:4px;border-radius:2px;background:rgba(245,245,247,.18)}
.rc-product .pips i.on{background:var(--green)}
.rc-product .skill .t{font-size:12px;letter-spacing:.04em;color:var(--grey)}
.rc-product .skill .t b{color:var(--bone);font-weight:500}
.rc-product /* format — a real choice, priced, with the reason for each */
.fmt{display:grid;gap:9px;margin:24px 0 0}
.rc-product .fmt label{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:13px;background:#35353D;
  transition:border-color .2s,background .2s}
.rc-product .fmt label:has(input:checked){border-color:var(--green);background:rgba(34,197,94,.07)}
.rc-product .fmt input{margin:2px 0 0;accent-color:var(--green);flex:none}
.rc-product .fmt .n{font-size:14.5px}
.rc-product .fmt .d{font-size:12.5px;color:var(--grey);line-height:1.55;margin-top:2px}
.rc-product .fmt .pr{margin-left:auto;font-size:15px;font-variant-numeric:tabular-nums;flex:none}
.rc-product /* A real deadline, not a fake one. Printed patterns go out in batches on
   Mondays — so there IS a genuine cut-off, and it only shows when the
   printed option is selected. The CMA bans countdowns that expire and then
   quietly roll on; this one resets because the next Monday genuinely is a
   different print run. */
.run{display:none;align-items:center;gap:9px;margin:11px 0 0;padding:11px 14px;
  border-radius:11px;background:rgba(201,162,39,.09);
  border:1px solid rgba(201,162,39,.3);font-size:12.5px;line-height:1.5}
.rc-product .run.on{display:flex}
.rc-product .run .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 0 rgba(201,162,39,.55);animation:runp 2.4s infinite}
@keyframes runp{
70%{box-shadow:0 0 0 7px rgba(201,162,39,0)}
100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}
.rc-product .run b{color:#E8C766;font-weight:600;font-variant-numeric:tabular-nums}
.rc-product .cta{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin:20px 0 0;padding:17px 22px;border:0;border-radius:12px;background:var(--green);
  color:#06120a;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;cursor:pointer;
  transition:transform .2s,filter .2s}
.rc-product .cta:hover{transform:translateY(-2px);filter:brightness(1.06)}
.rc-product .reassure{display:flex;gap:16px;flex-wrap:wrap;margin:14px 0 0;font-size:12px;color:var(--grey)}
.rc-product .reassure span{display:flex;align-items:center;gap:6px}
.rc-product .reassure svg{width:13px;height:13px;stroke:var(--green);fill:none;stroke-width:2}
.rc-product /* ── sticky bar: on a phone the button must never be more than a thumb away ── */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:12px;
  align-items:center;padding:11px var(--s24) calc(11px + env(safe-area-inset-bottom));
  background:rgba(36,36,42,.93);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .32s cubic-bezier(.2,0,.2,1)}
.rc-product .stick.up{transform:none}
.rc-product .stick .sn{font-size:13px;line-height:1.25;min-width:0}
.rc-product .stick .sn b{display:block;font-size:15px;font-variant-numeric:tabular-nums;font-weight:500}
.rc-product .stick .sn span{color:var(--grey);font-size:11.5px}
.rc-product .stick .cta{width:auto;margin:0 0 0 auto;padding:14px 20px;flex:none}
@media(min-width:860px){
.rc-product .stick{display:none}}
.rc-product /* ══ 2 · WHAT YOU'LL LEARN ═══════════════════════════════════════ */
.learn{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;grid-template-columns:1fr}
@media(min-width:620px){
.rc-product .learn{grid-template-columns:1fr 1fr}}
.rc-product .learn div{background:#2F2F36;padding:16px 18px;display:flex;gap:11px;align-items:flex-start;
  font-size:14px;line-height:1.5}
.rc-product .learn i{color:var(--green);font-style:normal;flex:none}
.rc-product /* ══ 3 · THE FILM ════════════════════════════════════════════════ */
.film{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  background:#1B1B1F;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.rc-product .film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .4s}
.rc-product .film.on img{opacity:0;pointer-events:none}
.rc-product .film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rc-product .play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:none;
  cursor:pointer;transition:opacity .3s}
.rc-product .film.on .play{opacity:0;pointer-events:none}
.rc-product .play span{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid rgba(245,245,247,.85);background:rgba(16,16,18,.36);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:transform .3s}
.rc-product .play svg{width:25px;height:25px;fill:var(--bone);margin-left:3px}
.rc-product .play:hover span{transform:scale(1.07)}
.rc-product /* ══ 4 · THE FACTS ═══════════════════════════════════════════════
   Fabric and formats side by side. Two columns of plain rows beats
   four boxed panels with icons — it is read, not decorated. */
.facts{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:760px){
.rc-product .facts{grid-template-columns:1fr 1fr;gap:52px}}
.rc-product .rows{margin:14px 0 0;border-top:1px solid var(--line)}
.rc-product .rows div{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);
  font-size:14px;line-height:1.5}
.rc-product .rows .k{color:var(--grey);flex:none;width:96px}
.rc-product .rows b{font-weight:500}
.rc-product .note{font-size:13px;color:var(--grey);line-height:1.6;margin:14px 0 0}
.rc-product /* ══ 5 · GOES WELL WITH ══════════════════════════════════════════ */
.with{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){
.rc-product .with{gap:9px}}
.rc-product .wc{border-radius:14px;overflow:hidden;background:var(--card);
  border:1px solid transparent;transition:border-color .3s,transform .3s}
.rc-product .wc:hover{border-color:#63636E;transform:translateY(-3px)}
.rc-product .wc .s{position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.rc-product .wc .s::before{content:'';position:absolute;inset:0;
  background:radial-gradient(58% 52% at 50% 46%,rgba(245,245,247,var(--lift)) 0%,transparent 70%)}
.rc-product .wc img{position:relative;width:94%;height:94%;object-fit:contain}
.rc-product .wc .m{padding:10px 12px 14px}
.rc-product .wc .m p{margin:0 0 3px;font-size:13px;line-height:1.3}
.rc-product .wc .m span{font-size:12.5px;color:var(--grey)}
.rc-product /* ══ 6 · SUPPORT ═════════════════════════════════════════════════ */
/* Currency line — small, factual, and the reason a US buyer doesn't bounce. */
.fx{font-size:12px;color:var(--grey);margin:11px 0 0;letter-spacing:.02em}
.rc-product .fmt .d b{color:var(--bone);font-weight:500}
.rc-product /* The warnings that used to be a red box with a ⚠ on every product.
   Same information, said once, in a voice rather than a panel. */
.cut{border-left:2px solid var(--gold);padding:2px 0 2px 18px}
.rc-product .cut .ck{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:9px}
.rc-product .cut p{margin:0 0 10px;font-size:14px;line-height:1.62;color:var(--grey);max-width:58ch}
.rc-product .cut b{color:var(--bone);font-weight:500}
.rc-product .cut .new{color:var(--grey);font-size:13.5px;margin:0}
.rc-product .cut .new a{color:var(--bone);border-bottom:1px solid rgba(245,245,247,.34)}
.rc-product .help{border:1px solid rgba(34,197,94,.32);border-radius:18px;padding:24px 22px;
  background:linear-gradient(168deg,rgba(34,197,94,.08) 0%,rgba(53,53,61,.85) 55%)}
.rc-product .help h2{font-size:26px;margin-bottom:8px}
.rc-product .help p{color:var(--grey);font-size:14px;line-height:1.65;margin:0;max-width:52ch}
.rc-product .btnG{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:13px 20px;
  border-radius:11px;background:var(--green);color:#06120a;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:transform .22s}
.rc-product .btnG:hover{transform:translateY(-2px)}
.rc-product footer{padding:64px 0 44px;border-top:1px solid var(--line);margin-top:clamp(48px,8vw,90px)}
.rc-product .fgrid{display:grid;gap:30px;grid-template-columns:1fr 1fr}
@media(min-width:820px){
.rc-product .fgrid{grid-template-columns:repeat(4,1fr);gap:40px}}
.rc-product footer h4{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);
  margin:0 0 13px;font-weight:400;font-family:var(--sans)}
.rc-product footer a{display:block;font-size:14px;opacity:.82;margin-bottom:9px}
.rc-product footer a:hover{opacity:1}
.rc-product .fwa{color:var(--green)!important;opacity:1!important}
.rc-product /* A real button, not a green sentence. The footer is where people land when
   they are stuck, and there was nothing on it that looked pressable. */
.fbtn{display:inline-flex;align-items:center;gap:9px;background:var(--green);
  color:#08210F!important;opacity:1!important;padding:13px 18px;border-radius:999px;
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  margin:2px 0 0;transition:transform .2s,box-shadow .2s;
  box-shadow:0 8px 22px rgba(34,197,94,.18)}
.rc-product .fbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(34,197,94,.26)}
.rc-product .fbtn svg{width:16px;height:16px;fill:#08210F;flex:none}
@media(max-width:819px){
.rc-product .fbtn{width:100%;justify-content:center}}
.rc-product .fbot{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:11.5px;color:var(--grey)}
.rc-product /* ══ lifted from roughcut-product-ushanka.html ═════════════════════════════
   These three blocks were designed and approved on the Ushanka page, whose
   CSS never made it back into the Core Hoodie template. Without them the
   single-variant row, the format warning and the early-pattern panel render
   as unstyled text on nine pages. Verbatim, not re-derived. */

/* single variant: a stated fact, not a fake choice between one option */
.only{display:flex;align-items:flex-start;gap:12px;margin:24px 0 0;padding:14px 15px;
  border:1px solid var(--line);border-radius:13px;background:#35353D}
.rc-product .only .n{font-size:14.5px}
.rc-product .only .d{font-size:12.5px;color:var(--grey);line-height:1.55;margin-top:2px}
.rc-product .only .pr{margin-left:auto;font-size:15px;font-variant-numeric:tabular-nums;flex:none}
.rc-product /* the warning sits ABOVE the button — after it, it is an excuse, not a warning */
.caveat{display:flex;gap:11px;align-items:flex-start;margin:16px 0 0;padding:13px 15px;
  border:1px solid rgba(201,162,39,.42);border-radius:12px;background:rgba(201,162,39,.08);
  font-size:13px;line-height:1.55}
.rc-product .caveat b{color:#E8C766;font-weight:600}
.rc-product .caveat svg{width:15px;height:15px;stroke:#E8C766;fill:none;stroke-width:2;flex:none;margin-top:1px}
.rc-product /* the early patterns own their age rather than hiding it */
.origin{display:grid;gap:20px;grid-template-columns:1fr;align-items:center;
  border:1px solid var(--line);border-radius:20px;padding:26px 24px;
  background:linear-gradient(168deg,#3A3A43 0%,#2C2C33 60%)}
@media(min-width:720px){
.rc-product .origin{grid-template-columns:auto 1fr;gap:28px;padding:32px 30px}}
.rc-product .stamp{width:96px;height:96px;border-radius:50%;border:1.5px solid rgba(245,245,247,.5);
  display:grid;place-items:center;text-align:center;font-family:var(--serif);
  font-size:14px;line-height:1.2;color:var(--bone);flex:none}
.rc-product .origin h2{font-size:clamp(24px,4.4vw,32px);margin-bottom:10px}
.rc-product .origin p{margin:0 0 10px;font-size:14px;line-height:1.65;color:var(--grey);max-width:58ch}
.rc-product .origin p:last-child{margin-bottom:0}
.rc-product .origin b{color:var(--bone);font-weight:500}
.rc-product .origin a{color:var(--bone);border-bottom:1px solid rgba(245,245,247,.34)}
.rc-product /* ══ additions for the generated pages ═════════════════════════════════════
   Everything above is the approved Core Hoodie design, untouched. These are
   the cases that one product could not show: bundles, fabric lists with no
   key column, and the marker on fabric text I drafted rather than Jack. */

/* fabric rows with no key — the source lists read as sentences, not pairs */
.rows.plain div{grid-template-columns:1fr}
.rc-product .rows.plain .k{display:none}
.rc-product .facts.one{grid-template-columns:1fr}
.rc-product /* a visible, ugly-on-purpose marker on anything I wrote for Jack */
.draft{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:2px;
  background:var(--gold);color:#241F00;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;vertical-align:middle}
.rc-product /* ── what's inside a bundle ── */
.inc{display:grid;gap:11px;grid-template-columns:1fr}
@media(min-width:720px){
.rc-product .inc{grid-template-columns:repeat(2,1fr)}}
.rc-product /* width and min-width are stated explicitly. Specificity only wins for
   properties a rule actually sets: .rc-product .ic beat the nav's .ic on
   colour and padding, but never mentioned width, so 42px won and the card
   collapsed. Anything structural gets declared here. */
.bcard{display:block;width:auto;min-width:0;height:auto;box-sizing:border-box;
  border:1px solid var(--line);border-radius:5px;padding:16px 17px;
  background:var(--card);transition:transform .22s,border-color .22s}
.rc-product a.bcard:hover{transform:translateY(-2px);border-color:var(--grey)}
.rc-product .bcard .bct{font-family:var(--serif);font-size:20px;line-height:1.2}
.rc-product .bcard .bcn{display:inline-block;min-width:22px;color:var(--grey);font-family:var(--sans);
  font-size:11px;letter-spacing:.1em}
.rc-product .bcard .bcm{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  margin:7px 0 0}
.rc-product .bcard p{margin:9px 0 0;font-size:13.5px;line-height:1.55;color:#D6D6DB}
.rc-product /* ── explanatory panels ──
   Four weights of the same shape. .notice is the loudest (something is about
   to change and you should know before paying), .nofilm sits just under it,
   .quirk and .related are quiet — context, not warnings. */
.notice, .rc-product .nofilm, .rc-product .quirk, .rc-product .related{border:1px solid var(--line);border-radius:16px;
  padding:22px 22px 24px;background:#35353D}
.rc-product .notice{border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.07)}
.rc-product .nofilm{border-color:rgba(201,162,39,.32);background:rgba(201,162,39,.045)}
.rc-product .notice .ck, .rc-product .nofilm .ck{color:#E8C766}
.rc-product .notice p, .rc-product .nofilm p, .rc-product .quirk p, .rc-product .related p{margin:0;font-size:14px;line-height:1.7;
  color:#D6D6DB;max-width:66ch}
.rc-product .notice b, .rc-product .nofilm b, .rc-product .quirk b, .rc-product .related b{color:var(--bone);font-weight:600}
.rc-product .notice a, .rc-product .nofilm a, .rc-product .quirk a, .rc-product .related a{color:var(--bone);
  border-bottom:1px solid rgba(245,245,247,.34)}
.rc-product .vnote{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--grey)}
.rc-product .vnote b{color:var(--bone);font-weight:600}
.rc-product .bnote{margin:0;font-size:13.5px;line-height:1.65;color:var(--grey);
  border-left:2px solid var(--gold);padding-left:14px}
.rc-product .bnote b{color:var(--bone);font-weight:600}
.rc-product /* ── the collection contents table ── */
.clist{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rc-product .clist a, .rc-product .chead{display:grid;grid-template-columns:1fr 64px 118px;gap:10px;
  align-items:baseline;padding:12px 15px;border-bottom:1px solid var(--line)}
.rc-product .clist a:last-child{border-bottom:0}
.rc-product .chead{background:#35353D;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey)}
.rc-product .clist a:hover{background:#3A3A44}
.rc-product .cn{font-size:14.5px}
.rc-product .cs, .rc-product .cf{font-size:11.5px;color:var(--grey)}
.rc-product .free{display:inline-block;margin-left:7px;padding:1px 6px;border-radius:2px;
  border:1px solid var(--green);color:var(--green);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase}
@media(max-width:560px){
.rc-product .clist a, .rc-product .chead{grid-template-columns:1fr 92px}
.rc-product .cs{display:none}
}
.rc-product /* ── more than one film ──
   Stacked, four 16:9 players are three phone screens of scrolling before the
   fabric section is reachable. A rail keeps the section one screen tall. */
/* 14px read as a rendering glitch rather than a gap — two films looked like
   one broken one. They need enough air to be obviously separate things. */
.film + .film{margin-top:26px}
.rc-product .frail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain;touch-action:pan-x pan-y;
  margin:0 calc(var(--s24)*-1);padding:2px var(--s24) 4px}
.rc-product .frail::-webkit-scrollbar{display:none}
.rc-product .frail .film{flex:0 0 84%;scroll-snap-align:start;margin-top:0}
@media(min-width:720px){
.rc-product .frail .film{flex:0 0 46%}}
@media(min-width:1000px){
.rc-product .frail .film{flex:0 0 31%}}
.rc-product .swipe{margin:12px 0 0;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grey)}
@media(min-width:1000px){
.rc-product .swipe{display:none}}
.rc-product .fcap{display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;background:rgba(0,0,0,.22);position:relative;z-index:2}
.rc-product .fcap .cm{margin-left:auto;padding:2px 8px;border:1px solid var(--grey);border-radius:2px;
  font-size:9px;letter-spacing:.14em;color:var(--grey);flex:none}
.rc-product /* ── the way out ──
   Every film carries a real link to YouTube. Instagram's in-app browser is
   where most of this traffic lands and it blocks embeds often enough to
   matter; a player that does nothing when tapped is worse than no player.
   It is an ordinary <a>, so it works with JavaScript off too. */
.film{cursor:pointer}
.rc-product .ytOut{position:absolute;right:10px;bottom:10px;z-index:3;
  padding:7px 11px;border-radius:4px;background:rgba(20,20,24,.82);
  backdrop-filter:blur(6px);border:1px solid rgba(245,245,247,.22);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);
  transition:background .2s,border-color .2s}
.rc-product .ytOut:hover{background:rgba(20,20,24,.95);border-color:rgba(245,245,247,.5)}
.rc-product /* The link stays put once the player is running. It used to be hidden on
   .film.on, which meant that the moment an embed failed to paint there was
   nothing on screen at all and no way out. */
.film.on .ytOut{background:rgba(20,20,24,.72)}


/* ── page-level. This stylesheet only loads on pages rendering
      rc-product, so these cannot reach anywhere else. ── */
html{background:#2A2A30}
body{background:#2A2A30;padding-bottom:76px}
@media(min-width:860px){body{padding-bottom:0}}