/* ==========================================================================
   Kaluchie — components
   The blueprint frame, the damask plate, buttons, chips, swatches, ticker,
   badges, accordions, modals, toast.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. The blueprint frame
   Every card and figure is a wireframe object: square corners, 1px frame,
   transparent background, four + registration marks at the corners.
   Never round them, never give them a surface fill, never drop the marks.
   -------------------------------------------------------------------------- */

.k-blueprint {
  position: relative;
  border: 1px solid var(--color-accent-600);
  border-radius: 0;
  background: transparent;
  transition: border-color 160ms ease;
}

.k-blueprint:hover,
.k-blueprint:focus-within { border-color: var(--color-accent-400); }

.k-blueprint__corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: var(--color-accent-400);
  pointer-events: none;
}

.k-blueprint__corner::before,
.k-blueprint__corner::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.k-blueprint__corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.k-blueprint__corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }

.k-blueprint__corner--tl { top: -6px; left: -6px; }
.k-blueprint__corner--tr { top: -6px; right: -6px; }
.k-blueprint__corner--bl { bottom: -6px; left: -6px; }
.k-blueprint__corner--br { bottom: -6px; right: -6px; }

/* --------------------------------------------------------------------------
   2. The damask plate
   Product photography is studio mockups on a white sweep. Dropped straight
   onto the dark ground they read as empty white boxes, so every product photo
   sits inset on a plate tiled with the brand's own baroque pattern.

   DO NOT apply a blend mode to the photo. An earlier revision multiplied the
   shot over the pattern; it made white tees, white runners and the cream
   hoodie appear patterned, which misrepresents the product. The pattern
   frames the photo; it never prints through it.
   -------------------------------------------------------------------------- */

.k-plate {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--plate-inset-tile);
  background-color: #ffffff;
  background-image: var(--plate-img);
  background-size: var(--plate-tile) auto;
  background-repeat: repeat;
}

.k-plate--tile   { padding: var(--plate-inset-tile); }
.k-plate--pdp    { padding: var(--plate-inset-pdp); }
.k-plate--thumb  { padding: var(--plate-inset-thumb); }
.k-plate--swatch { padding: var(--plate-inset-swatch); }
.k-plate--line   { padding: var(--plate-inset-line); }

.k-plate > img,
.k-plate__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Product photos always stay true colour — colourway is what is being sold. */
  filter: none;
  mix-blend-mode: normal;
}

.k-plate--contain > img,
.k-plate--contain .k-plate__img { object-fit: contain; }

/* An image slot with no photograph in it yet. The crest sits on the damask so
   the cell reads as an intentional placeholder rather than a failed image.
   Not inverted — the plate ground is white, so the mark stays dark. */
.k-plate__empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.k-plate__crest {
  display: block;
  width: 44%;
  max-width: 220px;
  aspect-ratio: 34 / 37;
  background-image: var(--crest-img);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.30;
}

/* Small slots — thumbnails, swatches, cart lines — need a bigger proportion
   or the mark disappears entirely. */
.k-plate--thumb .k-plate__crest,
.k-plate--swatch .k-plate__crest,
.k-plate--line .k-plate__crest { width: 62%; opacity: 0.34; }

/* Editorial and brand photography instead takes the duotone treatment. */
.k-duotone {
  position: relative;
  overflow: hidden;
}

.k-duotone > img,
.k-duotone .k-duotone__img { filter: grayscale(1) contrast(1.05); }

.k-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent);
  mix-blend-mode: color;
}

/* --------------------------------------------------------------------------
   3. Section header pattern
   kicker -> 52px condensed uppercase title -> 2px rule -> 24-36px gap
   -------------------------------------------------------------------------- */

.k-kicker {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin: 0 0 6px;
}

.k-kicker--wide { letter-spacing: 0.24em; font-size: 13px; }

.k-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--color-accent-500);
  padding-bottom: 14px;
  margin-bottom: 36px;
}

