/* ============================================================
   cs2pins — bespoke two-color storefront
   Design tokens & styles ported from design_handoff_cs2pins_store
   ============================================================ */

:root {
  --text: #1b1a16;
  --bg: #f3efe7;
  --line: color-mix(in srgb, var(--text) 10%, transparent);
}
html[data-mode="dark"] {
  --text: #f3efe7;
  --bg: #16140f;
}

.cs2-body * { box-sizing: border-box; }
/* several components below set display on elements that JS toggles with
   [hidden] (checkout steps, confirm fields, the drawer footer) — without
   this the display declaration wins and "hidden" doesn't hide anything */
.cs2-body [hidden] { display: none !important; }
html, body.cs2-body { margin: 0; padding: 0; min-height: 100%; }
body.cs2-body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
  transition: background-color .4s ease, color .4s ease;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- header -------------------------------------------------- */
.cs2-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 26px 48px;
}
.cs2-nav { display: flex; align-items: center; gap: 26px; }
/* The wordmark doubles as the nav item for the product page, so it takes
   .active the same way .cs2-navlink does. Weight only changes with .active
   (never on hover) so the bolder text can't reflow the nav next to it. */
.cs2-wordmark {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.5; font-weight: 400; text-decoration: none; color: var(--text);
  transition: opacity .2s ease;
}
.cs2-wordmark:hover { opacity: 1; }
.cs2-wordmark.active { opacity: 0.85; font-weight: 700; }
.cs2-navlink {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.5; text-decoration: none; color: var(--text);
  transition: opacity .2s ease;
}
.cs2-navlink:hover, .cs2-navlink.active { opacity: 1; }
/* cart icon — opens the drawer at the bottom of every page */
.cs2-cart {
  position: relative;
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--text); opacity: 0.65;
  transition: opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.cs2-cart:hover, .cs2-cart.has-items { opacity: 1; }
.cs2-cart svg { width: 20px; height: 20px; display: block; }
.cs2-cart-count {
  position: absolute; top: -3px; right: -5px; pointer-events: none;
  min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
  background: var(--text); color: var(--bg);
  font-size: 9px; font-weight: 700; line-height: 15px; text-align: center;
  opacity: 0; transform: scale(.5);
  transition: opacity .2s ease, transform .34s cubic-bezier(.2,.9,.3,1.4);
}
.cs2-cart.has-items .cs2-cart-count { opacity: 1; transform: scale(1); }
/* pill switch: light track + black sliding knob holding the active icon */
.cs2-toggle {
  position: relative; flex: none; cursor: pointer;
  width: 46px; height: 26px; padding: 0;
  border: 1px solid var(--text);
  border-radius: 999px;
  background: var(--bg);
  transition: background .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.cs2-knob {
  position: absolute; top: 50%; left: 3px;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--text); color: var(--bg);
  transform: translate(0, -50%);
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.cs2-knob svg { grid-area: 1 / 1; width: 13px; height: 13px; display: block; }
/* light mode: knob left, shows the sun (current state) */
.cs2-knob .cs2-icon-moon { display: none; }
/* dark mode: knob slides right, shows the moon (current state) */
html[data-mode="dark"] .cs2-knob {
  transform: translate(20px, -50%);
}
html[data-mode="dark"] .cs2-knob .cs2-icon-sun { display: none; }
html[data-mode="dark"] .cs2-knob .cs2-icon-moon { display: block; }

.cs2-main-wrap { flex: 1; display: flex; flex-direction: column; }

/* ---- product split ------------------------------------------ */
.cs2-product {
  flex: 1;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: start;
}
.cs2-media {
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-end; justify-content: flex-start;
  padding: 24px 36px 56px 48px;
  /* fill exactly the viewport area below the header and stay there,
     so the image keeps its original centered position and never shifts
     when the details column grows (e.g. opening an FAQ answer) */
  align-self: start;
  position: sticky;
  top: 0;
  height: calc(100vh - var(--cs2-header-h, 78px));
  /* every product shot is square, so cap the frame by the height left over
     in the sticky column (154px of padding + gap + thumb row) — otherwise a
     1:1 frame at full column width runs off the bottom of the viewport */
  --cs2-frame-max: min(720px, calc(100vh - var(--cs2-header-h, 78px) - 154px));
}
.cs2-media-frame {
  width: 100%; max-width: var(--cs2-frame-max); aspect-ratio: 1 / 1;
  border-radius: 4px; overflow: hidden; background: #13151a;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}
.cs2-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs2-thumbs { display: flex; gap: 10px; width: 100%; max-width: var(--cs2-frame-max); }
.cs2-thumb {
  width: 60px; aspect-ratio: 1 / 1; border-radius: 3px; overflow: hidden;
  padding: 0; cursor: pointer; background: #13151a; flex: none;
  border: 1.5px solid var(--line); opacity: 0.6;
  transition: opacity .2s, border-color .2s;
}
.cs2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs2-thumb[aria-pressed="true"] { border-color: var(--text); opacity: 1; }

.cs2-details {
  display: flex; flex-direction: column; justify-content: flex-start;
  gap: 34px; padding: 24px 80px 56px 40px;
  border-left: 1px solid var(--line);
  min-height: calc(100vh - var(--cs2-header-h, 78px));
}
.cs2-title {
  margin: 0; font-size: clamp(40px, 5.2vw, 64px); line-height: 0.92;
  letter-spacing: -0.03em; font-weight: 700; text-transform: uppercase;
}
.cs2-buy { display: flex; flex-direction: column; gap: 18px; }
.cs2-price { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }

/* ---- description -------------------------------------------- */
.cs2-desc { display: flex; flex-direction: column; gap: 18px; }
.cs2-desc-note {
  margin: 0; padding-bottom: 18px; font-size: 13px; line-height: 1.5;
  opacity: 0.6; border-bottom: 1px solid var(--line);
}
.cs2-desc-note strong { font-weight: 700; opacity: 1; }

/* ---- faq ----------------------------------------------------- */
/* 16px + the 18px .cs2-desc gap = 34px, matching the .cs2-details rhythm.
   The first item's border-top carries the section break, so it needs no more. */
.cs2-faq { margin-top: 16px; display: flex; flex-direction: column; }
.cs2-faq-item { border-bottom: 1px solid var(--line); }
.cs2-faq-item:first-child { border-top: 1px solid var(--line); }
.cs2-faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px;
  padding: 17px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; line-height: 1.45;
  opacity: 0.72; transition: opacity .2s ease;
}
.cs2-faq-item summary::-webkit-details-marker { display: none; }
.cs2-faq-item summary:hover,
.cs2-faq-item[open] summary { opacity: 1; }
.cs2-faq-item summary::after {
  content: ""; margin-left: auto; flex: none;
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.45;
  transition: transform .2s ease, opacity .2s ease;
}
.cs2-faq-item[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
  opacity: 0.7;
}
.cs2-faq-item p {
  margin: 0; padding: 0 0 18px; font-size: 13px; line-height: 1.7;
  letter-spacing: 0.01em; opacity: 0.58;
}
.cs2-specs { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cs2-specs div {
  display: flex; gap: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cs2-specs div:last-child { border-bottom: none; padding-bottom: 0; }
.cs2-specs dt {
  flex: none; width: 92px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.45;
}
.cs2-specs dd { margin: 0; font-size: 13px; font-weight: 700; }

/* ---- variant / set selector (image swatches) ---------------- */
.cs2-variants { display: flex; gap: 12px; }
.cs2-variant {
  display: flex; flex-direction: column; gap: 8px; cursor: pointer;
  padding: 0 0 9px; width: 128px; flex: none; overflow: hidden;
  background: transparent; color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 5px; font-family: inherit;
  transition: border-color .2s ease, opacity .2s ease;
}
.cs2-variant-thumb {
  width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: #13151a; display: block;
}
.cs2-variant-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs2-variant-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1.3; opacity: 0.6;
  white-space: nowrap; text-align: center; padding: 0 6px;
  transition: opacity .2s ease;
}
.cs2-variant:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.cs2-variant:hover .cs2-variant-label { opacity: 0.85; }
.cs2-variant[aria-pressed="true"] { border-color: var(--text); }
.cs2-variant[aria-pressed="true"] .cs2-variant-label { opacity: 1; }

/* ---- shipping tag -------------------------------------------- */
/* Sits between the set selector and the stepper. Borrows the swatch
   outline so it reads as part of the buy block rather than as a badge. */
.cs2-tag {
  align-self: flex-start;
  padding: 8px 11px; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--text) 14%, transparent);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}
