.reveal{opacity:0;transform:translateY(12px)}
.reveal.visible{opacity:1;transform:translateY(0);transition:opacity 420ms ease,transform 420ms ease}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.visible,.product-image,.thumb-image,.card,.btn,.icon-btn,#hero-img,.hero-overlay,.hero-dot,#hero-prev,#hero-next,#deals-prev,#deals-next,#dept-prev,#dept-next{transition:none!important;animation:none!important}
}

:root{
  /* Typography */
  --font-body:'Inter','Roboto',sans-serif;
  --font-heading:'Poppins','Inter','Roboto',sans-serif;
  --font-ui:'Inter','Roboto',sans-serif;

  /* Brand colours */
  --green:#2e7d52;
  --green-dark:#1b5e38;
  --green-light:#e8f5ee;
  --orange:#f07c2a;
  --orange-light:#fff3e9;

  /* Neutrals */
  --bg:#f5f6f7;
  --bg-alt:#ffffff;
  --text:#2d3a48;
  --text-soft:#4a5568;
  --muted:#8a94a6;
  --border:#dde1e7;

  --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.09);
  --shadow-lg:0 8px 28px rgba(0,0,0,.12);

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;

  --ring:0 0 0 3px rgba(46,125,82,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3,h4{line-height:1.25}
p{line-height:1.7}
h1{margin:0 0 1rem;font-weight:800;letter-spacing:-.025em;font-size:clamp(2rem,2.5vw + 1rem,2.9rem)}
h2{margin:0 0 .65rem;font-weight:700;letter-spacing:-.02em;font-size:clamp(1.4rem,1vw + 1rem,1.9rem)}
h3{margin:0 0 .4rem;font-weight:600;letter-spacing:-.01em;font-size:clamp(1rem,.4vw + .9rem,1.2rem)}
h4{margin:0 0 .35rem;font-weight:600;font-size:.95rem;letter-spacing:.01em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* Typography: Headings → Poppins | Body/UI → Inter | Forms/Fallback → Roboto */
h1,h2,h3,h4{font-family:var(--font-heading)}

/* Inputs, buttons, selects, textareas — override browser default (Times/serif) */
input,textarea,select,button{font-family:var(--font-ui)}
.btn{font-family:var(--font-ui)}
.main-nav a{font-family:var(--font-ui)}
.footer-column h4{font-family:var(--font-heading)}
label{font-family:var(--font-ui)}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

img{max-width:100%;display:block}

.spa-page{display:none}
.spa-page-active{display:block}
main{margin-bottom:0;padding-bottom:0}

.container{width:min(1140px,100% - 3rem);margin:0 auto}

.section{padding:1.5rem 0;position:relative}
.section::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:var(--border);
}
.section-alt{
  background:var(--bg-alt);
}
.section-highlight{
  background:var(--green);
  color:#fff;
}
.section-highlight::before{display:none}
.section-how-it-works{background:#f9faf8}

.section-header{text-align:center;margin-bottom:2.75rem}
.section-header h2{margin-bottom:.5rem}
.section-header p{margin:0;color:var(--muted);max-width:52ch;margin-inline:auto;font-size:.97rem;line-height:1.65}

.section-highlight h1,.section-highlight h2,.section-highlight h3,.section-highlight h4{color:#fff}
.section-highlight p,.section-highlight li{color:rgba(255,255,255,.88)}
.section-highlight .section-header p{color:rgba(255,255,255,.82)}

/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  /* thin green top accent line */
  box-shadow:inset 0 3px 0 0 var(--green);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:.65rem 0;
}

/* Logo */
img.logo{ height:64px }
.logo img{ height:64px }
.logo-placeholder{
  width:auto;height:auto;
  border:none;border-radius:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
}
.logo:hover{ opacity:.88;text-decoration:none }

/* Search */
.header-search{
  flex:1;
  max-width:460px;
  position:relative;
}
.header-search::before{
  content:"🔍";
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.85rem;
  pointer-events:none;
  opacity:.45;
}
.header-search input[type="search"]{
  width:100%;
  padding:.6rem 1rem .6rem 2.4rem;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:#f5f6f7;
  font-size:.92rem;
  color:var(--text);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease;
}
.header-search input[type="search"]:hover{
  border-color:var(--green);
  background:#fff;
}
.header-search input[type="search"]:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:var(--ring);
  background:#fff;
}

/* Nav */
.main-nav{
  display:flex;
  gap:.5rem;
  font-size:.9rem;
}
.main-nav a{
  color:var(--muted);
  font-weight:600;
  padding:.42rem .85rem;
  border-radius:999px;
  transition:color .15s ease,background .15s ease;
  text-decoration:none;
}
.main-nav a:hover{ text-decoration:none }
.main-nav a:nth-child(1):hover,.main-nav a:nth-child(1).active{
  color:var(--green-dark);
  background:var(--green-light);
}
.main-nav a:nth-child(2):hover,.main-nav a:nth-child(2).active{
  color:var(--orange);
  background:var(--orange-light);
}
.main-nav a:nth-child(3):hover,.main-nav a:nth-child(3).active{
  color:var(--teal);
  background:#e6f7f5;
}

/* Header action area */
.header-actions{
  display:flex;
  align-items:center;
  gap:.85rem;
  position:relative;
}

/* Icon buttons (cart) */
.icon-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.icon-btn:hover{
  background:var(--green-light);
  border-color:var(--green);
  transform:translateY(-1px);
}
.icon-btn:active{transform:translateY(0)}
.icon-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.icon{width:18px;height:18px;display:block;color:var(--green-dark)}
.badge{
  position:absolute;
  top:-3px;right:-2px;
  min-width:16px;height:16px;
  border-radius:999px;
  background:var(--orange);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 6px rgba(240,124,42,.35);
}

.profile-menu{position:absolute;right:.25rem;top:calc(100% + .65rem);z-index:50}
.menu-card{
  width:240px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 22px 48px rgba(15,23,42,.14);
  backdrop-filter:blur(10px);
  overflow:hidden;
}
#profile-menu-items{display:grid;padding:.55rem;gap:.35rem}
#profile-menu-items a,#profile-menu-items button{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  border-radius:.8rem;
  padding:.72rem .8rem;
  text-align:left;
  font-weight:800;
  color:var(--green-dark);
  cursor:pointer;
}
#profile-menu-items a:hover,#profile-menu-items button:hover{
  background:rgba(23,102,58,.07);
  border-color:rgba(23,102,58,.18);
  text-decoration:none;
}
#profile-menu[hidden]{display:none}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.62rem 1.35rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.95rem;
  font-weight:850;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease,filter .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{
  background:var(--green);
  color:#fff;
  border-color:var(--green-dark);
  box-shadow:0 2px 8px rgba(46,125,82,.22);
}
.btn-primary:hover{
  background:var(--green-dark);
  box-shadow:0 4px 14px rgba(46,125,82,.30);
}
.btn-accent{
  background:var(--orange);
  color:#fff;
  border-color:#d9661a;
  box-shadow:0 2px 8px rgba(240,124,42,.22);
}
.btn-accent:hover{
  background:#d96b20;
  box-shadow:0 4px 14px rgba(240,124,42,.30);
}
.btn-secondary{
  background:#fff;
  color:var(--green-dark);
  border-color:var(--border);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.btn-secondary:hover{
  border-color:var(--green);
  background:var(--green-light);
  box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.hero{
  padding:1.5rem 0 2rem;
  background:#f0fdf4;
  border-bottom:1px solid var(--border);
}
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:3rem;
  align-items:center;
}
.hero-text p{margin:0 0 1.55rem;max-width:34rem;color:var(--muted)}

.hero-slider{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:1rem;
  padding-inline:.75rem;
}
.hero-slide{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:none;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  background:#111;
  min-height:320px;
}
#hero-img{
  width:100%;
  height:clamp(320px,36vw,480px);
  object-fit:cover;
  display:block;
  filter:brightness(.82) saturate(1.05);
}
.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  gap:1rem;
  padding:2.5rem 2rem 4rem;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.18) 0%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.72) 100%
  );
  color:#fff;
}
.hero-overlay h1{
  margin:0;
  font-size:clamp(1.9rem,2.5vw + 1rem,3rem);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.22;
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.9), 0 4px 24px rgba(0,0,0,.7);
}
.hero-overlay p{
  margin:0;
  max-width:44ch;
  font-size:1.05rem;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.65);
  line-height:1.8;
}
.hero-overlay .btn{
  margin-top:1.6rem;
  align-self:center;
}

