/* ==========================================================================
   Storefront responsive overrides — tablet + mobile fixes for pages whose
   stock styling assumed a desktop-only layout.

   Loaded last (after every theme stylesheet + theme-light.css) so the rules
   below always win where they fire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FOOTER — evenly-spaced columns (desktop). The stock col-4/3/2/3 grid left
   "Products" isolated with big gaps; a 4-column grid gives consistent spacing,
   and a CSS grid auto-mirrors for RTL so the Arabic footer reads right-to-left.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .site-footer .row {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
        gap: 48px;
        align-items: start;
    }
    .site-footer .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: 0 1 auto;
        padding-left: 0;
        padding-right: 0;
    }
}

/* --------------------------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------------------------
   The contact page has three "contact-card" tiles on top, then a two-column
   row containing the "Send us a message" form on the left and the embedded
   Google Map on the right. On mobile the columns must stack, the map needs
   a fixed height (an iframe inside `.col-6` collapses to 0 otherwise), and
   the form rows need to drop to a single column.
   -------------------------------------------------------------------------- */
.map-frame {
    width: 100%;
    min-height: 320px;
    border: 0;
    border-radius: 14px;
    display: block;
}

@media (max-width: 980px) {
    .contact-card {
        margin-bottom: 16px;
    }
    .map-frame { min-height: 280px; }
}

@media (max-width: 720px) {
    /* Force the two-column "form + map" row to stack. */
    .section .row > .col-6,
    .section .row > .col-7,
    .section .row > .col-5,
    .section .row > .col-4,
    .section .row > .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* contact-card three-up becomes one-per-row on mobile. */
    .contact-card {
        flex: 0 0 100%;
        margin-bottom: 14px;
        padding: 18px;
    }
    .contact-card .icon { width: 38px; height: 38px; font-size: 16px; }
    /* The auth-card form inside contact tightens its padding on phones. */
    .auth-card {
        padding: 22px 18px;
    }
    /* Nested form-grid-2 → single column. */
    .auth-card .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .map-frame { min-height: 240px; margin-top: 16px; }
}


/* --------------------------------------------------------------------------
   CART PAGE (mobile)
   --------------------------------------------------------------------------
   The desktop cart is a 5-column table: [image+name] | price | qty | total |
   remove. On phones each <tr> becomes a self-contained card: the product
   (image + name) is the header, then Price / Quantity / Total stack as
   label:value rows, and the remove (trash) pins to the top corner. Scoped to
   <=760px so the desktop table is untouched. Labels are injected via ::before
   (English, with an [dir=rtl] Arabic override) so no markup change is needed.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    /* Two-column page -> stack: cart list first, then the summary. */
    .section > .container > .row > .col-8,
    .section > .container > .row > .col-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Each row -> a self-contained card. */
    .cart-table,
    .cart-table tbody,
    .cart-table tr,
    .cart-table td { display: block; width: 100%; }
    .cart-table thead { display: none; }
    .cart-table tr {
        position: relative;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 14px;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    }
    .cart-table td {
        padding: 0 !important;
        border: 0 !important;
    }

    /* Card header: product image + name (its inner flex layout stays). */
    .cart-table td:nth-child(1) {
        padding-inline-end: 30px !important;   /* clear the corner remove button */
        padding-bottom: 12px !important;
        margin-bottom: 6px;
        border-bottom: 1px solid #f2f2f2 !important;
    }
    .cart-table td:nth-child(1) img {
        width: 72px !important;
        height: 72px !important;
    }
    .cart-table td:nth-child(1) a { font-size: 14px; line-height: 1.35; }
    .cart-table td:nth-child(1) > div > div { min-width: 0; }

    /* Price / Quantity / Total -> label:value rows. */
    .cart-table td:nth-child(2),
    .cart-table td:nth-child(3),
    .cart-table td:nth-child(4) {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0 !important;
        font-size: 14px;
        color: #333;
    }
    .cart-table td:nth-child(2)::before,
    .cart-table td:nth-child(3)::before,
    .cart-table td:nth-child(4)::before {
        color: #8a8f98;
        font-size: 12px;
        font-weight: 600;
    }
    .cart-table td:nth-child(2)::before { content: "Price"; }
    .cart-table td:nth-child(3)::before { content: "Quantity"; }
    .cart-table td:nth-child(4)::before { content: "Total"; font-weight: 600; align-self: center; }
    [dir="rtl"] .cart-table td:nth-child(2)::before { content: "السعر"; }
    [dir="rtl"] .cart-table td:nth-child(3)::before { content: "الكمية"; }
    [dir="rtl"] .cart-table td:nth-child(4)::before { content: "الإجمالي"; }

    /* Total stands out, with a divider above it. */
    .cart-table td:nth-child(4) {
        border-top: 1px solid #f2f2f2 !important;
        margin-top: 4px;
        padding-top: 12px !important;
        font-size: 17px;
        font-weight: 800;
        color: #111;
    }

    /* Quantity stepper form sits at the end of its row. */
    .cart-table td:nth-child(3) form { margin: 0; }
    .cart-table td:nth-child(3) input[type="number"] { width: 56px !important; }

    /* Remove (trash) -> pinned to the top corner of the card. */
    .cart-table td:nth-child(5) {
        position: absolute;
        top: 10px;
        inset-inline-end: 10px;
    }
    .cart-table td:nth-child(5) form { margin: 0; }
    .cart-table td:nth-child(5) button {
        background: transparent;
        border: 0;
        color: #c0392b;
        font-size: 17px;
        padding: 4px 6px;
        cursor: pointer;
    }

    /* Summary card -> full width with a full-width checkout CTA. */
    .cart-summary { position: static !important; margin-top: 18px; }
    .cart-summary .btn,
    .cart-summary .btn-primary { width: 100%; }
}