.k-section-head__title {
  font-size: var(--type-section);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.k-section-head__aside {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  white-space: nowrap;
}

a.k-section-head__aside:hover { color: var(--color-bg); }

/* --------------------------------------------------------------------------
   4. Buttons
   CRITICAL: the primary button on the dark ground is paper fill with
   accent-900 text — inverted from the design system's light-ground default.
   -------------------------------------------------------------------------- */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.k-btn--primary {
  background: var(--color-bg);
  color: var(--color-accent-900);
}

.k-btn--primary:hover,
.k-btn--primary:focus-visible {
  background: var(--color-accent-200);
  color: var(--color-accent-900);
}

.k-btn--secondary {
  background: transparent;
  color: var(--color-bg);
  border: 1px solid var(--color-bg);
}

.k-btn--secondary:hover,
.k-btn--secondary:focus-visible {
  background: var(--color-accent-800);
  color: var(--color-bg);
}

/* The accent-filled variant, used where the button sits inside a framed cell
   rather than on the open ground (lookbook teaser, PDP add-to-bag). */
.k-btn--accent {
  background: var(--color-accent);
  color: var(--color-bg);
}

.k-btn--accent:hover,
.k-btn--accent:focus-visible {
  background: var(--color-accent-600);
  color: var(--color-bg);
}

.k-btn--block { width: 100%; }

.k-btn--lg {
  font-size: 18px;
  letter-spacing: 0.16em;
  padding: 18px 30px;
}

.k-btn[disabled],
.k-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* The size-gated state. The button stays operable — pressing it flashes
   "Pick a size first" rather than silently doing nothing, so keyboard users
   get the same feedback as pointer users. */
.k-btn--gated {
  background: transparent;
  color: var(--color-bg);
  border: 1px solid var(--color-accent-600);
}

.k-btn--gated:hover { border-color: var(--color-bg); background: transparent; }

/* --------------------------------------------------------------------------
   5. Size chips
   -------------------------------------------------------------------------- */

.k-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.k-size {
  position: relative;
  overflow: hidden;
  min-width: 52px;
  padding: 11px 12px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-accent-600);
  background: transparent;
  color: var(--color-bg);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.k-size:hover { border-color: var(--color-bg); }

.k-size[aria-pressed="true"] {
  background: var(--color-accent-400);
  border-color: var(--color-accent-400);
  color: var(--color-accent-900);
}

/* Sold out. Colour and opacity alone are not enough — the chip also carries
   aria-disabled and a visually-hidden "Sold out" label (HARDENING.md §3). */
.k-size--out {
  opacity: 0.45;
  color: var(--color-accent-400);
  border-color: var(--color-accent-700);
  cursor: not-allowed;
}

.k-size--out::after {
  content: "";
  position: absolute;
  left: -10%;
  top: 50%;
  width: 120%;
  height: 1px;
  background: var(--color-accent-400);
  transform: rotate(-24deg);
}

/* Tapping a sold-out size is not a dead end — it opens the restock capture. */
.k-size--out { cursor: pointer; }

.k-size-hint {
  font-size: 13px;
  color: var(--color-accent-300);
  margin-top: 10px;
  min-height: 18px;
}

.k-size-hint--warn { color: var(--color-accent-400); }

/* --------------------------------------------------------------------------
   6. Colourway swatches
   -------------------------------------------------------------------------- */

.k-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.k-swatch {
  width: 56px;
  height: 70px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-accent-700);
  background: var(--color-accent-800);
  border-radius: 0;
  cursor: pointer;
  transition: border-color 140ms ease;
}

.k-swatch:hover { border-color: var(--color-accent); }
.k-swatch[aria-pressed="true"] { border-color: var(--color-accent-400); }

/* --------------------------------------------------------------------------
   7. Ticker
   -------------------------------------------------------------------------- */

.k-ticker {
  background: var(--color-accent-500);
  color: var(--color-accent-900);
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-accent-700);
}

