/* ═══════════════════════════════════════════════════════════════
   style.css — All visual styling for Bismi Treats website
   Edit this file for colours, spacing, fonts — never touch JS
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET & ROOT ─────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }

:root {
  --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
  --acc:   #C9A96E;
  --acc-d: #A07840;
  --acc-l: rgba(201,169,110,.12);
  --bg:    #FFFFFF;
  --bg2:   #F7F9FC;
  --bg3:   #F0F4FA;
  --card:  rgba(255,255,255,.88);
  --border:rgba(220,228,240,.8);
  --t1:    #111827;
  --t2:    #4B5563;
  --t3:    #9CA3AF;
  --green: #16a34a;
  --red:   #dc2626;
  --sh-sm: 0 2px 8px rgba(0,0,0,.06);
  --sh-md: 0 4px 20px rgba(0,0,0,.08);
  --sh-lg: 0 8px 40px rgba(0,0,0,.12);
  --r1: 8px; --r2: 12px; --r3: 16px; --r4: 24px; --rf: 9999px;
  --ease: cubic-bezier(.4,0,.2,1);
}

body {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg3) 100%);
  min-height: 100vh;
  font-family: var(--font);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
}

/* ── PAGE LOADER ──────────────────────────────────────────────── */
#pageLoader {
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:12px;
  transition:opacity .5s var(--ease);
}
#pageLoader.hidden { opacity:0; pointer-events:none; }
.loader-ring {
  width:44px; height:44px; border-radius:50%;
  border:3px solid var(--acc-l);
  border-top-color:var(--acc);
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes slideUp { from{transform:translateY(100%);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes popIn   { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes floatCircle { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }

/* ── BOKEH ORBS ───────────────────────────────────────────────── */
.bokeh-orb {
  position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  animation:floatCircle 18s ease-in-out infinite;
}

/* ── HEADER ───────────────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.05);
  padding:0 16px; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  animation:fadeIn .3s var(--ease);
}
.header-left  { display:flex; align-items:center; gap:10px; }
.header-right { display:flex; align-items:center; gap:8px; }

.hamburger-btn {
  width:36px; height:36px; border-radius:var(--r1);
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.95rem; color:var(--t2);
  box-shadow:var(--sh-sm); transition:all .2s var(--ease);
}
.hamburger-btn:hover { background:rgba(255,255,255,.95); color:var(--t1); }

.header-logo-wrap {
  width:34px; height:34px; border-radius:50%;
  overflow:hidden; flex-shrink:0;
  border:2px solid rgba(201,169,110,.3);
  box-shadow:0 0 0 3px rgba(201,169,110,.1), var(--sh-sm);
}
.header-logo-wrap img { width:100%; height:100%; object-fit:cover; }

.brand-name {
  font-size:.92rem; font-weight:700; color:var(--t1);
  font-family:'Garamond','Georgia',serif; letter-spacing:-.01em;
  white-space:nowrap;
}

.lang-toggle { display:flex; gap:3px; }
.lang-btn {
  background:none; border:1px solid var(--border);
  border-radius:var(--rf); padding:4px 9px;
  font-size:.7rem; font-weight:600; color:var(--t3);
  cursor:pointer; font-family:var(--font); transition:all .2s;
}
.lang-btn.active { background:var(--acc); border-color:var(--acc); color:white; }

.cart-btn {
  position:relative; width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  border:none; color:white; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; box-shadow:0 2px 8px rgba(201,169,110,.35);
  transition:all .2s var(--ease);
}
.cart-btn:hover { transform:scale(1.08); }
.cart-count {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:white;
  font-size:.58rem; font-weight:700;
  padding:2px 5px; border-radius:var(--rf);
  display:none; min-width:16px; text-align:center;
}

/* ── SIDENAV ──────────────────────────────────────────────────── */
.sidenav-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.4); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.sidenav-overlay.show { opacity:1; pointer-events:all; }

.sidenav {
  position:fixed; top:0; left:0; bottom:0; z-index:400;
  width:min(300px, 85vw);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--border);
  box-shadow:var(--sh-lg);
  transform:translateX(-100%); transition:transform .3s var(--ease);
  display:flex; flex-direction:column; overflow-y:auto;
}
.sidenav.open { transform:translateX(0); }

.sidenav-header {
  padding:20px 16px 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px;
}
.sidenav-logo-wrap {
  width:48px; height:48px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(201,169,110,.3);
  box-shadow:0 0 0 3px rgba(201,169,110,.1);
}
.sidenav-logo-wrap img { width:100%; height:100%; object-fit:cover; }
.sidenav-brand-name { font-size:1rem; font-weight:700; color:var(--t1); font-family:'Garamond','Georgia',serif; }
.sidenav-brand-sub  { font-size:.7rem; color:var(--t3); margin-top:2px; }

.sidenav-close {
  margin-left:auto; background:none; border:none;
  color:var(--t3); cursor:pointer; font-size:1.2rem; padding:4px;
}

.sidenav-nav { padding:12px 8px; flex:1; }
.sidenav-item {
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--r2);
  cursor:pointer; font-size:.88rem; font-weight:500; color:var(--t2);
  transition:all .15s var(--ease); margin-bottom:2px;
}
.sidenav-item:hover { background:var(--acc-l); color:var(--acc-d); }
.sidenav-item i { width:18px; text-align:center; color:var(--acc); font-size:.85rem; }
.sidenav-divider { height:1px; background:var(--border); margin:8px 12px; }

.sidenav-footer {
  padding:12px 16px;
  border-top:1px solid var(--border);
  font-size:.72rem; color:var(--t3); text-align:center;
}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero-section {
  position:relative; overflow:hidden;
  min-height:260px; display:flex; align-items:center; justify-content:center;
}
.hero-img-wrap {
  position:absolute; inset:0; z-index:0;
}
.hero-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.75);
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom, rgba(0,0,0,.1) 0%, rgba(0,0,0,.45) 100%);
}
.hero-content {
  position:relative; z-index:2;
  text-align:center; padding:40px 20px;
  color:white;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25); border-radius:var(--rf);
  padding:5px 14px; font-size:.72rem; font-weight:600;
  margin-bottom:12px; color:white;
  animation:badgeGlow 3s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.0); background:rgba(255,255,255,.15); }
  50%      { box-shadow:0 0 12px 3px rgba(255,255,255,.18); background:rgba(255,255,255,.22); }
}
.hero-badge .fa-star {
  animation:starSpin 4s ease-in-out infinite;
}
@keyframes starSpin {
  0%,80%,100% { transform:rotate(0deg) scale(1); }
  90%         { transform:rotate(20deg) scale(1.3); }
}
.hero-title {
  font-family:'Garamond','Georgia',serif;
  font-size:clamp(1.6rem, 5vw, 2.4rem);
  font-weight:700; letter-spacing:-.02em;
  margin-bottom:6px; color:white;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.hero-sub {
  font-size:.85rem; color:rgba(255,255,255,.85);
  margin-bottom:20px; max-width:320px; margin-left:auto; margin-right:auto;
}
.hero-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.hero-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:11px 22px; border-radius:var(--rf);
  font-size:.85rem; font-weight:600; cursor:pointer;
  font-family:var(--font); border:none; transition:all .2s var(--ease);
}
.hero-btn-primary {
  background:white;
  color:#111827;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.hero-btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.hero-btn-secondary {
  background:rgba(255,255,255,.15); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3); color:white;
}
.hero-btn-secondary:hover { background:rgba(255,255,255,.25); }

/* ── ANNOUNCEMENT BAR ─────────────────────────────────────────── */
.announcement-bar {
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; padding:9px 40px 9px 16px;
  text-align:center; font-size:.78rem; font-weight:600;
  position:relative;
}
.ann-close {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:white; cursor:pointer; font-size:1rem;
}

/* ── SEARCH & FILTER BAR ──────────────────────────────────────── */
.filter-wrap {
  position:sticky; top:56px; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:10px 12px;
}
.filter-inner {
  max-width:600px; margin:0 auto;
  display:flex; flex-direction:column; gap:8px;
}
.search-box {
  position:relative;
}
.search-box i {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--t3); font-size:.85rem; pointer-events:none;
}
.search-input {
  width:100%; padding:9px 12px 9px 36px;
  background:rgba(255,255,255,.9); border:1px solid var(--border);
  border-radius:var(--rf); font-size:.85rem; font-family:var(--font);
  color:var(--t1); outline:none; transition:all .2s var(--ease);
}
.search-input:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-l); }
.search-input::placeholder { color:var(--t3); }

.filter-row { display:flex; gap:6px; align-items:center; overflow-x:auto; scrollbar-width:none; }
.filter-row::-webkit-scrollbar { display:none; }
.filter-tab {
  flex-shrink:0; padding:6px 14px; border-radius:var(--rf);
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  font-size:.75rem; font-weight:600; color:var(--t2);
  cursor:pointer; white-space:nowrap; transition:all .2s var(--ease);
}
.filter-tab:hover  { border-color:var(--acc); color:var(--acc-d); }
.filter-tab.active { background:var(--acc); border-color:var(--acc); color:white; }

