/* =============================================================================
   Velorex Music — storefront page styles
   Used by: index.html (and only index.html — the 5 static pages have their own
            tiny inline styles for the navbar/glass-card pattern they use).

   This file is the bulk of what used to live in index.html's inline <style>
   block. It assumes:
     - src/styles/tokens.css       (CSS variables)
     - src/styles/base.css         (reset + body + scrollbar)
     - src/styles/components/      (buttons, forms, modal, payment-modal, toast)
   are loaded BEFORE this file. The cascade depends on it: page rules win
   over component defaults only because they appear later in document order.

   Sections in this file (search by header):
     - Light-theme component overrides
     - Navbar + hamburger + dropdown
     - Breadcrumbs
     - Hero
     - Sections + container
     - Product cards + grid
     - Categories grid
     - Filters sidebar
     - Products page layout
     - Product detail
     - Cart
     - Profile + orders + status stepper
     - Admin embed (legacy — predates the standalone admin panel)
     - Page hero (static-page-style headers)
     - Footer
     - Utility helpers
     - Responsive (1024 / 768 / 480)
   ============================================================================= */

/* ---- Light-theme overrides for page-level components ---------------------- */
[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.9); border-bottom-color: #f1f5f9; }
[data-theme="light"] .hero { background: #fdfbff; }
[data-theme="light"] .hero-bg { background: radial-gradient(ellipse at 70% 50%, rgba(255, 77, 0, 0.05) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(15, 23, 42, 0.03) 0%, transparent 50%); }
[data-theme="light"] .section-alt { background: #f8fafc; }
[data-theme="light"] .product-card:hover { box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); border-color: var(--secondary); }
[data-theme="light"] .quick-action-btn { background: #ffffff; color: var(--text); border: 1px solid var(--border); }
[data-theme="light"] .dropdown-menu { background: #ffffff; border-color: #f1f5f9; }
[data-theme="light"] .cart-item { background: #ffffff; border-color: #f1f5f9; }
[data-theme="light"] .admin-sidebar { background: #ffffff; border-right-color: #f1f5f9; }
[data-theme="light"] .admin-nav-item:hover, [data-theme="light"] .admin-nav-item.active { background: #f1f5f9; color: var(--secondary); }
[data-theme="light"] .admin-panel { background: #f8fafc; }
[data-theme="light"] .admin-card { background: #ffffff; border-color: #f1f5f9; box-shadow: var(--shadow); }

/* ---- Navbar + hamburger + dropdown --------------------------------------- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--glass); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem; height: 70px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
body { padding-top: 70px; }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; z-index: 1001; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }
.navbar-brand { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.navbar-brand .logo-icon { width: 40px; height: 40px; background: var(--orange-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 0 15px rgba(255, 107, 53, 0.4); }
.navbar-brand .brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.navbar-nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: var(--transition); white-space: nowrap; }
.nav-link:hover, .nav-link.active { color: var(--text); background: rgba(255, 107, 53, 0.1); }
.nav-link .arrow { font-size: 0.6rem; transition: transform 0.2s; }
.nav-item:hover .arrow { transform: rotate(180deg); }

.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition); overflow: hidden; }
.nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; font-size: 0.875rem; color: var(--text-muted); transition: var(--transition); }
.dropdown-item:hover { background: rgba(255, 107, 53, 0.1); color: var(--secondary); padding-left: 1.5rem; }
.dropdown-divider { height: 1px; background: var(--border); margin: 0.25rem 0; }

.navbar-search { flex: 1; max-width: 400px; position: relative; }
.navbar-search input { width: 100%; padding: 0.55rem 1rem 0.55rem 2.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.875rem; transition: var(--transition); }
.navbar-search input::placeholder { color: var(--text-muted); }
.navbar-search input:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15); }
.navbar-search .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 0.875rem; }

.navbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.nav-action-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--text-muted); font-size: 1.1rem; transition: var(--transition); }
.nav-action-btn:hover { background: rgba(255, 107, 53, 0.1); color: var(--secondary); }
.cart-badge { position: absolute; top: -4px; right: -4px; background: var(--secondary); color: white; font-size: 0.65rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; display: none; }
.cart-badge.visible { display: flex; }
/* Second .hamburger declaration kept from original — overrides padding only when present */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: var(--transition); }

.back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--orange-gradient); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4); }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255, 107, 53, 0.6); }

/* ---- Breadcrumbs --------------------------------------------------------- */
.breadcrumbs-container { max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; font-size: 0.85rem; color: var(--text-muted); }
.breadcrumbs { display: flex; gap: 0.5rem; align-items: center; list-style: none; }
.breadcrumb-item:not(:last-child)::after { content: '\f105'; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: 0.5rem; font-size: 0.7rem; opacity: 0.5; }
.breadcrumb-item a { transition: var(--transition); }
.breadcrumb-item a:hover { color: var(--secondary); }
.breadcrumb-item.active { color: var(--text); font-weight: 600; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { min-height: 85vh; display: flex; align-items: center; position: relative; overflow: hidden; background: var(--primary); }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(83, 52, 131, 0.4) 0%, transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(255, 107, 53, 0.15) 0%, transparent 50%); }
.hero-vinyl-decor { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: 450px; height: 450px; opacity: 0.15; }
.hero-vinyl-decor svg { width: 100%; height: 100%; animation: spin 20s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.hero-container { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 4rem 2rem; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
.hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 215, 0, 0.1); border: 1px solid rgba(255, 215, 0, 0.3); color: var(--accent); padding: 0.4rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.5rem; }
.hero-title { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; }
.hero-title .highlight { background: var(--orange-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-desc { color: var(--text-muted); font-size: 1.1rem; max-width: 480px; margin-bottom: 2.5rem; line-height: 1.8; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 2rem; margin-top: 3rem; flex-wrap: wrap; }
.stat-item { text-align: left; }
.stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.vinyl-showcase { position: relative; width: 380px; height: 380px; }
.vinyl-record { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, #1a1a1a 0deg, #2a2a2a 10deg, #1a1a1a 20deg, #333 30deg, #1a1a1a 40deg, #2a2a2a 50deg, #1a1a1a 60deg, #333 70deg, #1a1a1a 80deg, #2a2a2a 90deg, #1a1a1a 100deg, #333 110deg, #1a1a1a 120deg, #2a2a2a 130deg, #1a1a1a 140deg, #333 150deg, #1a1a1a 160deg, #2a2a2a 170deg, #1a1a1a 180deg, #333 190deg, #1a1a1a 200deg, #2a2a2a 210deg, #1a1a1a 220deg, #333 230deg, #1a1a1a 240deg, #2a2a2a 250deg, #1a1a1a 260deg, #333 270deg, #1a1a1a 280deg, #2a2a2a 290deg, #1a1a1a 300deg, #333 310deg, #1a1a1a 320deg, #2a2a2a 330deg, #1a1a1a 340deg, #333 350deg, #1a1a1a 360deg); animation: spin 8s linear infinite; box-shadow: 0 0 60px rgba(255, 107, 53, 0.3), 0 0 120px rgba(83, 52, 131, 0.2); display: flex; align-items: center; justify-content: center; }
.vinyl-label { width: 35%; height: 35%; border-radius: 50%; background: var(--orange-gradient); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--font-display); color: white; font-size: 0.6rem; text-align: center; font-weight: 700; }
.vinyl-label .label-title { font-size: 0.75rem; }
.vinyl-label .label-sub { font-size: 0.55rem; opacity: 0.8; }

/* ---- Sections + container ------------------------------------------------ */
.section { padding: 5rem 0; }
.section-alt { background: var(--surface); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; flex-wrap: wrap; gap: 1rem; }
.section-title { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; }
.section-title span { background: var(--orange-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-subtitle { color: var(--text-muted); margin-top: 0.5rem; font-size: 0.95rem; }

/* ---- Product cards + grid ----------------------------------------------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-rows: 1fr; gap: 1.5rem; }
.product-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); position: relative; display: flex; flex-direction: column; height: 100%; }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); border-color: rgba(255, 107, 53, 0.3); }
.product-card-image { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface2); }
.product-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-card-image img { transform: scale(1.08); }
.product-badge { position: absolute; top: 0.75rem; left: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-new { background: var(--success); color: #001a15; }
.badge-hot { background: var(--secondary); color: white; }
.badge-upcoming { background: var(--accent); color: var(--primary); }
.badge-sale { background: var(--danger); color: white; }
.product-card-actions { position: absolute; top: 0.75rem; right: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; opacity: 0; transform: translateX(10px); transition: var(--transition); }
.product-card:hover .product-card-actions { opacity: 1; transform: translateX(0); }
.quick-action-btn { width: 34px; height: 34px; border-radius: 8px; background: rgba(13, 13, 13, 0.9); color: var(--text); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.quick-action-btn:hover { background: var(--secondary); color: white; }
.product-card-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.product-category-tag { font-size: 0.72rem; color: var(--secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
/* Title + artist both clamped to 2 lines AND reserved at the 2-line height.
   Without the min-height, the CSS Grid (align-items: stretch by default)
   makes shorter cards balloon out vertically to match the tallest card in
   the row — most visible when one product has a long actor list (e.g.
   "Khamoshi/Anupama" with 8 performers): the OTHER cards in that row
   inherit the height and show a big blank gap between rating and price.
   Fixing the heights here keeps every card in a row visually identical
   regardless of content length. */
.product-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  line-height: 1.3;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em; /* 2 lines × 1.3 line-height */
}
.product-artist {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em; /* 2 lines × 1.4 line-height */
}
.product-rating { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; min-height: 1.2rem; }
.stars { color: var(--accent); font-size: 0.75rem; }
.rating-count { font-size: 0.75rem; color: var(--text-muted); }
.product-price-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.product-price { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.product-price-original { font-size: 0.8rem; color: var(--text-muted); text-decoration: line-through; margin-left: 0.4rem; }
.product-card-footer { padding: 0 1.25rem 1.25rem; }

/* ---- Categories grid ---------------------------------------------------- */
.categories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.category-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; cursor: pointer; transition: var(--transition); }
.category-card:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.category-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.category-card:hover .category-card-bg { transform: scale(1.05); }
.category-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 13, 13, 0.9) 0%, rgba(13, 13, 13, 0.3) 60%, transparent 100%); }
.category-card-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; color: #ffffff; z-index: 2; }
.category-card-icon { font-size: 2rem; margin-bottom: 0.5rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
.category-card-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: #ffffff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.category-card-count { font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); margin-top: 0.25rem; font-weight: 500; }

/* ---- Filters sidebar (products page) ------------------------------------ */
/* Desktop (≥1024px): sticky left sidebar next to the grid. Mobile/tablet
   (≤1023px): the sidebar is hidden via display:none on its container, and
   filtering happens through an inline horizontal chip strip + per-category
   popover (see the responsive block at the bottom of this file). JS moves
   the .filter-section DOM nodes from the sidebar into the popover on tap,
   which keeps applyFilters() — which queries inputs by name — working
   without any rewiring. */
.filters-sidebar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; position: sticky; top: 90px; height: fit-content; }

/* Chip strip + popover (D pattern) — hidden by default, the ≤1023px block
   below switches them on. */
.filter-chips-bar { display: none; }
.filter-popover { display: none; }
.filter-popover-backdrop { display: none; }
.filter-section { margin-bottom: 2rem; }
.filter-section:last-child { margin-bottom: 0; }
.filter-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.filter-options { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-option { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.4rem 0.6rem; border-radius: 8px; transition: var(--transition); font-size: 0.875rem; }
.filter-option:hover { background: rgba(255, 107, 53, 0.1); color: var(--secondary); }
.filter-option input[type="checkbox"], .filter-option input[type="radio"] { accent-color: var(--secondary); width: 16px; height: 16px; }
.filter-count { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); background: var(--card-bg); padding: 0.1rem 0.5rem; border-radius: 50px; }

.filter-section-collapsible .filter-options { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; }
.filter-section-collapsible .filter-options::-webkit-scrollbar { width: 4px; }
.filter-section-collapsible .filter-options::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 2px; }
.people-search-input { width: 100%; padding: 0.4rem 0.75rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.8rem; margin-bottom: 0.75rem; transition: var(--transition); }
.people-search-input:focus { outline: none; border-color: var(--secondary); }
.people-search-input::placeholder { color: var(--text-muted); }

