/*
  De productkaart.

  Een bron voor alle plekken waar woocommerce/content-product.php draait: de
  homepage, het shop-archief, de taxonomie-archieven, de moodspagina en de
  zoekresultaten.

  Waarom dit bestand bestaat. De markup stond al op een plek, maar de opmaak
  stond in twee: archive.css voor het archief en home.css voor de homepage.
  Die twee liepen uiteen, en elke keer dat er iets aan de kaart veranderde
  viel de andere pagina om. Drie keer op een dag gebeurde dat:

    - .card-link::after stond alleen in archive.css, dus op de homepage was de
      kaart niet klikbaar.
    - .card-kenmerk stond alleen in archive.css, dus "Skin Scent" viel op de
      homepage als losse tekst in de foto.
    - .card-rating en .card-title-row stonden alleen in home.css, dus op het
      archief waren de sterren ongestileerd.

  De basiswaarden komen uit archive.css. Dat is niet willekeurig: home.css had
  een tweede kopie onder .card.vA, en die was op een spatie en een marge na
  gelijk aan de archiefregels. De homepage toonde dus allang de archiefstijl.

  Drie dingen zijn bewust anders dan wat er in archive.css stond:

    1. .card-label is 0.65rem in plaats van 0.56rem, en .card-kenmerk volgt
       mee op 0.6rem en top 2.7rem. De homepagewaarde wint, want die is beter
       leesbaar, en de shop-kaarten worden nu even groot.
    2. Het mobiele blok onderaan gold alleen op het archief. Nu overal.
    3. .card-rating en .card-mood staan op de waarden die .card.vA op de
       homepage gaf, niet op de dode basisregels uit home.css, want dat is
       wat je daar op het scherm ziet.

  Wat hier NIET in hoort: hoe groot een kaart is in zijn context. De carousel
  op de homepage zet dat in home.css met .carousel-slide, het grid op het
  archief in archive.css met .grid.

  .card.vA staat nog in home.css. Die regels zijn nu dubbelop en kunnen weg
  zodra dit bestand bevestigd is, samen met de klasse in inc/home.php.
*/

/* ── Het kader ─────────────────────────────────────────────────────── */

/* Kaartformaat exact overgenomen uit .product-card.vA in TGP_website_v50.html */
.card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: all 0.3s;
  cursor: pointer;
  position: relative;
}

.card:hover { transform: translateY(-8px); }

/* ── De foto en de crossfade ───────────────────────────────────────── */

.card-image {
  position: relative;
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--cream) 0%, var(--blush) 100%);
  overflow: hidden;
  border-radius: 0;
}

.card-image img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.55s ease;
}

/* Crossfade, overgenomen uit .product-card in TGP_website_v51.html */
.card-hover-img { opacity: 0; }

/* Hier stond een uitzondering die het moodboard met object-fit: contain in
   zijn geheel toonde. Die is eruit: de moodboards zijn 9:16 en het kader is
   3:4, dus contain liet 12,5% creme rand aan elke zijde staan en de kaart
   oogde smal. Nu vult ook het moodboard het kader, net als de flesfoto, en
   dat scheelt 25% van de collagehoogte. De fles zelf valt daar bij geen van
   de moodboards buiten: die staat tussen ongeveer 21% en 66% van de hoogte
   en het zichtbare venster loopt van 12,5% tot 87,5%.

   De klasse card-hover-mood staat nog wel op de img. Die stuurt geen CSS
   meer, maar markeert welke hover een moodboard is; content-product.php
   kiest daarop het onbesneden formaat large in plaats van de vierkante
   uitsnede tgp-kaart. Weghalen zou dus meer zijn dan een CSS-opruiming. */

.card:hover .card-main-img { opacity: 0; }
.card:hover .card-hover-img { opacity: 1; }

/* Zolang de hoverfoto nog niet opgehaald is blijft de flesfoto staan.

   assets/js/cards.js haalt card-hover-uit weg zodra de foto binnen is, en dan
   pas mag de flesfoto wegfaden. Zonder deze regel werd de kaart leeg bij de
   eerste hover: de flesfoto ging naar 0 en wat ervoor in de plaats kwam was
   nog de doorzichtige pixel uit content-product.php.

   Vier klassen tegen de drie van de regel hierboven, dus deze wint. */
.card.card-hover-uit:hover .card-main-img { opacity: 1; }

/* ── De twee pilletjes rechtsboven ─────────────────────────────────── */

.card-label {                  /* .badge uit TGP_website_v51.html */
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  background: var(--blush-licht);
  color: var(--mauve);
  padding: 0.28rem 0.6rem;
  border-radius: 20px;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  pointer-events: none;
}

/* Het kenmerk, "Skin Scent", hangt onder het familielabel en zit aan de maat
   daarvan vast: 1rem labelpositie plus de labelhoogte (0.65 x 1.6 regelhoogte
   plus 2 x 0.28rem padding = 1.6rem) plus 0.09rem tussenruimte = 2.7rem. De
   tekstgrootte houdt dezelfde verhouding tot het label als in v51: 0.52/0.56,
   dus 0.65 x 0.929 = 0.6rem. Verander je het label, reken dit dan na. */
.card-kenmerk {
  position: absolute;
  top: 2.7rem;
  right: 1rem;
  z-index: 3;
  background: rgba(253, 246, 240, 0.92);
  color: var(--mauve);
  padding: 0.24rem 0.55rem;
  border-radius: 20px;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  pointer-events: none;
}

/* ── De tekst onder de foto ────────────────────────────────────────── */

.card-info { padding: 0.9rem 0.2rem 0; }

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  margin-bottom: 0.15rem;
}

