/* ============================================
   CIRCUITX — MAIN STYLES
   Uses the variables defined in variables.css
   ============================================ */

/* ---- RESET ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ---- BODY ---- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---- HEADINGS ---- */
h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: 1px;
}

p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
}

/* ============================================
   INFO BAR — small top strip
   ============================================ */
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px var(--spacing-lg);
  background-color: var(--color-bg);
  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.info-bar__left,
.info-bar__right {
  display: flex;
  gap: var(--spacing-md);
}

/* The free-shipping promise, centred between the contact details and
   the account links. Absolutely centred against the bar itself, so it
   stays dead-centre no matter how wide the two side groups get. */
.info-bar__center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--color-accent);
  white-space: nowrap;
}

.info-bar {
  position: relative;
  /* anchors the absolutely-centred .info-bar__center above */
}

.info-bar__left a,
.info-bar__right a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.15s ease;
  display: inline-block;
}

.info-bar__left a:hover,
.info-bar__right a:hover {
  color: var(--color-accent);
  transform: translateY(-1px);
  /* a tiny lift on hover gives the contact links a subtle,
     "modern" interactive feel without being distracting */
}

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid rgba(20, 184, 166, 0.2);
  position: static;
  /* The full navbar used to be sticky. It now scrolls away with the
     page, and the compact .mini-header (built by js/sticky-header.js)
     slides down to take its place — so the shopper keeps logo,
     search and cart without giving up two rows of screen height. */
  z-index: 1000;
}

.navbar__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.navbar__row--top {
  justify-content: space-between;
}

.navbar__row--bottom {
  margin-top: var(--spacing-md);
  justify-content: flex-start;
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-accent);
  white-space: nowrap;
  text-decoration: none;
  /* without this, it's just a normal link and gets an underline —
     the brand-x span still gets its own distinct color below */
}

.navbar__logo-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  /* object-fit: contain shrinks/fits the image within the given
     width/height WITHOUT stretching or distorting it */
  border-radius: 4px;
  /* a slight rounding softens that white background square a little
     — but for a truly clean look, a transparent PNG version is best */
}

.navbar__links {
  display: flex;
  gap: var(--spacing-lg);
  list-style: none;
}

.navbar__links a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.navbar__links a:hover {
  color: var(--color-accent);
}

.navbar__search {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 480px;
  position: relative;
  /* position: relative anchors the suggestions dropdown below —
     see .search-suggestions */
}

.navbar__search input {
  flex: 1;
  padding: var(--spacing-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: var(--color-text);
  font-family: var(--font-body);
}

.navbar__search input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.navbar__search button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-accent);
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

/* ============================================
   LIVE SEARCH SUGGESTIONS DROPDOWN
   ============================================ */
.search-suggestions {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  overflow: hidden;
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.search-suggestions--open {
  display: block;
}

.search-suggestions__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-text-muted);
}

.search-suggestions__item:last-child {
  border-bottom: none;
}

.search-suggestions__item:hover,
.search-suggestions__item--active {
  background-color: var(--color-bg);
}

.search-suggestions__image,
.search-suggestions__image--placeholder {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background-color: var(--color-bg);
}

