/* =========================================
   NIFTYHUB — PROFESSIONAL STYLES
   ========================================= */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
  --primary: #c0392b;
  --primary-dark: #a5251c;
  --golden: #e67e22;
  --sand: #fef9f5;
  --text-dark: #2c1a0f;
  --text-light: #7a5a4a;
  --white: #ffffff;
  --off-white: #fbf8f5;
  --border-light: rgba(0,0,0,0.06);
  --shadow-sm: 0 6px 20px rgba(0,0,0,0.04);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.07);
  --shadow-lg: 0 20px 40px rgba(0,0,0,0.1);
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-card: 24px;
  --transition: all 0.3s ease;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mini-cart-h: 0px;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  line-height: 1.6;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(0.8rem, 2vw, 1.5rem);
  width: 100%;
}

/* ══════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════ */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px);
  padding: clamp(0.55rem, 1.5vw, 0.7rem) clamp(1rem, 3vw, 2rem);
  border-radius: 0 0 22px 22px;
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 8px 24px -12px rgba(44,26,15,0.18);
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 0.75rem;
}

/* Keyboard users get a clear, on-brand focus ring everywhere — a small
   detail that separates a polished site from a merely pretty one. */
:focus-visible { outline: 3px solid rgba(192,57,43,0.35); outline-offset: 2px; border-radius: 6px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* ── Hamburger Menu ── */
.hamburger-menu {
  display: none;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  gap: 5px;
  padding: 0.5rem;
  z-index: 101;
}
.hamburger-line {
  width: 28px;
  height: 3px;
  background: var(--primary);
  border-radius: 4px;
  transition: all 0.3s ease;
}
.hamburger-menu.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}
.hamburger-menu.active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.logo { display:flex; align-items:center; gap:0.75rem; flex-shrink:0; }
.logo img { height: clamp(44px, 6vw, 60px); width:auto; border-radius: 16px; }
.logo-text {
  font-weight:800; font-size: clamp(1rem, 3vw, 1.4rem);
  background: linear-gradient(135deg, var(--primary), var(--golden));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

.navbar-tagline {
  font-family:'Dancing Script',cursive; font-size: clamp(0.85rem, 2vw, 1.15rem); color:var(--primary);
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,245,235,0.9));
  backdrop-filter:blur(8px); padding: clamp(0.4rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.8rem); border-radius:60px;
  white-space:nowrap; border:1.5px solid rgba(192,57,43,0.25);
  box-shadow:0 4px 12px rgba(192,57,43,0.2), inset 0 1px 0 white;
  display:flex; align-items:center; gap:0.5rem; letter-spacing:0.3px;
  transition:var(--transition);
}
/* Decorative — only worth its width on genuinely roomy desktops. */
@media (max-width: 1279px) { .navbar-tagline { display: none; } }
.navbar-tagline::before {
  content:"🌿"; font-size: clamp(0.8rem, 2vw, 1.2rem); font-family:sans-serif;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}
.navbar-tagline:hover {
  border-color:var(--primary);
  box-shadow:0 6px 18px rgba(192,57,43,0.3), inset 0 1px 0 white;
  transform:translateY(-1px);
}

@keyframes gentlePulse {
  0%,100% { box-shadow:0 4px 12px rgba(192,57,43,0.2); }
  50%      { box-shadow:0 4px 20px rgba(192,57,43,0.35); }
}

.nav-links {
  display:flex; gap:0.15rem; align-items:center;
  flex-wrap:nowrap; position:relative; flex:1; justify-content:flex-end;
}
/* On desktop the drawer wrapper/divider added for the mobile off-canvas menu must not
   affect layout — the body's <a> children need to stay direct flex items of .nav-links. */
.nav-drawer-head, .nav-drawer-divider, .nav-backdrop { display: none; }
.nav-drawer-body { display: contents; }

/* Mobile-only nav links — hidden everywhere, shown via body class on mobile */
#navWallet, #navTokens, #navReferral, #navSell, #navMessages, #navGifts, #navMyOrders, #navProfile, #navAdmin, #navLogout { display: none !important; }

.nav-links a {
  text-decoration:none; font-family:'Inter',sans-serif;
  font-weight:600; font-size:0.9rem; color:var(--text-dark);
  padding:0.45rem 0.85rem; border-radius:40px; position:relative;
  white-space:nowrap;
  transition:color 0.3s, background 0.3s, transform 0.2s;
}
.nav-links a::after {
  content:""; position:absolute; bottom:4px; left:50%;
  transform:translateX(-50%) scaleX(0); width:60%; height:2px;
  background:linear-gradient(90deg,var(--primary),var(--golden)); border-radius:4px;
  transition:transform 0.3s cubic-bezier(0.2,0.9,0.4,1.1);
}
.nav-links a:hover { color:var(--primary); background:rgba(192,57,43,0.06); transform:translateY(-1px); }
.nav-links a:hover::after { transform:translateX(-50%) scaleX(1); }
.nav-links a.active { color:var(--primary); background:rgba(192,57,43,0.1); font-weight:800; }

.cart-icon {
  display: flex; align-items: center; gap: 0.45rem;
  background: linear-gradient(135deg, var(--primary) 0%, #d4521a 100%);
  padding: 0.52rem 1.1rem 0.52rem 0.85rem;
  border-radius: 50px; cursor: pointer;
  box-shadow: 0 4px 18px rgba(192,57,43,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative; overflow: hidden;
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
  width: auto; height: auto;
}
.cart-icon::after {
  content: ''; position: absolute;
  top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: skewX(-18deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.cart-icon:hover::after { left: 160%; }
.cart-icon:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 26px rgba(192,57,43,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.cart-icon:active { transform: scale(0.97); }

.cart-icon i { font-size: 1.05rem; color: white; flex-shrink: 0; }
.cart-label { font-size: 0.82rem; font-weight: 700; color: white; letter-spacing: 0.4px; }

.cart-wrapper { position: relative; flex-shrink: 0; }
.cart-count {
  position: absolute; top: -6px; right: -6px;
  background: var(--golden); color: white;
  font-size: 0.62rem; font-weight: 800;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.2s ease;
  pointer-events: none;
  z-index: 10;
}
.cart-count.bump { animation: cartBump 0.35s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes cartBump {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.6); }
}

@media (max-width: 479px) {
  .cart-label { display: none; }
  .cart-icon { padding: 0.52rem 0.75rem; }
}

/* Account dropdown — desktop only.
   `top:100%` is load-bearing: without an explicit top, an absolutely
   positioned child of a flex row (.nav-links is align-items:center) takes
   its "static position" — vertically CENTRED on the row as if it were the
   only item. A ~600px tall menu centred on a ~70px row hangs ~300px above
   the navbar, behind the announcement bar / off the top of the page, so
   only the bottom half of the links (Messages onward) ever showed on
   laptops. Anchoring to the bottom edge of the row fixes it at any width. */
.account-dropdown {
  display:none; position:absolute; background:white;
  border-radius:1.2rem; box-shadow:0 10px 30px rgba(0,0,0,0.1);
  padding:0.6rem 0; min-width:200px; z-index:200;
  border:1px solid rgba(192,57,43,0.1);
  top:100%; margin-top:0.4rem; right:0; left:auto;
  max-height:calc(100vh - 120px); overflow-y:auto;
  transform-origin: top right;
}
.account-dropdown.show { display:block; animation: dropdownPop 0.22s var(--spring); }
@keyframes dropdownPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.account-dropdown a {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.6rem 1.2rem; text-decoration:none;
  color:#2c1a0f; font-weight:600; font-size:0.9rem;
  transition: background 0.2s, color 0.2s, padding-left 0.2s var(--spring);
  white-space:nowrap;
}
.account-dropdown a:hover { background:#fef5ee; color:#c0392b; padding-left:1.5rem; }

/* Show mobile nav items only when logged in — !important overrides the global hide rule.
   Must match the @media (max-width: 1023px) hamburger-drawer breakpoint below, not the
   767px mobile-only breakpoint — otherwise a logged-in tablet user (768-1023px) gets a
   drawer with no account links in it at all. */
@media (max-width: 1023px) {
  body.user-logged-in #navWallet   { display: flex !important; }
  body.user-logged-in #navTokens   { display: flex !important; }
  body.user-logged-in #navReferral { display: flex !important; }
  body.user-logged-in #navSell     { display: flex !important; }
  body.user-logged-in #navMessages { display: flex !important; }
  body.user-logged-in #navGifts    { display: flex !important; }
  body.user-logged-in #navMyOrders { display: flex !important; }
  body.user-logged-in #navProfile  { display: flex !important; }
  body.user-logged-in #navLogout   { display: flex !important; }
  body.admin-logged-in #navAdmin   { display: flex !important; }
  .account-dropdown                { display: none !important; }
}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
  /* Layered soft glows over the brand gradient give the panel depth
     instead of reading as one flat block of red. */
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,0.16), transparent 42%),
    radial-gradient(circle at 90% 90%, rgba(255,205,120,0.30), transparent 46%),
    linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 55%, var(--golden) 130%);
  border-radius:2rem; margin:1.25rem 0 2.25rem;
  padding:clamp(2.2rem,5vw,3.2rem) clamp(1.8rem,4vw,3.2rem);
  text-align:left; box-shadow:0 28px 56px -18px rgba(120,30,10,0.42);
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:clamp(1.8rem,4vw,3rem); flex-wrap:wrap;
}
.hero::before { display:none; }
.hero-content { max-width:600px; flex:1 1 360px; margin:0; position:relative; z-index:2; }
.hero h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.4rem,7vw,4rem);
  font-weight:900; color:#fff; line-height:1.15;
  text-shadow:0 4px 20px rgba(0,0,0,0.55);
  letter-spacing:-0.5px; animation:fadeInUp 0.8s ease;
}
.hero h1 span {
  background:linear-gradient(135deg,#ffecd2,#fcb69f,#f6d365);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; text-shadow:none;
}
.hero p {
  font-size:clamp(1rem,3vw,1.2rem); color:rgba(255,255,255,0.9);
  margin:1rem 0 1.6rem; font-weight:500; line-height:1.65;
  animation:fadeInUp 1s ease;
}
.hero-cta {
  background:#fff; color:#b41e14; padding:1rem 2.8rem; border-radius:60px;
  text-decoration:none; font-weight:800; display:inline-flex; align-items:center;
  gap:0.7rem; transition:all 0.3s cubic-bezier(0.2,0.9,0.4,1.1);
  box-shadow:0 10px 30px rgba(0,0,0,0.2),0 0 0 4px rgba(255,255,255,0.2);
  font-size:1.1rem; letter-spacing:0.5px; animation:fadeInUp 1.2s ease;
  position:relative; overflow:hidden;
}
.hero-cta:hover {
  background:#b41e14; color:#fff; gap:1.2rem; transform:translateY(-3px);
  box-shadow:0 15px 35px rgba(180,30,20,0.4),0 0 0 6px rgba(255,255,255,0.25);
  animation-play-state: paused;
}
.hero-cta i { font-size:1.2rem; transition:transform 0.2s; }
.hero-cta:hover i { transform:translateX(4px); }

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes heroCtaGlow {
    0%, 100% { box-shadow:0 10px 30px rgba(0,0,0,0.2),0 0 0 4px rgba(255,255,255,0.2); }
    50%      { box-shadow:0 10px 34px rgba(0,0,0,0.22),0 0 0 4px rgba(255,255,255,0.22), 0 0 28px 5px rgba(255,236,210,0.55); }
  }
  .hero-cta { animation: fadeInUp 1.2s ease, heroCtaGlow 2.8s ease-in-out 1.3s infinite; }
}

/* ══════════════════════════════════════════
   SHOP HEADER
══════════════════════════════════════════ */
.shop-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin: clamp(1.5rem,3vw,2.5rem) 0 clamp(1.5rem,3vw,2.5rem);
  flex-wrap: wrap;
}
.shop-header-eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 0.5rem;
}
.shop-header-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 900;
  background: linear-gradient(135deg, var(--primary), var(--golden));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1.1; margin-bottom: 0.35rem;
}
.shop-header-text p {
  font-size: clamp(0.85rem, 1.8vw, 0.96rem); color: var(--text-light); font-weight: 500;
}
.shop-header-line {
  flex: 1; height: 2px; min-width: 40px;
  background: linear-gradient(90deg, rgba(192,57,43,0.25), rgba(230,126,34,0.15), transparent);
  border-radius: 4px; margin-bottom: 0.5rem;
}
@media (max-width: 540px) { .shop-header-line { display: none; } }

