/* Parallus design tokens.
   Mirrors the active Novamira design system: "Parallus Monochrome Editorial".
   Change values here and the whole theme follows. */

:root {
  /* Color. Sourced from the Customizer's Global Color Palette so a
     palette change there updates every component here. The hex after
     each comma is only a fallback if the theme mod is ever missing. */
  --p-ink:     var(--theme-palette-color-1, #111111);
  --p-ink-2:   var(--theme-palette-color-2, #333333);
  --p-muted-2: var(--theme-palette-color-3, #696969);
  --p-bg:      var(--theme-palette-color-4, #FFFFFF);
  --p-muted:   var(--theme-palette-color-5, #AEAEAE);
  --p-border:  var(--theme-palette-color-6, #DDDDDD);
  --p-surface: var(--theme-palette-color-7, #F5F5F5);
  --p-accent:  var(--theme-palette-color-2, #7A2E38);

  /* Type. Overridden at runtime from the Customizer's Typography panel
     (see inc/tokens.php); these are fallbacks only. */
  --p-font-heading: 'Montserrat', sans-serif;
  --p-font-body:    'IBM Plex Sans', sans-serif;
  --p-font-nav:     var(--p-font-heading);

  --p-lh-display: 1.08;
  --p-lh-body:    1.65;
  --p-track-nav:  0.05em;
  --p-track-head: 0.01em;

  /* Space */
  --p-space-xs: 8px;
  --p-space-sm: 16px;
  --p-space-md: 32px;
  --p-space-lg: 64px;
  --p-space-xl: 120px;

  /* Shape: anchored elements square, floating surfaces rounded. */
  --p-radius: 0px;
  --p-radius-sm: 6px;
  --p-radius-panel: 14px;

  /* Motion */
  --p-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --p-dur-fast:  200ms;
  --p-dur:       380ms;
  --p-dur-slow:  700ms;

  /* Header fade. Set from the Customizer: Parallus Header. */
  --p-header-fade-distance: 240px;
  --p-header-swap-at: 0.55;
  --p-header-solid: 0;

  /* Layout */
  --p-measure:   68ch;
  --p-container: 1320px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --p-dur-fast: 1ms;
    --p-dur:      1ms;
    --p-dur-slow: 1ms;
  }
}

/* ============================================================
   ARCHIVE PRODUCT CARDS
   Uniform cells: every card the same height, image the same box,
   text pinned to the bottom regardless of title length.
   ============================================================ */

.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Titles vary in length; reserve two lines so prices align across the row. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--p-font-heading);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4;
  min-height: calc(2 * 1.4em);
  margin-top: var(--p-space-sm);
}

.woocommerce ul.products li.product .price {
  font-family: var(--p-font-body);
  font-size: 0.875rem;
  color: var(--p-ink);
  margin-top: auto;
}

/* No size animation on hover, anywhere. */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product:hover img {
  transform: none !important;
  transition: opacity var(--p-dur-fast) var(--p-ease) !important;
}