/* ============================================
   GLOBAL MOBILE UX FIXES
   Organic Urban — Mobile-First Authority (≤768px)
   VERSION: 5.0.0 - Future-Proof Universal System
   ============================================
   
   NON-NEGOTIABLE RULES:
   1. No horizontal scroll anywhere
   2. Header MUST be single row: [☰] [Logo] [Actions]
   3. Only ONE floating button (AI Assistant)
   4. All product cards MUST be vertical on mobile
   5. No content clipping or overlap
   
   FUTURE-PROOF DESIGN PRINCIPLES:
   This CSS uses attribute selectors ([class*="..."]) to
   automatically style any new content matching patterns:
   
   - ANY new product card: [class*="product"][class*="card"]
   - ANY new category card: [class*="category"][class*="card"]
   - ANY new blog card: [class*="blog"][class*="card"]
   - ANY new grid: [class*="-grid"]
   - ANY new hero section: [class*="hero"]
   - ANY new form: form, [class*="form"]
   - ANY new button: .btn, [class*="btn-"]
   - ANY new modal: [class*="modal"]
   - ANY new accordion: [class*="accordion"], [class*="faq"]
   
   NAMING CONVENTIONS FOR NEW ELEMENTS:
   To ensure automatic mobile styling, use these patterns:
   
   - Products: .product-card, .product-grid, .product-image
   - Categories: .category-card, .category-grid
   - Blogs: .blog-card, .blog-grid, .article-card
   - Buttons: .btn, .btn-primary, .btn-secondary
   - Forms: .form-group, .form-input, .form-label
   - Sections: .section-inner, .section-header
   - Cards: [anything]-card (e.g., .testimonial-card)
   - Grids: [anything]-grid (e.g., .features-grid)
   - Heroes: [anything]-hero (e.g., .page-hero)
*/

/* ============================================
   0. HEADER FIXES - REMOVED (MIGRATED)
   ============================================ */
/* 
   ✅ MIGRATED: All header mobile styles have been moved to:
   - assets/css/components/header-mobile.css (SINGLE SOURCE OF TRUTH)
   - assets/css/responsive.css (header-specific mobile rules)
   
   This section has been removed to prevent conflicts.
   Do not add header rules here - use header-mobile.css instead.
*/

/* ============================================
   1. GLOBAL MOBILE BASE RULES - REMOVED (MIGRATED)
   ============================================ */
/* 
   ✅ MIGRATED: Base mobile rules have been moved to:
   - assets/css/utilities/mobile-base.css (SINGLE SOURCE OF TRUTH)
   
   This includes:
   - Viewport constraints (overflow-x, max-width)
   - Box-sizing
   - Body padding (header + bottom nav)
   - Main content constraints
   - Container constraints
   
   Do not add base rules here - use mobile-base.css instead.
*/