/* ══════════════════════════════════════════
   SHOP TOOLBAR — search + category quick-jump
══════════════════════════════════════════ */
.shop-toolbar {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: 0.85rem 0 1rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  border-bottom: 1.5px solid var(--border-light);
}
.shop-search-wrap {
  position: relative; display: flex; align-items: center;
  max-width: 560px; width: 100%;
}
.shop-search-icon {
  position: absolute; left: 1.1rem; color: var(--text-light); font-size: 0.9rem; pointer-events: none;
}
.shop-search-input {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 0.92rem;
  padding: 0.8rem 2.6rem; border-radius: 30px;
  border: 1.5px solid var(--border-light); background: var(--white);
  color: var(--text-dark); box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.shop-search-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}
.shop-search-input::placeholder { color: var(--text-light); opacity: 0.75; }
.shop-search-clear {
  position: absolute; right: 0.6rem; width: 30px; height: 30px;
  border-radius: 50%; border: none; background: var(--off-white);
  color: var(--text-light); cursor: pointer; display: flex;
  align-items: center; justify-content: center; font-size: 0.8rem;
  transition: var(--transition);
}
.shop-search-clear:hover { background: var(--border-light); color: var(--primary); }
/* display:flex above would otherwise beat the UA stylesheet's [hidden]
   rule — author CSS wins regardless of specificity — so the clear button
   showed even with nothing typed. */
.shop-search-clear[hidden], .shop-empty-state[hidden] { display: none !important; }

.category-pills {
  display: flex; gap: 0.55rem; overflow-x: auto; padding-bottom: 0.2rem;
  scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
.category-pill {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700;
  white-space: nowrap; padding: 0.5rem 1.1rem; border-radius: 30px;
  border: 1.5px solid var(--border-light); background: var(--white);
  color: var(--text-dark); cursor: pointer; transition: var(--transition);
}
.category-pill:hover { border-color: var(--golden); }
.category-pill.active {
  background: linear-gradient(135deg, var(--primary), var(--golden));
  border-color: transparent; color: var(--white); box-shadow: var(--shadow-sm);
}

.shop-empty-state {
  text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; color: var(--text-light);
}
.shop-empty-state i { font-size: 2rem; color: var(--border-light); display: block; margin-bottom: 1rem; }
.shop-empty-state p { font-size: 0.95rem; margin-bottom: 1rem; }
.shop-empty-state span { color: var(--text-dark); font-weight: 700; }
.shop-empty-state button {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.85rem;
  color: var(--white); background: linear-gradient(135deg, var(--primary), var(--golden));
  border: none; border-radius: 30px; padding: 0.65rem 1.4rem; cursor: pointer;
}

/* Progressive reveal: only the first 8 cards in a category show until
   "Show all" is clicked — every card still ships in the DOM/HTML either
   way, so nothing here removes crawlable product content, it's purely a
   visual cap lifted by .is-expanded or by an active search. */
/* Scoped to html.js (set inline in <head>) so a visitor without JS — who
   would never get a "Show all" button — still sees the full category. */
html.js .product-grid:not(.is-expanded) .product-card:nth-child(n+9) { display: none; }
.category-show-more {
  display: block; margin: 1.1rem auto 0; font-family: 'Inter', sans-serif;
  font-weight: 700; font-size: 0.85rem; color: var(--primary);
  background: var(--white); border: 1.5px solid var(--border-light);
  border-radius: 30px; padding: 0.6rem 1.6rem; cursor: pointer; transition: var(--transition);
}
.category-show-more:hover { border-color: var(--primary); background: rgba(192,57,43,0.06); }

.product-card.is-hidden-by-filter { display: none !important; }
.category-block.is-hidden-by-filter { display: none; }

/* ══════════════════════════════════════════
   SECTION / CATEGORY TITLE
══════════════════════════════════════════ */
.section-title {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 800;
  margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 clamp(1rem, 2vw, 1.5rem);
  padding: 0; background: none; border-left: none;
  border-radius: 0; backdrop-filter: none;
  color: var(--text-dark); position: relative;
  padding-bottom: 0.6rem;
}
.section-title::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2.5px;
  background: linear-gradient(90deg, var(--primary), var(--golden), transparent 85%);
  border-radius: 4px;
}
.section-title i {
  font-size: clamp(0.9rem, 2vw, 1.15rem); color: white;
  background: linear-gradient(135deg, var(--primary), var(--golden));
  padding: clamp(0.3rem, 0.8vw, 0.42rem);
  border-radius: 10px; box-shadow: 0 4px 12px rgba(192,57,43,0.28);
  flex-shrink: 0;
}
.section-title span {
  background: linear-gradient(135deg, var(--primary), var(--golden));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ══════════════════════════════════════════
   CATEGORY BANNER
══════════════════════════════════════════ */
.category-banner {
  display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.1rem);
  margin: clamp(1.8rem, 3.5vw, 2.8rem) 0 clamp(1.2rem, 2.5vw, 1.8rem);
  padding: clamp(1rem, 2vw, 1.3rem) clamp(1.1rem, 2.2vw, 1.5rem);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}
.category-banner-icon {
  width: clamp(46px, 6vw, 58px); height: clamp(46px, 6vw, 58px); flex-shrink: 0;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  color: white; font-size: clamp(1.1rem, 2.5vw, 1.45rem);
}
.category-banner-text { flex: 1; min-width: 0; }
.category-banner-text h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; line-height: 1.15;
  color: var(--text-dark); margin-bottom: 0.15rem;
}
.category-banner-text p {
  font-size: clamp(0.8rem, 1.6vw, 0.9rem); color: var(--text-light); font-weight: 500;
}
.category-banner-count {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 700;
  background: white; border: 1.5px solid var(--border-light);
  padding: 0.35rem 0.85rem; border-radius: 30px; white-space: nowrap;
}
@media (max-width: 540px) {
  .category-banner-count { display: none; }
}

/* ══════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.skeleton-card {
  background: white;
  border-radius: 22px;
  overflow: hidden;
  border: 1.5px solid #f0ebe6;
}
.skeleton-img {
  width: 100%; padding-top: 82%;
  background: linear-gradient(90deg, #f0ebe6 25%, #fdf5ee 50%, #f0ebe6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-body { padding: 0.9rem; }
.skeleton-line {
  height: 11px; border-radius: 6px; margin-bottom: 8px;
  background: linear-gradient(90deg, #f0ebe6 25%, #fdf5ee 50%, #f0ebe6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-line.short  { width: 55%; }
.skeleton-line.medium { width: 75%; }
.skeleton-line.full   { width: 100%; }
.skeleton-btn {
  height: 36px; border-radius: 30px; margin-top: 10px;
  background: linear-gradient(90deg, #f0ebe6 25%, #fdf5ee 50%, #f0ebe6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite linear;
}

/* ══════════════════════════════════════════
   PRODUCT GRID
══════════════════════════════════════════ */
.category-block { margin-bottom: 3.5rem; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.9rem, 1.8vw, 1.4rem);
}

/* ── Card shell ── */
.product-card {
  background: var(--white);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  border: 1.5px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 14px rgba(0,0,0,0.05);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(192,57,43,0.14);
  border-color: rgba(192,57,43,0.2);
}
.product-card.shared-product-highlight {
  border-color: rgba(192,57,43,0.55);
  animation: sharedProductPulse 1.4s ease-in-out 2;
}
@keyframes sharedProductPulse {
  0%, 100% { box-shadow: 0 2px 14px rgba(0,0,0,0.05); }
  50%      { box-shadow: 0 0 0 6px rgba(192,57,43,0.18), 0 22px 48px rgba(192,57,43,0.2); }
}

/* ── Image — 4:3 ratio ── */
.product-icon-circle {
  width: 100%; padding-bottom: 80%;
  height: 0; overflow: hidden;
  background: linear-gradient(145deg, #fef6ef, #fff9f5);
  cursor: zoom-in; position: relative; flex-shrink: 0;
}
.product-icon-circle::before {
  content: ''; position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.16) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.3s ease;
}
.product-card:hover .product-icon-circle::before { opacity: 1; }
.product-icon-circle::after {
  content: ''; position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
  background: linear-gradient(135deg, transparent 35%, rgba(255,255,255,0.22) 55%, transparent 75%);
  transform: translateX(-120%); transition: transform 0.55s ease;
}
.product-card:hover .product-icon-circle::after { transform: translateX(120%); }

.product-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.product-card:hover .product-img { transform: scale(1.1); }

/* ── Body ── */
.product-body {
  display: flex; flex-direction: column; flex: 1;
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.8rem, 1.5vw, 1.1rem) clamp(0.8rem, 1.5vw, 1rem);
}

.product-link { text-decoration: none; color: inherit; display: block; }
.product-title {
  font-size: clamp(0.85rem, 1.5vw, 0.97rem); font-weight: 700;
  color: var(--text-dark); margin: 0 0 0.2rem;
  line-height: 1.35; letter-spacing: -0.1px;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.product-rating { font-size: 0.72rem; color: var(--text-light); margin-bottom: 0.35rem; }
.product-rating .stars { color: var(--golden); letter-spacing: 1px; margin-right: 3px; }
.product-desc {
  font-size: 0.76rem; color: var(--text-light);
  margin: 0 0 0.7rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
  flex: 1;
}

/* ── Price + Qty row ── */
.product-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}

.price {
  font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 900; color: var(--primary);
  display: inline-flex; align-items: baseline; gap: 0.15rem;
  letter-spacing: -0.4px; background: none; padding: 0; border-radius: 0;
  width: auto;
}
.price small { font-size: 0.68rem; color: #b07a58; font-weight: 500; }

.product-delivery-note {
  font-size: 0.68rem; color: #8a6a52; margin-top: -0.4rem; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 4px;
}

.quantity-control {
  display: flex; align-items: center; gap: 0;
  background: #f7f0ea; border-radius: 50px;
  border: 1.5px solid rgba(230,126,34,0.2); overflow: hidden; padding: 0;
  width: -webkit-fit-content; width: fit-content;
}
.qty-minus, .qty-plus {
  background: transparent; border: none;
  width: 28px; height: 28px; border-radius: 0;
  font-size: 0.95rem; font-weight: 700; color: var(--primary);
  cursor: pointer; transition: background 0.18s, color 0.18s;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: none;
}
.qty-minus:hover, .qty-plus:hover { background: var(--primary); color: white; }
.qty-input {
  width: 32px; text-align: center; background: transparent;
  border: none; font-weight: 700; font-size: 0.85rem; color: var(--text-dark);
}

/* ── Ask seller (seller-owned products only) ── */
.ask-seller-btn {
  width: 100%; margin-top: 0.45rem;
  background: var(--white); color: var(--primary);
  border: 1.5px solid rgba(192,57,43,0.28); border-radius: 30px;
  padding: 0.5rem; font-weight: 700; font-size: 0.78rem; cursor: pointer;
  font-family: 'Inter', sans-serif; display: flex; align-items: center;
  justify-content: center; gap: 0.4rem; transition: var(--transition);
}
.ask-seller-btn:hover { background: rgba(192,57,43,0.06); border-color: var(--primary); }

/* ── Add to Cart Button ── */
.add-btn {
  width: 100%; background: linear-gradient(135deg, var(--primary) 0%, #d4521a 100%);
  border: none; color: white; font-weight: 700; font-size: clamp(0.78rem, 1.4vw, 0.86rem);
  padding: clamp(0.62rem, 1.2vw, 0.75rem) 1rem; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  cursor: pointer; transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
  box-shadow: 0 4px 14px rgba(192,57,43,0.22); letter-spacing: 0.2px;
  position: relative; overflow: hidden;
}
.add-btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.4s ease;
}
.add-btn:hover::after { left: 100%; }
.add-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(192,57,43,0.34); }
.add-btn:active { transform: translateY(0) scale(0.98); }
.add-btn i { font-size: 0.88rem; }
.add-btn:disabled, .add-btn:disabled:hover {
  background: #e3d9d1; color: #8a7466; box-shadow: none; cursor: not-allowed; transform: none;
}

/* ══════════════════════════════════════════
   PRODUCT CARD — marketplace anatomy
   image (+ rating / stock pills) → seller → title → desc → price + delivery
   → one action row. Overrides the base rules above where they differ.
══════════════════════════════════════════ */
.product-card {
  border-radius: var(--radius-card);
  border-color: rgba(44,26,15,0.06);
  box-shadow: 0 2px 10px rgba(44,26,15,0.04);
}
.product-card:hover {
  box-shadow: 0 18px 40px -14px rgba(44,26,15,0.24);
  border-color: rgba(192,57,43,0.18);
}
.product-media { position: relative; display: block; }
.product-icon-circle { padding-bottom: 92%; }

