/* Add custom CSS styles below */
/* ==========================================================================
   1. GLOBAL & STRUCTURAL PAGE LAYOUT (SEPARATORS & BORDERS REMOVED)
   ========================================================================== */
body,
main#main-content,
.main-wrapper,
#app {
    background-color: #0e1024 !important;
}

/* Eliminate global top/bottom structural separators, lines, and canvas shadows */
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;
}

/* Hide built-in component layers safely without breaking structural height */
.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;
}

/* ==========================================================================
   2. HOMEPAGE EDGE-TO-EDGE BANNERS
   ========================================================================== */
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;
}

/* Maximum image contrast & sharpness engine adjustments */
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;
}

/* Cleanup theme engine layouts to prevent borders bleeding through sections */
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;
}

/* ==========================================================================
   3. PRODUCT CARDS LISTS & GRID COMPONENT SURROUNDINGS
   ========================================================================== */
.s-products-list-wrapper.s-products-list-horizontal-cards {
    background: linear-gradient(180deg, #0a0f2e 0%, #0e1024 50%, #060b1f 100%) !important;
    padding: 40px 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
}

.s-products-list-wrapper::after,
.s-products-list-wrapper::before,
salla-products-list,
.s-products-list,
.horizontal-products {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    content: none !important;
}

/* ==========================================================================
   4. COMPACT VERTICALIZED PRODUCT CARD ENGINE
   ========================================================================== */
custom-salla-product-card.s-product-card-horizontal {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background-color: #0e152f !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    padding: 20px 15px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Inner Image Wrapper Content Styling */
custom-salla-product-card.s-product-card-horizontal .s-product-card-image {
    width: 100% !important;
    max-width: 240px !important;
    margin: 0 auto 15px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #0c1f3f !important;
    border-radius: 8px !important;
    padding: 10px !important;
    overflow: hidden !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    background-color: transparent !important;
}

/* Text & Pricing Sub-structure Components */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-content-title a {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price h4 {
    color: #4ade80 !important;
    font-size: 1.2rem !important;
    margin: 0 !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price span {
    color: #94a3b8 !important;
    font-size: 0.95rem !important;
    text-decoration: line-through !important;
    opacity: 0.85 !important;
}

/* Footer Control Elements Customization */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-footer {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 20px !important;
}

custom-salla-product-card.s-product-card-horizontal salla-add-product-button {
    flex-grow: 1 !important;
    width: 100% !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-wishlist-btn {
    display: none !important;
}

/* ==========================================================================
   5. RETAIL FOOTER STYLING INTEGRATION (BORDERS REMOVED)
   ========================================================================== */
.store-footer__inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Main inner footer grid utilities */
.store-footer .container.grid {
    background-color: #0e1024 !important;
    color: #ffffff !important;
    padding: 60px 40px !important;
    border-radius: 0px !important;
    align-items: start !important;
    max-width: 100% !important;
    width: 100% !important;
    border: none !important;
}

.store-footer .container.grid h3,
.store-footer .container.grid h3 a,
.store-footer .container.grid .s-menu-footer-item,
.store-footer .container.grid .s-contacts-title,
.store-footer .container.grid .s-contacts-item,
.store-footer .container.grid .s-trust-badges-label {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.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;
    display: inline-block !important;
    width: 100% !important;
}

/* Salla Trust Badges Format Setup */
.s-trust-badges-wrapper {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 15px !important;
    width: 100% !important;
    max-width: 280px !important;
}

.s-trust-badges-number {
    color: #ffd700 !important;
    font-size: 0.95rem !important;
}

.s-menu-footer-item {
    display: block !important;
    padding: 6px 0 !important;
    opacity: 0.85 !important;
    transition: all 0.25s ease !important;
}

.s-menu-footer-item:hover {
    opacity: 1 !important;
    transform: translateX(-5px) !important;
}

.s-contacts-icon svg {
    fill: #ffffff !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
}

.s-contacts-item {
    display: flex !important;
    align-items: center !important;
    margin-top: 10px !important;
    opacity: 0.9 !important;
}

/* Copyright Base Separation Layout */
.md\:flex.items-center.justify-between.py-4.container {
    background-color: #0e1024 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    border: none !important;
}

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

.copyright-text a {
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

.s-payments-list {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
}

.s-payments-list-item img {
    background-color: rgba(255, 255, 255, 0.9) !important;
    padding: 4px !important;
    border-radius: 4px !important;
}

/* ==========================================================================
   6. RESPONSIVE BREAKPOINT DISTORTION REPAIR
   ========================================================================== */
@media (max-width: 1024px) {
    .store-footer .container.grid {
        grid-template-columns: 1fr !important;
        padding: 40px 20px !important;
        gap: 30px !important;
    }

    .s-trust-badges-wrapper {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   TRANSLUCENT MIRROR FIXED HEADER ENGINE (ONLY WHEN SCROLLED PAST HERO)
   ========================================================================== */
/* 1. Target the outer structural header wrapper - ONLY after scrolling past hero */
body.scrolled-past-hero header.site-header,
body.scrolled-past-hero .site-header,
body.scrolled-past-hero div.container:has(.flex.items-stretch.justify-between.relative) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 9999 !important;

    /* The Mirror Effect: Advanced Glassmorphism */
    background-color: rgba(14, 16, 36, 0.4) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;

    /* Cleanup layout architecture gaps */
    border: none !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
    padding: 5px 0 !important;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease !important;
}

/* 2. Adjust the internal layout template container */
body.scrolled-past-hero .container:has(.flex.items-stretch.justify-between.relative) .flex.items-stretch.justify-between.relative {
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* 3. Style icons for high contrast - ONLY when scrolled */
body.scrolled-past-hero .site-header svg,
body.scrolled-past-hero .s-user-menu-login-btn svg,
body.scrolled-past-hero #s-cart-icon svg,
body.scrolled-past-hero .header-btn__icon,
body.scrolled-past-hero .sicon-menu,
body.scrolled-past-hero .s-cart-summary-count,
body.scrolled-past-hero .s-cart-summary-total {
    fill: #ffffff !important;
    color: #ffffff !important;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.5)) !important;
}

/* 4. Body padding - ONLY when scrolled past hero */
body.scrolled-past-hero {
    padding-top: 70px !important;
}

/* ==========================================================================
   STRIP WHITE BACKGROUND & SHADOWS FROM MAIN NAVIGATION
   ========================================================================== */
/* 1. Target the main navigation identifier container - homepage only */
body.index #mainnav.main-nav-container,
body.index div#mainnav {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 2. Neutralize the inner engine wrappers - homepage only */
body.index #mainnav .inner,
body.index #mainnav .container,
body.index #mainnav .inner.bg-inherit {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 3. Force any residual background components - homepage only */
body.index #mainnav .flex.items-stretch.justify-between {
    background: transparent !important;
    background-color: transparent !important;
}

/* ==========================================================================
   7. REMOVE HOME PAGE ACCENT SEPARATORS & INTER-BLOCK LINES
   ========================================================================== */
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;
}

/* ==========================================================================
   8. CONTINUOUS GRADIENT BACKGROUND (NAV OVER PRODUCT CARDS)
   ========================================================================== */
body.index #mainnav.main-nav-container,
body.index .s-products-list-wrapper.s-products-list-horizontal-cards {
    background: linear-gradient(180deg, #0a0f2e 0%, #0e1024 50%, #060b1f 100%) !important;
    border: none !important;
    box-shadow: none !important;
}

body.index #mainnav,
body.index #mainnav .inner,
body.index #mainnav .container,
body.index #mainnav .inner.bg-inherit,
body.index body.index #mainnav .flex.items-stretch.justify-between {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.index #mainnav.main-nav-container {
    margin-bottom: 0 !important;
    padding-bottom: 15px !important;
}

.s-products-list-wrapper.s-products-list-horizontal-cards {
    margin-top: 0 !important;
    padding-top: 20px !important;
}

body.index #mainnav .sicon-menu,
body.index #mainnav .s-user-menu-login-btn svg,
body.index #mainnav #s-cart-icon svg,
body.index #mainnav .s-cart-summary-count,
body.index #mainnav .s-cart-summary-total {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   UPDATED UNIFIED BACKGROUND FLOW (SEAMLESS SINGLE GRADIENT)
   ========================================================================== */
body.index #mainnav.main-nav-container,
body.index div#mainnav {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

#mainnav .inner,
#mainnav .container,
#mainnav .inner.bg-inherit,
body.index #mainnav .flex.items-stretch.justify-between {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.s-products-list-wrapper.s-products-list-horizontal-cards {
    background: linear-gradient(180deg, #0a0f2e 0%, #0e1024 100%) !important;
    border: none !important;
    box-shadow: none !important;
}

.s-products-list-wrapper.s-products-list-horizontal-cards {
    margin-top: -70px !important;
    padding-top: 90px !important;
    position: relative !important;
    z-index: 1 !important;
}

body.index #mainnav.main-nav-container {
    position: relative !important;
    z-index: 10 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   UNIFY LAYOUT SEPARATOR COLOR
   ========================================================================== */
.s-products-list-wrapper.s-products-list-horizontal-cards + div,
div:has(+ .store-footer),
.s-block-separator,
#main-content > div:nth-child(even) {
    background-color: #04122d !important;
    background: #04122d !important;
    border: none !important;
}

.s-products-list-wrapper.s-products-list-horizontal-cards {
    margin-bottom: 0 !important;
    padding-bottom: 30px !important;
}

body.index #main-content .s-block,
body.index [id^="block_"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   FOOTER COHESION AND NAVY LINE REMOVAL
   ========================================================================== */
#main-content,
main#main-content,
.store-footer::before,
.s-products-list-wrapper + div:last-of-type {
    background-color: #0e1024 !important;
    background: #0e1024 !important;
}

.store-footer,
.store-footer__inner {
    background-color: #0e1024 !important;
    background: #0e1024 !important;
    border-top: none !important;
}

#main-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.store-footer {
    margin-top: 0 !important;
}

salla-trust-badges.s-trust-badges-wrapper {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
}

/* ==========================================================================
   HIDE PRODUCT COMMENTS AND REVIEWS SECTION
   ========================================================================== */
.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;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   PRODUCT DESCRIPTION TYPOGRAPHY OVERHAUL (WHITE TEXT)
   ========================================================================== */
.product__description,
.product__description .article--main,
.product__description p,
.product__description span,
.product__description li,
.product__description article {
    color: #ffffff !important;
}

/* ==========================================================================
   PRODUCT TITLE HEADER TYPOGRAPHY OVERHAUL (WHITE TEXT)
   ========================================================================== */
h1.text-xl.md\:text-2xl,
h1.sr-only,
h1.navbar-brand h1 {
    color: #ffffff !important;
}

/* ==========================================================================
   BREADCRUMB TYPOGRAPHY & ICON OVERHAUL (WHITE)
   ========================================================================== */
.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;
    color: #ffffff !important;
}

/* ==========================================================================
   SOLID FOOTER CANVAS CONFIGURATION (#0a0f2e)
   ========================================================================== */
.store-footer,
.store-footer__inner,
footer.store-footer,
div.container.grid.grid-col-1.lg\:grid-cols-6 {
    background-color: #0a0f2e !important;
    background: #0a0f2e !important;
    border: none !important;
    box-shadow: none !important;
}

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

#main-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.store-footer {
    margin-top: 0 !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;
}

salla-trust-badges.s-trust-badges-wrapper {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.s-trust-badges-label,
.s-trust-badges-number {
    color: #ffffff !important;
}

/* ==========================================================================
   STYLISH WAVE DESIGN BACKGROUND (#0a0f2e with White Waves)
   ========================================================================== */
.store-footer,
.store-footer__inner,
footer.store-footer,
div.container.grid.grid-col-1.lg\:grid-cols-6 {
    position: relative !important;
    background-color: #0a0f2e !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.08' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,144C672,139,768,181,864,181.3C960,181,1056,139,1152,122.7C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='0.13' d='M0,96L60,117.3C120,139,240,181,360,197.3C480,213,600,203,720,176C840,149,960,107,1080,101.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: bottom center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}

.s-block-separator,
main#main-content > div:last-child,
.s-products-list-wrapper + div,
.store-footer::before {
    background-color: #0a0f2e !important;
    border: none !important;
    height: 0px !important;
    margin: 0 !important;
    padding: 0 !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;
    position: relative !important;
    z-index: 2 !important;
}

salla-trust-badges.s-trust-badges-wrapper {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) !important;
}

.s-trust-badges-label,
.s-trust-badges-number {
    color: #ffffff !important;
}

/* ==========================================================================
   ELEGANT CENTERED FOOTER BRANDING TITLE
   ========================================================================== */
.store-footer a.flex.items-center,
div.lg\:col-span-2 > a {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
}

.store-footer h3,
div.lg\:col-span-2 h3 {
    text-align: center !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    margin: 0 auto 1.5rem auto !important;
    padding-bottom: 0.75rem !important;
}

/* ==========================================================================
   3D PRODUCT CARD ANIMATION ENGINE
   ========================================================================== */
.s-product-card-entry {
  perspective: 1000px;
  position: relative;
  display: block;
}

.s-product-card-horizontal {
  position: relative;
  transform-style: preserve-3d;
  animation: cameraPan3D 6s ease-in-out infinite alternate;
  backface-visibility: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-product-card-horizontal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 40%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.2) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 200%;
  background-position: 0% 0%;
  mix-blend-mode: overlay;
  animation: lightGlare 6s ease-in-out infinite alternate;
}

.s-product-card-image img {
  transform: translateZ(20px) scale(0.98);
  transition: transform 0.3s ease;
}

.s-product-card-content-title,
.s-product-card-sale-price {
  transform: translateZ(15px);
}

.s-product-card-horizontal:hover {
  animation-play-state: paused;
  transform: scale(1.02) rotateX(2deg) rotateY(-2deg);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
}

.s-product-card-horizontal:hover .s-product-card-image img {
  transform: translateZ(35px) scale(1.02);
}

@keyframes cameraPan3D {
  0% {
    transform: rotateX(2deg) rotateY(-4deg) rotateZ(-0.5deg);
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.06);
  }
  50% {
    transform: rotateX(-3deg) rotateY(1deg) rotateZ(0deg);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.08);
  }
  100% {
    transform: rotateX(4deg) rotateY(5deg) rotateZ(0.5deg);
    box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.06);
  }
}

@keyframes lightGlare {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

/* ==========================================================================
   9. MAXIMUM ULTRA-FIDELITY HARDWARE RENDERING ENGINE CONFIGURATION
   ========================================================================== */
html, body, * {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    font-smooth: always !important;
    color-profile: sRGB !important;
    rendering-intent: perceptual !important;
}

.s-products-list-wrapper,
.s-product-card-entry,
.s-product-card-horizontal,
header.site-header,
footer.store-footer {
    will-change: transform, opacity, box-shadow !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}

img,
.s-product-card-image img,
.store-footer,
.s-products-list-wrapper {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    image-rendering: pixelated !important;
    filter: contrast(1.02) saturate(1.02) drop-shadow(0 0 1px rgba(0,0,0,0.01)) !important;
    background-size: cover;
}

.s-product-card-horizontal {
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
}

/* ==========================================================================
   10. HIDE SPECIFIC FREELANCE TRUST BADGE ELEMENT
   ========================================================================== */
salla-trust-badges.s-trust-badges-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   11. PREMIUM VISUALLY STRIKING CENTERED PRICING ENGINE
   ========================================================================== */
custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    margin: 15px auto 0 auto !important;
    width: 100% !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price h4 {
    color: #4ade80 !important;
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    padding: 4px 16px !important;
    background: rgba(74, 222, 128, 0.08) !important;
    border: 1px solid rgba(74, 222, 128, 0.15) !important;
    border-radius: 30px !important;
    text-shadow: 0 0 12px rgba(74, 222, 128, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transform: translateZ(0);
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price h4 i {
    font-size: 1rem !important;
    opacity: 0.9 !important;
    font-style: normal !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price span {
    color: #94a3b8 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
    opacity: 0.65 !important;
    margin-top: 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price span i {
    font-size: 0.75rem !important;
    font-style: normal !important;
}

/* ==========================================================================
   12. HERO VIDEO TRANSPARENT HEADER INTEGRATION
   ========================================================================== */

/* Body padding ZERO when hero video is visible */
body.index:not(.scrolled-past-hero) {
  padding-top: 0 !important;
}

/* Override the fixed header engine - make it transparent on hero */
body.index:not(.scrolled-past-hero) header.site-header,
body.index:not(.scrolled-past-hero) .site-header,
body.index:not(.scrolled-past-hero) div.container:has(.flex.items-stretch.justify-between.relative) {
  position: absolute !important;
  background-color: transparent !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Store header transparent */
body.index:not(.scrolled-past-hero) .store-header {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
}

body.index:not(.scrolled-past-hero) .top-navbar {
  background: transparent !important;
  display: none !important;
}

body.index:not(.scrolled-past-hero) #mainnav,
body.index:not(.scrolled-past-hero) .main-nav-container {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 60px !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
}
body.index:not(.scrolled-past-hero) #mainnav .inner {
  height: auto !important;
  min-height: 60px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.index:not(.scrolled-past-hero) #mainnav .container,
body.index:not(.scrolled-past-hero) #mainnav .flex.items-stretch.justify-between {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* All header elements white on hero */
body.index:not(.scrolled-past-hero) .store-header *,
body.index:not(.scrolled-past-hero) .store-header a,
body.index:not(.scrolled-past-hero) .store-header i,
body.index:not(.scrolled-past-hero) .store-header span,
body.index:not(.scrolled-past-hero) .store-header button,
body.index:not(.scrolled-past-hero) .store-header svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Logo white on hero */
body.index:not(.scrolled-past-hero) .navbar-brand img {
  filter: brightness(0) invert(1) !important;
}

/* Cart badge fix on hero */
body.index:not(.scrolled-past-hero) .s-cart-summary-count {
  color: #fff !important;
  background: #e74c3c !important;
}

/* Mobile header icons fix */
@media (max-width: 768px) {
  body.index:not(.scrolled-past-hero) #mainnav {
    height: auto !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
  }
  body.index:not(.scrolled-past-hero) #mainnav .inner {
    height: auto !important;
    display: block !important;
  }
  body.index:not(.scrolled-past-hero) #mainnav .container {
    display: block !important;
  }
  body.index:not(.scrolled-past-hero) #mainnav .flex.items-stretch.justify-between {
    display: flex !important;
  }
}

/* Hero video height 95vh */
.s-block--bundle-hero-video-pro,
salla-hero-video-pro-zask4k {
  --hero-height-desktop: 95vh !important;
  --hero-height-mobile: 90vh !important;
}
salla-hero-video-pro-zask4k .hero-container {
  height: 95vh !important;
  max-height: 95vh !important;
}

/* Product card section - pull up & ZERO blue background */
.s-block--bundle-hero-video-pro + section,
.s-block--bundle-hero-video-pro + .s-block,
.s-block--bundle-hero-video-pro + section.s-block,
.s-block--bundle-hero-video-pro + section.s-block.container {
  margin-top: -15vh !important;
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
.s-block--bundle-hero-video-pro + section *,
.s-block--bundle-hero-video-pro + .s-block * {
  background-color: transparent !important;
  background-image: none !important;
}
/* Keep only the product card itself dark */
.s-block--bundle-hero-video-pro + section custom-salla-product-card,
.s-block--bundle-hero-video-pro + .s-block custom-salla-product-card {
  background-color: #0e152f !important;
}
.s-block--bundle-hero-video-pro + section .s-product-card-image,
.s-block--bundle-hero-video-pro + .s-block .s-product-card-image {
  background-color: #0c1f3f !important;
}
/* Replace bright blue with dark matching color */
.s-block--bundle-hero-video-pro + section + .s-block,
.s-block--bundle-hero-video-pro + section + section,
.s-block--bundle-hero-video-pro ~ .s-block--fixed-banner {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
}

/* ==========================================================================
   13. GLOBAL STICKY HEADER WITH GLASSMORPHISM (ALL PAGES)
   ========================================================================== */
/* Header fixed on ALL pages when scrolling */
.store-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}

#mainnav,
#mainnav.main-nav-container {
  background: rgba(14, 16, 36, 0.45) !important;
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  height: auto !important;
  min-height: 55px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

#mainnav .inner,
#mainnav .container,
body.index #mainnav .inner.bg-inherit {
  background: transparent !important;
  background-color: transparent !important;
}

/* Header text & icons white on ALL pages */
#mainnav *,
#mainnav a,
#mainnav i,
#mainnav span,
#mainnav button,
#mainnav svg path {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.navbar-brand img {
  filter: brightness(0) invert(1) !important;
}

