/* TOGOPEPTIDE — Color & state polish
   Cluster 12 / items 428 / 429 / 430 / 434 / 435 / 436 / 437 / 442 / 443
   Loads sitewide AFTER glowup.css + tgp-redesign.css.
   Additive only — no overrides of brand decisions.
*/

/* ── 442/443 — Card surface tone refinement ────────────────────
   Light mode: paper-warm, never pure white #fff.
   Dark mode: anthracite #0e0e11, never pure black.
   tokens.css already sets these via --color-surface-raised; this
   block just documents + applies them to .card root if not already
   assigned. */
.card {
  background-color: var(--color-surface, #0e0e11);
}
html[data-theme="light"] .card {
  /* Paper-white card on paper-soft page */
  background-color: var(--color-surface-raised, #ffffff);
}
/* Card body fallback — guarantees a warm anthracite, never pitch black */
.card--paper {
  background-color: var(--color-bg-elevated, #0e0e11);  /* warm anthracite */
}
html[data-theme="light"] .card--paper {
  background-color: var(--color-surface, #fafafa);      /* warm tint, not stark white */
}

/* ── 429 — Micro-glow on primary CTAs ──────────────────────────
   2px brand-red blur on hover, plus existing transform from base.
*/
.btn--primary:hover,
.btn--lg:hover {
  box-shadow:
    0 0 0 2px rgba(225, 29, 38, 0.25),
    0 4px 12px rgba(225, 29, 38, 0.18);
}
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .btn--lg:hover {
  box-shadow:
    0 0 0 2px rgba(184, 37, 47, 0.30),
    0 4px 12px rgba(184, 37, 47, 0.22);
}

/* ── 430 — Skeleton shimmer with brand tint ────────────────────
   Uses CSS custom prop so dark + light pick the right base layer.
*/
@keyframes tgp-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.skeleton,
.loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface, #1a1a1a) 0%,
    rgba(225, 29, 38, 0.08)        50%,
    var(--color-surface, #1a1a1a) 100%
  );
  background-size: 200% 100%;
  animation: tgp-shimmer 1.4s infinite linear;
  border-radius: var(--radius-md, 10px);
}
html[data-theme="light"] .skeleton,
html[data-theme="light"] .loading-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-surface, #ece8e0) 0%,
    rgba(184, 37, 47, 0.08) 50%,
    var(--color-surface, #ece8e0) 100%
  );
  background-size: 200% 100%;
  animation: tgp-shimmer 1.4s infinite linear;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton, .loading-shimmer { animation: none; }
}

/* ── 434 — Selected-state ring ─────────────────────────────────
   Brand-red 2px outset ring on every aria-selected/checked element.
*/
[aria-selected="true"],
[aria-pressed="true"],
input[type="radio"]:checked + label,
input[type="checkbox"]:checked + label {
  box-shadow: 0 0 0 2px var(--color-accent, #e01b1b);
  border-color: var(--color-accent, #e01b1b);
}
/* Don't double-up if focus is also on the same element */
[aria-selected="true"]:focus-visible,
[aria-pressed="true"]:focus-visible {
  outline: 2px solid var(--color-accent-hover, #ff3030);
  outline-offset: 4px;
}

/* ── 435 — Disabled-state standard ─────────────────────────────
   50% opacity, not-allowed cursor, no hover lift.
*/
:where(.btn, .form-input, .form-select, .form-textarea, button, [role="button"])[disabled],
:where(.btn, .form-input, .form-select, .form-textarea, button, [role="button"])[aria-disabled="true"],
:where(.btn, .form-input, .form-select, .form-textarea, button, [role="button"]):disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;     /* keep tooltip-on-hover possible */
  filter: saturate(0.7);
}
:where(.btn, button, [role="button"])[disabled]:hover,
:where(.btn, button, [role="button"]):disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ── 436 — Focus-state (verify) ────────────────────────────────
   base.css line 103 already defines :focus-visible with a 2px brand
   accent outline + 2px offset. We DO NOT duplicate; we only add a
   slightly stronger ring for high-stakes targets (links inside body
   text on light mode where contrast can be an issue).
*/
html[data-theme="light"] a:focus-visible {
  outline: 3px solid var(--color-accent, #B8252F);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ── 437 — Hover-state polish ──────────────────────────────────
   Subtle Y-translate -2px + drop-shadow on interactive cards.
   Skip if the card is in a swiping carousel (data-no-hover).
*/
.card--interactive,
.shop-card,
.compound-card {
  transition:
    transform var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1)),
    box-shadow var(--dur-base, 220ms) var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
@media (hover: hover) {
  .card--interactive:not([data-no-hover]):hover,
  .shop-card:not([data-no-hover]):hover,
  .compound-card:not([data-no-hover]):hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(0,0,0,0.38));
  }
}

/* ── 428 — Subtle hue rotation per major section ─────────────
   Very subtle filter on alt sections (every other major section
   tagged data-section-tone="alt"). Capped at 4deg so it stays
   unconscious. Disabled under prefers-reduced-motion (no animation,
   but the hue itself stays — it's a static aesthetic). */
[data-section-tone="alt"] {
  filter: hue-rotate(4deg) saturate(1.02);
}
[data-section-tone="alt-cool"] {
  filter: hue-rotate(-3deg);
}

/* ── 441-bookkeeping — Gradient guard via CSS counter ───────────
   We can't enforce "max 2 gradients per page" in CSS, but we can
   visually flag them in audit-mode. Activate with body class
   `togo-audit-gradients` (no-op in production). */
body.togo-audit-gradients [style*="gradient("],
body.togo-audit-gradients [class*="gradient"] {
  outline: 1px dashed magenta;
}

/* ═══════════════════════════════════════════════════════════════════
   WCAG AA CONTRAST FIX — Announcement bar (sitewide)
   ═══════════════════════════════════════════════════════════════════
   Audit (375px viewport) found ratio 1.10:1 on announcement-bar text
   and progress label. Root cause: light-mode page-bg let the
   rgba(224,27,27,0.12) bar gradient render almost transparent on
   cream paper, dropping #ddd text to near-invisible. Fix:
   - Opaque solid background in BOTH themes (no transparency).
   - Explicit white text + bold on key elements.
   - Progress bar track upgraded to a visible white-on-red.
   Loaded AFTER header-glowup.css and tgp-redesign.css — wins cascade
   without needing !important on tokens. */

/* — DARK THEME — anthracite-red strip with pure white text —
   !important needed because tgp-redesign.css uses !important on the
   light-theme variant; we keep specificity behaviour symmetrical. */
.announcement-bar {
  background: linear-gradient(
    90deg,
    #4a0e0e 0%,
    #2a0808 50%,
    #4a0e0e 100%
  ) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.announcement-bar strong,
.announcement-bar a {
  color: #ffffff !important;
}
/* The "€100 for free shipping" progress label sits between the
   gradient bar fill and the page — give it explicit white + medium
   weight so it's never confused with the muted theme color. */
.announcement-bar__progress {
  color: #ffffff !important;
  font-weight: 600;
}
/* Track behind the fill — was rgba(255,255,255,0.1) which was almost
   invisible. Bump to 0.28 for a perceptible empty-state bar. */
.announcement-bar__bar {
  background: rgba(255, 255, 255, 0.28);
}
/* Close button — was #999 on dark-red ≈ 3.5:1. Bump to pure white
   at 0.82 alpha for both legibility and visual subtlety. */
.announcement-bar__close {
  color: rgba(255, 255, 255, 0.82);
}
.announcement-bar__close:hover,
.announcement-bar__close:focus-visible {
  color: #ffffff;
}

/* — LIGHT THEME — vivid brand-red strip, white text everywhere.
   tgp-redesign.css already sets vivid red bg w/ !important; we
   re-state with !important so the new bar values (gradient stops,
   progress label, track) stick. White on #B8252F = ~4.95:1 (AA). */
html[data-theme="light"] .announcement-bar {
  background: linear-gradient(
    90deg,
    #B8252F 0%,
    #8C161E 50%,
    #B8252F 100%
  ) !important;
  color: #ffffff !important;
  border-bottom: 0 !important;
}
html[data-theme="light"] .announcement-bar strong,
html[data-theme="light"] .announcement-bar a,
html[data-theme="light"] .announcement-bar__progress {
  color: #ffffff !important;
}
html[data-theme="light"] .announcement-bar__progress {
  font-weight: 600;
}
html[data-theme="light"] .announcement-bar__bar {
  background: rgba(255, 255, 255, 0.32) !important;
}
html[data-theme="light"] .announcement-bar__bar-fill {
  /* Pure white fill on the deep-red strip — maximum legibility */
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.88) 100%) !important;
}
html[data-theme="light"] .announcement-bar__close {
  color: rgba(255, 255, 255, 0.86) !important;
}
html[data-theme="light"] .announcement-bar__close:hover,
html[data-theme="light"] .announcement-bar__close:focus-visible {
  color: #ffffff !important;
}

/* Small uppercase/product microcopy needs stronger theme-specific contrast.
   tgp-redesign redefined --color-accent-text to the darker brand red globally;
   that reads well on paper but is too dim on dark cards. */
:root {
  --color-accent-text: #ff6f6f;
}

html[data-theme="light"] {
  --color-accent-text: #99161D;
}

html[data-theme="light"] :is(.badge, .card__badge, .compound-hero__badge) {
  background: rgba(153, 22, 29, 0.10) !important;
  border-color: rgba(153, 22, 29, 0.30) !important;
  color: #99161D !important;
  text-shadow: none !important;
}

html[data-theme="light"] .compound-hero__badge {
  background: #99161D !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__eyebrow {
  color: var(--color-accent-text) !important;
}

html[data-theme="light"] body[data-page="home"] main .home-category-entry.section > .container > .entry-grid > a.card.card--media .card__body-text {
  color: var(--color-text-muted) !important;
}

html[data-theme="light"] .togo-stock {
  background: rgba(255, 251, 235, 0.96) !important;
  border-color: rgba(124, 74, 0, 0.28) !important;
  color: #7C4A00 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .togo-stock--in-stock {
  background: rgba(236, 253, 245, 0.96) !important;
  border-color: rgba(20, 82, 58, 0.28) !important;
  color: #14523A !important;
}

html[data-theme="light"] .togo-stock--fresh-batch {
  background: rgba(255, 251, 235, 0.96) !important;
  border-color: rgba(124, 74, 0, 0.28) !important;
  color: #7C4A00 !important;
}

html[data-theme="light"] .shop-filters__count,
html[data-theme="light"] .breadcrumb__sep {
  color: var(--color-text-muted) !important;
}

html[data-theme="light"] .qty-stepper__btn {
  color: var(--color-text-muted) !important;
}

html:not([data-theme="light"]) .qty-stepper__btn {
  color: var(--color-text-muted) !important;
}

html:not([data-theme="light"]) :is(.tgp-policy-cards__cta, .tgp-trust-microcard__cta) {
  color: var(--color-accent-text) !important;
}

html:not([data-theme="light"]) .footer-payment__method--ideal {
  color: #f472b6 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   WCAG AA CONTRAST FIX — Language switcher button ("Toon in
   Nederlands"). Audit reported 3.74:1 — bump foreground for AA.
   The button uses #togo-lang-switcher-btn id; dark-theme override
   was missing. Match the existing light-theme treatment. */
#togo-lang-switcher-btn {
  color: #ffffff;
}
#togo-lang-switcher-btn:hover,
#togo-lang-switcher-btn[aria-expanded="true"] {
  color: #ffffff;
}
/* In-banner CTA "Toon in Nederlands" — when rendered as text-only
   button on dark surface, ensure it lands on white not muted gray. */
#togo-lang-banner,
#togo-lang-banner button {
  color: var(--color-text);
}