:root{
      /* THEME */
      --cream:#F8F3E7;           /* cream */
      --deep-cream:#EADCC2;      /* deep cream */
      --green:#1E4D32;           /* dark green */
      --gold:#C6A75B;            /* gold */
      --black:#0E0E0E;           /* black */
      --blue:#1E6FEA;            /* blue accent (sparingly) */
      /* UTIL */
      --glass-bg:rgba(255,255,255,.12);
      --glass-brd:rgba(255,255,255,.28);
      --shadow:0 10px 30px rgba(0,0,0,.10);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color:#17212F; background:linear-gradient(180deg,var(--cream),var(--deep-cream));
      overflow-x:hidden;
    }
    .wrap{max-width:1280px;margin:0 auto;padding:0 20px}

    /* Header (simple since hero carries weight) */
    header{position:sticky;top:0;z-index:50;background:rgba(250,247,240,.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
    .hd{display:flex;align-items:center;gap:16px;padding:14px 0}
    .brand{font-family:"Playfair Display",serif;font-weight:800;font-size:20px;color:var(--green)}
    .nav{margin-left:auto;display:flex;gap:14px}
    .nav a{color:#2d3a3a;text-decoration:none;font-weight:600}

    /* HERO */
    .hero{position:relative;min-height:90vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid rgba(0,0,0,.06)}
    .hero-bg{
  position:absolute;
  inset:0;
  background:url('images/supermarket.jpeg') center/cover no-repeat;
  filter:saturate(1.05) contrast(1.02);
}
    /* soft vignette */
    .hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 700px at 70% -10%, rgba(255,255,255,.30), rgba(0,0,0,.35) 70%, rgba(0,0,0,.55));mix-blend:multiply}
    /* Glass overlay */
    .hero-glass{position:absolute;inset:0;background:linear-gradient(180deg, rgba(248,243,231,.25), rgba(248,243,231,.15));backdrop-filter:blur(2px)}

    /* Canvas particles (WebGL-like look, pure Canvas2D for reliability) */
    canvas#fx{position:absolute;inset:0;pointer-events:none}

    .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:96px 0}
    @media(max-width:960px){.hero-inner{grid-template-columns:1fr;padding:88px 0}}

    .hero-card{border-radius:var(--radius);padding:26px;background:rgba(255,255,255,.28);backdrop-filter:blur(12px) saturate(130%);border:1px solid rgba(255,255,255,.45);box-shadow:var(--shadow)}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;font-weight:800;font-size:12px;letter-spacing:2px;color:var(--green)}
    .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--green);
  box-shadow:0 0 12px var(--green);
}

    h1.hero-title{font-family:"Playfair Display",serif;font-weight:800;letter-spacing:.2px;color:#0f1b14;margin:10px 0 10px;font-size:clamp(34px,6vw,64px);line-height:1.05}
    .hero-sub{
  color:rgba(255,255,255,0.95);
  opacity:1;
}
.hero-actions .btn{
  padding:9px 16px !important;
  font-size:14px !important;
  border-radius:12px !important;
}

/* ↓ ADD THIS RIGHT BELOW */
.hero-actions .btn{
  width:fit-content !important;
  min-width:120px;     /* adjust this number to change length */
}
.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:18px;
}
    .btn{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.06);
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
    .btn-solid{background:linear-gradient(135deg,var(--green),#276645);color:#fff}
    .btn-ghost{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);color:#123;}
    .btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.10)}

    /* Floating Cart in hero */
    .cart-float{position:absolute;top:22px;right:22px;z-index:3}
    .cart-btn{position:relative;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);border-radius:14px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-weight:800;color:#1b2a21;box-shadow:var(--shadow)}
    .cart-count{position:absolute;top:-8px;right:-8px;background:var(--gold);color:#1b1200;width:22px;height:22px;display:grid;place-items:center;border-radius:999px;font-size:12px;border:2px solid #fff}

    .hero-side{display:grid;gap:14px}
    .hero-ticket{border-radius:var(--radius);padding:18px;background:rgba(255,255,255,.28);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.45);color:#0e1511}
    .spark{height:70px;border-radius:12px;background:linear-gradient(180deg, rgba(30,111,234,.24), rgba(30,111,234,0) 70%);border:1px solid rgba(0,0,0,.06)}

    /* Sections */
    section{padding:64px 0}
    h2.sec-title{font-family:"Playfair Display",serif;color:var(--green);font-size:34px;margin:0 0 8px}
    p.lead{margin:0 0 20px;color:#2b352f;opacity:.8}

    /* Features */
    .features{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
    .feature{background:rgba(255,255,255,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
    .feature i{color:var(--gold)}
    @media(max-width:960px){.features{grid-template-columns:repeat(2,1fr)}}

    /* Categories & Products */
    .cat-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
    .cat-chip{padding:10px 14px;border-radius:999px;border:1px solid rgba(0,0,0,.08);background:#fff;font-weight:700;cursor:pointer}
    .cat-chip.active{background:linear-gradient(135deg,var(--gold),#f2e5b9)}

    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
    .card{grid-column:span 3;background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
    .card:hover{transform:translateY(-6px)}
    .imgbox{position:relative;height:180px;background:#f3efe5}
    .imgbox img{width:100%;height:100%;object-fit:cover}
    .pill{position:absolute;top:10px;left:10px;background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.06);padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px}
    .content{padding:14px}
    .title{font-weight:800}
    .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
    .price{font-weight:900;color:var(--green)}
    .order{border:none;border-radius:10px;padding:10px 12px;background:linear-gradient(135deg,var(--green),#276645);color:#fff;font-weight:800;cursor:pointer}
    @media(max-width:1024px){.card{grid-column:span 4}}
    @media(max-width:720px){.card{grid-column:span 12}}

    /* Weekly Promotions */
    .promo{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
    .promo .panel{background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:var(--shadow);padding:18px}
    .promo .banner{min-height:220px;background:url('https://images.unsplash.com/photo-1511697579930-774eacbba1c1?q=80&w=1600&auto=format&fit=crop') center/cover;border-radius:14px}
    @media(max-width:960px){.promo{grid-template-columns:1fr}}

    /* Store Info */
    .info{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
    .mapbox, .infobox{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
    .infobox{padding:18px}
    .mapbox iframe{display:block;width:100%;height:100%;min-height:300px;border:0}
    @media(max-width:960px){.info{grid-template-columns:1fr}}

    /* Coming Soon */
    .soon{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
    .soon .tile{padding:18px;border-radius:16px;background:rgba(255,255,255,.6);backdrop-filter:blur(8px);border:1px solid rgba(0,0,0,.06);text-align:center;font-weight:800;box-shadow:var(--shadow)}
    @media(max-width:1000px){.soon{grid-template-columns:repeat(2,1fr)}}

    /* Modal */
    .modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;place-items:center;z-index:100}
    .modal.active{display:grid}
    .modal-card{background:#fff;border-radius:18px;max-width:520px;width:92%;padding:22px;border:1px solid rgba(0,0,0,.08);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.25)}
    .modal-card h3{font-family:"Playfair Display",serif;color:var(--green);margin:0 0 6px}
    .modal-card p{opacity:.8;margin:0 0 16px}
    .modal .close{border:none;background:linear-gradient(135deg,var(--gold),#f2e5b9);padding:10px 14px;border-radius:10px;font-weight:800;cursor:pointer}

    /* Entrances */
    .reveal{opacity:0;transform:translateY(16px)}
    .reveal.show{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
  
    /* === Overrides per feedback: smaller hero glass cards, higher contrast, tighter layout === */
    .hero-content{grid-template-columns:1fr .9fr; padding:64px 20px 48px}
    .hero .glass-card{border-radius:18px; backdrop-filter:blur(16px) saturate(150%); background:radial-gradient(120% 120% at 10% -10%, rgba(18,24,38,0.45), rgba(18,24,38,0.22)) !important; border:1px solid rgba(255,255,255,0.18)}
    .hero-copy{padding:18px !important}
    .hero-visual{padding:14px !important}
    .hero .title{color:#fff; text-shadow:0 6px 26px rgba(0,0,0,.45)}
    .hero .subtitle{color:rgba(255,255,255,.92)}
    .eyebrow{color:#e8f9ff}

    /* === Smaller, smarter product cards === */
    .item-grid{gap:10px}
    .item-card{grid-column:span 2; min-height:unset; border-radius:14px}
    .item-thumb{aspect-ratio:1/1}
    .item-body{padding:8px 10px}
    .item-name{font-size:13px}
    .price{font-size:13px}
    .order-btn{padding:7px 9px; font-size:11px; border-radius:9px}
    @media(max-width:1024px){.item-card{grid-column:span 3}}
    @media(max-width:700px){.item-card{grid-column:span 6}}

    /* === Global animation primitives === */
    @keyframes fadeUpFast{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}
    @keyframes softGlow{from{box-shadow:0 0 0 rgba(23,209,255,0)} to{box-shadow:0 10px 26px rgba(23,209,255,.25)}}
    .reveal{animation:fadeUpFast .45s cubic-bezier(.2,.8,.2,1) both}
    .hover-glow:hover{animation:softGlow .25s forwards}

    /* Improve readability on all glass cards */
    .glass-card, .service, .card{color:#fff}


    /* === Category Switcher styles (compact, smart cards) === */
    .cat-tabs{display:flex;gap:8px;flex-wrap:wrap;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);padding:10px;border-radius:14px;position:sticky;top:68px;z-index:40;backdrop-filter:blur(8px)}
    .cat-tab{padding:8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,0.18);color:#fff;font-weight:700;font-size:12px;letter-spacing:.2px;cursor:pointer;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.04));transition:transform .15s ease,background .2s ease}
    .cat-tab.active{background:linear-gradient(135deg,rgba(23,209,255,.25),rgba(156,255,132,.18))}
    .cat-tab:hover{transform:translateY(-2px)}

    .item-grid{margin-top:16px;display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
    .item-card{grid-column:span 3;display:flex;flex-direction:column;gap:8px;background:radial-gradient(120% 120% at 10% -10%, rgba(255,255,255,.16), rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;box-shadow:0 6px 26px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s}
    .item-card:hover{transform:translateY(-4px);box-shadow:0 16px 42px rgba(0,0,0,.35)}
    .item-thumb{aspect-ratio:4/3;background:#0a1126;position:relative;overflow:hidden}
    .item-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05)}
    .item-body{padding:10px 12px;color:#fff}
    .item-name{font-weight:800;font-size:14px;line-height:1.2;margin:0 0 4px}
    .item-meta{display:flex;justify-content:space-between;align-items:center}
    .price{font-weight:900;font-size:14px;color:#c7fff1}
    .order-btn{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(135deg, rgba(23,209,255,.18), rgba(156,255,132,.16));color:#fff;font-weight:800;font-size:12px;cursor:pointer}
    

    @media(max-width:1024px){.item-card{grid-column:span 4}}
    @media(max-width:700px){.item-card{grid-column:span 12}}

/* Stronger hero card bouncing animation */
.hero-card{
  animation: heroFloat 3s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes heroFloat{
  0%{
    transform: translateY(0) scale(1);
  }
  25%{
    transform: translateY(-18px) scale(1.03);
  }
  50%{
    transform: translateY(0) scale(1);
  }
  75%{
    transform: translateY(-12px) scale(1.02);
  }
  100%{
    transform: translateY(0) scale(1);
  }
}


/* --- RESPONSIVE FIX FOR FEATURE CARDS --- */

/* Tablet */
@media (max-width: 960px){
  .features{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

/* Phone */
@media (max-width: 600px){
  .features{
    grid-template-columns: 1fr;
  }
}

#features::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:220px;
  background:
    radial-gradient(80% 60% at 0% 0%, rgba(255,255,255,0.14) 0%, transparent 60%),
    radial-gradient(70% 50% at 100% 0%, rgba(255,255,255,0.10) 0%, transparent 60%),
    radial-gradient(55% 40% at 50% -10%, rgba(255,255,255,0.09) 0%, transparent 65%);
  opacity:0.9;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

/* STORE FEATURES SECTION – CLEAN RESET */
#features{
  position: relative;
  background:#4a2414;          /* deep brown */
  padding:40px 0 56px;
  overflow:hidden;
}

#features .wrap{
  position:relative;
  z-index:1;
}

#features .sec-title{
  color:#ffffff;
}

#features .lead{
  color:rgba(255,255,255,0.85);
}


/* Feature cards layout on brown */
.features{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  max-width:620px;      /* narrower so brown shows at the sides */
  margin:24px auto 0;   /* center in the section */
}

.feature{
  background:#fff;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* Fix Store Features padding coming from global styles */
#features .features{
  padding: 0 !important;      /* remove that big top/bottom padding */
  margin-top: 24px;           /* small, clean gap below the text */
  background: transparent !important;
}

#features {
  position: relative;
  background: #4a2a14; /* your brown */
  padding: 40px 0 40px 0;
  overflow: hidden;
}

/* flower PNG decoration */
#features::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);  /* perfectly center it */
  
  width: 900%;          /* covers most of the section but doesn't hit the edges */
  height: 750px;        /* make it tall enough to show the full artwork */

  background: url("images/flower2.png") no-repeat center top;
  background-size: contain;     /* keep the exact shape, no stretch */

  opacity: 0.70;        /* more gentle but visible */
  pointer-events: none;
  z-index: 0;
}

#categories {
  background: #F5E8CC;   /* warm luxury cream */
  padding: 50px 0;       /* keeps it spacious */
}

.item-name {
  color: #145c32; /* green */
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
}

.price {
  color: #c6a75b; /* gold */
  font-weight: 700;
}

.pill {
  background: rgba(198,167,91,0.96); /* gold */
  color: #fff;
}
.item-name{
  display:block;
  margin-bottom:4px;
  font-weight:700;
  font-size:14px;
  color:#165634;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: pulseDot 1.6s ease-in-out infinite;
}

@keyframes pulseDot {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px var(--green);
  }
  50% {
    transform: scale(1.35);
    box-shadow: 0 0 20px var(--green);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px var(--green);
  }
}

/* === WEEKLY PROMOTIONS NEW DESIGN === */

.promo{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
@media(max-width:900px){
  .promo{
    grid-template-columns:1fr;
  }
}

.promo-card{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  padding:18px 18px 20px;
  background:radial-gradient(160% 160% at 0% 0%,
             rgba(255,255,255,0.92),
             rgba(245,232,204,0.96));
  box-shadow:0 18px 40px rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.9);
  transform-origin:center center;
  animation:promoFloat 6s ease-in-out infinite;
}

.promo-opening{
  animation-delay:1.2s;
}

.promo-glow{
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0% 0%,
      rgba(198,167,91,0.26) 0%,
      transparent 55%),
    radial-gradient(circle at 120% 0%,
      rgba(30,77,50,0.18) 0%,
      transparent 60%);
  opacity:0.9;
  mix-blend-mode:soft-light;
  pointer-events:none;
}

.promo-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.9);
  color:#145632;
}

.promo-tag.highlight{
  background:rgba(198,167,91,0.95);
  color:#fff;
}

.promo-title{
  margin:12px 0 6px;
  font-family:"Playfair Display",serif;
  font-size:20px;
  color:var(--green);
}

.promo-text{
  margin:0 0 14px;
  font-size:14px;
  line-height:1.5;
  color:#2b352f;
  opacity:.9;
}

.promo-btn{
  padding:8px 14px !important;
  font-size:13px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--green),#276645);
  color:#fff;
  border:none;
}

/* Float animation */
@keyframes promoFloat{
  0%   { transform:translateY(0) scale(1); }
  25%  { transform:translateY(-8px) scale(1.01); }
  50%  { transform:translateY(0) scale(1); }
  75%  { transform:translateY(-5px) scale(1.01); }
  100% { transform:translateY(0) scale(1); }
}

.promo-card:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 26px 60px rgba(0,0,0,0.3);
}

/* Force promo cards to be visible */
#promotions .promo-card {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* Force promo buttons to be short and left-aligned */
#promotions .promo-btn {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 18px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 700;
}


/* === PROMO MODAL STYLES === */
#promoModal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  place-items: center;
  z-index: 200;
}

#promoModal.active {
  display: grid;
}

.promo-modal-card {
  background: #fff;
  width: 92%;
  max-width: 520px;
  border-radius: 20px;
  padding: 22px 20px;
  text-align: left;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  border: 1px solid rgba(0,0,0,0.1);
}

.promo-modal-card h3 {
  font-family: "Playfair Display", serif;
  margin: 0 0 6px;
  color: var(--green);
  font-size: 22px;
}

.promo-note {
  opacity: 0.85;
  margin-bottom: 16px;
  line-height: 1.4;
}

.promo-section {
  background: #f8f5ed;
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,0.06);
}

.promo-section h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
}

.promo-section p {
  margin: 0;
  opacity: .85;
  font-size: 14px;
}

.promo-actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.promo-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: center;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}

.promo-btn.whatsapp {
  background: #25D366;
}

.promo-btn.call {
  background: var(--green);
}

.promo-close {
  margin-top: 16px;
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: none;
  font-weight: 800;
  background: var(--gold);
  color: #fff;
  cursor: pointer;
}

.promo-actions .promo-btn {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 999px;
}

/* Force smaller CTAs inside promo popup */
#promoModal .promo-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-start;
}

#promoModal .promo-actions .promo-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 5px 10px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
}

/* Promo modal CTA layout */
#promoModal .promo-actions {
  display: flex;
  justify-content: space-between; /* push left & right */
  align-items: center;
  margin-top: 14px;
}

#promoModal .promo-actions .promo-btn {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  width: auto !important;
}

/* Center the header inside the promo popup */
#promoModal h3 {
  text-align: center !important;
  width: 100%;
}

#promoModal .promo-note {
  text-align: center !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Dark premium background for "Visit Us" section */
#info {
  background: #0C0F14;        /* deep charcoal like your screenshot */
  padding: 50px 0 60px;
}

/* Make heading + hours readable on dark bg */
#info .sec-title,
#info .lead {
  color: #ffffff;
}

/* Make the map + address cards pop on the dark bg */
#info .mapbox,
#info .infobox {
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  border-radius: 18px;
}


