/*
Theme Name: NOVA E-commerce
Theme URI: https://nova.store
Author: NOVA Team
Author URI: https://nova.store
Description: NOVA is a premium, modern e-commerce WordPress theme with mobile app UI, dark/light mode, full WooCommerce support, and fast checkout.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nova-ecommerce
Tags: e-commerce, custom-menu, featured-images, threaded-comments, translation-ready, dark-mode
*/

:root{
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Sora',var(--font-body);
  --c-bg:#f5f6fb; --c-surface:#ffffff; --c-surface-2:#eef0f7; --c-border:#e6e8f2;
  --c-text:#0f172a; --c-text-2:#5b6478; --c-text-3:#8b93a7;
  --c-primary:#6d5ef0; --c-primary-2:#a35ef0; --c-accent:#ff5a7a; --c-amber:#f7a825;
  --c-green:#16a34a; --c-red:#dc2626; --c-cyan:#0ea5e9;
  --grad:linear-gradient(120deg,#6d5ef0,#a35ef0 55%,#ff5a7a);
  --shadow-sm:0 1px 3px rgba(15,23,42,.08);
  --shadow:0 8px 24px rgba(15,23,42,.10);
  --shadow-lg:0 24px 60px rgba(15,23,42,.16);
  --radius:16px; --radius-sm:10px; --radius-lg:22px;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}
[data-theme="dark"]{
  --c-bg:#0a0d14; --c-surface:#12161f; --c-surface-2:#1a1f2b; --c-border:#232a38;
  --c-text:#e6e9f2; --c-text-2:#a5aec2; --c-text-3:#6b7488;
  --c-primary:#8b7dff; --c-primary-2:#b06bff; --c-accent:#ff6b8a; --c-amber:#ffb544;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;height:100%;background-color:#0f1220!important}
[data-theme="dark"] html{background-color:#05070c!important}
body{font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;margin:0;padding:0!important;min-height:100vh}
#page,.site-wrapper{min-height:100vh;display:flex;flex-direction:column;margin:0;padding:0;background:var(--c-bg)}
.nova-floating-support{position:fixed!important;bottom:24px!important;left:24px!important;z-index:9999!important;margin:0!important;padding:0!important}
main,#main,.site-main,#app,.page{flex:1 0 auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2}
.container{width:100%;max-width:1280px;padding-inline:20px;margin-inline:auto;box-sizing:border-box}
.skip-link{position:absolute;left:-999px;top:8px;z-index:200;background:var(--c-primary);color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid color-mix(in srgb,var(--c-primary) 60%,transparent);outline-offset:2px}
[hidden]{display:none!important}
::selection{background:var(--c-primary);color:#fff}

/* ============ Animations ============ */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:none}}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:none}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes tickerGlow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c-accent) 40%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
.fade-up{animation:fadeUp .55s var(--ease) both}
.fade-in{animation:fadeIn .4s ease both}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.stagger>*{animation:fadeUp .5s var(--ease) both}
.stagger>*:nth-child(1){animation-delay:.03s}.stagger>*:nth-child(2){animation-delay:.07s}
.stagger>*:nth-child(3){animation-delay:.11s}.stagger>*:nth-child(4){animation-delay:.15s}
.stagger>*:nth-child(5){animation-delay:.19s}.stagger>*:nth-child(6){animation-delay:.23s}
.stagger>*:nth-child(7){animation-delay:.27s}.stagger>*:nth-child(8){animation-delay:.31s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}

/* ============ Topbar ============ */
.topbar{background:#0f1220;color:#cdd3e3;font-size:12.5px;position:relative;z-index:60}
[data-theme="dark"] .topbar{background:#05070c}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;height:34px}
.topbar-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-text span{font-weight:700;color:var(--c-amber);font-variant-numeric:tabular-nums}
.topbar-nav{display:flex;gap:16px;align-items:center;flex-shrink:0}
.topbar-nav a{opacity:.85;transition:.2s}
.topbar-nav a:hover{opacity:1;color:#fff}
.theme-toggle{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#1c2333;color:#ffd66e;font-size:15px;transition:.25s}
.theme-toggle:hover{transform:rotate(20deg)}

/* ============ Header ============ */
.site-header{position:sticky;top:0;z-index:90;background:color-mix(in srgb,var(--c-surface) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--c-border);transition:box-shadow .3s}
.site-header.scrolled{box-shadow:var(--shadow)}
.header-main{display:flex;align-items:center;gap:18px;padding:14px 0}
.logo{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:.5px}
.logo-mark{width:38px;height:38px;border-radius:12px;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:0 4px 12px color-mix(in srgb,var(--c-primary) 45%,transparent)}
[data-theme="dark"] .logo-text{background:linear-gradient(120deg,#fff,#a3b1ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

.menu-btn{display:none;font-size:22px;width:42px;height:42px;border-radius:12px;background:var(--c-surface-2)}
.search-bar{flex:1;max-width:640px;position:relative;display:flex;align-items:center;background:var(--c-surface-2);border:1.5px solid transparent;border-radius:999px;transition:.25s}
.search-bar:focus-within{border-color:var(--c-primary);background:var(--c-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 18%,transparent)}
.search-icon{margin-left:16px;color:var(--c-text-3);flex-shrink:0}
.search-bar input{flex:1;background:none;border:none;outline:none;padding:11px 12px;min-width:0;color:var(--c-text)}
.search-submit{background:var(--grad);color:#fff;border-radius:999px;padding:9px 20px;font-weight:600;font-size:13.5px;margin-right:4px;transition:.25s}
.search-submit:hover{filter:brightness(1.1)}
.autocomplete{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);overflow:hidden;z-index:50;max-height:420px;overflow-y:auto}
.ac-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;transition:.15s}
.ac-item:hover,.ac-item.active{background:var(--c-surface-2)}
.ac-item img{width:42px;height:42px;border-radius:8px;object-fit:cover;background:var(--c-surface-2)}
.ac-item .ac-name{font-weight:600;font-size:13.5px}
.ac-item .ac-sub{font-size:12px;color:var(--c-text-2)}
.ac-section{padding:10px 14px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--c-text-3);border-bottom:1px solid var(--c-border);background:var(--c-surface-2)}
.ac-tag{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--c-surface-2);font-size:13px;cursor:pointer;margin:6px 4px 0}
.ac-tag:hover{background:var(--c-primary);color:#fff}

.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--c-surface-2);transition:.25s}
.icon-btn:hover{transform:translateY(-2px);color:var(--c-primary)}
.account-chip{position:relative;display:flex;align-items:center}
.account-chip .icon-btn,
.account-chip a,
.account-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;width:auto;min-width:42px;padding:0 12px 0 10px;border-radius:12px;background:var(--c-surface-2);color:var(--c-text);text-decoration:none;transition:.25s;flex-shrink:0}
.account-chip .icon-btn:hover,
.account-chip a:hover,
.account-btn:hover{transform:translateY(-2px);color:var(--c-primary);background:var(--c-surface);box-shadow:var(--shadow-sm)}
.account-chip .chip-label{display:flex;flex-direction:column;justify-content:center;line-height:1.15;text-align:left;white-space:nowrap}
.account-chip .chip-label small{font-size:10.5px;color:var(--c-text-3);font-weight:500;display:block}
.account-chip .chip-label b{font-size:13px;font-weight:700;color:var(--c-text);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.account-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:8px;z-index:60;animation:fadeUp .25s var(--ease)}
.account-menu a,.account-menu button{display:block;width:100%;text-align:left;padding:10px 14px;border-radius:8px;font-size:14px;transition:.15s}
.account-menu a:hover,.account-menu button:hover{background:var(--c-surface-2)}
.account-menu button{color:var(--c-red);font-weight:600}

/* ============ Nav ============ */
.main-nav{border-top:1px solid var(--c-border);position:relative;background:var(--c-surface);z-index:10}
.nav-inner{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0}
.nav-inner::-webkit-scrollbar{display:none}
.nav-menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;flex-wrap:nowrap;white-space:nowrap}
.nav-menu li,.nav-inner li{list-style:none;margin:0;padding:0;display:inline-flex;align-items:center}
.nav-menu li a,.nav-inner li a,.nav-link{display:inline-flex;align-items:center;padding:12px 16px;font-size:14px;font-weight:600;color:var(--c-text-2);white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none;transition:color .2s,border-color .2s,background-color .2s;border-radius:6px 6px 0 0}
.nav-menu li a:hover,.nav-inner li a:hover,.nav-link:hover{color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 6%,transparent)}
.nav-menu li.current-menu-item a,.nav-menu li.current_page_item a,.nav-link.active{color:var(--c-primary);border-bottom-color:var(--c-primary);font-weight:700}
.nav-hot{color:var(--c-accent)!important}
.nav-hot:hover{color:var(--c-accent)!important;background:color-mix(in srgb,var(--c-accent) 8%,transparent)!important}

/* ============ Drawers ============ */
.mobile-drawer{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);background:var(--c-surface);z-index:110;box-shadow:var(--shadow-lg);padding:18px;animation:slideInLeft .3s var(--ease);overflow-y:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.drawer-links{display:grid;gap:4px}
.drawer-links a{padding:12px 14px;border-radius:10px;font-weight:600;transition:.15s}
.drawer-links a:hover{background:var(--c-surface-2)}
.cart-drawer{position:fixed;inset:0 0 0 auto;width:min(420px,94vw);background:var(--c-surface);z-index:120;box-shadow:var(--shadow-lg);animation:slideInRight .3s var(--ease);display:flex;flex-direction:column}
.cart-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--c-border)}
.cart-drawer-body{flex:1;overflow-y:auto;padding:16px 20px;display:grid;align-content:start;gap:14px}
.cart-drawer-foot{padding:16px 20px;border-top:1px solid var(--c-border);display:grid;gap:10px}
.cart-total-row{display:flex;justify-content:space-between;font-size:16px}
.drawer-backdrop,.cart-drawer-backdrop,.modal-backdrop{position:fixed;inset:0;background:rgba(10,13,22,.5);backdrop-filter:blur(3px);z-index:105;animation:fadeIn .25s ease}
.cart-drawer-backdrop{z-index:115}

/* ============ Cart line item ============ */
.cart-line{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-surface)}
.cart-line img{width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--c-surface-2)}
.cart-line .cl-info{flex:1;min-width:0}
.cart-line .cl-name{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-line .cl-price{font-size:13px;color:var(--c-text-2)}
.cl-qty{display:flex;align-items:center;gap:6px;border:1px solid var(--c-border);border-radius:999px;padding:2px;width:fit-content}
.cl-qty button{width:24px;height:24px;border-radius:50%;background:var(--c-surface-2);font-weight:700;line-height:1}
.cl-qty span{min-width:22px;text-align:center;font-weight:700;font-size:13px}
.cl-remove{color:var(--c-text-3);font-size:16px;padding:4px;border-radius:6px}
.cl-remove:hover{color:var(--c-red)}

/* ============ Buttons / inputs ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:700;font-size:14.5px;transition:.25s;position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--c-primary) 40%,transparent)}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn-ghost{background:var(--c-surface);border:1.5px solid var(--c-border);color:var(--c-text)}
.btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary)}
.btn-dark{background:var(--c-text);color:var(--c-bg)}
.btn-danger{background:var(--c-red);color:#fff}
.btn-amber{background:linear-gradient(120deg,#ff9f1c,#f7a825);color:#4a2c00}
.btn-sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn-block{width:100%}
.btn-lg{padding:15px 30px;font-size:16px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.btn .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.field{display:grid;gap:6px;margin-bottom:14px}
.field label{font-size:13px;font-weight:600;color:var(--c-text-2)}
.input,select.input,textarea.input{width:100%;padding:12px 14px;border:1.5px solid var(--c-border);border-radius:12px;background:var(--c-surface);outline:none;transition:.2s}
.input:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 16%,transparent)}
textarea.input{resize:vertical;min-height:90px}
.input-err{border-color:var(--c-red)!important}
.hint-err{color:var(--c-red);font-size:12.5px;font-weight:600}
.input-wrap{position:relative}
.input-wrap .toggle-pw{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--c-text-3);font-size:14px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;background:var(--c-surface-2);font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:.2s}
.chip:hover{border-color:var(--c-primary)}
.chip.active{background:color-mix(in srgb,var(--c-primary) 14%,transparent);color:var(--c-primary);border-color:var(--c-primary)}
.badge-pill{display:inline-flex;align-items:center;justify-content:center;gap:4px;padding:3px 9px;border-radius:6px;font-size:11.5px;font-weight:700;line-height:1.2;width:fit-content;max-width:max-content;white-space:nowrap}
.badge-green{background:#dcfce7!important;color:#15803d!important;border:1px solid #bbf7d0!important;box-shadow:0 2px 6px rgba(21,128,61,0.12)}
.badge-red{background:#fee2e2!important;color:#dc2626!important;border:1px solid #fecaca!important;box-shadow:0 2px 6px rgba(220,38,38,0.12)}
.badge-amber{background:#fef3c7!important;color:#b45309!important;border:1px solid #fde68a!important;box-shadow:0 2px 6px rgba(180,83,9,0.12)}
[data-theme="dark"] .badge-amber{color:var(--c-amber)}
.badge-primary{background:color-mix(in srgb,var(--c-primary) 15%,transparent);color:var(--c-primary)}

/* ============ Product cards ============ */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.product-card{position:relative;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:flex;flex-direction:column}
.product-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pc-media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--c-surface-2)}
.pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product-card:hover .pc-media img{transform:scale(1.07)}
.pc-badge{position:absolute;top:10px;left:10px;z-index:2;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;background:var(--c-accent)}
.pc-badge.hot{background:linear-gradient(120deg,#ff5a7a,#ff9f1c)}
.pc-badge.new{background:var(--c-green)}
.pc-badge.sale{background:var(--c-primary)}
.pc-wish{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--c-surface) 80%,transparent);backdrop-filter:blur(4px);display:grid;place-items:center;transition:.2s;box-shadow:var(--shadow-sm)}
.pc-wish:hover{transform:scale(1.15);color:var(--c-accent)}
.pc-wish.active{color:var(--c-accent);background:color-mix(in srgb,var(--c-accent) 12%,transparent)}
.pc-body{padding:13px 14px;display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.pc-brand{font-size:11.5px;color:var(--c-text-3)!important;text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.pc-name{font-weight:700;font-size:14px;line-height:1.35;color:var(--c-text)!important;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px;text-decoration:none;word-break:break-word}
.pc-name:hover{color:var(--c-primary)!important}
.pc-rating{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--c-text-2)}
.stars{color:var(--c-amber);letter-spacing:1px;font-size:12.5px}
.pc-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;flex-wrap:wrap;padding-top:4px}
.price{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--c-primary)!important;line-height:1.2}
.price-old{font-size:13px;color:var(--c-text-3)!important;text-decoration:line-through}
.pc-discount{font-size:12px;font-weight:800;color:var(--c-green)}
.pc-footer{display:flex;align-items:center;justify-content:space-between;padding:0 14px 13px;gap:8px}
.pc-add{flex:1;padding:9px;border-radius:10px;background:var(--c-surface-2);font-weight:700;font-size:13px;color:var(--c-primary);transition:.2s;border:none;cursor:pointer}
.pc-add:hover{background:var(--grad);color:#fff}
.pc-buy{width:38px;height:38px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;transition:.2s;border:none;cursor:pointer;flex-shrink:0}
.pc-buy:hover{transform:scale(1.08)}
.skeleton{position:relative;overflow:hidden;background:var(--c-surface-2)}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);background-size:400px 100%;animation:shimmer 1.3s infinite}
[data-theme="dark"] .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}

/* ============ Hero Carousel & Slider ============ */
.hero-slider{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin:24px 0;box-shadow:var(--shadow-lg);min-height:380px;background:#0f1220}
.hero-slides{display:flex;transition:transform .5s cubic-bezier(.2,.8,.2,1);width:100%;height:100%}
.hero-slide{min-width:100%;box-sizing:border-box;display:flex;align-items:center;padding:56px 52px;position:relative;color:#fff;background-size:cover;background-position:center;overflow:hidden}
.hero-slide-content{position:relative;z-index:2;flex:1;min-width:280px;display:flex;flex-direction:column;gap:14px}
.hero-slide-side{position:relative;z-index:2;flex:0 0 auto;max-width:380px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);display:grid;place-items:center}
.hero-slide-side img{width:100%;height:auto;max-height:300px;object-fit:contain}

.hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(900px 500px at 80% -20%,color-mix(in srgb,var(--c-primary) 45%,transparent),transparent),radial-gradient(700px 420px at 0% 120%,color-mix(in srgb,var(--c-accent) 30%,transparent),transparent),linear-gradient(120deg,#0f1220,#1b1440);color:#fff;padding:64px 56px;margin:28px 0;min-height:340px;display:flex;flex-direction:column;justify-content:center;gap:14px}
.hero::after{content:"🛍️";position:absolute;right:6%;bottom:-30px;font-size:200px;opacity:.14;animation:floaty 5s ease-in-out infinite;pointer-events:none}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;width:fit-content;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);font-size:12.5px;font-weight:700;letter-spacing:.5px;backdrop-filter:blur(6px)}
.hero h1,.hero-slide h1{font-size:clamp(28px,4.5vw,50px);max-width:18ch;line-height:1.1;font-weight:800}
.hero p,.hero-slide p{max-width:48ch;color:#d5dbed;font-size:15.5px;line-height:1.6}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-stats{display:flex;gap:28px;margin-top:14px;flex-wrap:wrap}
.hero-stats b{font-size:22px;font-family:var(--font-display)}
.hero-stats span{display:block;font-size:12px;color:#aab2cc}

/* Slider Nav Arrows & Dots */
.hero-nav-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(15,18,32,.75);color:#fff;border:1.5px solid rgba(255,255,255,.2);display:grid;place-items:center;font-size:22px;cursor:pointer;z-index:10;backdrop-filter:blur(8px);transition:.25s;box-shadow:var(--shadow)}
.hero-nav-btn:hover{background:var(--c-primary);border-color:transparent;transform:translateY(-50%) scale(1.08)}
.hero-nav-prev{left:18px}
.hero-nav-next{right:18px}

.hero-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10}
.hero-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.4);border:none;cursor:pointer;transition:.25s;padding:0}
.hero-dot.active{width:32px;background:var(--c-primary)}