.grid-toggle { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.grid-btn {
  width:28px; height:28px; border-radius:var(--r1);
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.7rem; color:var(--t3); transition:all .15s;
}
.grid-btn.active { background:var(--acc); border-color:var(--acc); color:white; }

/* ── RECENTLY UPLOADED ────────────────────────────────────────── */
#recentlyUploadedSection { padding:12px 12px 0; }
.recent-shelf {
  background:rgba(255,255,255,.5); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:var(--r3);
  padding:10px 12px; overflow:hidden;
}
.recent-row {
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px;
}
.recent-row::-webkit-scrollbar { display:none; }
/* recent-circle styles moved to bottom */

/* ── TOP 3 ────────────────────────────────────────────────────── */
#top3Section { padding:12px; }
.top3-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.top3-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); overflow:hidden; cursor:pointer;
  text-align:center; padding-bottom:10px;
  box-shadow:var(--sh-sm); transition:transform .2s var(--ease);
}
.top3-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }
.top3-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.top3-medal { font-size:1.2rem; padding:6px 0 2px; }
.top3-name  { font-size:.7rem; font-weight:600; color:var(--t1); padding:0 6px; }
.top3-likes { font-size:.65rem; color:var(--t3); margin-top:2px; }

/* ── CATALOGUE GRID ───────────────────────────────────────────── */
.catalogue-section { padding:12px; max-width:100%; }
.section-label {
  font-size:.7rem; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:8px;
}

.cake-grid { display:grid; gap:10px; }
.cake-grid.cols-1 { grid-template-columns:1fr; }
.cake-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.cake-grid.cols-3 { grid-template-columns:repeat(3,1fr); }

.cake-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r3); overflow:hidden; cursor:pointer;
  box-shadow:var(--sh-sm); transition:all .2s var(--ease);
  position:relative;
}
.cake-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); border-color:rgba(201,169,110,.3); }
.cake-card:active { transform:scale(.97); }
.cake-card.in-cart { border-color:var(--acc); border-width:2px; }
.cake-card.unavailable { opacity:.55; }

.cake-img {
  width:100%; aspect-ratio:1; overflow:hidden;
  background:#f0f2f5; position:relative;
}
.cake-img img { width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
.cake-num {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:2rem; font-weight:800; color:var(--t3);
}
.cake-badge {
  position:absolute; top:8px; left:8px;
  padding:3px 8px; border-radius:var(--rf);
  font-size:.6rem; font-weight:700; text-transform:uppercase;
}
.cake-badge.new     { background:var(--acc); color:white; }
.cake-badge.popular { background:rgba(201,169,110,.15); color:var(--acc-d); border:1px solid rgba(201,169,110,.3); }

.cake-info { padding:10px; }
.cake-name  { font-size:.82rem; font-weight:700; color:var(--t1); margin-bottom:3px; }
.cake-desc  { font-size:.72rem; color:var(--t3); margin-bottom:4px; line-height:1.4; }
.cake-price { font-size:.75rem; color:var(--acc-d); font-weight:600; margin-bottom:8px; }

/* Glass like/share buttons */
.cake-glass-btns {
  display:flex; gap:6px;
}
.cake-glass-btn {
  flex:1; padding:7px; border-radius:var(--r1);
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--t3); transition:all .15s var(--ease);
}
.cake-glass-btn:hover { background:rgba(255,255,255,.25); color:var(--t2); }
.cake-fav-btn.faved { color:#e11d48; }

.empty-state {
  text-align:center; padding:40px 20px; color:var(--t3);
}
.empty-state i { font-size:2rem; margin-bottom:10px; display:block; }

/* ── FEATURED SLIDER ──────────────────────────────────────────── */
#featuredSection { padding:12px; }
.feat-slider { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.feat-slider::-webkit-scrollbar { display:none; }
.feat-card {
  flex-shrink:0; width:140px; cursor:pointer;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); overflow:hidden;
  box-shadow:var(--sh-sm); transition:transform .2s var(--ease);
}
.feat-card:hover { transform:translateY(-2px); }
.feat-card-img { width:100%; aspect-ratio:1; overflow:hidden; background:#f0f2f5; }
.feat-card-img img { width:100%; height:100%; object-fit:cover; }
.feat-card-name  { font-size:.72rem; font-weight:600; color:var(--t1); padding:6px 8px 2px; }
.feat-card-price { font-size:.68rem; color:var(--acc-d); padding:0 8px 8px; }

/* ── FLAVOURS ─────────────────────────────────────────────────── */
.flavours-section { padding:16px 12px; }
.flavours-grid { display:flex; flex-wrap:wrap; gap:8px; }
.flavour-chip {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.8); border:1px solid var(--border);
  border-radius:var(--rf); padding:6px 12px;
  font-size:.78rem; font-weight:500; color:var(--t2);
  box-shadow:var(--sh-sm);
}
.flavour-em { font-size:1rem; }

/* ── HOW TO ORDER ─────────────────────────────────────────────── */
.how-section { padding:16px 12px; }
.how-steps { display:flex; flex-direction:column; gap:12px; }
.how-step {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px;
  box-shadow:var(--sh-sm);
}
.how-step-num {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700;
}
.how-step-title { font-size:.85rem; font-weight:700; color:var(--t1); margin-bottom:3px; }
.how-step-desc  { font-size:.78rem; color:var(--t2); line-height:1.5; }

/* ── REVIEWS ──────────────────────────────────────────────────── */
.reviews-section { padding:16px 12px; }
.reviews-grid { display:flex; flex-direction:column; gap:10px; }
.review-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r2); padding:14px;
  box-shadow:var(--sh-sm);
}
.review-stars { color:#f59e0b; font-size:.9rem; margin-bottom:6px; }
.review-text  { font-size:.82rem; color:var(--t2); line-height:1.6; margin-bottom:8px; font-style:italic; }
.review-name  { font-size:.72rem; color:var(--t3); font-weight:600; }

/* Review button */
.review-btn-wrap { text-align:center; margin-top:12px; }
.review-btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 22px; border-radius:var(--rf);
  background:rgba(255,255,255,.1); backdrop-filter:blur(10px);
  border:1px solid rgba(201,169,110,.3); color:var(--acc-d);
  font-size:.82rem; font-weight:600; cursor:pointer;
  font-family:var(--font); position:relative; overflow:hidden;
  transition:all .2s var(--ease);
  animation:reviewPulse 3s ease-in-out infinite;
}
.review-btn:hover { background:var(--acc-l); transform:translateY(-2px) scale(1.02); }
@keyframes reviewPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(201,169,110,.3); }
  50%      { box-shadow:0 0 0 8px rgba(201,169,110,0); }
}
#reviewHeartBurst { position:absolute; inset:0; pointer-events:none; }
.heart-particle {
  position:absolute; top:50%; left:50%;
  font-size:.7rem; color:#e11d48;
  animation:heartBurst .6s ease-out forwards;
  transform-origin:center;
}
@keyframes heartBurst {
  0%   { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(0) scale(1); opacity:1; }
  100% { transform:translate(-50%,-50%) rotate(var(--angle)) translateY(-30px) scale(0); opacity:0; }
}

/* ── CTA STRIP ────────────────────────────────────────────────── */
.cta-strip {
  margin:16px 12px; padding:20px;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  border-radius:var(--r3); text-align:center; color:white;
  box-shadow:0 4px 20px rgba(201,169,110,.35);
}
.cta-strip h3 { font-size:1.1rem; font-weight:700; margin-bottom:6px; font-family:'Garamond','Georgia',serif; }
.cta-strip p  { font-size:.82rem; opacity:.9; margin-bottom:14px; }
.cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:white; color:var(--acc-d);
  padding:10px 22px; border-radius:var(--rf);
  font-size:.85rem; font-weight:700; cursor:pointer;
  border:none; font-family:var(--font);
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  transition:all .2s var(--ease);
}
.cta-btn:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.2); }

/* ── FOOTER ───────────────────────────────────────────────────── */
.site-footer {
  text-align:center; padding:20px 16px;
  border-top:1px solid var(--border);
  color:var(--t3); font-size:.75rem;
}
.site-footer a { color:var(--acc-d); text-decoration:none; }
.footer-links { display:flex; justify-content:center; gap:16px; margin-bottom:8px; flex-wrap:wrap; }

/* ── STICKY CART ──────────────────────────────────────────────── */
.sticky-cart {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:150; display:none;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; border:none; border-radius:var(--rf);
  padding:12px 24px; font-size:.88rem; font-weight:700;
  cursor:pointer; font-family:var(--font);
  box-shadow:0 4px 20px rgba(201,169,110,.45);
  display:flex; align-items:center; gap:10px;
  transition:all .3s var(--ease);
  opacity:0; pointer-events:none;
}
.sticky-cart.visible { opacity:1; pointer-events:all; }
.sticky-cart-price { font-size:.78rem; opacity:.85; }