.search-suggestions__name {
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggestions__price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-suggestions__empty {
  padding: var(--spacing-sm);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
}

.navbar__icons {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.navbar__icon {
  position: relative;
  font-size: 1.3rem;
  text-decoration: none;
}

.navbar__cart-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  /* vertical-align: middle keeps the icon nicely centered against
     the account icon and theme toggle next to it */
}

.navbar__cart-count,
.navbar__wishlist-count {
  position: absolute;
  top: -6px;
  right: -10px;
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-size: 0.7rem;
  font-family: var(--font-body);
  padding: 1px 5px;
  border-radius: 50%;
}

.navbar__account {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-left: var(--spacing-sm);
  border-left: 1px solid rgba(20, 184, 166, 0.2);
}

.navbar__category-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.navbar__category-btn:hover {
  box-shadow: 0 0 12px var(--color-accent-glow);
}

/* ============================================
   LAYOUT — sidebar + main content, side by side
   ============================================ */
.layout {
  display: grid;
  grid-template-columns: 0fr 1fr;
  /* Two columns: sidebar and main content.
     The sidebar starts at 0fr (zero width = hidden) — JavaScript will
     switch this to a real width when the category button is clicked */
  transition: grid-template-columns 0.3s ease;
  /* animates the sidebar sliding open/closed smoothly */
}

.layout.sidebar-open {
  grid-template-columns: 260px 1fr;
  /* when this class is added by JavaScript, the sidebar column
     becomes 260px wide, pushing the main content over */
}

.sidebar {
  overflow: hidden;
  /* hides the sidebar's content while its column width is 0,
     instead of letting it spill outside its box */
  background-color: var(--color-bg-alt);
  border-right: 1px solid rgba(20, 184, 166, 0.15);
}

.sidebar__list {
  list-style: none;
  width: 260px;
  /* fixed width so text doesn't reflow/wrap while the column
     is animating open */
  padding: var(--spacing-sm) 0;
}

.sidebar__header {
  width: 260px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: 500;
  white-space: nowrap;
}

.sidebar__list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* pushes the category name to the left and the chevron to the
     far right of the row */
  padding: var(--spacing-sm) var(--spacing-lg);
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(20, 184, 166, 0.08);
  /* thin divider line between each category row */
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar__list li:last-child a {
  border-bottom: none;
}

.sidebar__list li a .chevron {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.sidebar__list li a:hover {
  background-color: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
}

.main-content {
  min-width: 0;
  /* prevents the hero's content from forcing the grid column wider
     than intended — a common CSS Grid gotcha */
}

/* ============================================
   HERO SLIDER (4 auto-advancing, animated slides)
   ============================================ */
.hero-slider {
  position: relative;
}

/* STAGE — holds only the 4 crossfading photo slides. A single fixed
   aspect-ratio, the same for all 4 slides, that only changes at the
   3 breakpoints below (mobile / tablet / desktop). This is what fixes
   the original height-jump bug (slide 1 is a 1.74:1 photo, slides
   2-4 are ~2.8:1 — without this, the box changed height every time
   the slideshow advanced). background-size is "cover" (see
   .hero-slide below), so a slide's photo always fills the box
   completely — there's no leftover space for the box's dark
   background-color to show through as a strip, on any screen size.
   Pure CSS also means the box resizes instantly and correctly for
   ANY width change (sidebar opening, scrollbar appearing, browser
   resize, zoom) with no JS needed to recompute it. */
.hero-slider__stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl) var(--spacing-xl);
  color: #ffffff;
  text-decoration: none;
  background-color: #0a0e14;
  /* background-image itself is still set per slide, inline in the
     HTML (each slide uses a different photo). "cover" always fills
     the stage's box completely on every screen size — cropping
     whatever doesn't fit instead of leaving empty space around it,
     which is what used to show as a black strip under "contain".
     background-position is "center" here as the default for slide 1
     (a plain photo with no baked-in text, so cropping its edges
     loses nothing); slides 2-4 override this to "left center" below,
     because their headline/subtitle are baked into the left side of
     the photo itself — anchoring to the left means cropping always
     comes off the right edge of the image, never off the text. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* dark fallback — shows if a slide's background-image is still
     loading, OR fails to load entirely. Each slide's inline style
     now sets background-image specifically (not the "background"
     shorthand) so it never silently wipes out this fallback color —
     the shorthand form used to do exactly that, which is what made a
     failed image load show blank white instead of this dark color. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(24px);
  transition: opacity 0.7s ease, transform 0.7s ease, visibility 0s linear 0.7s;
  z-index: 1;
}

/* Slides 2-4's headline/subtitle are baked into the left ~40% of the
   photo (see the sr-only text in the HTML — it's duplicated there
   for accessibility/SEO, not shown visually). Anchoring the crop to
   the left keeps that text fully visible at every screen size; only
   the decorative right side of the photo gets trimmed. */
.hero-slide--drone,
.hero-slide--rc-car,
.hero-slide--diy-kits {
  background-position: left center;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
  z-index: 2;
  animation: heroSlideIn 0.8s ease-out;
}

@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-slide__content {
  max-width: 560px;
}

/* Visually hides text while keeping it available to screen readers
   and search engines — used on slides 2-4, whose headline/subtitle
   are already baked into the uploaded banner image itself. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Show All Products" — a floating pill button sitting directly on
   top of the hero photo, anchored to its bottom-left corner. It's a
   sibling of the stage, not inside any one slide, so it stays in the
   same spot and never fades/slides with the photo underneath it —
   and it's the only thing on the hero now, so the hero's rendered
   height is only ever the stage's own aspect-ratio height (see
   .hero-slider__stage above), never anything more. */
.hero-slider__show-all {
  position: absolute;
  left: var(--spacing-lg);
  bottom: var(--spacing-lg);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  color: #0a0e14;
  background-color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hero-slider__show-all:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .hero-slide {
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    /* Slimmer than desktop's spacing-xl padding — slide 1's text
       sits closer to the edges and needs less stage height overall. */
    padding: var(--spacing-md);
  }

  /* background-attachment: scroll (instead of the desktop default)
     avoids a known iOS Safari rendering issue */
  .hero-slide {
    background-attachment: scroll;
  }

  /* Slide 1's headline/subtitle are real HTML text, not baked into
     the photo — compact sizing here is what lets its stage height
     stay close to the photo's own aspect ratio (matching the other
     3 slides' proportions) instead of needing extra room. */
  .hero-slide--main .hero__title {
    font-size: 1.7rem;
    margin-bottom: 6px;
  }

  .hero-slide--main .hero__subtitle {
    font-size: 0.8rem;
    margin-bottom: 0;
  }

  /* Slide 1's text sits flush at the bottom of the box (see
     justify-content: flex-end above) — but the "Show All Products"
     button floats in that same bottom-left corner, on top of the
     image. Without extra room here the subtitle's last line and the
     button would occupy the same spot. This padding lifts the whole
     text block up just enough to clear the button (~32px tall here)
     plus a visible gap above it. */
  .hero-slide--main {
    padding-bottom: 64px;
  }

  .hero-slider__show-all {
    left: var(--spacing-md);
    bottom: var(--spacing-md);
    font-size: 0.85rem;
    padding: 8px 16px;
  }
}

/* Extra-narrow phones (≤360px) — the subtitle can wrap to 4 lines at
   this width, which would just barely outgrow the aspect-fit stage
   height. Clamping it to 2 lines keeps slide 1 safely within its own
   photo's proportions, matching the other 3 slides. */
@media (max-width: 360px) {
  .hero-slide--main .hero__subtitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Tablets: between phone and desktop. A slightly wider (shorter)
   stage than mobile's 16:9, plus font-size bumps for slide 1's
   overlay text — background-size stays "cover" at every width, set
   globally above. */
@media (min-width: 701px) and (max-width: 1024px) {
  .hero-slider__stage {
    aspect-ratio: 2 / 1;
  }

  .hero-slide--main .hero__title {
    font-size: 2.4rem;
  }

  .hero-slide--main .hero__subtitle {
    font-size: 1rem;
    margin-bottom: 0;
  }
}

/* Desktop (1025px+): a wide, shallow banner — 1920×700 matches
   slides 2-4's own native ~2.8:1 photos closely, so they show with
   almost no cropping at all. The stage's height is the ONLY height
   the hero has at any screen width — the button floats on top of it
   (see .hero-slider__show-all), it never adds height below. */
@media (min-width: 1025px) {
  .hero-slider__stage {
    aspect-ratio: 1920 / 700;
  }
}

/* ============================================
   HERO SECTION (legacy single hero — kept for reference/reuse,
   no longer used on the homepage now that HERO SLIDER above
   replaces it)
   ============================================ */
.hero {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* left-aligned now, like the reference — no longer centered */
  padding: var(--spacing-xl) var(--spacing-xl);
  animation: fadeInUp 0.8s ease-out;

  /* ---- BACKGROUND ----
     A dark gradient overlay sits ON TOP of the photo (in that order,
     first gradient then url()) so white text stays readable no matter
     how bright any part of the photo is. */
  background: linear-gradient(rgba(10, 14, 20, 0.75), rgba(10, 14, 20, 0.55)),
              url('../images/hero-bg.png') center/cover no-repeat;
  color: #ffffff;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-md);
}

.hero__title-accent {
  color: var(--color-accent);
  /* only the "Innovate." line uses our teal accent — the
     split-color effect from the reference design */
}

.hero__subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
  margin-bottom: var(--spacing-lg);
}

.hero__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  /* wraps to a new line on narrow screens instead of squeezing */
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 999px;
  /* a very large border-radius on a short element creates a full
     "pill" shape, matching the rounded buttons in your reference */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hero__cta--primary {
  background-color: #ffffff;
  color: #0a0e14;
  /* explicit black text — this used to be var(--color-bg), which
     worked when the site defaulted to dark mode (a near-black value),
     but broke once we switched to light-mode-only (it became a pale
     gray, nearly invisible on the white button) */
}

.hero__cta--primary:hover {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

.hero__cta--secondary {
  background-color: #25D366;
  /* WhatsApp brand green, matching our floating chat button */
  color: #ffffff;
}

.hero__cta--secondary:hover {
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

.hero__cta--secondary:active {
  transform: translateY(0) scale(0.96);
}

/* ============================================
   CATEGORIES SECTION
   ============================================ */
.categories {
  padding: var(--spacing-xl) var(--spacing-lg);
}

.categories__title {
  text-align: center;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* repeat(4, 1fr) = 4 equal-width columns.
     This is CSS Grid's real power: define a structure once,
     and every card automatically snaps into place */
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
  /* margin: 0 auto centers the grid horizontally within the page */
}

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-md);
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  /* lifts the whole card slightly on hover */
  border-color: var(--color-accent);
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.25);
}

.category-card__icon {
  width: 40px;
  height: 40px;
  color: var(--color-accent);
}

.category-card__name {
  font-size: 0.9rem;
  font-weight: 500;
}

/* ---- RESPONSIVE: fewer columns on smaller screens ---- */
@media (max-width: 900px) {
  /* @media queries apply styles ONLY when the condition is true —
     here, only when the browser window is 900px wide or narrower.
     We'll cover this properly in Step 11 (Responsive Design) */
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   FEATURED PRODUCTS SECTION
   ============================================ */
.products {
  padding: 0 var(--spacing-lg) var(--spacing-xl);
}

.products__title {
  text-align: center;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

/* ============================================
   ABOUT SECTION (homepage)
   ============================================ */
.about {
  display: none;
  /* hidden by default — script.js reveals it (adds .is-visible) only
     when someone clicks "About Us", e.g. in the footer */
  padding: var(--spacing-xl) var(--spacing-lg);
  background-color: var(--color-bg-alt);
}

.about.is-visible {
  display: block;
}

.about__title {
  text-align: center;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.about__content {
  max-width: 760px;
  margin: 0 auto;
  color: var(--color-text);
  line-height: 1.7;
}

.about__content p {
  margin-bottom: var(--spacing-md);
}

.about__subtitle {
  font-size: 1.3rem;
  color: var(--color-accent);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.about__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md);
}

.about__features li {
  padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-lg);
  position: relative;
  border-bottom: 1px solid var(--color-text-muted);
}

.about__features li:last-child {
  border-bottom: none;
}

.about__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.about__tagline {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-accent);
  margin-top: var(--spacing-lg);
}

