/* ============================================================
   CHAKHABIT (شخابيط) - Custom CSS for Salla Store
   Dark Red/Maroon Theme - 3D Pen for Kids
   ============================================================ */

/* ====== ROOT VARIABLES ====== */
:root {
    --color-primary: var(--1);
    --color-primary-dark: var(--2);
    --color-primary-light: #e84545;
    --color-primary-reverse: #fff5f5;
    --gr: linear-gradient(45deg, var(--1) 0%, var(--2) 100%);
    --1: #8B0000;
    --2: #5c0000;
    --main-bg: #1a0000;
    --main-bg-dark: #0a0000;
    --card-bg: #2a0000;
    --accent: #ff4444;
}

/* ==========================================================================
   1. GLOBAL & STRUCTURAL LAYOUT
   ========================================================================== */
body,
main#main-content,
.main-wrapper,
#app {
    background-color: var(--main-bg) !important;
}

header, footer, .site-header, .site-footer,
.global-separator, hr, .border-b, .border-t {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.top-navbar,
body.index .s-block .s-block__title,
.s-infinite-scroll-status,
.infinite-scroll-last,
.infinite-scroll-error {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

div, input, select { background-color: rgb(255 255 255 / 0%) !important; }
label { color: rgb(255 255 255) !important; }

body, .text-gray-800, .form-label, .s-slider-nav-arrow,
.tamara-product-widget, .spotii-wrapper {
    color: #fff !important;
}

a { color: #fff !important; }

/* ==========================================================================
   2. HOMEPAGE EDGE-TO-EDGE BANNERS (ZERO GAPS)
   ========================================================================== */
body.index #main-content .s-block--fixed-banner,
body.index #main-content .wide-placeholder,
body.index #main-content .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.index .banner--fixed,
body.index .banner,
body.index .s-block--fixed-banner .overflow-hidden {
    display: block !important;
    border-radius: 0px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

body.index #main-content .banner--fixed picture {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

body.index #main-content .banner--fixed img,
body.index .wide-placeholder img,
body.index .s-block--fixed-banner picture img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 0px !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: auto !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

body.index #main-content .s-block,
body.index #main-content .s-block::before,
body.index #main-content .s-block::after,
body.index #main-content .container::before,
body.index #main-content .container::after {
    border: none !important;
    box-shadow: none !important;
    content: none !important;
}

img.w-full.object-contain.rounded-md { border-radius: 0; }

/* ==========================================================================
   3. REMOVE ALL INTER-BLOCK SPACES & SEPARATORS
   ========================================================================== */
body.index #main-content .s-block,
body.index .s-block-sections,
body.index .s-block-wrapper,
body.index [id^="block_"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    outline: none !important;
}

body.index .section-title::after,
body.index .section-title::before,
body.index .s-block-separator,
body.index .separator-line,
body.index .line-separator,
body.index div[class*="separator"],
body.index div[class*="divider"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

body.index #main-content .grid,
body.index #main-content .flex,
body.index .s-products-list-wrapper {
    row-gap: 0 !important;
}

body.index .s-block + .s-block,
body.index .s-block-fixed-banner + .s-products-list-wrapper,
body.index .s-products-list-wrapper + .s-block {
    margin-top: 0 !important;
}

/* ==========================================================================
   4. SPLASH / LOADING ANIMATION
   ========================================================================== */
body.index:before, body[data-template="home"]:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #1a000099;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    position: fixed;
    z-index: 999999;
    transform: scale(0);
    animation: pupup 1s;
}

@keyframes pupup {
    0% { transform: scale(1); }
    80% { transform: scale(1); }
    100% { transform: scale(0); }
}

body.index:after, body[data-template="home"]:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    position: fixed;
    z-index: 999999;
    left: 0;
    transform: scale(0);
    animation: pupup_logo 1s;
}

@keyframes pupup_logo {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
    100% { transform: scale(0); }
}

/* ==========================================================================
   5. HEADER / NAVBAR
   ========================================================================== */
div#s-theme_edit_bar,
salla-maintenance-alert.s-maintenance-alert-wrapper.hydrated {
    display: none !important;
}

.navbar-brand img {
    max-height: 5rem !important;
    height: auto !important;
    display: block !important;
    filter: brightness(1) !important;
}

.navbar-brand {
    display: flex !important;
    align-items: center;
    height: auto;
}

@media only screen and (max-width: 700px) {
    .navbar-brand { margin: auto; }
    .navbar-brand img { max-height: 3.5rem !important; }
}

i.header-btn__icon.sicon-user-circle,
i.header-btn__icon.icon.sicon-shopping-bag {
    color: #ffffff;
    transition: all .5s;
}

.index div#mainnav, .index.inner.bg-inherit {
    background: 0 0 !important;
}

.main-nav-container.shadow-default { box-shadow: none; }

.main-nav-container.fixed-pinned .inner {
    position: fixed;
    width: 100%;
    backdrop-filter: blur(40px);
    background: rgba(10,0,0,0.7) !important;
}

salla-cart-summary { margin-right: .5rem !important; }
.s-cart-summary-content { display: none; }
.s-cart-summary-count { top: -0.425rem; }
.s-cart-summary-total { color: #fff !important; }

i.sicon-menu.text-primary.text-2xl {
    color: #ffffff;
    padding: 6px;
    border-radius: 22px;
}

nav#mobile-menu { display: none; }

@media(min-width: 1024px) {
    .navbar-brand img { max-height: 5rem !important; }

    .index .main-menu li.root-level>a {
        position: relative;
        z-index: 1;
        color: #fff !important;
        padding-bottom: 20px;
        padding-top: 7px;
        font-size: 15px;
        transition: all .5s;
    }

    .main-menu li.root-level>a:hover { color: #fff !important; }

    .main-menu li.root-level>a:after {
        background: var(--1) !important;
        content: "";
        inset: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform .5s ease-in-out;
        z-index: -1;
        border-radius: 5px;
    }

    .main-menu li.root-level>a:hover:after {
        transform: scaleX(1);
        transform-origin: left;
    }

    .navbar-brand { position: relative; right: 105px; }

    section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type,
    section:nth-of-type(1).s-block.s-block--photos-slider {
        margin-top: -9.5rem !important;
    }
}

@media(max-width: 768px) {
    .index div#mainnav, .index.inner.bg-inherit {
        background: transparent !important;
    }
}

/* ==========================================================================
   6. WHATSAPP BUTTON
   ========================================================================== */
.sicon-whatsapp2::after,
a[href*="whatsapp"].s-contacts-item::after {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.84 32'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; stroke-width: 0px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M27.2,4.65C24.21,1.65,20.22,0,15.98,0,7.24,0,.13,7.11.13,15.86c0,2.79.73,5.53,2.12,7.93l-2.25,8.22,8.41-2.21c2.32,1.26,4.93,1.93,7.58,1.93h0c8.74,0,15.86-7.11,15.86-15.86,0-4.24-1.65-8.22-4.64-11.22h0ZM15.99,29.05h0c-2.37,0-4.69-.64-6.71-1.84l-.48-.29-4.99,1.31,1.33-4.86-.31-.5c-1.33-2.09-2.02-4.52-2.02-7.01,0-7.27,5.91-13.18,13.19-13.18,3.52,0,6.83,1.38,9.32,3.86,2.49,2.49,3.86,5.8,3.86,9.32,0,7.27-5.92,13.19-13.18,13.19ZM23.21,19.17c-.39-.2-2.34-1.16-2.71-1.29s-.62-.2-.89.2c-.26.39-1.02,1.29-1.26,1.56-.23.26-.46.3-.86.1s-1.68-.62-3.19-1.97c-1.18-1.05-1.98-2.35-2.21-2.74s-.02-.61.18-.81c.18-.18.39-.46.59-.69s.26-.39.39-.66c.13-.26.07-.49-.03-.69s-.89-2.15-1.22-2.94c-.32-.77-.65-.67-.89-.68-.23-.01-.49-.01-.76-.01s-.69.1-1.06.49c-.36.39-1.39,1.36-1.39,3.31s1.42,3.83,1.62,4.1c.2.26,2.79,4.27,6.77,5.98.94.41,1.68.65,2.26.84.95.3,1.81.26,2.49.16.76-.11,2.34-.96,2.67-1.88s.33-1.72.23-1.88c-.09-.17-.36-.27-.76-.48h0Z'/%3E%3C/svg%3E");
    text-align: center;
    cursor: pointer;
    background: #46a51e;
    z-index: 999;
    display: block;
    font-size: 0px;
    color: #fff;
    box-shadow: #0000006b 2px 2px 8px;
    width: 56px;
    height: 56px;
    border-radius: 32.5px;
    position: fixed;
    bottom: 19px;
    right: 17px;
    transition: all .2s ease-in-out;
}

body:not(.index) .sicon-whatsapp2::after,
body:not(.index) a[href*="whatsapp"].s-contacts-item::after {
    bottom: 131px;
}

.sicon-whatsapp2:hover::after,
a[href*="whatsapp"].s-contacts-item:hover::after {
    content: "     في خدمتك ؟ ";
    font-family: var(--font-main) !important;
    width: 260px !important;
    animation: trns 1s;
    font-size: 20px !important;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes trns {
    0% { color: #ffffff00; }
    100% { color: #ffffff99; }
}

/* ==========================================================================
   7. PRODUCT CARDS
   ========================================================================== */
.s-product-card-entry, body.products-has-border .product-card {
    border-radius: 15px !important;
    overflow: hidden;
    box-shadow: -8px 10px 15px -3px rgba(0,0,0,0.1);
    padding: 20px 37px;
}

.s-product-card-entry {
    background-color: var(--card-bg);
    border: 1px solid var(--1);
}

.s-products-list-vertical-cards { display: flex; justify-content: center; }
.s-product-card-content { text-align: center; }
.s-product-card-content-sub { justify-content: center; }
body.index .s-product-card-content-title a { color: rgb(241 241 241); }
.s-products-list-placeholder { display: none !important; }

/* Product card alignment & spacing - CENTERED */
body.index .s-products-list-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

body.index .s-products-list-wrapper .container {
    display: flex !important;
    justify-content: center !important;
}

body.index .s-products-list-vertical-cards {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

body.index .s-product-card-entry {
    margin: 20px auto 50px auto !important;
    width: 100% !important;
    max-width: 500px !important;
    overflow: visible !important;
}

body.index .s-product-card-content {
    text-align: center !important;
    padding: 10px 15px !important;
}

body.index .s-product-card-content-title a {
    color: #fff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    display: block !important;
}

body.index .s-product-card-sale-price,
body.index .s-product-card-price {
    display: flex !important;
    justify-content: center !important;
    color: #fff !important;
    margin-top: 8px !important;
}

body.index .s-product-card-sale-price h4,
body.index .s-product-card-price h4 {
    color: var(--accent) !important;
    font-size: 1.3rem !important;
}

body.index .s-product-card-content-footer {
    display: flex !important;
    justify-content: center !important;
    margin-top: 12px !important;
    padding: 0 10px !important;
    width: 100% !important;
}

body.index .s-product-card-content-footer salla-add-product-button {
    width: 100% !important;
    display: block !important;
}

body.index .s-product-card-image {
    background: transparent !important;
}

body.index .s-product-card-image img {
    border-radius: 10px !important;
}

/* Show wishlist/favorites button */
.s-product-card-vertical .s-product-card-wishlist-btn,
.s-product-card-wishlist-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.s-product-card-wishlist-btn button {
    background-color: rgba(139,0,0,0.8) !important;
    color: #fff !important;
}

/* Show add to cart button on product cards */
.s-product-card-content-footer,
.s-product-card-content-footer salla-add-product-button,
salla-add-product-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.s-product-card-content-footer {
    margin-top: 10px !important;
}

/* ==========================================================================
   8. ADD TO CART BUTTON (PULSING)
   ========================================================================== */
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    font-size: 1rem;
    background-color: var(--1);
    color: #fff;
    display: block;
    text-align: center;
    font-weight: 700;
    border-radius: 20px;
    box-shadow: rgb(0 0 0/15%) 0px 2px 4px;
    animation: signal 1200ms infinite;
}

@keyframes signal {
    0% { box-shadow: 0 0 0 0 var(--1); }
    100% { box-shadow: 0 0 0 6px #ffffff21; }
}

/* ==========================================================================
   9. PRODUCT PAGE - FULL DARK
   ========================================================================== */
article#more-content { max-height: unset !important; }
a#btn-show-more { display: none; }

/* Kill ALL white backgrounds on product page */
body.product-single .bg-white,
body.product-single .bg-gray-100,
body.product-single .lg\:bg-white,
body.product-single .main-content,
body.product-single .product-form,
body.product-single form,
body.product-single .s-quantity-input-container,
body.product-single salla-add-product-button,
body.product-single salla-installment,
body.product-single .py-2\.5,
body.product-single .bg-white.py-2\.5,
body.product-single .mb-5,
body.product-single div.mb-5,
body.product-single .rounded-md {
    background-color: transparent !important;
    background: transparent !important;
    color: #fff !important;
}

/* Product form area - remove white box */
body.product-single .product-form,
body.product-single form.form,
body.product-single .s-button-element {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15) !important;
}

/* Quantity input */
body.product-single .s-quantity-input-input {
    color: #fff !important;
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.2) !important;
}

body.product-single .s-quantity-input-btn {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Add to cart button on product page */
body.product-single salla-add-product-button .s-button-primary,
body.product-single .s-add-product-button .s-button-element {
    background-color: var(--1) !important;
    color: #fff !important;
    border-radius: 12px !important;
}

.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 {
    display: flex;
    flex-direction: column;
}

form.product-form { order: 1; }
h1.text-xl.md\:text-2xl.leading-10.font-bold.mb-6.text-gray-800 { order: 1; }
.product__description.p-2.px-5.sm\:p-1.leading-7.mb-3 { order: 2; }

.product__description,
.product__description .article--main,
.product__description p,
.product__description span,
.product__description li,
.product__description article {
    color: #ffffff !important;
}

h1.text-xl.md\:text-2xl { color: #ffffff !important; }

div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > div.flex.whitespace-nowrap.gap-4.items-center > div.space-x-2.rtl\:space-x-reverse {
    display: none;
}

@media (max-width: 767px) {
    .product__description.p-2.px-5.sm\:p-1.leading-7.mb-3 { padding: 0; }
    article.article--main.pb-1 img { max-width: 100%; overflow: hidden; }
    body.product-single .container { overflow: hidden; }
    h1.text-xl.md\:text-2xl.leading-10.font-bold.mb-6.text-gray-800,
    .flex.whitespace-nowrap.gap-4.items-center,
    nav.breadcrumbs.w-full.py-5 { padding-right: 15px; }
}

/* ==========================================================================
   10. BREADCRUMB
   ========================================================================== */
.s-breadcrumb-wrapper, .s-breadcrumb-item,
.s-breadcrumb-item a, .s-breadcrumb-item span {
    color: #ffffff !important;
    opacity: 1 !important;
}

.s-breadcrumb-arrow svg, .s-breadcrumb-arrow svg path {
    fill: #ffffff !important;
}

/* ==========================================================================
   11. HIDE COMMENTS/REVIEWS
   ========================================================================== */
.s-comments.s-comments-product,
.s-comments-container,
salla-comment-form,
salla-reviews-summary,
.s-comments-header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */
.store-footer, .store-footer__inner, footer.store-footer {
    background-color: var(--main-bg-dark) !important;
    background: var(--main-bg-dark) !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff;
}

.store-footer .container.grid {
    background-color: var(--main-bg-dark) !important;
    color: #ffffff !important;
    padding: 60px 40px !important;
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
}

.store-footer h3, .store-footer .s-contacts-title,
.store-footer a, .store-footer p, .store-footer span,
.s-menu-footer-item, .s-contacts-item span {
    color: #ffffff !important;
}

.copyright-text, .copyright-text p { color: rgba(255,255,255,0.8) !important; }

footer.store-footer a.navbar-brand {
    order: 1; margin: 0; width: 142px; right: 0;
    font-size: 18px !important; align-self: center;
}

.store-footer a.flex.items-center.m-0 { justify-content: center !important; }
.footer-is-light .store-footer { color: #ffffff; }

.store-footer .container.grid h3 {
    font-size: 1.25rem !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid rgba(255,255,255,0.15) !important;
    padding-bottom: 10px !important;
}

.md\:flex.items-center.justify-between.py-4.container {
    background-color: var(--main-bg-dark) !important;
    max-width: 100% !important;
    border: none !important;
}

#main-content { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.store-footer { margin-top: 0 !important; }

@media (max-width: 1024px) {
    .store-footer .container.grid {
        grid-template-columns: 1fr !important;
        padding: 40px 20px !important;
        gap: 30px !important;
    }
}

@media (max-width: 450px) {
    footer.store-footer p { order: 2; }
    footer.store-footer .lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 {
        display: flex; flex-direction: column;
    }
}

/* Social icons */
a.s-contacts-item { width: auto !important; }
div#contact-slot { width: auto !important; }
.s-social-link { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
.s-social-list { display: flex !important; gap: 12px !important; }
.store-footer .contact-social ul { justify-content: center; }

@media (max-width: 991px) {
    salla-social.s-social-list.hydrated { justify-content: center; }
}

/* ==========================================================================
   13. HIDE TRUST BADGES
   ========================================================================== */
salla-trust-badges.s-trust-badges-wrapper,
.store-footer salla-trust-badges {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   14. MODALS & UI DARK
   ========================================================================== */
.s-modal-close, .s-notifications-item-icon, .s-notifications-item,
.s-rating-stars-label, .s-rating-modal-comment, .s-modal-body,
.s-button-light, .lg\:bg-white, .s-orders-table-head, .s-orders-table-tbody-tr {
    background-color: rgb(255 255 255 / 19%);
}

.s-user-settings-section-title, .s-modal-title,
span.s-orders-status-container, .text-gray-600, span, .text-gray-500 {
    color: rgb(255 255 255) !important;
}

.s-modal-body { background-color: var(--1) !important; }
.s-rating-modal-store-logo { filter: brightness(35.5); }
.s-button-primary { border-width: 1px; border-color: var(--1); background-color: var(--1); }
.s-button-danger { background: #ef4343 !important; }
.s-toggle .s-toggle-input:checked + div { background: var(--1) !important; }
.s-quantity-input-input { color: #fff; }
.s-form-control { background-color: rgb(255 255 255 / 0%); }
.s-comments.s-comments-product * { color: #fff !important; }
.s-add-product-button-mini-checkout-content { color: #fff; }
.s-add-product-button-mini-checkout.s-mini-checkout.hide-scroll.hydrated { background: var(--1); }
.s-add-product-toast { background-color: var(--main-bg-dark); }
.s-user-menu-login-btn svg { fill: #ffffff; }
div#tabbyPromo { background: var(--main-bg-dark) !important; }

/* ==========================================================================
   15. TAMARA & TABBY - DARK RED THEME
   ========================================================================== */
tamara-widget,
tamara-widget .tamara-summary-widget__container,
tamara-widget .tamara-summary-widget--inline-outlined,
div.mb-5:has(tamara-widget) {
    background-color: var(--main-bg-dark) !important;
    background: var(--main-bg-dark) !important;
    border-radius: 12px !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #ffffff !important;
}

tamara-widget .tamara-summary-widget__inline__text,
tamara-widget .tamara-summary-widget__amount,
tamara-widget span { color: #ffffff !important; }
tamara-widget .tamara-summary-widget__amount svg path { fill: #ffffff !important; }
tamara-widget .tamara-inline-learn-more-link { color: var(--accent) !important; }

div[class*="snippetWrapperContainer"] > div,
div[class*="snippetWrapperContainer"] > div > div {
    background-color: var(--main-bg-dark) !important;
    background: var(--main-bg-dark) !important;
    border-color: rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
}

div[class*="snippetWrapperContainer"] p,
div[class*="snippetWrapperContainer"] span,
div[class*="snippetWrapperContainer"] strong { color: #ffffff !important; }
div[class*="snippetWrapperContainer"] svg path { fill: #ffffff !important; }
div[class*="snippetWrapperContainer"] span[class*="snippetLink"],
div[class*="snippetWrapperContainer"] span[class*="Link"] span { color: var(--accent) !important; }

/* ==========================================================================
   16. SCROLLBAR
   ========================================================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: var(--main-bg-dark); }
::-webkit-scrollbar-thumb { background-color: var(--1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background-color: #a00000; }
body::-webkit-scrollbar { width: 6px; background-color: var(--main-bg); }
body::-webkit-scrollbar-thumb {
    min-height: 120px;
    background-color: var(--1);
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0.2) 75%,transparent 75%,transparent);
}

/* ==========================================================================
   17. CONTINUOUS BACKGROUND (NO GAPS)
   ========================================================================== */
#main-content, main#main-content,
.store-footer::before {
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
}

.s-block-separator, main#main-content > div:last-child,
.s-products-list-wrapper + div, .store-footer::before {
    background-color: var(--main-bg) !important;
    background: var(--main-bg) !important;
    border: none !important;
    height: 0px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.index .s-products-list-wrapper.s-products-list-horizontal-cards {
    background: var(--main-bg) !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   18. HARDWARE RENDERING
   ========================================================================== */
html, body, * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ==========================================================================
   19. BANNER IMAGE REPLACEMENTS
   After uploading 13 sections to Salla as Fixed Banners,
   uncomment and replace HASH with actual Salla CDN image hashes.
   ========================================================================== */
/* img[src*="SECTION01_HASH"] { content: url(SECTION01_URL); } */
/* img[src*="SECTION02_HASH"] { content: url(SECTION02_URL); } */
/* img[src*="SECTION03_HASH"] { content: url(SECTION03_URL); } */
/* img[src*="SECTION04_HASH"] { content: url(SECTION04_URL); } */
/* img[src*="SECTION05_HASH"] { content: url(SECTION05_URL); } */
/* img[src*="SECTION06_HASH"] { content: url(SECTION06_URL); } */
/* img[src*="SECTION07_HASH"] { content: url(SECTION07_URL); } */
/* img[src*="SECTION08_HASH"] { content: url(SECTION08_URL); } */
/* img[src*="SECTION09_HASH"] { content: url(SECTION09_URL); } */
/* img[src*="SECTION10_HASH"] { content: url(SECTION10_URL); } */
/* img[src*="SECTION11_HASH"] { content: url(SECTION11_URL); } */
/* img[src*="SECTION12_HASH"] { content: url(SECTION12_URL); } */
/* img[src*="SECTION13_HASH"] { content: url(SECTION13_URL); } */