/* === = === */
/* === Brit-Buy E-commerce CSS Overhaul   === */
/* === Brand Colors: #FF6600, White, Gray === */
/* === = === */
html { box-sizing: border-box; overflow-x: hidden; }
*, *::before, *::after { box-sizing: inherit; }

body { max-width: 100%; overflow-x: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Utility to stop long strings (like product titles) from blowing out width */
.break-words { word-break: break-word; overflow-wrap: anywhere; }

/* Prevent containers from exceeding viewport */
.container, .section, header, footer { max-width: 100%; }

:root {
  --color-primary: var(--bb-color-primary, #ff6600);
  --color-primary-hover: var(--bb-color-primary-strong, #ff8533);
  --color-background: var(--bb-color-page, #fafafa);
  --color-surface: var(--bb-color-surface, #ffffff);
  --color-border: var(--bb-color-border, #e0e0e0);
  --color-text-primary: var(--bb-color-text, #202124);
  --color-text-secondary: var(--bb-color-text-muted, #444444);
  --color-danger: var(--bb-color-danger, #d32f2f);
  --color-link: var(--bb-color-primary, #ff6600);
  --color-link-hover: var(--bb-color-primary-strong, #ff8533);
  --shadow: var(--bb-shadow-sm, 0 2px 12px rgba(0,0,0,0.05));
  --border-radius: var(--bb-radius-md, 0.65rem);
  --font-primary: var(--bb-font-sans, 'Montserrat', 'Roboto', sans-serif);
  --font-secondary: var(--bb-font-sans, 'Roboto', Arial, sans-serif);
  --container-max-width: 1200px;
  --spacing-sm: var(--bb-space-2, 0.5rem);
  --spacing-md: var(--bb-space-4, 1rem);
  --spacing-lg: var(--bb-space-6, 2rem);
  --font-size-base: var(--bb-text-base, 1rem);
  --font-size-lg: var(--bb-text-lg, 1.2rem);
  --font-size-xl: var(--bb-text-xl, 1.5rem);
}

.hidden {
  display: none !important;
}

header {
    padding-top: 2.2rem; /* Adjust to match the announcement bar’s height */
    padding-top: 56px;
  }
  @media (max-width: 700px) {
    header { padding-top: 1.6rem; }
  }
  

.announcement-bar {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 0.48em 0.6em;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    z-index: 1201;
    position: relative;
    overflow: hidden;
  }
  .announcement-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 900;
    cursor: pointer;
    opacity: 0.75;
    line-height: 1;
    z-index: 2;
    padding: 0;
    transition: opacity 0.15s, color 0.15s;
  }
  .announcement-close:hover, .announcement-close:focus {
    opacity: 1;
    color: var(--color-primary-hover);
  }
  .announcement-bar {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    /* rest of your existing styles... */
    padding-right: 2.5rem; /* Add space for the close button */
  }
  
  
  .announcement-bar a {
    color: #fff;
    text-decoration: underline;
    font-weight: 800;
    transition: color 0.15s;
  }
  .announcement-bar a:hover, .announcement-bar a:focus {
    color: var(--color-primary-hover);
    text-decoration: none;
  }
  
  
/* === Slide-In Animation === */
  .animated-bar {
    position: fixed;
    top: -56px;
    left: 0; right: 0;
    opacity: 0;
    animation: barSlideIn 1s cubic-bezier(.48,1.45,.7,1) 0.18s forwards;
    box-shadow: 0 2px 10px rgba(255,102,0,0.12);
  }
  @keyframes barSlideIn {
    0%   { top: -56px; opacity: 0; }
    60%  { top: 6px; opacity: 1;}
    100% { top: 0; opacity: 1; }
  }
  
  
/* === Optional: Gentle Attention Pulse === */
  .announcement-bar strong {
    animation: pulse 1.6s infinite cubic-bezier(.66,0,0,1);
    display: inline-block;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1);}
    60%      { transform: scale(1.13);}
  }
  
  
/* === Responsive === */
  @media (max-width: 700px) {
    .announcement-bar {
      font-size: 0.93rem;
      padding: 0.42em 0.15em;
    }
  }
  

/* === Global Reset === */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}
body {
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-secondary);
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; display: block; border-radius: var(--border-radius); }
a { color: var(--color-link); text-decoration: none; transition: color 0.16s; }
a:hover, a:focus { color: var(--color-link-hover); }

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-primary);
  color: var(--color-text-primary);
  margin: 0 0 1.3rem 0;
  font-weight: 800;
  letter-spacing: -0.5px;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4, h5, h6 { font-size: 1rem; }

p, ul, ol { margin-top: 0; margin-bottom: 1rem; }

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.text-center { text-align: center; }

/* === Header & Navigation === */
header {
  background: var(--color-surface);
  box-shadow: var(--shadow);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.7rem 1.2rem 0.5rem 1.2rem;
  gap: 1.6rem;
  border-bottom: 1px solid var(--color-border);
}
.logo-section img {
  max-height: 54px;
  width: auto;
  background: none;
  border-radius: 0;
}
.logo-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: 100%;
  position: relative;
}
.logotagline {
  font-family: var(--font-primary);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.05rem;
  margin-left: 0;
  opacity: 0.95;
  letter-spacing: 0.1px;
  text-align: center;
}
.logo-trust {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
}
.logo-trust--header {
  margin-left: 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  padding: 0.9rem 1.45rem;
  min-width: 320px;
  width: min(420px, 100%);
  border-radius: 16px;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 8px 20px rgba(15,23,42,0.08);
  backdrop-filter: blur(8px);
}
.logo-trust-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(15,23,42,0.06), rgba(15,23,42,0));
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a5568;
}
.trust-badges--header {
  margin: 0;
  max-width: none;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.trust-badges--header .trust-badge {
  position: relative;
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15,23,42,0.08);
  box-shadow: 0 2px 8px rgba(15,23,42,0.06);
  backdrop-filter: blur(6px);
}
.trust-badges--header .trust-badge:hover {
  box-shadow: 0 10px 18px rgba(15,23,42,0.12);
}
.trust-badges--header .trust-badge__logo {
  width: 22px;
  height: 22px;
}
.trust-badges--header .trust-badge__stars {
  font-size: 13px;
}
.trust-badges--header .trust-badge__platform {
  font-size: 13px;
}
.trust-badges--header .trust-badge__text {
  font-size: 12px;
  color: #555;
}
@media (max-width: 600px) {
  .logo-row { flex-direction: column; gap: 0.6rem; }
  .logo-section { align-items: center; gap: 0.8rem; }
  .logo-section img { max-height: 38px; }
  .logotagline { margin-left: 0; text-align: center; font-size: 0.97rem; }
  .logo-trust { align-items: center; flex-direction: column; gap: 0.35rem; }
  .logo-trust--header {
    margin-left: 0;
    position: static;
    transform: none;
    align-items: center;
    padding: 0.6rem 0.75rem;
    gap: 0.45rem;
    min-width: auto;
    width: 100%;
    max-width: 360px;
  }
  .logo-trust-label { letter-spacing: 0.12em; color: #555; }
  .trust-badges--header { justify-content: center; }
}

@media (prefers-color-scheme: dark) {
  .logo-trust--header {
    background: rgba(17,24,39,0.85);
    border-color: rgba(148,163,184,0.22);
    box-shadow: 0 14px 30px rgba(2,6,23,0.4);
  }
  .logo-trust-label { color: #cbd5f5; background: linear-gradient(135deg, rgba(148,163,184,0.16), rgba(148,163,184,0.06)); }
  .trust-badges--header .trust-badge {
    background: rgba(17,24,39,0.86);
    border-color: rgba(148,163,184,0.16);
    box-shadow: 0 2px 10px rgba(2,6,23,0.45);
  }
  .trust-badges--header .trust-badge:hover {
    box-shadow: 0 14px 26px rgba(2,6,23,0.55);
  }
  .trust-badges--header .trust-badge__text { color: #d1d5db; }
}

.navigation {
  width: 100%;
  background: none;
  margin-bottom: 0;
}
.navigation ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}
.navigation li {
  margin: 0 0.2rem;
  font-size: 1rem;
}
.navigation li a {
  display: block;
  padding: 0.95rem 1.3rem 0.8rem 1.3rem;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--color-text-primary);
  border-bottom: 2.5px solid transparent;
  background: none;
  border-radius: 0;
  letter-spacing: 0.05em;
  transition: color 0.18s, border-color 0.18s, background 0.15s;
}
.navigation li.current-page a,
.navigation li a:hover,
.navigation li a:focus {
  color: var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  background: none;
}
@media (max-width: 820px) {
  .navigation ul { flex-wrap: wrap; }
  .navigation li a { padding: 0.7rem 0.7rem 0.6rem 0.7rem; font-size: 0.97rem; }
}
  @media (max-width: 700px) {
    #toast-notification { right: 0.6rem; bottom: 0.6rem; padding: 0.7em 1em; font-size: 1em;}
  }
  

/* === Hero Section (Animated/Compact) === */
.animated-hero {
  position: relative;
  min-height: 120px;
  max-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 0.7rem;
  margin-bottom: 2.2rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--color-surface);
}
.animated-hero .hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: linear-gradient(110deg, #FFF 0%, #FF6600 110%);
  opacity: 0.06;
  animation: heroGradientMove 8s ease-in-out infinite alternate;
}
@keyframes heroGradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.animated-hero .hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.animated-hero h1, .animated-hero h2 {
  color: var(--color-primary);
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 1.2rem;
  opacity: 0;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 8px rgba(255,102,0,0.08);
  animation: heroFadeUp 0.95s cubic-bezier(.31,1.56,.64,1) 0.1s forwards;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px);}
  to { opacity: 1; transform: translateY(0);}
}
.animated-hero .hero-cta {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.6em 2em;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  opacity: 0;
  animation: heroButtonPop 0.7s cubic-bezier(.25,1.5,.5,1) 0.7s forwards;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.animated-hero .hero-cta:hover, .animated-hero .hero-cta:focus {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 14px rgba(255,102,0,0.08);
  transform: scale(1.03);
}
@keyframes heroButtonPop {
  from { opacity: 0; transform: scale(0.92);}
  to { opacity: 1; transform: scale(1);}
}
@media (max-width: 600px) {
  .animated-hero {
    min-height: 75px; max-height: 130px; padding: 1.1rem 0.2rem;
  }
  .animated-hero h1, .animated-hero h2 { font-size: 0.98rem;}
  .animated-hero .hero-cta { font-size: 0.88rem; padding: 0.4em 1.1em;}
}

/* === Auth, Basket, and User Controls === */
.header-controls, .auth-status-container {
  display: flex; align-items: center; gap: 0.5rem;
  justify-content: flex-end; background: none; padding: 0.6rem 1rem 0.4rem 1rem;
  font-size: 1rem;
}
.basket-indicator a {
  color: var(--color-primary);
  font-size: 1.35rem;
  display: flex; align-items: center;
  position: relative;
  padding: 0.2rem 0.7rem;
}
#basket-item-count {
  position: absolute; top: -8px; right: -5px;
  background: var(--color-primary); color: #fff;
  border-radius: 30px; padding: 0.08rem 0.5rem; font-size: 0.8rem; font-weight: 800;
}

/* === Content Grid (Homepage, Shop Pages) === */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 2.5fr 1fr;
  gap: 2.2rem;
  max-width: var(--container-max-width);
  margin: 0 auto 2rem auto;
}
.left-grid, .center-grid, .right-grid {
  display: flex; flex-direction: column; gap: 1.5rem;
}
.left-grid, .right-grid {
  background: var(--color-surface);
  padding: 1.2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}
.center-grid { background: none; padding: 0; box-shadow: none; }
@media (max-width: 900px) {
  .content-grid { grid-template-columns: 1.3fr 2fr; }
  .left-grid { display: none; }
}
@media (max-width: 700px) {
  .content-grid { grid-template-columns: 1fr; gap: 1rem; }
  .right-grid { order: 2; }
  .center-grid { order: 1; }
}

