/* =========================================================
   BONIX CHOPS — CORE STYLESHEET
   Design tokens + base layout + shared components
   ========================================================= */

:root{
  /* Brand palette */
  --c-primary: #1B5E20;
  --c-primary-dark: #0F3D16;
  --c-primary-light: #2E7D32;
  --c-primary-tint: #E7F1E8;
  --c-accent: #F4B400;
  --c-accent-dark: #C89100;
  --c-accent-tint: #FFF3D6;
  --c-bg: #FFF9F1;
  --c-dark: #222222;
  --c-white: #FFFFFF;
  --c-muted: #6B6459;
  --c-border: rgba(34,34,34,0.09);
  --c-shadow: 220 40% 10%;

  /* Type */
  --font-display: 'Poppins', 'Inter', sans-serif;
  --font-body: 'Inter', 'Poppins', sans-serif;

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(27,94,32,0.06);
  --shadow-md: 0 12px 32px -8px rgba(27,94,32,0.18);
  --shadow-lg: 0 24px 60px -12px rgba(27,94,32,0.28);
  --shadow-gold: 0 12px 28px -8px rgba(244,180,0,0.45);

  /* Layout */
  --container-w: 1220px;
  --nav-h: 84px;
  --transition: 260ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--c-dark);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color: inherit; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .5em; color: var(--c-dark); }
