/**
 * Product comparison — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained with neutral defaults. Themes restyle by setting the --kcp-*
 * custom properties below, never by overriding selectors.
 *
 *   --kcp-ink              primary text, product names, values
 *   --kcp-muted            row labels, counts, blank cells
 *   --kcp-control-ink      icon buttons, the header trigger at rest
 *   --kcp-accent           price, call to action, difference marker
 *   --kcp-accent-ink       text on the accent
 *   --kcp-accent-tint      selected-toggle background
 *   --kcp-star             rating cells
 *   --kcp-success          in-stock cells
 *   --kcp-warn             backorder cells
 *   --kcp-surface          drawer, cells, controls
 *   --kcp-sunken           label column and the two corner cells
 *   --kcp-border           matrix hairlines
 *   --kcp-border-strong    control borders
 *   --kcp-scrim            backdrop wash
 *   --kcp-drawer-shadow    drawer lift
 *   --kcp-drawer-radius    top corners of the drawer
 *   --kcp-drawer-height    how much of the viewport the drawer may take
 *   --kcp-shell-max        width the drawer contents align to
 *   --kcp-shell-gutter     horizontal breathing room of that shell
 *   --kcp-radius           matrix corners
 *   --kcp-radius-sm        control and CTA corners
 *   --kcp-toggle-position  static, or absolute to pin the card toggle
 *   --kcp-toggle-inset     where to pin it when absolutely placed
 *   --kcp-toggle-z         its stacking order against the card's own layers
 *   --kcp-toggle-width     fixed size, for a square or circular toggle
 *   --kcp-toggle-height    "
 *   --kcp-toggle-padding   inner spacing when the size is intrinsic
 *   --kcp-toggle-radius    its corners, independent of --kcp-radius-sm
 *   --kcp-label-width      the fixed first column
 *   --kcp-column-min       narrowest a product column may get before scrolling
 *   --kcp-matrix-min       width below which the matrix scrolls sideways
 *   --kcp-image-height     the image well in a header cell
 *   --kcp-z-backdrop       backdrop stacking order
 *   --kcp-z-drawer         drawer stacking order
 *   --kcp-font-display     drawer title, product prices
 *   --kcp-font-mono        row labels
 *
 * Layered on purpose: layered CSS always loses to unlayered CSS, so a host
 * theme's ordinary stylesheet wins without matching load order or specificity.
 *
 * The header counter's styles live in counter.css, which is registered on
 * every page; this file loads only where the drawer and toggles can render
 * (see shouldLoadSurfaces() in kickedcompare.php). This file therefore never
 * loads without counter.css. Keep the shared property defaults in lockstep
 * between the two blocks.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-compare {
  .kicked-compare,
  .kicked-compare-drawer,
  .kicked-compare-backdrop,
  .kicked-compare-counter,
  .kicked-compare-toggle {
    --kcp-ink: #18181b;
    --kcp-muted: #a1a1aa;
    --kcp-control-ink: #52525b;
    --kcp-accent: #b91c1c;
    --kcp-accent-ink: #fff;
    --kcp-accent-tint: #fef2f2;
    --kcp-star: #eab308;
    --kcp-success: #15803d;
    --kcp-warn: #b45309;
    --kcp-surface: #fff;
    --kcp-sunken: #fafaf9;
    --kcp-border: #e4e4e7;
    --kcp-border-strong: #d4d4d8;
    --kcp-scrim: rgb(20 18 16 / 45%);
    --kcp-drawer-shadow: 0 -0.75rem 2.5rem rgb(24 24 27 / 20%);
    --kcp-drawer-radius: 1.25rem;
    --kcp-drawer-height: 82vh;
    --kcp-shell-max: 77.5rem;
    --kcp-shell-gutter: clamp(1rem, 4vw, 2rem);
    --kcp-radius: 0.875rem;
    --kcp-radius-sm: 0.625rem;
    --kcp-label-width: 9.375rem;
    --kcp-column-min: 11.25rem;
    --kcp-matrix-min: 45rem;
    --kcp-image-height: 5.625rem;
    --kcp-z-backdrop: 80;
    --kcp-z-drawer: 90;
    --kcp-font-display: inherit;
    --kcp-font-mono: ui-monospace, monospace;
  }

  /* --- Backdrop -----------------------------------------------------------
     Opacity rather than display, so the fade has something to interpolate.
     pointer-events is what actually makes it inert when closed — a
     transparent full-viewport element still swallows every click. */

  .kicked-compare-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--kcp-z-backdrop);
    pointer-events: none;
    background: var(--kcp-scrim);
    opacity: 0;
    transition: opacity 0.25s;
  }

  .kicked-compare-backdrop--on {
    pointer-events: auto;
    opacity: 1;
  }

  /* --- Drawer -------------------------------------------------------------
     visibility, not display: the panel has to stay laid out for the transform
     to animate, and an off-screen but visible panel is still in the tab order
     and still read by a screen reader. The delayed visibility transition is
     what lets it slide out fully before it disappears. */

  .kicked-compare-drawer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--kcp-z-drawer);
    max-height: var(--kcp-drawer-height);
    overflow: auto;
    visibility: hidden;
    background: var(--kcp-surface);
    border-radius: var(--kcp-drawer-radius) var(--kcp-drawer-radius) 0 0;
    box-shadow: var(--kcp-drawer-shadow);
    transition: transform 0.35s ease, visibility 0s linear 0.35s;
    transform: translateY(105%);
  }

  .kicked-compare-drawer--open {
    visibility: visible;
    transition: transform 0.35s ease, visibility 0s;
    transform: translateY(0);
  }

  /* The page behind a modal drawer must not scroll under it — on a phone the
     touch would otherwise pan the listing instead of the matrix. */
  .kicked-compare-locked {
    overflow: hidden;
  }

  .kicked-compare--drawer {
    max-width: var(--kcp-shell-max);
    padding: 1.375rem var(--kcp-shell-gutter) 2.25rem;
    margin: 0 auto;
  }

  /* --- Head --------------------------------------------------------------- */

  .kicked-compare__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.125rem;
  }

  .kicked-compare__title {
    margin: 0;
    font-family: var(--kcp-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kcp-ink);
  }

  .kicked-compare__tally {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--kcp-muted);
  }

  .kicked-compare__tools {
    display: flex;
    gap: 0.875rem;
    align-items: center;
  }

  .kicked-compare__close {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--kcp-control-ink);
    cursor: pointer;
    background: var(--kcp-surface);
    border: 1px solid var(--kcp-border-strong);
    border-radius: var(--kcp-radius-sm);
  }

  /* --- Controls ----------------------------------------------------------- */

  .kicked-compare__controls {
    display: flex;
    gap: 0.875rem;
    align-items: center;
  }

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

  .kicked-compare--page .kicked-compare__controls {
    justify-content: flex-end;
    margin-bottom: 1.125rem;
  }

  .kicked-compare__filter {
    display: inline-flex;
    gap: 0.4375rem;
    align-items: center;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kcp-ink);
    cursor: pointer;
  }

  /* Without this the display above would defeat the hidden attribute the
     template ships the control with. */
  .kicked-compare__filter[hidden] {
    display: none;
  }

  .kicked-compare__filter input {
    accent-color: var(--kcp-accent);
    cursor: pointer;
  }

  .kicked-compare__filter:has(input:disabled) {
    cursor: default;
    opacity: 0.45;
  }

  .kicked-compare__clear {
    padding: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--kcp-muted);
    cursor: pointer;
    background: none;
    border: 0;
  }

  /* --- Matrix -------------------------------------------------------------
     One grid of flat cells. min-width plus the scroller is the design's own
     answer to four columns on a phone: shrink past --kcp-column-min and the
     values stop being comparable, so the matrix scrolls instead. */

  .kicked-compare__scroller {
    overflow-x: auto;
  }

  .kicked-compare__matrix {
    display: grid;
    min-width: var(--kcp-matrix-min);
    overflow: hidden;
    border: 1px solid var(--kcp-border);
    border-radius: var(--kcp-radius);
  }

  /* A class per column count rather than repeat(var(--kcp-columns), …). The
     var() form is valid and works in current engines, but where it is not
     understood the whole declaration is dropped and the grid collapses into a
     single column — a total failure to save seven rules. The ceiling matches
     KickedCompareSelection::HARD_MAX. */
  .kicked-compare__matrix--c2 {
    grid-template-columns: var(--kcp-label-width) repeat(2, minmax(var(--kcp-column-min), 1fr));
  }

  .kicked-compare__matrix--c3 {
    grid-template-columns: var(--kcp-label-width) repeat(3, minmax(var(--kcp-column-min), 1fr));
  }

  .kicked-compare__matrix--c4 {
    grid-template-columns: var(--kcp-label-width) repeat(4, minmax(var(--kcp-column-min), 1fr));
  }

  .kicked-compare__matrix--c5 {
    grid-template-columns: var(--kcp-label-width) repeat(5, minmax(var(--kcp-column-min), 1fr));
  }

  .kicked-compare__matrix--c6 {
    grid-template-columns: var(--kcp-label-width) repeat(6, minmax(var(--kcp-column-min), 1fr));
  }

  .kicked-compare__matrix--c7 {
    grid-template-columns: var(--kcp-label-width) repeat(7, minmax(var(--kcp-column-min), 1fr));
  }

  .kicked-compare__matrix--c8 {
    grid-template-columns: var(--kcp-label-width) repeat(8, minmax(var(--kcp-column-min), 1fr));
  }

  /* A single product is a comparison of one: it renders, but the label column
     alone would leave the product column stretched across the page. */
  .kicked-compare__matrix--c1 {
    grid-template-columns: var(--kcp-label-width) minmax(var(--kcp-column-min), 1fr);
    min-width: 0;
  }

  /* The empty cells at the two ends of the label column. */
  .kicked-compare__corner {
    padding: 1rem;
    background: var(--kcp-sunken);
  }

  .kicked-compare__header {
    position: relative;
    padding: 1rem;
    text-align: center;
    border-left: 1px solid var(--kcp-border);
  }

  .kicked-compare__well {
    height: var(--kcp-image-height);
    margin-bottom: 0.625rem;
    background: var(--kcp-surface);
  }

  /* contain, not cover: a comparison is about the parts, and cropping a board
     to fill a box is how the connector you were looking at disappears. */
  .kicked-compare__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .kicked-compare__name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--kcp-ink);
    text-decoration: none;
  }

  .kicked-compare__remove {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    color: var(--kcp-muted);
    cursor: pointer;
    background: var(--kcp-surface);
    border: 1px solid var(--kcp-border);
    border-radius: 50%;
  }

  .kicked-compare__remove:hover,
  .kicked-compare__remove:focus-visible {
    color: var(--kcp-accent);
    border-color: var(--kcp-accent);
  }

  /* --- Cells --------------------------------------------------------------
     No horizontal rules between rows, per the design: the label column's own
     background is what separates them, and hairlines every 42px turn the
     matrix into graph paper. */

  .kicked-compare__label {
    line-height: normal;
    position: relative;
    padding: 0.8125rem 1rem;
    font-family: var(--kcp-font-mono);
    font-size: 0.78125rem;
    color: var(--kcp-muted);
    background: var(--kcp-sunken);
  }

  /* The difference marker. A bar on the edge of the label rather than a dot
     before the text: an inline marker would indent only the rows that have one
     and leave the label column ragged. */
  .kicked-compare__label.kicked-compare__cell--diff {
    color: var(--kcp-ink);
  }

  .kicked-compare__label.kicked-compare__cell--diff::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.1875rem;
    content: "";
    background: var(--kcp-accent);
  }

  .kicked-compare__value {
    line-height: normal;
    padding: 0.8125rem 1rem;
    font-size: 0.8125rem;
    color: var(--kcp-ink);
    text-align: center;
    border-left: 1px solid var(--kcp-border);
  }

  .kicked-compare__value--price {
    font-family: var(--kcp-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--kcp-accent);
  }

  .kicked-compare__value--rating {
    color: var(--kcp-star);
  }

  .kicked-compare__value--stock {
    font-weight: 600;
  }

  .kicked-compare__value--stock-in {
    color: var(--kcp-success);
  }

  .kicked-compare__value--stock-backorder {
    color: var(--kcp-warn);
  }

  .kicked-compare__value--stock-out {
    color: var(--kcp-muted);
  }

  /* Last, so a cell with nothing in it reads as absent whatever kind it is. */
  .kicked-compare__value--blank {
    font-weight: 400;
    color: var(--kcp-muted);
  }

  /* Hiding cells, not rows: the grid has no row elements to hide, and removing
     every cell of a row from flow is what makes the remaining rows close up. */
  .kicked-compare__matrix--diff-only .kicked-compare__cell--same {
    display: none;
  }

  /* --- Action row --------------------------------------------------------- */

  .kicked-compare__action {
    padding: 0.75rem 1rem;
    border-left: 1px solid var(--kcp-border);
  }

  .kicked-compare__cta {
    display: block;
    padding: 0.5625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--kcp-accent-ink);
    text-align: center;
    text-decoration: none;
    background: var(--kcp-accent);
    border-radius: var(--kcp-radius-sm);
  }

  /* --- Empty states ------------------------------------------------------- */

  .kicked-compare__empty,
  .kicked-compare__note {
    padding: 1.75rem;
    margin: 0;
    font-size: 0.875rem;
    color: var(--kcp-muted);
    text-align: center;
    background: var(--kcp-surface);
    border: 1px dashed var(--kcp-border-strong);
    border-radius: var(--kcp-radius);
  }

  .kicked-compare__note {
    margin-top: 0.75rem;
  }

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

  /* --- Header counter ------------------------------------------------------
     In counter.css — the counter renders on pages this file never reaches. */

  /* --- Card toggle -------------------------------------------------------- */

  /* The toggle is placed by whichever theme hooks it, and themes disagree about
     where a card's controls live: some put them in a row under the price, some
     pin them into a corner of the image well. Both are expressible here so a
     theme never has to override the selector — set --kcp-toggle-position to
     absolute, give it an inset, and hide the label to get a corner disc. */
  .kicked-compare-toggle {
    position: var(--kcp-toggle-position, static);
    inset: var(--kcp-toggle-inset, auto);
    z-index: var(--kcp-toggle-z, auto);
    display: inline-flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: center;
    width: var(--kcp-toggle-width, auto);
    height: var(--kcp-toggle-height, auto);
    padding: var(--kcp-toggle-padding, 0.4375rem 0.625rem);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--kcp-control-ink);
    text-decoration: none;
    cursor: pointer;
    background: var(--kcp-surface);
    border: 1px solid var(--kcp-border-strong);
    border-radius: var(--kcp-toggle-radius, var(--kcp-radius-sm));
  }

  /* Whether the label is drawn is a content decision, not a styling one — a
     hidden label still has to be the control's accessible name — so it is a
     module setting and the template swaps in the screen-reader treatment.
     See KICKEDCOMPARE_CARD_LABEL. */

  .kicked-compare-toggle--on {
    color: var(--kcp-accent);
    background: var(--kcp-accent-tint);
    border-color: var(--kcp-accent);
  }

  /* Held for a couple of seconds after the cap turns a click down. The same
     sentence goes to the live region; this is the half of it a sighted visitor
     gets, and it has to be visible on the control they actually pressed. */
  .kicked-compare-toggle--refused {
    color: var(--kcp-warn);
    background: var(--kcp-surface);
    border-color: var(--kcp-warn);
  }

  .kicked-compare-toggle__icon {
    flex: none;
  }

  /* --- Shared ------------------------------------------------------------- */

  /* .kicked-compare-sr is declared in counter.css, which every page loads. */

  .kicked-compare-toggle:focus-visible,
  .kicked-compare__close:focus-visible,
  .kicked-compare__clear:focus-visible,
  .kicked-compare__cta:focus-visible,
  .kicked-compare__filter input:focus-visible {
    outline: 0.125rem solid var(--kcp-accent);
    outline-offset: 0.125rem;
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-compare-backdrop,
    .kicked-compare-drawer {
      transition: none;
    }
  }

  /* Same treatment as the reviews list. Note the drawer body is empty on the
     first open (drawer.tpl ships it blank and fills it by fetch), so this only
     reads as a state on a refresh — which is exactly when a shopper has just
     removed a product and is watching for the table to catch up. */
  .kicked-compare-drawer__body[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-compare-drawer__body[aria-busy="true"] {
      transition: none;
    }
  }
}