/* --------------------------------------------------------------------------
   PRODUCT DETAIL — the rest of the responsive sizing lives in style-mobile.css,
   but we tighten the gallery + info panel here so that they line up after the
   recent rebuild (techniques as tabs, share/wishlist in slider).
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .product-detail .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .product-detail .product-info h1 { font-size: 22px; }
    .product-detail .price-current { font-size: 24px; }
    .product-detail .cta-row { flex-wrap: wrap; }
    .product-detail .cta-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   MOBILE HEADER — make EVERY page match the HOME page header.
   home.css styles the header only on the home page (icons on their own
   full-width row, evenly spread; language pill a round grey chip). These rules
   replicate that exact look site-wide so other pages no longer differ. The
   action icons get their own full-width row (space-between), the search box
   wraps to its own line below, and the language pill is a 42px grey circle like
   the other icons (not a white box). Mirrors home.css:26-44 / :88-117 / :631-639.
   ========================================================================== */
@media (max-width: 768px) {
    .header-main { align-items: center; gap: 10px; flex-wrap: wrap; }
    .brand { order: 0; }
    .brand img { height: 64px; width: auto; }
    /* Icons on their own full-width row, evenly distributed (mirrors home.css). */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 0 !important;
    }
    .header-actions > .has-dropdown:first-of-type { order: 1; } /* profile */
    .header-actions > .header-icon { order: 2; }                /* wishlist */
    .header-actions > .has-dropdown:last-of-type { order: 3; }  /* cart */
    .header-actions > .lang-link-mobile { order: 4; }           /* language */
    .header-actions > .menu-toggle { order: 5; }                /* burger */
    .search { order: 6; flex: 0 0 100%; max-width: none; width: 100%; margin-top: 8px; margin-inline-start: 0; }
    .search input { width: 100%; font-size: 14px; }
    .cart-total { display: none; }

    /* Always visible + comfortable 48px tap targets. */
    .header-actions > .has-dropdown,
    .header-actions > .header-icon { display: inline-flex; }
    .header-icon,
    .menu-toggle { width: 48px; height: 48px; font-size: 18px; }
    .header-icon .badge { top: 0; right: 0; }

    /* Header cart/profile popups on mobile: center them as a fixed panel on EVERY page.
       These rules previously lived only in home.css, so on non-home pages the popup fell
       back to the desktop `position:absolute; right:0` and overflowed off-screen. */
    .dropdown-panel.cart-popup {
        position: fixed !important; left: 50% !important; top: 30% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px); max-width: 420px; max-height: 85vh; overflow-y: auto;
        border-radius: 20px; z-index: 999999999; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .dropdown-panel.profile-popup {
        position: fixed !important; left: 50% !important; top: 24% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 24px); max-width: 380px; max-height: 85vh; overflow-y: auto;
        border-radius: 20px; z-index: 999999999; box-shadow: 0 20px 60px rgba(0,0,0,.25);
    }
    .has-dropdown.open .dropdown-panel { display: block; }

    /* Language pill = round grey chip matching the other icons (not a white box),
       exactly as home.css renders it. */
    .lang-link-mobile {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #f3f3f3;
        color: #1A1A1A;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        text-decoration: none;
    }
    .lang-link-mobile img { width: 100%; height: 100%; object-fit: none; }
}