#hero-prev,#hero-next,#deals-prev,#deals-next,#dept-prev,#dept-next{
  width:44px;
  height:44px;
  align-self:center;
  border:1px solid var(--border);
  background:#fff;
  color:var(--text-soft);
  border-radius:999px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease,border-color .2s ease,background .2s ease,color .2s ease;
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
#hero-prev:hover,#hero-next:hover,#deals-prev:hover,#deals-next:hover,#dept-prev:hover,#dept-next:hover{
  transform:translateY(-1px);
  background:var(--green-light);
  border-color:var(--green);
  color:var(--green-dark);
}
#hero-prev:active,#hero-next:active,#deals-prev:active,#deals-next:active,#dept-prev:active,#dept-next:active{transform:translateY(0) scale(.98)}
#hero-prev:focus-visible,#hero-next:focus-visible,#deals-prev:focus-visible,#deals-next:focus-visible,#dept-prev:focus-visible,#dept-next:focus-visible{outline:none;box-shadow:var(--ring)}

.dept-slider{
  position:relative;
  overflow:visible;
  padding-block:1rem;
  margin-block:-1rem;
}
#home-departments-track{
  padding-inline:2.6rem !important;
  padding-block:1rem !important;
}
#dept-prev{
  position:absolute !important;
  left:-3.1rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
}
#dept-next{
  position:absolute !important;
  right:-3.1rem !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:3 !important;
}

.hero-dots{
  position:absolute;
  left:1.15rem;
  bottom:1.05rem;
  display:flex;
  gap:.45rem;
  z-index:3;
}
.hero-dots-below{
  position:static;
  margin-top:.85rem;
  width:100%;
  justify-content:center;
  align-items:center;
}
.hero-dot{
  width:10px;height:10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.25);
  cursor:pointer;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.hero-dot:hover{transform:translateY(-1px);background:rgba(255,255,255,.40)}
.hero-dot.active{background:var(--orange);border-color:var(--orange)}

.hero-image-placeholder,.banner-placeholder{
  border-radius:1.5rem;
  border:2px dashed var(--border);
  background:#fefce8;
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#a16207;
  font-weight:800;
  overflow:hidden;
}
.banner-placeholder{
  min-height:160px;
  border-radius:.95rem;
  background:#fafafa;
  color:var(--muted);
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
  justify-items:center;
}
.card{
  width:100%;
  background:#fff;
  border-radius:1.05rem;
  padding:1.35rem 1.45rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease,filter 180ms ease;
  overflow:hidden;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:var(--green);
}
.card:focus-within{border-color:var(--green);box-shadow:var(--ring),var(--shadow-md)}
.department-card h3{margin-top:.85rem}
.department-card p{color:var(--muted)}
.department-image{
  width:100%;
  border-radius:.85rem;
  margin-bottom:.5rem;
  object-fit:contain;
  height:130px;
  background:#f8f9fa;
  padding:.5rem;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
}

.deals-slider{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:1rem;
  padding-inline:.75rem;
}
.deals-grid{width:100%}

.deals-dots{
  grid-column:1 / -1;
  display:flex;
  justify-content:center;
  gap:.45rem;
  margin-top:.35rem;
}
.deals-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(31,41,55,.25);
  background:rgba(31,41,55,.18);
  cursor:pointer;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.deals-dot:hover{
  transform:translateY(-1px);
  background:rgba(31,41,55,.30);
}
.deals-dot.active{
  background:var(--orange);
  border-color:var(--orange);
}

.deal-card{
  position:relative;
  min-height:300px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:.35rem;
  background-image:
    linear-gradient(180deg,
      rgba(10,18,30,.10) 0%,
      rgba(10,18,30,.22) 35%,
      rgba(10,18,30,.72) 62%,
      rgba(10,18,30,.92) 100%
    ),
    var(--deal-image);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-color:rgba(255,255,255,.2);
}
.deal-card .card-body{
  padding:1rem 1.1rem 1.1rem;
  position:relative;
  z-index:1;
}
.deal-tag{
  position:absolute;
  top:1rem;right:1rem;
  background:var(--orange);
  color:#fff;
  padding:.28rem .62rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:700;
  box-shadow:0 2px 8px rgba(240,124,42,.30);
  z-index:2;
}
.deal-card h3,
.deal-card p,
.deal-card .link{
  position:relative;
  z-index:1;
}
.deal-card h3{
  color:#ffffff;
  font-size:1rem;
  font-weight:700;
  line-height:1.35;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 4px 16px rgba(0,0,0,.7);
  margin-bottom:.3rem;
}
.deal-card p{
  color:rgba(255,255,255,.9);
  font-size:.88rem;
  text-shadow:0 1px 3px rgba(0,0,0,.85), 0 3px 10px rgba(0,0,0,.6);
}
.deal-card .link{
  width:max-content;
  color:#7ee8a2;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:2px;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.deal-card .link:hover{color:#bbf7d0;text-decoration:underline}

.section-highlight .highlight-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}
.feature-list{margin:0;padding-left:1.1rem}
.feature-list li+li{margin-top:.4rem}

.how-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem;justify-items:center}
.how-card{padding-top:.75rem}
.how-image{
  width:100%;
  border-radius:.95rem;
  margin-bottom:.85rem;
  object-fit:cover;
  max-height:180px;
}

/* ============================================================
   SITE FOOTER
   ============================================================ */

.site-footer{
  background:#f0fdf4;
  border-top:none;
  margin-top:0;
}

/* Rainbow accent bar — sits flush at top, no gap */
.footer-bar{
  height:4px;
  background:linear-gradient(90deg,var(--green) 0%,var(--teal) 35%,var(--orange) 65%,var(--purple) 100%);
  display:block;
}

/* Main footer layout */
.footer-inner{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:5rem;
  padding:4rem 0 3.5rem;
  font-size:.92rem;
}

/* Brand column */
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}
.footer-logo-link{ display:inline-block }
.footer-logo-link:hover{ opacity:.85;text-decoration:none }
.footer-logo-link img.logo{ height:56px }

.footer-tagline{
  color:#3a4a3e;
  font-size:.92rem;
  line-height:1.75;
  margin:0;
}

/* Small badge pills under tagline */
.footer-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.footer-badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.74rem;
  font-weight:600;
  padding:.3rem .75rem;
  border-radius:999px;
}
.footer-badge.green{ background:var(--green-light);color:var(--green-dark);border:1px solid rgba(46,125,82,.25) }
.footer-badge.teal{ background:#e6f7f5;color:var(--teal);border:1px solid rgba(13,148,136,.25) }
.footer-badge.orange{ background:var(--orange-light);color:var(--orange);border:1px solid rgba(240,124,42,.25) }

/* Nav columns */
.footer-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}

.footer-column h4{
  margin:0 0 1.1rem;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#3a4a3e;
}
.footer-column a{
  display:block;
  color:#2d3a30;
  margin-bottom:.7rem;
  font-size:.88rem;
  transition:color .15s ease,padding-left .12s ease;
  text-decoration:none;
}
.footer-column a:hover{
  color:var(--green-dark);
  text-decoration:underline;
  padding-left:4px;
}

