/* ================================================================
   SO_NIQUE3 — GLOBAL STYLESHEET
   Premium headphones & juice store · Cape Town
================================================================ */

/* ── Google Fonts ─────────────────────────────────────────────── */
/* ── CSS Variables ────────────────────────────────────────────── */
:root {
  --clr-black:    #0a0a0a;
  --clr-dark:     #111827;
  --clr-juice:    #f97316;
  --clr-juice-lt: #fed7aa;
  --clr-phone:    #6366f1;
  --clr-phone-lt: #e0e7ff;
  --clr-green:    #22c55e;
  --clr-bg:       #f8f9fa;
  --clr-card:     #ffffff;
  --clr-muted:    #6b7280;
  --clr-border:   #e5e7eb;
  --clr-text:     #111827;
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    22px;
  --radius-full:  9999px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:    0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:    0 12px 40px rgba(0,0,0,.18);
  --shadow-xl:    0 24px 64px rgba(0,0,0,.24);
  --nav-h:        70px;
  --transition:   all .28s cubic-bezier(.4,0,.2,1);
  --font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --font-body:    'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Skip Navigation (Accessibility) ──────────────────────────── */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--clr-juice);
  color: #fff;
  padding: 10px 20px;
  z-index: 9999;
  font-size: .9rem;
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-nav:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* Screen-reader only utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--clr-text);
  background: var(--clr-bg);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

/* ── Logo ─────────────────────────────────────────────────────── */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-mark {
  width: 46px;
  height: 52px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
  transition: transform .3s ease;
}
.brand-logo:hover .logo-mark { transform: scale(1.08); }
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.logo-text span:first-child {
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #fff 30%, #a5b4fc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.logo-text span:last-child {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: 3px;
  color: #9ca3af;
  text-transform: uppercase;
}

/* ── Navbar ───────────────────────────────────────────────────── */
.main-navbar {
  height: var(--nav-h);
  padding: 0 0;
  position: sticky;
  top: 0;
  z-index: 1200;
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 32px rgba(0,0,0,.4);
  transition: var(--transition);
  contain: layout style;
}
.main-navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  width: 60%; height: 1.5px;
  background: linear-gradient(90deg,transparent,var(--clr-phone),var(--clr-juice),var(--clr-green),transparent);
  transform: translateX(-50%);
  opacity: .85;
}
.main-navbar.scrolled {
  height: 58px;
  background: rgba(2,6,23,.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.main-navbar .container {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Nav links */
.navbar-nav .nav-link {
  font-family: var(--font-body);
  font-size: .96rem;
  font-weight: 500;
  color: #d1d5db !important;
  padding: 6px 0 !important;
  position: relative;
  transition: color .25s ease, transform .25s ease;
  white-space: nowrap;
}
.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--clr-phone), var(--clr-juice));
  transform: translateX(-50%);
  border-radius: var(--radius-full);
  transition: width .3s ease;
}
.navbar-nav .nav-link:hover { color: #fff !important; transform: translateY(-1px); }
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after { width: 100%; }
.navbar-nav .nav-link.active { color: #fff !important; font-weight: 600; }
.navbar-center { gap: 36px; }

/* Nav icons (cart/wishlist) */
.nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-size: 1.15rem;
  transition: var(--transition);
}
.nav-icon-wrap:hover {
  background: rgba(255,255,255,.15);
  transform: scale(1.1);
}
.badge-counter {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  border-radius: var(--radius-full);
  background: var(--clr-juice);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: badgePop .5s ease;
  pointer-events: none;
}
@keyframes badgePop { 0%{transform:scale(0)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* Floating icons (product/contact/wishlist pages) */
.floating-icons {
  position: fixed;
  top: calc(var(--nav-h) + 16px);
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1100;
}
.float-btn {
  position: relative;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--clr-black);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: var(--transition);
  border: 2px solid rgba(255,255,255,.1);
}
.float-btn:hover { transform: scale(1.12); background: var(--clr-phone); }
.float-btn .badge {
  position: absolute;
  top: -5px; right: -5px;
  background: var(--clr-juice);
  font-size: .62rem;
  min-width: 17px; height: 17px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  animation: badgePop .5s ease;
}

/* ── Hero Section ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--clr-black);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #020617 0%, #1e1b4b 40%, #0c1a0c 100%);
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  animation: orbFloat 8s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
.hero-orb-1 { width: 420px; height: 420px; background: var(--clr-phone); top: -80px; right: 10%; }
.hero-orb-2 { width: 320px; height: 320px; background: var(--clr-juice); bottom: 0; left: 5%; animation-delay: -3s; }
@keyframes orbFloat { 0%{transform:translateY(0) scale(1)} 100%{transform:translateY(-40px) scale(1.1)} }

.hero-content {
  position: relative;
  z-index: 2;
  padding: 80px 0;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(99,102,241,.2);
  border: 1px solid rgba(99,102,241,.4);
  color: #a5b4fc;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  margin-bottom: 20px;
}
.hero-eyebrow span { width:6px; height:6px; border-radius:50%; background:var(--clr-green); animation: pulse 2s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: .95;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 24px;
}
.hero-title .accent-juice { color: var(--clr-juice); }
.hero-title .accent-phone { color: var(--clr-phone); -webkit-text-fill-color: var(--clr-phone); }

.hero-sub {
  font-size: 1.1rem;
  color: #9ca3af;
  max-width: 480px;
  margin-bottom: 36px;
  line-height: 1.7;
}
.hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--clr-juice), #ea580c);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  box-shadow: 0 8px 24px rgba(249,115,22,.4);
  transition: var(--transition);
}
.btn-hero-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(249,115,22,.5); color: #fff; }
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.2);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 32px;
  border-radius: var(--radius-full);
  transition: var(--transition);
}
.btn-hero-secondary:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); color: #fff; }

.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-product-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  max-width: 420px;
  width: 100%;
}
.hero-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7rem;
  padding: 40px;
}
.hero-stat-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  font-size: .78rem;
  color: #d1d5db;
  font-weight: 500;
}
.stat-chip strong { color: #fff; }

/* ── Section Headings ─────────────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-juice);
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: 1px;
  color: var(--clr-dark);
  line-height: 1.1;
  margin-bottom: 14px;
}
.section-sub {
  font-size: 1rem;
  color: var(--clr-muted);
  max-width: 500px;
}

/* ── Category Banners ─────────────────────────────────────────── */
.category-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  display: block;
  aspect-ratio: 5/4;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-md);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.category-card-bg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: transform .4s ease;
}
.category-card:hover .category-card-bg { transform: scale(1.04); }
.category-card-icon { font-size: 4rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,.3)); }
.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.1) 60%, transparent 100%);
}
.category-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  color: #fff;
}
.category-card-label h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 2px;
  margin-bottom: 2px;
}
.category-card-label p { font-size: .8rem; color: rgba(255,255,255,.7); }