/* === Product Cards & Grids === */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.7rem;
  width: 100%;
}
.product-card, .card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.18s, transform 0.18s;
  display: flex;
  flex-direction: column;
}
.product-card:hover, .card:hover {
  box-shadow: 0 6px 22px rgba(255, 102, 0, 0.08);
  transform: translateY(-2px) scale(1.015);
}
.product-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  border-bottom: 1px solid var(--color-border);
}
.product-card-content {
  padding: 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card h4 { font-size: 1.07rem; margin-bottom: 0.6rem; font-weight: 700;}
.product-card .product-price { font-size: 1.12rem; color: var(--color-primary);}
.product-card .view-details-btn {
  background: var(--color-primary);
  color: #fff;
  padding: 0.5em 1.2em;
  border-radius: var(--border-radius);
  font-size: 0.98rem;
  font-weight: 700;
  margin-top: auto;
  transition: background 0.2s, transform 0.13s;
}
.product-card .view-details-btn:hover, .product-card .view-details-btn:focus {
  background: var(--color-primary-hover);
  transform: scale(1.03);
}

/* === Main Product Detail === */
.product-detail-container {
  display: flex; flex-wrap: wrap; gap: 2rem;
  background: var(--color-surface);
  padding: 2.2rem 1.2rem;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin-bottom: 2.5rem;
}
.product-images { flex: 1 1 280px; display: flex; flex-direction: column; align-items: center;}
.main-product-image { border: 1px solid var(--color-border); margin-bottom: 1.1rem;}
.thumbnail-container { display: flex; gap: 0.5rem; justify-content: center;}
.thumbnail-image { max-width: 55px; border: 2px solid var(--color-border); opacity: 0.7; border-radius: var(--border-radius);}
.thumbnail-image:hover, .thumbnail-image.active { opacity: 1; border-color: var(--color-primary);}
.product-info { flex: 1 1 360px; display: flex; flex-direction: column;}
.product-info h1 { font-size: 1.2rem; margin-bottom: 0.7rem;}
.product-price { color: var(--color-primary); font-size: 1.3rem; font-weight: 800;}
.product-short-description { color: var(--color-text-secondary); font-size: 1rem; margin-bottom: 1.1rem;}
.product-options { margin-bottom: 1.1rem; display: flex; flex-wrap: wrap; gap: 1.1rem;}
.product-options label { font-weight: 700;}
.quantity-selector, .color-selector {
  padding: 0.35em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-family: var(--font-secondary);
  background: var(--color-surface);
  color: var(--color-text-primary);
  min-width: 56px;
}
.add-to-basket-button {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.7em 2em;
  border: none;
  box-shadow: var(--shadow);
  transition: background 0.15s, transform 0.15s;
}
.add-to-basket-button:hover, .add-to-basket-button:focus {
  background: var(--color-primary-hover);
  transform: scale(1.04);
}
.feedback-message { margin-top: 0.7rem; font-weight: 700; color: var(--color-primary);}
.stock-status { color: var(--color-primary); font-weight: 700;}
.shipping-info { color: var(--color-text-secondary); font-size: 0.96rem; margin-bottom: 0.5rem;}
/* Lower product sections */
.product-long-description, .product-how-to-use, .product-ingredients, .product-disclaimer, .product-reviews, .related-products {
  margin-bottom: 2.2rem;
  padding: 1.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.product-long-description h2, .product-how-to-use h2, .product-ingredients h2, .product-disclaimer h2, .product-reviews h2, .related-products h2 {
  font-size: 1.05rem;
  color: var(--color-primary);
  border-bottom: 1.2px solid var(--color-border);
  margin-bottom: 1.1rem;
  padding-bottom: 0.4rem;
}

/* === Basket & Checkout === */
.basket-container, .checkout-container {
  background: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 2rem 1.2rem;
  max-width: 800px;
  margin: 2rem auto;
  display: flex; flex-direction: column; gap: 1rem;
}
.basket-item { display: flex; align-items: center; gap: 1.3rem; border-bottom: 1px solid var(--color-border); padding: 1rem 0;}
.basket-item img { width: 70px; height: 70px; object-fit: cover; border-radius: 9px;}
.basket-item-details { flex: 1;}
.basket-item-details h4 { margin: 0; font-size: 1rem; color: var(--color-text-primary);}
.basket-item-details p { margin: 0.1rem 0; color: var(--color-text-secondary);}
.basket-actions { display: flex; flex-direction: column; gap: 0.3rem;}
.basket-actions input[type="number"] { width: 44px; font-size: 0.95rem;}
.basket-actions button {
  background: var(--color-danger); color: #fff; border-radius: 6px; border: none;
  padding: 0.3rem 0.8rem; cursor: pointer; transition: background 0.15s;
}
.basket-actions button:hover { background: #a80000;}
.basket-total { text-align: right; font-size: 1.1rem; font-weight: bold; margin-top: 1.5rem;}
.checkout-section { display: flex; justify-content: flex-end; }
#checkout-button {
  padding: 0.7rem 2.2rem; font-size: 1rem;
  background: var(--color-primary); color: #fff;
  border: none; border-radius: var(--border-radius); cursor: pointer;
  transition: background 0.15s;
}
#checkout-button:hover { background: var(--color-primary-hover);}
#card-element {
  background: #fff; padding: 12px; border: 1px solid #ccc; border-radius: var(--border-radius);
  min-height: 44px; box-sizing: border-box;
}
.StripeElement { width: 100%; background: transparent;}
.StripeElement--focus { border-color: #ff6600; box-shadow: 0 0 0 1px #ff6600;}
#card-errors { color: var(--color-danger); font-size: 14px; margin-top: 0.5rem;}

/* === Auth & Forms === */
.auth-page-main, .contact-page-wrapper, .about-us-content, .faq-content, .basket-page-main {
  max-width: 680px; margin: 2rem auto; padding: 2.1rem 1.2rem;
  background: var(--color-surface); border-radius: var(--border-radius); box-shadow: var(--shadow);
}
.auth-container { max-width: 410px; margin: 0 auto; padding: 2rem;}
.auth-container h2 { text-align: center; font-size: 1.35rem; }
.form-group { margin-bottom: 1.1rem;}
label { display: block; margin-bottom: 0.3rem; font-weight: 700; color: var(--color-text-secondary);}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; padding: 0.6rem 1rem; border: 1px solid var(--color-border); border-radius: var(--border-radius);
  font-size: 1rem; background: var(--color-surface); color: var(--color-text-primary); transition: border 0.18s;
}
input:focus, select:focus, textarea:focus { border-color: var(--color-primary); outline: none;}
textarea { resize: vertical; min-height: 100px;}
.submit-button {
  background: var(--color-primary); color: #fff;
  border-radius: var(--border-radius); border: none;
  padding: 0.7em 1.7em; font-size: 1.05rem; font-weight: 700; width: 100%;
  margin-top: 1rem;
  transition: background 0.16s, box-shadow 0.14s;
}
.submit-button:hover, .submit-button:focus { background: var(--color-primary-hover); box-shadow: var(--shadow);}
.error-message { color: var(--color-danger); background: #f9d6d5; border: 1px solid var(--color-danger); padding: 0.7rem; border-radius: var(--border-radius);}
.success-message { color: var(--color-primary); background: #eafae4; border: 1px solid var(--color-primary); padding: 0.7rem; border-radius: var(--border-radius);}

/* === Footer === */
footer {
  background: #fff;
  border-top: 2px solid var(--color-border);
  padding: 2rem 0 1rem 0;
  font-family: var(--font-primary);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: auto;
}
.footer-container {
  max-width: var(--container-max-width);
  margin: 0 auto 1.2rem auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2rem;
}
.footer-element h4 { font-size: 1.05rem; font-weight: 700; color: var(--color-primary); margin-bottom: 0.2rem;}
.footer-socials {
  display: flex; gap: 1.1rem; align-items: center;
}
.footer-logos {
  width: 32px; height: 32px; opacity: 0.88;
  border-radius: 50%; background: rgba(255,102,0,0.07);
  padding: 0.18rem; transition: opacity 0.13s, transform 0.16s;
}
.footer-logos:hover, .footer-logos:focus { opacity: 1; transform: scale(1.12);}
@media (max-width: 700px) {
  .footer-container { flex-direction: column; gap: 1rem;}
}

/* === Miscellaneous & Utilities === */
.button, .buy-button, .auth-link, .logout-button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.6em 1.4em;
  transition: background 0.15s, box-shadow 0.13s;
}
.button:hover, .buy-button:hover, .auth-link:hover, .logout-button:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 14px rgba(255,102,0,0.10);
  color: #fff;
}
.video-container-parcel {
    max-width: 72px;        /* Was 180px; try 72px or even 60px for a small icon size */
    max-height: 72px;       /* Limit height as well */
    margin-left: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-container-parcel video {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* Ensures the video fits without stretching */
    display: block;
    background: #fff;
    border-radius: 0;
}
@media (max-width: 700px) {
    .video-container-parcel {
      max-width: 38px;
      max-height: 38px;
      margin-left: 0.5rem;
      border-width: 1px;
    }
    .video-container-parcel video {
      max-width: 100%;
      max-height: 100%;
    }
  }
  @media (max-width: 500px) {
    .video-container-parcel { display: none; }
  }
  

/* === Accessibility === */
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--color-primary); outline-offset: 2px;}

  @media (max-width: 700px) {
    #toast-notification { right: 0.6rem; bottom: 0.6rem; padding: 0.7em 1em; font-size: 1em;}
  }

  .mini-basket-dropdown {
    position: absolute;
    top: 130%;
    right: 0;
    width: 320px;
    background: #fff;
    border: 1.5px solid var(--color-primary);
    box-shadow: 0 8px 36px rgba(255,102,0,0.08);
    border-radius: var(--border-radius);
    padding: 1.2em 1em 1em 1em;
    display: none;
    z-index: 1202;
    min-height: 82px;
    font-size: 1rem;
    animation: miniBasketFadeIn 0.33s cubic-bezier(.66,0,0,1);
  }
  @keyframes miniBasketFadeIn {
    0% { opacity: 0; transform: translateY(-20px);}
    100% { opacity: 1; transform: translateY(0);}
  }
  .basket-indicator { position: relative; }
  
  .mini-basket-item {
    display: flex; align-items: center; gap: 0.7em;
    margin-bottom: 0.85em;
  }
  .mini-basket-item img {
    width: 52px; height: 52px; border-radius: 8px; object-fit: cover; border: 1px solid #eee;
    background: #fafafa;
  }
  .mini-basket-item > div {
    display: flex; flex-direction: column;
  }
  .mini-basket-item span:first-child { font-weight: 700; color: var(--color-text-primary);}
  .mini-basket-item span:last-child { color: var(--color-primary);}
  .mini-basket-total {
    border-top: 1px solid #eee;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8em 0 0.4em 0; font-weight: 700;
  }
  .mini-basket-btn {
    display: inline-block;
    width: 48%;
    background: #fafafa;
    color: var(--color-primary);
    font-weight: 700;
    padding: 0.6em 0;
    border-radius: var(--border-radius);
    text-align: center;
    margin-top: 0.7em;
    margin-right: 1%;
    text-decoration: none;
    border: 1px solid #ff6600;
    transition: background 0.15s, color 0.15s;
  }
  .mini-basket-btn-primary {
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
  }
  .mini-basket-btn:hover, .mini-basket-btn:focus { background: #ffe5d1; color: #FF6600;}
  .mini-basket-btn-primary:hover, .mini-basket-btn-primary:focus { background: var(--color-primary-hover);}
  .mini-basket-empty { color: #aaa; text-align: center; margin: 0.5em 0 0.6em 0; }
  
  @media (max-width: 700px) {
    .mini-basket-dropdown {
      right: -20vw; width: 92vw; min-width: 180px;
      font-size: 0.93em; padding: 1.1em 0.5em 0.6em 0.5em;
    }
  }

  .admin-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
    margin: 2em 0;
  }
  .admin-link-btn {
    background: linear-gradient(90deg, #f7b32b 10%, #920b1a 90%);
    color: #fff;
    padding: 1em 2.2em;
    border-radius: 16px;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 12px rgba(60,0,0,0.15);
    transition: transform 0.13s, box-shadow 0.13s, background 0.18s;
    border: none;
    outline: none;
  }
  .admin-link-btn:hover, .admin-link-btn:focus {
    background: linear-gradient(90deg, #f7b32b 20%, #6a0813 100%);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 24px rgba(146, 11, 26, 0.17);
    color: #fff;
  }
  @media (max-width: 650px) {
    .admin-links {
      flex-direction: column;
      gap: 1em;
    }
    .admin-link-btn {
      width: 95%;
      text-align: center;
      font-size: 1em;
      padding: 1em 0;
    }
  }

  
  
  .product-card a {
    text-decoration: none;
    color: inherit;
    display: block;
    padding: 1.4em 1em;
  }
  
  .product-card img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    background: #f5f5f7;
    border-radius: 11px;
    margin-bottom: 0.8em;
    transition: box-shadow 0.13s;
  }
  
  .product-card:hover, .product-card:focus-within {
    box-shadow: 0 8px 40px #ffd18438, 0 2px 8px #ff9f4338;
    transform: translateY(-3px) scale(1.013);
  }
  
  .product-card h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1em;
    margin: 0.1em 0 0.25em 0;
    font-weight: 700;
    color: #222;
  }
  
  .product-price {
    font-size: 1.07em;
    color: #ff9f43;
    font-weight: 700;
    margin-bottom: 0.7em;
  }
  
  .view-details-btn {
    display: inline-block;
    margin-top: 0.5em;
    background: #ff9f43;
    color: #fff;
    font-weight: bold;
    border-radius: 8px;
    padding: 0.6em 1.5em;
    font-size: 0.97em;
    transition: background 0.16s, color 0.16s;
  }
  .product-card:hover .view-details-btn {
    background: #ffd184;
    color: #191014;
  }
  
  
  .shop-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
  }
  
  .sidebar-section.styled-card {
    background: #fff;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    padding: 1.2rem 1rem;
    border: 1px solid var(--color-border);
  }
  
  .sidebar-heading {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .styled-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .styled-list li {
    margin-bottom: 0.7rem;
  }
  
  .styled-list a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-text-primary);
    font-weight: 600;
    padding: 0.5rem 0.8rem;
    border-radius: 0.5rem;
    transition: background 0.2s, transform 0.15s;
  }
  
  .styled-list a:hover {
    background: rgba(255,102,0,0.1);
    color: var(--color-primary);
    transform: translateX(4px);
  }
  
  .muted-text {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    opacity: 0.75;
  }

  .price-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
  }
  
  .price-filter-btn {
    padding: 0.5em 1em;
    background: #f9f9f9;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.96rem;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  
  .price-filter-btn:hover {
    background: rgba(255,102,0,0.1);
    transform: scale(1.02);
  }
  
  .price-filter-btn.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
  }

  /* Adjust hero for tablets and below */
@media (max-width: 768px) {
  .animated-hero {
    max-height: 180px;
    padding: 1.2rem 0.8rem;
  }

  .animated-hero h1 {
    font-size: 1rem;
    line-height: 1.3;
  }

  .animated-hero .hero-cta {
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
  }
}

/* Hide hero completely on very small screens */
@media (max-width: 480px) {
  .animated-hero {
    display: none;
  }
}

@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .left-grid, .right-grid {
    display: none; /* Hide sidebars to declutter */
  }
}

.product-card img {
  height: auto;
  max-height: 160px;
  object-fit: cover;
}

#featured-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
@media (max-width: 480px) {
  .video-container {
    display: none;
  }
}
/* === Profile Page Styling === */
.profile-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 2em;
  background: #f9f9fc;
  border-radius: 18px;
  box-shadow: 0 4px 30px #0001;
}

/* Home Page: Trending and New Arrivals responsive grid */
/*
  On larger screens, ensure that the “Trending” and “New Arrivals” sections
  display multiple cards per row instead of a single column. The auto-fit
  property allows cards to wrap into additional rows as needed. Overflow
  is visible so there is no horizontal scroll on desktop.
*/
#trending-products,
#new-arrivals-container {
  /* Base styles for both sections */
  display: grid;
  gap: 16px;
}

@media (max-width: 600px) {
  /* On small screens, display trending and new arrivals in two columns without horizontal scroll */
  #trending-products,
  #new-arrivals-container {
    /* Use two columns that each take up half the available width */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Reset any auto-flow rules from desktop */
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    gap: 12px;
    /* Prevent horizontal scrolling */
    overflow-x: hidden;
    overflow-y: visible;
  }
}

@media (min-width: 601px) {
  /* On larger screens, use responsive multi-column layout */
  #trending-products,
  #new-arrivals-container {
    grid-auto-flow: unset;
    overflow: visible;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}
