/* ===================================================================
   LOVOMART — DESIGN SYSTEM & STYLES
   Fonts: Space Grotesk (display) / Inter (body) / JetBrains Mono (data)
=================================================================== */

:root {
  /* ---- Color: Navy structure ---- */
  --navy-950:#0A1628;
  --navy-900:#0F1F35;
  --navy-800:#16304F;
  --navy-700:#1F4066;
  --navy-600:#2B5482;

  /* ---- Color: Slate (neutral text/borders) ---- */
  --slate-600:#46566B;
  --slate-500:#5B6B82;
  --slate-300:#AEB9C7;
  --slate-200:#DCE3EC;
  --slate-100:#EEF2F7;

  /* ---- Color: Green (freshness / verified / trust) ---- */
  --green-700:#0E7A44;
  --green-600:#14A05A;
  --green-500:#1DBE6B;
  --green-100:#DFF6E7;

  /* ---- Color: Amber (primary marketplace action) ---- */
  --amber-600:#E5650A;
  --amber-500:#FF7A1A;
  --amber-400:#FF9A4D;
  --amber-100:#FFEBD6;

  /* ---- Neutrals ---- */
  --ink-900:#101826;
  --paper-0:#FFFFFF;
  --mist-50:#F5F7FA;
  --mist-100:#EEF1F6;

  /* ---- Semantic aliases ---- */
  --color-bg:var(--mist-50);
  --color-surface:var(--paper-0);
  --color-text:var(--ink-900);
  --color-text-muted:var(--slate-500);
  --color-border:var(--slate-200);
  --color-accent:var(--amber-500);
  --color-accent-hover:var(--amber-600);
  --color-success:var(--green-600);
  --color-success-hover:var(--green-700);

  /* ---- Type ---- */
  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', monospace;

  /* ---- Spacing ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* ---- Radius ---- */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;

  /* ---- Shadow ---- */
  --shadow-sm:0 1px 2px rgba(10,22,40,.08);
  --shadow-md:0 6px 16px rgba(10,22,40,.10);
  --shadow-lg:0 16px 40px rgba(10,22,40,.16);
  --shadow-card-hover:0 18px 34px rgba(10,22,40,.16);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms var(--ease);
  --t-base:220ms var(--ease);
  --t-slow:420ms var(--ease);

  /* ---- Layout ---- */
  --container-max:1320px;
  --container-pad:clamp(1rem, 4vw, 2rem);

  /* ---- Z-index scale ---- */
  --z-header:100; --z-dropdown:150; --z-mobile-overlay:210; --z-mobile-menu:220;
  --z-cart-overlay:310; --z-cart-drawer:320; --z-toast:400; --z-back-to-top:90;
}

/* ===================================================================
   RESET & BASE
=================================================================== */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input { font:inherit; color:inherit; }
ul { list-style:none; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.15; letter-spacing:-.01em; }
section[id] { scroll-margin-top:128px; }
@media (max-width:599px){ section[id]{ scroll-margin-top:16px; } }

:focus-visible {
  outline:2.5px solid var(--amber-500);
  outline-offset:2px;
  border-radius:4px;
}

.visually-hidden {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:8px; top:-48px; z-index:500;
  background:var(--navy-950); color:#fff; padding:10px 16px;
  border-radius:var(--r-sm); transition:top var(--t-fast);
}
.skip-link:focus{ top:8px; }

.noscript-banner{
  background:var(--amber-100); color:var(--navy-950); text-align:center;
  padding:var(--sp-3); font-size:.875rem; font-weight:600;
}