.s-cart-summary-count {
  color: #fff !important;
  background: #e74c3c !important;
}

/* Homepage nav glassmorphism light override */
body.index #mainnav,
body.index #mainnav .inner,
body.index #mainnav .container,
body.index #mainnav .inner.bg-inherit,
body.index #mainnav .flex.items-stretch.justify-between {
    background: transparent !important;
    background-color: #00000008 !important;
    backdrop-filter: blur(5px) !important;
    box-shadow: none !important;
}

/* Homepage hero override - transparent header */
body.index:not(.scrolled-past-hero) #mainnav,
body.index:not(.scrolled-past-hero) #mainnav.main-nav-container {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   14. PRODUCT PAGE DARK THEME
   ========================================================================== */
/* Remove white backgrounds on product page */
.product__image,
.product__image-wrapper,
.product-single-media-wrapper,
.swiper-slide,
.product-slider,
.product-gallery,
.card-slide-data,
.s-product-card-image,
main .swiper-slide {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
}

/* Product image container */
.product__image img,
.product-single-media-wrapper img {
  background: transparent !important;
}

/* Breadcrumb spacing */
.s-breadcrumb-wrapper {
  padding-top: 15px !important;
  padding-bottom: 10px !important;
  margin-top: 0 !important;
}

/* Product page main background */
.product,
.product-single,
.product__content,
.product__details {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
}

