/*
 * Herrenbereich: gekapseltes Theme über <body data-storefront="men">.
 * Farbwerte aus dem Grafikpaket (theme-herren.css), auf die vorhandenen Tokens abgebildet –
 * alle Komponenten bleiben dieselben, nur die Palette wechselt.
 */
[data-storefront="men"] {
  /* Palette aus dem Grafikpaket */
  --store-ink: #102842;
  --store-muted: #445D76;
  --store-brand: #235CA6;
  --store-brand-hover: #184A8A;
  --store-on-brand: #FFFFFF;
  --store-hero: #0B2342;
  --store-on-hero: #FFFFFF;
  --store-accent-on-hero: #AACFFF;
  --store-surface: #F6F9FE;
  --store-panel: #FFFFFF;
  --store-tint: #E6F1FF;
  --store-border: #B8CDE6;
  --store-focus: #1B5CA6;
  --store-focus-on-dark: #AACFFF;

  /* Zuordnung auf die Tokens der Seite */
  --brand: var(--store-brand);
  --bordeaux: var(--store-hero);            /* Header, Hero, Footer */
  --bordeaux-deep: #081A32;                 /* mobiles Menü */
  --bordeaux-button: var(--store-brand);    /* Hauptaktionen */
  --bordeaux-ink: #0F2C52;                  /* Überschriften auf Hell */
  --rose-50: #F2F7FE;
  --blush: var(--store-tint);
  --blush-item: #EDF4FE;
  --rose-200: #CFE3FB;                      /* helle Schaltflächen (Hero, Header) */
  --rose-300: var(--store-tint);            /* CTA-Fläche */
  --rose-350: #C3DBF7;
  --rose-400: #7FB2EC;                      /* aktive Chips, Badges */
  --pink-on-dark: var(--store-accent-on-hero);
  --pink-pale: var(--store-accent-on-hero);
  --pink-ink: var(--store-brand);           /* kontraststarker Akzent auf Hell */
  --bg: var(--store-surface);
  --white: var(--store-panel);
  --text: var(--store-ink);
  --muted: var(--store-muted);
  --line: #D9E6F5;
  --focus: 0 0 0 3px var(--store-panel), 0 0 0 5px var(--store-focus);
  --focus-dark: 0 0 0 3px var(--store-hero), 0 0 0 5px var(--store-focus-on-dark);
  --shadow-bar: 0 10px 30px rgba(11, 35, 66, .12), 0 2px 6px rgba(11, 35, 66, .06);
  background: var(--bg);
}

/* Fest eingetragene Rosatöne des Hauptdesigns */
[data-storefront="men"] .hero .eyebrow { color: #DCEBFF; }
[data-storefront="men"] .hero__note { color: #CFE0F5; }
[data-storefront="men"] .page-hero .eyebrow { color: var(--store-accent-on-hero); }
[data-storefront="men"] .profile-card { background: #13253B; }
[data-storefront="men"] .profile-card:hover { box-shadow: 0 14px 30px rgba(11, 35, 66, .22); }
[data-storefront="men"] .profile-card__link::after { background: linear-gradient(to top, rgba(6, 16, 31, .74) 0%, rgba(6, 16, 31, .36) 22%, rgba(6, 16, 31, 0) 42%); }
[data-storefront="men"] .fav-btn { background: rgba(11, 35, 66, .2); }
[data-storefront="men"] .fav-btn:hover { background: rgba(11, 35, 66, .38); }
[data-storefront="men"] .nav-toggle { border-color: rgba(170, 207, 255, .45); }
[data-storefront="men"] .collage__badge { background: var(--store-hero); }
[data-storefront="men"] .btn--bordeaux:hover,
[data-storefront="men"] .btn:not(.btn--outline):not(.btn--ghost):not(.btn--rose):hover { background: var(--store-brand-hover); }
[data-storefront="men"] .btn--rose { color: var(--store-hero); }
[data-storefront="men"] .btn--rose:hover { background: var(--store-accent-on-hero); }
[data-storefront="men"] .btn--outline:hover { background: var(--rose-50); }
[data-storefront="men"] .cta__title { color: var(--bordeaux-ink); }
[data-storefront="men"] .site-footer .footer__divider { background: rgba(170, 207, 255, .35); }
@media (max-width: 899px) {
  [data-storefront="men"] .site-nav { box-shadow: 0 18px 30px rgba(4, 12, 24, .4); }
  [data-storefront="men"] .site-nav__list a,
  [data-storefront="men"] .site-nav__login { border-bottom-color: rgba(170, 207, 255, .16); }
}

/* Werbefläche (Anzeige) im Herrenbereich: gleiche Gestaltung, blaue Palette */
[data-storefront="men"] .promo {
  background: radial-gradient(120% 140% at 100% 0%, #2F6FC0 0%, var(--store-hero) 48%, #05142A 100%);
  box-shadow: 0 18px 40px rgba(11, 35, 66, .24);
}
[data-storefront="men"] .promo::after { background: radial-gradient(circle, rgba(170, 207, 255, .3), transparent 70%); }