/* ==========================================================================
   Storefront layout — eyewa-inspired structure on top of storefront-modern.css
   Announcement bar, two-row header, rounded hero, plain left-aligned headings,
   swipeable product rows with minimal cards, image-tile categories, split promo.
   Same rules as the design layer: scoped to body.sf-modern, store colours, no
   markup the page scripts rely on is changed. Behaviour: assets/js/storefront-motion.js
   ========================================================================== */

body.sf-modern { background: #fff !important; --sf-container: 1320px; }
body.sf-modern .container { max-width: var(--sf-container); }

/* ---------- Announcement bar ---------- */
body.sf-modern .sf-announce {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    height: 40px; background: #111; color: #fff; font-size: .82rem; font-weight: 600; overflow: hidden;
}
body.sf-modern .sf-announce-track { position: relative; height: 40px; width: min(560px, 70vw); overflow: hidden; }
body.sf-modern .sf-announce-item {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    opacity: 0; transform: translateY(100%); transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .5s;
}
body.sf-modern .sf-announce-item.is-active { opacity: 1; transform: none; }
body.sf-modern .sf-announce-item.is-leaving { opacity: 0; transform: translateY(-100%); }
body.sf-modern .sf-announce-nav { background: none; border: 0; color: #fff; opacity: .75; padding: .25rem; line-height: 1; }
body.sf-modern .sf-announce-nav:hover { opacity: 1; }
body.sf-modern[data-language="ar"] .sf-announce-nav .ti { display: inline-block; transform: scaleX(-1); }

/* Header layout: see storefront-header.css */

/* ---------- Hero: framed, rounded, text bottom-start, white pill call to action ---------- */
body.sf-modern .hero {
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 12px clamp(0px, 1.6vw, 24px) 0 !important; background: transparent !important; overflow: visible !important;
}
body.sf-modern .hero-slider {
    /* Same shape as the hero banners (1920×600), so the whole picture shows, centred, uncropped */
    height: auto !important; aspect-ratio: 1920 / 600; min-height: 360px; max-height: 640px;
    border-radius: 24px 24px 110px 110px; overflow: hidden; isolation: isolate;
}
body.sf-modern .hero-slide { justify-content: flex-start !important; align-items: flex-end !important; padding: 0 !important; }
body.sf-modern .hero-slide::before {
    background: linear-gradient(90deg, rgba(10, 12, 20, .55) 0%, rgba(10, 12, 20, .15) 55%, transparent 100%),
                linear-gradient(0deg, rgba(10, 12, 20, .45) 0%, transparent 45%) !important;
}
body.sf-modern[data-language="ar"] .hero-slide::before {
    background: linear-gradient(270deg, rgba(10, 12, 20, .55) 0%, rgba(10, 12, 20, .15) 55%, transparent 100%),
                linear-gradient(0deg, rgba(10, 12, 20, .45) 0%, transparent 45%) !important;
}
body.sf-modern .hero-content {
    width: 100% !important; max-width: none !important;
    flex-direction: row !important; align-items: flex-end !important; justify-content: space-between !important;
    padding: 0 clamp(1.5rem, 6vw, 6rem) clamp(2.5rem, 7vh, 4.5rem) !important; text-align: start !important; gap: 1.5rem !important;
}
body.sf-modern .hero-text-wrapper { padding: 0 !important; text-align: start !important; flex: 1 1 auto; min-width: 0; }
body.sf-modern .hero h1 {
    margin: 0 0 .6rem !important; max-width: none !important; margin-inline: 0 !important; /* one line; wraps only if longer than the space */
    font-size: clamp(2rem, 4.4vw, 3.6rem) !important; font-weight: 700 !important; color: #fff !important;
}
body.sf-modern .hero p { margin: 0 !important; margin-inline: 0 !important; font-size: clamp(1.05rem, 1.6vw, 1.5rem) !important; color: rgba(255, 255, 255, .95) !important; }
body.sf-modern .btn-hero {
    background: #fff !important; color: var(--sf-ink) !important; border: 0 !important;
    padding: 1rem 2.4rem !important; font-size: 1.05rem !important; flex-shrink: 0;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18) !important;
}
body.sf-modern .btn-hero:hover { filter: none !important; background: #fff !important; }
/* Edit mode: the link button sits beside "Shop Now" */
.sf-hero-btn-wrap { display: inline-flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.sf-hero-btn-wrap .sf-hero-link-btn { position: static !important; opacity: 1 !important; transform: none !important; }
body.sf-modern .hero-arrow {
    background: rgba(255, 255, 255, .9) !important; color: var(--sf-ink) !important; border: 0 !important;
    width: 46px; height: 46px; font-size: 1.5rem !important; opacity: 0; transition: opacity .25s, transform .25s !important;
}
body.sf-modern .hero:hover .hero-arrow { opacity: 1; }
body.sf-modern .slide-indicators { bottom: 18px !important; gap: 8px !important; }
body.sf-modern .slide-dot {
    width: 8px !important; height: 8px !important; border-radius: 99px !important; border: 0 !important;
    background: rgba(255, 255, 255, .55) !important; transition: width .3s ease, background .3s !important;
}
body.sf-modern .slide-dot.active { width: 26px !important; background: #fff !important; }
body.sf-modern .equipment-item { display: none !important; }
body.sf-modern .section-separator { display: none !important; }

/* ---------- Category bubbles (phones, built by the motion script from the categories) ---------- */
body.sf-modern .sf-bubbles { display: none; }

/* ---------- Section headings: plain, left aligned ---------- */
body.sf-modern .marketing-title::before { display: none !important; }
body.sf-modern .marketing-title, body.sf-modern .section-title {
    font-size: clamp(1.45rem, 2.4vw, 2.1rem) !important; font-weight: 700 !important; letter-spacing: -.02em !important;
}
body.sf-modern .featured-marketing, body.sf-modern .featured-marketing .marketing-content { text-align: start !important; align-items: flex-start !important; }
body.sf-modern .featured-marketing { margin-bottom: 1.25rem !important; }
body.sf-modern #testimonials .section-title, body.sf-modern #testimonials .text-center:has(> .section-title) { text-align: start !important; }
body.sf-modern #categories, body.sf-modern .featured-section { background: #fff !important; padding-block: clamp(2rem, 4.5vw, 3.75rem) !important; }
body.sf-modern #categories > .container > .row::after { display: none; }

/* ---------- Product rows: one swipeable line with a round arrow ---------- */
body.sf-modern .sf-carousel { position: relative; }
body.sf-modern .sf-carousel-track {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: 0 !important; gap: 16px; padding: 4px 2px 14px !important; --bs-gutter-x: 0;
}
body.sf-modern .sf-carousel-track::-webkit-scrollbar { display: none; }
body.sf-modern .sf-carousel-track > * {
    flex: 0 0 calc((100% - 48px) / 4) !important; max-width: calc((100% - 48px) / 4) !important;
    width: auto !important; padding: 0 !important; margin: 0 !important; scroll-snap-align: start;
}
body.sf-modern .sf-carousel-btn {
    position: absolute; top: 38%; z-index: 5; width: 46px; height: 46px; border-radius: 50%;
    border: 0; background: rgba(120, 128, 140, .75); color: #fff; font-size: 1.35rem;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(20, 22, 31, .18); transition: opacity .25s, transform .2s, background .2s;
}
body.sf-modern .sf-carousel-btn:hover { background: var(--primary-color); transform: scale(1.06); }
body.sf-modern .sf-carousel-btn[data-dir="1"] { inset-inline-end: -10px; }
body.sf-modern .sf-carousel-btn[data-dir="-1"] { inset-inline-start: -10px; }
body.sf-modern .sf-carousel-btn[hidden] { display: none; }
body.sf-modern[data-language="ar"] .sf-carousel-btn .ti { transform: scaleX(-1); }

/* ---------- Minimal product card ---------- */
body.sf-modern .product-card { border: 1px solid #eef0f2 !important; border-radius: 14px !important; box-shadow: none !important; }
body.sf-modern .product-card:hover { transform: none !important; box-shadow: 0 10px 30px rgba(20, 22, 31, .08) !important; }
body.sf-modern .product-image-container { background: #f4f5f6 !important; border-bottom: 0 !important; }
body.sf-modern .product-image-container img, body.sf-modern .product-image-container .product-image { padding: 18px !important; }
body.sf-modern .product-info {
    display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "name price" "brand old" "swatch cart";
    align-items: start; column-gap: .75rem; row-gap: .15rem;
    background: #fafafa; padding: 1rem 1rem .9rem !important; flex: 1;
}
body.sf-modern .product-name {
    grid-area: name; text-transform: uppercase; font-size: .88rem !important; font-weight: 700 !important;
    min-height: 0 !important; -webkit-line-clamp: 1 !important; margin: 0 !important;
}
body.sf-modern .product-info > p { grid-area: brand; margin: 0 !important; font-size: .82rem !important; display: -webkit-box !important; }
body.sf-modern .product-price { grid-area: price; font-size: .95rem !important; font-weight: 700 !important; margin: 0 !important; white-space: nowrap; }
body.sf-modern .product-info > small { grid-area: old; justify-self: end; font-size: .78rem !important; }
body.sf-modern .product-info:has(> small) .product-price { color: #d0263c !important; }
body.sf-modern .quantity-selector { display: none !important; }
body.sf-modern .product-actions { grid-area: cart; justify-self: end; align-self: end; margin-top: .6rem !important; }
body.sf-modern .btn-add-cart {
    width: 36px !important; height: 36px !important; min-height: 0 !important; padding: 0 !important; flex: 0 0 auto !important;
    border-radius: 50% !important; font-size: 0 !important; gap: 0 !important;
    background: #fff !important; color: var(--sf-ink) !important; border: 1px solid #e6e8eb !important; box-shadow: none !important;
}
body.sf-modern .btn-add-cart::before { font-size: 1.05rem !important; }
body.sf-modern .btn-add-cart:hover { background: var(--primary-color) !important; color: #fff !important; border-color: var(--primary-color) !important; }
body.sf-modern .product-badge { background: #d0263c !important; box-shadow: none !important; }
body.sf-modern .btn-wishlist-corner { border-color: transparent !important; box-shadow: 0 2px 10px rgba(20, 22, 31, .08); }

/* ---------- Categories as large image tiles with the title on the photo ---------- */
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card {
    position: relative; border: 0 !important; border-radius: 22px !important; box-shadow: none !important; min-height: 0;
}
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card img { aspect-ratio: 3 / 4 !important; }
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(0deg, rgba(10, 12, 20, .62) 0%, rgba(10, 12, 20, .1) 45%, transparent 70%);
}
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card-content {
    position: absolute !important; inset: auto 0 0 0; z-index: 2; background: none !important;
    align-items: flex-start !important; text-align: start !important; padding: 1.1rem 1.2rem !important;
}
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card-title {
    color: #fff !important; font-size: 1.25rem !important; font-weight: 700 !important; margin: 0 !important; text-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card-description,
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card-btn { display: none !important; }
body.sf-modern .categories-grid .category-card:hover { transform: none !important; }
body.sf-modern .categories-grid .category-card:hover img { transform: scale(1.06); }

/* ---------- About as a split promo banner ---------- */
body.sf-modern #about { padding-block: clamp(2rem, 4vw, 3.5rem) !important; background: #fff !important; }
body.sf-modern #about > .container > .row {
    flex-direction: row-reverse; border-radius: 22px; overflow: hidden; margin: 0;
    background: linear-gradient(120deg, var(--sf-tint) 0%, color-mix(in srgb, var(--primary-color) 6%, #fff) 100%);
}
body.sf-modern[data-language="ar"] #about > .container > .row { flex-direction: row; }
body.sf-modern #about > .container > .row > .col-lg-6:first-child { padding: clamp(1.5rem, 4vw, 3.5rem) !important; margin: 0 !important; }
body.sf-modern #about > .container > .row > .col-lg-6:last-child { padding: 0 !important; align-self: stretch; }
body.sf-modern #about .col-lg-6:last-child > div { border-radius: 0 !important; box-shadow: none !important; height: 100%; }
body.sf-modern #about .col-lg-6:last-child img { height: 100% !important; object-fit: cover; min-height: 320px; }
body.sf-modern #about .section-title { color: var(--sf-ink) !important; }

body.sf-modern #about .section-title, body.sf-modern #about .col-lg-6:first-child p[data-type="about"] { text-align: start !important; }
body.sf-modern .categories-marketing { margin-top: 0 !important; margin-bottom: 1.25rem !important; }
body.sf-modern .categories-marketing .marketing-content { text-align: start !important; }

/* ---------- Trust: quiet strip ---------- */
body.sf-modern section[data-section="trust"] { background: #fff !important; border-block: 1px solid var(--sf-line); }
body.sf-modern section[data-section="trust"].py-5 { padding-block: 1.5rem !important; }
body.sf-modern .trust-signals { padding: 0 !important; gap: 1rem !important; }
body.sf-modern .trust-item { border: 0 !important; background: transparent !important; }

/* ---------- Phones ---------- */
@media (max-width: 768px) {
    body.sf-modern .sf-announce { height: 34px; font-size: .74rem; }
    body.sf-modern .sf-announce-track { height: 34px; width: 78vw; }
    body.sf-modern .sf-announce-nav { display: none; }

    body.sf-modern .sf-bubbles {
        display: flex; gap: .9rem; overflow-x: auto; padding: .75rem 1rem .5rem; scrollbar-width: none; scroll-snap-type: x proximity;
        background: #fff;
    }
    body.sf-modern .sf-bubbles::-webkit-scrollbar { display: none; }
    body.sf-modern .sf-bubble {
        flex: 0 0 auto; width: 68px; display: flex; flex-direction: column; align-items: center; gap: .35rem;
        background: none; border: 0; padding: 0; color: var(--sf-ink); scroll-snap-align: start;
    }
    body.sf-modern .sf-bubble-img {
        width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: #f1f2f4;
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--sf-line); transition: box-shadow .2s, transform .2s;
    }
    body.sf-modern .sf-bubble:active .sf-bubble-img { transform: scale(.94); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color); }
    body.sf-modern .sf-bubble-img img { width: 100%; height: 100%; object-fit: cover; }
    body.sf-modern .sf-bubble span { font-size: .7rem; font-weight: 600; line-height: 1.2; text-align: center; max-width: 68px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    body.sf-modern .hero { padding: 0 !important; }
    /* Wide photos: a shorter hero keeps more of the picture */
    body.sf-modern .hero-slider { height: 58vh !important; min-height: 380px; max-height: 520px; border-radius: 0 0 28px 28px; }
    body.sf-modern .hero-slide { background-position: center top !important; } /* show the top of the photo */
    body.sf-modern .hero-slide::before, body.sf-modern[data-language="ar"] .hero-slide::before {
        background: linear-gradient(0deg, rgba(10, 12, 20, .78) 0%, rgba(10, 12, 20, .35) 40%, transparent 65%) !important;
    }
    body.sf-modern .hero h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, .45) !important; }
    /* Phones: hero text and button centred */
    body.sf-modern .hero-slide { justify-content: center !important; }
    body.sf-modern .hero-content { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 0 1.25rem 3.25rem !important; }
    body.sf-modern .hero-text-wrapper, body.sf-modern .hero h1, body.sf-modern .hero p { text-align: center !important; margin-inline: auto !important; }
    body.sf-modern .hero h1 { font-size: 2rem !important; }
    body.sf-modern .btn-hero { padding: .8rem 1.6rem !important; font-size: .95rem !important; }

    body.sf-modern .sf-carousel-track { gap: 12px; }
    body.sf-modern .sf-carousel-track > * { flex-basis: 64% !important; max-width: 64% !important; }
    body.sf-modern .sf-carousel-btn { display: none; }
    body.sf-modern .product-info { padding: .8rem .8rem .75rem !important; }
    body.sf-modern .product-info > p { display: none !important; }
    body.sf-modern .product-name { font-size: .8rem !important; }

    body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card { border-radius: 16px !important; }
    body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card img { aspect-ratio: 1 / 1 !important; }
    body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card-title { font-size: 1rem !important; }
    body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card-content { padding: .8rem .9rem !important; }

    body.sf-modern #about > .container > .row, body.sf-modern[data-language="ar"] #about > .container > .row { flex-direction: column-reverse; }
    body.sf-modern .categories-marketing { grid-template-columns: 1fr auto !important; }
    body.sf-modern .categories-marketing .marketing-content { grid-column: 1 / -1; }
    body.sf-modern .categories-marketing .marketing-title, body.sf-modern .categories-marketing .marketing-subtitle { text-align: start !important; }
    body.sf-modern #about .col-lg-6:last-child img { min-height: 240px; max-height: 300px; }
}

/* ---------- Footer: eyewa-style compact charcoal block ---------- */
body.sf-modern .footer { background: #202426 !important; color: #d5d8dc !important; padding: 2.25rem 0 1.5rem !important; margin: 0 !important; }
body.sf-modern .footer .row { --bs-gutter-x: 2rem; }
body.sf-modern .footer .mb-4 { margin-bottom: 1rem !important; }
body.sf-modern .footer-logo { max-height: 56px !important; max-width: 260px !important; width: auto !important; margin: 0 0 1.25rem !important; filter: none; }
body.sf-modern .footer-description { color: #c4c8cd !important; font-size: .85rem !important; line-height: 1.7 !important; max-width: 300px; margin: 0 !important; }
body.sf-modern .footer-title {
    color: #fff !important; font-weight: 700 !important; font-size: 1.12rem !important; letter-spacing: 0 !important;
    text-transform: none !important; margin: 0 0 1.1rem !important;
}
body.sf-modern .footer-title::after { display: none !important; }
body.sf-modern .footer-link {
    display: block !important; color: #d5d8dc !important; font-size: .84rem !important; line-height: 1.45 !important;
    padding: 0 !important; margin: 0 0 .95rem !important; text-decoration: none !important; transition: color .15s;
}
body.sf-modern .footer-link:hover { color: #fff !important; transform: none !important; padding: 0 !important; }
body.sf-modern .footer-social { display: flex !important; gap: 1.1rem !important; margin: 0 0 1.6rem !important; }
body.sf-modern .footer-social-icon {
    width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
    background: none !important; color: #fff !important; font-size: 1.25rem !important; transition: opacity .15s, transform .15s;
}
body.sf-modern .footer-social-icon:hover { background: none !important; opacity: .75; transform: translateY(-2px); }
body.sf-modern .sf-foot-accept { margin-bottom: .9rem !important; }
body.sf-modern .footer-payments { display: flex !important; flex-wrap: wrap; gap: .5rem !important; margin: 0 0 1.4rem !important; justify-content: flex-start !important; }
body.sf-modern .footer-payment-icon {
    height: 22px !important; width: 46px !important; object-fit: contain; padding: 3px 6px; background: #fff; border-radius: 5px; opacity: 1 !important; filter: none !important;
}
body.sf-modern .footer-copyright { color: #c4c8cd !important; font-size: .72rem !important; line-height: 1.8; text-align: start !important; }
body.sf-modern .footer-copyright a { color: #c4c8cd !important; font-size: .72rem !important; }
body.sf-modern .footer-bottom { display: none !important; }
@media (max-width: 991.98px) {
    body.sf-modern .sf-foot-brand { margin-bottom: 1.5rem !important; }
    body.sf-modern .sf-foot-end { margin-top: .5rem; }
}
@media (max-width: 768px) {
    body.sf-modern .footer { padding: 1.75rem 0 calc(84px + env(safe-area-inset-bottom, 0)) !important; }
    body.sf-modern .footer-title { font-size: 1rem !important; margin-bottom: .85rem !important; }
    body.sf-modern .footer-link { margin-bottom: .75rem !important; }
}

/* Grids must be able to shrink: plain 1fr columns can't go below their content's width, which made
   the category tiles and trust strip wider than a phone screen (pushed off the right edge) */
body.sf-modern .categories-grid:not(.list-view):not(.table-view):not(.slider-view) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
/* Desktop: 3, 6 or 9 category cards fill rows of 3 (no half-empty last row of 4). Only the cards count:
   the "Show More" / "Show Less" button is in the grid too. After "Show More" (a Show Less button is
   there) the grid keeps the 4 columns it had, so the rows don't change shape */
@media (min-width: 992px) {
    body.sf-modern .categories-grid:not(.list-view):not(.table-view):not(.slider-view):not(:has(.show-less-btn)):has(> .category-card:first-child:nth-last-child(3 of .category-card)),
    body.sf-modern .categories-grid:not(.list-view):not(.table-view):not(.slider-view):not(:has(.show-less-btn)):has(> .category-card:first-child:nth-last-child(6 of .category-card)),
    body.sf-modern .categories-grid:not(.list-view):not(.table-view):not(.slider-view):not(:has(.show-less-btn)):has(> .category-card:first-child:nth-last-child(9 of .category-card)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
body.sf-modern .categories-grid .category-card, body.sf-modern .trust-item, body.sf-modern .product-card { min-width: 0; }
body.sf-modern #categories .row > [class*="col"] { min-width: 0; }
@media (max-width: 991.98px) {
    body.sf-modern .categories-grid:not(.list-view):not(.table-view):not(.slider-view) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
    body.sf-modern .categories-grid:not(.list-view):not(.table-view):not(.slider-view) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
    body.sf-modern .trust-signals { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.sf-modern .trust-item p { overflow-wrap: anywhere; }
    body.sf-modern .categories-marketing { grid-template-columns: minmax(0, 1fr) auto !important; }
}

/* Phones: no zooming. The viewport meta blocks pinch-zoom; double-tap zoom is turned off, and inputs
   use 16px text because iOS Safari zooms the page in when a smaller text field is focused */
@media (max-width: 768px) {
    html:has(body.sf-modern), body.sf-modern { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body.sf-modern input, body.sf-modern select, body.sf-modern textarea,
    .swal2-container input, .swal2-container select, .swal2-container textarea { font-size: 16px !important; }
}