/* ============ Round 7 · product page fixes ============ */
/* 1. The AI label ("AI-generated illustration"): one tidy place, never over the flag, the stamp or the bottle.
      - Product gallery: PdpGallery.php puts the stamp and the label in ONE row at the foot of the picture (.pdp-gallery-foot); they are laid out beside
        each other, so they cannot collide whatever the language or the stamp's length. Before, the label was placed on its own (top 46 px on a phone,
        under the flag and right across the bottle).
      - Cards (.ai-label-card: shop, home, cart, quiz, posts): the label had a fixed 22 px box, so on a 166 px wide card its text wrapped and ran out of the
        box. Now the box grows with the text and stays inside the card.
   The label stays readable: 12 px, dark text on a light frosted chip (about 10:1), on every AI picture. Only a place and a look change, not the text.
   2. The "How much do I need?" link: no tap flash on the link while the sheet opens (iOS).
   Cascade: plain rules outside any layer (this file comes last); nothing here needs !important. */

:root {
  --ai-chip-bg: rgba(255, 253, 249, .9);
  --ai-chip-ink: #2b1e15;
  --ai-chip-ring: 0 0 0 1px rgba(43, 30, 21, .1), 0 2px 8px -2px rgba(43, 30, 21, .18);
}

/* ---- the gallery: the foot row ---- */
.pdp-gallery-main > .pdp-gallery-foot {
  position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  pointer-events: none;
}
@media (min-width: 641px) { .pdp-gallery-main > .pdp-gallery-foot { left: 16px; right: 16px; bottom: 16px; } }
.pdp-gallery-foot > .pdp-gallery-stamp { position: static; inset: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
.pdp-gallery-foot > .pdp-gallery-stamp > span:last-child { min-width: 0; }
.pdp-gallery-foot > .ai-label { position: static; inset: auto; flex: none; margin-left: auto; }

/* ---- the label itself: gallery and cards ---- */
.pdp-gallery-foot > .ai-label, .ai-label-card {
  height: auto; max-width: 118px; padding: 5px 9px; border-radius: 9px; background: var(--ai-chip-bg); color: var(--ai-chip-ink); box-shadow: var(--ai-chip-ring);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12px/1.25 var(--font-sans), sans-serif; letter-spacing: 0; text-align: left;
  white-space: normal; overflow-wrap: break-word; pointer-events: none;
}
/* a card: bottom left of the picture, inside it, as wide as the text needs (at most the card) */
.ai-label-card { display: block; top: auto; right: auto; left: 8px; bottom: 8px; max-width: min(118px, calc(100% - 16px)); }

/* ---- the "How much do I need?" link: no grey tap flash behind the sheet that is opening ---- */
.pdp-variant-help { -webkit-tap-highlight-color: transparent; }