/* Slide Manager in Admin */
.slide-card{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius);padding:18px;margin-bottom:16px;display:grid;gap:14px}
.slide-card-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--c-border);flex-wrap:wrap;gap:8px}
.slide-bg-preview{width:100%;height:140px;border-radius:10px;border:1px solid var(--c-border);display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;color:#fff;font-weight:700;margin-top:8px;position:relative;overflow:hidden}

/* ============ Sections ============ */
.section{margin:44px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.section-title{font-size:clamp(20px,3vw,26px);font-weight:800}
.section-sub{color:var(--c-text-2);margin-top:4px;font-size:14px}
.see-all{font-weight:700;color:var(--c-primary);font-size:14px;display:inline-flex;align-items:center;gap:6px}
.see-all:hover{gap:10px;transition:gap .2s}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.cat-card{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.4;cursor:pointer;border:1px solid var(--c-border);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cat-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--shadow-lg)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat-card:hover img{transform:scale(1.1)}
.cat-card .cat-label{position:absolute;inset:auto 0 0 0;padding:18px 12px 10px;background:linear-gradient(transparent,rgba(10,13,22,.85));color:#fff;font-weight:700;font-size:14px;text-align:center}
.cat-count{display:block;font-size:11.5px;font-weight:600;opacity:.85}

/* ============ Flash deals ============ */
.deals-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.deal-tile{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface)!important;color:var(--c-text)!important;text-decoration:none!important;display:flex;flex-direction:column;height:100%;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.deal-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.deal-tile .pc-media{position:relative;width:100%;aspect-ratio:1;background:var(--c-surface-2);overflow:hidden;flex-shrink:0}
.deal-tile .pc-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.deal-tile:hover .pc-media img{transform:scale(1.06)}
.deal-tile .deal-info{padding:12px;display:flex;flex-direction:column;gap:6px;flex:1;background:var(--c-surface);color:var(--c-text)!important}
.deal-tile .pc-name{font-weight:700;font-size:13.5px;line-height:1.35;color:var(--c-text)!important;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;transition:color .2s;word-break:break-word}
.deal-tile:hover .pc-name{color:var(--c-primary)!important}
.deal-prices{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
.deal-tile .price{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--c-primary)!important;line-height:1.2}
.deal-tile .price-old{font-size:12px;color:var(--c-text-3)!important;text-decoration:line-through}
.deal-tile .tiny{font-size:11.5px;color:var(--c-text-2)!important;font-weight:500}
.countdown{display:flex;gap:8px;align-items:center}
.cd-box{background:#0f1220;color:#fff;border-radius:9px;padding:5px 8px;text-align:center;min-width:46px}
.cd-box b{font-family:var(--font-display);font-size:16px;font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.cd-box span{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:#9aa3bd}
.cd-sep{font-weight:800;color:var(--c-amber)}
.progress{height:6px;border-radius:99px;background:var(--c-surface-2);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--grad);border-radius:99px;transition:width .6s var(--ease)}

/* ============ Brand marquee ============ */
.marquee{overflow:hidden;border-block:1px solid var(--c-border);padding:16px 0;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);position:relative}
.marquee-track{display:flex;gap:48px;width:max-content;animation:marquee 26s linear infinite}
.marquee-track.reverse{animation-direction:reverse}
.marquee-track.pause-on-hover:hover{animation-play-state:paused}
.marquee-track.is-paused{animation-play-state:paused !important}
.marquee-track.is-static{animation:none !important;width:100%;justify-content:center;flex-wrap:wrap;mask-image:none}
.marquee-track span{font-family:var(--font-display);font-weight:800;font-size:20px;opacity:.5;white-space:nowrap;transition:opacity .2s}
.marquee-track span:hover{opacity:.95}
.marquee-controls-overlay{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;gap:6px;opacity:0;transition:opacity .2s;z-index:2}
.marquee:hover .marquee-controls-overlay{opacity:1}
.marquee-ctrl-btn{background:rgba(15,18,32,0.75);color:#fff;border:1px solid rgba(255,255,255,0.2);border-radius:20px;padding:3px 8px;font-size:11px;cursor:pointer;backdrop-filter:blur(4px);display:flex;align-items:center;gap:4px}
.marquee-ctrl-btn:hover{background:var(--c-primary);border-color:var(--c-primary)}

/* ============ Perks ============ */
.perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.perk{display:flex;gap:14px;align-items:center;padding:18px;border-radius:var(--radius);background:var(--c-surface);border:1px solid var(--c-border)}
.perk-ico{width:48px;height:48px;border-radius:14px;background:color-mix(in srgb,var(--c-primary) 12%,transparent);color:var(--c-primary);display:grid;place-items:center;font-size:22px;flex-shrink:0}
.perk b{display:block;font-size:14.5px}
.perk span{font-size:12.5px;color:var(--c-text-2)}

/* ============ Shop ============ */
.shop-layout{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:20px}
.shop-sidebar{position:sticky;top:calc(var(--header-h) + 60px);align-self:start;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:18px;max-height:calc(100vh - 110px);overflow-y:auto}
.filter-group{border-bottom:1px solid var(--c-border);padding:14px 0}
.filter-group:last-child{border-bottom:none;padding-bottom:0}
.filter-group h4{font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;color:var(--c-text-2)}
.filter-group .chip{margin:0 6px 6px 0}
.price-range{display:flex;align-items:center;gap:8px}
.price-range input{flex:1}
.range-vals{display:flex;justify-content:space-between;font-size:12px;color:var(--c-text-2);margin-top:6px}
.shop-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.result-count{font-size:14px;color:var(--c-text-2)}
.sort-select{padding:9px 14px;border-radius:10px;border:1.5px solid var(--c-border);background:var(--c-surface)}
.mobile-filter-btn{display:none;background:var(--c-surface);border:1.5px solid var(--c-border);border-radius:10px;padding:9px 16px;font-weight:700}
.empty-state{text-align:center;padding:60px 20px;color:var(--c-text-2)}
.empty-state .es-ico{font-size:56px;margin-bottom:12px}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:30px;flex-wrap:wrap}
.page-btn{min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1.5px solid var(--c-border);background:var(--c-surface);font-weight:700;transition:.2s}
.page-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.page-btn.active{background:var(--grad);color:#fff;border-color:transparent}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* ============ Product detail & Landing Page ============ */
.pd-wrapper{margin-top:16px;display:grid;gap:32px}
.pd-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.15fr);gap:36px;align-items:start}
.pd-gallery{display:grid;grid-template-columns:84px 1fr;gap:14px;position:sticky;top:calc(var(--header-h) + 20px)}
.pd-gallery.single-img{grid-template-columns:1fr}
.pd-gallery.single-img .pd-thumbs{display:none}
.pd-thumbs{display:grid;gap:10px;align-content:start;max-height:540px;overflow-y:auto;scrollbar-width:none}
.pd-thumbs::-webkit-scrollbar{display:none}
.pd-thumb{width:84px;height:84px;border-radius:12px;overflow:hidden;border:2px solid var(--c-border);cursor:pointer;transition:all .2s var(--ease);background:var(--c-surface-2);padding:0}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--c-primary);transform:scale(1.03);box-shadow:var(--shadow-sm)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-thumb{width:84px;height:84px;border-radius:12px;overflow:hidden;border:2px solid var(--c-border);cursor:pointer;transition:all .2s var(--ease);background:#ffffff;padding:0}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--c-primary);transform:scale(1.03);box-shadow:0 4px 12px rgba(109,94,240,0.25)}
.pd-thumb img{width:100%;height:100%;object-fit:cover}
.pd-main{position:relative;border-radius:18px;overflow:hidden;background:#ffffff;border:1px solid var(--c-border);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,0.04)}
.pd-main img{width:100%;height:100%;object-fit:cover;animation:fadeIn .3s ease;transition:transform .3s ease}
.pd-main:hover img{transform:scale(1.02)}
.pd-main-badge{position:absolute;top:14px;left:14px;z-index:5;display:flex;gap:6px;flex-direction:column;align-items:flex-start;max-width:fit-content;pointer-events:none}
.pd-zoom{position:absolute;bottom:14px;right:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.95);backdrop-filter:blur(8px);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,0.12);transition:.2s;border:1px solid rgba(0,0,0,0.08);cursor:pointer;z-index:6}
.pd-zoom:hover{transform:scale(1.1);background:#ffffff;color:var(--c-primary)}
.pd-info{display:grid;gap:16px;align-content:start}
.pd-header-tags{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pd-brand{color:var(--c-primary);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:1px}
.pd-title{font-size:clamp(22px,3.2vw,32px);font-weight:800;line-height:1.25;letter-spacing:-.5px}
.pd-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--c-text-2);padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.pd-price-card{background:color-mix(in srgb,var(--c-primary) 5%,var(--c-surface));border:1.5px solid color-mix(in srgb,var(--c-primary) 18%,var(--c-border));border-radius:var(--radius-sm);padding:16px 20px;display:grid;gap:8px}
.pd-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pd-price{font-family:var(--font-display);font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--c-primary);line-height:1}
.pd-price-old{font-size:20px;color:var(--c-text-3);text-decoration:line-through;font-weight:600}
.pd-save{font-size:13px;font-weight:800;color:#fff;background:var(--c-green);padding:4px 10px;border-radius:999px;display:inline-block}
.pd-tax{font-size:12.5px;color:var(--c-text-2);margin:0}
.pd-flash-countdown{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;background:color-mix(in srgb,var(--c-red) 10%,transparent);color:var(--c-red);font-weight:700;font-size:13px;border:1px dashed color-mix(in srgb,var(--c-red) 40%,transparent)}
.pd-flash-countdown span{font-variant-numeric:tabular-nums;font-weight:800}

.variant-group{display:grid;gap:8px}
.variant-group label{font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.variant-options{display:flex;gap:8px;flex-wrap:wrap}
.variant-swatch{min-width:48px;padding:9px 16px;border:2px solid var(--c-border);border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;background:var(--c-surface);transition:.2s;text-align:center}
.variant-swatch:hover{border-color:var(--c-primary)}
.variant-swatch.active{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 12%,transparent);color:var(--c-primary)}
.variant-swatch.color-swatch{width:40px;height:40px;min-width:0;padding:0;border-radius:50%;position:relative}
.variant-swatch.color-swatch.active::after{content:"";position:absolute;inset:-5px;border:2px solid var(--c-primary);border-radius:50%}

.stock-info{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.stock-info.in{color:var(--c-green)}
.stock-info.low{color:var(--c-amber)}
.stock-info.out{color:var(--c-red)}
.stock-bar{height:6px;border-radius:99px;background:var(--c-surface-2);overflow:hidden;max-width:100%}
.stock-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--c-green),var(--c-cyan))}

.pd-actions{display:grid;grid-template-columns:auto 1fr 1.3fr;gap:12px;margin-top:4px}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--c-border);border-radius:12px;overflow:hidden;background:var(--c-surface)}
.qty-stepper button{width:44px;height:50px;font-size:19px;font-weight:700;transition:.2s}
.qty-stepper button:hover{background:var(--c-surface-2);color:var(--c-primary)}
.qty-stepper input{width:46px;text-align:center;border:none;outline:none;background:none;font-weight:800;font-size:15px;-moz-appearance:textfield;appearance:textfield}
.qty-stepper input::-webkit-outer-spin-button,.qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none}

.btn-whatsapp-order{background:#25d366!important;color:#fff!important;border:none!important;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:12px;text-decoration:none;transition:.2s}
.btn-whatsapp-order:hover{background:#1da851!important;transform:translateY(-2px)}

/* Trust & Guarantee Grid */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:4px}
.trust-item{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px}
.trust-icon{font-size:22px;flex-shrink:0}
.trust-title{font-size:12.5px;font-weight:700;line-height:1.2;display:block}
.trust-desc{font-size:11px;color:var(--c-text-2);display:block}

.delivery-card{border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:16px;display:grid;gap:10px;background:var(--c-surface)}
.delivery-card .d-row{display:flex;gap:12px;font-size:13.5px;align-items:flex-start}
.delivery-card .d-row b{display:block;font-size:13px}
.delivery-pin{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap;width:100%}
.delivery-pin input{flex:1 1 200px;padding:10px 14px;border:1.5px solid var(--c-border);border-radius:10px;outline:none;background:var(--c-surface)}
.delivery-pin input:focus{border-color:var(--c-primary)}
.delivery-pin button{flex:0 0 auto;white-space:nowrap}

/* Promotional Banner */
.promo-banner{padding:40px;display:flex;justify-content:space-between;gap:24px;align-items:center;flex-wrap:wrap}
.flash-sale-banner{padding:34px 30px}
@media (max-width:768px){
  .promo-banner{padding:24px!important;flex-direction:column;align-items:flex-start}
  .promo-banner .delivery-pin{max-width:100%!important}
  .promo-banner .delivery-pin button{flex:1 1 100%}
  .flash-sale-banner{padding:24px 20px!important}
}

/* Sticky Bottom Buy Bar (Mobile) */
.mobile-sticky-buy{display:none;position:fixed!important;bottom:0!important;left:0!important;right:0!important;background:var(--c-surface)!important;border-top:1px solid var(--c-border)!important;padding:10px 16px!important;z-index:9999!important;box-shadow:0 -4px 20px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)}
.mobile-sticky-buy-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:600px;margin-inline:auto}
.mobile-sticky-buy-info{display:flex;align-items:center;gap:10px;overflow:hidden}
.mobile-sticky-buy-info img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex-shrink:0}
.mobile-sticky-buy-info b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.mobile-sticky-buy-info .money{color:var(--c-primary);font-weight:800;font-size:14px}
.mobile-sticky-buy-btns{display:flex;gap:8px;flex-shrink:0}

/* Landing Page Feature Cards */
.lp-feature-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;display:grid;gap:12px}
.lp-specs-table{width:100%;border-collapse:collapse}
.lp-specs-table tr{border-bottom:1px solid var(--c-border)}
.lp-specs-table td{padding:10px 14px;font-size:13.5px}
.lp-specs-table td:first-child{color:var(--c-text-2);font-weight:600;width:38%}

/* ============ Product Specs & Feature Breakdown Section ============ */
.pd-specs-section {
  margin-top: 36px;
  margin-bottom: 24px;
  padding: 32px;
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--radius, 18px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
  width: 100%;
  box-sizing: border-box;
}

.pd-specs-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 32px;
}

