/**
 * ================================================================
 * FLORAFAL — MASTER MOBILE RESPONSIVE FIX
 * File: public/css/mobile-fix.css
 * ================================================================
 */

/* ── Hero banner <picture> wrapper — must behave like the img it wraps ── */
.hero-slide-link picture { display: block; width: 100%; height: 100%; }

/* ── Hero fallback slide colors — replace dull navy/maroon with on-brand florafal pink/gold ── */
.hero-css-slide--1 { background: linear-gradient(135deg,#6e1158 0%,#a0148c 55%,#c9369c 100%) !important; }
.hero-css-slide--2 { background: linear-gradient(135deg,#7a0e6e 0%,#a0148c 50%,#c8a96e 100%) !important; }
.hero-css-slide--3 { background: linear-gradient(135deg,#5c1a4e 0%,#a0148c 45%,#e8627a 100%) !important; }


/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; max-width: 100vw; }
img { max-width: 100%; height: auto; }

/* ── TYPOGRAPHY SCALE ── */
@media(max-width:640px){
  h1 { font-size: clamp(22px, 6vw, 36px) !important; }
  h2 { font-size: clamp(18px, 5vw, 28px) !important; }
  .section-title { font-size: clamp(18px, 5vw, 26px) !important; }
}

/* ────────────────────────────────────────
   ANNOUNCEMENT BAR
──────────────────────────────────────── */
@media(max-width:640px){
  .announcement-bar { font-size:11px !important; padding:6px 12px !important; }
}

/* ────────────────────────────────────────
   DELIVERY-LOCATION BAR — hidden for now.
   This element (#deliveryBarWrap) has no CSS styling anywhere in the
   codebase (florafal.min.css / additions / performance) — it was an
   unfinished feature that renders as plain unstyled text and was
   visually bleeding into the mobile menu drawer. Hiding it until it's
   properly designed. Remove this rule once it's ready to ship.
──────────────────────────────────────── */
#deliveryBarWrap { display: none !important; }

/* Refined tap/focus ring for round header icon buttons — keeps
   accessibility (visible focus) without looking like a stuck glitch */
.header-icon-btn:focus-visible, .mobile-menu-btn:focus-visible, .location-btn:focus-visible {
  outline: 2px solid #a0148c !important;
  outline-offset: 1px !important;
  border-radius: 999px !important;
}

/* ────────────────────────────────────────
   HEADER
──────────────────────────────────────── */
/* Mobile-only search icon + hamburger must never show on desktop —
   guard against it appearing alongside the full desktop search bar
   ("double search" bug). */
@media(min-width:1024px){
  .search-toggle-mobile, .mobile-menu-btn { display: none !important; }
}

/* ────────────────────────────────────────
   HEADER — visual polish (brand gradient accent,
   refined pill + icon styling)
──────────────────────────────────────── */
.florafal-header {
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(160,20,140,.08), 0 2px 12px rgba(0,0,0,.04) !important;
}
.florafal-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #a0148c 0%, #e8627a 50%, #c8a96e 100%);
  opacity: .55;
}
.florafal-header.header-scrolled {
  box-shadow: 0 1px 0 rgba(160,20,140,.12), 0 6px 24px rgba(0,0,0,.08) !important;
}
.location-btn {
  background: linear-gradient(135deg, #fff6fb 0%, #fff 100%) !important;
  border-color: #f0d3e6 !important;
}
.location-btn:hover, .location-btn:active {
  background: #fff0f7 !important;
  border-color: #e8627a !important;
}
.header-icon-btn {
  transition: transform .15s ease, background .15s ease, color .15s ease !important;
}
.header-icon-btn:active {
  transform: scale(.9);
  background: #fdf0f8 !important;
  color: #a0148c !important;
}
.mobile-menu-btn:active span { background: #a0148c !important; }
.logo-img { filter: drop-shadow(0 1px 1px rgba(0,0,0,.04)); }

@media(max-width:767px){
  /* NOTE: previous rules here targeted .header-inner / .site-logo /
     .header-icons — none of which exist in the actual markup
     (real classes are .header-container / .logo-img / .header-right).
     Because of that mismatch, the header never actually got compact
     on mobile, so its content (hamburger + search + logo + Deliver-To
     pill + wishlist + cart + account icon) overflowed past 375px —
     and our own overflow-x:hidden safety net then silently clipped
     whatever ran off the right edge (the account/login icon). */
  .header-container { padding:0 8px !important; gap:6px !important; }
  .mobile-menu-btn { width:34px !important; height:34px !important; padding:8px !important; }
  .logo-img { max-width:80px !important; height:34px !important; }
  .header-icons { gap:4px !important; }
  .header-icon-btn { width:34px !important; height:34px !important; font-size:14px !important; }
  .location-btn { max-width:88px !important; font-size:11px !important; padding:5px 8px !important; gap:4px !important; }
  .location-btn-text { max-width:44px !important; }
}
@media(max-width:370px){
  .header-icon-btn { width:30px !important; height:30px !important; font-size:12px !important; }
  .location-btn { max-width:64px !important; padding:4px 5px !important; }
  .location-btn-text { max-width:24px !important; }
  .logo-img { max-width:68px !important; }
  .cart-count-badge { width:16px !important; height:16px !important; font-size:9px !important; top:-4px !important; right:-4px !important; }
}

/* ────────────────────────────────────────
   NAV / MEGA MENU
──────────────────────────────────────── */
@media(max-width:1023px){
  .main-nav { display:none !important; }
  .hamburger-btn { display:flex !important; }
  .mobile-drawer { max-width:320px !important; }
}

/* ────────────────────────────────────────
   MOBILE DRAWER — design polish
   Previously the drawer's own dark "sidebar-header" (duplicate logo
   + close button) sat at top:0, directly UNDER the real site header
   (which has a higher effective stacking position here), so it was
   invisible and the drawer content looked like it started mid-way
   with the pink Login button awkwardly at the very top edge. Fix:
   start the drawer right below the real header/ticker (where it was
   already effectively appearing) and drop the now-redundant internal
   header entirely — the hamburger button already opens/closes it.
──────────────────────────────────────── */
@media(max-width:1023px){
  .mobile-sidebar {
    background: #fff !important;
    width: 300px !important;
    box-shadow: 4px 0 24px rgba(0,0,0,.18) !important;
    border-right: 1px solid rgba(0,0,0,.04);
    top: calc(var(--h-ticker) + var(--h-header)) !important;
    height: auto !important;
    border-radius: 0 12px 0 0;
  }
  .sidebar-header,.sidebar-auth,.sidebar-user,.sidebar-nav,.sidebar-nav a,
  .sidebar-section-title,.sidebar-logout { background-color: #fff; }
  body.no-ticker .mobile-sidebar { top: var(--h-header) !important; }
  .sidebar-header { display: none !important; }
  .sidebar-auth { padding: 18px 16px 14px !important; }
  .sidebar-login-btn {
    border-radius: 10px !important;
    box-shadow: 0 3px 12px rgba(160,20,140,.25) !important;
  }
  .sidebar-user {
    background: linear-gradient(135deg, #fdf0f8 0%, #fff 100%) !important;
    border-bottom: 1px solid #f0d3e6 !important;
  }
  .sidebar-nav a, .sidebar-logout {
    transition: background .15s ease, padding-left .15s ease;
  }
  .sidebar-nav a:active, .sidebar-nav a:hover {
    background: #fdf6fa;
    padding-left: 20px;
  }
  .sidebar-divider { background: #f7ecf4 !important; }
  .sidebar-section-title { color: #a0148c !important; opacity: .8; }
}

/* ────────────────────────────────────────
   MOBILE MENU DRAWER — ensure the dark scrim
   always dims the page behind it, and sits
   above everything including the fixed header.
──────────────────────────────────────── */
.mobile-overlay.show {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 390 !important;
}
.mobile-sidebar.open { z-index: 400 !important; }

/* ────────────────────────────────────────
   FIXED-HEADER CLEARANCE — mobile
   The header's rendered height can vary slightly by device (font
   rendering, wrapping of the "Deliver To" pill, icon sizing), while
   the page's top padding is calculated from fixed CSS variables.
   A small safety buffer guarantees page titles/banners are never
   partially hidden under the fixed ticker+header, sitewide.
──────────────────────────────────────── */
@media(max-width:767px){
  body.florafal-body:not(.no-ticker) { padding-top: 43px !important; }
  body.florafal-body.no-ticker       { padding-top: 7px !important; }

  /* Category/listing hero banner: extra top padding so the H1 title
     always clears the fixed header, even on the tightest devices. */
  .category-hero-banner { padding-top: 16px !important; }
}

/* ────────────────────────────────────────
   HERO SECTION — mobile fixes
──────────────────────────────────────── */
@media(max-width:767px){
  .hero-css-slide { height: 460px !important; min-height: 460px !important; }
  .hero-css-content h2 { font-size: 26px !important; }
  .hero-css-content p  { font-size: 11px !important; }
  .hero-css-btn { padding: 11px 26px !important; font-size: 11px !important; }
  .hero-css-tag { font-size: 10px !important; padding: 4px 12px !important; }
}
@media(max-width:480px){
  .hero-css-slide { height: 420px !important; min-height: 420px !important; }
  .hero-css-content { padding: 28px 20px !important; }
  .hero-css-content h2 { font-size: 22px !important; }
  .hero-swiper { height: 420px !important; }
  .hero-img { height: 420px !important; }
}

/* ────────────────────────────────────────
   COLLECTION / HERO / LISTING BANNER — mobile height fix
   Uses the 768×400 ratio recommended on the banner upload form,
   so images aren't over-zoomed/cropped when no mobile image is set.
──────────────────────────────────────── */
@media(max-width:767px){
  .hero-swiper { height: 460px !important; aspect-ratio: unset !important; }
  .hero-img { height: 460px !important; aspect-ratio: unset !important; object-fit: cover !important; object-position: center center !important; }
  .collection-banner-img { height: 420px !important; }
  .collection-banner-overlay { padding: 0 24px !important; }
  .collection-title { font-size: 26px !important; }
  .collection-subtitle { font-size: 14px !important; }
  .listing-banner img { max-height: 240px !important; height: 240px !important; }
  .dual-collection-item img { height: 280px !important; }
  .mid-banner-img { max-height: 240px !important; }
}
@media(max-width:480px){
  .collection-banner-img { height: 360px !important; }
}

/* ────────────────────────────────────────
   MOBILE CATEGORY GRID — spacing fix
──────────────────────────────────────── */
@media(max-width:1023px){
  .ifl-cat-section {
    padding: 45px 7px 7px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background: #fff !important;
  }
  .ifl-cat-grid {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  .ifl-cat-item {
    min-height: 80px !important;
    padding: 12px 6px !important;
    gap: 6px !important;
  }
  .ifl-cat-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }
  .ifl-cat-name {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
}

/* ────────────────────────────────────────
   HOME — CATEGORY TABS / QUICK LINKS
──────────────────────────────────────── */
@media(max-width:767px){
  .category-tabs-wrap { overflow-x:auto !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important; }
  .category-tabs-wrap::-webkit-scrollbar { display:none !important; }
  .category-tab { flex-shrink:0 !important; }
  .quick-links-grid { grid-template-columns:repeat(4,1fr) !important; gap:8px !important; }
}
@media(max-width:480px){
  .quick-links-grid { grid-template-columns:repeat(3,1fr) !important; gap:6px !important; }
  .quick-link-icon { width:48px !important; height:48px !important; font-size:20px !important; }
  .quick-link-label { font-size:10px !important; }
}

/* ────────────────────────────────────────
   HOME — OCCASIONS / FLOWER TYPE SCROLL
──────────────────────────────────────── */
@media(max-width:767px){
  .occasions-scroll, .flower-scroll { gap:10px !important; }
  .occasion-card, .flower-card { width:90px !important; }
  .occasion-img, .flower-img { width:80px !important; height:80px !important; }
}

/* ────────────────────────────────────────
   PRODUCT GRID (listing page)
──────────────────────────────────────── */
@media(max-width:639px){
  #productsGrid,
  .products-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
}
@media(max-width:360px){
  #productsGrid,
  .products-grid { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   PRODUCT CARD
──────────────────────────────────────── */
@media(max-width:639px){
  .product-card-img-wrap { aspect-ratio:1/1 !important; }
  .product-card-body { padding:8px !important; }
  .product-card-name { font-size:12px !important; }
  .product-card-price { font-size:12px !important; gap:3px !important; }
  .product-card-btn { padding:7px 10px !important; font-size:12px !important; }
  .product-card .badge { font-size:9px !important; padding:2px 5px !important; }
}

/* ────────────────────────────────────────
   LISTING PAGE — FILTER SIDEBAR
──────────────────────────────────────── */
@media(max-width:1023px){
  .listing-wrap { grid-template-columns:1fr !important; }
  .listing-sidebar { position:static !important; top:auto !important; }
  .listing-filter-toggle { display:flex !important; }
  .listing-sidebar-inner { display:none !important; }
  .listing-sidebar-inner.open { display:block !important; }
}

/* ────────────────────────────────────────
   PRODUCT DETAIL PAGE
──────────────────────────────────────── */
@media(max-width:860px){
  .pdp-grid { grid-template-columns:1fr !important; gap:20px !important; }
  .gallery-col { position:static !important; top:auto !important; }
}
@media(max-width:640px){
  .pdp-title { font-size:clamp(20px,5vw,28px) !important; }
  .pdp-price-main { font-size:24px !important; }
  .sticky-cta-bar { padding:10px 14px !important; gap:8px !important; }
  .sticky-cta-bar .btn { flex:1 !important; padding:12px 8px !important; font-size:13px !important; }
  .addons-drawer { border-radius:20px 20px 0 0 !important; }
  .addons-grid { grid-template-columns:repeat(2,1fr) !important; }
  .pdp-tabs { overflow-x:auto !important; scrollbar-width:none !important; }
  .pdp-tabs::-webkit-scrollbar { display:none !important; }
  .pdp-tab-btn { flex-shrink:0 !important; font-size:13px !important; padding:10px 14px !important; }
  .slot-cat-cards { grid-template-columns:repeat(2,1fr) !important; }
  .cta-row { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   CART PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .cart-wrap { padding:16px 12px 140px !important; }
  .cart-layout { grid-template-columns:1fr !important; }
  .cart-item-row { gap:10px !important; flex-wrap:wrap !important; }
  .cart-item-img { width:70px !important; height:70px !important; }
  .coupon-row { flex-direction:column !important; }
  .coupon-input { width:100% !important; }
}

/* ────────────────────────────────────────
   CHECKOUT PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .co-wrap { padding:16px 12px 80px !important; }
  .co-grid { grid-template-columns:1fr !important; }
  .form-row { grid-template-columns:1fr !important; }
  .form-full { grid-column:1 !important; }
  .co-step-line { width:20px !important; }
  .co-step span:last-child:not(.co-step-num) { font-size:11px !important; }
}
@media(max-width:480px){
  .co-step span:last-child:not(.co-step-num) { display:none !important; }
  .slot-modal { border-radius:20px 20px 0 0 !important; position:fixed !important; bottom:0 !important; left:0 !important; right:0 !important; max-width:100% !important; max-height:88vh !important; }
  .slot-modal-overlay { align-items:flex-end !important; padding:0 !important; }
}

/* ────────────────────────────────────────
   ACCOUNT LAYOUT
──────────────────────────────────────── */
@media(max-width:1023px){
  .account-layout { grid-template-columns:1fr !important; }
  .account-sidebar { position:relative !important; top:auto !important; overflow:hidden !important; }
  .account-nav {
    display:flex !important; overflow-x:auto !important;
    white-space:nowrap !important; scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    border-bottom:1px solid #eee !important; padding:0 !important;
    scroll-snap-type:x proximity !important;
  }
  .account-nav a, .account-logout-btn { scroll-snap-align:start; }
  .account-nav::-webkit-scrollbar { display:none !important; }
  .account-nav a, .account-logout-btn { flex-shrink:0 !important; border-radius:0 !important; padding:12px 16px !important; border-right:none !important; border-bottom:2px solid transparent !important; }
  .account-nav a.active, .account-nav a:hover { border-bottom-color:var(--color-primary,#c8a96e) !important; background:rgba(200,169,110,.06) !important; }
  .account-sidebar-user { padding:16px !important; }
  /* Fade + arrow hint on the right edge so it's obvious the tab bar
     scrolls further (Saved Addresses / Notifications sit off-screen
     to the right on narrow phones otherwise). */
  .account-sidebar::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 4px; top: 0;
    height: 46px;
    width: 28px;
    display: flex; align-items: center; justify-content: flex-end;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 75%);
    color: #a0148c;
    font-size: 13px;
    pointer-events: none;
  }
}
@media(max-width:640px){
  .dashboard-stats { grid-template-columns:repeat(2,1fr) !important; }
  .addr-grid { grid-template-columns:1fr !important; }
  .order-item-row { flex-direction:column !important; gap:10px !important; }
  .profile-form-row { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   AUTH PAGES
──────────────────────────────────────── */
@media(max-width:640px){
  .auth-card { padding:24px 16px !important; border-radius:14px !important; margin:16px !important; }
  .auth-wrap { padding:20px 0 !important; }
  .social-login-row { flex-direction:column !important; }
  .social-login-row .btn { width:100% !important; }
}

/* ────────────────────────────────────────
   BLOG PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .blog-grid { grid-template-columns:1fr !important; }
  .blog-featured-link { grid-template-columns:1fr !important; }
  .blog-featured-img { height:200px !important; border-radius:12px 12px 0 0 !important; }
  .blog-cat-tabs { overflow-x:auto !important; scrollbar-width:none !important; white-space:nowrap !important; }
  .blog-cat-tabs::-webkit-scrollbar { display:none !important; }
  .blog-cat-tab { flex-shrink:0 !important; }
}
@media(max-width:480px){
  .blog-hero { padding:40px 16px !important; }
  .blog-hero h1 { font-size:24px !important; }
}

/* ────────────────────────────────────────
   CONTACT PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .contact-main-grid { grid-template-columns:1fr !important; }
  .contact-form-row { grid-template-columns:1fr !important; }
  .contact-info-cards { grid-template-columns:1fr 1fr !important; }
}
@media(max-width:480px){
  .contact-info-cards { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   ABOUT PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .about-story { grid-template-columns:1fr !important; }
  .about-team-grid { grid-template-columns:1fr !important; }
}
@media(max-width:480px){
  .about-hero { padding:40px 16px !important; }
}

/* ────────────────────────────────────────
   WISHLIST
──────────────────────────────────────── */
@media(max-width:639px){
  .wishlist-grid { grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
}
@media(max-width:360px){
  .wishlist-grid { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   FOOTER
──────────────────────────────────────── */
@media(max-width:767px){
  .footer-grid { grid-template-columns:1fr 1fr !important; gap:20px !important; }
  .footer-bottom-inner { flex-direction:column !important; text-align:center !important; gap:8px !important; }
  .footer-payment-icons { justify-content:center !important; }
  .footer-seo-grid { grid-template-columns:1fr !important; }
}
@media(max-width:480px){
  .footer-grid { grid-template-columns:1fr !important; }
}

/* ────────────────────────────────────────
   MOBILE BOTTOM NAV
──────────────────────────────────────── */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
@media(max-width:1023px){
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media(min-width:1024px){
  .mobile-bottom-nav { display:none !important; }
}

/* ────────────────────────────────────────
   MODALS / DRAWERS
──────────────────────────────────────── */
@media(max-width:640px){
  .modal-box,
  .location-modal-box {
    border-radius:20px 20px 0 0 !important;
    position:fixed !important;
    bottom:0 !important; left:0 !important; right:0 !important;
    max-width:100% !important;
    max-height:88vh !important;
    margin:0 !important;
  }
  .modal-overlay { align-items:flex-end !important; padding:0 !important; }
}

/* ────────────────────────────────────────
   TABLES — horizontal scroll
──────────────────────────────────────── */
@media(max-width:767px){
  table { display:block !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; }
}

/* ────────────────────────────────────────
   BUTTONS — touch-friendly
──────────────────────────────────────── */
@media(max-width:767px){
  .btn, button { min-height:44px; }
  .btn-sm { min-height:36px !important; }
  .qty-btn { width:38px !important; height:38px !important; }
}

/* ────────────────────────────────────────
   SUBSCRIPTION PAGE
──────────────────────────────────────── */
@media(max-width:767px){
  .sub-plans-grid { grid-template-columns:1fr !important; }
  .sub-hero { padding:40px 16px !important; }
}

/* ────────────────────────────────────────
   PAGINATION
──────────────────────────────────────── */
@media(max-width:480px){
  .pagination { gap:4px !important; flex-wrap:wrap !important; justify-content:center !important; }
  .page-link { padding:6px 10px !important; font-size:12px !important; }
}

/* ────────────────────────────────────────
   REVIEW CARDS
──────────────────────────────────────── */
@media(max-width:640px){
  .reviews-grid { grid-template-columns:1fr !important; }
  .review-card { padding:16px !important; }
}

/* ────────────────────────────────────────
   SECTION PADDING
──────────────────────────────────────── */
@media(max-width:640px){
  section { padding:32px 0 !important; }
  .section-inner { padding:0 14px !important; }
  .container { padding:0 14px !important; }
}

/* ────────────────────────────────────────
   LOGO — Prevent double logo / overflow
──────────────────────────────────────── */
.header-logo a { display:flex !important; align-items:center !important; text-decoration:none !important; }
.logo-img { height:44px !important; width:auto !important; max-width:160px !important; object-fit:contain !important; display:block !important; }
.logo-text { font-size:22px !important; font-weight:800 !important; white-space:nowrap !important; line-height:1 !important; }
@media(max-width:767px){
  .logo-img { height:38px !important; max-width:130px !important; }
  .logo-text { font-size:20px !important; }
}
@media(max-width:380px){
  .logo-img { height:32px !important; max-width:110px !important; }
  .logo-text { font-size:18px !important; }
}

/* ── Header container height fix ── */
.florafal-header { min-height:56px !important; }
.header-container { min-height:56px !important; align-items:center !important; }

/* ── Hero banner: small breathing room instead of touching the nav directly ── */
.hero-section { margin-top: 14px !important; }
@media(max-width:767px){ .hero-section { margin-top: 8px !important; } }

/* ────────────────────────────────────────
   SWIPER — Fix blank space below slides
──────────────────────────────────────── */
.swiper { overflow: hidden !important; }
.swiper-wrapper { align-items: stretch !important; height: auto !important; }
.swiper-slide { height: auto !important; }
/* EXCEPTION: the hero banner uses Swiper's fade effect, which relies on
   Swiper's own default height:100% (flex-stretch) sizing on
   .swiper-wrapper/.swiper-slide to correctly stack/overlap slides for the
   cross-fade. The generic height:auto override above breaks that,
   causing two different slides' images/text to render on top of each
   other simultaneously instead of properly fading between them. Restore
   the correct behavior just for the hero (all screen sizes). */
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide { height: 100% !important; }
/* Prevent slides from creating extra scroll space */
.products-section .swiper,
.occasions-section .swiper,
.blog-section .swiper,
.reviews-section .swiper { margin-bottom: 0 !important; }

/* ────────────────────────────────────────
   BODY — Prevent black area  
──────────────────────────────────────── */
body.florafal-body,
body.florafal-body.no-ticker,
body.florafal-body.has-ticker { padding-top: 0 !important; }
/* Safety net: screen-reader-only helper text (e.g. hidden <label> next to
   the search input) must never render visibly, even if florafal-performance.css
   fails to load for any reason. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body, body.florafal-body { background: #fff !important; }
main.main-content { background: #fff !important; min-height: 50vh; }

/* ────────────────────────────────────────────────────────────────
   CMS / ADMIN-AUTHORED CONTENT — HORIZONTAL SCROLL GUARD
   Applies to any page that renders raw HTML saved by an admin via
   CKEditor: About/Terms/Privacy/FAQ/dynamic pages (.page-content),
   Blog posts (.blog-content / .cms-content), Product description tab
   (.tab-content-body). Admin content can contain fixed-width tables,
   resized images with inline `style="width:600px"`, or embeds —
   none of which the site's own layout CSS can control. These rules
   are scoped ONLY to these containers so nothing else on the site
   is affected.
──────────────────────────────────────────────────────────────── */
.page-content, .blog-content, .cms-content, .tab-content-body {
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
.page-content *, .blog-content *, .cms-content *, .tab-content-body * {
  max-width: 100% !important;
}
.page-content img, .blog-content img, .cms-content img, .tab-content-body img,
.page-content video, .blog-content video, .cms-content video, .tab-content-body video {
  height: auto !important;
  width: auto !important;
}
.page-content iframe, .blog-content iframe, .cms-content iframe, .tab-content-body iframe,
.page-content embed,  .blog-content embed,  .cms-content embed,  .tab-content-body embed,
.page-content object, .blog-content object, .cms-content object, .tab-content-body object {
  width: 100% !important;
}
.page-content table, .blog-content table, .cms-content table, .tab-content-body table {
  display: block !important;
  width: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
.page-content pre, .blog-content pre, .cms-content pre, .tab-content-body pre {
  white-space: pre-wrap !important;
  overflow-x: auto !important;
}

/* ────────────────────────────────────────────────────────────────
   GLOBAL SAFETY NET — catches anything the sections above missed
──────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  /* Any element accidentally wider than the viewport (fixed px width,
     stray inline style, 3rd-party embed, admin-set banner width, etc.)
     gets clamped back to the viewport instead of pushing it sideways. */
  body * { max-width: 100vw; }

  /* Generic media embeds anywhere in the site (maps, video, social
     widgets) should never force horizontal scroll. */
  iframe, video, embed, object { max-width: 100% !important; }

  /* Flex/grid children default to min-width:auto, which lets long
     unbroken text (product titles, addresses, emails) force their
     row wider than the viewport even when the row itself is 100%
     width. Letting them shrink + wrap fixes the classic "row is
     100% wide but still causes horizontal scroll" bug. */
  .cart-item, .order-card, .address-card, .notification-item,
  [class$="-row"], [class$="-card"] {
    min-width: 0;
  }
  [class$="-row"] > *, [class$="-card"] > * { min-width: 0; }
}

/* ────────────────────────────────────────────────────────────────
   TAP TARGETS — a few icon-only buttons are sized for a mouse
   cursor (28–36px) rather than a fingertip. WCAG / Apple / Material
   all recommend ~44x44px minimum for touch. Bumped up on mobile only;
   desktop sizing (and the surrounding layout) is untouched.
──────────────────────────────────────────────────────────────── */
@media(max-width:767px){
  .wishlist-toggle {
    width: 40px !important;
    height: 40px !important;
    top: 6px !important;
    right: 6px !important;
    font-size: 16px !important;
  }
  .img-zoom-btn, .img-share-btn {
    width: 44px !important;
    height: 44px !important;
  }
  .color-dot-label { padding: 4px; margin: -4px; } /* invisible hit-area pad around the swatch */
  .qty-btn { width: 44px !important; height: 44px !important; }
  .accordion-header { padding: 16px 0 !important; } /* taller row = easier to tap without shrinking text */
  .filter-checkbox { padding: 6px 0; }              /* more vertical room between stacked filter options */

  /* Checkout order-summary card is sticky for the 2-column desktop
     layout; on the single-column mobile layout it has nothing to
     stick relative to and just floats awkwardly mid-scroll. Same
     fix already applied to .account-sidebar for the same reason. */
  .order-summary-card { position: static !important; top: auto !important; }
}