/* ============================================================
   PERCENT PERFUME — Mobile Optimization (Phase 6.1)
   Complete rewrite — 100% mobile-first
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1. ROOT — Safe areas + constants
   ═══════════════════════════════════════════════════════════ */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --touch-min: 44px;
  --header-h-mobile: 60px;
}

/* ═══════════════════════════════════════════════════════════
   2. BASE — Prevent zoom, 100dvh, tap highlight
   ═══════════════════════════════════════════════════════════ */
html{
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-size-adjust: 100%;
}

body{
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none;
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Prevent zoom on focus in iOS */
input, select, textarea{
  font-size: 16px;
}

/* Better touch scrolling */
*{
  -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════
   3. TOUCH DEVICES — Remove hover effects
   ═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse){
  button:hover, a:hover, .product-card:hover, .qa-btn:hover, .icon-btn:hover{
    transform: none !important;
  }
  
  .product-card .add-to-cart{
    opacity: 1 !important;
    transform: none !important;
  }
  
  .product-card .quick-actions{
    opacity: 1 !important;
    transform: none !important;
  }
  
  .product-card .img-dots{
    opacity: 1 !important;
  }
  
  .tilt-card{
    transform: none !important;
  }
  
  .cursor-dot, .cursor-ring{
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   4. TAP TARGETS — Minimum 44x44
   ═══════════════════════════════════════════════════════════ */
button, a, [role="button"], input[type="submit"]{
  min-height: var(--touch-min);
}

@media (max-width: 768px){
  .icon-btn{
    width: 44px;
    height: 44px;
  }
  
  .lang-switch{
    padding: 12px 20px;
    font-size: 0.85rem;
  }
  
  .add-to-cart, .add-to-cart-main{
    min-height: 52px;
    font-size: 1rem;
  }
  
  .qty-stepper button, .qty-ctrl button{
    min-width: 40px;
    min-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════
   5. HEADER — Sticky mobile header
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  header{
    padding: 12px 0 !important;
    padding-top: calc(12px + var(--safe-top)) !important;
    background: rgba(250, 248, 243, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(201, 169, 97, 0.2);
  }
  
  .nav-container{
    padding-left: 14px;
    padding-right: 14px;
  }
  
  .brand-mark{
    width: 38px !important;
    height: 38px !important;
  }
  
  .brand-name{
    font-size: 1.05rem !important;
    letter-spacing: 2px !important;
  }
  
  .brand-sub{
    font-size: 0.48rem !important;
    letter-spacing: 3px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   6. NAVIGATION — Mobile slide-in menu
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .menu-toggle{
    display: flex !important;
  }
  
  .nav-links{
    position: fixed;
    top: 0;
    inset-inline-end: 0;
    width: 0;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    padding: calc(80px + var(--safe-top)) 20px calc(30px + var(--safe-bottom));
    background: rgba(250, 248, 243, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-inline-start: 1px solid rgba(10, 10, 10, 0.08);
    box-shadow: -18px 0 48px rgba(10, 10, 10, 0.18);
    overflow: hidden;
    z-index: 1300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease,
                visibility 0.2s ease;
  }
  
  .nav-links.active{
    display: flex;
    width: min(84vw, 320px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .nav-links a{
    width: 100%;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 1.15rem;
    text-align: start;
    transition: background 0.2s ease;
  }
  
  .nav-links a::after{
    display: none;
  }
  
  .nav-links a:active{
    background: rgba(201, 169, 97, 0.12);
  }
}

/* ═══════════════════════════════════════════════════════════
   7. PRODUCT CARDS — 2-column grid
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .products-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  
  .product-card{
    padding: 12px !important;
    border-radius: 14px !important;
  }
  
  .product-media, .product-card .product-media{
    height: 160px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  
  .product-media .media-placeholder{
    width: 60px !important;
    height: 60px !important;
  }
  
  .product-title, .product-card .product-title-ar{
    font-size: 0.92rem !important;
    line-height: 1.3 !important;
  }
  
  .product-sub, .product-title-en{
    font-size: 0.72rem !important;
  }
  
  .price-now, .product-card .price-now{
    font-size: 1rem !important;
  }
  
  .product-card .add-to-cart{
    padding: 12px !important;
    min-height: 44px !important;
    font-size: 0.85rem !important;
  }
  
  .notes{
    display: none !important;
  }
  
  .stars{
    font-size: 0.7rem !important;
  }
}

@media (max-width: 480px){
  .products-grid{
    gap: 10px !important;
  }
  
  .product-card{
    padding: 10px !important;
  }
  
  .product-media, .product-card .product-media{
    height: 140px !important;
  }
  
  .product-title, .product-card .product-title-ar{
    font-size: 0.85rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   8. CART DRAWER — Full-screen on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .cart-drawer{
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .cart-head{
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-top));
  }
  
  .cart-body{
    padding: 16px 20px;
  }
  
  .cart-foot{
    padding: 16px 20px;
    padding-bottom: calc(16px + var(--safe-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   9. MODALS — Full-screen on mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .modal, .success-modal, .admin-access-modal{
    padding: 0 !important;
  }
  
  .modal-card, .success-card{
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  
  .modal-head{
    border-radius: 0 !important;
    padding: 16px 20px !important;
    padding-top: calc(16px + var(--safe-top)) !important;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  
  .modal-body{
    padding: 20px !important;
  }
  
  .modal-foot{
    border-radius: 0 !important;
    padding: 16px 20px !important;
    padding-bottom: calc(16px + var(--safe-bottom)) !important;
    position: sticky;
    bottom: 0;
  }
  
  .modal-foot .btn-sm{
    flex: 1;
    min-height: 48px;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════
   10. FORMS — Mobile-friendly inputs
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .form-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .form-input, .form-select, .form-textarea{
    padding: 14px 16px !important;
    font-size: 16px !important;
    min-height: 52px !important;
    border-radius: 12px !important;
  }
  
  .form-textarea{
    min-height: 100px !important;
  }
  
  .payment-options{
    grid-template-columns: 1fr !important;
  }
  
  .payment-option-inner{
    padding: 16px !important;
    min-height: 72px;
  }
}

/* ═══════════════════════════════════════════════════════════
   11. STICKY ADD-TO-CART (product page)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .qty-add-row{
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .qty-selector{
    width: 100%;
    justify-content: space-between;
    padding: 6px;
  }
  
  .qty-selector input{
    flex: 1;
    min-width: 60px;
    font-size: 1.1rem;
  }
  
  .add-to-cart-main{
    width: 100%;
    min-height: 56px;
    font-size: 1.05rem;
  }
  
  .wishlist-btn{
    width: 100% !important;
    height: 52px !important;
    border-radius: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   12. ADMIN — Mobile optimizations
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .sidebar::before{
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 5, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none;
  }
  
  .sidebar.open::before{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .sidebar{
    width: min(85vw, 300px) !important;
    padding-top: var(--safe-top);
  }
  
  .sidebar-nav{
    padding: 12px 10px !important;
  }
  
  .nav-btn{
    padding: 14px 16px !important;
    min-height: 48px;
    font-size: 0.95rem !important;
  }
  
  .nav-btn i{
    font-size: 1.05rem !important;
    width: 24px !important;
  }
  
  .admin-main{
    padding: 16px 14px 60px !important;
    padding-top: calc(16px + var(--safe-top)) !important;
  }
  
  .top-bar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 18px;
  }
  
  .top-bar h1{
    font-size: 1.3rem !important;
    line-height: 1.2;
  }
  
  .top-actions{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  
  .refresh-btn, .view-site-btn{
    min-height: 44px;
    justify-content: center;
    font-size: 0.85rem;
  }
  
  .kpi-grid{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  
  .kpi-card{
    padding: 14px !important;
    border-radius: 14px !important;
  }
  
  .kpi-value{
    font-size: 1.5rem !important;
  }
  
  .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .data-table{
    min-width: 640px;
    font-size: 0.85rem !important;
  }
  
  .data-table th, .data-table td{
    padding: 12px 14px !important;
  }
  
  .filters-bar{
    padding: 12px 14px !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .search-field{
    width: 100%;
    min-width: 100%;
  }
  
  .filter-chips{
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  
  .filter-chip{
    flex-shrink: 0;
    padding: 9px 16px !important;
    font-size: 0.78rem !important;
  }
  
  .card{
    border-radius: 16px !important;
    margin-bottom: 16px !important;
  }
  
  .card-head{
    padding: 14px 16px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .card-body{
    padding: 16px !important;
  }
  
  .dash-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .chart-bars{
    height: 160px !important;
  }
  
  .member-info-grid{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .info-field input, .info-field textarea, .info-field select{
    font-size: 16px !important;
    min-height: 44px;
  }
  
  .settings-grid{
    grid-template-columns: 1fr !important;
  }
  
  .tabs-nav{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .tab-btn{
    flex-shrink: 0;
    padding: 12px 16px !important;
    min-height: 44px;
  }
  
  .config-grid{
    grid-template-columns: 1fr !important;
  }
  
  .points-action-panel{
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. FOOTER
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  footer{
    padding: 40px 0 24px;
    padding-bottom: calc(24px + var(--safe-bottom));
  }
  
  .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
}

/* ═══════════════════════════════════════════════════════════
   14. TOASTS + TO-TOP — Safe bottom positioning
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .toast{
    inset-inline-start: 16px !important;
    inset-inline-end: 16px !important;
    bottom: calc(20px + var(--safe-bottom)) !important;
    max-width: none;
  }
  
  .to-top{
    bottom: calc(18px + var(--safe-bottom)) !important;
    inset-inline-end: 18px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   15. PERCENT PRIVÉ — Mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .prive-hero{
    padding-top: calc(120px + var(--safe-top)) !important;
    padding-bottom: 60px !important;
    min-height: auto;
  }
  
  .prive-hero h1{
    font-size: 2.2rem !important;
  }
  
  .prive-login{
    padding: 26px 20px 22px !important;
    border-radius: 20px !important;
  }
  
  .prive-member-card{
    padding: 22px 18px !important;
    border-radius: 20px !important;
  }
  
  .prive-points-value{
    font-size: 2.2rem !important;
  }
  
  .prive-mini-stats{
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  
  .prive-tiers-grid{
    grid-template-columns: 1fr !important;
  }
  
  .prive-rewards-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  
  .prive-member-grid{
    grid-template-columns: 1fr !important;
  }
  
  .prive-points-wrap{
    text-align: center !important;
  }
  
  .prive-member-actions{
    justify-content: center !important;
  }
  
  .prive-steps-grid{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px){
  .prive-rewards-grid{
    grid-template-columns: 1fr !important;
  }
  
  .prive-hero h1{
    font-size: 1.9rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   16. HERO / HOME
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .hero{
    padding-top: calc(110px + var(--safe-top)) !important;
    padding-bottom: 60px !important;
    min-height: auto;
  }
  
  .hero-title{
    font-size: 2.2rem !important;
  }
  
  .hero-actions{
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }
  
  .hero-actions .btn{
    width: 100%;
  }
  
  .hero-visual{
    min-height: 300px;
  }
  
  .hero-card{
    width: 250px;
    height: 300px;
  }
  
  .hero-card svg{
    width: 140px;
    height: 140px;
  }
  
  .stats{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  
  .collections-grid,
  .story-wrap,
  .loyalty-grid{
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  
  .section-header h2{
    font-size: 1.8rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   17. CATEGORY PAGES (women/men)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  .cat-hero{
    padding-top: calc(110px + var(--safe-top)) !important;
    padding-bottom: 50px !important;
    min-height: auto;
  }
  
  .cat-hero h1{
    font-size: 2rem !important;
  }
  
  .cat-icon-badge{
    width: 72px;
    height: 72px;
  }
  
  .cat-icon-badge i{
    font-size: 1.7rem;
  }
  
  .toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px 16px;
  }
  
  .toolbar-left{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .filter-chips{
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 6px;
  }
  
  .chip{
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 0.82rem;
  }
}

/* ═══════════════════════════════════════════════════════════
   18. PRODUCT PAGE (product.html)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px){
  .product-hero{
    grid-template-columns: 1fr !important;
    gap: 30px;
  }
  
  .gallery{
    position: relative !important;
    top: 0 !important;
  }
  
  .product-name-ar{
    font-size: 1.5rem !important;
  }
  
  .product-name-en{
    font-size: 1rem !important;
  }
  
  .price-current{
    font-size: 2rem !important;
  }
  
  .review-summary{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .tabs-nav{
    gap: 0;
    overflow-x: auto;
  }
  
  .tab-btn{
    padding: 12px 16px !important;
    font-size: 0.85rem !important;
  }
  
  .tab-content{
    padding: 20px 18px !important;
  }
  
  .trust-row{
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   19. SKIP-TO-CONTENT (accessibility)
   ═══════════════════════════════════════════════════════════ */
.skip-to-content{
  position: fixed;
  top: -100px;
  inset-inline-start: 12px;
  background: #0a0a0a;
  color: #c9a961 !important;
  padding: 14px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.9rem;
  z-index: 99999;
  transition: top 0.3s ease;
  text-decoration: none !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(201, 169, 97, 0.5);
}

.skip-to-content:focus,
.skip-to-content:focus-visible{
  top: calc(12px + var(--safe-top));
  outline: 3px solid #e8d4a2 !important;
}

/* ═══════════════════════════════════════════════════════════
   20. REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   21. LANDSCAPE PHONES
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape){
  .hero, .cat-hero{
    padding-top: 80px !important;
    min-height: auto !important;
  }
  
  .hero-visual{
    min-height: 200px !important;
  }
  
  .hero-card{
    width: 180px !important;
    height: 200px !important;
  }
  
  .nav-links{
    padding-top: 60px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   22. TABLET (769-1024)
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px){
  .container{
    width: min(100% - 40px, 1240px);
  }
  
  .products-grid{
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .admin-layout{
    grid-template-columns: 240px 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════
   23. WISHLIST DRAWER — Mobile
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px){
  .wishlist-drawer{
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .wishlist-head{
    padding: 16px 20px;
    padding-top: calc(16px + var(--safe-top));
  }
  
  .wishlist-body{
    padding: 16px 20px;
  }
  
  .wishlist-foot{
    padding: 16px 20px;
    padding-bottom: calc(16px + var(--safe-bottom));
  }
}

/* ═══════════════════════════════════════════════════════════
   CART DRAWER MOBILE FIX — Beautiful & Functional
   ═══════════════════════════════════════════════════════════ */

/* Base drawer styling — all screens */
.cart-drawer{
  position: fixed !important;
  top: 0 !important;
  inset-inline-end: 0 !important;
  height: 100vh !important;
  height: 100dvh !important;
  width: min(420px, 92vw) !important;
  z-index: 99999 !important;
  background: #faf8f3 !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(105%) !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: -30px 0 70px rgba(0, 0, 0, 0.3) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

html[dir="ltr"] .cart-drawer{
  inset-inline-end: auto !important;
  inset-inline-start: 0 !important;
  transform: translateX(-105%) !important;
}

.cart-drawer.open{
  transform: translateX(0) !important;
}

html[dir="ltr"] .cart-drawer.open{
  transform: translateX(0) !important;
}

/* Header */
.cart-drawer .cart-head{
  padding: 20px 24px !important;
  padding-top: calc(20px + var(--safe-top, 0px)) !important;
  background: linear-gradient(135deg, #0a0a0a, #16161a) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

.cart-drawer .cart-head h3{
  font-size: 1.15rem !important;
  color: #c9a961 !important;
  font-family: "Almarai", sans-serif !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
}

.cart-drawer .cart-head h3 i{
  font-size: 1.05rem !important;
  color: #c9a961 !important;
}

.cart-drawer .cart-head button,
.cart-drawer #cartClose{
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(201, 169, 97, 0.3) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
}

.cart-drawer .cart-head button:hover,
.cart-drawer #cartClose:hover{
  background: #c9a961 !important;
  color: #0a0a0a !important;
  transform: rotate(90deg) !important;
}

/* Body */
.cart-drawer .cart-body{
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 18px 20px !important;
  overscroll-behavior: contain !important;
}

/* Empty state */
.cart-drawer .cart-empty{
  text-align: center !important;
  padding: 50px 20px !important;
  color: #6b6459 !important;
}

.cart-drawer .cart-empty i{
  font-size: 3rem !important;
  color: rgba(201, 169, 97, 0.4) !important;
  margin-bottom: 18px !important;
  display: block !important;
}

.cart-drawer .cart-empty p{
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

/* Cart item */
.cart-drawer .cart-item{
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08) !important;
  animation: cartSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@keyframes cartSlideIn{
  from{ opacity: 0; transform: translateX(20px); }
  to{ opacity: 1; transform: translateX(0); }
}

.cart-drawer .cart-item:last-child{
  border-bottom: none !important;
}

.cart-drawer .cart-item-thumb{
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
  background: linear-gradient(150deg, #0a0a0a, #1a1a1a) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #c9a961 !important;
  overflow: hidden !important;
  position: relative !important;
}

.cart-drawer .cart-item-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  position: relative !important;
  z-index: 2 !important;
}

.cart-drawer .cart-item-info{
  flex: 1 !important;
  min-width: 0 !important;
}

.cart-drawer .cart-item-info strong{
  display: block !important;
  font-size: 0.92rem !important;
  color: #0a0a0a !important;
  font-weight: 800 !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.cart-drawer .cart-item-info > span{
  font-size: 0.85rem !important;
  color: #a8874a !important;
  font-weight: 800 !important;
}

.cart-drawer .qty-ctrl{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 8px !important;
}

.cart-drawer .qty-ctrl button{
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(10, 10, 10, 0.15) !important;
  background: transparent !important;
  color: #0a0a0a !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  padding: 0 !important;
  font-size: 0.85rem !important;
}

.cart-drawer .qty-ctrl button:hover:not(:disabled){
  background: #0a0a0a !important;
  color: #c9a961 !important;
  border-color: #0a0a0a !important;
}

.cart-drawer .qty-ctrl button:disabled{
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

.cart-drawer .qty-ctrl span{
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  min-width: 22px !important;
  text-align: center !important;
  color: #0a0a0a !important;
}

.cart-drawer .cart-remove{
  background: transparent !important;
  border: none !important;
  color: #c8c2b5 !important;
  cursor: pointer !important;
  padding: 8px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
  flex-shrink: 0 !important;
}

.cart-drawer .cart-remove:hover{
  background: rgba(185, 28, 28, 0.1) !important;
  color: #b91c1c !important;
  transform: scale(1.1) !important;
}

/* Footer */
.cart-drawer .cart-foot{
  padding: 18px 22px !important;
  padding-bottom: calc(18px + var(--safe-bottom, 0px)) !important;
  border-top: 1px solid rgba(10, 10, 10, 0.08) !important;
  background: #ffffff !important;
  flex-shrink: 0 !important;
}

.cart-drawer .cart-total{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  font-size: 1rem !important;
}

.cart-drawer .cart-total strong{
  color: #a8874a !important;
  font-size: 1.3rem !important;
  font-family: "Playfair Display", serif !important;
}

.cart-drawer .cart-foot .btn{
  width: 100% !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 24px !important;
  border-radius: 12px !important;
  background: linear-gradient(120deg, #c9a961, #e8d4a2, #c9a961) !important;
  background-size: 200% auto !important;
  color: #0a0a0a !important;
  border: none !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 18px rgba(201, 169, 97, 0.3) !important;
}

.cart-drawer .cart-foot .btn:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px rgba(201, 169, 97, 0.4) !important;
}

/* Overlay */
.overlay{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(5, 5, 5, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.4s ease, visibility 0.4s ease !important;
  z-index: 99998 !important;
}

.overlay.show{
  opacity: 1 !important;
  visibility: visible !important;
}

/* ─── MOBILE OVERRIDES (max-width: 640px) ─── */
@media (max-width: 640px){
  .cart-drawer{
    width: 100% !important;
    max-width: 100vw !important;
  }

  .cart-drawer .cart-head{
    padding: 16px 20px !important;
    padding-top: calc(16px + var(--safe-top, 0px)) !important;
  }

  .cart-drawer .cart-head h3{
    font-size: 1.05rem !important;
  }

  .cart-drawer .cart-body{
    padding: 16px 18px !important;
  }

  .cart-drawer .cart-foot{
    padding: 16px 18px !important;
    padding-bottom: calc(16px + var(--safe-bottom, 0px)) !important;
  }

  .cart-drawer .cart-foot .btn{
    min-height: 56px !important;
    font-size: 1rem !important;
  }

  .cart-drawer .cart-total strong{
    font-size: 1.4rem !important;
  }

  .cart-drawer .cart-item{
    padding: 12px 0 !important;
    gap: 12px !important;
  }

  .cart-drawer .cart-item-thumb{
    width: 60px !important;
    height: 60px !important;
  }

  .cart-drawer .cart-item-info strong{
    font-size: 0.88rem !important;
  }
}

/* Very small phones (max-width: 380px) */
@media (max-width: 380px){
  .cart-drawer .cart-head{
    padding: 14px 16px !important;
    padding-top: calc(14px + var(--safe-top, 0px)) !important;
  }

  .cart-drawer .cart-body{
    padding: 14px 16px !important;
  }

  .cart-drawer .cart-foot{
    padding: 14px 16px !important;
    padding-bottom: calc(14px + var(--safe-bottom, 0px)) !important;
  }

  .cart-drawer .cart-item-thumb{
    width: 54px !important;
    height: 54px !important;
  }
}

/* Ensure cart button in header is always visible */
@media (max-width: 768px){
  #cartBtn, .icon-btn[aria-label="Cart"]{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   END CART DRAWER MOBILE FIX
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   PHASE 6.6 — Performance Optimizations (Global)
   ═══════════════════════════════════════════════════════════ */

/* Force lazy loading behavior on below-fold sections */
.related-section,
.testimonials,
.newsletter,
.footer-grid,
.tabs-section{
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* Reduce paint for off-screen images */
img{
  decoding: async;
}

/* Ensure images inside cards do not block layout */
.product-media,
.cart-item-thumb,
.order-item-thumb,
.wishlist-thumb,
.compact-thumb{
  contain: layout paint;
}

/* Reduce motion cost on animations */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto !important;
  }
}

/* Smooth font loading */
body{
  text-rendering: optimizeSpeed;
}

/* Prevent CLS (layout shift) for lazy images */
.product-media img,
.cart-item-thumb img{
  min-height: 100%;
}

/* ═══ END PHASE 6.6 PERF ═══ */