.pd-specs-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--c-primary, #6d5ef0) 10%, transparent);
  color: var(--c-primary, #6d5ef0);
  border: 1px solid color-mix(in srgb, var(--c-primary, #6d5ef0) 25%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.pd-specs-pill svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.pd-specs-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  color: var(--c-text, #0f172a);
  margin: 0 0 8px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.pd-specs-subtitle {
  font-size: 14.5px;
  color: var(--c-text-2, #64748b);
  line-height: 1.6;
  margin: 0;
}

.pd-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 22px;
}

.pd-spec-card {
  background: var(--c-surface, #ffffff);
  border: 1.5px solid var(--c-border, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
  transition: transform 0.2s var(--ease, ease), box-shadow 0.2s var(--ease, ease), border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.pd-spec-card:hover {
  border-color: color-mix(in srgb, var(--c-primary, #6d5ef0) 35%, var(--c-border, #e2e8f0));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.pd-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--c-border, #f1f5f9);
}

.pd-card-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pd-card-icon-badge svg {
  flex-shrink: 0;
}

.pd-icon-blue {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.pd-icon-amber {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.pd-icon-purple {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  border: 1px solid rgba(124, 58, 237, 0.2);
}

.pd-card-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--c-text, #0f172a);
  margin: 0 0 2px 0;
  line-height: 1.3;
}

.pd-card-tag {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pd-card-body {
  font-size: 14px;
  color: var(--c-text-2, #475569);
  line-height: 1.65;
  flex: 1;
}

.pd-desc-text {
  margin: 0;
  white-space: pre-line;
  color: var(--c-text-2, #475569);
}

.pd-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pd-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--c-surface-2, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--c-border, #e2e8f0) 70%, transparent);
  transition: background 0.15s ease;
}

.pd-highlight-item:hover {
  background: color-mix(in srgb, var(--c-primary, #6d5ef0) 4%, var(--c-surface-2, #f8fafc));
}

.pd-check-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #dcfce7;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.pd-check-circle svg {
  stroke: #059669;
}

.pd-highlight-text {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--c-text, #1e293b);
  line-height: 1.45;
}

/* Specifications Key-Value Grid */
.pd-specs-box {
  background: var(--c-surface, #ffffff);
}

.pd-specs-kv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pd-spec-kv-item {
  background: var(--c-surface-2, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pd-spec-kv-item.full-width {
  grid-column: 1 / -1;
}

.pd-kv-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--c-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pd-kv-icon {
  font-size: 13px;
}

.pd-kv-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text, #0f172a);
  line-height: 1.4;
  word-break: break-word;
}

.code-pill {
  display: inline-block;
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #cbd5e1);
  padding: 2px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12.5px;
  width: fit-content;
  color: var(--c-primary, #6d5ef0);
  font-weight: 700;
}

.highlight-green {
  color: #059669 !important;
  font-weight: 700 !important;
}

/* Tab Panels & Details for PHP template */
.pd-details-container {
  margin-top: 40px;
}
.pd-tabs-nav {
  display: flex;
  gap: 12px;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.pd-tab-link {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--c-text-2);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.pd-tab-link:hover {
  color: var(--c-primary);
}
.pd-tab-link.active {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}
.pd-tab-panel {
  display: block;
}

/* Multi-buy Quantity Offers & Badges */
.multi-buy-offers-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(5, 150, 105, 0.04));
  border: 1.5px dashed #10b981;
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
}
.offers-tiers-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.offer-tier-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface, #ffffff);
  border: 1.5px solid #a7f3d0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.offer-tier-pill:hover {
  border-color: #059669;
  background: #f0fdf4;
  transform: translateX(2px);
}
.swatch-check {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.variant-price-chip {
  font-size: 11px;
  opacity: 0.85;
  margin-left: 4px;
  font-weight: 700;
}
.offer-badge {
  display: inline-flex;
  align-items: center;
  background: #ecfdf4;
  color: #059669;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #a7f3d0;
}

/* Checkout Item Stepper & Delivery Area */
.ck-items-list {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}
.ck-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--c-surface-2, #f1f5f9);
  border: 1.5px solid var(--c-border, #cbd5e1);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.btn-ck-minus, .btn-ck-plus {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  color: var(--c-text);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 0;
  user-select: none;
  transition: background 0.15s ease;
}
.btn-ck-minus:hover, .btn-ck-plus:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}
.btn-ck-del {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.btn-ck-del:hover {
  opacity: 1;
  background: rgba(239, 68, 68, 0.08);
}
.delivery-area-card {
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid var(--c-border);
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--c-surface);
}

/* User-Friendly Coupon Components */
.coupon-box-card {
  background: linear-gradient(135deg, rgba(109, 94, 240, 0.04), rgba(59, 130, 246, 0.02));
  border: 1.5px dashed color-mix(in srgb, var(--c-primary, #6d5ef0) 40%, var(--c-border, #cbd5e1));
  border-radius: 12px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}
.coupon-box-card:focus-within {
  border-color: var(--c-primary, #6d5ef0);
}
.coupon-applied-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ecfdf5;
  border: 1.5px solid #a7f3d0;
  border-radius: 10px;
  padding: 10px 12px;
}
.btn-remove-coupon {
  background: none;
  border: 1px solid #fca5a5;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.btn-remove-coupon:hover {
  background: #fee2e2;
  color: #b91c1c;
}
.quick-coupon-chip {
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #cbd5e1);
  color: var(--c-primary, #6d5ef0);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-coupon-chip:hover {
  border-color: var(--c-primary, #6d5ef0);
  background: color-mix(in srgb, var(--c-primary, #6d5ef0) 8%, var(--c-surface, #ffffff));
  transform: translateY(-1px);
}
.ck-coupon-section {
  margin: 12px 0;
  padding: 12px;
  background: var(--c-surface-2, #f8fafc);
  border: 1.5px dashed var(--c-border, #cbd5e1);
  border-radius: 12px;
}
.btn-ck-quick-coupon {
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #cbd5e1);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-primary, #6d5ef0);
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-ck-quick-coupon:hover {
  border-color: var(--c-primary, #6d5ef0);
  background: color-mix(in srgb, var(--c-primary, #6d5ef0) 8%, #ffffff);
}

/* Missing Layout Utilities */
.gap6 { gap: 6px !important; }
.gap10 { gap: 10px !important; }
.p14 { padding: 14px !important; }
.mb14 { margin-bottom: 14px !important; }
.mb6 { margin-bottom: 6px !important; }
.mt6 { margin-top: 6px !important; }
.rounded { border-radius: 12px !important; }
.shop-wrapper { display: grid; gap: 24px; }
.support-hero { border-radius: 24px; }
.contact-channel-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.06); }

/* Dark Mode Overrides */
[data-theme="dark"] .pd-specs-section {
  background: var(--c-surface, #1e293b);
  border-color: var(--c-border, #334155);
}
[data-theme="dark"] .pd-spec-card {
  background: var(--c-surface, #1e293b);
  border-color: var(--c-border, #334155);
}
[data-theme="dark"] .pd-card-head {
  border-bottom-color: var(--c-border, #334155);
}
[data-theme="dark"] .pd-highlight-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .pd-highlight-text {
  color: var(--c-text, #f1f5f9);
}
[data-theme="dark"] .pd-spec-kv-item {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--c-border, #334155);
}
[data-theme="dark"] .code-pill {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .offer-tier-pill {
  background: var(--c-surface, #1e293b);
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .coupon-applied-pill {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}
[data-theme="dark"] .quick-coupon-chip,
[data-theme="dark"] .btn-ck-quick-coupon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Responsive Specs */
@media (max-width: 900px) {
  .pd-specs-grid {
    grid-template-columns: 1fr;
  }
  .pd-specs-kv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pd-specs-section {
    padding: 22px 16px;
    border-radius: 14px;
    margin-top: 24px;
  }
}

@media (max-width: 600px) {
  .pd-specs-kv-grid {
    grid-template-columns: 1fr;
  }
  .pd-specs-header {
    text-align: left;
    margin-bottom: 20px;
  }
  .pd-spec-card {
    padding: 16px;
  }
}

/* ============ Reviews / Q&A ============ */
.rev-summary{display:grid;grid-template-columns:220px 1fr;gap:28px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:24px;margin-top:18px}
.rev-big{text-align:center}
.rev-big .num{font-family:var(--font-display);font-size:52px;font-weight:800;line-height:1}
.rev-bars{display:grid;gap:8px}
.rev-bar{display:grid;grid-template-columns:44px 1fr 34px;gap:10px;align-items:center;font-size:12.5px;color:var(--c-text-2)}
.rev-bar .bar{height:8px;border-radius:99px;background:var(--c-surface-2);overflow:hidden}
.rev-bar .bar span{display:block;height:100%;background:var(--c-amber);border-radius:99px}
.review-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:18px;margin-top:14px}
.review-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.reviewer{display:flex;align-items:center;gap:10px}
.reviewer .avatar{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.reviewer b{font-size:14px;display:block}
.reviewer span{font-size:12px;color:var(--c-text-3)}
.review-body p{font-size:14px;color:var(--c-text-2)}
.review-photos{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.review-photos img{width:70px;height:70px;border-radius:10px;object-fit:cover;cursor:pointer}
.qa-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:16px 18px;margin-top:12px}
.qa-q{font-weight:700;display:flex;gap:10px}
.qa-a{color:var(--c-text-2);font-size:14px;margin-top:8px;padding-left:26px;border-left:2px solid var(--c-border)}
.write-review{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:18px;margin-top:16px;display:grid;gap:12px}
.rate-input{display:flex;gap:4px;font-size:26px}
.rate-input span{cursor:pointer;color:var(--c-text-3);transition:.15s}
.rate-input span.on{color:var(--c-amber)}

/* ============ Cart page ============ */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;margin-top:22px;align-items:start}
.cart-items{display:grid;gap:14px}
.coupon-row{display:flex;gap:8px}
.coupon-row input{flex:1}
.coupon-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--c-green) 12%,transparent);border:1.5px dashed color-mix(in srgb,var(--c-green) 55%,transparent);color:var(--c-green);font-weight:700;font-size:12.5px}
.summary-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;position:sticky;top:calc(var(--header-h) + 60px)}
.sum-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px;color:var(--c-text-2)}
.sum-row.total{border-top:2px solid var(--c-border);margin-top:10px;padding-top:14px;color:var(--c-text);font-weight:800;font-size:18px}
.sum-row .saved{color:var(--c-green);font-weight:700}
.free-ship{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,var(--c-green) 10%,transparent);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--c-green);font-weight:600;margin:8px 0}
.free-ship .progress{flex:1;background:color-mix(in srgb,var(--c-green) 18%,transparent)}

/* ============ Checkout ============ */
.checkout-layout{display:grid;grid-template-columns:1fr 400px;gap:24px;margin-top:22px;align-items:start}
.ck-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.ck-card h3{display:flex;align-items:center;gap:10px;font-size:17px;margin-bottom:16px}
.ck-step{width:26px;height:26px;border-radius:50%;background:var(--grad);color:#fff;font-size:13px;display:grid;place-items:center;font-weight:800}
.addr-card{position:relative;border:2px solid var(--c-border);border-radius:var(--radius-sm);padding:14px;cursor:pointer;transition:.2s}
.addr-card:hover{border-color:var(--c-primary)}
.addr-card.selected{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 6%,transparent)}
.addr-card .addr-tag{position:absolute;top:10px;right:10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.pay-methods{display:grid;gap:10px}
.pay-method{display:flex;align-items:center;gap:12px;padding:14px;border:2px solid var(--c-border);border-radius:var(--radius-sm);cursor:pointer;transition:.2s}
.pay-method:hover{border-color:var(--c-primary)}
.pay-method.selected{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 6%,transparent)}
.pay-method .pm-ico{font-size:22px}
.pay-method b{font-size:14.5px;display:block}
.pay-method span{font-size:12.5px;color:var(--c-text-2)}
.ck-total-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;position:sticky;top:calc(var(--header-h) + 60px)}
.ck-order-item{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--c-border)}
.ck-order-item img{width:46px;height:46px;border-radius:8px;object-fit:cover}
.ck-order-item b{font-size:13.5px;display:block;line-height:1.3}
.ck-order-item span{font-size:12px;color:var(--c-text-2)}
.secure-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--c-green);justify-content:center;margin-top:12px}

.success-wrap{max-width:620px;margin:50px auto;text-align:center;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:48px 32px;animation:fadeUp .5s var(--ease)}
.success-check{width:88px;height:88px;border-radius:50%;background:color-mix(in srgb,var(--c-green) 14%,transparent);color:var(--c-green);font-size:44px;display:grid;place-items:center;margin:0 auto 18px;animation:pop .5s var(--ease)}

/* ============ Auth ============ */
.auth-wrap{max-width:430px;margin:44px auto;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:34px;animation:fadeUp .5s var(--ease)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--c-surface-2);border-radius:12px;padding:5px;margin-bottom:22px}
.auth-tabs button{padding:10px;border-radius:9px;font-weight:700;font-size:14px;transition:.2s}
.auth-tabs button.active{background:var(--c-surface);box-shadow:var(--shadow-sm);color:var(--c-primary)}
.otp-boxes{display:flex;gap:10px;justify-content:center;margin:18px 0}
.otp-box{width:50px;height:56px;text-align:center;font-size:22px;font-weight:800;border:2px solid var(--c-border);border-radius:12px;outline:none;background:var(--c-surface);transition:.2s}
.otp-box:focus{border-color:var(--c-primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 16%,transparent)}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--c-text-3);font-size:12.5px;margin:18px 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--c-border)}
.social-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:12px;border:1.5px solid var(--c-border);font-weight:700;width:100%;background:var(--c-surface);transition:.2s}
.social-btn:hover{border-color:var(--c-primary)}
.resend-timer{text-align:center;font-size:13px;color:var(--c-text-2);margin-top:12px}
.resend-timer b{color:var(--c-primary);cursor:pointer}
.otp-ico{font-size:46px;text-align:center;margin-bottom:8px}

/* ============ Account ============ */
.account-layout{display:grid;grid-template-columns:270px 1fr;gap:24px;margin-top:22px;align-items:start}
.account-sidebar{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:18px;position:sticky;top:calc(var(--header-h) + 60px)}
.profile-mini{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--c-border);margin-bottom:12px}
.avatar-lg{width:52px;height:52px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800;font-size:19px}
.profile-mini b{display:block;font-size:15px}
.profile-mini span{font-size:12.5px;color:var(--c-text-2)}
.account-nav{display:grid;gap:4px}
.account-nav a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;font-weight:600;font-size:14px;color:var(--c-text-2);transition:.2s}
.account-nav a:hover{background:var(--c-surface-2);color:var(--c-text)}
.account-nav a.active{background:color-mix(in srgb,var(--c-primary) 12%,transparent);color:var(--c-primary)}
.account-panel{display:grid;gap:18px}
.panel-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px}
.panel-card h3{margin-bottom:14px;font-size:17px}
.orders-list{display:grid;gap:14px}
.order-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:18px;transition:.2s}
.order-card:hover{box-shadow:var(--shadow)}
.order-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.order-id{font-weight:800;font-family:var(--font-display);font-size:15px}
.order-date{font-size:12.5px;color:var(--c-text-3)}
.order-items{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.order-items img{width:52px;height:52px;border-radius:10px;object-fit:cover;border:1px solid var(--c-border)}
.order-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.order-total b{font-size:15px}
.order-actions{display:flex;gap:8px;flex-wrap:wrap}

.tracking-steps{display:flex;gap:0;margin:20px 0}
.track-step{flex:1;text-align:center;position:relative}
.track-step::before{content:"";position:absolute;top:17px;left:50%;width:100%;height:3px;background:var(--c-surface-2)}
.track-step:first-child::before{display:none}
.track-step .dot{width:36px;height:36px;border-radius:50%;background:var(--c-surface-2);color:var(--c-text-3);display:grid;place-items:center;margin:0 auto 8px;position:relative;z-index:1;font-weight:800;font-size:14px;transition:.3s}
.track-step.done .dot{background:var(--c-green);color:#fff}
.track-step.done::before{background:var(--c-green)}
.track-step.now .dot{background:var(--grad);color:#fff;animation:pulse 2s infinite;box-shadow:0 0 0 6px color-mix(in srgb,var(--c-primary) 20%,transparent)}
.track-step span{font-size:11.5px;font-weight:700;color:var(--c-text-3)}
.track-step.done span,.track-step.now span{color:var(--c-text)}

.coupon-card{display:flex;gap:16px;align-items:center;border:2px dashed color-mix(in srgb,var(--c-primary) 45%,transparent);border-radius:var(--radius-sm);padding:16px;background:color-mix(in srgb,var(--c-primary) 5%,transparent)}
.coupon-card .cc-code{font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--c-primary);letter-spacing:1.5px}
.coupon-card .cc-info b{font-size:14px}
.coupon-card .cc-info span{font-size:12.5px;color:var(--c-text-2);display:block}
.copy-code{font-size:12px;font-weight:800;color:var(--c-primary);cursor:pointer;border:1.5px solid var(--c-primary);padding:5px 12px;border-radius:999px;transition:.2s}
.copy-code:hover{background:var(--c-primary);color:#fff}

/* ============ Wishlist / compare ============ */
.compare-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:20px}
.compare-col{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden}
.compare-col .cc-remove{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--c-surface) 85%,transparent);display:grid;place-items:center;z-index:2}
.compare-col .cc-remove:hover{color:var(--c-red)}
.compare-spec{padding:12px 14px;border-top:1px solid var(--c-border);display:flex;justify-content:space-between;font-size:13px}
.compare-spec b{text-align:right}

/* ============ Deals ============ */
.deal-hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(700px 400px at 90% 0%,color-mix(in srgb,var(--c-accent) 45%,transparent),transparent),linear-gradient(120deg,#2a0d1c,#4a0f28);color:#fff;padding:46px 44px;margin:26px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.deal-hero h2{font-size:clamp(24px,4vw,36px)}
.deal-hero p{color:#e8c3d3;max-width:44ch}
.coupons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:18px}

/* ============ Seller / admin ============ */
.seller-hero{background:var(--grad);color:#fff;border-radius:var(--radius-lg);padding:40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:26px 0;position:relative;overflow:hidden}
.seller-hero::after{content:"📦";position:absolute;right:6%;font-size:120px;opacity:.2;bottom:-20px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.stat-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:20px}
.stat-card .sc-num{font-family:var(--font-display);font-size:30px;font-weight:800}
.stat-card .sc-label{font-size:13px;color:var(--c-text-2);font-weight:600}
.stat-card .sc-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;margin-bottom:10px}
.tabs{display:flex;gap:6px;background:var(--c-surface-2);padding:5px;border-radius:12px;width:fit-content;max-width:100%;overflow-x:auto;margin-bottom:20px}
.tabs button{padding:10px 18px;border-radius:9px;font-weight:700;font-size:13.5px;white-space:nowrap;transition:.2s}
.tabs button.active{background:var(--c-surface);box-shadow:var(--shadow-sm);color:var(--c-primary)}
.admin-table{width:100%;border-collapse:collapse;font-size:13.5px}
.admin-table th{text-align:left;padding:12px 14px;color:var(--c-text-2);font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--c-border)}
.admin-table td{padding:12px 14px;border-bottom:1px solid var(--c-border);vertical-align:middle}
.admin-table tr:hover td{background:color-mix(in srgb,var(--c-primary) 4%,transparent)}
.admin-table img{width:42px;height:42px;border-radius:9px;object-fit:cover}
.switch{position:relative;width:44px;height:24px;border-radius:99px;background:var(--c-surface-2);border:1.5px solid var(--c-border);transition:.25s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.25s}
.switch.on{background:var(--c-green);border-color:var(--c-green)}
.switch.on::after{transform:translateX(20px)}
.bar-chart{display:flex;align-items:end;gap:10px;height:200px;padding-top:10px}
.bar-col{flex:1;display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;text-align:center}
.bar-col .bar{background:var(--grad);border-radius:8px 8px 0 0;transition:height .6s var(--ease);min-height:4px}
.bar-col span{font-size:11px;color:var(--c-text-3)}
.donut{position:relative;width:180px;height:180px;border-radius:50%;display:grid;place-items:center;margin-inline:auto}
.donut::before{content:"";position:absolute;inset:26px;background:var(--c-surface);border-radius:50%}
.donut b{position:relative;font-family:var(--font-display);font-size:24px}
.role-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:800;background:color-mix(in srgb,var(--c-primary) 14%,transparent);color:var(--c-primary)}

/* ============ Support ============ */
.support-layout{display:grid;grid-template-columns:1fr 400px;gap:24px;margin-top:22px;align-items:start}
.faq-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:10px}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;font-weight:700;font-size:14.5px;text-align:left;transition:.2s}
.faq-q:hover{color:var(--c-primary)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);color:var(--c-text-2);font-size:14px;padding:0 18px}
.faq-item.open .faq-a{max-height:400px;padding:0 18px 16px}
.faq-item.open .faq-q{color:var(--c-primary)}
.chat-box{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);display:flex;flex-direction:column;height:520px}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--c-border)}
.chat-ava{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:800}
.chat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:78%;padding:11px 15px;border-radius:14px;font-size:14px;animation:fadeUp .3s var(--ease)}
.msg.in{background:var(--c-surface-2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.out{background:var(--grad);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg time{display:block;font-size:10.5px;opacity:.65;margin-top:4px}
.quick-replies{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 12px}
.quick-replies button{font-size:12.5px;padding:7px 13px;border-radius:999px;background:var(--c-surface-2);font-weight:600;transition:.2s}
.quick-replies button:hover{background:var(--c-primary);color:#fff}
.chat-input-row{display:flex;gap:10px;padding:14px;border-top:1px solid var(--c-border)}
.chat-input-row input{flex:1;padding:12px 16px;border-radius:999px;border:1.5px solid var(--c-border);outline:none;background:var(--c-bg)}
.chat-input-row input:focus{border-color:var(--c-primary)}
.chat-send{width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;font-size:18px;flex-shrink:0;transition:.2s}
.chat-send:hover{transform:scale(1.08)}
.typing{display:inline-flex;gap:4px;padding:14px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--c-text-3);animation:bounce 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.ticket-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:18px;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.notif-item{display:flex;gap:12px;padding:14px;border-bottom:1px solid var(--c-border);align-items:flex-start}
.notif-item:last-child{border-bottom:none}
.notif-item .ni-ico{width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--c-primary) 12%,transparent);color:var(--c-primary);display:grid;place-items:center;flex-shrink:0}
.notif-item b{font-size:13.5px;display:block}
.notif-item p{font-size:12.5px;color:var(--c-text-2)}
.notif-item time{font-size:11px;color:var(--c-text-3)}
.notif-item.unread{border-left:3px solid var(--c-primary)}

/* ============ Toast / modal ============ */
.toast-stack{position:fixed;bottom:20px;right:20px;z-index:300;display:grid;gap:10px}
.toast{display:flex;align-items:center;gap:12px;background:var(--c-surface);border:1px solid var(--c-border);border-left:4px solid var(--c-primary);border-radius:12px;padding:14px 18px;box-shadow:var(--shadow-lg);min-width:280px;max-width:360px;animation:fadeUp .35s var(--ease)}
.toast.success{border-left-color:var(--c-green)}
.toast.error{border-left-color:var(--c-red)}
.toast.warn{border-left-color:var(--c-amber)}
.toast .t-ico{font-size:20px}
.toast b{display:block;font-size:13.5px}
.toast span{font-size:12.5px;color:var(--c-text-2)}
.toast .t-close{margin-left:auto;color:var(--c-text-3);font-size:16px}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:130;background:var(--c-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(560px,92vw);max-height:88vh;overflow-y:auto;padding:28px;animation:pop .3s var(--ease)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.modal-head h3{font-size:19px}

/* ============ Social proof (live activity) ============ */
.sp-stack{position:fixed;bottom:20px;left:20px;z-index:299;display:grid;gap:10px;max-width:min(340px,88vw)}
body:has(.builder-wrap) .sp-stack,
body:has(.builder-canvas) .sp-stack,
body:has(#builderApp) .sp-stack,
body.wp-admin .sp-stack{display:none!important;visibility:hidden!important;pointer-events:none!important}
.sp-toast{display:flex;align-items:flex-start;gap:12px;background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-lg);animation:slideInLeft .35s var(--ease)}
.sp-toast img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;border:1px solid var(--c-border)}
.sp-body{flex:1;min-width:0}
.sp-head{display:flex;align-items:center;gap:6px;font-size:12.5px}
.sp-ico{font-size:15px}
.sp-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-body p{font-size:12.5px;color:var(--c-text-2);line-height:1.45;margin:3px 0 2px}
.sp-body time{font-size:10.5px;color:var(--c-text-3)}
.sp-close{background:none;border:none;color:var(--c-text-3);font-size:13px;cursor:pointer;padding:2px;line-height:1}
.sp-close:hover{color:var(--c-text)}

/* ============ Abandoned-cart recovery card ============ */
.recover-card{position:fixed;bottom:20px;right:20px;z-index:299;width:min(360px,92vw);background:var(--c-surface);border:1px solid var(--c-border);border-left:4px solid var(--c-accent);border-radius:14px;padding:16px;box-shadow:var(--shadow-lg);animation:slideInRight .35s var(--ease)}
.recover-card .rc-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.recover-card .rc-head h3{font-size:15px;font-family:var(--font-display)}
.recover-card .rc-close{background:none;border:none;color:var(--c-text-3);font-size:15px;cursor:pointer}
.recover-card p{font-size:12.5px;color:var(--c-text-2);margin:8px 0 12px;line-height:1.5}
.recover-card .rc-item{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--c-primary) 6%,transparent);border-radius:10px;padding:8px 10px;margin-bottom:12px}
.recover-card .rc-item img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.recover-card .rc-item b{font-size:12.5px;display:block}
.recover-card .rc-item span{font-size:11.5px;color:var(--c-text-2)}
.recover-card .rc-total{font-size:13px}
.recover-card .saved{color:var(--c-green);font-weight:700}
.abandon-actions{display:flex;gap:8px}
.abandon-actions .btn{flex:1}

/* ============ Compare bar / footer ============ */
.compare-bar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:140;background:var(--c-surface);border:1px solid var(--c-border);border-radius:999px;box-shadow:var(--shadow-lg);padding:10px 12px 10px 22px;display:flex;gap:14px;align-items:center;animation:fadeUp .35s var(--ease)}
.site-footer{background:#0f1220;color:#b9c0d4;margin-top:auto;padding:48px 0 22px;flex-shrink:0}
[data-theme="dark"] .site-footer{background:#05070c}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:28px;margin-bottom:34px}
.site-footer h4{color:#fff;font-size:14px;margin-bottom:14px}
.site-footer a{display:block;padding:5px 0;font-size:13.5px;opacity:.85;transition:.2s}
.site-footer a:hover{opacity:1;color:#fff;padding-left:4px}
.footer-brand p{font-size:13.5px;margin:14px 0}
.payment-icons{font-size:12.5px;letter-spacing:.5px;opacity:.9}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #232a3a;padding-top:20px;font-size:13px;flex-wrap:wrap}
.socials{font-size:18px;letter-spacing:4px}

/* ============ One-Page Landing Page Builder & Public Viewer ============ */
.lp-builder-container{display:flex;flex-direction:column;height:calc(100vh - 74px);overflow:hidden;background:var(--c-bg)}
.lp-builder-topbar{background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;z-index:10}
.lp-topbar-left,.lp-topbar-center,.lp-topbar-right{display:flex;align-items:center;gap:8px}
.lp-page-selector-wrap{display:flex;align-items:center;gap:6px}
.lp-page-select{max-width:240px;font-weight:600}
.lp-device-toggle{display:flex;background:var(--c-surface-2);padding:2px;border-radius:8px;border:1px solid var(--c-border)}
.lp-dev-btn{background:none;border:none;padding:5px 10px;font-size:12px;font-weight:600;border-radius:6px;color:var(--c-text-2);cursor:pointer;transition:.15s}
.lp-dev-btn.active{background:var(--c-surface);color:var(--c-primary);box-shadow:0 1px 3px rgba(0,0,0,.08)}

.lp-builder-body{display:grid;grid-template-columns:360px 1fr;flex:1;overflow:hidden}
.lp-builder-sidebar{background:var(--c-surface);border-right:1px solid var(--c-border);display:flex;flex-direction:column;overflow:hidden}
.lp-sidebar-tabs{display:flex;border-bottom:1px solid var(--c-border);background:var(--c-surface-2)}
.lp-s-tab{flex:1;padding:11px 8px;font-size:12px;font-weight:600;border:none;background:none;color:var(--c-text-2);cursor:pointer;border-bottom:2px solid transparent;transition:.15s;text-align:center}
.lp-s-tab.active{color:var(--c-primary);border-bottom-color:var(--c-primary);background:var(--c-surface)}

.lp-sidebar-pane{display:none;flex:1;overflow-y:auto;padding:14px}
.lp-sidebar-pane.active{display:block}
.lp-pane-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--c-border)}
.lp-pane-head h4{font-size:14px;font-family:var(--font-display);margin:0}

/* Section items in list */
.lp-sections-list{display:flex;flex-direction:column;gap:6px}
.lp-sec-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;background:var(--c-surface-2);border:1.5px solid transparent;cursor:pointer;transition:.15s}
.lp-sec-item:hover{border-color:var(--c-border);background:var(--c-surface-3)}
.lp-sec-item.active{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 8%,transparent)}
.lp-sec-info{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.lp-sec-ico{font-size:18px;flex-shrink:0}
.lp-sec-text{min-width:0;overflow:hidden}
.lp-sec-title{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sec-sub{display:block;font-size:11px;color:var(--c-text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sec-actions{display:flex;align-items:center;gap:3px}
.lp-sec-act-btn{background:none;border:none;color:var(--c-text-3);font-size:11px;padding:3px 5px;border-radius:4px;cursor:pointer;transition:.15s}
.lp-sec-act-btn:hover{background:var(--c-surface);color:var(--c-text)}
.lp-sec-act-btn.lp-btn-del:hover{color:var(--c-red);background:rgba(255,90,122,.15)}

.lp-quick-add-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.lp-qa-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:1px solid var(--c-border);border-radius:8px;background:var(--c-surface);cursor:pointer;transition:.15s}
.lp-qa-btn:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary);transform:translateY(-1px)}
.lp-qa-ico{font-size:16px}
.lp-qa-label{font-size:10px;font-weight:600}

/* Item row editors */
.lp-item-row{display:flex;gap:6px;align-items:center;margin-bottom:8px;background:var(--c-surface-2);padding:8px;border-radius:8px;border:1px solid var(--c-border)}
.lp-del-item-btn{background:none;border:none;color:var(--c-red);font-size:14px;cursor:pointer;padding:4px}
.lp-pkg-edit-card{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:8px;padding:8px}
.lp-del-pkg-btn{background:none;border:none;color:var(--c-red);font-size:12px;cursor:pointer}
.lp-settings-card{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:10px;padding:12px}
.lp-settings-card h5{font-size:13px;font-family:var(--font-display);margin-bottom:6px}

/* Canvas Viewport */
.lp-builder-canvas-wrapper{background:var(--c-bg);overflow-y:auto;padding:24px;display:flex;justify-content:center;align-items:flex-start}
.lp-canvas-frame{background:var(--c-surface);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.12);transition:width .3s ease;overflow:hidden;border:1px solid var(--c-border)}
.lp-frame-desktop{width:100%;max-width:1080px}
.lp-frame-tablet{width:768px;border-radius:24px;border:8px solid #2d3748}
.lp-frame-mobile{width:390px;border-radius:36px;border:10px solid #1a202c;box-shadow:0 12px 40px rgba(0,0,0,.25)}

.lp-in-builder .lp-sec-rendered{position:relative;cursor:pointer;border:2px dashed transparent;transition:.2s}
.lp-in-builder .lp-sec-rendered:hover{border-color:color-mix(in srgb,var(--c-primary) 40%,transparent)}
.lp-in-builder .lp-sec-rendered.lp-builder-sec-active{border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 20%,transparent)}

/* ============ Public Landing Page Components ============ */
.lp-public-wrapper{font-family:var(--font-sans);color:var(--c-text);background:var(--c-bg);line-height:1.6}
.lp-container{width:100%;max-width:1020px;margin:0 auto;padding:0 16px}
.lp-sec-header{text-align:center;margin-bottom:28px}
.lp-sec-header h2{font-size:26px;font-family:var(--font-display);color:var(--c-text);margin-bottom:6px}
.lp-sec-header p{color:var(--c-text-2);font-size:15px;max-width:560px;margin:0 auto}

/* Minimal Header */
.lp-minimal-header{background:var(--c-surface);border-bottom:1px solid var(--c-border);padding:12px 0;position:sticky;top:0;z-index:90;backdrop-filter:blur(8px)}
.lp-brand-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--c-text);font-weight:800;font-size:20px}
.lp-hotline-btn{background:var(--c-surface-2);color:var(--c-text);padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-decoration:none;border:1px solid var(--c-border)}
.lp-whatsapp-btn{background:#25D366;color:#fff;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgba(37,211,102,.3)}

/* Product Hero Section */
.lp-hero-product{padding:36px 0 24px;background:radial-gradient(ellipse at top,color-mix(in srgb,var(--c-primary) 6%,var(--c-surface)) 0%,var(--c-surface) 100%);border-bottom:1px solid var(--c-border)}
.lp-hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:center}
.lp-main-img-wrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--c-border);background:var(--c-surface-2);aspect-ratio:1/1}
.lp-main-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.lp-discount-badge{position:absolute;top:14px;right:14px;background:var(--c-accent);color:#fff;font-weight:800;font-size:14px;padding:6px 14px;border-radius:30px;box-shadow:0 4px 12px rgba(255,90,122,.4)}
.lp-thumb-row{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.lp-thumb-item{width:64px;height:64px;border-radius:10px;object-fit:cover;cursor:pointer;border:2px solid transparent;transition:.15s}
.lp-thumb-item.active{border-color:var(--c-primary);transform:scale(1.04)}

.lp-badge-pill{display:inline-block;background:rgba(255,90,122,.12);color:var(--c-accent);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:10px}
.lp-hero-title{font-size:28px;line-height:1.3;font-family:var(--font-display);margin-bottom:10px;color:var(--c-text)}
.lp-hero-desc{font-size:15px;color:var(--c-text-2);margin-bottom:18px}

.lp-price-box{display:flex;align-items:baseline;gap:14px;background:var(--c-surface-2);padding:14px 18px;border-radius:14px;border:1.5px solid var(--c-border);margin-bottom:18px;flex-wrap:wrap}
.lp-curr-price{font-size:32px;font-weight:900;color:var(--c-primary);font-family:var(--font-display)}
.lp-old-price{font-size:18px;color:var(--c-text-3);text-decoration:line-through}
.lp-save-pill{background:var(--c-green);color:#fff;font-size:12px;font-weight:700;padding:3px 10px;border-radius:12px;margin-left:auto}

.lp-scarcity-box{background:rgba(255,184,0,.08);border:1.5px dashed var(--c-amber);padding:12px 16px;border-radius:12px;margin-bottom:20px}
.lp-scarcity-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:var(--c-text)}
.lp-progress-bar{height:7px;background:rgba(0,0,0,.08);border-radius:6px;overflow:hidden}
.lp-progress-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--c-amber),var(--c-accent));border-radius:6px}