@media screen and (max-width: 768px) {
  :root {
    /* Fixed bottom nav height (excluding safe-area inset) */
    --mobile-bottom-nav-height: 64px;
  }

  /* NOTE: All base mobile rules are in utilities/mobile-base.css */

  /* ============================================
     FUTURE-PROOF UNIVERSAL MOBILE STYLES
     These rules automatically apply to ANY new content
     ============================================ */

  /* === UNIVERSAL SECTIONS === */
  /* Any section element gets proper mobile padding */
  section {
    padding-left: var(--mobile-padding-section, 1rem);
    padding-right: var(--mobile-padding-section, 1rem);
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Section inner containers */
  /* Excludes: homepage-categories-wrapper (needs side padding for grid spacing) */
  .section-inner,
  .container,
  .wrapper,
  [class*="-inner"],
  [class*="-container"],
  [class*="-wrapper"]:not(.homepage-categories-wrapper):not(.bestseller-image-wrapper) {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /* === UNIVERSAL GRIDS === */
  /* Any grid layout becomes 2-column on mobile */
  /* Excludes: products-grid, product-grid, homepage-categories-grid (own responsive in style.css) */
  .grid,
  [class*="-grid"]:not(.products-grid):not(.product-grid):not(.homepage-categories-grid):not(.bestsellers-grid),
  [class*="_grid"]:not(.products-grid):not(.product-grid):not(.homepage-categories-grid):not(.bestsellers-grid),
  .category-grid,
  .blog-grid,
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-spacing-sm, 0.75rem);
    width: 100%;
  }

  /* Single column grids for specific content */
  .blog-grid,
  .articles-grid,
  .posts-grid {
    grid-template-columns: 1fr;
    gap: var(--mobile-spacing-md, 1rem);
  }

  /* Product grids are handled by product-card-mobile.css */
  .products-grid,
  .product-grid {
    /* Styles migrated to components/product-card-mobile.css */
  }

  /* === UNIVERSAL CARDS === */
  /* Any card element gets consistent mobile styling (excluding product cards & homepage category cards) */
  .card:not(.product-card):not(.homepage-category-card):not(.ou-product-card),
  [class*="-card"]:not([class*="product"]):not(.product-card):not([class*="homepage-category"]):not([class*="bestseller"]):not(.ou-product-card):not([class*="ou-product-card"]),
  [class*="_card"]:not([class*="product"]):not(.product-card):not([class*="homepage-category"]):not([class*="bestseller"]):not(.ou-product-card):not([class*="ou-product-card"]) {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  /* Card images (excluding product cards & homepage category cards) */
  .card:not(.product-card):not(.homepage-category-card):not(.ou-product-card) img,
  [class*="-card"]:not([class*="product"]):not(.product-card):not([class*="homepage-category"]):not([class*="bestseller"]):not(.ou-product-card):not([class*="ou-product-card"]) img,
  .card-image:not(.product-image):not(.homepage-category-image):not(.bestseller-image-wrapper):not(.ou-product-card__image),
  [class*="-image"]:not(.product-image):not(.homepage-category-image):not(.bestseller-image-wrapper):not(.ou-product-card__image),
  .card:not(.product-card):not(.homepage-category-card):not(.ou-product-card) picture {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Card content areas (excluding product cards & homepage category cards) */
  .card-content:not(.product-info):not(.homepage-category-overlay):not([class*="ou-product-card"]),
  .card-body:not(.product-info):not([class*="ou-product-card"]),
  .card-info:not(.product-info):not([class*="ou-product-card"]),
  [class*="-content"]:not(.product-info):not(.homepage-category-overlay):not([class*="bestseller"]):not([class*="ou-product-card"]),
  [class*="-body"]:not(.product-info):not([class*="bestseller"]):not([class*="ou-product-card"]),
  [class*="-info"]:not(.product-info):not([class*="bestseller"]):not([class*="ou-product-card"]) {
    padding: var(--mobile-spacing-sm, 0.75rem);
  }

  /* Product cards are handled by product-card-mobile.css */
  .product-card,
  [class*="product"][class*="card"] {
    /* Styles migrated to components/product-card-mobile.css */
  }

  /* === UNIVERSAL PRODUCT CARDS - REMOVED (MIGRATED) === */
  /* 
     ✅ MIGRATED: Product card mobile styles have been moved to:
     - assets/css/components/product-card-mobile.css (SINGLE SOURCE OF TRUTH)
     
     This includes:
     - Product grid layouts
     - Product card container styles
     - Product image styles
     - Product info styles
     
     Do not add product card rules here - use product-card-mobile.css instead.
   */

  /* === UNIVERSAL CATEGORY CARDS === */
  /* Excludes homepage-category-card (own responsive in style.css) */
  [class*="category"][class*="card"]:not(.homepage-category-card),
  .category-card:not(.homepage-category-card),
  .collection-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
  }

  /* === UNIVERSAL BLOG/ARTICLE CARDS === */
  [class*="blog"][class*="card"],
  [class*="article"][class*="card"],
  [class*="post"][class*="card"],
  .blog-card,
  .article-card,
  .post-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
  }

  /* === UNIVERSAL BUTTONS === */
  /* All buttons get touch-friendly sizing (using CSS variables) */
  button,
  .btn,
  [class*="btn-"]:not(.btn-add-to-cart):not(.btn-add-cart):not(.btn-buy-now):not(.btn-wishlist):not(.btn-notify-me),
  [class*="-btn"],
  .button,
  [type="submit"],
  [type="button"],
  a.cta-primary,
  a.cta-secondary {
    min-height: var(--mobile-touch-target-min, 44px);
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    font-size: var(--mobile-font-size-sm, 14px);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Full-width buttons in certain contexts */
  .form-actions .btn,
  .card-actions .btn,
  .modal-footer .btn,
  [class*="actions"] .btn {
    width: 100%;
  }

  /* === UNIVERSAL FORMS === */
  /* All form inputs get consistent styling */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    width: 100%;
    min-height: var(--mobile-input-height, 48px);
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    font-size: var(--mobile-font-size-base, 16px);
    /* Prevents iOS zoom */
    border: 2px solid var(--border-soft, #e5e0d8);
    border-radius: 10px;
    background: var(--white, #fff);
    -webkit-appearance: none;
    appearance: none;
  }

  /* Form groups */
  .form-group,
  .field-group,
  [class*="form-group"],
  [class*="field-group"] {
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  /* Form labels */
  label,
  .form-label,
  [class*="form-label"] {
    display: block;
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
    font-size: var(--mobile-font-size-sm, 14px);
    font-weight: 500;
  }

  /* === UNIVERSAL TYPOGRAPHY - REMOVED (MIGRATED) === */
  /* 
     ✅ MIGRATED: Typography mobile styles have been moved to:
     - assets/css/utilities/mobile-base.css (SINGLE SOURCE OF TRUTH)
     
     Typography rules use CSS custom properties and are properly scoped.
     Do not add typography rules here - use mobile-base.css instead.
   */

  /* === UNIVERSAL IMAGES - REMOVED (MIGRATED) === */
  /* 
     ✅ MIGRATED: Image mobile styles have been moved to:
     - assets/css/utilities/mobile-base.css (SINGLE SOURCE OF TRUTH)
     
     Image rules are properly scoped.
     Do not add image rules here - use mobile-base.css instead.
   */

  /* === UNIVERSAL TABLES === */
  /* Tables get horizontal scroll wrapper */
  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-sm, 0.75rem);
    font-size: var(--mobile-font-size-sm, 14px);
    white-space: nowrap;
  }

  /* === UNIVERSAL MODALS === */
  .modal,
  [class*="modal"],
  .popup,
  [class*="popup"],
  .dialog,
  [class*="dialog"] {
    max-width: calc(100vw - var(--mobile-spacing-xl, 2rem));
    max-height: calc(100vh - var(--mobile-spacing-xl, 2rem));
    margin: var(--mobile-spacing-md, 1rem);
    border-radius: 16px;
  }

  /* === UNIVERSAL ACCORDIONS/COLLAPSE === */
  [class*="accordion"],
  [class*="collapse"],
  [class*="faq"] {
    width: 100%;
  }

  [class*="accordion"] button,
  [class*="collapse"] button,
  .faq-question {
    width: 100%;
    text-align: left;
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    min-height: var(--mobile-touch-target-min, 44px);
  }

  /* === UNIVERSAL TABS === */
  .tabs,
  [class*="tabs"],
  .tab-list,
  [class*="tab-list"] {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    border-bottom: 1px solid var(--border-soft, #e5e0d8);
  }

  .tab,
  [class*="tab-item"],
  .tabs button,
  .tabs a {
    flex-shrink: 0;
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    white-space: nowrap;
    font-size: var(--mobile-font-size-sm, 14px);
  }

  /* === UNIVERSAL BADGES/TAGS === */
  .badge,
  .tag,
  [class*="badge"]:not(.badge-small-batch):not(.badge-bestseller):not(.badge-discount):not(.badge-custom-label):not(.ou-product-card__badge):not(.trust-badge-item):not(.trust-badges-strip),
  [class*="tag"] {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--mobile-spacing-sm, 0.75rem);
    font-size: 11px;
    border-radius: 20px;
    white-space: nowrap;
  }

  /* === UNIVERSAL LISTS === */
  ul,
  ol {
    padding-left: var(--mobile-spacing-md, 1rem);
  }

  li {
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
  }

  /* === UNIVERSAL SPACING === */
  /* Section spacing */
  section+section {
    margin-top: var(--mobile-spacing-xl, 2rem);
  }

  /* === UNIVERSAL HIDE ELEMENTS === */
  /* Hide desktop-only elements */
  .desktop-only,
  .hide-mobile,
  [class*="desktop-only"],
  [class*="hide-mobile"] {
    display: none;
  }

  /* Show mobile-only elements */
  .mobile-only,
  .show-mobile,
  [class*="mobile-only"],
  [class*="show-mobile"] {
    display: block;
  }

  /* === UNIVERSAL FLEX LAYOUTS === */
  /* Flex containers become column on mobile by default */
  .flex-row-mobile-col,
  [class*="flex"][class*="row"] {
    flex-direction: column;
  }

  /* === UNIVERSAL TOUCH FEEDBACK === */
  /* Active states for touch (excludes homepage-category-card — has own :active) */
  button:active,
  .btn:active,
  a:not([class*="homepage-category"]):active,
  .card:active,
  [class*="-card"]:not([class*="homepage-category"]):not([class*="bestseller"]):active {
    opacity: 0.9;
    transform: scale(0.98);
  }

  /* Remove hover effects on touch devices */
  @media (hover: none) {

    button:hover,
    .btn:hover,
    a:hover,
    .card:hover {
      transform: none;
    }
  }

  /* ============================================
     UNIVERSAL PAGE TYPE PATTERNS
     Auto-styles any new page types
     ============================================ */

  /* === ANY LISTING/INDEX PAGE === */
  /* Pages showing lists of items (products, blogs, categories) */
  [class*="listing"],
  [class*="archive"],
  [class*="index-page"],
  [class*="collection"] {
    padding: var(--mobile-spacing-md, 1rem) var(--mobile-padding-section, 1rem);
  }

  /* === ANY DETAIL/SINGLE PAGE === */
  /* NOTE: Body padding handles bottom nav spacing via mobile-base.css.
     Only use extra padding for specific containers that need it. */
  .product-detail-content,
  .blog-post-content {
    padding-bottom: var(--mobile-spacing-lg, 1.5rem);
  }

  /* === ANY HERO/BANNER SECTION === */
  /* Excludes: homepage-category-card--hero (it's a card, not a hero section) */
  [class*="hero"]:not([class*="homepage-category"]),
  [class*="banner"],
  [class*="jumbotron"],
  [class*="masthead"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
    text-align: center;
  }

  [class*="hero"]:not([class*="homepage-category"]) h1,
  [class*="banner"] h1,
  [class*="hero"]:not([class*="homepage-category"]) h2,
  [class*="banner"] h2 {
    text-align: center;
  }

  /* === ANY FEATURED/HIGHLIGHT SECTION === */
  [class*="featured"],
  [class*="highlight"],
  [class*="spotlight"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  /* === ANY TESTIMONIAL/REVIEW SECTION === */
  [class*="testimonial"],
  [class*="review"],
  [class*="feedback"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  [class*="testimonial"][class*="card"],
  [class*="review"][class*="card"] {
    padding: var(--mobile-spacing-md, 1rem);
    border-radius: 12px;
  }

  /* === ANY PRICING/PRICE SECTION === */
  [class*="pricing"],
  [class*="price-table"],
  [class*="plans"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  [class*="pricing"][class*="card"],
  [class*="plan"][class*="card"] {
    padding: var(--mobile-spacing-lg, 1.5rem);
    text-align: center;
  }

  /* === ANY FAQ/QUESTIONS SECTION === */
  [class*="faq"],
  [class*="questions"],
  [class*="help"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  /* === ANY CONTACT/FORM SECTION === */
  [class*="contact"],
  [class*="form-section"],
  [class*="newsletter"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  /* === ANY FOOTER SECTION === */
  /* REMOVED: Footer styles are now owned by components/footer.css (SINGLE SOURCE OF TRUTH) */
  /* Do not add footer rules here - use components/footer.css instead */

  /* === ANY SIDEBAR === */
  /* Sidebars move below main content on mobile */
  .sidebar,
  [class*="sidebar"],
  aside {
    order: 2;
    width: 100%;
    margin-top: var(--mobile-spacing-lg, 1.5rem);
  }

  /* Main content area */
  .main-area,
  [class*="main-content"],
  article {
    order: 1;
    width: 100%;
  }

  /* === ANY PAGINATION === */
  .pagination,
  [class*="pagination"],
  [class*="pager"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mobile-spacing-xs, 0.5rem);
    padding: var(--mobile-spacing-md, 1rem) 0;
  }

  .pagination a,
  .pagination span,
  [class*="pagination"] a,
  [class*="pagination"] span {
    min-width: var(--mobile-touch-target-min, 44px);
    min-height: var(--mobile-touch-target-min, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  /* === ANY BREADCRUMBS === */
  .breadcrumb,
  [class*="breadcrumb"],
  [class*="crumb"] {
    font-size: var(--mobile-font-size-sm, 14px);
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* === ANY SEARCH === */
  [class*="search"] input,
  .search-input,
  input[type="search"] {
    width: 100%;
    min-height: var(--mobile-input-height, 48px);
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    font-size: var(--mobile-font-size-base, 16px);
    border-radius: 24px;
  }

  /* === ANY FILTERS === */
  [class*="filter"],
  .filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mobile-spacing-xs, 0.5rem);
    padding: var(--mobile-spacing-sm, 0.75rem) 0;
  }

  [class*="filter"] select,
  .filter-select {
    min-width: 120px;
    flex: 1;
  }

  /* === ANY SORT DROPDOWN === */
  [class*="sort"],
  .sort-by {
    width: 100%;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  /* === ANY EMPTY STATE === */
  [class*="empty"],
  [class*="no-results"],
  [class*="not-found"] {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-spacing-md, 1rem);
    text-align: center;
  }

  /* === ANY LOADING STATE === */
  [class*="loading"],
  [class*="spinner"],
  .loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--mobile-spacing-xl, 2rem);
  }

  /* === ANY NOTIFICATION/ALERT === */
  [class*="alert"],
  [class*="notification"],
  [class*="message"],
  [class*="toast"] {
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    border-radius: 10px;
    font-size: var(--mobile-font-size-sm, 14px);
    margin: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
  }

  /* === ANY SOCIAL LINKS === */
  [class*="social"],
  .social-links,
  .social-icons {
    display: flex;
    gap: var(--mobile-spacing-sm, 0.75rem);
    flex-wrap: wrap;
  }

  [class*="social"] a,
  .social-links a {
    width: var(--mobile-touch-target-min, 44px);
    height: var(--mobile-touch-target-min, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  /* === ANY SHARE BUTTONS === */
  [class*="share"],
  .share-buttons {
    display: flex;
    gap: var(--mobile-spacing-xs, 0.5rem);
    flex-wrap: wrap;
  }

  [class*="share"] a,
  [class*="share"] button {
    min-width: var(--mobile-touch-target-min, 44px);
    min-height: var(--mobile-touch-target-min, 44px);
  }

  /* === ANY QUANTITY SELECTOR === */
  [class*="quantity"],
  .qty-selector {
    display: flex;
    align-items: center;
    gap: 0;
  }

  [class*="quantity"] button,
  .qty-selector button {
    width: var(--mobile-touch-target-min, 44px);
    height: var(--mobile-touch-target-min, 44px);
    min-height: var(--mobile-touch-target-min, 44px);
    padding: 0;
  }

  [class*="quantity"] input,
  .qty-selector input {
    width: 60px;
    text-align: center;
    min-height: var(--mobile-touch-target-min, 44px);
  }

  /* === ANY RATING/STARS === */
  [class*="rating"],
  [class*="stars"] {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* === ANY COUNTDOWN/TIMER === */
  [class*="countdown"],
  [class*="timer"] {
    display: flex;
    justify-content: center;
    gap: var(--mobile-spacing-xs, 0.5rem);
    font-size: var(--mobile-font-size-sm, 14px);
  }

  /* ============================================
     END UNIVERSAL PAGE TYPE PATTERNS
     ============================================ */

  /* ========== HORIZONTAL SCROLL CONTAINERS (SNAP) ========== */
  /* For World of Clays & Testimonials */
  .horizontal-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: var(--mobile-spacing-md, 1rem);
    padding-bottom: var(--mobile-spacing-md, 1rem);
    /* Space for scrollbar/shadow */
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .horizontal-scroll-container::-webkit-scrollbar {
    display: none;
  }

  .horizontal-scroll-item {
    flex: 0 0 85%;
    /* Show part of next item to encourage scroll */
    scroll-snap-align: center;
    width: 85%;
    max-width: 300px;
  }

  /* Specific override for Clays Grid to be horizontal on mobile */
  #claysGrid.world-of-clays-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem) var(--mobile-spacing-md, 1rem);
    gap: var(--mobile-spacing-sm, 0.75rem);
    scrollbar-width: none;
    /* Hide scrollbar for cleaner look */
    -ms-overflow-style: none;
    /* Hide scrollbar in IE/Edge */
  }

  /* Hide scrollbar for WebKit browsers (Chrome, Safari) */
  #claysGrid.world-of-clays-grid::-webkit-scrollbar {
    display: none;
  }

  #claysGrid .clay-card {
    flex: 0 0 140px;
    min-width: 140px;
    scroll-snap-align: start;
  }

  /* ========== TESTIMONIALS - REMOVED (MIGRATED) ========== */
  /*
     ✅ MIGRATED: All testimonial card mobile styles have been moved to:
     - assets/css/pages/homepage-mobile.css (SINGLE SOURCE OF TRUTH)
     - assets/css/enhancements.css (desktop styles)

     DO NOT add testimonial styles here - use the designated files above.
  */

  /* ========== PRODUCT CARDS - REMOVED (MIGRATED) ========== */
  /* 
     ✅ MIGRATED: All product card mobile styles have been moved to:
     - assets/css/components/product-card-mobile.css (SINGLE SOURCE OF TRUTH)
     
     This includes:
     - Product card container styles
     - Product image styles
     - Product info styles
     - Product grid layouts
     
     Do not add product card rules here - use product-card-mobile.css instead.
   */

  /* Hide distracting badges (kept as minimal override) */
  .product-card .ritual-badge,
  .product-card .vertical-badge,
  .product-card [class*="vertical"]:not(.product-card),
  .product-card .card-ribbon,
  .most-chosen-badge,
  [class*="most-chosen"] {
    display: none;
  }

  /* ========== CHATBOT RULES REMOVED ========== */
  /* Chatbot styling is owned by chatbot.css - no overrides here */

  /* Close the first @media block - ultra priority header */
}

/* ============================================
   2. ADDITIONAL MOBILE STYLES
   ============================================ */
/* (header/nav rules removed — owned by style.css + responsive.css) */

/* ============================================
   MOBILE BOTTOM NAV (Fixed)
   ============================================ */
@media screen and (max-width: 768px) {
  #mobile-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--mobile-bottom-nav-height, 64px) + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    /* Use z-index variable for consistent layering */
    z-index: var(--z-bottom-nav, 9000);
  }

  #mobile-bottom-nav .mobile-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 12px;
    color: #2f2a24;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      background 0.2s ease,
      opacity 0.15s ease;
  }

  #mobile-bottom-nav .mobile-bottom-nav__item:active {
    transform: scale(0.96);
    opacity: 0.92;
  }

  #mobile-bottom-nav .mobile-bottom-nav__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #mobile-bottom-nav .mobile-bottom-nav__label {
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    opacity: 0.85;
  }

  #mobile-bottom-nav .mobile-bottom-nav__item.is-active {
    background: rgba(123, 154, 122, 0.12);
    color: #1f4d41;
  }

  #mobile-bottom-nav .mobile-bottom-nav__item.is-active .mobile-bottom-nav__label {
    opacity: 1;
  }

  #mobile-bottom-nav .mobile-bottom-nav__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.25);
  }

  /* Sticky product action bar should sit above bottom nav */
  .sticky-cart-bar {
    bottom: calc(var(--mobile-bottom-nav-height, 0px) + env(safe-area-inset-bottom));
    z-index: calc(var(--z-sticky, 2000) + 1);
  }
}

