/* GMK PACKAGE — the collection "app" (product page + checkout + order received).
   Same Stef Keycaps bones (ink outlines, hard shadows, Finest Vintage / Traced Groove / Epilogue / DM Mono), dressed as the
   set itself: kraft card, shipping-label white, postal red and airmail blue, a touch of warehouse yellow.
   Scoped to body.gx (product page) and body.checkout-page.gx (checkout, order received); nothing here touches other pages.

   CONTENTS (each section starts with a "===== NAME =====" line; later rules in the file deliberately win over earlier ones,
   so keep the order)
     Colours + paper background (body.gx variables) · APP HEADER · TITLES · GROUP-BUY PROGRESS (MOQ) · KITS · WARNING TAPE ·
     THE DISPATCH LINE · PACKING SLIP + NOTE · THE MANIFEST (scanner label) · THE LABELS (rubber stamps) · THE ROUTE (van) ·
     GROUP BUY (dispatch ticket) · CHECKOUT (cards) · reduced motion · CHECKOUT FLOW (steps panel + payment pop-up) ·
     B6 ACCESSORIES (teaser card + accessories page) · late one-off fixes (hero logo, route stops, header logo size, B4/B5/B6
     spacing, PACKED WITH CARE card)
   2026-10-30 cleanup: removed an unused animation (gxAccIn) and the stamp "is-again" state nothing sets. Nothing on screen changed. */

body.gx{
  --gx-paper:#e9d8b6;--gx-card:#fbf8f1;--gx-kraft:#c99a62;--gx-kraft-2:#b98450;--gx-kraft-lt:#e4c99b;
  --gx-ink:#3b2c22;--gx-red:#b8382e;--gx-red-2:#d9503f;--gx-blue:#2c5a8c;--gx-blue-2:#4677ad;--gx-yellow:#f2c230;--gx-night:#241d18;
  --fxv-fill:#fbf8f1;--fxv-alt:#d9503f;--fxg-fill:#d9503f;
  --airmail:repeating-linear-gradient(-45deg,var(--gx-red) 0 9px,var(--gx-card) 9px 18px,var(--gx-blue) 18px 27px,var(--gx-card) 27px 36px);
  --barcode:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2c22' d='M0 0h2v20H0zM3 0h1v20H3zM5 0h3v20H5zM9 0h1v20H9zM11 0h2v20h-2zM15 0h1v20h-1zM17 0h3v20h-3zM21 0h1v20h-1zM23 0h2v20h-2zM26 0h3v20h-3zM31 0h1v20h-1zM33 0h2v20h-2zM36 0h1v20h-1zM38 0h3v20h-3zM43 0h2v20h-2zM46 0h1v20h-1zM48 0h3v20h-3zM52 0h1v20h-1zM54 0h2v20h-2zM58 0h2v20h-2z'/%3E%3C/svg%3E");
  background-color:var(--gx-paper)!important;
  /* corrugated card: faint flutes under the grain. One small tile repeated (not a gradient): every flute is drawn from the very same
     pixels, so none comes out thicker or fainter than the next at any zoom. The 8px period is a whole number of device pixels on
     every common screen density (1, 1.25, 1.5, 1.75, 2, 2.625, 3x), so the tiles never drift; the flutes start at the page's left
     edge and run unbroken from top to bottom. */
  --gx-flute:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='2' height='8' fill='%233b2c22' fill-opacity='.045'/%3E%3C/svg%3E");
  background-image:var(--gx-flute)!important;background-size:8px 8px!important;background-position:0 0!important;background-repeat:repeat!important}