.lp-main-btn{display:block;width:100%;text-align:center;padding:16px 24px;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));color:#fff;font-size:18px;font-weight:800;border-radius:14px;text-decoration:none;box-shadow:0 8px 25px rgba(109,94,240,.35);transition:.2s}
.lp-btn-pulse{animation:pulseGlow 2s infinite}
@keyframes pulseGlow{0%,100%{transform:scale(1);box-shadow:0 8px 25px rgba(109,94,240,.35)}50%{transform:scale(1.02);box-shadow:0 12px 32px rgba(109,94,240,.55)}}

.lp-trust-micro{display:flex;justify-content:center;gap:14px;margin-top:12px;font-size:11px;color:var(--c-text-2);font-weight:600;flex-wrap:wrap}

/* Timer Section */
.lp-timer-section{padding:20px 0}
.lp-timer-card{background:linear-gradient(135deg,#1b1440,#0f1220);color:#fff;border-radius:18px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lp-timer-title{font-size:16px;font-weight:700}
.lp-countdown-boxes{display:flex;align-items:center;gap:8px}
.lp-c-box{background:rgba(255,255,255,.12);border-radius:10px;padding:8px 14px;text-align:center;min-width:60px}
.lp-c-box b{display:block;font-size:22px;font-family:var(--font-display);color:#ffc837}
.lp-c-box span{font-size:10px;opacity:.8}
.lp-c-sep{font-size:20px;font-weight:800;color:#ffc837}

/* Packages Grid */
.lp-packages-section{padding:36px 0;background:var(--c-surface-2)}
.lp-packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lp-pkg-card{position:relative;background:var(--c-surface);border:2px solid var(--c-border);border-radius:16px;padding:20px 18px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:.2s}
.lp-pkg-card:hover{border-color:color-mix(in srgb,var(--c-primary) 50%,transparent);transform:translateY(-2px)}
.lp-pkg-card.selected{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 5%,var(--c-surface));box-shadow:0 6px 20px rgba(109,94,240,.15)}
.lp-pkg-tag{position:absolute;top:-10px;right:14px;background:var(--c-primary);color:#fff;font-size:11px;font-weight:800;padding:3px 10px;border-radius:20px}
.lp-pkg-body h3{font-size:16px;font-family:var(--font-display);margin-bottom:6px}
.lp-pkg-price{font-size:20px;color:var(--c-primary);margin-right:6px}
.lp-pkg-old{font-size:13px;color:var(--c-text-3);text-decoration:line-through}

/* Direct 1-Click Checkout Section */
.lp-checkout-section{padding:40px 0;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--c-primary) 8%,var(--c-bg)) 0%,var(--c-bg) 100%)}
.lp-checkout-card{background:var(--c-surface);border:2px solid var(--c-border);border-radius:22px;padding:32px 28px;box-shadow:0 12px 40px rgba(0,0,0,.08)}
.lp-form-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.lp-input{border-radius:10px;padding:12px 14px;font-size:14px;border:1.5px solid var(--c-border);background:var(--c-surface-2)}
.lp-input:focus{border-color:var(--c-primary);background:var(--c-surface)}

.lp-deliv-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lp-deliv-radio{border:1.5px solid var(--c-border);border-radius:10px;padding:10px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;cursor:pointer;background:var(--c-surface-2);transition:.15s}
.lp-deliv-radio.selected{border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 8%,transparent);color:var(--c-primary)}
.lp-pay-pill{background:rgba(37,211,102,.1);border:1.5px solid rgba(37,211,102,.3);padding:10px 14px;border-radius:10px;font-weight:700;color:var(--c-green);font-size:13px}

/* Summary Card */
.lp-summary-card{background:var(--c-surface-2);border:1.5px solid var(--c-border);border-radius:16px;padding:20px}
.lp-summary-card h4{font-size:15px;font-family:var(--font-display);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--c-border)}
.lp-sum-prod{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.lp-sum-prod img{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--c-border)}
.lp-total-num{font-size:22px;color:var(--c-primary);font-family:var(--font-display)}
.lp-submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--c-green),#059669);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;box-shadow:0 6px 20px rgba(16,185,129,.35);transition:.2s}

/* Features, Video, Testimonials, Guarantee */
.lp-features-section,.lp-video-section,.lp-gallery-section,.lp-testimonials-section,.lp-guarantee-section,.lp-faq-section{padding:36px 0}
.lp-features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.lp-feature-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:20px;text-align:center}
.lp-feat-ico{font-size:32px;margin-bottom:10px}
.lp-feature-card h3{font-size:16px;font-family:var(--font-display);margin-bottom:6px}
.lp-feature-card p{font-size:13px;color:var(--c-text-2)}

.lp-video-wrap{max-width:760px;margin:0 auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--c-border);box-shadow:0 8px 30px rgba(0,0,0,.15)}
.lp-video-wrap iframe{width:100%;height:100%}

.lp-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.lp-gal-item{aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--c-border)}
.lp-gal-item img{width:100%;height:100%;object-fit:cover;transition:.2s}
.lp-gal-item:hover img{transform:scale(1.05)}

.lp-testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.lp-testi-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:20px}
.lp-testi-stars{color:#f59e0b;font-size:16px;margin-bottom:8px}
.lp-testi-text{font-size:14px;font-style:italic;color:var(--c-text);margin-bottom:12px}
.lp-testi-author{display:flex;justify-content:space-between;align-items:center}

.lp-guarantee-card{background:linear-gradient(135deg,rgba(109,94,240,.08),rgba(255,90,122,.08));border:1.5px dashed var(--c-primary);border-radius:20px;padding:32px 24px;text-align:center}
.lp-guarantee-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:20px}
.lp-gua-ico{font-size:32px;margin-bottom:8px}

.lp-faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.lp-faq-item{background:var(--c-surface);border:1px solid var(--c-border);border-radius:12px;overflow:hidden}
.lp-faq-item summary{padding:14px 18px;font-weight:700;cursor:pointer;user-select:none;font-size:15px}
.lp-faq-body{padding:0 18px 16px;font-size:14px;color:var(--c-text-2);line-height:1.6}

