/* =================================================================
   QuickBite — Fast Food Delivery Website
   style.css — Mobile-first, fully responsive
   ================================================================= */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Brand */
  --red:            #E63946;
  --red-dark:       #c1121f;
  --red-light:      #ff6b7a;
  --red-glow:       rgba(230,57,70,.12);
  --yellow:         #FFC300;
  --yellow-dark:    #e6a800;
  --yellow-glow:    rgba(255,195,0,.12);

  /* Neutrals */
  --white:          #ffffff;
  --off-white:      #fff9f0;
  --paper:          #fff4e6;
  --warm-gray:      #ede8e0;
  --mid-gray:       #c2b8ae;
  --text-light:     #9e8f82;
  --text-mid:       #6a5d52;
  --text-dark:      #1a1208;

  /* Utility */
  --green:          #2d7a4e;
  --whatsapp:       #25D366;
  --whatsapp-dark:  #1ba84f;
  --danger:         #c0392b;

  /* Shadows */
  --sh-xs: 0 1px 4px  rgba(26,18,8,.06);
  --sh-sm: 0 2px 14px rgba(26,18,8,.09);
  --sh-md: 0 8px 36px rgba(26,18,8,.13);
  --sh-lg: 0 24px 64px rgba(26,18,8,.18);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 32px;

  /* Motion */
  --ease: cubic-bezier(.4,0,.2,1);
  --t:    all .26s var(--ease);

  /* Typography */
  --font-h: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-b: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --hh: 70px;
}

/* ── Base Reset ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; font-size:16px }
body {
  font-family: var(--font-b);
  background:  var(--off-white);
  color:       var(--text-dark);
  line-height: 1.6;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img  { max-width:100%; height:auto; display:block }
a    { text-decoration:none; color:inherit }
button { cursor:pointer; border:none; background:none; font-family:var(--font-b) }
ul   { list-style:none }
:focus-visible { outline:2px solid var(--red); outline-offset:3px }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* ══════════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════════ */
#site-header {
  position:sticky; top:0; z-index:900; height:var(--hh);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 2px solid var(--warm-gray);
  box-shadow: var(--sh-xs);
}
.hdr-inner {
  max-width:1300px; margin:0 auto; padding:0 20px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.logo {
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  text-decoration:none;
}
.logo-icon { font-size:30px; line-height:1 }
.logo-text  { display:flex; flex-direction:column; line-height:1 }
.logo-main  { font-family:var(--font-h); font-size:22px; font-weight:900; color:var(--red); letter-spacing:-.5px }
.logo-sub   { font-size:9px; font-weight:600; color:var(--text-light); letter-spacing:2px; text-transform:uppercase; margin-top:1px }

.hdr-search {
  display:flex; align-items:center; gap:8px;
  background:var(--paper); border:1.5px solid var(--warm-gray);
  border-radius:40px; padding:9px 16px;
  transition:var(--t); flex:1; max-width:360px;
}
.hdr-search:focus-within { border-color:var(--red); box-shadow:0 0 0 3px var(--red-glow) }
.hdr-search input {
  border:none; background:none; font-family:var(--font-b); font-size:14px;
  color:var(--text-dark); width:100%; outline:none;
}
.hdr-search input::placeholder { color:var(--text-light) }

.cart-btn {
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color:#fff;
  padding:10px 18px; border-radius:40px;
  font-size:14px; font-weight:600; white-space:nowrap;
  transition:var(--t); flex-shrink:0;
  box-shadow: 0 2px 12px rgba(230,57,70,.35);
}
.cart-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(230,57,70,.4) }

.cart-badge {
  background:var(--yellow); color:var(--text-dark);
  font-size:11px; font-weight:800;
  min-width:20px; height:20px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0 5px; transition:var(--t);
}
.cart-badge.pulse { animation:badge-pop .38s ease }
@keyframes badge-pop { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5)} }

