/* ============================================================
   Avipyour Organics — Luxury Mobile-First Theme
   Mirrors the Lovable React preview design system 1:1
   ============================================================ */

/* ---------- Fonts ---------- */
/* (Loaded via wp_head from functions.php as well) */

/* ---------- Design Tokens ---------- */
:root {
  --forest:        #1E4D3A;
  --forest-deep:   #143524;
  --beige:         #F5E6D3;
  --beige-soft:    #FAF3E7;
  --earth:         #7A5230;
  --gold:          #D4AF37;
  --gold-soft:     #E8C76A;

  --bg:            #FBF7EE;
  --fg:            #1A2A22;
  --card:          #FFFFFF;
  --muted:         #F2EBDC;
  --muted-fg:      #6B7A6F;
  --border:        #E8DFC9;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 34px;

  --shadow-soft:  0 4px 24px -8px rgba(30,77,58,.12);
  --shadow-card:  0 10px 32px -12px rgba(122,82,48,.20);
  --shadow-float: 0 18px 50px -10px rgba(30,77,58,.32);

  --gradient-hero:   linear-gradient(180deg, transparent 0%, rgba(20,53,36,.20) 35%, rgba(20,53,36,.92) 100%);
  --gradient-gold:   linear-gradient(135deg, #E8C76A 0%, #C9882D 100%);
  --gradient-forest: linear-gradient(135deg, var(--forest) 0%, var(--forest-deep) 100%);
  --glass-bg:        rgba(255,255,255,.65);
  --glass-dark-bg:   rgba(20,53,36,.55);

  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;

  --container: 1240px;
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0 0 .5em;
  color: var(--forest-deep);
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 18px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }

.screen-reader-text { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 9999; background: var(--forest); color: #fff; padding: 8px 14px; border-radius: 12px; }

/* ---------- Utility ---------- */
.glass { background: var(--glass-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.glass-dark { background: var(--glass-dark-bg); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); color: #fff; }
.text-gradient-gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Promo bar ---------- */
.promo-bar {
  background: var(--gold);
  color: var(--forest-deep);
  font-size: 12px; font-weight: 500; letter-spacing: .02em;
  text-align: center; padding: 8px 14px;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
  background: transparent;
}
.site-header.is-scrolled { background: var(--glass-bg); backdrop-filter: saturate(180%) blur(20px); box-shadow: var(--shadow-soft); }
body.has-promo .site-header { top: 32px; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 12px;
}
@media (min-width: 1024px) { .header-inner { height: 80px; } }

.site-branding .site-title,
.site-branding .custom-logo-link {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  color: var(--forest);
  display: inline-flex; align-items: center; gap: 8px;
}
.site-header:not(.is-scrolled) .site-branding .site-title { color: #fff; }
.custom-logo { max-height: 40px; width: auto; }

.menu-toggle {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--forest);
}
.site-header:not(.is-scrolled) .menu-toggle { color: #fff; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: currentColor; margin: 3px 0; border-radius: 2px; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }

.main-nav { display: none; }
@media (min-width: 1024px) {
  .main-nav { display: block; }
  .main-nav ul { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; }
  .main-nav a {
    font-size: 14px; font-weight: 500; letter-spacing: .02em;
    color: rgba(255,255,255,.92);
    transition: opacity .2s;
  }
  .site-header.is-scrolled .main-nav a { color: var(--forest-deep); }
  .main-nav a:hover { opacity: .75; }
}

.header-actions { display: flex; align-items: center; gap: 4px; }
.header-actions button, .header-actions .header-cart {
  width: 40px; height: 40px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; position: relative;
}
.site-header.is-scrolled .header-actions button,
.site-header.is-scrolled .header-actions .header-cart { color: var(--forest); }
.header-actions button:hover, .header-actions .header-cart:hover { background: rgba(255,255,255,.1); }
.site-header.is-scrolled .header-actions button:hover,
.site-header.is-scrolled .header-actions .header-cart:hover { background: var(--muted); }

.cart-bubble {
  position: absolute; top: 4px; right: 4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--gold); color: var(--forest-deep);
  border-radius: 999px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

.header-search-panel {
  padding: 14px 0;
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border);
}
.header-search-panel form { display: flex; align-items: center; gap: 8px; }
.header-search-panel input[type="search"],
.header-search-panel input[type="text"] {
  flex: 1; height: 44px; border-radius: 999px; border: 0;
  background: var(--muted); padding: 0 18px; outline: none;
}

/* ---------- Mobile slide-out menu (JS toggles .is-open on body) ---------- */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 60;
  visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s;
}
body.menu-open .mobile-drawer { visibility: visible; opacity: 1; transition-delay: 0s; }
.mobile-drawer-backdrop { position: absolute; inset: 0; background: rgba(20,53,36,.6); backdrop-filter: blur(4px); }
.mobile-drawer-panel {
  position: absolute; top: 0; left: 0; bottom: 0; width: 82%; max-width: 360px;
  background: var(--bg); box-shadow: var(--shadow-float);
  transform: translateX(-100%); transition: transform .3s ease;
  display: flex; flex-direction: column;
}
body.menu-open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--forest);
}
.mobile-drawer-close { width: 40px; height: 40px; border-radius: 999px; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.mobile-drawer nav { padding: 14px; flex: 1; overflow-y: auto; }
.mobile-drawer nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mobile-drawer nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-radius: 18px; font-size: 15px; font-weight: 500;
}
.mobile-drawer nav a:active { background: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 28px; border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: .01em;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--forest); color: #fff; box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--forest-deep); }
.btn-light { background: #fff; color: var(--forest-deep); box-shadow: var(--shadow-card); }
.btn-gold { background: var(--gradient-gold); color: var(--forest-deep); box-shadow: var(--shadow-card); }
.btn-ghost { background: transparent; color: var(--forest); border: 1px solid var(--border); }
.btn-block { width: 100%; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  color: #fff;
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--gradient-hero);
}
.hero-inner {
  position: relative; z-index: 2;
  padding: 140px 0 64px;
  max-width: var(--container); margin: 0 auto;
  width: 100%; padding-left: 22px; padding-right: 22px;
}
@media (min-width: 768px) { .hero-inner { padding: 180px 32px 100px; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--glass-dark-bg); backdrop-filter: blur(20px);
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  margin-bottom: 18px;
}
.hero-eyebrow svg { color: var(--gold); }

.hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 7.5vw, 76px); line-height: 1.02;
  letter-spacing: -.025em; color: #fff; margin: 0;
  max-width: 720px;
}
.hero-title .accent {
  display: block; font-style: italic; font-weight: 400;
  background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
  margin-top: 18px; color: rgba(255,255,255,.85);
  font-size: 15px; max-width: 460px;
}
@media (min-width: 768px) { .hero-sub { font-size: 18px; max-width: 560px; } }

