/* ============================================================
   UI tweaks (2026-08-16)
   - Back-to-top button
   - Tighter header spacing on desktop
   ============================================================ */

/* ---- Back to top ---- */
.back-to-top {
  position: fixed;
  right: 28px;               /* aligned with the WhatsApp FAB */
  bottom: 98px;              /* clears the 54px WhatsApp button (bottom:28) with a gap */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--transition);
  z-index: 1200;
}
.back-to-top:hover { background: var(--primary-dark); }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top i, .back-to-top svg { width: 20px; height: 20px; }
/* Mobile: WhatsApp FAB is 48px at bottom:16px/right:16px (top edge ~64px) — stack
   the back-to-top well clear of it (≈32px gap) so they never read as touching. */
@media (max-width: 768px) {
  .back-to-top { right: 16px; bottom: 96px; width: 44px; height: 44px; }
  .back-to-top i, .back-to-top svg { width: 18px; height: 18px; }
}
/* Mobile mega-menu category headings are links — keep the theme colour. */
.mega-col h4 a { color: inherit; }

/* ---- Tighter header spacing (desktop only) ----
   The logo's real left space is the centered container's side margin (~98px on a
   1440 screen). Reducing that by ~75% means letting the header row span full
   width with a small 24px gutter, so the logo sits further left and the action
   icons sit further right. Only the header row is affected — nav/content below
   keep their centered layout. */
@media (min-width: 993px) {
  .header .container {
    max-width: none;
    padding-left: 56px;
    padding-right: 56px;
  }
}

/* ============================================================
   UI tweaks (2026-08-16, batch 2)
   ============================================================ */

/* ---- Best Seller tag in theme colour (was charcoal) ---- */
.badge-bestseller { background: var(--primary); color: var(--white); }

/* ---- Top announcement bar: static, centered (no scrolling loop) ---- */
.announcement-bar { overflow: hidden; }
.marquee { display: block; overflow: hidden; width: 100%; }
.marquee-track {
  display: inline-block; white-space: nowrap; padding: 8px 0;
  animation: marquee-scroll 24s linear infinite; will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.3px; padding: 0 16px; }
.marquee-sep { opacity: 0.5; font-size: 0.6rem; }
/* Start fully off the right, end fully off the left — the bar clears completely
   between cycles before the messages re-enter from the right. */
@keyframes marquee-scroll { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---- Footer logo on a white circle (footer background is dark) ---- */
.footer-brand .logo-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--white);
  padding: 12px;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.footer-brand .logo-area .footer-logo {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  margin-bottom: 0;
}

