/* Shared responsive layout: one spacing contract for navigation and purchase bars. */
:root { --frefta-nav-clearance: 0px; --frefta-bottom-space: 0px; --frefta-gutter: 16px; }
html { scroll-padding-bottom: calc(var(--frefta-bottom-space) + 16px); }
body .product-media img,
body .card .media img,
body .child-card-media img,
body .promo-category-media img,
body .related-card .image img,
body .product-gallery .thumb img,
body .thumb > img,
body .thumb > a > img {
    width: 100%; height: 100%; max-width: 100%; object-fit: contain !important;
}
body .product-media, body .card .media, body .child-card-media { overflow: hidden; }
body .product-card:hover .product-media img,
body .card:hover .media img,
body .child-card:hover .child-card-media img { transform: none; }
body .category-card-image { background-size: contain !important; }
body .product-gallery .gallery-media { object-fit: contain !important; }
body .product-grid > *, body .layout > *, body .category-grid > * { min-width: 0; }
body .product-description-content img { max-width: 100%; height: auto; }
@media (max-width: 900px) {
    :root { --frefta-gutter: clamp(12px, 4vw, 20px); }
    html body, html body.product-detail-page.has-sticky-atc, html body.checkout-page {
        padding-bottom: var(--frefta-bottom-space) !important;
    }
    body > .shell, body > main.shell, body.product-detail-page > .shell,
    body.checkout-page > .shell, body > .page-shell, body > .policy-shell,
    body > .order-container, body > .hero-wrap, body > .section,
    body .frefta-public-header .site-header-inner {
        width: calc(100% - var(--frefta-gutter) * 2) !important;
        max-width: 1280px !important;
        margin-left: auto !important; margin-right: auto !important;
    }
    body .shell .section, body .shell .builder-section, body .shell .hero-wrap {
        width: 100% !important; max-width: 100% !important;
        margin-left: 0 !important; margin-right: 0 !important;
    }
    body .shell, body .page-shell, body .policy-shell { padding-left: 0 !important; padding-right: 0 !important; }
    body .hero-wrap { gap: 16px !important; }
    body .hero-card { padding: clamp(20px, 6vw, 32px) !important; }
    body .hero-side { gap: 12px !important; }
    body .hero-stat { padding: 16px !important; }
    body .shell .layout { gap: 16px !important; }
    body .product-detail-page .panel, body.product-detail-page .panel { max-width: 100%; }
    body.product-detail-page .gallery-panel { padding: 10px !important; }
    body.product-detail-page .content-panel { padding: 16px !important; }
    body.product-detail-page .product-assurance-panel { margin: 0 !important; }
    body .product-gallery { min-width: 0; width: 100%; padding: 0 !important; }
    body .product-gallery .gallery-viewport {
        width: 100%; aspect-ratio: 1 / 1; min-height: 0 !important;
        max-height: min(75svh, 560px); overflow: hidden;
    }
    body .product-gallery .gallery-slide { min-width: 0; }
    body .product-gallery .gallery-media { max-width: 100%; max-height: 100%; }
    body .product-gallery .thumb-carousel, body .product-gallery .thumb-carousel-track { min-width: 0; max-width: 100%; }
    body .product-gallery .thumb { flex-shrink: 0; }
    body .product-grid .child-card-media { aspect-ratio: 1 / 1; }
    body .product-grid, body .products-grid { gap: 12px !important; }
    body .product-body, body .card .body, body .child-card-body { padding: 12px !important; }
    body .product-actions, body .actions { gap: 8px !important; }
    body .product-actions button, body .product-actions a,
    body .actions button, body .actions a, body .btn { min-height: 44px; }
    body .product-purchase-actions { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 10px !important; }
    body .product-purchase-actions .wishlist-toggle { grid-column: 1 / -1; min-height: 44px; }
    body .product-purchase-actions--no-wishlist { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
    body .product-purchase-actions--compact { grid-template-columns: minmax(0,1fr) !important; }
    body .buy-box { padding: 12px !important; }
    body .site-footer { margin-top: 24px; }
    body .site-footer-inner, body .site-footer-bottom {
        width: calc(100% - var(--frefta-gutter) * 2) !important; margin-inline: auto;
    }
    /* A docked menu keeps its height and safe area separate from action buttons. */
    body .mobile-bottom-nav.frefta-mobile-tabs {
        left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important; min-height: 64px !important; height: auto !important;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 2px !important; border-radius: 0 !important;
        border: 0 !important; border-top: 1px solid #e2e8f0 !important;
        background: #fff !important; box-shadow: 0 -4px 18px rgba(15,23,42,.07) !important;
    }
    body .frefta-mobile-tabs .mobile-nav-item {
        flex: 1 1 0 !important; min-width: 0 !important; min-height: 50px !important;
        padding: 6px 1px !important; gap: 4px !important; border-radius: 10px !important;
        font-size: 10px !important; font-weight: 500 !important; line-height: 1.2 !important;
    }
    body .frefta-mobile-tabs .mobile-nav-cart .cart-icon-wrap {
        width: auto !important; height: 18px !important; border-radius: 0 !important;
        background: transparent !important; box-shadow: none !important; color: currentColor !important;
    }
    body .frefta-mobile-tabs .mobile-nav-item i, body .frefta-mobile-tabs .cart-icon-wrap i { font-size: 18px !important; line-height: 18px !important; }
    body .frefta-mobile-tabs .mobile-nav-item > span:not(.cart-icon-wrap):not(.cart-badge) { margin: 0 !important; }
    body .frefta-mobile-tabs .cart-badge { right: -10px !important; top: -7px !important; }
    body .sticky-atc-bar, body .mobile-checkout-bar, body .checkout-desktop-btn.final-action-btn {
        bottom: calc(var(--frefta-nav-clearance) + 12px) !important;
        left: var(--frefta-gutter) !important; right: var(--frefta-gutter) !important;
        width: auto !important; margin: 0 !important; border-radius: 14px !important;
        border: 1px solid #e2e8f0; box-shadow: 0 4px 20px rgba(15,23,42,.14);
        padding: 10px 12px !important;
    }
    body .sticky-atc-bar { z-index: 990; }
    body .sticky-atc-inner { width: 100%; display: grid; gap: 8px; grid-template-columns: minmax(0,1fr); }
    body .sticky-atc-info { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    body .sticky-atc-name { font-size: 12px; }
    body .sticky-atc-price { margin: 0; flex-shrink: 0; }
    body .sticky-atc-actions { display: flex; flex-wrap: wrap; gap: 8px !important; min-width: 0; }
    body .sticky-atc-btn, body .sticky-atc-buy { flex: 1; min-width: 0; min-height: 44px; justify-content: center; }
    body .sticky-atc-qty { flex-shrink: 0; }
    body .sticky-atc-qty button { width: 30px; min-height: 42px; }
    body .sticky-atc-qty input { width: 32px; }
    body .cart-toast, body .product-detail-page .toast { bottom: calc(var(--frefta-bottom-space) + 12px) !important; }
    body .auth-overlay, body .modal-overlay { padding: 16px; }
    body .auth-card { max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 360px) {
    body .hero-side { grid-template-columns: 1fr !important; }
    body .product-grid, body .products-grid { gap: 8px !important; }
    body .product-body, body .card .body, body .child-card-body { padding: 10px !important; }
    body .sticky-atc-actions .sticky-atc-qty { display: none; }
}
@media (max-width: 900px) {
    body .site-footer { margin-bottom: 0 !important; }
    body .auth-overlay .auth-card { width: 100% !important; max-width: 440px !important; padding: 0 !important; }
    body .auth-card .auth-brand { padding: 20px; }
    body .auth-card .auth-body { padding: 20px; }
    body .auth-input-wrap input { padding: 12px 44px !important; min-height: 48px; }
    body .auth-input-wrap > i { left: 16px; }
    body .auth-input-wrap .auth-toggle-pass { min-width: 40px; min-height: 44px; right: 2px; padding: 8px; }
}
@media (max-width: 360px) {
    body .frefta-mobile-tabs .mobile-nav-categories { flex: 1.3 1 0 !important; }
}
@media (max-width: 900px) {
    body.account-page .shell { gap: 16px; margin-top: 16px; }
    body.account-page .sidebar {
        display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 12px;
        position: static; padding: 16px;
    }
    body.account-page .avatar-wrap { width: 48px; height: 48px; grid-row: 1 / 4; margin: 4px 0 0; }
    body.account-page .avatar { font-size: 1.3rem; }
    body.account-page .user-name, body.account-page .user-email, body.account-page .badge-row { text-align: left; margin: 0; }
    body.account-page .user-name { font-size: 1rem; }
    body.account-page .user-email { font-size: 0.75rem; overflow-wrap: anywhere; }
    body.account-page .sidebar-divider { grid-column: 1 / -1; margin: 8px 0; }
    body.account-page .sidebar .nav { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
    body.account-page .sidebar .nav button { min-height: 44px; padding: 8px 4px; justify-content: center; text-align: center; font-size: 12px !important; line-height: 1.3; }
    body.account-page .nav-danger { grid-column: 1 / -1; display: flex; padding: 6px 0 0; margin: 0; border-left: 0; }
    body.account-page .nav-danger button { width: auto; padding: 8px 12px !important; }
    body.account-page main.panel { padding: 16px; }
    body.account-page .stats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    body.account-page .stat { padding: 12px 8px; }
    body.account-page .stat strong { font-size: 1.4rem; }
    body.account-page .stat-label { font-size: 11px; }
    body.account-page .stat-arrow { display: none; }
}
body .frefta-category-card-media img { width: 100%; height: 100%; object-fit: contain !important; }
@media (max-width: 760px) {
    body .frefta-category-parent { grid-template-columns: 32px minmax(0,1fr); gap: 8px; padding: 8px 6px; align-items: start; }
    body .frefta-category-parent > .fa-chevron-right { display: none; }
    body .frefta-category-parent-media { width: 32px; height: 32px; }
    body .frefta-category-parent-name {
        display: block !important; white-space: normal !important; overflow: visible !important;
        text-overflow: clip; -webkit-line-clamp: unset !important; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere;
    }
    body .frefta-category-parent.is-promo .frefta-category-parent-name::after { display: table; margin: 4px 0 0; font-size: 9px; }
    body .frefta-category-parent-media img { width: 100%; height: 100%; object-fit: contain !important; }
}