.container{
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--r-md);
  color:inherit; transition:background var(--t-fast);
}
.icon-btn svg{ width:22px; height:22px; }
.icon-btn:hover{ background:rgba(255,255,255,.1); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; border-radius:var(--r-md);
  font-family:var(--font-body); font-weight:700; font-size:.9375rem;
  transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn--accent{ background:var(--amber-500); color:#fff; box-shadow:var(--shadow-md); }
.btn--accent:hover{ background:var(--amber-600); box-shadow:var(--shadow-lg); }
.btn--success{ background:var(--green-600); color:#fff; box-shadow:var(--shadow-md); }
.btn--success:hover{ background:var(--green-700); box-shadow:var(--shadow-lg); }
.btn--outline-light{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn--outline-light:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.btn--ghost{ background:var(--mist-100); color:var(--navy-900); }
.btn--ghost:hover{ background:var(--slate-200); }
.btn--block{ width:100%; }

/* ===================================================================
   UTILITY STRIP
=================================================================== */
.utility-strip{
  background:var(--navy-950); color:var(--slate-300);
  font-size:.8125rem;
}
.utility-strip__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4); height:36px; flex-wrap:wrap;
}
.utility-strip__group{ display:flex; align-items:center; gap:var(--sp-5); }
.utility-strip__group a{ transition:color var(--t-fast); }
.utility-strip__group a:hover{ color:#fff; }
.trust-chip{ display:flex; align-items:center; gap:6px; color:var(--green-500); font-weight:600; }
.trust-chip svg{ width:15px; height:15px; flex-shrink:0; }

/* ===================================================================
   MAIN HEADER
=================================================================== */
.site-header{
  background:var(--navy-950); color:#fff;
  position:sticky; top:0; z-index:var(--z-header);
  box-shadow:0 2px 0 rgba(0,0,0,.05);
}
@media (max-width:599px){ .site-header{ position:static; } }

.site-header__inner{
  display:flex; align-items:center; gap:var(--sp-5);
  padding-block:14px;
}

.menu-toggle{ display:none; }
@media (max-width:899px){ .menu-toggle{ display:inline-flex; } }

.logo{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.logo__mark{ width:30px; height:30px; color:var(--amber-500); }
.logo__mark svg{ width:100%; height:100%; }
.logo__word{
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  color:#fff; letter-spacing:-.02em;
}
.logo__accent{ color:var(--amber-500); }

.search-bar{
  flex:1 1 auto; display:flex; max-width:720px; margin-inline:auto;
  background:#fff; border-radius:var(--r-md); overflow:hidden;
  box-shadow:var(--shadow-md);
}
.search-bar input{
  flex:1; border:none; outline:none; padding:13px 18px;
  font-size:.9375rem; color:var(--ink-900); min-width:0;
}
.search-bar input::placeholder{ color:var(--slate-500); }
.search-bar__btn{
  display:flex; align-items:center; gap:8px;
  background:var(--amber-500); color:#fff; font-weight:700;
  padding-inline:22px; transition:background var(--t-fast);
}
.search-bar__btn svg{ width:18px; height:18px; }
.search-bar__btn:hover{ background:var(--amber-600); }
.search-bar__btn span{ display:inline; }
@media (max-width:599px){ .search-bar__btn span{ display:none; } .search-bar__btn{ padding-inline:16px; } }

.header-actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.header-actions__btn{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-radius:var(--r-md); transition:background var(--t-fast);
}
.header-actions__btn:hover{ background:rgba(255,255,255,.08); }
.header-actions__btn svg{ width:23px; height:23px; flex-shrink:0; }
.header-actions__label{ display:flex; flex-direction:column; text-align:left; font-size:.875rem; font-weight:700; line-height:1.2; }
.header-actions__label small{ font-size:.6875rem; font-weight:500; color:var(--slate-300); }
.chevron{ width:14px !important; height:14px !important; margin-left:-2px; }

.dropdown{ position:relative; }
.dropdown__menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
  background:#fff; color:var(--ink-900); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:8px; z-index:var(--z-dropdown);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
}
.dropdown__menu.is-open{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown__menu a{
  display:block; padding:10px 12px; border-radius:var(--r-sm); font-size:.9375rem; font-weight:500;
  transition:background var(--t-fast);
}
.dropdown__menu a:hover{ background:var(--mist-100); }
.dropdown__menu hr{ border:none; border-top:1px solid var(--slate-200); margin:6px 4px; }

.cart-btn__icon-wrap{ position:relative; }
.cart-count{
  position:absolute; top:-8px; right:-9px; min-width:18px; height:18px; padding:0 4px;
  background:var(--amber-500); color:#fff; font-size:.6875rem; font-weight:800;
  border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
  border:2px solid var(--navy-950); transition:transform var(--t-fast);
}
.cart-count.is-bump{ animation:cartBump .4s var(--ease); }
@keyframes cartBump{ 0%{transform:scale(1);} 40%{transform:scale(1.4);} 100%{transform:scale(1);} }

@media (max-width:767px){ .header-actions__label{ display:none; } .dropdown{ display:none; } }

/* ---- Category nav strip ---- */
.category-nav{ background:var(--navy-900); border-top:1px solid rgba(255,255,255,.06); }
.category-nav__inner{
  display:flex; align-items:center; gap:var(--sp-6);
  height:46px; overflow-x:auto; scrollbar-width:none;
}
.category-nav__inner::-webkit-scrollbar{ display:none; }
.category-nav__inner a{
  font-size:.875rem; font-weight:600; color:var(--slate-300); white-space:nowrap;
  transition:color var(--t-fast);
}
.category-nav__inner a:hover{ color:#fff; }
.category-nav__highlight{ color:var(--amber-400) !important; }
.category-nav__all{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:.875rem;
  color:#fff; white-space:nowrap; flex-shrink:0;
}
.category-nav__all svg{ width:16px; height:16px; }

/* ===================================================================
   MOBILE MENU
=================================================================== */
.mobile-menu-overlay{
  position:fixed; inset:0; background:rgba(10,22,40,.55);
  z-index:var(--z-mobile-overlay); opacity:0; visibility:hidden; transition:opacity var(--t-base), visibility var(--t-base);
}
.mobile-menu-overlay.is-open{ opacity:1; visibility:visible; }

.mobile-menu{
  position:fixed; top:0; left:0; bottom:0; width:min(320px,86vw);
  background:#fff; z-index:var(--z-mobile-menu);
  transform:translateX(-100%); transition:transform var(--t-base);
  overflow-y:auto; display:flex; flex-direction:column;
}
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-5); background:var(--navy-950);
}
.mobile-menu__section{ padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--slate-200); }
.mobile-menu__section:last-child{ border-bottom:none; margin-top:auto; background:var(--mist-50); }
.mobile-menu__section a{
  display:block; padding:11px 0; font-weight:600; font-size:.9375rem; color:var(--navy-900);
}
.mobile-menu__heading{ font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--slate-500); font-weight:700; margin-bottom:4px; }
.mobile-menu__account{ display:flex !important; align-items:center; gap:10px; font-weight:700 !important; color:var(--navy-950) !important; }
.mobile-menu__account svg{ width:22px; height:22px; color:var(--amber-500); }

/* ===================================================================
   HERO: SIDEBAR + BANNER + PROMO
=================================================================== */
.hero-section{
  display:grid;
  grid-template-columns:260px 1fr 300px;
  grid-template-areas:"sidebar banner promo";
  gap:var(--sp-5);
  padding-block:var(--sp-5);
}
@media (max-width:1280px){
  .hero-section{ grid-template-columns:236px 1fr; grid-template-areas:"sidebar banner" "sidebar promo"; }
}
@media (max-width:899px){
  .hero-section{ grid-template-columns:1fr; grid-template-areas:"banner" "promo"; }
}

.category-sidebar{
  grid-area:sidebar; background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); padding:var(--sp-4) 0; height:fit-content;
  border:1px solid var(--color-border);
}
@media (max-width:899px){ .category-sidebar{ display:none; } }
.category-sidebar__title{
  font-family:var(--font-body); font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--slate-500); padding:0 var(--sp-4) var(--sp-3);
}
.category-sidebar li a{
  display:flex; align-items:center; gap:10px; padding:9px var(--sp-4);
  font-size:.875rem; font-weight:500; color:var(--navy-900);
  border-left:3px solid transparent; transition:background var(--t-fast), border-color var(--t-fast);
}
.category-sidebar li a svg{ width:17px; height:17px; color:var(--green-600); flex-shrink:0; }
.category-sidebar li a:hover{ background:var(--mist-50); border-left-color:var(--amber-500); }
.sidebar-promo{
  display:flex; flex-direction:column; gap:2px; margin:var(--sp-3) var(--sp-4) 0; padding:var(--sp-4);
  background:linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff; border-radius:var(--r-md);
}
.sidebar-promo strong{ font-family:var(--font-display); font-size:.9375rem; }
.sidebar-promo span{ font-size:.8125rem; color:var(--slate-300); margin-top:4px; }

