/* ═══════════════════════════════════════════════════════════════════
Selltrove Storefront CSS v4.1 — Mobile-First, Fast, Customizable
═══════════════════════════════════════════════════════════════════ */
/* ── CSS Variables (overridden per-tenant via StoreTheme) ──────── */
:root {
--color-primary: #6366f1;
--color-primary-dark: #4f46e5;
--color-primary-light: #818cf8;
--color-secondary: #1f2937;
--color-accent: #f59e0b;
--color-success: #10b981;
--color-danger: #ef4444;
--color-warning: #f59e0b;
--color-info: #3b82f6;
--color-bg: #ffffff;
--color-surface: #f9fafb;
--color-border: #e5e7eb;
--color-text: #111827;
--color-text-secondary: #6b7280;
--color-text-muted: #9ca3af;
--font-heading: 'Inter', system-ui, -apple-system, sans-serif;
--font-body: 'Inter', system-ui, -apple-system, sans-serif;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.05);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,.07), 0 2px 4px -2px rgba(0,0,0,.05);
--shadow-lg: 0 10px 25px -3px rgba(0,0,0,.08), 0 4px 6px -4px rgba(0,0,0,.04);
--shadow-xl: 0 20px 40px -5px rgba(0,0,0,.1);
--transition: 200ms cubic-bezier(.4,0,.2,1);
--max-width: 1280px;
}
/* ── Reset & Base ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; font-size: 16px; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input,select,textarea { font-family: inherit; font-size: 1rem; }
ul,ol { list-style: none; }
/* ── Utilities ─────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 16px; }
@media(min-width:768px) { .container { padding: 0 24px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-center { text-align: center; }
/* ── Buttons ───────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; font-size: .875rem; font-weight: 600; border-radius: var(--radius-md); transition: all var(--transition); white-space: nowrap; }
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { opacity: .9; color: #fff; }
.btn-outline { border: 1.5px solid var(--color-border); color: var(--color-text); background: transparent; }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-sm { padding: 6px 14px; font-size: .8125rem; }
.btn-block { width: 100%; }
.btn:disabled,.btn.disabled { opacity: .5; pointer-events: none; }
/* ── Badges ────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: var(--radius-full); }
.badge-sale { background: var(--color-danger); color: #fff; }
.badge-new { background: var(--color-primary); color: #fff; }
.badge-soldout { background: var(--color-text-muted); color: #fff; }
.badge-low { background: var(--color-warning); color: #000; }
.badge-success { background: #d1fae5; color: #065f46; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-primary { background: #e0e7ff; color: #3730a3; }
.badge-danger { background: #fee2e2; color: #991b1b; }
.badge-secondary { background: #f3f4f6; color: #374151; }
/* ── Announcement Bar ──────────────────────────────────────────── */
.announcement-bar { background: var(--color-primary); color: #fff; padding: 8px 16px; text-align: center; font-size: .8125rem; font-weight: 500; position: relative; }
.announcement-bar p { margin: 0; }
.close-announcement { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.7); font-size: 1.25rem; background: none; border: none; }
/* ── Header ────────────────────────────────────────────────────── */
.store-header { background: #fff; border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; }
.header-container { display: flex; align-items: center; gap: 16px; padding: 12px 16px; max-width: var(--max-width); margin: 0 auto; }
@media(min-width:768px) { .header-container { padding: 14px 24px; } }
.header-logo { flex-shrink: 0; min-width: 0; }
.header-logo a { display: flex; align-items: center; }
.header-logo img { height: 32px; width: auto; max-width: 150px; object-fit: contain; display: block; }
@media(min-width:768px) { .header-logo img { height: 42px; max-width: 240px; } }
.logo-text { font-size: 1.25rem; font-weight: 800; color: var(--color-text); letter-spacing: -.02em; }
.logo-text:hover { color: var(--color-primary); }
.header-search { flex: 1; max-width: 480px; position: relative; display: none; }
@media(min-width:768px) { .header-search { display: block; } }
.search-form { display: flex; background: var(--color-surface); border: 1.5px solid transparent; border-radius: var(--radius-full); overflow: hidden; transition: border-color var(--transition); }
.search-form:focus-within { border-color: var(--color-primary); background: #fff; }
.search-form input { flex: 1; padding: 10px 16px; border: none; background: transparent; outline: none; font-size: .875rem; }
.search-form button { padding: 10px 14px; color: var(--color-text-muted); }
.search-form button svg { width: 18px; height: 18px; }
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header-actions a,.header-actions button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; color: var(--color-text-secondary); border-radius: var(--radius-md); transition: all var(--transition); position: relative; }
.header-actions a:hover,.header-actions button:hover { color: var(--color-primary); background: var(--color-surface); }
.header-actions svg { width: 22px; height: 22px; }
.header-actions span:not(.cart-count) { display: none; font-size: .8125rem; font-weight: 500; }
@media(min-width:1024px) { .header-actions span:not(.cart-count) { display: inline; } }
.cart-count { position: absolute; top: 2px; right: 2px; background: var(--color-primary); color: #fff; font-size: .65rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cart-count:empty,.cart-count[data-count="0"] { display: none; }
/* Mobile menu toggle */
.mobile-menu-toggle { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.mobile-menu-toggle span { width: 22px; height: 2px; background: var(--color-text); border-radius: 2px; transition: var(--transition); }
@media(min-width:768px) { .mobile-menu-toggle { display: none; } }
/* Navigation */
.main-nav { display: none; border-top: 1px solid var(--color-border); max-width: var(--max-width); margin: 0 auto; }
.main-nav.open { display: block; }
@media(min-width:768px) { .main-nav { display: block; } }
.nav-list { display: flex; flex-direction: column; }
@media(min-width:768px) { .nav-list { flex-direction: row; gap: 0; padding: 0 24px; } }
.nav-list li { position: relative; }
.nav-list a { display: block; padding: 12px 16px; font-size: .875rem; font-weight: 500; color: var(--color-text-secondary); transition: color var(--transition); }
@media(min-width:768px) { .nav-list a { padding: 10px 16px; } }
.nav-list a:hover,.nav-list a.active { color: var(--color-primary); }
/* Dropdown */
.has-dropdown { position: relative; }
.dropdown-toggle svg { width: 14px; height: 14px; vertical-align: middle; margin-left: 2px; }
.dropdown-menu { display: none; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); overflow: hidden; z-index: 50; }
@media(min-width:768px) { .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; } }
.has-dropdown:hover .dropdown-menu,.has-dropdown.open .dropdown-menu { display: block; }
.dropdown-menu a { padding: 10px 20px; font-size: .8125rem; }
.dropdown-menu a:hover { background: var(--color-surface); color: var(--color-primary); }
/* ── Mini Cart Sidebar ─────────────────────────────────────────── */
.mini-cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 200; opacity: 0; pointer-events: none; transition: opacity .3s; }
.mini-cart-overlay.open { opacity: 1; pointer-events: auto; }
/* v19.3 — positioning/transition for .mini-cart REMOVED from this file.
It used a right:-100% + transition:right model whose non-conflicting
properties survived later !important overrides, leaving the drawer at
width:410px translated off-canvas with nothing clipping the root — which
extended document scrollWidth and shifted every .container left.
The single source of truth is now store-additions.css (v19.3 block). */
.mini-cart-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--color-border); }
.mini-cart-header h3 { font-size: 1.125rem; font-weight: 700; }
.close-mini-cart { font-size: 1.5rem; color: var(--color-text-muted); padding: 4px; }
.mini-cart-items { flex: 1; overflow-y: auto; padding: 16px; }
.mini-cart-footer { padding: 20px; border-top: 1px solid var(--color-border); }
.mini-cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 12px; font-weight: 600; }
.mini-cart-footer .btn { margin-bottom: 8px; }
/* ── Store Main ────────────────────────────────────────────────── */
.store-main { min-height: 60vh; }
/* ── Hero ──────────────────────────────────────────────────────── */
.hero-section { position: relative; overflow: hidden; }
.hero-slide { min-height: 55vh; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; position: relative; }
.hero-gradient { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); }
.hero-slide::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.hero-gradient::after { display: none; }
.hero-content { position: relative; z-index: 2; text-align: center; padding: 40px 20px; max-width: 700px; }
.hero-content h1 { font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 16px; letter-spacing: -.02em; }
.hero-content p { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.85); margin-bottom: 28px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ── Trust Badges ──────────────────────────────────────────────── */
.trust-badges { border-bottom: 1px solid var(--color-border); }
.badges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 24px 0; }
@media(min-width:768px) { .badges-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.badge-item { display: flex; align-items: center; gap: 12px; }
.badge-item svg { width: 28px; height: 28px; color: var(--color-primary); flex-shrink: 0; }
.badge-item strong { display: block; font-size: .8125rem; color: var(--color-text); }
.badge-item span { font-size: .75rem; color: var(--color-text-muted); }
/* ── Section Headers ───────────────────────────────────────────── */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-top: 40px; }
.section-header h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; letter-spacing: -.01em; }
.section-header.center { justify-content: center; text-align: center; }
.view-all { font-size: .875rem; font-weight: 600; color: var(--color-primary); }
/* ── Product Grid ──────────────────────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 40px; }
@media(min-width:640px) { .products-grid { gap: 20px; } }
@media(min-width:768px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:1024px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }
.products-grid-3 { grid-template-columns: repeat(2, 1fr); }
@media(min-width:768px) { .products-grid-3 { grid-template-columns: repeat(3, 1fr); } }
/* ── Product Card ──────────────────────────────────────────────── */
.product-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-border); transition: all var(--transition); }
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: transparent; }
.product-card-image { position: relative; aspect-ratio: 1/1; overflow: hidden; background: var(--color-surface); }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-card-image img { transform: scale(1.06); }
.product-badges { position: absolute; top: 8px; left: 8px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.product-card-actions { position: absolute; bottom: 8px; right: 8px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(8px); transition: all .25s ease; z-index: 2; }
.product-card:hover .product-card-actions { opacity: 1; transform: translateY(0); }
.action-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: var(--shadow-md); color: var(--color-text-secondary); transition: all var(--transition); }
.action-btn:hover { background: var(--color-primary); color: #fff; }
.action-btn svg { width: 18px; height: 18px; }
.product-card-info { padding: 14px; }
.product-card-category { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); font-weight: 600; }
.product-card-title { margin: 4px 0 8px; }
.product-card-title a { font-size: .9rem; font-weight: 600; color: var(--color-text); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-title a:hover { color: var(--color-primary); }
.product-card-price { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.current-price { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.original-price { font-size: .8125rem; color: var(--color-text-muted); text-decoration: line-through; }
/* Star Rating */
.star-rating { display: flex; align-items: center; gap: 2px; }
.star-rating svg { width: 14px; height: 14px; }
.star-rating .filled { fill: var(--color-accent); color: var(--color-accent); }
.star-rating .half { fill: var(--color-accent); color: var(--color-accent); opacity: .6; }
.star-rating .empty { fill: #e5e7eb; color: #e5e7eb; }
.review-count { font-size: .75rem; color: var(--color-text-muted); margin-left: 4px; }
/* ── Categories Grid ───────────────────────────────────────────── */
.categories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 40px; }
@media(min-width:640px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:1024px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } }
.category-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid transparent; transition: all var(--transition); }
.category-card:hover { border-color: var(--color-primary); background: #fff; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.category-image { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin-bottom: 12px; background: var(--color-border); }
.category-image img { width: 100%; height: 100%; object-fit: cover; }
.category-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.category-placeholder svg { width: 28px; height: 28px; }
.category-card h3 { font-size: .875rem; font-weight: 600; color: var(--color-text); }
.category-card p { font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; }
/* ── Product Page ──────────────────────────────────────────────── */
.product-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px 0 48px; }
@media(min-width:768px) { .product-layout { grid-template-columns: 1fr 1fr; gap: 48px; } }
.product-gallery { position: relative; }
.main-image-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); aspect-ratio: 1/1; }
.main-image img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.no-image { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--color-text-muted); }
.no-image svg { width: 48px; height: 48px; margin-bottom: 8px; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; background: rgba(255,255,255,.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); z-index: 2; }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }
.gallery-nav svg { width: 20px; height: 20px; }
.gallery-thumbnails { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gallery-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; opacity: .6; transition: all var(--transition); }
.gallery-thumb.active,.gallery-thumb:hover { border-color: var(--color-primary); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info { }
.product-info .product-card-category { margin-bottom: 4px; }
.product-info h1 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.product-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.product-price-block { margin-bottom: 20px; }
.product-price-block .current-price { font-size: 1.75rem; font-weight: 800; }
.product-price-block .original-price { font-size: 1.1rem; }
.product-price-block .discount-tag { font-size: .8125rem; }
.stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); }
.stock-in { background: #d1fae5; color: #065f46; }
.stock-low { background: #fef3c7; color: #92400e; }
.stock-out { background: #fee2e2; color: #991b1b; }
.product-description { margin: 20px 0; font-size: .9375rem; line-height: 1.7; color: var(--color-text-secondary); }
.product-description p { margin-bottom: 12px; }
/* Variant selectors */
.variant-group { margin-bottom: 16px; }
.variant-group label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 8px; }
.variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-option { padding: 8px 18px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: all var(--transition); }
.variant-option:hover,.variant-option.selected { border-color: var(--color-primary); color: var(--color-primary); background: rgba(99,102,241,.05); }
.variant-option.out-of-stock { opacity: .4; text-decoration: line-through; pointer-events: none; }
/* Quantity & Add to cart */
.add-to-cart-section { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.quantity-selector { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-btn { width: 42px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--color-text-secondary); transition: all var(--transition); }
.qty-btn:hover { background: var(--color-surface); color: var(--color-primary); }
.qty-input { width: 50px; text-align: center; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); outline: none; font-weight: 600; font-size: .9375rem; -moz-appearance: textfield; }
.qty-input::-webkit-inner-spin-button,.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.add-cart-btn { flex: 1; min-width: 200px; }
.wishlist-btn-lg { width: 44px; height: 44px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); transition: all var(--transition); }
.wishlist-btn-lg:hover,.wishlist-btn-lg.active { color: var(--color-danger); border-color: var(--color-danger); }
.wishlist-btn-lg svg { width: 22px; height: 22px; }
/* ── Cart Page ─────────────────────────────────────────────────── */
.page-title { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; margin: 24px 0; letter-spacing: -.02em; }
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
@media(min-width:1024px) { .cart-layout { grid-template-columns: 1fr 380px; } }
.cart-header { display: none; font-size: .75rem; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--color-border); letter-spacing: .05em; }
@media(min-width:768px) { .cart-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 16px; } }
.cart-item { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
@media(min-width:768px) { .cart-item { grid-template-columns: 2fr 1fr 1fr 1fr auto; align-items: center; } }
.cart-item .col-product { display: flex; gap: 12px; grid-column: 1/-1; }
@media(min-width:768px) { .cart-item .col-product { grid-column: auto; } }
.item-image { width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); flex-shrink: 0; }
.item-image img { width: 100%; height: 100%; object-fit: cover; }
.item-name { font-weight: 600; font-size: .9375rem; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-options { font-size: .8125rem; color: var(--color-text-muted); margin-top: 4px; }
.item-options span { display: inline-block; margin-right: 12px; }
.low-stock-warning { display: block; font-size: .75rem; color: var(--color-warning); font-weight: 600; margin-top: 4px; }
.col-price,.col-total { font-weight: 600; }
.col-remove .remove-btn { padding: 8px; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.col-remove .remove-btn:hover { color: var(--color-danger); background: #fee2e2; }
.col-remove svg { width: 18px; height: 18px; }
.cart-actions { display: flex; gap: 12px; padding-top: 20px; flex-wrap: wrap; }
/* Cart Summary */
.summary-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 100px; }
.summary-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 20px; }
.coupon-form { display: flex; gap: 8px; margin-bottom: 16px; }
.coupon-form input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .875rem; outline: none; }
.coupon-form input:focus { border-color: var(--color-primary); }
.summary-lines { border-top: 1px solid var(--color-border); padding-top: 16px; }
.summary-line { display: flex; justify-content: space-between; padding: 8px 0; font-size: .9375rem; }
.summary-line.total { border-top: 2px solid var(--color-text); margin-top: 8px; padding-top: 16px; font-size: 1.125rem; font-weight: 700; }
.free-shipping { color: var(--color-success); font-weight: 600; }
.checkout-btn { margin-top: 20px; }
.free-shipping-progress { margin-top: 16px; padding: 12px; background: #fff; border-radius: var(--radius-md); }
.progress-bar { height: 6px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: 8px; }
.progress-fill { height: 100%; background: var(--color-success); border-radius: var(--radius-full); transition: width .4s ease; }
.free-shipping-progress p { font-size: .8125rem; color: var(--color-text-secondary); text-align: center; }
.free-shipping-achieved { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--color-success); font-weight: 600; margin-top: 16px; }
.free-shipping-achieved svg { width: 18px; height: 18px; }
.payment-methods { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .75rem; color: var(--color-text-muted); }
.payment-icons { display: flex; gap: 6px; }
.payment-icons img { height: 22px; }
.security-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .75rem; color: var(--color-text-muted); }
.security-note svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Empty Cart */
.empty-cart { text-align: center; padding: 60px 20px; }
.empty-cart-icon svg { width: 80px; height: 80px; color: var(--color-text-muted); margin: 0 auto 20px; }
.empty-cart h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.empty-cart p { color: var(--color-text-muted); margin-bottom: 24px; }
/* ── Checkout ──────────────────────────────────────────────────── */
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 48px; }
@media(min-width:1024px) { .checkout-layout { grid-template-columns: 1fr 400px; } }
.checkout-section { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 24px; }
.checkout-section .section-header { padding-top: 0; margin-bottom: 20px; }
.checkout-section h2 { font-size: 1.125rem; font-weight: 700; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 6px; color: var(--color-text); }
.form-group input,.form-group select,.form-group textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .9375rem; outline: none; transition: border-color var(--transition); background: #fff; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color: var(--color-primary); }
.form-group .required { color: var(--color-danger); }
.form-hint { font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; display: block; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: .875rem; cursor: pointer; }
.checkbox-label input { width: auto; margin: 0; }
.saved-addresses { display: grid; gap: 12px; margin-bottom: 16px; }
.address-card { display: flex; gap: 12px; padding: 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: border-color var(--transition); }
.address-card:has(input:checked) { border-color: var(--color-primary); background: rgba(99,102,241,.03); }
/* Payment methods */
.payment-option { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all var(--transition); }
.payment-option:has(input:checked) { border-color: var(--color-primary); background: rgba(99,102,241,.03); }
.payment-option input { width: auto; }
/* ── Account Pages ─────────────────────────────────────────────── */
.account-layout { display: grid; grid-template-columns: 1fr; gap: 32px; padding: 24px 0 48px; }
@media(min-width:768px) { .account-layout { grid-template-columns: 240px 1fr; } }
.account-nav ul { display: flex; overflow-x: auto; gap: 4px; }
@media(min-width:768px) { .account-nav ul { flex-direction: column; } }
.account-nav a { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: .875rem; font-weight: 500; color: var(--color-text-secondary); border-radius: var(--radius-md); white-space: nowrap; transition: all var(--transition); }
.account-nav a:hover,.account-nav a.active { background: var(--color-surface); color: var(--color-primary); }
.account-nav svg { width: 18px; height: 18px; }
.account-content { min-width: 0; }
.auth-page { max-width: 440px; margin: 48px auto; padding: 0 16px; }
.auth-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 32px; }
.auth-card h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 8px; text-align: center; }
.auth-card .subtitle { text-align: center; color: var(--color-text-muted); margin-bottom: 24px; font-size: .9375rem; }
.auth-divider { display: flex; align-items: center; gap: 16px; margin: 20px 0; font-size: .8125rem; color: var(--color-text-muted); }
.auth-divider::before,.auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
/* Orders table */
.orders-table { width: 100%; border-collapse: collapse; }
.orders-table th { padding: 12px; text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted); border-bottom: 2px solid var(--color-border); }
.orders-table td { padding: 12px; border-bottom: 1px solid var(--color-border); font-size: .9375rem; }
.orders-table tr:hover td { background: var(--color-surface); }
/* ── Breadcrumbs ───────────────────────────────────────────────── */
.breadcrumbs { padding: 12px 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: .8125rem; }
.breadcrumbs li::after { content: '/'; color: var(--color-text-muted); margin-left: 4px; }
.breadcrumbs li:last-child::after { display: none; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs .current { color: var(--color-text); font-weight: 500; }
/* ── Newsletter ────────────────────────────────────────────────── */
.newsletter-section { background: var(--color-surface); padding: 48px 0; margin-top: 40px; }
.newsletter-content { text-align: center; max-width: 520px; margin: 0 auto; }
.newsletter-content h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.newsletter-content > p { color: var(--color-text-muted); margin-bottom: 20px; }
.newsletter-form .input-group { display: flex; gap: 8px; }
.newsletter-form input[type="email"] { flex: 1; padding: 12px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: #fff; outline: none; }
.newsletter-form input:focus { border-color: var(--color-primary); }
.newsletter-disclaimer { font-size: .75rem; color: var(--color-text-muted); margin-top: 8px; }
/* ── Footer ────────────────────────────────────────────────────── */
.store-footer { background: var(--color-secondary); color: rgba(255,255,255,.7); margin-top: auto; }
.footer-container { max-width: var(--max-width); margin: 0 auto; padding: 48px 16px 24px; }
@media(min-width:768px) { .footer-container { padding: 48px 24px 24px; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media(min-width:640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(min-width:1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-section h4 { color: #fff; font-size: .9375rem; font-weight: 600; margin-bottom: 16px; }
.footer-section p { font-size: .8125rem; line-height: 1.6; }
.footer-section ul { display: flex; flex-direction: column; gap: 8px; }
.footer-section a { color: rgba(255,255,255,.6); font-size: .8125rem; transition: color var(--transition); }
.footer-section a:hover { color: #fff; }
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-links a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); border-radius: 50%; color: rgba(255,255,255,.6); transition: all var(--transition); }
.social-links a:hover { background: var(--color-primary); color: #fff; }
.social-links svg { width: 16px; height: 16px; }
.contact-info li { display: flex; gap: 8px; align-items: flex-start; }
.contact-info svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.footer-newsletter { border-top: 1px solid rgba(255,255,255,.1); padding: 32px 0; margin-top: 32px; text-align: center; }
.footer-newsletter h4 { color: #fff; }
.footer-newsletter p { font-size: .875rem; margin: 8px 0 16px; }
.footer-newsletter .newsletter-form { max-width: 440px; margin: 0 auto; }
.footer-newsletter input { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #fff; }
.footer-newsletter input::placeholder { color: rgba(255,255,255,.4); }
.footer-payments { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; }
.footer-payments img { height: 24px; opacity: .6; }
.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); font-size: .8125rem; text-align: center; }
@media(min-width:768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { color: rgba(255,255,255,.5); }
.footer-legal a:hover { color: #fff; }
.powered-by a { color: var(--color-primary-light); font-weight: 600; }
/* ── Promo Banner ──────────────────────────────────────────────── */
.promo-banner { padding: 40px 0; }
.promo-content { min-height: 280px; background-size: cover; background-position: center; border-radius: var(--radius-lg); display: flex; align-items: center; padding: 40px; position: relative; overflow: hidden; }
.promo-content::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.6), transparent); }
.promo-text { position: relative; z-index: 2; max-width: 400px; color: #fff; }
.promo-tag { display: inline-block; padding: 4px 12px; background: var(--color-accent); color: #000; font-size: .75rem; font-weight: 700; text-transform: uppercase; border-radius: var(--radius-full); margin-bottom: 12px; }
.promo-text h2 { font-size: 1.75rem; font-weight: 800; margin-bottom: 8px; }
.promo-text p { font-size: .9375rem; opacity: .85; margin-bottom: 20px; }
/* ── Testimonials ──────────────────────────────────────────────── */
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 20px; padding-bottom: 40px; }
@media(min-width:768px) { .testimonials-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial-card { padding: 24px; background: var(--color-surface); border-radius: var(--radius-lg); }
.testimonial-text { font-size: .9375rem; font-style: italic; line-height: 1.6; margin: 12px 0; color: var(--color-text-secondary); }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.testimonial-author strong { display: block; font-size: .8125rem; }
.testimonial-author span { font-size: .75rem; color: var(--color-text-muted); }
/* ── Search Page ───────────────────────────────────────────────── */
.search-header { padding: 32px 0 16px; }
.search-header h1 { font-size: 1.5rem; font-weight: 700; }
.search-header .result-count { color: var(--color-text-muted); font-size: .9375rem; margin-top: 8px; }
.mobile-search { display: block; padding: 12px 16px; }
@media(min-width:768px) { .mobile-search { display: none; } }
/* ── 404 Page ──────────────────────────────────────────────────── */
.error-page { text-align: center; padding: 80px 20px; }
.error-page h1 { font-size: 6rem; font-weight: 900; color: var(--color-primary); line-height: 1; }
.error-page h2 { font-size: 1.5rem; font-weight: 700; margin: 16px 0 8px; }
.error-page p { color: var(--color-text-muted); margin-bottom: 28px; }
/* ── Toast ─────────────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 14px 20px; background: var(--color-secondary); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: 10px; min-width: 260px; animation: slideIn .3s ease; }
.toast.success { background: var(--color-success); }
.toast.error { background: var(--color-danger); }
.toast.warning { background: var(--color-warning); color: #000; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* ── Modals ────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 250; display: none; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-content { background: #fff; border-radius: var(--radius-lg); max-width: 700px; width: 90%; max-height: 90vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; z-index: 2; }
/* ── Maintenance Page ──────────────────────────────────────────── */
.maintenance-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-surface); }
.maintenance-content { text-align: center; padding: 40px; }
.maintenance-content svg { width: 80px; height: 80px; color: var(--color-primary); margin-bottom: 24px; }
.maintenance-content h1 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
.maintenance-content p { color: var(--color-text-muted); max-width: 400px; margin: 0 auto; }
/* ── Loading / Skeleton ────────────────────────────────────────── */
.skeleton { background: linear-gradient(90deg, var(--color-surface) 25%, #e5e7eb 50%, var(--color-surface) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* ── Reviews ───────────────────────────────────────────────────── */
.reviews-section { padding: 40px 0; border-top: 1px solid var(--color-border); margin-top: 32px; }
.review-item { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.review-author { font-weight: 600; font-size: .9375rem; }
.review-date { font-size: .8125rem; color: var(--color-text-muted); }
.review-text { font-size: .9375rem; line-height: 1.6; color: var(--color-text-secondary); }
/* ── KYC / Store Status Banner ─────────────────────────────────── */
.store-status-banner { padding: 12px 16px; text-align: center; font-size: .8125rem; font-weight: 600; }
.store-status-banner.trial { background: #dbeafe; color: #1e40af; }
.store-status-banner.suspended { background: #fee2e2; color: #991b1b; }
/* ── Print ─────────────────────────────────────────────────────── */
@media print { .store-header,.store-footer,.mini-cart,.toast-container,.announcement-bar { display: none !important; } .store-main { padding: 0; } }
/* ── v4.3 FIXES ───────────────────────────────────────────────── */
/* Toast .show transition (replaces slideIn animation) */
.toast { transform: translateX(100%); opacity: 0; transition: all .3s ease; }
.toast.show { transform: translateX(0); opacity: 1; }
.toast.info { background: var(--color-info, #3b82f6); }
/* Auth form messages */
.auth-msg { padding: 12px 16px; border-radius: var(--radius-md); font-size: .875rem; margin-bottom: 16px; }
.auth-msg-error { background: #fee2e2; color: #991b1b; }
.auth-msg-ok { background: #d1fae5; color: #065f46; }
/* Spin animation for loading buttons */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* ═══════════════════════════════════════════════════════════════════
Selltrove v5.0 — NEW FEATURE STYLES
═══════════════════════════════════════════════════════════════════ */
/* ── Categories Grid ──────────────────────────────────────────── */
.categories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 40px; }
@media(min-width:640px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media(min-width:1024px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } }
.category-card { display: block; text-align: center; text-decoration: none; color: var(--color-text); transition: transform var(--transition); }
.category-card:hover { transform: translateY(-4px); color: var(--color-primary); }
.category-image { aspect-ratio: 1/1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); margin-bottom: 12px; }
.category-image img { width: 100%; height: 100%; object-fit: cover; }
.category-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.category-placeholder svg { width: 48px; height: 48px; color: var(--color-text-muted); }
.category-card h3 { font-size: .9375rem; font-weight: 600; }
/* ── Product Page Enhanced ────────────────────────────────────── */
.product-page { padding: 24px 0 48px; }
.product-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media(min-width:768px) { .product-layout { grid-template-columns: 1fr 1fr; gap: 48px; } }
.product-gallery { position: relative; }
.main-image-container { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-surface); }
.main-image img { width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.no-image { aspect-ratio: 1/1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--color-text-muted); }
.no-image svg { width: 64px; height: 64px; }
.gallery-thumbnails { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; }
.gallery-thumb { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; }
.gallery-thumb.active { border-color: var(--color-primary); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-info h1 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
.product-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.product-price-block { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.product-price-block .current-price { font-size: 1.5rem; font-weight: 800; }
.product-description { font-size: .9375rem; line-height: 1.7; color: var(--color-text-secondary); margin-bottom: 20px; }
.stock-status { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-full); margin-bottom: 16px; }
.stock-in { background: #d1fae5; color: #065f46; }
.stock-low { background: #fef3c7; color: #92400e; }
.stock-out { background: #fee2e2; color: #991b1b; }
.variant-group { margin-bottom: 16px; }
.variant-group label { font-size: .8125rem; font-weight: 600; display: block; margin-bottom: 8px; }
.variant-options { display: flex; gap: 8px; flex-wrap: wrap; }
.variant-option { padding: 8px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .8125rem; font-weight: 500; cursor: pointer; transition: all var(--transition); background: #fff; }
.variant-option:hover { border-color: var(--color-primary); }
.variant-option.selected { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.variant-option.out-of-stock { opacity: .4; pointer-events: none; text-decoration: line-through; }
.add-to-cart-section { display: flex; gap: 10px; align-items: center; margin: 20px 0; flex-wrap: wrap; }
.quantity-selector { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.qty-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: var(--color-text-secondary); background: var(--color-surface); border: none; }
.qty-btn:hover { background: var(--color-primary); color: #fff; }
.qty-input { width: 48px; height: 40px; text-align: center; border: none; font-weight: 600; font-size: .9375rem; outline: none; -moz-appearance: textfield; }
.qty-input::-webkit-inner-spin-button, .qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.add-cart-btn { flex: 1; min-width: 180px; }
.wishlist-btn-lg { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); transition: all var(--transition); }
.wishlist-btn-lg:hover { border-color: var(--color-danger); color: var(--color-danger); }
.wishlist-btn-lg svg { width: 22px; height: 22px; }
/* ── Cart Page Enhanced ───────────────────────────────────────── */
.cart-page { padding: 24px 0 48px; }
.cart-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media(min-width:1024px) { .cart-layout { grid-template-columns: 1fr 400px; } }
.cart-items-list { display: flex; flex-direction: column; gap: 16px; }
.cart-item { padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: all var(--transition); }
.col-product { display: flex; gap: 16px; }
.item-image { width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); flex-shrink: 0; }
.item-image img { width: 100%; height: 100%; object-fit: cover; }
.item-name { font-weight: 600; font-size: .9375rem; color: var(--color-text); display: block; }
.item-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.item-options span { font-size: .75rem; padding: 2px 8px; background: var(--color-surface); border-radius: var(--radius-full); color: var(--color-text-muted); }
.cart-actions { display: flex; justify-content: space-between; padding-top: 16px; }
.summary-card { padding: 24px; background: var(--color-surface); border-radius: var(--radius-lg); position: sticky; top: 100px; }
.summary-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 16px; }
.coupon-form { display: flex; gap: 8px; margin-bottom: 16px; }
.coupon-form input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); font-size: .875rem; outline: none; }
.coupon-form input:focus { border-color: var(--color-primary); }
/* ── Review Stars Picker ──────────────────────────────────────── */
.star-picker { display: flex; gap: 2px; }
.star-pick { transition: transform .15s; }
.star-pick:hover { transform: scale(1.2); }
/* ── Blog Cards ───────────────────────────────────────────────── */
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
/* ── Quick View Modal ─────────────────────────────────────────── */
.quick-view-modal { padding: 32px; }
.quick-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media(max-width:640px) { .quick-view-grid { grid-template-columns: 1fr; } }
/* ── Compare Badge (floating) ─────────────────────────────────── */
.compare-float { position: fixed; bottom: 20px; left: 20px; z-index: 150; }
.compare-float a { display: flex; align-items: center; gap: 8px; padding: 12px 20px; background: var(--color-secondary); color: #fff; border-radius: var(--radius-full); font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-lg); transition: all var(--transition); text-decoration: none; }
.compare-float a:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); color: #fff; }
/* ═══════════════════════════════════════════════════════════
Selltrove Storefront CSS v6.0 Additions
Append this to the existing store.css — it ADDS features without
touching existing selectors, so it's fully backward compatible.
═══════════════════════════════════════════════════════════ */
/* ── Spinner animation ────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin .6s linear infinite; }
/* ── Add-to-cart success state ────────────────────────────── */
.add-to-cart-btn.added,
.btn.added {
background: var(--color-success, #10b981) !important;
color: #fff !important;
}
.add-to-cart-btn.added::after,
.btn.added::after {
content: '✓';
display: inline-block;
margin-left: 4px;
}
/* ── Wishlist button active state ─────────────────────────── */
.wishlist-btn.active svg,
.wishlist-btn-lg.active svg { fill: var(--color-danger, #ef4444) !important; color: var(--color-danger, #ef4444) !important; }
.wishlist-btn, .wishlist-btn-lg { transition: transform .2s ease; }
/* ── Cookie consent banner ────────────────────────────────── */
.cookie-consent-banner {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #1a1a1a;
color: #fff;
padding: 16px 20px;
z-index: 9998;
transform: translateY(100%);
transition: transform .4s cubic-bezier(.4,0,.2,1);
box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.cookie-consent-banner.show { transform: translateY(0); }
.cookie-consent-inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.cookie-consent-text p { font-size: .875rem; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0; }
.cookie-consent-text strong { color: #fff; }
.cookie-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-consent-actions .btn-outline { border-color: rgba(255,255,255,.25); color: #fff; background: transparent; }
.cookie-consent-actions .btn-outline:hover { background: rgba(255,255,255,.08); color: #fff; }
@media (max-width: 640px) {
.cookie-consent-inner { flex-direction: column; align-items: stretch; }
.cookie-consent-actions { justify-content: flex-end; }
}
/* ── Back to top button ───────────────────────────────────── */
.back-to-top {
position: fixed;
bottom: 100px; right: 24px;
width: 44px; height: 44px;
border-radius: 50%;
background: var(--color-primary, #6366f1);
color: #fff;
border: none;
cursor: pointer;
box-shadow: 0 4px 16px rgba(0,0,0,.15);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all .3s;
display: flex;
align-items: center;
justify-content: center;
z-index: 998;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.2); }
/* ── Image lightbox ───────────────────────────────────────── */
.image-lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,.9);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .3s;
cursor: zoom-out;
}
.image-lightbox.open { opacity: 1; }
.image-lightbox img {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
}
.image-lightbox-close {
position: absolute;
top: 20px; right: 24px;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.15);
color: #fff;
border: none;
cursor: pointer;
font-size: 1.75rem;
line-height: 1;
padding: 0;
}
/* ── Product gallery zoom effect ──────────────────────────── */
.main-image-container.has-zoom .main-image { overflow: hidden; }
.main-image-container.has-zoom #mainProductImage { transition: transform .2s ease-out; }
/* ── Quick View modal ─────────────────────────────────────── */
.quickview-modal {
position: fixed; inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity .25s;
}
.quickview-modal.open { opacity: 1; }
.quickview-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.55);
}
.quickview-content {
position: relative;
background: #fff;
border-radius: 16px;
max-width: 800px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
animation: quickviewSlideUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes quickviewSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.quickview-close {
position: absolute;
top: 12px; right: 12px;
width: 36px; height: 36px;
border-radius: 50%;
background: rgba(0,0,0,.06);
border: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
z-index: 1;
}
.quickview-close:hover { background: rgba(0,0,0,.12); }
.quickview-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 24px;
}
.quickview-image img {
width: 100%;
border-radius: 10px;
aspect-ratio: 1;
object-fit: cover;
}
.quickview-info h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 12px;
}
.quickview-price {
font-size: 1.5rem;
font-weight: 800;
color: var(--color-primary, #6366f1);
}
@media (max-width: 640px) {
.quickview-grid { grid-template-columns: 1fr; padding: 16px; }
}
/* ── Share menu ───────────────────────────────────────────── */
.share-menu {
position: fixed; inset: 0;
z-index: 10000;
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity .25s;
}
.share-menu.open { opacity: 1; }
.share-menu-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,.5);
}
.share-menu-content {
position: relative;
background: #fff;
border-radius: 16px 16px 0 0;
width: 100%;
max-width: 500px;
padding: 24px;
animation: shareSlideUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes shareSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.share-menu-content h3 {
text-align: center;
margin-bottom: 20px;
font-size: 1rem;
font-weight: 700;
}
.share-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.share-buttons a,
.share-buttons button {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 12px 8px;
background: #f9fafb;
border-radius: 12px;
text-decoration: none;
color: #111;
border: none;
cursor: pointer;
font-size: .75rem;
font-weight: 500;
transition: all .2s;
}
.share-buttons a:hover,
.share-buttons button:hover {
background: var(--color-primary, #6366f1);
color: #fff;
}
/* ── Mobile menu overlay ──────────────────────────────────── */
.mobile-menu-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 90;
opacity: 0;
visibility: hidden;
transition: all .3s;
}
.mobile-menu-overlay.open { opacity: 1; visibility: visible; }
/* ── Product filters sidebar ──────────────────────────────── */
.products-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 32px;
align-items: start;
}
.products-filter-sidebar {
position: sticky;
top: 100px;
background: #fff;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: var(--radius-lg, 16px);
padding: 20px;
}
.products-filter-sidebar h3 {
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-text-muted, #9ca3af);
margin-bottom: 12px;
font-weight: 700;
}
.filter-group { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.filter-group:last-child { border-bottom: none; padding-bottom: 0; }
.filter-group label {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: .875rem;
cursor: pointer;
color: var(--color-text, #111827);
}
.filter-group input[type="checkbox"],
.filter-group input[type="radio"] { accent-color: var(--color-primary, #6366f1); }
.filter-group .price-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.filter-group .price-inputs input {
padding: 8px 12px;
border: 1px solid var(--color-border, #e5e7eb);
border-radius: 8px;
font-size: .875rem;
width: 100%;
}
.filter-toggle-mobile {
display: none;
width: 100%;
padding: 12px 16px;
background: var(--color-primary, #6366f1);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 600;
margin-bottom: 16px;
cursor: pointer;
}
@media (max-width: 900px) {
.products-layout { grid-template-columns: 1fr; }
.filter-toggle-mobile { display: flex; align-items: center; justify-content: center; gap: 8px; }
.products-filter-sidebar {
position: fixed;
top: 0; left: 0; bottom: 0;
width: 85%;
max-width: 320px;
z-index: 200;
transform: translateX(-100%);
transition: transform .3s;
overflow-y: auto;
border-radius: 0;
border: none;
}
.products-filter-sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.15); }
body.filters-open { overflow: hidden; }
body.filters-open::before {
content: '';
position: fixed; inset: 0;
background: rgba(0,0,0,.5);
z-index: 199;
}
}
/* ── 404 page ─────────────────────────────────────────────── */
.error-page {
max-width: 500px;
margin: 80px auto;
padding: 40px 20px;
text-align: center;
}
.error-page h1 {
font-size: 8rem;
font-weight: 900;
color: var(--color-primary, #6366f1);
line-height: 1;
margin-bottom: 8px;
}
.error-page h2 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 12px;
}
.error-page p {
color: var(--color-text-secondary, #6b7280);
margin-bottom: 24px;
}
/* ── Recently viewed ──────────────────────────────────────── */
#recentlyViewedContainer { margin-top: 48px; }
/* ── Product card hover enhancement ──────────────────────── */
.product-card-actions {
position: absolute;
top: 12px; right: 12px;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
transform: translateX(10px);
transition: all .2s;
}
.product-card:hover .product-card-actions { opacity: 1; transform: translateX(0); }
@media (hover: none) {
.product-card-actions { opacity: 1; transform: translateX(0); }
}
/* ── Better mobile checkout ──────────────────────────────── */
@media (max-width: 767px) {
.checkout-layout {
display: flex !important;
flex-direction: column;
}
.checkout-main { order: 1; }
.cart-summary { order: 2; }
.summary-card { position: static !important; }
}
/* ── Continue as guest banner ────────────────────────────── */
.guest-banner {
padding: 16px;
background: linear-gradient(to right, #f0fdf4, #dcfce7);
border-left: 3px solid #10b981;
border-radius: 8px;
margin-bottom: 16px;
display: flex;
gap: 12px;
align-items: flex-start;
}
.guest-banner-icon {
width: 32px; height: 32px;
border-radius: 50%;
background: #10b981;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.guest-banner-text p { margin: 0; font-size: .875rem; line-height: 1.5; }
.guest-banner-text strong { color: #065f46; }
/* ── Toast container positioning ─────────────────────────── */
.toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
max-width: calc(100vw - 40px);
}
.toast {
padding: 12px 16px;
border-radius: 10px;
background: #111;
color: #fff;
font-size: .875rem;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,.15);
opacity: 0;
transform: translateX(20px);
transition: all .3s cubic-bezier(.4,0,.2,1);
min-width: 200px;
max-width: 360px;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { background: #10b981; }
.toast.error { background: #ef4444; }
.toast.info { background: #3b82f6; }
.toast.warning { background: #f59e0b; color: #000; }
/* ==========================================================================
* v19 MOBILE FIXES — appended; loads after store.css so these win.
* Fixes: invisible mobile-menu overlay/drawer, hamburger robustness,
* duplicate/conflicting gallery rules, and product-page responsiveness.
* ========================================================================== */
/* --- Mobile menu: the JS creates .mobile-menu-overlay but store.css never
styled it, and an open .main-nav just dumped inline with no drawer. Make it
a real slide-in drawer with a dimmed backdrop. --- */
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(15,40,40,.5);opacity:0;visibility:hidden;
transition:opacity .3s;z-index:140}
.mobile-menu-overlay.open{opacity:1;visibility:visible}
@media(max-width:767px){
/* Hamburger: force-visible + tappable, immune to theme overrides */
.mobile-menu-toggle{display:flex !important;align-items:center;justify-content:center;
width:42px;height:42px;flex-direction:column;gap:5px;padding:9px;background:transparent;border:0;cursor:pointer}
.mobile-menu-toggle span{display:block;width:22px;height:2px;border-radius:2px;
background:var(--color-text,#111827);transition:transform .25s,opacity .25s}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Slide-in nav drawer instead of inline block */
.main-nav{position:fixed;top:0;right:0;height:100dvh;width:280px;max-width:84vw;background:#fff;
border-top:0;box-shadow:-16px 0 44px -22px rgba(15,40,40,.5);
transform:translateX(100%);transition:transform .3s cubic-bezier(.22,1,.36,1);
z-index:150;overflow-y:auto;display:block;padding:64px 0 24px}
.main-nav.open{transform:translateX(0)}
.nav-list{flex-direction:column;gap:0;padding:0}
.nav-list a{padding:14px 22px;font-size:.95rem;border-bottom:1px solid var(--color-border,#e5e7eb)}
.has-dropdown .dropdown-menu{display:none;background:var(--color-surface,#f9fafb)}
.has-dropdown.open .dropdown-menu{display:block}
.has-dropdown.open .dropdown-toggle svg{transform:rotate(180deg)}
.has-dropdown .dropdown-toggle svg{transition:transform .2s}
}
/* --- Product gallery: store.css defines these selectors twice with
conflicting rules. Pin a single, correct behaviour so the main image is
one square, contained shot and never appears oversized/duplicated as the
page scrolls on mobile. --- */
.product-gallery .main-image-container{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius-lg,12px);background:var(--color-surface,#f9fafb)}
.product-gallery .main-image{width:100%;height:100%}
.product-gallery .main-image > picture,
.product-gallery .main-image > img,
.product-gallery .main-image picture img{display:block;width:100%;height:100%;object-fit:contain}
/* If the image helper ever emits more than one ![]()
/, only show the
first — kills any duplicate large image. */
.product-gallery .main-image > *:not(:first-child){display:none !important}
.gallery-thumbnails{display:flex;gap:8px;margin-top:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gallery-thumb{width:64px;height:64px;flex:0 0 64px;border-radius:var(--radius-sm,8px);overflow:hidden;border:2px solid transparent;cursor:pointer}
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
/* --- Product page responsiveness on small screens --- */
@media(max-width:767px){
.product-layout{grid-template-columns:1fr;gap:24px}
.product-info h1{font-size:1.35rem;line-height:1.25}
.add-to-cart-section{flex-wrap:wrap;gap:10px}
.add-to-cart-section .add-cart-btn{flex:1 1 auto;min-height:48px}
.quantity-selector .qty-btn{min-width:42px;min-height:42px}
.variant-options{display:flex;flex-wrap:wrap;gap:8px}
.variant-option{min-height:42px}
.review-summary{gap:20px}
/* Stop wide inline-styled blocks from overflowing the viewport */
.product-page .container,.reviews-section .container{overflow-x:hidden}
}
/* Tap-target floor for interactive controls across the storefront */
@media(max-width:767px){
.header-actions a,.header-actions button{min-width:42px;min-height:42px}
}
/* v19.3 — the v19.1 block that lived here was a byte-identical duplicate of
the one in store-additions.css. Duplicated !important blocks across two
files are why this bug was patched three times. Single copy now lives in
store-additions.css only. */