/* Flower overlay for Visit Us — WITHOUT altering existing background */
#info {
  position: relative;
  overflow: hidden;
  /* your original background stays untouched */
}

#info::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);

  width: 800px;
  height: 800px;

  background: url("images/flower3.png") no-repeat center top;
  background-size: contain;

  opacity: 0.2;          /* visible but not overpowering */
  pointer-events: none;

  z-index: 0;             /* behind all content */
}

#info .wrap {
  position: relative;
  z-index: 2;             /* keeps content above the flower */
}

.google-preview {
  background: #f7f7f7;
  padding: 14px;
  border-radius: 14px;
  margin: 12px 0 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.gp-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gp-icon {
  width: 34px;
  height: 34px;
}

.gp-rating {
  font-weight: 700;
  color: var(--green);
  margin: 0;
  font-size: 15px;
}

.gp-count {
  margin: 0;
  opacity: .65;
  font-size: 13px;
}

.gp-review {
  font-size: 14px;
  opacity: .85;
  margin-top: 10px;
  line-height: 1.45;
}

.gp-author {
  font-weight: 600;
  color: var(--green);
  font-size: 13px;
}
.gp-stars {
  color: #F4B400;   /* Official Google star color */
  letter-spacing: 1px;
}

/* Coming Soon section background (copying Visit Us) */
#soon {
  position: relative;
  background: #0C0F14;   /* SAME dark background as Visit Us */
  padding: 50px 0;
  overflow: hidden;
  z-index: 1;
}

#soon::before {
  content: "";
  position: absolute;
  top: -80px; 
  left: 50%;
  transform: translateX(-50%);

  width: 700px;
  height: 700px;

  background: url("images/flower3.png") no-repeat center top;
  background-size: contain;

  opacity: 0.22;           /* same strength */
  pointer-events: none;

  z-index: 0;
}

#soon .wrap,
#soon .tile {
  position: relative;
  z-index: 2;              /* content stays above flower */
}
/* Make Coming Soon text white */
#soon .sec-title,
#soon .lead,
#soon .tile {
  color: #ffffff !important;
}

#soon .tile {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
/* Strong bounce animation for Coming Soon tiles */
@keyframes soonBounce {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-14px) scale(1.03); }
  50%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(-10px) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}

#soon .tile {
  animation: soonBounce 3s ease-in-out infinite;
  transform-origin: center center;
}
.cart-float{
  position: fixed;   /* <-- this makes it float on screen */
  top: 100px;         /* adjust until it sits perfectly under the header */
  right: 16px;
  z-index: 9999;     /* stays above everything */
}