.lp-marquee-banner{background:var(--c-primary);color:#fff;padding:12px 0;overflow:hidden;font-weight:700;font-size:14px}
.lp-marquee-track{display:flex;gap:40px;white-space:nowrap;animation:marqueeScroll 18s linear infinite}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Floating Mobile CTA Bar */
.lp-floating-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--c-surface);border-top:1px solid var(--c-border);padding:10px 16px;box-shadow:0 -4px 20px rgba(0,0,0,.15);z-index:99}
.lp-floating-inner{max-width:500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.lp-floating-price small{display:block;font-size:10px;color:var(--c-text-2)}
.lp-floating-price b{font-size:20px;color:var(--c-primary);font-family:var(--font-display)}
.lp-floating-btn{flex:1;background:linear-gradient(135deg,var(--c-primary),var(--c-accent));color:#fff;text-align:center;padding:12px 18px;border-radius:12px;font-weight:800;font-size:15px;text-decoration:none}

/* Landing Page Modals */
.lp-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:999;align-items:center;justify-content:center;padding:16px}
.lp-modal-overlay.open{display:flex}
.lp-modal-card{background:var(--c-surface);border-radius:20px;border:1px solid var(--c-border);box-shadow:0 20px 50px rgba(0,0,0,.3);width:100%;max-width:560px;max-height:90vh;overflow-y:auto;padding:24px;position:relative}
.lp-modal-lg{max-width:780px}
.lp-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.lp-modal-close{background:none;border:none;font-size:20px;color:var(--c-text-3);cursor:pointer}

.lp-add-sec-grid,.lp-template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.lp-add-sec-card,.lp-template-card{background:var(--c-surface-2);border:1.5px solid var(--c-border);border-radius:12px;padding:16px;cursor:pointer;transition:.15s}
.lp-add-sec-card:hover,.lp-template-card:hover{border-color:var(--c-primary);transform:translateY(-2px)}
.lp-add-sec-icon,.lp-tpl-ico{font-size:28px;margin-bottom:8px;display:block}
.lp-add-sec-card h4,.lp-template-card h4{font-size:14px;font-family:var(--font-display);margin-bottom:4px}
.lp-add-sec-card p,.lp-template-card p{font-size:12px;color:var(--c-text-2);line-height:1.4}

.lp-modal-success{max-width:480px}
.lp-success-badge{font-size:54px;margin-bottom:8px}
.lp-invoice-box{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:14px;padding:14px 18px;margin:16px 0;font-size:13px}

@media(max-width:920px){
  .lp-builder-body{grid-template-columns:1fr}
  .lp-builder-sidebar{max-height:45vh}
  .lp-hero-grid{grid-template-columns:1fr}
  .lp-form-layout{grid-template-columns:1fr}
  .lp-floating-bar{display:block}
}

#gmailAutofillPopup{position:fixed;inset:0;z-index:500;display:grid;place-items:center;animation:fadeIn .3s ease}
.gaf-overlay{position:absolute;inset:0;background:rgba(10,13,22,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gaf-popup{position:relative;background:var(--c-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(440px,92vw);padding:40px 36px 32px;text-align:center;animation:pop .35s var(--ease);overflow:hidden}
.gaf-popup::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad)}
.gaf-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--c-text-3);font-size:20px;cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:.2s}
.gaf-close:hover{background:var(--c-surface-2);color:var(--c-text)}
.gaf-logo{font-size:48px;margin-bottom:12px;animation:floaty 3s ease-in-out infinite}
.gaf-popup h2{font-family:var(--font-display);font-size:22px;margin-bottom:8px}
.gaf-popup p{font-size:14px;color:var(--c-text-2);line-height:1.55;max-width:34ch;margin-inline:auto}
.gaf-input-wrap{margin:24px 0 20px;position:relative}
.gaf-email-input{width:100%;padding:14px 18px;border:2px solid var(--c-border);border-radius:var(--radius-sm);font-size:16px;background:var(--c-surface-2);color:var(--c-text);outline:none;transition:.25s;text-align:center;font-weight:500}
.gaf-email-input:focus{border-color:var(--c-primary);background:var(--c-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-primary) 15%,transparent)}
.gaf-autofill-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13px;color:var(--c-green);font-weight:600;animation:fadeIn .3s ease}
.gaf-autofill-hint span:first-child{width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--c-green) 12%,transparent);display:grid;place-items:center;font-size:13px}
.gaf-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-sm);background:var(--grad);color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:.25s;font-family:var(--font-display)}
.gaf-btn:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 20px color-mix(in srgb,var(--c-primary) 40%,transparent)}
.gaf-btn:active{transform:translateY(0)}
.gaf-note{margin-top:14px;font-size:11.5px;color:var(--c-text-3)}
.gaf-offer-ico{font-size:56px;margin-bottom:8px;animation:pop .5s var(--ease)}
.gaf-coupon-box{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0 16px;padding:14px 20px;background:color-mix(in srgb,var(--c-primary) 8%,transparent);border:2px dashed var(--c-primary);border-radius:var(--radius-sm)}
.gaf-coupon-code{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:2px;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.gaf-coupon-copy{font-size:18px;padding:6px;border-radius:8px;transition:.2s;cursor:pointer;background:none;border:none}
.gaf-coupon-copy:hover{background:var(--c-surface-2)}
.gaf-offer-details{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;font-size:12px;color:var(--c-green);font-weight:500;margin-bottom:20px}
.gaf-offer-details span{display:flex;align-items:center;gap:4px}

/* ============ Utility ============ */
.flex{display:flex}.grid{display:grid}.wrap{flex-wrap:wrap}.between{justify-content:space-between}.center{align-items:center}
.gap4{gap:4px}.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}
.muted{color:var(--c-text-2)}.tiny{font-size:12px;color:var(--c-text-3)}
.text-center{text-align:center}
.money{font-family:var(--font-display);font-weight:800}

/* ============ Text overflow fixes ============ */
.hero h1,.hero p,.hero-eyebrow{word-wrap:break-word;overflow-wrap:break-word}
.section-title,.section-sub{word-wrap:break-word;overflow-wrap:break-word;max-width:100%}
.pc-name{-webkit-line-clamp:2;line-clamp:2;line-height:1.4}
.cl-name{max-width:100%}
.addr-card b,.addr-card .tiny{word-wrap:break-word;overflow-wrap:break-word}
.ck-card h3{word-wrap:break-word;overflow-wrap:break-word}
.bp-hero h2,.bp-hero p,.bp-banner h3,.bp-newsletter h3{word-wrap:break-word;overflow-wrap:break-word;max-width:100%}
.footer-brand p{word-wrap:break-word;overflow-wrap:break-word}
.topbar-text{word-wrap:break-word;overflow-wrap:break-word}

/* ============ WhatsApp / Phone Contact Widget ============ */
.contact-fab{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.contact-fab-menu{display:grid;gap:8px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.9);transition:.25s var(--ease);pointer-events:none}
.contact-fab-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
.contact-fab-item{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-weight:700;font-size:13.5px;box-shadow:var(--shadow);cursor:pointer;transition:.2s;white-space:nowrap;text-decoration:none}
.contact-fab-item:hover{transform:translateX(-4px);box-shadow:var(--shadow-lg)}
.contact-fab-item.whatsapp{background:#25d366;color:#fff}
.contact-fab-item.phone{background:var(--c-primary);color:#fff}
.contact-fab-item.whatsapp:hover{background:#1da851}
.contact-fab-item.phone:hover{background:var(--c-primary-2)}
.contact-fab-item .fab-ico{font-size:18px}
.contact-fab-main{width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;font-size:24px;display:grid;place-items:center;box-shadow:0 6px 24px color-mix(in srgb,var(--c-primary) 45%,transparent);cursor:pointer;transition:.3s var(--ease);border:none}
.contact-fab-main:hover{transform:scale(1.1);box-shadow:0 8px 30px color-mix(in srgb,var(--c-primary) 55%,transparent)}
.contact-fab-main.active{transform:rotate(45deg)}

/* ============ Admin & Customizer Enhanced Styles ============ */
.admin-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:16px}
.admin-toolbar-left{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1}
.admin-toolbar-right{display:flex;gap:8px;align-items:center}
.admin-badge-stock{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700}
.admin-badge-stock.instock{background:color-mix(in srgb,var(--c-green) 12%,transparent);color:var(--c-green)}
.admin-badge-stock.lowstock{background:color-mix(in srgb,var(--c-amber) 15%,transparent);color:var(--c-amber)}
.admin-badge-stock.outofstock{background:color-mix(in srgb,var(--c-red) 12%,transparent);color:var(--c-red)}

.modal{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:24px 28px;max-width:min(720px,94vw);width:100%;max-height:90vh;overflow-y:auto;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:300}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--c-border)}
.modal-head h3{font-size:18px;font-family:var(--font-display)}

.admin-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.admin-form-grid{grid-template-columns:1fr}}
.admin-form-full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label{font-size:13px;font-weight:600;color:var(--c-text-2)}
.field .input,.field select,.field textarea{width:100%;padding:10px 14px;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);background:var(--c-surface-2);color:var(--c-text);outline:none;transition:.2s}
.field .input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-primary);background:var(--c-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 15%,transparent)}

.img-preview-box{width:80px;height:80px;border-radius:10px;border:1.5px dashed var(--c-border);display:grid;place-items:center;overflow:hidden;background:var(--c-surface-2);flex-shrink:0}
.img-preview-box img{width:100%;height:100%;object-fit:cover}

.banner-edit-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.banner-edit-card h4{font-family:var(--font-display);font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.banner-preview-box{margin-top:12px;padding:24px;border-radius:var(--radius-sm);color:#fff;background:linear-gradient(135deg,#1a1040,#0f1220)}

.cat-edit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px}
.cat-edit-card{background:var(--c-surface-2);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:14px;display:flex;flex-direction:column;gap:8px}
.cat-edit-card .thumb{width:100%;height:100px;border-radius:8px;object-fit:cover;background:#000}

.popup-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:22px;margin-bottom:18px}
.popup-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.popup-card-head h4{font-family:var(--font-display);font-size:16px}


/* ============ Mobile App Bottom Navigation Bar ============ */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:64px;background:var(--c-surface);border-top:1px solid var(--c-border);z-index:250;box-shadow:0 -4px 20px rgba(0,0,0,.08);padding:6px 12px;justify-content:space-around;align-items:center}
[data-theme="dark"] .mobile-bottom-nav{background:rgba(18,22,31,.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -4px 20px rgba(0,0,0,.4)}
.mbn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--c-text-2);text-decoration:none;font-size:11px;font-weight:600;gap:2px;cursor:pointer;flex:1;height:100%;transition:.2s}
.mbn-item.active{color:var(--c-primary)}
.mbn-ico{font-size:19px;line-height:1}
.mbn-label{font-size:10.5px}
.mbn-add-btn{width:50px;height:50px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;margin-top:-20px;box-shadow:0 6px 20px color-mix(in srgb,var(--c-primary) 50%,transparent);border:3px solid var(--c-surface);flex:0 0 50px}
.mbn-add-btn:active{transform:scale(.94)}
.mbn-ico-plus{font-size:20px;line-height:1}

