/*
 * Logidirect — global responsive overrides (mobile-first fixes).
 *
 * SHARED, APPEND-ONLY vehicle. Enqueued unconditionally on the front end by
 * inc/responsive.php (handle: ld-responsive). Pure CSS overrides against the
 * Flatsome theme + UX-Builder layouts, which live in the WP DB and cannot be
 * edited from this repo. Each plan appends ONE clearly-commented section.
 *
 * Flatsome breakpoints: small/phone = max-width:549px; medium/tablet = 550–849px.
 * Brand tokens: blue #2ab6f1, text #404141, success #7a9c59, alert #b20000.
 *
 * Sections:
 *   [042] Brand-logo carousel — cap logo image height on phones.
 *   (043/044/045 append below.)
 */

/* ==========================================================================
   [042] Brand-logo carousel ("Onze betrouwbare merken" / "Dit zijn onze merken")
   Problem: on phones the logo strip briefly renders each logo ~375x375 (a
   full-width square) and the section balloons to ~553px tall.
   Root cause (verified live): the Flatsome [ux_slider slide_width="200px"]
   flickity init is LAZY — it only runs once the strip scrolls into view. Before
   init the cells are full-width (375px square flash); after init they are ~186px.
   Either way the woocommerce_thumbnail logo (300x300, width:100%) is bigger than
   we want on a phone. Fix: cap the logo IMAGE height to a clean size; the cell is
   content-height pre-init and the image is centred in the ~186px cell post-init.
   Scoped to size-woocommerce_thumbnail inside a .slider .img = the logo block
   ONLY (single-product gallery uses size-woocommerce_single, product cards use
   .box-image), so neither is touched. Phone only; tablet (>=550px)+desktop same.
   ========================================================================== */
@media (max-width: 549px) {
	.slider-wrapper .slider .img img.size-woocommerce_thumbnail {
		max-height: 90px !important;
		width: auto !important;
		margin-left: auto;
		margin-right: auto;
		object-fit: contain;
	}
}

/* =====================================================================
 * PLAN 043 — Mobile font legibility (raise sub-12px text @ ≤549px)
 * Offenders measured @390px: banner eyebrow 9.5px, card price 9.4px,
 * card name 10.9px. Floor them so no text node computes < 12px.
 * Phone breakpoint only — desktop typography is intentionally untouched.
 * Escape hatch: if a price/name bump makes a card title wrap to 3+ lines
 * or overflow its card @390px, dial that rule back to 12px and note it
 * in CHANGELOG.
 * ===================================================================== */
@media (max-width: 549px) {
  /* Flatsome banner eyebrow ("COMPACTE LABELPRINTERS") — was 9.5px */
  .banner h6 {
    font-size: 12px;
  }

  /* WooCommerce product-card price ("€…") in .product-small cards
     (grid + related-products carousel) — was 9.4px */
  .product-small .price,
  .product-small .price .amount,
  .product-small .amount {
    font-size: 13px;
  }

  /* WooCommerce product-card title ("ZEBRA ZD421") — was 10.9px */
  .product-small .box-text .name,
  .product-small .box-text .name a,
  .product-small .title-wrapper {
    font-size: 13px;
  }
}

/* ==========================================================================
   Plan 044 — Mobile shop/category product grid: 2 columns on phones
   Finding F3. Live evidence @390px on /printkoppen/: gridCols was 1, so 18
   cards stacked vertically. Flatsome marks the phone row with
   `.products.small-columns-1`, which forces each child `.col` to full width.
   We override width only (NOT margins) and keep box-sizing:border-box so the
   theme's padding-based `.col` gutter stays as the gap between the two cards.
   PRIMARY FIX is the Flatsome Customizer "mobile columns = 2" setting (operator
   action, not in this repo) — see this plan's Maintenance notes. This CSS is
   the deployable fallback.
   Scope: @media (max-width:549px) only — tablet (medium-columns-2) and desktop
   are already correct and must not change.
   ========================================================================== */
@media (max-width: 549px) {
	/* Two product cards per row on phones. The `.product-small` qualifier keeps
	   this limited to the WooCommerce product loop and not other Flatsome rows
	   that happen to use small-columns-1. */
	.products.row.small-columns-1 > .col.product-small,
	.products.row.small-columns-1 > .product-small.col {
		width: 50%;
		max-width: 50%;
		flex: 0 0 50%;
		box-sizing: border-box;
	}
}

/* === Plan 045: hero banner button tap-size (homepage, phone only) === */
/*
 * The first homepage hero banner's CTA renders at ~28px tall while the others
 * are ~73px (measured @390px). Give every banner button a consistent, tappable
 * size: min-height 44px + symmetric vertical padding, vertically centred label.
 * Scoped to `.banner .button` so only Flatsome banner-block buttons are hit —
 * NOT site-wide buttons (add-to-cart, header, footer live outside any .banner).
 * Geometry only; colours/typography untouched. Desktop/tablet unaffected.
 */
@media (max-width:549px) {
  /* Tap-size ONLY. Keep the theme's default inline-block display so long labels
     still WRAP inside the banner. (display:inline-flex made e.g. "Gebruik onze
     ribbon selector" stay on one line and overflow the banner → the container
     became horizontally scrollable. Reported live 2026-06-14.) */
  .banner .button {
    min-height: 44px;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    line-height: 1.2;
    max-width: 100%;
    white-space: normal;
  }
}