.card-title-row .card-name { margin-bottom: 0 !important; flex: 1 1 auto; min-width: 0; }

.card-name {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.22rem;
  color: var(--noir);
  margin-bottom: 0.15rem;
}

.card-inspired {
  font-family: 'Jost', sans-serif;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--mauve);
  margin-bottom: 0.2rem;
  opacity: 0.85;
  font-weight: 300;
}

/* De parfumnaam een stap groter dan "Inspired by" ervoor, op verzoek van
   23 augustus 2026 nog een stap erbij: van 1.06 naar 1.16rem. */
.card-inspired em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.16rem;
  letter-spacing: 0;
  color: var(--noir);
}

.card-mood {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--mauve);
  letter-spacing: 0.04em;
  margin-bottom: 0.7rem;
}

/* ── De sterren ───────────────────────────────────────────────────── */

/* Grijze rij als basis, gouden rij eroverheen afgeknipt op rating/5, zodat
   halve sterren kloppen. */
.card-rating {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--noir);
  white-space: nowrap;
  flex: 0 0 auto;
  margin-bottom: 0.3rem;
}

.card-rating .rating-star { display: inline-block; vertical-align: middle; transform: translateY(-1px); }

.card-rating .sterren {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: rgba(158, 90, 110, 0.3);
  letter-spacing: 0.05em;
}

.card-rating .sterren > span {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
}

.card-rating .aantal { color: var(--mauve); }

/* ── De onderrand: prijs en Add to Bag ─────────────────────────────── */

/* .card-bottom moet boven het klikvlak van .card-link liggen, anders vangt de
   kaartlink de klik op Add to Bag af. */
.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3;
}

.card-price {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--noir);
  margin: 0.7rem 0 0;
}

.card-add {
  width: auto;
  padding: 0 0 2px;
  background: transparent;
  border: none;
  color: var(--mauve);
  font-family: 'Jost', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.2s;
  display: inline-block;
  text-decoration: none;
}

.card-add::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--mauve);
  transition: background 0.2s;
}

.card-add:hover { color: var(--wine); }
.card-add:hover::after { background: var(--gold); }

/* ── Het klikvlak ─────────────────────────────────────────────────── */

/* De kaart is in zijn geheel klikbaar, maar met een echte link in plaats van
   window.location in JavaScript. Zo werkt een middelklik, staat de bestemming
   in de statusbalk en volgt Google hem. De ::after rekt het klikvlak op tot de
   hele kaart. Zie woocommerce/content-product.php. */
.card-link { color: inherit; text-decoration: none; }

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
}

.card-link:hover { color: var(--wine); }

/* ── Mobiel ───────────────────────────────────────────────────────── */

/* Stond alleen in archive.css en gold dus alleen op het archief. De kaarten
   op de homepage hielden op een telefoon hun desktopmaten en liften bij een
   tik omhoog. */
@media (max-width: 600px) {
  .card:hover { transform: none; }
  .card-info { padding: 0.7rem 0.1rem 0; }
  .card-name { font-size: 1.05rem; }
  .card-inspired { font-size: 0.83rem; }
  .card-inspired em { font-size: 1.06rem; }   /* een stap groter, 23 aug 2026 */
  .card-price { font-size: 0.85rem; margin-top: 0.5rem; }
  .card-add { font-size: 0.58rem; letter-spacing: 0.16em; }
  .card-label { top: 0.6rem; right: 0.6rem; }   /* afmetingen gelijk aan v51, alleen dichter op de hoek */
}

/* ── Mobiele tikdoelen op 44x44 ──────────────────────────────────────
   Zelfde richtlijn en zelfde vorm als het bestaande blok in cart.css.
   Alles staat in een mediaquery, dus de desktopweergave verandert niet.
   Zie mobiel-audit.md voor de meting per element.

   Deze drie krijgen een onzichtbaar tikvlak via ::before in plaats van een
   grotere box. Reden: hun uiterlijk zit vast aan hun maat. .card-add heeft
   een onderstreping op ::after die aan de tekst hangt, .pp-uv-badge is een
   rond schijfje van 26px, en .cart-weg staat in een rij die anders
   uitrekt. Het beeld blijft zo gelijk, alleen het trefgebied groeit. */
@media (max-width: 600px) {
  /* Op mobiel staat .card-add op 0.58rem, samen met padding: 0 0 2px is dat
     ongeveer 17px hoog. .card-add heeft al position: relative. */
  .card-add::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 44px;
  }
}

/* ── Label en kenmerk kleiner op een telefoon ────────────────────────
   Op 375px is een kaart in de carrousel nog 144px breed. Het label van
   0.65rem met 0.28rem padding legt daar een flinke hap over de flesfoto.

   Nieuwe maten en de rekensom voor de positie van het kenmerk, zodat die
   er precies onder blijft hangen in plaats van erover:

     label:   0.52rem x 1.6 regelhoogte = 13,3px, plus 2 x 0.2rem padding
              = 6,4px, dus 19,7px hoog. Bovenkant staat op 0.6rem = 9,6px.
     kenmerk: 9,6 + 19,7 + 1,5 tussenruimte = 30,8px, afgerond 1.92rem.

   De verhouding tussen de twee blijft gelijk aan die op desktop
   (0.6/0.65), dus het kenmerk wordt 0.48rem. */
@media (max-width: 600px) {
  .card-label {
    font-size: 0.52rem;
    padding: 0.2rem 0.45rem;
    letter-spacing: 0.08em;
  }

  .card-kenmerk {
    top: 1.92rem;
    right: 0.6rem;
    font-size: 0.48rem;
    padding: 0.18rem 0.4rem;
    letter-spacing: 0.08em;
  }
}