/* CSS specifico di espadrillas.php — listing prodotto (switch genere,
   filtri materiale, sezioni, card) quando la sottocategoria ha
   modelli reali. Il resto, incluso il fallback "in arrivo" per quando è
   vuota, e' in common.css, condiviso con le altre pagine di /new
   (friulane.php lo usa allo stesso modo). */

/* Pinned just under the header (76px nav + 1px border) so the
   gender switch and material filters stay reachable while scrolling
   through a long list of products, instead of requiring a trip back
   to the top of the page. */
.listing-controls {
  position: sticky;
  top: 77px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px clamp(24px, 4vw, 56px);
  background: rgba(237, 230, 220, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.gender-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gender-toggle-opt {
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  font-weight: 400;
  background: none;
  border: none;
  padding: 2px;
  color: rgba(44, 42, 40, 0.4);
  transition: color 0.3s var(--ease-out);
}

.gender-toggle-opt.is-active {
  color: var(--ink);
  font-weight: 700;
}

.gender-toggle-sep {
  font-size: 1.02rem;
  color: rgba(44, 42, 40, 0.3);
}

/* Material filter — same plain-text language as the gender switch
   above it (no pill/background here either), just smaller since there
   can be more than two options. Built by JS from whichever materials
   exist for the active gender (see buildMaterialFilters), so it never
   offers a material with nothing to show. */
.material-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Anchors, not filters — clicking one scrolls to that material's
   section instead of hiding the rest. The fill sweeps left to right as
   the section scrolls past the sticky bar (--fill, 0%→100%, set by the
   scrollspy in JS), so a pill reads as fully "read" right around the
   moment its section hands off to the next one. */
.filter-opt {
  --fill: 0%;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  font-weight: 400;
  background: none;
  border: none;
  padding: 2px;
  color: rgba(44, 42, 40, 0.4);
  cursor: pointer;
  transition: font-weight 0.2s var(--ease-out);
}

.filter-opt.is-current {
  font-weight: 700;
  color: transparent;
  background-image: linear-gradient(
    to right,
    var(--ink) 0%,
    var(--ink) var(--fill),
    rgba(44, 42, 40, 0.45) var(--fill),
    rgba(44, 42, 40, 0.45) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.filter-sep {
  font-size: 0.72rem;
  color: rgba(44, 42, 40, 0.3);
}

/* ════════════════════════════════════════
   MATERIAL SECTION — one grid per material: the lead image (optional)
   spans a fixed 2×2 block, so exactly 4 product cards land beside it —
   that's plain CSS Grid auto-placement, not anything hand-counted: the
   image reserves those cells and the cards simply flow into whatever
   is left, in DOM order. A 5th card has nowhere left in that block, so
   it starts a new row spanning the full width, at the same card size
   as the first 4 (same grid, same columns). No image at all just means
   nothing reserves the first cells — the copy spans full width as a
   header instead, and cards fill all 4 columns from row 1. Each
   section alternates background with the next for a clearer break
   between materials than a hairline alone gave it. ════════════════ */
.material-section {
  position: relative;
  display: none;
  padding: clamp(48px, 7vh, 88px) clamp(24px, 4vw, 56px);
}

.material-section.is-active-gender {
  display: block;
}

/* A named divider ahead of every section, rather than counting on
   an alternating background someone could scroll straight past — the
   label is set from data-material by JS, so it can't drift out of sync
   with the filter pills above or the title burned into the photo. */
.material-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1440px;
  margin: 0 auto clamp(24px, 3.5vh, 36px);
  padding-top: 18px;
}

/* Full-viewport-width rule sitting exactly midway between the
   previous material's product cards and this one's title, solid only
   across the products container and dissolving from there to the
   screen edges. .material-section is full-bleed (mx auto centers it
   with the viewport implicitly, since it has no side margins of its
   own), so centering the rule on its box lines it up with the
   viewport too. The gradient stop is whichever is larger: the
   section's own side padding (narrow viewports, container = viewport
   minus that padding) or half the leftover once the container has
   capped out at 1440px (wide viewports).
 Vertically, top/bottom section padding are equal (one `padding`
   declaration sets both), so they cancel out of the midpoint
   calculation — the rule only needs to sit half the divider's own
   padding-top (18px) below the section boundary, regardless of how
   large that shared padding is. Skipped on the first material of each
   gender (nothing above it to center between) and on mobile, where
   there's no room for the fade to read as intentional. */
.material-section:not(.material-section--first)::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.65)
      max(clamp(24px, 4vw, 56px), calc((100vw - 1440px) / 2)),
    rgba(255, 255, 255, 0.65)
      calc(100% - max(clamp(24px, 4vw, 56px), calc((100vw - 1440px) / 2))),
    transparent
  );
}