/* ---- Banner / slider ---- */
.hero-banner{
  grid-area:banner; position:relative; border-radius:var(--r-lg); overflow:hidden;
  min-height:420px; box-shadow:var(--shadow-md);
}
.hero-banner__track{ position:relative; width:100%; height:100%; min-height:420px; }
.hero-slide{
  position:absolute; inset:0; display:flex; align-items:center;
  padding:var(--sp-10); opacity:0; visibility:hidden; transition:opacity var(--t-slow);
  overflow:hidden;
}
.hero-slide.is-active{ opacity:1; visibility:visible; position:relative; }
.hero-slide--main{ background:linear-gradient(135deg, var(--navy-950) 0%, var(--navy-700) 55%, var(--green-700) 130%); }
.hero-slide--deals{ background:linear-gradient(135deg, var(--navy-950) 0%, var(--amber-600) 140%); }
.hero-slide--services{ background:linear-gradient(135deg, var(--navy-950) 0%, var(--green-700) 130%); }
.hero-slide__watermark{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:340px; height:340px; color:#fff; opacity:.06; pointer-events:none;
}
.hero-slide__content{ position:relative; z-index:2; max-width:560px; color:#fff; }
.hero-slide__eyebrow{
  display:inline-block; background:rgba(255,255,255,.14); color:var(--amber-400);
  font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-full); margin-bottom:var(--sp-4);
}
.hero-slide__content h1{ font-size:clamp(1.6rem, 1.1rem + 2.2vw, 2.75rem); color:#fff; margin-bottom:var(--sp-4); }
.hero-slide__content p{ font-size:1rem; color:var(--slate-200); max-width:480px; margin-bottom:var(--sp-6); line-height:1.6; }
.hero-slide__ctas{ display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.hero-slide__meta{
  margin-top:var(--sp-6); font-family:var(--font-mono); font-size:.8125rem;
  color:var(--slate-300); font-weight:500;
}
.hero-slide__meta strong{ color:var(--amber-400); }

.hero-banner__arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:var(--r-full);
  background:rgba(255,255,255,.16); color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background var(--t-fast);
}
.hero-banner__arrow:hover{ background:rgba(255,255,255,.32); }
.hero-banner__arrow svg{ width:20px; height:20px; }
.hero-banner__arrow--prev{ left:var(--sp-4); }
.hero-banner__arrow--next{ right:var(--sp-4); }
@media (max-width:599px){ .hero-banner__arrow{ display:none; } }

.hero-banner__dots{ position:absolute; bottom:var(--sp-5); left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.hero-banner__dot{ width:8px; height:8px; border-radius:var(--r-full); background:rgba(255,255,255,.4); transition:background var(--t-fast), width var(--t-fast); }
.hero-banner__dot.is-active{ background:var(--amber-500); width:22px; }

@media (max-width:599px){
  .hero-banner, .hero-banner__track{ min-height:380px; }
  .hero-slide{ padding:var(--sp-6); }
}

/* ---- Promo stack ---- */
.promo-stack{ grid-area:promo; display:flex; flex-direction:column; gap:var(--sp-5); }
@media (max-width:1280px) and (min-width:900px){ .promo-stack{ flex-direction:row; } }
.promo-card{
  flex:1; display:flex; flex-direction:column; gap:6px; padding:var(--sp-5);
  border-radius:var(--r-lg); min-height:190px; justify-content:flex-end; position:relative; overflow:hidden;
  transition:transform var(--t-base), box-shadow var(--t-base); box-shadow:var(--shadow-sm);
}
.promo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-card-hover); }
.promo-card--services{ background:linear-gradient(160deg, var(--green-700), var(--navy-900)); color:#fff; }
.promo-card--app{ background:linear-gradient(160deg, var(--amber-500), var(--navy-900)); color:#fff; }
.promo-card__tag{ font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.75); }
.promo-card strong{ font-family:var(--font-display); font-size:1.25rem; }
.promo-card__cta{ font-size:.8125rem; font-weight:600; margin-top:4px; color:var(--amber-400); }

/* ===================================================================
   TRUST STRIP
=================================================================== */
.trust-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
  padding-block:var(--sp-8);
}
.trust-strip__item{ display:flex; align-items:flex-start; gap:12px; }
.trust-strip__item svg{ width:30px; height:30px; color:var(--green-600); flex-shrink:0; }
.trust-strip__item strong{ display:block; font-size:.9375rem; font-weight:700; color:var(--navy-950); }
.trust-strip__item span{ font-size:.8125rem; color:var(--color-text-muted); }
@media (max-width:899px){ .trust-strip{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479px){ .trust-strip{ grid-template-columns:1fr; gap:var(--sp-4); } }

/* ===================================================================
   SECTIONS (shared)
=================================================================== */
.section{ padding-block:var(--sp-10); }
.section.alt-bg{ background:var(--mist-100); }
.section__header{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4);
  margin-bottom:var(--sp-6); flex-wrap:wrap;
}
.section__heading-group h2{
  display:flex; align-items:center; gap:10px; font-size:1.5rem; color:var(--navy-950);
}
.section__heading-group h2 svg{ width:24px; height:24px; color:var(--amber-500); }
.section__heading-group p{ color:var(--color-text-muted); font-size:.9375rem; margin-top:4px; }
.section__see-all{ font-weight:700; font-size:.875rem; color:var(--navy-800); white-space:nowrap; transition:color var(--t-fast); }
.section__see-all:hover{ color:var(--amber-600); }

