:root{--primary:#f97316;--primary-hover:#ea580c;--secondary:#1e293b;--bg-color:#f8fafc;--text-dark:#0f172a;--text-light:#64748b;--border-color:#e2e8f0;--font-main:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-dark);line-height:1.5}a{color:inherit;text-decoration:none}ul{list-style:none}.container{max-width:1200px;margin:0 auto;padding:0 20px}.btn{cursor:pointer;font-weight:600;font-family:var(--font-main);border:none;border-radius:8px;outline:none;justify-content:center;align-items:center;padding:10px 20px;transition:all .2s;display:inline-flex}.btn-primary{background-color:var(--primary);color:#fff}.btn-primary:hover{background-color:var(--primary-hover)}.btn-outline{color:var(--primary);border:1px solid var(--primary);background-color:#0000}.btn-outline:hover{background-color:var(--primary);color:#fff}.glass{-webkit-backdrop-filter:blur(10px);background:#ffffffb3;border:1px solid #ffffff2e;box-shadow:0 4px 6px -1px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:.4s ease-out forwards fadeIn}.app-layout{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1}.flex{display:flex}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.products-grid{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.product-card{border:1px solid var(--border-color);background-color:#fff;border-radius:16px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 4px 6px #00000005}.product-card-body{flex-direction:column;flex:1;padding:12px;display:flex}.product-title-container{cursor:pointer;justify-content:space-between;align-items:flex-start;min-height:34px;margin-bottom:10px;display:flex}.product-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;padding-right:5px;font-size:14px;font-weight:700;line-height:1.2;display:-webkit-box;overflow:hidden}.product-weight{color:var(--text-light);white-space:nowrap;background-color:#f1f5f9;border-radius:4px;padding:2px 6px;font-size:11px}.product-footer{border-top:1px dashed var(--border-color);justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;display:flex}.product-price{font-size:16px;font-weight:700}.add-btn{border-radius:20px;padding:6px 12px;font-size:13px;font-weight:700}.counter-container{background:#f1f5f9;border-radius:20px;align-items:center;gap:8px;padding:4px;display:flex}.counter-btn{width:28px;height:28px;color:var(--primary);cursor:pointer;background:#fff;border:none;border-radius:50%;justify-content:center;align-items:center;font-weight:700;display:flex;box-shadow:0 2px 4px #0000001a}.counter-btn.plus{background:var(--primary);color:#fff}.counter-value{text-align:center;min-width:16px;font-size:14px;font-weight:700}@media (width>=576px){.products-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}.product-card-body{padding:20px}.product-title-container{min-height:48px;margin-bottom:16px}.product-title{padding-right:10px;font-size:18px;line-height:1.3}.product-weight{padding:4px 8px;font-size:13px}.product-footer{padding-top:16px}.product-price{font-size:20px}.add-btn{border-radius:25px;padding:10px 20px;font-size:14px}.counter-container{border-radius:25px;gap:12px;padding:5px}.counter-btn{width:35px;height:35px}.counter-value{min-width:20px;font-size:16px}}:root{--swiper-theme-color:#007aff}:host{z-index:1;margin-left:auto;margin-right:auto;display:block;position:relative}.swiper{z-index:1;margin-left:auto;margin-right:auto;padding:0;list-style:none;display:block;position:relative;overflow:hidden}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{z-index:1;width:100%;height:100%;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box;display:flex;position:relative}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate(0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;transition-property:transform;display:block;position:relative}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{backface-visibility:hidden;transform:translateZ(0)}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{scrollbar-width:none;-ms-overflow-style:none;overflow:auto}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-slides-offset-before);scroll-margin-inline-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child{margin-inline-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-slides-offset-before);scroll-margin-block-start:var(--swiper-slides-offset-before)}.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child{margin-block-end:var(--swiper-slides-offset-after)}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{pointer-events:none;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(270deg,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(90deg,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(#0000,#00000080)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(#00000080,#0000)}.swiper-lazy-preloader{z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-top-color:#0000;border-radius:50%;width:42px;height:42px;margin-top:-21px;margin-left:-21px;position:absolute;top:50%;left:50%}:is(.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible) .swiper-lazy-preloader{animation:1s linear infinite swiper-preloader-spin}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper-free-mode>.swiper-wrapper{margin:0 auto;transition-timing-function:ease-out}

/* STORIES SLIDER CARDS */
.stories-slider-item {
    width: 170px !important;
    height: 239px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
    border: 2px solid #ff9900 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.stories-slider-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(255, 153, 0, 0.3) !important;
}

/* CENTER SLIDER */
.stories-swiper {
    margin: 0 auto !important;
    padding: 10px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.stories-swiper .swiper-wrapper {
    justify-content: center !important;
}
@media (max-width: 768px) {
    .stories-swiper .swiper-wrapper {
        justify-content: flex-start !important;
    }
}

/* DARK THEME SYSTEM */
body.dark-theme {
    background-color: #121214 !important;
    color: #f1f5f9 !important;
}
body.dark-theme .storefront-app,
body.dark-theme header,
body.dark-theme nav,
body.dark-theme footer {
    background-color: #1a1b1e !important;
    border-color: #2d3748 !important;
    color: #f8fafc !important;
}
body.dark-theme h1, 
body.dark-theme h2, 
body.dark-theme h3, 
body.dark-theme h4, 
body.dark-theme span, 
body.dark-theme div,
body.dark-theme p {
    color: #f8fafc !important;
}
/* Better targeting for inline react styles */
body.dark-theme div:has(> .container > .categories-slider-native) {
    background-color: #1a1b1e !important;
    border-color: #2d3748 !important;
}
body.dark-theme .categories-slider-native button:not([style*="var(--primary)"]) {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}
body.dark-theme .product-card {
    background-color: #1a1b1e !important;
    border-color: #2d3748 !important;
}
body.dark-theme .product-title {
    color: #f1f5f9 !important;
}
body.dark-theme .product-price {
    color: #f1f5f9 !important;
}
body.dark-theme .product-weight,
body.dark-theme .counter-container {
    background-color: #2d3748 !important;
    color: #94a3b8 !important;
}
body.dark-theme .counter-btn {
    background-color: #1a1b1e !important;
    color: #f1f5f9 !important;
}
body.dark-theme .counter-btn.plus {
    background-color: var(--primary) !important;
    color: #fff !important;
}

/* MODAL DARK THEME FIXES */
body.dark-theme .modal-content {
    background-color: #1a1b1e !important;
    border-color: #2d3748 !important;
}
body.dark-theme .modal-content > button {
    background-color: #2d3748 !important;
    color: #f1f5f9 !important;
}
body.dark-theme .modal-content h2,
body.dark-theme .modal-content h3 {
    color: #f1f5f9 !important;
}
/* RGB matching for React inline styles */
body.dark-theme .modal-content div[style*="rgb(241, 245, 249)"],
body.dark-theme .modal-content span[style*="rgb(241, 245, 249)"] {
    background-color: #2d3748 !important;
    color: #f1f5f9 !important;
}
body.dark-theme .modal-content button[style*="rgb(255, 255, 255)"] {
    background-color: #2d3748 !important;
    color: var(--primary) !important;
}
body.dark-theme .modal-content p,
body.dark-theme .modal-content span {
    color: #e2e8f0 !important;
}

/* SEARCH DROPDOWN DARK THEME */
body.dark-theme header .container[style*="rgb(255, 255, 255)"],
body.dark-theme header .container[style*="background:#fff"],
body.dark-theme header .container[style*="background: #fff"] {
    background-color: #1a1b1e !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
body.dark-theme header .container div[style*="rgb(241, 245, 249)"],
body.dark-theme header .container div[style*="borderBottom:1px solid #f1f5f9"],
body.dark-theme header .container div[style*="border-bottom: 1px solid #f1f5f9"] {
    border-bottom-color: #2d3748 !important;
}
body.dark-theme header input {
    background-color: #2d3748 !important;
    color: #f1f5f9 !important;
    border-color: #4a5568 !important;
}
body.dark-theme header input::placeholder {
    color: #94a3b8 !important;
}

/* UPDATE CSS VARIABLES FOR DARK THEME */
body.dark-theme {
    --bg-color: #121214;
    --text-dark: #f1f5f9;
    --text-light: #94a3b8;
    --border-color: #2d3748;
}

/* CART MODAL DARK THEME */
body.dark-theme div[style*="max-width: 600px"][style*="border-top-left-radius: 24px"],
body.dark-theme div[style*="maxWidth: 600px"][style*="borderTopLeftRadius: 24px"],
body.dark-theme div[style*="max-width: 600px"][style*="background-color: rgb(255, 255, 255)"],
body.dark-theme div[style*="border-top-left-radius: 24px"] {
    background-color: #1a1b1e !important;
}

/* Make sure all inputs have dark background in dark mode */
body.dark-theme input,
body.dark-theme textarea {
    background-color: #2d3748 !important;
    color: #f1f5f9 !important;
    border-color: #4a5568 !important;
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: #94a3b8 !important;
}

/* Cart item placeholder image */
body.dark-theme div[style*="width: 50px"][style*="background-color: rgb(241, 245, 249)"],
body.dark-theme div[style*="width: 50px"][style*="background-color:#f1f5f9"] {
    background-color: #2d3748 !important;
}

/* NATIVE CATEGORIES SLIDER */
.categories-slider-native {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    -webkit-overflow-scrolling: touch;
}
.categories-slider-native::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}
/* Re-target the dark theme rules for the native slider wrapper */
body.dark-theme div:has(> .container > .categories-slider-native) {
    background-color: #1a1b1e !important;
    border-color: #2d3748 !important;
}

/* FORCE ADMIN MODAL TO BE VISIBLE */
div[style*="rgba(0, 0, 0, 0.5)"] > div,
div[style*="rgba(0,0,0,0.5)"] > div {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: #fff !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: block !important;
}