/* Two narrow bands of light sweep the lettering, at different speeds and in
   opposite directions, so the letters they cross read heavier for a moment.
   No color, no hover, always running. Each band is shifted by exactly one
   tile width, so the 4.5s loop is seamless.
   Keep the tiles narrower than the chip (~184px) — a band wider than the
   text brightens all of it at once and stops looking like motion. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cs2-tag {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat, repeat-x, repeat-x;
    background-size: 100% 100%, 300px 100%, 190px 100%;
    background-image:
      linear-gradient(color-mix(in srgb, var(--text) 45%, transparent) 0 100%),
      repeating-linear-gradient(100deg,
        transparent 0%, transparent 38%,
        var(--text) 50%,
        transparent 62%, transparent 100%),
      repeating-linear-gradient(80deg,
        transparent 0%, transparent 40%,
        color-mix(in srgb, var(--text) 32%, transparent) 50%,
        transparent 60%, transparent 100%);
    animation: cs2-tag-flow 4.5s linear infinite;
  }
}
@keyframes cs2-tag-flow {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 300px 0, -190px 0; }
}

/* ---- stepper (shared) --------------------------------------- */
.cs2-stepper {
  display: flex; align-items: center; flex: none; width: fit-content;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 4px; overflow: hidden;
}
.cs2-stepper button {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--text); font-family: inherit; font-size: 20px;
  line-height: 1; border: none; transition: opacity .2s;
}
.cs2-stepper button:disabled { opacity: 0.3; cursor: default; }
.cs2-qty {
  min-width: 52px; width: 52px; text-align: center; font-size: 16px; font-weight: 700;
  height: 44px; padding: 0 6px; color: var(--text); background: transparent;
  font-family: inherit; -moz-appearance: textfield;
  border: none;
  border-left: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-right: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
}
.cs2-qty::-webkit-outer-spin-button,
.cs2-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs2-qty:focus { outline: none; }

/* ---- actions ------------------------------------------------- */
.cs2-actions { display: flex; flex-direction: column; gap: 10px; max-width: 320px; }
.cs2-btn {
  font-family: inherit; font-weight: 700; cursor: pointer; font-size: 14px;
  letter-spacing: 0.06em; padding: 14px 20px; border-radius: 4px; text-align: center;
  transition: background-color .3s ease, color .3s ease, transform .12s ease, opacity .2s ease;
}
.cs2-btn:disabled { opacity: 0.45; cursor: default; }
.cs2-btn-primary { border: none; background: var(--text); color: var(--bg); }
.cs2-btn-primary:active { transform: translateY(1px); }
.cs2-btn-ghost {
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  background: transparent; color: var(--text); opacity: 0.75;
}
.cs2-btn-ghost:hover { opacity: 1; }