#profile-form label {
  display: block;
  margin-bottom: 1em;
  font-weight: 600;
  color: #333;
}

#profile-form input,
#profile-form textarea {
  width: 100%;
  padding: 0.75em 1em;
  border-radius: 10px;
  border: 1.5px solid #ccc;
  font-size: 1em;
  font-family: 'Roboto', sans-serif;
  background: #fff;
  transition: border 0.2s, box-shadow 0.2s;
}

#profile-form input:focus,
#profile-form textarea:focus {
  border-color: var(--accent, #f7b32b);
  box-shadow: 0 0 0 2px var(--accent, #f7b32b33);
  outline: none;
}

.profile-preview-img {
  max-width: 140px;
  margin-top: 0.7em;
  border-radius: 12px;
  box-shadow: 0 2px 10px #0002;
  display: block;
}

.success-text {
  color: var(--success, #43ff8f);
  margin-top: 0.7em;
  font-weight: 600;
}

#profile-status {
  font-size: 1em;
  margin-top: 0.8em;
}
#profile-view {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  padding: 2em;
  margin: 2em auto;
  max-width: 880px;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInSlideUp 0.6s ease forwards;
}

/* Slide-up fade-in */
@keyframes fadeInSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-container h2 {
  font-size: 2em;
  margin-bottom: 1em;
  color: #222;
}

.profile-preview-img {
  max-width: 140px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.profile-preview-img:hover {
  transform: scale(1.05);
}

#profile-view p {
  margin: 0.4em 0;
  font-size: 1.05em;
  color: #444;
}

#edit-profile-btn {
  margin-top: 1.5em;
  padding: 0.75em 1.25em;
  font-size: 1em;
  background-color: #ffcc00;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#edit-profile-btn:hover {
  background-color: #f7b32b;
  transform: scale(1.03);
}
#profile-form {
  animation: fadeInSlideUp 0.6s ease;
}

.order-card {
  background: #fff;
  border-radius: 12px;
  padding: 1em;
  margin-bottom: 1.2em;
  box-shadow: 0 3px 15px rgba(0,0,0,0.06);
  transition: all 0.2s ease;
}

.order-card:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.order-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 0.5em;
}

.order-details {
  font-size: 0.95em;
  color: #444;
}

.order-items-list {
  margin-top: 0.7em;
  padding-left: 1.2em;
  font-size: 0.95em;
}

.order-card {
  background: #fffbea;
  border-left: 6px solid #f7b32b;
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  transition: transform 0.2s ease;
}
.order-card:hover {
  transform: scale(1.01);
}
.order-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.order-details p {
  margin: 0.2em 0;
}
.order-items-list {
  margin-top: 0.6em;
  padding-left: 1.2em;
}
.order-items-list li {
  margin-bottom: 0.25em;
}
.google-signin-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background-color: #fff;
  border: 1px solid #dcdcdc;
  color: #444;
  font-weight: 500;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;

  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
  width: 100%;
  max-width: 300px;
  margin: 10px auto 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.google-signin-button img {
  width: 20px;
  height: 20px;
}

.google-signin-button:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.google-signin-button:active {
  transform: translateY(0);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

/*profile page*/

 
    .profile-page {
      max-width: 1100px;
      margin: 0 auto;
    }

    .profile-banner {
      height: 200px;
      /* Use a branded gradient instead of an external placeholder image */
      background: linear-gradient(90deg, #920b1a 0%, #f7b32b 100%);
      position: relative;
      border-radius: 0 0 12px 12px;
    }

    .profile-avatar {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      border: 4px solid #fff;
      position: absolute;
      bottom: -65px;
      left: 2em;
      background: #fff;
      object-fit: cover;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }

    .profile-header {
      padding: 80px 2em 1em 2em;
      display: flex;
      align-items: flex-end;
      gap: 1em;
      background: #fff;
      border-bottom: 1px solid #eee;
    }

    .profile-header h1 {
      margin: 0;
      font-size: 1.8em;
    }

    .profile-nav {
      display: flex;
      justify-content: space-around;
      background: #fff;
      padding: 0.8em 0;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }

    .profile-nav a {
      text-decoration: none;
      font-weight: 500;
      color: #444;
      padding: 0.5em 1em;
      border-radius: 8px;
    }

    .profile-nav a.active,
    .profile-nav a:hover {
      background: #f7b32b;
      color: #000;
    }

    .profile-content {
      background: #fff;
      padding: 2em;
      border-radius: 0 0 12px 12px;
    }

    .section {
      display: none;
    }

    .section.active {
      display: block;
    }

    .theme-selector {
      margin-top: 1em;
    }

    .order-card {
      border: 1px solid #ccc;
      padding: 1em;
      border-radius: 10px;
      margin-bottom: 1em;
    }

    @media (max-width: 768px) {
      .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .profile-avatar {
        left: 50%;
        transform: translateX(-50%);
        bottom: -65px;
      }

      .profile-header h1 {
        margin-top: 70px;
      }
    }

/* Base Dark Mode Theme - Night Blue */
body.dark-mode {
  background-color: var(--bb-color-page);
  color: var(--bb-color-text);
}

.dark-mode header,
.dark-mode .logo-section,
.dark-mode .navigation,
.dark-mode .profile-content,
.dark-mode footer {
  background-color: var(--bb-color-surface);
  color: var(--bb-color-text);
  border-color: rgba(148, 163, 184, 0.24);
}

.dark-mode .navigation ul li a,
.dark-mode .profile-nav a {
  color: var(--bb-color-text-muted);
}

.dark-mode .navigation ul li a:hover,
.dark-mode .profile-nav a:hover,
.dark-mode .profile-nav a.active {
  color: var(--bb-color-primary);
  background-color: rgba(255, 102, 0, 0.16);
}

.dark-mode .profile-avatar {
  border-color: rgba(255, 255, 255, 0.25);
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea,
.dark-mode button {
  background-color: rgba(15, 23, 42, 0.35);
  color: var(--bb-color-text);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.dark-mode .order-card {
  background-color: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.25);
}

.dark-mode .announcement-bar,
.dark-mode .footer-container,
.dark-mode .auth-status-container,
.dark-mode .content-grid {
  background-color: var(--bb-color-page);
  color: var(--bb-color-text-muted);
}

.saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1em;
  margin-top: 1em;
}

.saved-card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 1em;
  background: #fafafa;
  text-align: center;
  transition: box-shadow 0.2s;
}

.saved-card:hover {
  box-shadow: 0 2px 10px #0002;
}

.saved-card img {
  max-width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 0.5em;
}
.saved-items-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  margin-top: 1em;
}
.saved-card {
  background: #fff;
  padding: 1em;
  border-radius: 12px;
  box-shadow: 0 2px 10px #0001;
  width: 260px;
  text-align: center;
}
.saved-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
}
.saved-card h3 {
  font-size: 1.1em;
  margin: 0.7em 0 0.3em;
}
.saved-card p {
  color: #444;
  margin-bottom: 0.4em;
}
.saved-card button {
  background: #d32f2f;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.4em 1em;
  cursor: pointer;
}
.basket-icon-wrapper {
  position: relative;
  display: inline-block;
}

.basket-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  background: white;
  color: #222;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.1);
  width: 280px;
  z-index: 999;
  display: none;
  flex-direction: column;
  padding: 1em;
}

.basket-dropdown.visible {
  display: flex;
}

.basket-preview-items {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 1em;
}

.basket-preview-footer {
  text-align: right;
}
/* Basket Icon Button */
.basket-indicator-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 1em;
}

.basket-icon-btn {
  position: relative;
  font-size: 1.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-color, #222);
  transition: transform 0.2s ease;
}

.basket-icon-btn:hover {
  transform: scale(1.15);
}

.basket-count-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: crimson;
  color: white;
  font-size: 0.75rem;
  padding: 2px 5px;
  border-radius: 50%;
  font-weight: bold;
}

@keyframes bb-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.basket-count-badge.bump {
  animation: bb-badge-bump 320ms ease;
}

/* Basket Dropdown */
.basket-dropdown {
  position: absolute;
  top: 120%;
  right: 0;
  width: 280px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  padding: 1em;
  z-index: 1000;
  display: none;
}

/* Variant picker modal (shared) */
.bb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;z-index:2000}
.bb-overlay.show{display:flex}
.bb-modal{background:#fff;color:#222;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.25);width:min(92vw,420px);padding:18px}
.bb-modal h3{margin:0 0 10px 0;font:700 1.1rem/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.bb-modal .bb-groups{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.bb-modal .bb-field{display:flex;flex-direction:column;gap:6px}
.bb-modal label{font-weight:600}
.bb-modal select,.bb-modal input[type=number]{padding:.55em .7em;border:1px solid #ddd;border-radius:8px}
.bb-modal .bb-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.bb-btn{border:0;border-radius:10px;padding:.6em 1.1em;font-weight:700;cursor:pointer}
.bb-btn.primary{background:#f7b32b;color:#181717;box-shadow:0 2px 10px #f7b32b22}
.bb-btn.primary:hover{background:#920b1a;color:#fff}
.bb-btn.ghost{background:#f3f4f6;color:#111}

.basket-dropdown.visible {
  display: block;
}

.basket-preview-items > div {
  margin-bottom: 0.6em;
  font-size: 0.95em;
}

/* Variant chips (used in mini-basket and basket) */
.bb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,245,245,0.9));
  color: #333;
}

.basket-preview-footer {
  border-top: 1px solid #ddd;
  padding-top: 0.75em;
  text-align: right;
}

.checkout-link {
  display: inline-block;
  margin-top: 0.5em;
  background: #0070f3;
  color: white;
  padding: 0.5em 1em;
  border-radius: 6px;
  font-size: 0.9em;
  text-decoration: none;
  transition: background 0.2s ease;
}

.checkout-link:hover {
  background: #005ad1;
}
@media screen and (max-width: 700px) {
  .basket-dropdown {
    right: 10px;
    width: 90vw;
  }

  .basket-icon-btn {
    font-size: 1.6rem;
  }

  .basket-count-badge {
    top: -5px;
    right: -5px;
  }
}
.auth-basket-wrapper {
  position: fixed;
  top: var(--basket-offset, 3.2em); /* adjusted dynamically for banner */
  right: 1em;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  padding: 0.5em 1em;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 600px) {
  .auth-basket-wrapper {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75em;
    padding: 0.5em;
  }

  .basket-dropdown {
    right: 0 !important;
  }
}
@media screen and (max-width: 600px) {
  .auth-basket-wrapper {
    flex-direction: column;
    align-items: flex-end;
    padding: 0.5em;
    right: 0.5em;
    gap: 0.4em;
  }
}

.auth-basket-wrapper {
  position: fixed;
  top: 3.5em; /* updated dynamically by JS */
  right: 1em;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  padding: 0.6em 1em;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* Auth link styling (optional) */
.auth-basket-wrapper .auth-link {
  font-size: 0.95rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  margin-left: 0.3em;
}

.auth-basket-wrapper .auth-link:hover {
  text-decoration: underline;
}

/* Basket icon */
.basket-icon-btn {
  position: relative;
  font-size: 1.4rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #222;
  transition: transform 0.2s ease;
}

.basket-icon-btn:hover {
  transform: scale(1.15);
}

/* Badge */
.basket-count-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: crimson;
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 50%;
  font-weight: bold;
}

/* Responsive fallback */
@media screen and (max-width: 600px) {
  .auth-basket-wrapper {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5em;
    right: 0.5em;
    top: 1em;
    padding: 0.5em;
  }

  .basket-dropdown {
    right: 0 !important;
    width: 90vw;
  }
}

.hero-content {
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 1;
  transform: translateY(0);
}

.hero-section.scrolled .hero-content {
  opacity: 0;
  transform: translateY(-20px);
}

.hero-bg {
  transition: opacity 0.3s ease;
}

.hero-section.scrolled .hero-bg {
  opacity: 0;
}

.hero-content, .hero-bg {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-section.scrolled .hero-content,
.hero-section.scrolled .hero-bg {
  opacity: 0;
  transform: translateY(-20px);
}

.out-of-stock-banner {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(211, 47, 47, 0.9); /* red overlay */
  color: white;
  font-weight: bold;
  padding: 0.3em 0.7em;
  border-radius: 6px;
  z-index: 10;
  font-size: 0.9rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.product-card {
  position: relative; /* Needed to position banner absolutely */
}

  /* Auth buttons become compact and center-aligned */
  

/* SIDEBAR CONTAINER */
/* SIDEBAR CONTAINER */
.search-sidebar {
  position: fixed;
  top: 225px;
  left: 0;
  width: 280px;
  max-height: 80vh;
  overflow-y: auto;
  background: #fdfdfd;
  border-right: 1px solid #e0e0e0;
  padding: 1.5em 1em;
  z-index: 1000;
  transform: translateX(-110%);
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.06);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.search-sidebar.active {
  transform: translateX(0);
}

/* TOGGLE BUTTON */
#toggle-sidebar {
  position: fixed;
  left: 10px;
  top: 200px;
  background: #141f2f; /* Dark night blue */
  color: #fff;
  padding: 0.5em 1.1em;
  border: none;
  border-radius: 8px;
  z-index: 1001;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}

#toggle-sidebar:hover {
  background: #213146;
}

/* SECTION HEADERS */
.search-sidebar h3,
.search-sidebar h4 {
  margin-top: 1em;
  color: #333;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 0.4em;
}

/* INPUTS */
.sidebar-inner input[type="text"],
.sidebar-inner input[type="number"] {
  width: 100%;
  margin-top: 0.4em;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 0.95rem;
  transition: border 0.3s ease;
}

.sidebar-inner input[type="text"]:focus,
.sidebar-inner input[type="number"]:focus {
  border-color: #4a90e2;
  outline: none;
}

/* CHECKBOX FILTERS */
.sidebar-inner label {
  display: block;
  margin-top: 0.5em;
  font-size: 0.95rem;
  color: #444;
}

.sidebar-inner input[type="checkbox"] {
  margin-right: 0.4em;
  accent-color: #141f2f;
}

/* Scrollbar customization (optional) */
.search-sidebar::-webkit-scrollbar {
  width: 8px;
}
.search-sidebar::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}
.search-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

/* === = === */
/* === Brit-Buy E-commerce CSS Overhaul   === */
/* === Brand Colors: #FF6600, White, Gray === */
/* === = === */

/* === Toast Notification Enhancement === */
/* === Toast Notification Enhancement === */
#toast-notification.toast-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  animation: fadeInSlideUp 0.4s ease-out;
}
@keyframes fadeInSlideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Unified Button Classes === */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--border-radius);
  padding: 0.6em 1.4em;
  font-size: 1rem;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--color-primary-hover);
  transform: scale(1.02);
}