/* White circle button fix (wishlist/share) */
.product .btn--wishlist,
.product .btn--share,
.product button[class*="wishlist"],
.product button[class*="share"],
.product .s-button-icon,
.product .circle-btn,
.product button.rounded-full,
.product .swiper-button-next,
.product .swiper-button-prev {
  background-color: rgba(14, 16, 36, 0.8) !important;
  background: rgba(14, 16, 36, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}
.product .btn--wishlist svg path,
.product .btn--share svg path,
.product .s-button-icon svg path,
.product button.rounded-full svg path {
  fill: #ffffff !important;
}

/* Product thumbnails dark background */
.product .swiper-slide,
.product .swiper-slide img,
.product .product-slide-thumb,
.product-single-media-group .swiper-slide {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.product .swiper-slide-thumb-active {
  border-color: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================================================
   15. PRODUCT PAGE FIXES (TARGETED - DO NOT BREAK LAYOUT)
   ========================================================================== */

/* Reset only homepage-specific overrides */
body:not(.index) .overflow-hidden {
  font-size: inherit !important;
  line-height: inherit !important;
}
body:not(.index) .banner--fixed,
body:not(.index) .banner {
  font-size: inherit !important;
  line-height: inherit !important;
}
body:not(.index) img {
  image-rendering: auto !important;
  filter: none !important;
}
/* Product image backgrounds dark */
body:not(.index) .swiper-slide {
  background: #0e1024 !important;
}
body:not(.index) .swiper-slide img {
  background: transparent !important;
}
body:not(.index) .swiper-thumbs .swiper-slide {
  background: #0e1024 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}
body:not(.index) .swiper-thumbs .swiper-slide-thumb-active {
  border-color: rgba(255,255,255,0.5) !important;
}
/* Circle button dark */
body:not(.index) button.rounded-full {
  background: rgba(14,16,36,0.8) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
body:not(.index) button.rounded-full svg path {
  fill: #ffffff !important;
}
/* Product title fix */
body:not(.index) .s-block .s-block__title {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
}

/* ==========================================================================
   16. USER MENU DROPDOWN DARK THEME
   ========================================================================== */
.s-user-menu-dropdown {
  background-color: #0e152f !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
}
.s-user-menu-dropdown-header {
  background: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.s-user-menu-dropdown-header span,
.s-user-menu-dropdown-header p {
  color: #ffffff !important;
}
.s-user-menu-dropdown-header-close svg path {
  fill: #ffffff !important;
}
.s-user-menu-dropdown-item-link {
  color: #ffffff !important;
}
.s-user-menu-dropdown-item-link:hover {
  background: rgba(255,255,255,0.08) !important;
}
.s-user-menu-dropdown-item-prefix svg path {
  fill: rgba(255,255,255,0.7) !important;
}
.s-user-menu-dropdown-item-title {
  color: #ffffff !important;
}
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
  color: #e74c3c !important;
}
.s-user-menu-dropdown-item-logout svg path {
  fill: #e74c3c !important;
}
.s-user-menu-trigger-avatar {
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  background: #0e152f !important;
}
.s-user-menu-trigger-hello,
.s-user-menu-trigger-name {
  color: #ffffff !important;
}
.s-user-menu-trigger-icon svg path {
  fill: #ffffff !important;
}

/* ==========================================================================
   17. USER AVATAR WHITE BOX FIX + DESKTOP HEADER ICONS ALIGNMENT
   ========================================================================== */
/* Remove white background from user avatar/icon container */
.s-user-menu-trigger,
.s-user-menu-trigger-avatar,
.s-user-menu-trigger-avatar img,
.header-user-avatar,
.user-avatar,
.s-login-btn,
[class*="user-menu"] img,
[class*="user-avatar"],
#mainnav .s-user-menu-trigger,
#mainnav [class*="avatar"],
#mainnav [class*="user"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Avatar image itself - round, no white box */
.s-user-menu-trigger-avatar,
.s-user-menu-trigger-avatar img,
[class*="user-avatar"] img,
.header-user-avatar img {
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  background: transparent !important;
}
/* Any wrapper div/span around the avatar */
.s-user-menu-trigger > *,
.s-user-menu > *,
#mainnav .s-user-menu,
#mainnav .s-user-menu-trigger {
  background: transparent !important;
  background-color: transparent !important;
}
/* White card/box behind avatar icon */
.s-user-menu-trigger::before,
.s-user-menu-trigger::after,
.s-user-menu-trigger-avatar::before,
.s-user-menu-trigger-avatar::after {
  display: none !important;
}
/* Image inside avatar - remove any white/light bg */
img[class*="avatar"],
img[class*="user"],
.rounded-full[class*="avatar"],
.rounded-full[class*="user"] {
  background: transparent !important;
  box-shadow: none !important;
}

/* Desktop header icons - proper horizontal alignment */
@media (min-width: 769px) {
  #mainnav .flex.items-stretch.justify-between,
  #mainnav .container > .flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  /* Right side icons group */
  #mainnav .flex.items-center,
  .header-actions,
  .nav-actions,
  .header-icons,
  #mainnav .flex.items-stretch.justify-between > div:first-child,
  #mainnav .flex.items-stretch.justify-between > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  /* Each icon button same size */
  #mainnav .flex.items-center > *,
  #mainnav button,
  #mainnav a[class*="icon"],
  #mainnav .s-cart-summary,
  #mainnav .s-user-menu-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }
  /* Prevent stacking */
  #mainnav .inner,
  #mainnav .inner > .container {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
  }
}

/* ==========================================================================
   18. TAMARA WIDGET - WHITE THEME (MATCH EMKAN STYLE)
   ========================================================================== */
tamara-widget,
tamara-widget .tamara-summary-widget__container,
tamara-widget .tamara-summary-widget--inline-outlined,
div.mb-5:has(tamara-widget) {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  color: #16181d !important;
}
tamara-widget .tamara-summary-widget__container {
  color: #16181d !important;
  border-color: #DAE0EB !important;
}
tamara-widget .tamara-summary-widget__inline__text,
tamara-widget .tamara-summary-widget__amount,
tamara-widget .tamara-inline-learn-more-link,
tamara-widget span {
  color: #16181d !important;
}
/* SVG icon inside amount - make it dark */
tamara-widget .tamara-summary-widget__amount svg path {
  fill: #16181d !important;
}
/* Share button next to tamara - keep dark */
div.mb-5:has(tamara-widget) + button,
div.mb-5:has(tamara-widget) ~ button.rounded-full {
  background: rgba(14,16,36,0.8) !important;
}

/* ==========================================================================
   19. FOOTER MOBILE CENTER + STYLING
   ========================================================================== */

/* --- Social media icons: horizontal row, centered (all screens) --- */
.store-footer salla-social .s-social-list,
.store-footer .contact-social .s-social-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  list-style: none !important;
}
.store-footer salla-social .s-social-link,
.store-footer .contact-social .s-social-link {
  display: inline-flex !important;
}

/* --- Phone icon: small circle matching social media icons --- */
.store-footer .s-contacts-icon,
salla-contacts .s-contacts-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: transparent !important;
  line-height: 1 !important;
}
.store-footer .s-contacts-icon svg,
salla-contacts .s-contacts-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: auto !important;
  display: block !important;
}
.store-footer .s-contacts-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}