/* ---- Products page layout + toolbar ------------------------------------- */
.products-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.products-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.products-count { color: var(--text-muted); font-size: 0.875rem; }
.sort-select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0.5rem 1rem; font-size: 0.875rem; cursor: pointer; }
.sort-select:focus { outline: none; border-color: var(--secondary); }
.sort-select option { background: var(--surface); }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.filter-tag { display: flex; align-items: center; gap: 0.4rem; background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.3); color: var(--secondary); padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.78rem; }
.filter-tag-remove { cursor: pointer; opacity: 0.6; }
.filter-tag-remove:hover { opacity: 1; }

/* ---- Product detail ----------------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1.1fr 0.95fr; gap: 3rem; align-items: start; padding-top: 0.5rem; }
.product-detail-gallery { position: sticky; top: 90px; align-self: start; }
.product-detail-main-image { border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); aspect-ratio: 1; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.08); }
.product-detail-main-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.product-detail-main-image:hover img { transform: scale(1.03); }
.product-detail-thumbs { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.product-detail-thumb { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; flex-shrink: 0; }
.product-detail-thumb:hover { transform: translateY(-1px); border-color: var(--accent); }
.product-detail-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-detail-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.12); }
.product-detail-info { display: flex; flex-direction: column; gap: 1rem; }
.product-detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.product-detail-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.product-detail-pill { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); color: var(--text-muted); padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.product-detail-subtitle { color: var(--text-muted); margin-bottom: 0.5rem; }
.product-detail-price-block { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.product-detail-price-block > div { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.product-detail-price-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.product-detail-price { font-size: clamp(2.25rem, 3vw, 3rem); font-weight: 900; letter-spacing: -0.04em; color: var(--text); }
.product-detail-price-original { color: var(--text-muted); font-size: 0.95rem; text-decoration: line-through; margin-left: 0.5rem; }
.product-detail-discount { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 0.85rem; background: #10b981; color: white; border-radius: 999px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; }
.product-detail-availability { color: var(--text-muted); font-size: 0.95rem; }
.product-detail-actions { display: grid; gap: 1rem; }
.product-detail-actions .product-actions-group { display: flex; gap: 1rem; flex-wrap: wrap; }
.product-detail-actions .btn { min-width: 160px; }
.quantity-control { display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; width: fit-content; }
.qty-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--text); cursor: pointer; transition: var(--transition); }
.qty-btn:hover { background: rgba(255, 107, 53, 0.12); color: var(--secondary); }
.qty-display { width: 52px; text-align: center; font-weight: 700; border-left: 1px solid var(--border); border-right: 1px solid var(--border); padding: 0 0.5rem; line-height: 44px; color: var(--text); }
.product-detail-footnote { padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-muted); font-size: 0.95rem; display: grid; gap: 0.5rem; }
.product-detail-footnote div { display: flex; gap: 0.5rem; align-items: center; }
.product-detail-desc { color: var(--text-muted); line-height: 1.85; margin-bottom: 1rem; }
.product-specs { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-top: 1rem; }
.specs-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1rem; }
.spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.spec-row:last-child { border-bottom: none; }
.spec-label { font-weight: 700; color: var(--text); }
.spec-value { color: var(--text-muted); text-align: right; }
.track-list { margin-top: 1.5rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.track-side { margin-top: 1rem; }
.track-side h3 { margin: 0.75rem 0 0.5rem; font-size: 0.95rem; letter-spacing: 0.05em; color: var(--text); }
.track-side ul { margin: 0.5rem 0 0 1.25rem; color: var(--text-muted); list-style-type: disc; }
.track-side li { margin-bottom: 0.5rem; }

.price-comparison { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-top: 1rem; }
.price-comparison-title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.price-platforms { display: grid; gap: 0.75rem; }
.price-platform { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; transition: var(--transition); }
.price-platform:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 107, 53, 0.2); }
.platform-info { display: flex; align-items: center; gap: 0.75rem; }
.platform-logo { width: 32px; height: 32px; border-radius: 6px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.platform-details h4 { font-size: 0.9rem; font-weight: 600; color: var(--text); margin: 0; }
.platform-details span { font-size: 0.8rem; color: var(--text-muted); }
.platform-price { text-align: right; }
.platform-price .price { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.platform-price .savings { font-size: 0.8rem; color: var(--success); font-weight: 600; }
.platform-price .best-price { background: var(--success); color: white; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.25rem; display: inline-block; }

@media (max-width: 980px) {
  .product-detail { grid-template-columns: 1fr; }
  .product-detail-gallery { position: static; }
}

/* ---- Cart --------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; }
.cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 1.5rem; align-items: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; transition: var(--transition); }
.cart-item:hover { border-color: rgba(255, 107, 53, 0.3); }
.cart-item-image { width: 100px; height: 100px; border-radius: var(--radius); overflow: hidden; flex-shrink: 0; }
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.cart-item-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.cart-item-qty { display: flex; align-items: center; gap: 0.5rem; }
.cart-qty-btn { width: 28px; height: 28px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); }
.cart-qty-btn:hover { background: rgba(255, 107, 53, 0.1); border-color: var(--secondary); color: var(--secondary); }
.cart-qty-num { font-weight: 600; min-width: 24px; text-align: center; }
.cart-item-price { text-align: right; min-width: 100px; }
.cart-item-price .price { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.cart-item-price .unit-price { font-size: 0.75rem; color: var(--text-muted); }
.cart-item-remove { color: var(--text-muted); font-size: 1rem; margin-top: 0.5rem; cursor: pointer; transition: var(--transition); }
.cart-item-remove:hover { color: var(--danger); }
.cart-items-list { display: flex; flex-direction: column; gap: 1rem; }
.cart-summary { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; position: sticky; top: 90px; }
.summary-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.summary-row { display: flex; justify-content: space-between; padding: 0.6rem 0; font-size: 0.9rem; color: var(--text-muted); }
.summary-row.total { font-size: 1.1rem; font-weight: 700; color: var(--text); border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 1rem; }
.summary-row.total .amount { color: var(--accent); font-size: 1.25rem; }
.coupon-input { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.coupon-input input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 0.6rem 1rem; font-size: 0.875rem; }
.coupon-input input:focus { outline: none; border-color: var(--secondary); }
.coupon-input input::placeholder { color: var(--text-muted); }
.empty-cart { text-align: center; padding: 5rem 2rem; grid-column: 1 / -1; }
.empty-cart-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.4; }
.empty-cart h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.empty-cart p { color: var(--text-muted); margin-bottom: 2rem; }

/* ---- Profile + orders + status stepper ---------------------------------- */
.profile-layout { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; align-items: start; }
.profile-sidebar-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; position: sticky; top: 90px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--orange-gradient); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 1rem; box-shadow: 0 0 30px rgba(255, 107, 53, 0.3); }
.profile-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.profile-email { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.5rem; }
.profile-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.p-stat { text-align: center; }
.p-stat-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
.p-stat-label { font-size: 0.75rem; color: var(--text-muted); }
.profile-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.profile-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 8px; font-size: 0.875rem; cursor: pointer; transition: var(--transition); color: var(--text-muted); }
.profile-nav-item:hover, .profile-nav-item.active { background: rgba(255, 107, 53, 0.1); color: var(--secondary); }
.profile-nav-item.active { font-weight: 600; }
.order-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; transition: var(--transition); }
.order-card:hover { border-color: rgba(255, 107, 53, 0.3); }

