/* Option cards v2 — styles for the cards built by assets/js/option-cards.v2.js.
 *
 * A separate, NEW file on purpose: the live site strips ?ver= from theme
 * assets and Cloudflare caches them for a year, so an edited style.css would
 * not reach returning visitors. Loaded after style.css (dependency
 * canamek-style); every rule is prefixed with .ck-buybox so it outranks the
 * old card rules in style.css (the variation-cards block) without !important.
 *
 * Layout: list rows at every width (radio | name | price, description
 * underneath). Two columns only when the options wrapper is at least 600px
 * wide AND the group has 2 or 4 options — a container query, so it follows
 * the buy box, not the viewport. */

/* ---- WooCommerce table, reset link, wrapper ---------------------------- */
.ck-buybox table.variations,
.ck-buybox table.variations tbody { display: block; }

/* Auto-select means "Clear" only ever resets to the defaults, and it used to
   sit between the first group's cards and the next group's label. */
.ck-buybox .reset_variations { display: none !important; }

/* The owner's option notes are data for the script, never shown as printed.
   (style.css gives every direct child of form.cart display:block, which
   would otherwise beat the hidden attribute.) */
.ck-option-notes,
.ck-buybox .cart > .ck-option-notes { display: none !important; }

/* WooCommerce's screen-reader-only "options cleared" announcer. The same
   ".ck-buybox .cart > *" rule gives it width:100% of the viewport from its
   place in the buy box, which made the page wider than the screen
   (scrollWidth 410 on a 390px phone, 2033 at 1280px). Keep it 1px. */
.ck-buybox .reset_variations_alert {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}

.ck-buybox .ck-variation-cards { container: ck-opts / inline-size; margin: 0 0 22px; }
.ck-buybox .ck-variation-cards__set { border: 0; margin: 0; padding: 0; min-width: 0; }

/* ---- legend: "01 CHOOSE" ... "Prices with Single Antenna" ------------- */
/* Floated at full width, so the label and the hint can share one flex line
   while staying inside a real <legend>. */