.products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.product-card {
  position: relative;
  /* relative positioning lets the discount badge (absolute) pin itself
     precisely to this card's top-left corner */
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-alt);
  border: none;
  border-radius: 14px;
  padding: var(--spacing-md);
  /* a soft shadow instead of a hard border is what stops a grid of
     cards from reading as a rigid spreadsheet/table — each card
     looks like it's floating on its own, not boxed into a cell */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* ENTRANCE ANIMATION — every card fades and slides up into place
     the moment it appears (first page load, or a fresh batch of
     results after searching/filtering/changing category). This is
     what makes a plain grid feel alive instead of just "snapping"
     into existence with everything visible at once. */
  animation: productCardIn 0.5s ease-out backwards;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.2);
}

@keyframes productCardIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Staggers each card's start time slightly after the one before it,
   so they cascade into view left-to-right, top-to-bottom, rather
   than all popping in simultaneously. Covers the first 12 cards
   individually; anything beyond that shares the last delay, which is
   unnoticeable since by then earlier cards are already settling in. */
.product-card:nth-child(1) { animation-delay: 0s; }
.product-card:nth-child(2) { animation-delay: 0.06s; }
.product-card:nth-child(3) { animation-delay: 0.12s; }
.product-card:nth-child(4) { animation-delay: 0.18s; }
.product-card:nth-child(5) { animation-delay: 0.24s; }
.product-card:nth-child(6) { animation-delay: 0.3s; }
.product-card:nth-child(7) { animation-delay: 0.36s; }
.product-card:nth-child(8) { animation-delay: 0.42s; }
.product-card:nth-child(9) { animation-delay: 0.48s; }
.product-card:nth-child(10) { animation-delay: 0.54s; }
.product-card:nth-child(11) { animation-delay: 0.6s; }
.product-card:nth-child(n+12) { animation-delay: 0.66s; }

@media (prefers-reduced-motion: reduce) {
  /* people who've told their OS they get motion-sick or distracted by
     animation should just see the cards appear instantly instead */
  .product-card {
    animation: none;
  }
}

.product-card__image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* aspect-ratio keeps the box perfectly square regardless of card width —
     modern CSS, no need for old padding-trick hacks */
  background-color: var(--color-bg);
  border: 1px dashed rgba(20, 184, 166, 0.3);
  border-radius: 6px;
}

.product-card__image-wrap {
  position: relative;
  /* relative positioning lets the badge and floating cart button
     (both absolute) sit precisely on top of just the image */
  margin-bottom: var(--spacing-sm);
  overflow: visible;
  /* visible (not hidden) so the cart button can peek OUTSIDE the
     image's bottom-right corner, like in the reference design */
}

.product-card__image-link {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  /* THIS element clips the zoomed image on hover, while the
     wrapper above stays "visible" so the cart button isn't clipped */
}

.product-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
  /* this transition is what makes the zoom feel like a smooth "pop,"
     not an instant jump */
}

.product-card:hover .product-card__image {
  transform: scale(1.08);
  /* scales the image up 8% on hover — a clean "pop" effect,
     no darkening or blur involved */
}

.product-card__badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 1;
}

.product-card__add-icon-btn {
  position: absolute;
  bottom: -14px;
  right: 10px;
  /* negative bottom value is what makes it "peek off" the image's
     lower edge, exactly like the reference screenshot */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.product-card__add-icon-btn:hover {
  box-shadow: 0 0 14px var(--color-accent-glow);
  transform: scale(1.1);
}

.product-card__add-icon-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.product-card__name {
  font-family: var(--font-body);
  /* overriding the global heading font here — product names read better
     in our clean body font than the futuristic display font */
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 4px;
  text-decoration: none;
  display: block;
}

.product-card__rating {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.product-card__rating-number {
  color: var(--color-text);
  font-weight: 600;
  margin-left: 2px;
}

.product-card__review-count {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
}

.product-card__low-stock,
.product-page__low-stock {
  color: #ff6b6b;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 2px 0 0;
}

.product-page__low-stock {
  font-size: 0.9rem;
  margin-bottom: var(--spacing-lg);
}

.product-card__price-current {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
}

.product-card__price-original {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
  /* line-through draws a horizontal strike across the text — the
     universal visual signal for "this used to be the price" */
}

.product-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(20, 184, 166, 0.1);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, max-height 0.2s ease;
  /* hidden by default (zero height AND invisible) — animating
     max-height alongside opacity is what makes it smoothly "grow"
     into view instead of just popping in */
}

.product-card:hover .product-card__meta-row {
  opacity: 1;
  max-height: 40px;
}

.product-card__meta-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-decoration: none;
  /* text-decoration: none matters now since this class is used on
     both a <button> (Wishlist) and an <a> (View) — links show an
     underline by default, buttons don't */
  cursor: pointer;
  padding: 4px;
}

.product-card__meta-btn:hover {
  color: var(--color-accent);
}

.product-card__meta-divider {
  width: 1px;
  height: 14px;
  background-color: rgba(20, 184, 166, 0.2);
}

@media (max-width: 900px) {
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: 0 0 var(--spacing-lg);
  background-color: var(--color-bg-alt);
  border-top: 1px solid rgba(20, 184, 166, 0.15);
}

/* ---- brand row: logo, description, call-us line, social icons — first thing in the footer ---- */
.footer__brand-row {
  padding: var(--spacing-lg) var(--spacing-lg) 0;
}