/* Juice gradient */
.cat-juice { background: linear-gradient(135deg, #92400e, #f97316, #fbbf24); }
/* Headphone gradient */
.cat-phone { background: linear-gradient(135deg, #1e1b4b, #4338ca, #818cf8); }
/* Coming soon */
.cat-soon { background: linear-gradient(135deg, #374151, #4b5563, #6b7280); }

/* ── Product Cards ────────────────────────────────────────────── */
.product-card {
  background: var(--clr-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  border: 1px solid var(--clr-border);
  height: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.product-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.product-icon {
  font-size: 4.5rem;
  transition: transform .4s ease;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.25));
  position: relative;
  z-index: 1;
}
.product-card:hover .product-icon { transform: scale(1.15) rotate(-3deg); }
.product-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-img-wrap img { transform: scale(1.06); }

/* Product badges */
.product-badge {
  position: absolute;
  top: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  z-index: 2;
}
.badge-new { background: var(--clr-green); color: #fff; }
.badge-hot { background: var(--clr-juice); color: #fff; }
.badge-soon {
  background: rgba(0,0,0,.65);
  color: #d1d5db;
  backdrop-filter: blur(8px);
}
.product-wishlist-btn {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: #9ca3af;
  transition: var(--transition);
  z-index: 2;
  box-shadow: var(--shadow-sm);
  border: none;
  cursor: pointer;
}
.product-wishlist-btn:hover,
.product-wishlist-btn.active { color: #ef4444; transform: scale(1.1); }

.product-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.product-category {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-phone);
}
.product-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.3;
}
.product-desc {
  font-size: .82rem;
  color: var(--clr-muted);
  line-height: 1.5;
}
.product-size-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  background: var(--clr-phone-lt);
  color: var(--clr-phone);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  align-self: flex-start;
}
.product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--clr-border);
}
.product-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--clr-dark);
}
.product-price .currency { font-size: .8rem; font-weight: 600; color: var(--clr-muted); }
.btn-add-cart {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--clr-dark);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  transition: var(--transition);
  border: none;
  cursor: pointer;
}
.btn-add-cart:hover {
  background: var(--clr-juice);
  transform: scale(1.04);
}
.btn-add-cart.added {
  background: var(--clr-green);
}

/* Coming soon overlay */
.coming-soon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  z-index: 3;
}
.coming-soon-overlay span {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 3px;
  color: #fff;
  background: rgba(0,0,0,.6);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,.2);
}