.hero-cta { margin-top: 28px; display: flex; gap: 12px; max-width: 420px; }
.hero-cta .btn-primary { flex: 1; height: 56px; background: #fff; color: var(--forest-deep); }
.hero-cta .btn-icon {
  width: 56px; height: 56px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glass-dark-bg); color: #fff;
}

.hero-trust {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 22px;
  font-size: 11px; color: rgba(255,255,255,.78);
}
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--card);
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--muted-fg); font-weight: 500;
}
.trust-item .ico {
  width: 38px; height: 38px; border-radius: 12px;
  background: var(--beige-soft); color: var(--forest);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.trust-item b { color: var(--forest-deep); font-weight: 600; display: block; font-size: 13px; }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
@media (min-width: 768px) { .section { padding: 88px 0; } }
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  margin-bottom: 28px; gap: 16px;
}
.section-eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--earth); font-weight: 600;
}
.section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 4.5vw, 44px); line-height: 1.05;
  color: var(--forest-deep); margin: 6px 0 0;
}
.section-title .accent { font-style: italic; color: var(--earth); }
.section-link {
  font-size: 13px; font-weight: 600; color: var(--forest);
  display: inline-flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

/* ---------- Product cards (matches React ProductCard) ---------- */
.product-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .product-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

.product-slider {
  display: grid; grid-auto-flow: column; grid-auto-columns: 70%;
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 18px 18px; margin: 0 -18px;
  scrollbar-width: none;
}
.product-slider::-webkit-scrollbar { display: none; }
.product-slider > * { scroll-snap-align: start; }
@media (min-width: 768px) {
  .product-slider { grid-auto-columns: 40%; padding: 4px 32px 22px; margin: 0 -32px; }
}
@media (min-width: 1024px) { .product-slider { grid-auto-columns: 28%; } }

.product-card {
  background: var(--card); border-radius: var(--radius-2xl);
  border: 1px solid rgba(232,223,201,.6);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.product-card .pc-media {
  position: relative; aspect-ratio: 1/1; background: var(--muted);
  display: block; overflow: hidden;
}
.product-card .pc-media img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .5s;
}
.product-card:hover .pc-media img { transform: scale(1.04); }
.product-card .pc-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--forest); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.product-card .pc-wish {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px; border-radius: 999px;
  background: var(--glass-bg); backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--forest);
}
.product-card .pc-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card .pc-title {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--forest-deep); line-height: 1.25; margin: 0;
}
.product-card .pc-sub {
  font-size: 12px; color: var(--muted-fg); margin: 4px 0 0;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card .pc-rating {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  font-size: 12px;
}
.product-card .pc-rating .star { color: var(--gold); fill: var(--gold); }
.product-card .pc-rating em { font-style: normal; color: var(--muted-fg); font-size: 11px; }
.product-card .pc-foot {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
}
.product-card .pc-price { font-size: 16px; font-weight: 700; color: var(--forest); }
.product-card .pc-mrp { display: block; font-size: 11px; color: var(--muted-fg); text-decoration: line-through; }
.product-card .pc-add {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--forest); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s;
  flex-shrink: 0;
}
.product-card .pc-add:hover { background: var(--forest-deep); }
.product-card .pc-add:active { transform: scale(.9); }