/* Social buttons */
.footer-social .social-row{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-top:0;
}
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.44rem .9rem;
  border-radius:.55rem;
  border:1px solid var(--border);
  background:#fff;
  color:#2d3a30;
  font-size:.83rem;
  font-weight:600;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease;
  text-decoration:none;
  width:fit-content;
  box-shadow:0 1px 4px rgba(15,23,42,.07);
}
.social-btn:hover{ text-decoration:none;transform:translateX(3px) }
.social-btn.facebook:hover{ background:#eff3fb;border-color:#3b5998;color:#3b5998 }
.social-btn.instagram:hover{ background:#fdf0f7;border-color:#e1306c;color:#e1306c }
.social-btn.twitter:hover{ background:#f0f8ff;border-color:#1da1f2;color:#1da1f2 }

/* Divider between brand and links */
.footer-inner .footer-brand{
  border-right:1px solid var(--border);
  padding-right:3rem;
}

/* Bottom bar */
.footer-bottom{
  border-top:1px solid var(--border);
  background:#e8f5ee;
  padding:1rem 0;
}
.footer-bottom .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem;
}
.footer-copy{
  color:#4a5a50;
  font-size:.77rem;
  margin:0;
}
.footer-copy:first-child{
  color:#2d3a30;
  font-weight:500;
}

/* Responsive */
@media(max-width:900px){
  .footer-inner{
    grid-template-columns:1fr;
    gap:2.5rem;
    padding:3rem 0 2.5rem;
  }
  .footer-inner .footer-brand{
    border-right:none;
    padding-right:0;
    border-bottom:1px solid var(--border);
    padding-bottom:2rem;
  }
  .footer-links{ grid-template-columns:repeat(2,1fr) }
  .footer-bottom .container{ flex-direction:column;align-items:flex-start;gap:.35rem }
}
@media(max-width:520px){
  .footer-links{ grid-template-columns:1fr }
}

.page-header h1{margin-bottom:.35rem}
.page-header p{margin:0;color:var(--muted)}
.products-hero{
  background:#fff;
  border-bottom:1px solid var(--border);
}
.products-hero{padding:1rem 0 .75rem}
.products-hero .container{padding-top:.35rem}

.products-hero .product-detail-image{
  display:block;
  width:100%;
  min-height:0;
  height:auto;
  aspect-ratio:16/4;
  max-height:230px;
  object-fit:contain;
  object-position:center;
  background:#fff;
  border-radius:1rem;
  margin-top:.6rem;
}

@media (max-width:768px){
  .products-hero .product-detail-image{
    aspect-ratio:16/5;
    max-height:185px;
  }
}

.category-banner{margin:.75rem 0 1rem}
.category-banner img{
  width:100%;
  height:170px;
  object-fit:cover;
  border-radius:.95rem;
  box-shadow:0 16px 34px rgba(15,23,42,.14);
}

/* ============================================================
   LOCATIONS PAGE
   ============================================================ */

/* Hero header */
.locations-hero{
  background:linear-gradient(135deg,#f0fdf4 0%,#f0fdfa 60%,#fff7ed 100%);
  border-bottom:1px solid var(--border);
  padding:2.5rem 0 2rem;
}
.locations-title{
  font-size:clamp(2rem,3vw + 1rem,3rem);
  font-weight:900;
  color:var(--text);
  margin:0 0 .4rem;
  letter-spacing:-.025em;
}
.locations-sub{
  color:var(--muted);
  font-size:1rem;
  margin:0 0 1.5rem;
}

/* Stats strip */
.locations-stats{
  display:inline-flex;
  align-items:center;
  gap:1.5rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  padding:.6rem 1.5rem;
  box-shadow:var(--shadow-sm);
}
.loc-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.1rem;
}
.loc-stat-num{
  font-size:1rem;
  font-weight:800;
  color:var(--green-dark);
  line-height:1;
}
.loc-stat-label{
  font-size:.72rem;
  color:var(--muted);
  font-weight:500;
}
.loc-stat-divider{
  width:1px;
  height:30px;
  background:var(--border);
}

/* Section */
.locations-section{ background:var(--bg);padding:2.5rem 0 3rem }

/* ============================================================
   PRODUCTS PAGE HERO
   ============================================================ */
.products-hero{
  background:#f7faf9;
  border-bottom:1px solid var(--border);
  padding:2.25rem 0 2rem;
}
.products-hero .container{ display:grid; gap:.4rem }
.products-hero h1{
  color:var(--teal);
  letter-spacing:-.02em;
}
.products-hero p{ color:var(--text-soft) }

#products-hero-banner{
  width:100%;
  display:block;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.1rem;
  box-shadow:var(--shadow-sm);
  padding:1rem;
  object-fit:contain;
  min-height:160px;
}

/* Grid */
.locations-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
  align-items:stretch;
}

/* Card */
.location-card{
  background:#fff;
  border-radius:1.35rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.location-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

/* Colour top border per card */
.loc-green{ border-top:4px solid var(--green) }
.loc-teal{ border-top:4px solid var(--teal) }
.loc-orange{ border-top:4px solid var(--orange) }

/* Card header */
.location-card-header{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1.1rem 1.2rem .65rem;
}
.loc-pin{ font-size:1.3rem;flex-shrink:0 }
.loc-info{ flex:1 }
.loc-name{
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 .1rem;
}
.loc-address{
  font-size:.82rem;
  color:var(--muted);
  margin:0;
}

/* Open badge */
.loc-open-badge{
  background:#dcfce7;
  color:#166534;
  font-size:.72rem;
  font-weight:700;
  padding:.22rem .65rem;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid #bbf7d0;
}

/* Meta row (hours + phone) */
.loc-meta-row{
  display:flex;
  gap:7rem;
  padding:.3rem 1.2rem .8rem;
  flex-wrap:wrap;
}
.loc-meta-item{
  font-size:.8rem;
  color:var(--text-soft);
  display:flex;
  align-items:center;
  gap:.3rem;
}

/* Map iframe */
.locations-map{
  width:100%;
  height:220px;
  border:0;
  display:block;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* Directions button */
.loc-directions-btn{
  display:block;
  text-align:center;
  padding:.75rem 1rem;
  font-size:.88rem;
  font-weight:700;
  color:var(--green-dark);
  text-decoration:none;
  transition:background .15s ease,color .15s ease;
}
.loc-green .loc-directions-btn:hover{ background:var(--green-light);color:var(--green-dark) }
.loc-teal .loc-directions-btn:hover{ background:#e6f7f5;color:var(--teal) }
.loc-orange .loc-directions-btn{ color:var(--orange) }
.loc-orange .loc-directions-btn:hover{ background:var(--orange-light);color:var(--orange) }

/* Responsive */
@media(max-width:900px){
  .locations-grid{ grid-template-columns:1fr }
  .locations-stats{ flex-wrap:wrap;border-radius:1rem;gap:1rem }
}

.chip-row{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  padding:.42rem .85rem;
  border-radius:999px;
  font-size:.88rem;
  color:var(--text);
  cursor:pointer;
  transition:background 160ms ease,border-color 160ms ease,transform 120ms ease,box-shadow 160ms ease;
}
.chip:hover{
  background:var(--green-light);
  border-color:var(--green);
  color:var(--green-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-sm);
}
.chip:focus-visible{outline:none;box-shadow:var(--ring)}
.chip:active{transform:translateY(0)}

.filter-bar{
  position:sticky;
  top:64px;
  z-index:15;
  padding:.6rem 0;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.74));
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.filter-bar select,.filter-bar input[type="search"]{max-width:100%}
#dept-select-arrow,#dept-select-2-arrow{
  width:36px;height:36px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
}
#dept-select-arrow:hover,#dept-select-2-arrow:hover{
  transform:translateY(-1px);
  background:#f9fafb;
  border-color:rgba(23,102,58,.35);
  box-shadow:0 12px 26px rgba(15,23,42,.10);
}
#dept-select-arrow:active,#dept-select-2-arrow:active{transform:translateY(0)}
#dept-select-arrow:focus-visible,#dept-select-2-arrow:focus-visible{outline:none;box-shadow:var(--ring)}

#departments-page .filter-bar{
  position:static;
  top:auto;
  z-index:auto;
  margin:0 0 1rem;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
}
#departments-page .section{
  background:var(--bg);
}
#departments-page .filter-bar > div{
  border:1px solid rgba(23,102,58,.14);
  border-radius:1rem;
  background:linear-gradient(180deg,#ffffff,#fbfcfa);
  box-shadow:0 12px 28px rgba(15,23,42,.09);
  padding:.5rem .55rem;
}
#departments-page #dept-select-2{
  min-width:230px;
  font-size:.96rem;
  font-weight:700;
  color:var(--green-dark);
  border-color:rgba(15,23,42,.12);
  background:#fff;
}
#departments-page #dept-select-2:hover{
  border-color:rgba(23,102,58,.35);
  box-shadow:0 12px 26px rgba(15,23,42,.10);
}
#departments-page #dept-select-2:focus-visible{
  outline:none;
  border-color:rgba(23,102,58,.55);
  box-shadow:var(--ring);
}