/* ── WHATSAPP FLOAT ───────────────────────────────────────────── */
.wa-float {
  position:fixed; bottom:80px; right:16px; z-index:150;
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
}
.wa-float-btn {
  display:flex; align-items:center; gap:8px;
  background:#25d366; color:white; border:none;
  padding:10px 16px; border-radius:var(--rf);
  font-size:.8rem; font-weight:600; cursor:pointer;
  font-family:var(--font); box-shadow:0 4px 16px rgba(37,211,102,.35);
  transition:all .2s var(--ease);
}
.wa-float-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(37,211,102,.45); }
.wa-dismiss {
  background:rgba(255,255,255,.8); border:1px solid var(--border);
  border-radius:var(--rf); padding:3px 10px;
  font-size:.68rem; color:var(--t3); cursor:pointer;
  font-family:var(--font); align-self:flex-end;
}

/* ── SCROLL TOP ───────────────────────────────────────────────── */
#scrollTopBtn {
  position:fixed; bottom:20px; right:16px; z-index:150;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.85); backdrop-filter:blur(12px);
  border:1px solid var(--border); color:var(--t2);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; font-size:.9rem;
  box-shadow:var(--sh-md); transition:all .2s var(--ease);
}
#scrollTopBtn:hover { background:var(--acc); color:white; border-color:var(--acc); }

/* ── TOAST ────────────────────────────────────────────────────── */
#toast {
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  z-index:9000; padding:10px 20px; border-radius:var(--rf);
  font-size:.8rem; font-weight:600; color:white;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
  white-space:nowrap; max-width:90vw;
}
#toast.show { opacity:1; }

/* ── MODALS ───────────────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:500;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease);
}
.modal-overlay.show { opacity:1; pointer-events:all; }

.modal-sheet {
  background:rgba(255,255,255,.96); backdrop-filter:blur(24px);
  border-radius:var(--r4) var(--r4) 0 0;
  width:100%; max-width:540px; max-height:90vh;
  overflow-y:auto; box-shadow:var(--sh-lg);
  animation:slideUp .3s var(--ease);
}
.modal-handle {
  width:36px; height:4px; background:var(--border);
  border-radius:2px; margin:10px auto 0;
}
.modal-header {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:.95rem; font-weight:700; color:var(--t1); }
.modal-close {
  background:none; border:none; color:var(--t3);
  cursor:pointer; font-size:1.2rem; padding:4px;
}
.modal-body { padding:16px; }

/* ── DETAIL MODAL ─────────────────────────────────────────────── */
#detailModal .modal-sheet { max-height:92vh; }
.detail-img {
  width:100%; aspect-ratio:4/3; overflow:hidden;
  background:#f0f2f5; border-radius:var(--r2); margin-bottom:12px;
  position:relative;
}
.detail-img img { width:100%; height:100%; object-fit:cover; display:block; }
#detailTitle { font-size:1.1rem; font-weight:700; color:var(--t1); margin-bottom:4px; }
#detailCode  { font-size:.7rem; color:var(--t3); margin-bottom:4px; }
#detailDesc  { font-size:.8rem; color:var(--t2); line-height:1.5; margin-bottom:8px; }
#detailExtraInfo { margin-bottom:10px; }
.extra-charge-tag {
  background:rgba(201,169,110,.12); border:1px solid rgba(201,169,110,.3);
  border-radius:6px; padding:2px 8px; font-size:.7rem; color:var(--acc-d);
  display:inline-block; margin:2px;
}

.step-title {
  display:flex; align-items:center; gap:8px;
  font-size:.8rem; font-weight:700; color:var(--t1);
  margin:14px 0 8px;
}
.step-title span {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:.7rem; font-weight:700;
}
.combo-hint {
  background:rgba(254,243,199,.8); border:1px solid rgba(253,230,138,.5);
  border-radius:var(--r1); padding:7px 10px;
  font-size:.72rem; color:#92400e; margin-bottom:8px;
}

/* Cake type cards */
.ct-grid-detail { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.ct-card-detail {
  background:rgba(255,255,255,.8); border:1.5px solid var(--border);
  border-radius:var(--r1); padding:10px 6px; cursor:pointer;
  text-align:center; transition:all .15s var(--ease);
}
.ct-card-detail:hover { border-color:rgba(201,169,110,.4); }
.ct-card-detail.sel {
  border-color:var(--acc);
  background:linear-gradient(135deg,rgba(201,169,110,.15),rgba(255,255,255,.9));
  box-shadow:0 0 0 2px var(--acc-l);
}
.ct-name-d  { font-size:.72rem; font-weight:600; color:var(--t1); }
.ct-price-d { font-size:.65rem; color:var(--t3); margin-top:2px; }

/* Filling grid */
.fl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.fl-btn {
  background:rgba(255,255,255,.8); border:1.5px solid var(--border);
  border-radius:var(--r1); padding:8px 4px; cursor:pointer;
  text-align:center; font-size:.7rem; font-weight:500; color:var(--t2);
  transition:all .15s var(--ease); line-height:1.3;
}
.fl-btn:hover { border-color:rgba(201,169,110,.4); background:rgba(255,255,255,.95); }
.fl-btn.sel {
  border-color:var(--acc);
  background:linear-gradient(135deg,rgba(201,169,110,.18),rgba(255,255,255,.9));
  color:var(--acc-d); font-weight:600;
  box-shadow:0 0 0 2px var(--acc-l);
}
.fl-em { font-size:.95rem; display:block; margin-bottom:2px; }
.fl-btn-name { font-size:.68rem; }
.sub-label { font-size:.72rem; font-weight:600; color:var(--t2); margin-bottom:6px; }

/* Size grid */
.sz-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.sz-btn {
  background:rgba(255,255,255,.8); border:1.5px solid var(--border);
  border-radius:var(--r1); padding:10px; cursor:pointer;
  text-align:center; transition:all .15s var(--ease);
}
.sz-btn:hover { border-color:rgba(201,169,110,.3); }
.sz-btn.sel {
  border-color:var(--acc);
  background:linear-gradient(135deg,rgba(201,169,110,.15),rgba(255,255,255,.9));
  box-shadow:0 0 0 2px var(--acc-l);
}
.sz-btn.min-sz { border-color:rgba(160,120,64,.35); }
.sz-lbl   { font-size:.8rem; font-weight:700; color:var(--t1); }
.sz-ppl   { font-size:.65rem; color:var(--t3); margin-top:1px; }
.sz-price { font-size:.72rem; color:var(--acc-d); font-weight:600; margin-top:3px; }
.sz-badge { font-size:.58rem; color:var(--acc-d); background:var(--acc-l); border:1px solid rgba(201,169,110,.25); border-radius:var(--rf); padding:1px 7px; margin-top:3px; display:inline-block; }
.show-more-btn {
  width:100%; margin-top:6px; background:rgba(255,255,255,.6);
  border:1.5px dashed rgba(0,0,0,.12); border-radius:var(--r1);
  padding:9px; font-size:.75rem; color:var(--t3);
  font-family:var(--font); cursor:pointer; transition:all .15s;
}
.show-more-btn:hover { border-color:var(--acc); color:var(--acc-d); }

.f-inp-d {
  width:100%; padding:10px 12px; background:rgba(255,255,255,.85);
  border:1px solid var(--border); border-radius:var(--r1);
  font-size:.85rem; font-family:var(--font); color:var(--t1);
  outline:none; transition:all .2s var(--ease);
}
.f-inp-d:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-l); }

.price-est {
  background:linear-gradient(135deg,rgba(201,169,110,.12),rgba(255,255,255,.6));
  border:1px solid rgba(201,169,110,.25); border-radius:var(--r2);
  padding:14px; margin-top:10px; text-align:center;
}
.price-big  { font-size:1.3rem; font-weight:700; color:var(--acc-d); }
.price-note { font-size:.72rem; color:var(--t3); margin-top:4px; }

.add-to-cart-btn {
  width:100%; margin-top:14px;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; border:none; padding:14px;
  border-radius:var(--rf); font-size:.9rem; font-weight:700;
  cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 16px rgba(201,169,110,.35);
  transition:all .2s var(--ease);
}
.add-to-cart-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(201,169,110,.45); }