p{ margin:0 0 1em; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

/* Visible keyboard focus everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--c-primary); color:#fff;
  padding:12px 20px; z-index:2000; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ---------- Utility ---------- */
.container{ width:100%; max-width: var(--container-w); margin-inline:auto; padding-inline: 24px; }
.section{ padding: clamp(56px, 8vw, 108px) 0; position:relative; }
.section-tight{ padding: clamp(40px, 5vw, 64px) 0; }
.text-center{ text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--c-primary);
  background: var(--c-primary-tint); padding:8px 18px; border-radius: var(--r-pill);
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--c-accent); }
.section-head{ max-width:640px; margin-bottom: clamp(32px,5vw,56px); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.section-head p{ color: var(--c-muted); font-size:1.05rem; }
.text-muted{ color: var(--c-muted) !important; }
.bg-cream{ background: var(--c-bg); }
.bg-primary-section{ background: linear-gradient(160deg, var(--c-primary-dark), var(--c-primary)); color:#fff; }
.bg-primary-section h2, .bg-primary-section h3{ color:#fff; }
.visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-display); font-weight:600; font-size:.98rem;
  padding: 15px 30px; border-radius: var(--r-pill); border:2px solid transparent;
  cursor:pointer; position:relative; overflow:hidden; isolation:isolate;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
  white-space:nowrap;
}
.btn:active{ transform: translateY(1px) scale(.98); }
.btn-primary{ background: var(--c-primary); color:#fff; box-shadow: var(--shadow-md); }
.btn-primary:hover{ background: var(--c-primary-dark); transform: translateY(-3px); box-shadow: var(--shadow-lg); color:#fff; }
.btn-accent{ background: var(--c-accent); color: var(--c-dark); box-shadow: var(--shadow-gold); }
.btn-accent:hover{ background: var(--c-accent-dark); transform: translateY(-3px); color:var(--c-dark); }
.btn-outline{ background: transparent; border-color: rgba(255,255,255,.6); color:currentColor; }
.btn-outline.dark{ border-color: var(--c-dark); }
.btn-outline:hover{ background: rgba(255,255,255,.14); transform: translateY(-3px); }
.btn-outline.dark:hover{ background: var(--c-dark); color:#fff; }
.btn-sm{ padding:10px 20px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none !important; }
.btn .icon{ font-size:1.1em; }

/* ripple */
.btn .ripple{
  position:absolute; border-radius:50%; background:rgba(255,255,255,.55);
  transform: scale(0); animation: ripple 600ms ease-out; pointer-events:none;
}

/* ---------- Header / Nav ---------- */
.site-header{
  position: fixed; inset-inline:0; top:0; z-index:1000;
  height: var(--nav-h); display:flex; align-items:center;
  background: rgba(255,249,241,0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(34,34,34,0.06);
  transition: box-shadow var(--transition), background var(--transition), height var(--transition);
}
.site-header.scrolled{ box-shadow: 0 8px 30px -12px rgba(27,94,32,0.25); height: 72px; }
.navbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }

.nav-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--c-primary); }
.nav-logo .logo-mark{
  width:42px; height:42px; border-radius:14px; background: linear-gradient(145deg, var(--c-primary), var(--c-primary-dark));
  display:flex; align-items:center; justify-content:center; color:var(--c-accent); font-weight:700; box-shadow: var(--shadow-md);
  flex-shrink:0;
}
.nav-logo .logo-text span{ color: var(--c-accent-dark); }

.nav-menu{ display:flex; align-items:center; gap:8px; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{
  font-family: var(--font-display); font-weight:500; font-size:.96rem; color: var(--c-dark);
  padding:10px 18px; border-radius: var(--r-pill); position:relative; transition: color var(--transition), background var(--transition);
}
.nav-link:hover{ color: var(--c-primary); background: var(--c-primary-tint); }
.nav-link.active{ color: var(--c-primary); background: var(--c-primary-tint); }
.nav-link.active::after{
  content:''; position:absolute; left:22px; right:22px; bottom:6px; height:2px; background: var(--c-accent); border-radius:2px;
}

.nav-cart{
  display:flex; align-items:center; gap:8px; background: var(--c-primary); color:#fff;
  padding:11px 20px; border-radius: var(--r-pill); font-family:var(--font-display); font-weight:600; font-size:.92rem;
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
  margin-left:8px;
}
.nav-cart:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); color:#fff; }
.cart-count{
  background: var(--c-accent); color: var(--c-dark); min-width:20px; height:20px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
}

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px;
  background: var(--c-white); border:1px solid var(--c-border); border-radius: 12px; cursor:pointer;
}
.nav-toggle span{ display:block; width:20px; height:2px; background: var(--c-dark); margin-inline:auto; transition: transform var(--transition), opacity var(--transition); }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Cards ---------- */
.card{
  background: var(--c-white); border-radius: var(--r-md); border:1px solid var(--c-border);
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.hover-lift:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }

/* Product card */
.product-card{
  background:#fff; border-radius: var(--r-md); overflow:hidden; border:1px solid var(--c-border);
  box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column; height:100%;
}
.product-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.product-media{ position:relative; aspect-ratio: 1/1; overflow:hidden; background: var(--c-primary-tint); }
.product-media img{ width:100%; height:100%; object-fit:cover; transition: transform 550ms cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-media img{ transform: scale(1.08); }
.product-badge{
  position:absolute; top:14px; left:14px; background: var(--c-accent); color:var(--c-dark);
  font-family:var(--font-display); font-weight:600; font-size:.72rem; padding:6px 14px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-gold);
}
.product-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:6px; flex:1; }
.product-category{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color: var(--c-primary); font-weight:600; }
.product-name{ font-size:1.12rem; margin:0; }
.product-actions{ margin-top:auto; padding-top:12px; }
.add-to-cart-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--c-primary-tint); color: var(--c-primary); font-family:var(--font-display); font-weight:600;
  padding:12px 16px; border-radius: var(--r-pill); border:1px solid transparent; cursor:pointer; transition:all var(--transition);
}
.add-to-cart-btn:hover{ background: var(--c-primary); color:#fff; }
.add-to-cart-btn.added{ background: var(--c-primary); color:#fff; }

/* ---------- Scallop divider (signature motif — echoes a crimped pastry edge) ---------- */
.scallop-divider{ line-height:0; width:100%; overflow:hidden; transform: translateY(1px); }
.scallop-divider svg{ display:block; width:100%; height:auto; }
.scallop-divider.flip{ transform: rotate(180deg) translateY(1px); }

/* ---------- Footer ---------- */
.site-footer{ background: linear-gradient(180deg, var(--c-primary-dark), #0A2A0F); color:#fff; position:relative; }
.footer-top{ padding: clamp(48px,7vw,84px) 0 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:40px; }
.footer-brand p{ color: rgba(255,255,255,.72); max-width:320px; }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.3rem; margin-bottom:16px; color:#fff; }
.footer-heading{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:1rem; margin-bottom:18px; letter-spacing:.02em; }
.footer-links li{ margin-bottom:11px; }
.footer-links a{ color: rgba(255,255,255,.72); transition: color var(--transition), padding var(--transition); }
.footer-links a:hover{ color: var(--c-accent); padding-left:4px; }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; color: rgba(255,255,255,.8); font-size:.94rem; }
.footer-contact a{ color: rgba(255,255,255,.85); }
.footer-contact a:hover{ color: var(--c-accent); }
.footer-contact i{ color: var(--c-accent); margin-top:3px; }
.footer-social{ display:flex; gap:10px; margin-top:18px; }
.social-icon{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); transition: all var(--transition); color:#fff;
}
.social-icon:hover{ background: var(--c-accent); color: var(--c-dark); transform: translateY(-4px); }
.newsletter-form{ display:flex; gap:8px; margin-top:8px; }
.newsletter-form input{
  flex:1; padding:13px 18px; border-radius: var(--r-pill); border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color:#fff; font-family:var(--font-body);
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,.55); }
.newsletter-form button{
  background: var(--c-accent); color:var(--c-dark); border:none; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition: all var(--transition);
}
.newsletter-form button:hover{ background:#fff; transform: rotate(90deg); }
.newsletter-note{ font-size:.82rem; color:rgba(255,255,255,.5); margin-top:10px; }

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding:22px 0; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.86rem; color: rgba(255,255,255,.6);
}
.footer-legal{ display:flex; gap:20px; }
.footer-legal button{ background:none; border:none; color: rgba(255,255,255,.6); cursor:pointer; font-size:.86rem; padding:0; font-family:var(--font-body); }
.footer-legal button:hover{ color: var(--c-accent); }

/* ---------- Floating buttons ---------- */
.floating-whatsapp{
  position: fixed; right:24px; bottom:24px; width:60px; height:60px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; box-shadow: 0 14px 30px -8px rgba(37,211,102,.6); z-index:900;
  animation: floatY 3s ease-in-out infinite;
}
.floating-whatsapp:hover{ color:#fff; transform: scale(1.08); }
.back-to-top{
  position: fixed; right:24px; bottom:96px; width:48px; height:48px; border-radius:50%;
  background: var(--c-white); color: var(--c-primary); border:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-md); z-index:899;
  opacity:0; visibility:hidden; transform: translateY(12px); transition: all var(--transition);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background: var(--c-primary); color:#fff; }

/* ---------- Toast ---------- */
.toast-stack{ position: fixed; top: calc(var(--nav-h) + 16px); right:20px; z-index:2000; display:flex; flex-direction:column; gap:10px; }
.toast-msg{
  background: var(--c-dark); color:#fff; padding:14px 20px; border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  display:flex; align-items:center; gap:10px; font-size:.92rem; font-weight:500;
  transform: translateX(120%); transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  max-width: 320px;
}
.toast-msg.show{ transform: translateX(0); }
.toast-msg i{ color: var(--c-accent); }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  padding-top: calc(var(--nav-h) + 56px); padding-bottom:56px;
  background: linear-gradient(165deg, var(--c-primary-dark), var(--c-primary) 60%);
  color:#fff; position:relative; overflow:hidden;
}
.page-hero h1{ color:#fff; font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.page-hero p{ color: rgba(255,255,255,.82); max-width:560px; font-size:1.05rem; }
.page-hero .crumbs{ display:flex; gap:8px; align-items:center; font-size:.86rem; color: rgba(255,255,255,.65); margin-bottom:18px; }
.page-hero .crumbs a{ color: rgba(255,255,255,.85); }
.page-hero .crumbs a:hover{ color: var(--c-accent); }

/* Empty state */
.empty-state{ text-align:center; padding: 72px 24px; }
.empty-state .icon-circle{
  width:88px; height:88px; border-radius:50%; background: var(--c-primary-tint); color: var(--c-primary);
  display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 22px;
}

/* Bootstrap icon helper spacing */
.icon-circle-sm{
  width:56px; height:56px; border-radius:16px; background: var(--c-primary-tint); color: var(--c-primary);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:18px;
}

/* Glass panel (glassmorphism accent used sparingly) */
.glass-panel{
  background: rgba(255,255,255,.14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,.22); border-radius: var(--r-lg);
}

/* =========================================================
   HOME PAGE
   ========================================================= */
.hero{
  position:relative; padding-top: calc(var(--nav-h) + 48px); padding-bottom: 80px;
  overflow:hidden; background: var(--c-bg);
}
.hero::before{
  content:''; position:absolute; top:-140px; right:-160px; width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--c-accent-tint), transparent 70%); z-index:0;
}
.hero-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items:center; position:relative; z-index:1; }
.hero-copy h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom:20px; }
.hero-copy h1 .accent-underline{ position:relative; white-space:nowrap; }
.hero-copy h1 .accent-underline svg{ position:absolute; left:0; bottom:-8px; width:100%; height:14px; }
.hero-copy p.lead{ font-size:1.14rem; color: var(--c-muted); max-width:520px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px; }
.hero-stats{ display:flex; gap:32px; flex-wrap:wrap; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:1.6rem; color: var(--c-primary); }
.hero-stat span{ font-size:.86rem; color: var(--c-muted); }