.footer__callus {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.footer__callus-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.footer__callus-label {
  display: block;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.footer__callus-number {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-text);
  text-decoration: none;
}

.footer__callus-number:hover {
  color: var(--color-accent);
}

.footer__top,
.footer__bottom {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

/* ---- footer top: 4 equal link columns (brand row sits above this) ---- */
.footer__top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

/* ---- brand row: logo, description, call-us line, social icons ---- */
.footer__brand-row {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.footer__col--brand {
  max-width: 480px;
}

.footer__brand {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.footer__description {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-md);
  max-width: 320px;
}

.footer__social {
  display: flex;
  gap: var(--spacing-sm);
}

.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
  transition: background-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.footer__social-link:hover {
  background-color: var(--color-accent);
  color: #ffffff;
  transform: translateY(-2px);
}

.footer__heading {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

/* Reset button defaults so .footer__accordion-toggle looks exactly
   like the old plain <h3 class="footer__heading"> on desktop, and
   only picks up accordion behavior inside the mobile media query below */
.footer__accordion-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin-bottom: var(--spacing-md);
  font: inherit;
  text-align: left;
  cursor: default;
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__links a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer__links a:hover {
  color: var(--color-accent);
}

/* ---- footer bottom: whatsapp CTA + copyright (unchanged design) ---- */
.footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  padding-top: var(--spacing-lg);
  border-top: 1px solid rgba(20, 184, 166, 0.15);
  text-align: center;
}

.footer__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: #25D366;
  /* WhatsApp's actual brand green — using their real color makes the
     button instantly recognizable to visitors */
  color: #ffffff;
  text-decoration: none;
  border-radius: 24px;
  /* a large border-radius (close to half the button's height) creates
     a "pill" shape, commonly used for WhatsApp CTAs */
  font-weight: 500;
  font-size: 0.95rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.footer__whatsapp:hover {
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

.footer__whatsapp:active {
  transform: translateY(0) scale(0.96);
  /* combined with the hover lift above, this makes clicking feel like
     genuinely "pressing" the button down */
}

.footer__copyright {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-md);
}

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

/* ============================================
   FOOTER — MOBILE ACCORDION (Image 2 reference)
   Below 768px, the 4 link columns collapse into
   tappable dropdowns instead of a grid.
   ============================================ */
@media (max-width: 768px) {
  .footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .footer__accordion {
    border-bottom: 1px solid rgba(20, 184, 166, 0.15);
  }

  .footer__accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: var(--spacing-md) 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 0;
  }

  .footer__accordion-toggle::after {
    content: "⌄";
    font-size: 1.1rem;
    color: var(--color-accent);
    transition: transform 0.2s ease;
  }

  .footer__accordion.is-open .footer__accordion-toggle::after {
    transform: rotate(180deg);
  }

  .footer__accordion .footer__links {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
  }

  .footer__accordion.is-open .footer__links {
    max-height: 400px;
    padding-bottom: var(--spacing-md);
  }
}


/* ============================================
   FLOATING WHATSAPP BUTTON
   ============================================ */
.whatsapp-float {
  position: fixed;
  /* fixed = positioned relative to the SCREEN, not the page — stays
     put even while the user scrolls through products, categories, etc.

     BOTTOM-RIGHT, not bottom-left: this button is pinned to the
     screen on every page, including the homepage — and the homepage
     hero's own "Show All Products" button also sits bottom-left,
     floating directly on top of the hero photo (see
     .hero-slider__show-all). Bottom-right isn't used by any other
     fixed-position element on the site (checked: modals/lightbox are
     full-screen, the toast is bottom-CENTER, the mini-header is
     pinned to the top), so keeping the WhatsApp button here avoids
     it ever landing on top of that in-page button, on any slide or
     screen size. */
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  z-index: 2000;
  /* higher than our navbar's z-index (1000), so this button always
     floats on top of everything, including the sticky navbar */

  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* 50% border-radius on an equal width/height element = perfect circle */

  background-color: #25D366;
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: whatsapp-pulse 2.5s ease-out infinite;
  /* a gentle, looping pulse draws the eye without being obnoxious —
     stops the moment someone hovers (see the rule below) */
}

.whatsapp-float:hover {
  transform: scale(1.1);
  /* slightly enlarges the button on hover — a subtle "come click me" cue */
  box-shadow: 0 0 20px rgba(37, 211, 102, 0.6);
  animation-play-state: paused;
  /* pausing the pulse on hover avoids the two animations (pulse +
     hover-scale) visually fighting each other */
}

.whatsapp-float:active {
  transform: scale(0.92);
  /* a quick "press down" the instant it's clicked — tactile feedback
     that confirms the click registered, before the new tab opens */
}

@keyframes whatsapp-pulse {
  0% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 14px rgba(37, 211, 102, 0);
    /* the second shadow expands outward and fades to transparent —
       this is what creates the "ripple" look */
  }
  100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-icon {
  width: 28px;
  height: 28px;
  fill: currentColor;
  /* fill: currentColor makes the icon automatically match whatever
     text color is set on its parent button — no separate color rule needed */
}

.whatsapp-icon--small {
  width: 18px;
  height: 18px;
}

/* ============================================
   RESPONSIVE DESIGN — small screens (phones/tablets)
   ============================================ */
@media (max-width: 768px) {

  /* ---- INFO BAR ---- */
  .info-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .info-bar__center {
    /* the bar stacks into a column here, so the absolute centring
       from desktop would drop this on top of the other rows */
    position: static;
    transform: none;
  }

  /* ---- NAVBAR: TOP ROW ---- */
  .navbar__row--top {
    flex-wrap: wrap;
    /* allows children to drop to a new line when they don't fit */
  }

  .navbar__logo {
    order: 1;
    /* the "order" property lets us change VISUAL order without
       touching the HTML — logo stays first */
  }

  .navbar__icons {
    order: 2;
    /* icons stay on the same first line, next to the logo */
  }

  .navbar__search {
    order: 3;
    flex-basis: 100%;
    /* flex-basis: 100% forces the search bar to claim a FULL row
       width, which pushes it onto its own new line automatically —
       exactly the "search below logo" behavior you asked for */
    max-width: 100%;
  }

  /* ---- NAVBAR: BOTTOM ROW (category button + links) ---- */
  .navbar__row--bottom {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .navbar__links {
    gap: var(--spacing-md);
    flex-wrap: wrap;
  }

  /* ---- SIDEBAR: narrower on mobile ---- */
  .layout.sidebar-open {
    grid-template-columns: 200px 1fr;
    /* same slide-in behavior as desktop, just a narrower 200px
       instead of 260px, so it doesn't eat the whole small screen */
  }

  .sidebar__header,
  .sidebar__list {
    width: 200px;
  }

  /* ---- HERO: smaller text so it doesn't overflow narrow screens ---- */
  .hero__title {
    font-size: 2.2rem;
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  /* ---- GRIDS: drop to a single column on very small screens ---- */
  .categories__grid,
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

@media (max-width: 480px) {
  /* Narrow phones now STAY at 2 columns, side by side — like
     Categories already did at the 900px breakpoint above — instead
     of dropping to a single stacked column. There is no border or
     rule drawn between the two columns anywhere here; the only
     separation between cards is the grid's own "gap" (plain
     whitespace), which is what keeps this from reading as a divided
     table. */
  .products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-md);
  }

  /* Slightly tighter card chrome at this width — two cards side by
     side leaves less room per card than one full-width card did, so
     padding/text sizes come down a notch to match, without touching
     desktop/tablet at all. */
  .product-card {
    padding: 10px;
  }

  .product-card__name {
    font-size: 0.88rem;
    /* clamp to 2 lines so a long name can't push the price/rating
       below it down by an uneven amount card-to-card */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card__rating {
    font-size: 0.78rem;
  }

  .product-card__price-current {
    font-size: 1.05rem;
  }

  .product-card__price-original {
    font-size: 0.8rem;
  }

  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 1.3rem;
  }
}

/* ============================================
   LOGIN / SIGNUP PAGE
   ============================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
  padding: var(--spacing-lg);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 12px;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.auth-card__logo {
  display: block;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--color-accent);
  text-decoration: none;
  margin-bottom: var(--spacing-lg);
}

.auth-tabs {
  display: flex;
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
}

.auth-tab {
  flex: 1;
  padding: var(--spacing-sm);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  /* transparent border reserves the space so the layout doesn't
     shift when the accent-colored border appears on the active tab */
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.auth-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-form label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}

.auth-form input {
  padding: var(--spacing-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}

.auth-form input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.auth-error {
  color: #ff6b6b;
  font-size: 0.85rem;
  min-height: 1.2em;
  /* reserves space for the error message even when empty, so the
     form doesn't visually "jump" when an error appears */
}

.auth-submit {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background-color: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: 4px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.auth-submit:hover {
  box-shadow: 0 0 12px var(--color-accent-glow);
}

.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin: var(--spacing-lg) 0 var(--spacing-md);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
}

.auth-divider span {
  padding: 0 var(--spacing-sm);
}

.auth-google-btn {
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.auth-google-btn:hover {
  border-color: var(--color-accent);
}

/* ============================================
   ADMIN PAGES
   ============================================ */
.admin-badge {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-lg);
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid rgba(20, 184, 166, 0.15);
}

.admin-header__logo {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-accent);
}

.admin-header__logo span {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.admin-header__logout {
  padding: 6px var(--spacing-md);
  background: none;
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  cursor: pointer;
}

.admin-main {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.admin-panel {
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

.admin-panel h2 {
  margin-bottom: var(--spacing-md);
  font-size: 1.2rem;
  color: var(--color-text);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.admin-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
}

.admin-form__row--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.admin-form__sublabel {
  font-size: 0.75rem;
}

.admin-form label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form textarea {
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  resize: vertical;
  /* resize: vertical lets the admin drag the textarea taller if they
     need to see more URLs at once, but not wider (which could break
     the layout) */
}

.admin-form__checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--color-text);
  margin-top: var(--spacing-sm);
}

.admin-form__actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.admin-cancel-btn {
  padding: var(--spacing-sm) var(--spacing-lg);
  background: none;
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  cursor: pointer;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  /* border-collapse: collapse merges adjacent cell borders into a
     single clean line, instead of doubled-up borders */
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: var(--spacing-sm);
  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
  font-size: 0.9rem;
}

.admin-table th {
  color: var(--color-text-muted);
  font-weight: 500;
}

.admin-table__actions {
  display: flex;
  gap: var(--spacing-sm);
}

.admin-table__edit,
.admin-table__delete {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
}

.admin-table__edit {
  background-color: var(--color-accent);
  color: var(--color-bg);
}

.admin-table__delete {
  background-color: #ff6b6b;
  color: #ffffff;
}

.stock-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.stock-badge--in {
  background-color: rgba(20, 184, 166, 0.15);
  color: var(--color-accent);
}

.stock-badge--out {
  background-color: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.admin-table__stock-editor {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.admin-table__stock-input {
  width: 60px;
  padding: 4px 6px;
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 0.8rem;
}

.admin-table__stock-save {
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
}

.admin-table__stock-save:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

.products__loading {
  grid-column: 1 / -1;
  /* spans ALL columns of the grid, so this message centers across
     the full width instead of sitting in just one narrow column */
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--spacing-xl) 0;
}

.admin-form__image-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
}

.admin-form__image-preview {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.product-card__link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  /* color: inherit stops the link from turning blue/purple like a
     default browser link — it just inherits whatever color its
     parent (.product-card) already has */
}

/* ============================================
   PRODUCT DETAILS PAGE
   ============================================ */
.product-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.product-page__back {
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: var(--spacing-lg);
  font-size: 0.9rem;
}

.product-page__back:hover {
  color: var(--color-accent);
}

.product-page__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* two equal columns: gallery on the left, info on the right */
  gap: var(--spacing-xl);
  /* "start" (rather than the default "stretch") keeps the gallery
     column at its own natural height instead of stretching to match
     the taller info column — that's what gives position: sticky
     below any room to actually move within the row */
  align-items: start;
}

/* ---- GALLERY ---- */
.product-page__gallery {
  /* Sticks to the viewport while scrolling, but ONLY for as long as
     this grid row (i.e. the taller info column, description and
     all) is still on screen — once the info column's content runs
     out, this naturally scrolls away with the rest of the page, so
     both columns move together again by the time the person reaches
     Reviews / Related Products below. */
  position: sticky;
  top: 90px;
  /* clears the sticky navbar (~65px tall on this page) with a little
     breathing room underneath it */
}

@media (max-width: 768px) {
  .product-page__gallery {
    /* Gallery and info stack into a single column on narrow screens
       (see the .product-page__content override below) — sticky
       positioning doesn't make sense there, so switch it off */
    position: static;
  }
}

.product-page__main-image-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--spacing-sm);
}