/* ---- page title ---------------------------------------------- */
.cs2-page-title {
  margin: 0; font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.03em;
  text-transform: uppercase; font-weight: 700;
}

/* ---- contact ------------------------------------------------- */
.cs2-contact-main {
  flex: 1; width: 100%; max-width: 560px; margin: 0 auto;
  padding: 48px 40px 80px; display: flex; flex-direction: column; gap: 36px;
}
.cs2-form { display: flex; flex-direction: column; gap: 22px; }
.cs2-field { display: flex; flex-direction: column; gap: 8px; }
.cs2-field label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55;
}
/* Fields are outlined boxes, borrowing the product page's .cs2-choice
   border exactly (1.5px at 18%, 5px radius), so a text field and a
   variant swatch read as one control family. */
.cs2-field input, .cs2-field textarea {
  font-family: inherit; font-size: 15px; color: var(--text);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 5px;
  padding: 12px 14px; transition: border-color .25s ease;
  resize: none;
}
.cs2-field input:focus, .cs2-field textarea:focus { outline: none; border-color: var(--text); }
.cs2-field textarea { min-height: 120px; line-height: 1.5; }

.cs2-submit {
  border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  background: var(--text); color: var(--bg); font-size: 14px; letter-spacing: 0.06em;
  padding: 15px 20px; border-radius: 4px; text-transform: uppercase; margin-top: 4px;
  transition: background-color .3s ease, color .3s ease, transform .12s ease;
}
.cs2-submit:active { transform: translateY(1px); }
.cs2-submit[disabled] { cursor: default; opacity: 0.45; transform: none; }

/* Honeypot. Out of sight and out of the tab order, never display:none —
   some bots skip hidden fields, which would defeat the point. */
.cs2-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}
.cs2-sent { font-size: 13px; opacity: 0; transition: opacity .3s ease; }
.cs2-sent.show { opacity: 0.6; }

.cs2-divider {
  display: flex; align-items: center; gap: 16px; margin-top: -6px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.35;
}
.cs2-divider::before, .cs2-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.cs2-x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  text-decoration: none; cursor: pointer; margin-top: -10px;
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  color: var(--text); background: transparent;
  font-family: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 14px 20px; border-radius: 4px;
  transition: background-color .3s ease, color .3s ease;
}
.cs2-x-btn:hover { background: var(--text); color: var(--bg); }
.cs2-x-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ============================================================
   MOTION

   One easing curve everywhere: a fast start that settles instead of
   stopping. `.cs2-reveal` is for things that are on the page at load
   (staggered with --d); `.cs2-step` is for the checkout answers that
   appear as you go, toggled from JS via [hidden] + .is-in.
   ============================================================ */
:root { --cs2-ease: cubic-bezier(.22,.61,.36,1); }

@keyframes cs2-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.cs2-reveal {
  opacity: 0;
  animation: cs2-in .55s var(--cs2-ease) both;
  animation-delay: var(--d, 0s);
}

/* .cs2-fade is the bare fade-up; .cs2-step is that plus the stacking a
   question and its choices need. Both are switched on from JS. */
.cs2-step, .cs2-fade {
  opacity: 0; transform: translateY(10px);
  transition: opacity .42s var(--cs2-ease), transform .42s var(--cs2-ease);
}
.cs2-step.is-in, .cs2-fade.is-in { opacity: 1; transform: none; }
.cs2-step { display: flex; flex-direction: column; gap: 9px; }
/* the question above each set of choices — it has to carry the flow, so
   it sits well above the quiet-label opacity used elsewhere */
.cs2-step-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.8;
}
/* the last one asks for something rather than offering a choice */
.cs2-step-label-strong { opacity: 1; font-size: 12px; }
/* points at the field directly below it. The gap is a margin rather than a
   literal space so it stays put — a space would pick up the label's 0.14em
   letter-spacing on top and drift as the font size changes */
.cs2-step-arrow {
  display: inline-block; width: 1.05em; height: 1.05em;
  margin-left: 0.45em; vertical-align: -0.2em;
}