/* Mobile Order Card Enhancements */
.order-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);padding:16px;margin-bottom:12px;transition:.2s}
.order-card:hover{border-color:color-mix(in srgb,var(--c-primary) 40%,transparent)}
.order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.order-id{font-family:var(--font-display);font-weight:700;font-size:15px}
.order-date{font-size:12px;color:var(--c-text-2)}
.order-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--c-border);padding-top:12px;margin-top:12px;flex-wrap:wrap}
.mobile-order-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn-whatsapp{background:#25d366!important;color:#fff!important;border:none!important;font-weight:700}
.btn-whatsapp:hover{background:#1da851!important}
.btn-phone{background:var(--c-primary)!important;color:#fff!important;border:none!important;font-weight:700}

/* ============ Responsive Breakpoints for All Devices ============ */
html,body,#page,.site-wrapper{max-width:100vw;overflow-x:hidden}
img,picture,video,iframe,svg,canvas{max-width:100%!important;height:auto!important;box-sizing:border-box!important}
/* Fullscreen image viewer — override global img constraints */
#novaImgFS{touch-action:none}
#novaImgFS img{max-width:100vw!important;max-height:100vh!important;width:auto!important;height:auto!important;object-fit:contain!important;border-radius:0!important;display:block!important}


@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .shop-layout,.checkout-layout{grid-template-columns:1fr}
  .shop-sidebar{position:static;max-height:none;display:none}
  .shop-sidebar.show{display:block}
  .mobile-filter-btn{display:inline-flex}
  .support-layout{grid-template-columns:1fr}
}
@media (max-width:920px){
  .container{padding-inline:16px}
  .header-main{display:grid!important;grid-template-columns:44px 1fr 80px!important;align-items:center!important;gap:8px!important;padding:8px 0!important}
  .menu-btn{grid-column:1!important;justify-self:start!important;margin:0!important;display:grid!important;place-items:center!important}
  .logo{grid-column:2!important;justify-self:center!important;text-align:center!important;display:flex!important;justify-content:center!important;align-items:center!important;margin:0 auto!important}
  .logo img{max-height:38px!important;width:auto!important;object-fit:contain!important}
  .header-actions{grid-column:3!important;justify-self:end!important;display:flex!important;gap:8px!important;align-items:center!important}
  .search-bar{grid-column:1/-1!important;width:100%!important;margin-top:4px!important}
  .pd-layout,.account-layout,.cart-layout,.checkout-layout,.shop-layout,.support-layout{grid-template-columns:1fr!important}
  .account-sidebar{position:static}
  .rev-summary{grid-template-columns:1fr}
  .hero{padding:36px 20px}
  .mobile-bottom-nav{display:flex}
  body{padding-bottom:0!important}
  .site-footer{padding-bottom:calc(22px + 70px)}
  .product-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}
  .global-size-selector,#globalSizeSelector{display:none!important}
}
body.single-product .search-bar,body.single-product #searchForm,body.page-single-product .search-bar,body.page-single-product #searchForm,.single-product .search-bar,.single-product #searchForm{display:none!important}
body.single-product .main-nav,body.page-single-product .main-nav,.single-product .main-nav{display:none!important}
#contactFab,.contact-fab,#contactFabBtn,.contact-fab-main,#novaMultiFab,.nova-floating-support,.fab-icon-open,.fab-icon-close{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media (max-width:768px){
  .hero-slide-img,.nl-hero-image,.pd-gallery img,.fl-gallery img,.card-img,.product-card img{max-width:100%!important;height:auto!important;border-radius:8px}
  .nl-two-col{grid-template-columns:1fr!important;gap:16px!important}
  .nl-features-grid{grid-template-columns:1fr!important;gap:14px!important}
  .nl-main-heading{font-size:24px!important;line-height:1.3!important;padding:8px!important}
  .nl-sub-heading,.nl-section-title{font-size:19px!important}
  .nl-btn{font-size:18px!important;padding:12px 20px!important;width:100%!important;text-align:center!important}
  /* Mobile Gallery: Horizontal Thumbnails Strip on TOP, Main Image BELOW - Exactly as in Image 1 */
  .pd-gallery{display:flex!important;flex-direction:column!important;gap:12px!important;position:static!important;width:100%!important}
  .pd-thumbs{order:1!important;display:flex!important;flex-direction:row!important;justify-content:flex-start!important;align-items:center!important;gap:10px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px 2px 8px 2px!important;margin:0!important;max-height:none!important;width:100%!important;scrollbar-width:none!important;-ms-overflow-style:none!important;-webkit-overflow-scrolling:touch!important}
  .pd-thumbs::-webkit-scrollbar{display:none!important}
  .pd-thumb{width:68px!important;height:68px!important;flex-shrink:0!important;border-radius:12px!important;border:2px solid var(--c-border,#e2e8f0)!important;background:#ffffff!important;padding:0!important;overflow:hidden!important;cursor:pointer!important;transition:all .2s cubic-bezier(0.16,1,0.3,1)!important;box-shadow:0 1px 3px rgba(0,0,0,0.05)!important}
  .pd-thumb:hover{border-color:var(--c-primary,#6d5ef0)!important}
  .pd-thumb.active{border:2.5px solid var(--c-primary,#6d5ef0)!important;transform:scale(1.04)!important;box-shadow:0 4px 12px rgba(109,94,240,0.28)!important}
  .pd-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:10px!important;display:block!important}
  .pd-main{order:2!important;width:100%!important;max-width:100%!important;aspect-ratio:1/1!important;border-radius:18px!important;overflow:hidden!important;background:#ffffff!important;border:1px solid var(--c-border,#e2e8f0)!important;box-shadow:0 4px 20px rgba(0,0,0,0.04)!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .pd-main img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:18px!important;display:block!important}
  .pd-main-badge{position:absolute!important;top:12px!important;left:12px!important;z-index:5!important;display:flex!important;flex-direction:column!important;gap:6px!important;align-items:flex-start!important;max-width:fit-content!important;pointer-events:none!important}
  .pd-zoom{position:absolute!important;bottom:12px!important;right:12px!important;width:40px!important;height:40px!important;border-radius:50%!important;background:rgba(255,255,255,0.95)!important;backdrop-filter:blur(8px)!important;display:grid!important;place-items:center!important;box-shadow:0 4px 14px rgba(0,0,0,0.12)!important;border:1px solid rgba(0,0,0,0.08)!important;font-size:16px!important;z-index:6!important;cursor:pointer!important}
}
#cookieConsentBar,.cookie-consent-bar,.wt-cli-cookie-bar,#cookie-law-info-again,.cc-revoke,.cookie-notice-container,.cookie-notice-button,[class*="cookie-consent"],[id*="cookie-consent"],[class*="cli-cookie"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
@media (max-width:640px){
  .container{padding-inline:12px}
  .topbar-nav a:not(.theme-toggle){display:none}
  .cart-layout{grid-template-columns:1fr}
  .summary-card,.ck-total-card{position:static}
  .pd-actions{grid-template-columns:1fr 1fr;gap:8px}
  .pd-actions .qty-stepper{grid-column:1/-1}
  .trust-grid{grid-template-columns:1fr}
  .product-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .modal{padding:16px;max-height:88vh;width:94vw!important}
  .footer-grid{grid-template-columns:1fr}
  .rev-big .num{font-size:38px}
  .compare-bar{width:94vw}
  .mobile-sticky-buy{display:block}
  .mobile-sticky-buy-inner{padding:8px 12px!important;gap:8px!important}
  .mobile-sticky-buy .msb-title{max-width:110px!important;font-size:12px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
}
@media (max-width:360px){
  .container{padding-inline:8px}
  .product-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .pd-actions{grid-template-columns:1fr!important}
  .logo-text{font-size:15px!important}
}

/* ============ Product Draft System Styles ============ */
.draft-table-row{
  background:color-mix(in srgb,var(--c-amber) 6%,transparent)!important;
  border-left:3px dashed var(--c-amber);
}
.draft-recovery-alert{
  background:color-mix(in srgb,var(--c-amber) 12%,var(--c-surface));
  border:1.5px solid color-mix(in srgb,var(--c-amber) 45%,var(--c-border));
  border-radius:var(--radius-sm);
  padding:12px 16px;
  margin-bottom:12px;
}
.draft-preview-banner{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border:1.5px solid #f59e0b;
  color:#78350f;
  border-radius:var(--radius-sm);
  padding:14px 18px;
  box-shadow:0 4px 14px rgba(245,158,11,.15);
}
[data-theme="dark"] .draft-preview-banner{
  background:linear-gradient(135deg,#451a03,#78350f);
  border-color:#d97706;
  color:#fef3c7;
}
[data-theme="dark"] .draft-preview-banner div{
  color:#fef3c7!important;
}
.btn-green{
  background:linear-gradient(135deg,#16a34a,#15803d)!important;
  color:#fff!important;
  border:none!important;
  font-weight:600;
  box-shadow:0 2px 8px rgba(22,163,74,.3);
  transition:.2s;
}
.btn-green:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}
.btn-amber{
  background:linear-gradient(135deg,#f59e0b,#d97706)!important;
  color:#fff!important;
  border:none!important;
  font-weight:600;
  box-shadow:0 2px 8px rgba(245,158,11,.25);
  transition:.2s;
}
.btn-amber:hover{
  filter:brightness(1.1);
  transform:translateY(-1px);
}
.btn-xs{
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
}
#prodStatusTabs .btn{
  border:1px solid var(--c-border);
  border-radius:999px;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  background:var(--c-surface);
  transition:.2s;
}
#prodStatusTabs .btn:hover{
  border-color:var(--c-primary);
}
#prodStatusTabs .btn.active{
  background:var(--c-primary);
  color:#fff;
  border-color:var(--c-primary);
}
#prodStatusTabs .btn.active .badge-pill{
  background:rgba(255,255,255,.25);
  color:#fff;
}

/* ============ Brand Logo Image Styling ============ */
.brand-logo-img{
  max-height: 42px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
  border-radius: 6px;
  transition: transform .25s ease;
}
.brand-logo-img:hover{
  transform: scale(1.03);
}
.footer-logo-img{
  max-height: 44px;
  max-width: 200px;
  margin-bottom: 6px;
}
.footer-brand .logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* ============ Cookie Consent Banner (GDPR Sleek Floating Bar) ============ */
.cookie-consent-bar{
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  max-width: 820px;
  margin: 0 auto;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.94);
  color: #f8fafc;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  padding: 16px 22px;
  box-shadow: 0 20px 48px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: slideUpCookie .4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-theme="light"] .cookie-consent-bar{
  background: rgba(255, 255, 255, 0.96);
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 20px 48px -10px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.cookie-consent-hiding{
  animation: slideDownCookie .35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
@keyframes slideUpCookie{
  from{ opacity: 0; transform: translateY(30px) scale(0.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideDownCookie{
  from{ opacity: 1; transform: translateY(0) scale(1); }
  to{ opacity: 0; transform: translateY(30px) scale(0.97); }
}
.cookie-consent-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.cookie-consent-icon{
  font-size: 28px;
  flex-shrink: 0;
  animation: floaty 4s ease-in-out infinite;
}
.cookie-consent-text{
  flex: 1;
  min-width: 240px;
}
.cookie-consent-text b{
  font-size: 14.5px;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.cookie-consent-text p{
  font-size: 13px;
  line-height: 1.45;
  color: inherit;
  opacity: 0.88;
}
.cookie-consent-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-consent-actions .btn{
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 10px;
}

/* ============ Category Manager Admin Cards ============ */
.cat-manager-card{
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-manager-card:hover{
  border-color: var(--c-primary) !important;
  box-shadow: var(--shadow-sm);
}



/* ============ Modern Fashion App Landing Page (Go Colors Style) ============ */

        :root {
            --fl-primary: #111827;
            --fl-accent: #e11d48;
            --fl-accent-light: #ffe4e6;
            --fl-accent-pink: #ec4899;
            --fl-gold: #f59e0b;
            --fl-success: #10b981;
            --fl-bg-light: #faf9f7;
            --fl-card-bg: #ffffff;
            --fl-border: #e5e7eb;
            --fl-text-dark: #1f2937;
            --fl-text-muted: #6b7280;
            --fl-radius: 12px;
            --fl-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.06);
            --fl-shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.12);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            background: #eef1f5;
            color: var(--fl-text-dark);
            line-height: 1.5;
            padding-bottom: 90px;
            -webkit-font-smoothing: antialiased;
        }

        .fl-container {
            max-width: 480px;
            margin: 0 auto;
            background: #ffffff;
            min-height: 100vh;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
            position: relative;
        }

        /* Top Promo Banner */
        .fl-top-banner {
            background: linear-gradient(90deg, #fff7ed 0%, #ffedd5 100%);
            border-bottom: 1px solid #fed7aa;
            padding: 10px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            font-weight: 600;
            color: #9a3412;
            position: relative;
            z-index: 40;
        }
        .fl-top-banner-text { display: flex; align-items: center; gap: 6px; }
        .fl-top-banner-btn {
            background: #ea580c;
            color: #fff;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            text-decoration: none;
            white-space: nowrap;
        }
        .fl-top-banner-close {
            background: none;
            border: none;
            font-size: 18px;
            color: #9a3412;
            cursor: pointer;
            margin-left: 8px;
            line-height: 1;
        }

        /* App Header */
        .fl-header {
            position: sticky;
            top: 0;
            z-index: 30;
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--fl-border);
        }
        .fl-header-left { display: flex; align-items: center; gap: 12px; overflow: hidden; }
        .fl-back-btn {
            background: none;
            border: none;
            font-size: 20px;
            color: #111;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
        }
        .fl-header-title {
            font-size: 15px;
            font-weight: 700;
            color: #111;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Outfit', sans-serif;
        }
        .fl-header-actions { display: flex; align-items: center; gap: 6px; }
        .fl-icon-btn {
            background: none;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #374151;
            cursor: pointer;
        }

        /* Gallery */
        .fl-gallery-wrapper {
            position: relative;
            width: 100%;
            background: #f4f4f6;
            overflow: hidden;
            user-select: none;
        }
        .fl-gallery-slider { display: flex; transition: transform 0.35s ease; width: 100%; }
        .fl-gallery-slide {
            min-width: 100%;
            position: relative;
            aspect-ratio: 3 / 4;
            max-height: 520px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e9ecef;
        }
        .fl-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .fl-badge-trending {
            position: absolute;
            top: 14px;
            left: 14px;
            background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
            color: #fff;
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 4px;
            box-shadow: 0 4px 10px rgba(225, 29, 72, 0.35);
            z-index: 5;
        }
        .fl-gallery-controls {
            position: absolute;
            top: 14px;
            right: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 5;
        }
        .fl-badge-tryon {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(4px);
            color: #111827;
            border: 1px solid rgba(0, 0, 0, 0.08);
            font-size: 11.5px;
            font-weight: 700;
            padding: 6px 12px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }
        .fl-badge-zoom {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.08);
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            cursor: pointer;
            align-self: flex-end;
        }
        .fl-gallery-dots {
            position: absolute;
            bottom: 12px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 5px;
            z-index: 5;
            padding: 0 20px;
        }
        .fl-dot {
            height: 3px;
            flex: 1;
            max-width: 40px;
            background: rgba(255, 255, 255, 0.45);
            border-radius: 2px;
            cursor: pointer;
        }
        .fl-dot.active { background: #ffffff; }

        /* Product Info */
        .fl-product-info { padding: 16px; background: #fff; border-bottom: 1px solid var(--fl-border); }
        .fl-product-name {
            font-family: 'Outfit', sans-serif;
            font-size: 19px;
            font-weight: 700;
            color: #111827;
            line-height: 1.3;
        }
        .fl-variant-subtitle { font-size: 13px; font-weight: 600; color: #4b5563; margin-top: 4px; }
        .fl-rating-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; font-weight: 600; }
        .fl-stars { color: #f59e0b; font-size: 14px; letter-spacing: 1px; }
        .fl-price-box { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
        .fl-current-price { font-family: 'Outfit', sans-serif; font-size: 24px; font-weight: 800; color: #111827; }
        .fl-original-price { font-size: 15px; color: #9ca3af; text-decoration: line-through; }
        .fl-discount-tag {
            background: #ecfdf5;
            color: #059669;
            font-size: 11.5px;
            font-weight: 700;
            padding: 2px 7px;
            border-radius: 4px;
            border: 1px solid #a7f3d0;
        }

        /* Rewards Box */
        .fl-rewards-card {
            margin: 14px 14px 0;
            background: linear-gradient(135deg, #1e1e24 0%, #2a2b36 100%);
            border-radius: var(--fl-radius);
            padding: 14px;
            color: #ffffff;
            box-shadow: var(--fl-shadow);
        }
        .fl-rewards-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 13.5px;
            font-weight: 800;
            color: #f3f4f6;
            margin-bottom: 6px;
            font-family: 'Outfit', sans-serif;
        }
        .fl-rewards-badge {
            background: linear-gradient(90deg, #ec4899, #f43f5e);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10.5px;
            font-weight: 800;
        }
        .fl-rewards-desc { font-size: 12.5px; color: #d1d5db; line-height: 1.4; margin-bottom: 12px; }
        .fl-rewards-btn {
            width: 100%;
            padding: 11px;
            background: #ffffff;
            color: #111827;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 800;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        /* Swatches */
        .fl-section-box { padding: 16px; border-bottom: 1px solid var(--fl-border); }
        .fl-swatches-grid { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
        .fl-swatches-grid::-webkit-scrollbar { display: none; }
        .fl-color-swatch {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            flex-shrink: 0;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #d1d5db;
        }
        .fl-color-swatch.active { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #111827; transform: scale(1.08); }
        .fl-color-swatch .fl-swatch-check { display: none; font-size: 13px; color: #fff; }
        .fl-color-swatch.active .fl-swatch-check { display: block; }
        .fl-color-swatch.light-color .fl-swatch-check { color: #111; }

        /* Similar Shades */
        .fl-similar-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
        .fl-similar-scroll::-webkit-scrollbar { display: none; }
        .fl-similar-card {
            min-width: 86px;
            flex-shrink: 0;
            cursor: pointer;
            text-align: center;
            border-radius: 8px;
            padding: 5px;
            border: 1.5px solid transparent;
            background: #fafafa;
        }
        .fl-similar-card.active, .fl-similar-card:hover { border-color: #111827; background: #fff; }
        .fl-similar-img-box { width: 100%; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #e5e7eb; margin-bottom: 4px; }
        .fl-similar-img-box img { width: 100%; height: 100%; object-fit: cover; }
        .fl-similar-name { font-size: 10.5px; font-weight: 600; color: #374151; }

        /* Sizes */
        .fl-sizes-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
        .fl-size-chip {
            min-width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid #d1d5db;
            background: #ffffff;
            color: #111827;
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-family: 'Outfit', sans-serif;
        }
        .fl-size-chip.active { background: #111827; color: #ffffff; border-color: #111827; }

        .fl-fit-finder-bar {
            background: linear-gradient(90deg, #2d2640 0%, #473c66 100%);
            border-radius: 10px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #ffffff;
            cursor: pointer;
        }

        /* Pincode & Trust */
        .fl-serviceability-card {
            background: #fdfdfd;
            border: 1px solid #e5e7eb;
            border-radius: var(--fl-radius);
            padding: 14px;
            margin-top: 10px;
        }
        .fl-pincode-form { display: flex; gap: 8px; }
        .fl-pincode-input { flex: 1; padding: 10px 12px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 13.5px; outline: none; }
        .fl-pincode-btn { padding: 0 16px; background: #111827; color: #ffffff; border: none; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
        .fl-service-result { font-size: 12px; margin-top: 8px; font-weight: 600; }
        .fl-service-result.success { color: #059669; }
        .fl-service-result.error { color: #e11d48; }

        .fl-trust-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 14px;
            background: #ffffff;
            border-bottom: 1px solid var(--fl-border);
        }
        .fl-trust-item { text-align: center; padding: 8px 4px; background: #fafafa; border-radius: 8px; border: 1px solid #f3f4f6; }
        .fl-trust-icon-box {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin: 0 auto 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .fl-trust-label { font-size: 11.5px; font-weight: 700; color: #1f2937; }

        /* Accordions */
        .fl-accordions-group { padding: 4px 16px; background: #ffffff; border-bottom: 1px solid var(--fl-border); }
        .fl-accordion-item { border-bottom: 1px solid #f3f4f6; }
        .fl-accordion-header { padding: 14px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; font-weight: 700; }
        .fl-accordion-body { display: none; padding-bottom: 14px; font-size: 13px; color: #4b5563; line-height: 1.5; }
        .fl-accordion-item.open .fl-accordion-body { display: block; }

        .fl-spec-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 8px; }
        .fl-spec-cell { border-bottom: 1px solid #f3f4f6; padding-bottom: 6px; }
        .fl-spec-lbl { font-size: 11px; color: #9ca3af; font-weight: 600; margin-bottom: 2px; }
        .fl-spec-val { font-size: 12.5px; color: #1f2937; font-weight: 600; line-height: 1.3; }
        .fl-spec-cell-full { grid-column: span 2; border-bottom: 1px solid #f3f4f6; padding-bottom: 6px; }

        .fl-wash-icons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; text-align: center; margin-top: 10px; }
        .fl-wash-item { display: flex; flex-direction: column; align-items: center; }
        .fl-wash-circle {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1.5px solid #d1d5db;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #374151;
            margin-bottom: 4px;
            background: #ffffff;
        }
        .fl-wash-name { font-size: 10px; font-weight: 600; color: #4b5563; }

        /* Reviews Rating Breakdown Component */
        .fl-reviews-breakdown-card {
            background: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            padding: 16px;
            margin-top: 6px;
        }
        .fl-rb-score-box { text-align: center; margin-bottom: 14px; }
        .fl-rb-score-title { font-family: 'Outfit', sans-serif; font-size: 19px; font-weight: 800; color: #111827; }
        .fl-rb-stars-big { color: #f59e0b; font-size: 18px; letter-spacing: 2px; margin-top: 4px; }
        .fl-rb-score-text { font-size: 13.5px; font-weight: 700; color: #1f2937; margin-top: 2px; }
        .fl-rb-count-note { font-size: 12px; color: #6b7280; margin-top: 2px; }

        .fl-rb-bars-list { display: flex; flex-direction: column; gap: 7px; max-width: 290px; margin: 0 auto 14px; }
        .fl-rb-bar-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
        .fl-rb-bar-stars { color: #f59e0b; min-width: 65px; font-size: 11px; }
        .fl-rb-bar-track { flex: 1; height: 11px; background: #f3f4f6; border-radius: 6px; overflow: hidden; }
        .fl-rb-bar-fill { height: 100%; background: #4b5563; border-radius: 6px; }
        .fl-rb-bar-num { min-width: 25px; text-align: right; font-weight: 600; color: #4b5563; font-size: 11px; }

        .fl-write-review-btn {
            width: 100%;
            max-width: 280px;
            margin: 0 auto 16px;
            display: block;
            padding: 11px;
            background: #4b5563;
            color: #ffffff;
            border: none;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
        }

        .fl-transparency-badge { border-top: 1px solid #f3f4f6; padding-top: 12px; text-align: center; }
        .fl-trans-icon-box {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px solid #d97706;
            margin: 0 auto 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #fffbeb;
        }
        .fl-trans-title { font-size: 7.5px; font-weight: 800; color: #b45309; text-transform: uppercase; line-height: 1.1; }
        .fl-trans-score { font-size: 13.5px; font-weight: 800; color: #b45309; }
        .fl-trans-verified { font-size: 11.5px; font-weight: 700; color: #059669; text-decoration: underline; margin-top: 2px; }

        /* Order Form */
        .fl-order-form-section { padding: 20px 14px; background: #fafafa; border-bottom: 1px solid var(--fl-border); }
        .fl-order-card {
            background: #ffffff;
            border: 2px solid #111827;
            border-radius: 14px;
            padding: 18px 14px;
            box-shadow: var(--fl-shadow-lg);
        }
        .fl-order-title { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800; text-align: center; }
        .fl-order-summary-box {
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 10px;
            margin: 12px 0;
            font-size: 13px;
        }
        .fl-form-field { margin-bottom: 12px; }
        .fl-form-label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
        .fl-form-input, .fl-form-textarea {
            width: 100%;
            padding: 11px 12px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            font-size: 13.5px;
            font-family: inherit;
        }
        .fl-submit-order-btn {
            width: 100%;
            padding: 15px;
            background: #111827;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 800;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
        }

        /* Style Edit */
        .fl-style-edit-section { padding: 20px 16px; background: #ffffff; border-bottom: 1px solid var(--fl-border); }
        .fl-style-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .fl-style-title { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 800; }
        .fl-style-scroll-track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
        .fl-style-scroll-track::-webkit-scrollbar { display: none; }
        .fl-style-card { min-width: 175px; flex-shrink: 0; background: #fafafa; border-radius: 10px; overflow: hidden; border: 1px solid #e5e7eb; cursor: pointer; }
        .fl-style-img-wrap { width: 100%; aspect-ratio: 3 / 4; position: relative; }
        .fl-style-img-wrap img { width: 100%; height: 100%; object-fit: cover; }

        /* Brand Footer */
        .fl-shop-categories-block { background: #111827; color: #ffffff; padding: 18px 16px; }
        .fl-brand-footer { background: #ffffff; padding: 20px 16px 24px; }

        /* Sticky Bottom Bar */
        .fl-sticky-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 50;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border-top: 1px solid var(--fl-border);
            box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
        }
        .fl-sticky-inner {
            max-width: 480px;
            margin: 0 auto;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .fl-qty-selector { display: flex; align-items: center; border: 1.5px solid #d1d5db; border-radius: 8px; height: 44px; }
        .fl-qty-btn { width: 32px; height: 100%; background: none; border: none; font-size: 16px; font-weight: 700; cursor: pointer; }
        .fl-qty-input { width: 28px; text-align: center; border: none; font-size: 14px; font-weight: 700; outline: none; }
        .fl-sticky-add-btn {
            flex: 1;
            height: 44px;
            background: #111827;
            color: #ffffff;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 800;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
        }

        /* Bottom Nav */
        .fl-app-nav-bar { display: flex; align-items: center; justify-content: space-around; padding: 6px 0 4px; background: #ffffff; border-top: 1px solid #f3f4f6; }
        .fl-nav-tab { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #6b7280; font-size: 10px; font-weight: 600; gap: 2px; }
        .fl-nav-tab.active { color: #111827; }

        /* Modals */
        .fl-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.65);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        .fl-modal-card {
            background: #ffffff;
            border-radius: 16px;
            width: 100%;
            max-width: 440px;
            padding: 20px;
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }
        .fl-modal-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: #f3f4f6;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }
        .fl-toast {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(-30px);
            background: #111827;
            color: #ffffff;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 12.5px;
            font-weight: 600;
            z-index: 99999;
            opacity: 0;
            transition: all 0.3s;
            pointer-events: none;
        }
        .fl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════
   FASHION & PRODUCT LANDING PAGE SYSTEM
   ═══════════════════════════════════════════════════════ */









/* ═══════════════════════════════════════════════════════════════
   MODERN RESPONSIVE FASHION & PRODUCT LANDING PAGE SYSTEM
   ═══════════════════════════════════════════════════════════════ */
.fashion-landing-root {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 1. Top Promo Banner - Ultra-Sleek Luxury Aesthetic */
.fl-top-banner {
  background: linear-gradient(135deg, #090d16 0%, #1e1b4b 55%, #172554 100%);
  color: #ffffff;
  padding: 8px 36px 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 12px;
  font-weight: 600;
  z-index: 100;
  width: 100%;
  min-height: 38px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.15px;
}

.fl-top-banner-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}

.fl-top-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
}

.fl-top-banner-text {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
}

.fl-top-banner-btn {
  background: #ffffff;
  color: #0f172a;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.fl-top-banner-btn:hover {
  background: #f8fafc;
  color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.fl-top-banner-btn svg {
  transition: transform 0.2s ease;
}

.fl-top-banner-btn:hover svg {
  transform: translateX(2px);
}

.fl-top-banner-close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
  line-height: 1;
}

.fl-top-banner-close:hover {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

/* 2. Main Header - Boutique Luxury Aesthetic */
.fl-main-header {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #eef2f6;
  position: sticky;
  top: 0;
  z-index: 99;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
  width: 100%;
  box-sizing: border-box;
}

.fl-header-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
}

.fl-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 40px;
}

.fl-nav-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  cursor: pointer;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.fl-nav-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.fl-back-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #475569;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.fl-back-home-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #4f46e5;
}

.fl-header-center {
  flex: 1 1 auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 6px;
}

.fl-brand-logo-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.fl-brand-text {
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  display: inline-block;
  line-height: 1.25;
}

.fl-brand-img {
  max-height: 34px;
  max-width: 160px;
  object-fit: contain;
}

.fl-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 84px;
}

.fl-header-icon-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.fl-header-icon-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #0f172a;
}

.fl-cart-icon-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  border: 1px solid #4338ca;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}

.fl-cart-icon-btn:hover {
  background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%);
  border-color: #3730a3;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.38);
}

.fl-badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e11d48;
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
}

/* 3. Side Drawer Menu */
.fl-drawer-overlay {
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999998 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: block;
}
.fl-drawer-overlay.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.fl-side-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 290px;
  max-width: 82vw;
  height: 100%;
  height: 100vh;
  min-height: 100vh;
  background: #ffffff;
  z-index: 999999 !important;
  transform: translateX(-105%);
  -webkit-transform: translateX(-105%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.3s ease;
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

@supports (height: 100dvh) {
  .fl-side-drawer {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.fl-side-drawer.open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure Drawer Works Seamlessly Inside Builder Canvas Preview */
.lp-in-builder .fl-drawer-overlay {
  position: absolute !important;
  z-index: 98 !important;
}
.lp-in-builder .fl-side-drawer {
  position: absolute !important;
  z-index: 99 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 85% !important;
}
.fl-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl-drawer-title { font-weight: 900; font-size: 16px; color: #0f172a; }
.fl-drawer-close { background: none; border: none; font-size: 24px; color: #64748b; cursor: pointer; }
.fl-drawer-body { padding: 16px; overflow-y: auto; }
.fl-drawer-nav { display: flex; flex-direction: column; gap: 6px; }
.fl-drawer-link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13.5px;
  color: #334155;
  text-decoration: none;
}
.fl-drawer-link:hover { background: #f1f5f9; color: #4f46e5; }

/* 4. Responsive Main Layout */
.fl-main-layout {
  padding: 16px 12px 70px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.fl-main-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* DESKTOP 2-COLUMN (Only when container or viewport is wide enough AND not in mobile builder preview) */
@media (min-width: 900px) {
  body:not(.is-mobile-view) .fashion-landing-root:not(.is-builder-preview) .fl-main-container,
  .lp-frame-desktop .fl-main-container {
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
  }
}

/* STRICT 1-COLUMN FOR BUILDER MOBILE/TABLET PREVIEWS */
.lp-frame-mobile .fl-main-container,
.lp-frame-tablet .fl-main-container,
.lp-frame-mobile .fashion-landing-root,
.lp-frame-tablet .fashion-landing-root {
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 100% !important;
}

.lp-frame-mobile .fl-left-col,
.lp-frame-mobile .fl-right-col,
.lp-frame-tablet .fl-left-col,
.lp-frame-tablet .fl-right-col {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Left Column: Gallery */
.fl-left-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.fl-gallery-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
  width: 100%;
  box-sizing: border-box;
}
.fl-hero-img-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #f1f5f9;
  aspect-ratio: 1/1;
  width: 100%;
  box-sizing: border-box;
  cursor: zoom-in;
}
.fl-badge-trending {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e11d48;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
  z-index: 2;
}
.fl-zoom-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 2;
}
.fl-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fl-thumb-strip {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.fl-thumb-btn {
  flex: 0 0 60px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: #f1f5f9;
}
.fl-thumb-btn.active { border-color: #4f46e5; }
.fl-thumb-btn img { width: 100%; height: 100%; object-fit: cover; }

/* Spotlight boxes */
.fl-spotlight-box {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}
.fl-spotlight-item { display: flex; align-items: center; gap: 8px; }
.fl-spot-icon { font-size: 20px; }
.fl-spot-title { font-size: 12px; font-weight: 800; color: #0f172a; }
.fl-spot-sub { font-size: 11px; color: #64748b; }

/* Right Column: Product details & Buy Box */
.fl-right-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}
.fl-prod-title {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 6px;
}
.fl-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.fl-stars { color: #f59e0b; font-size: 14px; }
.fl-rating-num { font-weight: 800; font-size: 13px; color: #0f172a; }
.fl-review-count { font-size: 12px; color: #64748b; }

/* Pricing Card */
.fl-pricing-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 14px 16px;
  width: 100%;
  box-sizing: border-box;
}
.fl-price-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fl-sale-price {
  font-family: 'Outfit', 'Plus Jakarta Sans', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #4f46e5;
}
.fl-reg-price {
  font-size: 16px;
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 600;
}
.fl-discount-badge {
  background: #ec4899;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 5px;
}
.fl-vat-note { font-size: 11.5px; color: #64748b; margin-top: 2px; }

/* Options */
.fl-option-section { display: flex; flex-direction: column; gap: 8px; }
.fl-option-header { display: flex; justify-content: space-between; font-size: 13px; }
.fl-opt-label { font-weight: 700; color: #334155; }
.fl-opt-selected { font-weight: 800; color: #4f46e5; }

/* Color Swatches */
.fl-swatch-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-swatch-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  transition: all .2s;
}
.fl-swatch-item.active {
  border-color: #4f46e5;
  background: #eef2ff;
  color: #4f46e5;
}
.fl-swatch-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.1); }

/* Sizes */
.fl-size-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fl-size-btn {
  min-width: 42px;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.fl-size-btn.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #ffffff;
}
.fl-size-btn.disabled {
  background: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
  border-style: dashed;
}
.fl-out-tag { font-size: 8px; font-weight: 800; color: #ef4444; }

/* Quantity */
.fl-qty-section {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.fl-qty-selector {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
}
.fl-qty-btn {
  width: 34px;
  height: 34px;
  background: #f8fafc;
  border: none;
  font-size: 16px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
}
.fl-qty-selector input {
  width: 38px;
  text-align: center;
  border: none;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

/* Multi-Buy Quantity Offers Card */
.fl-qoffers-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1.5px solid #86efac;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.08);
}
.fl-qoffers-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.fl-qoffers-icon {
  font-size: 18px;
}
.fl-qoffers-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #166534;
}
.fl-qoffers-tiers-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.fl-qoffer-tier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all .2s ease;
}
.fl-qoffer-tier-item:hover {
  border-color: #10b981;
  background: #f8fafc;
  transform: translateY(-1px);
}
.fl-qoffer-tier-item.selected {
  border-color: #059669;
  background: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}
.fl-qoffer-tier-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fl-qoffer-pill {
  font-size: 12px;
  font-weight: 700;
  background: #dcfce7;
  color: #15803d;
  padding: 2px 8px;
  border-radius: 12px;
}
.fl-qoffer-save {
  font-size: 13px;
  font-weight: 800;
  color: #047857;
}
.fl-qoffer-btn {
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #10b981;
  background: #10b981;
  color: #ffffff;
  cursor: pointer;
  transition: background .2s;
}
.fl-qoffer-tier-item.selected .fl-qoffer-btn {
  background: #047857;
  border-color: #047857;
}

/* Trust Row */
.fl-trust-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.fl-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
}
.fl-trust-icon { font-size: 18px; }

/* 5. Instant COD Order Form */
.fl-order-card {
  background: #ffffff;
  border-radius: 14px;
  border: 2px solid #4f46e5;
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.08);
  padding: 18px;
  width: 100%;
  box-sizing: border-box;
}
.fl-order-title-box { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.fl-cod-icon { font-size: 26px; }
.fl-order-title { margin: 0; font-size: 16px; font-weight: 900; color: #0f172a; }
.fl-order-sub { margin: 2px 0 0; font-size: 11.5px; color: #64748b; }
.fl-order-form { display: flex; flex-direction: column; gap: 12px; }
.fl-form-group { display: flex; flex-direction: column; gap: 5px; }
.fl-form-group label { font-size: 12.5px; font-weight: 700; color: #334155; }
.fl-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 8px;
  font-size: 13.5px;
  box-sizing: border-box;
  font-family: inherit;
}
.fl-input:focus { outline: none; border-color: #4f46e5; }
.fl-deliv-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}
.fl-deliv-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fl-deliv-card.selected,
.fl-deliv-card:has(input:checked) {
  border-color: #6366f1;
  background: #f8fafc;
}
.fl-order-summary {
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
}
.fl-sum-row { display: flex; justify-content: space-between; color: #475569; }
.fl-sum-total {
  border-top: 1px dashed #cbd5e1;
  padding-top: 5px;
  margin-top: 3px;
  font-weight: 800;
  font-size: 14px;
  color: #0f172a;
}
.fl-total-amount { color: #4f46e5; font-size: 16px; font-weight: 900; }
.fl-submit-btn {
  width: 100%;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 13px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.35);
}

/* 6. RELATED PRODUCTS HORIZONTAL SLIDER/CAROUSEL */
.fl-related-section {
  max-width: 1240px;
  margin: 36px auto 0;
  width: 100%;
  box-sizing: border-box;
}
.fl-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.fl-sec-header-left { flex: 1; }
.fl-section-title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 4px;
}
.fl-section-sub { font-size: 12.5px; color: #64748b; margin: 0; }
.fl-slider-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fl-slider-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
}
.fl-slider-arrow:hover {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}
.fl-related-slider-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.fl-related-slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 2px 14px;
}
.fl-related-slider::-webkit-scrollbar { display: none; }
.fl-rel-slide-item {
  flex: 0 0 220px;
  scroll-snap-align: start;
}
@media (max-width: 600px) {
  .fl-rel-slide-item {
    flex: 0 0 170px;
  }
}
.fl-rel-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s;
}
.fl-rel-card:hover { transform: translateY(-3px); }
.fl-rel-img-wrap { aspect-ratio: 1/1; background: #f1f5f9; }
.fl-rel-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.fl-rel-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fl-rel-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fl-rel-price-row { display: flex; align-items: baseline; gap: 6px; }
.fl-rel-sale { font-weight: 900; font-size: 14.5px; color: #4f46e5; }
.fl-rel-reg { font-size: 11.5px; color: #94a3b8; text-decoration: line-through; }
.fl-rel-btn {
  margin-top: auto;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 6px;
  padding: 6px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.fl-rel-btn:hover { background: #4f46e5; color: #ffffff; border-color: #4f46e5; }

/* 7. Reviews Section */
.fl-reviews-section {
  max-width: 1240px;
  margin: 36px auto 0;
  width: 100%;
  box-sizing: border-box;
}
.fl-reviews-container {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  body:not(.is-mobile-view) .fashion-landing-root:not(.is-builder-preview) .fl-reviews-container,
  .lp-frame-desktop .fl-reviews-container {
    grid-template-columns: 220px 1fr;
  }
}
.fl-rev-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}
@media (min-width: 768px) {
  body:not(.is-mobile-view) .fashion-landing-root:not(.is-builder-preview) .fl-rev-stats,
  .lp-frame-desktop .fl-rev-stats {
    border-bottom: none;
    border-right: 1px solid #e2e8f0;
    padding-right: 16px;
    padding-bottom: 0;
  }
}
.fl-big-rating { font-family: 'Outfit', sans-serif; font-size: 40px; font-weight: 900; color: #0f172a; }
.fl-stars-big { color: #f59e0b; font-size: 18px; margin-bottom: 4px; }
.fl-stat-total { font-size: 12px; color: #64748b; margin-bottom: 12px; }
.fl-add-rev-btn {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.fl-rev-list { display: flex; flex-direction: column; gap: 12px; }
.fl-rev-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px; }
.fl-rev-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.fl-rev-author { font-weight: 800; font-size: 13px; color: #0f172a; }
.fl-verified-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
.fl-rev-stars { color: #f59e0b; font-size: 11px; }
.fl-rev-date { font-size: 11px; color: #94a3b8; }
.fl-rev-text { font-size: 12.5px; color: #334155; line-height: 1.45; margin: 0; }

/* 8. Footer */
.fl-footer {
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 24px 16px;
  text-align: center;
  margin-top: 36px;
  width: 100%;
  box-sizing: border-box;
}
.fl-footer-brand { font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 900; color: #0f172a; margin-bottom: 4px; }
.fl-footer-text { font-size: 12px; color: #64748b; margin: 0; }

/* 9. Mobile Sticky Floating Order Bar */
.fl-mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
  z-index: 999;
}
@media (min-width: 900px) {
  body:not(.is-mobile-view) .fl-mobile-sticky-bar { display: none; }
}
.fl-sticky-info { display: flex; flex-direction: column; }
.fl-sticky-price { font-family: 'Outfit', sans-serif; font-size: 17px; font-weight: 900; color: #4f46e5; }
.fl-sticky-discount { font-size: 10.5px; font-weight: 800; color: #ec4899; }
.fl-sticky-order-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}

/* 10. Zoom Modal */
.fl-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
}
.fl-zoom-modal.open { display: flex; }
.fl-zoom-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(5px); }
.fl-zoom-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fl-zoom-close {
  position: absolute;
  top: -36px;
  right: -8px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 32px;
  cursor: pointer;
}
.fl-zoom-target-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  transition: transform .2s ease;
}
.fl-zoom-controls {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  background: rgba(15, 23, 42, 0.8);
  padding: 6px 14px;
  border-radius: 25px;
}
.fl-zoom-controls button { background: none; border: none; color: #fff; font-size: 15px; cursor: pointer; padding: 2px 6px; }

/* 11. Modal Dialog */
.fl-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.fl-modal-dialog {
  background: #ffffff;
  border-radius: 14px;
  max-width: 440px;
  width: 100%;
  overflow: hidden;
}
.fl-modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fl-modal-header h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; }
.fl-modal-close-btn { background: none; border: none; font-size: 20px; color: #94a3b8; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   12. COMPLETE MOBILE & BUILDER FRAME RESPONSIVENESS FOR ALL PAGES
   ═══════════════════════════════════════════════════════════════ */

/* Global Public Wrapper Containment */
.lp-public-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Builder Canvas Containment */
.lp-in-builder {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.lp-in-builder .lp-floating-bar {
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 80 !important;
  box-sizing: border-box !important;
}

/* Ensure canvas content inside phone and tablet frames scrolls cleanly */
.lp-canvas-frame.lp-frame-mobile {
  width: 390px !important;
  max-width: 95vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.lp-canvas-frame.lp-frame-tablet {
  width: 768px !important;
  max-width: 95vw !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.lp-canvas-frame.lp-frame-mobile .lp-canvas-content,
.lp-canvas-frame.lp-frame-tablet .lp-canvas-content,
.lp-canvas-frame.lp-frame-mobile .lp-public-wrapper,
.lp-canvas-frame.lp-frame-tablet .lp-public-wrapper,
.lp-canvas-frame.lp-frame-mobile .fashion-landing-root,
.lp-canvas-frame.lp-frame-tablet .fashion-landing-root {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Strict Mobile Rules for Mobile Preview Frame (.lp-frame-mobile) */
.lp-frame-mobile .lp-public-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .lp-container {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .lp-minimal-header {
  padding: 8px 0 !important;
}
.lp-frame-mobile .lp-minimal-header .lp-container {
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
  text-align: center !important;
}
.lp-frame-mobile .lp-brand-logo {
  justify-content: center !important;
}
.lp-frame-mobile .lp-brand-logo .logo-text {
  font-size: 17px !important;
}
.lp-frame-mobile .lp-brand-logo img {
  max-height: 32px !important;
}
.lp-frame-mobile .lp-header-contacts {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px !important;
}
.lp-frame-mobile .lp-hotline-btn,
.lp-frame-mobile .lp-whatsapp-btn {
  font-size: 11px !important;
  padding: 4px 10px !important;
}

.lp-frame-mobile .lp-hero-product {
  padding: 16px 0 20px !important;
}
.lp-frame-mobile .lp-hero-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  align-items: stretch !important;
  text-align: center !important;
}
.lp-frame-mobile .lp-main-img-wrap {
  width: 100% !important;
  max-width: 290px !important;
  margin: 0 auto !important;
  border-radius: 14px !important;
  aspect-ratio: 1/1 !important;
}
.lp-frame-mobile .lp-thumb-row {
  justify-content: center !important;
}
.lp-frame-mobile .lp-thumb-item {
  width: 52px !important;
  height: 52px !important;
}
.lp-frame-mobile .lp-hero-details {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.lp-frame-mobile .lp-hero-title {
  font-size: 19px !important;
  line-height: 1.38 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}
.lp-frame-mobile .lp-hero-desc {
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}
.lp-frame-mobile .lp-price-box {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
}
.lp-frame-mobile .lp-curr-price {
  font-size: 24px !important;
}
.lp-frame-mobile .lp-old-price {
  font-size: 15px !important;
}
.lp-frame-mobile .lp-save-pill {
  margin-left: 0 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
}
.lp-frame-mobile .lp-scarcity-box {
  width: 100% !important;
  padding: 8px 12px !important;
  margin-bottom: 14px !important;
  box-sizing: border-box !important;
}
.lp-frame-mobile .lp-scarcity-top {
  font-size: 11.5px !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: center !important;
}
.lp-frame-mobile .lp-cta-group {
  width: 100% !important;
}
.lp-frame-mobile .lp-main-btn {
  font-size: 15px !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
}
.lp-frame-mobile .lp-trust-micro {
  flex-direction: column !important;
  gap: 4px !important;
  align-items: center !important;
  font-size: 11px !important;
}

.lp-frame-mobile .lp-timer-section {
  padding: 14px 0 !important;
}
.lp-frame-mobile .lp-timer-card {
  flex-direction: column !important;
  text-align: center !important;
  padding: 14px 10px !important;
  gap: 10px !important;
  border-radius: 14px !important;
}
.lp-frame-mobile .lp-timer-title {
  font-size: 13.5px !important;
}
.lp-frame-mobile .lp-countdown-boxes {
  justify-content: center !important;
  gap: 6px !important;
}
.lp-frame-mobile .lp-c-box {
  min-width: 44px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
}
.lp-frame-mobile .lp-c-box b {
  font-size: 17px !important;
}
.lp-frame-mobile .lp-c-box span {
  font-size: 9px !important;
}
.lp-frame-mobile .lp-c-sep {
  font-size: 16px !important;
}

.lp-frame-mobile .lp-packages-section {
  padding: 20px 0 !important;
}
.lp-frame-mobile .lp-packages-grid {
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}
.lp-frame-mobile .lp-pkg-card {
  padding: 12px 14px !important;
  border-radius: 12px !important;
}

.lp-frame-mobile .lp-checkout-section {
  padding: 20px 0 !important;
}
.lp-frame-mobile .lp-checkout-card {
  padding: 16px 12px !important;
  border-radius: 16px !important;
}
.lp-frame-mobile .lp-form-layout {
  grid-template-columns: 1fr !important;
  gap: 18px !important;
}
.lp-frame-mobile .lp-deliv-options {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.lp-frame-mobile .lp-deliv-radio {
  padding: 8px 6px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}
.lp-frame-mobile .lp-variant-selector-card {
  padding: 10px 12px !important;
}
.lp-frame-mobile .lp-summary-card {
  padding: 14px 12px !important;
  border-radius: 14px !important;
}
.lp-frame-mobile .lp-submit-btn {
  padding: 14px !important;
  font-size: 15px !important;
}

.lp-frame-mobile .lp-features-grid,
.lp-frame-mobile .lp-testi-grid,
.lp-frame-mobile .lp-guarantee-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}
.lp-frame-mobile .lp-gallery-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
.lp-frame-mobile .lp-sec-header h2 {
  font-size: 18px !important;
}
.lp-frame-mobile .lp-sec-header p {
  font-size: 12.5px !important;
}
.lp-frame-mobile .lp-feature-card,
.lp-frame-mobile .lp-testi-card,
.lp-frame-mobile .lp-guarantee-card {
  padding: 14px !important;
}

/* ==========================================================================
   FASHION LANDING MOBILE PREVIEW FRAME (.lp-frame-mobile)
   Ensures 100% responsiveness in builder mobile mockup (Zero Overflow)
   ========================================================================== */
.lp-frame-mobile .fashion-landing-root {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-top-banner {
  padding: 6px 32px 6px 12px !important;
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
  font-size: 11px !important;
  min-height: 34px !important;
}

.lp-frame-mobile .fl-top-banner-content {
  gap: 5px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

.lp-frame-mobile .fl-top-pill {
  font-size: 8.5px !important;
  padding: 1.5px 5px !important;
  flex-shrink: 0 !important;
}

.lp-frame-mobile .fl-top-banner-text {
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 165px !important;
}

.lp-frame-mobile .fl-top-banner-btn {
  font-size: 10px !important;
  padding: 2px 7px !important;
  flex-shrink: 0 !important;
}

.lp-frame-mobile .fl-top-banner-close {
  width: 18px !important;
  height: 18px !important;
  right: 8px !important;
}

.lp-frame-mobile .fl-header-container {
  padding: 8px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 6px !important;
}

.lp-frame-mobile .fl-header-left {
  min-width: 38px !important;
  flex: 0 0 38px !important;
}

.lp-frame-mobile .fl-back-home-btn {
  display: none !important;
}

.lp-frame-mobile .fl-nav-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

.lp-frame-mobile .fl-header-center {
  flex: 1 1 auto !important;
  padding: 0 4px !important;
  overflow: hidden !important;
}

.lp-frame-mobile .fl-brand-text {
  font-size: 16px !important;
  max-width: 165px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  color: #0f172a !important;
}

.lp-frame-mobile .fl-brand-img {
  max-height: 28px !important;
  max-width: 120px !important;
}

.lp-frame-mobile .fl-header-right {
  min-width: 78px !important;
  flex: 0 0 78px !important;
  gap: 6px !important;
}

.lp-frame-mobile .fl-header-icon-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
}

.lp-frame-mobile .fl-main-layout {
  padding: 10px 8px 75px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-main-container {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-left-col,
.lp-frame-mobile .fl-right-col {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-gallery-card {
  padding: 8px !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-hero-img-wrap {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 1/1 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-thumb-strip {
  display: flex !important;
  gap: 6px !important;
  overflow-x: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-bottom: 4px !important;
}

.lp-frame-mobile .fl-thumb-btn {
  flex: 0 0 52px !important;
  height: 52px !important;
  border-radius: 6px !important;
}

.lp-frame-mobile .fl-spotlight-box {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-trust-row {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 4px !important;
  padding: 8px 4px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-trust-item {
  font-size: 9.5px !important;
  line-height: 1.2 !important;
}

.lp-frame-mobile .fl-trust-icon {
  font-size: 15px !important;
}

.lp-frame-mobile .fl-prod-title {
  font-size: 17.5px !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.lp-frame-mobile .fl-pricing-card {
  padding: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-price-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 8px !important;
}

.lp-frame-mobile .fl-sale-price {
  font-size: 22px !important;
}

.lp-frame-mobile .fl-qoffers-card {
  padding: 10px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-qoffer-tier-item {
  padding: 7px 9px !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-order-card {
  padding: 14px 10px !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-deliv-options {
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-deliv-card {
  padding: 9px 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-input {
  font-size: 13.5px !important;
  padding: 9px 11px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-submit-btn {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px !important;
  font-size: 14.5px !important;
}

.lp-frame-mobile .fl-related-section {
  padding: 0 8px !important;
  margin-top: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-section-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.lp-frame-mobile .fl-rel-slide-item {
  flex: 0 0 160px !important;
  width: 160px !important;
}

/* Customer Reviews in Mobile Frame (Fixes Screenshot 2 Cut-off Bug) */
.lp-frame-mobile .fl-reviews-section {
  padding: 0 8px !important;
  margin-top: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lp-frame-mobile .fl-reviews-container {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  padding: 14px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.lp-frame-mobile .fl-rev-stats {
  border-right: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-right: 0 !important;
  padding-bottom: 14px !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: center !important;
  text-align: center !important;
}

.lp-frame-mobile .fl-big-rating {
  font-size: 34px !important;
}

.lp-frame-mobile .fl-rev-list {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.lp-frame-mobile .fl-rev-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 10px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

.lp-frame-mobile .fl-rev-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.lp-frame-mobile .fl-rev-author {
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.lp-frame-mobile .fl-rev-text {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
  margin-top: 6px !important;
}

.lp-frame-mobile .fl-mobile-sticky-bar {
  display: flex !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

/* Strict Mobile Rules for Real Mobile Screens (< 768px) */
@media (max-width: 768px) {
  .lp-public-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .lp-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  /* Minimal Header in Mobile */
  .lp-minimal-header {
    padding: 8px 0 !important;
  }
  .lp-minimal-header .lp-container {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
    text-align: center !important;
  }
  .lp-brand-logo {
    justify-content: center !important;
  }
  .lp-brand-logo .logo-text {
    font-size: 17px !important;
  }
  .lp-brand-logo img {
    max-height: 32px !important;
  }
  .lp-header-contacts {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .lp-hotline-btn,
  .lp-whatsapp-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Product Hero Section - 1 Column Stacked */
  .lp-hero-product {
    padding: 16px 0 20px !important;
  }
  .lp-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    text-align: center !important;
  }
  .lp-main-img-wrap {
    width: 100% !important;
    max-width: 290px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    aspect-ratio: 1/1 !important;
  }
  .lp-thumb-row {
    justify-content: center !important;
  }
  .lp-thumb-item {
    width: 52px !important;
    height: 52px !important;
  }
  .lp-hero-details {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .lp-hero-title {
    font-size: 19px !important;
    line-height: 1.38 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
  .lp-hero-desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
  }
  .lp-price-box {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }
  .lp-curr-price {
    font-size: 24px !important;
  }
  .lp-old-price {
    font-size: 15px !important;
  }
  .lp-save-pill {
    margin-left: 0 !important;
    font-size: 11px !important;
    padding: 2px 8px !important;
  }
  .lp-scarcity-box {
    width: 100% !important;
    padding: 8px 12px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
  }
  .lp-scarcity-top {
    font-size: 11.5px !important;
    flex-direction: column !important;
    gap: 2px !important;
    align-items: center !important;
  }
  .lp-cta-group {
    width: 100% !important;
  }
  .lp-main-btn {
    font-size: 15px !important;
    padding: 13px 16px !important;
    border-radius: 12px !important;
  }
  .lp-trust-micro {
    flex-direction: column !important;
    gap: 4px !important;
    align-items: center !important;
    font-size: 11px !important;
  }

  /* Timer Section in Mobile */
  .lp-timer-section {
    padding: 14px 0 !important;
  }
  .lp-timer-card {
    flex-direction: column !important;
    text-align: center !important;
    padding: 14px 10px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .lp-timer-title {
    font-size: 13.5px !important;
  }
  .lp-countdown-boxes {
    justify-content: center !important;
    gap: 6px !important;
  }
  .lp-c-box {
    min-width: 44px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
  }
  .lp-c-box b {
    font-size: 17px !important;
  }
  .lp-c-box span {
    font-size: 9px !important;
  }
  .lp-c-sep {
    font-size: 16px !important;
  }

  /* Packages Grid in Mobile */
  .lp-packages-section {
    padding: 20px 0 !important;
  }
  .lp-packages-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .lp-pkg-card {
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* 1-Click Checkout Section in Mobile */
  .lp-checkout-section {
    padding: 20px 0 !important;
  }
  .lp-checkout-card {
    padding: 16px 12px !important;
    border-radius: 16px !important;
  }
  .lp-form-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .lp-deliv-options {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .lp-deliv-radio {
    padding: 8px 6px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .lp-variant-selector-card {
    padding: 10px 12px !important;
  }
  .lp-summary-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  .lp-submit-btn {
    padding: 14px !important;
    font-size: 15px !important;
  }

  /* Features, Testimonials, Guarantee, Video, Gallery in Mobile */
  .lp-features-grid,
  .lp-testi-grid,
  .lp-guarantee-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .lp-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .lp-sec-header h2 {
    font-size: 18px !important;
  }
  .lp-sec-header p {
    font-size: 12.5px !important;
  }
  .lp-feature-card,
  .lp-testi-card,
  .lp-guarantee-card {
    padding: 14px !important;
  }

  /* ==========================================================================
     FASHION LANDING RESPONSIVE OVERRIDES ON REAL MOBILE (< 768px)
     ========================================================================== */
  .fashion-landing-root {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .fl-top-banner {
    padding: 6px 32px 6px 12px !important;
    font-size: 11px !important;
    min-height: 34px !important;
  }
  .fl-top-banner-content {
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  .fl-top-pill {
    font-size: 8.5px !important;
    padding: 1.5px 5px !important;
    flex-shrink: 0 !important;
  }
  .fl-top-banner-text {
    font-size: 11px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 165px !important;
  }
  .fl-top-banner-btn {
    font-size: 10px !important;
    padding: 2px 7px !important;
    flex-shrink: 0 !important;
  }
  .fl-top-banner-close {
    width: 18px !important;
    height: 18px !important;
    right: 8px !important;
  }
  .fl-header-container {
    padding: 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
  }
  .fl-header-left {
    min-width: 38px !important;
    flex: 0 0 38px !important;
  }
  .fl-back-home-btn {
    display: none !important;
  }
  .fl-nav-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .fl-header-center {
    flex: 1 1 auto !important;
    padding: 0 4px !important;
    overflow: hidden !important;
  }
  .fl-brand-text {
    font-size: 16px !important;
    max-width: 165px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    color: #0f172a !important;
  }
  .fl-brand-img {
    max-height: 28px !important;
    max-width: 120px !important;
  }
  .fl-header-right {
    min-width: 78px !important;
    flex: 0 0 78px !important;
    gap: 6px !important;
  }
  .fl-header-icon-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .fl-main-layout {
    padding: 10px 8px 75px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-main-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-left-col,
  .fl-right-col {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-gallery-card {
    padding: 8px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-hero-img-wrap {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1/1 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .fl-thumb-strip {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .fl-thumb-btn {
    flex: 0 0 52px !important;
    height: 52px !important;
    border-radius: 6px !important;
  }
  .fl-spotlight-box {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-trust-row {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-trust-item {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
  }
  .fl-prod-title {
    font-size: 17.5px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .fl-pricing-card {
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-price-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 8px !important;
  }
  .fl-sale-price {
    font-size: 22px !important;
  }
  .fl-qoffers-card {
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-qoffer-tier-item {
    padding: 7px 9px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-order-card {
    padding: 14px 10px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-deliv-options {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-deliv-card {
    padding: 9px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-input {
    font-size: 13.5px !important;
    padding: 9px 11px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-submit-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 13px !important;
    font-size: 14.5px !important;
  }
  .fl-related-section {
    padding: 0 8px !important;
    margin-top: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .fl-rel-slide-item {
    flex: 0 0 160px !important;
    width: 160px !important;
  }
  .fl-reviews-section {
    padding: 0 8px !important;
    margin-top: 24px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .fl-reviews-container {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 14px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .fl-rev-stats {
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding-right: 0 !important;
    padding-bottom: 14px !important;
    margin-bottom: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    text-align: center !important;
  }
  .fl-big-rating {
    font-size: 34px !important;
  }
  .fl-rev-list {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .fl-rev-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }
  .fl-rev-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .fl-rev-author {
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .fl-rev-text {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    margin-top: 6px !important;
  }
  .fl-mobile-sticky-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: 999 !important;
  }
}

/* Floating bar on mobile frame */
.lp-frame-mobile .lp-floating-bar,
.lp-frame-tablet .lp-floating-bar {
  display: block !important;
}

/* Tablet frame adjustments */
.lp-frame-tablet .lp-hero-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
}
.lp-frame-tablet .lp-form-layout {
  grid-template-columns: 1fr !important;
}
.lp-frame-tablet .fl-reviews-container {
  display: grid !important;
  grid-template-columns: 200px 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.lp-frame-tablet .fl-rev-stats {
  border-bottom: none !important;
  border-right: 1px solid #e2e8f0 !important;
  padding-right: 14px !important;
  padding-bottom: 0 !important;
}

/* ==========================================================================
   5 RESPONSIVE HEADER VARIATIONS & CUSTOMIZER SYSTEM
   ========================================================================== */

/* Header Sizes */
.fl-header--size-sm {
  padding: 4px 0 !important;
}
.fl-header--size-sm .fl-header-container {
  padding: 6px 12px !important;
  min-height: 46px !important;
}
.fl-header--size-sm .fl-brand-text {
  font-size: 15px !important;
}
.fl-header--size-sm .fl-brand-img {
  max-height: 26px !important;
}
.fl-header--size-sm .fl-nav-btn {
  width: 34px !important;
  height: 34px !important;
}

.fl-header--size-md {
  padding: 8px 0;
}
.fl-header--size-md .fl-header-container {
  padding: 8px 16px;
  min-height: 56px;
}
.fl-header--size-md .fl-brand-text {
  font-size: 18px !important;
}
.fl-header--size-md .fl-brand-img {
  max-height: 34px !important;
}

.fl-header--size-lg {
  padding: 12px 0 !important;
}
.fl-header--size-lg .fl-header-container {
  padding: 12px 20px !important;
  min-height: 68px !important;
}
.fl-header--size-lg .fl-brand-text {
  font-size: 22px !important;
}
.fl-header--size-lg .fl-brand-img {
  max-height: 44px !important;
}

/* Sticky Header */
.fl-header--sticky {
  position: sticky !important;
  top: 0 !important;
  z-index: 99 !important;
}
.fl-header--static {
  position: relative !important;
}

/* Top Banner Themes */
.fl-banner-midnight {
  background: linear-gradient(135deg, #090d16 0%, #1e1b4b 55%, #172554 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.fl-banner-purple {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #8b5cf6 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.fl-banner-crimson {
  background: linear-gradient(135deg, #881337 0%, #be123c 50%, #e11d48 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.fl-banner-emerald {
  background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
.fl-banner-minimal {
  background: #ffffff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.fl-banner-minimal .fl-top-banner-text {
  color: #1e293b !important;
}
.fl-banner-minimal .fl-top-banner-btn {
  background: #0f172a !important;
  color: #ffffff !important;
}
.fl-banner-minimal .fl-top-banner-close {
  background: #f1f5f9 !important;
  color: #64748b !important;
  border-color: #cbd5e1 !important;
}

/* Back Icon Button (Replacing the clunky text button) */
.fl-back-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.fl-back-icon-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #4f46e5;
  transform: translateY(-1px);
}

/* Header Style 1: Luxury Minimal */
.fl-header-variant-luxury .fl-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fl-header-variant-luxury .fl-header-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.fl-header-variant-luxury .fl-header-center {
  flex: 1 1 auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 8px;
}
.fl-header-variant-luxury .fl-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

/* Header Style 2: High Conversion Hotline & WhatsApp */
.fl-header-variant-hotline .fl-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fl-header-variant-hotline .fl-header-brand-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.fl-header-variant-hotline .fl-header-hotline-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.fl-hdr-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.fl-hdr-pill-call {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #1e293b;
}
.fl-hdr-pill-call:hover {
  background: #1e293b;
  transform: translateY(-1px);
  color: #38bdf8;
}
.fl-hdr-pill-wa {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.fl-hdr-pill-wa:hover {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(34, 197, 94, 0.35);
  color: #ffffff;
}

/* Header Style 3: Classic Storefront */
.fl-header-variant-classic .fl-hdr-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.fl-header-variant-classic .fl-hdr-cart-pill:hover {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #ffffff;
  transform: translateY(-1px);
}
.fl-header-variant-classic .fl-icon-search-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.fl-header-variant-classic .fl-icon-search-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* Header Style 4: Modern App Bar with Continuous Ticker */
.fl-hdr-ticker-bar {
  background: #0f172a;
  color: #f8fafc;
  overflow: hidden;
  white-space: nowrap;
  padding: 5px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.fl-hdr-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  animation: flTickerScroll 22s linear infinite;
  padding-left: 100%;
}
@keyframes flTickerScroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}
.fl-ticker-sep {
  opacity: 0.4;
  font-size: 10px;
}
.fl-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.fl-hdr-order-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.fl-hdr-order-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.4);
  color: #ffffff;
}

/* Header Style 5: Stacked Brand & Trust Strip */
.fl-header-variant-stacked .fl-header-center {
  flex-direction: column;
  gap: 2px;
}
.fl-brand-tagline {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}
.fl-hdr-trust-strip {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 12px;
  font-size: 10.5px;
  font-weight: 600;
  color: #475569;
  overflow-x: auto;
  white-space: nowrap;
}
.fl-trust-dot {
  opacity: 0.4;
  font-size: 9px;
}

/* Mobile & Simulator Perfect Fit Rules */
.lp-frame-mobile .fl-top-banner {
  border-top-left-radius: 26px !important;
  border-top-right-radius: 26px !important;
  padding: 6px 30px 6px 12px !important;
}
.lp-frame-mobile .fl-top-banner-content {
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  font-size: 11px !important;
}
.lp-frame-mobile .fl-top-banner-text {
  max-width: 155px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 10.5px !important;
}
.lp-frame-mobile .fl-top-banner-btn {
  font-size: 9.5px !important;
  padding: 2px 6px !important;
}
.lp-frame-mobile .fl-top-banner-close {
  right: 6px !important;
  width: 18px !important;
  height: 18px !important;
}

/* Ensure no clunky text pushing header */
.lp-frame-mobile .fl-back-home-btn,
.lp-frame-mobile .fl-back-text {
  display: none !important;
}
@media (max-width: 768px) {
  .fl-back-text {
    display: none !important;
  }
}

.lp-frame-mobile .fl-header-container {
  padding: 6px 10px !important;
  gap: 4px !important;
}
.lp-frame-mobile .fl-brand-text {
  max-width: 170px !important;
  font-size: 15px !important;
}
.lp-frame-mobile .fl-brand-img {
  max-height: 28px !important;
  max-width: 120px !important;
}

.lp-frame-mobile .fl-hdr-pill {
  padding: 4px 8px !important;
  font-size: 10px !important;
}
.lp-frame-mobile .fl-hdr-pill .fl-pill-text {
  font-size: 10px !important;
}
.lp-frame-mobile .fl-hdr-order-cta-btn {
  padding: 4px 8px !important;
  font-size: 10.5px !important;
}