/* =========================================================================
   Catalog surfaces: the product plate, product cards, grids, reveal states.
   ========================================================================= */

@layer components {

  /* ------------------------------------------------------------------ plate
     Amazon product photography is shot on white. On a graphite page it needs a
     light plate underneath, otherwise every tile reads as a floating white box.
     The plate is the deliberate design device that makes that work.            */

  .plate {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--r);
    background: linear-gradient(168deg, var(--plate-1) 0%, var(--plate-2) 100%);
    aspect-ratio: 1;
    isolation: isolate;
  }
  .plate::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(11, 12, 12, 0.10),
                inset 0 -24px 40px -24px rgba(11, 12, 12, 0.22);
    pointer-events: none;
  }
  .plate img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12%;
    mix-blend-mode: multiply;
    transition: transform var(--d-ui) var(--ease);
  }
  .plate-wide { aspect-ratio: 4 / 3; }
  .plate-tall { aspect-ratio: 3 / 4; }
  .plate-sm img { padding: 8%; }

  /* -------------------------------------------------------------- product card */

  .pcard {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    position: relative;
  }

  .pcard-media { display: block; }
  .pcard:hover .plate img { transform: scale(1.045); }

  .pcard-flag {
    position: absolute;
    top: var(--s-3);
    inset-inline-start: var(--s-3);
    z-index: 2;
  }

  /* Quick add slides up from the bottom edge of the plate on pointer devices.
     It is hidden from assistive tech on the card because the product page has
     the accessible add-to-cart form. */
  .pcard-quick {
    position: absolute;
    inset-inline: var(--s-3);
    bottom: var(--s-3);
    z-index: 2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--ease);
  }
  .pcard:hover .pcard-quick,
  .pcard:focus-within .pcard-quick { opacity: 1; transform: none; }

  @media (hover: none) {
    .pcard-quick { position: static; opacity: 1; transform: none; margin-top: var(--s-3); }
  }

  .pcard-body { display: flex; flex-direction: column; gap: 6px; }

  .pcard-brand {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .pcard-name {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    font-stretch: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pcard-name a { transition: color var(--d-micro) var(--ease); }
  .pcard-name a:hover { color: var(--accent-text); }
  /* The whole card is clickable, but the link text stays the accessible target. */
  .pcard-name a::before { content: ""; position: absolute; inset: 0; z-index: 1; }

  .pcard-rating { display: flex; align-items: center; gap: 6px; font-size: 11px; }

  .pcard-price {
    display: flex;
    align-items: baseline;
    gap: var(--s-1);
    font-size: var(--fs-body);
    margin-top: 2px;
  }

  /* ------------------------------------------------------------------ grids */

  .pgrid {
    display: grid;
    gap: var(--s-5) var(--s-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 700px)  { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); } }
  @media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .pgrid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 900px) { .pgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------------------------------------------------------- machine links */

  .machine-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r);
    transition: border-color var(--d-micro) var(--ease), transform var(--d-micro) var(--ease);
  }
  .machine-link:hover { border-color: var(--accent); transform: translateY(-2px); }
  .machine-link-name { font-weight: 600; font-size: var(--fs-sm); }
  .machine-link-sub { font-size: var(--fs-micro); color: var(--text-faint); }

  /* ------------------------------------------------------- filter chips
     Shared by the listing filters and the product page fitment block. */

  .fchips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  .fchip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    color: var(--text-dim);
    transition: border-color var(--d-micro) var(--ease),
                color var(--d-micro) var(--ease),
                background-color var(--d-micro) var(--ease);
  }
  .fchip:hover { border-color: var(--text); color: var(--text); }
  .fchip.is-on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
  }

  /* ------------------------------------------------------------- mini cart */

  .mini-line {
    display: flex;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
  }
  .mini-line .plate { width: 76px; flex: none; }
  .mini-line-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .mini-line-name {
    font-size: var(--fs-sm);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mini-line-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    margin-top: 2px;
  }
  .mini-totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--fs-body-l);
  }

  /* --------------------------------------------------------------- stepper */

  .stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    overflow: hidden;
    background: var(--bg-elev-2);
  }
  .stepper button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--text-dim);
    transition: color var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease);
  }
  .stepper button:hover:not([disabled]) { color: var(--text); background: var(--bg-elev); }
  .stepper button[disabled] { opacity: 0.35; cursor: not-allowed; }
  .stepper input {
    width: 40px;
    height: 34px;
    text-align: center;
    background: none;
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    -moz-appearance: textfield;
  }
  .stepper input::-webkit-outer-spin-button,
  .stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
}

/* --------------------------------------------------------- reveal on scroll
   The initial hidden state only applies once the module has booted, so a
   no-JS visitor sees every section immediately. */

@layer utilities {
  html.has-js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity var(--d-enter) var(--ease),
                transform var(--d-enter) var(--ease);
    transition-delay: calc(min(var(--i, 0), 8) * 60ms);
    will-change: opacity, transform;
  }
  html.has-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    html.has-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  }
}