#departments-page .cards-grid{
  gap:1.35rem;
}
#departments-page .department-card{
  padding:1rem 1rem 1.1rem;
  border:1px solid var(--border);
  border-radius:1.05rem;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .24s ease,border-color .24s ease;
}
#departments-page .department-card:hover{
  transform:translateY(-4px);
  border-color:var(--orange);
  box-shadow:var(--shadow-md);
}
#departments-page .department-card:focus-within{
  border-color:var(--green);
  box-shadow:var(--ring),var(--shadow-md);
}
#departments-page .department-image{
  height:140px;
  max-height:none;
  width:100%;
  object-fit:contain;
  background:linear-gradient(180deg,#ffffff,#f7fafc);
  border:1px solid rgba(229,231,235,.9);
  border-radius:.85rem;
  padding:.45rem;
  margin-bottom:.85rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 22px rgba(15,23,42,.07);
}
#departments-page .department-card h3{
  margin:.1rem 0 .35rem;
  font-size:clamp(1.2rem, .7vw + 1rem, 1.55rem);
  line-height:1.22;
  color:var(--green-dark);
  letter-spacing:-.015em;
  font-weight:700;
}
#departments-page .department-card p{
  margin:0;
  font-size:1.02rem;
  line-height:1.45;
  color:var(--text-soft);
}

#products-page .section{
  background:var(--bg);
}
#products-page .filter-bar{
  position:static;
  top:auto;
  z-index:auto;
  margin:0 0 1rem;
  padding:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
}
#products-page .filter-bar > div{
  border:1px solid rgba(23,102,58,.14);
  border-radius:1rem;
  background:linear-gradient(180deg,#ffffff,#fbfcfa);
  box-shadow:0 12px 28px rgba(15,23,42,.09);
  padding:.5rem .55rem;
}
#products-page #dept-select,
#products-page #products-search{
  font-size:.95rem;
  font-weight:700;
  color:#1a2a3b;
  border-color:rgba(15,23,42,.12);
  background:#fff;
}
#products-page #dept-select:hover,
#products-page #products-search:hover{
  border-color:rgba(23,102,58,.35);
  box-shadow:0 12px 26px rgba(15,23,42,.10);
}
#products-page #dept-select:focus-visible,
#products-page #products-search:focus-visible{
  outline:none;
  border-color:rgba(23,102,58,.55);
  box-shadow:var(--ring);
}

#products-page .product-grid{gap:1.35rem}
#products-page .product-card{
  border:1px solid var(--border);
  border-radius:1.05rem;
  background:#fff;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .24s ease,border-color .24s ease;
}
#products-page .product-card:hover{
  transform:translateY(-4px);
  border-color:var(--orange);
  box-shadow:var(--shadow-md);
}
#products-page .product-card .product-thumb{
  border:1px solid rgba(229,231,235,.9);
  background:linear-gradient(180deg,#ffffff,#f7fafc);
}
#products-page .product-card .product-image{
  object-fit:contain;
  background:#f8fafc;
  padding:.45rem;
}
#products-page .product-card h2{
  margin:.9rem 0 .3rem;
  font-size:clamp(1.15rem,.55vw + 1rem,1.35rem);
  line-height:1.25;
  letter-spacing:-.01em;
}
#products-page .product-card h2 a{color:var(--green-dark)}
#products-page .product-card h2 a:hover{color:var(--orange);text-decoration:none}
#products-page .product-meta{
  color:var(--muted);
  font-size:.95rem;
  line-height:1.4;
}
#products-page .product-price{font-size:1.08rem}

.pill-row{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 .55rem}
.pill{
  display:inline-flex;
  align-items:center;
  padding:.16rem .55rem;
  font-size:.72rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:900;
}
.pill-sale{background:var(--orange-light);border-color:var(--orange);color:#a84b0d}

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
  justify-items:center;
}

.product-image-placeholder{
  border-radius:.8rem;
  border:1px dashed var(--border);
  min-height:130px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  color:var(--muted);
}
.image-placeholder{
  width:100%;
  height:150px;
  border:2px dashed var(--border);
  border-radius:.8rem;
  background:#fafafa;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
}
.icon-placeholder{width:18px;height:18px;border:2px dashed var(--border);border-radius:4px}
.product-detail-image-placeholder{
  width:100%;
  height:280px;
  border:2px dashed var(--border);
  border-radius:.95rem;
  background:#fafafa;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted);
}

.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
}
.product-card .product-info{display:flex;flex-direction:column;flex:1}
.product-thumb{display:block;position:relative;border-radius:.85rem;overflow:hidden}
.product-image{
  width:100%;
  border-radius:.85rem;
  display:block;
  object-fit:cover;
  height:185px;
  transform:scale(1);
  transition:transform 220ms ease,filter 220ms ease;
}
.product-card .pill-row{
  position:absolute;
  top:.75rem;left:.75rem;
  z-index:3;
  margin:0;
}
.product-card .pill{
  background:rgba(255,255,255,.90);
  border-color:rgba(229,231,235,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 12px 26px rgba(15,23,42,.12);
}
.product-card h2,.product-card h3{margin:.75rem 0 .3rem;font-size:.98rem;font-weight:600;line-height:1.35}
.product-meta{margin:0 0 .6rem;color:var(--muted);font-size:.83rem;line-height:1.45}
.product-price{font-weight:700;color:var(--green-dark);margin:0 0 .7rem;font-size:1rem}
.product-price-lg{font-size:1.45rem}
.product-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-top:auto;
}
.product-footer .product-price{margin:0}
.product-footer .btn{width:auto;padding:.52rem 1rem}

.product-card:hover .product-image,.deal-card:hover .product-image,.department-card:hover .department-image{
  transform:scale(1.05);
  filter:saturate(1.05) contrast(1.02);
}

#best-sellers .section-header{text-align:center}
#best-sellers .product-grid{
  justify-content:center;
  justify-items:center;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  column-gap:1.5rem;
  row-gap:1.5rem;
}
#best-sellers .product-card{max-width:300px}
#best-sellers .product-image{height:170px}

.product-hero{
  background:linear-gradient(160deg,#f0fdf4 0%,#f0fdfa 50%,#fff7ed 100%);
  border-bottom:1px solid var(--border);
  padding:2.5rem 0 3rem;
}
.product-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:2.5rem;
  align-items:flex-start;
}
.product-detail-media{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:1.5rem;
  box-shadow:var(--shadow-md);
  align-self:start;
  position:unset;
  top:90px;
}
.product-detail-info{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.5rem;
  padding:1.75rem 1.85rem;
  box-shadow:var(--shadow-md);
  align-self:start;
}
.product-detail-image{
  width:100%;
  border-radius:1.1rem;
  display:block;
  object-fit:contain;
  min-height:280px;
  max-height:380px;
  background:#fafafa;
}
.product-detail-thumbs{display:flex;gap:.75rem;margin-top:.75rem}
.thumb-placeholder{
  flex:1;
  border-radius:.8rem;
  border:1px dashed var(--border);
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  color:var(--muted);
}
.thumb-image{
  flex:1;
  border-radius:.8rem;
  display:block;
  object-fit:cover;
  min-height:70px;
  transition:transform 160ms ease,box-shadow 160ms ease;
}
.thumb-image:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.16)}
.thumb-image:focus-visible{outline:none;box-shadow:var(--ring),0 14px 30px rgba(15,23,42,.16)}

.breadcrumb{
  margin:0 0 .85rem;
  font-size:.82rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:.3rem;
  flex-wrap:wrap;
}
.breadcrumb a{
  color:var(--teal);
  font-weight:500;
}
.breadcrumb a:hover{color:var(--green-dark);text-decoration:none}

/* Product title */
#detail-name{
  font-size:clamp(1.65rem,2vw + 1rem,2.2rem);
  font-weight:800;
  color:var(--text);
  margin:0 0 .5rem;
  letter-spacing:-.02em;
  line-height:1.2;
}

/* Price */
#detail-price{
  font-size:1.75rem !important;
  font-weight:800;
  color:var(--orange);
  margin:0 0 1.35rem;
}

/* Product meta (department label under title) */
#detail-meta{
  font-size:.88rem;
  color:var(--muted);
  margin:0 0 .75rem;
  display:flex;
  align-items:center;
  gap:.4rem;
}

