/* ============================================================================
 * KTO — global polish layer  (impeccable flagship pass, 2026-05)
 * ----------------------------------------------------------------------------
 * Additive, identity-preserving refinements loaded on EVERY page (the site has
 * no universal base stylesheet, so this is linked per page as the LAST sheet).
 *
 * DESIGN CONSTRAINT: only set properties pages don't already define, so load
 * order can never break an existing layout. No colors, fonts, spacing, or
 * layout are overridden — the committed KTO identity is preserved. Tokens
 * (--kto-blue, --black) already exist on every page; we fall back inline.
 * ========================================================================== */

:root {
  /* Premium exponential ease-out curves, available to any page that opts in */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
}

/* — Typography: even heading line lengths, fewer orphans in long prose.
     `text-wrap` is new and unset by existing pages, so this is purely additive. */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote, figcaption { text-wrap: pretty; }

/* — Branded text selection (most pages never set ::selection). */
::selection { background: var(--kto-blue, #2b8fd4); color: #fff; }
::-moz-selection { background: var(--kto-blue, #2b8fd4); color: #fff; }

/* — Accessible, on-brand keyboard focus ring. Shows only for keyboard users
     (:focus-visible), so it never disturbs mouse/touch interaction. Guarantees
     a visible focus indicator even on pages that stripped :focus outlines. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kto-blue, #2b8fd4);
  outline-offset: 3px;
  border-radius: 3px;
}

/* — Anchor / in-page links shouldn't land hidden behind the sticky header. */
html { scroll-padding-top: 90px; }

/* — Tabular figures for prices so digits align (additive; scoped to price/total
     classes the catalog already uses, never global body text). */
.price-main, .bs-price, .lw-summary-total-price, .price-ttc { font-variant-numeric: tabular-nums; }

/* — Delivery-date estimate reassurance (product pages + cart). */
.kto-delivery-est { margin: 14px 16px 0; padding: 10px 14px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; color: #15803d; font-size: 13.5px; font-weight: 600; line-height: 1.45; }

/* — Cross-sell "Vous aimerez aussi" on product pages. */
.kto-xsell { max-width: 1100px; margin: 8px auto 0; padding: 40px 16px 8px; }
.kto-xsell h2 { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.3px; margin: 0 0 18px; text-align: center; }
.kto-xsell-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.kto-xsell-card { display: block; border: 1px solid #e8e8e8; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; background: #fff; transition: transform .2s var(--ease-out-quint, ease), box-shadow .2s ease; }
.kto-xsell-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.08); }
.kto-xsell-img { aspect-ratio: 4/3; background: #f5f5f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kto-xsell-img img { width: 100%; height: 100%; object-fit: contain; }
.kto-xsell-info { padding: 10px 12px 12px; }
.kto-xsell-brand { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.kto-xsell-model { font-size: 11px; color: #737373; margin: 2px 0 6px; min-height: 14px; }
.kto-xsell-price { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--kto-blue, #2b8fd4); }

/* ============================================================================
 * KTO — site-wide UI/UX refinement pass  (ui-ux-pro-max audit, 2026-05-30)
 * ----------------------------------------------------------------------------
 * Loaded on every page as the last stylesheet. Each rule below targets a gap
 * that was VERIFIED in the live render (not guessed), and is scoped so it can
 * only improve — never break — an existing layout. Where a rule deliberately
 * overrides a page value (only the iOS-zoom fix does), it is flagged inline.
 * Dimensions: touch/mobile · accessibility · motion/polish · conversion.
 * ========================================================================== */

/* --- 1. TOUCH FEEDBACK: kill the default grey tap-flash on mobile -----------
 * Verified: body had -webkit-tap-highlight-color rgba(0,0,0,.18) — a muddy grey
 * flash on every tap. We suppress it and supply our own :active feedback (§4),
 * which reads as far more premium on touch devices. */
a, button, [role="button"], input, label, select, textarea, summary,
.btn, [class*="btn-"], [class*="-btn"] {
  -webkit-tap-highlight-color: transparent;
}

/* --- 2. TAP LATENCY: remove the ~300ms click delay on interactive controls --
 * Verified: body touch-action was `auto`. `manipulation` keeps scroll + pinch
 * but drops the legacy double-tap-zoom wait, so taps feel instant. Scoped to
 * controls so it never affects double-tap-zoom on content/images. */
a, button, [role="button"], summary, label,
input[type="button"], input[type="submit"], input[type="reset"],
.btn, [class*="btn-"], [class*="-btn"], [class*="cta" i] {
  touch-action: manipulation;
}

/* --- 3. TOUCH TARGETS: guarantee >=44px on small header/cart controls -------
 * Verified: header icon buttons render 38x38 and the hamburger 38x31 — under
 * the 44px WCAG/Apple minimum. Enlarged ONLY on coarse (touch) pointers so the
 * desktop mouse layout is untouched. The header has ample vertical room. */
@media (pointer: coarse), (max-width: 768px) {
  .icon-btn, .hamburger, .header-icons button, .header-icons a,
  [class*="menu-toggle"], [class*="qty-btn"], [class*="quantity"] button,
  [class*="stepper"] button {
    min-width: 44px;
    min-height: 44px;
  }
  .icon-btn, .hamburger { display: flex; align-items: center; justify-content: center; }
}

/* --- 4. PRESS FEEDBACK: subtle tactile scale on primary CTAs ----------------
 * Adds a 0.97 press-in on the buttons that already carry `transition: all`, so
 * the motion is free and on-curve. Scoped to a curated CTA allow-list to avoid
 * scaling toggles/tabs. Reduced-motion users keep an instant (still useful)
 * press state via the global reduced-motion rule in kto-shared.css. */
.btn-primary:active, .btn-cta:active, .btn-promo:active, .btn-outline:active,
.btn-cart-dark:active, .sticky-cta-btn:active, .added-cart-btn:active,
.newsletter-form button:active,
[class*="add-cart"]:active, [class*="add-to-cart"]:active,
[class*="checkout"]:active, [class*="commander"]:active {
  transform: scale(0.97);
}

/* --- 5. DISABLED STATE CLARITY ----------------------------------------------
 * Verified inconsistent: some disabled controls still showed the default
 * cursor. A clear `not-allowed` cursor + dimmed affordance reads as disabled
 * everywhere (kept gentle so a page's own disabled styling still shows). */
button:disabled, [disabled], [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* --- 6. BRANDED SCROLLBAR (desktop only) ------------------------------------
 * Replaces the default OS scrollbar with a slim, on-brand one. Pointer:fine so
 * it never touches mobile overlay scrollbars. Purely cosmetic. */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: rgba(43,143,212,0.45) transparent; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(43,143,212,0.40);
    border-radius: 999px;
    border: 3px solid transparent;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(43,143,212,0.65); background-clip: content-box; }
}

/* --- 7. iOS AUTO-ZOOM FIX (DELIBERATE OVERRIDE) -----------------------------
 * Verified: form inputs render 13.3–14px. iOS Safari auto-zooms the viewport
 * when a focused field is <16px, which is jarring on the contact / checkout /
 * search / newsletter forms. This is the ONLY rule here that intentionally
 * overrides a page value; 16px is the standard, well-tested fix. Excludes
 * checkbox/radio/range (no text, no zoom). Mobile widths only. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  select, textarea {
    /* !important is the canonical fix here: it must beat ID-level inline rules
       (e.g. #noteTextarea, #lccSph/Cyl/Axe) that ship inside injected JS-CSS.
       16px is a FLOOR applied only <768px, so it can never shrink a design. */
    font-size: 16px !important;
  }
}

/* --- 8. ANCHOR LANDING: keep deep-linked sections clear of the sticky header -
 * Complements the existing scroll-padding-top with per-element scroll-margin so
 * id-targeted headings/sections never hide under the fixed nav. Additive. */
:target { scroll-margin-top: 100px; }
[id] { scroll-margin-top: 90px; }

/* --- 9. MEDIA POLISH --------------------------------------------------------
 * Stop the iOS long-press image callout / accidental drag-ghost on product
 * imagery, and smooth image rendering. Additive (these props are unset). */
img { -webkit-user-drag: none; -webkit-touch-callout: none; }

/* ============================================================================
 * §10 — MOBILE HARDENING  (focus pass, 2026-05-30)
 * ----------------------------------------------------------------------------
 * Real mobile best-practice gaps found across home / category / product / cart.
 * All additive or mobile-scoped; verified not to alter desktop. The floating
 * WhatsApp / back-to-top / language-switcher overlap was fixed at the source
 * (kto-common.js · whatsapp-cta.js · lang-switcher.js) with safe-area insets.
 * ========================================================================== */

/* 10.1 — Stop iOS from auto-inflating font sizes on orientation change.
 * Without this, rotating an iPhone to landscape balloons body text unpredictably
 * (a classic, invisible-on-desktop mobile bug). Universally safe. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 10.2 — Momentum (inertial) scrolling for the horizontal carousels/scrollers,
 * so swipes glide instead of stopping dead. Only affects already-scrollable
 * tracks; additive. */
.bs-carousel-track, .brands-scroll, .marquee, .marquee-track,
[class*="carousel-track"], [class*="-scroller"], .kto-xsell-grid,
[class*="thumbs"], [class*="gallery-strip"] {
  -webkit-overflow-scrolling: touch;
}

/* 10.3 — Prevent long unbroken strings (URLs, SKUs, model refs, emails) from
 * forcing horizontal scroll on narrow screens. Scoped to text containers so it
 * never affects layout boxes. */
p, li, h1, h2, h3, h4, td, dd, blockquote, figcaption,
.product-name, [class*="product-title"], [class*="-desc"], .article-body {
  overflow-wrap: break-word;
}

/* 10.4 — Comfortable tap targets for dense link lists on mobile (footer + menu).
 * Uses inline-flex + min-height so text stays put but the hit area reaches the
 * 44px guideline; mobile-scoped, desktop untouched. */
@media (max-width: 768px) {
  .footer-links a, .footer-bottom a, .mobile-nav a, .dropdown-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  /* Footer link rows read better with a hair more breathing room on phones. */
  .footer-links a { padding-block: 2px; }
}

/* 10.5 — (Sticky-bar safe-area is handled precisely in product.html /
 * product-lentille.html where the exact bar class + padding are known — a
 * wildcard override here would have clobbered the bars' own padding.) */

/* 10.6 — Disable text selection on tappable chrome (nav, buttons, badges) so a
 * long-press drags nothing and feels native; keep it ON for real content. */
.nav-link, .dropdown-link, .btn, [class*="btn-"], [class*="-btn"],
.product-badge, .hamburger, .icon-btn, .footer-heading {
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================================
 * §11 — ICONOGRAPHY  (emoji → SVG migration, 2026-05-30)
 * ----------------------------------------------------------------------------
 * The footer contact emojis (📍 📞 🕐) and various decorative emojis were
 * replaced with inline stroke SVGs (currentColor) for a consistent, on-brand,
 * cross-platform look. These rules size/align the SVGs wherever they land.
 * ========================================================================== */
.footer-contact-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--kto-blue, #2b8fd4);
}
.footer-contact-item .icon svg { width: 15px; height: 15px; display: block; }

/* Generic inline icon SVGs introduced by the emoji migration (perks, mutuelle,
 * ordonnance, cart delivery modes, etc.) inherit text color and stay crisp. */
.kto-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; vertical-align: -0.125em; }
.kto-ico svg { display: block; width: 1em; height: 1em; }

/* Blog/article cover topic SVGs (ktoTopicSvg fallback when no coverSvg image):
 * size them consistently so the icon sits centered in the card thumbnail. */
.blog-featured-img svg,
.blog-article-img svg,
.article-cover-inner svg,
.related-card-img svg { width: 56px; height: 56px; }

/* ============================================================================
 * §12 — BUTTON CONSISTENCY  (font + weight uniformity, 2026-05-30)
 * ----------------------------------------------------------------------------
 * Audit found buttons split across two fonts (Montserrat vs an outlier in
 * DM Sans on .lw-note-btn) and three weights (500/600/700). This unifies every
 * button to the brand button font (Montserrat) and one weight (600 SemiBold —
 * the median, so each button shifts by at most one step). Loads last, so no
 * !important needed to win over single-class page rules. Excludes the hero
 * pills, which are part of the bespoke hero component. */
.btn, [class*="btn-"], [class*="-btn"], .added-cart-btn, .sticky-cta-btn {
  font-family: var(--font-head, 'Montserrat', sans-serif);
  font-weight: 600;
}