.hero-visual{ position:relative; }
.hero-visual .blob-shape{
  border-radius: 44% 56% 62% 38% / 45% 40% 60% 55%;
  overflow:hidden; box-shadow: var(--shadow-lg); position:relative; aspect-ratio: 1/1;
}
.hero-visual .blob-shape img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .float-card{
  position:absolute; background:#fff; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding:16px 20px; display:flex; align-items:center; gap:12px; animation: floatY 4s ease-in-out infinite;
}
.hero-visual .float-card.card-1{ top:8%; left:-8%; }
.hero-visual .float-card.card-2{ bottom:6%; right:-6%; animation-delay: 1.2s; }
.hero-visual .float-card .icon-circle-sm{ margin:0; width:44px; height:44px; font-size:1.1rem; }
.hero-visual .float-card b{ display:block; font-family:var(--font-display); font-size:.95rem; }
.hero-visual .float-card span{ font-size:.78rem; color:var(--c-muted); }
.hero-visual .deco-dot{ position:absolute; width:18px; height:18px; border-radius:50%; background:var(--c-accent); box-shadow: var(--shadow-gold); }

/* Category cards */
.category-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.category-card{
  position:relative; border-radius: var(--r-md); overflow:hidden; aspect-ratio: 4/5; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.category-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); }