/* ══════════════════════════════════════════════════════════════
   DELIVERY RIBBON
══════════════════════════════════════════════════════════════ */
.ribbon {
  background: linear-gradient(135deg, var(--red-dark) 0%, #8b0000 100%);
  color: rgba(255,255,255,.8); text-align:center;
  padding:10px 20px; font-size:12.5px; letter-spacing:.2px;
  overflow:hidden; position:relative;
}
.ribbon strong { color:var(--yellow) }

/* ══════════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════════ */
#hero {
  background: linear-gradient(150deg, #1a1208 0%, #2d1810 50%, #1a0a0a 100%);
  padding:90px 24px 80px;
  text-align:center;
  position:relative; overflow:hidden;
  min-height:540px;
  display:flex; align-items:center; justify-content:center;
}
.hero-bg-blobs { position:absolute; inset:0; pointer-events:none; overflow:hidden }
.blob {
  position:absolute; border-radius:50%; filter:blur(80px); opacity:.25;
}
.blob-1 { width:500px; height:500px; background:var(--red);     top:-150px;  left:-100px }
.blob-2 { width:400px; height:400px; background:var(--yellow);  bottom:-100px; right:-80px }
.blob-3 { width:300px; height:300px; background:var(--red-dark);top:50%;     left:50%; transform:translate(-50%,-50%) }

.hero-inner { max-width:720px; margin:0 auto; position:relative; z-index:2 }

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,195,0,.15); border:1px solid rgba(255,195,0,.4);
  color:var(--yellow); font-size:12px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  padding:7px 18px; border-radius:40px; margin-bottom:28px;
}

h1.hero-title {
  font-family:var(--font-h); font-size:clamp(40px,7.5vw,80px);
  font-weight:900; line-height:1.0; color:#fff;
  letter-spacing:-2px; margin-bottom:20px;
}
h1.hero-title em { font-style:normal; color:var(--yellow) }

.hero-sub {
  font-size:17px; color:rgba(255,255,255,.65); font-weight:400;
  line-height:1.7; margin-bottom:36px;
  max-width:540px; margin-left:auto; margin-right:auto;
}

.hero-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:44px }

.btn-hero-primary {
  display:inline-flex; align-items:center; gap:8px;
  background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-dark) 100%);
  color:var(--text-dark); font-family:var(--font-h); font-weight:800; font-size:16px;
  padding:14px 30px; border-radius:50px;
  transition:var(--t); box-shadow:0 4px 20px rgba(255,195,0,.4);
}
.btn-hero-primary:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(255,195,0,.5) }

.btn-hero-wa {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--whatsapp); color:#fff;
  font-family:var(--font-h); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:50px;
  transition:var(--t); box-shadow:0 4px 20px rgba(37,211,102,.35);
}
.btn-hero-wa:hover { background:var(--whatsapp-dark); transform:translateY(-3px); box-shadow:0 8px 24px rgba(37,211,102,.45) }

.hero-stats { display:flex; gap:44px; justify-content:center; flex-wrap:wrap }
.hstat { text-align:center }
.hstat-n { font-family:var(--font-h); font-size:28px; font-weight:900; color:var(--yellow) }
.hstat-l { font-size:11px; color:rgba(255,255,255,.45); letter-spacing:1px; text-transform:uppercase; margin-top:2px }

/* Floating food emojis */
.hero-floaters { position:absolute; inset:0; pointer-events:none; z-index:1 }
.floater {
  position:absolute; font-size:clamp(28px,4vw,52px);
  opacity:.12; animation:float 6s ease-in-out infinite;
}
.f1 { top:12%; left:6%;  animation-delay:0s }
.f2 { top:65%; left:4%;  animation-delay:1s }
.f3 { top:15%; right:6%; animation-delay:2s }
.f4 { top:68%; right:5%; animation-delay:.5s }
.f5 { top:42%; right:2%; animation-delay:1.5s }
@keyframes float {
  0%,100% { transform:translateY(0) rotate(-5deg) }
  50%      { transform:translateY(-18px) rotate(5deg) }
}

/* ══════════════════════════════════════════════════════════════
   TRUST STRIP
══════════════════════════════════════════════════════════════ */
#trust {
  background:var(--white);
  border-top:2px solid var(--red); border-bottom:1px solid var(--warm-gray);
  padding:36px 24px;
}
.trust-grid {
  max-width:1300px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:24px;
}
.trust-item { display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px }
.trust-icon  { font-size:28px; filter:drop-shadow(0 2px 4px rgba(230,57,70,.2)) }
.trust-label { font-family:var(--font-h); font-size:14px; font-weight:800; color:var(--text-dark) }
.trust-sub   { font-size:11.5px; color:var(--text-light) }