.product-page__main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
  /* the enlarged view (click) is the whole point of making this
     hoverable — the cursor is the hint that it's clickable */
}

/* ============================================
   IMAGE LIGHTBOX — enlarged view on clicking the main product image
   ============================================ */
.image-lightbox-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.88);
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.image-lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.image-lightbox-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.image-lightbox-close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 480px) {
  .image-lightbox-close {
    top: var(--spacing-md);
    right: var(--spacing-md);
  }
}

.product-page__thumbs {
  display: flex;
  gap: var(--spacing-sm);
}

@media (max-width: 1024px) {
  .product-page__thumbs {
    /* Flex items shrink by default, so on the narrower stacked
       layout, 4+ fixed 64px thumbnails could get squeezed smaller
       than intended instead of staying legible — overflow-x:auto
       plus flex-shrink:0 below keeps every thumbnail at full size
       and lets the strip scroll horizontally instead, so all of them
       stay visible and tappable rather than being squashed. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* room for the scrollbar so it doesn't sit flush against the thumbs */
  }

  .product-page__thumb {
    flex: 0 0 64px;
  }
}

.product-page__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-bg-alt);
  transition: border-color 0.2s ease;
}

.product-page__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-page__thumb.active {
  border-color: var(--color-accent);
  /* the teal border is how we show which thumbnail is currently
     selected — matches the "active" class toggled in product.js */
}

/* ---- INFO ---- */
.product-page__name {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

/* Desktop's 2rem + the body's inherited line-height:1.6 is fine when
   the two-column layout gives the title lots of width to breathe in.
   Once the page stacks to a single column (tablet and mobile), that
   same size/line-height on a long product name wraps to 5-6 lines
   and pushes everything else screen-lengths down — this is what was
   making the title "take up the whole screen". Shrinking both here
   keeps a wrapped title compact instead. */
@media (max-width: 1024px) {
  .product-page__name {
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 480px) {
  .product-page__name {
    font-size: 1.2rem;
  }
}

.product-page__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0;
}

.product-page__price .product-card__price-current {
  font-size: 1.8rem;
}

.product-page__description {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.product-page__description p {
  margin: 0 0 var(--spacing-md);
}

.product-page__description strong {
  color: var(--color-text);
  font-weight: 600;
}

.product-page__desc-heading {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--color-text);
  margin: 0 0 var(--spacing-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-page__desc-heading::before {
  content: '';
  width: 4px;
  height: 1.1em;
  background-color: var(--color-accent);
  border-radius: 2px;
  flex-shrink: 0;
  /* a short accent bar in front of the text — reads as a clear
     "section start" marker at a glance, even before the text itself */
}

.product-page__desc-divider {
  border: none;
  border-top: 1px solid rgba(128, 128, 128, 0.2);
  margin: var(--spacing-lg) 0;
  /* the visual break BETWEEN two sections — sits above the next
     heading, so every section after the first gets equal breathing
     room from the one before it */
}

.product-page__desc-list {
  margin: 0 0 var(--spacing-md);
  padding: 0;
  list-style: none;
}

.product-page__desc-list li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 10px;
  line-height: 1.6;
}

.product-page__desc-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  /* a small teal dot instead of the browser's default bullet, so
     list items match the rest of the section's accent styling */
}

@media (max-width: 480px) {
  .product-page__desc-heading {
    font-size: 1.08rem;
  }

  .product-page__desc-divider {
    margin: var(--spacing-md) 0;
  }
}

.admin-form__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
  line-height: 1.5;
}

.admin-form__hint code {
  background-color: var(--color-bg);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.78rem;
}

.product-page__stock-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.product-page__stock {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0;
}

.product-page__stock.in {
  color: var(--color-accent);
}

.product-page__stock.out {
  color: #ff6b6b;
}

.product-page__notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 20px;
  padding: 6px 14px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-page__notify-btn:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

/* ============================================
   NOTIFY ME MODAL
   ============================================ */
.notify-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 2500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.notify-modal {
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  animation: share-popup-in 0.2s ease;
}

.notify-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  font-family: var(--font-heading);
}

.notify-modal__header button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  line-height: 1;
}

.notify-modal__subtitle {
  padding: var(--spacing-md) var(--spacing-md) 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.notify-form {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.notify-form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.notify-form__group label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.notify-form__optional {
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.8;
}

.notify-form__group input,
.notify-form__group textarea {
  width: 100%;
  padding: 10px 12px;
  background-color: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-text-muted);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  resize: vertical;
}

.notify-form__group input:focus,
.notify-form__group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.notify-form__input--error {
  border-color: #ff6b6b !important;
}

.notify-form__error {
  font-size: 0.78rem;
  color: #ff6b6b;
  min-height: 1em;
}

.notify-form__submit {
  width: 100%;
  padding: 12px var(--spacing-xl);
  background-color: #25D366;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.notify-form__submit:hover {
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .notify-modal {
    max-width: 100%;
  }

  .product-page__notify-btn {
    width: 100%;
    justify-content: center;
  }

  .product-page__stock-row {
    width: 100%;
  }
}

.product-page__quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.product-page__quantity label {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0;
}

.product-page__quantity-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(128, 128, 128, 0.2);
  border-radius: 999px;
  padding: 5px;
}

.product-page__quantity-controls button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: none;
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.product-page__quantity-controls button:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

.product-page__quantity-controls input {
  width: 34px;
  text-align: center;
  border: none;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  /* Removes the little up/down spinner arrows some browsers add to
     number inputs, since we already have our own +/- buttons */
  -moz-appearance: textfield;
}

