/* ==========================================================================
   Storefront — modern optics design layer
   Loaded after styles.css and the page's inline styles. Everything is scoped to
   body.sf-modern, so removing that class restores the previous look. Colours come
   from the store owner's settings (--primary-color, --button-bg-color, …); no ID,
   class or data attribute used by the scripts or the inline editor is changed.
   ========================================================================== */

body.sf-modern {
    --sf-radius: 18px;
    --sf-radius-sm: 12px;
    --sf-ink: #14161f;
    --sf-ink-2: #4b5160;
    --sf-muted: #8a90a0;
    --sf-line: #e9ebf1;
    --sf-surface: #ffffff;
    --sf-soft: #f6f7fb;
    --sf-shadow: 0 1px 2px rgba(20, 22, 31, .04), 0 8px 24px rgba(20, 22, 31, .06);
    --sf-shadow-hover: 0 2px 6px rgba(20, 22, 31, .06), 0 18px 40px rgba(20, 22, 31, .12);
    --sf-tint: color-mix(in srgb, var(--primary-color) 10%, #fff);
    --sf-tint-2: color-mix(in srgb, var(--primary-color) 18%, #fff);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--sf-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.sf-modern[data-language="ar"] { font-family: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; }

/* Replace the heavy rounded display font everywhere it was used. The shared stylesheet sets
   "* { font-family: Omnes }", so it is overridden on every element — except icon fonts. */
body.sf-modern { --sf-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body.sf-modern[data-language="ar"] { --sf-font: 'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif; }
body.sf-modern *:not(.ti):not([class^="ti-"]):not([class*=" ti-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not(.swiper-button-next):not(.swiper-button-prev) {
    font-family: var(--sf-font);
}

/* ---------- Navbar: light glass bar ---------- */
body.sf-modern .navbar {
    background: color-mix(in srgb, var(--navbar-bg-color, #fff) 86%, transparent) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid rgba(20, 22, 31, .06) !important;
    box-shadow: 0 1px 0 rgba(20, 22, 31, .02) !important;
}
body.sf-modern .nav-menu-link {
    font-weight: 600 !important;
    letter-spacing: .02em;
    text-transform: none !important;
    font-size: .9rem !important;
    padding: .45rem .8rem !important;
    border-radius: 999px;
    transition: background .2s, color .2s;
}
body.sf-modern .nav-menu-link:hover { background: var(--sf-tint); }
body.sf-modern .nav-icon-wrapper { border-radius: 999px; transition: background .2s; }
body.sf-modern .nav-icon-wrapper:hover { background: var(--sf-tint); }
body.sf-modern .cart-badge, body.sf-modern .wishlist-badge {
    background: var(--primary-color) !important; color: #fff !important;
    font-weight: 700; box-shadow: 0 0 0 2px #fff;
}

/* ---------- Hero ---------- */
body.sf-modern .hero-slide::before {
    background: linear-gradient(180deg, rgba(10, 12, 20, .05) 0%, rgba(10, 12, 20, .25) 45%, rgba(10, 12, 20, .65) 100%) !important;
    z-index: 1;
}
body.sf-modern .hero-content { gap: 1.25rem; }
body.sf-modern .hero-text-wrapper {
    background: transparent !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: 0 !important;
    padding: 0 1rem !important;
}
body.sf-modern .hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.6rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    line-height: 1.08 !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35) !important;
    color: #fff !important;
    max-width: none;
    margin-inline: auto;
}
body.sf-modern .hero p {
    font-size: clamp(1rem, 1.4vw, 1.2rem) !important;
    color: rgba(255, 255, 255, .92) !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35) !important;
    max-width: 52ch; margin-inline: auto;
}
body.sf-modern .btn-hero {
    border-radius: 999px !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    font-weight: 700 !important;
    padding: .95rem 2.2rem !important;
    min-width: 0 !important;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--button-bg-color) 45%, transparent) !important;
}
body.sf-modern .btn-hero:hover { transform: translateY(-2px) !important; }
body.sf-modern .hero-arrow {
    width: 52px; height: 52px; padding: 0 !important; font-size: 1.6rem !important;
    border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .18) !important;
}
body.sf-modern .equipment-item { opacity: .18 !important; }

/* Separator between hero and categories: a thin hairline with a small lens mark */
body.sf-modern .section-separator { padding: 1.5rem 0 !important; }
body.sf-modern .separator-line { background: linear-gradient(90deg, transparent, var(--sf-line), transparent) !important; height: 1px !important; }

/* ---------- Section headings ---------- */
body.sf-modern .marketing-title,
body.sf-modern .section-title {
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    line-height: 1.15 !important;
    text-transform: none !important;
}
body.sf-modern .marketing-title::before {
    content: '';
    display: block;
    width: 44px; height: 4px; border-radius: 4px;
    background: var(--primary-color);
    margin-bottom: .75rem;
}
body.sf-modern .featured-marketing .marketing-title::before,
body.sf-modern #testimonials .section-title::before { margin-inline: auto; }
body.sf-modern .section-title::after { display: none !important; }
body.sf-modern .marketing-subtitle {
    font-size: 1rem !important; color: var(--sf-muted) !important; font-weight: 500 !important; opacity: 1 !important;
}
body.sf-modern section { scroll-margin-top: 80px; }
body.sf-modern #categories, body.sf-modern .featured-section { padding-block: clamp(2.5rem, 6vw, 5rem) !important; }

/* View toggle (grid / table / slider) */
body.sf-modern .view-toggle {
    background: var(--sf-surface) !important; border: 1px solid var(--sf-line) !important;
    border-radius: 999px !important; padding: 4px !important; box-shadow: var(--sf-shadow) !important;
}
body.sf-modern .view-btn { border-radius: 999px !important; }
body.sf-modern .view-btn.active { background: var(--primary-color) !important; color: #fff !important; }
body.sf-modern .view-btn.active svg { fill: #fff !important; }

/* Filter sidebar */
body.sf-modern .store-filter-container {
    background: var(--sf-surface) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    box-shadow: var(--sf-shadow) !important;
    backdrop-filter: none !important;
}
body.sf-modern .store-filter-container h5 { font-weight: 700 !important; color: var(--sf-ink) !important; border-color: var(--sf-line) !important; }
body.sf-modern .store-filter-container h5 .ti { color: var(--primary-color); }
body.sf-modern .store-filter-container .form-select,
body.sf-modern .store-filter-container .form-control,
body.sf-modern .store-filter-container .input-group-text {
    border-color: var(--sf-line) !important; border-radius: var(--sf-radius-sm) !important; background-color: var(--sf-soft) !important;
    min-height: 44px; font-size: .9rem;
}
body.sf-modern .store-filter-container .input-group .form-control { border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; }
body.sf-modern .store-filter-container .input-group-text { border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; }
body.sf-modern .store-filter-container .btn-primary {
    border-radius: 999px !important; min-height: 44px; font-weight: 700 !important;
    background: var(--button-bg-color) !important; border-color: var(--button-bg-color) !important; color: var(--button-text-color) !important;
}
body.sf-modern .mobile-filter-toggle-btn {
    border-radius: 999px !important; font-weight: 700 !important; padding: .55rem 1.1rem !important;
    background: var(--sf-surface) !important; color: var(--sf-ink) !important; border: 1px solid var(--sf-line) !important;
    box-shadow: var(--sf-shadow) !important;
}

/* ---------- Category cards ---------- */
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card {
    border-radius: var(--sf-radius) !important;
    border: 1px solid var(--sf-line) !important;
    box-shadow: var(--sf-shadow) !important;
    overflow: hidden !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    background: var(--sf-surface) !important;
}
body.sf-modern .categories-grid .category-card:hover { transform: translateY(-4px) !important; box-shadow: var(--sf-shadow-hover) !important; }
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card img {
    width: 100% !important; aspect-ratio: 4 / 3; height: auto !important; object-fit: cover !important;
    background: var(--sf-soft); transition: transform .5s ease;
}
body.sf-modern .categories-grid .category-card:hover img { transform: scale(1.05); }
body.sf-modern .category-card-content {
    padding: 1rem 1rem 1.15rem !important; text-align: center !important;
    display: flex; flex-direction: column; align-items: center; flex: 1;
}
body.sf-modern .categories-grid:not(.list-view):not(.table-view) .category-card { display: flex !important; flex-direction: column; }
body.sf-modern .category-card-content .category-card-btn { margin-top: auto; }
body.sf-modern .category-card-title {
    font-size: 1.02rem !important; font-weight: 700 !important; color: var(--sf-ink) !important;
    margin-bottom: .25rem !important; text-transform: none !important; letter-spacing: -.01em !important;
}
body.sf-modern .category-card-description { font-size: .85rem !important; color: var(--sf-muted) !important; margin-bottom: .85rem !important; }
body.sf-modern .category-card-btn {
    background: var(--sf-tint) !important; color: var(--primary-color) !important;
    border: 0 !important; border-radius: 999px !important;
    padding: .5rem 1.1rem !important; font-weight: 700 !important; font-size: .82rem !important;
    text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important;
    display: inline-flex !important; align-items: center; gap: .35rem;
}
body.sf-modern .category-card-btn::after { content: '\ea1f'; font-family: 'tabler-icons'; font-size: .95rem; }
body.sf-modern[data-language="ar"] .category-card-btn::after { content: '\ea19'; }
body.sf-modern .category-card:hover .category-card-btn { background: var(--primary-color) !important; color: #fff !important; }

/* ---------- Product cards (grid sections and category modal) ---------- */
body.sf-modern .product-card {
    position: relative;
    background: var(--sf-surface) !important;
    border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important;
    box-shadow: var(--sf-shadow) !important;
    overflow: hidden !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
    height: 100%;
    display: flex; flex-direction: column;
}
body.sf-modern .product-card:hover { transform: translateY(-4px) !important; box-shadow: var(--sf-shadow-hover) !important; }
/* Eyewear photos are mostly on white: show the whole frame on a soft panel */
body.sf-modern .product-image-container {
    background: linear-gradient(180deg, var(--sf-soft), #fff) !important;
    border-bottom: 1px solid var(--sf-line) !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
}
body.sf-modern .product-image-container img,
body.sf-modern .product-image-container .product-image {
    width: 100% !important; height: 100% !important; object-fit: contain !important;
    padding: 12px; mix-blend-mode: multiply; transition: transform .45s ease;
}
body.sf-modern .product-card:hover .product-image-container img { transform: scale(1.06); }
body.sf-modern .product-badge {
    position: absolute; top: 12px !important; inset-inline-start: 12px !important; left: auto; right: auto;
    background: var(--primary-color) !important; color: #fff !important;
    border-radius: 999px !important; padding: .3rem .7rem !important;
    font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .02em; text-transform: uppercase;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 35%, transparent);
    z-index: 3;
}
body.sf-modern .product-info {
    padding: 1rem 1rem 1.1rem !important;
    text-align: start !important;
    display: flex; flex-direction: column; flex: 1;
}
body.sf-modern .product-name {
    font-size: .98rem !important; font-weight: 700 !important; color: var(--sf-ink) !important;
    line-height: 1.35 !important; letter-spacing: -.01em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.7em; margin-bottom: .25rem !important;
}
body.sf-modern .product-info > p {
    font-size: .8rem !important; color: var(--sf-muted) !important; margin-bottom: .5rem !important;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
body.sf-modern .product-price {
    font-size: 1.2rem !important; font-weight: 800 !important; color: var(--sf-ink) !important;
    letter-spacing: -.02em; display: inline-block; margin-inline-end: .5rem;
}
body.sf-modern .product-info > small { font-size: .85rem !important; color: var(--sf-muted) !important; }
/* Compact pill stepper */
body.sf-modern .quantity-selector {
    margin: .85rem 0 .7rem !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    width: fit-content;
    border: 1px solid var(--sf-line); border-radius: 999px; background: var(--sf-soft); padding: 3px;
}
body.sf-modern .qty-btn {
    width: 32px !important; height: 32px !important; border: 0 !important; border-radius: 50% !important;
    background: #fff !important; color: var(--sf-ink) !important; font-size: 1.05rem !important;
    box-shadow: 0 1px 3px rgba(20, 22, 31, .12);
}
body.sf-modern .qty-btn:hover { background: var(--primary-color) !important; color: #fff !important; }
body.sf-modern .qty-input {
    width: 42px !important; height: 32px !important; border: 0 !important; background: transparent !important;
    font-weight: 700 !important; font-size: .95rem !important; -moz-appearance: textfield;
}
body.sf-modern .qty-input::-webkit-inner-spin-button, body.sf-modern .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.sf-modern .product-actions { margin-top: auto !important; }
body.sf-modern .btn-add-cart {
    background: var(--button-bg-color) !important; color: var(--button-text-color) !important;
    border: 0 !important; border-radius: 999px !important;
    min-height: 44px; padding: .6rem 1rem !important;
    font-weight: 700 !important; font-size: .9rem !important;
    text-transform: none !important; letter-spacing: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center; gap: .45rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--button-bg-color) 30%, transparent) !important;
    transition: transform .15s, filter .15s, box-shadow .15s !important;
}
body.sf-modern .btn-add-cart::before { content: '\eb25'; font-family: 'tabler-icons'; font-size: 1.05rem; }
body.sf-modern .btn-add-cart:hover { filter: brightness(1.06); transform: translateY(-1px); }
body.sf-modern .btn-wishlist-corner {
    top: 12px !important; right: 12px !important;
    width: 38px !important; height: 38px !important;
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid var(--sf-line) !important;
    color: var(--sf-ink) !important; font-size: 1.1rem !important;
    box-shadow: 0 2px 8px rgba(20, 22, 31, .1);
    backdrop-filter: blur(6px);
    transition: transform .15s, color .15s;
}
body.sf-modern[dir="rtl"] .btn-wishlist-corner, body.sf-modern[data-language="ar"] .btn-wishlist-corner { right: auto !important; left: 12px !important; }
body.sf-modern .btn-wishlist-corner:hover { transform: scale(1.08); color: #e5484d !important; }
body.sf-modern .product-card .swiper-pagination-bullet-active { background: var(--primary-color) !important; }

body.sf-modern .show-more-btn, body.sf-modern .show-less-btn, body.sf-modern .featured-section .btn-primary {
    border-radius: 999px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important;
    padding: .8rem 1.8rem !important;
}
/* Category Show More / Show Less: one solid colour (their inline style sets a gradient) */
body.sf-modern .show-more-btn, body.sf-modern .show-less-btn {
    background: var(--primary-color) !important; color: #fff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12) !important;
}

/* ---------- Trust signals ---------- */
body.sf-modern section[data-section="trust"] { background: var(--sf-soft) !important; }
body.sf-modern .trust-item {
    background: var(--sf-surface) !important; border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important; box-shadow: none !important;
    padding: 1.6rem 1.2rem !important; transition: transform .25s, box-shadow .25s;
}
body.sf-modern .trust-item:hover { transform: translateY(-3px); box-shadow: var(--sf-shadow) !important; }
body.sf-modern .trust-icon {
    width: 56px !important; height: 56px !important; border-radius: 16px !important;
    background: var(--sf-tint) !important; color: var(--primary-color) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font-size: 1.4rem !important; box-shadow: none !important; margin-bottom: .9rem !important;
}
body.sf-modern .trust-icon i { color: var(--primary-color) !important; }
body.sf-modern .trust-title { font-weight: 700 !important; font-size: 1rem !important; color: var(--sf-ink) !important; }
body.sf-modern .trust-item p { color: var(--sf-muted) !important; font-size: .85rem !important; margin: .25rem 0 0 !important; }

/* ---------- Testimonials ---------- */
body.sf-modern .testimonial-card {
    position: relative;
    background: var(--sf-surface) !important; border: 1px solid var(--sf-line) !important;
    border-radius: var(--sf-radius) !important; box-shadow: var(--sf-shadow) !important;
    padding: 1.6rem 1.5rem 1.4rem !important;
}
body.sf-modern .testimonial-card::before {
    content: '\201C'; position: absolute; top: .4rem; inset-inline-end: 1.1rem;
    font-size: 4rem; line-height: 1; color: var(--sf-tint-2); font-family: Georgia, serif;
}
body.sf-modern .testimonial-stars { color: #f5a524 !important; letter-spacing: 2px; }
body.sf-modern .testimonial-text { font-style: normal !important; color: var(--sf-ink-2) !important; font-size: .98rem !important; line-height: 1.7 !important; }
body.sf-modern .testimonial-author { font-weight: 700 !important; color: var(--sf-ink) !important; }

/* ---------- About ---------- */
body.sf-modern #about [data-field-name="years_experience"],
body.sf-modern #about [data-field-name="total_customers"],
body.sf-modern #about [data-field-name="total_products"] {
    font-size: clamp(1.45rem, 2.3vw, 2rem) !important; font-weight: 800 !important; letter-spacing: -.03em; line-height: 1.15;
}
/* Stats: three evenly spaced cards with real gaps (the card box is the column itself, so the
   row becomes a 3-column grid instead of using Bootstrap gutters) */
body.sf-modern #about .row.mt-4 {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 1.75rem 0 0 !important;
}
body.sf-modern #about .row.mt-4 > .col-md-4.text-center {
    width: auto !important; max-width: none !important; flex: none !important; margin: 0 !important;
    padding: 1.15rem .6rem !important; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    box-shadow: 0 1px 2px rgba(20, 22, 31, .04); transition: transform .2s, box-shadow .2s;
}
body.sf-modern #about .row.mt-4 > .col-md-4.text-center:hover { transform: translateY(-2px); box-shadow: var(--sf-shadow); }
body.sf-modern #about .row.mt-4 > .col-md-4 p { margin: 0 !important; font-size: .85rem; color: var(--sf-muted) !important; line-height: 1.3; }
body.sf-modern #about .col-lg-6:first-child p[data-type="about"] { color: var(--sf-ink-2) !important; font-size: 1.02rem !important; }
body.sf-modern #about [data-field-name="badge_description"] { color: rgba(255, 255, 255, .92) !important; }
body.sf-modern #about .col-lg-6 > div[style*="border-radius"] { border-radius: 24px !important; }

/* ---------- Footer ---------- */
body.sf-modern .footer { background: #0f1117 !important; color: #c9cdd8 !important; }
body.sf-modern .footer-title { color: #fff !important; font-weight: 700 !important; font-size: .95rem !important; letter-spacing: .01em; }
body.sf-modern .footer-link { color: #9ba1b0 !important; transition: color .2s; }
body.sf-modern .footer-link:hover { color: #fff !important; }
body.sf-modern .footer-social-icon {
    width: 40px; height: 40px; border-radius: 12px !important; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .08) !important; color: #fff !important;
    transition: background .2s;
}
body.sf-modern .footer-social-icon:hover { background: var(--primary-color) !important; }
body.sf-modern .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08) !important; }

/* ---------- Mobile bottom navigation ---------- */
body.sf-modern .mobile-bottom-nav {
    background: rgba(255, 255, 255, .9) !important;
    backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-top: 1px solid rgba(20, 22, 31, .07) !important;
    box-shadow: 0 -6px 24px rgba(20, 22, 31, .06) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}
body.sf-modern .mobile-nav-item { color: var(--sf-muted) !important; border-radius: 14px; }
body.sf-modern .mobile-nav-item .mobile-nav-label { font-weight: 600 !important; font-size: .68rem !important; }
body.sf-modern .mobile-nav-item.active { color: var(--primary-color) !important; }
body.sf-modern .mobile-nav-item.active .mobile-nav-icon {
    background: var(--sf-tint); border-radius: 999px; padding: .15rem .9rem;
}
body.sf-modern .mobile-nav-badge { background: var(--primary-color) !important; box-shadow: 0 0 0 2px #fff; }

/* Back to top */
body.sf-modern #backToTop, body.sf-modern .back-to-top {
    border-radius: 50% !important; background: var(--primary-color) !important; box-shadow: var(--sf-shadow-hover) !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
    body.sf-modern .store-filter-container { margin-bottom: 1rem; }
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px) {
    body.sf-modern { --sf-radius: 16px; }
    body.sf-modern .hero h1 { max-width: none; }
    body.sf-modern .btn-hero { padding: .85rem 1.8rem !important; font-size: .95rem !important; }
    body.sf-modern .hero-arrow { display: none !important; }

    body.sf-modern .marketing-title::before { width: 36px; height: 3px; }
    body.sf-modern .categories-marketing { gap: .75rem !important; }

    /* Two compact cards per row */
    body.sf-modern .categories-grid:not(.list-view):not(.table-view) { gap: .75rem !important; }
    body.sf-modern .category-card-content { padding: .75rem .8rem .9rem !important; }
    body.sf-modern .category-card-title { font-size: .9rem !important; }
    body.sf-modern .category-card-description { display: none !important; }
    body.sf-modern .category-card-btn { padding: .4rem .85rem !important; font-size: .76rem !important; }

    body.sf-modern [id^="productsGrid"] > [class*="col"], body.sf-modern .row > .col:has(> .product-card) { padding-inline: .375rem; }
    body.sf-modern .product-info { padding: .75rem .75rem .85rem !important; }
    body.sf-modern .product-name { font-size: .86rem !important; }
    body.sf-modern .product-info > p { display: none !important; }
    body.sf-modern .product-price { font-size: 1.02rem !important; }
    body.sf-modern .product-info > small { font-size: .75rem !important; }
    body.sf-modern .quantity-selector { margin: .6rem 0 .55rem !important; }
    body.sf-modern .qty-btn { width: 28px !important; height: 28px !important; }
    body.sf-modern .qty-input { width: 32px !important; height: 28px !important; font-size: .85rem !important; }
    body.sf-modern .btn-add-cart { min-height: 40px; font-size: .8rem !important; padding: .5rem .6rem !important; gap: .3rem; }
    body.sf-modern .btn-wishlist-corner { width: 34px !important; height: 34px !important; top: 8px !important; right: 8px !important; font-size: 1rem !important; }
    body.sf-modern[data-language="ar"] .btn-wishlist-corner { right: auto !important; left: 8px !important; }
    body.sf-modern .product-badge { top: 8px !important; inset-inline-start: 8px !important; font-size: .64rem !important; padding: .22rem .55rem !important; }

    body.sf-modern .trust-signals { gap: .75rem !important; }
    body.sf-modern .trust-item { padding: 1.1rem .8rem !important; }
    body.sf-modern .trust-icon { width: 46px !important; height: 46px !important; border-radius: 14px !important; font-size: 1.2rem !important; }
    body.sf-modern .trust-title { font-size: .88rem !important; }
    body.sf-modern .trust-item p { font-size: .76rem !important; }

    body.sf-modern #about .row.mt-4 { gap: .5rem; }
    body.sf-modern #about .row.mt-4 > .col-md-4.text-center { padding: .85rem .35rem !important; border-radius: 12px; }
    body.sf-modern #about [data-field-name="years_experience"],
    body.sf-modern #about [data-field-name="total_customers"],
    body.sf-modern #about [data-field-name="total_products"] { font-size: 1.35rem !important; }
    body.sf-modern #about .col-md-4.text-center p { font-size: .72rem; }

    /* keep the last content clear of the bottom bar */
    body.sf-modern .footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important; }
}

/* From the shared admin stylesheet (/includes/css/style.css), which the store no longer loads
   (it also pulled in the admin "Omnes" font files): pop-ups above everything, icon spacing */
.swal2-container { z-index: 9999 !important; }
.swal2-popup { z-index: 10000 !important; }
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands { font-style: normal; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }

/* Motion: see storefront-motion.css */

@media (prefers-reduced-motion: reduce) {
    body.sf-modern *, body.sf-modern *::before, body.sf-modern *::after { transition: none !important; animation: none !important; }
    /* Elements that start hidden and are revealed by an animation (base styles: .category-card +
       .animate-in, .fade-in-up, hero text, pop-up titles, our scroll reveal) must simply be visible
       when animations are switched off — otherwise they stay invisible (iPhone "Reduce Motion") */
    body.sf-modern .category-card, body.sf-modern .fade-in-up, body.sf-modern .sf-reveal,
    body.sf-modern .hero h1, body.sf-modern .hero p, body.sf-modern .btn-hero, body.sf-modern .swal2-title,
    body.sf-modern .sf-announce-item.is-active, body.sf-modern .sf-mega-link {
        opacity: 1 !important; transform: none !important;
    }
}