/* ---------- Categories ---------- */
.cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(6, 1fr); gap: 18px; } }
.cat-tile {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 18px 10px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: var(--gold-soft); }
.cat-tile .cat-ico {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, var(--beige-soft), var(--beige));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
}
@media (min-width: 768px) { .cat-tile .cat-ico { width: 72px; height: 72px; font-size: 32px; } }
.cat-tile .cat-name { font-size: 12px; font-weight: 600; color: var(--forest-deep); }

/* ---------- Benefits ---------- */
.benefits {
  background: linear-gradient(180deg, var(--beige-soft) 0%, var(--bg) 100%);
}
.benefits-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 768px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1024px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } }
.benefit-card {
  background: var(--card); border-radius: var(--radius-xl);
  padding: 22px 20px; box-shadow: var(--shadow-soft);
  border: 1px solid rgba(232,223,201,.6);
}
.benefit-card .ico {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--gradient-forest); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.benefit-card h4 { font-size: 17px; color: var(--forest-deep); margin: 0 0 6px; }
.benefit-card p { font-size: 13px; color: var(--muted-fg); margin: 0; line-height: 1.55; }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--forest); color: #fff; }
.testimonials .section-title, .testimonials .section-eyebrow { color: #fff; }
.testimonials .section-eyebrow { color: var(--gold-soft); }
.testi-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 768px) { .testi-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.testi-card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-xl); padding: 22px 20px;
}
.testi-card .stars { color: var(--gold); margin-bottom: 10px; letter-spacing: 2px; }
.testi-card p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.92); margin: 0 0 14px; }
.testi-card .who { font-size: 12px; color: rgba(255,255,255,.7); }
.testi-card .who b { color: #fff; font-weight: 600; }

/* ---------- Newsletter ---------- */
.newsletter {
  background: linear-gradient(135deg, var(--beige) 0%, var(--beige-soft) 100%);
  border-top: 1px solid var(--border);
}
.newsletter-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.newsletter h3 { font-size: clamp(26px, 4vw, 36px); color: var(--forest-deep); }
.newsletter p { color: var(--muted-fg); margin: 0 0 22px; }
.newsletter form { display: flex; gap: 8px; background: #fff; padding: 6px; border-radius: 999px; box-shadow: var(--shadow-soft); }
.newsletter input { flex: 1; height: 48px; border: 0; outline: none; padding: 0 18px; background: transparent; }
.newsletter button { height: 48px; padding: 0 24px; border-radius: 999px; background: var(--forest); color: #fff; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-deep); color: rgba(255,255,255,.82); margin-top: 0; padding: 56px 0 0; }
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 36px;
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } }
.footer-brand h3, .footer-widget-title, .footer-col h4 {
  color: #fff; font-family: var(--font-display); font-size: 18px; margin: 0 0 14px;
}
.footer-brand p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.75); max-width: 320px; }
.footer-col ul, .widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-col a:hover, .widget a:hover { color: var(--gold); }
.footer-contact p { font-size: 13px; margin: 0 0 8px; color: rgba(255,255,255,.78); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.footer-social a:hover { background: var(--gold); color: var(--forest-deep); }
.footer-bottom {
  margin-top: 48px; padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.footer-bottom-inner {
  display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,.6); text-align: center;
}
@media (min-width: 768px) { .footer-bottom-inner { flex-direction: row; text-align: left; } }
.footer-bottom a:hover { color: var(--gold); }

/* ---------- Mobile bottom nav ---------- */
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--glass-bg); backdrop-filter: saturate(180%) blur(24px);
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(env(safe-area-inset-bottom) + 4px);
}
.mobile-bottom-nav .mbn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 4px;
  font-size: 10px; font-weight: 600; color: var(--forest-deep);
  position: relative;
}
.mobile-bottom-nav .mbn-item span:first-child { font-size: 18px; line-height: 1; }
.mobile-bottom-nav .cart-bubble {
  position: absolute; top: 0; right: calc(50% - 22px);
}
@media (min-width: 768px) { .mobile-bottom-nav { display: none; } }
@media (min-width: 768px) { body { padding-bottom: 0 !important; } }
body { padding-bottom: 78px; }

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab {
  position: fixed; right: 14px; bottom: 92px; z-index: 46;
  width: 56px; height: 56px; border-radius: 999px;
  background: #25D366; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 30px -8px rgba(37,211,102,.55);
}
@media (min-width: 768px) { .whatsapp-fab { bottom: 24px; right: 24px; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs-bar { background: var(--muted); padding: 10px 0; font-size: 12px; color: var(--muted-fg); margin-top: 60px; }
@media (min-width: 1024px) { .breadcrumbs-bar { margin-top: 80px; } }
.breadcrumbs-bar a:hover { color: var(--forest); }

/* ============================================================
   WooCommerce overrides — single product, shop, cart, checkout
   ============================================================ */

.woocommerce-page main.woo-main, .woocommerce main.woo-main { padding-top: 24px; padding-bottom: 56px; }
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none; padding: 0; margin: 0;
  display: grid !important; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1100px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.products li.product {
  width: 100% !important; margin: 0 !important; padding: 0 !important; float: none !important;
  background: var(--card); border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card); overflow: hidden;
  border: 1px solid rgba(232,223,201,.6);
  display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; }
.woocommerce ul.products li.product img {
  width: 100% !important; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 0 !important; margin: 0 !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important; font-size: 15px !important; font-weight: 600 !important;
  color: var(--forest-deep) !important;
  padding: 12px 14px 4px !important; margin: 0 !important;
}
.woocommerce ul.products li.product .price {
  padding: 0 14px; color: var(--forest) !important; font-weight: 700 !important; font-size: 16px !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--muted-fg) !important; opacity: .7; font-weight: 400; font-size: 12px; display: inline-block; margin-right: 6px;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
  margin: 12px 14px 16px !important; background: var(--forest) !important; color: #fff !important;
  border-radius: 999px !important; padding: 10px 18px !important; font-size: 13px !important; font-weight: 600 !important;
  text-align: center; display: inline-block;
}
.woocommerce ul.products li.product .button:hover { background: var(--forest-deep) !important; }