@keyframes cs2-pop {
  0%   { transform: scale(.96); }
  55%  { transform: scale(1.025); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cs2-reveal, .cs2-step, .cs2-fade, .cs2-choice[aria-pressed="true"], .cs2-tag { animation: none; }
  /* the strip stops rolling and becomes a row you scroll yourself */
  .is-ready .cs2-reviews-track { animation: none; }
  .cs2-reviews-viewport.is-ready { overflow-x: auto; }
  .cs2-reveal { opacity: 1; }
  .cs2-step, .cs2-fade { opacity: 1; transform: none; transition: none; }
  .cs2-drawer-panel, .cs2-drawer-scrim { transition: none; }
}

/* ============================================================
   CART DRAWER
   ============================================================ */
body.cs2-no-scroll { overflow: hidden; }
.cs2-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.cs2-drawer.is-open { visibility: visible; }
.cs2-drawer-scrim {
  position: absolute; inset: 0;
  background: color-mix(in srgb, #0b0a07 42%, transparent);
  opacity: 0; transition: opacity .4s var(--cs2-ease);
}
.cs2-drawer.is-open .cs2-drawer-scrim { opacity: 1; }
.cs2-drawer-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(410px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line);
  box-shadow: -24px 0 70px color-mix(in srgb, #000 14%, transparent);
  transform: translateX(100%);
  transition: transform .45s var(--cs2-ease);
}
.cs2-drawer.is-open .cs2-drawer-panel { transform: none; }
.cs2-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 24px 18px; border-bottom: 1px solid var(--line);
}
.cs2-drawer-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.cs2-icon-btn {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: none; background: none; cursor: pointer; color: var(--text);
  opacity: 0.5; transition: opacity .2s ease;
}
.cs2-icon-btn:hover { opacity: 1; }
.cs2-icon-btn svg { width: 16px; height: 16px; }
.cs2-drawer-body { flex: 1; overflow-y: auto; padding: 4px 24px; }
.cs2-drawer-empty {
  margin: 0; padding: 40px 0; font-size: 13px; line-height: 2; opacity: 0.5;
}
.cs2-drawer-foot {
  padding: 20px 24px 24px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.cs2-drawer-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 700;
}
.cs2-drawer-checkout { text-decoration: none; display: block; }
/* on checkout itself the drawer is just a summary — no button back to here */
body[data-cs2-page="checkout"] .cs2-drawer-checkout { display: none; }

/* cart line + order-summary line share the thumb / title / price bits */
.cs2-line, .cs2-sum-line {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.cs2-line:last-child { border-bottom: none; }
/* the summary's item rows are never ruled — see .cs2-sum-ship below */
.cs2-sum-line { border-bottom: none; }
.cs2-line-thumb {
  display: block;
  width: 54px; aspect-ratio: 1 / 1; flex: none; overflow: hidden;
  border-radius: 4px; background: #13151a;
}
.cs2-line-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs2-line-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.cs2-line-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.35;
}
.cs2-line-meta { font-size: 11px; opacity: 0.45; }
.cs2-line-stepper {
  display: flex; align-items: center; gap: 2px; margin-top: 4px;
  width: fit-content; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
}
.cs2-line-stepper button {
  width: 26px; height: 24px; display: grid; place-items: center; cursor: pointer;
  border: none; background: transparent; color: var(--text);
  font-family: inherit; font-size: 14px; line-height: 1;
  opacity: 0.6; transition: opacity .2s ease;
}
.cs2-line-stepper button:hover { opacity: 1; }
.cs2-line-stepper span {
  min-width: 22px; text-align: center; font-size: 12px; font-weight: 700;
}
.cs2-line-end {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none;
}
.cs2-line-price { font-size: 13px; font-weight: 700; }
.cs2-line-remove {
  border: none; background: none; padding: 0; cursor: pointer; color: var(--text);
  font-family: inherit; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.4; transition: opacity .2s ease;
}
.cs2-line-remove:hover { opacity: 0.85; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.cs2-checkout {
  flex: 1; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: 28px 44px 64px; display: flex; flex-direction: column; gap: 24px;
}
.cs2-checkout .cs2-page-title { font-size: clamp(26px, 3.2vw, 36px); }
/* Two rows, so the help button can sit under the shipping column: the
   payment column spans both, and whatever it has beyond the shipping
   column's height goes into the 1fr row rather than the first one. */
.cs2-checkout-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr;
  align-items: start;
}
.cs2-col { display: flex; flex-direction: column; gap: 26px; padding-right: 40px; }
.cs2-col-pay {
  grid-column: 2; grid-row: 1 / span 2;
  padding-right: 0; padding-left: 40px;
  border-left: 1px solid var(--line);
  position: sticky; top: 18px;
}
.cs2-panel { display: flex; flex-direction: column; gap: 12px; }
.cs2-panel-title {
  margin: 0; font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45;
}
.cs2-steps { display: flex; flex-direction: column; gap: 20px; }

/* ---- the shipping form's grid --------------------------------
   The form itself is still a plain stack; the rows that hold more
   than one field are the only grids, so a field's width is stated
   once, next to the fields that share its line.

   Rows align on their bottom edge rather than their top, so a label
   that runs to two lines grows upwards and leaves the inputs beside
   it on the same line. */
.cs2-checkout .cs2-form { gap: 12px; }
.cs2-field-row { display: grid; gap: 12px; align-items: end; }
/* minmax(0, …) on every track: an input carries an intrinsic minimum
   width of its own, and without the 0 floor that minimum is what sizes
   the column, so the ratios below never get a say. */
.cs2-field-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* a city name needs the room, a postal code never does */
.cs2-field-row-3 {
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
}

/* ---- compact fields ------------------------------------------
   Only inside the checkout: the contact page is one narrow column
   where the roomier default is still right. */
.cs2-checkout .cs2-field { gap: 5px; }
.cs2-checkout .cs2-field label { font-size: 10px; letter-spacing: 0.12em; }
.cs2-checkout .cs2-field input,
.cs2-checkout .cs2-select,
.cs2-checkout .cs2-dial { font-size: 13px; padding: 9px 11px; }
.cs2-checkout .cs2-phone input { padding-left: 10px; }
/* Optional fields say so in the label, except where the label has no
   room for it — see the state field in checkout.html. */
.cs2-checkout .cs2-field input::placeholder { color: var(--text); opacity: 0.3; }
.cs2-confirm-form { gap: 12px; }
.cs2-checkout .cs2-btn { padding: 12px 18px; font-size: 13px; }
.cs2-checkout .cs2-submit { padding: 13px 18px; font-size: 13px; }

/* the second address line, folded away until it is asked for */
.cs2-addline {
  align-self: start; margin-top: -2px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 11px; color: var(--text);
  opacity: 0.55; text-decoration: underline; text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.cs2-addline:hover { opacity: 1; }
.cs2-addline:focus-visible {
  opacity: 1; border-radius: 2px;
  outline: 1.5px solid var(--text); outline-offset: 3px;
}

/* a side question under the currency tiles, folded shut; the summary
   is the same quiet underlined link as .cs2-addline */
.cs2-aside { margin-top: 2px; }
.cs2-aside summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-size: 11px; opacity: 0.55;
  text-decoration: underline; text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.cs2-aside summary::-webkit-details-marker { display: none; }
.cs2-aside summary:hover, .cs2-aside[open] summary { opacity: 1; }
.cs2-aside summary:focus-visible {
  outline: 1.5px solid var(--text); outline-offset: 3px; border-radius: 2px;
}
.cs2-aside .cs2-note { margin-top: 6px; }

/* ---- shipping details gate ---------------------------------- */
/* a field that needs attention only gains weight: the palette is two
   colors, so there is no red to reach for */
.cs2-opt { opacity: 0.55; }
.cs2-field.is-invalid label { opacity: 1; }
.cs2-field.is-invalid input { border-color: var(--text); }
.cs2-field.is-invalid .cs2-select { border-color: var(--text); }
/* the phone box owns the border, so it is the thing that has to darken */
.cs2-field.is-invalid .cs2-phone { border-color: var(--text); }

/* ---- phone, with its dial code ------------------------------- */
/* One outlined box holding two controls: the dial-code button, then a
   hairline, then the number. Both are stripped bare and the wrapper
   carries the border, so it reads as a single field. */
.cs2-phone {
  display: flex; align-items: stretch;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 5px; transition: border-color .25s ease;
}
.cs2-phone:focus-within { border-color: var(--text); }
.cs2-field .cs2-phone input {
  flex: 1; min-width: 0; border: none; border-radius: 0; padding-left: 12px;
}
.cs2-dial {
  display: flex; align-items: center; gap: 7px; flex: none; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: transparent; border: none;
  border-right: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  padding: 12px 12px 12px 14px;
  transition: background-color .2s ease;
  border-radius: 4px 0 0 4px;
}
.cs2-dial:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.cs2-dial:focus-visible { outline: none; background: color-mix(in srgb, var(--text) 5%, transparent); }
.cs2-dial-val { font-variant-numeric: tabular-nums; }
/* the number is the point of the field, the code is a setting on it */
.cs2-phone input { font-variant-numeric: tabular-nums; }

/* ---- info tooltip -------------------------------------------- */
.cs2-label-row { display: flex; align-items: center; gap: 7px; }
.cs2-info { display: inline-flex; cursor: help; opacity: 0.45; transition: opacity .2s ease; }
.cs2-info svg { width: 14px; height: 14px; display: block; }
.cs2-info:hover, .cs2-info:focus-visible { opacity: 0.9; outline: none; }
/* Anchored to the field, not to the icon: a bubble hung off a 14px icon
   two thirds of the way across a narrow screen runs off the edge of it. */
.cs2-tip {
  position: absolute; z-index: 40; bottom: calc(100% + 9px); left: 0;
  width: max-content; max-width: min(300px, 100%);
  padding: 11px 13px;
  font-size: 11px; line-height: 1.6; letter-spacing: 0; text-transform: none;
  color: var(--text); background: var(--bg);
  border: 1.5px solid var(--line); border-radius: 5px;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--text) 45%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cs2-info:hover .cs2-tip, .cs2-info:focus .cs2-tip, .cs2-info:focus-visible .cs2-tip {
  opacity: 1; visibility: visible; transform: none;
}

/* ---- country picker ------------------------------------------ */
/* The trigger is dressed as one of the outlined text fields above, so
   the row reads as two matching inputs; only the caret gives it away. */
.cs2-select-field { position: relative; }
.cs2-select {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 15px; color: var(--text);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 5px;
  padding: 12px 14px; transition: border-color .25s ease;
}
.cs2-select:focus-visible { outline: none; border-color: var(--text); }
.cs2-select[aria-expanded="true"] { border-color: var(--text); }
.cs2-select-val {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs2-select-val.is-empty { opacity: 0.4; }
.cs2-select-caret {
  width: 15px; height: 15px; flex: none; display: block; opacity: 0.45;
  transition: transform .2s ease, opacity .2s ease;
}
.cs2-select:hover .cs2-select-caret,
.cs2-dial:hover .cs2-select-caret { opacity: 0.8; }
.cs2-select[aria-expanded="true"] .cs2-select-caret,
.cs2-dial[aria-expanded="true"] .cs2-select-caret { transform: rotate(180deg); opacity: 0.8; }
.cs2-dial .cs2-select-caret { width: 13px; height: 13px; }

/* .cs2-reveal leaves a transform on the panel, which makes it a stacking
   context — so the popover's own z-index can't reach past the payment
   panel, and on one column the two overlap. Lift the whole panel while
   the list is open instead. */
.cs2-panel:has(.cs2-select[aria-expanded="true"]),
.cs2-panel:has(.cs2-dial[aria-expanded="true"]) { z-index: 5; }
.cs2-select-pop {
  position: absolute; z-index: 30; top: 100%; left: 0; margin-top: 6px;
  /* at least as wide as the field, wider if a long name needs it, so no
     country ever wraps onto a second line */
  min-width: 100%; width: max-content; max-width: min(320px, 78vw);
  display: flex; flex-direction: column;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 5px;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--text) 45%, transparent);
  animation: cs2-pop-in .16s ease both;
}
@keyframes cs2-pop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.cs2-select-search {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 12px 14px; border-bottom: 1.5px solid var(--line);
}
.cs2-select-search svg { width: 14px; height: 14px; flex: none; display: block; opacity: 0.45; }
.cs2-select-search input {
  flex: 1; min-width: 0;
  font-family: inherit; font-size: 14px; color: var(--text);
  background: transparent; border: none; padding: 0;
}
.cs2-select-search input:focus { outline: none; }
.cs2-select-search input::placeholder { color: var(--text); opacity: 0.35; }
.cs2-select-list {
  list-style: none; margin: 0; padding: 6px; max-height: 244px; overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 25%, transparent) transparent;
}
.cs2-select-list::-webkit-scrollbar { width: 8px; }
.cs2-select-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 99px;
}
.cs2-select-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 14px; line-height: 1.45; color: var(--text);
  background: transparent; border: none; border-radius: 3px;
  padding: 9px 10px; opacity: 0.7;
  transition: background-color .15s ease, opacity .15s ease;
}
/* one highlight for hover and for keyboard, so arrowing through the list
   and running the mouse down it look the same */