/* Horizontal order-status stepper */
.o-stepper { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-top: 1.25rem; position: relative; padding: 0 0.5rem; }
.o-stepper .o-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; min-width: 60px; }
.o-stepper .o-step + .o-step::before { content: ''; position: absolute; left: -50%; right: 50%; top: 18px; height: 3px; background: var(--border); z-index: -1; }
.o-stepper .o-step.is-done + .o-step::before,
.o-stepper .o-step.is-current + .o-step::before { background: linear-gradient(90deg, var(--secondary), var(--secondary)); }
.o-stepper .o-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; color: var(--text-muted); }
.o-stepper .o-step.is-done .o-dot,
.o-stepper .o-step.is-current .o-dot { background: var(--secondary); border-color: var(--secondary); color: #fff; }
.o-stepper .o-step.is-current .o-dot { box-shadow: 0 0 0 4px rgba(255,107,53,0.25); }
.o-stepper .o-label { margin-top: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.o-stepper .o-step.is-done .o-label,
.o-stepper .o-step.is-current .o-label { color: var(--text); }

.o-status-badge { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.o-status-pending    { background: rgba(255,184,0,0.12);  color: var(--warning); }
.o-status-processing { background: rgba(168,85,247,0.14); color: #c084fc; }
.o-status-shipped    { background: rgba(59,130,246,0.14); color: var(--info); }
.o-status-delivered  { background: rgba(0,212,170,0.12);  color: var(--success); }
.o-status-cancelled  { background: rgba(239,68,68,0.14);  color: var(--danger); }

.o-cancelled-banner { margin-top: 1.25rem; padding: 0.75rem 1rem; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; color: var(--danger); font-weight: 600; font-size: 0.9rem; text-align: center; }
.o-admin-note { margin-top: 1rem; padding: 0.75rem 1rem; background: rgba(255,107,53,0.07); border-left: 3px solid var(--secondary); border-radius: 6px; font-size: 0.85rem; color: var(--text); line-height: 1.45; }
.o-admin-note .o-note-label { font-size: 0.7rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; display: block; }

/* Tracking row inside the order card — carrier logo + AWB link */
.o-tracking-row { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.o-awb-wrap { font-family: monospace; font-size: 0.8rem; }
.o-awb-link { color: var(--secondary); text-decoration: none; font-weight: 600; }
.o-awb-link:hover { text-decoration: underline; }
.o-awb-text { color: var(--secondary); font-weight: 600; }

/* Carrier badge — small white pill with the Clearbit logo inside. Hover
   (desktop) and :focus (mobile tap, since tabindex=0) reveal the tooltip with
   the full carrier name. Not a link — keeps tap-for-name gesture separate
   from tap-to-track. */
.carrier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  min-width: 32px;
  padding: 2px 5px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  cursor: help;
  position: relative;
  outline: none;
  vertical-align: middle;
}
.carrier-badge:focus { box-shadow: 0 0 0 2px var(--secondary); }
.carrier-badge svg { height: 20px; width: auto; max-width: 88px; display: block; }
.carrier-fallback { font-size: 0.68rem; font-weight: 700; color: #222; letter-spacing: 0.02em; padding: 0 2px; }
.carrier-badge::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  font-size: 0.72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}
.carrier-badge:hover::after,
.carrier-badge:focus::after { opacity: 1; }
@media (max-width: 600px) {
  .carrier-badge { height: 28px; min-width: 38px; }
  .carrier-badge svg { height: 24px; max-width: 100px; }
}

.order-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.order-id { font-weight: 700; font-size: 0.875rem; }
.order-date { font-size: 0.8rem; color: var(--text-muted); }
.order-status { padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; }
.status-delivered { background: rgba(0, 212, 170, 0.15); color: var(--success); }
.status-processing { background: rgba(255, 215, 0, 0.15); color: var(--accent); }
.status-shipped { background: rgba(83, 52, 131, 0.3); color: #a78bfa; }
.order-items { display: flex; flex-direction: column; gap: 0.5rem; }
.order-item-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-muted); }
.order-total-row { border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.5rem; display: flex; justify-content: space-between; font-weight: 600; }
.order-total-row .total-amt { color: var(--accent); }

/* ---- Admin embed (legacy — predates the standalone admin panel) ---------- */
.admin-layout { display: grid; grid-template-columns: 240px 1fr; min-height: calc(100vh - 70px); }
.admin-sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 1.5rem 0; }
.admin-sidebar-header { padding: 0 1.5rem 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.admin-sidebar-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.admin-sidebar-sub { font-size: 0.75rem; color: var(--text-muted); }
.admin-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; font-size: 0.875rem; color: var(--text-muted); cursor: pointer; transition: var(--transition); }
.admin-nav-item:hover { background: rgba(255, 107, 53, 0.1); color: var(--text); }
.admin-nav-item.active { background: rgba(255, 107, 53, 0.15); color: var(--secondary); border-right: 3px solid var(--secondary); }
.admin-nav-item .nav-icon { font-size: 1rem; width: 20px; }
.admin-content { padding: 2rem; overflow: auto; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 80px; z-index: 100; margin: -2rem -2rem 2rem -2rem; }
.admin-panel { padding-top: 0; }
.admin-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; }
.admin-stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; transition: var(--transition); }
.admin-stat-card:hover { border-color: rgba(255, 107, 53, 0.3); transform: translateY(-2px); }
.admin-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 1rem; }
.icon-orange { background: rgba(255, 107, 53, 0.15); color: var(--secondary); }
.icon-gold { background: rgba(255, 215, 0, 0.15); color: var(--accent); }
.icon-green { background: rgba(0, 212, 170, 0.15); color: var(--success); }
.icon-purple { background: rgba(83, 52, 131, 0.3); color: #a78bfa; }
.admin-stat-value { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.25rem; }
.admin-stat-label { font-size: 0.8rem; color: var(--text-muted); }
.admin-table-wrapper { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.admin-table thead th { background: var(--surface); padding: 0.875rem 1rem; text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap; }
.admin-table tbody tr { border-bottom: 1px solid var(--border); transition: var(--transition); }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: rgba(255, 107, 53, 0.05); }
.admin-table td { padding: 1rem; vertical-align: middle; }
.table-product-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--surface2); }
.table-badge { padding: 0.25rem 0.6rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
.table-actions { display: flex; gap: 0.4rem; }
.admin-form-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
textarea.form-control { resize: vertical; min-height: 100px; }
.image-upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; cursor: pointer; transition: var(--transition); }
.image-upload-area:hover { border-color: var(--secondary); background: rgba(255, 107, 53, 0.05); }
.image-upload-icon { font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.5; }
.image-upload-text { font-size: 0.875rem; color: var(--text-muted); }