.btn-secondary {
  background: #fff;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--border-radius);
  padding: 0.6em 1.4em;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: rgba(255, 102, 0, 0.1);
  color: var(--color-primary);
}

/* === Mini Loader Spinner === */
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
  margin: auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* === Featured Badge === */
.featured-badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background-color: var(--color-primary);
  color: #fff;
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  font-weight: bold;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* === Checkout Trust Badges === */
.checkout-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
.checkout-badge {
  background: #f1f8ff;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* === Small Announcement / Tag Bar === */
.top-tag-bar {
  background: #fffbe6;
  color: #925a00;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid #ffe58f;
  font-weight: 600;
}

/* === Hover Card Pop Effect === */
.card-hover-pop {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}
.card-hover-pop:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

/* === Section Divider === */
.section-divider {
  height: 1px;
  background: var(--color-border);
  margin: 2rem 0;
}

/* === Pulse Animation for Highlights === */
.pulse {
  animation: pulseAnim 1.6s infinite ease-in-out;
}
@keyframes pulseAnim {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}

/* === Glow Text for Headlines === */
.glow-text {
  color: var(--color-primary);
  text-shadow: 0 0 6px rgba(255, 102, 0, 0.4), 0 0 12px rgba(255, 102, 0, 0.3);
}

/* === Tag Chips (used for product tags/categories) === */
.tag-chip {
  display: inline-block;
  padding: 0.3em 0.8em;
  background: rgba(255, 102, 0, 0.1);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 999px;
  margin-right: 0.4em;
  margin-bottom: 0.4em;
}

/* === Star Rating Display === */
.star-rating {
  display: flex;
  gap: 0.2em;
  color: #fbbc04;
  font-size: 1.1rem;
}

/* === Responsive Utility Classes === */
.hide-mobile {
  display: block;
}
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

.shop-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 260px;
  margin-bottom: 2rem;
}
.shop-sidebar .sidebar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.shop-sidebar .styled-list li a,
.shop-sidebar .price-filter-btn {
  display: block;
  width: 100%;
  background: #fdfdfd;
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.shop-sidebar .styled-list li a:hover,
.shop-sidebar .price-filter-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  transform: translateX(4px);
}
.shop-sidebar .price-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

@media (max-width: 900px) {
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
}

.shop-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* === Filter Panel Styling === */
.shop-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 260px;
  flex-shrink: 0;
}
.shop-sidebar .sidebar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.shop-sidebar .styled-list li a,
.shop-sidebar .price-filter-btn {
  display: block;
  width: 100%;
  background: #fdfdfd;
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.shop-sidebar .styled-list li a:hover,
.shop-sidebar .price-filter-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  transform: translateX(4px);
}
.shop-sidebar .price-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .shop-container {
    flex-direction: column;
  }
  .hero-section {
    padding: 2rem 1.6rem;
    min-height: 120px;
  }
  .hero-section {
    padding: 2rem 1.4rem;
    min-height: 120px;
  }
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
}

.hero-section {
  max-width: var(--container-max-width);
  margin: 2rem auto;
  padding: 2.5rem;
  background: linear-gradient(135deg, #fff8f2, #fffcf7);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 130px;
  display: grid;
  place-content: center;
  gap: 0.4rem;
}
.hero-section h1,
.hero-section h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}
.hero-section p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 102, 0, 0.07);
  border-radius: 50%;
  z-index: 0;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .shop-container {
    flex-direction: column;
  }
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
  .hero-section {
    padding: 1.5rem;
    margin: 1.5rem 1rem;
  }
  .hero-section h1 {
    font-size: 1.5rem;
  }
}

/* === Logo Section Styling === */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--color-border);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-primary);
  text-decoration: none;
}
.site-logo img {
  height: 40px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}
.site-logo:hover img {
  transform: rotate(-3deg) scale(1.03);
}

/* === Layout Container === */
.shop-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* === Filter Panel Styling === */
.shop-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 260px;
  flex-shrink: 0;
}
.shop-sidebar .sidebar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.shop-sidebar .styled-list li a,
.shop-sidebar .price-filter-btn {
  display: block;
  width: 100%;
  background: #fdfdfd;
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.shop-sidebar .styled-list li a:hover,
.shop-sidebar .price-filter-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  transform: translateX(4px);
}
.shop-sidebar .price-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.5rem;
}

/* === Hero Section Enhancements for Non-Index Pages === */
.hero-section {
  max-width: var(--container-max-width);
  margin: 2rem auto;
  padding: 2.5rem;
  background: linear-gradient(135deg, #fff8f2, #fffcf7);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section h1,
.hero-section h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}
.hero-section p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 102, 0, 0.07);
  border-radius: 50%;
  z-index: 0;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .shop-container {
    flex-direction: column;
  }
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
  .site-header {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
  }
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--color-border);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-primary);
  text-decoration: none;
  position: relative;
}
.site-logo img {
  height: 40px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}
.site-logo:hover img {
  transform: rotate(-3deg) scale(1.03);
}
.site-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-secondary);
  margin-top: 0.25rem;
  line-height: 1.3;
  color: var(--color-primary); /* Fallback */
  background: linear-gradient(90deg, #FF6600, #FF9A66);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}

/* === Layout Container === */
.shop-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* === Filter Panel Styling === */
.shop-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 260px;
  flex-shrink: 0;
}
.shop-sidebar .sidebar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.shop-sidebar .styled-list li a,
.shop-sidebar .price-filter-btn {
  display: block;
  width: 100%;
  background: #fdfdfd;
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.shop-sidebar .styled-list li a:hover,
.shop-sidebar .price-filter-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  transform: translateX(4px);
}
.shop-sidebar .price-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.5rem;
}

/* === Hero Section Enhancements for Non-Index Pages === */
.hero-section {
  max-width: var(--container-max-width);
  margin: 2rem auto;
  padding: 2.5rem;
  background: linear-gradient(135deg, #fff8f2, #fffcf7);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section h1,
.hero-section h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}
.hero-section p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 102, 0, 0.07);
  border-radius: 50%;
  z-index: 0;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .shop-container {
    flex-direction: column;
  }
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
  .hero-section {
    padding: 1.5rem;
    margin: 1.5rem 1rem;
  }
  .hero-section h1 {
    font-size: 1.5rem;
  }
  .site-header {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
  }
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--color-border);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-primary);
  text-decoration: none;
  position: relative;
  justify-content: center;
  text-align: center;
}
.site-logo img {
  height: 40px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}
.site-logo:hover img {
  transform: rotate(-3deg) scale(1.03);
}
.site-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-secondary);
  margin-top: 0.25rem;
  line-height: 1.3;
  color: var(--color-primary); /* Fallback */
  background: linear-gradient(90deg, #FF6600, #FF9A66);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: block;
}

/* === Layout Container === */
.shop-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* === Filter Panel Styling === */
.shop-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 260px;
  flex-shrink: 0;
}
.shop-sidebar .sidebar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.shop-sidebar .styled-list li a,
.shop-sidebar .price-filter-btn {
  display: block;
  width: 100%;
  background: #fdfdfd;
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.shop-sidebar .styled-list li a:hover,
.shop-sidebar .price-filter-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  transform: translateX(4px);
}
.shop-sidebar .price-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.5rem;
}

/* === Hero Section Enhancements for Non-Index Pages === */
.hero-section {
  max-width: var(--container-max-width);
  margin: 2rem auto;
  padding: 2.5rem;
  background: linear-gradient(135deg, #fff8f2, #fffcf7);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section h1,
.hero-section h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}
.hero-section p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -40px; bottom: rem;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .shop-container {
    flex-direction: column;
  }
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
  .hero-section {
    padding: 1.5rem;
    margin: 1.5rem 1rem;
  }
  .hero-section h1 {
    font-size: 1.5rem;
  }
  .site-header {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
  }
}

.video-container-parcel{
  display: none;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid var(--color-border);
}
.site-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-primary);
  text-decoration: none;
  position: relative;
  justify-content: center;
  text-align: center;
}
.site-logo img {
  height: 40px;
  width: auto;
  display: block;
  transition: transform 0.2s ease;
}
.site-logo:hover img {
  transform: rotate(-3deg) scale(1.03);
}
.site-tagline {
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-secondary);
  margin-top: 0.25rem;
  line-height: 1.3;
  color: var(--color-primary);
  background: linear-gradient(90deg, #FF6600, #FF9A66);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  text-align: center;
  display: block;
}

/* === Layout Container === */
.shop-container {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* === Filter Panel Styling === */
.shop-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  max-width: 260px;
  flex-shrink: 0;
}
.shop-sidebar .sidebar-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.shop-sidebar .styled-list li a,
.shop-sidebar .price-filter-btn {
  display: block;
  width: 100%;
  background: #fdfdfd;
  border: 1px solid var(--color-border);
  padding: 0.6em 1em;
  margin-bottom: 0.6rem;
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.shop-sidebar .styled-list li a:hover,
.shop-sidebar .price-filter-btn:hover {
  background: rgba(255, 102, 0, 0.1);
  transform: translateX(4px);
}
.shop-sidebar .price-filter-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.5rem;
}

/* === Hero Section Enhancements for Non-Index Pages === */
.hero-section {
  max-width: var(--container-max-width);
  margin: 2rem auto;
  padding: 2.5rem;
  background: linear-gradient(135deg, #fff8f2, #fffcf7);
  border-radius: var(--border-radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-section h1,
.hero-section h2 {
  font-family: var(--font-primary);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}
.hero-section p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -40px;
  width: 120px;
  height: 120px;
  background: rgba(255, 102, 0, 0.07);
  border-radius: 50%;
  z-index: 0;
}
.hero-section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .shop-container {
    flex-direction: column;
  }
  .shop-sidebar {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
  }
  .shop-sidebar .styled-card,
  .shop-sidebar .sidebar-section {
    flex: 1 1 240px;
    min-width: 240px;
  }
  .hero-section {
    padding: 1.5rem;
    margin: 1.5rem 1rem;
  }
  .hero-section h1 {
    font-size: 1.5rem;
  }
  .site-header {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    text-align: center;
  }
}

/* === Enhanced Basket Wrapper Styling === */
.auth-basket-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-left: auto;
  position: relative;
  z-index: 10;
  padding-right: 1rem;
}

/* Align items horizontally unless stacked on mobile */
.auth-status-container {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
/* Mobile Fix: Float Basket Bottom Right */
@media (max-width: 768px) {
  .auth-basket-wrapper {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: white;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    padding: 0.4rem 0.8rem;
    flex-direction: row;
    justify-content: space-between;
    max-height: 50%;
    
  }

  .auth-status-container {
    display: none; /* Hide login/signup links in this floating layout */
  }

  #basket-icon {
    font-size: 1.2rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: white;
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    position: relative;
  }

  .basket-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: white;
    color: var(--color-primary);
    border-radius: 50%;
    font-size: 0.65rem;
    padding: 0.15em 0.45em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    font-weight: 700;
  }

  #basket-dropdown {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .auth-basket-wrapper {
    position: fixed;
  
    right: 1rem;
    background: white;
    z-index: 20000; /* make sure it's above hero but below modals */
    border-radius: 2rem;
    padding: 0.4rem 0.9rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
  }

  #basket-icon {
    font-size: 1.2rem;
    padding: 0.6rem 1rem;
    border-radius: 2rem;
    background: var(--color-primary);
    color: white;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  }

  .basket-count-badge {
    top: -6px;
    right: -6px;
    font-size: 0.65rem;
    padding: 0.15em 0.45em;
    background: white;
    color: var(--color-primary);
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
}
.hero-section {
  /* existing styles... */
  padding-bottom: 4.5rem; /* Add room for fixed basket */
}

@media (max-width: 768px) {
  .auth-basket-wrapper {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    background: #fff;
    border-radius: 2rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    padding: 0.6rem 1rem;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .auth-status-container {
    display: none;
  }

  .basket-icon-btn {
    background: var(--color-primary);
    color: white;
    font-weight: 700;
    font-size: 1.25rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    position: relative;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  }

  .basket-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #fff;
    color: var(--color-primary);
    font-size: 0.65rem;
    font-weight: bold;
    border-radius: 999px;
    padding: 0.2em 0.45em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }

  .basket-dropdown {
    display: none !important; /* hide dropdown on mobile */
  }
}

@media (max-width: 768px) {
  .hero-section,
  .animated-hero,
  .content-grid {
    padding-bottom: 4rem;
  }
}

.auth-basket-wrapper {
  
  height: 4em;
}

.right-grid {
  background: linear-gradient(135deg, #fffdf7, #fff4e6);
  padding: 2rem;
  border-radius: 1.25rem;
  box-shadow: 0 10px 40px rgba(255, 102, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  transition: background 0.3s ease;
}

.right-grid .heading h2 {
  font-size: 1.75rem;
  color: var(--color-primary);
  font-weight: 900;
  margin-bottom: 0.5rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.delivery-options-list ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  text-align: center;
}
.delivery-options-list ul li {
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease;
}
.delivery-options-list ul li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 102, 0, 0.1);
}
.delivery-options-list ul li::before {
  content: '🚚';
  margin-right: 0.5em;
  color: var(--color-primary);
}

.video-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(255,102,0,0.12);
  background: #000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video-container::before {
  content: "Fast Delivery in Action";
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 0.4em 0.8em;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.video-container:hover {
  transform: scale(1.015);
  box-shadow: 0 14px 40px rgba(255, 102, 0, 0.18);
}
.video-container video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

@media (max-width: 768px) {
  .right-grid {
    padding: 1.5rem;
  }
  .video-container video {
    height: 220px;
  }
  .video-container::before {
    font-size: 0.85rem;
    bottom: 0.7rem;
    left: 0.7rem;
  }
}

.trust-bar {
  background: #e8fce8;
  color: #1a4d1a;
  padding: 0.8em;
  text-align: center;
  font-weight: 600;
  border: 1px solid #b5dfb5;
  border-radius: 8px;
  margin: 1em 0;
}