.add-to-cart-form{
  margin:0 0 1.5rem;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  align-items:center;
}
.add-to-cart-form label{
  display:inline-flex;
  align-items:center;
  gap:0;
  background:#f5f6f7;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  padding:0;
}
.add-to-cart-form input[type="number"]{
  width:48px;
  padding:.48rem .3rem;
  border:none;
  border-radius:0;
  background:transparent;
  text-align:center;
  font-size:1rem;
  font-weight:600;
}
.add-to-cart-form input[type="number"]::-webkit-outer-spin-button,
.add-to-cart-form input[type="number"]::-webkit-inner-spin-button,
.qty-control input[type="number"]::-webkit-outer-spin-button,
.qty-control input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.add-to-cart-form input[type="number"],
.qty-control input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}
.add-to-cart-form input[type="number"]:focus{outline:none;box-shadow:var(--ring);border-color:rgba(23,102,58,.55)}
.qty-inc,.qty-dec{
  width:38px;height:38px;
  border-radius:0;
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:1.2rem;
  font-weight:700;
  color:var(--teal);
  transition:background .12s ease,color .12s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.qty-inc:hover,.qty-dec:hover{
  background:var(--teal);
  color:#fff;
}
.qty-inc:active,.qty-dec:active{opacity:.85}
.qty-inc:focus-visible,.qty-dec:focus-visible{outline:none;box-shadow:var(--ring)}

/* ---- Product details section ---- */
.product-detail-description{
  border-top:1px solid var(--border);
  padding-top:1.15rem;
  margin-top:1.15rem;
}
.product-detail-description h2{
  font-size:1.1rem;
  font-weight:700;
  color:var(--green-dark);
  margin:0 0 .65rem;
  letter-spacing:-.01em;
}
.product-detail-description p{margin-top:0;color:var(--text-soft);line-height:1.6}
.product-detail-copy{margin:0 0 .75rem;color:var(--text-soft);line-height:1.6}

/* Meta table (Department, Brand, UPC…) */
.product-detail-meta-list{
  display:grid;
  gap:0;
  margin-top:.65rem;
  border:1px solid var(--border);
  border-radius:.85rem;
  overflow:hidden;
}
.product-detail-meta-row{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:0;
  align-items:stretch;
  font-size:.92rem;
  line-height:1.5;
  border-bottom:1px solid var(--border);
}
.product-detail-meta-row:last-child{border-bottom:none}
.product-detail-meta-row strong{
  background:#f5f6f7;
  color:var(--text);
  font-weight:600;
  padding:.6rem .85rem;
  border-right:1px solid var(--border);
}
.product-detail-meta-row span{
  color:var(--text-soft);
  padding:.6rem .85rem;
  background:#fff;
}
.product-detail-description ul{padding-left:1.1rem}
.product-highlights ul{margin:.35rem 0 0;padding-left:1.1rem}
.product-detail-extra h3{
  font-size:1.1rem;
  font-weight:700;
  color:var(--teal);
  margin-bottom:.65rem;
}

/* Add to cart button — green; Wishlist — teal outline */
#detail-add-btn{
  background:var(--green) !important;
  border-color:var(--green-dark) !important;
  color:#fff !important;
  font-size:1rem;
  padding:.72rem 1.6rem;
  border-radius:999px;
  box-shadow:0 2px 10px rgba(46,125,82,.22) !important;
}
#detail-add-btn:hover{
  background:var(--green-dark) !important;
  box-shadow:0 4px 16px rgba(46,125,82,.32) !important;
}
#wishlist-btn{
  background:#fff;
  border:1.5px solid var(--teal) !important;
  color:var(--teal) !important;
  border-radius:999px;
  font-size:1rem;
  padding:.72rem 1.3rem;
}
#wishlist-btn:hover{
  background:var(--teal) !important;
  color:#fff !important;
  border-color:var(--teal) !important;
}
.product-grid-compact{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* ============================================================
   CART PAGE
   ============================================================ */

#cart-page{background:var(--bg)}

/* Page header */
#cart-page .page-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:2rem 0 1.5rem;
}
#cart-page .page-header h1{
  font-size:clamp(2rem,3vw + 1rem,2.8rem);
  color:var(--text);
  margin:0 0 .3rem;
}
#cart-page .page-header p{
  color:var(--muted);
  font-size:.95rem;
  margin:0;
}

/* Layout */
.cart-layout{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:1.5rem;
  align-items:start;
  padding:2rem 0;
}

/* Cart items card */
.cart-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.25rem;
  box-shadow:var(--shadow-sm);
  padding:0;
  overflow:hidden;
}
.cart-card-header{
  padding:1.1rem 1.35rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cart-card-header h3{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
}
.cart-card-header span{
  font-size:.85rem;
  color:var(--muted);
}

/* Cart items */
.cart-item{
  display:grid;
  grid-template-columns:80px 1fr auto auto;
  align-items:center;
  gap:1rem;
  padding:1rem 1.35rem;
  border-bottom:1px solid var(--border);
  transition:background .15s ease;
}
.cart-item:last-child{border-bottom:none}
.cart-item:hover{background:#fafafa}

/* Item image */
.cart-item .thumb-image,.cart-item img,.cart-item .image-placeholder{
  width:72px;
  height:72px;
  min-height:unset;
  border-radius:.75rem;
  object-fit:contain;
  background:#f5f6f7;
  border:1px solid var(--border);
  padding:.3rem;
  flex:none;
}

/* Item title & meta */
.cart-item-title{
  font-weight:600;
  font-size:.97rem;
  color:var(--text);
  margin:0 0 .2rem;
}
.cart-item-meta{
  font-size:.82rem;
  color:var(--muted);
}

/* Qty control pill */
.qty-control{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background:#f5f6f7;
}
.qty-control button{
  background:transparent;
  border:0;
  width:32px;height:32px;
  cursor:pointer;
  font-size:1.1rem;
  font-weight:700;
  color:var(--teal);
  transition:background .12s ease,color .12s ease;
  display:flex;align-items:center;justify-content:center;
}
.qty-control button:hover{background:var(--teal);color:#fff}
.qty-control input{
  width:38px;
  text-align:center;
  border:0;
  background:transparent;
  font-size:.95rem;
  font-weight:600;
  color:var(--text);
}

/* Item price */
.cart-item-price{
  font-weight:700;
  font-size:1rem;
  color:var(--orange);
  white-space:nowrap;
}

/* Delete button */
.cart-remove{
  background:transparent;
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:999px;
  padding:.22rem .62rem;
  font-size:.78rem;
  cursor:pointer;
  margin-top:.35rem;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.cart-remove:hover{
  background:#fff0f0;
  border-color:#f87171;
  color:#dc2626;
}

/* Order summary card */
.cart-summary{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.25rem;
  box-shadow:var(--shadow-sm);
  padding:1.4rem 1.5rem;
  position:sticky;
  top:90px;
  height:fit-content;
}
.cart-summary h3{
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 1.1rem;
  padding-bottom:.85rem;
  border-bottom:1px solid var(--border);
}
.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:.55rem 0;
  font-size:.93rem;
  color:var(--muted);
}
.summary-row strong{
  color:var(--text);
  font-weight:600;
}
.summary-row.total{
  border-top:2px solid var(--border);
  margin-top:1rem;
  padding-top:1rem;
  font-size:1.08rem;
  font-weight:700;
  color:var(--text);
}
.summary-row.total strong{
  color:var(--green-dark);
  font-size:1.2rem;
  font-weight:800;
}

/* Checkout button */
#cart-checkout-btn{
  width:100%;
  margin-top:1.25rem !important;
  padding:.82rem 1rem !important;
  background:var(--green) !important;
  border-color:var(--green-dark) !important;
  color:#fff !important;
  border-radius:999px !important;
  font-size:1.02rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 14px rgba(46,125,82,.25) !important;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease !important;
}
#cart-checkout-btn:hover{
  background:var(--green-dark) !important;
  box-shadow:0 6px 20px rgba(46,125,82,.35) !important;
  transform:translateY(-1px) !important;
}

/* ============================================================
   CHECKOUT PAGE
   ============================================================ */

#payment-page{ background:var(--bg) }

#payment-page .page-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  padding:2rem 0 1.5rem;
}
#payment-page .page-header h1{
  font-size:clamp(2rem,3vw + 1rem,2.8rem);
  color:var(--text);
  margin:0 0 .3rem;
}
#payment-page .page-header p{
  color:var(--muted);
  font-size:.95rem;
  margin:0;
}
#payment-page > .section{
  padding:2.5rem 0 3.5rem;
}

/* Two-column layout: form left, trust info right */
#payment-page > .section > .container{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:1.75rem;
  align-items:start;
}
@media(max-width:760px){
  #payment-page > .section > .container{
    grid-template-columns:1fr;
  }
  .checkout-trust{ position:static }
}

/* Card wrapper */
.checkout-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.35rem;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* Card header bar */
.checkout-card::before{
  content:"";
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--green),var(--teal),var(--orange));
}

/* Form padding */
.checkout-form{
  padding:1.75rem 2rem 2rem;
}

/* Section labels inside form */
.checkout-form .form-section-label{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:1.25rem 0 .65rem;
  padding-bottom:.4rem;
  border-bottom:1px solid var(--border);
  display:block;
}
.checkout-form .form-section-label:first-child{ margin-top:0 }