/* ===================================================================
   FLASH SALES + COUNTDOWN
=================================================================== */
.flash-sales .section__heading-group h2{ color:var(--amber-600); }
.countdown{ display:flex; align-items:center; gap:8px; }
.countdown__label{ font-size:.8125rem; font-weight:600; color:var(--color-text-muted); margin-right:2px; }
.countdown__box{
  display:flex; flex-direction:column; align-items:center; background:var(--navy-950);
  color:#fff; border-radius:var(--r-sm); padding:6px 9px; min-width:44px;
}
.countdown__box span{ font-family:var(--font-mono); font-weight:700; font-size:1.0625rem; line-height:1; }
.countdown__box small{ font-size:.5625rem; color:var(--slate-300); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.countdown__sep{ font-weight:700; color:var(--slate-300); }
@media (max-width:479px){ .countdown__label{ display:none; } }

.product-row{
  display:flex; gap:var(--sp-4); overflow-x:auto; padding-bottom:var(--sp-3);
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.product-row::-webkit-scrollbar{ height:6px; }
.product-row::-webkit-scrollbar-thumb{ background:var(--slate-200); border-radius:var(--r-full); }
.product-row .product-card{ flex:0 0 208px; scroll-snap-align:start; }

/* ===================================================================
   PRODUCT GRID + CARD
=================================================================== */
.product-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5);
}
@media (max-width:1279px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:991px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:699px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); } }