/* ── CART MODAL ───────────────────────────────────────────────── */
.cart-item {
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.cart-item:last-child { border-bottom:none; }
.cart-item-img {
  width:56px; height:56px; border-radius:var(--r1);
  overflow:hidden; flex-shrink:0; background:#f0f2f5;
}
.cart-item-info { flex:1; min-width:0; }
.cart-item-name   { font-size:.82rem; font-weight:700; color:var(--t1); }
.cart-item-detail { font-size:.72rem; color:var(--t3); margin-top:2px; }
.cart-item-price  { font-size:.78rem; color:var(--acc-d); font-weight:600; margin-top:4px; }
.cart-item-remove {
  background:none; border:none; color:var(--t3);
  cursor:pointer; font-size:.85rem; padding:4px; flex-shrink:0;
}
.cart-total-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 0; border-top:1px solid var(--border); margin-top:4px;
  font-weight:700; color:var(--t1);
}
.cart-total-price { color:var(--acc-d); font-size:1rem; }
.cart-actions { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.btn-proceed {
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; border:none; padding:13px;
  border-radius:var(--rf); font-size:.88rem; font-weight:700;
  cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 16px rgba(201,169,110,.35);
}
.btn-continue {
  background:rgba(255,255,255,.8); border:1px solid var(--border);
  color:var(--t2); padding:11px; border-radius:var(--rf);
  font-size:.85rem; font-weight:500; cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.empty-cart { text-align:center; padding:30px; color:var(--t3); }
.empty-cart i { font-size:2rem; margin-bottom:10px; display:block; }

/* ── AUTH / PROFILE ───────────────────────────────────────────── */
.auth-tabs { display:flex; gap:6px; margin-bottom:14px; }
.auth-tab {
  flex:1; padding:9px; border-radius:var(--r1);
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  font-size:.82rem; font-weight:600; color:var(--t2);
  cursor:pointer; font-family:var(--font); transition:all .2s;
}
.auth-tab.active { background:var(--acc); border-color:var(--acc); color:white; }
.auth-input {
  width:100%; padding:10px 12px; margin-bottom:10px;
  background:rgba(255,255,255,.85); border:1px solid var(--border);
  border-radius:var(--r1); font-size:.85rem; font-family:var(--font);
  color:var(--t1); outline:none; transition:all .2s;
}
.auth-input:focus { border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-l); }
.auth-btn {
  width:100%; padding:12px; background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; border:none; border-radius:var(--rf);
  font-size:.88rem; font-weight:700; cursor:pointer; font-family:var(--font);
}
.profile-avatar {
  width:60px; height:60px; border-radius:50%; margin:0 auto 10px;
  background:var(--acc-l); border:2px solid rgba(201,169,110,.3);
  display:flex; align-items:center; justify-content:center;
}
.profile-name  { font-size:1rem; font-weight:700; color:var(--t1); }
.profile-email { font-size:.78rem; color:var(--t3); margin-top:2px; }
.logout-btn {
  width:100%; padding:11px; margin-top:14px;
  background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.2);
  color:var(--red); border-radius:var(--rf);
  font-size:.85rem; font-weight:600; cursor:pointer; font-family:var(--font);
  display:flex; align-items:center; justify-content:center; gap:8px;
}

/* ── WELCOME POPUP ────────────────────────────────────────────── */
#welcomePopup {
  position:fixed; inset:0; z-index:800;
  background:rgba(0,0,0,.5); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.welcome-box {
  background:rgba(255,255,255,.96); backdrop-filter:blur(24px);
  border-radius:var(--r4); padding:28px 20px;
  max-width:360px; width:100%; text-align:center;
  box-shadow:var(--sh-lg); animation:popIn .3s var(--ease);
}
.welcome-logo { width:72px; height:72px; border-radius:50%; margin:0 auto 14px; overflow:hidden; border:2px solid rgba(201,169,110,.3); }
.welcome-logo img { width:100%; height:100%; object-fit:cover; }
.welcome-title { font-size:1.2rem; font-weight:700; color:var(--t1); margin-bottom:6px; font-family:'Garamond','Georgia',serif; }
.welcome-sub   { font-size:.82rem; color:var(--t2); line-height:1.6; margin-bottom:16px; }
.welcome-btn {
  width:100%; padding:12px; background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; border:none; border-radius:var(--rf);
  font-size:.9rem; font-weight:700; cursor:pointer; font-family:var(--font);
  margin-bottom:10px;
}
.welcome-check { display:flex; align-items:center; gap:8px; justify-content:center; font-size:.75rem; color:var(--t3); cursor:pointer; }

/* ── GALLERY MODE ─────────────────────────────────────────────── */
.photo-gallery-grid {
  display:none;
  grid-template-columns:repeat(3,1fr);
  gap:2px; padding:2px;
}
.photo-gallery-grid.active { display:grid; }
.gallery-photo-cell { aspect-ratio:1; overflow:hidden; cursor:pointer; }
.gallery-photo-cell img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.gallery-photo-cell:hover img { transform:scale(1.05); }
.gallery-back-btn {
  display:none; position:fixed; top:64px; left:12px; z-index:200;
  background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border:1px solid var(--border); border-radius:var(--rf);
  padding:7px 14px; font-size:.78rem; font-weight:600; color:var(--t2);
  cursor:pointer; box-shadow:var(--sh-sm);
}
.gallery-back-btn.visible { display:flex; align-items:center; gap:6px; }

/* ── SCROLL REVEAL ────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (min-width:480px) {
  .cake-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
  .cake-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
  .photo-gallery-grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:768px) {
  .catalogue-section { max-width:700px; margin:0 auto; }
  .filter-inner { max-width:700px; }
  .cake-grid.cols-3 { grid-template-columns:repeat(4,1fr); }
  .photo-gallery-grid { grid-template-columns:repeat(5,1fr); }
  .top3-grid { grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px) {
  .catalogue-section { max-width:900px; }
  .filter-inner { max-width:900px; }
  .cake-grid.cols-2 { grid-template-columns:repeat(3,1fr); }
  .cake-grid.cols-3 { grid-template-columns:repeat(4,1fr); }
  .photo-gallery-grid { grid-template-columns:repeat(6,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.12); border-radius:2px; }

/* ── BRAND SUBTITLE (Coimbra) ─────────────────────────────────── */
.brand-text { display:flex; flex-direction:column; line-height:1.1; }
.brand-name { font-size:.92rem; font-weight:700; color:var(--t1); font-family:'Garamond','Georgia',serif; letter-spacing:-.01em; }
.brand-city { font-size:.6rem; color:var(--t3); font-weight:500; letter-spacing:.04em; text-transform:uppercase; }

/* ── HERO FLIP BUTTON (24h / 5h express) ─────────────────────── */

/* ── FILTER BAR RIGHT GROUP ───────────────────────────────────── */
.filter-right { display:flex; align-items:center; gap:6px; margin-left:auto; flex-shrink:0; }
.gallery-filter-btn {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:var(--rf);
  background:rgba(255,255,255,.7); border:1px solid var(--border);
  font-size:.73rem; font-weight:600; color:var(--t2);
  cursor:pointer; white-space:nowrap; transition:all .2s var(--ease);
  font-family:var(--font);
}
.gallery-filter-btn:hover { border-color:var(--acc); color:var(--acc-d); }
.gallery-filter-btn.active { background:var(--acc); border-color:var(--acc); color:white; }