/* ---- Page hero (used by checkout-progress, profile sub-pages, etc.) ------ */
.page-hero { padding: 3rem 0; background: var(--surface); border-bottom: 1px solid var(--border); margin-bottom: 3rem; }
.page-hero-title { font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); }
.breadcrumb a { color: var(--secondary); }
.breadcrumb a:hover { text-decoration: underline; }

/* ---- Newsletter card (home page) ---------------------------------------- */
/* The card was inline-styled in index.html — moved here so the input + button
   row can collapse on mobile. Before this rule the row stayed flex even at
   400px and the "Subscribe" button got clipped by the parent's overflow:hidden
   (the input's flex:1 starved the button of width). */
.newsletter-card {
  background: var(--vinyl-gradient);
  border-radius: var(--radius-lg);
  padding: 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter-form {
  display: flex;
  max-width: 400px;
  margin: 0 auto;
  gap: 0.75rem;
}
.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0; /* lets flex shrink properly inside the form */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: white;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}
.newsletter-form .btn { flex-shrink: 0; }

@media (max-width: 600px) {
  .newsletter-card { padding: 2rem 1.25rem; }
  .newsletter-form {
    flex-direction: column;
    gap: 0.6rem;
  }
  .newsletter-form .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Footer ------------------------------------------------------------- */
.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 4rem 0 2rem; margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; margin-bottom: 3rem; }
.footer-brand .brand-name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 1rem; }
.footer-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 1.5rem; }
.social-links { display: flex; gap: 0.75rem; }
.social-link { width: 36px; height: 36px; border-radius: 8px; background: var(--card-bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 0.875rem; transition: var(--transition); }
.social-link:hover { background: var(--secondary); border-color: var(--secondary); color: white; }
.footer-col-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 1.25rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-link { font-size: 0.875rem; color: var(--text-muted); transition: var(--transition); }
.footer-link:hover { color: var(--secondary); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--text-muted); }