/* ── Category Filter ──────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 36px;
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: .88rem;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: var(--radius-full);
  background: var(--clr-card);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-muted);
  transition: var(--transition);
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--clr-phone); color: var(--clr-phone); }
.filter-btn.active {
  background: var(--clr-dark);
  border-color: var(--clr-dark);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

/* ── USP Strip ────────────────────────────────────────────────── */
.usp-strip {
  background: var(--clr-dark);
  padding: 28px 0;
  overflow: hidden;
}
.usp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  padding: 0 32px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.usp-item:first-child { border-left: none; }
.usp-icon { font-size: 1.6rem; flex-shrink: 0; }
.usp-text strong { display: block; font-size: .95rem; font-weight: 700; }
.usp-text span { font-size: .8rem; color: #9ca3af; }

/* ── Toast Notification ───────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--clr-dark);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: .9rem;
  font-weight: 500;
  min-width: 240px;
  max-width: 340px;
  animation: toastIn .35s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: auto;
  border-left: 3px solid var(--clr-juice);
}
.toast.toast-wish { border-left-color: #ef4444; }
.toast.toast-remove { border-left-color: var(--clr-muted); }
.toast-icon { font-size: 1.2rem; flex-shrink: 0; }
.toast.hide { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from{transform:translateX(100%);opacity:0} to{transform:none;opacity:1} }
@keyframes toastOut { to{transform:translateX(110%);opacity:0} }

/* ── Cart Page ────────────────────────────────────────────────── */
.page-header {
  background: var(--clr-dark);
  padding: 48px 0 36px;
  margin-bottom: 40px;
}
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem,4vw,2.8rem);
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 4px;
}
.page-header p { color: #9ca3af; font-size: .92rem; }
.cart-item-card {
  background: var(--clr-card);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--clr-border);
  transition: var(--transition);
  margin-bottom: 14px;
}
.cart-item-card:hover { box-shadow: var(--shadow-md); border-color: var(--clr-phone); }
.cart-item-img {
  width: 90px; height: 90px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  overflow: hidden;
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 700; color: var(--clr-dark); margin-bottom: 4px; }
.cart-item-price { font-size: 1.05rem; font-weight: 800; color: var(--clr-juice); }
.cart-item-remove {
  color: var(--clr-muted);
  font-size: .85rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  transition: var(--transition);
  cursor: pointer;
}
.cart-item-remove:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

.order-summary {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--nav-h) + 16px);
}
.order-summary h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
  color: var(--clr-dark);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--clr-border);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: .92rem;
}
.summary-row .label { color: var(--clr-muted); }
.summary-row .val { font-weight: 600; }
.summary-total {
  display: flex;
  justify-content: space-between;
  padding: 14px 0 0;
  margin-top: 10px;
  border-top: 2px solid var(--clr-dark);
  font-weight: 800;
  font-size: 1.1rem;
}
.btn-checkout {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--clr-dark), #1e1b4b);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  margin-top: 20px;
  transition: var(--transition);
  letter-spacing: .5px;
}
.btn-checkout:hover {
  background: linear-gradient(135deg, var(--clr-juice), #ea580c);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,.35);
}
.cart-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--clr-muted);
}
.cart-empty .empty-icon { font-size: 5rem; margin-bottom: 20px; opacity:.5; }
.cart-empty h4 { font-size: 1.4rem; color: var(--clr-dark); margin-bottom: 8px; }