.cs2-select-opt.is-active {
  opacity: 1; background: color-mix(in srgb, var(--text) 8%, transparent);
}
.cs2-select-opt[aria-selected="true"] { opacity: 1; font-weight: 700; }
/* the dial list is two columns: the country, then its code hard right */
.cs2-dial-pop .cs2-select-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.cs2-opt-dial { flex: none; opacity: 0.55; font-variant-numeric: tabular-nums; }
.cs2-select-empty {
  margin: 0; padding: 14px; font-size: 12px; opacity: 0.5;
}
.cs2-ship-confirm { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.cs2-ship-btn { width: 100%; text-transform: uppercase; }
.cs2-form-error { font-size: 12px; opacity: 0; transition: opacity .3s ease; }
.cs2-form-error.show { opacity: 0.7; }
.cs2-ship-done {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; opacity: 0.75;
}
.cs2-ship-done svg { width: 15px; height: 15px; flex: none; display: block; }
/* fades out just before the payment steps fade in, so they don't cross */
.cs2-pay-locked { transition: opacity .22s ease; }
.cs2-pay-locked.is-out { opacity: 0; }

/* order summary */
.cs2-sum-line { padding: 9px 0; align-items: center; }
.cs2-sum-line .cs2-line-thumb { width: 38px; }
.cs2-sum-line .cs2-line-price { margin-left: auto; }
/* How many, as a bubble on the photo. The wrapper exists because
   .cs2-line-thumb clips to its own rounded corners, and the bubble
   sits over the corner rather than inside it. */
.cs2-sum-thumb { position: relative; flex: none; display: block; }
.cs2-sum-qty {
  position: absolute; top: -8px; right: -8px; pointer-events: none;
  min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  /* the page's own colour, so the badge masks the photo behind it and
     needs no halo to separate the two */
  background: var(--bg); color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 38%, transparent);
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
}
/* need help? — a quieter, smaller relative of the contact page's X button.
   On desktop it sits under the shipping column, out of the way of the
   confirm button and pinned there however tall the payment column gets. */