/* ---- Utility helpers ---------------------------------------------------- */
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.divider { height: 1px; background: var(--border); margin: 1.5rem 0; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--secondary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 2rem auto; }
.no-products { text-align: center; padding: 4rem 2rem; color: var(--text-muted); }
.no-products-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }

.page-section { display: none; }
.page-section.active { display: block; }

/* ---- Responsive — 1024 / 768 / 480 -------------------------------------- */
@media (max-width: 1024px) {
  .hero-container { grid-template-columns: 1fr; text-align: center; padding: 3rem 1.5rem; gap: 2rem; }
  .hero-visual { display: none; }
  .hero-cta { justify-content: center; flex-wrap: wrap; }
  .hero-stats { justify-content: center; flex-wrap: wrap; }
  .categories-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .product-detail { grid-template-columns: 1fr; gap: 2rem; }
  .product-detail-gallery { position: static; }
}

/* Navbar collapses to the hamburger menu earlier than the rest of the page
   layout. Rationale: the full desktop navbar (brand + 7 nav items + Vinyl
   dropdown + search + cart/theme/login + hamburger) needs ~1100px to render
   without clipping. Between 769px and 1099px the desktop layout used to
   overflow the right edge — search collapsed to icon-only, the rightmost
   nav items and the cart icon got clipped, and the hamburger wasn't yet
   active so users couldn't reach the hidden items. iPad portrait (820w),
   iPad landscape (1024w) and iPad mini both fell into this dead zone.
   The hamburger threshold below covers the whole tablet range; the page-
   layout collapse below stays at the conventional 768px because the
   products sidebar + content grid still fits comfortably between 769 and
   1099px. */