/* ── Wishlist Page ────────────────────────────────────────────── */
.wishlist-empty {
  text-align: center;
  padding: 80px 20px;
  color: var(--clr-muted);
}
.wishlist-empty .empty-icon { font-size: 5rem; margin-bottom: 20px; opacity:.5; }
.wishlist-empty h4 { font-size: 1.4rem; color: var(--clr-dark); margin-bottom: 8px; }
.btn-move-cart {
  padding: 8px 18px;
  background: var(--clr-dark);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn-move-cart:hover { background: var(--clr-green); transform: scale(1.04); }
.btn-remove-wish {
  padding: 8px 18px;
  background: transparent;
  color: var(--clr-muted);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 1px solid var(--clr-border);
  cursor: pointer;
  transition: var(--transition);
}
.btn-remove-wish:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

/* ── About Page ───────────────────────────────────────────────── */
.about-hero {
  background: linear-gradient(135deg, var(--clr-dark) 0%, #1e1b4b 100%);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}
.about-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem,5vw,4rem);
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.about-hero p { font-size: 1.1rem; color: #9ca3af; max-width: 600px; margin: 0 auto; }
.value-card {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  text-align: center;
  border: 1px solid var(--clr-border);
  transition: var(--transition);
  height: 100%;
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--clr-phone); }
.value-card .value-icon { font-size: 2.5rem; margin-bottom: 16px; }
.value-card h3 { font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; color: var(--clr-dark); }
.value-card p { font-size: .9rem; color: var(--clr-muted); line-height: 1.6; }

/* ── Contact Page ─────────────────────────────────────────────── */
.contact-card {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--clr-border);
}
.form-control, .form-select {
  border: 1.5px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
  font-family: var(--font-body) !important;
  font-size: .93rem !important;
  color: var(--clr-dark) !important;
  transition: border-color .2s ease !important;
}
.form-control:focus, .form-select:focus {
  border-color: var(--clr-phone) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
  outline: none !important;
}
.btn-send {
  background: linear-gradient(135deg, var(--clr-dark), #1e1b4b);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: 13px 36px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .5px;
}
.btn-send:hover { background: linear-gradient(135deg, var(--clr-juice), #ea580c); transform: translateY(-2px); }
.contact-info-card {
  background: var(--clr-dark);
  border-radius: var(--radius-lg);
  padding: 40px;
  height: 100%;
  color: #fff;
}
.contact-info-card h4 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 28px;
}
.info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.info-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.info-icon { font-size: 1.3rem; margin-top: 2px; flex-shrink: 0; }
.info-text strong { display: block; font-weight: 700; margin-bottom: 2px; }
.info-text span { font-size: .88rem; color: #9ca3af; }

/* ── Reviews Page ─────────────────────────────────────────────── */
.review-card {
  background: var(--clr-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--clr-border);
  transition: var(--transition);
  height: 100%;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.review-stars { font-size: 1.1rem; margin-bottom: 12px; letter-spacing: 2px; }
.review-text { font-size: .93rem; color: var(--clr-text); line-height: 1.65; margin-bottom: 20px; font-style: italic; }
.reviewer { display: flex; align-items: center; gap: 12px; }
.reviewer-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--clr-phone), var(--clr-juice));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; color: #fff;
  flex-shrink: 0;
}
.reviewer-name { font-weight: 700; font-size: .9rem; }
.reviewer-location { font-size: .78rem; color: var(--clr-muted); }
.review-rating-big {
  background: var(--clr-dark);
  border-radius: var(--radius-lg);
  padding: 40px;
  text-align: center;
  color: #fff;
}
.rating-number {
  font-family: var(--font-display);
  font-size: 5rem;
  line-height: 1;
  color: var(--clr-juice);
}
.rating-stars { font-size: 1.5rem; margin: 10px 0; letter-spacing: 4px; }
.rating-label { font-size: .85rem; color: #9ca3af; }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  background: var(--clr-black);
  padding: 60px 0 0;
  color: #9ca3af;
  margin-top: auto;
}
.footer-brand .logo-text span:first-child {
  color: #fff;
  background: none;
  -webkit-text-fill-color: #fff;
}
.footer-brand .logo-text span:last-child { color: #6b7280; }
.footer-desc { font-size: .88rem; color: #6b7280; line-height: 1.7; margin-top: 12px; max-width: 220px; }
.footer-col h5 {
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.footer-links a {
  font-size: .88rem;
  color: #6b7280;
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--clr-juice); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 20px 0;
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom p { font-size: .8rem; color: #4b5563; }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a { font-size: .8rem; color: #4b5563; transition: color .2s; }
.footer-bottom-links a:hover { color: var(--clr-juice); }
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-link {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #9ca3af;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  transition: var(--transition);
}
.social-link:hover { background: var(--clr-juice); border-color: var(--clr-juice); color: #fff; }

/* ── Utilities ────────────────────────────────────────────────── */
.text-gradient-juice {
  background: linear-gradient(135deg, var(--clr-juice), #fbbf24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-phone {
  background: linear-gradient(135deg, var(--clr-phone), #a5b4fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-divider {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--clr-juice), var(--clr-phone));
  border-radius: var(--radius-full);
  margin: 12px 0 20px;
}
.bg-brand-dark { background: var(--clr-dark); }
.rounded-xl { border-radius: var(--radius-lg) !important; }

/* Products page main heading */
.products-page-hero {
  background: linear-gradient(135deg, #020617 0%, #1e1b4b 60%, #0c1a0c 100%);
  padding: 56px 0 48px;
  text-align: center;
  margin-bottom: 0;
}
.products-page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem,5vw,3.5rem);
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 10px;
}
.products-page-hero p { color: #9ca3af; font-size: 1rem; }

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-up {
  animation: fadeInUp .5s ease forwards;
  opacity: 0;
}
.stagger-1 { animation-delay: .1s; }
.stagger-2 { animation-delay: .2s; }
.stagger-3 { animation-delay: .3s; }
.stagger-4 { animation-delay: .4s; }
.stagger-5 { animation-delay: .5s; }
.stagger-6 { animation-delay: .6s; }

/* Products grid animation */
.product-card.visible { animation: fadeInUp .45s ease forwards; }

/* ================================================================
   MOBILE OPTIMISATION & PERFORMANCE — SO_NIQUE3
================================================================ */

/* ── Performance: GPU layers & containment ───────────────────── */
.product-card, .category-card, .hero-product-card {
  transform: translateZ(0);
  will-change: transform;
}
.hero-orb { will-change: transform; }
.main-navbar { contain: layout style; }
section, .py-5, .usp-strip { content-visibility: auto; contain-intrinsic-size: 0 400px; }
.hero { content-visibility: visible; }

/* ── Accessibility ────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--clr-phone); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero-orb { animation: none !important; }
}

/* ── Font Awesome Icon Overrides ──────────────────────────────── */
.usp-icon { font-size: 1.4rem; flex-shrink: 0; color: var(--clr-juice); }
.usp-icon .fas, .usp-icon .fab, .usp-icon .far { font-size: 1.4rem; }
.value-icon { font-size: 2rem; margin-bottom: 16px; color: var(--clr-phone); }
.value-icon .fas, .value-icon .fab { font-size: 2rem; }
.category-card-icon { display:flex; align-items:center; justify-content:center; font-size:0; color:#fff; }
.category-card-icon .fas, .category-card-icon .fab { font-size: 3.8rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,.35)); }
.info-icon .fas, .info-icon .fab, .info-icon .far { font-size: 1.1rem; color: var(--clr-juice); }
.review-stars .fas { color: #f59e0b; font-size: 1rem; }
.rating-stars .fas { color: #f59e0b; font-size: 1.4rem; letter-spacing:3px; }
.nav-icon-wrap .fas, .nav-icon-wrap .fab, .nav-icon-wrap .far { font-size: 1.1rem; }
.cart-empty .empty-icon .fas,
.wishlist-empty .empty-icon .fas { font-size: 4rem; opacity:.5; color: var(--clr-muted); }
.toast-icon .fas, .toast-icon .fab { font-size: 1.1rem; }
.social-link .fas, .social-link .fab { font-size: .9rem; }
.social-link[aria-label*="WhatsApp"]:hover { background:#25d366; border-color:#25d366; }
.social-link[aria-label*="Facebook"]:hover { background:#1877f2; border-color:#1877f2; }
.social-link[aria-label*="YouTube"]:hover  { background:#ff0000; border-color:#ff0000; }
.social-link[aria-label*="TikTok"]:hover   { background:#000; border-color:#555; }

/* ── Navbar Social Strip ──────────────────────────────────────── */
.navbar-social-strip {
  display: flex; align-items: center; gap: 6px;
  padding-right: 14px;
  border-right: 1px solid rgba(255,255,255,.12);
  margin-right: 6px;
}
.nav-social-link {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #9ca3af;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .82rem; transition: var(--transition);
}
.nav-social-link:hover { color:#fff; transform:scale(1.12); }
.nav-social-link[aria-label*="Facebook"]:hover { background:#1877f2; border-color:#1877f2; }
.nav-social-link[aria-label*="YouTube"]:hover  { background:#ff0000; border-color:#ff0000; }
.nav-social-link[aria-label*="TikTok"]:hover   { background:#000; border-color:#555; color:#fff; }
.nav-social-link[aria-label*="WhatsApp"]:hover { background:#25d366; border-color:#25d366; }

/* ── WhatsApp Floating Button ─────────────────────────────────── */
.whatsapp-float {
  position: fixed; bottom: 24px; left: 24px; z-index: 9990;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.55rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: var(--transition);
  border: 2px solid rgba(255,255,255,.25);
}
.whatsapp-float:hover { transform:scale(1.1); background:#1ebe5d; color:#fff; }
.whatsapp-float .fab { font-size: 1.55rem; }

/* ── Product SVG Illustrations ────────────────────────────────── */

.product-card:hover .product-svg-container { transform:scale(1.1) rotate(-2deg); }
.product-svg-img { width:68%; max-height:80%; filter:drop-shadow(0 5px 14px rgba(0,0,0,.26)); }
.product-wishlist-btn .fas.fa-heart { color:#9ca3af; transition:color .2s; }
.product-wishlist-btn:hover .fas.fa-heart,
.product-wishlist-btn.active .fas.fa-heart { color:#ef4444; }
.cart-item-img .product-svg-img { width:80%; max-height:80%; }

/* ── Footer Bottom Socials (slim footers) ─────────────────────── */
.footer-bottom-socials { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.footer-bottom-socials .social-link { width:34px; height:34px; font-size:.82rem; }

/* ================================================================
   RESPONSIVE — TABLET  ≤ 1199px
================================================================ */
@media (max-width: 1199px) {
  .navbar-center { gap: 22px; }
}

/* ================================================================
   RESPONSIVE — TABLET  ≤ 991px
================================================================ */
@media (max-width: 991px) {
  :root { --nav-h: 60px; }
  .navbar-social-strip { display: none; }
  .navbar-center { gap: 14px; padding: 12px 0; text-align: center; }
  .navbar-nav .nav-link { font-size: .9rem; }

  /* ── MOBILE MENU: solid opaque background when open ── */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    background: #0d1422;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 0 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.6);
  }
  .navbar-collapse.show .navbar-nav .nav-link,
  .navbar-collapse.collapsing .navbar-nav .nav-link {
    color: #e2e8f0 !important;
    background: transparent;
    padding: 10px 20px !important;
    margin: 1px 8px;
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
  }
  .navbar-collapse.show .navbar-nav .nav-link:hover,
  .navbar-collapse.show .navbar-nav .nav-link.active,
  .navbar-collapse.collapsing .navbar-nav .nav-link:hover,
  .navbar-collapse.collapsing .navbar-nav .nav-link.active {
    background: rgba(99,102,241,.2);
    color: #fff !important;
  }
  .navbar-collapse.show .navbar-nav .nav-link::after,
  .navbar-collapse.collapsing .navbar-nav .nav-link::after {
    display: none;
  }

  .hero { min-height: auto; padding: 36px 0 28px; }
  .hero-title { font-size: clamp(2.4rem,6vw,3.5rem); }
  .hero-visual { margin-top: 28px; }

  .usp-strip { padding: 18px 0; }
  .usp-strip .row { flex-direction: column; gap: 0; }
  .usp-item {
    border-left: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 12px 16px !important;
  }
  .usp-item:last-child { border-bottom: none; }

  .section-title { font-size: clamp(1.7rem,3.5vw,2.4rem); }
  .about-hero { padding: 52px 0; }
  .about-hero h1 { font-size: clamp(2rem,5vw,3rem); }
  .products-page-hero { padding: 40px 0 32px; }
  .products-page-hero h1 { font-size: clamp(1.8rem,4vw,2.8rem); }

  .category-card { aspect-ratio: 16/9; }
  .category-card-icon .fas,
  .category-card-icon .fab { font-size: 2.8rem; }

  .review-rating-big { padding: 28px; }
  .rating-number { font-size: 4rem; }

  .contact-info-card { padding: 28px; }
  .order-summary { position: static; }

  .footer-desc { max-width: 100%; }
}

/* ================================================================
   RESPONSIVE — MOBILE  ≤ 767px
================================================================ */
@media (max-width: 767px) {
  :root {
    --nav-h: 54px;
    --radius-lg: 14px;
    --radius-md: 9px;
  }

  /* Base font scale — slightly smaller across the board */
  html { font-size: 14.5px; }

  /* Hero */
  .hero { padding: 22px 0 16px; }
  .hero-content { text-align: center; padding: 32px 0 16px; }
  .hero-title { font-size: clamp(1.9rem,8vw,2.6rem); line-height: 1; margin-bottom: 13px; }
  .hero-sub { font-size: .88rem; max-width: 100%; margin: 0 auto 20px; line-height: 1.55; }
  .hero-cta-group { justify-content: center; gap: 8px; }
  .hero-eyebrow { margin: 0 auto 13px; font-size: .68rem; }
  .btn-hero-primary, .btn-hero-secondary { font-size: .82rem; padding: 10px 20px; }

  .hero-product-card { max-width: 280px; }
  .hero-product-img { padding: 20px; }
  .hero-stat-chips { padding: 10px 12px; gap: 6px; }
  .stat-chip { font-size: .68rem; padding: 4px 9px; gap: 3px; }

  /* Sections */
  .py-5 { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
  .mb-5 { margin-bottom: 1.2rem !important; }
  .section-title { font-size: clamp(1.35rem,5vw,1.8rem); margin-bottom: 6px; }
  .section-label { font-size: .65rem; letter-spacing: 2px; }
  .section-divider { margin: 6px 0 12px; }
  .section-sub { font-size: .84rem; }

  /* Category cards — 2 col grid on mobile */
  .category-card { aspect-ratio: 3/2; }
  .category-card-icon .fas,
  .category-card-icon .fab { font-size: 2.2rem; }
  .category-card-label h3 { font-size: 1.1rem; letter-spacing: 1px; }
  .category-card-label p { font-size: .68rem; }

  /* Product grid — 2 columns on mobile */
  .col-sm-6 { width: 50%; }
  .product-card { border-radius: var(--radius-sm); }
  .product-img-wrap { aspect-ratio: 1/1; }
  .product-body { padding: 9px 10px 10px; gap: 3px; }
  .product-name { font-size: .82rem; line-height: 1.2; }
  .product-desc { font-size: .7rem; line-height: 1.4; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .product-price { font-size: .94rem; }
  .btn-add-cart { font-size: .7rem; padding: 6px 9px; }
  .product-size-tag { font-size: .6rem; }
  .product-category { font-size: .58rem; }
  .product-wishlist-btn { width: 26px; height: 26px; font-size: .78rem; top: 7px; right: 7px; }
  .product-badge { font-size: .58rem; padding: 2px 6px; top: 7px; left: 7px; }
  .product-svg-img { width: 60%; }

  /* Filter bar */
  .filter-bar { gap: 5px; }
  .filter-btn { font-size: .72rem; padding: 5px 11px; }

  /* USP strip */
  .usp-icon { font-size: 1rem; }
  .usp-icon .fas, .usp-icon .fab, .usp-icon .far { font-size: 1rem; }
  .usp-text strong { font-size: .78rem; }
  .usp-text span { font-size: .68rem; }

  /* About page */
  .about-hero { padding: 34px 0; }
  .about-hero h1 { font-size: clamp(1.5rem,6vw,2.2rem); }
  .about-hero p { font-size: .84rem; }
  .value-card { padding: 18px 14px; }
  .value-icon { font-size: 1.5rem; margin-bottom: 8px; }
  .value-icon .fas, .value-icon .fab { font-size: 1.5rem; }
  .value-card h3 { font-size: .95rem; }
  .value-card p { font-size: .78rem; }

  /* Reviews */
  .review-card { padding: 16px; }
  .review-text { font-size: .8rem; }
  .review-stars .fas { font-size: .85rem; }
  .rating-number { font-size: 3.2rem; }
  .rating-stars .fas { font-size: 1.1rem; }

  /* Contact */
  .contact-card { padding: 18px 14px; }
  .contact-info-card { padding: 18px 14px; margin-top: 14px; }
  .info-icon .fas { font-size: .95rem; }
  .info-text strong { font-size: .82rem; }
  .info-text span { font-size: .76rem; }
  .btn-send { width: 100%; font-size: .84rem; padding: 10px 22px; }

  /* Cart */
  .page-header { padding: 26px 0 18px; }
  .page-header h1 { font-size: clamp(1.35rem,5vw,1.8rem); }
  .page-header p { font-size: .78rem; }
  .cart-item-card { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .cart-item-img { width: 66px; height: 66px; }
  .cart-item-name { font-size: .84rem; }
  .cart-item-price { font-size: .9rem; }
  .order-summary { padding: 18px; }
  .order-summary h4 { font-size: 1.1rem; }

  /* Products hero */
  .products-page-hero { padding: 24px 0 18px; }
  .products-page-hero h1 { font-size: clamp(1.45rem,6vw,2.2rem); }
  .products-page-hero p { font-size: .78rem; }

  /* Footer */
  .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
  .footer-bottom-links { justify-content: center; gap: 12px; }
  .logo-text { display: none; }
  .site-footer { padding: 32px 0 0; }
  .footer-desc { font-size: .78rem; }

  /* WhatsApp */
  .whatsapp-float { bottom: 16px; left: 14px; width: 44px; height: 44px; font-size: 1.25rem; }
  .whatsapp-float .fab { font-size: 1.25rem; }
}

/* ================================================================
   RESPONSIVE — SMALL MOBILE  ≤ 480px
================================================================ */
@media (max-width: 480px) {
  /* Force 2-col product grid at all times */
  #productsGrid .col-sm-6,
  #featuredJuices .col-sm-6,
  #featuredPhones .col-sm-6,
  .row.g-3 > [class*="col-sm-6"] { width: 50%; }

  .hero-title { font-size: 1.85rem; }
  .section-title { font-size: 1.25rem; }

  /* Tighter cards */
  .product-body { padding: 7px 9px 9px; gap: 2px; }
  .product-name { font-size: .76rem; }
  .product-price { font-size: .86rem; }
  .btn-add-cart { font-size: .65rem; padding: 5px 7px; border-radius: 6px; }
  .product-footer { padding-top: 6px; gap: 3px; }

  /* Category 2×1 on smallest screens */
  .category-card { aspect-ratio: 4/3; }
  .category-card-icon .fas,
  .category-card-icon .fab { font-size: 1.85rem; }

  /* Reviews 1-col already via Bootstrap, just tighten padding */
  .review-card { padding: 12px; }
  .reviewer-avatar { width: 34px; height: 34px; font-size: .8rem; }

  /* Cart */
  .cart-item-img { width: 56px; height: 56px; }

  /* About value cards — 2 per row */
  .value-card { padding: 14px 10px; }

  /* USP — horizontal scroll on tiny screens */
  .usp-strip .row { flex-direction: row; overflow-x: auto; flex-wrap: nowrap; gap: 0; scrollbar-width: none; }
  .usp-strip .row::-webkit-scrollbar { display: none; }
  .usp-strip .col-sm-6 { flex: 0 0 auto; width: auto; min-width: 130px; }
  .usp-item { border-bottom: none; border-right: 1px solid rgba(255,255,255,.07); padding: 9px 14px !important; }
  .usp-item:last-child { border-right: none; }
}

/* ================================================================
   RESPONSIVE — TINY MOBILE  ≤ 360px
================================================================ */
@media (max-width: 360px) {
  html { font-size: 13.5px; }
  .hero-title { font-size: 1.7rem; }
  .btn-hero-primary, .btn-hero-secondary { font-size: .76rem; padding: 9px 16px; }
  .product-body { padding: 6px 7px 8px; }
  .product-name { font-size: .72rem; }
  .btn-add-cart { font-size: .62rem; padding: 4px 6px; }
}

/* ── Hero Product Showcase Grid ───────────────────────────────── */
.hero-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.hero-showcase-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(255,255,255,0.1);
  transition: transform .3s ease, box-shadow .3s ease;
  background: rgba(255,255,255,.05);
}
.hero-showcase-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(0,0,0,.45); }
.hero-sc-hp  { grid-column: 1 / 2; grid-row: 1 / 3; }
.hero-sc-juice{ grid-column: 2 / 3; grid-row: 1 / 2; }
.hero-sc-6pk  { grid-column: 2 / 3; grid-row: 2 / 3; }
.hsc-bg {
  width: 100%; min-height: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 16px 12px;
  position: relative; overflow: hidden;
}
.hero-sc-hp .hsc-bg { min-height: 220px; padding: 20px; }
.hero-sc-juice .hsc-bg { min-height: 130px; }
.hero-sc-6pk .hsc-bg   { min-height: 110px; }
.hsc-info {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  gap: 4px;
}
.hsc-brand {
  font-size: .62rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--clr-phone);
  flex-shrink: 0;
}
.hsc-name {
  font-size: .78rem; font-weight: 600; color: #fff;
  flex: 1; padding: 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hsc-price {
  font-size: .82rem; font-weight: 800; color: var(--clr-juice);
  flex-shrink: 0;
}

/* Mobile hero showcase */
@media (max-width: 767px) {
  .hero-showcase-grid { max-width: 340px; gap: 8px; }
  .hsc-bg { min-height: 100px; padding: 12px 8px; }
  .hero-sc-hp .hsc-bg { min-height: 160px; }
  .hero-sc-juice .hsc-bg { min-height: 100px; }
  .hero-sc-6pk .hsc-bg   { min-height: 88px; }
  .hsc-name { font-size: .72rem; }
  .hsc-price { font-size: .76rem; }
}
@media (max-width: 480px) {
  .hero-showcase-grid { max-width: 290px; gap: 6px; }
  .hero-sc-hp .hsc-bg { min-height: 130px; }
}

/* ── Product photo display ───────────────────────────────────── */
.product-img-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
/* Real photo — object-fit:contain so full product is always visible */
.product-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
  transition: transform .35s ease;
}
.product-card:hover .product-photo { transform: scale(1.07); }

/* Cart item image */
.cart-item-img {
  width: 90px; height: 90px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  overflow: hidden;
}

/* Category card updated to show inline SVGs properly */
.category-card-bg { overflow: hidden; }