/* ============================================
   2. SKIN QUIZ MOBILE FIX - Compact Card
   ============================================ */
@media screen and (max-width: 768px) {

  /* Quiz section - compact padding */
  .quiz-section {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
    background: #f8f6f3;
  }

  .quiz-section .section-inner {
    padding: 0;
  }

  /* Section header - compact */
  .quiz-section .section-header {
    text-align: center;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  .quiz-section .section-header h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    margin-bottom: 6px;
    line-height: 1.2;
  }

  .quiz-section .section-intro {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.4;
    margin-bottom: 0;
    padding: 0 var(--mobile-padding-section, 1rem);
  }

  /* Quiz container - contained card */
  .quiz-container-embedded {
    max-width: 100%;
    padding: var(--mobile-spacing-md, 1rem) var(--mobile-padding-section, 1rem);
    border-radius: 12px;
    background: var(--white, #fff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    min-height: auto;
  }

  /* Progress bar */
  .quiz-progress-embedded {
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  .progress-bar-embedded {
    height: 4px;
    margin-bottom: 6px;
  }

  .progress-text-embedded {
    font-size: 0.7rem;
    text-align: center;
  }

  /* Questions container */
  .questions-container-embedded {
    position: relative;
  }

  /* CRITICAL: Hide all questions */
  .question-card-embedded-step {
    display: none;
  }

  /* Show only current question */
  .question-card-embedded-step.show {
    display: block;
  }

  /* Question title */
  .question-title-embedded {
    font-size: var(--mobile-font-size-base, 16px);
    font-weight: 600;
    margin-bottom: var(--mobile-spacing-md, 1rem);
    line-height: 1.3;
    text-align: center;
  }

  /* Options list */
  .options-list-embedded {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-spacing-xs, 0.5rem);
  }

  /* Option item - compact */
  .option-item-embedded {
    display: flex;
    align-items: center;
    padding: var(--mobile-spacing-sm, 0.75rem);
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: var(--white, #fff);
    cursor: pointer;
    min-height: auto;
  }

  .option-item-embedded:active {
    background: #f0f5f0;
  }

  /* Radio button */
  .option-item-embedded input[type="radio"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    margin: 0 var(--mobile-spacing-sm, 0.75rem) 0 0;
    accent-color: var(--accent-sage, #7b9a7a);
  }

  /* Option text */
  .option-text-embedded {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.35;
    color: var(--text-dark, #2f2a24);
  }

  /* Selected state */
  .option-item-embedded:has(input:checked) {
    border-color: var(--accent-sage, #7b9a7a);
    background: #f0f5f0;
  }

  /* Quiz results section */
  #quizResultsSection {
    padding: 0;
  }

  .quiz-results-content {
    padding: 0;
  }

  /* Results header */
  .results-header-embedded {
    text-align: center;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  .results-header-embedded h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    margin-bottom: 4px;
  }

  .skin-descriptor-embedded {
    font-size: var(--mobile-font-size-sm, 14px);
    color: var(--accent-sage, #7b9a7a);
  }

  .skin-description-embedded {
    font-size: var(--mobile-font-size-sm, 14px);
    text-align: center;
    margin-bottom: var(--mobile-spacing-md, 1rem);
    color: var(--text-muted, #666);
  }

  /* Recommendations - 2 products in grid */
  .recommendations-section-embedded h3 {
    font-size: var(--mobile-font-size-base, 16px);
    text-align: center;
    margin-bottom: var(--mobile-spacing-sm, 0.75rem);
  }

  .recommendations-grid-embedded {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--mobile-spacing-sm, 0.75rem);
  }

  .recommendation-card-embedded {
    background: #f9f9f9;
    border-radius: 10px;
    padding: var(--mobile-spacing-sm, 0.75rem);
    text-align: center;
  }

  .recommendation-image-embedded {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
  }

  .recommendation-image-embedded img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .recommendation-content-embedded h4 {
    font-size: var(--mobile-font-size-sm, 14px);
    margin-bottom: 4px;
    line-height: 1.2;
  }

  .recommendation-subtitle-embedded {
    font-size: 0.7rem;
    color: var(--text-muted, #888);
    margin-bottom: 4px;
  }

  .recommendation-price-embedded {
    font-size: var(--mobile-font-size-sm, 14px);
    font-weight: 600;
    color: var(--text-dark, #2f2a24);
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
  }

  .recommendation-card-embedded .btn-quiz {
    font-size: 0.75rem;
    padding: var(--mobile-spacing-xs, 0.5rem) var(--mobile-spacing-sm, 0.75rem);
    min-height: 32px;
    width: 100%;
  }

  /* Retake button */
  .quiz-retake-section {
    text-align: center;
    margin-top: var(--mobile-spacing-md, 1rem);
  }

  .quiz-retake-section .btn-quiz {
    font-size: var(--mobile-font-size-sm, 14px);
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
  }
}

/* ============================================
   3. AI ASSISTANT BUTTON (ONLY FLOATING ELEMENT)
   ============================================ */
@media screen and (max-width: 768px) {

  /* ========== CHATBOT RULES REMOVED ========== */
  /* Chatbot styling is owned by chatbot.css - no overrides here */
}

/* Desktop - chatbot rules removed - owned by chatbot.css */
@media screen and (min-width: 769px) {

  /* HIDE back-to-top on desktop too */
  .back-to-top {
    display: none;
  }
}

/* ============================================
   4. REMOVE WHATSAPP COMPLETELY
   ============================================ */
/* WhatsApp button should already be disabled in PHP, but ensure CSS removal */
.whatsapp-float,
.whatsapp-button,
#whatsapp-float,
.whatsapp-icon,
.whatsapp-widget,
[class*="whatsapp"],
[id*="whatsapp"],
[class*="wa-"],
a[href*="wa.me"],
a[href*="whatsapp"] {
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  left: -9999px;
}

/* === MOBILE BOTTOM NAV - REMOVED (MIGRATED) === */
/* 
   ✅ MIGRATED: Mobile bottom navigation styles have been moved to:
   - assets/css/components/navigation-mobile.css (if applicable)
   - Or kept here but should be in a dedicated component file
   
   Note: Bottom nav rules are already clean (minimal !important).
   Consider creating components/bottom-nav-mobile.css for better organization.
*/

/* ============================================
   5. HORIZONTAL OVERFLOW FIXES (SITE-WIDE)
   ============================================ */
@media screen and (max-width: 768px) {

  /* ============================================
     HORIZONTAL OVERFLOW FIXES - REMOVED (MIGRATED)
     ============================================ */
  /* 
     ✅ MIGRATED: Horizontal overflow fixes have been moved to:
     - assets/css/utilities/mobile-base.css (base constraints)
     
     Container, grid, card, image, table, form, and text wrapping rules
     are now handled by mobile-base.css without !important.
     
     Do not add overflow rules here - use mobile-base.css instead.
   */

  /* Remove any absolute positioning that causes overflow */
  [style*="position: absolute"] {
    max-width: calc(100vw - var(--mobile-spacing-md, 1rem));
  }
}

/* ============================================
   6. MOBILE SAFE AREAS (iOS notch support)
   ============================================ */
@media screen and (max-width: 768px) {

  /* HIDE back-to-top - AI Chatbot is the only floating element */
  .back-to-top {
    display: none;
  }

  /* ========== CHATBOT RULES REMOVED ========== */
  /* Chatbot styling is owned by chatbot.css - no overrides here */

  .quiz-section {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================
   7. TAP TARGET SIZES (Accessibility)
   ============================================ */
@media screen and (max-width: 768px) {

  button,
  a,
  [role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: var(--mobile-touch-target-min, 44px);
    min-width: var(--mobile-touch-target-min, 44px);
  }

  /* Radio buttons and checkboxes */
  input[type="radio"],
  input[type="checkbox"] {
    min-width: 18px;
    min-height: 18px;
  }
}

/* ============================================
   8. PRODUCT PAGE - REMOVED (MIGRATED)
   ============================================

   MIGRATED: All product page mobile styles (hero, gallery, info,
   actions, sticky bar, lightbox, trust strip) have been moved to:
   - assets/css/pages/product-page-mobile.css (SINGLE SOURCE OF TRUTH)

   Do not add product page rules here.
*/
@media screen and (max-width: 768px) {

  /* ============================================
   9. CATEGORY PAGE - MOBILE GRID
   ============================================ */
  @media screen and (max-width: 768px) {
    .category-hero {
      padding: calc(var(--header-height-mobile, 60px) + var(--mobile-spacing-md, 1rem)) var(--mobile-padding-section, 1rem) var(--mobile-spacing-lg, 1.5rem);
    }

    .category-title {
      font-size: var(--mobile-heading-size-h1, 1.75rem);
    }

    .category-description {
      font-size: var(--mobile-font-size-sm, 14px);
    }

    /* Product grid and cards - handled by product-card-mobile.css */
    /* Styles migrated to components/product-card-mobile.css */

    .product-card-price {
      font-size: var(--mobile-font-size-sm, 14px);
    }

    .product-card-btn {
      padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-sm, 0.75rem);
      font-size: var(--mobile-font-size-sm, 14px);
    }
  }

  /* ============================================
   10. CART PAGE - MOBILE LAYOUT - REMOVED (MIGRATED)
   ============================================ */
  /* 
   ✅ MIGRATED: Cart page mobile styles have been moved to:
   - assets/css/pages/cart-mobile.css (SINGLE SOURCE OF TRUTH)
   
   Do not add cart page rules here - use cart-mobile.css instead.
*/

  @media screen and (max-width: 768px) {
    /* Cart page rules migrated to cart-mobile.css */
  }

  .cart-item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--mobile-spacing-sm, 0.75rem);
    padding: var(--mobile-spacing-sm, 0.75rem);
    border-radius: 12px;
  }

  .cart-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
  }

  .cart-item-title {
    font-size: var(--mobile-font-size-sm, 14px);
  }

  .cart-item-price {
    font-size: var(--mobile-font-size-sm, 14px);
  }

  .quantity-controls {
    height: 36px;
  }

  .quantity-btn {
    width: 32px;
    height: 32px;
    font-size: var(--mobile-font-size-base, 16px);
  }

  .quantity-input {
    width: 40px;
    font-size: var(--mobile-font-size-sm, 14px);
  }

  .cart-summary {
    padding: var(--mobile-spacing-md, 1rem);
    border-radius: 12px;
    margin-top: var(--mobile-spacing-md, 1rem);
  }

  .cart-total {
    font-size: 1.1rem;
  }

  .btn-checkout {
    width: 100%;
    padding: var(--mobile-spacing-sm, 0.75rem);
    font-size: var(--mobile-font-size-base, 16px);
    border-radius: 10px;
  }
}

/* ============================================
   11. FOOTER - NOT OWNED BY THIS FILE
   ============================================ */
/* Footer spacing is owned by style.css - do not add rules here */

/* ============================================
   12. UBTANS/RITUAL PAGES - MOBILE FIX
   ============================================ */
@media screen and (max-width: 768px) {

  /* Ritual Selector Section */
  .ritual-selector {
    padding: var(--mobile-spacing-md, 1rem) var(--mobile-padding-section, 1rem) 0;
    margin-bottom: var(--mobile-spacing-lg, 1.5rem);
  }

  /* FIX: Text Breaking Issue */
  .ritual-eyebrow {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
  }

  .ritual-subline {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.5;
    margin-bottom: var(--mobile-spacing-md, 1rem);
    padding: 0 var(--mobile-spacing-xs, 0.5rem);
  }

  /* Filters - Horizontal Scroll */
  .ritual-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--mobile-spacing-xs, 0.5rem);
    padding-bottom: var(--mobile-spacing-xs, 0.5rem);
    margin-bottom: var(--mobile-spacing-md, 1rem);
    -webkit-overflow-scrolling: touch;
  }

  .ritual-filter,
  .ritual-filter-label {
    flex-shrink: 0;
    padding: var(--mobile-spacing-xs, 0.5rem) var(--mobile-spacing-sm, 0.75rem);
    font-size: var(--mobile-font-size-sm, 14px);
    white-space: nowrap;
  }

  /* Ritual Cards Grid - 2 columns */
  .ritual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-spacing-sm, 0.75rem);
  }

  .ritual-card {
    min-height: 140px;
    padding: var(--mobile-spacing-md, 1rem);
    border-radius: 14px;
  }

  .ritual-name {
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .ritual-desc {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.4;
  }

  .ritual-cta {
    font-size: var(--mobile-font-size-sm, 14px);
    margin-top: var(--mobile-spacing-md, 1rem);
  }

  /* Category Content */
  .category-content {
    padding: var(--mobile-spacing-md, 1rem) var(--mobile-padding-section, 1rem);
  }

  .ritual-bridge {
    font-size: var(--mobile-font-size-sm, 14px);
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  .category-intro {
    padding: var(--mobile-spacing-md, 1rem) 0;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  .category-intro h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    margin-bottom: var(--mobile-spacing-sm, 0.75rem);
  }

  .category-intro p {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.6;
  }

  /* Products Grid - 2 columns */
  .products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-spacing-sm, 0.75rem);
    margin-top: var(--mobile-spacing-md, 1rem);
  }

  .product-card {
    border-radius: 14px;
  }

  .product-image {
    min-height: 160px;
    aspect-ratio: 1;
  }

  .product-info {
    padding: var(--mobile-spacing-sm, 0.75rem);
  }

  .product-info h3 {
    font-size: var(--mobile-font-size-base, 16px);
    margin-bottom: 4px;
    line-height: 1.3;
  }

  .product-info p {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.4;
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-price {
    font-size: var(--mobile-font-size-base, 16px);
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
  }

  .product-link {
    font-size: var(--mobile-font-size-sm, 14px);
  }

  .product-badge {
    top: var(--mobile-spacing-xs, 0.5rem);
    right: var(--mobile-spacing-xs, 0.5rem);
    padding: 3px var(--mobile-spacing-xs, 0.5rem);
    font-size: 0.6rem;
  }
}

/* ============================================
   13. CATEGORY HERO - MOBILE
   ============================================ */
@media screen and (max-width: 768px) {
  .category-hero {
    padding: calc(var(--header-height-mobile, 60px) + var(--mobile-spacing-md, 1rem)) var(--mobile-padding-section, 1rem) var(--mobile-spacing-lg, 1.5rem);
    min-height: auto;
  }

  .category-hero h1 {
    font-size: var(--mobile-heading-size-h1, 1.75rem);
    margin-bottom: var(--mobile-spacing-sm, 0.75rem);
    line-height: 1.2;
  }

  .category-hero p {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.5;
  }
}

/* ============================================
   14. HOMEPAGE HERO - MOBILE
   ============================================ */
@media screen and (max-width: 768px) {
  .hero {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem) var(--mobile-spacing-lg, 1.5rem);
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero-inner {
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero h1 {
    font-size: var(--mobile-heading-size-h1, 1.75rem);
    line-height: 1.2;
    margin-bottom: var(--mobile-spacing-sm, 0.75rem);
    text-align: center;
  }

  .hero-subtitle,
  .hero p {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.5;
    margin-bottom: var(--mobile-spacing-md, 1rem);
    text-align: center;
  }

  .hero-actions {
    flex-direction: column;
    gap: var(--mobile-spacing-sm, 0.75rem);
    width: 100%;
    max-width: 280px;
    align-items: center;
    margin: 0 auto;
  }

  .hero-actions a,
  .hero-actions .btn,
  .hero-actions .cta-primary,
  .hero-actions .cta-secondary {
    width: 100%;
    max-width: 280px;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* Hero image - hide or adjust on mobile */
  .hero-image,
  .hero-visual {
    display: none;
  }

  /* Hide scroll cue on mobile */
  .hero-scroll-cue {
    display: none;
  }
}

/* ============================================
   15. MOBILE NAV OVERLAY - FIX
   ============================================ */
/* (mobile nav overlay rules removed — owned by responsive.css) */

/* ============================================
   16. GENERAL TEXT & TYPOGRAPHY - MOBILE
   ============================================ */
@media screen and (max-width: 768px) {

  /* Prevent awkward word breaks */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* Section titles */
  .section-title,
  .section-header h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    line-height: 1.3;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  .section-intro,
  .section-header p {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.5;
  }

  /* Consistent section padding */
  section {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  /* Cards */
  .card {
    border-radius: 12px;
    padding: var(--mobile-spacing-md, 1rem);
  }
}

/* ============================================
   17. HOMEPAGE CATEGORIES — Unified in style.css
   ============================================ */
/* Grid and cards: single system in style.css. Desktop 4-col gap 24px; mobile override only 2-col gap 16px. */

/* ============================================
   18. HOMEPAGE SECTIONS - MOBILE
   ============================================ */
@media screen and (max-width: 768px) {

  /* Trust badges row */
  .trust-badges,
  .trust-signals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-spacing-md, 1rem);
    padding: var(--mobile-spacing-lg, 1.5rem) var(--mobile-padding-section, 1rem);
  }

  .trust-badge,
  .trust-signal {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mobile-spacing-xs, 0.5rem);
  }

  .trust-badge span,
  .trust-signal span {
    font-size: var(--mobile-font-size-sm, 14px);
    white-space: normal;
  }

  /* ========== TESTIMONIALS - See homepage-mobile.css ========== */
  /* Testimonial styles migrated to homepage-mobile.css for single source of truth */

  /* Blog section */
  .blog-section,
  .from-blog {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  .blog-grid {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-spacing-md, 1rem);
  }

  .blog-card {
    border-radius: 12px;
    overflow: hidden;
  }

  .blog-card-image:not(.blog-card-image--with-img) {
    height: 180px;
  }

  .blog-card-content {
    padding: var(--mobile-spacing-md, 1rem);
  }

  .blog-card-title {
    font-size: 1.1rem;
    line-height: 1.3;
    margin-bottom: var(--mobile-spacing-xs, 0.5rem);
  }

  .blog-card-excerpt {
    font-size: var(--mobile-font-size-sm, 14px);
    line-height: 1.5;
  }

  /* World of Clays section */
  .world-of-clays,
  .clays-section {
    padding: var(--mobile-spacing-xl, 2rem) var(--mobile-padding-section, 1rem);
  }

  .clays-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-spacing-sm, 0.75rem);
  }

  /* Skin Quiz on Homepage */
  .quiz-section .section-header {
    padding: 0 var(--mobile-padding-section, 1rem);
  }

  .quiz-section h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
  }
}