.woocommerce span.onsale {
  background: var(--gold) !important; color: var(--forest-deep) !important;
  border-radius: 999px !important; min-width: auto !important; min-height: auto !important;
  padding: 4px 10px !important; line-height: 1 !important; font-size: 10px !important; font-weight: 700 !important;
  top: 10px !important; left: 10px !important; right: auto !important;
}

/* Single product */
.woocommerce div.product div.images img { border-radius: var(--radius-xl); box-shadow: var(--shadow-card); }
.woocommerce div.product .product_title {
  font-family: var(--font-display); font-weight: 500; color: var(--forest-deep);
  font-size: clamp(28px, 4vw, 40px) !important; line-height: 1.1;
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--forest) !important; font-size: 24px !important; font-weight: 700;
}
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button {
  background: var(--forest) !important; color: #fff !important;
  border-radius: 999px !important; padding: 14px 28px !important;
  font-weight: 600 !important; box-shadow: var(--shadow-card);
}
.woocommerce .single_add_to_cart_button:hover { background: var(--forest-deep) !important; }
.woocommerce .quantity .qty {
  height: 50px; border-radius: 999px !important; border: 1px solid var(--border) !important;
  background: var(--card); padding: 0 14px !important;
}

/* Cart & checkout */
.woocommerce-cart table.cart, .woocommerce-cart .cart-collaterals,
.woocommerce-checkout form.checkout, .woocommerce form.woocommerce-form {
  background: var(--card); border-radius: var(--radius-xl); padding: 18px;
  box-shadow: var(--shadow-soft); border: 1px solid var(--border);
}
.woocommerce-checkout #order_review { margin-top: 18px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text {
  border-radius: 14px !important; border: 1px solid var(--border) !important;
  padding: 12px 14px !important; height: auto !important;
  background: var(--bg); transition: border-color .2s;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--forest) !important; outline: none; }