@media (max-width: 860px) {
  .material-divider {
    padding-top: 0;
  }

  .material-section:not(.material-section--first)::before {
    display: none;
  }
}

.material-divider-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.material-section-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 1440px;
  margin: 0 auto;
}

/* With an image, the top block is flexbox (image + a 2×2 card grid
   side by side) instead of one item spanning two rows of the outer
   grid — a multi-row grid span sized by aspect-ratio, next to a sibling
   whose own row-heights come from *its* items' aspect-ratio, hit a
   genuine Chromium paint bug: the image reliably painted shorter than
   its own measured box (DOM geometry was correct; only the paint
   lagged behind it), no matter which technique drew the image. Plain
   flex stretch has none of that: the visual simply matches whatever
   height the 2×2 grid resolves to. The 2×2 grid always has all 4 cells
   occupied — real cards, or blank .pcard-empty placeholders — so it
   never depends on a spanning sibling to size an empty row either. A
   5th+ product doesn't fit next to the image at all, so it drops into
   .material-overflow-grid below, full width, same card size (both
   grids divide the same content width into equal quarters). */
.material-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2.4vw, 32px);
}

/* Alternating image side on wide screens gives every other section
   its own rhythm instead of an identical left-image block repeating
   down the page. Mobile always stacks image-above-grid, so this only
   applies once there's room to lay them side by side. */
@media (min-width: 861px) {
  .material-section:nth-of-type(even) .material-top {
    flex-direction: row-reverse;
  }
}

.material-visual {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  background-color: var(--warm-white);
  background-size: cover;
  background-position: center;
}

.material-top-grid {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  align-content: start;
  gap: clamp(14px, 1.6vw, 20px);
}

/* Stesso ingombro del riquadro foto di una card reale (aspect-ratio
   4/5) e niente più — senza un align-items:start sui grid genitori
   avrebbe potuto stirarsi per riempire l'altezza di riga (dettata dalle
   card reali con didascalia sotto), deformandosi e "strabordando"
   rispetto alla cella assegnata. */
.pcard-empty {
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--warm-white);
  border: 1px solid var(--line);
}

.material-overflow-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  align-content: start;
  gap: clamp(14px, 1.6vw, 20px);
  margin-top: clamp(14px, 1.6vw, 20px);
}

/* Title + description live on the photo itself when there is one,
   rather than beside it — a scrim carries the contrast so the text
   reads the same way it does everywhere else on the site that sets
   copy directly over a picture (the concept section, the hero). */
.material-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  background: linear-gradient(
    to top,
    rgba(44, 42, 40, 0.85) 0%,
    transparent 100%
  );
  pointer-events: none;
}

.material-visual .material-copy {
  /* The base .material-copy rule below sets a warm-white background
   for the no-image header case — it doesn't get overridden just by
   nesting, so without this line it silently painted an opaque panel
   over the photo and scrim here, which is the actual "washed out text"
   bug this whole section was chasing (every image-rendering theory
   above turned out to be a red herring). */
  background: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: clamp(20px, 3vw, 32px);
}

.material-visual .material-eyebrow {
  color: rgba(237, 230, 220, 0.65);
}

.material-visual .material-title {
  color: var(--paper);
}

.material-visual .material-desc {
  color: rgba(237, 230, 220, 0.82);
}

/* No lead image: this becomes the header, spanning every column as
   its own row above the cards instead of sitting inside the visual. */
.material-copy {
  grid-column: 1 / -1;
  background: var(--warm-white);
  padding: clamp(24px, 4vh, 36px) clamp(24px, 4vw, 56px) clamp(
      16px,
      2.5vh,
      20px
    );
}

.material-eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}

.material-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin-bottom: 10px;
}

/* No lead photo: the header spans the full row on its own, and the
   cards that follow fill the rest of that row edge to edge — a 5th+
   product simply continues onto the next row, same as the photo
   variant's overflow. Empty placeholders complete a short row instead
   of leaving it looking cut off. */
.material-section--no-visual .material-title {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.material-section--no-visual .material-desc {
  max-width: 60ch;
}

.material-desc {
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 46ch;
}

@media (max-width: 860px) {
  .material-section-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .material-overflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Image above, 2×2 grid below — flex's own cross-axis stretch
   doesn't set a height in column mode, so the visual needs its own
   ratio here. */
  .material-top {
    flex-direction: column;
  }
  .material-visual {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }
  /* Placeholder che serviva solo a completare la riga sulla griglia
   desktop a 4 colonne — qui a 2 colonne la riga è già completa senza,
   lasciarlo creerebbe un'intera riga di riquadri vuoti. */
  .pcard-empty--wide-only {
    display: none;
  }
}

/* ── Product card — testo fuori dalla foto (sotto, su sfondo
   piatto) invece che in overlay: la foto resta intera e leggibile, il
   nome/prezzo non dipendono più da uno scrim che comunque copriva
   parte dell'immagine. Portrait 4:5 solo sul riquadro immagine, non
   più su tutta la card (che ora ha altezza variabile: foto + testo). */
.pcard {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pcard-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--warm-white);
  transition: box-shadow 0.4s var(--ease-out);
}

.pcard-media:hover {
  box-shadow: 0 16px 32px rgba(44, 42, 40, 0.16);
}

.pcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  transition:
    opacity 0.8s var(--ease-luxe),
    transform 1.5s var(--ease-luxe);
}

/* Card alta quanto la foto: la prima foto detta l'altezza, la seconda
   (hover) le si sovrappone. */
.pcard-photo-a {
  position: relative;
  display: block;
  inset: auto;
  height: auto;
}

.pcard-photo-b {
  opacity: 0;
}

/* Etichetta libera (Admin → Prodotti, "Bestseller"/"Nuova uscita" ecc.) —
   stesso trattamento pieno bronzo del chip su prodotto.php, assente per
   la maggior parte delle card. */
.pcard-label-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 9px;
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warm-white);
  background: var(--bronze);
  pointer-events: none;
}

/* Il crossfade scatta solo sull'hover dell'immagine stessa, non su
   tutta la card — la fascia colori sta fuori da .pcard-media, quindi
   il suo hover (gestito dal preview JS via data-preview) non la
   riattiva più per errore. */
.pcard-media:hover .pcard-photo-a {
  opacity: 0;
  transform: scale(1.08);
}
.pcard-media:hover .pcard-photo-b {
  opacity: 1;
  transform: scale(1.08);
}

.pcard-caption {
  padding: 14px 2px 0;
  color: var(--ink);
}

.pcard-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.25;
  margin-bottom: 4px;
  transition: color 0.2s;
}

.pcard-name:hover {
  color: var(--bronze);
}

/* Materiale e colori in linea sulla stessa riga, per risparmiare
   lo spazio verticale che occuperebbero su righe separate. */
.pcard-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pcard-material {
  display: block;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pcard-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.pcard-color-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(44, 42, 40, 0.18);
  flex: none;
  transition: transform 0.2s var(--ease-out);
}

.pcard-color-dot:hover {
  transform: scale(1.2);
}

.pcard-color-dot.is-selected {
  box-shadow: 0 0 0 1px var(--paper), 0 0 0 2px var(--ink);
}

.pcard-colors-more {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-left: 2px;
}

.pcard-price {
  display: block;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}