/* ═════════════════════════════════════════════════════════════════════════
   responsive.css — site-wide mobile/tablet overrides for Bauhaus pages
   ─────────────────────────────────────────────────────────────────────────
   Breakpoints (consistent across the site):
     - Mobile:  ≤640px
     - Tablet:  641–900px
     - Desktop: ≥901px

   The Bauhaus templates use inline styles for visual fidelity (anti-Filkorn
   cascade). To beat them on narrow viewports we use:
     1. Attribute selectors that match the data-* hooks already present in
        the templates (e.g. [data-bk-pdp], [data-section="hero"]).
     2. !important on the layout properties we override.
     3. Targeted styles using existing markup — no template restructure.

   ════════════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HEADER / NAV — applies to all pages                                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* Header padding shrinks */
  [data-bk-header] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Header inner row gap */
  [data-bk-header-inner] {
    gap: 12px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HERO SECTION (homepage + page-hero)                                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-section="hero"] {
    min-height: 480px !important;
    max-height: 580px !important;
    height: min(76vh, 540px) !important;
  }
  [data-section="hero"] > div:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-section="hero"] [class*="display"],
  [data-section="hero"] h1 {
    font-size: clamp(34px, 9vw, 52px) !important;
    line-height: 1.05 !important;
  }
  /* Hero text column — let it span more on mobile */
  [data-section="hero"] [style*="max-width: min(720px"] {
    max-width: 100% !important;
  }
}

@media (max-width: 640px) {
  [data-section="hero"] {
    min-height: 440px !important;
    max-height: 540px !important;
  }
  [data-section="hero"] h1 {
    font-size: clamp(30px, 10vw, 44px) !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE: PRODUCTS GRID (7-col category strip)                      ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-section="categories"] > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-section="categories"] [style*="grid-template-columns: repeat(7"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  [data-section="categories"] h2 {
    font-size: clamp(28px, 6vw, 36px) !important;
  }
}