.cs2-help {
  grid-column: 1; grid-row: 2; justify-self: start; align-self: start;
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 4px; padding: 8px 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.6;
  transition: opacity .2s ease, background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cs2-help:hover {
  opacity: 1; background: var(--text); color: var(--bg); border-color: var(--text);
}
.cs2-help svg { width: 13px; height: 13px; flex: none; display: block; fill: currentColor; }

/* shipping — one row between the pins and the total, lighter than both */
/* the one rule in the summary: items above it, money below */
.cs2-sum-ship {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 8px; padding: 12px 0 0; border-top: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.04em; opacity: 0.75;
}
.cs2-sum-ship.is-pending { opacity: 0.45; }
.cs2-sum-ship span:last-child { flex: none; }
.cs2-sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px;
  font-size: 14px; font-weight: 700;
}
/* the order is too small for the country it is going to — weight rather
   than colour, same as the invalid fields */
.cs2-sum-min {
  margin: 12px 0 0; font-size: 12px; line-height: 1.6; font-weight: 700;
}

/* choice tiles — same language as the product page's variant swatches */
.cs2-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs2-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs2-choice {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 11px 6px; cursor: pointer;
  background: transparent; color: var(--text); font-family: inherit;
  border: 1.5px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: 5px;
  transition: border-color .25s ease, background-color .25s ease;
}
.cs2-choice:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.cs2-choice:hover .cs2-choice-label { opacity: 0.85; }
.cs2-choice[aria-pressed="true"] {
  border-color: var(--text);
  background: color-mix(in srgb, var(--text) 5%, transparent);
  animation: cs2-pop .34s var(--cs2-ease);
}
.cs2-choice[aria-pressed="true"] .cs2-choice-label { opacity: 1; }
.cs2-choice-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  line-height: 1.3; text-align: center; opacity: 0.55;
  transition: opacity .2s ease;
}
.cs2-logo { width: 22px; height: 22px; display: block; flex: none; }
/* currency glyph — sized like the coin logos so the rows line up */
.cs2-cur {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--text) 28%, transparent);
  border-radius: 50%;
  font-size: 13px; font-weight: 700; line-height: 1;
  transition: border-color .25s ease;
}
.cs2-choice[aria-pressed="true"] .cs2-cur { border-color: var(--text); }
.cs2-logo-stroke { color: var(--text); opacity: 0.9; }
.cs2-logo-stack { display: flex; }
.cs2-logo-stack .cs2-logo + .cs2-logo {
  margin-left: -8px;
  /* punch the overlap out of the coin behind so the pair reads as two */
  clip-path: circle(50% at 50% 50%);
}

