/* ============================================================
   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: "Space Mono", monospace;
  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; }

/* ---- password gate ------------------------------------------- */
/* Only visible while html.cs2-locked is set. That class is added by an
   inline snippet in each page's <head> before first paint, so the real
   page never flashes; assets/cs2-gate.js removes it on a correct
   password. Client-side only — see the header of that file. */
.cs2-gate { display: none; }
html.cs2-locked .cs2-topbar,
html.cs2-locked .cs2-drawer,
html.cs2-locked .cs2-main-wrap { display: none; }
html.cs2-locked .cs2-gate {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.cs2-gate-form {
  display: flex; flex-direction: column; gap: 22px;
  width: 100%; max-width: 320px;
}
.cs2-gate-mark {
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.85; font-weight: 700;
}
.cs2-gate-error {
  margin-top: -8px; font-size: 12px; opacity: 0;
  transition: opacity .3s ease;
}
.cs2-gate-error.show { opacity: 0.6; }

/* ---- 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 ----------------------------------------------------- */
.cs2-faq { margin-top: 96px; 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; }

/* ---- 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;
}
.cs2-field input, .cs2-field textarea {
  font-family: inherit; font-size: 15px; color: var(--text);
  background: transparent; border: none; border-bottom: 1.5px solid var(--line);
  padding: 10px 2px; transition: border-color .25s ease;
  resize: none;
}
.cs2-field input:focus, .cs2-field textarea:focus { outline: none; border-bottom-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: 13px; }
/* 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"] { animation: none; }
  .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, .cs2-sum-line:last-child { border-bottom: none; }
.cs2-line-thumb {
  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: 1180px; margin: 0 auto;
  padding: 40px 48px 88px; display: flex; flex-direction: column; gap: 40px;
}
.cs2-checkout-grid {
  display: grid; grid-template-columns: 1fr 1fr; align-items: start;
}
.cs2-col { display: flex; flex-direction: column; gap: 46px; padding-right: 52px; }
.cs2-col-pay {
  padding-right: 0; padding-left: 52px;
  border-left: 1px solid var(--line);
  position: sticky; top: 24px;
}
.cs2-panel { display: flex; flex-direction: column; gap: 18px; }
.cs2-panel-title {
  margin: 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.45;
}
.cs2-steps { display: flex; flex-direction: column; gap: 30px; }
.cs2-field-row { display: grid; grid-template-columns: 100px 1fr; gap: 18px; }
.cs2-field-row-even { grid-template-columns: 1fr 1fr; }
.cs2-confirm-form { gap: 18px; }

/* ---- 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-bottom-color: var(--text); }
.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: 14px 0; align-items: center; }
.cs2-sum-line .cs2-line-thumb { width: 46px; }
.cs2-sum-line .cs2-line-price { margin-left: auto; }
.cs2-sum-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 15px; font-weight: 700;
}
/* only present once a bank currency has re-priced the order */
.cs2-sum-cur {
  margin: 8px 0 0; font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.42;
}

/* choice tiles — same language as the product page's variant swatches */
.cs2-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cs2-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs2-choice {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 8px; 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: 27px; height: 27px; display: block; flex: none; }
/* currency glyph — sized like the coin logos so the rows line up */
.cs2-cur {
  width: 27px; height: 27px; 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: -10px;
  /* punch the overlap out of the coin behind so the pair reads as two */
  clip-path: circle(50% at 50% 50%);
}

/* payment details (address / IBAN / …) with copy-to-clipboard */
.cs2-paylist { display: flex; flex-direction: column; }
.cs2-detail {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 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-icon { width: 14px; height: 14px; display: block; flex: none; }
.cs2-detail-row { display: flex; align-items: flex-start; gap: 12px; }
.cs2-detail-val {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.6;
}
.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; }

/* ---- responsive --------------------------------------------- */
@media (max-width: 980px) {
  .cs2-checkout { padding: 32px 32px 72px; }
  .cs2-checkout-grid { grid-template-columns: 1fr; gap: 46px; }
  .cs2-col { padding-right: 0; }
  .cs2-col-pay {
    padding-left: 0; padding-top: 46px;
    border-left: none; border-top: 1px solid var(--line);
    position: static;
  }
}
@media (max-width: 860px) {
  .cs2-topbar { padding: 22px 24px; }
  .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-checkout { padding: 28px 24px 64px; gap: 30px; }
  .cs2-choices-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs2-field-row { grid-template-columns: 1fr; gap: 22px; }
  .cs2-drawer-head, .cs2-drawer-foot { padding-left: 20px; padding-right: 20px; }
  .cs2-drawer-body { padding-left: 20px; padding-right: 20px; }
}