.trust-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  background: #f4fff4;
  border: 1px solid #c7eac7;
  color: #1a4d1a;
  font-weight: 600;
  font-size: 0.96rem;
  padding: 0.8em 1.2em;
  border-radius: 12px;
  margin: 1.5em auto;
  max-width: 900px;
  box-shadow: 0 2px 8px rgba(0,128,0,0.05);
  flex-wrap: wrap;
  text-align: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.4em;
  
}

.trust-divider {
  font-weight: bold;
  opacity: 0.5;
}

.estimated-arrival-text {
  margin-top: 0.5em;
  font-size: 0.96rem;
  font-weight: 600;
  color: #1a4d1a;
  background: #f0fff0;
  border-left: 4px solid #70c170;
  padding: 0.6em 0.8em;
  border-radius: 8px;
  max-width: 360px;
  margin-bottom: 1rem;
}

.support-help-bar {
  background: #f0f8ff;
  border-top: 1px solid #d0e6ff;
  padding: 0.8em 1.2em;
  text-align: center;
  font-weight: 500;
  font-size: 1em;
  color: #144e84;
}
.support-help-bar a {
  color: #0b74d1;
  text-decoration: underline;
  font-weight: bold;
}

.product-guarantees .guarantee-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1em;
}
.product-guarantees .guarantee-list li {
  margin-bottom: 0.6em;
  font-size: 1.05em;
  color: #2a2e35;
  display: flex;
  align-items: center;
  gap: 0.5em;
}



/* === Auth Basket Wrapper === */
/* === Auth Basket Layout Overhaul === */
.auth-basket-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  right: 0;
  z-index: 1;
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Basket icon link */
#basket-icon {
  font-size: 1.2rem;
  background: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

/* Count badge on top of basket */
.basket-count-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: white;
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 50%;
  padding: 0.2em 0.5em;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}

/* Auth links like Login, Signup */
.auth-link {
  font-weight: bold;
  color: var(--color-primary);
  text-decoration: none;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.auth-link:hover {
  background: rgba(255, 102, 0, 0.1);
}

/* Responsive refinement */
@media screen and (max-width: 768px) {
  .auth-basket-wrapper {
    position: relative;
    top: unset;
    flex-direction: column;
    align-items: flex-end;
    padding: 0.8rem 1rem;
    margin-top: 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }

  #basket-icon {
    font-size: 1.3rem;
    padding: 0.6rem 1.2rem;
  }

  .auth-link {
    display: block;
    margin-top: 0.4rem;
    padding: 0.5rem 1rem;
  }

  .basket-count-badge {
    font-size: 0.65rem;
    padding: 0.15em 0.45em;
  }
}

.hero-section {
  position: relative; /* ✅ Normal flow */
}

/* === Navigation Bar === */
/* === Navigation Bar: Elevated Modern Look === */
/* === BritBuy Navigation — Ultra Polished === */
.navigation {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 0;
  z-index: 999;
  transition: background 0.4s ease;
}

.navigation ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 1.5rem;
  gap: 1.5rem;
  margin: 0;
  list-style: none;
}

.navigation li a {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #111;
  text-decoration: none;
  position: relative;
  padding: 0.7rem 1.2rem;
  border-radius: 2rem;
  transition: all 0.25s ease;
  overflow: hidden;
}

.navigation li a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary), #ff6a00);
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.3s ease;
  z-index: -1;
  border-radius: 2rem;
}

.navigation li a:hover::before,
.navigation li a:focus::before {
  opacity: 1;
  transform: scale(1);
}

.navigation li a:hover,
.navigation li a:focus {
  color: white;
}

/* Active nav link */
.navigation li.current-page a {
  background: linear-gradient(135deg, var(--color-primary), #ff6a00);
  color: white;
  box-shadow: 0 4px 14px rgba(255, 106, 0, 0.25);
}

/* Animated neon underline */
.navigation li a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 0%;
  height: 2px;
  background: var(--color-primary);
  transition: width 0.4s ease, left 0.4s ease;
}

.navigation li a:hover::after,
.navigation li.current-page a::after {
  width: 60%;
  left: 20%;
}

/* Profile (only visible if signed in) */
#profile-nav-item {
  display: none;
}

/* Responsive Tweaks */
@media screen and (max-width: 768px) {
  .navigation ul {
    gap: 0.6rem;
    padding: 0.8rem 1rem;
  }

  .navigation li a {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }
}

/* Optional Dark Mode Support */
body.dark-mode .navigation {
  background: rgba(20, 20, 25, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
}
body.dark-mode .navigation li a {
  color: #eee;
}
body.dark-mode .navigation li a:hover {
  color: white;
}



/* === Announcement Bar === */
.announcement-bar {
  background: linear-gradient(90deg, #ff7900, #ff4d00);
  color: #fff;
  padding: 0.6rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  position: relative;
  z-index: 999;
}

.announcement-bar a {
  color: #fff;
  text-decoration: underline;
  font-weight: bold;
}

.announcement-bar .announcement-close {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: white;
  cursor: pointer;
}

/* === Logo Section with Tagline & Video === */
.logo-section {
  text-align: center;
  background: #f9f9f9;
  padding-bottom: 1rem;
  position: relative;
  overflow: hidden;
}

.logo-section img.desktop {
  max-width: 260px;
  margin: 1.2rem auto 0.5rem auto;
  display: block;
}

.logotagline p {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0.3rem auto;
  color: #444;
}

.video-container-parcel {
  max-height: 250px;
  overflow: hidden;
  margin-top: 1rem;
  position: relative;
}

.video-container-parcel video {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 16px;
}

/* === Trust Bar === */
.trust-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  background: #fff;
  padding: 0.6rem 1rem;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 0.93rem;
  font-weight: 500;
  color: #444;
}

.trust-divider {
  opacity: 0.4;
}

/* === Auth & Basket Wrapper === */
.auth-basket-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.5rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  margin: 1.5rem auto;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  max-width: 1000px;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Auth Links Styling */
.auth-status-container {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  flex-wrap: wrap;
}

.auth-link {
  color: var(--color-primary);
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  background: rgba(255, 106, 0, 0.08);
  transition: all 0.3s ease;
  text-decoration: none;
}
.auth-link:hover {
  background: rgba(255, 106, 0, 0.18);
}

/* Basket Icon */
.basket-indicator-wrapper {
  position: relative;
}

#basket-icon {
  font-size: 1.1rem;
  font-weight: bold;
  padding: 0.6rem 1rem;
  border-radius: 2rem;
  background: var(--color-primary);
  color: white;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  position: relative;
}

.basket-count-badge {
  background: white;
  color: var(--color-primary);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2em 0.5em;
  position: absolute;
  top: -6px;
  right: -6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* Dropdown Preview */
.basket-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 1rem;
  display: none;
  width: 250px;
  z-index: 10;
}

#basket-indicator:hover .basket-dropdown {
  display: block;
}

.basket-preview-footer {
  border-top: 1px solid #ddd;
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  text-align: right;
}

.checkout-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--color-primary);
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}
.checkout-link:hover {
  background: #e85c00;
}
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem 1rem 1rem;
  background: linear-gradient(180deg, #fff, #f2f2f2);
  text-align: center;
  position: relative;
}

.logo-section img.desktop {
  max-width: 240px;
  height: auto;
  margin-bottom: 0.4rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.1));
  transition: transform 0.3s ease;
}
.logo-section img.desktop:hover {
  transform: scale(1.04);
}

.logotagline p {
  font-size: 1.1rem;
  font-weight: 500;
  color: #333;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
  padding: 0 1rem;
  line-height: 1.4;
  max-width: 500px;
}



.hero-section {
  position: relative;
  background: linear-gradient(120deg, #cc3700, #9f1c7f);
  color: #f8f8f8;
  padding: 3rem 1.5rem;
  text-align: center;
  border-radius: 0 0 30px 30px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 150%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent);
  transform: rotate(25deg);
  z-index: 0;
}

