/**
 * V28 Mobile Font Sizes — Centralized
 * ─────────────────────────────────────────────────────
 * Single source of truth for all responsive font-size rules.
 * Layout rules remain in page-specific CSS files.
 *
 * Generated by Option C Hybrid refactor.
 * Breakpoints: 14 | Total rules: 143
 * Load order: after v28-typography.css and all page-specific CSS
 */

/* ═══════════════════════════════════════════════════════
   @media (min-width: 900px) and (max-width: 1199px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1199px) {
    /* ── Shop / Products ── */
    .v28-product-name { font-size: 16px; }
    .v28-product-meta { font-size: 12px; }
    .v28-product-price { font-size: 20px; }
    .v28-wear-it-btn { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════
   @media (min-width: 600px) and (max-width: 899px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 899px) {
    /* ── Shop / Products ── */
    .v28-product-name { font-size: 15px; }
    .v28-product-meta { font-size: 11px; }
    .v28-product-price { font-size: 18px; }
    .v28-wear-it-btn { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 1100px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    /* ── Header / Express Bar ── */
    .nav-links a { font-size: 15px; }
    .nav-links a.nav-express { font-size: 13px; }
    .nav-links a.nav-express .express-chip { font-size: 12px; padding: 4px 10px; }
    .lang-current { font-size: 13px; }
    .express-top-text { font-size: 12px; }
    .express-top-timer { font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 1024px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    /* ── Cart ── */
    .v28-cart-title { font-size: 32px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 860px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    /* ── Header / Express Bar ── */
    .mobile-menu-btn { font-size: 28px; }
    .express-top-text { font-size: 12px; }
    .express-top-timer { font-size: 12px; }
    .cart-badge { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* ── Typography / Global ── */
    .woocommerce-MyAccount-content > h2:first-of-type,
    .woocommerce-account .entry-title { font-size: 38px !important; }
    .woocommerce-MyAccount-navigation ul li a { font-size: 25px !important; }
    .woocommerce-MyAccount-navigation ul li.is-active a { font-size: 25px !important; }
    .v28-account-card h3,
    .v28-greeting { font-size: var(--v28-h5) !important; }
    .v28-stat-val { font-size: 38px !important; }
    .v28-stat-label { font-size: var(--v28-tiny) !important; }
    .v28-order-table td,
    .v28-order-table td a,
    .woocommerce-MyAccount-content .woocommerce-orders-table td { font-size: 20px !important; }
    .v28-order-table td::before,
    .woocommerce-MyAccount-content .woocommerce-orders-table td::before { font-size: 20px !important; }
    .v28-profile-card-title,
    .woocommerce-MyAccount-content fieldset legend,
    .woocommerce-MyAccount-content form.edit-account fieldset legend { font-size: 26px !important; }
    .v28-settings-label { font-size: 22px !important; }
    .v28-settings-desc { font-size: 20px !important; }
    /* Section headings unified to 26px */
    .woocommerce-Address-title h2,
    .woocommerce-MyAccount-content h3 { font-size: 26px !important; }
    /* Edit address buttons — hide "address" for space */
    .woocommerce-Address-title a.edit { font-size: 0 !important; line-height: 0; }
    .woocommerce-Address-title a.edit::after { font-size: 14px !important; display: inline; }
    .woocommerce-Address-title a.edit[href*="billing"]::after { content: 'Edit'; }
    .woocommerce-Address-title a.edit[href*="shipping"]::after { content: 'Edit'; }
    /* Uniform 20px for all non-editable display text */
    .woocommerce-Address address { font-size: 20px !important; }
    .v28-danger-desc { font-size: 20px !important; }
    .v28-danger-zone .v28-btn-danger { font-size: 20px !important; }
    .woocommerce-MyAccount-content .woocommerce-message,
    .woocommerce-MyAccount-content .woocommerce-info,
    .woocommerce-MyAccount-content .woocommerce-error { font-size: var(--v28-small) !important; }
    .woocommerce-account:not(.logged-in) #customer_login h2 { font-size: var(--v28-h4) !important; }
    .woocommerce-account:not(.logged-in) #customer_login .button { font-size: var(--v28-body) !important; }

    /* ── Checkout ── */
    body.woocommerce-page h1,
  body.woocommerce-page .v28-checkout-title { font-size: 28px !important; }
    .v28-step-label { font-size: 13px; }
    body.woocommerce-page #place_order { font-size: 17px !important; }
    body.woocommerce-page .woocommerce-checkout .order-total th,
  body.woocommerce-page .woocommerce-checkout .order-total td { font-size: 18px !important; }
    /* Checkout form fields — match My Account Profile font sizes */
    body.woocommerce-page .woocommerce-checkout .form-row label { font-size: 18px !important; }
    body.woocommerce-page .woocommerce-checkout .form-row input.input-text,
    body.woocommerce-page .woocommerce-checkout .form-row input[type="text"],
    body.woocommerce-page .woocommerce-checkout .form-row input[type="email"],
    body.woocommerce-page .woocommerce-checkout .form-row input[type="tel"],
    body.woocommerce-page .woocommerce-checkout .form-row select { font-size: 22px !important; }

    /* ── Checkout ── */
    body.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 18px !important; }
    body.woocommerce-order-received .woocommerce-order-overview li strong { font-size: 14px !important; }

    /* ── My Account ── */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a,
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { font-size: 25px !important; }
    .woocommerce-MyAccount-content .woocommerce-orders-table tbody th.woocommerce-orders-table__cell-order-number a { font-size: 1.1em !important; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 767px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* ── Typography / Global ── */
    .v28-garment-label { font-size: 15px !important; }
    .v28-variant-label { font-size: 15px !important; }
    .v28-variant-select { font-size: 16px !important; }
    .v28-express-label { font-size: 17px !important; }
    .express-title-line { font-size: 14px !important; }
    .express-sub-line { font-size: 12px !important; }
    .price-detail { font-size: 13px !important; }
    .v28-card-title,
    .v28-card-title a { font-size: 20px !important; }
    .v28-card-price { font-size: 24px !important; }
    .v28-qty-btn { font-size: 20px !important; }
    .v28-qty-input { font-size: 18px !important; }
    .v28-remove-item { font-size: 14px !important; }
    .v28-cart-summary th,
    .v28-cart-summary td { font-size: 18px !important; }
    .v28-cart-total-label,
    .v28-cart-total-value { font-size: 20px !important; }
    .wc-block-cart .wc-block-components-product-name { font-size: 20px !important; }
    .wc-block-components-product-metadata,
    .wc-block-components-product-metadata .wc-block-components-product-metadata__description p { font-size: 16px !important; }
    .wc-block-cart .wc-block-components-quantity-selector input { font-size: 18px !important; }
    .wc-block-components-totals-item__label,
    .wc-block-components-totals-item__value { font-size: 20px !important; }
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 24px !important; }
    .wc-block-components-checkout-step__title { font-size: 22px !important; }
    .wc-block-components-checkout-step__description { font-size: 18px !important; }
    .wc-block-components-text-input input,
    .wc-block-components-text-input label { font-size: 18px !important; }
    .wc-block-components-radio-control__label { font-size: 18px !important; }
    .wc-block-components-radio-control__description { font-size: 16px !important; }
    .wc-block-components-radio-control__secondary-label { font-size: 18px !important; }
    .v28-sidebar-title { font-size: 17px !important; }
    .v28-filter-label,
    .v28-filter-count { font-size: 16px !important; }
    .v28-filter-item label { font-size: 16px !important; }
    .woocommerce-result-count { font-size: 16px !important; }
    .express-top-text,
    .express-top-text strong { font-size: 13px !important; }
    .express-sub-text { font-size: 15px !important; }
    .express-top-timer,
    .timer-lbl { font-size: 13px !important; }
    .mobile-lang-label { font-size: 14px !important; }
    .v28-checkout-label { font-size: 16px !important; }
    .v28-checkout-input { font-size: 18px !important; }
    .v28-checkout-section-title { font-size: 22px !important; }
    .v28-order-review th,
    .v28-order-review td { font-size: 18px !important; }
    .v28-badge, .lang-badge,
    .express-badge, .onsale { font-size: 13px !important; }

    /* ── Section breathing room ── */
    .elementor-element-f4a52f4 { padding-top: 48px !important; padding-bottom: 36px !important; }
    .elementor-element-95b177a { padding-top: 48px !important; padding-bottom: 36px !important; }
    .elementor-element-d00a25b { padding-top: 32px !important; padding-bottom: 40px !important; }
    .elementor-element-e014aa6 { padding-top: 0 !important; padding-bottom: 40px !important; }
    .elementor-element-ea85fa2 { padding-top: 48px !important; padding-bottom: 36px !important; }

    /* ── Remove Elementor 32px side padding on TryOn & Express ── */
    .elementor-element-d62cb72,
    .elementor-element-1556b0f { padding-left: 0 !important; padding-right: 0 !important; }

    /* ── Cards: 12px margin from screen edges ── */
    .xpress-card,
    .tryon-card { margin-left: 12px !important; margin-right: 12px !important; }

    /* ── Express title: fill card width, badge bottom-aligned ── */
    .xpress-title { font-size: 6.5vw !important; width: 100% !important; display: flex !important; align-items: flex-end !important; white-space: nowrap !important; gap: 8px !important; }
    .xpress-title em { font-size: 12.5vw !important; padding: 3px 22px 6px !important; display: inline-block !important; }

    /* ── Section titles & labels ── */
    .section-title { font-size: clamp(22px, 5.5vw, 32px) !important; line-height: 1.2 !important; margin-bottom: 20px !important; }
    .section-label { font-size: 11px !important; letter-spacing: 2px !important; }
    .section-subtitle { font-size: clamp(14px, 3.5vw, 18px) !important; }

    /* ── No gap between TryOn and Express ── */
    .elementor-element-d00a25b { gap: 0 !important; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 640px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    /* ── Cart ── */
    .v28-cart-page td.product-name > a { font-size: 18px !important; }
    .v28-garment-label { font-size: 15px !important; }
    /* Variant row: all inline, stretched full width */
    .v28-variant-row {
        display: flex !important; flex-wrap: nowrap !important;
        gap: 6px !important; align-items: flex-end !important; width: 100% !important;
    }
    /* Remove right padding from name cell so selectors stretch edge-to-edge */
    .v28-cart-page tr.cart_item td.product-name { padding-right: 0 !important; }
    .v28-cart-page td.product-name > a,
    .v28-cart-page td.product-name > .v28-garment-label { padding-right: 24px; }
    /* Each group: label on top, stretch, centered */
    .v28-variant-row .v28-variant-group {
        display: flex !important; flex-direction: column !important;
        gap: 1px !important; flex: 1 1 0 !important; min-width: 0 !important;
        align-items: center !important;
    }
    /* Qty group: same flex as others */
    .v28-variant-row .v28-variant-group:last-child { flex: 1 1 0 !important; }
    /* Labels: tiny uppercase above selects, centered */
    .v28-variant-label {
        font-size: 11px !important; font-weight: 600 !important;
        text-transform: uppercase !important; letter-spacing: 0.5px !important;
        text-align: center !important; width: 100% !important;
    }
    /* Selects: full width, taller, centered text */
    .v28-variant-select {
        font-size: 16px !important; width: 100% !important; height: 40px !important;
        padding: 6px 28px 6px 10px !important; box-sizing: border-box !important;
        text-align: center !important; text-align-last: center !important;
    }
    /* Qty: match select height */
    .v28-qty-inline-group .quantity { height: 40px !important; width: 100% !important; justify-content: center !important; }
    .v28-qty-inline-group .quantity input.qty { font-size: 16px !important; height: 38px !important; width: 34px !important; }
    .v28-qty-inline-group .v28-qty-btn { font-size: 16px !important; height: 38px !important; width: 30px !important; min-width: 30px !important; }
    .v28-qty-inline-group { justify-content: center !important; width: 100% !important; }
    /* Express badge: slightly bigger */
    .v28-express-label .express-title-line { font-size: 12px !important; }
    .v28-express-label .express-sub-line { font-size: 10px !important; }
    .v28-express-toggle { padding: 6px 14px !important; }
    /* Price */
    .v28-line-total .price-main { font-size: 20px !important; }
    .v28-line-total .price-detail { font-size: 12px !important; }
    /* Bottom row: stay inline */
    .v28-cart-page tr.cart_item td.product-quantity {
        flex-wrap: nowrap !important; gap: 8px !important; align-items: center !important;
    }
    .v28-cart-page .cart_totals > h2 { font-size: 20px !important; }
    .v28-cart-page .cart_totals tr.order-total th,
  .v28-cart-page .cart_totals tr.order-total td { font-size: 20px !important; }
    .v28-cart-title { font-size: 28px; }

    /* ── Homepage Buttons ── */
    .v28-hero .v28-hero-btn-primary .elementor-button,
    .v28-hero .v28-hero-btn-secondary .elementor-button,
    .v28-hero-btn-primary,
    .v28-hero-btn-secondary { font-size: 26px !important; padding: 20px 32px !important; }
    .tryon-btn { font-size: 28px !important; padding: 22px 40px !important; }
    .btn-express, .btn-3d { font-size: 26px !important; padding: 20px 24px !important; }

    /* ── Phone Frame Full Width ── */
    .tryon-phone-frame { width: 100% !important; height: auto !important; aspect-ratio: 520 / 840; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 600px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* ── Footer ── */
    .v28-footer .footer-brand > p { font-size: 13px !important; }
    .v28-footer .footer-badge { font-size: 11px; }
    .v28-footer .footer-col a { font-size: 15px; }
    .v28-footer .footer-bottom .footer-copy { font-size: 12px; }
    .v28-footer .payment-icon { font-size: 11px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 599px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 599px) {
    /* ── Shop / Products ── */
    .v28-shop-header .section-title { font-size: clamp(24px, 6vw, 36px) !important; }
    .v28-shop-header .section-subtitle { font-size: clamp(14px, 3vw, 20px); }
    .v28-product-name { font-size: 14px; }
    .v28-product-meta { font-size: 10px; }
    .v28-product-price { font-size: 16px; }
    .v28-wear-it-btn { font-size: 11px; }
    .badge-lang { font-size: 8px; }
    .badge-express { font-size: 7px; }
    .v28-shop-count { font-size: 15px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 480px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    /* ── Typography / Global ── */
    .v28-stat-val { font-size: 33px !important; }
    .v28-stat-label { font-size: 17px !important; }
    .woocommerce-MyAccount-navigation ul li a { font-size: 23px !important; }

    /* ── Header / Express Bar ── */
    .mobile-menu-btn { font-size: 24px; }
    .express-top-text { font-size: 11px; }
    .express-top-timer { font-size: 11px; }

    /* ── Checkout ── */
    body.woocommerce-page h1,
  body.woocommerce-page .v28-checkout-title { font-size: 24px !important; }
    .v28-step-label { font-size: 12px; }
    .v28-step-circle { font-size: 12px; }

    /* ── Checkout ── */
    body.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 16px !important; }
    body.woocommerce-order-received .woocommerce-order-overview li { font-size: 10px !important; }
    body.woocommerce-order-received .woocommerce-order-overview li strong { font-size: 13px !important; }
    body.woocommerce-order-received .woocommerce-order-details h2 { font-size: 18px !important; }
    body.woocommerce-order-received .woocommerce-order-details table tbody td,
  body.woocommerce-order-received .woocommerce-order-details table tfoot th,
  body.woocommerce-order-received .woocommerce-order-details table tfoot td { font-size: 13px !important; }
    body.woocommerce-order-received .woocommerce-order-details table tfoot tr:nth-last-child(2) th,
  body.woocommerce-order-received .woocommerce-order-details table tfoot tr:nth-last-child(2) td { font-size: 15px !important; }

    /* ── My Account ── */
    .woocommerce-account .woocommerce-MyAccount-navigation ul li a,
  .woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { font-size: 23px !important; }

    /* ── Shop / Products ── */
    .v28-filter-toggle-btn { font-size: 14px; }
    .v28-shop-sort .woocommerce-ordering select,
    .v28-shop-sort select { font-size: 14px; }
    .v28-shop-page .woocommerce-pagination ul li a,
    .v28-shop-page .woocommerce-pagination ul li span { font-size: 14px; }

    /* ── Homepage Buttons ── */
    .v28-hero .v28-hero-btn-primary .elementor-button,
    .v28-hero .v28-hero-btn-secondary .elementor-button,
    .v28-hero-btn-primary,
    .v28-hero-btn-secondary { font-size: 24px !important; padding: 18px 28px !important; }
    .tryon-btn { font-size: 26px !important; padding: 20px 32px !important; }
    .btn-express, .btn-3d { font-size: 24px !important; padding: 20px 24px !important; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 400px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 400px) {
    /* ── Footer ── */
    .v28-footer .footer-brand > p { font-size: 12px !important; }
    .v28-footer .footer-col a { font-size: 14px; }
    .v28-footer .payment-icon { font-size: 10px; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-width: 380px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 380px) {
    /* ── Auth / Login ── */
    .v28-auth-tab { font-size: .84rem; }
    .v28-auth-heading h2 { font-size: 1.15rem; }
    .v28-auth-field input { font-size: .9rem; }
    .v28-auth-submit { font-size: .95rem; }
    .v28-auth-social-btn { font-size: .84rem; }
    .v28-auth-footer { font-size: .82rem; }

    /* ── Auth / Login ── */
    .v28-auth-page button.v28-auth-submit { font-size: .95rem; }
    .v28-auth-page button.v28-auth-social-btn { font-size: .84rem; }
    .v28-auth-page .v28-auth-field input[type="text"],
  .v28-auth-page .v28-auth-field input[type="email"],
  .v28-auth-page .v28-auth-field input[type="password"] { font-size: .9rem; }
}


/* ═══════════════════════════════════════════════════════
   @media (max-height: 500px) and (orientation: landscape)
   ═══════════════════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
    /* ── Auth / Login ── */
    .v28-auth-heading h2 { font-size: 1rem; }
    .v28-auth-field input { font-size: .88rem; }
    .v28-auth-submit { font-size: .9rem; }
    .v28-auth-social-btn { font-size: .78rem; }
    .v28-auth-tab { font-size: .78rem; }

    /* ── Auth / Login ── */
    .v28-auth-page button.v28-auth-submit { font-size: .9rem; }
    .v28-auth-page button.v28-auth-social-btn { font-size: .78rem; }
    .v28-auth-page .v28-auth-field input[type="text"],
  .v28-auth-page .v28-auth-field input[type="email"],
  .v28-auth-page .v28-auth-field input[type="password"] { font-size: .88rem; }
}

/* ═══════════════════════════════════════════════════════
   Mobile Logo — scale down for small viewports
   ═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .logo-img {
        height: 45px !important;
        width: auto !important;
    }
}


/* ═══════════════════════════════════════════════════════
   Mobile Header Icons — +15% for better tap targets
   SVGs: 20px → 25px  |  Hamburger ☰: 22px → 27px
   ═══════════════════════════════════════════════════════ */
@media (max-width: 860px) {
    .nav-right .nav-icon svg {
        width: 25px !important;
        height: 25px !important;
    }
    .mobile-menu-btn {
        font-size: 27px !important;
    }
}


/* ═══════════════════════════════════════════════════════
   Mobile Language Switcher — Inline abbreviations
   ═══════════════════════════════════════════════════════ */

/* Hide the "LANGUAGE" label — pills are self-explanatory */
.mobile-lang-label {
    display: none !important;
}

/* Row layout instead of vertical stack */
.mobile-lang-list {
    flex-direction: row !important;
    gap: 6px !important;
    justify-content: center;
}

/* Pill styling */
.mobile-lang-list a {
    padding: 8px 14px !important;
    border-radius: 20px;
    background: rgba(54, 48, 48, 0.06);
    font-size: 13px !important;
    font-weight: 600;
    font-family: 'Outfit', sans-serif;
    color: #363030;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

/* Active language = lime */
.mobile-lang-list a.active {
    background: #C1E53E !important;
    color: #363030 !important;
}

/* Hide flags, full names, and checkmarks */
.mobile-lang-list a .flag-img,
.mobile-lang-list a span {
    display: none !important;
}

/* Show 2-letter abbreviations via ::after */
.mobile-lang-list a[href*="/nl/"]::after { content: "NL"; }
.mobile-lang-list a[href*="/fr/"]::after { content: "FR"; }
.mobile-lang-list a[href*="/de/"]::after { content: "DE"; }
.mobile-lang-list a:not([href*="/nl/"]):not([href*="/fr/"]):not([href*="/de/"])::after { content: "EN"; }