/* ================================================================
   DORVE.ID — Mobile-First Responsive Fix Layer
   Fixes: overflow, touch targets, small phones, tables, spacing
   Safe additions — no overrides to existing layout logic
   ================================================================ */

/* ── Global Mobile Safety ─────────────────────────────────────── */
html, body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Reinforce no-pinch-zoom via JS gesture restriction if needed, but CSS covers most */
}

*, *::before, *::after {
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ── Touch Target Minimum 44×44px ─────────────────────────────── */
.btn,
button,
[role="button"],
.nav-btn,
.nav-mobile-toggle,
.back-to-top,
.drawer-close,
.hero-arrow,
.gallery-thumb,
.cart-qty button,
.variant-btn,
.filter-tab,
.tab-btn,
.sidebar-nav a {
    min-height: 44px;
    min-width: 44px;
}

/* Buttons that are text-only / smaller — use padding instead */
.btn--sm { min-height: 38px; padding: 9px 16px; }

/* ── Font Scale — Fluid Typography (clamp) ────────────────────── */
:root {
    --h1-size: clamp(28px, 8vw, 48px);
    --h2-size: clamp(24px, 6vw, 36px);
    --h3-size: clamp(20px, 5vw, 28px);
    --body-size: clamp(14px, 2vw, 16px);
}

@media (max-width: 1024px) {
    body { font-size: 15px; }
}

@media (max-width: 768px) {
    body { font-size: 14.5px; }
    h1 { font-size: var(--h1-size) !important; }
    h2 { font-size: var(--h2-size) !important; }
}

@media (max-width: 480px) {
    body { font-size: 14px; }
    .text-xs, .text-sm { font-size: 11px !important; }
    /* Prevent iOS auto-zoom on inputs */
    input, select, textarea { font-size: 16px !important; }
}

/* ── Specific Flagship Optimizations (S24 & iPhone 14 Pro Max) ── */
@media (max-width: 430px) { /* iPhone 14 Pro Max range */
    .container { padding: 0 16px !important; }
    .hero-slide__content { padding: 24px 20px 48px !important; }
}

@media (max-width: 360px) { /* Samsung S24 / Small Android range */
    .container { padding: 0 12px !important; }
    .hero-slide__title { font-size: clamp(22px, 7vw, 28px) !important; }
    .hero-slide__cta { padding: 12px 24px !important; font-size: 12px !important; }
    .product-grid { gap: 8px !important; }
}

/* ── Prevent iOS input zoom (global) ─────────────────────────── */
@media screen and (max-width: 768px) {
    select,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    input[type="search"],
    textarea {
        font-size: 16px;
    }
}

/* ── Page Hero — mobile padding ───────────────────────────────── */
.page-hero {
    padding: 48px 20px !important;
}
@media (max-width: 768px) {
    .page-hero { padding: 32px 16px !important; }
    .page-hero h1 { font-size: clamp(22px, 6vw, 36px) !important; }
}
@media (max-width: 480px) {
    .page-hero { padding: 24px 14px !important; }
}

/* ── Products Layout Mobile ───────────────────────────────────── */
@media (max-width: 768px) {
    .products-layout {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 24px 16px !important;
    }
    .filters-sidebar { position: static !important; }
    
    /* Horizontal scrollable filter on mobile */
    .filter-chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
}

@media (max-width: 480px) {
    .products-layout { padding: 16px 12px !important; }
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .product-card:hover { transform: none !important; }
}

/* ── Product Detail Mobile ────────────────────────────────────── */
@media (max-width: 768px) {
    .product-detail-layout {
        grid-template-columns: 1fr !important;
        padding: 20px 16px 100px !important;
        gap: 24px !important;
    }
    .product-gallery { position: static !important; }
    .gallery-thumbs { grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important; }
    .product-title { font-size: clamp(20px, 5vw, 28px) !important; }
    .product-add-actions { flex-direction: column !important; }
    .product-add-actions .btn { width: 100% !important; }
}

@media (max-width: 480px) {
    .variant-btn { min-width: 40px !important; height: 40px !important; font-size: 12px !important; }
    .gallery-thumbs { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ── Cart Mobile ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cart-layout {
        grid-template-columns: 1fr !important;
        padding: 20px 16px 40px !important;
    }
    .cart-table { overflow-x: auto; display: block; width: 100%; }
    .cart-table thead { display: none; }
    .cart-table tbody tr {
        display: grid;
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid #E5DDD5;
    }
    .cart-table td { padding: 0 !important; border: none !important; }
    .cart-summary { position: static !important; }
}

@media (max-width: 480px) {
    .cart-layout { padding: 14px 12px 36px !important; }
}

/* ── Checkout Mobile ──────────────────────────────────────────── */
@media (max-width: 768px) {
    .checkout-layout {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        gap: 16px !important;
    }
    .checkout-sidebar { position: static !important; }
    .checkout-section-body { padding: 16px !important; }
    .form-row-2 { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
    .checkout-layout { padding: 12px 10px !important; }
}

/* ── Member Pages Mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
    .member-layout {
        grid-template-columns: 1fr !important;
        padding: 16px 14px 56px !important;
        gap: 16px !important;
    }
    .member-sidebar {
        position: static !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        border-radius: 8px !important;
    }
    .sidebar-profile { display: none !important; }
    .sidebar-nav {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 4px !important;
        padding: 8px !important;
        scrollbar-width: none !important;
    }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-nav a {
        flex-shrink: 0 !important;
        padding: 9px 14px !important;
        font-size: 12.5px !important;
        min-height: 40px !important;
        min-width: auto !important;
    }
    .sidebar-nav .divider { display: none !important; }
}

@media (max-width: 480px) {
    .member-layout { padding: 12px 10px 56px !important; }
    .member-content h1 { font-size: 20px !important; }
}

/* ── Dashboard Stats Grid ─────────────────────────────────────── */
@media (max-width: 768px) {
    .stats-grid,
    .stats,
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .stats-grid,
    .stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ── Order Table Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    .order-table-wrap,
    .orders-table-wrap,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table {
        min-width: 500px;
    }
}

/* ── Wallet / Transaction Table ───────────────────────────────── */
@media (max-width: 768px) {
    .wallet-header {
        flex-direction: column !important;
        gap: 12px !important;
        text-align: center !important;
    }
    .transaction-item {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
}

/* ── Footer Mobile ────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding-bottom: 36px !important;
    }
    .site-footer { padding-top: 40px !important; }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }
    .footer-newsletter { flex-direction: column !important; }
    .footer-newsletter button { width: 100% !important; }
}



/* ── Hero Slider Mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-slider .hero-slide {
        height: clamp(350px, 65vw, 550px) !important;
    }
    .hero-slide__content {
        padding: 32px 5% 48px !important;
        max-width: 90% !important;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .hero-slide__title { 
        font-size: var(--h1-size) !important; 
        line-height: 1.1 !important; 
        text-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    .hero-slide__sub { 
        font-size: 14px !important; 
        margin-bottom: 24px !important;
        opacity: 0.9;
    }
    .hero-slide__cta { 
        padding: 14px 28px !important; 
        font-size: 13px !important;
        align-self: center;
        width: auto !important;
    }
    .hero-arrows { display: none !important; }
}

@media (max-width: 480px) {
    .hero-slide__sub { display: none !important; }
    .hero-slide__content { padding: 20px 16px 36px !important; }
}

/* ── Category Grid Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
    .category-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .benefit-item { padding: 18px 12px !important; }
}

@media (max-width: 480px) {
    .benefits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
    .benefit-title { font-size: 13px !important; }
    .benefit-desc { font-size: 12px !important; }
}

/* ── Forms — Better Mobile Spacing ───────────────────────────── */
@media (max-width: 480px) {
    .form-group { margin-bottom: 14px !important; }
    .form-section-box-body,
    .checkout-section-body { padding: 14px !important; }
    .card { padding: 16px !important; }
}

/* ── Modal Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .modal-content,
    .modal-box {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
}

/* ── Address Book Mobile ──────────────────────────────────────── */
@media (max-width: 768px) {
    .address-grid,
    .addresses-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Safe area for notch phones ───────────────────────────────── */
@supports (padding: max(0px)) {
    .site-footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .sticky-atc {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .nav-mobile-drawer .drawer-footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* ── Scroll padding for sticky header ────────────────────────── */
html {
    scroll-padding-top: calc(var(--header-total, 112px) + 16px);
}

/* ── Focus visible for keyboard nav ──────────────────────────── */
:focus-visible {
    outline: 2px solid var(--gold, #B8966E);
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
    .site-header,
    .site-footer,
    .nav-mobile-toggle,
    .back-to-top,
    .sticky-atc,
    .dorve-toast-wrap,
    .floating-cart,
    .floating-feedback { display: none !important; }
    
    body { font-size: 12pt; color: #000; }
    a { color: #000; }
    .member-layout { grid-template-columns: 1fr !important; }
}

/* ================================================================
   AUTH PAGES — Full Mobile Fix (no media queries in original)
   ================================================================ */

.auth-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
    min-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 60px;
}

@media (max-width: 768px) {
    .auth-container {
        padding: 24px 16px 48px !important;
        margin: 0 auto !important;
    }
    .auth-card {
        padding: 32px 24px !important;
        border-radius: 12px !important;
    }
    .auth-title {
        font-size: 26px !important;
        margin-bottom: 8px !important;
    }
    .auth-subtitle {
        font-size: 13px !important;
        margin-bottom: 28px !important;
    }
    .btn-primary,
    .auth-card .btn-primary {
        padding: 14px 20px !important;
        font-size: 14px !important;
        min-height: 50px !important;
    }
    .form-input, .auth-card input {
        font-size: 16px !important; /* prevent iOS zoom */
        padding: 13px 14px !important;
    }
}

@media (max-width: 480px) {
    .auth-container { padding: 16px 12px 40px !important; }
    .auth-card { padding: 24px 18px !important; }
    .auth-title { font-size: 22px !important; }
}

/* ================================================================
   NEW COLLECTION PAGE — Mobile Fix
   ================================================================ */

@media (max-width: 768px) {
    .new-collection-hero,
    .collection-hero {
        padding: 40px 16px !important;
        min-height: auto !important;
    }
    .new-collection-hero h1,
    .collection-hero h1 { font-size: clamp(22px, 6vw, 36px) !important; }
    
    .collection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    .new-collection-hero,
    .collection-hero { padding: 28px 12px !important; }
    .collection-grid { gap: 8px !important; padding: 0 12px !important; }
}

/* ================================================================
   FAQ, TERMS, PRIVACY — Content Pages Mobile Fix
   ================================================================ */

@media (max-width: 768px) {
    .faq-container,
    .policy-container,
    .terms-container,
    .content-page-container {
        padding: 24px 16px 48px !important;
    }
    .faq-item,
    .accordion-item {
        padding: 14px 16px !important;
    }
    .faq-question,
    .accordion-header {
        font-size: 14px !important;
        padding-right: 32px !important;
    }
    .toc-sidebar,
    .page-toc {
        position: static !important;
        margin-bottom: 24px !important;
    }
    .two-col-layout,
    .content-layout-two {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
}

@media (max-width: 480px) {
    .faq-container,
    .policy-container,
    .terms-container { padding: 16px 12px 40px !important; }
}

/* ================================================================
   OUR STORY PAGE — Mobile Fix
   ================================================================ */

@media (max-width: 768px) {
    .story-layout,
    .our-story-layout {
        grid-template-columns: 1fr !important;
        padding: 24px 16px !important;
        gap: 24px !important;
    }
    .story-hero {
        padding: 40px 16px !important;
        min-height: auto !important;
    }
    .story-hero h1 { font-size: clamp(24px, 6vw, 40px) !important; }
    .timeline {
        padding-left: 20px !important;
    }
    .story-stats-grid,
    .milestone-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 480px) {
    .story-hero { padding: 28px 12px !important; }
    .team-grid { grid-template-columns: 1fr !important; }
    .story-stats-grid,
    .milestone-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ================================================================
   MEMBER — ADDRESS BOOK MOBILE
   ================================================================ */

@media (max-width: 768px) {
    .address-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
    .address-card { padding: 16px !important; }
    .address-actions { flex-wrap: wrap !important; gap: 8px !important; }
    .address-actions .btn { flex: 1 !important; min-width: 80px !important; }
    .add-address-form { padding: 16px !important; }
}

@media (max-width: 480px) {
    .address-actions { flex-direction: row !important; }
}

/* ================================================================
   MEMBER — WRITE REVIEW MOBILE
   ================================================================ */

@media (max-width: 768px) {
    .review-form-container { padding: 16px !important; }
    .star-rating { gap: 6px !important; }
    .star-rating label { width: 36px !important; height: 36px !important; font-size: 24px !important; }
    .review-product-info { flex-direction: column !important; gap: 12px !important; align-items: flex-start !important; }
    .review-product-img { width: 60px !important; height: 75px !important; }
}

/* ================================================================
   MEMBER — REVIEWS LIST MOBILE
   ================================================================ */

@media (max-width: 768px) {
    .review-card { padding: 14px 16px !important; }
    .review-header { flex-wrap: wrap !important; gap: 8px !important; }
    .review-product { flex-direction: column !important; gap: 10px !important; }
    .review-product-img { width: 56px !important; height: 70px !important; }
    .review-rating { font-size: 14px !important; }
}

/* ================================================================
   GLOBAL — Typography Small Screen Fixes
   ================================================================ */

@media (max-width: 480px) {
    /* Ensure badges/labels don't go below 11px visible */
    .badge, .status-badge,
    .badge--new, .badge--sale, .badge--hot {
        font-size: 10px !important;
        padding: 2px 7px !important;
    }
    
    /* Section pretitles */
    .section-pretitle { font-size: 10px !important; }
    
    /* Product card text */
    .product-card__name { font-size: 12.5px !important; }
    .product-card__price--current { font-size: 13.5px !important; }
    
    /* Section spacing tighter on small phones */
    .section { padding: 36px 0 !important; }
    .section--lg { padding: 44px 0 !important; }
    .container { padding: 0 12px !important; }
}

/* ================================================================
   FLOATING ELEMENTS — Mobile Position Fix
   ================================================================ */

/* Make sure floating cart/feedback don't overlap sticky ATC */
@media (max-width: 768px) {
    .floating-action-buttons {
        bottom: 24px !important;
        right: 16px !important;
        gap: 10px !important;
    }
    
    .floating-cart-btn {
        bottom: 90px !important;
    }
    
    /* If sticky-atc is visible, push floating up more */
    body.sticky-atc-visible .floating-cart-btn {
        bottom: 148px !important;
    }
    
    body.sticky-atc-visible .floating-action-buttons {
        bottom: 80px !important;
    }
}

/* ================================================================
   SCROLLBAR STYLING (where visible on desktop)
   ================================================================ */

@media (min-width: 769px) {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #C9B99A; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #9C9088; }
}

/* ── Marquee speed-up on mobile ───────────────────────────────── */
@media (max-width: 768px) {
    .announcement-content,
    .marquee-track {
        animation-duration: 12s !important;
    }
}
@media (max-width: 480px) {
    .announcement-content,
    .marquee-track {
        animation-duration: 9s !important;
    }
}