/* Floating pills over the image */
.product-pill {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1px;
  padding: 0.3rem 0.6rem; border-radius: 30px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12); pointer-events: none;
}
.product-pill small { font-weight: 600; opacity: 0.75; font-size: 0.64rem; }
.product-pill--rating { top: 0.6rem; right: 0.6rem; background: rgba(255,255,255,0.88); color: var(--text-dark); }
.product-pill--rating i { color: var(--golden); font-size: 0.66rem; }
.product-pill--low { bottom: 0.6rem; left: 0.6rem; background: rgba(230,126,34,0.95); color: #fff; }
.product-pill--soldout { bottom: 0.6rem; left: 0.6rem; background: rgba(44,26,15,0.82); color: #fff; }
.product-card.is-sold-out .product-img { filter: grayscale(0.6) brightness(0.94); }
/* No point offering a quantity for something that can't be added. The
   ask-seller button stays — "when is this back?" is a real question. */
.product-card.is-sold-out .quantity-control { display: none; }

/* Seller attribution */
.product-seller {
  display: flex; align-items: center; gap: 0.4rem; min-width: 0;
  font-size: 0.7rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.35rem;
}
.product-seller-avatar {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--golden)); color: #fff;
  font-size: 0.6rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}
.product-seller-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-seller-verified { color: #1e7a1e; font-size: 0.68rem; flex-shrink: 0; }
.product-seller--house i { color: var(--golden); font-size: 0.7rem; }

/* Products without a description shouldn't leave a phantom gap. */
.product-desc:empty { display: none; }

/* Price row */
.product-price-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.4rem; margin: 0.15rem 0 0.7rem; flex-wrap: wrap;
}
.product-delivery-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap;
  font-size: 0.66rem; font-weight: 700; color: #8a6a52;
  background: #f7f0ea; border-radius: 20px; padding: 0.2rem 0.55rem;
}

/* Single action row: stepper · add to cart · ask seller */
.product-actions { display: flex; align-items: center; gap: 0.45rem; margin-top: auto; }
.product-actions .quantity-control { flex-shrink: 0; }
.product-actions .add-btn {
  flex: 1; width: auto; min-width: 0; border-radius: 30px;
  padding-left: 0.6rem; padding-right: 0.6rem;
}
.product-actions .ask-seller-btn {
  width: 38px; height: 38px; flex-shrink: 0; margin: 0; padding: 0;
  border-radius: 50%; font-size: 0.9rem;
}

/* ══════════════════════════════════════════
   PRODUCT GRID BREAKPOINTS
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; }
}
/* Below ~640px a 2-column card is too narrow for stepper + "Add to cart"
   side by side (the label was wrapping mid-word at 500-560px). Add to cart
   takes its own full row; stepper + ask share the next. */
.add-btn { white-space: nowrap; }
@media (max-width: 640px) {
  .product-actions { flex-wrap: wrap; gap: 0.4rem; }
  .product-actions .add-btn { order: 1; flex: 1 1 100%; }
  .product-actions .quantity-control { order: 2; }
  .product-actions .ask-seller-btn { order: 3; margin-left: auto; width: 34px; height: 34px; font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0.65rem; }
  .product-desc { display: none; }
  .product-body { padding: 0.65rem 0.7rem 0.75rem; }
  .product-price-row { margin-bottom: 0.55rem; }
  .qty-minus, .qty-plus { width: 26px; height: 26px; }
  .qty-input { width: 28px; }
  .product-pill { font-size: 0.62rem; padding: 0.22rem 0.5rem; }
}
@media (max-width: 360px) {
  .product-grid { gap: 0.5rem; }
  .product-title { font-size: 0.78rem; }
  .price { font-size: 0.92rem; }
}