@media (max-width: 640px) {
  [data-section="categories"] [style*="grid-template-columns: repeat(7"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE: TRUST-STRIP                                               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Force chips to wrap and scale text down */
  section[style*="border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: var(--bg)"] > div {
    padding: 16px 20px !important;
    gap: 8px 16px !important;
    justify-content: flex-start !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE: PROMO-BANNERS (2-col)                                     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-section="promo-banners"] > div {
    grid-template-columns: 1fr !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    gap: 16px !important;
  }
  [data-section="promo-banners"] a {
    min-height: 280px !important;
  }
  [data-section="promo-banners"] h3 {
    font-size: 30px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE: PLUS-PROMO (1.4fr 1fr)                                    ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-section="plus"] {
    padding: 40px 20px !important;
  }
  [data-section="plus"] > div {
    grid-template-columns: 1fr !important;
    padding: 40px 24px !important;
    gap: 32px !important;
  }
  [data-section="plus"] h2 {
    font-size: clamp(30px, 7vw, 40px) !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE: JOURNAL (3-col)                                           ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-section="journal"] {
    padding: 64px 20px !important;
  }
  [data-section="journal"] [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
  [data-section="journal"] h2 {
    font-size: clamp(28px, 6vw, 36px) !important;
  }
}

@media (max-width: 640px) {
  [data-section="journal"] [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOMEPAGE: ABOUT-BLOCK, REVIEWS, NEU-IM-ATELIER, ROUTINEN            ║
   ║   (all share the 96px / 40px padding pattern + multi-col grids)      ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-section="about-block"],
  [data-section="reviews"],
  [data-section="neu-im-atelier"],
  [data-section="routinen"],
  [data-section="bestsellers"],
  [data-section="brands-marquee"],
  [data-section="brands"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Generic: 2-col → 1-col where data attr present */
  [data-section="about-block"] > div,
  [data-section="reviews"] > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Section headings */
  [data-section] h2 {
    font-size: clamp(28px, 6vw, 40px) !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  FOOTER — newsletter band, 5-col grid, bottom strip                  ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* Newsletter band 2-col → 1-col */
  [data-site-footer] > div:nth-child(1) {
    padding: 28px 20px !important;
  }
  [data-site-footer] > div:nth-child(1) > div {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  /* Main 5-col grid → 2-col */
  [data-site-footer] > div:nth-child(3) {
    grid-template-columns: 1fr 1fr !important;
    padding: 40px 20px 24px !important;
    gap: 28px 24px !important;
  }
  /* Brand column spans both */
  [data-site-footer] > div:nth-child(3) > div:first-child {
    grid-column: 1 / -1 !important;
  }

  /* Bottom strip — stack on mobile */
  [data-site-footer] > div:nth-child(4) {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px 20px !important;
    gap: 10px !important;
  }
}

@media (max-width: 640px) {
  [data-site-footer] > div:nth-child(3) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  [data-site-footer] h3 {
    font-size: 22px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PDP — Product Bauhaus template                                      ║
   ║   2-col 1fr / 1.15fr  →  1-col on tablet+mobile                      ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* Top-level padding shrinks */
  [data-bk-pdp] > div:first-child {
    padding: 16px 20px 0 !important;
  }
  [data-bk-pdp] > section:first-of-type {
    padding: 24px 20px 48px !important;
  }
  /* MAIN GRID 2-col → 1-col, gallery on top */
  [data-bk-pdp] > section:first-of-type > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Sticky gallery — UNSTICK on mobile */
  [data-bk-pdp] > section:first-of-type > div > div:first-child > div {
    position: static !important;
    top: auto !important;
  }
  /* Main image height shrinks */
  [data-bk-pdp-main-image] {
    height: 420px !important;
  }
  /* Title clamp — keep readable */
  [data-bk-pdp] h1.display {
    font-size: clamp(28px, 7vw, 42px) !important;
  }
  /* Price big number — readable on mobile */
  [data-bk-pdp-price-main] {
    font-size: clamp(36px, 9vw, 48px) !important;
  }
  /* TABS section padding */
  [data-bk-pdp] > section:nth-of-type(2) {
    padding: 40px 20px 24px !important;
  }
  /* Specs table 2-col → 1-col */
  [data-bk-pdp] [style*="grid-template-columns: repeat(2, 1fr); gap: 0 32px"] {
    grid-template-columns: 1fr !important;
  }
  /* Reviews 1fr 2fr → stack */
  #bk-pdp-reviews {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Review cards 3-col → 1-col */
  #bk-pdp-tab-rev [style*="grid-template-columns: repeat(3, 1fr); gap: 32px"] {
    grid-template-columns: 1fr !important;
  }
  /* Cross-sell + you-might-like section padding + 3-col */
  [data-bk-pdp] > section:nth-of-type(3),
  [data-bk-pdp] > section:nth-of-type(4) {
    padding: 56px 20px !important;
  }
  [data-bk-pdp] > section:nth-of-type(3) [style*="grid-template-columns: repeat(3, 1fr); gap: 24px"],
  [data-bk-pdp] > section:nth-of-type(4) [style*="grid-template-columns: repeat(3, 1fr); gap: 24px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  [data-bk-pdp] > section:nth-of-type(3) h2,
  [data-bk-pdp] > section:nth-of-type(4) h2 {
    font-size: clamp(26px, 6vw, 36px) !important;
  }
}

@media (max-width: 640px) {
  [data-bk-pdp-main-image] {
    height: 340px !important;
  }
  /* Thumbnail strip — horizontal scroll with snap */
  [data-bk-pdp] [style*="grid-template-columns: repeat(5, 1fr)"] {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    scrollbar-width: thin;
  }
  [data-bk-pdp] [style*="grid-template-columns: repeat(5, 1fr)"] > button {
    flex: 0 0 84px !important;
    width: 84px !important;
    height: 84px !important;
    scroll-snap-align: start !important;
  }
  /* CART ROW — wrap so wishlist + compare sit BELOW the add-to-cart */
  [data-bk-pdp] [style*="display: flex; gap: 12px; align-items: center;"] {
    flex-wrap: wrap !important;
  }
  /* qty stepper full first row */
  [data-bk-pdp] [data-bk-pdp-qty] {
    flex: 0 0 auto !important;
  }
  /* Make ATC button take remaining width on the same row */
  [data-bk-pdp] button.js-add-to-cart {
    flex: 1 1 calc(100% - 132px) !important;
    min-height: 56px !important;
  }
  /* Wishlist + compare share second row, full-width split */
  [data-bk-pdp] button.js-wishlist-toggle,
  [data-bk-pdp] button.js-compare-toggle {
    flex: 1 1 calc(50% - 6px) !important;
    width: auto !important;
    min-height: 48px !important;
  }
  /* Cross-sell on smallest screens — single col */
  [data-bk-pdp] > section:nth-of-type(3) [style*="grid-template-columns: repeat(3, 1fr); gap: 24px"],
  [data-bk-pdp] > section:nth-of-type(4) [style*="grid-template-columns: repeat(3, 1fr); gap: 24px"] {
    grid-template-columns: 1fr !important;
  }
  /* TAB list — visible scroll, smooth */
  [data-bk-pdp-tablist] {
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity !important;
  }
  [data-bk-pdp-tab] {
    scroll-snap-align: start !important;
    padding: 12px 14px !important;
    min-height: 44px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  CART + CHECKOUT — share [data-bk-page] root                         ║
   ║   The cart/checkout templates have their own @media for the layout  ║
   ║   grid; these rules just enforce form-input and font-size correctness║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* Form-row 2-col → 1-col inside checkout */
  [data-bk-page] [style*="grid-template-columns: 1fr 1fr; gap: 12px"] {
    grid-template-columns: 1fr !important;
  }
  /* Radio-card 3-col → 1-col inside checkout */
  [data-bk-page] [style*="grid-template-columns: 1fr 1fr 1fr; gap: 12px"] {
    grid-template-columns: 1fr !important;
  }
  /* Form inputs full-width on mobile */
  [data-bk-page] input[type="text"],
  [data-bk-page] input[type="email"],
  [data-bk-page] input[type="tel"],
  [data-bk-page] input[type="number"],
  [data-bk-page] select,
  [data-bk-page] textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* H1 cart/checkout shrink */
  [data-bk-page] > div > h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }
  /* Empty-cart heading display number */
  [data-bk-page] section[style*="padding: 80px 32px"] > div:first-child {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.1 !important;
  }
  /* Cart popular-grid 4-col → 2-col on tablet */
  [data-bk-popular-grid] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  /* Cart popular-grid 2-col on phone */
  [data-bk-popular-grid] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [data-bk-page] section[style*="padding: 80px 32px"] {
    padding: 48px 18px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  ACCOUNT PAGES — nav sidebar + content                               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* Page-level layout — 2-col → 1-col */
  [data-bk-account-layout] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Sidebar already unsticks via inline @media in account-nav.php; just shrink */
  [data-bk-account-nav] {
    position: static !important;
    margin-bottom: 8px !important;
  }
  /* Account page padding */
  [data-bk-account-page] {
    padding: 24px 20px 60px !important;
  }
  /* Form/grid rows 2-col → 1-col */
  [data-bk-account-page] [style*="grid-template-columns: 1fr 1fr"],
  [data-bk-account-page] [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  /* Form fields full-width */
  [data-bk-account-page] input[type="text"],
  [data-bk-account-page] input[type="email"],
  [data-bk-account-page] input[type="tel"],
  [data-bk-account-page] input[type="password"],
  [data-bk-account-page] input[type="date"],
  [data-bk-account-page] input[type="number"],
  [data-bk-account-page] select,
  [data-bk-account-page] textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Tables — give them horizontal scroll */
  [data-bk-account-page] table {
    min-width: 600px !important;
  }
  [data-bk-account-page] [data-bk-table-wrap] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Big numbers (bonus balance, etc) shrink */
  [data-bk-account-page] .display,
  [data-bk-account-page] h1 {
    font-size: clamp(28px, 7vw, 44px) !important;
  }
  /* Bonus huge number */
  [data-bk-bonus-balance] {
    font-size: clamp(40px, 9vw, 56px) !important;
  }
  /* Auth pages (login / register / forgot / reset / verify) */
  [data-bk-auth-page] {
    padding: 32px 20px 60px !important;
  }
  [data-bk-auth-page] [data-bk-auth-card] {
    padding: 28px 22px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PLUS LANDING PAGE  (/mitgliedschaft/)                               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* Hero clamp */
  [data-bk-plus-page] h1,
  [data-bk-plus-hero] h1 {
    font-size: clamp(32px, 8vw, 52px) !important;
  }
  /* All 2-col grids in plus-landing collapse */
  [data-bk-plus-page] [style*="grid-template-columns: 1.2fr 1fr"],
  [data-bk-plus-page] [style*="grid-template-columns: 0.8fr 1.2fr"],
  [data-bk-plus-page] [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  /* Member-testimonials 3-col → 1-col */
  [data-bk-plus-page] [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Slab padding shrinks */
  [data-bk-plus-page] section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [data-bk-plus-page] [style*="padding: 112px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PAGE TEMPLATES — Über uns, Marken, Großpackungen, Cookie, Legal     ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  [data-bk-page-template],
  [data-bk-about-page],
  [data-bk-marken-page],
  [data-bk-gross-page],
  [data-bk-cookie-page] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Generic 2-col / 3-col grids inside page templates → collapse */
  [data-bk-page-template] [style*="grid-template-columns: 1fr 1fr"],
  [data-bk-page-template] [style*="grid-template-columns: repeat(2"],
  [data-bk-about-page] [style*="grid-template-columns: 1fr 1fr"],
  [data-bk-about-page] [style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  [data-bk-marken-page] [style*="grid-template-columns: repeat(4"],
  [data-bk-marken-page] [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  /* Brand index grid → 2 columns on mobile (Phase A1.1).
     marken.php grid uses inline `grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))`
     which collapses to 1 col on narrow screens. Override to 2-col tiles. */
  [data-bk-marken-grid] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Legacy /marken/ sub-grid override (kept for safety) */
  [data-bk-marken-page] [style*="grid-template-columns: repeat(4"],
  [data-bk-marken-page] [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PRODUCT CARD IMAGES — site-wide (PLP, search, wishlist, etc)        ║
   ║  Forces object-fit: contain so tall bottles fit the 1:1 card without ║
   ║  cropping. Previously this rule lived inside _product-grid.php's     ║
   ║  inline <style> block, so search.php (which doesn't include that     ║
   ║  partial) inherited the legacy `object-fit: cover` from shop.css.    ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

.shop-card-img {
  background: #ffffff !important;
}
.shop-card-img img {
  object-fit: contain !important;
  padding: 16px !important;
  width: 100% !important;
  height: 100% !important;
  mix-blend-mode: normal !important;
}
.shop-card:hover .shop-card-img img {
  transform: none !important;
}
@media (max-width: 640px) {
  .shop-card-img img { padding: 12px !important; }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  TOUCH TARGETS — 44×44 minimum on mobile (Apple HIG)                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 900px) {
  /* All icon-only buttons in the header */
  [data-bk-header] button,
  [data-bk-header] a[aria-label] {
    min-width: 44px;
    min-height: 44px;
  }
  /* Footer social icons */
  [data-site-footer] a[aria-label] {
    min-width: 36px;
    min-height: 36px;
  }
  /* All buttons in main content */
  main button,
  main a[role="button"] {
    min-height: 40px;
  }
  /* Form inputs — at least 44px tall on mobile */
  main input[type="text"],
  main input[type="email"],
  main input[type="tel"],
  main input[type="number"],
  main input[type="password"],
  main input[type="date"],
  main select {
    min-height: 44px;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  GENERIC TYPE SCALE — fall back smaller on tiny screens              ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Avoid microscopic prices */
  .num.display {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PREVENT HORIZONTAL OVERFLOW — last-resort safety                    ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 900px) {
  main,
  [data-section],
  footer {
    max-width: 100vw;
    overflow-x: hidden;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PRODUCT CARDS — mobile typography                                   ║
   ║                                                                       ║
   ║  Desktop sizes (Fraunces 22px / 800, price 34px) are too thick for    ║
   ║  ~150-170px wide carousel cards (2 visible at ≤640px). Long German    ║
   ║  compound names like "Marmara Barber Bartöl Barber Beard Oil 30 ml"   ║
   ║  got truncated to "Marmara Barber…" — we shrink the type and bump     ║
   ║  the line-clamp so the full name reads in 3 lines max.               ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* ─── Mode A card (used by carousels + PDP cross-sell/you-might-like) ── */
  [data-bk-product-card] h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    min-height: 56px !important;        /* room for 3 lines instead of 2 */
    -webkit-line-clamp: 3 !important;
  }
  [data-bk-product-card] p {
    font-size: 12px !important;
    line-height: 1.4 !important;
    min-height: 0 !important;            /* hide reserved space on mobile */
    -webkit-line-clamp: 2 !important;
  }
  [data-bk-product-card] [class*="num"] {
    /* main price */
    font-size: 22px !important;
  }
  [data-bk-product-card] [class*="num"] + [class*="num"] {
    /* line-through old price (when sibling) */
    font-size: 13px !important;
  }
  [data-bk-product-card] button[data-add-to-cart] {
    height: 48px !important;
    font-size: 13px !important;
  }
  [data-bk-product-card] button[data-add-to-cart] svg {
    width: 13px !important;
    height: 13px !important;
  }
  /* Image-overlay meta (SKU + size on the photo + category) — smaller */
  [data-bk-product-card] [style*="opacity: 0.42"],
  [data-bk-product-card] [style*="opacity: 0.5"] {
    font-size: 9px !important;
  }

  /* ─── Mode B legacy .shop-card (used by /shop/ catalog grid + /search) ── */
  /* Existing override in _product-grid.php already set 16px — bump weight down */
  .shop-card-title {
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .shop-card-body {
    padding: 10px 4px !important;
  }
  .shop-card-brand {
    font-size: 10px !important;
  }
  .shop-card-btn {
    height: 44px !important;
    font-size: 12px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  SECTION HEADINGS — mobile type scale                                ║
   ║                                                                       ║
   ║  PDP/home use ".display" + h2 at 40px desktop. On mobile that pushes  ║
   ║  long German titles to 3+ lines and dominates the viewport. Scale     ║
   ║  to a more readable 26-28px so the section title is a banner, not    ║
   ║  the entire above-the-fold.                                          ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Generic h2 inside main content sections */
  main h2.display,
  main section h2[class*="display"] {
    font-size: 26px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }
  main h3.display,
  main section h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  /* "Wird oft zusammen gekauft" + "Sie könnten auch mögen" specifically — these
     sit above 2-card mobile carousels and 40px feels like a billboard. */
  main section[style*="border-top"] h2[class*="display"],
  main section[style*="bg-2"] h2[class*="display"] {
    font-size: 24px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PDP — mobile typography refinements                                 ║
   ║                                                                       ║
   ║  H1 already uses clamp(36-56px) which scales to 36px on mobile.       ║
   ║  Other text (eyebrow, italic description, tab titles, tab body) needs ║
   ║  tightening + the tabs themselves get touch-friendly sizing.         ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* PDP H1 — clamp's lower bound is fine at 36px, but ensure on REALLY narrow
     screens (≤375px iPhone SE) it doesn't overflow the column. */
  [data-bk-pdp] h1.display {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.05 !important;
  }
  /* Italic short-desc subtitle below H1 */
  [data-bk-pdp] h1.display + p {
    font-size: 15px !important;
  }
  /* Tab buttons — bigger touch target, slightly smaller text */
  [data-bk-pdp-tab] {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
  }
  /* Tab panel body content */
  [data-bk-pdp-tabpanel] {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  [data-bk-pdp-tabpanel] h3,
  [data-bk-pdp-tabpanel] h4 {
    font-size: 15px !important;
  }
  /* Plus toggle card on PDP — was Fraunces 26px on Plus-price line, scale down */
  [data-bk-pdp-plus-toggle] {
    padding: 14px 16px 12px 20px !important;
  }
  [data-bk-pdp-plus-toggle] .num,
  [data-bk-pdp-plus-toggle] [class*="num"] {
    font-size: 22px !important;
  }
  /* Stock urgency bar — smaller numbers */
  [data-bk-pdp] [data-bk-pdp-stock-urgency] {
    font-size: 12.5px !important;
  }
  /* Cross-sell + you-might-like SECTION heads — already covered above */
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  CART / CHECKOUT — mobile typography                                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Cart line product names */
  [data-bk-cart-item] h3,
  [data-bk-cart-item] [class*="cart-item-name"] {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
  /* Cart prices */
  [data-bk-cart-item] .num,
  [data-bk-cart-item] [class*="num"] {
    font-size: 16px !important;
  }
  /* Cart summary totals */
  [data-bk-cart-summary] [class*="total"] {
    font-size: 18px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOME CAROUSELS (Bestsellers / Neu im Atelier / Routinen)            ║
   ║                                                                       ║
   ║  These three home-page carousels build their own product cards       ║
   ║  inline (don't use product-card.php). Same scaling rules as above:   ║
   ║  shrink h3 + price + section heading on mobile so cards don't blow   ║
   ║  up to 50vh each.                                                    ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Section title (h2) — scale to readable mobile size */
  section[data-section="bestsellers"]    h2,
  section[data-section="neu-im-atelier"] h2,
  section[data-section="routinen"]       h2,
  section[data-section="products"]       h2,
  section[data-section="brands-marquee"] h2,
  section[data-section="journal"]        h2,
  section[data-section="reviews"]        h2 {
    font-size: 28px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
  }

  /* Per-card h3 inside carousels — smaller, lighter weight, 3 lines */
  section[data-section="bestsellers"]    h3,
  section[data-section="neu-im-atelier"] h3,
  section[data-section="routinen"]       h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    min-height: 56px !important;
    -webkit-line-clamp: 3 !important;
  }

  /* Per-card price — scale down from 34px to ~22px */
  section[data-section="bestsellers"]    [style*="font-size: 34px"],
  section[data-section="neu-im-atelier"] [style*="font-size: 34px"],
  section[data-section="routinen"]       [style*="font-size: 34px"] {
    font-size: 22px !important;
  }

  /* Carousel image-card height — reduce so each card fits 2-in-row */
  section[data-section="bestsellers"]    [style*="height: 340px"],
  section[data-section="neu-im-atelier"] [style*="height: 360px"],
  section[data-section="routinen"]       [style*="height: 360px"] {
    height: 220px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  FOOTER — slight mobile shrink for newsletter title + columns        ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  [data-site-footer] h3 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  [data-site-footer] h4,
  [data-site-footer] [class*="footer-col"] strong {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }
  [data-site-footer] a,
  [data-site-footer] li {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  HOME-PAGE SLIDERS on MOBILE — 2 cards per row, edge-to-edge          ║
   ║  Affects: bestsellers, neu-im-atelier, routinen + any [data-bk-scroller] ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Scroller containers — full-bleed, no left/right padding constraint */
  section [data-bk-scroller],
  section [data-bd-bestsellers],
  section [data-bd-routinen] {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -16px !important;
    padding-left: 0 !important;
  }

  /* Inner flex wrapper — small gutter, padding from screen edge */
  section [data-bk-scroller] > div,
  section [data-bd-bestsellers] > div,
  section [data-bd-routinen] > div {
    gap: 12px !important;
    padding: 0 16px !important;
    width: max-content;
  }

  /* Card width — fit 2 per viewport, with peek of next on the right */
  section [data-bk-scroller] > div > div,
  section [data-bd-bestsellers] > div > div,
  section [data-bd-routinen] > div > div {
    width: calc((100vw - 44px) / 2) !important;
    min-width: 160px !important;
    max-width: 220px !important;
    flex-shrink: 0 !important;
  }

  /* Card thumbs — shrink to match smaller cards */
  section [data-bk-scroller] > div > div [style*="height: 360px"],
  section [data-bd-bestsellers] > div > div [style*="height: 360px"],
  section [data-bd-routinen] > div > div [style*="height: 360px"] {
    height: 200px !important;
  }
  section [data-bk-scroller] > div > div [style*="height: 100px"] {
    height: 80px !important;
  }

  /* Card title — smaller on mobile */
  section [data-bk-scroller] h3,
  section [data-bd-bestsellers] h3,
  section [data-bd-routinen] h3 {
    font-size: 15px !important;
    min-height: 40px !important;
    -webkit-line-clamp: 2 !important;
  }
  /* Card price (the huge 34px Fraunces line) — shrink */
  section [data-bk-scroller] [style*="font-size: 34px"],
  section [data-bd-bestsellers] [style*="font-size: 34px"],
  section [data-bd-routinen] [style*="font-size: 34px"] {
    font-size: 22px !important;
  }
  /* "In den Korb" button on card — shorter on mobile */
  section [data-bk-scroller] button,
  section [data-bd-bestsellers] button,
  section [data-bd-routinen] button {
    height: 44px !important;
    font-size: 13px !important;
  }
  section [data-bk-scroller] button svg,
  section [data-bd-bestsellers] button svg,
  section [data-bd-routinen] button svg {
    width: 13px !important;
    height: 13px !important;
  }
  /* "N° 99" label — smaller */
  section [data-bd-routinen] [style*="font-size: 80px"] {
    font-size: 40px !important;
  }

  /* Slider section header — tighter padding */
  section[data-section="neu-im-atelier"] > div:first-child,
  section[data-section="bestsellers"] > div:first-child,
  section[data-section="routinen"] > div:first-child {
    padding: 0 16px 16px !important;
  }
  section[data-section="neu-im-atelier"] h2,
  section[data-section="bestsellers"] h2,
  section[data-section="routinen"] h2 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  PDP CROSS-SELL / YOU-MIGHT-LIKE — 2 cards on mobile                  ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  [data-bk-crosssell-grid],
  [data-bk-ymlike-grid] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    overflow: visible !important;
    padding: 0 16px !important;
    margin: 0 !important;
  }
  [data-bk-crosssell-grid] > *,
  [data-bk-ymlike-grid] > * {
    flex: none !important;
    width: 100% !important;
    scroll-snap-align: none !important;
  }
  [data-bk-crosssell-grid] h3,
  [data-bk-ymlike-grid] h3 {
    font-size: 14px !important;
    -webkit-line-clamp: 2 !important;
  }
  [data-bk-crosssell-grid] [style*="font-size: 34px"],
  [data-bk-ymlike-grid] [style*="font-size: 34px"] {
    font-size: 20px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  /shop/ PLP — 2 cards on mobile                                       ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  [data-bk-product-grid],
  .shop-products,
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
    padding: 0 12px !important;
  }
  [data-bk-product-grid] h3,
  .shop-products h3 {
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    min-height: 36px !important;
  }
  [data-bk-product-grid] [style*="font-size: 22px"] {
    font-size: 16px !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  Hide slider arrow buttons on mobile — swipe handles it               ║
   ║  (Arrows have 38x38 fixed and onclick scrollBy 632px — not mobile-friendly) ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  section[data-section="neu-im-atelier"] [aria-label*="Zurück"],
  section[data-section="neu-im-atelier"] [aria-label*="Weiter"],
  section[data-section="bestsellers"] [aria-label*="Zurück"],
  section[data-section="bestsellers"] [aria-label*="Weiter"],
  section[data-section="routinen"] [aria-label*="Zurück"],
  section[data-section="routinen"] [aria-label*="Weiter"] {
    display: none !important;
  }
}


/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║  MOBILE — product names allow 3 lines, fix oversized cart buttons    ║
   ║  Issue: long names like "Marmara Barber Pomade Aqua Wax Royal..."     ║
   ║  truncated at 2 lines; cross-sell cards on PDP stretched to align,    ║
   ║  pushing "In den Korb" buttons into huge black boxes.                 ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */

@media (max-width: 640px) {
  /* Allow 3 lines for product names everywhere on mobile so 4+ word
     German product titles fit without truncation. */
  [data-bk-product-card] h3,
  [data-bk-crosssell-grid] h3,
  [data-bk-ymlike-grid] h3,
  section [data-bk-scroller] h3,
  section [data-bd-bestsellers] h3,
  section [data-bd-routinen] h3,
  .shop-card-title {
    -webkit-line-clamp: 3 !important;
    line-clamp: 3 !important;
    min-height: 0 !important;     /* let real content set height */
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  /* Cross-sell / you-might-like cards: stop them from stretching to
     match the tallest sibling — let each card be its natural size with
     a fixed-height button at the bottom. */
  [data-bk-crosssell-grid] > *,
  [data-bk-ymlike-grid] > * {
    align-self: start !important;
    height: auto !important;
  }
  /* Hard cap the "In den Korb" button regardless of card height */
  [data-bk-crosssell-grid] button,
  [data-bk-ymlike-grid] button,
  [data-bk-crosssell-grid] [data-bk-product-card] button,
  [data-bk-ymlike-grid] [data-bk-product-card] button {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    font-size: 13px !important;
    padding: 0 !important;
    flex: 0 0 48px !important;
  }
}