.hero-section h1 {
  font-size: 2.4rem;
  font-weight: 700;
  z-index: 1;
  position: relative;
  margin-bottom: 0.8rem;
  letter-spacing: -0.5px;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.hero-section p {
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 auto;
  max-width: 640px;
  line-height: 1.5;
  z-index: 1;
  position: relative;
  color: #f2f2f2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}


.hero-cta-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.6rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background-color: #111;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 1;
  position: relative;
}

.hero-cta-button:hover {
  background-color: #000;
  transform: scale(1.04);
}

.global-black-banner {
  background: linear-gradient(to right, #0d0d0d, #1a1a1a);
  color: #f8f8f8;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 0.75rem 1.2rem;
  letter-spacing: 0.4px;
  position: relative;
  margin-bottom: 0.35rem;
  z-index: 90;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  min-height: 44px; /* stabilize height during text swap */
  display: flex; align-items: center; justify-content: center;
}

.global-black-banner span {
  display: inline-block;
  /* Disable CSS keyframe animation to avoid fighting with JS */
  animation: none !important;
  white-space: nowrap;
  transition: opacity 0.35s ease;
  will-change: opacity;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* keyframes kept for backward compatibility but unused */
@keyframes rotateBannerMessages {
  0% { opacity: 1; }
  100% { opacity: 1; }
}

header {
  padding-top: 0%;
}


.hero-section {
  position: relative;
  background: linear-gradient(135deg, #1c1c1c, #2e2e2e);
  color: #ffffff;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  border-radius: 0 0 2rem 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  margin-bottom: 2rem;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -30%;
  width: 160%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 70%);
  transform: rotate(45deg);
  z-index: 0;
}

.hero-section-content {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-section h1 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.hero-section p {
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 auto 2rem;
  color: #e0e0e0;
  max-width: 650px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.hero-section .hero-cta-button {
  display: inline-block;
  padding: 0.75rem 1.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to right, #ff6600, #ff3300);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease;
}

.hero-section .hero-cta-button:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #ff3300, #ff6600);
}

/* Responsive spacing fix */
@media (max-width: 768px) {
  .hero-section {
    padding: 3rem 1rem 2rem;
  }

  .hero-section h1 {
    font-size: 2.1rem;
  }

  .hero-section p {
    font-size: 1rem;
  }
}


.hero-section {
  position: relative;
  padding: 3rem 1.5rem 2rem;
  margin-bottom: 2rem;
}

main {
  margin-top: 2rem;
}

.product-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  padding: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  box-sizing: border-box;
}



.shop-container {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  max-width: 1440px;
  margin: 2rem auto;
  padding: 0 1rem;
  box-sizing: border-box;
}

.shop-sidebar {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
}

.sidebar-heading {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: #222;
}

.styled-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.styled-list li {
  margin-bottom: 0.75rem;
}

.styled-list a {
  text-decoration: none;
  font-weight: 600;
  color: #444;
  padding: 0.4rem 0.6rem;
  display: inline-block;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}
.styled-list a:hover {
  background: var(--color-primary, #ff6a00);
  color: #fff;
}

/* Price Filter Buttons */
.price-filter-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.price-filter-btn {
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: bold;
  color: #333;
  background: #f2f2f2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.price-filter-btn:hover {
  background: var(--color-primary, #ff6a00);
  color: white;
}

/* Product Grid */
.product-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  align-items: stretch;
}

/* Product Card */
.product-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.1);
}

.product-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid #eee;
}

.product-card-content {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-card-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #222;
}

.product-card-price {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary, #ff6a00);
  margin-bottom: 1rem;
}

.product-card button {
  background: var(--color-primary, #ff6a00);
  color: white;
  font-weight: bold;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.product-card button:hover {
  background: #e85c00;
}

/* Responsive */
@media (max-width: 960px) {
  .shop-container {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    order: 2;
  }

  .product-grid {
    order: 1;
  }
}


/* === Checkout Page Styling === */

.checkout-container {
  max-width: 1000px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  padding: 2rem;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.checkout-form h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 0.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #333;
}

.form-group input,
#promo-code {
  font-size: 1rem;
  padding: 0.65rem 1rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.form-group input:focus,
#promo-code:focus {
  border-color: var(--color-primary, #ff6600);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.1);
  outline: none;
}

/* Delivery Options */
.form-group input[type="radio"] {
  margin-right: 0.5rem;
}

.form-group label[for="promo-code"] {
  font-weight: 700;
}

/* Estimated Arrival */
.estimated-arrival-text {
  font-weight: 600;
  color: #333;
  background: #f6f6f6;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  margin-top: 0.6rem;
}

/* Promo feedback */
#promo-feedback {
  font-size: 0.95rem;
  font-weight: 500;
  padding-top: 0.2rem;
}

/* Fee Summary */
.fee-summary {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.fee-summary p {
  display: flex;
  justify-content: space-between;
  margin: 0.4rem 0;
}

.fee-summary strong {
  font-size: 1.1rem;
  color: #222;
}

/* CTA Button */
.checkout-button {
  background: var(--color-primary, #ff6600);
  color: white;
  padding: 0.9rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  transition: background 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.checkout-button:hover {
  background: var(--color-primary-dark, #e65500);
  transform: translateY(-1px);
}

/* Product Guarantee */
.product-meta-section {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}

.guarantee-list {
  list-style: none;
  padding-left: 0;
}

.guarantee-list li {
  margin: 0.5rem 0;
  font-weight: 500;
  color: #444;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Help Bar */
.support-help-bar {
  margin: 2rem auto;
  max-width: 1000px;
  text-align: center;
  font-weight: 500;
  padding: 0.8rem 1rem;
  background: #f6f6f6;
  border-radius: 10px;
}

/* Responsive Tweaks */
@media (max-width: 768px) {
  .checkout-container {
    padding: 1.5rem 1rem;
    margin: 1rem;
  }

  .checkout-form h2 {
    font-size: 1.5rem;
  }

  .checkout-button {
    width: 100%;
    font-size: 1rem;
  }
}



/* === Profile Page Styles === */

.profile-page {
  font-family: 'Roboto', sans-serif;
  max-width: 960px;
  margin: 2rem auto;
  padding: 1rem;
}

.profile-banner {
  position: relative;
  background: linear-gradient(135deg, #333, #111);
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  margin-bottom: 2rem;
}

.banner-img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../resources/profile-banner.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  border-radius: 1rem;
  z-index: 0;
}

.profile-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-wrapper {
  position: relative;
  margin-bottom: 1rem;
  text-align: center;
}

#profile-avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

#change-avatar-btn {
  margin-top: 0.5rem;
  background: #fff;
  color: #333;
  border: none;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.user-details h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

#name-input {
  padding: 0.5rem;
  border-radius: 8px;
  border: none;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

#save-name-btn {
  background: #ff6600;
  color: white;
  border: none;
  padding: 0.4rem 0.9rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

/* Sections */

.status-update-section,
.order-history-section,
.my-reviews-section,
.user-directory-section {
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.status-update-section h3,
.order-history-section h3,
.my-reviews-section h3,
.user-directory-section h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

#status-input {
  width: 100%;
  border-radius: 10px;
  padding: 0.75rem;
  border: 1px solid #ddd;
  resize: vertical;
  margin-bottom: 0.75rem;
}

#post-status-btn {
  background: #ff6600;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
}

#user-search {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  width: 100%;
  font-size: 1rem;
}


.user-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  z-index: 1;
}

.user-details h2 {
  font-size: 1.6rem;
  margin: 0;
  font-weight: bold;
}

#name-input {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}

#save-name-btn {
  margin-top: 0.3rem;
  background: #ff6600;
  color: white;
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}


.profile-page {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

.sidebar-card {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-size: 0.95rem;
}

.sidebar-card h4 {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  color: #333;
}

.sidebar-card button {
  margin: 0.3rem 0;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border: none;
  background: #eee;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
}

.profile-shortcuts ul {
  list-style: none;
  padding-left: 0;
}

.profile-shortcuts li a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 0.3rem 0;
}


/* === Profile Side Panels (Professional Theme) === */

.profile-page {
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 2rem;
  padding: 2rem 1rem;
  max-width: 1400px;
  margin: auto;
}

.sidebar-card {
  background: #fff;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
  border: 1px solid #f1f1f1;
  font-size: 0.95rem;
  color: #333;
  transition: box-shadow 0.3s ease;
}

.sidebar-card:hover {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

.sidebar-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 1rem;
  position: relative;
}

.sidebar-card h4::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-primary, #ff6600);
  border-radius: 999px;
  margin-top: 6px;
}

.sidebar-card p {
  margin: 0.4rem 0;
  line-height: 1.5;
}

.sidebar-card button {
  background: var(--color-primary, #ff6600);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1rem;
  margin: 0.4rem 0;
  border: none;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  transition: background 0.3s ease;
}

.sidebar-card button:hover {
  background: var(--color-primary-dark, #e65500);
}

.profile-shortcuts ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.profile-shortcuts li a {
  display: block;
  padding: 0.4rem 0;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid #eee;
  transition: color 0.2s;
}

.profile-shortcuts li a:hover {
  color: var(--color-primary, #ff6600);
}

.header-user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  padding-right: 1rem;
}

.header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}


.review {
  background: white;
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  margin-bottom: 1rem;
}

.review-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.review-rating {
  font-size: 0.9rem;
  color: #ff9900;
}

.review-text {
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

.review-date {
  font-size: 0.8rem;
  color: #666;
}


.review {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1em;
  margin-bottom: 1em;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  gap: 1em;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ccc;
}

.review-rating {
  font-size: 0.95em;
  color: #ff9900;
  font-weight: bold;
}

.review-text {
  font-size: 1em;
  color: #333;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.review-date {
  font-size: 0.85em;
  color: #888;
}


/* ======================
   🔄 Product Reviews
   ====================== */

.review-list-container {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding-top: 1em;
}

.review {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 1.2em 1.5em;
  border-left: 5px solid var(--color-primary);
}

.review-header {
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin-bottom: 0.5em;
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ddd;
  background: #f1f1f1;
}

.review-header strong {
  font-size: 1.05em;
  color: #222;
}

.review-rating {
  font-size: 0.95em;
  color: #f9a825;
  font-weight: bold;
  margin-top: 0.2em;
}

.review-text {
  font-size: 1em;
  color: #333;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}

.review-date {
  font-size: 0.85em;
  color: #777;
  text-align: right;
  margin-top: auto;
  font-style: italic;
}

.review-form-wrapper {
  margin-top: 2em;
  padding: 1.2em;
  background: #fafafa;
  border-radius: 12px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.05);
}

.review-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.review-form label {
  font-weight: 600;
  font-size: 0.95em;
  color: #222;
}

.review-form select,
.review-form textarea {
  padding: 0.6em 1em;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 1em;
}

.review-form button {
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.7em 1.5em;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.3s;
}

.review-form button:hover {
  background: #720b18;
}

.review-feedback {
  font-size: 0.9em;
  min-height: 1em;
  color: #2d7;
}

.product-reviews {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem 0;
}

.review-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.review {
  padding: 1em 1.2em;
  min-height: auto;
}

#basket-dropdown {
  z-index: 1000000;
}


@media (max-width: 768px) {
  .navigation ul {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 1rem;
  }

  .navigation li {
    width: 100%;
  }

  .navigation li a {
    display: block;
    width: 100%;
    padding: 0.9rem 1.5rem;
    font-size: 1.05rem;
  }
}


@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    padding: 1rem;
  }
}


@media (max-width: 700px) {
  .basket-container,
  .checkout-container {
    padding: 1.5rem 0.8rem;
    width: 95%;
  }

  .basket-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .basket-item img {
    width: 100%;
    height: auto;
  }
}


@media (max-width: 480px) {
  button,
  .submit-button,
  .checkout-button {
    font-size: 1rem;
    padding: 0.8rem 1.4rem;
  }

  input,
  select {
    font-size: 1rem;
    padding: 0.6rem;
  }
}


@media (max-width: 600px) {
  .modal {
    width: 95%;
    padding: 1rem;
    font-size: 0.95rem;
  }

  .modal input,
  .modal textarea {
    font-size: 1rem;
  }
}


@media (max-width: 700px) {
  .shop-sidebar {
    position: static !important;  /* Ensure it's not sticky or fixed */
  }
}

@media (max-width: 700px) {
  .left-grid, .right-grid {
    display: none; /* Hide sidebars to declutter */
  }
}


@media (max-width: 700px) {
  .shop-sidebar {
    display: block !important;
    margin-bottom: 1.5rem;
  }

  /* Optional: make it full-width below product grid */
  .shop-container {
    display: flex;
    flex-direction: column;
  }

  .shop-sidebar {
    order: 2;  /* Move it below the products if needed */
  }

  .product-grid {
    order: 1;
  }
}

@media (max-width: 700px) {
  .navigation ul {
    flex-wrap: wrap;
    gap: 0.2rem;
    justify-content: center;
  }

  .navigation li a {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.2;
  }

  .logo-section {
    padding: 0.4rem 0.6rem;
    gap: 0.6rem;
  }

  .logo-section img {
    max-height: 34px;
  }

  .logotagline {
    font-size: 0.8rem;
    line-height: 1.1;
  }
}

@media (max-width: 700px) {
  .hero-section {
    padding: 0.5rem 0.5rem;
    font-size: 1rem;
  }

  header {
    padding-top: 1rem !important;
  }
}

.quick-categories {
  display: none; /* hidden by default */
}

@media (max-width: 700px) {
  .auth-basket-wrapper{
    margin-top:0.9em;
    margin-bottom: 2em;
    justify-content: center;
    }
  .quick-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    padding: 0.8rem 1rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    border-radius: 0 0 12px 12px;
    margin-bottom: 1rem;
  }

  .quick-categories a {
    background: var(--color-primary);
    color: white;
    padding: 0.5em 1em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
  }

  .quick-categories a:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
  }
}

@media (max-width: 700px) {
  #toggle-sidebar{
    display: none;
  
  
}
#search-filter-sidebar {
  display: none;
}

.hero-section {
  display:none;
}

}

.admin-button{
  font-size: 1em;
  color: #005ad1;
  text-align: end;
}


.product-card img,
.basket-item img,
.saved-card img,
.mini-basket-item img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: rgba(250, 250, 250, 0.507);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.about-us-content img {
  width: 100%;
  max-width: 260px;       /* Or 300px if you want slightly larger */
  height: 260px;          /* Force square appearance */
  object-fit: contain;      /* Or "contain" if you want the full image */
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  margin: 1em auto;
  display: block;
  padding: 0;
}

.mobile-nav-toggle {
  display: none;
  background: var(--color-primary);
  color: white;
  font-size: 1.2em;
  font-weight: 700;
  border: none;
  padding: 0.6em 1em;
  margin: 0.5em 1em;
  border-radius: var(--border-radius);
  cursor: pointer;
  z-index: 1201;
}

@media (max-width: 768px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navigation ul {
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: none;
    padding: 1rem;
    z-index: 1200;
  }

  .navigation.open ul {
    display: flex;
  }

  .navigation li a {
    padding: 0.75rem 1rem;
    width: 100%;
  }
}
.auth-basket-wrapper{
  align-items: flex-start;
  margin:0;
  margin-top: 2em;
  min-width: 100%;
  max-width: 100%;
}
.trust-bar{
  margin-top: 0.5em;
}
main {
  margin-top: 0.5em;
}

.badge {
  background: #f0f0f0;
  color: #333;
  border-radius: 6px;
  padding: 0.2em 0.6em;
  font-size: 0.75rem;
  font-weight: bold;
  margin-right: 0.3em;
}

.trust-badges {
  display: flex;
  gap: 0.4rem;
  margin: 0.5em 0;
}

.stock-status {
  color: #d32f2f;
  font-weight: bold;
  font-size: 0.85rem;
  margin-top: 0.2em;
}

.review-stars {
  font-size: 0.85rem;
  color: #f39c12;
  margin-top: 0.3em;
}


.product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.product-card:hover {
  transform: translateY(-2px);
}

.product-card img {
  width: 100%;
  height: 180px;
  object-fit: contain;
  background: #f5f5f5;
}

