/**
 * Responsive overrides (loaded after common.css).
 *
 * Mobile / tablet breakpoint rules that previously lived in common.css live here
 * so common.css stays desktop-first base styles.
 *
 * RTL (Arabic): Prefer logical properties (margin-inline-*, padding-inline-*,
 * inset-inline-*, text-align: start/end). For larger Arabic overrides, add
 * [dir="rtl"] blocks here or a separate rtl.css.
 */

@media (max-width: 767.98px) {
    /* Slightly more horizontal inset (Bootstrap default gutters are tight on small phones) */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-inline: clamp(1.125rem, 4.5vw, 1.5rem);
    }

    .container-fluid {
        padding-inline: clamp(1rem, 4vw, 1.25rem);
    }

    /* ----- Site footer (mobile layout matches design: newsletter first, then link stacks) ----- */
    .site-footer {
        /* margin-top: 40px; */
        padding-top: 8px;
        padding-bottom: 24px;
    }

    .site-footer .footer-main-row {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .site-footer .footer-newsletter-col {
        margin-top: 0;
    }

    .site-footer .footer-newsletter-block {
        margin-top: 0;
        margin-inline: 0;
        min-height: 0;
        padding: 22px 20px 24px;
        border-radius: 0;
        width: 100%;
        max-width: none;
    }

    .site-footer .footer-newsletter-rule {
        width: 36px;
        height: 3px;
        margin-block-end: 12px;
    }

    .site-footer .footer-newsletter-block .footer-newsletter-title {
        font-size: 15px;
        line-height: 1.35;
        letter-spacing: 0.08em;
        margin-block-end: 8px;
    }

    .site-footer .footer-newsletter-sub {
        font-size: 12px;
        line-height: 1.5;
        margin-block-end: 16px;
        max-width: 22em;
    }

    .site-footer .footer-newsletter-form {
        gap: 14px;
        max-width: 320px;
        margin-inline: auto;
    }

    .site-footer .footer-newsletter-input {
        border-radius: 6px;
        padding: 12px 16px;
        font-size: 0.875rem;
        background-color: rgba(0, 0, 0, 0.22);
    }

    .site-footer .footer-newsletter-input::placeholder {
        color: rgba(255, 255, 255, 0.55);
    }

    .site-footer .footer-newsletter-btn {
        width: 61%;
        max-width: 280px !important;
        border-radius: 999px !important;
        padding-block: 14px !important;
    }

    /* Link columns: single column, comfortable spacing (start aligns LTR; flips with dir=rtl) */
    .site-footer .footer-col:not(.footer-newsletter-col) {
        text-align: start;
        padding-block-start: 8px;
        margin-block-start: 8px;
    }

    .site-footer .footer-col:not(.footer-newsletter-col) + .footer-col:not(.footer-newsletter-col) {
        margin-block-start: 28px;
        padding-block-start: 8px;
    }

    .site-footer .footer-col h5 {
        margin-block-end: 14px;
        font-size: 0.95rem;
        letter-spacing: 0.04em;
    }

    .site-footer .footer-col ul li {
        margin-block-end: 12px;
    }

    .site-footer .footer-col ul li:last-child {
        margin-block-end: 0;
    }

    /* Copyright band */
    .site-footer .border-top {
        margin-block-start: 8px;
    }

    /* WhatsApp FAB: slightly smaller + safe area */
    .whatsapp-float {
        width: 54px;
        height: 54px;
        font-size: 26px;
        right: 16px;
        bottom: max(20px, env(safe-area-inset-bottom, 0px));
    }

    [dir="rtl"] .whatsapp-float {
        right: auto;
        left: 16px;
    }

    /* Cart drawer (overlays — present on every route) */
    .cart-content {
        max-width: 100%;
    }

    /* common.css sets footer margin-top; keep mobile stack tight sitewide */
    footer {
        margin-top: 0;
    }

    .btn-pill {
        padding: 7px 26px;
    }

    .product-card h5 {
        font-size: 13px;
    }
}

/* -------------------------------------------------------------------------- */
/* Migrated from common.css — header (< lg)                                  */
/* -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
    .top-bar-announcement {
        max-width: min(620px, calc(100% - 88px));
        margin: 0 auto;
    }

    /* Keep currency / locale controls off the physical screen edge (absolute end-0 is flush otherwise) */
    .top-bar .container > .top-bar-actions {
        padding-inline-end: clamp(0.35rem, 1.75vw, 0.75rem);
    }

    /* Language / currency modal: full viewport width (common.css caps panel at 400px) */
    .localization-modal .localization-content {
        max-width: none;
        width: 100%;
    }

    .site-navbar > .site-navbar-inner {
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
        column-gap: 0.25rem;
    }

    .site-navbar .site-navbar-toggler {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        margin: 0;
        padding: 0.35rem 0.5rem 0.35rem 0;
        border: 0;
    }

    .site-navbar .site-navbar-brand {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        margin: 0 auto;
        padding: 0;
    }

    .site-navbar .site-navbar-cart-mobile {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 44px;
        min-height: 44px;
    }

    .site-navbar .site-navbar-collapse {
        grid-column: 1 / -1;
        grid-row: 2;
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .site-navbar .navbar-brand img {
        height: 40px; /* ~10% smaller than 44px */
    }

    .site-navbar-cart-icon-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }

    .site-navbar .site-navbar-cart-mobile .site-navbar-cart-badge {
        position: absolute;
        top: -6px;
        right: -10px;
        left: auto;
        transform: none;
        margin: 0;
        padding: 2px 5px;
        font-size: 9px;
        font-weight: 600;
        line-height: 1.15;
        min-width: 16px;
    }

    .site-navbar-toggler .navbar-toggler-icon {
        background-image: none !important;
    }

    .site-navbar-toggler[aria-expanded="false"] .navbar-toggler-icon,
    .site-navbar-toggler.collapsed .navbar-toggler-icon {
        display: block;
        width: 1.35rem;
        height: 2px;
        margin: 0 auto;
        background-color: var(--primary-navy);
        border-radius: 1px;
        box-shadow: 0 7px 0 0 var(--primary-navy), 0 -7px 0 0 var(--primary-navy);
        position: relative;
        top: 0;
    }

    .site-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        display: block;
        width: 1.25rem;
        height: 2px;
        margin: 0 auto;
        background-color: transparent !important;
        box-shadow: none !important;
        position: relative;
        top: 0;
    }

    .site-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before,
    .site-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        margin-top: -1px;
        background-color: var(--primary-navy);
        border-radius: 1px;
    }

    .site-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        transform: rotate(45deg);
    }

    .site-navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        transform: rotate(-45deg);
    }
}