/* ==========================================================================
   CART — breathing room between the product name and the variant/SKU line.
   Real markup (Cart/Index.cshtml): td:nth-child(1) > div(flex) > div > a(name)
   then a sibling <div>(variant). They were flush. The variant div carries its
   own inline colour/size, so we only need to detach the name link: make it a
   block with a small bottom margin. Works on the desktop table and mobile card.
   ========================================================================== */
.cart-table td:nth-child(1) a {
    display: block;
    margin-bottom: 5px;
    line-height: 1.3;
}

/* ==========================================================================
   FOOTER — comfortable, consistent spacing on phones. The desktop grid
   (>=769px, defined earlier) is untouched: the breakpoints do not overlap.
   ========================================================================== */
@media (max-width: 768px) {
    .site-footer { padding-top: 40px; }
    .site-footer .row { gap: 32px !important; }
    .site-footer ul li { margin-bottom: 12px; }
    .site-footer ul li:last-child { margin-bottom: 0; }
    .site-footer ul li a { display: inline-block; padding: 2px 0; line-height: 1.4; }
    .site-footer h4 { margin-bottom: 14px; }
    .footer-brand p { max-width: 100%; }
}

/* ==========================================================================
   PRODUCT DETAIL — bigger gallery image, title rhythm, CTA arrow spacing.
   Base rules live in style.css; this file loads later so additive rules win.
   ========================================================================== */
.product-detail .gallery-main { padding: 14px; }
.product-detail .gallery-main img { max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* CTA buttons — arrow stays a separate, non-shrinking item AFTER the label. */
.product-detail .cta-row .btn { gap: 10px; }
.product-detail .cta-row .btn i { flex: 0 0 auto; display: inline-block; line-height: 1; }
.product-detail .cta-row .btn i.fa-arrow-right { margin-inline-start: 2px; }

@media (max-width: 760px) {
    /* Full-width mobile gallery: drop the square cap, trim padding. */
    .product-detail .gallery-main { padding: 10px; aspect-ratio: auto; min-height: 320px; }
    .product-detail .gallery-main img { max-height: 78vh; }
    /* Breathing room between the stacked gallery and the product title. */
    .product-detail .product-info { margin-top: 18px; }
    .product-detail .product-info h1 { margin-bottom: 10px; line-height: 1.3; }
}

/* ==========================================================================
   FOOTER — the FULL brand logo with WHITE text on a transparent background
   (logo-footer-white.png), shown directly on the dark footer. No chip — the
   transparent logo reads perfectly on the dark background.
   ========================================================================== */
.site-footer .footer-brand img {
    height: 64px;
    width: auto;
    margin-bottom: 18px;
    background: none;
    padding: 0;
    box-shadow: none;
}
@media (min-width: 769px) {
    .site-footer .footer-brand img { height: 82px; }
}

/* ==========================================================================
   TOPBAR EMAIL — the global body{text-transform:capitalize} capitalises the
   header email address. Force just the mailto link lowercase so the address
   reads correctly; the phone/address links are unaffected.
   ========================================================================== */
.topbar a[href^="mailto:"] { text-transform: lowercase !important; }