.ck-buybox .ck-variation-cards__head {
  float: left; width: 100%; padding: 0; margin: 0 0 10px;
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 4px 12px;
}
.ck-buybox .ck-variation-cards__head + * { clear: both; }
.ck-buybox .ck-variation-cards__label {
  font-family: var(--t-mono); font-weight: 500; font-size: 11px; line-height: 1.4;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.ck-buybox .ck-variation-cards__step { color: var(--red-deep); font-weight: 600; margin-right: 8px; }
.ck-buybox .ck-variation-cards__hint { font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.ck-buybox .ck-variation-cards__hint b { font-weight: 650; color: var(--ink); }

/* ---- grid --------------------------------------------------------------- */
/* No descriptions anywhere on the product: today's compact grid. */
.ck-buybox .ck-kit-options__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
/* Any description on the product: one list row per option... */
.ck-buybox .ck-kit-options__grid--described { grid-template-columns: minmax(0, 1fr); gap: 10px; }
/* ...and two columns only with room for them and an even pair/quad, so a
   3-option group (TOPO-steer) never leaves a lone card. Without container
   query support the grid simply stays one column. */
@container ck-opts (min-width: 600px) {
  .ck-buybox .ck-kit-options__grid--described.ck-kit-options__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ---- card: the same inner layout at every width ------------------------ */
/* Overrides style.css's flex column. */
.ck-buybox .ck-kit-option {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  grid-template-areas: "radio name price" ". desc desc" ". flag flag";
  column-gap: 12px; row-gap: 4px; align-items: start;
  min-height: 56px; padding: 14px 16px; margin: 0;
  background: #fff; border: 1.5px solid var(--line); border-radius: 4px;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}
/* Compact (no-description) cards are ~170px wide on a phone: a name next to
   a price would leave the name a few characters wide, so the price goes
   under the name there, as it does in today's cards. */
.ck-buybox .ck-kit-options__grid:not(.ck-kit-options__grid--described) .ck-kit-option {
  grid-template-columns: 20px minmax(0, 1fr);
  grid-template-areas: "radio name" ". price" ". flag";
}
.ck-buybox .ck-kit-options__grid:not(.ck-kit-options__grid--described) .ck-kit-option__price { text-align: left; }
.ck-buybox .ck-kit-options__grid:not(.ck-kit-options__grid--described) .ck-kit-option__price:empty { display: none; }

/* The real radio: invisible but focusable, sitting under the drawn dot. */
.ck-buybox .ck-kit-option__input {
  position: absolute; top: 16px; left: 16px;
  opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.ck-buybox .ck-kit-option__radio {
  grid-area: radio; position: relative; box-sizing: border-box;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--ink-muted); background: #fff;
  transition: border-color .15s ease-out;
}
.ck-buybox .ck-kit-option__radio::after {
  content: ''; position: absolute; inset: 4px; border-radius: 50%;
  background: var(--red); transform: scale(0); transition: transform .15s ease-out;
}
.ck-buybox .ck-kit-option__name {
  grid-area: name; display: block; min-width: 0;
  font-family: var(--t-display); font-weight: 700; font-size: 16px; line-height: 1.25;
  letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere;
}
.ck-buybox .ck-kit-option__price {
  grid-area: price; display: block;
  font-family: var(--t-display); font-weight: 700; font-size: 16px; line-height: 1.25;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: right; color: var(--ink);
}
.ck-buybox .ck-kit-option__price .amount,
.ck-buybox .ck-kit-option__price .wmc-cache-pid { font: inherit; color: inherit; }
.ck-buybox .ck-kit-option__price del { opacity: .6; margin-right: 4px; font-weight: 500; }
.ck-buybox .ck-kit-option__price ins { text-decoration: none; color: var(--red-deep); }
.ck-buybox .ck-kit-option__desc {
  grid-area: desc; display: block;
  font-family: var(--t-body); font-weight: 500; font-size: 14px; line-height: 1.45;
  color: var(--ink-soft);
}
.ck-buybox .ck-kit-option__flag {
  grid-area: flag; display: block;
  font-family: var(--t-mono); font-size: 11px; line-height: 1.4;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 480px) {
  .ck-buybox .ck-kit-option { padding: 14px; column-gap: 10px; }
  .ck-buybox .ck-kit-option__input { top: 14px; left: 14px; }
}

/* ---- hover (real pointers only) and press ------------------------------- */
@media (hover: hover) {
  .ck-buybox .ck-kit-option:hover { border-color: var(--ink); }
  .ck-buybox .ck-kit-option:hover .ck-kit-option__radio { border-color: var(--ink); }
}
.ck-buybox .ck-kit-option:active { transform: scale(.99); }

/* ---- selected: .is-selected (set by the script) and :has(:checked) ------ */
/* Separate rules, not one selector list: a browser without :has() would drop
   the whole list, .is-selected included. */
.ck-buybox .ck-kit-option.is-selected { border-color: var(--red); background: #fff5f5; box-shadow: inset 0 0 0 1px var(--red); }
.ck-buybox .ck-kit-option:has(.ck-kit-option__input:checked) { border-color: var(--red); background: #fff5f5; box-shadow: inset 0 0 0 1px var(--red); }
.ck-buybox .ck-kit-option.is-selected .ck-kit-option__name { color: var(--red-deep); }
.ck-buybox .ck-kit-option:has(.ck-kit-option__input:checked) .ck-kit-option__name { color: var(--red-deep); }
.ck-buybox .ck-kit-option.is-selected .ck-kit-option__radio { border-color: var(--red); }
.ck-buybox .ck-kit-option:has(.ck-kit-option__input:checked) .ck-kit-option__radio { border-color: var(--red); }
.ck-buybox .ck-kit-option.is-selected .ck-kit-option__radio::after { transform: scale(1); }
.ck-buybox .ck-kit-option__input:checked + .ck-kit-option__radio::after { transform: scale(1); }

/* ---- keyboard focus: ring around the whole card ------------------------- */
.ck-buybox .ck-kit-option:has(.ck-kit-option__input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Fallback without :has(): a double ring on the dot. Gated, or browsers that
   support :has() draw both rings at once. */
@supports not selector(:has(*)) {
  .ck-buybox .ck-kit-option__input:focus-visible + .ck-kit-option__radio { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
}

/* ---- unavailable with the current combination --------------------------- */
/* Still fully readable: no opacity reduction. */
.ck-buybox .ck-kit-option.is-unavailable,
.ck-buybox .ck-kit-option.is-unavailable:hover,
.ck-buybox .ck-kit-option.is-unavailable:active {
  cursor: not-allowed; background: var(--bg-warm);
  border-style: dashed; border-color: var(--line); box-shadow: none; transform: none;
}
.ck-buybox .ck-kit-option.is-unavailable .ck-kit-option__name { color: var(--ink-soft); }
.ck-buybox .ck-kit-option.is-unavailable .ck-kit-option__radio,
.ck-buybox .ck-kit-option.is-unavailable:hover .ck-kit-option__radio { border-style: dashed; border-color: var(--ink-muted); background: transparent; }

/* ---- WooCommerce's own description of the chosen combination ------------ */
/* When the cards already show it (body class set by the script), hide it
   visually only: never display:none, so the role=alert region around it
   still announces the change to screen readers. */
body.ck-optdesc-inline .ck-buybox .woocommerce-variation-description {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---- which combination the headline price belongs to -------------------- */
.ck-buybox .ck-price-row__config { margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-soft); }
.ck-buybox .ck-price-row__config b { font-weight: 650; color: var(--ink); }

/* ---- reduced motion, forced colours ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ck-buybox .ck-kit-option,
  .ck-buybox .ck-kit-option__radio,
  .ck-buybox .ck-kit-option__radio::after { transition: none; }
  .ck-buybox .ck-kit-option:active { transform: none; }
  .cnk-fin-btn,
  .ck-buybox .cnk-fin-btn { animation: none; }
}
@media (forced-colors: active) {
  .ck-buybox .ck-kit-option.is-selected { outline: 3px solid Highlight; outline-offset: -3px; }
  .ck-buybox .ck-kit-option:has(.ck-kit-option__input:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
  .ck-buybox .ck-kit-option__radio::after { background: CanvasText; }
  /* Box shadows are dropped in this mode, so keep an outside focus ring. */
  .ck-buybox .ck-kit-option:has(.ck-kit-option__input:focus-visible) { outline: 2px solid CanvasText; outline-offset: 3px; }
}