/**
 * DR. MED PHARMACY — MOBILE UI FIX PATCH (REVISED)
 * Date: January 24, 2026
 * Status: Phase 1 Revision — Minimal-Risk Patch
 * Target: iPhone SE (375px) Mobile-First Compliance
 * 
 * SCOPE: UI/DESIGN ONLY — No business logic changes
 * 
 * This file MUST be loaded LAST in app.blade.php to override conflicting rules.
 * Load order verified: vendors.css → aiz-core.css → custom-style.css → new.css → animate.css → f5.css → drmed-responsive.css
 */

/* ============================================
   BREAKPOINT BANDS (LOCKED)
   ============================================ */
/* Mobile: ≤480px (BASE) */
/* Tablet: 481–768px */
/* Mid: 769–991px */
/* Desktop: ≥992px */

/* ============================================
   1. SINGLE MOBILE RAIL OWNER (16px)
   ============================================ */
/* Scoped to site layout wrappers to reduce blast radius */
@media (max-width: 480px) {
    /* Mobile rail — single source of truth */
    .ps-page .container,
    .ps-page .container-fluid,
    .aiz-main-wrapper .container,
    .aiz-main-wrapper .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Fallback: Global container override if scoped selectors don't catch all */
    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ============================================
   2. HEADER STACK ALIGNMENT (375px)
   ============================================ */
@media (max-width: 480px) {
    /* Promo bar — align to rails */
    .ps-noti .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .ps-noti {
        overflow: hidden;
    }
    
    /* Header top — align to rails */
    .ps-header__top .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Header middle — neutralize double padding (container 16px + px-4 16px = 32px total) */
    /* Solution: Set container padding to 0, px-4 provides the 16px rail */
    .ps-header__middle .container.px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure px-4 provides exactly 16px on mobile */
    .ps-header__middle .container.px-4 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Alternative: If px-4 doesn't exist, container provides rail */
    .ps-header__middle .container:not(.px-4):not(.px-3):not(.px-2) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Logo row — ensure icons are tap-safe (44px min) */
    .ps-header__middle .ps-logo img {
        max-width: 120px;
        height: auto;
    }
    
    .ps-header__right a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Search bar — prevent overflow, align to rails */
    .ps-header__search {
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
    }
    
    .ps-header__search .form-control {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    /* Mobile header — same rules */
    .ps-header--mobile .ps-header__middle .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .ps-header--mobile .ps-header__search {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Navigation bar — align to rails */
    .ps-navigation .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Ensure no mystery gaps between header rows */
    .ps-header__top,
    .ps-header__middle,
    .ps-navigation {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================
   3. BANNER RAIL ALIGNMENT (DIRECT FIX, NO WRAPPER ASSUMPTIONS)
   ============================================ */
@media (max-width: 480px) {
    /* Banner carousel — direct 16px padding, no wrapper assumption */
    #banner-carousel {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Splide track/list — prevent overflow */
    #banner-carousel .splide__track {
        max-width: 100%;
        overflow: hidden;
    }
    
    #banner-carousel .splide__list {
        max-width: 100%;
    }
    
    /* Banner slides — no escape */
    #banner-carousel .splide__slide {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #banner-carousel .splide__slide img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        display: block;
    }
    
    /* Promo carousels — align to rails via container */
    .ps-promo .container,
    .promo-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    #promo-carousel,
    #promo-carousel2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #promo-carousel .splide__slide,
    #promo-carousel2 .splide__slide {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    /* Owl carousel — prevent overflow */
    .owl-carousel {
        max-width: 100%;
        overflow: hidden;
    }
    
    .owl-carousel .owl-stage-outer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================
   4. GRID/CARD SPACING NORMALIZATION
   ============================================ */
@media (max-width: 480px) {
    /* Grid owns spacing — cards do NOT add outer margins */
    .product-grid,
    .shop-products,
    .ps-section__product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* Grid gap: 12-16px per spec */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Cards fill column width — no outer margins */
    .ps-product,
    .product-box,
    .product-item,
    .single-product {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0;
    }
    
    /* Card internal padding: 12-16px per spec */
    .ps-product__content,
    .product-content,
    .product-info {
        padding: 12px;
    }
    
    /* Product images — stable ratio, fill width */
    .ps-product__thumbnail,
    .product-image {
        width: 100%;
    }
    
    .ps-product__image img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    
    /* Buttons — full width, tap-safe height (44-48px) */
    .ps-product__actions,
    .product-actions,
    .add-to-cart-btn,
    button[onclick*="addToCart"] {
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure buttons inside cards are full width */
    .ps-product .ps-product__actions a,
    .ps-product .ps-product__actions button {
        width: 100%;
        min-height: 44px;
    }
}

/* Tablet: 481–768px — extend upward */
@media (min-width: 481px) and (max-width: 768px) {
    .product-grid,
    .shop-products {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .container,
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ============================================
   5. OVERLAY STACKING & CLICK SAFETY
   ============================================ */
/* Cookie banner — highest z-index, bottom position */
.aiz-cookie-alert {
    z-index: 10000 !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    padding: 16px !important;
    background: rgba(0, 0, 0, 0.9);
}

@media (max-width: 480px) {
    .aiz-cookie-alert {
        padding: 16px !important;
        left: 0;
        right: 0;
        width: 100%;
    }
    
    .aiz-cookie-alert .btn {
        min-height: 44px;
        width: 100%;
        margin-top: 12px;
    }
}

/* Mobile menu overlay — below modals, above content */
.mobile-menu-overlay {
    z-index: 9998 !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
}

.mobile-menu-container {
    z-index: 9999 !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Lock body scroll when menu is open */
body.mmenu-active,
body.menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Modals — above menu, below cookie */
.modal {
    z-index: 10001 !important;
}

.modal-backdrop {
    z-index: 9999 !important; /* Below modal (10001), above menu (9999) */
}

/* Ensure modals don't block cookie banner close button */
.modal.show ~ .aiz-cookie-alert {
    z-index: 10002 !important;
}

/* Side cart drawer — proper stacking */
.aiz-sidebar-wrap,
.aiz-sidecartbar-wrap {
    z-index: 9997 !important;
}

.aiz-sidebar-overlay,
.aiz-sidecartbar-overlay {
    z-index: 9996 !important;
}

/* ============================================
   6. SECTION VERTICAL SPACING (24-32px)
   ============================================ */
@media (max-width: 480px) {
    .ps-section,
    section {
        padding-top: 24px;
        padding-bottom: 24px;
    }
    
    .ps-section--banner {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ============================================
   7. ADDITIONAL MOBILE HARDENING (OFFENDER-LEVEL ONLY)
   ============================================ */
@media (max-width: 480px) {
    /* Typography — readable on mobile */
    body {
        font-size: 14px;
        line-height: 1.6;
    }
    
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 18px; }
    h4 { font-size: 16px; }
    h5, h6 { font-size: 14px; }
    
    /* Form elements — tap-safe */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        min-height: 44px;
        padding: 12px 16px;
        font-size: 16px; /* Prevents iOS zoom */
    }
    
    /* Links/buttons — tap-safe (scoped to avoid breaking site-wide) */
    .ps-header__right a,
    .ps-product__actions a,
    .ps-product__actions button,
    .add-to-cart-btn {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Images — responsive */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   8. SPECIFIC COMPONENT FIXES
   ============================================ */
@media (max-width: 480px) {
    /* Breadcrumbs — horizontal scroll if needed */
    .breadcrumb-navigation,
    .ps-breadcrumb,
    .breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 16px !important;
    }
    
    .breadcrumb-navigation::-webkit-scrollbar,
    .ps-breadcrumb::-webkit-scrollbar {
        display: none;
    }
    
    /* Cart table — responsive */
    .cart-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Checkout form — full width inputs */
    .checkout-form input,
    .checkout-form select,
    .checkout-form textarea {
        width: 100%;
    }
    
    /* Search dropdown — align to rails */
    .typed-search-box,
    .typed-search-box-mobile {
        left: 16px !important;
        right: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
}

/* ============================================
   9. OPTIONAL SAFETY BELT (ONLY IF STILL NEEDED AFTER OFFENDER FIXES)
   ============================================ */
/* If minor overflow persists after banner/search/grid fixes, uncomment below: */
/*
@media (max-width: 480px) {
    body {
        overflow-x: clip;
    }
}
*/

/* ============================================
   END OF MOBILE UI FIX PATCH (REVISED)
   ============================================ */

/* ============================================
   SPLIDE PAGINATION DOTS — MOBILE (≤480px)
   Banner indicator sizing (FINAL)
   ============================================ */
@media (max-width: 480px) {
  #banner-carousel .splide__pagination {
    gap: 6px;
    bottom: 10px;
  }

  #banner-carousel .splide__pagination__page {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin: 0 !important;
    transform: none !important;
  }

  #banner-carousel .splide__pagination__page.is-active {
    transform: none !important;
  }
}

/* ============================================
   BANNER ARROWS — MOBILE CLICK SAFETY (≤480px)
   Ensure arrows are above overlays and clickable
   ============================================ */
@media (max-width: 480px) {
  #banner-carousel .splide__arrow {
    z-index: 50;
    pointer-events: auto;
  }
  #banner-carousel .splide__track,
  #banner-carousel .splide__list,
  #banner-carousel .splide__slide {
    pointer-events: auto;
  }
}

/* ============================================
   BANNER SPLIDE — MOBILE OVERFLOW ONLY (≤480px)
   Scope: #banner-carousel only
   Note: Transform/transition controlled by Splide JS
   ============================================ */
@media (max-width: 480px) {
  #banner-carousel .splide__track {
    overflow: hidden;
  }
}

/* ============================================
   BANNER DOTS — FORCE TRUE CIRCLE (ALL DEVICES)
   Scope: #banner-carousel only
   ============================================ */
#banner-carousel .splide__pagination__page {
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  background: rgba(255,255,255,0.55) !important;
}

#banner-carousel .splide__pagination__page.is-active {
  background: rgba(255,255,255,1) !important;
}

/* ============================================
   PHASE V1 — ≤480px MOBILE UI LOCK (CONSOLIDATED)
   Date: January 24, 2026
   Target: Mobile band ≤480px (375/390/412 baseline)
   Scope: UI-only fixes, no business logic
   ============================================ */

/* ============================================
   1. SINGLE MOBILE RAIL OWNER (16px) — ≤480px MOBILE BAND
   ============================================ */
@media (max-width: 480px) {
    /* Mobile rail — single source of truth for ≤480px */
    .ps-page .container,
    .ps-page .container-fluid,
    .aiz-main-wrapper .container,
    .aiz-main-wrapper .container-fluid,
    .container,
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ============================================
   2. HEADER STACK ALIGNMENT (≤480px)
   ============================================ */
@media (max-width: 480px) {
    /* Promo bar — align to rails */
    .ps-noti .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .ps-noti {
        overflow: hidden;
    }
    
    /* Header top — align to rails */
    .ps-header__top .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Header middle — neutralize double padding (container 16px + px-4 16px = 32px total) */
    /* Mathematical fix: Remove container padding when px-4 exists, px-4 provides the 16px rail */
    .ps-header__middle .container.px-4 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* px-4 class provides 16px rail via Bootstrap utility (1rem = 16px) */
    
    /* If px-4 doesn't exist, container provides rail (already set to 16px above) */
    
    /* Logo row — ensure icons are tap-safe (44px min) */
    .ps-header__middle .ps-logo img {
        max-width: 120px;
        height: auto;
    }
    
    .ps-header__right a {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Search bar — prevent overflow, align to rails */
    .ps-header__search {
        min-width: 0 !important;
        max-width: 100%;
        width: 100%;
    }
    
    .ps-header__search .form-control {
        width: 100%;
        padding: 12px 16px;
        font-size: 14px;
    }
    
    /* Mobile header — same rules */
    .ps-header--mobile .ps-header__middle .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .ps-header--mobile .ps-header__search {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Navigation bar — align to rails */
    .ps-navigation .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Ensure no mystery gaps between header rows */
    .ps-header__top,
    .ps-header__middle,
    .ps-navigation {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ============================================
   3. BANNER RAIL ALIGNMENT (≤480px)
   ============================================ */
@media (max-width: 480px) {
    /* Banner carousel — direct 16px padding, no wrapper assumption */
    #banner-carousel {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Splide track/list — prevent overflow */
    #banner-carousel .splide__track {
        max-width: 100%;
        overflow: hidden;
    }
    
    #banner-carousel .splide__list {
        max-width: 100%;
    }
    
    /* Banner slides — no escape */
    #banner-carousel .splide__slide {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #banner-carousel .splide__slide img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        display: block;
    }
    
    /* Medicine tabs banner container — override inline styles */
    .home-banner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .ps-section--banner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Promo carousels — align to rails via container */
    .ps-promo .container,
    .promo-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    #promo-carousel,
    #promo-carousel2 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #promo-carousel .splide__slide,
    #promo-carousel2 .splide__slide {
        padding-left: 8px;
        padding-right: 8px;
    }
    
    /* Owl carousel — prevent overflow */
    .owl-carousel {
        max-width: 100%;
        overflow: hidden;
    }
    
    .owl-carousel .owl-stage-outer {
        padding-left: 0;
        padding-right: 0;
    }
}

/* ============================================
   4. GRID/CARD SPACING NORMALIZATION (≤480px)
   ============================================ */
@media (max-width: 480px) {
    /* Grid owns spacing — cards do NOT add outer margins */
    .product-grid,
    .shop-products,
    .ps-section__product-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; /* Grid gap: 12-16px per spec */
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Cards fill column width — no outer margins */
    .ps-product,
    .product-box,
    .product-item,
    .single-product {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0;
    }
    
    /* Card internal padding: 12-16px per spec */
    .ps-product__content,
    .product-content,
    .product-info {
        padding: 12px;
    }
    
    /* Product images — stable ratio, fill width */
    .ps-product__thumbnail,
    .product-image {
        width: 100%;
    }
    
    .ps-product__image img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    
    /* Buttons — full width, tap-safe height (44-48px) */
    .ps-product__actions,
    .product-actions,
    .add-to-cart-btn,
    button[onclick*="addToCart"] {
        width: 100%;
        min-height: 44px;
        padding: 12px 16px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure buttons inside cards are full width */
    .ps-product .ps-product__actions a,
    .ps-product .ps-product__actions button {
        width: 100%;
        min-height: 44px;
    }
}

/* ============================================
   5. OVERLAY STACKING & CLICK SAFETY (≤480px)
   ============================================ */
@media (max-width: 480px) {
    /* Cookie banner — highest z-index, bottom position, site-standard styling */
    .aiz-cookie-alert {
        z-index: 10000 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        padding: 16px !important;
        background: #f0f2f5 !important; /* Site gray background */
        box-sizing: border-box;
    }
    
    .aiz-cookie-alert .p-3 {
        padding: 16px !important;
        position: relative; /* For close button positioning */
    }
    
    .aiz-cookie-alert .bg-dark {
        background: #f0f2f5 !important; /* Site gray, not black */
    }
    
    .aiz-cookie-alert .text-white {
        color: #000 !important; /* Black text, not white */
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 12px;
        padding-right: 32px; /* Reserve space for close button (X) if added */
    }
    
    .aiz-cookie-alert .btn,
    .aiz-cookie-alert .btn-primary {
        min-height: 44px;
        width: 100%;
        margin-top: 12px;
        background: #C10007 !important; /* Brand red */
        color: #fff !important; /* White text on red button */
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 600;
        padding: 12px 16px;
    }
    
    .aiz-cookie-alert .btn:hover,
    .aiz-cookie-alert .btn-primary:hover {
        background: #a00000 !important; /* Darker red on hover */
    }
    
    /* Close button (X) positioning — if added to HTML, position top-right safely */
    .aiz-cookie-alert .ps-noti__close,
    .aiz-cookie-alert [class*="close"] {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        min-width: 44px; /* Tap-safe */
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
        cursor: pointer;
    }
    
    /* Mobile menu overlay — below modals, above content */
    .mobile-menu-overlay {
        z-index: 9998 !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
    }
    
    .mobile-menu-container {
        z-index: 9999 !important;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Lock body scroll when menu is open */
    body.mmenu-active,
    body.menu-open {
        overflow: hidden !important;
        position: fixed;
        width: 100%;
    }
    
    /* Modals — above menu, below cookie */
    .modal {
        z-index: 10001 !important;
    }
    
    .modal-backdrop {
        z-index: 9999 !important; /* Below modal (10001), above menu (9999) */
    }
    
    /* Ensure modals don't block cookie banner close button */
    .modal.show ~ .aiz-cookie-alert {
        z-index: 10002 !important;
    }
    
    /* Side cart drawer — proper stacking */
    .aiz-sidebar-wrap,
    .aiz-sidecartbar-wrap {
        z-index: 9997 !important;
    }
    
    .aiz-sidebar-overlay,
    .aiz-sidecartbar-overlay {
        z-index: 9996 !important;
    }
}

/* ============================================
   6. HORIZONTAL SCROLL PREVENTION (≤480px)
   ============================================ */
@media (max-width: 480px) {
    /* Targeted overflow fixes — address offenders directly */
    
    /* Search dropdown — align to rails */
    .typed-search-box,
    .typed-search-box-mobile {
        left: 16px !important;
        right: 16px !important;
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
    }
    
    /* Search bar min-width override — prevents 740px overflow */
    /* File: public/assets/css/new.css:14565 — .ps-header .ps-header__search { min-width: 740px; } */
    .ps-header .ps-header__search {
        min-width: 0 !important;
        max-width: 100%;
    }
    
    /* Images and media — prevent overflow (targeted, not global) */
    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
    
    /* Last resort: body overflow clip (only if targeted fixes insufficient) */
    body {
        overflow-x: clip;
    }
}

/* ============================================
   END OF PHASE V1 — ≤480px MOBILE UI LOCK
   ============================================ */

/* ============================================
   V1.1 — HOMEPAGE MAIN BANNER FULL-BLEED + GAP NORMALIZATION
   Date: January 24, 2026
   Scope: Homepage + #banner-carousel only (no global collateral)
   Target: Full-bleed banner + remove gap between Banner 1 & Banner 2
   ============================================ */

/* ============================================
   V1.1 — TASK A: FULL-BLEED MAIN BANNER (EDGE-TO-EDGE)
   DEPRECATED: Uses incorrect selector .ps-home #banner-carousel
   Superseded by V1.1.3 FINAL (uses correct selector #banner-carousel)
   ============================================ */
/* .ps-home #banner-carousel {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
} */

/* Prevent inner carousel nodes from causing scroll */
/* DEPRECATED: Superseded by V1.1.3 FINAL */
/* .ps-home #banner-carousel .splide__track,
.ps-home #banner-carousel .splide__list,
.ps-home #banner-carousel .splide__slide,
.ps-home #banner-carousel img {
    max-width: 100% !important;
} */

/* Override Phase V1 mobile padding (lines 677-685) — scoped to homepage only */
/* DEPRECATED: Superseded by V1.1.3 FINAL */
/* @media (max-width: 480px) {
    .ps-home #banner-carousel {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
} */

/* ============================================
   V1.1 — TASK B: REMOVE GAP BETWEEN BANNER 1 & BANNER 2
   Banner 2 wrapper: .ps-home.ps-home--1 (immediate next section after #banner-carousel)
   Verified: resources/views/frontend/index.blade.php:590 — inline style="margin-top: 20px;"
   ============================================ */
/* Precise adjacency selector — only affects Banner 2 wrapper that directly follows #banner-carousel */
/* DEPRECATED: Replaced by V1.1.4 — Controlled Gap */
/* #banner-carousel + .ps-home.ps-home--1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#banner-carousel + .ps-home.ps-home--1 .home-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
} */

/* ============================================
   V1.1.2 — FORCE TRUE FULL-BLEED (EDGE-TO-EDGE)
   DEPRECATED: Uses incorrect selector .ps-home #banner-carousel
   Superseded by V1.1.3 FINAL (uses correct selector #banner-carousel)
   ============================================ */
/* .ps-home #banner-carousel {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: block !important;
} */

/* Ensure Splide inner pieces don't reintroduce constraints */
/* DEPRECATED: Superseded by V1.1.3 FINAL */
/* .ps-home #banner-carousel .splide__track,
.ps-home #banner-carousel .splide__list {
    width: 100% !important;
    max-width: 100% !important;
} */

/* ============================================
   V1.1.3 FINAL — HOMEPAGE MAIN BANNER TRUE FULL-BLEED + GAP FIX
   Scope: Homepage hero banner only (#banner-carousel) + immediate next section gap
   Notes: Do NOT paste this into browser console; this belongs in CSS only.
   ============================================ */

/* True full-bleed hero banner (edge-to-edge) */
#banner-carousel {
    position: relative !important;
    left: 50% !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: block !important;
}

/* Ensure Splide internals don't constrain width */
#banner-carousel .splide__track,
#banner-carousel .splide__list {
    width: 100% !important;
    max-width: 100% !important;
}

/* Remove the unwanted gap between Banner 1 and Banner 2 (precise adjacency) */
/* DEPRECATED: Replaced by V1.1.4 — Controlled Gap */
/* #banner-carousel + .ps-home.ps-home--1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#banner-carousel + .ps-home.ps-home--1 .home-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
} */

/* ============================================
   V1.1.4 — CONTROLLED GAP BETWEEN MAIN & SECOND BANNER
   Scope: Homepage only
   Purpose: Visual separation consistency across devices
   ============================================ */

/* Desktop default */
#banner-carousel ~ .ps-home.ps-home--1 {
    margin-top: 20px !important;
    padding-top: 0 !important;
}

#banner-carousel ~ .ps-home.ps-home--1 .home-banner {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Tablet */
@media (max-width: 991px) {
    #banner-carousel ~ .ps-home.ps-home--1 {
        margin-top: 16px !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    #banner-carousel ~ .ps-home.ps-home--1 {
        margin-top: 12px !important;
    }
}