/* ── PRODUCT DESCRIPTION CLAMP + READ MORE ────────────────────── */
.cake-desc-wrap { margin-bottom:6px; }
.cake-desc-clamp {
  font-size:.72rem; color:var(--t3); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; transition:all .3s ease;
}
.cake-desc-clamp.cake-desc-expanded {
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
.read-more-btn {
  background:none; border:none; color:var(--acc-d);
  font-size:.68rem; font-weight:600; cursor:pointer;
  font-family:var(--font); padding:0; margin-top:2px;
  text-decoration:underline; text-underline-offset:2px;
}

/* ── TOP 3 RANK BADGE (hashtag style) ────────────────────────── */
.top3-rank-badge {
  font-size:.75rem; font-weight:800; color:var(--acc-d);
  padding:4px 0 2px; letter-spacing:-.01em;
}

/* ── RECENTLY UPLOADED — smoother animation ───────────────────── */
.recent-circle {
  flex-shrink:0; cursor:pointer; text-align:center;
  animation:gentleFloat 4s ease-in-out infinite;
}
/* gentleFloat replaced by waveFloat */
.recent-circle img {
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(201,169,110,.3);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  transition:transform .2s var(--ease);
}
.recent-circle:hover img { transform:scale(1.1); }
.recent-label { font-size:.6rem; color:var(--t3); margin-top:4px; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── WHATSAPP FLOAT — fixed layout ───────────────────────────── */
.wa-float {
  position:fixed; bottom:80px; right:16px; z-index:150;
}
.wa-float-inner {
  display:flex; align-items:center; gap:0;
  background:#25d366; border-radius:var(--rf);
  box-shadow:0 4px 16px rgba(37,211,102,.35);
  overflow:hidden;
}
.wa-float-btn {
  display:flex; align-items:center; gap:8px;
  background:none; color:white; border:none;
  padding:10px 14px; font-size:.8rem; font-weight:600;
  cursor:pointer; font-family:var(--font);
  border-right:1px solid rgba(255,255,255,.2);
}
.wa-dismiss-x {
  background:none; border:none; color:rgba(255,255,255,.8);
  padding:10px 12px; cursor:pointer; font-size:.9rem;
  font-family:var(--font); line-height:1;
  transition:color .15s;
}
.wa-dismiss-x:hover { color:white; }

/* ── STICKY CART HIDDEN ───────────────────────────────────────── */
.sticky-cart { display:none !important; }

/* ── GALLERY FILTER BTN ACTIVE STATE ─────────────────────────── */
body.gallery-mode .gallery-filter-btn { background:var(--acc); border-color:var(--acc); color:white; }

/* ── GRID TOGGLE HIDDEN ───────────────────────────────────────── */
.grid-toggle { display:none !important; }

/* ── FILTER BAR LAYOUT: search between accessories & gallery ──── */
.filter-row {
  display:flex; align-items:center; gap:6px;
  overflow-x:visible; flex-wrap:nowrap;
}
.filter-row .search-box {
  flex:1; min-width:80px; max-width:200px;
}
.filter-row .search-input {
  width:100%; padding:6px 10px 6px 30px;
  font-size:.78rem;
}
.filter-row .search-box i {
  font-size:.75rem;
}
.filter-right {
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}

/* ── WAVE ANIMATION for recently uploaded ─────────────────────── */
@keyframes waveFloat {
  0%   { transform:translateY(0px) rotate(-2deg); }
  25%  { transform:translateY(-8px) rotate(1deg); }
  50%  { transform:translateY(-4px) rotate(-1deg); }
  75%  { transform:translateY(-10px) rotate(2deg); }
  100% { transform:translateY(0px) rotate(-2deg); }
}
.recent-circle {
  flex-shrink:0; cursor:pointer; text-align:center;
  animation:waveFloat 3.5s ease-in-out infinite;
}
.recent-circle:nth-child(1) { animation-delay:0s; }
.recent-circle:nth-child(2) { animation-delay:.4s; }
.recent-circle:nth-child(3) { animation-delay:.8s; }
.recent-circle:nth-child(4) { animation-delay:1.2s; }
.recent-circle:nth-child(5) { animation-delay:1.6s; }

/* ── PROFILE MODAL — new style ────────────────────────────────── */
.profile-modal-inner {
  display:flex; flex-direction:column; gap:0;
}
.profile-auth-section {
  padding:4px 0 16px;
}
.profile-staff-btn {
  width:100%; padding:12px;
  background:#f3f4f6; border:1px solid #e5e7eb;
  border-radius:var(--rf); color:#6b7280;
  font-size:.82rem; font-weight:600; cursor:pointer;
  font-family:var(--font); margin-top:8px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:all .2s var(--ease);
}
.profile-staff-btn:hover { background:#e5e7eb; color:#374151; }
.profile-staff-btn i { font-size:.78rem; }

/* ── FONT: Hero title & brand name — bold modern sans-serif ──── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;800;900&display=swap');

.hero-title {
  font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
}
.brand-name {
  font-family:'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight:700 !important;
}

  42%,58%  { opacity:0; transform:rotateX(-90deg); }
  65%,95%  { opacity:0; transform:rotateX(-90deg); }
  100%     { opacity:1; transform:rotateX(0deg); }
}

  42%,58%  { opacity:1; transform:rotateX(0deg); }
  65%,95%  { opacity:1; transform:rotateX(0deg); }
  96%,100% { opacity:0; transform:rotateX(90deg); }
}

/* ── RECENTLY UPLOADED: much slower wave ─────────────────────── */
@keyframes waveFloatSlow {
  0%   { transform:translateY(0px) rotate(-1deg); }
  30%  { transform:translateY(-5px) rotate(.5deg); }
  60%  { transform:translateY(-2px) rotate(-1deg); }
  80%  { transform:translateY(-7px) rotate(1deg); }
  100% { transform:translateY(0px) rotate(-1deg); }
}
.recent-circle { animation:waveFloatSlow 5s ease-in-out infinite !important; }
.recent-circle:nth-child(1) { animation-delay:0s !important; }
.recent-circle:nth-child(2) { animation-delay:.8s !important; }
.recent-circle:nth-child(3) { animation-delay:1.6s !important; }
.recent-circle:nth-child(4) { animation-delay:2.4s !important; }
.recent-circle:nth-child(5) { animation-delay:3.2s !important; }

/* ── TOP 3 RANK BADGE: soft light grey ───────────────────────── */
.top3-rank-badge {
  font-size:.72rem; font-weight:700;
  color:#D1D5DB !important;
  padding:4px 0 2px; letter-spacing:.02em;
}
.top3-likes { color:#D1D5DB !important; font-size:.65rem; }
.top3-name  { font-size:.72rem; font-weight:600; color:#6B7280; padding:0 6px; }

/* ── PRODUCT CARD CLICK ANIMATION ────────────────────────────── */
.cake-card {
  transition:all .25s cubic-bezier(.4,0,.2,1) !important;
}
.cake-card:active {
  transform:scale(.96) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}

/* ── DETAIL MODAL: slide up smoothly ─────────────────────────── */
@keyframes slideUpSmooth {
  from { transform:translateY(40px); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}
#detailModal .modal-sheet {
  animation:slideUpSmooth .35s cubic-bezier(.34,1.1,.64,1) !important;
}
#cartModal .modal-sheet,
#profileModal .modal-sheet {
  animation:slideUpSmooth .3s cubic-bezier(.34,1.1,.64,1) !important;
}

/* ── SMOOTH SCROLLING ─────────────────────────────────────────── */
html { scroll-behavior:smooth !important; }
* { -webkit-overflow-scrolling:touch; }
.filter-row, .recent-row, .feat-slider {
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

/* ── REMOVE SPONGE FILTER TAB ─────────────────────────────────── */
.filter-tab-sponge { display:none !important; }

/* ── ALL ANIMATIONS SLOWER ────────────────────────────────────── */
.hero-badge { animation-duration:4s !important; }
.hero-badge .fa-star { animation-duration:6s !important; }
@keyframes badgeGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.0); background:rgba(255,255,255,.15); }
  50%      { box-shadow:0 0 14px 4px rgba(255,255,255,.15); background:rgba(255,255,255,.2); }
}

/* ── TOP 3 CARD: rounded image corners ───────────────────────── */
.top3-card img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:var(--r2);
  display:block;
}
.top3-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--r3);
  overflow:hidden;
  cursor:pointer;
  text-align:center;
  padding:8px 8px 10px;
  box-shadow:var(--sh-sm);
  transition:transform .2s var(--ease);
}
.top3-card:hover { transform:translateY(-3px); box-shadow:var(--sh-md); }

/* ── ALLERGENS MODAL: proper card grid ───────────────────────── */
#allergensList {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.allergen-card {
  background:rgba(255,255,255,.85);
  border:1px solid var(--border);
  border-radius:var(--r2);
  padding:12px 10px;
  text-align:center;
  box-shadow:var(--sh-sm);
  transition:transform .15s var(--ease);
}
.allergen-card:hover { transform:translateY(-2px); box-shadow:var(--sh-md); }
.allergen-icon {
  font-size:1.6rem;
  margin-bottom:6px;
  display:block;
}
.allergen-name {
  font-size:.8rem;
  font-weight:700;
  color:var(--t1);
  margin-bottom:3px;
}
.allergen-desc {
  font-size:.7rem;
  color:var(--t3);
  line-height:1.4;
}

/* Front visible by default */

/* Auto crossfade every 10s — simple opacity only, no transforms */

  50%,92% { opacity:0; }
  100%    { opacity:1; }
}

  50%,92% { opacity:1; }
  100%    { opacity:0; }
}
.hero-btn-flip 
.hero-btn-flip 

/* Manual toggle via .flipped class */

.welcome-info-list {
  text-align:left;
  margin-bottom:16px;
  display:flex;
  flex-direction:column;
  gap:0;
}
.welcome-info-item {
  font-size:.8rem;
  color:var(--t2);
  line-height:1.5;
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,.05);
}
.welcome-info-item:last-child { border-bottom:none; }
.welcome-info-item strong { color:var(--t1); }
.welcome-sub { display:none; } /* hide old sub if still present */

/* ══════════════════════════════════════════════════════════════
   24h / 5h FLIP BUTTON — pure CSS, no JS conflicts
   ══════════════════════════════════════════════════════════════ */
.hero-btn-flip {
  position:relative;
  overflow:hidden;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);
  color:white;
  padding:11px 22px;
  border-radius:9999px;
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  min-width:148px;
  height:42px;
}
.hero-btn-flip:hover {
  background:rgba(255,255,255,.22);
}
.flip-front,
.flip-back {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:opacity .8s ease;
}
.flip-front {
  animation:bismiShowFront 12s ease-in-out infinite;
}
.flip-back {
  animation:bismiShowBack 12s ease-in-out infinite;
}

  50%,90% { opacity:0; }
  100%    { opacity:1; }
}

  50%,90% { opacity:1; }
  100%    { opacity:0; }
}

/* ══════════════════════════════════════════════════════════════
   BELOW-HERO REDESIGN — Glassmorphism + Minimalist
   ══════════════════════════════════════════════════════════════ */