.category-card img{ width:100%; height:100%; object-fit:cover; transition: transform 600ms ease; }
.category-card:hover img{ transform: scale(1.1); }
.category-card::after{
  content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,61,22,0) 40%, rgba(10,42,15,.88) 100%);
}
.category-card .cat-label{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2; color:#fff;
}
.category-card .cat-label span{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color: var(--c-accent); font-weight:600; }
.category-card .cat-label h3{ color:#fff; margin:4px 0 0; font-size:1.2rem; }

/* Why choose us */
.why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:24px; }
.why-card{ padding: 32px 26px; text-align:left; }
.why-card p{ color: var(--c-muted); font-size:.94rem; margin:0; }

/* Testimonials */
.testimonial-track{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.testimonial-card{ padding: 30px 28px; }
.testimonial-card .stars{ color: var(--c-accent); margin-bottom:14px; letter-spacing:2px; }
.testimonial-card p.quote{ font-style:italic; color: var(--c-dark); margin-bottom:20px; }
.testimonial-author{ display:flex; align-items:center; gap:12px; }
.testimonial-avatar{
  width:44px; height:44px; border-radius:50%; background: var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600;
}
.testimonial-author b{ display:block; font-size:.92rem; }
.testimonial-author span{ font-size:.8rem; color:var(--c-muted); }

/* CTA band */
.cta-band{
  border-radius: var(--r-lg); background: linear-gradient(120deg, var(--c-primary-dark), var(--c-primary));
  padding: clamp(40px, 6vw, 64px); position:relative; overflow:hidden; color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band::before{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle, rgba(244,180,0,.35), transparent 70%);
}
.cta-band h2{ color:#fff; margin-bottom:10px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.cta-band p{ color: rgba(255,255,255,.82); margin:0; max-width:460px; }
.cta-actions{ display:flex; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }

/* Newsletter (home section, distinct from footer newsletter) */
.newsletter-panel{
  border-radius: var(--r-lg); background: var(--c-accent-tint); padding: clamp(36px,5vw,56px);
  display:grid; grid-template-columns: 1fr auto; gap:32px; align-items:center;
}
.newsletter-panel h3{ margin-bottom:6px; }
.newsletter-panel p{ color: var(--c-muted); margin:0; }
.newsletter-panel form{ display:flex; gap:10px; }
.newsletter-panel input{
  padding:14px 20px; border-radius: var(--r-pill); border:1px solid rgba(34,34,34,.14); min-width:240px; font-family:var(--font-body);
}

/* =========================================================
   PRODUCTS PAGE
   ========================================================= */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 40px; position:sticky; top: calc(var(--nav-h) + 12px); z-index:50;
  background: rgba(255,249,241,.9); backdrop-filter: blur(10px); padding:14px; border-radius: var(--r-pill); border:1px solid var(--c-border);
}
.filter-btn{
  font-family: var(--font-display); font-weight:500; font-size:.88rem; padding:10px 20px; border-radius: var(--r-pill);
  background: transparent; border:1px solid transparent; color: var(--c-muted); cursor:pointer; transition: all var(--transition);
}
.filter-btn:hover{ color: var(--c-primary); }
.filter-btn.active{ background: var(--c-primary); color:#fff; box-shadow: var(--shadow-sm); }
.products-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:26px; }
.products-grid.is-filtering .product-card{ animation: fadeUp 420ms ease both; }

/* =========================================================
   ABOUT PAGE
   ========================================================= */
.about-split{ display:grid; grid-template-columns: 1fr 1fr; gap:56px; align-items:center; }
.about-split .img-wrap{ border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.about-split .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.value-card{ padding:30px 26px; text-align:center; }

.founder-split{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center; }
.founder-split .img-wrap{ border-radius: 44% 56% 60% 40% / 50% 45% 55% 50%; overflow:hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3/4; }
.founder-split .img-wrap img{ width:100%; height:100%; object-fit:cover; }
.founder-quote{ font-family:var(--font-display); font-size:1.2rem; font-style:italic; color: var(--c-primary); border-left:4px solid var(--c-accent); padding-left:20px; margin:22px 0; }
.founder-signature{ font-family:var(--font-display); font-weight:600; font-size:1.4rem; color: var(--c-primary-dark); margin-top:18px; }

.timeline{ position:relative; max-width:760px; margin-inline:auto; }
.timeline::before{ content:''; position:absolute; left:26px; top:0; bottom:0; width:2px; background: var(--c-border); }
.timeline-item{ position:relative; padding-left:70px; margin-bottom:40px; }
.timeline-item:last-child{ margin-bottom:0; }
.timeline-dot{
  position:absolute; left:8px; top:0; width:38px; height:38px; border-radius:50%; background: var(--c-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:.82rem; box-shadow: var(--shadow-sm);
}
.timeline-item h3{ font-size:1.1rem; margin-bottom:6px; }
.timeline-item p{ color: var(--c-muted); margin:0; }
.timeline-item .year{ font-size:.78rem; color: var(--c-accent-dark); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* =========================================================
   CART PAGE
   ========================================================= */
.cart-layout{ display:grid; grid-template-columns: 1.6fr 1fr; gap:32px; align-items:start; }
.cart-list{ display:flex; flex-direction:column; gap:16px; }
.cart-item{
  display:flex; align-items:center; gap:18px; background:#fff; border-radius: var(--r-md); padding:16px;
  border:1px solid var(--c-border); box-shadow: var(--shadow-sm);
}
.cart-item img{ width:88px; height:88px; border-radius: var(--r-sm); object-fit:cover; flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-info h3{ font-size:1.02rem; margin-bottom:2px; }
.cart-item-info span{ font-size:.8rem; color: var(--c-muted); text-transform:uppercase; letter-spacing:.05em; }
.qty-control{ display:flex; align-items:center; gap:0; border:1px solid var(--c-border); border-radius: var(--r-pill); overflow:hidden; }
.qty-control button{
  width:36px; height:36px; border:none; background: var(--c-primary-tint); color: var(--c-primary); font-weight:700; cursor:pointer; font-size:1.05rem;
  transition: background var(--transition);
}
.qty-control button:hover{ background: var(--c-primary); color:#fff; }
.qty-control span{ width:38px; text-align:center; font-family:var(--font-display); font-weight:600; }
.remove-item-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--c-border); background:#fff; color:#C0392B;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all var(--transition); flex-shrink:0;
}
.remove-item-btn:hover{ background:#C0392B; color:#fff; border-color:#C0392B; }

.cart-summary{
  background:#fff; border-radius: var(--r-md); padding:28px; border:1px solid var(--c-border); box-shadow: var(--shadow-sm);
  position:sticky; top: calc(var(--nav-h) + 24px);
}
.cart-summary h3{ margin-bottom:18px; }
.cart-summary .summary-row{ display:flex; justify-content:space-between; font-size:.92rem; color: var(--c-muted); margin-bottom:10px; }
.cart-summary .summary-total{ display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:1.1rem; margin:16px 0; padding-top:14px; border-top:1px dashed var(--c-border); color: var(--c-dark); }
.cart-actions-row{ display:flex; gap:10px; margin-top:18px; }
.cart-note{ font-size:.8rem; color: var(--c-muted); margin-top:14px; text-align:center; }

/* =========================================================
   CONTACT PAGE
   ========================================================= */
.contact-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap:40px; align-items:start; }
.contact-info-card{ display:flex; gap:16px; padding:22px; margin-bottom:16px; }
.contact-info-card:last-child{ margin-bottom:0; }
.contact-info-card h3{ font-size:1rem; margin-bottom:4px; }
.contact-info-card p, .contact-info-card a{ color: var(--c-muted); font-size:.92rem; margin:0; }
.contact-form-card{ padding: clamp(28px,4vw,40px); }
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-family:var(--font-display); font-weight:500; font-size:.9rem; margin-bottom:8px; }
.form-control{
  width:100%; padding:14px 18px; border-radius: var(--r-sm); border:1px solid var(--c-border);
  background: var(--c-bg); font-family:var(--font-body); font-size:.96rem; transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus{ border-color: var(--c-primary); box-shadow: 0 0 0 4px var(--c-primary-tint); outline:none; }
textarea.form-control{ resize:vertical; min-height:130px; }
.map-embed{ border-radius: var(--r-md); overflow:hidden; border:1px solid var(--c-border); box-shadow: var(--shadow-sm); }
.map-embed iframe{ width:100%; height:320px; border:0; display:block; }
.hours-list{ display:flex; flex-direction:column; gap:10px; }
.hours-list li{ display:flex; justify-content:space-between; font-size:.92rem; padding:8px 0; border-bottom:1px dashed var(--c-border); }
.hours-list li:last-child{ border-bottom:none; }
.hours-list b{ font-family:var(--font-display); }

/* Modal (terms / privacy) reuse Bootstrap modal, small brand touches */
.modal-content{ border-radius: var(--r-md); border:none; }
.modal-header{ border-bottom:1px solid var(--c-border); }
.modal-title{ font-family:var(--font-display); color: var(--c-primary); }