.woocommerce-info, .woocommerce-message, .woocommerce-error {
  border-radius: 14px !important; border-top-color: var(--gold) !important;
  background: var(--beige-soft) !important; color: var(--forest-deep) !important;
}

.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  background: var(--card); border-radius: 999px !important; padding: 8px 14px !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--forest) !important; color: #fff !important; }

/* Page title bar for shop */
.woocommerce-products-header__title.page-title {
  font-family: var(--font-display); color: var(--forest-deep);
  font-size: clamp(28px, 4vw, 40px) !important; margin-bottom: 18px;
}
.woocommerce-result-count { color: var(--muted-fg); font-size: 13px; }
.woocommerce .woocommerce-ordering select {
  border-radius: 999px; padding: 8px 14px; border: 1px solid var(--border); background: var(--card);
}

/* Elementor compatibility — preserve container width */
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--container); }

/* ---------- Lifestyle Gallery ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(6, 1fr); gap: 8px; } }
.gallery-grid a { display: block; aspect-ratio: 1/1; overflow: hidden; position: relative; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery-grid a:hover img { transform: scale(1.06); }

/* ---------- Animations ---------- */
@keyframes float-soft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
.animate-float { animation: float-soft 4s ease-in-out infinite; }
@keyframes fade-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fade-up .6s ease-out both; }

/* Hide outdated default WC quick-bar bits we replace */
.woocommerce .woocommerce-breadcrumb { display: none; }