/* --- Privacy policy link: same style as section titles --- */
.store-footer .s-menu-footer-item {
  color: rgba(255,255,255,0.75) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.store-footer .s-menu-footer-item:hover {
  color: #ffffff !important;
}
.store-footer .s-menu-footer-list {
  text-align: center !important;
}

/* --- Mobile: center everything --- */
@media (max-width: 768px) {
  /* Grid stacks and centers */
  .store-footer .store-footer__inner .grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 24px !important;
  }
  .store-footer .store-footer__inner .grid > div,
  .store-footer .store-footer__inner .grid > salla-apps-icons {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Headings center */
  .store-footer h3,
  .store-footer .s-contacts-title {
    text-align: center !important;
    width: 100% !important;
  }

  /* Contact info center */
  .store-footer .s-contacts-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Show mobile social icons */
  .store-footer .contact-social {
    display: block !important;
    width: 100% !important;
    margin-top: 16px !important;
  }

  /* Menu links center */
  .store-footer salla-menu div,
  .store-footer .s-menu-footer-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Footer brand link center */
  .store-footer a.flex.items-center {
    justify-content: center !important;
  }

  /* Trust badges center */
  .store-footer .flex.gap-4 {
    justify-content: center !important;
  }

  /* Bottom bar center */
  .store-footer .md\\:flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  .store-footer .s-payments-list {
    justify-content: center !important;
  }
}

/* --- Payment icons: always horizontal row --- */
.store-footer .s-payments-list,
salla-payments .s-payments-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
}
.store-footer .s-payments-list-item,
salla-payments .s-payments-list-item {
  display: inline-flex !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   20. FOOTER WAVE BACKGROUND
   ========================================================================== */
.store-footer,
.store-footer__inner,
footer.store-footer,
div.container.grid.grid-col-1.lg\:grid-cols-6 {
  position: relative !important;
  background-color: #0072dd !important;
  background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.08' d='M0,160L48,176C96,192,192,224,288,213.3C384,203,480,149,576,144C672,139,768,181,864,181.3C960,181,1056,139,1152,122.7C1248,107,1344,117,1392,122.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3Cpath fill='%23ffffff' fill-opacity='0.13' d='M0,96L60,117.3C120,139,240,181,360,197.3C480,213,600,203,720,176C840,149,960,107,1080,101.3C1200,96,1320,128,1380,144L1440,160L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z'%3E%3C/path%3E%3C/svg%3E) !important;
  background-repeat: no-repeat !important;
  background-position: bottom !important;
  background-size: cover !important;
}
/* Footer bottom bar */
.md\:flex.items-center.justify-between.py-4.container {
  background-color: #0072e1 !important;
}