/* ---- "Limited time offer" strip: centre the content + CTA ---- */
.offer-strip-inner {
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* ---- Header action icons in the theme colour ---- */
.header .header-btn .icon { color: var(--primary); }

/* ---- Footer: real brand logos for social + payments ---- */
.social-fb:hover { color: #1877f2; }
.social-in:hover { color: #0a66c2; }
.social-x:hover  { color: #ffffff; }
.social-yt:hover { color: #ff0000; }
.footer .payment-icons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.footer .payment-icon {
  background: #fff; border-radius: 5px; padding: 4px 8px; height: 26px;
  display: inline-flex; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.footer .payment-icon svg { display: block; }
.footer .payment-icon.payment-text { color: #333; font-size: 12px; font-weight: 600; }

/* ============================================================
   Global spacing scale + even section rhythm (2026-08-16, batch 3)
   Home page first — a consistent vertical rhythm so the gaps between
   sections / headings / CTAs are symmetric (they previously mixed
   .section = 4px with .section-sm = 48px, plus one-off inline margins).
   ============================================================ */
:root {
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --section-y: 56px; /* consistent top/bottom padding for content sections */
}

.page-home .section,
.page-home .section-sm { padding: var(--section-y) 0; }

/* Centred "view all / shop more" CTA under a section's content row */
.section-cta { text-align: center; margin-top: 32px; }

@media (max-width: 768px) {
  :root { --section-y: 36px; }
}

/* ============================================================
   Header menu + search overlay + delivery truck (2026-08-16, batch 4)
   ============================================================ */

/* Header primary menu (between logo and action icons) — desktop only */
.header-nav { display: none; }
@media (min-width: 993px) {
  .header-nav { display: flex; align-items: center; gap: 24px; margin: 0 26px 0 auto; }  /* pushed right, next to the icons */
  .header .header-actions { margin-left: 0; gap: 4px; }
  .nav-menu { display: none !important; }        /* replaced by header-nav on desktop */
  .header .mobile-menu-btn { display: none !important; }
}
.header-nav-link {
  font-size: 0.9rem; font-weight: 600; color: var(--dark); letter-spacing: 0.2px;
  white-space: nowrap; padding: 8px 0; transition: var(--transition); display: inline-flex; align-items: center; gap: 4px;
}
.header-nav-link:hover { color: var(--primary); }
.header-nav-item { position: relative; }
.hn-arrow { font-size: 0.68rem; }

/* Products flyout (categories → subcategories) */
.products-flyout {
  position: absolute; top: 100%; left: 0; z-index: 1100; background: var(--white);
  box-shadow: var(--shadow-lg); border-radius: var(--radius-md); padding: 8px 0; width: 320px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition);
}
.header-nav-item:hover > .products-flyout { opacity: 1; visibility: visible; transform: translateY(0); }
/* No overflow here: an overflow context clips the right-opening .pf-subs sub-flyout. */
.pf-cats { display: flex; flex-direction: column; }
.pf-cat { position: relative; }
.pf-cat > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; font-size: 0.9rem; color: var(--dark); white-space: nowrap; }
.pf-cat > a:hover { background: var(--primary-light); color: var(--primary); }
.pf-caret { color: var(--light); font-size: 1rem; }
.pf-subs {
  position: absolute; top: -8px; left: 100%; background: var(--white); box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md); padding: 8px 0; min-width: 210px;
  opacity: 0; visibility: hidden; transform: translateX(6px); transition: var(--transition);
}
.pf-cat:hover > .pf-subs { opacity: 1; visibility: visible; transform: translateX(0); }
.pf-subs li a { display: block; padding: 8px 18px; font-size: 0.88rem; color: var(--dark); }
.pf-subs li a:hover { background: var(--primary-light); color: var(--primary); }

/* ---- Product card excerpt (2 lines, keeps card heights even) ---- */
.card-excerpt {
  margin: 4px 0 2px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--medium, #6b6b6b);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3em;
}
.card-readmore {
  display: inline-block;
  margin: 0 0 4px;
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}
.card-readmore:hover { text-decoration: underline; }

/* ---- Cart item title links back to the product page ---- */
.cart-item-name-link { text-decoration: none; color: inherit; display: inline-block; }
.cart-item-name-link:hover .cart-item-name { color: var(--primary); }

/* ---- Instagram live video feed ---- */
.insta-video-item { position: relative; overflow: hidden; }
.insta-video-item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* Search icon button + overlay */
.header-search-btn .icon { color: var(--primary); }
.header-search-overlay {
  position: fixed; inset: 0; z-index: 1500; background: rgba(42, 34, 38, 0.5);
  display: flex; align-items: flex-start; justify-content: center; padding: 14vh 16px 0;
}
.header-search-overlay[hidden] { display: none; }
.header-search-box {
  background: var(--white); border-radius: var(--radius-full); display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 20px; width: min(620px, 94vw); box-shadow: var(--shadow-lg);
}
.header-search-box > i, .header-search-box > svg { color: var(--light); width: 20px; height: 20px; flex-shrink: 0; }
.header-search-box input { flex: 1; border: none; font-size: 1rem; padding: 9px 0; background: transparent; }
.header-search-box input:focus { outline: none; }
.header-search-go { background: var(--primary); color: #fff; border: none; border-radius: var(--radius-full); padding: 10px 22px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.header-search-go:hover { background: var(--primary-dark); }
.header-search-close { background: transparent; border: none; font-size: 1.6rem; line-height: 1; color: var(--light); cursor: pointer; padding: 0 6px; }
.header-search-close:hover { color: var(--primary); }
body.search-open { overflow: hidden; }

/* Same-day delivery running truck (bottom-left) */
.delivery-truck { position: fixed; left: 16px; bottom: 16px; z-index: 1150; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; pointer-events: none; }
.delivery-truck-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary); background: var(--white); padding: 3px 9px; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); margin-left: 6px; }
.delivery-truck-road { width: 118px; height: 60px; overflow: visible; }
.delivery-truck-move { animation: truck-drive 1.6s ease-in-out infinite; transform-origin: center bottom; }
.delivery-truck-svg { width: 110px; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.18)); }
.dt-wheel { transform-box: fill-box; transform-origin: center; animation: wheel-spin 0.7s linear infinite; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }
@keyframes truck-drive { 0%,100% { transform: translateX(-4px) translateY(0); } 25% { transform: translateX(0) translateY(-1.5px); } 50% { transform: translateX(4px) translateY(0); } 75% { transform: translateX(0) translateY(-1.5px); } }
@media (max-width: 768px) { .delivery-truck { transform: scale(0.78); transform-origin: left bottom; left: 8px; bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { .delivery-truck-move, .dt-wheel { animation: none; } }

/* ============================================================
   Palette refresh (2026-08-21): soft-pink primary (#F5B9B2) + gold (#D3B565).
   The pink is light, so: solid primary fills use DARK text (white fails on it),
   and primary used as text/icon on white switches to the deeper rose
   (--primary-dark) so it stays legible.
   ============================================================ */
/* Solid primary fills → dark text */
.btn-primary,
.add-btn,
.header-search-go,
.card-weight-option.active,
.badge-primary,
.badge-bestseller,
.badge-accent,
.pickup-free-badge,
.offer-strip .btn { color: var(--dark) !important; }
/* Hover deepens to rose with white text */
.btn-primary:hover,
.add-btn:hover,
.header-search-go:hover { background: var(--primary-dark) !important; color: var(--white) !important; }
/* Back-to-top: pink circle, dark arrow */
.back-to-top { background: var(--primary); }
.back-to-top:hover { background: var(--primary-dark); }
.back-to-top i, .back-to-top svg { color: var(--dark); }
.back-to-top:hover i, .back-to-top:hover svg { color: var(--white); }
/* Primary used as TEXT / ICON on light backgrounds → readable deep rose */
.price,
.card-price,
.price-big,
.product-card .price,
.cart-item-price,
.product-name a,
.header-nav-link,
.header-nav-link:hover,
.header .header-btn .icon,
.header-search-btn .icon,
.breadcrumb a:hover,
.footer a:hover,
.btn-secondary,
.pf-cat > a:hover,
.pf-subs li a:hover,
.card-readmore,
.social-in:hover { color: var(--primary-dark) !important; }
.btn-secondary:hover { color: var(--white) !important; background: var(--primary-dark) !important; border-color: var(--primary-dark) !important; }