/* ══════════════════════════════════════════════════════════════
   MENU SECTION
══════════════════════════════════════════════════════════════ */
#products { max-width:1300px; margin:0 auto; padding:60px 20px }

.section-hdr {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:28px; flex-wrap:wrap; gap:10px;
}
.section-title {
  font-family:var(--font-h); font-size:clamp(28px,4.5vw,46px);
  font-weight:900; color:var(--text-dark); line-height:1.1;
}
.section-title span { color:var(--red) }
.section-subtitle   { font-size:13px; color:var(--text-light); margin-top:4px }

/* Category filter pills */
.cat-nav {
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:36px; padding-bottom:4px;
}
.cat-btn {
  padding:8px 18px; border-radius:40px;
  font-size:13.5px; font-weight:600; color:var(--text-mid);
  background:var(--paper); border:1.5px solid var(--warm-gray);
  transition:var(--t); white-space:nowrap; font-family:var(--font-b);
}
.cat-btn:hover   { border-color:var(--red); color:var(--red) }
.cat-btn.active  { background:var(--red); color:#fff; border-color:var(--red); box-shadow:0 3px 12px var(--red-glow) }

/* Product grid */
.product-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
  gap:22px;
}

/* ── Product Card ─────────────────────────────────────────── */
.product-card {
  background:var(--white); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--sh-sm);
  transition:var(--t); border:1.5px solid var(--warm-gray);
  display:flex; flex-direction:column;
}
.product-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md); border-color:rgba(230,57,70,.2) }

/* Card image */
.card-img {
  position:relative; overflow:hidden; aspect-ratio:4/3;
  background:var(--paper);
}
.card-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.product-card:hover .card-img img { transform:scale(1.06) }

/* Badge */
.card-badge {
  position:absolute; top:10px; left:10px;
  padding:4px 11px; border-radius:20px;
  font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.8px;
  color:#fff;
}
.badge-bestseller { background:var(--red) }
.badge-new        { background:#7c3aed }
.badge-trending   { background:#ea580c }
.badge-spicy      { background:#dc2626 }
.badge-veg        { background:var(--green) }
.badge-chef-s-pick{ background:var(--yellow); color:var(--text-dark) }

/* Veg/Non-veg dot */
.veg-dot {
  position:absolute; top:10px; right:10px;
  width:18px; height:18px; border-radius:3px; border:2px solid;
  display:flex; align-items:center; justify-content:center;
}
.veg-dot::after {
  content:''; width:8px; height:8px; border-radius:50%;
}
.veg-dot.veg     { border-color:var(--green); background:#fff }
.veg-dot.veg::after     { background:var(--green) }
.veg-dot.nonveg  { border-color:var(--danger); background:#fff }
.veg-dot.nonveg::after  { background:var(--danger) }

/* Discount badge */
.card-disc {
  position:absolute; bottom:10px; left:10px;
  background:rgba(26,18,8,.75); color:var(--yellow);
  font-size:11px; font-weight:700;
  padding:3px 9px; border-radius:20px; backdrop-filter:blur(4px);
}

/* Card body */
.card-body { padding:16px 16px 18px; display:flex; flex-direction:column; flex:1 }
.card-cat { font-size:10.5px; font-weight:700; color:var(--red); text-transform:uppercase; letter-spacing:1.2px; margin-bottom:4px }
.card-name { font-family:var(--font-h); font-size:17px; font-weight:800; color:var(--text-dark); line-height:1.25; margin-bottom:4px }
.card-serves { font-size:11.5px; color:var(--text-light); margin-bottom:7px }
.card-desc { font-size:12.5px; color:var(--text-mid); line-height:1.55; margin-bottom:10px; flex:1 }

/* Rating */
.card-rating { display:flex; align-items:center; gap:5px; margin-bottom:10px; flex-wrap:wrap }
.stars { color:var(--yellow); font-size:13px; letter-spacing:1px }
.rv    { font-size:13px; font-weight:700; color:var(--text-dark) }
.rc    { font-size:12px; color:var(--text-light) }

/* Price row */
.price-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px }
.price { font-family:var(--font-h); font-size:22px; font-weight:900; color:var(--text-dark) }
.mrp   { font-size:13px; color:var(--mid-gray); text-decoration:line-through }
.save  { font-size:11.5px; color:var(--green); font-weight:700; background:rgba(45,122,78,.1); padding:2px 8px; border-radius:20px }

/* Card footer */
.card-foot { display:flex; gap:10px; align-items:center }

.btn-add {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%);
  color:#fff; font-family:var(--font-h); font-size:14px; font-weight:800;
  padding:11px 16px; border-radius:50px;
  transition:var(--t); box-shadow:0 3px 12px var(--red-glow);
}
.btn-add:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(230,57,70,.45) }
.btn-add:active .btn-add-icon { transform:scale(1.4) rotate(90deg) }
.btn-add-icon { font-size:18px; font-weight:900; transition:transform .2s }

.btn-wa-quick {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--whatsapp); color:#fff;
  transition:var(--t); box-shadow:0 3px 10px rgba(37,211,102,.3);
}
.btn-wa-quick:hover { background:var(--whatsapp-dark); transform:scale(1.1) }

/* ══════════════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════════════ */
#faq {
  max-width:760px; margin:0 auto; padding:60px 20px 80px;
}
.faq-heading {
  font-family:var(--font-h); font-size:clamp(26px,4.5vw,40px);
  font-weight:900; color:var(--text-dark); text-align:center;
  margin-bottom:40px; line-height:1.2;
}
.faq-heading em { font-style:normal; color:var(--red) }