/* ── FILTER BAR ───────────────────────────────────────────────── */
.filter-wrap {
  position:sticky; top:56px; z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(255,255,255,.5);
  padding:10px 16px;
  box-shadow:0 4px 24px rgba(0,0,0,.04);
}
.filter-inner { max-width:640px; margin:0 auto; }
.filter-row {
  display:flex; align-items:center; gap:6px;
  overflow-x:auto; scrollbar-width:none;
}
.filter-row::-webkit-scrollbar { display:none; }
.filter-tab {
  flex-shrink:0; padding:7px 16px; border-radius:9999px;
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.07);
  font-size:.75rem; font-weight:600; color:#6B7280;
  cursor:pointer; white-space:nowrap;
  transition:all .2s ease;
  backdrop-filter:blur(8px);
}
.filter-tab:hover { background:rgba(255,255,255,.9); color:#111; }
.filter-tab.active {
  background:linear-gradient(135deg,#111,#333);
  border-color:transparent; color:white;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.search-box { position:relative; flex:1; min-width:80px; }
.search-box i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:#9CA3AF; font-size:.78rem; pointer-events:none; }
.search-input {
  width:100%; padding:8px 12px 8px 30px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.07); border-radius:9999px;
  font-size:.78rem; font-family:inherit; color:#111;
  outline:none; transition:all .2s;
}
.search-input:focus { background:rgba(255,255,255,.95); border-color:rgba(0,0,0,.15); box-shadow:0 0 0 3px rgba(0,0,0,.05); }
.search-input::placeholder { color:#9CA3AF; }
.filter-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.gallery-filter-btn {
  display:flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:9999px;
  background:rgba(255,255,255,.6); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,.07);
  font-size:.73rem; font-weight:600; color:#6B7280;
  cursor:pointer; white-space:nowrap; transition:all .2s;
  font-family:inherit;
}
.gallery-filter-btn:hover { background:rgba(255,255,255,.9); color:#111; }
.gallery-filter-btn.active { background:#111; color:white; border-color:transparent; }

/* ── SECTION WRAPPER ──────────────────────────────────────────── */
.section-wrap { padding:20px 16px 0; max-width:640px; margin:0 auto; }
.section-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.section-heading { font-size:1rem; font-weight:800; color:#111; letter-spacing:-.02em; }
.section-sub { font-size:.72rem; color:#9CA3AF; margin-top:2px; }
.section-see-all { font-size:.72rem; font-weight:600; color:#9CA3AF; cursor:pointer; text-decoration:none; transition:color .2s; }
.section-see-all:hover { color:#111; }

/* ── MOST LOVED — horizontal scroll cards ─────────────────────── */
#top3Section { padding:20px 0 0; }
.most-loved-wrap { padding:0 16px; max-width:640px; margin:0 auto; }
.most-loved-scroll {
  display:flex; gap:12px; overflow-x:auto; scrollbar-width:none;
  padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.most-loved-scroll::-webkit-scrollbar { display:none; }
.loved-card {
  flex-shrink:0; width:160px; cursor:pointer;
  background:rgba(255,255,255,.75); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:20px; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
  transition:all .25s ease;
}
.loved-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,.1); }
.loved-card:active { transform:scale(.97); }
.loved-card-img { width:100%; aspect-ratio:1; overflow:hidden; background:#f5f5f5; }
.loved-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.loved-card:hover .loved-card-img img { transform:scale(1.05); }
.loved-card-info { padding:10px 12px; }
.loved-card-rank { font-size:.62rem; font-weight:700; color:#9CA3AF; letter-spacing:.04em; margin-bottom:3px; }
.loved-card-name { font-size:.78rem; font-weight:700; color:#111; line-height:1.3; }
.loved-card-likes { font-size:.65rem; color:#9CA3AF; margin-top:4px; display:flex; align-items:center; gap:3px; }

/* ── NEW ARRIVALS — 2 column grid ─────────────────────────────── */
#recentlyUploadedSection { padding:20px 0 0; }
.new-arrivals-wrap { padding:0 16px; max-width:640px; margin:0 auto; }
.new-arrivals-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.arrival-card {
  cursor:pointer;
  background:rgba(255,255,255,.75); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:20px; overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
  transition:all .25s ease;
}
.arrival-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.1); }
.arrival-card:active { transform:scale(.97); }
.arrival-card-img { width:100%; aspect-ratio:1; overflow:hidden; background:#f5f5f5; }
.arrival-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.arrival-card:hover .arrival-card-img img { transform:scale(1.05); }
.arrival-card-info { padding:10px 12px; }
.arrival-card-tag { font-size:.6rem; font-weight:700; color:#9CA3AF; letter-spacing:.05em; text-transform:uppercase; margin-bottom:3px; }
.arrival-card-name { font-size:.78rem; font-weight:700; color:#111; line-height:1.3; }
.arrival-card-price { font-size:.7rem; color:#9CA3AF; margin-top:4px; }

/* ── CUSTOM ORDERS BANNER ─────────────────────────────────────── */
.custom-orders-banner {
  margin:20px 16px 0; max-width:608px; margin-left:auto; margin-right:auto;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,.65));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:24px; padding:20px;
  box-shadow:0 4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
  display:flex; align-items:center; gap:16px;
  overflow:hidden; position:relative;
}
.custom-orders-text { flex:1; }
.custom-orders-title { font-size:.95rem; font-weight:800; color:#111; margin-bottom:4px; letter-spacing:-.01em; }
.custom-orders-sub { font-size:.75rem; color:#6B7280; line-height:1.5; margin-bottom:12px; }
.custom-orders-btn {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#111,#333);
  color:white; border:none; padding:9px 18px;
  border-radius:9999px; font-size:.78rem; font-weight:700;
  cursor:pointer; font-family:inherit;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
  transition:all .2s ease;
}
.custom-orders-btn:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.25); }
.custom-orders-img {
  width:90px; height:90px; border-radius:16px; overflow:hidden;
  flex-shrink:0; background:#f5f5f5;
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.custom-orders-img img { width:100%; height:100%; object-fit:cover; }

/* ── CATALOGUE GRID ───────────────────────────────────────────── */
.catalogue-section { padding:20px 16px 0; max-width:640px; margin:0 auto; }
.cake-grid { display:grid; gap:12px; }
.cake-grid.cols-1 { grid-template-columns:1fr; }
.cake-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.cake-grid.cols-3 { grid-template-columns:repeat(3,1fr); }

.cake-card {
  background:rgba(255,255,255,.75); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:20px; overflow:hidden; cursor:pointer;
  box-shadow:0 4px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
  transition:all .25s ease; position:relative;
}
.cake-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,.1); }
.cake-card:active { transform:scale(.97); }
.cake-card.in-cart { border-color:rgba(201,169,110,.5); border-width:1.5px; }
.cake-card.unavailable { opacity:.5; }

.cake-img { width:100%; aspect-ratio:1; overflow:hidden; background:#f5f5f5; position:relative; }
.cake-img img { width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; transition:transform .4s ease; }
.cake-card:hover .cake-img img { transform:scale(1.05); }
.cake-num { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:#D1D5DB; }

.cake-badge {
  position:absolute; top:10px; left:10px;
  padding:3px 10px; border-radius:9999px;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  backdrop-filter:blur(8px);
}
.cake-badge.new { background:rgba(17,24,39,.85); color:white; }
.cake-badge.popular { background:rgba(255,255,255,.85); color:#111; border:1px solid rgba(0,0,0,.08); }

.cake-info { padding:12px; }
.cake-name { font-size:.82rem; font-weight:700; color:#111; margin-bottom:2px; }
.cake-desc-wrap { margin-bottom:6px; }
.cake-desc-clamp { font-size:.7rem; color:#9CA3AF; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cake-desc-clamp.cake-desc-expanded { display:block; -webkit-line-clamp:unset; overflow:visible; }
.read-more-btn { background:none; border:none; color:#9CA3AF; font-size:.65rem; font-weight:600; cursor:pointer; font-family:inherit; padding:0; text-decoration:underline; text-underline-offset:2px; }
.cake-price { font-size:.72rem; color:#6B7280; font-weight:600; margin-bottom:8px; }

.cake-glass-btns { display:flex; gap:6px; }
.cake-glass-btn {
  flex:1; padding:8px; border-radius:12px;
  background:rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.06);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:#9CA3AF; transition:all .15s ease;
}
.cake-glass-btn:hover { background:rgba(0,0,0,.08); color:#6B7280; }
.cake-fav-btn.faved { color:#e11d48; background:rgba(225,29,72,.06); }

/* ── GALLERY SECTION ──────────────────────────────────────────── */
.gallery-preview-section { padding:20px 16px 0; max-width:640px; margin:0 auto; }
.gallery-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.gallery-preview-cell {
  aspect-ratio:1; border-radius:16px; overflow:hidden;
  background:#f5f5f5; cursor:pointer;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:transform .2s ease;
}
.gallery-preview-cell:hover { transform:scale(1.03); }
.gallery-preview-cell img { width:100%; height:100%; object-fit:cover; }

/* ── HOW TO ORDER ─────────────────────────────────────────────── */
.how-section { padding:20px 16px 0; max-width:640px; margin:0 auto; }
.how-steps { display:flex; flex-direction:column; gap:10px; }
.how-step {
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.75); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px; padding:14px 16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
.how-step-num {
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#111,#333);
  color:white; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.how-step-title { font-size:.85rem; font-weight:700; color:#111; margin-bottom:3px; }
.how-step-desc { font-size:.75rem; color:#6B7280; line-height:1.5; }

/* ── REVIEWS ──────────────────────────────────────────────────── */
.reviews-section { padding:20px 16px 0; max-width:640px; margin:0 auto; }
.reviews-grid { display:flex; flex-direction:column; gap:10px; }
.review-card {
  background:rgba(255,255,255,.75); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.8);
  border-radius:18px; padding:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.9);
}
.review-stars { color:#f59e0b; font-size:.85rem; margin-bottom:8px; }
.review-text { font-size:.8rem; color:#374151; line-height:1.6; margin-bottom:8px; font-style:italic; }
.review-name { font-size:.7rem; color:#9CA3AF; font-weight:600; }

/* ── CTA STRIP ────────────────────────────────────────────────── */
.cta-strip {
  margin:20px 16px 0; max-width:608px; margin-left:auto; margin-right:auto;
  background:linear-gradient(135deg,#111 0%,#333 100%);
  border-radius:24px; padding:24px 20px; text-align:center; color:white;
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}
.cta-strip h3 { font-size:1.1rem; font-weight:800; margin-bottom:6px; letter-spacing:-.02em; }
.cta-strip p { font-size:.8rem; opacity:.7; margin-bottom:16px; }
.cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:white; color:#111;
  padding:11px 24px; border-radius:9999px;
  font-size:.85rem; font-weight:700; cursor:pointer;
  border:none; font-family:inherit;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:all .2s ease;
}
.cta-btn:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(0,0,0,.25); }

/* ── FOOTER ───────────────────────────────────────────────────── */
.site-footer {
  text-align:center; padding:24px 16px 32px;
  color:#9CA3AF; font-size:.72rem; margin-top:24px;
  border-top:1px solid rgba(0,0,0,.06);
}
.footer-links { display:flex; justify-content:center; gap:20px; margin-bottom:10px; flex-wrap:wrap; }
.footer-links a { color:#6B7280; text-decoration:none; font-weight:500; transition:color .2s; }
.footer-links a:hover { color:#111; }

/* ── BOTTOM INSTALL PROMPT ────────────────────────────────────── */
.bottom-install-prompt {
  margin:20px 16px 0; max-width:608px; margin-left:auto; margin-right:auto;
  background:rgba(255,255,255,.8); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.9);
}
.bottom-install-text { flex:1; }
.bottom-install-title { font-size:.82rem; font-weight:700; color:#111; }
.bottom-install-sub { font-size:.7rem; color:#9CA3AF; margin-top:1px; }
.bottom-install-btn {
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  color:white; border:none; padding:9px 18px;
  border-radius:9999px; font-size:.75rem; font-weight:700;
  cursor:pointer; font-family:inherit; flex-shrink:0;
  box-shadow:0 4px 12px rgba(201,169,110,.3);
}

/* ── BOTTOM NAV BAR ───────────────────────────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:rgba(255,255,255,.85); backdrop-filter:blur(24px);
  border-top:1px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 0 max(8px, env(safe-area-inset-bottom));
  box-shadow:0 -4px 24px rgba(0,0,0,.06);
}
.bottom-nav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; padding:4px 16px; border-radius:12px;
  transition:all .2s ease; color:#9CA3AF; font-size:.6rem; font-weight:600;
  background:none; border:none; font-family:inherit;
}
.bottom-nav-item i { font-size:1.1rem; transition:color .2s; }
.bottom-nav-item.active { color:#111; }
.bottom-nav-item.active i { color:#111; }
.bottom-nav-item:hover { color:#6B7280; }

/* Add bottom padding so content isn't hidden behind nav */
body { padding-bottom:70px; }

/* ── EMPTY STATE ──────────────────────────────────────────────── */
.empty-state { text-align:center; padding:40px 20px; color:#9CA3AF; grid-column:1/-1; }
.empty-state i { font-size:2rem; margin-bottom:10px; display:block; }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(min-width:640px){
  .section-wrap,.most-loved-wrap,.new-arrivals-wrap,
  .catalogue-section,.how-section,.reviews-section,
  .gallery-preview-section { padding-left:24px; padding-right:24px; }
  .custom-orders-banner,.cta-strip,.bottom-install-prompt { margin-left:24px; margin-right:24px; }
}

/* ── BOTTOM NAV — refined ─────────────────────────────────────── */
.bottom-nav {
  position:fixed !important;
  bottom:0 !important; left:0 !important; right:0 !important;
  z-index:300 !important;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(28px) !important;
  -webkit-backdrop-filter:blur(28px) !important;
  border-top:1px solid rgba(0,0,0,.06) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-around !important;
  padding:10px 0 !important;
  padding-bottom:max(10px, env(safe-area-inset-bottom)) !important;
  box-shadow:0 -2px 20px rgba(0,0,0,.06) !important;
  height:60px !important;
}
.bottom-nav-item {
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  cursor:pointer !important;
  padding:4px 20px !important;
  border-radius:14px !important;
  transition:all .2s ease !important;
  color:#9CA3AF !important;
  font-size:.58rem !important;
  font-weight:600 !important;
  background:none !important;
  border:none !important;
  font-family:inherit !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
}
.bottom-nav-item i {
  font-size:1.15rem !important;
  transition:all .2s ease !important;
}
.bottom-nav-item.active {
  color:#111 !important;
}
.bottom-nav-item.active i {
  color:#111 !important;
  transform:translateY(-1px) !important;
}
.bottom-nav-item:hover {
  color:#6B7280 !important;
}

/* Ensure body has enough bottom padding for nav */
body { padding-bottom:72px !important; }

/* WA float sits above bottom nav */
.wa-float { bottom:76px !important; }
#scrollTopBtn { bottom:76px !important; }

/* ══════════════════════════════════════════════════════════════
   BOTTOM SHEET LAYOUT — content slides up over hero with
   large rounded top corners, exactly like the reference image
   ══════════════════════════════════════════════════════════════ */

/* Hero shrinks to show just the top portion */
.hero-section {
  min-height:220px !important;
  padding-bottom:60px !important; /* space for sheet overlap */
}

/* The main content sheet */
.content-sheet {
  position:relative;
  z-index:10;
  background:#FAFAFA;
  border-radius:28px 28px 0 0;
  margin-top:-40px; /* overlap the hero */
  padding-top:8px;
  min-height:100vh;
  box-shadow:0 -4px 32px rgba(0,0,0,.08);
}

/* Drag handle at top of sheet */
.sheet-handle {
  width:36px; height:4px;
  background:rgba(0,0,0,.1);
  border-radius:2px;
  margin:8px auto 12px;
}

/* Filter bar inside the sheet — no sticky, just inline */
.filter-wrap {
  position:relative !important;
  top:auto !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:none !important;
  box-shadow:none !important;
  padding:0 16px 12px !important;
}

/* Filter tabs — match reference image style */
.filter-tab {
  padding:8px 18px !important;
  border-radius:9999px !important;
  background:rgba(255,255,255,.9) !important;
  border:1px solid rgba(0,0,0,.08) !important;
  font-size:.78rem !important;
  font-weight:600 !important;
  color:#6B7280 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}
.filter-tab.active {
  background:linear-gradient(135deg,#C9A96E,#A07840) !important;
  border-color:transparent !important;
  color:white !important;
  box-shadow:0 4px 14px rgba(201,169,110,.35) !important;
}

/* Section headings inside sheet */
.section-heading { font-size:1rem !important; font-weight:800 !important; color:#111 !important; }
.section-sub { font-size:.72rem !important; color:#9CA3AF !important; }

/* Cards inside sheet get white glass look */
.loved-card, .arrival-card, .cake-card {
  background:white !important;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 2px 16px rgba(0,0,0,.06) !important;
}

/* ══════════════════════════════════════════════════════════════
   SEARCH PANEL — full screen with popular + recent searches
   ══════════════════════════════════════════════════════════════ */
.search-panel {
  position:fixed; inset:0; z-index:500;
  background:#FAFAFA;
  display:none; flex-direction:column;
  animation:slideUpSmooth .25s ease;
}
.search-panel.open { display:flex; }
.search-panel-header {
  padding:16px 16px 12px;
  background:white;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex; align-items:center; gap:10px;
}
.search-panel-input-wrap {
  flex:1; position:relative;
}
.search-panel-input-wrap i {
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#9CA3AF; font-size:.85rem; pointer-events:none;
}
.search-panel-input {
  width:100%; padding:11px 12px 11px 36px;
  background:#F3F4F6; border:none; border-radius:14px;
  font-size:.88rem; font-family:inherit; color:#111;
  outline:none;
}
.search-panel-cancel {
  background:none; border:none; color:#6B7280;
  font-size:.85rem; font-weight:600; cursor:pointer;
  font-family:inherit; white-space:nowrap; padding:4px;
}
.search-panel-body { flex:1; overflow-y:auto; padding:16px; }

/* Popular searches */
.search-section-title {
  font-size:.72rem; font-weight:700; color:#9CA3AF;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:10px;
}
.popular-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.popular-tag {
  padding:7px 16px; border-radius:9999px;
  background:white; border:1px solid rgba(0,0,0,.1);
  font-size:.78rem; font-weight:600; color:#374151;
  cursor:pointer; transition:all .15s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.popular-tag:hover { background:#111; color:white; border-color:#111; }

/* Recent searches */
.recent-search-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px solid rgba(0,0,0,.05);
  cursor:pointer; transition:all .15s ease;
}
.recent-search-item:last-child { border-bottom:none; }
.recent-search-item:hover { opacity:.7; }
.recent-search-thumb {
  width:48px; height:48px; border-radius:12px;
  overflow:hidden; background:#f0f0f0; flex-shrink:0;
}
.recent-search-thumb img { width:100%; height:100%; object-fit:cover; }
.recent-search-name { flex:1; font-size:.85rem; font-weight:600; color:#111; }
.recent-search-arrow { color:#9CA3AF; font-size:.8rem; }

/* Search results in main grid */
.search-results-count {
  font-size:.75rem; color:#9CA3AF; margin-bottom:12px;
  padding:0 16px;
}

/* ══════════════════════════════════════════════════════════════
   SIDENAV IMPROVEMENTS
   ══════════════════════════════════════════════════════════════ */

/* Profile card at top of sidenav */
.sidenav-profile-card {
  margin:12px 12px 0;
  background:linear-gradient(135deg,rgba(201,169,110,.12),rgba(255,255,255,.8));
  backdrop-filter:blur(12px);
  border:1px solid rgba(201,169,110,.2);
  border-radius:18px; padding:14px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer; transition:all .2s ease;
}
.sidenav-profile-card:hover { background:rgba(201,169,110,.15); }
.sidenav-profile-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--acc),var(--acc-d));
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:1.1rem;
  box-shadow:0 4px 12px rgba(201,169,110,.3);
}
.sidenav-profile-name { font-size:.88rem; font-weight:700; color:#111; }
.sidenav-profile-sub  { font-size:.7rem; color:#9CA3AF; margin-top:1px; }

/* Section labels in sidenav */
.sidenav-section-label {
  font-size:.62rem; font-weight:700; color:#9CA3AF;
  text-transform:uppercase; letter-spacing:.08em;
  padding:14px 16px 4px;
}

/* Sidenav items — stagger animation */
.sidenav.open .sidenav-item {
  animation:slideInLeft .3s ease both;
}
.sidenav.open .sidenav-item:nth-child(1)  { animation-delay:.05s; }
.sidenav.open .sidenav-item:nth-child(2)  { animation-delay:.08s; }
.sidenav.open .sidenav-item:nth-child(3)  { animation-delay:.11s; }
.sidenav.open .sidenav-item:nth-child(4)  { animation-delay:.14s; }
.sidenav.open .sidenav-item:nth-child(5)  { animation-delay:.17s; }
.sidenav.open .sidenav-item:nth-child(6)  { animation-delay:.20s; }
.sidenav.open .sidenav-item:nth-child(7)  { animation-delay:.23s; }
.sidenav.open .sidenav-item:nth-child(8)  { animation-delay:.26s; }
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-16px); }
  to   { opacity:1; transform:translateX(0); }
}

/* ── FLIP BUTTON FINAL — opacity only, no transforms ─────────── */
.flip-front { opacity:1; transition:opacity .6s ease; }
.flip-back  { opacity:0; transition:opacity .6s ease; }
 50%,92%{opacity:0} 100%{opacity:1} }
 50%,92%{opacity:1} 100%{opacity:0} }

.search-trigger{flex:1;display:flex;align-items:center;gap:6px;background:rgba(0,0,0,.05);border:none;border-radius:9999px;padding:7px 14px;cursor:pointer;font-family:inherit;color:#9CA3AF;font-size:.78rem;transition:all .2s}
.search-trigger:hover{background:rgba(0,0,0,.08);color:#6B7280}
.search-trigger i{font-size:.72rem;flex-shrink:0}


/* ── DETAIL MODAL — multi-photo with thumbnails ──────────────── */
.detail-img {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#f5f5f5;
  border-radius:var(--r2);
  margin-bottom:0 !important;
  position:relative;
}
.detail-main-img-wrap {
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--r2) var(--r2) 0 0;
  background:#f5f5f5;
}
.detail-main-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:opacity .2s ease;
}
.detail-thumbs {
  display:flex; gap:6px; padding:8px 0 12px;
  overflow-x:auto; scrollbar-width:none;
}
.detail-thumbs::-webkit-scrollbar { display:none; }
.detail-thumb {
  flex-shrink:0;
  width:64px; height:64px;
  border-radius:10px; overflow:hidden;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .2s ease;
  opacity:.65;
}
.detail-thumb img { width:100%; height:100%; object-fit:cover; }
.detail-thumb.active {
  border-color:#111;
  opacity:1;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.detail-thumb:hover { opacity:.9; }

/* ── ACCESSORIES ADD BUTTON ──────────────────────────────────── */
.acc-add-btn {
  width:100%; padding:8px; border-radius:10px;
  background:linear-gradient(135deg,#111,#333);
  color:white; border:none; font-size:.75rem; font-weight:700;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:all .2s ease;
}
.acc-add-btn:hover { opacity:.85; }

/* ── ACCESSORIES SECTION ON HOME ─────────────────────────────── */
.accessories-section {
  padding:20px 16px 0; max-width:640px; margin:0 auto;
}

/* ── CATALOGUE SECTION ANIMATION ─────────────────────────────── */
#catalogueSection {
  animation:none;
}
#catalogueSection.slide-in {
  animation:slideUpSmooth .3s ease;
}

/* ── 24H FLIP BUTTON — JS-controlled, no CSS loop ────────────── */
.flip-front { opacity:1; transition:opacity .6s ease; }
.flip-back  { opacity:0; transition:opacity .6s ease; }
.hero-btn-flip.show-back .flip-front { opacity:0; }
.hero-btn-flip.show-back .flip-back  { opacity:1; }


/* ── SEARCH TRIGGER — proper pill layout ─────────────────────── */
.search-trigger {
  flex:1 !important;
  min-width:60px !important;
  max-width:120px !important;
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  background:rgba(0,0,0,.05) !important;
  border:none !important;
  border-radius:9999px !important;
  padding:7px 12px !important;
  cursor:pointer !important;
  font-family:inherit !important;
  color:#9CA3AF !important;
  font-size:.75rem !important;
  white-space:nowrap !important;
}
.search-trigger i { font-size:.7rem !important; flex-shrink:0 !important; }

/* ── DETAIL MODAL — image BELOW title fix ─────────────────────── */
/* Title stays in header, image is first in body */
.detail-main-img-wrap {
  width:100% !important;
  aspect-ratio:1 !important;
  overflow:hidden !important;
  border-radius:16px !important;
  background:#f5f5f5 !important;
  margin-bottom:8px !important;
}
.detail-main-img-wrap img {
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
  border-radius:16px !important;
  transition:opacity .2s ease !important;
}

/* ── DETAIL THUMBS ────────────────────────────────────────────── */
.detail-thumbs {
  display:flex !important; gap:6px !important;
  padding:0 0 12px !important;
  overflow-x:auto !important; scrollbar-width:none !important;
}
.detail-thumbs::-webkit-scrollbar { display:none !important; }
.detail-thumb {
  flex-shrink:0 !important;
  width:60px !important; height:60px !important;
  border-radius:10px !important; overflow:hidden !important;
  cursor:pointer !important;
  border:2px solid transparent !important;
  opacity:.6 !important;
  transition:all .2s ease !important;
}
.detail-thumb img { width:100% !important; height:100% !important; object-fit:cover !important; }
.detail-thumb.active { border-color:#111 !important; opacity:1 !important; }

/* ── DETAIL MODAL — title in header (keep), desc below image ──── */
#detailImgWrap { margin-bottom:0 !important; }

/* ── HOW TO ORDER + FLAVOURS — make sure visible in cakes view ── */
#howSection, #flavoursSection, #reviewsSection, #ctaSection {
  /* These are shown/hidden by JS — no CSS override */
}

/* ── ACCESSORIES SECTION ──────────────────────────────────────── */
.accessories-section { padding:20px 16px 0 !important; max-width:640px !important; margin:0 auto !important; }