:root {
    --color-primary: var(--brand-primary, #ea580c);
    --color-accent: var(--brand-accent, #ff6a00);
    --public-ink: #17202a;
    --public-muted: #68737d;
    --public-surface: #ffffff;
    --public-line: #e6eaee;
    color-scheme: light;
}
html.dark { color-scheme: dark; }
body { overflow-x: clip; }
body { font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #f4f6f8; }
.product-description { overflow-wrap: anywhere; font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.product-description h1, .product-description h2, .product-description h3, .product-description h4, .product-description h5, .product-description h6 { color: #17202a; font-weight: 800; line-height: 1.25; margin: 1.25em 0 .55em; }
.product-description p { margin: .75em 0; }
.product-description ul, .product-description ol { margin: .75em 0; padding-left: 1.5rem; }
.product-description ul { list-style: disc; }
.product-description ol { list-style: decimal; }
.product-description blockquote { border-left: 3px solid var(--color-primary); margin: 1rem 0; padding: .25rem 1rem; color: #68737d; }
.product-description a { color: var(--color-primary); text-decoration: underline; }
.product-description img { max-width: 100%; height: auto; border-radius: .5rem; }
.product-description figure { margin: 1rem 0; }
.product-description figcaption { color: #68737d; font-size: .875rem; text-align: center; }
.product-description table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .95rem; }
.product-description th, .product-description td { border: 1px solid #e6eaee; padding: .65rem .75rem; text-align: left; }
.product-description th { background: #f7f8fa; font-weight: 800; }
html.dark .product-description h1, html.dark .product-description h2, html.dark .product-description h3, html.dark .product-description h4, html.dark .product-description h5, html.dark .product-description h6 { color: #f0f0f0; }
html.dark .product-description blockquote { color: #aeb7c0; }
html.dark .product-description th, html.dark .product-description td { border-color: rgba(255,255,255,.12); }
html.dark .product-description th { background: rgba(255,255,255,.06); }
@media (max-width: 639px) { .product-description table { display: block; overflow-x: auto; white-space: nowrap; } }
body.public-shell, body.admin-shell { background-color: color-mix(in srgb, var(--brand-primary, #ea580c) 3%, #f7f8fa) !important; }
html.dark body.public-shell, html.dark body.admin-shell { background-color: color-mix(in srgb, var(--brand-accent, #ff6a00) 7%, #090909) !important; }
.public-shell { color: var(--public-ink); }
.public-header { box-shadow: 0 2px 12px rgba(23, 32, 42, .06); }
.public-sticky-shell { position: relative; z-index: 200; }
.desktop-promo-strip { min-height: 2.25rem; background: linear-gradient(90deg, var(--brand-primary, #ea580c), color-mix(in srgb, var(--brand-accent, #ff6a00) 72%, var(--brand-primary, #ea580c))); }
.desktop-promo-pill { padding: .25rem .75rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(255,255,255,.12); }
.desktop-brand { min-height: 3.5rem; }
.desktop-nav-heading { color: var(--color-primary); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.desktop-category-menu { z-index: 90; }
.desktop-category-menu > .public-nav-link { display: inline-flex; align-items: center; height: 100%; }
.category-mega-sidebar { position: relative; overflow: visible; z-index: 100; }
.category-mega-list { position: relative; overflow: visible !important; }
.category-mega-item { position: static; }
.category-mega-panel { position: absolute; left: calc(100% + 1rem); top: 0; z-index: 110; display: none; width: min(610px, 46vw); min-height: 190px; padding: 1rem; border: 1px solid rgba(148,163,184,.2); border-radius: .9rem; background: #fff; box-shadow: 0 20px 45px rgba(15,23,42,.16); }
.category-mega-item:hover > .category-mega-panel, .category-mega-item:focus-within > .category-mega-panel { display: block; animation: category-mega-in .16s ease-out both; }
.category-mega-panel > .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.category-mega-product { display: block; min-width: 0; padding: .5rem; border: 1px solid #edf0f3; border-radius: .65rem; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.category-mega-product:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, #edf0f3); box-shadow: 0 8px 18px rgba(15,23,42,.08); transform: translateY(-2px); }
.category-mega-product-image { aspect-ratio: 1; overflow: hidden; border-radius: .45rem; background: #f7f8fa; }
.category-mega-product-image img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .2s ease; }
.category-mega-product:hover .category-mega-product-image img { transform: scale(1.06); }
html.dark .category-mega-panel { border-color: rgba(255,255,255,.1); background: #171717; box-shadow: 0 20px 45px rgba(0,0,0,.4); }
html.dark .category-mega-product-image { background: #222; }
html.dark .category-mega-product-image img { mix-blend-mode: normal; }
html.dark .category-mega-product { border-color: rgba(255,255,255,.1); background: #1e1e1e; }
html.dark .category-mega-product:hover { border-color: color-mix(in srgb, var(--color-primary) 60%, rgba(255,255,255,.1)); box-shadow: 0 8px 18px rgba(0,0,0,.24); }
@keyframes category-mega-in { from { opacity: 0; transform: translateX(-.35rem); } to { opacity: 1; transform: translateX(0); } }
.desktop-nav-menu { z-index: 80; }
.desktop-nav-menu > .public-nav-link { display: inline-flex; align-items: center; height: 100%; }
.desktop-nav-popover { position: absolute; left: 50%; top: 100%; z-index: 80; width: 230px; transform: translateX(-50%); padding: .9rem; border: 1px solid rgba(148,163,184,.22); border-radius: 0 0 .8rem .8rem; background: white; box-shadow: 0 16px 34px rgba(15,23,42,.14); }
.desktop-nav-popover-label { margin: 0 0 .45rem; color: var(--color-primary); font-size: .62rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.desktop-nav-popover a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .45rem; border-top: 1px solid rgba(148,163,184,.14); color: #475569; font-size: .75rem; font-weight: 700; }
.desktop-nav-popover a:hover { color: var(--color-primary); }
.desktop-nav-popover a i { font-size: .6rem; opacity: .5; }
html.dark .desktop-nav-popover { border-color: rgba(255,255,255,.1); background: #171717; box-shadow: 0 16px 34px rgba(0,0,0,.35); }
html.dark .desktop-nav-popover a { border-color: rgba(255,255,255,.08); color: #d1d5db; }
.desktop-nav-heading { pointer-events: none; }
.desktop-mega-menu { width: min(920px, calc(100vw - 2rem)) !important; transform-origin: top left; }
.desktop-mega-feature { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary, #ea580c) 9%, white), color-mix(in srgb, var(--brand-accent, #ff6a00) 8%, #f7f8fa)); }
html.dark .desktop-mega-feature { background: linear-gradient(145deg, color-mix(in srgb, var(--brand-primary, #ea580c) 18%, #171717), color-mix(in srgb, var(--brand-accent, #ff6a00) 14%, #171717)); }
html.dark .desktop-promo-strip { background: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary, #ea580c) 72%, #111), color-mix(in srgb, var(--brand-accent, #ff6a00) 50%, #111)); }
.public-search { box-shadow: 0 4px 16px rgba(23, 32, 42, .08); }
.public-action { color: #ffffff !important; text-decoration: none; }
.market-card { border: 1px solid #e8edf2; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.market-card:hover { transform: translateY(-3px); border-color: #d6dee7; box-shadow: 0 10px 24px rgba(15, 23, 42, .10); }
.market-card-media { aspect-ratio: 1 / 1; background: #f7f8fa; }
.market-card-title { min-height: 2.55rem; }
.market-card-action { opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; }
.market-card:hover .market-card-action, .market-card:focus-within .market-card-action { opacity: 1; transform: translateY(0); }
.dark .market-card { background: #1a1a1a; border-color: rgba(255,255,255,.08); }
.dark .market-card-media { background: #222; }
.mobile-brand-row { min-height: 3rem; }
.mobile-search-shell { box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.public-mobile-promo { position: relative; z-index: 1; }
.home-hero, .home-slider { min-width: 0; }
.flash-section { min-width: 0; overflow: hidden; }
.flash-carousel { max-width: 100%; }
.flash-viewport { width: 100%; }
.flash-carousel { animation: flash-marquee 15s linear infinite; will-change: transform; }
.flash-carousel-group { padding-right: 1rem; }
.flash-section:hover .flash-carousel { animation-play-state: paused; }
@keyframes flash-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 1024px) {
    .public-sticky-shell { position: fixed; inset: 0 0 auto; background: inherit; box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
    html.dark .public-sticky-shell { box-shadow: 0 8px 22px rgba(0, 0, 0, .32); }
    .public-sticky-shell .public-header { border-bottom: 0; box-shadow: none; }
    body.public-shell main.public-main { padding-top: 15.875rem; }
    .public-header .top-banner { height: 2.25rem; padding: 0; display: flex; align-items: center; }
    .public-header > .max-w-\[1440px\] { min-height: 5.5rem; }
    .public-header .public-search { border-width: 1px; border-radius: .75rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--brand-primary, #ea580c) 10%, transparent); }
    .public-header .public-search input { min-height: 2.75rem; }
    .public-header .public-search button { border-radius: 0 .65rem .65rem 0; }
    .home-hero { padding-top: 1.5rem; }
    .home-hero > .hidden.lg\:flex { height: 26rem; }
    .home-hero .home-slider { height: 26rem; border-radius: 1rem; box-shadow: 0 16px 40px rgba(15, 23, 42, .08); }
    .home-hero > .hidden.xl\:flex { height: 26rem; }
    .flash-section { margin-top: 1.5rem; }
    .flash-section .flash-carousel { gap: 1rem; }
    .market-card { border-radius: .875rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .05); }
    .market-card-media { aspect-ratio: 4 / 5; }
    .market-card-title { min-height: 3rem; }
}
@media (max-width: 1023px) {
    .public-sticky-shell {
        position: sticky;
        top: 0;
        z-index: 50;
        width: 100%;
        background: var(--public-surface);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
        isolation: isolate;
    }
    html.dark .public-sticky-shell {
        background: #121212;
        box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
    }
}
@media (max-width: 639px) {
    .public-sticky-shell > .bg-white.text-\[11px\] { display: none; }
    .public-sticky-shell .top-banner { display: none; }
    .public-sticky-shell .public-header > .max-w-\[1440px\] { padding-top: .65rem; padding-bottom: .65rem; gap: .65rem; }
    .public-sticky-shell .mobile-brand-row { min-height: 2.5rem; }
    .public-sticky-shell .mobile-search-shell input { min-height: 2.65rem; }
}
@media (max-width: 639px) {
    .home-slider { height: clamp(10.5rem, 52vw, 14rem) !important; border-radius: 10px; }
    .flash-section { margin-top: 1.5rem; }
    .flash-carousel { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
}
[x-cloak] { display: none !important; }
.public-bottom-nav { min-height: calc(3.5rem + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.public-settings-sheet { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; }
.chatbot-panel { transform-origin: bottom right; animation: chatbot-panel-in .18s ease-out both; }
.chatbot-panel .whitespace-pre-line { white-space: pre-line; }
@keyframes chatbot-panel-in { from { opacity: 0; transform: translateY(.5rem) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chatbot-whatsapp { box-shadow: 0 8px 18px rgba(34,197,94,.2); }
@media (max-width: 639px) {
    .chatbot-shell { right: .75rem; bottom: 4.75rem; }
    .chatbot-panel { right: -.25rem; width: min(400px, calc(100vw - 1.5rem)); height: min(600px, calc(100vh - 7rem)); border-radius: 1.75rem; }
    .chatbot-header { padding: 1.25rem; }
}
@media (max-width: 1023px) { .public-shell main { padding-bottom: 4.5rem; } }
.admin-action { color: #ffffff !important; text-decoration: none; }
body.admin-shell { background-color: color-mix(in srgb, var(--brand-primary, #ea580c) 3%, #f5f6f8) !important; color: #1f2937; }
.admin-sticky-header { position: sticky; top: 0; z-index: 90; margin-top: -1rem; padding: 1rem 0; background: color-mix(in srgb, var(--brand-primary, #ea580c) 3%, #f5f6f8); box-shadow: 0 8px 18px rgba(15, 23, 42, .06); }
html.dark .admin-sticky-header { background: #0f141d; box-shadow: 0 8px 18px rgba(0, 0, 0, .24); }
.admin-shell .admin-sidebar { z-index: 30 !important; }
.admin-shell aside { box-shadow: 1px 0 0 rgba(15, 23, 42, .04); }
.admin-shell main { min-width: 0; }
.admin-products-main { overflow-x: clip; }
.admin-shell input, .admin-shell select, .admin-shell textarea { max-width: 100%; }
@media (min-width: 1024px) { .admin-shell main.flex-1 { padding: 2rem 3rem !important; } }
@media (max-width: 1023px) { .admin-shell main.flex-1 { padding: 1rem !important; } }
@media (max-width: 1023px) { .admin-sticky-header { margin-top: -.5rem; padding: .75rem 0; } }
@media (max-width: 1023px) { .admin-shell .admin-sidebar { z-index: 100 !important; } }
@media (min-width: 1024px) { .admin-shell aside { transform: translateX(0) !important; transition: none !important; } }
@media (max-width: 1023px) { .admin-shell aside { width: min(18rem, 86vw); } }
.public-nav-link { position: relative; color: var(--public-muted); transition: color .2s ease; }
.public-nav-link:hover, .public-nav-link.is-active { color: var(--color-primary); }
.public-nav-link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 3px; background: var(--color-primary); border-radius: 3px; }
body.public-shell .public-main { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary, #ea580c) 4%, #ffffff), color-mix(in srgb, var(--brand-accent, #ff6a00) 3%, #f2f4f6)); }
html.dark body.public-shell .public-main { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-primary, #ea580c) 10%, #111111), color-mix(in srgb, var(--brand-accent, #ff6a00) 7%, #090909)); color: #f0f0f0; }
body.public-shell main.public-main { min-height: 0; }
body.public-shell main.public-main > .min-h-screen { min-height: 0; }
@media (max-width: 1023px) { .public-nav-link.is-active::after { display: none; } }
html.dark .public-shell { color: #f0f0f0; }
.dark .public-shell .bg-white:not([class*="dark:bg-white"]) { background-color: #1a1a1a !important; }
.dark .public-shell .bg-gray-50:not([class*="dark:bg-"]) { background-color: #1f1f1f !important; }
.dark .public-shell .bg-gray-100:not([class*="dark:bg-"]) { background-color: #252525 !important; }
.dark .public-shell .bg-gray-200:not([class*="dark:bg-"]) { background-color: #303030 !important; }
.dark .public-shell .text-gray-900:not([class*="dark:text-"]) { color: #f5f5f5 !important; }
.dark .public-shell .text-gray-800:not([class*="dark:text-"]) { color: #e5e7eb !important; }
.dark .public-shell .text-gray-700:not([class*="dark:text-"]) { color: #d1d5db !important; }
.dark .public-shell .text-gray-600:not([class*="dark:text-"]) { color: #b8bec8 !important; }
.dark .public-shell .text-gray-500:not([class*="dark:text-"]) { color: #9ca3af !important; }
.dark .public-shell .text-gray-400:not([class*="dark:text-"]) { color: #9ca3af !important; }
.dark .public-shell .border-gray-100:not([class*="dark:border-"]), .dark .public-shell .border-gray-200:not([class*="dark:border-"]), .dark .public-shell .border-gray-300:not([class*="dark:border-"]) { border-color: rgba(255,255,255,.12) !important; }
.dark .public-shell a.market-card { color: #f0f0f0; }
.dark .admin-shell .bg-gray-50:not([class*="dark:bg-"]) { background-color: #181818 !important; }
.dark .admin-shell .bg-gray-100:not([class*="dark:bg-"]) { background-color: #222 !important; }
html.dark .admin-shell { color: #f0f0f0; }
.dark .admin-shell .bg-white:not([class*="dark:bg-"]) { background-color: #121212 !important; }
.dark .admin-shell .border-gray-200:not([class*="dark:border-"]) { border-color: rgba(255,255,255,.10) !important; }
.dark .admin-shell .text-gray-500:not([class*="dark:text-"]) { color: #9ca3af !important; }
.dark .admin-shell .text-gray-600:not([class*="dark:text-"]) { color: #b8bec8 !important; }
.dark .admin-shell .text-gray-700:not([class*="dark:text-"]) { color: #d1d5db !important; }
.dark .admin-shell .text-gray-800:not([class*="dark:text-"]) { color: #e5e7eb !important; }
.dark .admin-shell .text-gray-900:not([class*="dark:text-"]) { color: #f5f5f5 !important; }
.dark .admin-shell .border-gray-100:not([class*="dark:border-"]), .dark .admin-shell .border-gray-300:not([class*="dark:border-"]) { border-color: rgba(255,255,255,.10) !important; }
.dark .admin-shell input:not([class*="dark:bg-"]), .dark .admin-shell select:not([class*="dark:bg-"]), .dark .admin-shell textarea:not([class*="dark:bg-"]) { background-color: #181818; color: #f5f5f5; border-color: rgba(255,255,255,.12); }
.dark .admin-shell input::placeholder, .dark .admin-shell textarea::placeholder { color: #8b949e; }
.dark .admin-shell .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,.06) !important; }
.dark .admin-shell .bg-primary\/5 { background-color: color-mix(in srgb, var(--color-primary) 12%, transparent) !important; }
.dark .admin-shell .bg-primary\/10 { background-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important; }
.dark .admin-shell .bg-gray-50\/50 { background-color: rgba(255,255,255,.04) !important; }
.dark .public-shell .bg-gray-50\/50 { background-color: rgba(255,255,255,.04) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.text-accent { color: var(--color-accent) !important; }
.border-accent { border-color: var(--color-accent) !important; }
.hover\:bg-orange-600:hover { background-color: var(--color-accent) !important; }
.public-shell .hover\:bg-orange-50:hover, .public-shell .hover\:bg-indigo-50:hover { background-color: color-mix(in srgb, var(--color-accent) 9%, transparent) !important; }
.public-shell .hover\:text-orange-600:hover, .public-shell .hover\:text-indigo-600:hover { color: var(--color-accent) !important; }
.public-shell .hover\:border-orange-200:hover, .public-shell .hover\:border-indigo-200:hover { border-color: color-mix(in srgb, var(--color-accent) 35%, transparent) !important; }
.ql-editor { padding: 0; height: auto; overflow-y: visible; }
.dark .ql-editor { color: #f0f0f0; }
.dark .ql-snow .ql-stroke { stroke: #fff; }
.top-banner { overflow: hidden; background: var(--color-primary); color: white; width: 100%; white-space: nowrap; padding: 10px 0; font-size: 12px; }
.marquee-content { display: inline-block; animation: marquee 40s linear infinite; }
.marquee-item { padding-right: 50px; display: inline-block; }
@keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-50%, 0); } }