html:has(body.gx){background:#e9d8b6}

/* ================= APP HEADER (identical on the product page, checkout and order received) ================= */
/* the pill's own paper ends in ink along its bottom edge, so no sliver of white can show between the airmail stripe and the border */
html body header.nav.nav--app{background-color:var(--gx-card,#fbf8f1)!important;background-image:linear-gradient(to top,#3b2c22 0 3px,transparent 3px)!important;
  background-size:auto!important;background-repeat:no-repeat!important}
/* airmail edge along the bottom of the pill: a layer with the pill's own radius, so the stripe follows the rounded ends. It reaches
   1px under the border all round (the pill clips it at the border's inner edge), so the stripe meets the border with no gap */
html body header.nav.nav--app:after{content:""!important;display:block!important;position:absolute!important;inset:-1px!important;width:auto!important;height:auto!important;
  z-index:0!important;pointer-events:none!important;border-radius:9999px!important;opacity:1!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  -webkit-mask:none!important;mask:none!important;
  background:linear-gradient(#3b2c22,#3b2c22) left 0 bottom 7px/100% 1.5px no-repeat,
    repeating-linear-gradient(-45deg,#b8382e 0 7px,#fbf8f1 7px 14px,#2c5a8c 14px 21px,#fbf8f1 21px 28px) left 0 bottom 0/100% 7px no-repeat!important}
/* Everything is centred in the band ABOVE the airmail stripe: the stripe + its ink rule take the bottom 7.5px of the pill, so the
   centre line is 3.75px above the pill's own middle (the logo another 1px up, for its sticker shadow). Logo | divider | name are
   spaced evenly from the sticker's visible edge (the glyph is a square at the left of the image box), not from the box. */
/* the name sits right beside the logo (no divider line), and N° 001 · GROUP BUY starts on the same line as GMK PACKAGE, tucked
   close under it like the footer's GMK PACKAGE / DESIGNED BY STEFAN SAMOS. It starts the footer's distance (19px) from the sticker's
   visible edge: the logo glyph is the square at the left of its image box, and its die-cut reaches 5px past it */
html body header.nav.nav--app .app-id{position:absolute;left:75px;top:calc(50% - 3.75px);transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding-left:0;border-left:0;text-align:left;color:#3b2c22;text-decoration:none;line-height:1;z-index:2;white-space:nowrap}
html body header.nav.nav--app .app-id b{font:400 15px/1 var(--f-sub);letter-spacing:.035em;font-synthesis:none;position:relative;left:-.1em}
/* N° 001 · GROUP BUY: a quiet line, always shorter than GMK PACKAGE above it, starting on the same edge (sk-menu.js lines the first letters up
   and tightens the spacing further if a font runs wide) */
html body header.nav.nav--app .app-id small{font:500 5.6px/1 "DM Mono",monospace;letter-spacing:.14em;opacity:.72}
html body header.nav.nav--app .stef-header-mark{top:calc(50% - 3.75px)!important}
html body header.nav.nav--app .nav-links{top:calc(50% - 3.75px)!important}
html body header.nav.nav--app .nav-links a{color:#3b2c22}
html body header.nav.nav--app .nav-links a:after{display:none!important}
html body header.nav.nav--app .nav-links a:hover{color:#b8382e}
html body header.nav.nav--app .nav-links a.is-current{color:#fbf8f1!important}
html body header.nav.nav--app .sk-navblob{background:#b8382e}
/* ORDER STATUS: the home page's button (retro3.css: same type, arrow, lift on hover, press on click), on this nav's centre line,
   as tall as the red bubbles behind the links (26px) and in their red */
html body header.nav.nav--app a.nav-cta{top:0!important;bottom:7.5px!important;height:26px!important;min-height:26px!important;max-height:26px!important;background:#b8382e!important;
  font-family:"DM Mono",monospace!important;font-size:8px!important;font-weight:400!important;line-height:1!important;letter-spacing:.10em!important}   /* the nav links' own type (header-fix.css) */
html body header.nav.nav--app a.nav-cta:hover,html body header.nav.nav--app a.nav-cta:focus-visible{background:#b8382e!important}
html body header.nav.nav--app .nav-links{left:auto!important;right:var(--gx-links-r,176px)!important;transform:translateY(-50%)!important}
@media(max-width:1080px){html body header.nav.nav--app .nav-links{right:168px!important}}
/* the six GMK links sit exactly 22px apart at every width where they show (801px and up): the same spacing on every screen, never wider on big ones */
html body header.nav.nav--app .nav-links{gap:22px!important}
/* phones: N° 001 · GROUP BUY stays under the name, as on wide screens */
@media(max-width:700px){html body header.nav.nav--app .app-id{left:67px;padding-left:0}html body header.nav.nav--app .app-id b{font-size:14px}}

/* ================= TITLES: label white + postal red; section bars become airmail tape ================= */
body.gx .section-heading h2 em,body.gx .novelty-intro h2 em,body.gx .group-buy h2 em{color:var(--gx-blue-2)!important}
body.gx .section-heading h2:after{background:var(--airmail)!important}
body.gx .pd-hero:before{background:
  radial-gradient(circle at 76% 44%,transparent 0 29%,rgba(184,56,46,.10) 29% 29.6%,transparent 29.6% 33%,rgba(184,56,46,.08) 33% 33.5%,transparent 33.5%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'%3E%3Cg fill='none' stroke='%23b8382e' stroke-opacity='.11' stroke-width='3'%3E%3Cpath d='M0 20q30-14 60 0t60 0 60 0 60 0'/%3E%3Cpath d='M0 44q30-14 60 0t60 0 60 0 60 0'/%3E%3Cpath d='M0 68q30-14 60 0t60 0 60 0 60 0'/%3E%3Cpath d='M0 92q30-14 60 0t60 0 60 0 60 0'/%3E%3C/g%3E%3C/svg%3E") 0 30px/240px 120px repeat-x!important}
body.gx .pd-kicker .tag{background:var(--gx-ink)!important;color:var(--gx-card)!important}
body.gx .sticker{background:var(--gx-red)!important}
body.gx .sticker--b{background:var(--gx-blue)!important}
body.gx .ticker{background:var(--gx-night)}
body.gx .ticker span:nth-child(3n+1){color:#f08a7c}
body.gx .ticker span:nth-child(3n+2){color:#9cc0e6}
body.gx .ticker span:nth-child(3n){color:var(--gx-card)}

/* ================= GROUP-BUY PROGRESS (MOQ): no panel, just the three figures and the bar, drawn on the page ================= */
.gx-moq{padding-top:8px;padding-bottom:96px}
.gx-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gx-meter{max-width:none;margin:0}
.gx-meter__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.gx-meter__cell{padding:4px 28px 0;border-left:1.5px dashed rgba(59,44,34,.4)}
.gx-meter__cell:first-child{padding-left:0;border-left:0}
.gx-meter__cell small{display:block;margin-bottom:14px;font:500 9px/1 "DM Mono",monospace;letter-spacing:.18em;color:rgba(59,44,34,.7)}
.gx-meter__cell b{display:block;font:800 clamp(52px,7vw,92px)/.9 "Epilogue",sans-serif;font-feature-settings:"zero" 1;font-variant-numeric:normal;letter-spacing:-.03em;color:var(--gx-ink)}
.gx-meter__cell b.is-need{color:var(--gx-red)}
html body .gx-meter .gb-progress{height:16px!important;margin:30px 0 0;border:2px solid var(--gx-ink)!important;border-radius:999px;overflow:hidden;background:var(--gx-card)!important;box-shadow:3px 3px 0 var(--gx-ink)}
html body .gx-meter .gb-progress span{display:block;height:100%;min-width:0;background:repeating-linear-gradient(-45deg,var(--gx-yellow) 0 8px,#d9a520 8px 16px)!important;border-radius:999px}
.gx-meter__ticks{display:flex;justify-content:space-between;margin-top:10px;font:500 8px/1 "DM Mono",monospace;letter-spacing:.12em;color:rgba(59,44,34,.55)}
@media(max-width:700px){.gx-meter__cell{padding:2px 12px 0}.gx-meter__cell small{font-size:7.5px;letter-spacing:.12em;margin-bottom:10px}.gx-meter__cell b{font-size:clamp(34px,11vw,52px)}}

/* ================= KITS: crates on a rack ================= */
body.gx .kit-card.win{background:var(--gx-card)!important}
body.gx .kit-card .win-bar{background:var(--gx-kraft-lt)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' shape-rendering='crispEdges'%3E%3Crect width='2' height='8' fill='%233b2c22' fill-opacity='.07'/%3E%3C/svg%3E")!important;background-size:8px 8px!important}
body.gx .kit-card .win-bar b,body.gx .kit-card .win-bar i{background:var(--gx-card)!important}
body.gx .kit-image{position:relative}
.gx-cid{position:absolute;left:12px;bottom:12px;padding:5px 9px 4px;background:var(--gx-card);border:1.5px solid var(--gx-ink);border-radius:4px;
  font:500 9px/1 "DM Mono",monospace;letter-spacing:.2em;color:var(--gx-ink);box-shadow:2px 2px 0 var(--gx-ink)}
.gx-rack{display:flex;align-items:center;gap:12px;padding:9px 14px;border-top:2px solid var(--gx-ink);background:var(--gx-yellow)}
.gx-rack b{font:800 12px/1 "Epilogue",sans-serif;font-feature-settings:"zero" 1;letter-spacing:.06em;background:var(--gx-ink);color:var(--gx-yellow);padding:5px 8px 4px;border-radius:4px}
.gx-rack span{font:500 8.5px/1 "DM Mono",monospace;letter-spacing:.15em;color:var(--gx-ink)}
body.gx .kit-card{display:flex;flex-direction:column}
body.gx .kit-card .kit-bottom{flex:1}

/* ================= WARNING TAPE (once, before the line) ================= */
.gx-hazard{height:16px;border-block:2px solid var(--gx-ink);background:repeating-linear-gradient(-45deg,var(--gx-yellow) 0 14px,#1d1a16 14px 28px)}

/* ================= THE DISPATCH LINE ================= */
.gx-line{padding-top:96px;padding-bottom:96px}
.gx-line__head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:30px}
.gx-line__head .small-copy{margin:0 0 6px;max-width:440px}
/* the line itself has no frame: it is drawn straight onto the page, edge to edge of the window (sized by gx-app.js) */
.gx-plant{margin:0}
.gx-plant__view{position:relative}
.gx-plant__pan{position:relative;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
.gx-plant__pan::-webkit-scrollbar{display:none}
.gx-plant__pan.is-pan{cursor:grab}
.gx-plant__cv{display:block;width:100%;height:auto;aspect-ratio:1640/540;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 110px);mask-image:linear-gradient(90deg,transparent 0,#000 110px)}
.gx-pin{position:absolute;z-index:1;display:grid;place-items:center;width:24px;height:24px;margin:-34px 0 0 -12px;border:2px solid var(--gx-ink);border-radius:50%;background:var(--gx-card);
  font:800 10px/1 "Epilogue",sans-serif;font-feature-settings:"zero" 1;letter-spacing:.02em;color:var(--gx-red);box-shadow:2px 2px 0 var(--gx-ink);pointer-events:none;transition:background-color .25s ease,transform .25s ease}
.gx-pin:after{content:"";position:absolute;left:50%;top:100%;width:2px;height:9px;margin-left:-1px;background:var(--gx-ink)}
.gx-pin.is-on{background:var(--gx-yellow);transform:translateY(-2px)}
.gx-plant__hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:7px 12px;background:var(--gx-night);color:#f4e9d2;border-radius:999px;
  font:500 8px/1 "DM Mono",monospace;letter-spacing:.18em;white-space:nowrap;pointer-events:none;transition:opacity .4s ease}
.gx-plant__hint.is-gone{opacity:0}
.gx-pop{position:absolute;right:24px;top:6px;display:flex;align-items:center;gap:10px;padding:9px 12px 9px 10px;background:var(--gx-card);border:2px solid var(--gx-ink);border-radius:8px;
  box-shadow:3px 3px 0 var(--gx-ink);font:500 9px/1.2 "DM Mono",monospace;letter-spacing:.12em;color:var(--gx-ink);opacity:0;transform:translateY(-8px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;max-width:calc(100% - 32px)}
.gx-pop:before{content:"";flex:none;width:18px;height:14px;border:1.5px solid var(--gx-ink);border-radius:2px;background:linear-gradient(90deg,transparent 7px,var(--gx-kraft-2) 7px 10px,transparent 10px),var(--gx-kraft)}
.gx-pop.is-on{opacity:1;transform:none}
/* the control console: one rounded bar under the line — the stop button, then the readouts in dashed bays */
.gx-plant__ctl{display:grid;grid-template-columns:auto 1fr 1fr 1.45fr auto;align-items:center;margin-top:26px;padding:12px 34px 12px 12px;background:var(--gx-card);
  border:2px solid var(--gx-ink);border-radius:20px;box-shadow:5px 5px 0 var(--gx-ink)}
.gx-plant__read{min-width:0;padding:4px 22px;border-left:1.5px dashed rgba(59,44,34,.38)}
.gx-estop+.gx-plant__read{margin-left:22px}
.gx-plant__read b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gx-plant__read b.gx-plant__state{display:flex;overflow:visible}
.gx-plant__state i{flex:none}
.gx-estop{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 7px;border:2px solid var(--gx-ink);border-radius:999px;background:var(--gx-yellow);
  box-shadow:3px 3px 0 var(--gx-ink);font:650 10.5px/1 "Epilogue",sans-serif;letter-spacing:.11em;color:var(--gx-ink);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease}
.gx-estop:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--gx-ink)}
.gx-estop:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gx-ink)}
.gx-estop__txt{display:inline-block;text-align:center}
/* B1 + B2: the right-hand copy starts on the same column line as the home page's paragraphs (1.3fr / 1fr) */
@media(min-width:981px){html body.gx #contents.manifest{grid-template-columns:1.3fr 1fr;gap:28px}html body.gx #contents.manifest .manifest-copy{max-width:none}
html body.gx .gx-line__head{grid-template-columns:1.3fr 1fr;gap:28px}html body.gx .gx-line__head .small-copy{max-width:none}}
/* packing slip: the tilted card gets its own layer so its 2px border and hard shadow are anti-aliased like every other card */
html body.gx .slip{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;outline:1px solid transparent}
.gx-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px;width:min(1180px,calc(100% - 28px));margin:18px auto 14px;padding-top:12px;border-top:2px solid var(--gx-ink,#3b2c22);font-family:"DM Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.gx-foot span{white-space:nowrap}
.gx-foot span:nth-child(1){justify-self:start}
.gx-foot span:nth-child(2){justify-self:center;text-align:center}
.gx-foot span:nth-child(3){justify-self:end}
@media(max-width:560px){.gx-foot{grid-template-columns:auto auto;justify-content:space-between}.gx-foot span:nth-child(2){justify-self:end;text-align:right}.gx-foot span:nth-child(3){display:none}}
.gx-estop__txt::after{content:"START LINE";display:block;height:0;overflow:hidden;visibility:hidden}   /* the longer label, unseen: the button keeps one width whichever label it shows */
.gx-estop__cap{width:28px;height:28px;border-radius:50%;border:2px solid var(--gx-ink);background:radial-gradient(circle at 36% 30%,#ef6a5d,#b8382e 58%,#8e241c);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25);transition:transform .12s ease}
.gx-estop[aria-pressed="true"] .gx-estop__cap{transform:scale(.86);background:radial-gradient(circle at 36% 30%,#7fd398,#3f9a5f 58%,#2c6e43)}
.gx-estop:focus-visible{outline:3px solid var(--gx-blue);outline-offset:3px}
.gx-plant__read small{display:block;font:500 8px/1 "DM Mono",monospace;letter-spacing:.16em;opacity:.62;margin-bottom:6px}
.gx-plant__read b{font:700 13px/1 "Epilogue",sans-serif;font-feature-settings:"zero" 1;letter-spacing:.04em;color:var(--gx-ink)}
.gx-plant__read output{font:inherit}
.gx-plant__state{display:inline-flex;align-items:center;gap:8px}
.gx-plant__state i{width:9px;height:9px;border-radius:50%;background:#3f9a5f;box-shadow:0 0 0 3px rgba(63,154,95,.18)}
.gx-plant__state.is-stopped{color:var(--gx-red)}
.gx-plant__state.is-stopped i{background:#e0483c;box-shadow:0 0 0 3px rgba(224,72,60,.18)}
@media(max-width:860px){.gx-line__head{grid-template-columns:1fr;gap:22px}}
@media(max-width:980px){.gx-plant__ctl{grid-template-columns:auto 1fr 1fr;row-gap:12px}
  .gx-plant__ctl .gx-estop{grid-row:span 2}
  .gx-plant__read:nth-of-type(3){margin-left:22px}}
@media(max-width:600px){.gx-pop{left:10px;right:auto;top:6px}
  .gx-plant__ctl{grid-template-columns:1fr 1fr;row-gap:14px;padding:12px;border-radius:18px}
  .gx-plant__ctl .gx-estop{grid-row:auto;grid-column:1/-1;justify-self:stretch;justify-content:center}
  .gx-estop+.gx-plant__read,.gx-plant__read:nth-of-type(3){margin-left:0}
  .gx-plant__read{padding:4px 8px 4px 14px}.gx-plant__read:nth-of-type(odd){border-left:0;padding-left:6px}.gx-plant__read b{font-size:12.5px}#gxLast{letter-spacing:.01em}}

/* ================= PACKING SLIP + NOTE ================= */
body.gx .slip-wrap{padding-top:40px}
body.gx .note{background-color:var(--gx-kraft-lt)}

/* ================= THE MANIFEST: a shipping label that reads itself as the scanner passes ================= */
body.gx .details.gx-scan{background-color:var(--gx-night)!important;align-items:center}
body.gx .gx-scan .details-label{align-self:center}
.gx-scan__hint{font-size:14px!important;line-height:1.6!important;color:rgba(244,233,210,.72);max-width:30ch;margin:22px 0 22px!important}
.gx-rescan{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px 0 12px;border:1.5px solid #f4e9d2;border-radius:9px;background:transparent;color:#f4e9d2;
  font:650 10px/1 "Epilogue",sans-serif;letter-spacing:.12em;cursor:pointer;transition:background .2s ease,color .2s ease}
.gx-rescan i{width:16px;height:10px;background:var(--barcode) center/100% 100%;filter:invert(1) brightness(1.6)}
.gx-rescan:not([disabled]):hover{background:#f4e9d2;color:var(--gx-night)}
.gx-rescan:not([disabled]):hover i{filter:none}
.gx-rescan[disabled]{cursor:not-allowed;background:transparent;border-color:rgba(244,233,210,.22);color:rgba(244,233,210,.32)}
.gx-rescan[disabled] i{opacity:.32}
.gx-label{position:relative;overflow:hidden;background:var(--gx-card);color:var(--gx-ink);border:2px solid var(--gx-ink);border-radius:10px;box-shadow:8px 8px 0 var(--gx-red);
  --scan:0px;isolation:isolate}
.gx-label__top{display:grid;grid-template-columns:1fr 1.2fr auto;border-bottom:2px solid var(--gx-ink)}
.gx-label__top>div{padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.gx-label__top>div+div{border-left:2px solid var(--gx-ink)}
.gx-label__top small{font:500 8px/1 "DM Mono",monospace;letter-spacing:.18em;opacity:.6}
.gx-label__top b{font:400 19px/1 var(--f-sub);letter-spacing:.03em}
.gx-label__top span{font:500 8.5px/1.3 "DM Mono",monospace;letter-spacing:.12em;opacity:.8}
/* the Stef Keycaps die-cut sticker (same #sk-diecut filter as the header + footer logo) slapped in the corner */
.gx-label__code{align-items:center;justify-content:center;min-width:96px}
.gx-label__code img{display:block;width:46px;height:46px;object-fit:contain;filter:url(#sk-diecut-46);overflow:visible;user-select:none}
body.gx .gx-label .details-grid{border-top:0!important;margin:0!important}
body.gx .gx-label .detail{padding:16px 18px!important;border-bottom:1.5px dashed rgba(59,44,34,.4)!important;gap:8px!important}
body.gx .gx-label .detail:nth-child(odd){padding-left:18px!important;border-right:1.5px dashed rgba(59,44,34,.4)}
body.gx .gx-label .detail span{font:500 8px/1 "DM Mono",monospace!important;letter-spacing:.16em!important;opacity:.6!important;color:var(--gx-ink)}
body.gx .gx-label .detail strong{font:650 15px/1.25 "Epilogue",sans-serif!important;letter-spacing:.02em!important;color:var(--gx-ink)}
body.gx .gx-label .gmk-logo{height:.95em}
.gx-label__foot{display:flex;align-items:center;gap:18px;padding:16px 18px}
.gx-label__foot .barcode{flex:none;width:170px;height:46px;background:var(--barcode) center/100% 100%}
.gx-label__foot span{font:500 8.5px/1.5 "DM Mono",monospace;letter-spacing:.14em}
/* the fog sits over everything the beam has not reached yet; the beam is its top edge */
.gx-label__fog{display:none;position:absolute;left:0;right:0;bottom:0;top:var(--scan);z-index:3;pointer-events:none;
  -webkit-backdrop-filter:blur(6px) saturate(.7);backdrop-filter:blur(6px) saturate(.7);background:rgba(251,248,241,.28)}
.gx-label__beam{position:absolute;left:-4px;right:-4px;top:var(--scan);height:3px;margin-top:-1px;z-index:4;pointer-events:none;opacity:0;
  background:#ff3b2e;box-shadow:0 0 10px 2px rgba(255,59,46,.75),0 0 46px 12px rgba(255,59,46,.2);transition:opacity .2s ease}
.gx-label__beam:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:46px;background:linear-gradient(to top,rgba(255,59,46,.16),transparent)}
.gx-label.is-scanning .gx-label__beam{opacity:1}
.gx-label.is-armed .gx-label__fog{display:block}
.gx-label.is-read .gx-label__fog{display:none}
.gx-label__ok{position:absolute;right:20px;bottom:74px;z-index:5;padding:8px 14px;border:3px double var(--gx-red);border-radius:8px;color:var(--gx-red);
  font:400 26px/1 var(--f-sub);letter-spacing:.04em;text-transform:uppercase;transform:rotate(-11deg) scale(1.6);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.gx-label.is-read .gx-label__ok{animation:gxStampIn .34s cubic-bezier(.2,.9,.3,1.2) forwards}
@keyframes gxStampIn{0%{opacity:0;transform:rotate(-11deg) scale(1.7)}70%{opacity:.9;transform:rotate(-11deg) scale(.95)}100%{opacity:.85;transform:rotate(-11deg) scale(1)}}
/* no backdrop-filter: each row blurs on its own and clears as the beam passes it */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .gx-label__fog{display:none}
  .gx-label.is-armed [data-fog]{filter:blur(5px);transition:filter .25s ease}
  .gx-label [data-fog].is-clear{filter:none}}
@media(max-width:700px){.gx-label__top{grid-template-columns:1fr auto}.gx-label__from{grid-column:1;grid-row:1}.gx-label__code{grid-column:2;grid-row:1;min-width:84px}
  .gx-label__top>.gx-label__to{grid-column:1/-1;grid-row:2;border-left:0;border-top:2px solid var(--gx-ink)}
  body.gx .gx-label .details-grid{grid-template-columns:1fr!important}body.gx .gx-label .detail:nth-child(odd){border-right:0}
  .gx-label__foot{flex-direction:column;align-items:flex-start}.gx-label__ok{bottom:96px;font-size:22px}}

/* ================= THE LABELS: rubber stamps ================= */
.gx-labels{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;padding-top:96px;padding-bottom:96px}
.gx-labels .novelty-intro .small-copy{margin-top:26px;max-width:34ch}
.gx-stamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gx-st{position:relative;width:100%;min-height:196px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:22px 14px 18px;background:var(--gx-card);border:2px solid var(--gx-ink);border-radius:10px;box-shadow:5px 5px 0 var(--gx-ink);color:var(--gx-ink);text-align:center;font:inherit;transition:transform .14s ease,box-shadow .14s ease;-webkit-tap-highlight-color:transparent}
.gx-st:before{content:"";position:absolute;left:10px;right:10px;top:10px;height:0;border-top:1.5px dashed rgba(59,44,34,.28)}
.gx-st:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--gx-ink)}
.gx-st:active{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--gx-ink)}   /* hover-only cards: pressing does nothing */
.gx-st{cursor:default}   /* (not a button: no hand pointer) */
.gx-st:focus-visible{outline:3px solid var(--gx-blue);outline-offset:3px}
.gx-st__ink{display:inline-block;padding:9px 14px 8px;border:3.5px double currentColor;border-radius:9px;color:var(--gx-red);
  font:400 clamp(22px,2.2vw,30px)/1 var(--f-sub);letter-spacing:.07em;text-transform:uppercase;transform:rotate(var(--r,0deg));opacity:.88;mix-blend-mode:multiply;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.15'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:120px 120px;mask-size:120px 120px}
.gx-st:nth-child(odd) .gx-st__ink{color:var(--gx-red)}
.gx-stamps li:nth-child(3n+2) .gx-st__ink{color:var(--gx-blue)}
.gx-st small{font:400 13.5px/1.45 "Epilogue",sans-serif;opacity:.82;max-width:22ch}
.gx-st small b{display:block;font:500 9px/1 "DM Mono",monospace;letter-spacing:.16em;color:var(--gx-red);margin-bottom:7px}
.gx-st.is-inked .gx-st__ink{animation:gxStamp .38s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i,0) * 90ms)}
.gx-stamps:not(.is-on) .gx-st__ink{opacity:0}
@keyframes gxStamp{0%{opacity:0;transform:rotate(var(--r,0deg)) scale(1.65)}65%{opacity:.95;transform:rotate(var(--r,0deg)) scale(.94)}100%{opacity:.88;transform:rotate(var(--r,0deg)) scale(1)}}
@media(max-width:980px){.gx-labels{grid-template-columns:1fr;gap:40px}}
@media(max-width:560px){.gx-stamps{grid-template-columns:1fr 1fr;gap:14px}.gx-st{min-height:170px;gap:14px}.gx-st small{font-size:12.5px}}

/* ================= THE ROUTE: a road with a delivery van ================= */
body.gx .route{padding-top:96px;padding-bottom:110px}
body.gx .gx-road{margin-top:60px}
body.gx .gx-road:before{top:18px!important;left:20px!important;right:2%!important;height:18px;border-radius:9px;background:repeating-linear-gradient(90deg,var(--gx-yellow) 0 16px,transparent 16px 30px) 0 50%/100% 2px no-repeat,#4a3a2e!important;border:2px solid var(--gx-ink)!important;box-shadow:3px 3px 0 var(--gx-ink)}
body.gx .gx-road .step.is-now .node{background:var(--gx-yellow)!important}
.gx-truck{position:absolute;top:-34px;left:0;z-index:3;list-style:none;width:92px;height:52px;transform:translateX(var(--tx,0px));
  transition:transform 2.6s cubic-bezier(.5,.05,.25,1);pointer-events:none}
.gx-truck svg{display:block;filter:drop-shadow(3px 3px 0 rgba(59,44,34,.35))}
.gx-truck.is-driving svg{animation:gxBump .32s ease-in-out infinite}
@keyframes gxBump{50%{transform:translateY(-1.5px)}}
@media(max-width:980px){.gx-truck{display:none}}
@media(max-width:560px){body.gx .gx-road:before{left:19px!important;top:20px!important;bottom:20px!important;right:auto!important;width:18px;height:auto;
  background:repeating-linear-gradient(180deg,var(--gx-yellow) 0 16px,transparent 16px 30px) 50% 0/2px 100% no-repeat,#4a3a2e!important}}

/* ================= GROUP BUY: dispatch ticket ================= */
body.gx .group-buy{background:var(--gx-kraft-lt)!important}
body.gx .group-buy:before{background:var(--airmail)!important}
.gx-marks{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin:44px 0 0;padding:0}
.gx-marks li{display:flex;flex-direction:column;align-items:center;gap:9px;width:84px;white-space:nowrap;font:500 8px/1.35 "DM Mono",monospace;letter-spacing:.14em;text-align:center;color:var(--gx-ink)}
.gx-marks svg{width:56px;height:56px;padding:8px;box-sizing:border-box;fill:none;stroke:var(--gx-ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  border:2.5px solid var(--gx-ink);border-radius:7px;opacity:.86}
/* Dispatch ticket: torn off a pad along the top. The tear is an irregular zig-zag mask (sharp, uneven teeth, tiling every 72px);
   the wrapper draws the ink edge along the tear (a 2px lift of the cut shape) and the hard shadow — a mask would cut both away if
   they were on the ticket itself. */
.gx-ticket-wrap{align-self:end;filter:drop-shadow(0 -2px 0 var(--gx-ink)) drop-shadow(6px 6px 0 var(--gx-ink))}
body.gx .gx-ticket{position:relative;padding-top:6px!important;border-top:0!important;border-radius:0 0 12px 12px!important;box-shadow:none!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1008 12'%3E%3Cpath d='M0,6.5%20L4,1.5%20L7.5,7%20L11,2.5%20L15.5,8.5%20L18.5,3%20L23,7.5%20L26,1%20L30.5,6%20L34,2.5%20L37,8%20L41.5,1.8%20L45,6.8%20L48.5,3.2%20L53,9%20L56,2%20L60,7.2%20L63.5,1.2%20L67.5,7.6%20L70,3.5%20L72,6.5%20L76,1.5%20L79.5,7%20L83,2.5%20L87.5,8.5%20L90.5,3%20L95,7.5%20L98,1%20L102.5,6%20L106,2.5%20L109,8%20L113.5,1.8%20L117,6.8%20L120.5,3.2%20L125,9%20L128,2%20L132,7.2%20L135.5,1.2%20L139.5,7.6%20L142,3.5%20L144,6.5%20L148,1.5%20L151.5,7%20L155,2.5%20L159.5,8.5%20L162.5,3%20L167,7.5%20L170,1%20L174.5,6%20L178,2.5%20L181,8%20L185.5,1.8%20L189,6.8%20L192.5,3.2%20L197,9%20L200,2%20L204,7.2%20L207.5,1.2%20L211.5,7.6%20L214,3.5%20L216,6.5%20L220,1.5%20L223.5,7%20L227,2.5%20L231.5,8.5%20L234.5,3%20L239,7.5%20L242,1%20L246.5,6%20L250,2.5%20L253,8%20L257.5,1.8%20L261,6.8%20L264.5,3.2%20L269,9%20L272,2%20L276,7.2%20L279.5,1.2%20L283.5,7.6%20L286,3.5%20L288,6.5%20L292,1.5%20L295.5,7%20L299,2.5%20L303.5,8.5%20L306.5,3%20L311,7.5%20L314,1%20L318.5,6%20L322,2.5%20L325,8%20L329.5,1.8%20L333,6.8%20L336.5,3.2%20L341,9%20L344,2%20L348,7.2%20L351.5,1.2%20L355.5,7.6%20L358,3.5%20L360,6.5%20L364,1.5%20L367.5,7%20L371,2.5%20L375.5,8.5%20L378.5,3%20L383,7.5%20L386,1%20L390.5,6%20L394,2.5%20L397,8%20L401.5,1.8%20L405,6.8%20L408.5,3.2%20L413,9%20L416,2%20L420,7.2%20L423.5,1.2%20L427.5,7.6%20L430,3.5%20L432,6.5%20L436,1.5%20L439.5,7%20L443,2.5%20L447.5,8.5%20L450.5,3%20L455,7.5%20L458,1%20L462.5,6%20L466,2.5%20L469,8%20L473.5,1.8%20L477,6.8%20L480.5,3.2%20L485,9%20L488,2%20L492,7.2%20L495.5,1.2%20L499.5,7.6%20L502,3.5%20L504,6.5%20L508,1.5%20L511.5,7%20L515,2.5%20L519.5,8.5%20L522.5,3%20L527,7.5%20L530,1%20L534.5,6%20L538,2.5%20L541,8%20L545.5,1.8%20L549,6.8%20L552.5,3.2%20L557,9%20L560,2%20L564,7.2%20L567.5,1.2%20L571.5,7.6%20L574,3.5%20L576,6.5%20L580,1.5%20L583.5,7%20L587,2.5%20L591.5,8.5%20L594.5,3%20L599,7.5%20L602,1%20L606.5,6%20L610,2.5%20L613,8%20L617.5,1.8%20L621,6.8%20L624.5,3.2%20L629,9%20L632,2%20L636,7.2%20L639.5,1.2%20L643.5,7.6%20L646,3.5%20L648,6.5%20L652,1.5%20L655.5,7%20L659,2.5%20L663.5,8.5%20L666.5,3%20L671,7.5%20L674,1%20L678.5,6%20L682,2.5%20L685,8%20L689.5,1.8%20L693,6.8%20L696.5,3.2%20L701,9%20L704,2%20L708,7.2%20L711.5,1.2%20L715.5,7.6%20L718,3.5%20L720,6.5%20L724,1.5%20L727.5,7%20L731,2.5%20L735.5,8.5%20L738.5,3%20L743,7.5%20L746,1%20L750.5,6%20L754,2.5%20L757,8%20L761.5,1.8%20L765,6.8%20L768.5,3.2%20L773,9%20L776,2%20L780,7.2%20L783.5,1.2%20L787.5,7.6%20L790,3.5%20L792,6.5%20L796,1.5%20L799.5,7%20L803,2.5%20L807.5,8.5%20L810.5,3%20L815,7.5%20L818,1%20L822.5,6%20L826,2.5%20L829,8%20L833.5,1.8%20L837,6.8%20L840.5,3.2%20L845,9%20L848,2%20L852,7.2%20L855.5,1.2%20L859.5,7.6%20L862,3.5%20L864,6.5%20L868,1.5%20L871.5,7%20L875,2.5%20L879.5,8.5%20L882.5,3%20L887,7.5%20L890,1%20L894.5,6%20L898,2.5%20L901,8%20L905.5,1.8%20L909,6.8%20L912.5,3.2%20L917,9%20L920,2%20L924,7.2%20L927.5,1.2%20L931.5,7.6%20L934,3.5%20L936,6.5%20L940,1.5%20L943.5,7%20L947,2.5%20L951.5,8.5%20L954.5,3%20L959,7.5%20L962,1%20L966.5,6%20L970,2.5%20L973,8%20L977.5,1.8%20L981,6.8%20L984.5,3.2%20L989,9%20L992,2%20L996,7.2%20L999.5,1.2%20L1003.5,7.6%20L1006,3.5%20L1008,6.5%20L1008,12%20L0,12%20Z'/%3E%3C/svg%3E") 0 0/1008px 12px no-repeat,linear-gradient(#000,#000) 0 11px/100% calc(100% - 11px) no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1008 12'%3E%3Cpath d='M0,6.5%20L4,1.5%20L7.5,7%20L11,2.5%20L15.5,8.5%20L18.5,3%20L23,7.5%20L26,1%20L30.5,6%20L34,2.5%20L37,8%20L41.5,1.8%20L45,6.8%20L48.5,3.2%20L53,9%20L56,2%20L60,7.2%20L63.5,1.2%20L67.5,7.6%20L70,3.5%20L72,6.5%20L76,1.5%20L79.5,7%20L83,2.5%20L87.5,8.5%20L90.5,3%20L95,7.5%20L98,1%20L102.5,6%20L106,2.5%20L109,8%20L113.5,1.8%20L117,6.8%20L120.5,3.2%20L125,9%20L128,2%20L132,7.2%20L135.5,1.2%20L139.5,7.6%20L142,3.5%20L144,6.5%20L148,1.5%20L151.5,7%20L155,2.5%20L159.5,8.5%20L162.5,3%20L167,7.5%20L170,1%20L174.5,6%20L178,2.5%20L181,8%20L185.5,1.8%20L189,6.8%20L192.5,3.2%20L197,9%20L200,2%20L204,7.2%20L207.5,1.2%20L211.5,7.6%20L214,3.5%20L216,6.5%20L220,1.5%20L223.5,7%20L227,2.5%20L231.5,8.5%20L234.5,3%20L239,7.5%20L242,1%20L246.5,6%20L250,2.5%20L253,8%20L257.5,1.8%20L261,6.8%20L264.5,3.2%20L269,9%20L272,2%20L276,7.2%20L279.5,1.2%20L283.5,7.6%20L286,3.5%20L288,6.5%20L292,1.5%20L295.5,7%20L299,2.5%20L303.5,8.5%20L306.5,3%20L311,7.5%20L314,1%20L318.5,6%20L322,2.5%20L325,8%20L329.5,1.8%20L333,6.8%20L336.5,3.2%20L341,9%20L344,2%20L348,7.2%20L351.5,1.2%20L355.5,7.6%20L358,3.5%20L360,6.5%20L364,1.5%20L367.5,7%20L371,2.5%20L375.5,8.5%20L378.5,3%20L383,7.5%20L386,1%20L390.5,6%20L394,2.5%20L397,8%20L401.5,1.8%20L405,6.8%20L408.5,3.2%20L413,9%20L416,2%20L420,7.2%20L423.5,1.2%20L427.5,7.6%20L430,3.5%20L432,6.5%20L436,1.5%20L439.5,7%20L443,2.5%20L447.5,8.5%20L450.5,3%20L455,7.5%20L458,1%20L462.5,6%20L466,2.5%20L469,8%20L473.5,1.8%20L477,6.8%20L480.5,3.2%20L485,9%20L488,2%20L492,7.2%20L495.5,1.2%20L499.5,7.6%20L502,3.5%20L504,6.5%20L508,1.5%20L511.5,7%20L515,2.5%20L519.5,8.5%20L522.5,3%20L527,7.5%20L530,1%20L534.5,6%20L538,2.5%20L541,8%20L545.5,1.8%20L549,6.8%20L552.5,3.2%20L557,9%20L560,2%20L564,7.2%20L567.5,1.2%20L571.5,7.6%20L574,3.5%20L576,6.5%20L580,1.5%20L583.5,7%20L587,2.5%20L591.5,8.5%20L594.5,3%20L599,7.5%20L602,1%20L606.5,6%20L610,2.5%20L613,8%20L617.5,1.8%20L621,6.8%20L624.5,3.2%20L629,9%20L632,2%20L636,7.2%20L639.5,1.2%20L643.5,7.6%20L646,3.5%20L648,6.5%20L652,1.5%20L655.5,7%20L659,2.5%20L663.5,8.5%20L666.5,3%20L671,7.5%20L674,1%20L678.5,6%20L682,2.5%20L685,8%20L689.5,1.8%20L693,6.8%20L696.5,3.2%20L701,9%20L704,2%20L708,7.2%20L711.5,1.2%20L715.5,7.6%20L718,3.5%20L720,6.5%20L724,1.5%20L727.5,7%20L731,2.5%20L735.5,8.5%20L738.5,3%20L743,7.5%20L746,1%20L750.5,6%20L754,2.5%20L757,8%20L761.5,1.8%20L765,6.8%20L768.5,3.2%20L773,9%20L776,2%20L780,7.2%20L783.5,1.2%20L787.5,7.6%20L790,3.5%20L792,6.5%20L796,1.5%20L799.5,7%20L803,2.5%20L807.5,8.5%20L810.5,3%20L815,7.5%20L818,1%20L822.5,6%20L826,2.5%20L829,8%20L833.5,1.8%20L837,6.8%20L840.5,3.2%20L845,9%20L848,2%20L852,7.2%20L855.5,1.2%20L859.5,7.6%20L862,3.5%20L864,6.5%20L868,1.5%20L871.5,7%20L875,2.5%20L879.5,8.5%20L882.5,3%20L887,7.5%20L890,1%20L894.5,6%20L898,2.5%20L901,8%20L905.5,1.8%20L909,6.8%20L912.5,3.2%20L917,9%20L920,2%20L924,7.2%20L927.5,1.2%20L931.5,7.6%20L934,3.5%20L936,6.5%20L940,1.5%20L943.5,7%20L947,2.5%20L951.5,8.5%20L954.5,3%20L959,7.5%20L962,1%20L966.5,6%20L970,2.5%20L973,8%20L977.5,1.8%20L981,6.8%20L984.5,3.2%20L989,9%20L992,2%20L996,7.2%20L999.5,1.2%20L1003.5,7.6%20L1006,3.5%20L1008,6.5%20L1008,12%20L0,12%20Z'/%3E%3C/svg%3E") 0 0/1008px 12px no-repeat,linear-gradient(#000,#000) 0 11px/100% calc(100% - 11px) no-repeat}
@media(max-width:800px){.gx-ticket-wrap{margin-top:65px}.gx-ticket-wrap .buy-panel{margin-top:0}}
@media(max-width:500px){.gx-ticket__head{flex-direction:column}}
.gx-ticket__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:20px 0 14px;border-bottom:2px dashed var(--gx-ink)}
.gx-ticket__head b{font:400 19px/1 var(--f-sub);letter-spacing:.04em}
.gx-ticket__head span{font:500 8.5px/1.3 "DM Mono",monospace;letter-spacing:.16em;opacity:.7;text-align:right}
/* N° 001 • GMK PACKAGE on one line when it fits; when it doesn't, N° 001 on top and GMK PACKAGE on the line below (no bullet) */
.gx-ticket__id{display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:.5em}
.gx-ticket__id i{font-style:normal;white-space:nowrap}
.gx-ticket__n::after{content:"\2022";margin-left:.5em}
.gx-ticket__id.is-wrapped .gx-ticket__n::after{content:none}
.gx-ticket__foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding-top:16px;border-top:2px dashed var(--gx-ink)}
.gx-ticket__foot .barcode{width:150px;height:42px;background:var(--barcode) center/100% 100%}
.gx-seal{display:block;width:78px;height:78px;flex:none;transform:rotate(-12deg);overflow:visible;filter:drop-shadow(2px 3px 0 rgba(59,44,34,.85))}
@media(max-width:700px){.gx-marks{gap:10px}.gx-marks li{width:70px}}

/* ================= CHECKOUT (and order received): same app, layout untouched ================= */
body.checkout-page.gx .checkout-card,body.checkout-page.gx .release-banner,body.checkout-page.gx .checkout-info-card{background-color:var(--gx-card)!important}
body.checkout-page.gx .gx-co-top,body.checkout-page.gx .gx-co-bottom{position:relative}
.gx-co-top{display:flex;align-items:center;gap:14px;margin:0 0 26px;padding:10px 14px;background:var(--gx-card);border:2px solid var(--gx-ink);border-radius:10px;
  box-shadow:4px 4px 0 var(--gx-ink);font:500 9px/1.3 "DM Mono",monospace;letter-spacing:.14em;color:var(--gx-ink);overflow:hidden}
.gx-co-top .barcode{flex:none;width:86px;height:26px;background:var(--barcode) center/100% 100%}
.gx-co-top b{font-weight:500;color:var(--gx-red)}
.gx-co-top .gx-co-steps{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.gx-co-top .gx-co-steps span{padding:5px 8px;border:1.5px solid var(--gx-ink);border-radius:999px;font-size:8px;background:var(--gx-card)}
.gx-co-top .gx-co-steps span.is-on{background:var(--gx-ink);color:var(--gx-card)}
/* The airmail band is drawn INSIDE the card and clipped by its rounded corners (it used to sit on the border and poke out past the
   curve). Content is centred in the body of the card: equal space from the band to the content and from the content to the
   bottom edge (the hard shadow is outside the card and does not count). */
.gx-co-bottom{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;margin:56px 0 0;padding:34px 24px 24px;background:var(--gx-kraft-lt);
  border:2px solid var(--gx-ink);border-radius:12px;box-shadow:6px 6px 0 var(--gx-ink);overflow:hidden}
.gx-co-bottom:before{content:"";position:absolute;left:0;right:0;top:0;height:10px;border-bottom:2px solid var(--gx-ink);background:var(--airmail)}
.gx-co-bottom p{margin:6px 0 0!important;font-size:14px!important;line-height:1.6!important;max-width:56ch}
.gx-co-bottom small{font:500 8.5px/1 "DM Mono",monospace;letter-spacing:.18em;color:var(--gx-red)}
.gx-co-bottom .gx-marks{margin:0;gap:12px;align-items:flex-start}
.gx-co-bottom .gx-marks li{width:84px;white-space:nowrap}
.gx-co-bottom .gx-marks svg{width:46px;height:46px;padding:7px}
@media(max-width:800px){.gx-co-top .gx-co-steps{display:none}.gx-co-bottom{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  .gx-truck.is-driving svg{animation:none}
  .gx-truck{transition:none}
  .gx-st.is-inked .gx-st__ink,.gx-label.is-read .gx-label__ok{animation:none;opacity:.88;transform:rotate(var(--r,-11deg))}
  .gx-stamps:not(.is-on) .gx-st__ink{opacity:.88}
  .gx-plant__hint,.gx-pin{transition:none}}

/* ================= CHECKOUT FLOW in the GMK PACKAGE look (steps 01-04 panel + the payment pop-up) =================
   Shipping-label white on ink outlines with hard shadows, an airmail band across the top of each card, postal red for the
   action and the deposit, airmail blue for progress. Presentation only: no ids, steps or scripts change. */

html body.checkout-page.gx .order-card{position:relative;overflow:hidden;background:var(--gx-card)!important;border:2px solid var(--gx-ink)!important;border-radius:12px!important;box-shadow:6px 6px 0 var(--gx-ink)!important;padding-top:22px!important}
/* the stripe is the header's own: 6px of 7px bands at -45deg, with a 1.5px ink rule on its inner side */
html body.checkout-page.gx{--gx-hdr-stripe:repeating-linear-gradient(-45deg,#b8382e 0 7px,#fbf8f1 7px 14px,#2c5a8c 14px 21px,#fbf8f1 21px 28px)}
html body.checkout-page.gx .order-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-bottom:2px solid var(--gx-ink);background:var(--gx-hdr-stripe);z-index:2}
/* progress: empty slots outlined in ink, done ones filled airmail blue */
html body.checkout-page.gx .checkout-progress span{height:6px!important;border:1.5px solid var(--gx-ink)!important;border-radius:999px!important;background:var(--gx-card)!important;opacity:1!important}
html body.checkout-page.gx .checkout-progress span.active{background:var(--gx-blue)!important}
/* 2026-10-28 (owner): no fade. The blue only arrives with the left-to-right swipe (checkout.css ::after, scaled 0 -> 1) and
   leaves with the right-to-left one; the slot's own colour never fades in or out underneath it. */
html body.checkout-page.gx .checkout-progress span:not(#_){background:var(--gx-card)!important;transition:none!important}
html body.checkout-page.gx .checkout-progress span:not(#_)::after{background:var(--gx-blue)!important;opacity:1!important;transition:none!important}
/* 2026-10-28 (owner): airmail order: blue, red, blue, red (every even slot red) */
html body.checkout-page.gx .checkout-progress span:nth-child(even):not(#_)::after{background:var(--gx-red,#b8382e)!important}
@media(prefers-reduced-motion:reduce){html body.checkout-page.gx .checkout-progress span:not(.active):not(#_)::after{transform:scaleX(0)!important}}
/* step label: "0X / 05" as an ink tag, the title in postal red */
html body.checkout-page.gx .checkout-step-label .checkout-step-number{display:inline-block;padding:5px 8px;border-radius:999px;background:var(--gx-ink)!important;color:var(--gx-card)!important;opacity:1!important}
html body.checkout-page.gx .checkout-step-label .checkout-step-title{color:var(--gx-red)!important;opacity:1!important}
html body.checkout-page.gx .checkout-step-label{border-bottom:2px dashed var(--gx-ink)!important}
/* order + review lines: dashed ink rules, like the packing slip */
html body.checkout-page.gx #orderBlock .summary-row,html body.checkout-page.gx .review-line{border-bottom:1.5px dashed rgba(59,44,34,.45)!important}
html body.checkout-page.gx .review-line.is-total{border-top:2px solid var(--gx-ink)!important;border-bottom:0!important;color:var(--gx-red)!important}
html body.checkout-page.gx .review-line.is-total *{color:var(--gx-red)!important}

/* ---- payment pop-up: the same card ---- */
html body.checkout-page.gx > #payWindow .pwin-modal{background:var(--gx-card)!important;border:2px solid var(--gx-ink)!important;border-radius:12px!important;box-shadow:6px 6px 0 var(--gx-ink)!important;overflow:hidden}
html body.checkout-page.gx > #payWindow .pwin-head{position:relative;padding-top:24px!important;border-bottom:2px dashed var(--gx-ink)!important;background:var(--gx-card)!important;color:var(--gx-ink)!important}
html body.checkout-page.gx > #payWindow .pwin-head:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-bottom:2px solid var(--gx-ink);background:var(--gx-hdr-stripe)}
html body.checkout-page.gx .gx-co-bottom:before{height:6px!important;border-bottom-width:2px!important;background:var(--gx-hdr-stripe)!important}
html body.checkout-page.gx > #payWindow .pwin-head span:last-child{color:var(--gx-red)!important}
html body.checkout-page.gx > #payWindow .pwin-close{top:17px!important;right:12px!important;z-index:5!important;display:grid!important;place-items:center;color:var(--gx-ink)!important;font-size:16px!important;line-height:1!important}
html body.checkout-page.gx > #payWindow .pwin-close{transition:color .16s ease}
html body.checkout-page.gx > #payWindow .pwin-close:hover,
html body.checkout-page.gx > #payWindow .pwin-close:focus-visible,
html body.checkout-page.gx > #payWindow .pwin-close:active{color:#a52d25!important}   /* the links' hover red; :active so a finger gets it too */
/* "05 / 05": the same ink pill as the steps' "0X / 05" */
html body.checkout-page.gx > #payWindow .pwin-head span:first-child{display:inline-block;padding:5px 8px;border-radius:999px;background:var(--gx-ink);color:var(--gx-card)!important;opacity:1}
html body.checkout-page.gx > #payWindow .pay-body{background:var(--gx-card)!important}
html body.checkout-page.gx > #payWindow .pay-total{border-bottom:2px dashed var(--gx-ink)!important}
html body.checkout-page.gx > #payWindow .pay-total strong{color:var(--gx-red)!important}
html body.checkout-page.gx > #payWindow .pay-field input,
html body.checkout-page.gx > #payWindow .pay-field select{background:#fffdf7!important;border:2px solid var(--gx-ink)!important;border-radius:8px!important}
html body.checkout-page.gx > #payWindow .pay-field input:focus,
html body.checkout-page.gx > #payWindow .pay-field select:focus{box-shadow:3px 3px 0 var(--gx-ink)!important}
html body.checkout-page.gx > #payWindow .pay-field input.is-invalid{border-color:var(--gx-red)!important;background:#f7e4de!important}
html body.checkout-page.gx > #payWindow .pay-phone-cc{border:2px solid var(--gx-ink)!important;border-right:0!important;border-radius:8px 0 0 8px!important;background:var(--gx-kraft-lt)!important}
html body.checkout-page.gx > #payWindow .pay-phone input{border-radius:0 8px 8px 0!important}
html body.checkout-page.gx > #payWindow .pay-billing-form{border-top:2px dashed var(--gx-ink)!important}
html body.checkout-page.gx > #payWindow .pay-billing-title{color:var(--gx-red)!important}
html body.checkout-page.gx > #payWindow .pay-test{border:1.5px dashed var(--gx-red)!important;border-radius:8px;background:#f7e4de}

/* ================= B6 ACCESSORIES: shipping-label cards, each photo a print taped on =================
   One treatment for every product photo: a white print border, a slight tilt (--tilt), a strip of masking tape, and a warm tone
   + paper grain over the picture, so real photography sits in the page's paper world instead of floating on it. */
.gx-acc{padding-top:30px;padding-bottom:110px}
/* the accessories page: same opening as the other inner pages (BACK / breadcrumb, one-line title, intro), then the cards */
.gx-acc-page main{box-sizing:border-box;max-width:1240px;margin:0 auto;padding:150px 32px 40px}
.gx-acc-page main .head{border-bottom:2px dashed var(--gx-ink);padding-bottom:48px!important;margin-bottom:46px}
.gx-acc-page main .head>div:first-child{font:500 9px/1 "DM Mono",monospace;letter-spacing:.16em}
.gx-acc-page main .head h1 em{color:var(--gx-blue-2)}
.gx-acc-page main .head p{max-width:52ch;margin:26px 0 0;font-size:15px;line-height:1.6}   /* clear of the title's deep extrude */
.gx-acc-page .gx-acc{padding-top:0;padding-bottom:60px}
@media(max-width:700px){.gx-acc-page main{padding:118px 18px 30px}}
/* B6 on the GMK page: one card linking to the accessories page */
.gx-acc-promo{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;overflow:hidden;padding:34px 30px 28px;background:var(--gx-kraft-lt);color:var(--gx-ink);text-decoration:none}
.gx-acc-promo:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-bottom:2px solid var(--gx-ink);
  background:repeating-linear-gradient(-45deg,#b8382e 0 7px,#fbf8f1 7px 14px,#2c5a8c 14px 21px,#fbf8f1 21px 28px)}
.gx-acc-promo .gx-acc-label p{margin-bottom:0;max-width:56ch}
.gx-acc-promo .gx-acc-go{white-space:nowrap}
/* the card itself only lifts under the mouse, like the B4 labels; just the button is a link */
.gx-acc-promo{transition:transform .15s ease,box-shadow .15s ease}
.gx-acc-promo:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--gx-ink)}
/* no airmail tape under "Extra Baggage" (only this heading) */
body.gx #accessories .section-heading h2:after{content:none!important;display:none!important}
@media(max-width:700px){.gx-acc-promo{grid-template-columns:1fr}.gx-acc-promo .gx-acc-go{justify-self:start}}

.gx-acc-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:start}
.gx-acc-card{position:relative;background:var(--gx-card);border:2px solid var(--gx-ink);border-radius:12px;box-shadow:6px 6px 0 var(--gx-ink);padding:22px}
.gx-acc-card--pad{grid-column:1/-1;display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:center;overflow:hidden;padding-top:30px}
.gx-acc-card--pad:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-bottom:2px solid var(--gx-ink);
  background:repeating-linear-gradient(-45deg,#b8382e 0 7px,#fbf8f1 7px 14px,#2c5a8c 14px 21px,#fbf8f1 21px 28px)}
/* the print */
.gx-photo{position:relative;margin:0;padding:10px 10px 28px;background:#fffdf7;border:1.5px solid rgba(59,44,34,.35);box-shadow:3px 4px 0 rgba(59,44,34,.22);
  transform:rotate(var(--tilt,0deg))}
.gx-photo:before{content:"";position:absolute;z-index:2;top:-11px;left:50%;width:84px;height:22px;margin-left:-42px;background:rgba(232,201,155,.82);
  border:1px solid rgba(59,44,34,.18);transform:rotate(calc(var(--tilt,0deg) * -2.5))}
.gx-photo img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover;filter:sepia(.14) saturate(.92) contrast(1.02)}
.gx-photo:after{content:"";position:absolute;inset:10px 10px 28px;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background:url(/assets/img/grain-soft.png) 0 0/64px 64px,linear-gradient(rgba(233,216,182,.18),rgba(233,216,182,.18))}
.gx-photo.is-empty{display:grid}
.gx-photo__ph{display:grid;place-items:center;aspect-ratio:var(--ar,4/3);border:1.5px dashed rgba(59,44,34,.35);background:repeating-linear-gradient(-45deg,rgba(59,44,34,.04) 0 8px,transparent 8px 16px);
  font:500 9px/1 "DM Mono",monospace;letter-spacing:.18em;color:rgba(59,44,34,.55)}
.gx-acc-card--pad .gx-photo{--ar:9/4}
/* the label text */
.gx-acc-label small{display:block;font:500 9px/1 "DM Mono",monospace;letter-spacing:.16em;color:var(--gx-red);margin-bottom:10px}
.gx-acc-label h3{margin:0 0 8px;font:400 clamp(24px,2.6vw,34px)/1 var(--f-sub);letter-spacing:.02em;color:var(--gx-ink)}
.gx-acc-label h3 em{font-style:normal;color:var(--gx-blue-2)}
.gx-acc-label p{margin:0 0 16px;font-size:14px;line-height:1.55;max-width:38ch}
.gx-acc-label--top{padding-bottom:16px;margin-bottom:22px;border-bottom:2px dashed var(--gx-ink)}
.gx-acc-price{display:inline-block;padding:7px 11px 6px;background:var(--gx-red);color:var(--gx-card);border:1.5px solid var(--gx-ink);border-radius:6px;
  box-shadow:2px 2px 0 var(--gx-ink);font:500 9px/1 "DM Mono",monospace;letter-spacing:.14em;transform:rotate(-2deg)}
/* accessories page: every card lifts a little under the mouse (like the B6 card and the B4 labels); cards in the same row
   are the same height (the cable tag matches the RAMA card next to it) */
.gx-acc-page .gx-acc-grid{align-items:stretch}
.gx-acc-page .gx-acc-card{transition:transform .15s ease,box-shadow .15s ease}
.gx-acc-page .gx-acc-card:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--gx-ink)}
.gx-acc-page .gx-acc-card--cable{display:flex;flex-direction:column}
.gx-acc-page .gx-acc-card--cable .gx-acc-label{margin-top:auto}
/* buying: price sticker + ADD TO ORDER (opens checkout with the item ticked) */
.gx-acc-buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.gx-acc-buy .gx-acc-add{white-space:nowrap}

/* not on sale yet (the RAMA artisans): no photo, no price, a rubber "COMING SOON" mark where ADD TO ORDER was; the stamps fill the card */
.gx-acc-page .gx-acc-card--art{display:flex;flex-direction:column}

.gx-acc-soon{margin-top:auto;display:inline-block;padding:7px 10px 6px;border:1.5px dashed var(--gx-ink);border-radius:6px;background:#fffdf7;
  font:500 9px/1 "DM Mono",monospace;letter-spacing:.16em;color:var(--gx-ink);opacity:.8;transform:rotate(-2deg)}
.gx-acc-card--art{background:var(--gx-kraft-lt)}
/* cable: a luggage tag with an eyelet and string */
.gx-acc-card--cable{border-radius:8px 18px 18px 8px;padding-left:34px}
.gx-acc-eyelet{position:absolute;left:11px;top:26px;width:12px;height:12px;border:2px solid var(--gx-ink);border-radius:50%;background:var(--gx-paper)}
.gx-acc-eyelet:before{content:"";position:absolute;left:-46px;top:-26px;width:52px;height:30px;border-bottom:2px solid var(--gx-ink);border-right:2px solid var(--gx-ink);
  border-radius:0 0 22px 0;transform:rotate(-14deg);opacity:.75}
.gx-acc-card--cable .gx-photo{--ar:4/3;margin-bottom:22px}
/* the desktop layout (RAMA beside the cable, the deskpad's picture beside its words) holds for as long as the header shows its
   links; it only stacks at the phone breakpoint, where the menu button takes over (800px, sk-menu.js) */
@media(min-width:801px) and (max-width:1000px){
  .gx-acc-grid{gap:22px}.gx-acc-card{padding:18px}.gx-acc-card--pad{gap:22px;padding-top:28px}
  .gx-acc-label h3{font-size:24px}
}
@media(max-width:800px){.gx-acc-grid{grid-template-columns:1fr}.gx-acc-card--pad{grid-template-columns:1fr}}

/* checkout: the order-information fine print was 8px monospace; at reading size in the text face it is actually readable */
body.checkout-page .checkout-legal-notice p{font-size:12.5px!important;line-height:1.6!important;letter-spacing:0!important}

/* hero title: the GMK logo as a die-cut sticker (same die-cut as the site logo), tucked just under "Package" */
body.gx .pd-hero .pd-gmk{position:relative;z-index:1;display:block;height:clamp(30px,4.4vw,62px);width:auto;aspect-ratio:234/74;margin:22px 0 clamp(6px,1.3vw,18px) 10px;color:#3b2c22;overflow:visible}
body.gx .pd-hero h1{position:relative;z-index:2}

/* checkout: the airmail band above the BACK / breadcrumb line is gone */
body.checkout-page.gx .checkout-head:before{content:none!important;display:none!important}
.gx-marks .gx-crack{stroke-width:1.8}
/* B4 on the dark manifest: same two-tone as every other section title (red, then blue) */
body.gx .details-label h2 em{color:var(--gx-blue-2)!important}

/* packing slip barcode: the slip is tilted, so the bars must be anti-aliased (crispEdges drew them as stair-steps) and sit on
   whole pixels before the tilt (60 units -> 120px) */
body.gx .slip-foot .barcode{width:120px!important;height:38px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none' shape-rendering='geometricPrecision'%3E%3Cpath fill='%233b2c22' d='M0 0h2v20H0zM3 0h1v20H3zM5 0h3v20H5zM9 0h1v20H9zM11 0h2v20h-2zM15 0h1v20h-1zM17 0h3v20h-3zM21 0h1v20h-1zM23 0h2v20h-2zM26 0h3v20h-3zM31 0h1v20h-1zM33 0h2v20h-2zM36 0h1v20h-1zM38 0h3v20h-3zM43 0h2v20h-2zM46 0h1v20h-1zM48 0h3v20h-3zM52 0h1v20h-1zM54 0h2v20h-2zM58 0h2v20h-2z'/%3E%3C/svg%3E") no-repeat center/100% 100%!important}

/* route stops: postmark markers — a dashed inner ring, a tiny STOP over the number in the monospace, like a cancellation */
html body.gx .gx-road .step .node{width:52px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0!important;box-shadow:3px 3px 0 var(--gx-ink);font:500 15px/1 "DM Mono",monospace!important;letter-spacing:.04em!important;color:var(--gx-ink)!important;text-indent:.04em}
html body.gx .gx-road .step .node:before{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px dashed rgba(59,44,34,.5);pointer-events:none}
html body.gx .gx-road .step .node:after{content:"STOP";order:-1;font:500 5.5px/1 "DM Mono",monospace;letter-spacing:.22em;text-indent:.22em;opacity:.75}
/* B4: the dark band still runs edge to edge, but its content sits on the same grid as every other section (it used to start 32px
   from the window edge), and its title is the same size as the other section titles */
@media(min-width:801px){body.gx .details.gx-scan{padding-left:max(32px,calc((100% - var(--max)) / 2 + 32px));padding-right:max(32px,calc((100% - var(--max)) / 2 + 32px))}}
html body.gx .details-label h2{font-size:clamp(40px,5.4vw,82px)!important}
/* app header: a slightly smaller logo; on phones the title's letters sit 2px high, so nudge them to the card's centre */
html body header.nav.nav--app .stef-header-mark img{width:56px!important;height:29.8px!important}
@media(max-width:700px){html body header.nav.nav--app .stef-header-mark img{width:47px!important;height:25px!important}html body header.nav.nav--app .app-id{transform:translateY(calc(-50% + 2px))}}
/* B4: the same striped rule under the heading as the other sections */
html body.gx .details-label h2{padding-bottom:.14em}
html body.gx .details-label h2:after{content:"";display:block;box-sizing:border-box;width:min(260px,60%);height:22px;margin-top:22px;background:var(--airmail);border:2px solid #3b2c22;border-radius:0 11px 11px 0}
/* B5: the stamp words sit in the middle of their frames */
html body.gx .gx-st__ink{padding:11px 14px 7px}
/* GMK PACKAGE + checkout: the header logo is a link (to the GMK PACKAGE page, or to the top on that page: sk-ui.js logoLink) */
html body header.nav.nav--app .stef-header-mark{cursor:pointer}
/* 2026-10-27 · B6: more room between "Extra Baggage." (its deep extruded letters) and the card under it */
html body.gx #accessories.gx-acc-teaser .section-heading{margin-bottom:58px!important}
@media(max-width:700px){html body.gx #accessories.gx-acc-teaser .section-heading{margin-bottom:42px!important}}
/* 2026-10-27 · checkout's PACKED WITH CARE card, once it stacks (phones and narrow tablets): the text is one justified block,
   flush with the card's left and right padding on both sides, and the three handling marks are centred in the card */
/* 2026-10-27 · the PACKED WITH CARE label and its paragraph sit exactly in the middle of the card's height: the label is its own
   line with no extra line box, the paragraph's leading above its first line and below its last is trimmed, and the space above
   (below the airmail stripe: 6px stripe + 2px rule) matches the space below */
html body.checkout-page.gx main .gx-co-bottom:not(#_){padding-top:32px!important;padding-bottom:24px!important;align-items:center}
html body.checkout-page.gx main .gx-co-bottom > div:first-child{align-self:center}
html body.checkout-page.gx main .gx-co-bottom > div:first-child > small{display:block;line-height:1!important;margin:0 0 10px!important}
html body.checkout-page.gx main .gx-co-bottom > div:first-child > p:not(#_){margin:-.3em 0 -.3em!important}
/* (phones only, 600px and under; above that the text and the marks stay on the left as before. The site's sk.css forces every
   paragraph to text-align:left !important, so this rule needs !important and a stronger selector to win.) */
/* V2 (2026-10-28): every mobile and tablet viewport (1024px and under), not just phones */
@media(max-width:1024px){
  html body.checkout-page.gx main .gx-co-bottom > div:first-child:not(#_){width:100%!important;max-width:none!important;justify-self:stretch!important}
  html body.checkout-page.gx main .gx-co-bottom p:not(#_){max-width:none!important;width:100%!important;text-align:justify!important;text-justify:inter-word!important;text-align-last:left!important;hyphens:auto;-webkit-hyphens:auto}
  html body.checkout-page.gx main .gx-co-bottom .gx-marks:not(#_){justify-self:center!important;justify-content:center!important;width:100%}
}