/**
 * mobile-luxury.css — Attiredom
 * Mobile-first luxury design enhancements.
 * Loaded last in header so it can override page-specific styles.
 * Theme: dark luxury (#1A0B0F), antique gold (#C6A75E), cream (#F5F1E8)
 */

/* ────────────────────────────────────────────────────────────────────────────
   0. CSS CUSTOM PROPERTIES (global)
──────────────────────────────────────────────────────────────────────────── */
:root {
  --gold:     #C6A75E;
  --gold-dim: rgba(198,167,94,0.25);
  --dark:     #1A0B0F;
  --darker:   #0E0E0E;
  --cream:    #F5F1E8;
  --cream-dim: rgba(245,241,232,0.65);
  --border:   rgba(198,167,94,0.2);
  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:   4px;
  --trans:    all 0.28s cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────────────────────────────────────────────────────────
   1. GLOBAL BASE — smooth scroll, selection colour, tap highlight
──────────────────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
* { -webkit-tap-highlight-color: rgba(198,167,94,0.15); box-sizing: border-box; }
::selection { background: rgba(198,167,94,0.3); color: #fff; }
img { max-width: 100%; height: auto; }

/* ────────────────────────────────────────────────────────────────────────────
   2. TYPOGRAPHY — fluid scale using clamp()
──────────────────────────────────────────────────────────────────────────── */
h1 { font-size: clamp(1.8rem, 5vw, 3.5rem);  }
h2 { font-size: clamp(1.4rem, 4vw, 2.5rem);  }
h3 { font-size: clamp(1.1rem, 3vw, 1.8rem);  }
p  { font-size: clamp(0.875rem, 2.5vw, 1rem); line-height: 1.7; }

/* ────────────────────────────────────────────────────────────────────────────
   3. GLOBAL BUTTON STYLES — touch-friendly 48px min-height
──────────────────────────────────────────────────────────────────────────── */
button, .btn, [role="button"] {
    min-height: 44px;
    font-family: var(--sans);
    letter-spacing: 0.05em;
}

/* ────────────────────────────────────────────────────────────────────────────
   4. NAVIGATION — mobile-optimised
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 968px) {
    .site-topbar,
    .site-nav-wrap {
        padding-left:  1rem !important;
        padding-right: 1rem !important;
    }
    .nav-logo { font-size: 1.5rem !important; }
    .nav-cart-count {
        min-width: 20px; height: 20px;
        font-size: 0.7rem !important;
    }
    /* Give the off-canvas nav a luxurious feel */
    .mobile-nav-menu {
        background: linear-gradient(180deg, #150C0F 0%, #0E0E0E 100%) !important;
        border-left: 1px solid var(--border) !important;
    }
    .mobile-nav-menu a {
        font-family: var(--serif) !important;
        font-size: 1.4rem !important;
        letter-spacing: 0.06em !important;
        color: var(--cream) !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid rgba(198,167,94,0.08) !important;
        transition: var(--trans) !important;
    }
    .mobile-nav-menu a:hover { color: var(--gold) !important; padding-left: 0.5rem !important; }
    .hamburger-btn {
        width: 42px; height: 42px;
        display: flex; align-items: center; justify-content: center;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius) !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   5. HOMEPAGE — hero, product grid, category cards
   NOTE: Detailed homepage rules are in assets/css/mobile-home.css (loaded
   via home.php). This section keeps only the minimal overrides needed by
   mobile-luxury.css that apply across non-homepage pages too.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Legacy hero classes (older templates) */
    .modern-hero { min-height: 85vh !important; padding: 1.5rem !important; }
    .hero-content { padding: 1.5rem 0 !important; }
    .hero-badge   { font-size: 0.7rem !important; }
    .hero-title   { font-size: clamp(2rem, 9vw, 3.5rem) !important; line-height: 1.1 !important; }
    .hero-subtitle { font-size: clamp(0.85rem, 3vw, 1.1rem) !important; }
    .hero-cta-group { flex-direction: column !important; gap: 0.85rem !important; }
    .hero-cta-group a { width: 100% !important; text-align: center !important; justify-content: center !important; }
    .hero-visual { display: none !important; }

    /* Products grid — 2 columns, compact Myntra-style */
    .products-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
        padding: 0 0.6rem !important;
    }
    .product-card-wrapper {
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    /* Homepage product image */
    .products-grid-modern .product-image-container {
        padding-top: 110% !important;
    }

    /* Product card info */
    .product-info-section { padding: 0.6rem 0.65rem 0.3rem !important; }
    .product-title-modern {
        font-size: 0.82rem !important;
        margin-bottom: 0.2rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .product-price-modern { font-size: 0.95rem !important; }
    .product-category-tag { font-size: 0.6rem !important; letter-spacing: 1px !important; }
    .product-rating-display { display: none !important; }

    /* Action buttons — stacked, compact */
    .product-actions-row {
        flex-direction: column !important;
        padding: 0.4rem 0.6rem 0.6rem !important;
        gap: 0.35rem !important;
    }
    .btn-add-cart-modern,
    .btn-buy-now-modern {
        padding: 0.6rem !important;
        font-size: 0.68rem !important;
        letter-spacing: 0.03em !important;
        min-height: 34px !important;
    }

    /* Category cards — 2×2 full-width grid */
    .category-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 3px !important;
    }
    .category-card-modern {
        border-radius: 0 !important;
        overflow: hidden !important;
        aspect-ratio: 2 / 3 !important; /* portrait — matches 1024×1536 mobile image */
        height: auto !important;
    }
    .category-content-modern h3 { font-size: 1rem !important; }
    .category-content-modern p  { display: none !important; }
    .category-arrow { width: 28px !important; height: 28px !important; font-size: 1rem !important; }

    /* Features strip — horizontal scroll (handled by mobile-home.css on homepage) */
    .features-strip .features-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Section headers */
    .section-title  { font-size: 1.35rem !important; }
    .section-link   { font-size: 0.72rem !important; }

    /* Sections padding */
    .products-section-modern { padding: 2rem 0 !important; }
    .category-section-modern { padding: 2rem 0 !important; }
}

@media (max-width: 420px) {
    /* Keep 2-col homepage product grid — matches Myntra-style on small phones */
    .products-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
    .category-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Only collapse to 1-col on extremely small screens */
@media (max-width: 320px) {
    .products-grid-modern {
        grid-template-columns: 1fr !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   6. SHOP PAGE — product grid, toolbar
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .shop-header-section { padding: 1.25rem 1rem !important; margin-bottom: 1.25rem !important; }
    .shop-main-layout    { padding: 0 0.75rem !important; gap: 1rem !important; }

    /* 2-column product grid — Myntra-style */
    .products-grid-shop {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Compact card image */
    .product-img-container {
        padding-top: 110% !important; /* Tall portrait for apparel */
    }

    /* Compact card details */
    .product-details-shop {
        padding: 0.65rem 0.75rem !important;
    }
    .product-name-shop {
        font-size: 0.88rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .price-shop      { font-size: 1rem !important; }
    .category-label-shop { font-size: 0.65rem !important; }
    .rating-row-shop { display: none !important; }

    /* Action buttons — stacked, compact */
    .product-actions-shop {
        padding: 0.5rem 0.65rem 0.65rem !important;
        gap: 0.4rem !important;
    }
    .add-to-cart-btn,
    .buy-now-btn {
        padding: 0.65rem !important;
        font-size: 0.72rem !important;
        letter-spacing: 0.03em !important;
        min-height: 36px !important;
        gap: 0.3rem !important;
    }
    .add-to-cart-btn svg,
    .buy-now-btn svg {
        width: 13px !important;
        height: 13px !important;
    }

    /* Toolbar */
    .shop-toolbar {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
        flex-wrap: wrap !important;
    }
    .results-count { font-size: 0.85rem !important; }
    .view-toggle   { display: none !important; } /* hide view toggle on mobile */
}

@media (max-width: 420px) {
    /* Keep 2-col shop grid on small phones too */
    .products-grid-shop {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.6rem !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   7. PRODUCT DETAIL — image, size grid, buy buttons
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .product-detail-layout,
    .product-page-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Main product image */
    .product-gallery-main img,
    .product-detail-image   img {
        width: 100% !important;
        height: auto !important;
        max-height: 70vw !important;
        object-fit: cover !important;
    }

    /* Thumbnails — horizontal scroll row */
    .product-thumbnails {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .product-thumbnails img {
        width: 64px !important;
        height: 64px !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    /* Size buttons — touch-friendly */
    .size-options,
    .size-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
    }
    .size-btn, .size-option {
        min-width: 52px !important;
        height: 48px !important;
        font-size: 0.9rem !important;
    }

    /* Add to cart + Buy Now — full-width stacked */
    .detail-actions,
    .product-cta-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .btn-add-detail,
    .btn-buy-detail,
    .detail-actions button,
    .product-cta-row button {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
    }

    /* Variant selector */
    .variants-section .variant-btn {
        min-width: 80px !important;
        padding: 0.6rem !important;
        font-size: 0.8rem !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   8. CART PAGE — items, totals
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cart-page-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .cart-container   { padding: 1rem !important; }
    .cart-page-wrapper { padding: 1rem !important; }

    /* Cart item — switch to vertical layout */
    .cart-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.85rem !important;
        padding: 1rem !important;
    }
    .cart-item-image {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
    }
    .cart-item-details { width: 100% !important; }

    /* Quantity controls — larger touch targets */
    .qty-btn { width: 40px !important; height: 40px !important; font-size: 1.1rem !important; }
    .qty-display { min-width: 44px !important; text-align: center !important; }

    /* Size change dropdown */
    .size-change-select { font-size: 0.9rem !important; padding: 0.5rem !important; }

    /* Order summary card */
    .cart-summary { padding: 1.5rem 1rem !important; }
    .checkout-btn { width: 100% !important; padding: 1.1rem !important; font-size: 1rem !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   9. CHECKOUT PAGE
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .checkout-layout { grid-template-columns: 1fr !important; }
    .checkout-form-section,
    .checkout-summary-section { padding: 1.25rem !important; }

    .form-row-2col { grid-template-columns: 1fr !important; gap: 0.75rem !important; }

    .checkout-form input,
    .checkout-form select,
    .checkout-form textarea {
        font-size: 16px !important; /* Prevents iOS zoom on focus */
        padding: 0.85rem !important;
    }

    .place-order-btn { width: 100% !important; padding: 1.1rem !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   10. ACCOUNT PAGES (order history, order detail, returns)
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Order history */
    .order-history-container,
    .account-container { padding: 1rem !important; }

    .order-card {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    .order-card-meta {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Order detail */
    .order-detail-layout { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .order-timeline { padding: 1rem !important; }
    .timeline-step  { padding: 0.75rem 0 !important; }

    /* Returns grid */
    .returns-grid { grid-template-columns: 1fr !important; gap: 1.5rem !important; }
    .returns-form-section,
    .returns-sidebar { padding: 1.25rem !important; }

    .return-pipeline { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; }
    .rp-step  { min-width: 60px; }
    .rp-label { font-size: 0.6rem !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   11. ADMIN PAGES
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .admin-layout { grid-template-columns: 1fr !important; }
    .admin-sidebar { display: none !important; } /* collapse on mobile */
    .admin-content { padding: 1rem !important; }

    /* Orders table — horizontal scroll */
    .orders-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    .admin-table { min-width: 620px !important; }
    .admin-table th, .admin-table td { padding: 8px !important; font-size: 0.8rem !important; }
    .status-select { font-size: 0.8rem !important; padding: 4px !important; }

    /* Products admin */
    .products-table-wrap { overflow-x: auto !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   12. CATEGORY PAGE
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .category-banner { height: 180px !important; }
    .category-banner h1 { font-size: clamp(1.4rem, 6vw, 2.5rem) !important; }
    .category-content { padding: 0 0.75rem !important; }
    .category-products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .card-image  { height: 180px !important; }
    .card-info   { padding: 0.75rem !important; }
    .card-info h3 { font-size: 0.9rem !important; }
    .card-price  { font-size: 1.1rem !important; }
    .category-toolbar {
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 0.75rem !important;
    }
    .card-actions { gap: 0.5rem !important; padding: 0 0.75rem 0.85rem !important; }
    .card-add-btn, .card-buy-btn { padding: 0.75rem !important; font-size: 0.78rem !important; }
    .breadcrumb-nav { padding: 0.75rem 1rem !important; font-size: 0.85rem !important; }
}
@media (max-width: 420px) {
    .category-products-grid { grid-template-columns: 1fr !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   13. PRODUCT IMAGE PORTRAIT RATIO (shop + category)
   Note: These containers use padding-top trick for intrinsic aspect ratio.
   Do NOT set both aspect-ratio AND padding-top — they conflict.
   Specific overrides are in sections 5 (homepage) and 6 (shop) above.
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .product-img-container img,
    .product-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: top center !important; /* Show faces/top of apparel */
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   14. TOAST NOTIFICATIONS — mobile position
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .royal-toast {
        bottom: 5rem !important;   /* above bottom navigation / cart bar */
        right:  0.75rem !important;
        left:   0.75rem !important;
        min-width: unset !important;
        font-size: 0.88rem !important;
        padding: 0.85rem 1.1rem !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   14b. MOBILE GENERAL POLISH
──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Prevent horizontal scroll from overflowing elements */
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Section header stacks on very small screens */
    .section-header {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    /* Cart toast notification — above any bottom chrome */
    #cartToast {
        bottom: 1rem !important;
        right: 0.75rem !important;
        left: 0.75rem !important;
        max-width: calc(100vw - 1.5rem) !important;
    }

    /* Badge in product cards: smaller text on 2-col grid */
    .product-badge-new,
    .product-badge-best {
        font-size: 0.65rem !important;
        padding: 0.3rem 0.6rem !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
    }

    /* Stock badges — shop page */
    .stock-badge-low,
    .stock-badge-out {
        font-size: 0.6rem !important;
        padding: 0.25rem 0.5rem !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
    }
}

/* ────────────────────────────────────────────────────────────────────────────
   15. LUXURY MICRO-ANIMATIONS (applies at all breakpoints)
──────────────────────────────────────────────────────────────────────────── */

/* Page fade-in on load */
main { animation: pageIn 0.4s ease both; }
@keyframes pageIn {
    from { opacity:0; transform: translateY(6px); }
    to   { opacity:1; transform: translateY(0); }
}

/* Product card lift on hover (desktop) */
@media (hover: hover) {
    .product-card-wrapper:hover,
    .category-product-card:hover,
    .product-card-shop:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(198,167,94,0.15) !important;
        transition: var(--trans) !important;
    }
}

/* Gold shimmer on primary buttons */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.buy-now-btn:hover::before,
.card-buy-btn:hover::before,
.btn-buy-now-modern:hover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
    background-size: 200% auto;
    animation: shimmer 1.2s linear infinite;
    pointer-events: none;
}

/* Skeleton loading pulse for images */
img[loading="lazy"]:not([src]) {
    background: linear-gradient(90deg, rgba(198,167,94,0.05) 25%, rgba(198,167,94,0.1) 50%, rgba(198,167,94,0.05) 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    min-height: 200px;
}
@keyframes skeletonPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Status badge pulse animation for active/in-progress statuses */
.status-badge.status-pending,
.order-status-pill.status-pending {
    animation: statusPulse 2.5s ease-in-out infinite;
}
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.65; }
}

/* Gold glow on focused inputs */
input:focus, select:focus, textarea:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(198,167,94,0.35) !important;
    border-color: rgba(198,167,94,0.6) !important;
    transition: box-shadow 0.2s, border-color 0.2s !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   16. PERFORMANCE — reduce repaints, contain layout
──────────────────────────────────────────────────────────────────────────── */
.product-card-wrapper,
.product-card-shop,
.category-product-card {
    contain: layout style;
    will-change: transform;
}
img[loading="lazy"] { content-visibility: auto; }