/* ============================================
   15. PRODUCT CARDS - APP-LIKE MOBILE EXPERIENCE
   ============================================ */
@media screen and (max-width: 768px) {

  /* Related Products / You May Also Like Section */
  .related-products,
  .recently-viewed-section {
    padding: var(--mobile-spacing-lg, 1.5rem) var(--mobile-padding-section, 1rem);
    background: linear-gradient(180deg, #faf9f7 0%, #f5f3f0 100%);
  }

  .related-products h2,
  .recently-viewed-section h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    font-weight: 600;
    margin-bottom: var(--mobile-spacing-md, 1rem);
    text-align: center;
    color: var(--text-dark, #2b2520);
  }

  /* Product Grid - 2 columns on mobile */
  .related-products .product-grid,
  .recently-viewed-section .product-grid,
  section.related-products .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--mobile-spacing-sm, 0.75rem);
    padding: 0;
  }

  /* Product Card - App-like styling - FORCE VERTICAL LAYOUT */
  .related-products .product-card,
  .related-products .product-grid .product-card,
  section.related-products .product-card {
    background: var(--white, #fff);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
    width: 100%;
    max-width: 100%;
  }

  .related-products .product-card:active,
  section.related-products .product-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
  }

  /* Product Image - Square aspect ratio - FORCE FULL WIDTH */
  .related-products .product-card .product-image,
  section.related-products .product-card .product-image {
    width: 100%;
    height: auto;
    min-height: 140px;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f3f0 0%, #ebe7e1 100%);
    flex-shrink: 0;
  }

  .related-products .product-card .product-image img,
  .related-products .product-card .product-image picture,
  .related-products .product-card .product-image picture img,
  section.related-products .product-card .product-image img,
  section.related-products .product-card .product-image picture img,
  [class*="recently"] .product-card .product-image img,
  [class*="recently"] .product-card .product-image picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    display: block;
    transition: transform 0.35s ease;
  }

  .related-products .product-card .product-image picture,
  section.related-products .product-card .product-image picture,
  [class*="recently"] .product-card .product-image picture {
    position: absolute;
    inset: 0;
    display: block;
  }

  /* Card Badges - Clean positioning */
  .related-products .product-card .card-badges,
  section.related-products .card-badges {
    position: absolute;
    top: var(--mobile-spacing-xs, 0.5rem);
    left: var(--mobile-spacing-xs, 0.5rem);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 2;
  }

  .related-products .card-badge,
  section.related-products .card-badge {
    display: inline-block;
    padding: 4px var(--mobile-spacing-xs, 0.5rem);
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .related-products .badge-bestseller,
  section.related-products .badge-bestseller {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: var(--white, #fff);
  }

  .related-products .badge-discount,
  section.related-products .badge-discount {
    background: #dc2626;
    color: var(--white, #fff);
  }

  /* Product Info - Compact and clean - FORCE BELOW IMAGE */
  .related-products .product-card .product-info,
  section.related-products .product-card .product-info {
    padding: var(--mobile-spacing-sm, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    width: 100%;
  }

  .related-products .product-card .product-info h3,
  section.related-products .product-card .product-info h3 {
    font-size: var(--mobile-font-size-sm, 14px);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 2px 0;
    color: var(--text-dark, #2b2520);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }

  .related-products .product-card .product-info p,
  section.related-products .product-card .product-info p {
    font-size: 0.7rem;
    color: var(--text-muted, #7a7168);
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Product Footer - Price and CTA */
  .related-products .product-card .product-footer,
  section.related-products .product-card .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: var(--mobile-spacing-xs, 0.5rem);
    flex-wrap: nowrap;
  }

  .related-products .card-pricing,
  section.related-products .card-pricing {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .related-products .card-price,
  section.related-products .card-price {
    font-size: var(--mobile-font-size-sm, 14px);
    font-weight: 700;
    color: var(--accent-sage-dark, #1f4d41);
  }

  .related-products .card-mrp,
  section.related-products .card-mrp {
    font-size: 0.65rem;
    color: var(--text-muted, #9a938a);
    text-decoration: line-through;
  }

  .related-products .product-link,
  section.related-products .product-link {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent-sage-dark, #1f4d41);
    text-decoration: none;
    padding: 6px var(--mobile-spacing-sm, 0.75rem);
    background: rgba(31, 77, 65, 0.08);
    border-radius: 16px;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .related-products .product-link:active,
  section.related-products .product-link:active {
    background: var(--accent-sage-dark, #1f4d41);
    color: var(--white, #fff);
  }
}

/* ============================================
   16. APP-LIKE GLOBAL ENHANCEMENTS
   ============================================ */
@media screen and (max-width: 768px) {

  /* Smooth scrolling everywhere */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }

  /* Remove tap highlight for cleaner touch feel */
  * {
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent text selection on interactive elements */
  button,
  a,
  .product-card,
  .category-card,
  .btn {
    -webkit-user-select: none;
    user-select: none;
  }

  /* Smooth transitions for all interactive elements */
  button,
  a,
  .btn,
  .product-card,
  .category-card {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.15s ease,
      background 0.2s ease;
  }

  /* Active state scaling for app-like feedback */
  button:active,
  .btn:active,
  a.btn:active {
    transform: scale(0.96);
    opacity: 0.9;
  }

  /* ALL images must be visible - no hiding based on loading state */
  img,
  img[loading="lazy"],
  picture img,
  .product-image img,
  .gallery-image-item img,
  .product-card img {
    opacity: 1;
    visibility: visible;
  }

  /* Section headings - Consistent styling */
  section h2,
  .section-header h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    font-weight: 600;
    text-align: center;
    margin-bottom: var(--mobile-spacing-md, 1rem);
    color: var(--text-dark, #2b2520);
  }

  /* Improved touch targets for buttons */
  .btn,
  button,
  a.btn {
    min-height: var(--mobile-touch-target-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Card hover states removed on touch - only active */
  .product-card:hover,
  .category-card:hover {
    transform: none;
    box-shadow: inherit;
  }

  /* Better form inputs on mobile */
  input,
  textarea,
  select {
    font-size: 16px;
    /* Prevents zoom on iOS */
    -webkit-appearance: none;
    border-radius: 12px;
  }

  /* NOTE: Body padding-bottom is defined in mobile-base.css as single source of truth.
     Main content areas inherit that spacing via body padding.
     Only add extra padding here for specific elements that need more space. */

  /* REMOVED: Footer padding-bottom is now owned by components/footer.css */
  /* Use components/footer.css for all footer spacing */
}

/* ============================================
   17. SMOOTH PAGE TRANSITIONS (APP-LIKE)
   Removed complex animations to prevent mobile freeze
   ============================================ */
@media screen and (max-width: 768px) {

  /* Simple smooth transitions instead of animations */
  .product-grid .product-card {
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Active state for tap feedback */
  .product-grid .product-card:active {
    transform: scale(0.98);
  }
}

/* ============================================
   18. UNIVERSAL IMAGE VISIBILITY FIX
   CRITICAL: Ensure NO images are hidden on mobile
   ============================================ */
@media screen and (max-width: 768px) {

  /* Force ALL images visible - no lazy loading opacity tricks */
  img,
  picture img,
  picture source,
  [class*="image"] img,
  [class*="product"] img,
  [class*="gallery"] img,
  [class*="thumb"] img,
  [class*="card"] img,
  .product-card img,
  .product-image img,
  .gallery-image-item img,
  .product-gallery-images img,
  .related-products img,
  [class*="recently"] img {
    opacity: 1;
    visibility: visible;
    display: block;
  }

  /* Ensure picture elements don't hide their images */
  picture {
    display: block;
  }

  /* Recently Viewed Section */
  [class*="recently-viewed"],
  .recently-viewed,
  .recently-viewed-section {
    padding: var(--mobile-spacing-lg, 1.5rem) var(--mobile-padding-section, 1rem);
  }

  [class*="recently-viewed"] h2,
  .recently-viewed h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    text-align: center;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  [class*="recently-viewed"] .product-card,
  .recently-viewed .product-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }

  [class*="recently-viewed"] .product-image,
  .recently-viewed .product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f3f0 0%, #ebe7e1 100%);
  }

  [class*="recently-viewed"] .product-image img,
  [class*="recently-viewed"] .product-image picture,
  [class*="recently-viewed"] .product-image picture img,
  .recently-viewed .product-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    visibility: visible;
  }

  /* Customer Reviews section on product page */
  .reviews-section,
  [class*="reviews"] {
    padding: var(--mobile-spacing-lg, 1.5rem) var(--mobile-padding-section, 1rem);
  }

  .reviews-section h2 {
    font-size: var(--mobile-heading-size-h2, 1.5rem);
    text-align: center;
    margin-bottom: var(--mobile-spacing-md, 1rem);
  }

  /* Product page "Why Choose" section */
  [class*="why-choose"],
  .why-choose-section {
    padding: var(--mobile-spacing-lg, 1.5rem) var(--mobile-padding-section, 1rem);
  }

  .why-choose-grid,
  [class*="why-choose"] .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mobile-spacing-md, 1rem);
  }

  /* Practical Information section */
  [class*="practical-info"],
  .practical-info-section {
    padding: var(--mobile-spacing-lg, 1.5rem) var(--mobile-padding-section, 1rem);
  }

  /* Weight selector on product page */
  .weight-selector,
  [class*="weight"] select,
  .variant-selector {
    width: 100%;
    padding: var(--mobile-spacing-sm, 0.75rem) var(--mobile-spacing-md, 1rem);
    font-size: 16px;
    /* Prevents iOS zoom */
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* ============================================
   MOBILE PDP OPTIMIZATION — REMOVED (MIGRATED)
   ============================================

   MIGRATED: All product detail page mobile styles have been moved to:
   - assets/css/pages/product-page-mobile.css (SINGLE SOURCE OF TRUTH)

   This includes:
   - Product image sizing (40-45vh)
   - Flexbox order reordering (Name → Price+Rating → CTA → Benefits → Trust)
   - Breadcrumb hiding
   - Gallery thumbnail hiding
   - Trust badge mobile/desktop toggle
   - Chat button positioning

   Do not add product page rules here — use product-page-mobile.css instead.
*/