/* Form rows */
.checkout-form .form-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.85rem;
  margin-bottom:.85rem;
}
.checkout-form .form-row:last-of-type{ margin-bottom:0 }

/* Labels */
.checkout-form label{
  display:grid;
  gap:.38rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
}

/* Inputs */
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="number"]{
  padding:.68rem 1rem;
  border:1.5px solid var(--border);
  border-radius:.75rem;
  background:#fafafa;
  font-size:.95rem;
  color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
  width:100%;
}
.checkout-form input[type="text"]:hover,
.checkout-form input[type="email"]:hover,
.checkout-form input[type="number"]:hover{
  border-color:var(--green);
  background:#fff;
}
.checkout-form input:focus{
  outline:none;
  border-color:var(--green);
  background:#fff;
  box-shadow:var(--ring);
}
.checkout-form input::placeholder{ color:var(--muted);opacity:.7 }

/* Payment card row — visual card icon */
.checkout-form .card-row{
  position:relative;
}

/* Pay now button */
.checkout-form .form-actions{
  margin-top:1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--border);
}
#pay-btn{
  width:100%;
  padding:.88rem 1rem !important;
  background:var(--green) !important;
  border-color:var(--green-dark) !important;
  color:#fff !important;
  border-radius:.9rem !important;
  font-size:1.05rem !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  box-shadow:0 4px 16px rgba(46,125,82,.26) !important;
  transition:background .18s ease,box-shadow .18s ease,transform .12s ease !important;
}
#pay-btn:hover{
  background:var(--green-dark) !important;
  box-shadow:0 6px 22px rgba(46,125,82,.36) !important;
  transform:translateY(-1px) !important;
}

/* ---- Trust sidebar card ---- */
.checkout-trust{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.35rem;
  box-shadow:var(--shadow-sm);
  padding:1.5rem 1.4rem;
  position:sticky;
  top:90px;
}
.checkout-trust h4{
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 1rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--border);
}
.trust-item{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom:.9rem;
}
.trust-item:last-child{ margin-bottom:0 }
.trust-icon{
  width:36px;height:36px;
  border-radius:.65rem;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.trust-icon.green{ background:var(--green-light);color:var(--green-dark) }
.trust-icon.teal{ background:#e6f7f5;color:var(--teal) }
.trust-icon.orange{ background:var(--orange-light);color:var(--orange) }
.trust-item-text strong{
  display:block;
  font-size:.88rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:.15rem;
}
.trust-item-text span{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.4;
}

.auth-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:1.05rem;
  box-shadow:var(--shadow-md);
  padding:1.25rem;
  max-width:980px;
  margin:0 auto;
}
.auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.auth-section h3{margin:.25rem 0 .6rem}
.auth-form label{display:grid;gap:.35rem;font-weight:850}
.auth-form input[type="text"],.auth-form input[type="email"],.auth-form input[type="password"]{
  padding:.62rem .85rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:#fff;
}
.auth-form input:focus{outline:none;border-color:rgba(23,102,58,.55);box-shadow:var(--ring)}
.auth-form .form-row{display:grid;gap:.9rem;margin-bottom:.9rem}
.auth-form .btn{margin-top:.25rem}

.account-layout{display:grid;grid-template-columns:300px 1fr;gap:1.25rem;align-items:start}
.account-sidebar{position:sticky;top:90px;padding:.9rem}
.account-nav{display:grid;gap:.55rem}
.account-link{
  appearance:none;
  border:1px solid var(--border);
  background:#fff;
  border-radius:.95rem;
  padding:.72rem .9rem;
  text-align:left;
  font-weight:950;
  color:var(--green-dark);
  cursor:pointer;
  transition:transform 140ms ease,box-shadow 140ms ease,border-color 140ms ease,background 140ms ease,filter 140ms ease;
}
.account-link:hover{
  transform:translateY(-1px);
  border-color:rgba(23,102,58,.35);
  box-shadow:0 14px 30px rgba(15,23,42,.10);
  filter:saturate(1.02);
}
.account-link.active{
  background:var(--green-light);
  border-color:var(--green);
  color:var(--green-dark);
}
.account-link:focus-visible{outline:none;box-shadow:var(--ring),0 14px 30px rgba(15,23,42,.10)}
.account-content{display:grid;gap:1.25rem}
.acct-section{display:none}
.acct-section.acct-section-active{display:block}
.acct-section>p:first-child{
  font-size:1.1rem;
  font-weight:950;
  color:var(--green-dark);
  margin-bottom:.9rem;
}

@media (min-width:900px){
  #departments .cards-grid{grid-template-columns:repeat(4,1fr)}
  #best-sellers .product-grid{grid-template-columns:repeat(4,1fr);justify-content:center}
  #products + .section .product-grid,.products-hero ~ .section .product-grid{grid-template-columns:repeat(4,1fr)}
  .product-grid{grid-template-columns:repeat(4,1fr)}
  .cards-grid{grid-template-columns:repeat(4,1fr);justify-items:stretch}
  .locations-grid{grid-template-columns:repeat(3,1fr)}
}

#departments-page .two-col-custom{grid-template-columns:1fr 1fr}
#departments-page .two-col-custom .col{display:grid;gap:1.5rem}

@media (max-width:899px){
  #best-sellers .product-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .cart-layout{grid-template-columns:1fr}
  .cart-item{grid-template-columns:60px 1fr auto}
  .auth-grid{grid-template-columns:1fr}
  .locations-map{height:280px}
  .location-map-card .locations-map{height:240px}

  .header-inner{flex-wrap:wrap;justify-content:center}
  .main-nav{order:3;flex-wrap:wrap;justify-content:center}
  .header-search{order:2;flex:1 1 100%;max-width:none}

  .hero-inner,.product-detail{grid-template-columns:1fr}
  .hero-slider,.deals-slider{grid-template-columns:44px 1fr 44px}
  #hero-img{height:clamp(260px,46vw,360px)}

  .section-highlight .highlight-inner{flex-direction:column;align-items:flex-start}

  /* footer responsive handled in footer section */

  #departments-page .two-col-custom{grid-template-columns:1fr}

  .account-layout{grid-template-columns:1fr}
  .account-sidebar{position:relative;top:auto}
  .account-nav{
    grid-auto-flow:column;
    grid-auto-columns:max-content;
    display:grid;
    gap:.6rem;
    overflow-x:auto;
    padding-bottom:.25rem;
    -webkit-overflow-scrolling:touch;
  }
  .account-link{white-space:nowrap}
}

@media (max-width:520px){
  .container{width:min(1120px,100% - 1.25rem)}
  .card{padding:1.05rem 1.1rem}
  .section{padding:3rem 0}
  .locations-map{height:240px}
  .location-map-card .locations-map{height:210px}
  #departments-page #dept-select-2{min-width:0;width:100%}
  #departments-page .cards-grid{gap:1rem}
  #departments-page .department-image{height:120px}
  #departments-page .department-card p{font-size:.98rem}
  #products-page #dept-select,#products-page #products-search{width:100%;min-width:0}
  #products-page .product-grid{gap:1rem}
  #products-page .product-card .product-image{height:165px}
  #products-page .product-meta{font-size:.9rem}
  .hero-slider,.deals-slider{grid-template-columns:38px 1fr 38px}
  .hero-slider,.deals-slider{padding-inline:.35rem}
  #hero-prev,#hero-next,#deals-prev,#deals-next,#dept-prev,#dept-next{width:42px;height:42px;font-size:1.5rem}
  #home-departments-track{padding-inline:1.35rem !important}
  #dept-prev{left:-1.2rem !important}
  #dept-next{right:-1.2rem !important}
  .hero-dots-below{margin-top:.7rem}
  .product-detail-meta-row{grid-template-columns:1fr}
}

.profile-btn{
  width:auto;
  min-width:40px;
  height:40px;
  padding:0 1rem;
  gap:.5rem;
  border-radius:999px;
  border:1.5px solid var(--border);
  background:#fff;
}
.profile-btn:hover{
  background:var(--green-light);
  border-color:var(--green);
}

.profile-btn .profile-label{
  display:inline-block;
  font-size:.88rem;
  font-weight:700;
  color:var(--green-dark);
  white-space:nowrap;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-btn-logged-in{
  border-color:var(--green);
  background:var(--green-light);
}
.profile-btn-logged-in:hover{
  background:#d4eddf;
  border-color:var(--green-dark);
}
.profile-btn-logged-in .profile-label{
  color:var(--green-dark);
}

@media (max-width:900px){
  .profile-btn .profile-label{
    max-width:84px;
  }
}

@media (max-width:520px){
  .profile-btn{
    padding:0 .65rem;
  }

  .profile-btn .profile-label{
    max-width:68px;
    font-size:.82rem;
  }
}

/* ============================================================
   HOME PAGE ENHANCEMENTS – colourful, polished styling
   ============================================================ */

/* ---------- CSS additions ---------- */
:root{
  --teal:#0d9488;
  --orange:#ea580c;
  --purple:#7c3aed;
  --pink:#db2777;
  --sky:#0284c7;
}

/* ---------- Section headings – each section gets its own colour ---------- */
#home-page .section-header h2{
  font-size:clamp(1.6rem,1.5vw + 1rem,2.2rem);
  letter-spacing:-.02em;
}
#home-page .section-header p{
  font-size:1.05rem;
  color:var(--muted);
}