/* payment details (crypto address, card amount / note) with copy-to-clipboard */
.cs2-paylist { display: flex; flex-direction: column; }
.cs2-detail {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.cs2-detail:first-child { border-top: 1px solid var(--line); }
.cs2-detail-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45;
}
.cs2-detail-row { display: flex; align-items: flex-start; gap: 12px; }
.cs2-detail-val {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 700; line-height: 1.55;
}
.cs2-detail-addr { word-break: break-all; }
.cs2-copy {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--text) 16%, transparent);
  border-radius: 4px; background: transparent; color: var(--text);
  transition: border-color .2s ease, background-color .2s ease;
}
.cs2-copy:hover { border-color: color-mix(in srgb, var(--text) 45%, transparent); }
.cs2-copy.is-copied { border-color: var(--text); }
.cs2-copy svg {
  grid-area: 1 / 1; width: 14px; height: 14px; display: block;
  transition: opacity .2s ease, transform .28s var(--cs2-ease);
}
.cs2-copy .cs2-icon-check { opacity: 0; transform: scale(.6); }
.cs2-copy.is-copied .cs2-icon-copy { opacity: 0; transform: scale(.6); }
.cs2-copy.is-copied .cs2-icon-check { opacity: 1; transform: none; }

.cs2-note {
  margin: 0; font-size: 12px; line-height: 1.65; opacity: 0.5;
}
.cs2-note strong { font-weight: 700; opacity: 1; }

/* ---- thank you ----------------------------------------------- */
.cs2-thanks {
  flex: 1; width: 100%; max-width: 480px; margin: 0 auto;
  padding: 0 40px 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center;
}
.cs2-thanks-mark {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1.5px solid color-mix(in srgb, var(--text) 30%, transparent);
  border-radius: 50%;
}
.cs2-thanks-mark svg { width: 20px; height: 20px; display: block; }
.cs2-thanks-msg {
  margin: 0; font-size: 14px; line-height: 1.8; opacity: 0.62;
}
.cs2-thanks-back { text-decoration: none; margin-top: 10px; }
/* the order, as the checkout summary showed it; its rows read left to
   right, so it opts out of the page's centring */
.cs2-thanks-order {
  width: 100%; text-align: left;
  padding-top: 8px; border-top: 1px solid var(--line);
}
/* the rest of the order, folded under the total. The toggle is a small
   outlined button in the "Need help?" family rather than the currency
   hint's underlined link, with a chevron that turns when it opens. */
.cs2-order-more { margin-top: 16px; }
.cs2-order-more summary {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 12px; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; opacity: 0.6;
  transition: opacity .2s ease, border-color .2s ease;
}
.cs2-order-more summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .25s var(--cs2-ease), margin .25s var(--cs2-ease);
}
.cs2-order-more[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.cs2-order-more summary:hover, .cs2-order-more[open] summary {
  opacity: 1; border-color: color-mix(in srgb, var(--text) 45%, transparent);
}
.cs2-order-more .cs2-paylist { margin-top: 14px; }
/* a long name wraps rather than squeezing its label onto two lines */
.cs2-thanks-order .cs2-sum-ship span:first-child { flex: none; }
.cs2-thanks-order .cs2-sum-ship span:last-child {
  flex: 0 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere;
}

/* ============================================================
   REVIEWS TICKER

   Sits under the product on index.html. There is no heading: a strip
   of tweets announces itself, and a label over it would only say what
   the cards already say.

   The card below is deliberately NOT in the site's design. It is X's
   own — their palette, their system-font stack, their 16px radii,
   their icon row — so it reads as a tweet somebody screenshotted
   rather than as our styling. Everything inside is sized in em off
   .cs2-tweet's font-size, so the whole card scales with one
   declaration.
   ============================================================ */
.cs2-reviews {
  border-top: 1px solid var(--line);
  padding: 56px 0 60px;
}

/* ---- the strip ----------------------------------------------- */
/* Without JS the clone never arrives and a -50% loop would jump, so
   the animation is held back until .is-ready says the track is twice
   as long as it looks. Until then this is an ordinary swipeable row. */
.cs2-reviews-viewport { overflow-x: auto; scrollbar-width: none; }
.cs2-reviews-viewport::-webkit-scrollbar { display: none; }
.cs2-reviews-viewport.is-ready {
  overflow: hidden;
  /* fade both ends so cards enter and leave instead of being cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* No side padding, deliberately: the strip bleeds to both edges and the
   mask above fades it out there. Padding would also break the loop —
   the maths below only works when the track is exactly the ten cards
   and the nine gaps between them. */
.cs2-reviews-track {
  display: flex; align-items: stretch; gap: 16px;
  width: max-content;
}
.is-ready .cs2-reviews-track { animation: cs2-reviews-roll 60s linear infinite; }
.cs2-reviews-viewport:hover .cs2-reviews-track { animation-play-state: paused; }
@keyframes cs2-reviews-roll {
  /* Travel exactly one set of tweets, so the copy behind lands where the
     original started and the seam is invisible. That distance depends on
     how wide a card renders, so cs2pins.js measures it and writes it to
     --cs2-reviews-shift; it is NOT a percentage of the track, because the
     track grows a set at a time to cover wider screens. */
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--cs2-reviews-shift, 0px) * -1)); }
}