/* ============================================
   PHASE V0 — INFRA LOCK
   Date: January 24, 2026
   Purpose: Infrastructure consistency contract to convert audit FAIL → PASS
   Scope: Container rails, overflow guard, grid gaps, rail escape prevention
   ============================================ */

/* ============================================
   A) CONTAINER RAILS CONTRACT (ALL BREAKPOINTS)
   ============================================ */

/* Mobile: ≤480px — 16px rails */
@media (max-width: 480px) {
    .container,
    .container-fluid,
    .ps-page .container,
    .ps-page .container-fluid,
    .aiz-main-wrapper .container,
    .aiz-main-wrapper .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Tablet/Mid: 481–991px — 16px rails (safe interpolation between mobile 16px and desktop 15px) */
@media (min-width: 481px) and (max-width: 991px) {
    .container,
    .container-fluid,
    .ps-page .container,
    .ps-page .container-fluid,
    .aiz-main-wrapper .container,
    .aiz-main-wrapper .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Desktop: ≥992px — 15px rails (standard desktop spacing) */
@media (min-width: 992px) {
    .container,
    .container-fluid,
    .ps-page .container,
    .ps-page .container-fluid,
    .aiz-main-wrapper .container,
    .aiz-main-wrapper .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================
   B) OVERFLOW-X CONTRACT (HORIZONTAL SCROLL PREVENTION)
   ============================================ */

/* Global overflow guard — prevent horizontal scroll */
html,
body {
    overflow-x: hidden !important;
}

/* Main wrapper overflow guard */
.aiz-main-wrapper,
.ps-page {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Preserve intentional full-bleed banner — do NOT constrain */
#banner-carousel {
    overflow-x: visible !important;
    max-width: 100vw !important;
}

/* ============================================
   C) PRODUCT GRID GAP CONTRACT (STANDARDIZED TOKENS)
   ============================================ */

/* Mobile: ≤480px — 12px gap */
@media (max-width: 480px) {
    .product-grid,
    .shop-products,
    .ps-section__product-grid {
        gap: 12px !important;
    }
}

/* Tablet/Mid: 481–991px — 16px gap */
@media (min-width: 481px) and (max-width: 991px) {
    .product-grid,
    .shop-products,
    .ps-section__product-grid {
        gap: 16px !important;
    }
}

/* Desktop: ≥992px — 16px gap (within locked 12-16px range) */
@media (min-width: 992px) {
    .product-grid,
    .shop-products,
    .ps-section__product-grid {
        gap: 16px !important;
    }
}

/* ============================================
   D) RAIL ESCAPE RISK GUARD (PREVENT OVERFLOW)
   ============================================ */

/* Allow banner carousel and its children to use full-bleed techniques (locked V1.1.4) */
#banner-carousel,
#banner-carousel * {
    max-width: 100vw !important;
}

/* Prevent other carousels/sliders from escaping rails (scoped only to known slider containers) */
/* Do NOT affect Bootstrap .row or [class*="col-"] which use negative margins legitimately */
.owl-carousel:not(#banner-carousel),
.splide:not(#banner-carousel),
.swiper:not(#banner-carousel),
.ps-promo:not(#banner-carousel),
.promo-section:not(#banner-carousel),
.lightbox:not(#banner-carousel) {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ============================================
   END OF PHASE V0 — INFRA LOCK
   ============================================ */

/* ============================================
   PHASE V1.2 — HEADER FIXATION (TABLET/MOBILE ONLY)
   Date: January 24, 2026
   Purpose: Fix tablet search collapse and mobile tap targets
   Scope: Tablet (481-991px) and Mobile (≤480px) header normalization
   Desktop (≥992px): Reference truth — DO NOT MODIFY
   ============================================ */

/* ============================================
   DESKTOP SPEC (≥992px) — REFERENCE TRUTH (DO NOT MODIFY)
   ============================================ */

/* DESKTOP RULES COMMENTED OUT — Desktop is reference truth and must remain unchanged
   unless objectively broken with measured evidence. Tablet/mobile normalization below
   will match desktop intent without modifying desktop itself.

@media (min-width: 992px) {
    [Desktop rules removed — desktop remains as-is]
}
*/

/* ============================================
   TABLET/MID (481–991px) — NORMALIZED TO DESKTOP INTENT
   ============================================ */

@media (min-width: 481px) and (max-width: 991px) {
    /* Force desktop header visible (not mobile header) */
    .ps-header:not(.ps-header--mobile) {
        display: block !important;
    }
    
    /* Promo bar — same height as desktop */
    .ps-noti {
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .ps-noti p {
        line-height: 20px !important;
        padding: 8px 35px 8px 0 !important;
        margin: 0 !important;
        font-size: 13px !important;
    }
    
    /* Header top — same height as desktop */
    .ps-header__top {
        min-height: 30px !important;
        padding: 5px 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Header middle — maintain vertical alignment, allow flex wrap if needed */
    .ps-header__middle {
        min-height: 80px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .ps-header__middle .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }
    
    /* Logo — same height as desktop */
    .ps-header .ps-logo {
        height: 80px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .ps-header .ps-logo img {
        max-width: 180px !important;
        height: auto !important;
        max-height: 80px !important;
    }
    
    /* Header right — maintain tap targets (44x44 minimum) */
    .ps-header__right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    .ps-header__right a,
    .ps-header__right .header-action-icon-2,
    .ps-header__right button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Search bar — FORCE VISIBLE and prevent collapse */
    /* Override new.css:14564-14566 which sets display:none */
    .ps-header .ps-header__search {
        display: flex !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        order: 3 !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ps-header__search form,
    .ps-header__search .ps-search-table {
        width: 100% !important;
        display: flex !important;
        flex: 1 1 100% !important;
    }
    
    .ps-header__search .input-group {
        width: 100% !important;
        display: flex !important;
        flex: 1 1 100% !important;
    }
    
    .ps-header__search .form-control {
        height: 44px !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        width: 100% !important;
        flex: 1 1 auto !important;
        display: block !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .ps-header__search .input-group-append {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Navigation bar — same height as desktop */
    .ps-navigation {
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .ps-navigation .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* ============================================
   MOBILE (≤480px) — NORMALIZED TO DESKTOP INTENT WITH MOBILE UX
   ============================================ */

@media (max-width: 480px) {
    /* Promo bar — same height, ensure rail alignment */
    .ps-noti {
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }
    
    .ps-noti p {
        line-height: 20px !important;
        padding: 8px 35px 8px 16px !important;
        margin: 0 !important;
        font-size: 12px !important;
    }
    
    /* Header top — same height */
    .ps-header__top {
        min-height: 30px !important;
        padding: 5px 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Header middle — stack layout for mobile, maintain vertical alignment */
    .ps-header__middle {
        min-height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .ps-header__middle .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Logo row — horizontal flex with icons */
    .ps-header__middle .container > .ps-logo,
    .ps-header__middle .container > .ps-header__right {
        display: flex !important;
        align-items: center !important;
    }
    
    .ps-header .ps-logo {
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }
    
    .ps-header .ps-logo img {
        max-width: 120px !important;
        height: auto !important;
        max-height: 60px !important;
    }
    
    /* Header right — maintain tap targets (44x44 minimum on clickable elements) */
    .ps-header__right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    /* Target actual clickable elements, not nested <i> icons */
    .ps-header__right a,
    .ps-header__right button,
    .ps-header__right .header-action-icon-2 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile header variant — tap targets on clickable elements */
    .ps-header--mobile .ps-header__right a,
    .ps-header--mobile .ps-header__right button,
    .ps-header--mobile a:not(.ps-menu--sticky),
    .ps-header--mobile button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Search bar — full width, maintain height */
    .ps-header__search {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .ps-header__search .form-control {
        height: 44px !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile header search — ensure visible and proper height */
    .ps-header--mobile .ps-header__search .form-control {
        height: 44px !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Navigation bar — same height, ensure rail alignment */
    .ps-navigation {
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    .ps-navigation .container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    /* Mobile header variant — same rules */
    .ps-header--mobile .ps-header__middle {
        min-height: auto !important;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    
    .ps-header--mobile .ps-header__middle .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .ps-header--mobile .ps-header__search {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ============================================
   END OF PHASE V1.2 — HEADER FIXATION
   ============================================ */