.product-card-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.product-price {
  font-weight: 700;
  color: var(--color-primary, #FF6600);
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}

.stock-status {
  font-size: 0.85rem;
  color: #d32f2f;
  font-weight: 600;
}

.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.badge {
  background: #eee;
  padding: 0.3em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 6px;
  color: #333;
}

.badge.trending {
  background: #ffe3e3;
  color: #d32f2f;
}

.badge.featured {
  background: #fff2cc;
  color: #b58b00;
}

.product-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.add-to-basket-btn {
  background: var(--color-primary, #FF6600);
  color: #fff;
  border: none;
  padding: 0.6em;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.add-to-basket-btn:hover {
  background: var(--color-primary-hover, #FF8533);
}

.view-details-link {
  text-align: center;
  color: #555;
  font-size: 0.9rem;
  text-decoration: underline;
}


.hero-offer {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
padding: 80px 20px;
text-align: center;
border-radius: 12px;
max-width: 900px;
margin: 40px auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.hero-offer h1 {
font-size: 2.8rem;
color: #e91e63;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.hero-offer p {
font-size: 1.3rem;
color: #333;
line-height: 1.6;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-offer .cta-btn {
background: #e91e63;
color: #fff;
padding: 18px 40px;
font-size: 1.2rem;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s, transform 0.3s;
}
.hero-offer .cta-btn:hover {
background: #d81b60;
transform: translateY(-3px);
}
@media (max-width: 768px) {
.hero-offer h1 {
font-size: 2rem;
}
.hero-offer p {
font-size: 1.1rem;
}
.hero-offer .cta-btn {
padding: 15px 30px;
font-size: 1rem;
}
}

.hero-offer {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
padding: clamp(40px, 10vw, 80px) 10%;
text-align: center;
border-radius: 12px;
margin: 40px auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.hero-offer h1 {
font-size: clamp(1.8rem, 5vw, 2.8rem);
color: #e91e63;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.hero-offer p {
font-size: clamp(1rem, 3vw, 1.3rem);
color: #333;
line-height: 1.6;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-offer .cta-btn {
background: #e91e63;
color: #fff;
padding: clamp(12px, 2vw, 18px) clamp(25px, 5vw, 40px);
font-size: clamp(1rem, 2vw, 1.2rem);
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s, transform 0.3s;
display: inline-block;
}
.hero-offer .cta-btn:hover {
background: #d81b60;
transform: translateY(-3px);
}
@media (max-width: 480px) {
.hero-offer {
padding: 30px 5%;
}
.hero-offer h1 {
font-size: 1.8rem;
}
.hero-offer p {
font-size: 1rem;
}
.hero-offer .cta-btn {
padding: 12px 25px;
font-size: 1rem;
}
}

.hero-offer {
background: linear-gradient(135deg, #fff3e0, #ffe0b2);
padding: clamp(40px, 10vw, 80px) 10%;
text-align: center;
border-radius: 12px;
margin: 40px auto;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.hero-offer h1 {
font-size: clamp(1.8rem, 5vw, 2.8rem);
color: #e91e63;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.hero-offer p {
font-size: clamp(1rem, 3vw, 1.3rem);
color: #333;
line-height: 1.6;
margin-bottom: 30px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.hero-offer .cta-btn {
background: #e91e63;
color: #fff;
padding: clamp(12px, 2vw, 18px) clamp(25px, 5vw, 40px);
font-size: clamp(1rem, 2vw, 1.2rem);
border-radius: 30px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s, transform 0.3s;
display: inline-block;
}
.hero-offer .cta-btn:hover {
background: #d81b60;
transform: translateY(-3px);
}
.discount-box button.copied {
background: #4caf50 !important;
}
@media (max-width: 480px) {
.hero-offer {
padding: 30px 5%;
}
.hero-offer h1 {
font-size: 1.8rem;
}
.hero-offer p {
font-size: 1rem;
}
.hero-offer .cta-btn {
padding: 12px 25px;
font-size: 1rem;
}
}


#featured-products {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 1fr);
  overflow-x: auto;
  gap: 1rem;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
}
#featured-products > .product-card { scroll-snap-align: start; }
#featured-products::-webkit-scrollbar {
  height: 8px;
}
#featured-products::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
}

.auth-basket-wrapper {
  position: sticky;   /* was fixed in several places */
  top: 0;             /* participates in normal flow under the header */
  right: auto;
  z-index: 10;        /* lower than modals, above content */
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
}


/* ===========================
   HOMEPAGE LAYOUT FIXES
   =========================== */

/* Main 3-column layout */
.content-grid {
  --col-gap: 24px;
  --row-gap: 28px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* left / center / right */
  gap: var(--row-gap) var(--col-gap);
  align-items: start;
  max-width: 1220px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Stack on tablets/phones */
@media (max-width: 1024px) {
  .content-grid { grid-template-columns: 1fr; }
  .right-grid, .left-grid, #home-deals { order: initial; }
}

/* Headings spacing */
.content-grid .heading h2,
.best-selling-heading h3 {
  margin: 0 0 10px;
}

/* Product grids (featured, trending, new arrivals) */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

/* Larger cards on wide screens */
@media (min-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* Mobile layout for product grids: single column */
@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
}

/* Product card look & feel */
.product-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.product-card-link {
  display: block;
  padding: 8px 8px 6px; /* tighter to reduce whitespace */
  color: inherit;
  text-decoration: none;
}

/* Square image area + hover swap support */
.card-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.product-card [data-overlay],
.product-card .bb-card-ribbon,
.product-card .product-badges,
.product-card .badge,
.product-card .skeleton,
.product-card .skeleton * {
  pointer-events: none;
}

.product-card .add-to-basket-btn,
.product-card [data-action="select-options"],
.product-card .select-options,
.product-card [data-select-options] {
  position: relative;
  z-index: 2;
}

.card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* change to 'contain' if you prefer no crop */
  transition: opacity .25s ease, transform .25s ease;
}

.card-image.secondary { opacity: 0; }
.product-card.has-secondary:hover .card-image.secondary { opacity: 1; }
.product-card.has-secondary:hover .card-image.primary  { opacity: 0; }
/* Default hover: keep image visible and gently zoom for click affordance */
.product-card:hover .card-image { transform: scale(1.03); }

.product-name {
  margin: 6px 2px 2px; /* reduce top/bottom gap under image */
  font-size: 0.95rem;
  line-height: 1.25rem;
  min-height: 2.5rem; /* two lines reserve */
}

.product-price {
  margin: 0 2px 6px;
  font-weight: 700;
}

/* Top categories tiles */
#top-categories .category-tile {
  display: block;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

#top-categories .category-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

#top-categories .tile-inner {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 16px 10px;
}

#top-categories .tile-emoji { font-size: 28px; }
#top-categories .tile-name { font-weight: 600; }

/* Delivery/video sidebar tweaks */
.right-grid .delivery-options-list ul { margin: 8px 0 0 18px; }
.video-container .introducing-bbuy {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Header utility areas on small screens */
@media (max-width: 600px) {
  .auth-basket-wrapper { gap: 8px; padding: 0 12px; }
  .basket-indicator-wrapper { margin-left: auto; }
}

/* Basket dropdown above cards */
.basket-dropdown { z-index: 30; }

/* Minor spacing reset for sections */
#home-new-arrivals h2 { margin: 0 0 12px; }
#home-deals { display: grid; gap: 24px; }


/* ===========================
   HOMEPAGE EMERGENCY FIX PACK
   Targets only homepage structure & cards
   =========================== */

/* 0) Safety resets */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

/* 1) Master content grid (left / center / right) */
.content-grid {
  --col-gap: 24px;
  --row-gap: 28px;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) !important;
  gap: var(--row-gap) var(--col-gap);
  align-items: start;
  max-width: 1220px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Kill legacy floats/widths if any existed */
.left-grid, .center-grid, .right-grid {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  display: block;
}

/* Stack on tablets/phones */
@media (max-width: 1024px) {
  .content-grid { grid-template-columns: 1fr !important; }
}

/* 2) Product grids: uniform responsive grid */
.product-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
}

@media (min-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* 3) Product card: consistent block with square media */
.product-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
  min-width: 0; /* prevent overflow in grids */
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.product-card-link {
  display: block;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

/* Media area */
.card-image-wrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}

.card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* change to 'contain' if you prefer no crop */
  transition: opacity .25s ease, transform .25s ease;
}
.card-image.secondary { opacity: 0; }
.product-card.has-secondary:hover .card-image.secondary { opacity: 1; }
.product-card.has-secondary:hover .card-image.primary  { opacity: 0; }
.product-card:hover .card-image { transform: scale(1.03); }

/* Text bits */
.product-name {
  margin: 10px 2px 4px;
  font-size: 0.95rem;
  line-height: 1.25rem;
  min-height: 2.5rem;   /* reserve up to 2 lines */
  word-break: break-word;
}
.product-price { margin: 0 2px 8px; font-weight: 700; }

/* 4) Top categories tiles tidy */
#top-categories .category-tile {
  display: block;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
#top-categories .category-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
#top-categories .tile-inner { display: grid; place-items: center; gap: 6px; padding: 16px 10px; }
#top-categories .tile-emoji { font-size: 28px; }
#top-categories .tile-name { font-weight: 600; }

/* 5) Right sidebar: spacing + video sizing */
.right-grid .delivery-options-list ul { margin: 8px 0 0 18px; }
.video-container .introducing-bbuy { width: 100%; height: auto; border-radius: 12px; display: block; }

/* 6) Header utility areas on small screens */
@media (max-width: 600px) {
  .auth-basket-wrapper { gap: 8px; padding: 0 12px; }
  .basket-indicator-wrapper { margin-left: auto; }
}

/* 7) Basket dropdown above cards */
.basket-dropdown { z-index: 30; }

/* 8) Minor spacing */
#home-new-arrivals h2 { margin: 0 0 12px; }
#home-deals { display: grid; gap: 24px; }


/* ===========================
   HOMEPAGE FIX (override pack)
   Paste at END of style.css
   =========================== */

/* Safety: stop old floats/columns from fighting the grid */
.left-grid, .center-grid, .right-grid {
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Page content grid: Left / Center / Right */
.content-grid {
  --col-gap: 24px;
  --row-gap: 28px;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr) !important;
  gap: var(--row-gap) var(--col-gap);
  align-items: start;
  max-width: 1220px;
  margin: 24px auto;
  padding: 0 16px;
}

/* Stack cleanly on tablets/phones */
@media (max-width: 1024px) {
  .content-grid { grid-template-columns: 1fr !important; }
}

/* Product grids: unified + responsive (no horizontal scroll) */
.product-grid {
  display: grid !important;
  grid-auto-flow: initial !important;
  grid-auto-columns: initial !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 14px;
  overflow: visible !important;
}
@media (min-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
}

/* Ensure grid items don’t overflow columns */
.product-grid > * { min-width: 0; }

/* Card look & feel (consistent across sections) */
.product-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.product-card-link {
  display: block;
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

/* Square media area with safe cropping */
.card-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* use 'contain' if you want zero cropping */
  transition: opacity .25s ease, transform .25s ease;
}
/* Optional hover swap if you render a .secondary image */
.card-image.secondary { opacity: 0; }
.product-card.has-secondary:hover .card-image.secondary { opacity: 1; }
.product-card.has-secondary:hover .card-image.primary  { opacity: 0; }
/* Default hover effect */
.product-card:hover .card-image { transform: scale(1.03); }

/* Text spacing */
.product-name {
  margin: 10px 2px 4px;
  font-size: 0.95rem;
  line-height: 1.25rem;
  min-height: 2.5rem; /* hold two lines */
  word-break: break-word;
}
.product-price { margin: 0 2px 8px; font-weight: 700; }

/* Top categories tiles polish */
#top-categories .category-tile {
  display: block;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
#top-categories .category-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
#top-categories .tile-inner {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 16px 10px;
}
#top-categories .tile-emoji { font-size: 28px; }
#top-categories .tile-name { font-weight: 600; }

/* Sidebar video + list tidy */
.right-grid .delivery-options-list ul { margin: 8px 0 0 18px; }
.video-container .introducing-bbuy {
  width: 100%; height: auto; border-radius: 12px; display: block;
}

/* Header utilities on small screens */
@media (max-width: 600px) {
  .auth-basket-wrapper { gap: 8px; padding: 0 12px; }
  .basket-indicator-wrapper { margin-left: auto; }
}

/* Make sure any old horizontal scrollers are disabled */
#featured-products::-webkit-scrollbar { display: none !important; }


/* ===== Top Categories polish ===== */
#top-categories {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 16px;
}

#category-tiles {
  /* override the inline grid on the page */
  display: grid !important;
  gap: 16px !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  margin-top: 16px !important;
}

/* responsive column counts */
@media (max-width: 1200px) {
  #category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 800px) {
  #category-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  #category-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* tile look */
#top-categories .category-tile {
  display: block;
  border: 1px solid #e9e9e9;
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}

#top-categories .category-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

/* equal heights + centered content */
#top-categories .tile-inner {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 14px;
  aspect-ratio: 5 / 4;           /* uniform tile height */
}

#top-categories .tile-emoji { font-size: 34px; line-height: 1; }
#top-categories .tile-name  { font-weight: 600; text-align: center; }

/* prevent long names from wrapping oddly */
/* ===== Top Categories — full-bleed band & polished tiles ===== */
#top-categories {
  width: 100%;
  margin: 20px 0 6px;
  padding-block: clamp(6px, 1.6vw, 16px);
  background: linear-gradient(180deg, #f7f8fb 0%, #ffffff 100%);
  border-block: 1px solid #eef0f3;
}

#top-categories h2,
#top-categories p {
  text-align: center;
  margin-inline: auto;
  max-width: 70ch;
}

/* full-width responsive grid (edge-to-edge with page padding) */
#category-tiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: clamp(8px, 1.2vw, 14px) !important;
  padding-inline: clamp(10px, 3vw, 24px);
  margin-top: clamp(6px, 1vw, 12px) !important;
}

/* tile card */
#top-categories .category-tile {
  display: block;
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(10, 22, 70, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* equal height & centered content */
#top-categories .tile-inner {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: clamp(10px, 2.4vw, 18px);
  aspect-ratio: 6 / 5; /* slightly shorter than square to save vertical space */
}

#top-categories .tile-emoji {
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1;
}
#top-categories .tile-name {
  font-weight: 650;
  text-align: center;
  letter-spacing: .1px;
  margin-top: 2px;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  color: #111;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* hover/focus polish */
#top-categories .category-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 22, 70, 0.10);
  border-color: #dbe3ec;
}
#top-categories .category-tile:focus-visible {
  outline: 3px solid #111; outline-offset: 3px;
}

/* tighter grids on smaller screens */
@media (max-width: 900px) {
  #category-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
}
@media (max-width: 560px) {
  #category-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}


/* ===== Top Categories heading + tagline ===== */
#top-categories h2 {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.3rem, 1.6vw, 1.7rem);
  margin-bottom: 0.2em;
}

#top-categories p {
  text-align: center;         /* keep centered, but not boxed in */
  margin: 0 auto 0.8em;
  max-width: none !important; /* let it stretch full width */
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  font-weight: 500;
  color: #333;                /* darker for better contrast */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===== Top Categories — force full-bleed and unrestrict text width ===== */

/* Make the whole band span the viewport even if it's inside a centered wrapper */
.hero-section#top-categories,
#top-categories {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;       /* break out of any page container */
  margin-right: -50vw;
  width: 100vw;             /* full viewport width */
  max-width: 100vw !important;
  padding-inline: clamp(12px, 3vw, 32px); /* keep nice gutters */
}

/* Nuke any max-width applied by generic hero/typography rules */
#top-categories h2,
#top-categories p {
  max-width: none !important;
}

/* If your CSS has a .container/.wrapper inside, make sure it doesn't clamp width */
#top-categories .container,
#top-categories [class*="wrap"] {
  max-width: none !important;
  width: 100% !important;
}

/* Optional: sharper tagline text */
#top-categories p {
  font-weight: 500;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Category tiles with image icons */
/*
  Enlarge icons on the homepage for better visibility. We consolidate
  duplicate rules into one and increase the clamp values so icons
  scale between 60px and 96px depending on viewport width. The
  image-rendering property is retained to improve crispness on
  some browsers.
*/
#top-categories .tile-icon {
  width: clamp(60px, 8vw, 96px);
  height: auto;
  display: block;
  margin-bottom: 8px;
  image-rendering: -webkit-optimize-contrast;
}
#top-categories .tile-emoji { display: none; } /* hide old emojis if still in markup */

/* Prefer emoji icons for category tiles (compact) */
#top-categories .tile-icon { display: none !important; }
#top-categories .tile-emoji { display: block !important; }
#top-categories .tile-inner { min-height: clamp(100px, 18vw, 150px); }

/* If any icons fail to load, prevent layout jump */
#top-categories .tile-inner{
  /* Reduce min-height to tighten the band */
  min-height: clamp(100px, 16vw, 150px);
}

/* Mobile-specific adjustments for category icons */
@media (max-width: 600px) {
  #top-categories .tile-icon {
    width: clamp(40px, 10vw, 72px);
  }
  #top-categories .tile-inner {
    min-height: clamp(120px, 20vw, 160px);
  }
}

/* Mobile-specific layout adjustments to eliminate horizontal scrolling */
@media (max-width: 600px) {
  /* Prevent any element from causing horizontal scroll */
  html, body {
    overflow-x: hidden;
  }
  .container,
  .section,
  .page-wrapper,
  .content-grid,
  .shop-container,
  .shop-sidebar,
  .product-grid,
  .category-grid {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Product grids default to two columns on small screens */
  .product-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
  }
  /* Bestsellers list becomes a single column */
  #featured-products {
    grid-template-columns: 1fr;
    gap: 14px;
    overflow-x: hidden;
  }

  /* Product card adjustments for mobile */
  .product-card img {
    /* Make images taller on mobile to reduce unused vertical space */
    aspect-ratio: 4 / 3;
  }
  /* Reduce margins between image, title and price on mobile */
  .product-card .title,
  .product-card .product-name {
    margin: 8px 4px 4px;
  }
  .product-card .price,
  .product-card .product-price {
    margin: 0 4px 8px;
  }
}


/* Make the header span full width even if it has .logo-section on it */
header.logo-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}




/* Ensure the nav bar background goes edge-to-edge if you color it */
header, .mobile-nav-wrapper, .navigation {
  width: 100%;
}


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

/* Phones ≥480px get two-up */
@media (min-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets ≥768px get three-up */
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

/* Desktops ≥1024px get four-up (tune if you prefer 5 on wide screens) */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}

/* Shop All page: make cards larger on desktop by using 3 columns */
@media (min-width: 1024px) {
  .shop-container #product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
    justify-content: center;
  }
}

@media (min-width: 1280px) {
  .shop-container #product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 22px;
  }
}

/* Cards must not have fixed widths */
.product-card { width: 100%; }

/* Title clamping so long names don’t force width */
.product-card .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Prices & CTA aligned and tappable */
.product-card .price { font-weight: 700; }
.product-card .cta,
.product-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch target */
  width: 100%;
}