/* ══════════════════════════════════════════
   ABOUT & CONTACT
══════════════════════════════════════════ */
.about-contact-wrapper {
  background:linear-gradient(145deg,#fff9f5,#fff3ec);
  border-radius: clamp(1.5rem, 3vw, 2.5rem); padding: clamp(2rem, 4vw, 3rem); margin: clamp(3rem, 5vw, 4rem) 0 2rem; box-shadow:var(--shadow-md);
}
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.info-card { background:white; border-radius:var(--radius-card); padding: clamp(1.5rem, 3vw, 2rem); box-shadow:var(--shadow-sm); }
.info-card h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight:800; margin-bottom: clamp(1rem, 2vw, 1.5rem); display:flex; align-items:center; gap:0.6rem; color:var(--primary-dark); }
.brand-story { color:var(--text-dark); line-height:1.7; margin-bottom: clamp(1.2rem, 2vw, 1.8rem); font-size: clamp(0.88rem, 1.5vw, 0.95rem); }
.values-list { list-style:none; margin: clamp(1.2rem, 2vw, 1.8rem) 0; }
.values-list li { display:flex; align-items:center; gap:0.8rem; margin-bottom: clamp(0.7rem, 1.5vw, 1rem); font-weight:500; font-size: clamp(0.85rem, 1.5vw, 0.95rem); }
.values-list li i { width:24px; color:var(--golden); }
.contact-grid-inner { display:flex; flex-direction:column; gap:1.5rem; }
.contact-method { display:flex; align-items:center; gap:1.2rem; background:#fef7f2; padding:1rem 1.2rem; border-radius:1.8rem; }
.contact-icon-lg { width:50px; height:50px; background:white; border-radius:30px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--primary); box-shadow:var(--shadow-sm); flex-shrink:0; }
.contact-detail h4 { font-size:0.9rem; font-weight:600; margin-bottom:0.2rem; }
.contact-detail a, .contact-detail span { color:var(--primary-dark); text-decoration:none; font-weight:500; font-size:0.9rem; word-break:break-word; }
.social-links-group { display:flex; gap:1rem; flex-wrap:wrap; margin:0.5rem 0; }
.social-icon { background:#fef0e8; width:44px; height:44px; border-radius:30px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--primary); transition:var(--transition); }
.social-icon:hover { background:var(--primary); color:white; transform:translateY(-3px); }
.whatsapp-direct-btn { background:#25D366; color:white; padding:0.9rem 1.8rem; border-radius:60px; text-decoration:none; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:0.8rem; transition:var(--transition); font-size:0.95rem; }
.whatsapp-direct-btn:hover { background:#1da851; transform:translateY(-2px); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   MODALS — BASE
══════════════════════════════════════════ */
.modal-overlay {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(12px);
  z-index:1000; align-items:center; justify-content:center; padding:1rem;
}
.modal-overlay.active { display:flex; }
.modal-container {
  background:white; max-width:650px; width:100%; max-height:90vh;
  overflow-y:auto; border-radius:2rem; box-shadow:var(--shadow-lg);
  animation:modalUp 0.35s var(--spring);
}
@keyframes modalUp {
  from { transform:translateY(30px); opacity:0; }
  to   { transform:translateY(0); opacity:1; }
}
.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 2rem 0.8rem; border-bottom:1px solid #f0e4dc;
  position:sticky; top:0; background:white; z-index:1;
}
.modal-header h3 { font-size:1.3rem; font-weight:800; }
.close-modal { background:none; border:none; font-size:1.8rem; cursor:pointer; color:#aa7a62; transition:var(--transition); line-height:1; }
.close-modal:hover { color:var(--primary); }
.modal-body { padding:1.5rem 1.8rem 2rem; }

/* ══════════════════════════════════════════
   CART
══════════════════════════════════════════ */
.cart-items-list { max-height:340px; overflow-y:auto; padding-right:4px; margin-bottom:1rem; }
.cart-item {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  background:#fffaf5; border-radius:20px; padding:0.9rem 1.1rem; margin-bottom:0.9rem;
  border:1px solid rgba(192,57,43,0.1); transition:background 0.2s, box-shadow 0.2s;
}
.cart-item:hover { background:#fff; box-shadow:0 8px 20px rgba(192,57,43,0.08); }
.cart-item-left { display:flex; align-items:center; gap:1rem; flex:1; min-width:0; }
.cart-item-img { width:64px; height:64px; border-radius:16px; object-fit:cover; border:2px solid white; box-shadow:0 4px 12px rgba(0,0,0,0.08); flex-shrink:0; }
.cart-item-info { min-width:0; }
.cart-item-info strong { font-size:1rem; font-weight:700; color:#2c1a0f; display:block; margin-bottom:2px; font-family:'Cormorant Garamond',serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-item-info div { font-size:0.85rem; color:#c0392b; font-weight:600; }
.remove-item { background:rgba(192,57,43,0.08); border:1px solid rgba(192,57,43,0.15); color:#c0392b; padding:0.4rem 0.9rem; border-radius:30px; font-weight:600; font-size:0.78rem; cursor:pointer; transition:all 0.25s; white-space:nowrap; flex-shrink:0; }
.remove-item:hover { background:#c0392b; color:white; border-color:#c0392b; }
.cart-total { display:flex; justify-content:space-between; align-items:center; background:linear-gradient(135deg,rgba(192,57,43,0.04),rgba(230,126,34,0.04)); border-radius:16px; padding:0.9rem 1.3rem; margin:1.2rem 0 1.5rem; border:1px solid rgba(192,57,43,0.1); }
.cart-total span:first-child { font-weight:700; color:#5a3e2e; font-size:1rem; }
.cart-total span:last-child { font-size:1.6rem; font-weight:900; color:#c0392b; font-family:'Cormorant Garamond',serif; }
.cart-actions { display:flex; gap:0.8rem; justify-content:flex-end; flex-wrap:wrap; }
.cart-actions .btn-outline, .cart-actions .btn-primary { background:#c0392b; color:white; border:none; padding:0.75rem 1.5rem; font-weight:700; border-radius:60px; font-size:0.9rem; cursor:pointer; transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.3s var(--spring); }
.cart-actions .btn-outline { background:transparent; color:#c0392b; border:2px solid #c0392b; }
.cart-actions .btn-outline:hover { background:#c0392b; color:white; }
.cart-actions .btn-primary:hover { background:#a51f1f; transform:translateY(-2px); }

/* ══════════════════════════════════════════
   SECURE CHECKOUT — FULLY RESPONSIVE
══════════════════════════════════════════ */

/* Payment tabs */
.payment-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.tab-btn {
  flex: 1;
  min-width: 70px;
  background: #f3e9e2; border: 2px solid transparent;
  padding: 0.7rem 0.6rem; border-radius: 50px;
  font-weight: 700; font-size: 0.82rem; cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
  color: #4a2e21;
  display: flex; align-items: center; justify-content: center;
  gap: 0.3rem; white-space: nowrap; text-align: center; line-height: 1.2;
}
.tab-btn:hover { background: #f5e5da; border-color: rgba(192,57,43,0.2); }
.tab-btn.active {
  background: linear-gradient(135deg,#c0392b,#a5251c); color: white;
  border-color: transparent; box-shadow: 0 6px 16px rgba(192,57,43,0.3);
  transform: translateY(-1px);
}
.tab-pane { display:none; }
.tab-pane.active-pane { display:block; animation: panePop 0.32s var(--spring); }
@keyframes panePop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Billing section */
.billing-section { background:#fef9f5; border:1.5px solid rgba(192,57,43,0.15); border-radius:16px; padding:1.1rem 1.2rem; margin-bottom:1rem; }
.billing-section h4 { font-size:0.95rem; font-weight:700; color:#2c1a0f; margin-bottom:0.9rem; display:flex; align-items:center; gap:0.5rem; }
.billing-section h4 i { color:#c0392b; }
.billing-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.billing-grid .full-width { grid-column:1 / -1; }
.billing-input { width:100%; padding:0.6rem 0.9rem; border:1.5px solid rgba(0,0,0,0.1); border-radius:10px; font-family:'Inter',sans-serif; font-size:0.88rem; background:white; color:#2c1a0f; transition:border-color 0.2s; }
.billing-input:focus { outline:none; border-color:#c0392b; }
.billing-input::placeholder { color:#bbb; }
.billing-input.error { border-color:#c0392b; }

/* Order summary box */
#orderSummaryBox { background:#fbf8f5; border:1.5px solid rgba(192,57,43,0.15); border-radius:14px; padding:0.9rem 1.1rem; margin-bottom:1rem; }

/* Bank card */
.bank-card {
  background: linear-gradient(145deg,#ffffff,#fff9f5);
  border-radius: 20px; padding: 1.4rem;
  margin-bottom: 1rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
  border: 1px solid rgba(192,57,43,0.08);
  transition: all 0.3s;
}
.bank-card:hover { box-shadow:0 16px 35px rgba(192,57,43,0.1); border-color:rgba(192,57,43,0.2); transform:translateY(-2px); }
.bank-name { font-weight:800; font-size:1.15rem; color:#2c1a0f; margin-bottom:1rem; display:flex; align-items:center; gap:0.7rem; border-bottom:1px dashed rgba(192,57,43,0.2); padding-bottom:0.6rem; }
.bank-name i { font-size:1.3rem; color:#c0392b; background:rgba(192,57,43,0.08); padding:0.45rem; border-radius:50%; }
.account-detail { display:flex; justify-content:space-between; align-items:center; background:#fff; padding:0.7rem 1rem; border-radius:14px; margin:0.6rem 0; border:1px solid rgba(0,0,0,0.04); gap:0.8rem; }
.account-detail span { font-weight:600; color:#2c1a0f; font-size:0.95rem; word-break:break-all; min-width:0; }
.copy-bank-btn, .copy-btn { background:rgba(192,57,43,0.07); border:1px solid rgba(192,57,43,0.15); padding:0.35rem 1rem; border-radius:30px; font-weight:600; font-size:0.78rem; color:#c0392b; cursor:pointer; transition:all 0.2s; white-space:nowrap; flex-shrink:0; }
.copy-bank-btn:hover, .copy-btn:hover { background:#c0392b; color:white; border-color:#c0392b; }
.bank-whatsapp-btn { background:#25D366; color:white; border:none; width:100%; padding:0.85rem; border-radius:50px; font-weight:700; font-size:0.9rem; margin-top:1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:background 0.25s ease, box-shadow 0.3s var(--spring), transform 0.3s var(--spring); box-shadow:0 6px 14px rgba(37,211,102,0.2); }
.bank-whatsapp-btn:hover { background:#1da851; box-shadow:0 10px 22px rgba(37,211,102,0.3); transform:translateY(-2px); }

/* Crypto */
#cryptoPane p { font-size:0.95rem; color:#4a2e21; margin-bottom:0.9rem; }
#cryptoPane strong { font-size:1.2rem; color:#c0392b; font-family:'Cormorant Garamond',serif; }
.crypto-option { background:white; border:2px solid rgba(192,57,43,0.1); border-radius:16px; padding:0.85rem 1.2rem; margin-bottom:0.7rem; cursor:pointer; transition:all 0.3s; display:flex; align-items:center; gap:0.8rem; font-weight:600; color:#4a2e21; font-size:0.9rem; }
.crypto-option i { font-size:1.3rem; width:22px; text-align:center; flex-shrink:0; }
.crypto-option:hover { border-color:rgba(192,57,43,0.3); background:#fff9f5; transform:translateY(-2px); }
.crypto-option.selected { background:linear-gradient(135deg,#c0392b,#a5251c); color:white; border-color:transparent; box-shadow:0 8px 20px rgba(192,57,43,0.3); }
.crypto-option.selected i { color:white; }
#cryptoPaymentDetails { background:#fffaf5; border-radius:16px; padding:1.2rem; margin-top:1.2rem; border:1px solid rgba(192,57,43,0.1); animation:fadeIn 0.3s ease; }
#cryptoPaymentDetails strong { display:block; margin-bottom:0.6rem; font-size:0.95rem; color:#2c1a0f; }
.address-box { background:white; padding:0.8rem; border-radius:12px; display:flex; justify-content:space-between; align-items:center; gap:0.6rem; margin:0.8rem 0; border:1px solid rgba(192,57,43,0.1); word-break:break-all; }
.address-box span { font-family:monospace; font-weight:600; color:#c0392b; font-size:0.82rem; min-width:0; overflow:hidden; text-overflow:ellipsis; }
#confirmCryptoWhatsApp { background:#c0392b; color:white; border:none; width:100%; padding:0.85rem; border-radius:50px; font-weight:700; font-size:0.9rem; margin-top:0.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:0.5rem; transition:background 0.25s ease, box-shadow 0.3s var(--spring), transform 0.3s var(--spring); box-shadow:0 6px 16px rgba(198,40,40,0.25); }
#confirmCryptoWhatsApp:hover { background:#a51f1f; box-shadow:0 10px 24px rgba(198,40,40,0.35); transform:translateY(-2px); }
.rate-note { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; color:#7a5a4a; margin-top:0.9rem; font-style:italic; }

/* Credits pane */
#creditsPane { padding:0.5rem 0; }
#creditsPaneBalance { font-size:1.8rem; font-weight:700; color:white; }
#creditsPaneExpiry  { font-size:0.75rem; color:rgba(255,255,255,0.75); margin-top:4px; }
#payWithCreditsBtn  { width:100%; background:#1e7a1e; color:white; border:none; border-radius:30px; padding:0.85rem 1rem; font-weight:700; font-size:0.95rem; cursor:pointer; transition:background 0.25s ease, box-shadow 0.3s var(--spring), transform 0.3s var(--spring); box-shadow:0 6px 18px rgba(30,122,30,0.25); display:flex; align-items:center; justify-content:center; gap:0.5rem; }
#payWithCreditsBtn:hover { background:#155715; transform:translateY(-2px); box-shadow:0 10px 24px rgba(30,122,30,0.35); }

/* Paystack pane */
#paystackPane { text-align:center; padding:1.5rem 0; }
#paystackPayBtn { border-radius:60px; font-weight:700; font-size:1rem; width:100%; }

/* ══════════════════════════════════════════
   CHECKOUT RESPONSIVE BREAKPOINTS
══════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Modal takes full width on mobile */
  .modal-container {
    max-width: 100%;
    border-radius: 1.4rem 1.4rem 0 0;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-height: 95vh;
  }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal-header { padding: 1.1rem 1.4rem 0.7rem; }
  .modal-header h3 { font-size: 1.1rem; }
  .modal-body { padding: 1rem 1.2rem 1.5rem; }

  /* Tabs wrap to 2×2 grid */
  .payment-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .tab-btn { font-size: 0.78rem; padding: 0.65rem 0.4rem; border-radius: 14px; }

  /* Billing grid goes single column */
  .billing-grid { grid-template-columns: 1fr; }
  .billing-grid .full-width { grid-column: 1; }

  /* Bank card compact */
  .bank-card { padding: 1rem; border-radius: 16px; }
  .bank-name { font-size: 1rem; }
  .account-detail { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .account-detail span { font-size: 0.9rem; }
  .copy-bank-btn { align-self: flex-end; }
  .bank-whatsapp-btn { font-size: 0.85rem; padding: 0.8rem; }

  /* Crypto compact */
  .crypto-option { padding: 0.75rem 1rem; font-size: 0.85rem; }
  .address-box { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .address-box span { font-size: 0.75rem; width: 100%; }
  .copy-btn { align-self: flex-end; }

  /* Cart compact on mobile */
  .cart-item { flex-wrap: wrap; gap: 0.7rem; }
  .cart-item-left { flex: 1 1 100%; }
  .remove-item { align-self: flex-end; }
  .cart-actions { flex-direction: column; }
  .cart-actions .btn-outline, .cart-actions .btn-primary { width: 100%; text-align: center; }
  .cart-items-list { max-height: 260px; }
}

@media (max-width: 400px) {
  .payment-tabs { grid-template-columns: 1fr 1fr; }
  .tab-btn { font-size: 0.72rem; padding: 0.6rem 0.3rem; }
  .billing-input { font-size: 0.82rem; padding: 0.55rem 0.75rem; }
}

/* ══════════════════════════════════════════
   LIGHTBOX
══════════════════════════════════════════ */
.lightbox {
  display:none; position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.9); z-index:2000;
  align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(8px);
}
.lightbox.active { display:flex; }
/* FIX: replaced min() with compatible approach */
.lightbox img {
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 20px;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.lightbox .close-lightbox {
  position:absolute; top:20px; right:30px;
  font-size:40px; color:white; font-weight:bold;
  cursor:pointer; background:none; border:none;
}
.lightbox .close-lightbox:hover { color:var(--primary); }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast-msg {
  position:fixed; bottom:20px; left:50%;
  transform:translateX(-50%) translateY(16px);
  background:#1e1a15; color:white; padding:0.65rem 1.5rem 0.55rem; border-radius:16px;
  font-weight:500; z-index:1100; opacity:0;
  transition: opacity 0.3s ease, transform 0.3s var(--spring), bottom 0.3s ease;
  pointer-events:none; font-size:0.85rem; text-align: center;
  max-width: min(90vw, 320px);
}
.toast-msg.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-msg-text { display:block; line-height:1.4; }
.toast-msg-progress { margin-top:0.4rem; height:2.5px; background:rgba(255,255,255,0.18); border-radius:2px; overflow:hidden; }
.toast-msg-progress-fill { height:100%; width:100%; background:linear-gradient(90deg,var(--golden),var(--primary)); border-radius:2px; transform:scaleX(0); transform-origin:left; }
.toast-msg-progress-fill.run { animation: toastProgressShrink 3.5s linear forwards; }
@keyframes toastProgressShrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}
body.mini-cart-visible .toast-msg { bottom: calc(20px + var(--mini-cart-h, 0px)); }

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════
   GENERAL RESPONSIVE
══════════════════════════════════════════ */

/* Tablet & above (768px and up) */
@media (min-width: 768px) {
  .container { padding: 0 2rem; }
  .navbar { gap: 1.5rem; }
}

/* Tablet (640px - 1023px) */
@media (max-width: 1023px) {
  .navbar { justify-content: space-between; }
  .navbar-tagline { display: none; }
  .nav-links { flex: 1; justify-content: center; }
}


/* Mobile & tablet (1023px and below) get the hamburger drawer; from 1024px
   up the nav-links row renders inline. This used to be 1499px because the
   old inline row (100px logo + Cormorant links at 1.05rem with 1.2rem
   padding + the tagline pill) genuinely wrapped anywhere below ~1150px, so
   the breakpoint kept getting pushed up to dodge it — which left almost
   every laptop (1366/1440, or 1920 at 125-150% Windows scaling) with a
   phone-style hamburger. The row is now compact by construction: 60px
   logo, Inter links at 0.9rem/0.85rem padding with white-space:nowrap and
   flex-wrap:nowrap, tagline hidden below 1280px — it fits at 1024px with
   room to spare, so the breakpoint can sit where a real desktop begins.
   If you change the row's contents, keep the JS resize check (initNavScroll
   / closeDrawer, window.innerWidth > 1023) in sync. */
@media (max-width: 1023px) {
  .hamburger-menu { display: flex; }

  /* backdrop-filter on .navbar makes it the containing block for any
     position:fixed descendant (same rule as transform/filter) — that broke
     the drawer's top:0/right:0/bottom:0 into being relative to the navbar's
     own ~90px box instead of the viewport. Navbar background is already 95%
     opaque white so dropping the blur here is visually a non-event.
     Also: .navbar's own z-index (100) creates a stacking context that caps
     every descendant's z-index, including the drawer/backdrop — so however
     high they're set locally (998/999), they can never paint above other
     root-level elements with a higher z-index than .navbar itself: the
     announcement bar (101) and the floating WhatsApp/chat buttons (900).
     Bumping .navbar's own z-index above both (but still under every modal,
     which starts at 1000) fixes both. */
  .navbar { backdrop-filter: none; z-index: 950; }

  /* Backdrop behind the off-canvas drawer */
  .nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20,10,5,0.45);
    backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.32s ease, visibility 0.32s ease;
    z-index: 998;
  }
  .nav-backdrop.show { opacity: 1; visibility: visible; }

  /* Off-canvas navigation drawer — slides in from the right */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    background: var(--sand);
    border-radius: 22px 0 0 22px;
    overflow: hidden;
    box-shadow: -16px 0 48px rgba(20,8,3,0.22);
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    z-index: 999;
    margin-top: 0;
    animation: none;
    transform: translateX(100%);
    transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-links.mobile-open { transform: translateX(0); }

  .nav-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.3rem 1.4rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2e0e04 0%, #6b2008 55%, var(--primary-dark) 100%);
    box-shadow: 0 4px 16px rgba(20,8,3,0.15);
    position: relative; z-index: 1;
  }
  .nav-drawer-title {
    font-family: 'Cormorant Garamond', serif; font-weight: 800;
    font-size: 1.35rem; color: white;
    display: flex; align-items: center; gap: 0.6rem;
    letter-spacing: 0.2px;
  }
  .nav-drawer-title i { color: var(--golden); font-size: 1.1rem; }
  .nav-drawer-close {
    background: rgba(255,255,255,0.14); border: none; color: white;
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    transition: background 0.2s, transform 0.15s;
  }
  .nav-drawer-close:hover { background: rgba(255,255,255,0.26); }
  .nav-drawer-close:active { transform: scale(0.9); }

  .nav-drawer-body {
    display: block;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem 0.85rem 1.5rem;
  }

  /* Section label with a small accent bar instead of a bare hairline —
     reads as a group heading, not just a faint divider. */
  .nav-drawer-divider {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 1.1rem 0.5rem 0.6rem;
    margin-top: 0.4rem;
  }
  .nav-drawer-divider::before {
    content: ''; width: 3px; height: 12px; border-radius: 3px;
    background: linear-gradient(180deg, var(--primary), var(--golden));
  }
  .nav-drawer-divider span {
    font-size: 0.7rem; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-light);
  }
  /* Nothing shows under "My Account" for a guest (all those links are
     login-gated), so hide the now-empty divider rather than leave a
     dead-end heading with nothing below it. */
  body:not(.user-logged-in) .nav-drawer-divider { display: none; }

  /* Each link is a soft rounded row with breathing room between them,
     rather than a continuous hairline-divided list. */
  .nav-links a {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.3rem;
    border-radius: 16px;
    font-size: 1.02rem;
    font-weight: 700;
    border-bottom: none;
    background: transparent;
    transition: background 0.18s ease, transform 0.12s ease;
  }
  .nav-links a:last-child { margin-bottom: 0; }
  .nav-links a::after { display: none; }
  .nav-links a:hover { transform: none; padding-left: 0.9rem; background: rgba(192,57,43,0.05); }
  .nav-links a:active { background: rgba(192,57,43,0.09); transform: scale(0.98); }

  /* Icon chip — a small colored badge behind each glyph reads as far more
     polished than a bare icon sitting directly on the row. */
  .nav-links a i {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 11px;
    background: rgba(192,57,43,0.1);
    color: var(--primary); font-size: 0.95rem;
  }

  #navWallet   { color: #b86a00; }
  #navWallet   i { background: rgba(184,106,0,0.12); color: #b86a00; }
  #navTokens   { color: #b8860b; }
  #navTokens   i { background: rgba(184,134,11,0.12); color: #b8860b; }
  #navReferral { color: var(--primary); }
  #navReferral i { background: rgba(192,57,43,0.12); }
  #navSell     { color: #1e7a1e; }
  #navSell     i { background: rgba(30,122,30,0.12); color: #1e7a1e; }
  #navMessages { color: #c0392b; }
  #navMessages i { background: rgba(192,57,43,0.12); }
  #navGifts    { color: #1e7a1e; }
  #navGifts    i { background: rgba(30,122,30,0.12); color: #1e7a1e; }
  #navMyOrders { color: #b86a00; }
  #navMyOrders i { background: rgba(184,106,0,0.12); color: #b86a00; }
  #navProfile  { color: #7a5a4a; }
  #navProfile  i { background: rgba(122,90,74,0.12); color: #7a5a4a; }
  #navAdmin    { color: #6b2008; }
  #navAdmin    i { background: rgba(107,32,8,0.12); color: #6b2008; }
  #navLogout {
    color: var(--primary);
    background: rgba(192,57,43,0.06);
    margin-top: 0.6rem;
  }
  #navLogout i { background: rgba(192,57,43,0.14); }
  #navLogout:hover { background: rgba(192,57,43,0.1); }
  #navLogout:active { background: rgba(192,57,43,0.14); }
}

/* Lock body scroll while the drawer is open (any viewport it can be triggered at) */
body.nav-drawer-open { overflow: hidden; }

/* Mobile (767px and below) */
@media (max-width: 767px) {
  .container { padding: 0 1.2rem; }

  /* Navbar adjustments for mobile */
  .navbar { flex-wrap: wrap; justify-content: space-between; }
  .navbar-tagline { display: none; }
  .logo img { height: clamp(60px, 12vw, 80px); border-radius: clamp(15px, 4vw, 24px); }

  /* Cart wrapper on mobile */
  .cart-wrapper { position: static; }

  .hero { padding: clamp(1.8rem, 4vw, 2.4rem) clamp(1rem, 3vw, 1.5rem); border-radius: clamp(1.2rem, 4vw, 1.8rem); gap: 0.8rem; }
  .hero h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .hero p { font-size: clamp(0.92rem, 2.5vw, 1.1rem); margin: 0.6rem 0 1rem; }
  .hero-cta { padding: clamp(0.65rem, 2vw, 0.8rem) clamp(1.4rem, 3vw, 1.8rem); font-size: clamp(0.88rem, 2vw, 1rem); }
}

/* Small mobile (480px and below) */
@media (max-width: 479px) {
  .container { padding: 0 1rem; }
  .navbar { padding: clamp(0.6rem, 2vw, 0.8rem) clamp(0.8rem, 2vw, 1rem); gap: 0.5rem; }
  .logo img { height: clamp(50px, 10vw, 60px); }
  
  .hero { padding: clamp(1.5rem, 3vw, 2rem) clamp(0.8rem, 2vw, 1rem); }
  .hero h1 { font-size: clamp(1.5rem, 4.5vw, 1.9rem); }
  .hero p { font-size: clamp(0.85rem, 2vw, 1rem); margin: 0.6rem 0 0.9rem; }

  .section-title { font-size: clamp(1.4rem, 4vw, 1.8rem); padding: 0.3rem 0.8rem; gap: 0.5rem; }
  .section-title i { font-size: clamp(1.2rem, 3vw, 1.6rem); padding: 0.4rem; }
}

/* Extra small (360px and below) */
@media (max-width: 359px) {
  .container { padding: 0 0.8rem; }
  .logo img { height: clamp(45px, 9vw, 55px); }
  .navbar { gap: 0.3rem; }
  
  .hero { padding: 1.5rem 0.8rem; }
  .hero h1 { font-size: clamp(1.3rem, 4vw, 1.6rem); }
  .hero p { font-size: 0.9rem; }
  
  .navbar-tagline { font-size: 0.9rem; padding: 0.4rem 1rem; }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Landscape mode adjustments */
@media (max-height: 500px) and (orientation: landscape) {
  .navbar { padding: 0.5rem clamp(1rem, 3vw, 2rem); }
  .hero { padding: 2rem clamp(1rem, 3vw, 2rem); margin: 1rem 0 2rem; }
  .nav-links { gap: 0.2rem; }
}

@media (max-width: 900px) {
  .hero { padding:2.2rem 1.5rem; flex-direction:column; text-align:center; }
  .hero-content { max-width:100%; margin:0 auto; }
}
@media (max-width: 768px) {
  .hero { padding:2rem 1.2rem; border-radius:1.8rem; }
  .hero-cta { padding:0.75rem 1.8rem; font-size:0.95rem; }
  .logo img { height:clamp(70px, 12vw, 100px); border-radius:24px; }
}

/* Minimum touch target sizes */
@media (pointer: coarse) {
  /* .nav-links a is deliberately excluded — it already clears 44px height
     via its own padding in both the desktop pill-row and drawer-row
     layouts. Forcing inline-flex + justify-content:center + min-width:44px
     here made the drawer's full-width row links behave like inline pill
     buttons that wrap side-by-side instead of stacking as a list. */
  button, .add-btn, .qty-minus, .qty-plus, .remove-item,
  .copy-bank-btn, .close-modal, .cart-icon,
  .hero-cta, .whatsapp-direct-btn, .social-icon, .tab-btn,
  .hamburger-menu {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  }
}

img { max-width:100%; height:auto; }

/* ══════════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════════ */
.announcement-bar {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--golden), var(--primary), var(--primary-dark));
  background-size: 300% 100%;
  animation: gradientShift 8s ease infinite;
  color: white; padding: 0.55rem 0;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.3px;
  position: sticky; top: 0; z-index: 101;
  overflow: hidden; white-space: nowrap;
}
.announcement-bar:hover .announcement-track { animation-play-state: paused; }

.announcement-track {
  display: inline-flex;
  animation: marquee 22s linear infinite;
}
.announcement-text {
  display: inline-block;
  padding: 0 3vw;
  white-space: nowrap;
}
.announcement-text i { margin-right: 0.4rem; }

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ══════════════════════════════════════════
   HERO STATS
══════════════════════════════════════════ */
.hero-stats {
  display: flex; justify-content: flex-start; gap: clamp(1.2rem, 3vw, 2.4rem);
  margin-top: clamp(1.2rem, 3vw, 1.8rem); flex-wrap: wrap;
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.25rem; min-width: 70px;
}
.hero-stat strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 900; color: white;
  line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.hero-stat span {
  font-size: clamp(0.7rem, 1.8vw, 0.82rem); color: rgba(255,255,255,0.82);
  font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; white-space: nowrap;
}
.hero-stat-divider {
  width: 1px; background: rgba(255,255,255,0.25);
  align-self: stretch; margin: 0.3rem 0;
}
/* Between ~1024-1100px the hero text column is just narrow enough that the
   third stat wrapped to its own line; a slightly tighter row keeps all
   three together without touching the layout above or below. */
@media (max-width: 1100px) {
  /* Cap the illustration so the text column gets the extra width — at
     1024px the three stat labels + dividers need ~470px and the column was
     landing at ~458px. */
  .hero-art { max-width: 330px; }
  .hero-stats { gap: 1rem 1.15rem; }
  .hero-stat { min-width: 0; }
  .hero-stat strong { font-size: clamp(1.4rem, 3.4vw, 2rem); }
  .hero-stat span { font-size: 0.72rem; letter-spacing: 0.3px; }
}
@media (max-width: 480px) {
  .hero-stats { gap: 1.2rem; }
  .hero-stat-divider { display: none; }
}

/* ══════════════════════════════════════════
   PROMO BADGE ON HERO
══════════════════════════════════════════ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 60px; padding: 0.45rem 1.2rem;
  font-size: 0.82rem; font-weight: 600; color: white;
  margin-bottom: 1.2rem; letter-spacing: 0.3px;
  animation: fadeInUp 0.5s ease;
  position: relative; overflow: hidden;
}
.hero-badge i { color: #ffd700; font-size: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .hero-badge::after {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg); pointer-events: none;
    animation: badgeShine 4.5s ease-in-out infinite;
  }
  @keyframes badgeShine {
    0%   { left: -60%; }
    18%  { left: 140%; }
    100% { left: 140%; }
  }
}

/* ══════════════════════════════════════════
   TRUST STRIP
══════════════════════════════════════════ */
.trust-strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: clamp(1rem, 3vw, 2.5rem);
  background: white; border-radius: var(--radius-md);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
}
.trust-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: clamp(0.78rem, 1.5vw, 0.88rem); font-weight: 600; color: var(--text-dark);
  white-space: nowrap;
}
.trust-item i { color: var(--golden); font-size: clamp(0.9rem, 2vw, 1.1rem); }
.trust-strip-sep { width: 1px; height: 28px; background: var(--border-light); flex-shrink: 0; }
@media (max-width: 600px) {
  .trust-strip { gap: 0.8rem 1.5rem; }
  .trust-strip-sep { display: none; }
}

/* ══════════════════════════════════════════
   HERO ILLUSTRATION
══════════════════════════════════════════ */
.hero-art { flex: 1 1 280px; min-width: 240px; max-width: 440px; position: relative; z-index: 2; }
.hero-art-card {
  background: rgba(255,255,255,0.97); border-radius: 28px;
  padding: clamp(1rem, 2.5vw, 1.6rem);
  box-shadow: 0 16px 40px rgba(20,8,3,0.25);
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d; will-change: transform;
}
.together-svg { width: 100%; height: auto; display: block; }

.tg-blob-1 { fill: rgba(230,126,34,0.10); }
.tg-blob-2 { fill: rgba(192,57,43,0.08); }
.tg-table-shadow { fill: rgba(44,26,15,0.08); }
.tg-table { fill: #fef3e7; stroke: #e8c39e; stroke-width: 2; }
.tg-table-edge { fill: #f4dfc0; }
.tg-body-a { fill: var(--golden); }
.tg-body-b { fill: var(--primary); }
.tg-head { fill: #e8b48c; }
.tg-hair, .tg-hair-short { fill: #3b2321; }
.tg-arm { fill: none; stroke: #e8b48c; stroke-width: 10; stroke-linecap: round; }
.tg-bowl-body { fill: #ffffff; stroke: #e8c39e; stroke-width: 2; }
.tg-bowl-food { fill: var(--golden); }
.tg-food-fleck { fill: var(--primary-dark); }
.tg-steam { fill: none; stroke: #d9c4b0; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.tg-sparkle { fill: var(--golden); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes tgBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @keyframes tgSteam {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 0.8; }
    100% { transform: translateY(-22px); opacity: 0; }
  }
  @keyframes tgSparkle {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50% { opacity: 1; transform: scale(1); }
  }
  .tg-person-left { transform-origin: 160px 222px; animation: tgBob 3.4s ease-in-out infinite; }
  .tg-person-right { transform-origin: 300px 222px; animation: tgBob 3.4s ease-in-out infinite 0.6s; }
  .tg-steam-1 { animation: tgSteam 2.6s ease-in-out infinite; }
  .tg-steam-2 { animation: tgSteam 2.6s ease-in-out infinite 0.5s; }
  .tg-steam-3 { animation: tgSteam 2.6s ease-in-out infinite 1s; }
  .tg-sparkle-1 { animation: tgSparkle 2.8s ease-in-out infinite; }
  .tg-sparkle-2 { animation: tgSparkle 2.8s ease-in-out infinite 0.7s; }
  .tg-sparkle-3 { animation: tgSparkle 2.8s ease-in-out infinite 1.4s; }
}

/* ══════════════════════════════════════════
   FLOATING WHATSAPP
══════════════════════════════════════════ */
.floating-whatsapp {
  position: fixed; bottom: clamp(20px, 4vw, 30px); right: clamp(20px, 4vw, 30px);
  width: clamp(52px, 10vw, 60px); height: clamp(52px, 10vw, 60px);
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1.4rem, 3.5vw, 1.7rem); color: white;
  box-shadow: 0 8px 24px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.35);
  z-index: 900; text-decoration: none;
  animation: whatsappPulse 2.5s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease, bottom 0.3s ease;
}
body.mini-cart-visible .floating-whatsapp { bottom: calc(clamp(20px, 4vw, 30px) + var(--mini-cart-h, 0px)); }
.floating-whatsapp:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 14px 32px rgba(37,211,102,0.55);
  animation: none;
}
@keyframes whatsappPulse {
  0%,100% { box-shadow: 0 8px 24px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.35); }
  50%      { box-shadow: 0 8px 24px rgba(37,211,102,0.45), 0 0 0 14px rgba(37,211,102,0); }
}

/* ══════════════════════════════════════════
   FLOATING CHAT BUTTON
══════════════════════════════════════════ */
.floating-chat-btn {
  display: flex; /* visible to everyone, including logged-out visitors — see admin exclusion below */
  position: fixed; bottom: clamp(84px, 16vw, 100px); right: clamp(20px, 4vw, 30px);
  width: clamp(52px, 10vw, 60px); height: clamp(52px, 10vw, 60px);
  background: linear-gradient(135deg, #c0392b, #d4521a); border: none; border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: clamp(1.3rem, 3vw, 1.5rem); color: white; cursor: pointer;
  box-shadow: 0 8px 24px rgba(192,57,43,0.4);
  z-index: 900; transition: transform 0.25s ease, box-shadow 0.25s ease, bottom 0.3s ease;
}
.floating-chat-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 14px 32px rgba(192,57,43,0.5); }
body.mini-cart-visible .floating-chat-btn { bottom: calc(clamp(84px, 16vw, 100px) + var(--mini-cart-h, 0px)); }

body.admin-logged-in .floating-chat-btn { display: none !important; }

.chat-fab-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--golden); color: white;
  font-size: 0.62rem; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  padding: 0 3px;
}

.chat-tooltip {
  display: none;
  position: fixed;
  bottom: clamp(150px, 28vw, 172px); right: clamp(20px, 4vw, 30px);
  max-width: min(230px, calc(100vw - 40px));
  background: white; color: #2c1a0f;
  padding: 0.75rem 1.7rem 0.75rem 1rem;
  border-radius: 14px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  z-index: 899; transition: bottom 0.3s ease;
}
body.mini-cart-visible .chat-tooltip { bottom: calc(clamp(150px, 28vw, 172px) + var(--mini-cart-h, 0px)); }
.chat-tooltip.show { display: block; animation: chatTooltipIn 0.35s cubic-bezier(0.34,1.4,0.64,1); }
.chat-tooltip-arrow {
  position: absolute; bottom: -7px; right: clamp(20px, 5vw, 26px);
  width: 14px; height: 14px; background: white;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,0.05);
}
.chat-tooltip-close {
  position: absolute; top: 2px; right: 4px;
  background: none; border: none; color: #b09080;
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 4px 6px;
}
@keyframes chatTooltipIn {
  from { opacity: 0; transform: translateY(10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ══════════════════════════════════════════
   SECTION TITLE UPGRADE
══════════════════════════════════════════ */
.section-title-wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.8rem;
  margin: clamp(2.5rem,4vw,3.5rem) 0 clamp(1.2rem,2vw,2rem);
}
.section-title-wrap .section-title { margin: 0; }
.section-see-all {
  font-size: 0.85rem; font-weight: 700; color: var(--primary);
  text-decoration: none; display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 1rem; border-radius: 30px;
  border: 1.5px solid rgba(192,57,43,0.25);
  transition: var(--transition); white-space: nowrap;
}
.section-see-all:hover { background: var(--primary); color: white; }

/* ══════════════════════════════════════════
   PRODUCT CARD — BADGE
══════════════════════════════════════════ */
.product-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--primary); color: white;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5px;
  padding: 0.25rem 0.65rem; border-radius: 20px;
  text-transform: uppercase; box-shadow: 0 3px 10px rgba(192,57,43,0.3);
}
.product-badge.badge-new { background: #1e7a1e; }
.product-badge.badge-hot { background: var(--golden); }

/* ══════════════════════════════════════════
   SCROLL ANIMATIONS
══════════════════════════════════════════ */
.animate-on-scroll {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.animate-on-scroll.visible {
  opacity: 1; transform: translateY(0);
}
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }

/* ══════════════════════════════════════════
   IMPROVED FOOTER
══════════════════════════════════════════ */
.footer {
  background: linear-gradient(145deg, #1a0904 0%, #2e0e04 55%, #1a0904 100%);
  border-radius: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) 0 0;
  margin-top: clamp(3rem, 5vw, 4rem);
  padding: 0; border-top: none;
  position: relative; overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--golden) 30%, var(--primary) 50%, var(--golden) 70%, transparent 100%);
}

/* Brand column + three link columns on desktop; brand spans full width and
   everything centres on narrower screens. */
.footer-main {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: start; text-align: left;
  padding: clamp(2.8rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem) clamp(1.8rem, 3vw, 2.5rem);
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.footer-col h4 {
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 800;
  color: #fff; margin-bottom: 0.7rem; letter-spacing: 0.2px;
}
.footer-col a {
  display: flex; align-items: center; gap: 0.5rem;
  color: rgba(255,255,255,0.62); text-decoration: none; font-size: 0.87rem;
  padding: 0.3rem 0; transition: color 0.2s, transform 0.2s;
}
.footer-col a i { width: 16px; text-align: center; color: rgba(255,255,255,0.35); font-size: 0.8rem; transition: color 0.2s; }
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-col a:hover i { color: var(--golden); }
.footer-col p { color: rgba(255,255,255,0.55); font-size: 0.85rem; line-height: 1.7; }
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; align-items: center; text-align: center; }
  .footer-brand .footer-socials { justify-content: center; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; text-align: center; gap: 1.6rem; }
  .footer-col a { justify-content: center; }
}

.footer-logo {
  height: clamp(60px, 8vw, 72px);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.06);
}

.footer-brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 900; line-height: 1.1;
  background: linear-gradient(135deg, #ffecd2, #fcb69f, #f6d365);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.footer-desc {
  color: rgba(255,255,255,0.52); font-size: clamp(0.82rem, 1.6vw, 0.91rem);
  line-height: 1.8; max-width: 400px;
}

.footer-socials { display: flex; gap: 0.65rem; justify-content: flex-start; margin-top: 0.4rem; }
.footer-socials a {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55); font-size: 1rem; text-decoration: none;
  transition: background 0.22s, color 0.22s, transform 0.22s, border-color 0.22s, box-shadow 0.22s;
}
.footer-socials a:hover {
  background: var(--primary); color: white; border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(192,57,43,0.38);
}
.footer-socials a[aria-label="WhatsApp"]:hover {
  background: #25D366; border-color: #25D366;
  box-shadow: 0 10px 22px rgba(37,211,102,0.38);
}

.footer-bottom {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.footer-copy {
  color: rgba(255,255,255,0.3); font-size: 0.78rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.footer-copy i { color: rgba(255,255,255,0.18); }

/* ══════════════════════════════════════════
   ABOUT & CONTACT — REDESIGN
══════════════════════════════════════════ */
.ac-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin: clamp(3rem,5vw,4.5rem) 0 clamp(2rem,4vw,3rem);
}

.ac-card {
  border-radius: 28px;
  padding: clamp(2rem,4vw,2.8rem) clamp(1.8rem,3.5vw,2.6rem);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 1.2rem;
}

/* About card — warm dark */
.ac-about {
  background: linear-gradient(145deg, #2e0e04 0%, #5a1a08 60%, #3a1208 100%);
  color: white;
}
.ac-card-bg-deco {
  position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255,255,255,0.03); pointer-events: none;
}
.ac-card-bg-deco::after {
  content: ''; position: absolute; bottom: -120px; left: -100px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(230,126,34,0.07);
}

/* Contact card — warm light */
.ac-contact {
  background: linear-gradient(145deg, #fffaf7, #fff4ec);
  border: 1.5px solid rgba(192,57,43,0.1);
  box-shadow: 0 8px 30px rgba(192,57,43,0.07);
}

/* Shared label */
.ac-label {
  display: inline-flex; align-items: center;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.35rem 0.9rem; border-radius: 30px;
  width: fit-content;
}
.ac-about .ac-label {
  background: rgba(255,255,255,0.12);
  color: rgba(255,195,70,0.9);
  border: 1px solid rgba(255,255,255,0.15);
}
.ac-contact .ac-label {
  background: rgba(192,57,43,0.08);
  color: var(--primary);
  border: 1px solid rgba(192,57,43,0.18);
}

/* Heading */
.ac-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900;
  line-height: 1.1; margin: 0;
}
.ac-about .ac-heading { color: white; }
.ac-contact .ac-heading { color: var(--text-dark); }
.ac-about .ac-heading span {
  background: linear-gradient(135deg, #ffecd2, #fcb69f, #f6d365);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ac-contact .ac-heading span {
  background: linear-gradient(135deg, var(--primary), var(--golden));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Body text */
.ac-body {
  font-size: clamp(0.85rem,1.6vw,0.93rem); line-height: 1.75; margin: 0;
}
.ac-about .ac-body { color: rgba(255,255,255,0.78); }
.ac-contact .ac-body { color: var(--text-light); }

/* Pillars grid */
.ac-pillars {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.85rem; margin-top: 0.4rem;
}
.ac-pillar {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 0.85rem 1rem;
  transition: background 0.2s;
}
.ac-pillar:hover { background: rgba(255,255,255,0.12); }
.ac-pillar-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(230,126,34,0.35), rgba(192,57,43,0.25));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: #f6c87a;
}
.ac-pillar-title { font-size: 0.82rem; font-weight: 700; color: white; line-height: 1.2; }
.ac-pillar-sub { font-size: 0.7rem; color: rgba(255,255,255,0.55); margin-top: 1px; }

/* Contact methods */
.ac-methods { display: flex; flex-direction: column; gap: 0.7rem; }
.ac-method {
  display: flex; align-items: center; gap: 1rem;
  border-radius: 18px; padding: 1rem 1.1rem;
  text-decoration: none; transition: all 0.22s ease;
  border: 1.5px solid transparent;
}
.ac-method-whatsapp {
  background: linear-gradient(135deg, rgba(37,211,102,0.08), rgba(37,211,102,0.04));
  border-color: rgba(37,211,102,0.2);
}
.ac-method-whatsapp:hover { background: linear-gradient(135deg,rgba(37,211,102,0.15),rgba(37,211,102,0.08)); transform: translateX(4px); border-color: rgba(37,211,102,0.4); }
.ac-method-email {
  background: rgba(192,57,43,0.05); border-color: rgba(192,57,43,0.14);
}
.ac-method-email:hover { background: rgba(192,57,43,0.1); transform: translateX(4px); border-color: rgba(192,57,43,0.28); }
.ac-method-location {
  background: rgba(230,126,34,0.06); border-color: rgba(230,126,34,0.18);
}

.ac-method-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.ac-method-whatsapp .ac-method-icon { background: rgba(37,211,102,0.15); color: #1da851; }
.ac-method-email    .ac-method-icon { background: rgba(192,57,43,0.1);  color: var(--primary); }
.ac-method-location .ac-method-icon { background: rgba(230,126,34,0.12); color: var(--golden); }

.ac-method-info { flex: 1; min-width: 0; }
.ac-method-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #b09080; margin-bottom: 2px; }
.ac-method-value { font-size: 0.86rem; font-weight: 600; color: var(--text-dark); word-break: break-word; }
.ac-method-arrow { font-size: 0.75rem; color: #c4a898; flex-shrink: 0; transition: transform 0.2s; }
.ac-method:hover .ac-method-arrow { transform: translateX(3px); color: var(--primary); }

/* Socials */
.ac-socials { display: flex; gap: 0.65rem; flex-wrap: wrap; }
.ac-social {
  width: 42px; height: 42px; border-radius: 50%;
  background: white; border: 1.5px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text-light); text-decoration: none;
  transition: all 0.22s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.ac-social:hover { background: var(--primary); color: white; border-color: var(--primary); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(192,57,43,0.28); }
.ac-social-wa:hover { background: #25D366; border-color: #25D366; box-shadow: 0 8px 20px rgba(37,211,102,0.3); }

/* Order CTA */
.ac-order-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: #25D366; color: white; text-decoration: none;
  padding: 0.9rem 1.4rem; border-radius: 16px; font-weight: 700;
  font-size: 0.92rem; margin-top: 0.3rem;
  box-shadow: 0 6px 20px rgba(37,211,102,0.3);
  transition: all 0.25s ease; position: relative; overflow: hidden;
}
.ac-order-btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.45s;
}
.ac-order-btn:hover::after { left: 100%; }
.ac-order-btn:hover { background: #1da851; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(37,211,102,0.4); }
.ac-order-btn i:last-child { font-size: 0.82rem; transition: transform 0.2s; }
.ac-order-btn:hover i:last-child { transform: translateX(3px); }

/* Responsive */
@media (max-width: 860px) {
  .ac-wrapper { grid-template-columns: 1fr; }
  .ac-pillars { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ac-card { padding: 1.6rem 1.4rem; }
  .ac-pillars { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .ac-pillar { padding: 0.7rem 0.8rem; }
  .ac-heading { font-size: clamp(1.7rem,6vw,2.2rem); }
}

/* ══════════════════════════════════════════
   NAV ACTIVE INDICATOR IMPROVEMENTS
══════════════════════════════════════════ */
.navbar { position: relative; }

.cart-wrapper { position: relative; }

/* ══════════════════════════════════════════
   CART DRAWER
══════════════════════════════════════════ */
.cart-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20,8,3,0.55); backdrop-filter: blur(8px);
  z-index: 1000; justify-content: flex-end;
}
.cart-overlay.active { display: flex; }

.cart-panel {
  width: 400px; max-width: 100vw; height: 100%;
  background: #fdfaf7;
  display: flex; flex-direction: column;
  box-shadow: -24px 0 60px rgba(0,0,0,0.2);
  animation: cartSlideIn 0.35s cubic-bezier(0.34,1.05,0.64,1);
}
@keyframes cartSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes cartSlideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.5rem; flex-shrink: 0;
  background: linear-gradient(135deg, #2e0e04 0%, #6b2008 55%, #3a1208 100%);
}
.cart-head-left { display: flex; align-items: center; gap: 0.85rem; }
.cart-head-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; color: white; flex-shrink: 0;
}
.cart-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 800; color: white;
}
.cart-head-sub { font-size: 0.7rem; color: rgba(255,195,70,0.85); font-weight: 600; margin-top: 1px; }
.cart-head-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
  color: white; cursor: pointer; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s; flex-shrink: 0;
}
.cart-head-close:hover { background: rgba(255,255,255,0.24); }

.cart-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; }
.cart-body::-webkit-scrollbar { width: 3px; }
.cart-body::-webkit-scrollbar-thumb { background: rgba(192,57,43,0.15); border-radius: 4px; }

/* Empty state */
.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3.5rem 2rem; text-align: center; list-style: none;
}
.cart-empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(192,57,43,0.08), rgba(230,126,34,0.08));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; color: #c0392b; margin-bottom: 1rem;
}
.cart-empty-title { font-size: 1.05rem; font-weight: 700; color: #2c1a0f; margin-bottom: 0.3rem; }
.cart-empty-sub { font-size: 0.82rem; color: #a87c62; }

/* Item cards */
.cart-items-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.cart-item {
  display: flex; align-items: flex-start; gap: 0.85rem;
  background: white; border-radius: 18px; padding: 0.85rem 0.9rem;
  border: 1.5px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: box-shadow 0.22s, border-color 0.22s;
}
.cart-item:hover { box-shadow: 0 6px 20px rgba(192,57,43,0.1); border-color: rgba(192,57,43,0.14); }
.cart-item-img {
  width: 68px; height: 68px; border-radius: 13px;
  object-fit: cover; flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.06);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.98rem; font-weight: 700; color: #2c1a0f;
  margin-bottom: 0.18rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cart-item-uprice { font-size: 0.72rem; color: #a87c62; font-weight: 500; margin-bottom: 0.55rem; }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.cart-qty-ctl {
  display: flex; align-items: center;
  background: #f7f0ea; border-radius: 50px;
  border: 1.5px solid rgba(230,126,34,0.2); overflow: hidden;
}
.cart-qty-btn {
  width: 28px; height: 28px; background: transparent; border: none;
  font-size: 1rem; font-weight: 700; color: #c0392b; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s var(--spring); flex-shrink: 0;
}
.cart-qty-btn:hover { background: #c0392b; color: white; }
.cart-qty-btn:active { transform: scale(0.8); }
.cart-qty-num { width: 26px; text-align: center; font-size: 0.84rem; font-weight: 700; color: #2c1a0f; }
.cart-line-total { font-size: 0.92rem; font-weight: 800; color: #c0392b; white-space: nowrap; display: inline-block; }
.cart-line-total.flash { animation: lineTotalFlash 0.4s ease; }
@keyframes lineTotalFlash {
  0%   { transform: scale(1); color: #c0392b; }
  40%  { transform: scale(1.18); color: #1e7a1e; }
  100% { transform: scale(1); color: #c0392b; }
}

.cart-remove-btn {
  background: rgba(192,57,43,0.06); border: 1px solid rgba(192,57,43,0.1);
  color: #c0392b; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.7rem; flex-shrink: 0; margin-top: 2px;
  transition: background 0.2s, color 0.2s;
}
.cart-remove-btn:hover { background: #c0392b; color: white; border-color: #c0392b; }

/* Foot */
.cart-foot {
  padding: 1.1rem 1.5rem 1.3rem; border-top: 1px solid rgba(0,0,0,0.07);
  background: white; flex-shrink: 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.06);
}
.cart-subtotal-row {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;
}
.cart-subtotal-row span { font-size: 0.86rem; font-weight: 600; color: #7a5a4a; }
.cart-subtotal-row strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 900; color: #c0392b;
}
.cart-delivery-hint {
  font-size: 0.7rem; color: #b09070; margin-bottom: 0.95rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.cart-delivery-hint i { color: #e67e22; }
.cart-foot-btns { display: flex; gap: 0.65rem; }
.cart-clear-btn {
  display: flex; align-items: center; gap: 0.4rem;
  background: transparent; border: 1.5px solid rgba(192,57,43,0.2);
  color: #c0392b; padding: 0.72rem 1rem; border-radius: 12px;
  font-weight: 700; font-size: 0.82rem; cursor: pointer;
  transition: all 0.2s; white-space: nowrap; font-family: 'Inter', sans-serif;
}
.cart-clear-btn:hover { background: #c0392b; color: white; border-color: #c0392b; }
.cart-checkout-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  background: linear-gradient(135deg, #c0392b 0%, #d4521a 100%);
  color: white; border: none; padding: 0.78rem 1rem; border-radius: 12px;
  font-weight: 700; font-size: 0.88rem; cursor: pointer;
  box-shadow: 0 6px 18px rgba(192,57,43,0.28);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative; overflow: hidden; font-family: 'Inter', sans-serif;
}
.cart-checkout-btn::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.4s;
}
.cart-checkout-btn:hover::after { left: 100%; }
.cart-checkout-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(192,57,43,0.38); animation-play-state: paused; }
@media (prefers-reduced-motion: no-preference) {
  .cart-checkout-btn { animation: checkoutBtnGlow 2.4s ease-in-out infinite; }
  @keyframes checkoutBtnGlow {
    0%, 100% { box-shadow: 0 6px 18px rgba(192,57,43,0.28); }
    50%      { box-shadow: 0 6px 22px rgba(192,57,43,0.4), 0 0 20px 3px rgba(230,126,34,0.35); }
  }
}

@media (max-width: 767px) {
  .cart-overlay { justify-content: center; align-items: flex-end; }
  .cart-panel {
    width: 100% !important; height: auto;
    max-height: 88vh; border-radius: 1.5rem 1.5rem 0 0;
    box-shadow: 0 -12px 40px rgba(0,0,0,0.2);
    animation: cartSlideUp 0.35s cubic-bezier(0.34,1.05,0.64,1);
  }
  .cart-head { border-radius: 1.5rem 1.5rem 0 0; }
  .cart-body { max-height: 52vh; }
  .cart-item-img { width: 58px; height: 58px; }
  .cart-foot { padding: 1rem 1.2rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
}

/* ══════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════ */
.checkout-container {
  background: white; max-width: 600px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  border-radius: 26px;
  box-shadow: 0 40px 80px rgba(0,0,0,0.2);
  animation: modalUp 0.35s cubic-bezier(0.34,1.05,0.64,1);
}
.checkout-container::-webkit-scrollbar { width: 3px; }
.checkout-container::-webkit-scrollbar-thumb { background: rgba(192,57,43,0.2); border-radius: 4px; }

.checkout-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.8rem; flex-shrink: 0;
  background: linear-gradient(135deg, #2e0e04 0%, #6b2008 55%, #3a1208 100%);
  border-radius: 26px 26px 0 0;
  position: sticky; top: 0; z-index: 10;
}
.checkout-head-left { display: flex; align-items: center; gap: 0.85rem; }
.checkout-head-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: white; flex-shrink: 0;
}
.checkout-head-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem; font-weight: 800; color: white;
}
.checkout-head-sub { font-size: 0.7rem; color: rgba(255,195,70,0.85); font-weight: 600; margin-top: 1px; }
.checkout-close {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
  color: white; cursor: pointer; font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.checkout-close:hover { background: rgba(255,255,255,0.24); }

.checkout-body { padding: 1.5rem 1.8rem 2rem; }

/* Order summary */
.checkout-summary {
  background: linear-gradient(145deg, #fdfaf7, #fff3ec);
  border: 1.5px solid rgba(192,57,43,0.12);
  border-radius: 18px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem;
}
.checkout-summary-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; color: #b09080; margin-bottom: 0.65rem;
}
.checkout-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.28rem 0; font-size: 0.86rem; color: #6b4a36;
}
.checkout-summary-row.discount { color: #1e7a1e; font-weight: 600; }
.checkout-summary-divider { border: none; border-top: 1.5px dashed rgba(0,0,0,0.1); margin: 0.5rem 0; }
.checkout-summary-total {
  display: flex; justify-content: space-between; align-items: center; padding-top: 0.25rem;
}
.checkout-summary-total span:first-child { font-size: 0.9rem; font-weight: 700; color: #2c1a0f; }
.checkout-summary-total span:last-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 900; color: #c0392b;
}
.checkout-savings-badge {
  margin-top: 0.55rem; background: #e6f7e6; border-radius: 10px;
  padding: 0.32rem 0.75rem; font-size: 0.75rem; color: #1e7a1e;
  font-weight: 600; text-align: center;
}

/* Sections */
.checkout-section { margin-bottom: 1.5rem; }
.checkout-section-title {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.9px; color: #b09080; margin-bottom: 0.85rem;
  padding-bottom: 0.5rem; border-bottom: 1.5px solid rgba(0,0,0,0.06);
}
.checkout-section-title i { color: #c0392b; font-size: 0.78rem; }

/* Form grid */
.checkout-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.co-input-wrap { position: relative; }
.co-input-wrap.co-full { grid-column: 1 / -1; }
.co-field-icon {
  position: absolute; left: 0.88rem; top: 50%; transform: translateY(-50%);
  color: #c0392b; font-size: 0.78rem; opacity: 0.6; pointer-events: none;
  transition: opacity 0.2s;
}
.co-input-wrap:focus-within .co-field-icon { opacity: 1; }
.co-input-wrap .co-input,
.co-input-wrap .billing-input {
  width: 100%; padding: 0.75rem 0.9rem 0.75rem 2.4rem !important;
  border: 1.5px solid rgba(0,0,0,0.09) !important; border-radius: 12px !important;
  font-family: 'Inter', sans-serif; font-size: 0.875rem;
  background: #fdfaf7 !important; color: #2c1a0f; outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: none !important;
}
.co-input-wrap .co-input:focus,
.co-input-wrap .billing-input:focus {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.1) !important;
  background: white !important;
}
.co-input-wrap .co-input::placeholder,
.co-input-wrap .billing-input::placeholder { color: #d0b8a8; }
.co-input-wrap .co-input.error,
.co-input-wrap .billing-input.error { border-color: #c0392b !important; }

/* Promo row */
.co-promo-row { display: flex; gap: 0.55rem; align-items: stretch; }
.co-apply-btn {
  background: linear-gradient(135deg, #c0392b, #d4521a); color: white; border: none;
  padding: 0.75rem 1.2rem; border-radius: 12px; font-weight: 700;
  font-size: 0.82rem; cursor: pointer; white-space: nowrap;
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring); font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 12px rgba(192,57,43,0.22);
}
.co-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(192,57,43,0.32); }
.co-credits-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.88rem; cursor: pointer; color: #2c1a0f; font-weight: 500;
}

/* Payment method cards */
.pay-method-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;
}
.pay-method-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.45rem; padding: 1rem 0.6rem;
  background: #fdfaf7; border: 2px solid rgba(0,0,0,0.07);
  border-radius: 16px; cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
  font-family: 'Inter', sans-serif;
}
.pay-method-card i { font-size: 1.3rem; color: #b09080; transition: color 0.22s; }
.pay-method-card span { font-size: 0.76rem; font-weight: 700; color: #7a5a4a; transition: color 0.22s; }
.pay-method-card:hover { border-color: rgba(192,57,43,0.3); background: #fff6f3; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(192,57,43,0.1); }
.pay-method-card:hover i, .pay-method-card:hover span { color: #c0392b; }
.pay-method-card.active {
  background: linear-gradient(135deg, rgba(192,57,43,0.08), rgba(230,126,34,0.05));
  border-color: #c0392b; box-shadow: 0 4px 14px rgba(192,57,43,0.16); transform: translateY(-2px);
}
.pay-method-card.active i, .pay-method-card.active span { color: #c0392b; }
.pay-method-card { position: relative; }
.pay-method-card::after {
  content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; top: -6px; right: -6px;
  width: 19px; height: 19px; border-radius: 50%;
  background: #1e7a1e; color: white; font-size: 0.58rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0); transition: all 0.3s var(--spring);
  box-shadow: 0 2px 6px rgba(0,0,0,0.22); pointer-events: none;
}
.pay-method-card.active::after { opacity: 1; transform: scale(1); }

.tab-pane { padding-top: 1rem; }

/* Checkout mobile */
@media (max-width: 600px) {
  .checkout-container {
    max-width: 100%; border-radius: 1.5rem 1.5rem 0 0;
    position: fixed; bottom: 0; left: 0; right: 0; max-height: 95vh;
  }
  .checkout-head { border-radius: 1.5rem 1.5rem 0 0; }
  .modal-overlay.active { align-items: flex-end; padding: 0; }
  .checkout-body { padding: 1.2rem 1.3rem 1.8rem; }
  .checkout-form-grid { grid-template-columns: 1fr; }
  .co-input-wrap.co-full { grid-column: 1; }
  .pay-method-grid { gap: 0.45rem; }
  .pay-method-card { padding: 0.8rem 0.4rem; }
  .pay-method-card i { font-size: 1.1rem; }
  .pay-method-card span { font-size: 0.68rem; }
}

/* ══════════════════════════════════════════
   HERO DIVIDER WAVE
══════════════════════════════════════════ */
.hero-wave {
  margin: -1px 0 0; line-height: 0; overflow: hidden;
  border-radius: 0 0 2.5rem 2.5rem;
}
.hero-wave svg { display: block; width: 100%; height: auto; }

/* ══════════════════════════════════════════
   HERO MOBILE COMPACTION (kept last so it wins
   the cascade over the base badge/stats/art rules)
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero-stats { justify-content: center; }
  .hero-art { flex: 0 0 auto; width: 55%; max-width: 260px; min-width: 0; margin: 1rem auto 0; }
}
@media (max-width: 767px) {
  .hero { gap: 0.7rem; padding-top: 1.8rem; padding-bottom: 1.8rem; }
  .hero-badge { margin-bottom: 1rem; padding: 0.35rem 0.9rem; font-size: 0.74rem; }
  .hero p { margin: 0.9rem 0 1.3rem; }
  .hero-stats { margin-top: 1.2rem; gap: 0.5rem; flex-wrap: nowrap; }
  .hero-stat { flex: 1 1 0; min-width: 0; }
  .hero-stat span { white-space: normal; line-height: 1.15; }
  .hero-art { width: 70%; max-width: 280px; margin-top: 1.6rem; }
  .hero-art-card { padding: 0.5rem; border-radius: 16px; }
}
@media (max-width: 479px) {
  .hero { padding-top: 1.6rem; padding-bottom: 1.6rem; }
  .hero-badge { margin-bottom: 0.9rem; }
  .hero p { margin: 0.8rem 0 1.1rem; }
  .hero-stats { margin-top: 1rem; gap: 0.35rem; }
  .hero-stat strong { font-size: 1.2rem; }
  .hero-stat span { font-size: 0.58rem; }
  .hero-art { width: 66%; max-width: 240px; margin-top: 1.4rem; }
  .hero-art-card { padding: 0.4rem; border-radius: 14px; }
}

/* ══════════════════════════════════════════
   DELIGHT ANIMATIONS
   (fly-to-cart, confetti, button loading, checkout progress)
══════════════════════════════════════════ */

/* Fly-to-cart clone */
.fly-cart-clone {
  position: fixed; z-index: 1400; border-radius: 50%;
  object-fit: cover; pointer-events: none;
  box-shadow: 0 8px 24px rgba(192,57,43,0.35);
  transition: transform 0.62s cubic-bezier(0.34, 0.02, 0.35, 1),
              opacity 0.62s ease, width 0.62s ease, height 0.62s ease;
  will-change: transform, opacity;
}

/* Confetti burst */
.confetti-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 1500;
  overflow: hidden;
}
.confetti-piece {
  position: absolute; top: 0; left: 0;
  width: 8px; height: 8px;
  opacity: 0.95; border-radius: 2px;
  animation: confettiFall 1.1s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
  will-change: transform, opacity;
}
.confetti-piece.round { border-radius: 50%; }
@keyframes confettiFall {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: var(--confetti-end) rotate(var(--confetti-spin)) scale(0.6); opacity: 0; }
}

/* Button loading state — shimmer sweep + disabled affordance */
.btn-loading {
  position: relative; color: transparent !important; pointer-events: none;
  cursor: default !important;
}
.btn-loading > * { visibility: hidden; }
.btn-loading::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.12) 100%);
  background-size: 200% 100%;
  animation: btnShimmer 1.1s ease-in-out infinite;
}
.btn-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: btnSpin 0.65s linear infinite;
}
@keyframes btnShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Checkout progress — Delivery → Payment → Ready */
.checkout-progress {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 1.3rem;
}
.checkout-progress-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.checkout-progress-track {
  width: 100%; height: 5px; border-radius: 4px;
  background: rgba(192,57,43,0.12); overflow: hidden;
}
.checkout-progress-fill {
  height: 100%; width: 0%; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), var(--golden));
  transition: width 0.5s var(--spring);
}
.checkout-progress-step.done .checkout-progress-fill { width: 100%; }
.checkout-progress-label {
  font-size: 0.68rem; font-weight: 700; color: #b09080;
  letter-spacing: 0.2px; transition: color 0.3s ease;
  display: flex; align-items: center; gap: 0.3rem;
}
.checkout-progress-step.done .checkout-progress-label { color: var(--primary); }
.checkout-progress-label i { font-size: 0.7rem; opacity: 0; transform: scale(0.5); transition: all 0.3s var(--spring); }
.checkout-progress-step.done .checkout-progress-label i { opacity: 1; transform: scale(1); }

/* Rewards banner — real credit balance, direct nudge to spend at checkout */
#rewardsBanner.pop-in { animation: rewardsPopIn 0.4s var(--spring); }
@keyframes rewardsPopIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.rewards-use-btn { transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring); }
.rewards-use-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.rewards-use-btn:active { transform: translateY(0) scale(0.97); }
@media (prefers-reduced-motion: no-preference) {
  .rewards-card { animation: rewardsGlow 2.6s ease-in-out infinite; }
  .rewards-coin { animation: rewardsCoinBounce 2.6s ease-in-out infinite; }
  @keyframes rewardsGlow {
    0%, 100% { box-shadow: 0 6px 20px rgba(30,122,30,0.2); }
    50%      { box-shadow: 0 6px 26px rgba(30,122,30,0.32), 0 0 22px 2px rgba(39,174,96,0.35); }
  }
  @keyframes rewardsCoinBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-3px) rotate(-8deg); }
  }
}

/* Cart icon "impact" pulse when a flying item lands */
.cart-icon.hit { animation: cartIconHit 0.4s var(--spring); }
@keyframes cartIconHit {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); box-shadow: 0 8px 26px rgba(192,57,43,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
  100% { transform: scale(1); }
}

/* ══════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2,0.7,0.3,1); }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }
@media (max-width: 479px) {
  .reveal { transform: translateY(18px); }
}

/* ══════════════════════════════════════════
   STICKY MINI CART BAR
══════════════════════════════════════════ */
.mini-cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  transform: translateY(110%);
  transition: transform 0.4s var(--spring);
  padding: 0 clamp(0.8rem, 3vw, 1.5rem) calc(0.8rem + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.mini-cart-bar.visible { transform: translateY(0); pointer-events: auto; }
.mini-cart-bar-inner {
  max-width: 720px; margin: 0 auto;
  background: linear-gradient(135deg, var(--primary) 0%, #d4521a 100%);
  border-radius: 20px;
  padding: 0.65rem 0.8rem 0.65rem 0.65rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
  box-shadow: 0 12px 34px rgba(192,57,43,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
}
.mini-cart-bar-info { display: flex; align-items: center; gap: clamp(0.5rem, 2vw, 0.75rem); min-width: 0; flex: 1; }
.mini-cart-bar-icon {
  position: relative; width: clamp(36px, 8vw, 42px); height: clamp(36px, 8vw, 42px);
  border-radius: 50%; background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: clamp(0.95rem, 3vw, 1.1rem); flex-shrink: 0;
}
.mini-cart-bar-count {
  position: absolute; top: -5px; right: -5px;
  background: var(--golden); color: white; font-size: 0.6rem; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #b41e14; flex-shrink: 0;
}
.mini-cart-bar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mini-cart-bar-items { font-size: 0.66rem; color: rgba(255,255,255,0.82); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
.mini-cart-bar-total {
  font-size: clamp(0.9rem, 3.5vw, 1.05rem); color: white; font-weight: 800;
  font-family: 'Cormorant Garamond', serif; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-cart-bar-btn {
  background: white; color: var(--primary); border: none; border-radius: 30px;
  padding: 0.6rem 1.1rem; font-weight: 700; font-size: clamp(0.76rem, 2.6vw, 0.85rem); cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; flex-shrink: 0;
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.mini-cart-bar-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
.mini-cart-bar-btn:active { transform: scale(0.96); }
@media (max-width: 360px) {
  .mini-cart-bar-btn i { display: none; }
  .mini-cart-bar-btn { padding: 0.6rem 0.85rem; }
}
@media (min-width: 900px) {
  .mini-cart-bar-inner { padding: 0.8rem 1.1rem 0.8rem 0.8rem; }
}

/* ══════════════════════════════════════════
   CART CROSS-SELL
══════════════════════════════════════════ */
.cart-cross-sell { margin-top: 0.2rem; }
.cross-sell-label {
  font-size: 0.72rem; font-weight: 700; color: #b09080;
  text-transform: uppercase; letter-spacing: 0.6px;
  margin: 0.9rem 0 0.6rem; display: flex; align-items: center; gap: 0.4rem;
}
.cross-sell-label i { color: var(--golden); }
.cross-sell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cross-sell-card {
  display: flex; align-items: center; gap: 0.5rem;
  background: #fdfaf7; border: 1px solid rgba(0,0,0,0.06); border-radius: 14px;
  padding: 0.5rem; min-width: 0;
  transition: transform 0.25s var(--spring), box-shadow 0.25s var(--spring);
}
.cross-sell-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.cross-sell-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.cross-sell-info { min-width: 0; flex: 1; }
.cross-sell-name { font-size: 0.72rem; font-weight: 700; color: #2c1a0f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cross-sell-price { font-size: 0.7rem; font-weight: 800; color: var(--primary); }
.cross-sell-add {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: white; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 0.68rem;
  transition: transform 0.25s var(--spring), background 0.2s;
}
.cross-sell-add:hover { background: var(--primary-dark); transform: scale(1.12); }
.cross-sell-add:active { transform: scale(0.9); }
@media (max-width: 380px) {
  .cross-sell-grid { grid-template-columns: 1fr; }
}