.product-page__quantity-controls input::-webkit-outer-spin-button,
.product-page__quantity-controls input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.product-page__add-btn {
  width: 100%;
  justify-content: center;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .product-page__content {
    grid-template-columns: 1fr;
    /* stack gallery above info on narrow screens instead of side-by-side */
  }
}

.product-page__actions {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.product-page__add-btn--secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.product-page__add-btn--secondary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.product-page__buy-btn {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: #1e293b;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.product-page__buy-btn:hover {
  filter: brightness(1.2);
  transform: translateY(-2px);
}

.product-page__add-btn--secondary[disabled],
.product-page__buy-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 480px) {
  .product-page__actions {
    flex-direction: column;
  }
}

/* ============================================
   TOAST NOTIFICATION
   ============================================ */
.toast {
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  /* starts shifted DOWN and off to the side (via -50%), ready to
     slide up into place */
  background-color: var(--color-accent);
  color: #ffffff;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  z-index: 3000;
  /* higher than even our floating WhatsApp button (2000), so it's
     never accidentally covered */
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  /* pointer-events: none means clicks pass straight through the
     toast — it's purely informational, never blocks interaction */
}

.toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   CART PAGE
   ============================================ */
.cart-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.cart-page__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.cart-page__empty {
  text-align: center;
  padding: var(--spacing-xl) 0;
  color: var(--color-text-muted);
}

.cart-page__empty a {
  display: inline-block;
  margin-top: var(--spacing-md);
}

.cart-item {
  display: grid;
  grid-template-columns: 70px 1fr auto auto auto;
  /* 5 columns: image, info, quantity controls, subtotal, remove button */
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
}

.cart-item__image,
.cart-item__image--placeholder {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--color-bg-alt);
}

.cart-item__name {
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.cart-item__price {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.cart-item__quantity {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.cart-item__qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-text-muted);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
}

.cart-item__qty-btn:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

.cart-item__subtotal {
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.cart-item__remove {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.cart-item__remove:hover {
  opacity: 1;
}

.cart-page__summary {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 2px solid rgba(20, 184, 166, 0.15);
}

.cart-page__total {
  display: flex;
  justify-content: space-between;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.cart-page__checkout-btn {
  display: block;
  text-align: center;
  border-radius: 4px;
}

@media (max-width: 600px) {
  .cart-item {
    grid-template-columns: 60px 1fr;
    grid-template-areas:
      "image info"
      "image quantity"
      "image subtotal-remove";
    /* On very small screens, stack info/quantity/subtotal into a
       second column instead of 5 squeezed columns */
  }
}

.wishlist-item__move-btn {
  padding: 6px 14px;
  background-color: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wishlist-item__move-btn:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

.product-page__title-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.product-page__wishlist-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--color-text-muted);
  background-color: var(--color-bg-alt);
  font-size: 1.2rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.product-page__wishlist-btn:hover {
  border-color: var(--color-accent);
}

/* ============================================
   CHECKOUT PAGE
   ============================================ */
.checkout-page {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.checkout-page__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
  /* align-items: start stops the shorter column from stretching to
     match the taller one's height — each box hugs its own content */
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.checkout-form h2 {
  font-size: 1.2rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.checkout-form label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
}

.checkout-form input,
.checkout-form textarea {
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
}

.checkout-form__submit {
  margin-top: var(--spacing-md);
}

.checkout-summary {
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 8px;
  padding: var(--spacing-lg);
}

.checkout-summary h2 {
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.checkout-summary__item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(20, 184, 166, 0.08);
}

.checkout-summary__total {
  display: flex;
  justify-content: space-between;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-text);
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md);
  border-top: 2px solid rgba(20, 184, 166, 0.15);
}

@media (max-width: 700px) {
  .checkout-page__grid {
    grid-template-columns: 1fr;
    /* stack the form above the summary on narrow screens */
  }
}

/* ============================================
   ORDER CONFIRMATION PAGE
   ============================================ */
.order-confirmation {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
  padding: var(--spacing-xl) 0;
}

.order-confirmation__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-md);
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-confirmation__title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.order-confirmation__subtitle {
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

.order-confirmation__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: var(--spacing-lg) 0;
  line-height: 1.6;
}

.admin-header__nav {
  display: flex;
  gap: var(--spacing-lg);
}

.admin-header__nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease;
}

.admin-header__nav a:hover,
.admin-header__nav a.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.admin-table__muted {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.admin-table__status-select {
  padding: 4px 8px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

/* ============================================
   TRACK ORDER PAGE
   ============================================ */
.track-order__form-wrap {
  max-width: 500px;
  margin: 0 auto var(--spacing-xl);
}

.track-order__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.track-order__form label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.track-order__form input,
.track-order__form textarea {
  width: 100%;
  padding: var(--spacing-sm);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  color: var(--color-text);
  font-family: var(--font-body);
}

.track-order__form textarea {
  resize: vertical;
  min-height: 100px;
}

.track-order__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: var(--spacing-sm);
  text-align: center;
}

.track-order__message {
  max-width: 500px;
  margin: 0 auto;
  padding: var(--spacing-md);
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
}

.track-order__message--success {
  background-color: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
}

.track-order__message--error {
  background-color: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.track-order__message--error a {
  color: var(--color-accent);
}

.track-order__summary {
  max-width: 500px;
  margin: 0 auto;
}

.track-order__timeline {
  display: flex;
  align-items: center;
  margin: var(--spacing-lg) 0;
}

.track-order__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.track-order__step-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-bg);
  border: 2px solid var(--color-text-muted);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.track-order__step.done .track-order__step-dot {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.track-order__step.done span {
  color: var(--color-accent);
  font-weight: 500;
}

.track-order__step-line {
  flex: 1;
  height: 2px;
  background-color: var(--color-text-muted);
  margin: 0 4px;
  margin-bottom: 20px;
  /* margin-bottom aligns the line with the dots above the text labels */
}

.track-order__cancelled {
  color: #ff6b6b;
  font-weight: 500;
  text-align: center;
  margin: var(--spacing-lg) 0;
}

.auth-forgot-link {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: right;
  padding: 4px 0;
  align-self: flex-end;
  /* align-self: flex-end pulls just THIS element to the right edge,
     even though .auth-form's other children stretch full-width */
}

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

#back-to-login-link {
  text-align: center;
  align-self: center;
  margin-top: var(--spacing-sm);
}

.order-confirmation__whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background-color: #25D366;
  color: #ffffff;
  text-decoration: none;
  border-radius: 24px;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.order-confirmation__whatsapp-btn:hover {
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.5);
  transform: translateY(-2px);
}

.order-confirmation__whatsapp-btn:active {
  transform: translateY(0) scale(0.96);
}

.password-field {
  position: relative;
  /* relative positioning lets the toggle button (absolute) sit
     precisely inside the right edge of the input */
}

.password-field input {
  width: 100%;
  padding-right: 40px;
  /* extra right padding stops typed text from running underneath
     the toggle button */
}

.password-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  /* translateY(-50%) is the standard trick for perfectly vertically
     centering an absolutely-positioned element */
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
}

/* ============================================
   ACCOUNT PAGE
   ============================================ */
.account-page__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-xl);
  align-items: start;
}

.order-history__item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
  font-size: 0.9rem;
}

.order-history__id {
  color: var(--color-text);
  font-weight: 500;
}

.order-history__date {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.order-history__status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

.order-history__status--placed {
  background-color: rgba(20, 184, 166, 0.15);
  color: var(--color-accent);
}

.order-history__status--shipped {
  background-color: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.order-history__status--delivered {
  background-color: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.order-history__status--cancelled {
  background-color: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
}

.order-history__total {
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.order-history__track-link {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.85rem;
  white-space: nowrap;
}

.order-history__track-link:hover {
  text-decoration: underline;
}

@media (max-width: 700px) {
  .account-page__grid {
    grid-template-columns: 1fr;
  }

  .order-history__item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "id status"
      "date total"
      "date track";
  }
}

/* ============================================
   ACCOUNT HOVER DROPDOWN
   ============================================ */
.account-dropdown {
  position: relative;
  /* relative positioning lets the dropdown menu (absolute) hang
     precisely below the account icon */
}

.account-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-sm);
  min-width: 180px;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: var(--spacing-sm) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 500;
}

.account-dropdown:hover .account-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  /* visibility (alongside opacity) ensures the invisible menu can't
     be accidentally clicked/tabbed to while hidden */
}

