*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f5f7fb;color:#172033;line-height:1.55}a{color:inherit}.container{width:min(1180px,92vw);margin:0 auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid #e5e9f1}.topbar{width:min(1240px,94vw);min-height:76px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:900;font-size:1.12rem;white-space:nowrap}.brand img{max-height:54px;max-width:230px;object-fit:contain}.brand-mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;display:grid;place-items:center;font-size:1.25rem}.nav{display:flex;align-items:center;gap:5px}.nav a{padding:9px 11px;text-decoration:none;border-radius:10px;font-weight:700;font-size:.92rem}.nav a:hover{background:#eef1f7}.nav .admin-link{color:var(--primary)}.cart-link{background:#101827!important;color:#fff!important}.cart-link b{background:var(--accent);color:#082118;border-radius:999px;padding:2px 7px;margin-left:4px}.menu-toggle{display:none;background:#101827;color:#fff;border:0;border-radius:10px;padding:10px 13px;font-size:1.2rem}.flash{position:fixed;z-index:100;top:90px;left:50%;transform:translateX(-50%);width:min(680px,90vw);padding:13px 16px;border-radius:12px;box-shadow:0 14px 40px #0002;font-weight:700;background:#e9fff5;border:1px solid #a3efd0;color:#155b3e}.flash.err{background:#fff0f1;border-color:#f5b4bc;color:#8d2635}.hero{min-height:520px;background:linear-gradient(135deg,#111827,#25314c);background-size:cover;background-position:center;color:#fff;display:flex;align-items:center}.hero-inner{display:flex;align-items:center;min-height:520px}.hero-inner>div{max-width:720px}.hero h1{font-size:clamp(2.5rem,6vw,5.3rem);line-height:.98;margin:8px 0 22px;letter-spacing:-.055em}.hero p{font-size:1.18rem;max-width:650px;color:#e4e8f2}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:900;color:var(--accent)}.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.btn{appearance:none;border:0;border-radius:12px;background:var(--primary);color:#fff!important;text-decoration:none;font-weight:850;padding:11px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:.94rem;transition:.2s}.btn:hover{filter:brightness(.94);transform:translateY(-1px)}.btn.ghost{background:#eef1f7;color:#172033!important}.hero .btn.ghost{background:#ffffff18;color:#fff!important;border:1px solid #ffffff45}.btn.full{width:100%}.btn.small{padding:8px 11px;font-size:.8rem}.btn.big{padding:14px 20px}.btn.danger{background:#c53b4d}.text-link,.link-btn{color:var(--primary);font-weight:800;text-decoration:none}.link-btn{border:0;background:none;cursor:pointer;padding:0}.section{padding:64px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}.section-head h2,.page-title h1{margin:4px 0 0;font-size:clamp(1.8rem,3vw,2.8rem);letter-spacing:-.035em}.section-head>a{color:var(--primary);font-weight:800}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.category-card{background:#fff;border:1px solid #e6eaf1;border-radius:16px;padding:22px;text-decoration:none;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 25px #1f2b3a0a;transition:.2s}.category-card:hover{transform:translateY(-3px);border-color:#cfd6e5}.category-card strong{display:block;font-size:1.05rem}.category-card span{display:block;font-size:.82rem;color:#7a8496;margin-top:3px}.category-card>b{font-size:1.5rem;color:var(--primary)}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:#fff;border:1px solid #e5e9f1;border-radius:18px;overflow:hidden;box-shadow:0 12px 30px #26354a0b;display:flex;flex-direction:column}.product-image{height:230px;background:#eef1f6;display:grid;place-items:center;position:relative;overflow:hidden;text-decoration:none;color:#929bad}.product-image img{width:100%;height:100%;object-fit:cover;transition:.3s}.product-card:hover .product-image img{transform:scale(1.035)}.product-image em{position:absolute;top:12px;left:12px;background:var(--accent);color:#09251b;font-style:normal;font-size:.68rem;font-weight:950;padding:6px 9px;border-radius:999px}.product-body{padding:17px;display:flex;flex-direction:column;gap:8px;flex:1}.product-body small{color:#7d8798}.product-body h3{margin:0;font-size:1.08rem}.product-body h3 a{text-decoration:none}.product-body p{font-size:.88rem;color:#667085;margin:0;min-height:42px}.price{display:flex;align-items:center;gap:8px;margin-top:auto}.price del{color:#9aa3b2}.price strong{font-size:1.15rem}.price.large strong{font-size:2rem}.stock{font-size:.78rem;font-weight:800}.stock.in{color:#158757}.stock.out{color:#be3b4d}.empty{background:#fff;border:1px dashed #ccd4e3;border-radius:18px;padding:40px;text-align:center;color:#798396}.empty.wide{grid-column:1/-1}.newsletter{background:#101827;color:#fff;padding:50px 0}.newsletter-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}.newsletter h2{font-size:2rem;margin:5px 0}.newsletter p{color:#b9c1cf}.newsletter-form{display:flex;gap:9px;width:min(520px,100%)}.newsletter-form input{flex:1}.footer{background:#090f1c;color:#e9edf5;padding-top:46px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footer a{display:block;color:#aeb8c8;text-decoration:none;margin:7px 0}.footer p{color:#9aa5b8}.footer-bottom{text-align:center;border-top:1px solid #ffffff14;padding:20px;margin-top:36px;color:#758095;font-size:.82rem}.shop-filter{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;background:#fff;border:1px solid #e5e9f1;border-radius:16px;padding:14px;margin:25px 0 12px}.result-count{font-size:.85rem;color:#778296;margin-bottom:20px}input,select,textarea{width:100%;border:1px solid #d9dfea;background:#fff;color:#172033;border-radius:11px;padding:11px 12px;font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 14%,transparent)}label{display:block;font-size:.82rem;font-weight:800;color:#475467;margin-bottom:12px}label input,label select,label textarea{margin-top:5px;font-weight:500}.product-detail{display:grid;grid-template-columns:1.05fr 1fr;gap:55px;align-items:start}.product-detail-image{min-height:520px;background:#fff;border:1px solid #e5e9f1;border-radius:22px;display:grid;place-items:center;overflow:hidden;color:#9099aa}.product-detail-image img{width:100%;height:100%;max-height:620px;object-fit:contain}.product-detail-info h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.02;margin:8px 0 12px;letter-spacing:-.04em}.sku{color:#8b95a6;font-size:.84rem;margin-bottom:18px}.lead{font-size:1.08rem;color:#5d6879}.add-form{display:flex;gap:10px;margin:25px 0}.add-form input{width:90px}.product-description{border-top:1px solid #e4e8ef;margin-top:24px;padding-top:24px}.product-meta{display:flex;gap:15px;flex-wrap:wrap;color:#7b8595;font-size:.82rem;margin-top:18px}.card{background:#fff;border:1px solid #e4e8ef;border-radius:18px;padding:22px;box-shadow:0 12px 35px #2230480a}.card h1,.card h2,.card h3{margin-top:0}.cart-layout{display:grid;grid-template-columns:1fr 350px;gap:22px;align-items:start}.table-card{padding:0;overflow:hidden}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:13px 14px;border-bottom:1px solid #edf0f5;text-align:left;vertical-align:middle}.table th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#7a8496;background:#fafbfc}.table td small{display:block;color:#8992a3}.cart-product{display:flex;align-items:center;gap:12px}.cart-product img{width:54px;height:54px;object-fit:cover;border-radius:10px;background:#eef1f5}.qty{width:75px}.table-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;color:#818a99;font-size:.8rem}.summary{display:flex;flex-direction:column;gap:12px}.summary>div{display:flex;justify-content:space-between;gap:15px}.summary-total{border-top:1px solid #e6eaf0;padding-top:14px;font-size:1.12rem}.summary.sticky{position:sticky;top:98px}.coupon{display:flex;gap:8px}.text-link{text-align:center;font-size:.84rem}.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:start}.checkout-main{display:flex;flex-direction:column;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 13px}.form-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid .wide{grid-column:1/-1}.form-grid.three .wide2{grid-column:span 2}.choice{display:flex;align-items:center;gap:12px;border:1px solid #e0e5ee;border-radius:12px;padding:12px;margin:8px 0;cursor:pointer}.choice input{width:auto}.choice span{display:flex;justify-content:space-between;width:100%;align-items:center}.choice small{color:#7c8594}.check{display:flex;align-items:center;gap:8px}.check input{width:auto;margin:0}.hint{font-size:.8rem;color:#7d8798}.order-success{text-align:center;margin:10px 0 35px}.order-success>span{width:66px;height:66px;border-radius:50%;background:#dffbef;color:#118354;display:grid;place-items:center;font-size:2rem;margin:auto}.order-success h1{font-size:2.4rem;margin:15px 0 4px}.order-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:22px}.order-item{display:flex;justify-content:space-between;gap:15px;padding:10px 0;border-bottom:1px solid #edf0f5}.order-item small{display:block;color:#8a94a5}.order-item.total{font-size:1.12rem;border:0}.bank-box{background:#f5f7fb;border-radius:12px;padding:13px;margin-top:15px}.auth-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;max-width:920px}.account-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}.order-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid #edf0f5;text-decoration:none}.order-row small{display:block;color:#8791a2}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}.contact-grid h1{font-size:3rem;margin:8px 0}.contact-data{margin-top:35px}.legal{max-width:900px;margin:auto;white-space:normal}.admin-shell{padding:42px 0 70px}.admin-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.admin-title h1{font-size:2.5rem;margin:4px 0}.admin-user{font-size:.82rem;color:#7a8495}.admin-layout{display:grid;grid-template-columns:210px 1fr;gap:20px;align-items:start}.admin-nav{position:sticky;top:98px;background:#101827;border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:3px}.admin-nav a{color:#c8d0dc;text-decoration:none;padding:10px 11px;border-radius:9px;font-size:.84rem;font-weight:750}.admin-nav a:hover,.admin-nav a.active{background:#ffffff14;color:#fff}.admin-content{min-width:0;display:flex;flex-direction:column;gap:18px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.stat-card{background:#fff;border:1px solid #e4e8ef;border-radius:16px;padding:20px}.stat-card small{color:#7a8495;display:block}.stat-card strong{font-size:1.75rem;display:block;margin-top:3px}.stat-card.warn strong{color:#c97920}.admin-two{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}.goal{margin:15px 0}.goal>div:first-child{display:flex;justify-content:space-between;gap:15px}.progress{height:10px;background:#edf0f5;border-radius:99px;overflow:hidden;margin-top:7px}.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:99px}.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input,.inline-form select{width:auto;min-width:120px}.inline-form.compact input,.inline-form.compact select{min-width:95px;padding:8px 9px}.inline{display:inline}.manage-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid #edf0f5}.manage-row small{display:block;color:#838d9d}.manage-row>div{display:flex;gap:6px;align-items:center}.low-stock{color:#c13c4c;font-weight:900}.pos{color:#11885a}.neg{color:#c03c4e}.actions{white-space:nowrap}.status-filter{display:flex;gap:7px;flex-wrap:wrap}.status-filter a{font-size:.75rem;padding:6px 8px;background:#f0f2f6;border-radius:8px;text-decoration:none}.status-pill{font-size:.73rem;font-weight:800;background:#edf0f5;padding:5px 8px;border-radius:999px;white-space:nowrap}.status-new{background:#fff2cf;color:#8a5a00}.status-paid,.status-completed{background:#dcf8eb;color:#146944}.status-cancelled{background:#ffe3e7;color:#91303f}.status-shipped{background:#e5edff;color:#315aa7}.card.inner{background:#f8fafc;box-shadow:none;margin-top:20px}.contact-admin{padding:16px 0;border-bottom:1px solid #edf0f5}.contact-admin small{display:block;color:#8490a2}.settings-list{display:flex;flex-direction:column;gap:8px;margin:12px 0 20px}.settings-row{display:grid;grid-template-columns:2fr 1fr auto;gap:9px;align-items:center}.settings-row label{margin:0}.settings-row input{margin:0}hr{border:0;border-top:1px solid #e7ebf1;margin:22px 0}
@media(max-width:980px){.product-grid{grid-template-columns:repeat(3,1fr)}.category-grid{grid-template-columns:repeat(2,1fr)}.checkout-grid,.cart-layout{grid-template-columns:1fr}.summary.sticky{position:static}.admin-layout{grid-template-columns:1fr}.admin-nav{position:static;display:grid;grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.product-detail,.contact-grid{grid-template-columns:1fr}.product-detail-image{min-height:400px}}
@media(max-width:760px){.topbar{min-height:66px}.menu-toggle{display:block}.nav{display:none;position:absolute;left:3vw;right:3vw;top:69px;background:#fff;border:1px solid #e2e6ee;box-shadow:0 15px 40px #0002;border-radius:14px;padding:10px;flex-direction:column;align-items:stretch}.nav.open{display:flex}.nav a{text-align:center}.hero,.hero-inner{min-height:440px}.product-grid{grid-template-columns:repeat(2,1fr)}.shop-filter{grid-template-columns:1fr}.newsletter-inner{flex-direction:column;align-items:flex-start}.newsletter-form{width:100%}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.auth-layout,.account-grid,.order-grid,.admin-two{grid-template-columns:1fr}.form-grid.three{grid-template-columns:1fr 1fr}.form-grid.three .wide2{grid-column:1/-1}.admin-title{align-items:flex-start;flex-direction:column}.admin-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.section{padding:42px 0}.product-grid,.category-grid,.form-grid,.form-grid.three{grid-template-columns:1fr}.product-image{height:260px}.hero h1{font-size:2.65rem}.newsletter-form{flex-direction:column}.footer-grid{grid-template-columns:1fr}.footer-grid>div:first-child{grid-column:auto}.table th,.table td{padding:10px 9px;font-size:.8rem}.cart-product img{display:none}.admin-nav{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr}.settings-row{grid-template-columns:1fr}.manage-row{align-items:flex-start;flex-direction:column}.manage-row>div{width:100%}.contact-grid h1{font-size:2.35rem}}
/* Admin-Panel additions */
.admin-nav-title{padding:7px 12px 12px;font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#7a8599)}
.admin-subtitle{margin:.35rem 0 0;color:var(--muted,#718096);font-size:.92rem}
.role-badge{display:inline-flex;align-items:center;padding:.35rem .65rem;border-radius:999px;background:#eef1f6;font-size:.78rem;font-weight:800;white-space:nowrap}
.role-admin{background:color-mix(in srgb,var(--primary) 13%,#fff);color:var(--primary)}
.role-manager{background:color-mix(in srgb,var(--accent) 16%,#fff);color:#126b4a}
/* ============================================================
Layout & Design Builder
Public storefront customization (admin stays readable)
============================================================ */
body:not(.page-admin){background-color:var(--body-bg,#f5f7fb);color:var(--text-main,#172033);background-image:var(--page-background-image,none);background-size:cover;background-position:center top;background-attachment:fixed}
body:not(.page-admin) .container{width:min(var(--page-width,1180px),92vw)}
body:not(.page-admin) .topbar{width:min(calc(var(--page-width,1180px) + 60px),94vw)}
body:not(.page-admin) .hero,body:not(.page-admin) .hero-inner{min-height:var(--hero-height,520px)}
body:not(.page-admin) .card,body:not(.page-admin) .product-card,body:not(.page-admin) .category-card,body:not(.page-admin) .shop-filter,body:not(.page-admin) .empty,body:not(.page-admin) .product-detail-image{border-radius:var(--card-radius,18px)}
body:not(.page-admin) .card,body:not(.page-admin) .product-card,body:not(.page-admin) .category-card,body:not(.page-admin) .shop-filter,body:not(.page-admin) .empty,body:not(.page-admin) .product-detail-image{background-color:var(--surface,#fff)}
body:not(.page-admin) input,body:not(.page-admin) select,body:not(.page-admin) textarea{background-color:var(--surface,#fff);color:var(--text-main,#172033)}
body:not(.page-admin) .page-title h1,body:not(.page-admin) .section-head h2,body:not(.page-admin) .product-body h3,body:not(.page-admin) .product-detail-info h1,body:not(.page-admin) .card h1,body:not(.page-admin) .card h2,body:not(.page-admin) .card h3{color:var(--text-main,#172033)}
/* Header modes */
body.header-static .site-header{position:relative;top:auto}
body:not(.page-admin).header-solid .site-header{background:var(--header-bg,#fff);backdrop-filter:none}
body:not(.page-admin).header-glass .site-header{background:color-mix(in srgb,var(--header-bg,#fff) 88%,transparent);backdrop-filter:blur(18px)}
body:not(.page-admin).header-dark .site-header{background:#0b1220;border-bottom-color:#ffffff18}
body:not(.page-admin).header-dark .brand,body:not(.page-admin).header-dark .nav a{color:#fff}
body:not(.page-admin).header-dark .nav a:hover{background:#ffffff12}
body:not(.page-admin).header-dark .nav .admin-link{color:var(--accent)}
/* Button shapes */
body:not(.page-admin).buttons-pill .btn,body:not(.page-admin).buttons-pill .nav a,body:not(.page-admin).buttons-pill input,body:not(.page-admin).buttons-pill select{border-radius:999px}
body:not(.page-admin).buttons-square .btn,body:not(.page-admin).buttons-square .nav a{border-radius:5px}
body:not(.page-admin).buttons-rounded .btn{border-radius:12px}
/* Card personalities */
body:not(.page-admin).cards-soft .product-card,body:not(.page-admin).cards-soft .card,body:not(.page-admin).cards-soft .category-card{box-shadow:0 16px 42px #16213a12;border-color:color-mix(in srgb,var(--text-main,#172033) 10%,transparent)}
body:not(.page-admin).cards-bordered .product-card,body:not(.page-admin).cards-bordered .card,body:not(.page-admin).cards-bordered .category-card{box-shadow:none;border:2px solid color-mix(in srgb,var(--primary) 18%,#dfe5ef)}
body:not(.page-admin).cards-flat .product-card,body:not(.page-admin).cards-flat .card,body:not(.page-admin).cards-flat .category-card{box-shadow:none;border-color:transparent}
body:not(.page-admin).cards-glass .product-card,body:not(.page-admin).cards-glass .card,body:not(.page-admin).cards-glass .category-card{background:color-mix(in srgb,var(--surface,#fff) 78%,transparent);backdrop-filter:blur(16px);box-shadow:0 18px 55px #0b12201a;border-color:#ffffff55}
/* Section rhythm */
body:not(.page-admin).spacing-compact .section{padding:42px 0}
body:not(.page-admin).spacing-normal .section{padding:64px 0}
body:not(.page-admin).spacing-large .section{padding:88px 0}
/* Start / sales page layouts */
body.page-home .category-grid{grid-template-columns:repeat(var(--home-category-cols,4),minmax(0,1fr))}
body.page-home .home-featured .product-grid{grid-template-columns:repeat(var(--home-product-cols,4),minmax(0,1fr))}
body.page-home.home-centered .hero-inner{justify-content:center;text-align:center}
body.page-home.home-centered .hero-inner>div{max-width:840px;margin:auto}
body.page-home.home-centered .hero p{margin-left:auto;margin-right:auto}
body.page-home.home-centered .hero-actions{justify-content:center}
body.page-home.home-banner .hero,body.page-home.home-banner .hero-inner{min-height:min(var(--hero-height,520px),420px)}
body.page-home.home-banner .hero h1{font-size:clamp(2.35rem,5vw,4.4rem)}
/* Shop page */
body.page-shop .shop-product-grid{grid-template-columns:repeat(var(--shop-product-cols,4),minmax(0,1fr))}
body.image-square .product-image{height:auto;aspect-ratio:1/1}
body.image-portrait .product-image{height:auto;aspect-ratio:4/5}
body.image-landscape .product-image{height:auto;aspect-ratio:4/3}
body.image-square .product-image img,body.image-portrait .product-image img,body.image-landscape .product-image img{position:absolute;inset:0}
body.shopfilter-panel .shop-filter-layout{grid-template-columns:1fr 1fr;gap:12px;padding:22px;box-shadow:0 15px 40px #1720330d}
body.shopfilter-panel .shop-filter-layout input[type=search]{grid-column:1/-1}
body.shopfilter-panel .shop-filter-layout .btn{grid-column:1/-1}
body.shopfilter-minimal .shop-filter-layout{background:transparent;border:0;box-shadow:none;padding:8px 0;border-radius:0}
body.shopfilter-minimal .shop-filter-layout input,body.shopfilter-minimal .shop-filter-layout select{border-width:0 0 1px;border-radius:0;background:transparent}
/* Preset polish */
body:not(.page-admin).theme-elegant h1,body:not(.page-admin).theme-elegant h2,body:not(.page-admin).theme-elegant .product-body h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.025em}
body:not(.page-admin).theme-elegant .hero h1{font-weight:700}
body:not(.page-admin).theme-warm .hero{background:linear-gradient(135deg,#3b2417,#84522f)}
body:not(.page-admin).theme-night .hero{background:linear-gradient(135deg,#050913,#111b34)}
body:not(.page-admin).theme-night .newsletter,body:not(.page-admin).theme-night .footer{background:#050913}
/* Admin is kept neutral and usable regardless of storefront theme */
body.page-admin{background:#f5f7fb;color:#172033;background-image:none}
body.page-admin .container{width:min(1180px,92vw)}
body.page-admin .site-header{background:rgba(255,255,255,.96);color:#172033}
body.page-admin .card,body.page-admin .stat-card{background:#fff;color:#172033}
body.page-admin input,body.page-admin select,body.page-admin textarea{background:#fff;color:#172033}
/* Layout editor */
.layout-editor{display:flex;flex-direction:column;gap:18px}
.layout-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,#fff,#f8f9ff)}
.layout-intro h2{margin:4px 0 6px}.layout-intro p{margin:0;color:#667085;max-width:720px}
.layout-form{display:block}.layout-columns{grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);align-items:start}
.layout-settings{display:flex;flex-direction:column;gap:18px}
.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.preset-card{border:1px solid #dfe4ed;border-radius:14px;background:#fff;padding:14px;text-align:left;cursor:pointer;transition:.18s;color:#172033}
.preset-card:hover,.preset-card.active{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent);transform:translateY(-1px)}
.preset-card b,.preset-card span{display:block}.preset-card span{font-size:.78rem;color:#7b8493;margin-top:3px}
.layout-check{display:flex!important;align-items:center;gap:9px;min-height:58px;margin-top:5px}.layout-check input{width:auto;margin:0}
.layout-settings input[type=range]{padding:0;border:0;box-shadow:none}.layout-settings label small{display:block;color:#8a93a2;margin-top:4px;font-weight:600}
.layout-actions{position:sticky;bottom:16px;z-index:5;background:#fffffff2;backdrop-filter:blur(12px);border:1px solid #e4e8ef;border-radius:14px;padding:12px;box-shadow:0 16px 45px #15213a1a}.layout-actions .btn{width:100%}
.layout-preview{position:sticky;top:98px;padding:14px}.preview-browser{border:1px solid #dfe4ec;border-radius:16px;overflow:hidden;background:#edf0f5;box-shadow:0 18px 55px #1e293b18}.preview-bar{height:34px;background:#eef1f5;display:flex;align-items:center;gap:5px;padding:0 10px;color:#667085;font-size:.72rem}.preview-bar i{width:8px;height:8px;border-radius:50%;background:#b9c0cc}.preview-bar span{margin-left:5px}.preview-page{--pv-primary:#5b43d6;--pv-accent:#19c37d;--pv-bg:#f5f7fb;--pv-surface:#fff;--pv-text:#172033;--pv-radius:18px;background:var(--pv-bg);color:var(--pv-text);min-height:500px;font-size:10px}.preview-header{height:44px;background:var(--pv-surface);padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #00000010}.preview-header b{font-size:11px}.preview-header span{font-size:8px}.preview-hero{height:205px;background:linear-gradient(135deg,#111827,#293754);color:#fff;display:flex;align-items:center;padding:25px}.preview-hero>div{max-width:75%}.preview-hero small{color:var(--pv-accent);font-weight:900;letter-spacing:.12em}.preview-hero h3{font-size:24px;line-height:1;margin:7px 0}.preview-hero p{font-size:9px;color:#d6dbe6}.preview-hero button{border:0;background:var(--pv-primary);color:#fff;border-radius:10px;padding:8px 12px;font-weight:800;font-size:9px}.preview-content{padding:18px}.preview-content h4{font-size:14px;margin:0 0 10px}.preview-products{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preview-products>div{background:var(--pv-surface);border-radius:var(--pv-radius);padding:7px;border:1px solid #0000000c;overflow:hidden}.preview-products em{display:block;aspect-ratio:1/1;border-radius:calc(var(--pv-radius) * .65);background:linear-gradient(135deg,color-mix(in srgb,var(--pv-primary) 18%,#e8ebf1),#edf0f5);margin-bottom:7px}.preview-products b,.preview-products span{display:block}.preview-products span{margin-top:3px;color:var(--pv-primary);font-weight:900}
.layout-reset{display:flex;justify-content:flex-end;margin-top:2px}
@media(max-width:1100px){.layout-columns{grid-template-columns:1fr}.layout-preview{position:static}.preview-browser{max-width:680px;margin:auto}}
@media(max-width:980px){body.page-home .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.page-home .home-featured .product-grid,body.page-shop .shop-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){body.page-home .home-featured .product-grid,body.page-shop .shop-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.preset-grid{grid-template-columns:1fr 1fr}.layout-intro{align-items:flex-start;flex-direction:column}.shopfilter-panel .shop-filter-layout{grid-template-columns:1fr!important}}
@media(max-width:520px){body.page-home .category-grid,body.page-home .home-featured .product-grid,body.page-shop .shop-product-grid{grid-template-columns:1fr!important}.preset-grid{grid-template-columns:1fr}.preview-products{grid-template-columns:repeat(2,1fr)}.preview-products>div:nth-child(3){display:none}}
body:not(.page-admin) .product-body p,body:not(.page-admin) .product-body small,body:not(.page-admin) .category-card span,body:not(.page-admin) .result-count,body:not(.page-admin) .sku,body:not(.page-admin) .lead,body:not(.page-admin) label{color:color-mix(in srgb,var(--text-main,#172033) 62%,transparent)}
body:not(.page-admin) .category-card,body:not(.page-admin) .product-card,body:not(.page-admin) .card{color:var(--text-main,#172033)}
/* ============================================================
Custom storefront background + centered purple promo box
============================================================ */
body:not(.page-admin){
background-image:linear-gradient(rgba(0,0,0,var(--page-background-overlay,0)),rgba(0,0,0,var(--page-background-overlay,0))),var(--page-background-image,none);
background-size:cover,var(--page-background-size,cover);
background-position:center,var(--page-background-position,center top);
background-repeat:no-repeat,var(--page-background-repeat,no-repeat);
background-attachment:fixed,var(--page-background-attachment,fixed);
}
body.has-page-background:not(.page-admin) .container.section{
background:color-mix(in srgb,var(--surface,#fff) 90%,transparent);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid color-mix(in srgb,var(--text-main,#172033) 9%,transparent);
border-radius:calc(var(--card-radius,18px) + 8px);
padding-left:clamp(18px,3vw,38px);
padding-right:clamp(18px,3vw,38px);
margin-top:34px;
margin-bottom:34px;
box-shadow:0 22px 65px #00000016;
}
.middle-promo-wrap{position:relative;z-index:6;margin:-62px 0 8px;padding:0 0 2px}
.middle-promo{
width:min(var(--middle-box-width,920px),100%);
margin:0 auto;
text-align:center;
color:var(--middle-box-text,#fff);
background:var(--middle-box-color,#7c3aed);
background:color-mix(in srgb,var(--middle-box-color,#7c3aed) var(--middle-box-opacity,94%),transparent);
border:1px solid color-mix(in srgb,var(--middle-box-text,#fff) 25%,transparent);
border-radius:calc(var(--card-radius,18px) + 8px);
padding:clamp(28px,4vw,48px) clamp(22px,5vw,64px);
box-shadow:0 24px 70px color-mix(in srgb,var(--middle-box-color,#7c3aed) 32%,transparent),0 10px 30px #00000024;
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
}
.middle-promo-kicker{display:block;font-size:.72rem;font-weight:950;letter-spacing:.18em;text-transform:uppercase;opacity:.82;margin-bottom:8px}
.middle-promo h2{color:inherit!important;font-size:clamp(1.9rem,4vw,3.25rem);line-height:1.03;letter-spacing:-.04em;margin:0 0 14px}
.middle-promo p{max-width:720px;margin:0 auto;color:inherit!important;opacity:.9;font-size:1.02rem}
.middle-promo-actions{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.middle-promo .btn.middle-primary{background:#fff;color:#3b176e!important;box-shadow:0 8px 22px #00000018}
.middle-promo .btn.middle-secondary{background:#ffffff14;color:var(--middle-box-text,#fff)!important;border:1px solid #ffffff66}
.middle-promo .btn:hover{transform:translateY(-2px)}
/* Admin controls for the custom background */
.current-background{display:flex;align-items:center;gap:14px;border:1px solid #e0e5ed;background:#f8fafc;border-radius:14px;padding:11px;margin:0 0 16px}
.current-background img{width:110px;height:72px;object-fit:cover;border-radius:10px;border:1px solid #dce2eb}
.current-background b,.current-background span{display:block}.current-background span{font-size:.78rem;color:#7a8494;margin-top:3px;word-break:break-all}
.preview-middlebox{width:78%;margin:-20px auto 0;position:relative;z-index:3;text-align:center;background:#7c3aed;color:#fff;border-radius:12px;padding:11px 14px;box-shadow:0 9px 24px #0003}
.preview-middlebox strong{font-size:12px;display:block}.preview-middlebox p{font-size:8px!important;margin:3px 0 0!important;color:inherit!important;opacity:.88}
@media(max-width:760px){
.middle-promo-wrap{margin:-34px 0 2px}
.middle-promo{padding:28px 20px}
body.has-page-background:not(.page-admin) .container.section{margin-top:20px;margin-bottom:20px}
}
/* Background visibility fix: uploaded design background must be visible on storefront */
body.has-page-background:not(.page-admin){
background-color:var(--body-bg,#f5f7fb);
background-image:linear-gradient(rgba(0,0,0,var(--page-background-overlay,0)),rgba(0,0,0,var(--page-background-overlay,0))),var(--page-background-image,none)!important;
background-size:cover,var(--page-background-size,cover)!important;
background-position:center,var(--page-background-position,center top)!important;
background-repeat:no-repeat,var(--page-background-repeat,no-repeat)!important;
background-attachment:fixed,var(--page-background-attachment,fixed)!important;
}
body.page-home.has-page-background main{background:transparent}
body.page-home.has-page-background .home-categories,
body.page-home.has-page-background .home-featured{
background:color-mix(in srgb,var(--surface,#fff) 86%,transparent);
}
/* Header/Hero and page background are deliberately separate. */
body.page-home.has-page-background .hero{
background-color:#111827;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:scroll;
}
/* ============================================================
Separate Header / Startbanner editor
Page background and hero image remain independent.
============================================================ */
body.page-home .hero{
min-height:var(--hero-height,520px)!important;
background-color:var(--hero-background-color,#111827);
background-image:linear-gradient(rgba(0,0,0,var(--hero-overlay,.42)),rgba(0,0,0,var(--hero-overlay,.42))),linear-gradient(135deg,#111827,#25314c);
background-size:cover,cover;
background-position:center,center;
background-repeat:no-repeat,no-repeat;
background-attachment:scroll,scroll;
}
body.page-home.has-hero-image .hero{
background-image:linear-gradient(rgba(0,0,0,var(--hero-overlay,.42)),rgba(0,0,0,var(--hero-overlay,.42))),var(--hero-background-image);
background-size:cover,var(--hero-background-size,cover);
background-position:center,var(--hero-background-position,center center);
background-repeat:no-repeat,no-repeat;
}
body.page-home .hero-inner{min-height:var(--hero-height,520px)!important}
body.page-home .hero-inner>div{max-width:var(--hero-content-width,720px)!important;width:100%}
body.page-home.hero-align-left .hero-inner{justify-content:flex-start;text-align:left}
body.page-home.hero-align-left .hero p{margin-left:0;margin-right:0}
body.page-home.hero-align-left .hero-actions{justify-content:flex-start}
body.page-home.hero-align-center .hero-inner{justify-content:center;text-align:center}
body.page-home.hero-align-center .hero p{margin-left:auto;margin-right:auto}
body.page-home.hero-align-center .hero-actions{justify-content:center}
body.page-home.hero-align-right .hero-inner{justify-content:flex-end;text-align:right}
body.page-home.hero-align-right .hero p{margin-left:auto;margin-right:0}
body.page-home.hero-align-right .hero-actions{justify-content:flex-end}
.header-editor{display:flex;flex-direction:column;gap:18px}
.header-editor-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);gap:18px;align-items:start}
.header-settings{display:flex;flex-direction:column;gap:18px}
.current-header-image{display:flex;align-items:center;gap:14px;border:1px solid #e0e5ed;background:#f8fafc;border-radius:14px;padding:11px;margin:0 0 16px}
.current-header-image img{width:180px;height:92px;object-fit:cover;border-radius:10px;border:1px solid #dce2eb}
.current-header-image b,.current-header-image span{display:block}.current-header-image span{font-size:.78rem;color:#7a8494;margin-top:3px;word-break:break-all}
.header-preview-card{position:sticky;top:98px}
.header-preview{--hp-overlay:.42;--hp-size:cover;--hp-position:center center;--hp-color:#111827;--hp-height:360px;min-height:var(--hp-height);border-radius:16px;overflow:hidden;color:#fff;display:flex;align-items:center;background-color:var(--hp-color);background-image:linear-gradient(rgba(0,0,0,var(--hp-overlay)),rgba(0,0,0,var(--hp-overlay))),var(--hp-image,linear-gradient(135deg,#111827,#25314c));background-size:cover,var(--hp-size);background-position:center,var(--hp-position);background-repeat:no-repeat,no-repeat;padding:26px}
.header-preview-inner{width:100%;max-width:76%;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.header-preview-inner small{font-weight:900;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.header-preview-inner strong{display:block;font-size:clamp(1.65rem,3vw,2.8rem);line-height:1.02;letter-spacing:-.04em}
.header-preview-inner p{color:#eef2f8;margin:12px 0 0;font-size:.92rem}
.header-preview-actions{display:flex;gap:8px;margin-top:17px;flex-wrap:wrap}.header-preview-actions span{background:var(--primary);padding:8px 12px;border-radius:10px;font-size:.78rem;font-weight:850}.header-preview-actions span.ghost{background:#ffffff20;border:1px solid #ffffff55}
.header-preview.align-center .header-preview-inner{margin:auto;align-items:center;text-align:center}.header-preview.align-right .header-preview-inner{margin-left:auto;align-items:flex-end;text-align:right}
.header-editor-link,.header-settings-note{border:1px dashed #cbd3df;background:#f8fafc;border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.header-editor-link b,.header-editor-link small,.header-settings-note b,.header-settings-note span{display:block}.header-editor-link small,.header-settings-note span{color:#7a8494}.header-editor-link .btn,.header-settings-note .btn{margin-left:auto}
@media(max-width:1100px){.header-editor-grid{grid-template-columns:1fr}.header-preview-card{position:static}.header-preview{max-width:820px}}
@media(max-width:760px){body.page-home .hero,body.page-home .hero-inner{min-height:var(--hero-mobile-height,420px)!important}.header-preview{min-height:300px}.current-header-image{align-items:flex-start}.current-header-image img{width:130px;height:78px}}
@media(max-width:520px){.header-preview{min-height:260px;padding:18px}.header-preview-inner{max-width:100%}.current-header-image{flex-direction:column}.current-header-image img{width:100%;height:140px}.header-editor-link .btn,.header-settings-note .btn{margin-left:0;width:100%}}
/* ---------------------------------------------------------
Header transparency + 20% compact update
The hero container itself is transparent. The uploaded image is
painted on a separate layer so "contain" keeps empty areas clear.
--------------------------------------------------------- */
body.page-home .hero{
position:relative;
isolation:isolate;
overflow:hidden;
background:transparent!important;
background-color:transparent!important;
background-image:none!important;
}
body.page-home .hero::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background-color:transparent;
background-image:none;
}
body.page-home.has-hero-image .hero::before{
background-image:var(--hero-background-image);
background-size:var(--hero-background-size,cover);
background-position:var(--hero-background-position,center center);
background-repeat:no-repeat;
filter:brightness(var(--hero-brightness,.58));
}
body.page-home .hero-inner{
position:relative;
z-index:1;
background:transparent!important;
}
.header-transparent-note{
min-height:56px;
display:flex;
flex-direction:column;
justify-content:center;
gap:3px;
padding:10px 12px;
border:1px dashed #cbd3df;
border-radius:12px;
background:transparent;
}
.header-transparent-note small{color:#7a8494;line-height:1.35}
.header-preview{
background-color:transparent!important;
background-image:none!important;
position:relative;
isolation:isolate;
}
.header-preview::before{
content:"";
position:absolute;
inset:0;
z-index:-1;
background-image:var(--hp-image,none);
background-size:var(--hp-size,cover);
background-position:var(--hp-position,center center);
background-repeat:no-repeat;
filter:brightness(var(--hp-brightness,.58));
}
/* ============================================================
Freely adjustable header width
Width can be percent or pixel based. Desktop/mobile values and
horizontal placement are controlled independently from Admin.
============================================================ */
body.page-home .hero{
width:var(--hero-width,100%);
max-width:none;
}
html,body{overflow-x:hidden}
body.page-home.hero-halign-left .hero{left:0;transform:none;margin-left:0;margin-right:0}
body.page-home.hero-halign-center .hero{left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
body.page-home.hero-halign-right .hero{left:100%;transform:translateX(-100%);margin-left:0;margin-right:0}
@media(max-width:760px){
body.page-home .hero{width:var(--hero-mobile-width,var(--hero-width,100%));max-width:100%}
body.page-home.hero-halign-left .hero,body.page-home.hero-halign-center .hero,body.page-home.hero-halign-right .hero{left:0;transform:none;margin-left:auto;margin-right:auto}
}
.header-width-control{border:1px solid #dfe4ec;border-radius:14px;padding:16px;background:#f8fafc}
.header-width-control h4{margin:0 0 4px;font-size:1rem}
.header-width-control>.hint{margin:0 0 14px}
.header-width-control .form-grid{margin-top:0}
.header-width-quick{display:flex;align-items:center;gap:6px;flex-wrap:wrap;align-self:end;padding-bottom:2px}
.header-width-quick span{width:100%;font-size:.78rem;font-weight:800;color:#667085}