/* Shop by Department → green */
#departments .section-header h2{ color:var(--green-dark) }

/* Today's Deals → orange */
#deals .section-header h2{ color:var(--orange) }

/* Best Sellers → teal */
#best-sellers .section-header h2{ color:var(--teal) }

/* Why BKINGS Daily → purple */
#why-bkings .section-header h2{ color:var(--purple) }

/* btn-accent size polish */
.btn-accent{
  font-size:1rem;
  padding:.75rem 1.75rem !important;
  letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(240,124,42,.30) !important;
  border-radius:999px !important;
}

/* ---------- DEPARTMENTS section ---------- */
#departments{
  background:linear-gradient(160deg,#f0fdf4 0%,#e8f5ff 100%);
  padding:4.5rem 0;
}
.department-card{
  border-top:4px solid var(--green);
  border-radius:1.2rem;
  background:#fff;
  box-shadow:0 2px 12px rgba(15,23,42,.08);
  transition:transform 200ms ease,box-shadow 200ms ease,border-color 200ms ease;
  padding:1.1rem 1.1rem 1.2rem;
  cursor:pointer;
}
.department-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 12px 32px rgba(15,23,42,.14) !important;
}
/* Cycle border + heading colours across cards */
.department-card:nth-child(4n+1){ border-top-color:var(--green) }
.department-card:nth-child(4n+2){ border-top-color:var(--teal) }
.department-card:nth-child(4n+3){ border-top-color:var(--orange) }
.department-card:nth-child(4n+4){ border-top-color:var(--purple) }

/* Tinted bg per card variant on hover */
.department-card:nth-child(4n+1):hover{ background:var(--green-light) !important }
.department-card:nth-child(4n+2):hover{ background:#e6f7f5 !important }
.department-card:nth-child(4n+3):hover{ background:var(--orange-light) !important }
.department-card:nth-child(4n+4):hover{ background:#f3eeff !important }

.department-card h3{
  font-size:1rem;
  font-weight:700;
  margin:.6rem 0 .25rem;
  line-height:1.3;
}
.department-card:nth-child(4n+1) h3{ color:var(--green-dark) }
.department-card:nth-child(4n+2) h3{ color:var(--teal) }
.department-card:nth-child(4n+3) h3{ color:var(--orange) }
.department-card:nth-child(4n+4) h3{ color:var(--purple) }

.department-card p{
  color:var(--muted);
  font-size:.83rem;
  line-height:1.45;
  margin:0;
}

/* Image area */
.department-image{
  width:100%;
  height:130px;
  border-radius:.85rem;
  object-fit:contain;
  background:#f8f9fa;
  padding:.5rem;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
}

/* ---------- DEALS section ---------- */
#deals{
  background:#fff7ed;
  padding:4.5rem 0;
}
/* #deals heading set above */
.deal-card{
  border-radius:1.25rem !important;
  box-shadow:0 18px 40px rgba(234,88,12,.18),0 0 0 1px rgba(234,88,12,.12) !important;
  overflow:hidden;
  /* ensure the background-image gradient+photo isn't hidden by .card's white bg */
  background-color:transparent !important;
}
/* keep all text inside deal cards white — on dark photo overlay */
.deal-card h3,.deal-card h2{color:#fff !important;text-shadow:0 1px 3px rgba(0,0,0,.9),0 4px 16px rgba(0,0,0,.7) !important}
.deal-card p{color:rgba(255,255,255,.92) !important;text-shadow:0 1px 3px rgba(0,0,0,.85),0 3px 10px rgba(0,0,0,.6) !important}
.deal-card .link{color:#7ee8a2 !important;text-shadow:0 1px 4px rgba(0,0,0,.7) !important}
.deal-card .link:hover{color:#bbf7d0 !important}
.deal-tag{
  background:linear-gradient(135deg,var(--orange),#c2410c) !important;
  box-shadow:0 8px 20px rgba(234,88,12,.35) !important;
  font-size:.8rem;
}
/* BOGO tag special */
.deal-tag:not([class*="-"]):has(~){background:linear-gradient(135deg,var(--purple),#5b21b6)!important}

/* ---------- BEST SELLERS section ---------- */
#best-sellers{
  background:#f0fdfa;
  padding:4.5rem 0;
}
/* #best-sellers heading set above */
#best-sellers .product-card{
  border-top:3px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--green),var(--teal)) border-box;
  border-radius:1.1rem;
  box-shadow:0 10px 30px rgba(23,102,58,.09);
  transition:transform 200ms ease,box-shadow 200ms ease;
}
#best-sellers .product-card:hover{
  transform:translateY(-7px) scale(1.01);
  box-shadow:0 24px 50px rgba(23,102,58,.18);
}
#best-sellers .product-card h2,
#best-sellers .product-card h3{
  color:var(--teal);
}
#best-sellers .product-card h2 a,
#best-sellers .product-card h3 a{
  color:var(--teal);
}
#best-sellers .product-card h2 a:hover,
#best-sellers .product-card h3 a:hover{
  color:var(--orange);
  text-decoration:none;
}
.product-price{
  color:var(--orange);
  font-size:1.08rem;
  font-weight:800;
}

/* ---------- WHY BKINGS section ---------- */
#why-bkings{
  background:#faf5ff;
  padding:4.5rem 0 5rem;
  margin-bottom:0;
}
/* #why-bkings heading set above */
#why-bkings .card{
  border-radius:1.2rem;
  padding:1.6rem 1.5rem;
  box-shadow:0 10px 32px rgba(15,23,42,.08);
  transition:transform 200ms ease,box-shadow 200ms ease;
  position:relative;
  overflow:hidden;
}
#why-bkings .card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 200ms ease;
  border-radius:inherit;
}
#why-bkings .card:hover{
  transform:translateY(-8px);
  box-shadow:0 28px 52px rgba(15,23,42,.14);
}
#why-bkings .card:hover::before{opacity:1}

/* Card 1 – Fresh quality (green) */
#why-bkings .card:nth-child(1){
  border-top:4px solid var(--green);
  background:linear-gradient(160deg,#f0fdf4,#fff);
}
#why-bkings .card:nth-child(1)::before{
  background:radial-gradient(ellipse at top left,rgba(23,102,58,.08),transparent 65%);
}
#why-bkings .card:nth-child(1) h3{color:var(--green-dark)}

/* Card 2 – Fast shopping (sky blue) */
#why-bkings .card:nth-child(2){
  border-top:4px solid var(--sky);
  background:linear-gradient(160deg,#eff6ff,#fff);
}
#why-bkings .card:nth-child(2)::before{
  background:radial-gradient(ellipse at top left,rgba(2,132,199,.08),transparent 65%);
}
#why-bkings .card:nth-child(2) h3{color:var(--sky)}

/* Card 3 – Delivery ready (teal) */
#why-bkings .card:nth-child(3){
  border-top:4px solid var(--teal);
  background:linear-gradient(160deg,#f0fdfa,#fff);
}
#why-bkings .card:nth-child(3)::before{
  background:radial-gradient(ellipse at top left,rgba(13,148,136,.08),transparent 65%);
}
#why-bkings .card:nth-child(3) h3{color:var(--teal)}

/* Card 4 – Deals & savings (orange/gold) */
#why-bkings .card:nth-child(4){
  border-top:4px solid var(--orange);
  background:linear-gradient(160deg,#fff7ed,#fff);
}
#why-bkings .card:nth-child(4)::before{
  background:radial-gradient(ellipse at top left,rgba(234,88,12,.08),transparent 65%);
}
#why-bkings .card:nth-child(4) h3{color:var(--orange)}

