/* ===== SESSION CARDS(TM) EMBEDDED CHECKOUT SHEET =====
     The component is the clothing rail's checkout sheet (tr-shop-redesign
     dist-sell-v2/clothing.html, #tr-embed-css + #tr-embed-theme), SESSION-brand only,
     ported with the LIGHT theme as base because this page is light-only. Same class
     names (trck__*) kept on purpose so the two stay diffable. Stripe's Payment Element
     stack (express wallets, contact, delivery, card form) mounts natively inside it -
     card data lives only in Stripe's iframes; this page never sees it. */
  .trck{--ease:cubic-bezier(.22,.61,.36,1);--font:var(--sans);position:fixed;inset:0;z-index:100001;display:flex;align-items:stretch;justify-content:center}
  .trck[hidden]{display:none}
  .trck__backdrop{position:absolute;inset:0;background:rgba(8,8,10,0.55);animation:trckFade .22s ease-out;will-change:opacity}
  @media(min-width:860px){.trck__backdrop{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}}
  @keyframes trckFade{from{opacity:0}to{opacity:1}}
  .trck__sheet{position:relative;width:100%;height:100%;background:#fff;color:#0b0b0c;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 32px 80px -24px rgba(0,0,0,0.45);animation:trckUp .3s var(--ease);will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}
  @keyframes trckUp{from{opacity:0;transform:translateY(26px) translateZ(0)}to{opacity:1;transform:translateZ(0)}}
  .trck--closing .trck__sheet{animation:trckDown .18s var(--ease) forwards}
  .trck--closing .trck__backdrop{animation:trckFadeOut .18s ease-in forwards}
  /* A closing sheet is already condemned (finalizeClose fires ~190ms later): every
     surface inside it goes pointer-inert so no flow - above all an express-wallet
     payment - can START against elements that are about to be destroyed. */
  .trck--closing{pointer-events:none}
  @keyframes trckDown{to{opacity:0;transform:translateY(18px) translateZ(0)}}
  @keyframes trckFadeOut{to{opacity:0}}
  @media(prefers-reduced-motion:reduce){.trck__sheet,.trck__backdrop,.trck--closing .trck__sheet,.trck--closing .trck__backdrop{animation:none}}
  .trck .trck__head{display:flex;align-items:center;gap:0.75rem;padding:0.8rem 1.05rem;border-bottom:1px solid #e7e7e4;background:#fff;color:#0b0b0c;flex:0 0 auto}
  .trck__brand{display:inline-flex;align-items:center;gap:0.55ch;font-weight:800;font-size:0.92rem;letter-spacing:-0.01em;flex:0 1 auto;min-width:0;white-space:nowrap}
  .trck__brand img.trck__scmark{height:0.95em;width:auto;display:block}
  .trck__secure{margin-left:auto;display:inline-flex;align-items:center;gap:0.45ch;font-size:0.66rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:#1a7f37;white-space:nowrap}
  .trck__secure svg{width:1em;height:1em;flex:0 0 auto}
  @media(max-width:519px){.trck__secure-label{display:none}}
  .trck__close{flex:0 0 auto;width:2.15rem;height:2.15rem;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e2e2df;border-radius:999px;background:#fff;color:#3a3a3e;cursor:pointer;transition:border-color .2s var(--ease),color .2s var(--ease)}
  .trck__close svg{width:1rem;height:1rem}
  .trck__close:hover,.trck__close:focus-visible{border-color:#0b0b0c;color:#0b0b0c}
  .trck__spectrum{height:3px;flex:0 0 auto;background:linear-gradient(90deg, #20438D 0.00% 9.09%, #AF1E5D 9.09% 18.18%, #2C66B1 18.18% 27.27%, #D46128 27.27% 36.36%, #6A4D95 36.36% 45.45%, #2B7D3C 45.45% 54.55%, #C7292A 54.55% 63.64%, #354650 63.64% 72.73%, #587482 72.73% 81.82%, #FAA822 81.82% 90.91%, #101826 90.91% 100.00%)}
  .trck__cols{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  .trck__side{flex:0 0 auto;background:#f4f4f2;color:#0b0b0c;padding:0.85rem 1.05rem 0.7rem;display:flex;align-items:center;gap:0.55rem 0.9rem;flex-wrap:wrap}
  /* READING ORDER. The deck and its order lines come FIRST; the merch add-ons sit BELOW the
     order. This is done by MOVING THE UPSELL BLOCK IN THE DOM, not with CSS `order`.
     `order` would have reordered the pixels while leaving screen-reader and tab order on
     the old sequence, so a keyboard user would jump from the visually lower add-on rows
     back up to the Remove controls above them (WCAG 1.3.2 meaningful sequence, 2.4.3
     focus order). One source of truth for the order, and the >=860px grid places the same
     nodes by grid-template-areas. */
  .trck__thumb{width:88px;height:88px;object-fit:cover;background:#fff;border-radius:10px;border:1px solid #e0e0dc;flex:0 0 auto}
  /* flex-basis 0, not auto: with `auto` the meta column's base size is the full
     max-content width of the product name, which overflows the line and wraps the whole
     header into two rows (thumb alone, then name + price). Basis 0 keeps thumb, name and
     price on ONE row and lets the name wrap inside its own column. */
  .trck__meta{min-width:0;flex:1 1 0}
  .trck__name{font-weight:700;font-size:1.02rem;letter-spacing:-0.01em;line-height:1.25;color:#1c1913}
  .trck__variant{font-size:0.78rem;color:#6f6f76;margin-top:0.14rem;line-height:1.3}
  .trck__price{font-weight:800;font-size:1.3rem;letter-spacing:-0.015em;white-space:nowrap;color:#1c1913;align-self:center}
  /* Always-visible offer bar. It sits outside the scrolling column so the price
     and the closing date stay on screen at phone height. */
  .trck__offerbar{display:flex;align-items:center;gap:0.85rem;padding:0.6rem 1.1rem;background:#fdf6f1;border-bottom:1px solid #ecdfd6;flex:0 0 auto}
  .trck__offerbar-price{font-weight:800;font-size:1.15rem;letter-spacing:-0.015em;color:#1c1913;white-space:nowrap}
  .trck__offerbar-price s{color:#8a8378;font-weight:700;text-decoration:line-through;text-decoration-thickness:0.09em;text-decoration-color:#b01833;margin-right:0.15ch}
  .trck__offerbar-note{font-size:0.72rem;font-weight:600;line-height:1.35;color:#5f5c55;text-wrap:pretty}
  @media(min-width:860px){.trck__offerbar{padding:0.65rem 1.35rem}}
  /* One line of pride, not a landing page: the reason this deck is worth owning. */
  .trck__proof{flex:1 1 100%;display:flex;align-items:center;gap:0.5ch;font-size:0.74rem;font-weight:600;color:#1c1913;margin:0.5rem 0 0.15rem}
  .trck__proof svg{width:0.95em;height:0.95em;color:#b01833;flex:0 0 auto}
  .trck__addons{flex:1 1 100%;display:grid;gap:0.35rem;margin-top:0.55rem}
  .trck__addons:empty{display:none;margin:0}
  .trck__addonrow{display:flex;align-items:center;gap:0.6rem;font-size:0.78rem;color:#3a3a3e;animation:trckRowIn .35s var(--ease)}
  @keyframes trckRowIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  .trck__addonthumb{width:28px;height:28px;object-fit:contain;background:#fff;border:1px solid #e0e0dc;border-radius:6px;flex:0 0 auto}
  .trck__addonname{min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .trck__addonprice{font-weight:700;color:#0b0b0c;white-space:nowrap}
  /* The order line-item list (deck base + add-ons + fee). The base + fee rows are
     structural (no remove); each add-on row carries a small x remove control. */
  .trck__addonrow--base{padding-bottom:0.35rem;margin-bottom:0.1rem;border-bottom:1px solid #e3e3df;color:#0b0b0c;font-weight:600}
  .trck__addonrow--fee{color:#6d6a5e}
  .trck__addonremove{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:0.1rem;padding:0;border:1px solid #dcdcd7;border-radius:6px;background:#fff;color:#8a8a82;cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease)}
  .trck__addonremove svg{width:13px;height:13px}
  .trck__addonremove:hover,.trck__addonremove:focus-visible{color:#b01833;border-color:#e3b8bf;background:#fdf3f4;outline:none}
  .trck__totline{display:flex;justify-content:space-between;align-items:center;gap:0.6rem;font-size:0.8rem;color:#3a3a3e;margin:0 0 0.45rem;animation:trckRowIn .35s var(--ease)}
  .trck__totline[hidden]{display:none}
  .trck__totline.trck__freeship{margin:0.45rem 0}
  .trck__totlabel{display:inline-flex;align-items:center;gap:0.5ch;min-width:0}
  .trck__totamt{font-weight:700;color:#0b0b0c;white-space:nowrap}
  .trck__freeship{flex:1 1 100%;color:#1a7f37;font-weight:600}
  .trck__freeship svg{color:#1a7f37}
  /* The shipping promises stack, one tick per promise. They were a single run
     separated by middots, which at some widths broke so a line opened on a bare
     separator and the tick floated between two lines. Three items cannot break
     that way at any width. align-items:flex-start keeps every tick on the FIRST
     line of its own item if that item ever wraps, instead of centring it across
     the wrap. Type, weight and colour are inherited from .trck__freeship, so
     this is layout only. */
  .trck__shiplist{flex:1 1 100%;min-width:0;display:grid;gap:0.3rem;margin:0;padding:0;list-style:none}
  .trck__shiplist li{display:flex;align-items:flex-start;gap:0.5ch;min-width:0;line-height:1.35}
  .trck__shiplist svg{width:1em;height:1em;flex:0 0 auto;margin-top:0.17em}
  .trck__promochip{font-size:0.62rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;background:#fff;border:1px solid #d5d5d0;border-radius:999px;padding:0.2em 0.7em;color:#3a3a3e;white-space:nowrap}
  /* discount line accommodates the FULL code chip; if a very long code + amount can't
     fit one line on a narrow screen, the amount wraps below rather than truncating. */
  #trck-discountrow{flex-wrap:wrap;column-gap:0.6rem;row-gap:0.15rem}
  #trck-discountrow .trck__totlabel{flex:1 1 auto}
  .trck__scline{flex:1 1 100%;font-size:0.72rem;letter-spacing:0.02em;color:#6d6a5e;margin-top:0.4rem}
  /* Below 860px the full trust strip stays off for room. The two lines a phone
     buyer most needs opt back in with .trck__trust--m; the min-width:860px block
     below restores the rest. */
  .trck__trust{display:grid;gap:0.5rem;flex:1 1 100%;margin:0.9rem 0 0;padding:0.9rem 0 0;border-top:1px solid #e3e3df;width:100%;list-style:none}
  .trck__trust li{display:none}
  .trck__trust li.trck__trust--m{display:flex;gap:0.6ch;align-items:flex-start;font-size:0.78rem;color:#3a3a3e;line-height:1.45}
  .trck__trust svg{width:1em;height:1em;color:#1a7f37;flex:0 0 auto;margin-top:0.12em}
  .trck__price--tick{animation:trckTick .55s var(--ease)}
  @keyframes trckTick{0%{transform:scale(1)}35%{transform:scale(1.16);color:#1a7f37}100%{transform:scale(1)}}
  .trck__body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;background:#fff;padding:0.8rem 1.05rem 1.3rem}
  .trck__loading{display:block;padding:1.3rem 1rem 1.1rem;color:#6f6f76;font-size:0.9rem}
  .trck__loading[hidden]{display:none}
  .trck__loadline{display:flex;align-items:center;justify-content:center;gap:0.7ch;margin-top:1.2rem}
  .trck__skel{display:grid;gap:0.8rem;max-width:420px;margin:0 auto}
  .trck__skelrow{height:2.6rem;border-radius:8px;background:linear-gradient(100deg,#ececea 40%,#f7f7f5 50%,#ececea 60%);background-size:200% 100%;animation:trckShimmer 1.2s linear infinite}
  .trck__skelrow--btn{height:2.9rem}
  .trck__skelrow--label{height:0.9rem;width:38%;border-radius:4px}
  @keyframes trckShimmer{to{background-position:-200% 0}}
  @media(prefers-reduced-motion:reduce){.trck__skelrow{animation:none}}
  .trck__spin{width:1.05em;height:1.05em;border:2px solid #dadad6;border-top-color:var(--accent);border-radius:50%;animation:trckSpin .8s linear infinite;flex:0 0 auto}
  @keyframes trckSpin{to{transform:rotate(360deg)}}
  #trck-fields{display:none}
  #trck-fields.trck__fields--on{display:block;animation:trckFieldsIn .25s var(--ease)}
  @keyframes trckFieldsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){#trck-fields.trck__fields--on{animation:none}}
  .trck__xdiv{display:flex;align-items:center;gap:0.8rem;margin:0.95rem 0;color:#9a9aa2;font-size:0.66rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700}
  .trck__xdiv::before,.trck__xdiv::after{content:"";flex:1 1 auto;height:1px;background:#e7e7e4}
  .trck__xdiv[hidden]{display:none}
  .trck__seclabel{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:#77776f;font-weight:700;margin:1.1rem 0 0.5rem}
  #trck-fields .trck__seclabel:first-child{margin-top:0}
  .trck__seclabel--x{text-align:center;margin:0 0 0.6rem}
  label.trck__seclabel{display:block}
  /* FIELD HEIGHT. Phone is the only field on this form rendered by this stylesheet;
     every other field is a Stripe Element. Those elements run labels:'floating', so
     they carry an internal label line and stand taller than a plain padded input.
     Every locally rendered field is therefore driven from --trck-fieldh so the two
     kinds of field line up.
     --trck-fieldh is a static constant. There is no runtime measurement and no live
     sync: it is the rendered Input height under the appearance rules this sheet
     already sets (fontSizeBase 16px on narrow viewports, .Input padding 10px top and
     bottom, 1px border, labels:'floating'). Nothing re-checks it, so if the Stripe
     appearance rules above change, this value has to be re-derived with them. */
  :root{--trck-fieldh:56px}
  /* FLOATING LABEL. The phone field is built the same way a Stripe Element builds
     its fields, so the two match by construction rather than by a tuned offset.
     The label is a real <label for>, moved only visually, so it stays in the
     accessibility tree and never disappears once the field is filled. The empty
     state is driven by :placeholder-shown against a transparent placeholder (the
     format example, revealed on focus), which is also what lifts the label on
     browser autofill: autofill sets a real value, so :placeholder-shown stops
     matching on its own. The :autofill / :-webkit-autofill rules below are belt and
     braces, and are kept as separate rules on purpose, because one unsupported
     selector invalidates an entire selector group. */
  .trck__fl{position:relative;display:block;margin-top:0.55rem}
  .trck__phone{width:100%;height:var(--trck-fieldh);font-family:var(--font);font-size:14px;color:#0F0F0F;background:#fff;border:1px solid #d5d5d0;border-radius:8px;padding:20px 12px 6px;transition:border-color .2s var(--ease)}
  /* The placeholder carries the format example (+1 (323) 555-0123). Transparent while
     the field is empty and unfocused so it never collides with the centred label; on
     focus the label lifts and the example shows — same behaviour as Stripe's own
     floating-label inputs. :placeholder-shown (the label driver) matches on ANY
     placeholder text while the value is empty, so the label logic is unaffected. */
  .trck__phone::placeholder{color:transparent;transition:color .15s var(--ease)}
  .trck__phone:focus::placeholder{color:#9a9aa2}
  .trck__phone:focus{outline:none;border-color:#6f6f76}
  .trck__phone.invalid{border-color:#b91c1c}
  .trck__fllabel{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;line-height:1.1;color:#6f6f76;pointer-events:none;white-space:nowrap;max-width:calc(100% - 26px);overflow:hidden;text-overflow:ellipsis;transition:top .15s var(--ease),font-size .15s var(--ease),transform .15s var(--ease)}
  .trck__phone:focus ~ .trck__fllabel{top:9px;transform:none;font-size:11px}
  .trck__phone:not(:placeholder-shown) ~ .trck__fllabel{top:9px;transform:none;font-size:11px}
  .trck__phone:-webkit-autofill ~ .trck__fllabel{top:9px;transform:none;font-size:11px}
  .trck__phone:autofill ~ .trck__fllabel{top:9px;transform:none;font-size:11px}
  .trck__phonehint{font-size:0.7rem;color:#77776f;line-height:1.5;margin:0.4rem 0 0}
  /* Setting customer_email on the session makes Stripe render the contact email
     READ-ONLY, so the only way to fix a typo is to go back and re-mint. */
  .trck__linkbtn{font:inherit;color:#0F0F0F;background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
  .trck__linkbtn:hover,.trck__linkbtn:focus-visible{color:var(--accent)}
  @media(max-width:700px){.trck__phone{font-size:16px}.trck__fllabel{font-size:16px}.trck__phone:focus ~ .trck__fllabel,.trck__phone:not(:placeholder-shown) ~ .trck__fllabel{font-size:11px}}
  @media(max-width:700px){.trck__phone:-webkit-autofill ~ .trck__fllabel{font-size:11px}}
  @media(max-width:700px){.trck__phone:autofill ~ .trck__fllabel{font-size:11px}}
  @media(prefers-reduced-motion:reduce){.trck__fllabel{transition:none}}
  /* The picker sits INSIDE the grey order-summary rail, so it reads as part of the
     order: white card on the grey, full rail width on phones (the rail is the first
     thing in view when the sheet opens). */
  .trck__upsell{flex:1 1 100%;margin:0.6rem 0 0;padding:0.7rem 0.85rem 0.75rem;background:#fff;border:1px solid #e7e7e4;border-radius:10px}
  .trck__uphead{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:#77776f;font-weight:700;margin-bottom:0.45rem}
  /* ONE-LINE grid. Was a two-row grid with the controls
     stacked under the meta, which made every add-on row ~86px tall and pushed the deck
     off the first screen. Now: [thumb | name | controls] on a single row, ~46px. The
     hook line is a sales line, not a checkout line, so it only shows on desktop where
     the rail is a tall column with room to spare. Whole row stays tap-to-add. */
  .trck__uprow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:0.6rem;align-items:center;padding:0.4rem 0;cursor:pointer}
  .trck__uprow .trck__upsize{cursor:auto}
  .trck__uprow+.trck__uprow{border-top:1px solid #e3e3df}
  .trck__upthumb{grid-column:1;align-self:center;width:34px;height:34px;object-fit:contain;background:#fff;border:1px solid #e0e0dc;border-radius:7px}
  .trck__upmeta{grid-column:2;min-width:0}
  .trck__upname{font-size:0.78rem;font-weight:700;color:#0b0b0c;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .trck__uphook{display:none;font-size:0.7rem;color:#6f6f76;margin-top:0.1rem;line-height:1.35}
  @media(min-width:860px){.trck__uphook{display:block}}
  .trck__upctl{grid-column:3;display:flex;align-items:center;gap:0.45rem}
  .trck__upsizeslot{flex:0 0 auto;display:flex}
  .trck__upprice{font-size:0.8rem;font-weight:700;color:#0b0b0c;white-space:nowrap;text-align:right}
  .trck__upsize{font-family:var(--font);font-size:0.72rem;color:#0b0b0c;background:#fff;border:1px solid #d5d5d0;border-radius:6px;padding:0.28em 0.4em;line-height:1.15;flex:0 0 auto}
  /* Secondary by design: the only red button on this sheet is Pay. A red ADD next to a
     red Pay makes the merch shout louder than the purchase. */
  .trck__upadd{font-family:var(--font);font-weight:700;font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;padding:0.5em 0.8em;border:1px solid #c4c4be;border-radius:2px;background:#fff;color:#0b0b0c;cursor:pointer;white-space:nowrap;flex:0 0 auto;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),opacity .2s var(--ease)}
  .trck__upadd:hover,.trck__upadd:focus-visible{background:#0b0b0c;color:#fff;border-color:#0b0b0c}
  .trck__upadd[data-added="1"]{background:#e7e7e4;color:#1a7f37;border-color:#d5d5d0}
  .trck__upadd[data-added="1"]:hover{background:#dededa;color:#1a7f37;border-color:#d5d5d0}
  /* The cart is locked while a payment is in flight (beginPay -> setCartLock ->
     applyCartControls sets [disabled] on every Add and size control) and while an
     add-on cannot ship to the delivery country. Until now that lock had NO visual
     signal at all: the controls looked live and did nothing. Showing the lock is what
     lets the sheet stop WARNING about it in advance. */
  .trck__upadd[disabled],.trck__upsize[disabled]{opacity:0.4;cursor:default}
  /* The whole row is the tap target, so when its Add is disabled the ROW must stop
     advertising a click too (the delegated handler already refuses it). Progressive
     enhancement: without :has() support the behaviour is unchanged, only the cursor
     keeps lying. */
  .trck__uprow:has(.trck__upadd[disabled]){cursor:default}
  .trck__upadd[disabled]:hover,.trck__upadd[disabled]:focus-visible{background:#fff;color:#0b0b0c;border-color:#c4c4be}
  .trck__upadd[disabled][data-added="1"]:hover{background:#e7e7e4;color:#1a7f37;border-color:#d5d5d0}
  .trck__upadd--pulse{animation:trckPulse .4s var(--ease)}
  @keyframes trckPulse{0%{transform:scale(1)}40%{transform:scale(1.1)}100%{transform:scale(1)}}
  .trck__upnote{font-size:0.68rem;color:#77776f;line-height:1.5;margin:0.55rem 0 0}
  /* Mobile keeps font-size:16px on purpose (a <select> below 16px makes iOS Safari
     zoom the viewport on tap). We tighten the VISUAL bulk instead — smaller box via
     compact vertical padding + a narrower cap (S/M/L/XL are 1-2 chars) — so it sits
     proportionate to the ADD button without the oversized look. The native select hit area stays a comfortable tap target. */
  @media(max-width:859px){.trck__upsize{font-size:16px;max-width:62px;padding:2px 6px;line-height:1.2}}
  /* Cart update in flight: the payment surface goes pointer-inert until the session settles. */
  /* The small line under the express buttons states the order of operations for
     adding an item before paying. Shown only when a wallet is actually available
     (see xe.on('ready')). */
  .trck__xnote{font-size:0.68rem;color:#77776f;text-align:center;line-height:1.5;margin:0.45rem 0 0}
  #trck-fields.trck__fields--busy #trck-express{opacity:0.45;pointer-events:none}
  #trck-fields.trck__fields--busy #trck-payment{opacity:0.55;pointer-events:none}
  #trck-fields.trck__fields--busy .trck__paybtn{opacity:0.55;pointer-events:none}
  .trck__paybtn{margin-top:1.2rem;width:100%;font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:0.04em;text-transform:uppercase;padding:1.05em 1.7em;border:0;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;transition:background .2s var(--ease),opacity .2s var(--ease)}
  .trck__paybtn:hover,.trck__paybtn:focus-visible{background:var(--accent-dk)}
  .trck__paybtn[disabled]{opacity:0.55;cursor:default}
  .trck__paybtn[disabled]:hover{background:var(--accent)}
  .trck__payerr{margin:0.6rem 0 0;font-size:0.8rem;color:#b91c1c;min-height:1.2em;line-height:1.45}
  .trck__payassure{margin:0.9rem 0 0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0.4rem 0.95rem;font-size:0.72rem;line-height:1.5;color:#6f6f76}
  .trck__pa{display:inline-flex;align-items:center;gap:0.45ch;white-space:nowrap}
  .trck__pa svg{width:0.95em;height:0.95em;color:#1a7f37;flex:0 0 auto}
  .trck .trck__foot{flex:0 0 auto;margin:0;display:flex;align-items:center;justify-content:center;gap:0.55ch;padding:0.68rem 1rem calc(0.68rem + env(safe-area-inset-bottom));border-top:1px solid #ececea;background:#fafafa;font-size:0.72rem;color:#6f6f76;text-align:center;line-height:1.45}
  .trck__foot svg{width:0.95em;height:0.95em;color:#1a7f37;flex:0 0 auto}
  .trck__foot a{color:inherit;font-weight:600;white-space:nowrap}
  .trck__toast{position:absolute;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);background:#fff;color:#0b0b0c;border:1px solid #d5d5d0;border-radius:999px;padding:0.62em 1.15em;font-size:0.78rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:6;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis;box-shadow:0 10px 30px -12px rgba(0,0,0,.35)}
  .trck__toast--on{opacity:1;transform:translateX(-50%) translateY(0)}
  @media(min-width:860px){.trck__toast{display:none}}
  @media(prefers-reduced-motion:reduce){.trck__addonrow,.trck__totline,.trck__price--tick,.trck__upadd--pulse{animation:none}}
  .trck__minibarwrap{display:none}
  @media(max-width:859px){
    .trck__cols{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .trck__body{flex:0 0 auto;overflow:visible}
    .trck__minibarwrap{display:block;position:sticky;top:0;height:0;z-index:6;overflow:visible}
    .trck__minibar{display:flex;width:100%;align-items:center;justify-content:space-between;gap:0.7rem;background:rgba(255,255,255,0.97);border:0;border-bottom:1px solid #e7e7e4;padding:0.85rem 1.05rem;font-family:var(--font);font-size:0.85rem;font-weight:700;color:#0b0b0c;cursor:pointer;text-align:left;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .22s var(--ease),transform .22s var(--ease)}
    .trck__minibar--on{opacity:1;transform:none;pointer-events:auto}
    .trck__minibar svg{width:1rem;height:1rem;color:#9a9aa2;flex:0 0 auto}
  }
  @media(prefers-reduced-motion:reduce){.trck__minibar{transition:none}}
  @media(min-width:860px){
    .trck{align-items:center;padding:2rem 1.6rem}
    .trck__sheet{max-width:920px;height:auto;max-height:calc(100dvh - 3.2rem);border-radius:16px;min-height:0}
    .trck .trck__head{padding:0.85rem 1.35rem}
    .trck__cols{flex-direction:row;align-items:stretch}
    .trck__body{order:1;flex:1 1 55%;max-width:660px;padding:1.35rem 1.35rem 1.5rem}
    /* Same reading order as the phone: deck, its order lines, then the add-ons. */
    .trck__side{order:2;flex:1 1 40%;max-width:400px;background:#f4f4f2;border-left:1px solid #e7e7e4;padding:1.35rem;display:grid;grid-template-columns:88px 1fr auto;grid-template-areas:"thumb meta price" "proof proof proof" "addons addons addons" "ship ship ship" "skincl skincl skincl" "promo promo promo" "upsell upsell upsell" "scline scline scline" "trust trust trust";column-gap:0.9rem;row-gap:0;align-content:start;align-items:center}
    /* The summary column can carry more lines than the sheet is tall on a short
       window, and the sheet clips its overflow, so the column gets its own scroll
       the same way the form column already has one. */
    .trck__side{min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .trck__proof{grid-area:proof;margin:0.7rem 0 0}
    .trck__upsell{grid-area:upsell;margin:0.85rem 0 0}
    .trck__addons{grid-area:addons;margin:0.85rem 0 0}
    .trck__addons:empty{display:none;margin:0}
    .trck__promowrap{grid-area:promo;margin-top:0.55rem}
    .trck__freeship{grid-area:ship}
    .trck__totline.trck__freeship{margin-top:0.7rem}
    /* The Session Key line is a second green-check row and needs its own grid area.
       It carries .trck__freeship for the check styling, and that class pins
       grid-area:ship, so two elements would otherwise land in one cell and render
       stacked. This override has to stay after .trck__freeship for it to win. */
    .trck__skincl{grid-area:skincl}
    .trck__totline.trck__skincl{margin-top:0.28rem}
    /* Explicit area so the tagline renders where it sits in the DOM, between the
       add-on block and the trust list. Without it the item auto-places into an
       implicit row below trust and visual order diverges from reader order. */
    .trck__scline{grid-area:scline;margin-top:0.5rem}
    .trck__thumb{grid-area:thumb;width:88px;height:88px}
    .trck__meta{grid-area:meta}
    .trck__price{grid-area:price;font-size:1.15rem}
    .trck__trust{grid-area:trust;display:grid;gap:0.55rem;margin:1.15rem 0 0;padding:1.15rem 0 0;border-top:1px solid #e3e3df;width:100%;list-style:none}
    .trck__trust li{display:flex;gap:0.6ch;align-items:flex-start;font-size:0.78rem;color:#3a3a3e;line-height:1.45}
    .trck__trust svg{width:1em;height:1em;color:#1a7f37;flex:0 0 auto;margin-top:0.12em}
    .trck__trust a{color:#0b0b0c;font-weight:600;white-space:nowrap;text-decoration:none}
  }
  .trck__promowrap{flex:1 1 100%;margin-top:0}
  body.trck-open{overflow:hidden}