/* ---- the tweet ----------------------------------------------- */
.cs2-tweet {
  --tw-bg: #fff;
  --tw-fg: #0f1419;
  --tw-dim: #536471;
  --tw-line: #cfd9de;
  --tw-media-line: #eff3f4;

  display: flex; flex-direction: column;
  width: 340px; flex: none;
  background: var(--tw-bg); color: var(--tw-fg);
  border: 1px solid var(--tw-line); border-radius: 16px;
  padding: 1em;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: border-color .2s ease;
}
/* X's own "lights out" palette. A white card on the dark page would
   read as a hole in it rather than as a tweet. */
html[data-mode="dark"] .cs2-tweet {
  --tw-bg: #000;
  --tw-fg: #e7e9ea;
  --tw-dim: #71767b;
  --tw-line: #2f3336;
  --tw-media-line: #2f3336;
}
.cs2-tweet:hover { border-color: var(--tw-dim); }

.cs2-tweet-head { display: flex; align-items: flex-start; gap: 0.7em; }
.cs2-tweet-av {
  width: 2.7em; height: 2.7em; flex: none;
  border-radius: 50%; object-fit: cover; display: block;
  background: var(--tw-line);
}
.cs2-tweet-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05em; }
.cs2-tweet-name {
  display: flex; align-items: center; gap: 0.25em; min-width: 0;
  font-weight: 700; font-size: 1em; line-height: 1.3;
}
.cs2-tweet-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs2-tweet-badge { width: 1.1em; height: 1.1em; flex: none; fill: #1d9bf0; display: block; }
.cs2-tweet-handle {
  font-size: 1em; line-height: 1.3; color: var(--tw-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs2-tweet-logo { width: 1.35em; height: 1.35em; flex: none; fill: var(--tw-fg); display: block; }

/* ---- tweet body ---------------------------------------------- */
/* Each .cs2-tweet in index.html is the head above, then:

     <p class="cs2-tweet-text">…</p>
     <div class="cs2-tweet-media"><img …></div>     (only if it has a photo)
     <div class="cs2-tweet-spacer"></div>
     <div class="cs2-tweet-time">…</div>
     <div class="cs2-tweet-stats">… .cs2-tweet-stat ×4 …</div> */
.cs2-tweet-text {
  margin: 0.8em 0 0; font-size: 1em; line-height: 1.35; word-break: break-word;
  /* a long review can't be allowed to set the height of the whole row;
     five lines fits a short review split into paragraphs */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
.cs2-tweet-mention { color: #1d9bf0; }
.cs2-tweet-media {
  margin-top: 0.8em; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--tw-media-line);
  aspect-ratio: 4 / 3; background: #13151a;
}
.cs2-tweet-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* No card sets a height. The flex row stretches every card to the
   tallest of them, and this spacer pushes each timestamp and icon row
   down to that shared bottom edge — so swapping in a longer review
   regrows the whole row instead of leaving one card hanging short. */
.cs2-tweet-spacer { flex: 1; min-height: 0; }
.cs2-tweet-time { margin-top: 0.8em; font-size: 0.93em; color: var(--tw-dim); }
.cs2-tweet-stats {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.8em; padding-top: 0.8em;
  border-top: 1px solid var(--tw-line);
  color: var(--tw-dim);
}
.cs2-tweet-stat { display: flex; align-items: center; gap: 0.4em; font-size: 0.87em; }
.cs2-tweet-stat svg { width: 1.25em; height: 1.25em; fill: currentColor; display: block; }

/* ---- responsive --------------------------------------------- */
@media (max-width: 980px) {
  .cs2-checkout { padding: 26px 32px 56px; }
  .cs2-checkout-grid { grid-template-columns: 1fr; gap: 34px; }
  .cs2-col { padding-right: 0; }
  .cs2-col-pay {
    grid-column: auto; grid-row: auto;
    padding-left: 0; padding-top: 34px;
    border-left: none; border-top: 1px solid var(--line);
    position: static;
  }
  .cs2-help { grid-column: auto; grid-row: auto; margin-top: -16px; }
}
@media (max-width: 860px) {
  .cs2-topbar { padding: 22px 24px; }
  .cs2-reviews { padding: 44px 0 52px; }
  .cs2-product { grid-template-columns: 1fr; }
  .cs2-media {
    padding: 8px 24px 32px; align-items: center;
    position: static; height: auto; align-self: auto;
    /* column is no longer sticky/viewport-locked, so drop the height cap */
    --cs2-frame-max: 720px;
  }
  .cs2-details {
    border-left: none; border-top: 1px solid var(--line);
    padding: 36px 24px 56px; gap: 28px; min-height: 0;
  }
  .cs2-actions { max-width: none; }
}
@media (max-width: 600px) {
  .cs2-contact-main { padding: 36px 24px 64px; }
  .cs2-tweet { width: min(84vw, 330px); }
  .cs2-checkout { padding: 22px 20px 52px; gap: 20px; }
  .cs2-help { margin-top: -20px; }
  .cs2-choices-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* three to a row stops being an improvement on a phone */
  .cs2-field-row-2, .cs2-field-row-3 { grid-template-columns: 1fr; }
  .cs2-drawer-head, .cs2-drawer-foot { padding-left: 20px; padding-right: 20px; }
  .cs2-drawer-body { padding-left: 20px; padding-right: 20px; }
}