.account-dropdown__menu a,
.account-dropdown__logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  text-decoration: none;
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.account-dropdown__menu a:hover,
.account-dropdown__logout:hover {
  background-color: rgba(20, 184, 166, 0.1);
  color: var(--color-accent);
}

.account-dropdown__logout {
  border-top: 1px solid rgba(20, 184, 166, 0.1);
  margin-top: 4px;
  color: #ff6b6b;
}

.account-dropdown__logout:hover {
  background-color: rgba(255, 107, 107, 0.1);
  color: #ff6b6b;
}

.my-order-card {
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 8px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  max-width: 600px;
}

.my-order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.address-card {
  background-color: var(--color-bg);
  border: 1px solid rgba(20, 184, 166, 0.1);
  border-radius: 6px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  font-size: 0.9rem;
}

.address-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 4px;
}

.address-card__default-badge {
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 10px;
}

.address-card p {
  color: var(--color-text-muted);
  margin: 2px 0;
}

/* ============================================
   SHARE BUTTON & POPUP
   ============================================ */
.product-page__title-actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

.share-popup {
  position: absolute;
  right: 0;
  top: 60px;
  width: 280px;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
  z-index: 600;
  animation: share-popup-in 0.2s ease;
}

@keyframes share-popup-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.share-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  border-bottom: 1px solid rgba(20, 184, 166, 0.1);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.share-popup__header button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.share-popup__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

.share-popup__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s ease;
}

.share-popup__option:hover {
  transform: translateY(-2px);
  color: var(--color-text);
}

.share-popup__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.1rem;
}

@media (max-width: 480px) {
  .share-popup {
    right: -80px;
    /* shifts the popup left on very narrow screens so it doesn't
       overflow off the edge of the viewport */
  }
}

.shop-page {
  padding-top: var(--spacing-xl);
  /* the homepage's version of .products sits right below a hero
     section, so it doesn't need this — but shop.html has just a
     plain navbar above it, so we add breathing room here instead */
}

.brand-x {
  font-weight: 700;
  font-size: 1.35em;
  /* em units scale relative to whatever parent this sits in — so the
     X stays proportionally bold/large whether it's in the small
     footer text or the big auth-card logo, without a separate rule
     for each */
  text-shadow: 0 0 10px var(--color-accent-glow);
  /* the glow reuses the SAME accent color already used for the rest
     of the logo — no new color introduced, exactly as requested */
}

.related-products {
  max-width: 1000px;
  margin: var(--spacing-xl) auto 0;
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(20, 184, 166, 0.1);
}

.related-products .products__grid {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .related-products .products__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   PRODUCT REVIEWS
   ============================================ */
.reviews-section {
  max-width: 700px;
  margin: var(--spacing-xl) auto 0;
  padding-top: var(--spacing-xl);
  border-top: 1px solid rgba(20, 184, 166, 0.1);
}

.reviews-summary {
  color: var(--color-accent);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.reviews-summary strong {
  color: var(--color-text);
}

.reviews-form-wrap {
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.15);
  border-radius: 8px;
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.review-star-picker {
  display: flex;
  gap: 4px;
  margin-bottom: var(--spacing-sm);
}

.review-star-picker__star {
  background: none;
  border: none;
  font-size: 1.6rem;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: transform 0.1s ease;
}

.review-star-picker__star:hover {
  transform: scale(1.15);
}

.review-card {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid rgba(20, 184, 166, 0.08);
}

.review-card:last-child {
  border-bottom: none;
}

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.review-card__stars {
  color: var(--color-accent);
  font-size: 0.9rem;
}

.review-card__date {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-sm);
}

.review-card__text {
  color: var(--color-text);
  line-height: 1.6;
}

/* ============================================
   POLICY / LEGAL PAGES
   (Shipping, Refund, Terms, Privacy, Store Directions)
   ============================================ */
.policy-page {
  max-width: 850px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

.policy-page__updated {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-top: -20px;
  margin-bottom: var(--spacing-lg);
}

.policy-page__intro {
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--spacing-lg);
}

.policy-section {
  margin-bottom: var(--spacing-lg);
}

.policy-section__heading {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-accent);
  margin-bottom: var(--spacing-sm);
}

.policy-section p {
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
}

.policy-section ul {
  color: var(--color-text);
  line-height: 1.7;
  padding-left: 1.2rem;
  margin-bottom: var(--spacing-sm);
}

.policy-section li {
  margin-bottom: 6px;
}

.policy-section a {
  color: var(--color-accent);
}

.policy-contact-box {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-accent);
  border-radius: 8px;
  padding: var(--spacing-md);
  margin-top: var(--spacing-lg);
  text-align: center;
}

.policy-contact-box p {
  margin: 4px 0;
}

/* ============================================
   FAQ / HELP & SUPPORT ACCORDION
   ============================================ */
.faq-list {
  max-width: 850px;
  margin: 0 auto var(--spacing-lg);
}

.faq-category {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-accent);
  margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.faq-item {
  border: 1px solid var(--color-text-muted);
  border-radius: 6px;
  margin-bottom: var(--spacing-sm);
  background-color: var(--color-bg-alt);
  overflow: hidden;
}

.faq-item__question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.faq-item__question::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq-item.is-open .faq-item__question::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 var(--spacing-md);
  color: var(--color-text-muted);
  line-height: 1.6;
  font-size: 0.9rem;
  transition: max-height 0.25s ease, padding 0.25s ease;
}

.faq-item.is-open .faq-item__answer {
  max-height: 500px;
  padding: 0 var(--spacing-md) var(--spacing-md);
}

/* ============================================
   HELP & SUPPORT — quick contact cards
   ============================================ */
.support-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
  max-width: 900px;
  margin: 0 auto var(--spacing-xl);
}

.support-card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-text-muted);
  border-radius: 8px;
  padding: var(--spacing-md);
  text-align: center;
}

.support-card__icon {
  font-size: 1.8rem;
  margin-bottom: var(--spacing-sm);
  display: block;
}

.support-card h3 {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 4px;
}

.support-card p {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-sm);
}

.support-card a.auth-submit {
  display: inline-block;
  text-decoration: none;
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* ============================================
   STORE DIRECTIONS PAGE
   ============================================ */
.store-directions__map {
  width: 100%;
  max-width: 850px;
  margin: 0 auto var(--spacing-lg);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-text-muted);
}

.store-directions__map iframe {
  width: 100%;
  height: 350px;
  border: 0;
  display: block;
}

.store-directions__details {
  max-width: 850px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

/* ============================================
   CUSTOMER REVIEWS / TESTIMONIALS STRIP
   (homepage, sits just above the footer)
   ============================================ */
.testimonials {
  padding: var(--spacing-xl) var(--spacing-lg);
  background-color: var(--color-bg);
}

.testimonials__title {
  text-align: center;
  font-size: 1.8rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.testimonials__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-lg);
}

/* The "window" the cards slide through. overflow: hidden is what hides
   everything that has moved outside this box. */
.testimonials__viewport {
  position: relative;
  overflow: hidden;
  max-width: 1280px;
  margin: 0 auto;
  /* Soft fade on both edges so cards melt away instead of being
     chopped off. mask-image hides the parts of the element where the
     gradient is transparent. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

/* The moving strip. JavaScript changes its translateX every frame. */
.testimonials__track {
  display: flex;
  gap: 24px;
  width: max-content; /* as wide as all the cards together, not just the screen */
  will-change: transform; /* hints the browser to animate this smoothly */
}

/* ---- ONE REVIEW CARD (rectangular) ---- */
.testimonial {
  flex: 0 0 380px;   /* don't grow, don't shrink, stay 380px wide */
  min-height: 210px;
  box-sizing: border-box;
  padding: 24px;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.testimonial:hover {
  border-color: var(--color-accent);
  box-shadow: 0 6px 20px rgba(20, 184, 166, 0.18);
}

.testimonial__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--spacing-md);
}