.h-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.h-scroll > * { scroll-snap-align: start; }
@media (min-width: 480px) { .h-scroll { grid-auto-columns: 60%; } }
@media (min-width: 768px) { .h-scroll { grid-auto-columns: 33.33%; } }


/* Kill accidental horizontal scroll from rogue elements */
[class*="row"], [class*="wrap"], [class*="container"] { max-width: 100%; }

/* Badges / ribbons */
.badge, .ribbon { max-width: 100%; }

/* Long links or inline codes in descriptions */
.product-card .description { overflow-wrap: anywhere; }

@media (max-width: 767px) {
  .sidebar, .filters-left { display: none; }
}

/* ========================================================================
   Mobile overrides: enlarge product images and tighten spacing
   The following block appears at the end of the file so it takes
   precedence over any earlier definitions inside the same media query.
   It adjusts product card layout on small screens to make images larger,
   reduce whitespace, and increase the width of cards in trending and new
   arrivals sections. Desktop styles remain unaffected.
   ======================================================================== */
@media (max-width: 600px) {
  /* Increase image height relative to width for product cards on mobile */
  .product-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
  }
  /* Tighten spacing around titles and prices */
  .product-card .title,
  .product-card .product-name {
    margin: 6px 4px 2px;
    font-size: 0.95rem;
    line-height: 1.2;
  }
  .product-card .price,
  .product-card .product-price {
    margin: 0 4px 6px;
  }
  /* Compact the padding and gap inside the product card content */
  .product-card-content {
    padding: 0.6rem;
    gap: 0.4rem;
  }
  /* Increase card width for trending and new arrivals on mobile for larger images */
  #trending-products,
  #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }
}

/* ========================================================================
   Mobile override: ensure product images fill their wrapper and display
   without cropping. These rules remove the fixed height and aspect ratio
   applied elsewhere, allowing the image to dictate its own height while
   still filling the card width. The object-fit property is set to
   'contain' so the entire product image is visible. A transparent
   background eliminates extra white or grey space.
   ======================================================================== */
@media (max-width: 600px) {
  .product-card img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: unset;
    object-fit: contain;
    background: transparent;
    display: block;
  }
}

/* ========================================================================
   Desktop-only layout: enlarge product cards on home page
   To ensure the home page product cards fill available horizontal space on
   larger screens, we override the grid for the featured, trending, and
   new arrivals sections when the viewport is at least 1024px wide.
   These rules do not apply on mobile and do not affect other pages.
   ======================================================================== */
@media (min-width: 1024px) {
  .home #featured-products {
    /* Cancel the horizontal scroll settings on desktop */
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    overflow-x: hidden;
    overflow-y: visible;
    /* Increase card width to fill horizontal space */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .home #trending-products,
  .home #new-arrivals-container {
    grid-auto-flow: unset;
    overflow: hidden;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* At even wider widths, bump up the minimum card width further for a richer look */
@media (min-width: 1280px) {
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* ========================================================================
   Home page layout adjustments for desktop screens
   To reduce excess whitespace on either side of the Bestsellers and Trending
   sections, we widen the centre column of the home page grid and refine
   the product card grid so more columns can fit on larger viewports. These
   rules apply only on desktops and do not affect the mobile layout.
   ======================================================================== */
@media (min-width: 1024px) {
  /* Widen centre column relative to sidebars */
  .home .content-grid {
    grid-template-columns: 0.8fr 2.4fr 0.8fr;
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Use narrower minimum card width so more columns can fit */
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-auto-flow: unset;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (min-width: 1280px) {
  /* Further widen centre column on very large screens */
  .home .content-grid {
    grid-template-columns: 0.6fr 2.8fr 0.6fr;
  }
  /* Increase minimum card width slightly on wider screens */
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* ========================================================================
   Refine product-grid margins to allow more columns on desktop
   On larger screens the left/right margins of the product grids may prevent
   additional columns from fitting. This rule reduces the minimum card width
   and gap, and distributes any leftover space across the row so that more
   products can appear per row without big blanks on either side.
   ======================================================================== */
@media (min-width: 1024px) {
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    justify-content: space-between;
  }
  /* Optional: apply same tightening for Bestsellers */
  .home #featured-products {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    justify-content: space-between;
  }
}
/* ========================================================================
   Desktop enhancement: enlarge product cards and expand the centre column
   These rules apply only to the home page on larger screens. They override
   earlier desktop adjustments to increase the minimum width of product cards
   and allocate more space to the centre column of the three‑column grid.
   Mobile layouts remain unaffected because these queries target wide viewports
   only (min-width: 1024px).
   ======================================================================== */

/* At medium desktop widths (≥1024px), widen the centre column and grow cards */
@media (min-width: 1024px) {
  /* Expand the centre column relative to sidebars for more horizontal space */
  .home .content-grid {
    grid-template-columns: 0.5fr 2.5fr 0.5fr;
    max-width: none;
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Increase minimum card width and gap for a bolder presentation */
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    justify-content: start;
  }
}

/* At wide desktop widths (≥1280px), further expand the centre column and cards */
@media (min-width: 1280px) {
  .home .content-grid {
    grid-template-columns: 0.4fr 3.2fr 0.4fr;
  }
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }
}
/* ========================================================================
   Further desktop refinements: enlarge product images and adjust grid spacing
   These rules apply only to the home page on desktop screens (min-width 1024px).
   They increase the aspect ratio of the image container so product photos
   occupy more vertical space and refine the grid to balance card size and
   whitespace. By centering the grid items and using larger minimum widths,
   cards appear larger and the unused space at the edges is minimized.
   ======================================================================== */

@media (min-width: 1024px) {
  /* Use square image area for bigger, consistent thumbnails */
  .home .product-card .card-image-wrap { aspect-ratio: 1 / 1; }

  /* Larger cards and centered grid for home sections */
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 18px;
    justify-content: center;
  }

  /* Fill the image area nicely */
  .home .product-card .card-image { object-fit: cover; }
}

@media (min-width: 1280px) {
  /* Even larger cards on very wide screens */
  .home #featured-products,
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 22px;
    justify-content: center;
  }
}

/* Final spacing + image fit overrides on homepage cards */
.home .product-card-link { padding: 6px 8px 4px; }
.home .product-name { margin: 4px 2px 2px; min-height: 2.2rem; }
.home .product-price { margin: 0 2px 4px; }
/* Show full image without cropping; keep a clean white background */
.home .product-card .card-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain;
  background: #fff;
}

/* Make the center grid span to the right edge on desktop (no right column present) */
@media (min-width: 1024px) {
  .home .center-grid { grid-column: 2 / -1; }
}

/* Force 3 columns for Trending and New Arrivals on desktop */
@media (min-width: 1024px) {
  .home #trending-products,
  .home #new-arrivals-container {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 18px;
    justify-content: center;
  }
}

/* Ensure card-image always fills its wrapper despite older generic img rules */
.product-card .card-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
}
/* ========================================================================
   Mobile basket fix: ensure the basket icon remains clickable
   This override consolidates the mobile positioning of the basket wrapper and
   ensures the basket icon can be tapped without interference from other
   elements or overlapping layers. It hides the dropdown on small screens
   and gives the wrapper a high z-index and pointer-events to guarantee
   interactivity. These rules take precedence over earlier mobile styles.
   ======================================================================== */
@media (max-width: 600px) {
  .auth-basket-wrapper {
    /*
     * Position the floating basket on mobile using the same dynamic top offset
     * used for larger screens. This ensures the icon sits above the cookie
     * consent banner when it appears instead of overlapping it.  We avoid
     * anchoring to the bottom so that the CSS variable --basket-offset
     * (updated by the site’s JavaScript) controls the vertical position.
     */
    position: fixed;
    /* Move the floating basket further down on small screens; if the
       --basket-offset variable isn’t set, fall back to 6em instead of
       3.5em so the icon sits lower on the page. */
    top: var(--basket-offset, 6em);
    bottom: auto;
    right: 1rem;
    z-index: 10000;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
    pointer-events: auto;
  }
  /* Ensure the basket icon is interactive */
  .auth-basket-wrapper .basket-icon-btn {
    pointer-events: auto;
  }
  /* Hide basket dropdown on mobile to prevent overlay */
  #basket-dropdown {
    display: none !important;
  }
}



/* Mobile nav panel: hidden off‑canvas by default */
@media (max-width: 700px) {
  .mobile-nav-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 75%;
    max-width: 320px;
    background: white;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1500;
    padding: 1rem;
    overflow-y: auto;
  }
  /* When nav is open, slide it into view */
  .mobile-nav-wrapper.open {
    transform: translateX(0);
  }

  /* Dark overlay when menu open */
  .nav-overlay {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .mobile-nav-wrapper.open + .nav-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Expand tap target sizes */
  #main-nav ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    margin: 0;
  }
  #main-nav li a {
    display: block;
    font-size: 1.1rem;
    padding: 0.8rem;
    border-radius: 8px;
  }
  #main-nav li a:hover {
    background: #f5f5f5;
  }
}


/* Mobile drawer nav */
@media (max-width: 700px) {
  .mobile-nav-toggle { 
    appearance: none; border: 0; background: #111; color: #fff;
    padding: .6rem .9rem; border-radius: .5rem; font-weight: 700;
  }

  .mobile-nav-wrapper {
    position: fixed; inset: 0 0 0 auto; /* right side drawer */
    width: 78%; max-width: 320px; background: #fff;
    transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -2px 0 16px rgba(0,0,0,.18);
    z-index: 1500; padding: 16px; overflow-y: auto;
  }
  .mobile-nav-wrapper.open { transform: translateX(0); }

  .nav-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1400;
  }
  .mobile-nav-wrapper.open + .nav-overlay { opacity: 1; pointer-events: auto; }

  body.nav-open { overflow: hidden; }

  #main-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  #main-nav li a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 1.05rem; }
  #main-nav li a:hover { background: #f5f5f5; }
}

/* Hide the toggle on desktop, show on mobile */
@media (min-width: 701px) { .mobile-nav-toggle { display: none; } }


/* Ensure mobile drawer sits above basket/auth cluster */
@media (max-width: 700px) {
  /* Baseline stacking: drawer > overlay > basket/auth */
  .mobile-nav-wrapper { z-index: 1500; }
  .nav-overlay        { z-index: 1400; }

  /* Override earlier z-index:10000 we set on mobile */
  .auth-basket-wrapper { z-index: 1200 !important; }

  /* When drawer is open, prevent accidental taps on basket/login */
  body.nav-open .auth-basket-wrapper {
    pointer-events: none;
    opacity: .0;              /* optional: dim while menu is open */
    transition: opacity .2s ease;
  }
  body.nav-open .auth-basket-wrapper * { pointer-events: none; }
}


/* Put basket/auth cluster behind mobile nav */
@media (max-width: 700px) {
  .mobile-nav-wrapper { z-index: 1500; }   /* drawer sits on top */
  .nav-overlay        { z-index: 1400; }   /* overlay just beneath */

  /* Force basket/auth to drop behind */
  .auth-basket-wrapper {
    z-index: 1000 !important;
  }
}

@media (max-width: 700px) {
  .auth-basket-wrapper {
    position: fixed;   /* ensure it stays pinned */
    bottom: 1rem;      /* was 0, now pushed down */
    right: 1rem;
    top: auto;
  }
}

/* Final mobile override to ensure basket icon is visible and clickable
   across all pages. Keeps it above content by default but below the
   mobile drawer and overlay when the menu is open. */
@media (max-width: 700px) {
  .auth-basket-wrapper {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    top: auto;
    z-index: 1600 !important; /* above typical content and banners */
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  body.nav-open .auth-basket-wrapper {
    z-index: 1000 !important; /* sit behind the drawer/overlay */
    opacity: 0;               /* hide while menu is open */
    pointer-events: none;
  }
}


/* Container for both badges */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin: 2rem auto;
  max-width: 700px;
}

/* Each badge card */
.trust-badge {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}

.trust-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* Stars */
.trust-badge__stars {
  font-size: 20px;
  color: #f59e0b;
  letter-spacing: .12em;
  margin-bottom: .4rem;
}

/* Platform name (Vinted / eBay) */
.trust-badge__platform {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: .25rem;
  color: #111;
}

/* Review stats */
.trust-badge__text {
  font-weight: 500;
  font-size: 14px;
  color: #555;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .trust-badge {
    background: #111;
    border-color: #2a2a2a;
    color: #f6f6f6;
  }
  .trust-badge__platform { color: #f6f6f6; }
  .trust-badge__text { color: #ccc; }
}

/* ===== Compact Trust Badge Overrides (Homepage) ===== */
.as-seen-on { max-width: 1100px; margin: 12px auto; padding: 10px 16px; }
.as-seen-on .trust-badges { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.as-seen-on .trust-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.5rem .8rem; border-radius:9999px; border:1px solid #eee; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.as-seen-on .trust-badge__logo { width: 22px; height: 22px; border-radius: 50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.75rem; }
.as-seen-on .trust-badge__stars { font-size: 14px; color: #f59e0b; letter-spacing: .08em; }
.as-seen-on .trust-badge__platform { font-size: 14px; }
.as-seen-on .trust-badge__text { font-size: 12px; color:#666; }
.as-seen-on .trust-badge[data-link-source="vinted"] .trust-badge__logo { background:#00b3a6; }
.as-seen-on .trust-badge[data-link-source="vinted"] .trust-badge__logo::after { content:'V'; }
.as-seen-on .trust-badge[data-link-source="ebay"] .trust-badge__logo { background:#0064d2; }
.as-seen-on .trust-badge[data-link-source="ebay"] .trust-badge__logo::after { content:'e'; }

/* Product page compact pill */
.product-main-content .trust-badge { display:inline-flex; align-items:center; gap:.55rem; padding:.45rem .75rem; border-radius:9999px; border:1px solid #e5e7eb; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.05); text-decoration:none; color:#111; }
.product-main-content .trust-badge__logo { width: 22px; height: 22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.75rem; background:#00b3a6; }
.product-main-content .trust-badge[data-link-source="vinted"] .trust-badge__logo { background:#00b3a6; }
.product-main-content .trust-badge__stars { font-size: 14px; color:#f59e0b; letter-spacing:.08em; }
.product-main-content .trust-badge:hover { box-shadow:0 2px 8px rgba(0,0,0,.08); transform: translateY(-1px); }
@media (prefers-color-scheme: dark) {
  .product-main-content .trust-badge { background:#111; color:#f6f6f6; border-color:#2a2a2a; }
}