#why-bkings .card img{
  border-radius:.85rem;
  margin-bottom:.85rem;
  box-shadow:0 8px 22px rgba(15,23,42,.10);
  transition:transform 200ms ease;
}
#why-bkings .card:hover img{transform:scale(1.04)}
#why-bkings .card p{color:#4b5563;font-size:.95rem;line-height:1.6}

/* ---------- SITE FOOTER – green gradient top band ---------- */
/* footer styles consolidated above */

/* ---------- Section spacing polish ---------- */
#home-page .section{padding:4.5rem 0}
#home-page .section-header{margin-bottom:2.5rem}

/* ---------- Slider nav buttons – stronger colour ---------- */
#home-page #dept-prev,
#home-page #dept-next,
#home-page #deals-prev,
#home-page #deals-next,
#home-page #hero-prev,
#home-page #hero-next{
  background:#fff;
  border-color:var(--border);
  color:var(--green-dark);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
#home-page #dept-prev:hover,
#home-page #dept-next:hover,
#home-page #deals-prev:hover,
#home-page #deals-next:hover,
#home-page #hero-prev:hover,
#home-page #hero-next:hover{
  background:var(--green-light);
  border-color:var(--green);
  color:var(--green-dark);
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

/* ---------- Add to cart button – teal ---------- */
.product-footer .btn-primary{
  background:var(--teal) !important;
  border-color:#0b7a70 !important;
  box-shadow:0 2px 8px rgba(13,148,136,.28) !important;
}
.product-footer .btn-primary:hover{
  background:#0b7a70 !important;
  box-shadow:0 4px 14px rgba(13,148,136,.36) !important;
}

.header-search{ position:relative; }
/* Global search dropdown */
.search-suggestions{
  position:absolute;
  top:calc(100% + .4rem);
  left:0; right:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  box-shadow:0 18px 38px rgba(15,23,42,.14);
  overflow:hidden;
  z-index:60;
  max-height:360px;
  overflow-y:auto;
  padding:.15rem 0;
  backdrop-filter:blur(8px);
}
.search-suggestion{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.9rem 1rem;
  cursor:pointer;
  border-bottom:1px solid rgba(15,23,42,.06);
  transition:background .15s ease, transform .12s ease;
}
.search-suggestion:last-child{ border-bottom:none }
.search-suggestion:hover,.search-suggestion.active{
  background:#f0fdf4;
}
.search-suggestion img{
  width:52px; height:52px;
  object-fit:cover;
  border-radius:.7rem;
  box-shadow:0 6px 14px rgba(15,23,42,.10);
  border:1px solid var(--border);
}
.search-suggestion-text{ display:grid; gap:.2rem; min-width:0 }
.search-suggestion-text strong{
  display:block;
  font-size:1rem;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.search-suggestion-text span{
  display:block;
  font-size:.86rem;
  color:var(--muted);
}
.search-suggestion-empty{ padding:1rem; color:var(--muted); }

/* Slim scrollbar inside suggestions */
.search-suggestions::-webkit-scrollbar{ width:8px }
.search-suggestions::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.12); border-radius:999px }
.search-suggestions::-webkit-scrollbar-track{ background:transparent }

/* ============================================================
   ORDER CONFIRMATION PAGE
   ============================================================ */

.confirm-page{
  background:linear-gradient(135deg,#f0fdf4 0%,#f0fdfa 50%,#fff7ed 100%);
  /* min-height:calc(100vh - 65px); */
  display:flex;
  align-items:center;
  padding:3.5rem 0;
}

.confirm-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:3rem;
  align-items:center;
}

/* Left — thank you image */
.confirm-image-col{
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.confirm-img{
  width:100%;
  display:block;
  border-radius:1.5rem;
}

/* Right — info */
.confirm-info-col{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

/* Green success badge */
.confirm-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:var(--green-light);
  color:var(--green-dark);
  border:1.5px solid var(--green);
  border-radius:999px;
  padding:.38rem 1rem;
  font-size:.85rem;
  font-weight:700;
  width:fit-content;
  letter-spacing:.01em;
}

/* Title */
.confirm-title{
  font-size:clamp(1.75rem,2.5vw + 1rem,2.6rem);
  font-weight:900;
  color:var(--text);
  line-height:1.2;
  margin:0;
  letter-spacing:-.025em;
}

/* Subtitle */
.confirm-sub{
  font-size:1rem;
  color:var(--text-soft);
  line-height:1.6;
  margin:0;
  max-width:42ch;
}

/* Status strip */
.confirm-strip{
  display:flex;
  align-items:center;
  gap:.75rem;
  background:#fff;
  border:1px solid var(--border);
  border-radius:1rem;
  padding:.85rem 1.15rem;
  box-shadow:var(--shadow-sm);
}
.confirm-strip-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-soft);
  flex:1;
  justify-content:center;
}
.confirm-strip-icon{
  font-size:1.1rem;
}
.confirm-strip-divider{
  width:1px;
  height:28px;
  background:var(--border);
  flex-shrink:0;
}

/* Action buttons */
.confirm-actions{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}
.confirm-actions .btn-primary{
  background:var(--green) !important;
  border-color:var(--green-dark) !important;
  color:#fff !important;
  padding:.75rem 1.65rem !important;
  border-radius:999px !important;
  font-size:1rem !important;
  font-weight:700 !important;
  box-shadow:0 4px 14px rgba(46,125,82,.25) !important;
}
.confirm-actions .btn-primary:hover{
  background:var(--green-dark) !important;
  transform:translateY(-1px) !important;
}
.confirm-actions .btn-secondary{
  border-color:var(--border) !important;
  color:var(--text-soft) !important;
  padding:.75rem 1.5rem !important;
  border-radius:999px !important;
  font-size:1rem !important;
}
.confirm-actions .btn-secondary:hover{
  border-color:var(--teal) !important;
  color:var(--teal) !important;
  background:#e6f7f5 !important;
}

/* Responsive */
@media(max-width:760px){
  .confirm-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .confirm-page{
    padding:2rem 0;
    align-items:flex-start;
  }
  .confirm-strip{
    flex-direction:column;
    gap:.65rem;
    align-items:flex-start;
  }
  .confirm-strip-divider{ width:100%; height:1px }
  .confirm-strip-item{ justify-content:flex-start }
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */

/* Page background */
#product-page{ background:var(--bg) }

/* Related products section */
#product-page .section:last-child{
  background:#fff;
  border-top:1px solid var(--border);
}
#product-page .section-header h2{
  color:var(--teal);
  font-size:clamp(1.5rem,1.5vw + 1rem,2rem);
}
#product-page .section-header p{
  color:var(--muted);
}

/* Related product cards — orange border on hover */
#product-page .product-card:hover{
  border-color:var(--orange);
}
#product-page .product-card h2,
#product-page .product-card h3{
  color:var(--text);
  font-size:clamp(.95rem,.4vw + .9rem,1.1rem);
}
#product-page .product-card h2 a,
#product-page .product-card h3 a{
  color:var(--text);
}
#product-page .product-card h2 a:hover,
#product-page .product-card h3 a:hover{
  color:var(--orange);
  text-decoration:none;
}

/* ============================================================
   SMALL TABLETS/PHONES (<= 520px)
   Force exactly 1 department card per view with horizontal slide
   ============================================================ */
@media (max-width: 520px){
  /* Track becomes a horizontal scroller with one card per screen */
  #home-departments-track{
    display: flex !important;                /* override any grid */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 0 !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    padding-inline: 1.35rem !important;      /* as requested */
    -webkit-overflow-scrolling: touch;
    grid-auto-columns: unset !important;     /* neutralize grid rules */
    grid-template-columns: none !important;
  }

  /* One card per screen: width = viewport minus left+right padding (1.35rem * 2) */
  #home-departments-track > *{
    flex: 0 0 calc(100% - 2.7rem) !important;
    width: calc(100% - 2.7rem) !important;
    max-width: none !important;
    scroll-snap-align: start;
    margin: 0 !important;
  }

  /* Dept card internal padding at small sizes */
  #home-departments-track .card,
  #home-departments-track .department-card{
    padding: 1.05rem 1.1rem !important;
    min-width: auto !important;
  }

  /* Optional: hide scrollbar visuals */
  #home-departments-track::-webkit-scrollbar{ height: 0 }
}