.k-ticker__track {
  display: inline-flex;
  animation: k-ticker var(--ticker-duration) linear infinite;
  will-change: transform;
}

.k-ticker__run {
  display: inline-flex;
  gap: 44px;
  padding: 9px 22px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}

@keyframes k-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   8. Stock badges on tiles
   -------------------------------------------------------------------------- */

.k-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  /* The prototype sets this at 10px, but the design's own typographic floor
     is "nothing renders below 12px" and this badge carries stock state — the
     one label on a tile a shopper cannot afford to miss. The floor wins;
     the tracking and weight keep it reading as the same object. */
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.k-badge--out {
  background: var(--color-accent-900);
  color: var(--color-bg);
}

.k-badge--low {
  background: var(--color-accent-500);
  color: var(--color-accent-900);
}

/* A sold-out tile also drops its image to 55% so the badge reads at a glance. */
.k-tile--out .k-plate { opacity: 0.55; }

/* --------------------------------------------------------------------------
   9. Accordion
   -------------------------------------------------------------------------- */

.k-accordion { border-top: 1px solid var(--color-accent-700); }

.k-accordion__item { border-bottom: 1px solid var(--color-accent-700); }

.k-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-bg);
}

.k-accordion__trigger:hover { color: var(--color-accent-300); }

.k-accordion__mark {
  font-size: 18px;
  color: var(--color-accent-300);
  flex: none;
}

.k-accordion__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--accordion-duration) ease;
}

.k-accordion__item[data-open="true"] .k-accordion__panel { max-height: 300px; }

.k-accordion__body {
  padding: 0 2px 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-accent-200);
  white-space: pre-line;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   10. Modals — lead capture, restock, size guide, search
   Real dialog semantics are in the markup; this is only the presentation.
   -------------------------------------------------------------------------- */

.k-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--scrim-welcome);
  animation: k-fade 200ms ease;
}

.k-modal[hidden] { display: none; }

.k-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-600);
  padding: 48px 52px;
  max-height: 90vh;
  overflow-y: auto;
}

.k-modal__panel--sm { max-width: 520px; padding: 40px 44px; }

/* The damask sits behind the lead capture at 16% opacity. */
.k-modal__panel--welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  background-image: var(--plate-img);
  background-size: var(--plate-tile) auto;
  background-repeat: repeat;
  pointer-events: none;
}

.k-modal__panel > * { position: relative; z-index: 1; }

.k-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--color-accent-700);
  color: var(--color-bg);
  cursor: pointer;
}

.k-modal__close:hover { border-color: var(--color-accent-400); }

.k-crest {
  background-image: var(--crest-img);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: invert(1);
}

@keyframes k-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   11. Toast
   -------------------------------------------------------------------------- */

.k-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 95;
  transform: translateX(-50%);
  padding: 13px 26px;
  background: var(--color-accent-500);
  color: var(--color-accent-900);
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  animation: k-fade 180ms ease;
}

.k-toast[hidden] { display: none; }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */

.k-field {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--color-accent-600);
  border-radius: var(--radius-md);
  color: var(--color-bg);
  font-size: 15px;
}

.k-field::placeholder { color: var(--color-accent-400); }
.k-field:focus { border-color: var(--color-accent-400); }

.k-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 8px;
}

/* --------------------------------------------------------------------------
   13. Outlined display type
   The second line of a two-line hero.
   -------------------------------------------------------------------------- */

.k-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--color-accent-400);
  /* Firefox honours the -webkit- prefixed property; this is the documented
     cross-browser approach and there is no unprefixed equivalent. */
}

/* --------------------------------------------------------------------------
   14. Free-shipping progress
   -------------------------------------------------------------------------- */

.k-freeship {
  font-size: 13px;
  color: var(--color-accent-300);
}

.k-freeship__bar {
  height: 2px;
  background: var(--color-accent-700);
  margin-top: 8px;
  overflow: hidden;
}

.k-freeship__fill {
  height: 100%;
  background: var(--color-accent-400);
  transition: width 240ms ease;
}