@media (max-width: 1100px) {
  /* Navigation: hamburger swap. The mobile menu is the same <ul> that lives
     inside .navbar (a flex parent). When we toggle .mobile-open we take it out
     of the flex flow with position:fixed and span the area under the navbar.
     The !important on the layout props is intentional — the desktop default
     rule (.navbar-nav { display:flex; align-items:center }) sits at the same
     media-query level and was winning in some browsers because of source-order,
     leaving the menu rendered as a 1-row strip next to the brand instead of
     the full-screen overlay. */
  .navbar { padding: 0 1rem; gap: 0.75rem; }
  .navbar-nav { display: none; }
  .navbar-search { display: none; }
  .hamburger { display: flex; }
  .navbar-nav.mobile-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 70px) !important;
    margin: 0 !important;
    background: var(--bg);
    padding: 1.5rem !important;
    z-index: 1500 !important;
    overflow-y: auto;
    gap: 0.5rem;
    list-style: none;
  }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; font-size: 1rem; padding: 0.75rem 1rem; }
  .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: var(--surface2); margin-top: 0.25rem; }
  .navbar-brand .brand-name { font-size: 1.15rem; }
  .navbar-brand .logo-icon { width: 36px; height: 36px; font-size: 1rem; }
}

@media (max-width: 768px) {
  /* Page layout collapses — kept at the conventional mobile breakpoint
     because the two-column products/cart/profile/admin layouts fit fine on
     tablet. The navbar hamburger above kicks in earlier (≤1100px). The
     products filter sidebar gets the slide-in-drawer treatment at ≤1023px
     in a dedicated block below. */
  .cart-layout { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 80px 1fr; }
  .cart-item-price { grid-column: 2; text-align: left; min-width: 0; }
  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar-card { position: static; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .categories-grid { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
  .product-actions-group { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .section { padding: 3rem 0; }
  .page-hero { padding: 2rem 0; margin-bottom: 2rem; }
  .page-hero-title { font-size: 1.75rem; }
}

@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .hero-title { font-size: 2rem; }
  .hero-desc { font-size: 0.95rem; }
  .section { padding: 2.5rem 0; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .footer { padding: 2.5rem 0 1.5rem; }
  .products-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.75rem; }
  .page-hero-title { font-size: 1.5rem; }
}

/* ---- Products page filter CHIP STRIP (≤1023px) -----------------------------
   Above 1024px the .filters-sidebar is a sticky left column — that layout
   works on laptop+ screens. Below that, both the original "stack-above-grid"
   layout and the earlier slide-in-drawer pattern got in the way: users had
   to either scroll past 600px of filter UI or open a fullscreen drawer just
   to toggle one option.

   Pattern D — inline chip strip — replaces both: the sidebar is hidden, a
   horizontal scrollable chip strip sits below the page hero, and tapping a
   chip opens a small popover with that category's options only. Etsy /
   Amazon mobile pattern. Each chip shows the category name + an orange
   count bubble when filters in that category are active.

   How filtering still works without rewiring applyFilters():
   the popover is a relocation target — when a chip is tapped, the matching
   .filter-section DOM node is MOVED from the hidden sidebar into the
   popover. The same checkboxes (same `name` attributes) are still inside
   #page-products, so applyFilters()'s querySelectorAll continues to find
   them. On close, the section is moved back to its slot in the sidebar.

   JS lives in src/js/storefront/pages.js — renderFilterChips,
   openFilterPopover, closeFilterPopover. ESC + backdrop click dismiss. */
@media (max-width: 1023px) {
  .products-layout { grid-template-columns: 1fr; }

  /* Hide the sidebar entirely. The .filter-section children are still in
     the DOM so JS can move them into the popover when needed. */
  .filters-sidebar { display: none; }

  /* Chip strip — sits in the page flow directly below the page hero
     and sticks under the fixed navbar as the user scrolls down so they
     can refine filters without scrolling back to the top.

     min-width:0 is critical: as a grid child of .products-layout, the
     default min-width:auto would let the chip flex container push the
     whole grid cell (and therefore the whole page) wider than the
     viewport. min-width:0 lets the inner overflow:auto clip + scroll
     within the bar instead of bleeding out to the document.

     Solid var(--bg) background + subtle border + soft shadow: products
     scrolling up under the bar disappear cleanly (no see-through
     muddling); the shadow gives a faint elevation lift so the bar
     reads as a layer above the grid, not glued to it. */
  .filter-chips-bar {
    display: block;
    min-width: 0;
    margin-bottom: 1rem;
    position: sticky;
    top: 70px; /* directly beneath the 70px fixed navbar */
    z-index: 90; /* above products + active-filter tags, below popover (1600) and modals */
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.5);
  }
  .filter-chips-strip {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.4rem 0;
    scrollbar-width: none;
  }
  .filter-chips-strip::-webkit-scrollbar { display: none; }
  .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.18s;
    flex-shrink: 0;
  }
  .filter-chip:hover { border-color: var(--secondary); }
  .filter-chip.active {
    background: rgba(255, 107, 53, 0.12);
    border-color: var(--secondary);
    color: var(--secondary);
    font-weight: 700;
  }
  .filter-chip .chip-arrow { font-size: 0.65rem; opacity: 0.7; }
  .filter-chip .chip-count {
    background: var(--secondary); color: white;
    padding: 0 7px; border-radius: 999px;
    font-size: 0.7rem; font-weight: 700;
    margin-left: 0.15rem;
  }
  /* "Clear all" chip variant — different look so it doesn't blend with the others. */
  .filter-chip.filter-chip-clear {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
    text-decoration: underline;
    padding: 0.5rem 0.6rem;
  }

  /* Popover backdrop — dims everything except the popover. */
  .filter-popover-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 1500;
  }
  .filter-popover-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Popover — single shared element. JS positions it via CSS class,
     populates body with the moved .filter-section. */
  .filter-popover {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 1rem; right: 1rem;
    top: 132px; /* clears the 70px navbar + ~46px sticky chip strip + breathing room */
    max-height: min(70vh, 540px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 1600;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .filter-popover[hidden] { display: none; }
  .filter-popover.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .filter-popover-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .filter-popover-title {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700; color: var(--text);
  }
  .filter-popover-close {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    width: 32px; height: 32px;
    color: var(--text-muted);
    cursor: pointer; font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
  }
  .filter-popover-close:hover { color: var(--secondary); border-color: var(--secondary); }
  .filter-popover-body {
    padding: 0.85rem 1rem 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
  }
  /* When a .filter-section is moved into the popover body, drop the heading
     (the popover header already shows the title) and let the People search
     box flow naturally without the nested 220px max-height clip. */
  .filter-popover-body .filter-section { margin: 0; }
  .filter-popover-body .filter-section .filter-title { display: none; }
  .filter-popover-body .filter-section-collapsible .filter-options {
    max-height: none;
    overflow: visible;
  }

  /* Lock body scroll while a popover is open. */
  body.filter-popover-open { overflow: hidden; }
}