.faq-item { border:1.5px solid var(--warm-gray); border-radius:var(--r-md); margin-bottom:12px; overflow:hidden; transition:var(--t) }
.faq-item:hover { border-color:rgba(230,57,70,.3) }

.faq-q {
  width:100%; text-align:left; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--font-h); font-size:15px; font-weight:700; color:var(--text-dark);
  background:var(--white); transition:var(--t);
}
.faq-q:hover { background:var(--paper) }
.faq-q[aria-expanded="true"] { background:var(--paper); color:var(--red) }

.faq-icon { font-size:20px; font-weight:700; color:var(--red); transition:transform .3s var(--ease); flex-shrink:0 }
.faq-q[aria-expanded="true"] .faq-icon { transform:rotate(45deg) }

.faq-a { max-height:0; overflow:hidden; transition:max-height .4s var(--ease) }
.faq-a.open { max-height:300px }
.faq-a-body { padding:0 20px 18px; font-size:14px; color:var(--text-mid); line-height:1.7 }

/* ══════════════════════════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; background:rgba(26,18,8,.55);
  backdrop-filter:blur(4px); z-index:1000;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.overlay.show { opacity:1; pointer-events:all }

.cart-drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(400px,100vw);
  background:var(--white); z-index:1001;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .35s var(--ease);
  box-shadow:-8px 0 40px rgba(26,18,8,.2);
}
.cart-drawer.open { transform:translateX(0) }

.cdwr-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1.5px solid var(--warm-gray);
  background:var(--off-white);
}
.cdwr-title { font-family:var(--font-h); font-size:18px; font-weight:900; color:var(--text-dark) }
.cdwr-close {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--paper); font-size:16px; color:var(--text-mid);
  transition:var(--t);
}
.cdwr-close:hover { background:var(--red); color:#fff }

.cdwr-body { flex:1; overflow-y:auto; padding:16px }

.cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; gap:10px; padding:40px 20px }
.cart-empty-icon { font-size:60px }
.cart-empty h3 { font-family:var(--font-h); font-size:18px; font-weight:800; color:var(--text-dark) }
.cart-empty p { font-size:13px; color:var(--text-light) }

/* Cart items */
.cart-item {
  display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--warm-gray);
}
.ci-img { width:62px; height:62px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0 }
.ci-info { flex:1; min-width:0 }
.ci-name { font-family:var(--font-h); font-size:14px; font-weight:800; color:var(--text-dark); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ci-price { font-size:13px; color:var(--text-mid); margin-bottom:8px }
.ci-qty { display:flex; align-items:center; gap:8px }
.ci-qty button {
  width:28px; height:28px; border-radius:50%; border:1.5px solid var(--warm-gray);
  display:flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700; color:var(--text-dark); transition:var(--t);
}
.ci-qty button:hover { background:var(--red); color:#fff; border-color:var(--red) }
.ci-qty-n { font-family:var(--font-h); font-size:15px; font-weight:800; min-width:20px; text-align:center }
.ci-remove { align-self:flex-start; color:var(--text-light); font-size:18px; line-height:1; transition:var(--t); flex-shrink:0 }
.ci-remove:hover { color:var(--danger) }

/* Cart footer */
.cdwr-foot { padding:16px 20px; border-top:1.5px solid var(--warm-gray); background:var(--off-white) }

.fulfill-wrap { margin-bottom:14px }
.fulfill-label { font-size:12px; font-weight:700; color:var(--text-mid); text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px }
.fulfill-toggle { display:flex; gap:8px }
.fulf-btn {
  flex:1; padding:9px 10px; border-radius:var(--r-sm); border:1.5px solid var(--warm-gray);
  font-size:13px; font-weight:700; color:var(--text-mid); transition:var(--t);
  font-family:var(--font-b);
}
.fulf-btn.active { background:var(--red); color:#fff; border-color:var(--red) }

/* Pickup panel */
.pickup-map-frame { width:100%; height:160px; border-radius:var(--r-sm); border:0; margin-bottom:10px }
.pickup-info { font-size:12.5px; color:var(--text-mid); display:flex; flex-direction:column; gap:3px }
.pickup-addr  { font-weight:600; color:var(--text-dark) }
.pickup-ready { font-weight:700; color:var(--green); margin-top:3px }
.btn-get-directions {
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-size:13px; font-weight:700; color:var(--red); text-decoration:underline;
}

/* Shipping note */
.ship-note { font-size:12.5px; color:var(--text-mid); text-align:center; margin:10px 0; min-height:20px }
.ship-note strong { color:var(--green) }

/* Summary */
#cart-summary { margin-bottom:14px }
.summary-row { display:flex; justify-content:space-between; padding:5px 0; font-size:14px; color:var(--text-mid) }
.summary-row.grand { font-family:var(--font-h); font-size:16px; font-weight:900; color:var(--text-dark); border-top:1.5px solid var(--warm-gray); padding-top:10px; margin-top:4px }

/* WA order button */
.btn-order-wa {
  display:flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(135deg, var(--whatsapp) 0%, var(--whatsapp-dark) 100%);
  color:#fff; font-family:var(--font-h); font-size:16px; font-weight:900;
  padding:15px; border-radius:var(--r-md); width:100%;
  transition:var(--t); text-decoration:none;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
}
.btn-order-wa:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(37,211,102,.5) }
.btn-order-wa svg { width:22px; height:22px }

/* ══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */
footer {
  background: linear-gradient(150deg, #1a1208 0%, #2d1810 100%);
  color:rgba(255,255,255,.65);
  padding:56px 24px 0;
}
.foot-inner { max-width:1300px; margin:0 auto }

.foot-top {
  display:grid;
  grid-template-columns: 2fr 1.2fr 1.2fr;
  gap:48px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
@media (max-width:768px) { .foot-top { grid-template-columns:1fr; gap:32px } }

.foot-logo { display:flex; align-items:center; gap:10px; margin-bottom:12px }
.foot-logo-icon { font-size:32px }
.foot-logo-text { font-family:var(--font-h); font-size:24px; font-weight:900; color:#fff }
.foot-desc { font-size:13px; line-height:1.65; max-width:320px; color:rgba(255,255,255,.45); margin-bottom:18px }

.foot-social { display:flex; gap:8px }
.social-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:40px; font-size:13px; font-weight:700;
  transition:var(--t); border:1.5px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);
}
.social-btn:hover { border-color:rgba(255,255,255,.4); color:#fff }
.wa-btn { border-color:var(--whatsapp); color:var(--whatsapp) }
.wa-btn:hover { background:var(--whatsapp); color:#fff }

.foot-contact h4,
.foot-menu-links h4 {
  font-family:var(--font-h); font-size:14px; font-weight:800; color:#fff;
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px;
}
.foot-contact p { font-size:13px; margin-bottom:6px }
.foot-contact a { color:rgba(255,255,255,.55); transition:color .2s }
.foot-contact a:hover { color:var(--yellow) }

.foot-menu-links { display:flex; flex-direction:column; gap:8px }
.foot-menu-links a { font-size:13px; color:rgba(255,255,255,.55); transition:color .2s; cursor:pointer }
.foot-menu-links a:hover { color:var(--yellow) }

.foot-bottom {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; flex-wrap:wrap; gap:14px;
  font-size:12px; color:rgba(255,255,255,.25);
}
.foot-links { display:flex; gap:18px; flex-wrap:wrap }
.foot-links a { color:rgba(255,255,255,.35); transition:color .2s }
.foot-links a:hover { color:rgba(255,255,255,.75) }

/* ══════════════════════════════════════════════════════════════
   FLOATING WHATSAPP
══════════════════════════════════════════════════════════════ */
.float-wa {
  position:fixed; bottom:24px; right:24px; z-index:800;
  width:58px; height:58px; border-radius:50%;
  background:var(--whatsapp); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.5);
  transition:var(--t); animation:wa-pulse 2.5s ease-in-out infinite;
}
.float-wa:hover { transform:scale(1.1); box-shadow:0 8px 28px rgba(37,211,102,.65); animation:none }
.float-wa svg { width:30px; height:30px; fill:#fff }
@keyframes wa-pulse {
  0%,100% { box-shadow:0 4px 20px rgba(37,211,102,.5) }
  50%      { box-shadow:0 4px 30px rgba(37,211,102,.8), 0 0 0 8px rgba(37,211,102,.1) }
}
.float-wa-tip {
  position:absolute; right:66px; white-space:nowrap;
  background:var(--text-dark); color:#fff; font-size:12px; font-weight:700;
  padding:6px 12px; border-radius:var(--r-sm);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.float-wa:hover .float-wa-tip { opacity:1 }

/* ══════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════ */
.toast {
  position:fixed; bottom:100px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--text-dark); color:#fff; border-left:4px solid var(--yellow);
  font-size:14px; font-weight:600; padding:12px 22px; border-radius:var(--r-sm);
  box-shadow:var(--sh-md); z-index:2000;
  opacity:0; pointer-events:none;
  transition:opacity .3s, transform .3s var(--ease);
  white-space:nowrap; max-width:calc(100vw - 40px);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)) }
}
@media (max-width:640px) {
  :root { --hh:62px }

  .hdr-inner { padding:0 14px; gap:10px }
  .logo-icon { font-size:24px }
  .logo-main { font-size:18px }
  .logo-sub  { display:none }
  .hdr-search { padding:7px 12px }
  .cart-btn   { padding:8px 14px; font-size:13px }

  .ribbon { font-size:11px; padding:9px 14px }

  #hero { padding:72px 16px 60px }
  h1.hero-title { letter-spacing:-1.5px }
  .hero-sub { font-size:15px }
  .hero-stats { gap:28px }
  .hstat-n { font-size:22px }

  .trust-grid { grid-template-columns:repeat(3,1fr); gap:16px }
  .trust-icon  { font-size:22px }
  .trust-label { font-size:12px }
  .trust-sub   { display:none }

  #products { padding:44px 14px }
  .product-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px }
  .card-body { padding:12px 12px 14px }
  .card-name { font-size:14px }
  .card-desc { display:none }
  .price { font-size:18px }
  .btn-add { padding:9px 12px; font-size:13px }

  #faq { padding:44px 14px 60px }

  .cdwr-title { font-size:16px }
  .btn-order-wa { font-size:14px; padding:13px }
}
@media (max-width:380px) {
  .product-grid { grid-template-columns:1fr 1fr; gap:10px }
  .hero-ctas { flex-direction:column; align-items:center }
}