.product-card{
  background:#fff; border-radius:var(--r-lg); border:1px solid var(--color-border);
  display:flex; flex-direction:column; overflow:hidden;
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:transparent; }

.product-card__image{
  position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:3.25rem;
}
.img-produce{ background:linear-gradient(155deg, var(--green-100), #fff 75%); }
.img-grocery{ background:linear-gradient(155deg, var(--amber-100), #fff 75%); }
.img-household{ background:linear-gradient(155deg, var(--slate-100), #fff 75%); }
.img-fastfood{ background:linear-gradient(155deg, #FFE1D6, #fff 75%); }

.badge{
  position:absolute; top:8px; font-size:.6875rem; font-weight:800; padding:4px 8px;
  border-radius:var(--r-sm); line-height:1.3; display:flex; align-items:center; gap:3px;
}
.badge--express{ left:8px; background:var(--navy-950); color:#fff; }
.badge--express svg{ width:11px; height:11px; }
.badge--discount{ right:8px; background:var(--amber-500); color:#fff; }

.product-card__body{ padding:var(--sp-4); display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card__title{
  font-size:.875rem; font-weight:600; color:var(--navy-950); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em;
}
.product-card__rating{ display:flex; align-items:center; gap:6px; }
.stars{ display:inline-flex; gap:1px; }
.star{ position:relative; display:inline-block; width:13px; height:13px; }
.star svg{ position:absolute; inset:0; width:100%; height:100%; }
.star__base{ color:var(--slate-200); }
.star__fill{ overflow:hidden; color:var(--amber-500); }
.product-card__reviews{ font-size:.75rem; color:var(--color-text-muted); }
.product-card__price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-top:auto; }
.product-card__price{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; color:var(--navy-950); }
.product-card__price-original{ font-size:.8125rem; color:var(--slate-300); text-decoration:line-through; }
.product-card__add-btn{
  width:calc(100% - 2 * var(--sp-4)); margin:0 var(--sp-4) var(--sp-4);
  background:var(--amber-500); color:#fff; font-weight:700; font-size:.8125rem;
  text-transform:uppercase; letter-spacing:.03em; padding:11px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background var(--t-fast), transform var(--t-fast);
}
.product-card__add-btn svg{ width:15px; height:15px; }
.product-card__add-btn:hover{ background:var(--amber-600); }
.product-card__add-btn:active{ transform:scale(.97); }
.product-card__add-btn.is-added{ background:var(--green-600); }

/* ===================================================================
   SERVICES SECTION
=================================================================== */
.services-section{ background:var(--navy-950); color:#fff; }
.services-section .section__heading-group h2{ color:#fff; }
.services-section .section__heading-group h2 svg{ color:var(--green-500); }
.services-section .section__heading-group p{ color:var(--slate-300); }

.service-filter-tabs{ display:flex; gap:10px; margin-bottom:var(--sp-6); flex-wrap:wrap; }
.service-filter-tabs button{
  padding:9px 18px; border-radius:var(--r-full); font-size:.8125rem; font-weight:700;
  background:rgba(255,255,255,.08); color:var(--slate-300); transition:background var(--t-fast), color var(--t-fast);
}
.service-filter-tabs button:hover{ background:rgba(255,255,255,.16); color:#fff; }
.service-filter-tabs button.is-active{ background:var(--green-600); color:#fff; }

.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5); }
@media (max-width:1279px){ .service-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:899px){ .service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:599px){ .service-grid{ grid-template-columns:1fr; } }

.pro-card{
  background:#fff; color:var(--ink-900); border-radius:var(--r-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:10px;
  transition:transform var(--t-base), box-shadow var(--t-base);
}
.pro-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.pro-card__top{ display:flex; align-items:center; gap:12px; }
.pro-card__avatar{
  position:relative; width:56px; height:56px; border-radius:var(--r-full);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem; color:#fff;
}
.avatar-plumber{ background:linear-gradient(135deg, var(--navy-700), var(--navy-950)); }
.avatar-electrician{ background:linear-gradient(135deg, var(--amber-500), var(--amber-600)); }
.avatar-chef{ background:linear-gradient(135deg, var(--green-500), var(--green-700)); }
.avatar-barber{ background:linear-gradient(135deg, var(--slate-500), var(--navy-800)); }
.pro-card__verified{
  position:absolute; bottom:-2px; right:-2px; width:20px; height:20px; border-radius:var(--r-full);
  background:var(--green-600); border:2px solid #fff; display:flex; align-items:center; justify-content:center;
}
.pro-card__verified svg{ width:11px; height:11px; color:#fff; }
.pro-card__name{ font-family:var(--font-display); font-weight:700; font-size:1.0625rem; line-height:1.2; }
.pro-card__title{ font-size:.8125rem; color:var(--color-text-muted); }
.pro-card__badge{
  display:inline-flex; align-items:center; gap:5px; align-self:flex-start;
  background:var(--green-100); color:var(--green-700); font-size:.6875rem; font-weight:800;
  padding:5px 10px; border-radius:var(--r-full); text-transform:uppercase; letter-spacing:.03em;
}
.pro-card__badge svg{ width:12px; height:12px; }
.pro-card__meta{ display:flex; align-items:center; gap:10px; font-size:.8125rem; color:var(--color-text-muted); flex-wrap:wrap; }
.pro-card__meta .dot{ width:5px; height:5px; border-radius:50%; background:var(--slate-300); }
.pro-card__tagline{ font-size:.8125rem; color:var(--slate-600); line-height:1.5; }
.pro-card__footer{
  margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--color-border);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pro-card__price{ display:flex; flex-direction:column; }
.pro-card__price strong{ font-family:var(--font-display); font-size:1.0625rem; color:var(--navy-950); }
.pro-card__price span{ font-size:.6875rem; color:var(--color-text-muted); }
.pro-card__book-btn{
  background:var(--green-600); color:#fff; font-weight:700; font-size:.8125rem;
  padding:10px 16px; border-radius:var(--r-md); transition:background var(--t-fast), transform var(--t-fast);
  white-space:nowrap;
}
.pro-card__book-btn:hover{ background:var(--green-700); }
.pro-card__book-btn:active{ transform:scale(.97); }

/* ===================================================================
   SEARCH RESULTS
=================================================================== */
.search-results__subheading{ font-size:1.0625rem; color:var(--navy-900); margin:var(--sp-6) 0 var(--sp-4); }
.search-results__subheading:first-of-type{ margin-top:0; }
.empty-state{
  text-align:center; padding:var(--sp-12) var(--sp-4); color:var(--color-text-muted);
  font-size:.9375rem; background:#fff; border-radius:var(--r-lg); border:1px dashed var(--color-border);
}

/* ===================================================================
   APP / NEWSLETTER BANNER
=================================================================== */
.app-banner{ background:linear-gradient(120deg, var(--navy-950), var(--navy-700)); color:#fff; padding-block:var(--sp-10); }
.app-banner__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6); flex-wrap:wrap; }
.app-banner__copy h2{ font-size:1.5rem; color:#fff; margin-bottom:6px; }
.app-banner__copy p{ color:var(--slate-300); font-size:.9375rem; }
.app-banner__form{ display:flex; gap:10px; flex-wrap:wrap; }
.app-banner__form input{
  padding:13px 16px; border-radius:var(--r-md); border:none; outline:none; min-width:240px;
  font-size:.9375rem;
}

/* ===================================================================
   FOOTER
=================================================================== */
.site-footer{ background:var(--navy-950); color:var(--slate-300); padding-top:var(--sp-12); }
.site-footer__grid{
  display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--sp-8);
  padding-bottom:var(--sp-10);
}
@media (max-width:991px){ .site-footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:479px){ .site-footer__grid{ grid-template-columns:1fr; gap:var(--sp-6); } }

.site-footer__brand p{ font-size:.875rem; margin:var(--sp-3) 0 var(--sp-4); max-width:280px; line-height:1.6; }
.site-footer__social{ display:flex; gap:10px; }
.site-footer__social a{
  width:36px; height:36px; border-radius:var(--r-full); background:rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center; transition:background var(--t-fast);
}
.site-footer__social a:hover{ background:var(--amber-500); }
.site-footer__social svg{ width:17px; height:17px; }

.site-footer__col h3{ font-family:var(--font-body); font-size:.8125rem; text-transform:uppercase; letter-spacing:.05em; color:#fff; margin-bottom:var(--sp-3); }
.site-footer__col.site-footer__gap-top{ margin-top:0; }
h3.site-footer__gap-top{ margin-top:var(--sp-5); }
.site-footer__col a{ display:block; font-size:.875rem; padding:6px 0; transition:color var(--t-fast); }
.site-footer__col a:hover{ color:#fff; }

.payment-icons{ display:flex; flex-wrap:wrap; gap:8px; }
.payment-icons span{
  font-size:.6875rem; font-weight:700; background:rgba(255,255,255,.08); color:var(--slate-300);
  padding:6px 10px; border-radius:var(--r-sm);
}
.app-badges{ display:flex; flex-direction:column; gap:8px; }
.app-badge{
  border:1px solid rgba(255,255,255,.25); border-radius:var(--r-sm); padding:8px 12px;
  font-size:.75rem; font-weight:600; text-align:center;
}

.site-footer__bottom{
  border-top:1px solid rgba(255,255,255,.1); padding-block:var(--sp-5);
  display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; font-size:.8125rem;
}

/* ===================================================================
   CART DRAWER
=================================================================== */
.cart-drawer-overlay{
  position:fixed; inset:0; background:rgba(10,22,40,.55); z-index:var(--z-cart-overlay);
  opacity:0; visibility:hidden; transition:opacity var(--t-base), visibility var(--t-base);
}
.cart-drawer-overlay.is-open{ opacity:1; visibility:visible; }

.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw);
  background:#fff; z-index:var(--z-cart-drawer); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t-base); box-shadow:var(--shadow-lg);
}
.cart-drawer.is-open{ transform:translateX(0); }
.cart-drawer__header{
  display:flex; align-items:center; justify-content:space-between; padding:var(--sp-5);
  border-bottom:1px solid var(--color-border);
}
.cart-drawer__header h2{ font-size:1.25rem; }
.cart-drawer__body{ flex:1; overflow-y:auto; padding:var(--sp-4) var(--sp-5); }

.cart-item{ display:flex; gap:12px; padding:var(--sp-3) 0; border-bottom:1px solid var(--color-border); }
.cart-item__image{
  width:60px; height:60px; border-radius:var(--r-md); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:1.75rem;
}
.cart-item__info{ flex:1; min-width:0; }
.cart-item__title{ font-size:.8125rem; font-weight:600; line-height:1.3; margin-bottom:4px; }
.cart-item__price{ font-family:var(--font-display); font-weight:700; font-size:.875rem; color:var(--navy-950); }
.cart-item__controls{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.cart-item__qty-btn{
  width:24px; height:24px; border-radius:var(--r-sm); background:var(--mist-100);
  display:flex; align-items:center; justify-content:center; transition:background var(--t-fast);
}
.cart-item__qty-btn:hover{ background:var(--slate-200); }
.cart-item__qty-btn svg{ width:12px; height:12px; }
.cart-item__qty{ font-size:.8125rem; font-weight:700; min-width:16px; text-align:center; }
.cart-item__remove{ margin-left:auto; color:var(--slate-500); transition:color var(--t-fast); }
.cart-item__remove:hover{ color:var(--amber-600); }
.cart-item__remove svg{ width:16px; height:16px; }

.cart-drawer__empty{ display:none; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:var(--sp-16) var(--sp-4); color:var(--color-text-muted); }
.cart-drawer__empty.is-visible{ display:flex; }
.cart-drawer__empty svg{ width:52px; height:52px; color:var(--slate-300); margin-bottom:var(--sp-2); }
.cart-drawer__empty p{ font-weight:700; color:var(--navy-900); font-size:.9375rem; }
.cart-drawer__empty span{ font-size:.8125rem; }

.cart-drawer__footer{ padding:var(--sp-5); border-top:1px solid var(--color-border); }
.cart-drawer__subtotal{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-4); font-size:.9375rem; }
.cart-drawer__subtotal strong{ font-family:var(--font-display); font-size:1.25rem; color:var(--navy-950); }

/* ===================================================================
   TOAST
=================================================================== */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:var(--navy-950); color:#fff; padding:13px 22px; border-radius:var(--r-md);
  font-size:.875rem; font-weight:600; box-shadow:var(--shadow-lg); z-index:var(--z-toast);
  opacity:0; visibility:hidden; transition:opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  display:flex; align-items:center; gap:8px; max-width:90vw;
}
.toast.is-visible{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.toast--success{ background:var(--green-700); }

/* ===================================================================
   BACK TO TOP
=================================================================== */
.back-to-top{
  position:fixed; right:20px; bottom:20px; width:46px; height:46px; border-radius:var(--r-full);
  background:var(--navy-950); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); z-index:var(--z-back-to-top);
  opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top svg{ width:20px; height:20px; }
.back-to-top:hover{ background:var(--amber-500); }

/* ===================================================================
   REDUCED MOTION
=================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
/* ==========================================
   LOVOMART BRAND PRELOADER SCREEN
   ========================================== */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #FFFDF9; /* Elegant cream canvas background */
  z-index: 99999; /* Forces the screen to stay on top of everything else */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.loader-content {
  text-align: center;
}

.loader-title {
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 2.5rem;
  color: #2A140A; /* Deep premium brown tone */
  letter-spacing: 4px;
  margin: 20px 0 5px 0;
}

.loader-slogan {
  font-family: 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: #A94418; /* Burnt orange accent color */
  letter-spacing: 2px;
  margin-bottom: 35px;
}

/* Minimalist loading bar indicator container */
.loading-bar {
  width: 140px;
  height: 3px;
  background-color: #EFA78A; /* Light pastel orange trail */
  margin: 0 auto;
  border-radius: 2px;
  overflow: hidden;
}

/* Moving progress bar element */
.loading-progress {
  width: 100%;
  height: 100%;
  background-color: #A94418;
  animation: loadProgress 1.5s infinite linear;
  transform-origin: left;
}

/* Smooth linear loading bar animation */
@keyframes loadProgress {
  0% { transform: scaleX(0); }
  50% { transform: scaleX(0.5); }
  100% { transform: scaleX(1); }
}

/* Utility class to fade out and hide the loader via JavaScript */
.loader-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03); /* Subtle zoom-out effect as it vanishes */
}