.testimonial__avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.testimonial__person {
  flex: 1;          /* takes all leftover space, pushing the G logo right */
  min-width: 0;     /* lets long names shrink instead of overflowing */
}

.testimonial__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.testimonial__date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.testimonial__google {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.testimonial__rating {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 10px;
}

.testimonial__star {
  color: #d5dbe1;    /* empty star */
  font-size: 1.15rem;
  line-height: 1;
}

.testimonial__star.is-filled {
  color: #fbbc05;    /* Google's review yellow */
}

.testimonial__verified {
  width: 17px;
  height: 17px;
  margin-left: 6px;
  fill: #1a73e8;
}

.testimonial__verified-tick {
  fill: #ffffff;
}

.testimonial__text {
  color: var(--color-text);
  line-height: 1.6;
  margin: 0;
}

/* ---- ARROW BUTTONS ---- */
.testimonials__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.testimonials__arrow:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

.testimonials__arrow--prev { left: 4px; }
.testimonials__arrow--next { right: 4px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 600px) {
  .testimonial {
    flex-basis: 280px;
    padding: 18px;
  }

  .testimonials {
    padding: var(--spacing-lg) var(--spacing-md);
  }
}

/* ============================================
   MINI HEADER — the minimized header that slides in on scroll
   Markup is built by js/sticky-header.js, so there is no copy of
   this in any page's HTML.
   ============================================ */
.mini-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid rgba(20, 184, 166, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);

  /* Parked just above the viewport until we need it — translating
     (rather than toggling display) is what makes it slide */
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  will-change: transform;
}

.mini-header--visible {
  transform: translateY(0);
}

.mini-header__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: 10px var(--spacing-lg);
  max-width: 1600px;
  margin: 0 auto;
}

/* ---- LOGO (left) ---- */
.mini-header__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}

.mini-header__logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

/* ---- SEARCH (middle) ---- */
.mini-header__search {
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 620px;
  margin: 0 auto;
}

.mini-header__search input {
  flex: 1;
  padding: 7px var(--spacing-md);
  background-color: var(--color-bg);
  border: 1px solid var(--color-text-muted);
  border-right: none;
  border-radius: 20px 0 0 20px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.mini-header__search input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.mini-header__search button {
  padding: 7px var(--spacing-md);
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  font-size: 0.9rem;
}

/* ---- FREE DELIVERY + CART (right) ---- */
.mini-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  white-space: nowrap;
}

.mini-header__delivery {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 4px 14px;
  border: 1px solid var(--color-text-muted);
  border-radius: 24px;
  line-height: 1.15;
}

.mini-header__delivery-label {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.mini-header__delivery-amount {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
}

.mini-header__delivery--unlocked {
  border-color: var(--color-accent);
}

.mini-header__cart {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  color: var(--color-text);
}

.mini-header__cart-icon {
  position: relative;
  font-size: 1.3rem;
  padding-right: 6px;
  /* the .navbar__cart-count badge inside is positioned against this,
     and reuses the navbar's badge styling so both stay identical */
}

.mini-header__cart-total {
  font-size: 0.95rem;
  font-weight: 600;
}

.mini-header__search-toggle {
  display: none;
  /* shown only ≤600px — see that media query, which also styles it */
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .mini-header__inner {
    gap: var(--spacing-md);
    padding: 8px var(--spacing-md);
  }

  /* On narrow screens the free-delivery meter is the first thing to
     go — logo, search and cart matter more */
  .mini-header__delivery {
    display: none;
  }
}

@media (max-width: 600px) {
  /* ---- SEARCH TOGGLE + ROW-BELOW ----
     The inline search bar is hidden entirely at this width. In its
     place, a plain icon button sits just left of the cart; tapping it
     opens the actual search form as a full-width second row directly
     under the header (rather than expanding in place), and swaps the
     icon to ✕ to close it. Everything else in the header — logo,
     menu, cart — stays visible the whole time. */
  .mini-header__inner {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    /* smaller base gap so the search icon, cart and price sit close
       together — the space instead collects before them, via the
       margin-left: auto below */
  }

  .mini-header__search-toggle {
    margin-left: auto;
    /* pushes itself and everything after it (the cart) flush to the
       right edge, grouped tightly together, while the logo stays put
       on the left */
  }

  .mini-header__search {
    display: none;
    order: 5;
    flex-basis: 100%;
    max-width: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(20, 184, 166, 0.15);
  }

  .mini-header--search-active .mini-header__search {
    display: flex;
    /* the wrapping .mini-header__inner puts this on its own line
       once it claims the full row width above */
  }

  .mini-header__search input {
    background: none;
    border: none;
    border-radius: 0;
    padding: 6px 0;
    font-size: 1rem;
  }

  .mini-header__search input:focus {
    border: none;
  }

  .mini-header__search button {
    background: none;
    border: none;
    border-radius: 0;
    color: var(--color-text);
    font-size: 1.2rem;
    padding: 6px 0 6px var(--spacing-sm);
  }

  .mini-header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.3rem;
    cursor: pointer;
  }
}



/* ---- MOBILE MENU BUTTON ----
   Base styling lives here, BEFORE the media query below — display is
   set inside that @media block instead, so its display:flex is the
   last word in the cascade at narrow widths rather than being
   clobbered by a same-specificity rule defined later in the file. */
.mini-header__menu-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 1.3rem;
  cursor: pointer;
}

/* ============================================
   MINI HEADER — tablet & phone
   On anything tablet-sized or smaller the full two-row navbar is
   dropped entirely and the minimized header is the ONLY header:
   pinned to the top from the moment the page loads, rather than
   waiting for a scroll.
   ============================================ */
@media (max-width: 1024px) {
  .navbar,
  .info-bar {
    display: none;
    /* on tablet/phone the mini header (built by js/sticky-header.js)
       is the whole header — the full navbar AND the info-bar strip
       above it both disappear rather than just the navbar */
  }

  body.has-mini-header {
    padding-top: 58px;
    /* the mini header is fixed, so it sits outside the normal flow —
       this reserves the space it occupies so the info bar and page
       content don't start underneath it */
  }

  .mini-header {
    transform: translateY(0);
    /* always shown here, so the slide-in/slide-out is switched off
       and the .mini-header--visible class becomes a no-op */
  }

  .mini-header__inner {
    gap: var(--spacing-sm);
    padding: 8px var(--spacing-md);
  }

  /* The ☰ button only exists on these screens — it's what replaces
     the hidden navbar's category button and nav links */
  .mini-header__menu-btn {
    display: flex;
  }
}

/* ---- MOBILE MENU BUTTON + DROPDOWN ---- */
.mini-header__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: var(--spacing-md);
  right: var(--spacing-md);
  max-width: 320px;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  background-color: var(--color-bg-alt);
  border: 1px solid rgba(20, 184, 166, 0.25);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.mini-header__menu--open {
  display: block;
}

.mini-header__menu-links {
  border-top: 6px solid var(--color-bg);
  /* thick divider separates account/order links from the category
     list above, so the two groups read as distinct sections */
}

.mini-header__menu a,
.mini-header__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px var(--spacing-md);
  background: none;
  border: none;
  border-bottom: 1px solid rgba(20, 184, 166, 0.12);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
}

.mini-header__menu-categories a:last-child,
.mini-header__menu-links a:last-child {
  border-bottom: none;
}

.mini-header__menu a:hover,
.mini-header__menu button:hover {
  background-color: var(--color-bg);
  color: var(--color-accent);
}