/* ==========================================================================
   21. HOMEPAGE PRODUCT CARD - PRICE + CONTENT CENTERED
   ========================================================================== */
/* Content sub area (price + rating) */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-sub {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}
/* Price block */
custom-salla-product-card.s-product-card-horizontal .s-product-card-sale-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 10px auto 0 auto !important;
}
/* Rating stars center */
custom-salla-product-card.s-product-card-horizontal .s-product-card-rating {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}
/* Content main (title) center */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-main {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
}
custom-salla-product-card.s-product-card-horizontal .s-product-card-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* ==========================================================================
   22. HIDE VIDEO PLAY BUTTON OVERLAY
   ========================================================================== */
.s-block--bundle-hero-video-pro .play-btn,
.s-block--bundle-hero-video-pro .play-button,
.s-block--bundle-hero-video-pro button[class*="play"],
.s-block--bundle-hero-video-pro [class*="play-icon"],
.s-block--bundle-hero-video-pro .hero-play,
salla-hero-video-pro-zask4k .play-btn,
salla-hero-video-pro-zask4k .play-button,
salla-hero-video-pro-zask4k button[class*="play"],
salla-hero-video-pro-zask4k [class*="play-icon"],
salla-hero-video-pro-zask4k [class*="play"],
video::-webkit-media-controls-play-button,
video::-webkit-media-controls {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   23. PRODUCT PAGE BOTTOM BAR DARK (QUANTITY + BUTTONS)
   ========================================================================== */
body:not(.index) .product-actions,
body:not(.index) .product__actions,
body:not(.index) .product-single__form,
body:not(.index) .s-product-buttons,
body:not(.index) .s-product-actions,
body:not(.index) [class*="product-action"],
body:not(.index) .sticky-product-bar,
body:not(.index) .product-form,
body:not(.index) form[class*="product"] {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
}
/* Quantity input */
body:not(.index) .s-quantity-input,
body:not(.index) input[type="number"],
body:not(.index) .quantity-wrapper,
body:not(.index) .s-quantity,
body:not(.index) [class*="quantity"] {
  background-color: #0e152f !important;
  background: #0e152f !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.15) !important;
}
/* Buy buttons dark theme */
body:not(.index) .s-button-primary,
body:not(.index) .btn-primary,
body:not(.index) button[class*="buy"],
body:not(.index) button[class*="cart"],
body:not(.index) .s-product-buttons button {
  border-color: rgba(255,255,255,0.15) !important;
}
/* Apple Pay / payment buttons area */
body:not(.index) .s-product-payment-methods,
body:not(.index) [class*="apple-pay"],
body:not(.index) [class*="payment-button"] {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
}
/* Fixed bottom bar on mobile */
@media (max-width: 768px) {
  body:not(.index) .fixed.bottom-0,
  body:not(.index) [class*="sticky-bar"],
  body:not(.index) .product-sticky-bar {
    background-color: #0e1024 !important;
    background: #0e1024 !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
}

/* ==========================================================================
   24. FAST CHECKOUT BUTTON + PRODUCT PAGE PRICE COLOR
   ========================================================================== */
/* Fast checkout button - white bg */
.s-fast-checkout-button.outline {
  background-color: #ffffff !important;
  border: none !important;
  color: var(--color-primary) !important;
}

/* Product page price color */
body:not(.index) .product-price,
body:not(.index) .s-product-price,
body:not(.index) [class*="product-price"],
body:not(.index) .price h2,
body:not(.index) .price h3,
body:not(.index) .price span,
body:not(.index) .s-product-price-sale,
body:not(.index) .s-product-price-wrapper,
body:not(.index) .s-product-price-wrapper h2,
body:not(.index) .s-product-price-wrapper span,
body:not(.index) salla-product-price h2,
body:not(.index) salla-product-price span,
body:not(.index) salla-product-price .sale-price,
body:not(.index) .product h2[class*="price"],
body:not(.index) h2.text-red-400,
body:not(.index) h2.font-bold[class*="text-"] {
  color: rgb(0, 153, 229) !important;
}
/* Remove ring color from active thumbnail */
.s-slider-thumbs .s-slider-thumbs-container .swiper-slide.swiper-slide-thumb-active:after {
  --tw-ring-color: transparent !important;
  box-shadow: none !important;
}

/* ==========================================================================
   25. PRODUCT PAGE MOBILE RESPONSIVE FIX
   ========================================================================== */
@media (max-width: 767px) {
  /* Force column layout on mobile */
  body.product-single #product-282946831,
  body.product-single .container--product-details > .flex {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Sidebar (images) - full width, proper height */
  body.product-single .sidebar {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 16px !important;
  }
  /* Main content - full width below images */
  body.product-single .main-content {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Container full width on mobile */
  body.product-single .container--product-details {
    padding: 0 12px !important;
  }
}

/* Price/quantity section - dark background (all screens) */
body.product-single section.flex.bg-white,
body.product-single .sticky-product-bar.bg-white,
body.product-single .sticky-product-bar {
  background-color: #0e1024 !important;
  background: #0e1024 !important;
}
body.product-single section.flex.bg-white *,
body.product-single .sticky-product-bar * {
  color: #ffffff !important;
}
/* Keep button colors intact */
body.product-single .s-button-primary {
  color: #ffffff !important;
}
/* Quantity input dark */
body.product-single .s-quantity-input-container {
  background: #0e152f !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important;
}
body.product-single .s-quantity-input-input {
  background: #0e152f !important;
  color: #ffffff !important;
}
body.product-single .s-quantity-input-button {
  background: transparent !important;
  color: #ffffff !important;
}
body.product-single .s-quantity-input-button span svg path {
  fill: #ffffff !important;
}