/**
 * Accessory kit configurator — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained with neutral defaults. Themes restyle by setting the --kkt-*
 * custom properties below, never by overriding selectors.
 *
 *   --kkt-ink             headings, idle tab text, footer bar, active tab fill
 *   --kkt-body            item names
 *   --kkt-muted           sub-line under the heading
 *   --kkt-accent          prices, CTA, selected item border
 *   --kkt-accent-tint     selected item button, idle tab count badge
 *   --kkt-on-dark         footer bar text
 *   --kkt-on-dark-soft    footer bar caption
 *   --kkt-savings         the savings line under the total (a green that must
 *                         read on the footer bar)
 *   --kkt-surface         shell and card background
 *   --kkt-image-bg        item image well
 *   --kkt-border          shell border
 *   --kkt-hairline        header rule, idle item card border
 *   --kkt-hairline-soft   item button top rule
 *   --kkt-shadow          shell shadow
 *   --kkt-radius          shell radius
 *   --kkt-radius-md       item card radius
 *   --kkt-radius-cta      CTA radius
 *   --kkt-radius-sm       tab pill radius
 *   --kkt-radius-chip     the "KIT" chip radius
 *   --kkt-font-display    heading, prices, grand total
 *   --kkt-font-mono       the "KIT" chip
 *   --kkt-item-min        grid column floor, i.e. how narrow a card may get
 *   --kkt-image-height    height of the item image well
 *   --kkt-image-scale     width the thumbnail occupies inside that well
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without matching load order or specificity.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-kit {
  .kicked-kit {
    --kkt-ink: #18181b;
    --kkt-body: #3f3f46;
    --kkt-muted: #71717a;
    --kkt-accent: #b91c1c;
    --kkt-accent-tint: #fef2f2;
    --kkt-on-dark: #fff;
    --kkt-on-dark-soft: #a1a1aa;
    --kkt-surface: #fff;
    --kkt-image-bg: #fff;
    --kkt-border: #e4e4e7;
    --kkt-hairline: #ececef;
    --kkt-hairline-soft: #f4f4f5;
    --kkt-shadow: 0 0.375rem 1.5rem rgb(24 24 27 / 5%);
    --kkt-radius: 1.125rem;
    --kkt-radius-md: 0.875rem;
    --kkt-radius-cta: 0.75rem;
    --kkt-radius-sm: 0.6875rem;
    --kkt-radius-chip: 0.3125rem;
    --kkt-font-display: inherit;
    --kkt-font-mono: ui-monospace, monospace;
    --kkt-item-min: 9.6875rem;
    --kkt-image-height: 7.375rem;
    --kkt-image-scale: 72%;

    overflow: hidden;
    background: var(--kkt-surface);
    border: 1px solid var(--kkt-border);
    border-radius: var(--kkt-radius);
    box-shadow: var(--kkt-shadow);
  }

  /* --- Header -------------------------------------------------------------- */

  .kicked-kit__header {
    padding: 1.25rem 1.375rem 1rem;
    border-bottom: 1px solid var(--kkt-hairline);
  }

  .kicked-kit__title-row {
    display: flex;
    gap: 0.5625rem;
    align-items: center;
    margin-bottom: 0.3125rem;
  }

  .kicked-kit__chip {
    padding: 0.1875rem 0.5rem;
    font-family: var(--kkt-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--kkt-surface);
    background: var(--kkt-ink);
    border-radius: var(--kkt-radius-chip);
  }

  .kicked-kit__title {
    margin: 0;
    font-family: var(--kkt-font-display);
    font-size: 1.3125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kkt-ink);
  }

  .kicked-kit__lede {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--kkt-muted);
  }

  /* --- Tab strip ----------------------------------------------------------- */

  .kicked-kit__tabs {
    /* Room for the focus ring. `overflow-x: auto` computes overflow-y to `auto`
       too, so a ring drawn outside the tab's box is cut off by the scrollport
       it sits in — the same reason .lc-rail carries this padding. The ring is
       2px wide 2px out, so anything under 0.25rem clips it. */
    padding-block: 0.25rem;
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    /* The strip scrolls rather than wraps: a wrapped strip changes height as
       tabs are added and pushes the grid down mid-interaction. */
    overflow-x: auto;
  }

  .kicked-kit__tab {
    display: inline-flex;
    flex: none;
    gap: 0.4375rem;
    align-items: center;
    padding: 0.5625rem 0.875rem;
    font: inherit;
    font-size: 0.84375rem;
    font-weight: 600;
    color: var(--kkt-ink);
    white-space: nowrap;
    cursor: pointer;
    background: var(--kkt-surface);
    border: 1px solid var(--kkt-border);
    border-radius: var(--kkt-radius-sm);
    transition: color 0.15s ease, border-color 0.15s ease;
  }

  /* This file had no hover state anywhere in it — every control looked
     identical whether or not a pointer was on it, which reads as a dead region
     rather than a configurator. 0.15s matches the other nine modules. */
  .kicked-kit__tab:hover,
  .kicked-kit__tab:focus-visible {
    color: var(--kkt-accent);
    border-color: var(--kkt-accent);
  }

  .kicked-kit__tab[aria-selected="true"] {
    color: var(--kkt-on-dark);
    background: var(--kkt-ink);
    border-color: var(--kkt-ink);
  }

  .kicked-kit__tab-count {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    font-size: 0.65625rem;
    font-weight: 700;
    color: var(--kkt-accent);
    background: var(--kkt-accent-tint);
    border-radius: 0.5625rem;
  }

  /* Inverted on the active tab, where the tint would disappear into the dark
     pill. The count keeps the accent hue either way, so it still reads as
     "these are selected" rather than as part of the tab label. */
  .kicked-kit__tab[aria-selected="true"] .kicked-kit__tab-count {
    color: var(--kkt-on-dark);
    background: var(--kkt-accent);
  }

  .kicked-kit__tab-count[hidden] {
    display: none;
  }

  /* --- Groups -------------------------------------------------------------- */

  .kicked-kit__panel {
    padding: 1.125rem 1.375rem;
  }

  .kicked-kit__panel[hidden] {
    display: none;
  }

  /* Before the script marks the block ready — and forever, if it never runs —
     every group is shown with its own heading and the tab strip is withheld.
     Tabs that cannot switch are worse than no tabs: they hide four fifths of
     the catalogue behind a control that does nothing. */
  .kicked-kit:not([data-ps-kicked-ready]) .kicked-kit__panel[hidden] {
    display: block;
    border-top: 1px solid var(--kkt-hairline);
  }

  .kicked-kit:not([data-ps-kicked-ready]) .kicked-kit__tabs {
    display: none;
  }

  .kicked-kit[data-ps-kicked-ready] .kicked-kit__panel-title {
    display: none;
  }

  .kicked-kit__panel-title {
    margin: 0 0 0.875rem;
    font-family: var(--kkt-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--kkt-ink);
  }

  .kicked-kit__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--kkt-item-min), 1fr));
    gap: 0.875rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  /* --- Item cards ---------------------------------------------------------- */

  .kicked-kit__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kkt-surface);
    border: 0.09375rem solid var(--kkt-hairline);
    border-radius: var(--kkt-radius-md);
  }

  .kicked-kit__item--on {
    border-color: var(--kkt-accent);
  }

  .kicked-kit__item--off {
    opacity: 0.6;
  }

  .kicked-kit__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--kkt-image-height);
    background: var(--kkt-image-bg);
  }

  .kicked-kit__thumb img {
    /* Mirrors background-size: <width> — the thumbnail is scaled by width and
       lets its height follow, capped so a portrait image cannot push the well
       taller and stagger the grid rows. */
    width: var(--kkt-image-scale);
    max-height: 100%;
    object-fit: contain;
  }

  .kicked-kit__text {
    flex: 1;
    padding: 0.6875rem 0.75rem 0.75rem;
  }

  .kicked-kit__name {
    display: block;
    height: 2.125rem;
    margin-bottom: 0.4375rem;
    overflow: hidden;
    font-size: 0.78125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--kkt-body);
    text-decoration: none;
    transition: color 0.15s ease;
  }

  .kicked-kit__name:hover,
  .kicked-kit__name:focus-visible {
    color: var(--kkt-accent);
  }

  .kicked-kit__price {
    font-family: var(--kkt-font-display);
    font-size: 0.9375rem;
    line-height: normal;
    font-weight: 700;
    color: var(--kkt-accent);
  }

  .kicked-kit__note {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--kkt-muted);
  }

  /* --- Item toggle --------------------------------------------------------- */

  .kicked-kit__toggle,
  .kicked-kit__fallback {
    display: flex;
    gap: 0.4375rem;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.6875rem;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--kkt-ink);
    text-align: center;
    cursor: pointer;
    background: var(--kkt-surface);
    border: 0;
    border-top: 1px solid var(--kkt-hairline-soft);
  }

  .kicked-kit__toggle[aria-pressed="true"] {
    color: var(--kkt-accent);
    background: var(--kkt-accent-tint);
  }

  .kicked-kit__toggle:disabled,
  .kicked-kit__fallback input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
  }

  /* The checkbox is the control until the script takes over, and the button is
     hidden while that is true — two controls for one choice is how a keyboard
     user ends up tabbing through the same accessory twice. */
  .kicked-kit:not([data-ps-kicked-ready]) .kicked-kit__toggle {
    display: none;
  }

  .kicked-kit[data-ps-kicked-ready] .kicked-kit__fallback {
    display: none;
  }

  /* --- Footer bar ---------------------------------------------------------- */

  .kicked-kit__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.375rem;
    color: var(--kkt-on-dark);
    background: var(--kkt-ink);
  }

  .kicked-kit__caption {
    font-size: 0.75rem;
    line-height: normal;
    color: var(--kkt-on-dark-soft);
  }

  .kicked-kit__total {
    font-family: var(--kkt-font-display);
    font-size: 1.5rem;
    line-height: normal;
    font-weight: 700;
  }

  .kicked-kit__savings {
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kkt-savings, #7ad6a6);
  }

  .kicked-kit__cta {
    display: flex;
    gap: 0.5625rem;
    align-items: center;
    padding: 0.875rem 1.375rem;
    font: inherit;
    font-size: 0.90625rem;
    font-weight: 800;
    color: var(--kkt-on-dark);
    cursor: pointer;
    background: var(--kkt-accent);
    border: 0;
    border-radius: var(--kkt-radius-cta);
    transition: filter 0.15s ease, transform 0.15s ease;
  }

  /* `filter` rather than a second colour token: the CTA is already the accent,
     and a theme that remaps --kkt-accent gets a correct hover for free. */
  .kicked-kit__cta:hover:not(:disabled),
  .kicked-kit__cta:focus-visible:not(:disabled) {
    filter: brightness(0.93);
  }

  .kicked-kit__cta:active:not(:disabled) {
    transform: scale(0.985);
  }

  .kicked-kit__cta:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  /* --- Result report ------------------------------------------------------- */

  .kicked-kit__status:empty {
    display: none;
  }

  .kicked-kit__status {
    padding: 0.75rem 1.375rem;
    font-size: 0.8125rem;
    border-top: 1px solid var(--kkt-hairline);
  }

  .kicked-kit__status--error {
    color: var(--kkt-accent);
    background: var(--kkt-accent-tint);
  }

  .kicked-kit__status p {
    margin: 0;
  }

  .kicked-kit__status ul {
    padding-left: 1.125rem;
    margin: 0.375rem 0 0;
    color: var(--kkt-muted);
  }

  /* Not display:none — the label has to stay reachable by a screen reader and
     by the accessibility tree, it just has no pixels of its own. */
  .kicked-kit__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .kicked-kit__tab:focus-visible,
  .kicked-kit__toggle:focus-visible,
  .kicked-kit__cta:focus-visible,
  .kicked-kit__name:focus-visible {
    outline: 0.125rem solid var(--kkt-accent);
    outline-offset: 0.125rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-kit__tab,
    .kicked-kit__cta,
    .kicked-kit__name {
      transition: none;
    }

    .kicked-kit__cta:active:not(:disabled) {
      transform: none;
    }
  }

  /* --- Narrow viewports ----------------------------------------------------
     Under 768px every inset steps down a notch, the tab strip wraps — a
     scroller whose only hint was a clipped pill hid most of the categories —
     and the item floor drops so two cards share a row the way the listing's
     do. The footer stacks with a full-width CTA: the thumb's row. */

  @media (max-width: 767.98px) {
    .kicked-kit {
      --kkt-item-min: 8.5rem;
      --kkt-image-height: 6rem;
    }

    .kicked-kit__header {
      padding: 1rem 1rem 0.875rem;
    }

    .kicked-kit__tabs {
      flex-wrap: wrap;
      overflow-x: visible;
    }

    /* A count arriving on a wrapped pill must not rewrap the strip mid-tap:
       the hidden badge keeps its box and only its pixels vanish. */
    .kicked-kit__tab-count[hidden] {
      display: inline-flex;
      visibility: hidden;
    }

    .kicked-kit__panel {
      padding: 1rem;
    }

    .kicked-kit__status {
      padding-right: 1rem;
      padding-left: 1rem;
    }

    .kicked-kit__footer {
      flex-direction: column;
      align-items: stretch;
      padding: 1rem;
    }

    .kicked-kit__cta {
      justify-content: center;
    }
  }
}