/*
Theme Name: A1 Makhana
Theme URI: https://example.com/a1-makhana
Author: A1 Makhana
Author URI: https://example.com
Description: A clean, conversion-focused WooCommerce theme built for A1 Makhana — a healthy roasted fox-nut (makhana) snack brand. Includes a full homepage layout, WooCommerce shop/product/cart/checkout styling, testimonials, FAQ and a demo-content installer for 5 starter products.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
WC requires at least: 6.0
WC tested up to: 9.0
Text Domain: a1-makhana
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root {
  --a1-dark: #24301f;
  --a1-dark-2: #2f3d27;
  --a1-cream: #fbf6ea;
  --a1-cream-2: #f3ead4;
  --a1-gold: #c98f1f;
  --a1-gold-dark: #a5730f;
  --a1-green: #5c8a3a;
  --a1-text: #2b2b26;
  --a1-text-light: #6b6a5f;
  --a1-white: #ffffff;
  --a1-border: #e7ddc4;
  --a1-radius: 14px;
  --a1-radius-sm: 8px;
  --a1-shadow: 0 10px 30px rgba(36, 48, 31, 0.08);
  --a1-shadow-lg: 0 20px 50px rgba(36, 48, 31, 0.16);
  --a1-container: 1180px;
  --a1-font-body: 'Poppins', system-ui, -apple-system, sans-serif;
  --a1-font-head: 'Playfair Display', Georgia, serif;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--a1-font-body);
  color: var(--a1-text);
  background: var(--a1-white);
  line-height: 1.65;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--a1-font-head); line-height: 1.2; margin: 0 0 .5em; color: var(--a1-dark); }
p { margin: 0 0 1em; }
.container { max-width: var(--a1-container); margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
.section--cream { background: var(--a1-cream); }
.section--dark { background: var(--a1-dark); color: var(--a1-cream); }
.section--dark h2, .section--dark h3 { color: var(--a1-white); }
.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a1-gold-dark);
  margin-bottom: 12px;
}
.section-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); }
.section-head p { color: var(--a1-text-light); font-size: 17px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--a1-gold); color: var(--a1-dark); }
.btn--primary:hover { background: var(--a1-gold-dark); box-shadow: var(--a1-shadow); }
.btn--outline { background: transparent; border-color: var(--a1-cream); color: var(--a1-cream); }
.btn--outline:hover { background: var(--a1-cream); color: var(--a1-dark); }
.btn--dark { background: var(--a1-dark); color: var(--a1-cream); }
.btn--block { width: 100%; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  /* Must stay above .mobile-menu-backdrop: .site-header creates its own
     stacking context (position + z-index), so the mobile drawer nested
     inside it can only ever out-rank elements outside the header up to
     THIS value — its own internal z-index (e.g. 210) does not matter to
     siblings of .site-header like the backdrop. */
  z-index: 300;
  background: var(--a1-white);
  border-bottom: 1px solid var(--a1-border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.site-branding .site-title-link {
  font-family: var(--a1-font-head);
  font-weight: 700;
  font-size: 26px;
  color: var(--a1-dark);
}
.site-branding .site-title-link span { color: var(--a1-gold); }
.main-navigation { flex: 1; display: flex; justify-content: center; }
.primary-menu { display: flex; gap: 34px; }
.primary-menu a {
  font-weight: 500;
  font-size: 15px;
  color: var(--a1-text);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.primary-menu a:hover,
.primary-menu .current-menu-item > a { color: var(--a1-gold-dark); border-color: var(--a1-gold); }
.header-actions { display: flex; align-items: center; gap: 18px; }
.account-link { font-size: 21px; display: inline-flex; opacity: .85; }
.account-link:hover { opacity: 1; }
.cart-link { position: relative; font-size: 22px; display: inline-flex; }
.cart-count {
  position: absolute;
  top: -8px; right: -10px;
  background: var(--a1-gold);
  color: var(--a1-dark);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
/* The hamburger + slide-in Account/Categories drawer (.mega-menu-drawer)
   is a SEPARATE element from .main-navigation (see header.php) so it can
   work the same way at every screen size, including desktop, without
   turning the horizontal .primary-menu itself into an off-canvas panel.
   .primary-menu is only hidden below 860px, where there isn't room for
   both the horizontal links and the drawer trigger. */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span { width: 24px; height: 2px; background: var(--a1-dark); border-radius: 2px; }

.mega-menu-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(360px, 88vw);
  background: var(--a1-white);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 310; /* above .site-header (300) so it's never clipped by header's own stacking context */
  box-shadow: -12px 0 32px rgba(0,0,0,.18);
  padding-bottom: 24px;
}
.mega-menu-drawer.is-open { transform: translateX(0); }

.mobile-menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 16, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
  z-index: 250; /* below .site-header (300), above ordinary page content */
}
.mobile-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.mobile-menu-close {
  display: flex;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin: 16px 16px 0 auto;
  border: none; background: var(--a1-cream-2);
  border-radius: 50%; font-size: 16px; cursor: pointer;
}

.mmp-account {
  display: flex; align-items: center; gap: 14px;
  background: var(--a1-dark);
  color: var(--a1-cream);
  padding: 20px;
  margin-top: 14px;
}
.mmp-account-icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.mmp-account-copy { display: flex; flex-direction: column; gap: 2px; }
.mmp-account-copy strong { color: var(--a1-white); font-size: 16px; }
.mmp-account-links { font-size: 13px; color: #d8d5c4; text-decoration: underline; }

.mmp-categories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 12px;
  padding: 24px 18px 6px;
}
.mmp-cat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.mmp-cat-icon {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--a1-cream-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.mmp-cat-label { font-size: 12.5px; font-weight: 500; color: var(--a1-text); line-height: 1.3; }
.mmp-cat--all {
  justify-content: center;
  background: var(--a1-cream-2);
  border-radius: var(--a1-radius-sm);
  padding: 12px 8px;
  height: 62px;
}
.mmp-cat--all .mmp-cat-label { font-weight: 600; color: var(--a1-gold-dark); }
.mmp-cat--all .mmp-cat-arrow { font-size: 16px; color: var(--a1-gold-dark); }

.mmp-links {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--a1-border);
  margin: 18px 18px 0;
  padding-top: 8px;
}
.mmp-links a { padding: 12px 4px; font-size: 14.5px; border-bottom: 1px solid var(--a1-border); }

.mmp-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 20px 18px 4px;
}
.mmp-social-icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--a1-cream-2);
  color: var(--a1-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.mmp-social-icon:hover { background: var(--a1-gold); color: var(--a1-dark); transform: translateY(-2px); }

@media (max-width: 860px) {
  .primary-menu { display: none; }
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero {
  background: radial-gradient(circle at 80% 20%, var(--a1-dark-2), var(--a1-dark) 65%);
  color: var(--a1-cream);
  padding: 90px 0 70px;
}
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { color: var(--a1-white); font-size: clamp(36px, 5vw, 56px); }
.hero .hero-lede { font-size: 18px; color: #d8d5c4; max-width: 480px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 32px; }
.hero-badge {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-media { position: relative; }
.hero-media > img { border-radius: var(--a1-radius); box-shadow: var(--a1-shadow-lg); }

/* --- Hero product slider: 3D-style coverflow of the 5 Makhana products --- */
.hero-slider {
  position: relative;
  height: 400px;
  perspective: 1400px;
}
.hero-slide {
  position: absolute;
  top: 50%; left: 50%;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .6s ease;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-slide.is-active {
  transform: translate(-50%, -50%) scale(1) rotateY(0deg) translateZ(0);
  opacity: 1;
  z-index: 4;
  pointer-events: auto;
  animation: heroFloat 4.5s ease-in-out infinite;
}
.hero-slide.is-next {
  transform: translate(calc(-50% + 148px), -50%) scale(.76) rotateY(-22deg);
  opacity: .55;
  z-index: 3;
  pointer-events: auto;
}
.hero-slide.is-prev {
  transform: translate(calc(-50% - 148px), -50%) scale(.76) rotateY(22deg);
  opacity: .55;
  z-index: 3;
  pointer-events: auto;
}
.hero-slide-media {
  display: block;
  width: 200px; height: 200px;
  border-radius: var(--a1-radius);
  overflow: hidden;
  background: var(--a1-cream);
  box-shadow: var(--a1-shadow-lg);
}
.hero-slide-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-info {
  margin-top: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 8px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.hero-slide-name { font-size: 12.5px; font-weight: 600; color: var(--a1-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.hero-slide-price { font-size: 13px; font-weight: 700; color: var(--a1-gold); }
.hero-slide-price del { color: #a9a690; font-weight: 400; margin-right: 4px; }

@keyframes heroFloat {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotateY(0deg) translateY(0); }
  50%      { transform: translate(-50%, -50%) scale(1) rotateY(0deg) translateY(-10px); }
}

.hero-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.25);
  cursor: pointer; padding: 0;
  transition: background .2s ease, transform .2s ease;
}
.hero-dot.is-active { background: var(--a1-gold); transform: scale(1.25); }

@media (max-width: 480px) {
  .hero-slider { height: 320px; }
  .hero-slide { width: 170px; }
  .hero-slide-media { width: 150px; height: 150px; }
  .hero-slide.is-next { transform: translate(calc(-50% + 96px), -50%) scale(.7) rotateY(-22deg); }
  .hero-slide.is-prev { transform: translate(calc(-50% - 96px), -50%) scale(.7) rotateY(22deg); }
}

.hero-trustbar {
  margin-top: 56px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 28px;
  color: #d8d5c4;
  font-size: 14px;
}
.hero-trustbar strong { color: var(--a1-white); }
.stars { color: var(--a1-gold); letter-spacing: 2px; }

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

/* ==========================================================================
   4. Feature / icon grid
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.feature-card {
  text-align: center;
  background: var(--a1-white);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-radius);
  padding: 30px 18px;
}
.feature-card .icon { font-size: 34px; margin-bottom: 14px; }
.feature-card h3 { font-size: 16px; margin-bottom: 6px; }
.feature-card p { font-size: 14px; color: var(--a1-text-light); margin: 0; }

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

/* ==========================================================================
   5. Product showcase (WooCommerce loop overrides)
   ========================================================================== */
/* WooCommerce's own stylesheet sets a float/percentage-width layout on
   ul.products/li.product (for its default 3–4 column grid). Those rules
   can load after this theme's stylesheet and win on equal specificity, so
   every property that must override WooCommerce's defaults is flagged
   !important here — this is the one place in the theme that's needed. */
.woocommerce ul.products,
.product-showcase ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* WooCommerce also puts a float-clearfix (content:"table") on ul.products
   ::before/::after. Inside a grid, that generated content becomes an
   actual grid item and silently eats the first column slot, pushing every
   real product over by one and wrapping the last one onto its own row.
   Kill it here so the 5 products fill exactly 5 columns. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.product-showcase ul.products::before,
.product-showcase ul.products::after {
  content: none !important;
  display: none !important;
}
.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  background: var(--a1-white);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-radius);
  padding: 18px 18px 24px;
  text-align: center;
  transition: box-shadow .2s ease, transform .2s ease;
  position: relative;
}
ul.products li.product:hover { box-shadow: var(--a1-shadow); transform: translateY(-4px); }
ul.products li.product a img,
ul.products li.product img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  border-radius: var(--a1-radius-sm);
  margin-bottom: 14px;
  aspect-ratio: 1/1;
  object-fit: cover;
}
ul.products li.product .woocommerce-loop-product__title { font-family: var(--a1-font-body); font-size: 16px; font-weight: 600; color: var(--a1-text); margin: 6px 0; }
ul.products li.product .price { color: var(--a1-gold-dark); font-weight: 700; font-size: 16px; }
ul.products li.product .price del { color: var(--a1-text-light); opacity: .7; font-weight: 400; }
ul.products li.product .star-rating { margin: 0 auto 8px; }
ul.products li.product .button {
  display: inline-block; margin-top: 14px;
  background: var(--a1-dark); color: var(--a1-cream);
  padding: 10px 22px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
ul.products li.product .button:hover { background: var(--a1-gold); color: var(--a1-dark); }
ul.products li.product .onsale {
  position: absolute; top: 14px; left: 14px;
  background: var(--a1-gold); color: var(--a1-dark);
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.woocommerce-loop-product__link { display: block; }

@media (max-width: 980px) {
  .woocommerce ul.products,
  .product-showcase ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   6. Nutrition comparison
   ========================================================================== */
.nutrition-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; text-align: center; }
.nutrition-card {
  background: var(--a1-cream-2);
  border-radius: var(--a1-radius);
  padding: 26px 14px;
}
.nutrition-card .stat { font-size: 30px; font-weight: 800; color: var(--a1-gold-dark); font-family: var(--a1-font-head); }
.nutrition-card p { font-size: 13px; color: var(--a1-text-light); margin: 6px 0 0; }
@media (max-width: 980px) { .nutrition-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   7. Benefits split
   ========================================================================== */
.benefits-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.benefits-list li { display: flex; gap: 12px; padding: 10px 0; font-size: 16px; }
.benefits-list li .tick { color: var(--a1-green); font-weight: 700; }
@media (max-width: 900px) { .benefits-split { grid-template-columns: 1fr; } }

/* --- Benefits slider: crossfade + slow Ken-Burns zoom through the 5 products --- */
.benefits-slider {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--a1-radius);
  overflow: hidden;
  box-shadow: var(--a1-shadow);
  background: var(--a1-cream-2);
}
.benefits-slide {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.benefits-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }
.benefits-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 6s linear;
}
.benefits-slide.is-active img { transform: scale(1.12); }
.benefits-slide-caption {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(36, 48, 31, .72);
  backdrop-filter: blur(4px);
  color: var(--a1-white);
  border-radius: 999px;
  padding: 10px 18px;
}
.benefits-slide-name { font-size: 14px; font-weight: 600; }
.benefits-slide-price { font-size: 14px; font-weight: 700; color: var(--a1-gold); }
.benefits-slide-price del { color: #cfcabb; font-weight: 400; margin-right: 4px; opacity: .7; }

/* ==========================================================================
   8. Roots / story section
   ========================================================================== */
.roots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.roots-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--a1-radius);
  padding: 26px;
}
.roots-card .icon { font-size: 30px; margin-bottom: 12px; }
.roots-quote {
  margin-top: 40px; text-align: center; font-family: var(--a1-font-head);
  font-size: 20px; color: var(--a1-gold);
}
@media (max-width: 900px) { .roots-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. Testimonials
   ========================================================================== */
.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-card {
  background: var(--a1-white);
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-radius);
  padding: 26px;
}
.testimonial-card .stars { display: block; margin-bottom: 10px; }
.testimonial-card p.quote { font-style: italic; color: var(--a1-text); }
.testimonial-card .name { font-weight: 600; margin-top: 12px; }
.testimonial-card .verified { font-size: 12px; color: var(--a1-green); }
@media (max-width: 900px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. FAQ (native details/summary, no JS)
   ========================================================================== */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--a1-border);
  padding: 6px 0;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 4px;
  font-weight: 600;
  font-size: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; color: var(--a1-gold-dark); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-answer { padding: 0 4px 18px; color: var(--a1-text-light); }

/* ==========================================================================
   11. CTA banner
   ========================================================================== */
.cta-banner {
  background: linear-gradient(120deg, var(--a1-gold) 0%, var(--a1-gold-dark) 100%);
  color: var(--a1-dark);
  border-radius: var(--a1-radius);
  padding: 48px;
  text-align: center;
  margin: 0 24px;
}
.cta-banner h2 { color: var(--a1-dark); }
.cta-banner code {
  background: rgba(0,0,0,.08);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
}

/* ==========================================================================
   12. Trust strip
   ========================================================================== */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.trust-strip .item { padding: 18px; }
.trust-strip .icon { font-size: 26px; margin-bottom: 8px; }
@media (max-width: 900px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.site-footer { background: var(--a1-dark); color: #cfcabb; padding: 64px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; }
.footer-grid h4 { color: var(--a1-white); font-size: 16px; margin-bottom: 16px; }
.footer-grid a { display: block; padding: 6px 0; color: #cfcabb; font-size: 14px; }
.footer-grid a:hover { color: var(--a1-gold); }
.footer-brand .site-title-link { color: var(--a1-white); font-family: var(--a1-font-head); font-size: 22px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 48px; padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 13px; color: #9a9686;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   14. WhatsApp floating button
   ========================================================================== */
.whatsapp-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  font-size: 28px;
}
.whatsapp-float:hover { transform: scale(1.06); }

/* ==========================================================================
   15. Generic WooCommerce pages (shop / single / cart / checkout / account)
   ========================================================================== */
.woocommerce-page-wrap { padding: 48px 0 80px; }
.woocommerce-breadcrumb { color: var(--a1-text-light); font-size: 14px; margin-bottom: 24px; }
.woocommerce-breadcrumb a { color: var(--a1-text-light); }

/* Shop toolbar */
.woocommerce-ordering select,
.woocommerce table.shop_table,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row select {
  border: 1px solid var(--a1-border);
  border-radius: var(--a1-radius-sm);
}
.woocommerce table.shop_table { border-collapse: collapse; width: 100%; }
.woocommerce table.shop_table th { text-align: left; padding: 12px; background: var(--a1-cream); }
.woocommerce table.shop_table td { padding: 12px; border-bottom: 1px solid var(--a1-border); }

/* Single product */
.single-product .summary h1.product_title { font-size: 32px; }
.single-product .price { font-size: 24px; color: var(--a1-gold-dark); font-weight: 700; }
.single-product .price del { color: var(--a1-text-light); font-weight: 400; font-size: 18px; margin-right: 8px; }
.single-product form.cart .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  background: var(--a1-dark); color: var(--a1-cream);
  border-radius: 999px; padding: 14px 30px; border: none; font-weight: 600; cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--a1-gold); color: var(--a1-dark); }
.single-product .woocommerce-product-details__short-description { color: var(--a1-text-light); }
.woocommerce-tabs ul.tabs li { display: inline-block; margin-right: 18px; font-weight: 600; padding-bottom: 8px; cursor: pointer; }
.woocommerce-tabs ul.tabs li.active { border-bottom: 2px solid var(--a1-gold); color: var(--a1-gold-dark); }

/* Cart / Checkout */
.woocommerce-checkout #payment { background: var(--a1-cream); border-radius: var(--a1-radius); padding: 20px; }
.woocommerce-checkout .form-row label { font-size: 14px; font-weight: 500; }
.woocommerce-checkout .form-row input, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea {
  width: 100%; padding: 12px; margin-top: 4px;
}
.cart_totals, .cart-collaterals .cart_totals { background: var(--a1-cream); border-radius: var(--a1-radius); padding: 24px; }

/* Account */
.woocommerce-form-login, .woocommerce-form-register {
  max-width: 420px; margin: 0 auto; background: var(--a1-cream); padding: 30px; border-radius: var(--a1-radius);
}

/* ==========================================================================
   16. Basic post/page content
   ========================================================================== */
.page-content, .entry-content { max-width: 820px; margin: 0 auto; padding: 60px 24px; }
.page-content h1 { font-size: 36px; margin-bottom: 24px; }

/* ==========================================================================
   16b. Guest "sign in to add to cart" popup
   ========================================================================== */
.a1-auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 26, 16, .55);
  z-index: 400; /* above the mega-menu drawer (310) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.a1-auth-modal {
  position: relative;
  background: var(--a1-white);
  border-radius: var(--a1-radius);
  max-width: 380px;
  width: 100%;
  padding: 40px 30px 30px;
  text-align: center;
  box-shadow: var(--a1-shadow-lg);
}
.a1-auth-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: none; background: var(--a1-cream-2);
  border-radius: 50%; cursor: pointer; font-size: 14px;
}
.a1-auth-modal-icon {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--a1-cream-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.a1-auth-modal h3 { font-size: 20px; margin-bottom: 10px; }
.a1-auth-modal p { color: var(--a1-text-light); font-size: 14.5px; margin-bottom: 24px; }
.a1-auth-modal-cta { width: 100%; }

/* ==========================================================================
   17. Utilities
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }