/* ═══════════════════════════════════════
   IRENE HOUSEHOLD COLLECTIONS
   Jiji-Inspired Layout — Green/Gold Theme
═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; color:#222; background:#f2f2f2; overflow-x:hidden; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }
ul   { list-style:none; }
button { cursor:pointer; font-family:'DM Sans',sans-serif; }
input, select, textarea { font-family:'DM Sans',sans-serif; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-thumb { background:var(--gold); border-radius:4px; }

/* ── VARIABLES ── */
:root {
  --green:      #1a3d2b;
  --green2:     #2d7a52;
  --green-dark: #0d1f16;
  --green-light:#e8f5ee;
  --gold:       #c8a951;
  --gold2:      #e2c47a;
  --white:      #ffffff;
  --cream:      #faf8f3;
  --border:     #e8e0d0;
  --text:       #222222;
  --muted:      #6b7280;
  --red:        #e53e3e;
  --bg:         #f2f2f2;
}

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
@keyframes waPulse  { 0%,100%{box-shadow:0 4px 16px rgba(37,211,102,.45)} 50%{box-shadow:0 4px 28px rgba(37,211,102,.75),0 0 0 8px rgba(37,211,102,.1)} }
@keyframes cartBounce { 0%,100%{transform:scale(1)} 35%{transform:scale(1.4)} 65%{transform:scale(.88)} }
@keyframes ldBar    { from{width:0} to{width:100%} }
@keyframes toastIn  { from{transform:translateX(110%);opacity:0} to{transform:none;opacity:1} }
@keyframes slideDown{ from{transform:translateY(-100%);opacity:0} to{transform:none;opacity:1} }

.rev   { opacity:0; transform:translateY(24px); transition:opacity .5s,transform .5s; }
.rev.on{ opacity:1; transform:none; }
.d1{transition-delay:.06s!important} .d2{transition-delay:.12s!important}
.d3{transition-delay:.18s!important} .d4{transition-delay:.24s!important}
.d5{transition-delay:.30s!important} .d6{transition-delay:.36s!important}

/* ═══════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════ */
#loader {
  position:fixed; inset:0; z-index:9999;
  background:var(--green-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .6s,visibility .6s;
}
#loader.hide { opacity:0; visibility:hidden; pointer-events:none; }
#loader img  { width:80px; height:80px; border-radius:50%; border:3px solid var(--gold); object-fit:cover; animation:pulse 1.2s ease-in-out infinite; }
#loader h2   { font-family:'Cormorant Garamond',serif; color:var(--gold); font-size:1.5rem; }
#loader small{ color:rgba(255,255,255,.4); font-size:10px; letter-spacing:3px; text-transform:uppercase; }
.loader-bar  { width:160px; height:3px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; }
.loader-fill { height:100%; background:linear-gradient(90deg,var(--gold),var(--gold2)); animation:ldBar 1.1s ease forwards; }

/* ═══════════════════════════════════════
   TOP NAV — JIJI STYLE
   Compact: logo | search bar | icons
═══════════════════════════════════════ */
.top-nav {
  position:sticky; top:0; z-index:1000;
  background:var(--green-dark);
  padding:10px 4%;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 2px 12px rgba(0,0,0,.25);
  animation:slideDown .4s ease both;
}
.top-nav.scrolled { box-shadow:0 3px 18px rgba(0,0,0,.35); }

/* Logo */
.nav-logo-wrap { display:flex; align-items:center; gap:8px; flex-shrink:0; text-decoration:none; }
.nav-logo-wrap img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.nav-logo-text { display:none; }
.nav-logo-text b     { display:block; color:#fff; font-size:12px; font-weight:700; line-height:1.2; }
.nav-logo-text small { color:var(--gold); font-size:9px; letter-spacing:2px; text-transform:uppercase; }

/* Search bar — center and big like Jiji */
.nav-search-wrap {
  flex:1;
  position:relative;
  max-width:600px;
}
.nav-search-wrap input {
  width:100%;
  background:#fff;
  border:none;
  padding:10px 42px 10px 38px;
  border-radius:8px;
  font-size:13.5px;
  outline:none;
  color:var(--text);
}
.nav-search-wrap input::placeholder { color:#aaa; }
.nav-search-icon {
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  font-size:14px; pointer-events:none; color:#aaa;
}
.nav-search-btn {
  position:absolute; right:0; top:0; bottom:0;
  background:var(--gold); color:var(--green-dark);
  border:none; border-radius:0 8px 8px 0;
  padding:0 14px; font-size:13px; font-weight:700;
  transition:background .2s;
}
.nav-search-btn:hover { background:var(--gold2); }

/* Nav icons */
.nav-icons { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.nav-icon-btn {
  position:relative;
  background:rgba(255,255,255,.1);
  border:none;
  width:38px; height:38px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; color:#fff;
  transition:background .2s;
}
.nav-icon-btn:hover { background:rgba(255,255,255,.2); }
.nav-badge {
  position:absolute; top:-4px; right:-4px;
  background:var(--red); color:#fff;
  font-size:8px; font-weight:700;
  width:15px; height:15px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
}
.nav-badge.show { display:flex; animation:cartBounce .4s ease; }
.nav-ham { display:flex; flex-direction:column; gap:4px; padding:4px; }
.nav-ham span { width:18px; height:2px; background:rgba(255,255,255,.8); border-radius:2px; }

/* Mobile menu */
.mobile-menu {
  position:fixed; top:58px; left:0; right:0; z-index:999;
  background:var(--green-dark);
  display:none; flex-direction:column;
  padding:10px 4%;
  border-bottom:1px solid rgba(200,169,81,.15);
  max-height:80vh; overflow-y:auto;
}
.mobile-menu.open { display:flex; }
.mobile-menu a {
  color:rgba(255,255,255,.8);
  padding:11px 0;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s;
}
.mobile-menu a:hover { color:var(--gold); }

@media(min-width:768px) {
  .nav-logo-text { display:block; }
  .nav-ham { display:none; }
}

/* ═══════════════════════════════════════
   CATEGORY STRIP — JIJI SCROLLABLE ROW
═══════════════════════════════════════ */
.cat-strip-wrap {
  background:#fff;
  border-bottom:1px solid #eee;
  overflow-x:auto;
  white-space:nowrap;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.cat-strip-wrap::-webkit-scrollbar { display:none; }
.cat-strip {
  display:inline-flex;
  gap:0;
  padding:0 4%;
  min-width:100%;
}
.cat-strip-item {
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:12px 16px;
  border:none;
  background:none;
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:all .2s;
  flex-shrink:0;
}
.cat-strip-item:hover { border-bottom-color:var(--green); }
.cat-strip-item.active { border-bottom-color:var(--green); }
.cat-strip-img {
  width:44px; height:44px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid #eee;
  transition:border-color .2s;
  background:#f5f5f5;
}
.cat-strip-img img { width:100%; height:100%; object-fit:cover; }
.cat-strip-item:hover .cat-strip-img,
.cat-strip-item.active .cat-strip-img { border-color:var(--green); }
.cat-strip-label {
  font-size:10.5px;
  font-weight:600;
  color:var(--muted);
  text-align:center;
  white-space:nowrap;
}
.cat-strip-item.active .cat-strip-label { color:var(--green); }

/* ═══════════════════════════════════════
   SECTION LAYOUT
═══════════════════════════════════════ */
.page-wrap { max-width:1200px; margin:0 auto; padding:0 4%; }
.section-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 0 12px;
  flex-wrap:wrap; gap:8px;
}
.section-head h2 {
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;
  color:var(--green-dark);
}
.section-head a {
  font-size:12px; font-weight:600;
  color:var(--green);
  border:1px solid var(--green);
  padding:5px 12px;
  border-radius:5px;
  transition:all .2s;
}
.section-head a:hover { background:var(--green); color:#fff; }

/* ═══════════════════════════════════════
   PRODUCT CARDS — JIJI STYLE
   Clean white card, photo on top,
   details below, prominent price
═══════════════════════════════════════ */
.products-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  padding-bottom:20px;
}
@media(min-width:560px)  { .products-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px)  { .products-grid { grid-template-columns:repeat(4,1fr); } }
@media(min-width:1100px) { .products-grid { grid-template-columns:repeat(5,1fr); } }

.product-card {
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.08);
  transition:box-shadow .3s,transform .3s;
  position:relative;
  display:flex;
  flex-direction:column;
}
.product-card:hover {
  box-shadow:0 6px 24px rgba(26,61,43,.14);
  transform:translateY(-3px);
}

/* Card image */
.card-img {
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:#f5f5f5;
}
.card-img img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .4s;
}
.product-card:hover .card-img img { transform:scale(1.06); }

/* Badge */
.card-badge {
  position:absolute; top:7px; left:7px; z-index:2;
  font-size:9px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; padding:3px 7px; border-radius:3px;
}
.badge-hot   { background:var(--gold);  color:var(--green-dark); }
.badge-sale  { background:var(--red);   color:#fff; }
.badge-new   { background:var(--green); color:#fff; }
.badge-hotel { background:#7c3aed;      color:#fff; }

/* Wishlist heart */
.card-wish {
  position:absolute; top:7px; right:7px; z-index:2;
  width:28px; height:28px;
  background:rgba(255,255,255,.92);
  border:none; border-radius:50%;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 5px rgba(0,0,0,.12);
  transition:transform .2s;
}
.card-wish:hover   { transform:scale(1.18); }
.card-wish.active  { background:#fff0f0; color:var(--red); }

/* Quick view on hover */
.card-qv {
  position:absolute; bottom:-36px; left:0; right:0; z-index:2;
  background:rgba(26,61,43,.9);
  color:#fff; border:none;
  padding:9px; font-size:11px; font-weight:600;
  letter-spacing:.8px; text-transform:uppercase;
  transition:bottom .3s;
  width:100%;
}
.product-card:hover .card-qv { bottom:0; }

/* Card body */
.card-body { padding:10px 10px 12px; flex:1; display:flex; flex-direction:column; gap:5px; }
.card-location {
  display:flex; align-items:center; gap:4px;
  font-size:10px; color:var(--muted);
}
.card-location::before { content:'📍'; font-size:9px; }
.card-name  { font-size:12.5px; font-weight:600; color:var(--green-dark); line-height:1.35; }
.card-note  { font-size:10.5px; color:var(--muted); }
.card-price {
  font-family:'Cormorant Garamond',serif;
  font-size:17px; font-weight:700;
  color:var(--green);
}
.card-old   { font-size:10.5px; color:#bbb; text-decoration:line-through; }
.card-price-row { display:flex; align-items:center; gap:6px; }

/* Add to cart button */
.card-atc {
  margin-top:auto;
  width:100%;
  background:var(--green);
  color:#fff; border:none;
  padding:9px; font-size:11px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  border-radius:5px;
  transition:background .2s;
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.card-atc:hover { background:var(--green2); }
.card-atc.added { background:var(--green2); }

/* WhatsApp share small */
.card-wa {
  position:absolute; bottom:46px; right:7px; z-index:3;
  width:28px; height:28px;
  background:#25d366; border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.product-card:hover .card-wa { opacity:1; }
.card-wa svg { width:14px; height:14px; fill:#fff; }

/* ═══════════════════════════════════════
   HERO BANNER — JIJI BIG SEARCH STYLE
═══════════════════════════════════════ */
.hero-banner {
  background:linear-gradient(135deg,var(--green-dark) 0%,var(--green) 100%);
  padding:32px 4% 28px;
  position:relative; overflow:hidden;
}
.hero-banner::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(200,169,81,.07) 1px,transparent 0);
  background-size:30px 30px;
}
.hero-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; text-align:center; }
.hero-tag {
  display:inline-block;
  background:rgba(200,169,81,.2); border:1px solid rgba(200,169,81,.4);
  color:var(--gold); padding:4px 14px;
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  border-radius:20px; margin-bottom:14px;
  animation:fadeUp .6s ease both;
}
.hero-inner h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,5vw,3.2rem);
  color:#fff; line-height:1.1; margin-bottom:8px;
  animation:fadeUp .6s .1s ease both;
}
.hero-inner h1 em { color:var(--gold); font-style:italic; }
.hero-inner p {
  color:rgba(255,255,255,.65); font-size:13.5px;
  margin-bottom:20px; animation:fadeUp .6s .2s ease both;
}

/* Big search in hero */
.hero-search {
  display:flex; gap:0;
  background:#fff; border-radius:10px;
  overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.18);
  animation:fadeUp .6s .3s ease both;
  margin-bottom:18px;
}
.hero-search input {
  flex:1; border:none; padding:14px 16px;
  font-size:14px; outline:none; color:var(--text);
}
.hero-search input::placeholder { color:#aaa; }
.hero-search button {
  background:var(--gold); color:var(--green-dark);
  border:none; padding:14px 22px;
  font-size:13px; font-weight:700; white-space:nowrap;
  transition:background .2s;
}
.hero-search button:hover { background:var(--gold2); }

/* Hero stats */
.hero-stats {
  display:flex; justify-content:center; gap:24px; flex-wrap:wrap;
  animation:fadeUp .6s .4s ease both;
}
.hero-stat { text-align:center; }
.hero-stat strong { display:block; color:var(--gold); font-size:1.3rem; font-family:'Cormorant Garamond',serif; }
.hero-stat span   { color:rgba(255,255,255,.5); font-size:10.5px; }

/* ═══════════════════════════════════════
   PROMO BAR
═══════════════════════════════════════ */
.promo-bar {
  background:linear-gradient(90deg,var(--green),var(--gold),var(--green));
  background-size:200%; animation:shimmer 4s linear infinite;
  color:#fff; text-align:center;
  padding:7px 4%; font-size:11px; font-weight:600;
}
.promo-bar a { color:#fff; text-decoration:underline; margin-left:6px; }
.promo-bar span { margin:0 8px; opacity:.5; }

/* ═══════════════════════════════════════
   FLASH SALE BANNER
═══════════════════════════════════════ */
.flash-banner {
  background:var(--red);
  padding:12px 4%;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.flash-left { display:flex; align-items:center; gap:10px; }
.flash-left h3 { color:#fff; font-size:13.5px; font-weight:700; }
.flash-left p  { color:rgba(255,255,255,.8); font-size:11px; }
#flash-timer {
  display:flex; align-items:center; gap:5px;
  background:rgba(0,0,0,.2); padding:6px 12px; border-radius:6px;
}
.timer-block { display:flex; flex-direction:column; align-items:center; }
.timer-num   { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:700; color:#fff; line-height:1; }
.timer-label { font-size:7px; color:rgba(255,255,255,.7); letter-spacing:1px; }
.timer-sep   { font-size:1.2rem; color:rgba(255,255,255,.6); margin-top:-4px; }

/* ═══════════════════════════════════════
   CART DRAWER
═══════════════════════════════════════ */
.overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(0,0,0,.5); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.overlay.open { opacity:1; pointer-events:all; }

.drawer {
  position:fixed; top:0; right:-100vw;
  width:400px; max-width:100vw; height:100vh;
  background:#fff; z-index:2001;
  display:flex; flex-direction:column;
  transition:right .35s cubic-bezier(.4,0,.2,1);
  box-shadow:-4px 0 30px rgba(0,0,0,.15);
}
.drawer.open { right:0; }

.drawer-head {
  padding:16px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-head h3 { font-family:'Cormorant Garamond',serif; font-size:1.25rem; }
.drawer-close {
  background:rgba(0,0,0,.07); border:none;
  width:28px; height:28px; border-radius:50%; font-size:14px;
  transition:background .2s;
}
.drawer-close:hover { background:rgba(0,0,0,.14); }
.drawer-items { flex:1; overflow-y:auto; padding:10px 16px; }
.drawer-empty { text-align:center; padding:40px 16px; color:var(--muted); }
.drawer-empty-icon { font-size:2.4rem; margin-bottom:8px; }

.cart-item {
  display:flex; gap:10px; padding:10px 0;
  border-bottom:1px solid #f0f0f0; align-items:center;
}
.cart-item-img {
  width:56px; height:56px; border-radius:6px;
  overflow:hidden; flex-shrink:0; background:#f5f5f5;
}
.cart-item-img img { width:100%; height:100%; object-fit:cover; }
.cart-item-info { flex:1; }
.cart-item-name  { font-size:12px; font-weight:600; color:var(--green-dark); }
.cart-item-cat   { font-size:9.5px; color:var(--gold); text-transform:uppercase; letter-spacing:.8px; }
.cart-item-price { font-size:13px; font-weight:700; color:var(--green); margin-top:2px; }

.qty-control { display:flex; align-items:center; gap:5px; background:#f5f5f5; border-radius:4px; padding:3px 6px; }
.qty-btn { background:none; border:none; font-size:14px; color:var(--green); font-weight:700; width:18px; height:18px; display:flex; align-items:center; justify-content:center; }
.qty-val { font-size:12px; font-weight:600; min-width:16px; text-align:center; }
.remove-btn { background:none; border:none; color:var(--red); font-size:13px; padding:2px; }

.drawer-footer { padding:14px 16px; border-top:1px solid #f0f0f0; flex-shrink:0; overflow-y:auto; max-height:60vh; }
.delivery-bar-wrap { padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #f0f0f0; }
.delivery-msg { font-size:11.5px; color:var(--muted); margin-bottom:6px; text-align:center; }
.delivery-track { background:#eee; border-radius:20px; height:6px; overflow:hidden; }
.delivery-fill  { height:100%; background:var(--gold); border-radius:20px; transition:width .5s,background .3s; width:0%; }

.pay-label { font-size:10.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin-bottom:8px; display:block; }
.pay-opts  { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px; }
.pay-opt {
  padding:8px; border:1.5px solid #eee; border-radius:6px;
  text-align:center; background:#fff; transition:all .2s;
}
.pay-opt:hover { border-color:var(--green); }
.pay-opt.sel-paid  { border-color:#22c55e; background:#f0fdf4; }
.pay-opt.sel-nopay { border-color:var(--gold); background:#fffbeb; }
.pay-opt-icon  { font-size:1.2rem; display:block; margin-bottom:2px; }
.pay-opt-title { font-size:10.5px; font-weight:600; color:var(--green-dark); }
.pay-opt-sub   { font-size:9px; color:var(--muted); }

.cart-total-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.cart-total-row span    { color:var(--muted); font-size:12px; }
.cart-total-row strong  { font-family:'Cormorant Garamond',serif; font-size:1.35rem; color:var(--green-dark); }

.btn-checkout {
  width:100%; background:var(--gold); color:var(--green-dark);
  border:none; padding:13px; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; border-radius:6px;
  transition:background .2s; display:flex; align-items:center; justify-content:center; gap:7px;
}
.btn-checkout:hover { background:var(--gold2); }
.btn-clear {
  width:100%; background:none; border:1px solid #eee; color:var(--muted);
  padding:8px; font-size:11px; border-radius:6px; margin-top:6px; transition:all .2s;
}
.btn-clear:hover { border-color:var(--red); color:var(--red); }

/* ═══════════════════════════════════════
   QUICK VIEW MODAL
═══════════════════════════════════════ */
.modal {
  position:fixed; inset:0; z-index:3000;
  background:rgba(0,0,0,.6); backdrop-filter:blur(5px);
  opacity:0; pointer-events:none; transition:opacity .3s;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal.open { opacity:1; pointer-events:all; }
.modal-box {
  background:#fff; border-radius:12px; width:100%; max-width:480px;
  overflow:hidden; transform:scale(.92); transition:transform .3s;
  box-shadow:0 20px 70px rgba(0,0,0,.22); position:relative;
}
.modal.open .modal-box { transform:scale(1); }
.modal-img   { width:100%; height:230px; object-fit:cover; }
.modal-body  { padding:20px; }
.modal-cat   { color:var(--gold); font-size:9.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:4px; }
.modal-name  { font-family:'Cormorant Garamond',serif; font-size:1.55rem; color:var(--green-dark); margin-bottom:4px; }
.modal-note  { color:var(--muted); font-size:12.5px; margin-bottom:10px; }
.modal-price-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.modal-price { font-family:'Cormorant Garamond',serif; font-size:1.65rem; font-weight:700; color:var(--green); }
.modal-old   { font-size:12px; color:#bbb; text-decoration:line-through; }
.modal-actions { display:flex; gap:8px; }
.modal-close {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,.28); border:none; color:#fff;
  width:30px; height:30px; border-radius:50%; font-size:14px;
}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.toast {
  position:fixed; bottom:80px; right:16px; z-index:4000;
  background:var(--green); color:#fff;
  padding:9px 14px; border-radius:6px;
  font-size:12px; font-weight:500;
  box-shadow:0 4px 18px rgba(0,0,0,.15);
  opacity:0; pointer-events:none;
  border-left:4px solid var(--gold);
  max-width:260px;
}
.toast.show { animation:toastIn .3s ease both; }

/* ═══════════════════════════════════════
   WHATSAPP FLOAT
═══════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:80px; right:18px; z-index:900;
  background:#25d366; width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 18px rgba(37,211,102,.5);
  animation:waPulse 2.5s ease-in-out infinite;
  transition:all .3s;
}
.wa-float:hover { animation:none; transform:scale(1.12) rotate(8deg); }
.wa-float svg { width:26px; height:26px; fill:#fff; }

/* ═══════════════════════════════════════
   PROGRESS RING
═══════════════════════════════════════ */
.progress-ring {
  position:fixed; bottom:80px; left:18px; z-index:900;
  width:42px; height:42px; cursor:pointer; display:none;
}
.progress-ring.show { display:block; }
.progress-ring svg { transform:rotate(-90deg); }
.progress-ring-inner {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; color:var(--gold); font-weight:700;
}

/* ═══════════════════════════════════════
   BOTTOM NAV
═══════════════════════════════════════ */
.bottom-nav {
  display:none;
  position:fixed; bottom:0; left:0; right:0; z-index:800;
  background:var(--green-dark);
  border-top:1px solid rgba(200,169,81,.15);
  padding:6px 0 10px;
}
.bottom-nav-items { display:flex; justify-content:space-around; }
.bnav-item {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:rgba(255,255,255,.5); font-size:9.5px; font-weight:500;
  text-decoration:none; padding:3px 10px;
  transition:color .2s; position:relative;
}
.bnav-item .bicon { font-size:20px; }
.bnav-item:hover, .bnav-item.active { color:var(--gold); }
.bnav-badge {
  position:absolute; top:0; right:4px;
  background:var(--red); color:#fff; font-size:8px; font-weight:700;
  width:14px; height:14px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
}
.bnav-badge.show { display:flex; }

/* ═══════════════════════════════════════
   COOKIE BAR
═══════════════════════════════════════ */
.cookie-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:4000;
  background:var(--green-dark); padding:12px 4%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  border-top:2px solid var(--gold);
  transform:translateY(100%); transition:transform .4s;
}
.cookie-bar.show { transform:translateY(0); }
.cookie-bar p { font-size:12px; color:rgba(255,255,255,.7); flex:1; }
.cookie-bar p strong { color:var(--gold); }
.cookie-btns { display:flex; gap:7px; }
.ck-yes { background:var(--gold); color:var(--green-dark); border:none; padding:7px 16px; border-radius:4px; font-size:11px; font-weight:700; }
.ck-no  { background:transparent; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.2); padding:7px 12px; border-radius:4px; font-size:11px; }

/* ═══════════════════════════════════════
   BUTTONS
═══════════════════════════════════════ */
.btn-gold {
  background:var(--gold); color:var(--green-dark);
  padding:12px 24px; font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  border-radius:6px; border:none;
  transition:all .25s; display:inline-flex; align-items:center; gap:7px;
}
.btn-gold:hover { background:var(--gold2); transform:translateY(-2px); box-shadow:0 6px 20px rgba(200,169,81,.3); }
.btn-green {
  background:var(--green); color:#fff;
  padding:11px 22px; font-size:12px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  border-radius:6px; border:none;
  transition:background .25s; display:inline-flex; align-items:center; gap:7px;
}
.btn-green:hover { background:var(--green2); }
.btn-ghost {
  border:1.5px solid rgba(255,255,255,.35); color:rgba(255,255,255,.9);
  padding:11px 22px; font-size:12px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase;
  border-radius:6px; background:none;
  transition:all .25s; display:inline-flex; align-items:center; gap:7px;
}
.btn-ghost:hover { border-color:var(--gold); color:var(--gold); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background:#060f0a;
  padding:40px 4% 18px;
  margin-top:0;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:28px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(200,169,81,.08);
  margin-bottom:16px;
}
.footer-brand p { color:rgba(255,255,255,.38); font-size:12px; line-height:1.75; margin-top:8px; max-width:220px; }
.footer-logo { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.footer-logo img { width:36px; height:36px; border-radius:50%; border:2px solid var(--gold); object-fit:cover; }
.footer-logo b     { color:#fff; font-size:13px; display:block; }
.footer-logo small { color:var(--gold); font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.social-links { display:flex; gap:7px; margin-top:12px; }
.soc-link {
  width:32px; height:32px; border-radius:50%;
  background:rgba(200,169,81,.08); border:1px solid rgba(200,169,81,.2);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold); transition:all .3s;
}
.soc-link:hover { background:var(--gold); color:var(--green-dark); transform:translateY(-3px); }
.soc-link svg { width:14px; height:14px; fill:currentColor; }
.footer-col h4 { color:#fff; font-size:10.5px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:12px; }
.footer-col li { margin-bottom:7px; }
.footer-col a  { color:rgba(255,255,255,.38); font-size:12px; transition:color .2s; }
.footer-col a:hover { color:var(--gold); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; color:rgba(255,255,255,.22); font-size:11px; }
.footer-bottom a { color:rgba(255,255,255,.22); }
.footer-bottom a:hover { color:var(--gold); }

/* ═══════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════ */
.page-hero {
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  padding:100px 4% 44px;
  text-align:center; position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(200,169,81,.07) 1px,transparent 0);
  background-size:30px 30px;
}
.page-hero h1 { font-family:'Cormorant Garamond',serif; font-size:clamp(1.8rem,4vw,3rem); color:#fff; position:relative; z-index:1; }
.page-hero p  { color:rgba(255,255,255,.6); font-size:13.5px; margin-top:7px; position:relative; z-index:1; }
.breadcrumb   { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:14px; position:relative; z-index:1; }
.breadcrumb a       { color:var(--gold); font-size:12px; }
.breadcrumb span    { color:rgba(255,255,255,.3); font-size:12px; }
.breadcrumb .cur    { color:rgba(255,255,255,.6); font-size:12px; }

/* ═══════════════════════════════════════
   SHOP PAGE CONTROLS
═══════════════════════════════════════ */
.shop-topbar {
  background:#fff; border-bottom:1px solid #eee;
  padding:10px 4%;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.shop-topbar-left p { font-size:12.5px; color:var(--muted); }
.shop-topbar-left p strong { color:var(--green-dark); }
.shop-topbar-right select {
  padding:7px 12px; border:1.5px solid #e0e0e0; border-radius:6px;
  font-size:12px; color:var(--text); background:#fff; outline:none;
}
.shop-topbar-right select:focus { border-color:var(--green); }

/* Pagination */
.pagination {
  display:flex; align-items:center; justify-content:center;
  gap:6px; padding:20px 4% 32px;
}
.pg-btn {
  width:34px; height:34px; border-radius:7px;
  border:1.5px solid #e0e0e0; background:#fff;
  font-size:13px; font-weight:600; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s;
}
.pg-btn:hover { border-color:var(--green); color:var(--green); }
.pg-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.pg-btn:disabled { opacity:.3; cursor:not-allowed; }
.pg-dots { color:var(--muted); font-size:13px; }

/* Subscribe strip */
.sub-strip {
  background:var(--green-dark); padding:32px 4%; text-align:center;
}
.sub-strip h3 { font-size:13.5px; font-weight:700; color:#fff; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; }
.sub-form { display:flex; gap:0; max-width:440px; margin:0 auto; border-radius:8px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.2); }
.sub-form input {
  flex:1; background:rgba(255,255,255,.08); border:none;
  color:#fff; padding:12px 14px; font-size:13px; outline:none;
}
.sub-form input::placeholder { color:rgba(255,255,255,.38); }
.sub-form button {
  background:var(--gold); color:var(--green-dark);
  border:none; padding:12px 20px; font-size:12.5px; font-weight:700;
  white-space:nowrap; transition:background .2s;
}
.sub-form button:hover { background:var(--gold2); }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media(max-width:768px) {
  .bottom-nav { display:block; }
  body { padding-bottom:66px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:500px) {
  .footer-grid  { grid-template-columns:1fr; }
  .products-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
}
@media(max-width:360px) {
  .products-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .card-name    { font-size:11.5px; }
  .card-price   { font-size:15px; }
}

/* Prevent overflow */
html,body { max-width:100%; overflow-x:hidden; }
img { max-width:100%; }

/* Flash sale timer */
.flash-link {
  background:rgba(255,255,255,.15); color:#fff;
  padding:7px 14px; border-radius:5px;
  font-size:11.5px; font-weight:700; text-decoration:none;
  white-space:nowrap; transition:background .2s;
}
.flash-link:hover { background:rgba(255,255,255,.25); }

/* Contact page */
.contact-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:32px; align-items:start; }
@media(max-width:768px) { .contact-grid { grid-template-columns:1fr; } }
.info-card {
  background:#fff; border-radius:10px; padding:24px;
  box-shadow:0 2px 14px rgba(26,61,43,.07); margin-bottom:16px;
}
.info-card h3 {
  font-family:'Cormorant Garamond',serif; font-size:1.3rem;
  color:var(--green-dark); margin-bottom:16px;
  padding-bottom:10px; border-bottom:2px solid var(--gold);
}
.info-row {
  display:flex; align-items:center; gap:12px;
  padding:10px; background:var(--bg);
  border-radius:7px; margin-bottom:9px;
}
.info-row-icon {
  width:40px; height:40px; min-width:40px;
  background:rgba(26,61,43,.07); border:1px solid rgba(26,61,43,.1);
  border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:17px;
}
.info-row-text strong { display:block; font-size:12.5px; font-weight:600; color:var(--green-dark); margin-bottom:2px; }
.info-row-text span,
.info-row-text a { font-size:12.5px; color:var(--muted); }
.info-row-text a:hover { color:var(--green); }

/* Form light */
.form-card {
  background:#fff; border-radius:10px; padding:28px;
  box-shadow:0 2px 14px rgba(26,61,43,.07);
  border-top:4px solid var(--gold);
}
.form-card h2 { font-family:'Cormorant Garamond',serif; font-size:1.65rem; color:var(--green-dark); margin-bottom:5px; }
.form-card>p  { color:var(--muted); font-size:13px; margin-bottom:20px; }
.form-row2    { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:500px) { .form-row2 { grid-template-columns:1fr; } }
.form-grp     { margin-bottom:12px; }
.form-grp label { display:block; color:var(--muted); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:5px; }
.form-grp input,
.form-grp textarea,
.form-grp select {
  width:100%; background:var(--bg); border:1.5px solid #e0e0e0;
  color:var(--text); padding:10px 12px; font-size:13px;
  border-radius:6px; outline:none; transition:border-color .2s;
}
.form-grp input:focus,
.form-grp textarea:focus,
.form-grp select:focus { border-color:var(--green); background:#fff; }
.form-grp textarea { resize:vertical; min-height:90px; }
.form-grp select option { background:#fff; }
.form-submit {
  width:100%; background:var(--gold); color:var(--green-dark);
  border:none; padding:12px; font-size:12px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; border-radius:6px; transition:background .2s;
}
.form-submit:hover { background:var(--gold2); }

/* About page */
.about-grid   { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media(max-width:768px) { .about-grid { grid-template-columns:1fr; } }
.values-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:700px) { .values-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:420px) { .values-grid { grid-template-columns:1fr; } }
.value-card {
  background:#fff; border-radius:10px; padding:24px 18px;
  text-align:center; box-shadow:0 2px 12px rgba(26,61,43,.07);
  border-top:4px solid var(--gold); transition:transform .3s,box-shadow .3s;
}
.value-card:hover { transform:translateY(-5px); box-shadow:0 10px 32px rgba(26,61,43,.13); }
.value-card .icon { font-size:2.2rem; margin-bottom:12px; display:block; }
.value-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--green-dark); margin-bottom:7px; }
.value-card p  { font-size:12.5px; color:var(--muted); line-height:1.65; }

.stats-strip {
  background:var(--green); padding:36px 4%;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center;
}
@media(max-width:600px) { .stats-strip { grid-template-columns:repeat(2,1fr); } }
.stat-item strong { display:block; font-family:'Cormorant Garamond',serif; font-size:2.4rem; color:var(--gold); line-height:1; margin-bottom:5px; }
.stat-item span   { color:rgba(255,255,255,.55); font-size:12px; }

/* Hotel section */
.hotel-section {
  background:linear-gradient(135deg,var(--green-dark),var(--green) 60%);
  padding:56px 4%;
  display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
}
@media(max-width:600px) { .hotel-section { grid-template-columns:1fr; } }
.hotel-section h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,3vw,2.2rem); color:#fff; margin-bottom:9px; }
.hotel-section p  { color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.75; max-width:500px; }
.hotel-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.hotel-badge  { background:rgba(200,169,81,.12); border:1px solid rgba(200,169,81,.25); color:var(--gold); padding:4px 12px; border-radius:2px; font-size:10.5px; font-weight:600; }

/* Testimonials */
.testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.testi-card { background:#fff; border-radius:8px; padding:20px 18px; border-left:4px solid var(--gold); box-shadow:0 2px 10px rgba(26,61,43,.06); transition:transform .3s; }
.testi-card:hover { transform:translateY(-4px); }
.stars { color:var(--gold); font-size:11px; margin-bottom:9px; letter-spacing:2px; }
.testi-card blockquote { font-style:italic; color:#555; font-size:13px; line-height:1.7; margin-bottom:11px; }
.testi-card strong { font-size:12px; color:var(--green-dark); }
.testi-card small  { display:block; color:var(--gold); font-size:10px; margin-top:1px; }

/* CTA section */
.cta-section {
  background:linear-gradient(135deg,var(--green-dark),var(--green));
  padding:60px 4%; text-align:center; position:relative; overflow:hidden;
}
.cta-section::before { content:''; position:absolute; inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(200,169,81,.07) 1px,transparent 0); background-size:30px 30px; }
.cta-section h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3vw,2.5rem); color:#fff; margin-bottom:10px; position:relative; z-index:1; }
.cta-section p  { color:rgba(255,255,255,.6); font-size:13.5px; margin-bottom:24px; position:relative; z-index:1; }
.cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }

/* Community section */
.community-section { background:var(--green-dark); padding:56px 4%; }
.community-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:28px; }
@media(max-width:680px) { .community-cards { grid-template-columns:1fr; } }
@media(min-width:681px) and (max-width:900px) { .community-cards { grid-template-columns:1fr 1fr; } }
.comm-card {
  border-radius:10px; padding:22px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-decoration:none; transition:transform .3s;
}
.comm-card:hover { transform:translateY(-5px); }
.comm-icon { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.comm-icon svg { width:24px; height:24px; fill:#fff; }
.comm-title { font-family:'Cormorant Garamond',serif; font-size:1.15rem; font-weight:600; }
.comm-desc  { font-size:11.5px; color:rgba(255,255,255,.6); line-height:1.6; }
.comm-btn   { padding:8px 20px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; width:100%; text-align:center; margin-top:auto; color:#fff; }

/* Pay section */
.pay-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; max-width:840px; margin:0 auto; }
@media(max-width:600px) { .pay-grid { grid-template-columns:1fr; } }
.pay-card {
  background:#fff; border-radius:10px; padding:28px;
  box-shadow:0 2px 14px rgba(26,61,43,.08);
  border-top:4px solid var(--gold); text-align:center;
}
.pay-card h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--green-dark); margin-bottom:16px; }
.pay-detail-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 13px; background:var(--bg);
  border-radius:6px; margin-bottom:8px; border:1px solid var(--border);
}
.pay-detail-row label { font-size:10px; color:var(--muted); font-weight:600; letter-spacing:1px; text-transform:uppercase; }
.pay-val { font-family:'Cormorant Garamond',serif; font-size:17px; font-weight:700; color:var(--green); }
.copy-btn {
  background:none; border:1px solid var(--border); color:var(--muted);
  padding:3px 10px; border-radius:4px; font-size:10px; transition:all .2s;
}
.copy-btn:hover,.copy-btn.copied { background:var(--green); color:#fff; border-color:var(--green); }
.pay-note {
  background:rgba(200,169,81,.08); border:1px solid rgba(200,169,81,.22);
  border-radius:7px; padding:11px 13px; margin-top:12px;
  font-size:12px; color:var(--text); line-height:1.6; text-align:left;
}
.pay-step { display:flex; gap:11px; margin-bottom:12px; align-items:flex-start; }
.step-num { width:26px; height:26px; min-width:26px; background:var(--green); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; }
.step-info strong { display:block; font-size:12.5px; font-weight:600; color:var(--green-dark); }
.step-info span   { font-size:11.5px; color:var(--muted); line-height:1.45; }

/* Section utility */
.section { padding:40px 4%; }
.sec-label { display:block; text-align:center; font-size:10px; letter-spacing:4px; text-transform:uppercase; margin-bottom:7px; background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold)); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 3s linear infinite; }
.sec-title { text-align:center; font-family:'Cormorant Garamond',serif; font-size:clamp(1.7rem,3vw,2.5rem); color:var(--green-dark); margin-bottom:6px; }
.sec-sub   { text-align:center; color:var(--muted); font-size:13px; margin-bottom:36px; }

/* FAQ */
.faq-item { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 8px rgba(26,61,43,.06); margin-bottom:10px; }
.faq-q { width:100%; padding:15px 18px; background:none; border:none; text-align:left; font-size:13.5px; font-weight:600; color:var(--green-dark); display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; transition:background .2s; }
.faq-q:hover { background:rgba(26,61,43,.03); }
.faq-q.open  { color:var(--green); }
.faq-arrow   { font-size:11px; color:var(--gold); flex-shrink:0; transition:transform .3s; }
.faq-q.open .faq-arrow { transform:rotate(180deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease,padding .35s; font-size:13px; color:var(--muted); line-height:1.7; padding:0 18px; }
.faq-a.open { max-height:200px; padding:0 18px 15px; }

/* Hours */
.hours-row { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:var(--bg); border-radius:6px; margin-bottom:7px; font-size:13px; }
.hours-row .day  { font-weight:500; color:var(--green-dark); }
.hours-row .time { color:var(--muted); }
.hours-row.today { background:rgba(26,61,43,.07); border-left:3px solid var(--green); }
.hours-row.today .day { color:var(--green); font-weight:700; }
.hours-closed { color:var(--red)!important; }

/* Social big links */
.soc-big { display:flex; flex-direction:column; gap:9px; }
.soc-big-link { display:flex; align-items:center; gap:12px; padding:11px 14px; background:var(--bg); border-radius:8px; text-decoration:none; color:var(--text); transition:all .2s; border:1.5px solid transparent; }
.soc-big-link:hover { background:rgba(26,61,43,.06); border-color:var(--green); transform:translateX(4px); }
.soc-big-icon { width:38px; height:38px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.soc-big-text strong { display:block; font-size:12.5px; font-weight:600; color:var(--green-dark); }
.soc-big-text span   { font-size:11.5px; color:var(--muted); }

/* WA share */
.wa-share-btn { width:40px; min-width:40px; background:#25d366; border:none; border-radius:5px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; }
.wa-share-btn:hover { background:#1da851; }
.wa-share-btn svg { width:15px; height:15px; fill:#fff; }

/* ═══════════════════════════════════════
   PRODUCT COLOUR THUMBNAILS
═══════════════════════════════════════ */
.card-img img:hover { cursor: zoom-in; }

/* Thumbnail active state */
.card-thumbs img:hover {
  border-color: var(--green) !important;
  transform: scale(1.08);
  transition: all .2s;
}

/* ═══════════════════════════════════════
   TRUST BADGES STRIP
═══════════════════════════════════════ */
.trust-strip {
  background: #fff;
  border-bottom: 1px solid #eee;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.trust-strip::-webkit-scrollbar { display: none; }
.trust-strip-inner {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 4%;
  min-width: 100%;
}
.trust-item-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  color: var(--green-dark);
  white-space: nowrap;
  border-right: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.trust-item-badge:last-child { border-right: none; }
.trust-item-badge span { font-size: 15px; }
.trust-item-badge em {
  color: var(--green);
  font-style: normal;
  font-size: 10px;
  display: block;
  font-weight: 400;
}

/* ═══════════════════════════════════════
   WHATSAPP COMMUNITY POPUP
═══════════════════════════════════════ */
.wa-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
  padding-bottom: 70px;
}
.wa-popup-overlay.show {
  opacity: 1;
  pointer-events: all;
}
.wa-popup {
  background: #fff;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 24px 20px 20px;
  position: relative;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
}
.wa-popup-overlay.show .wa-popup {
  transform: translateY(0);
}
.wa-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #f0f0f0;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
}
.wa-popup-icon {
  width: 54px;
  height: 54px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  font-size: 1.6rem;
}
.wa-popup h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--green-dark);
  text-align: center;
  margin-bottom: 6px;
}
.wa-popup p {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 18px;
}
.wa-popup-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-popup-join {
  width: 100%;
  background: #25d366;
  color: #fff;
  border: none;
  padding: 13px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background .2s;
}
.wa-popup-join:hover { background: #1da851; }
.wa-popup-later {
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  padding: 8px;
  cursor: pointer;
}
.wa-popup-later:hover { color: var(--green-dark); }
.wa-popup-perks {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.wa-popup-perk {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}

/* ═══════════════════════════════════════
   SHOP PAGE — Missing classes fix
═══════════════════════════════════════ */
.products-wrap   { padding:14px 4% 28px; }
.shop-page-wrap  { max-width:1200px; margin:0 auto; }

.badge-tag {
  position:absolute; top:7px; left:7px; z-index:2;
  font-size:9px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; padding:3px 7px; border-radius:3px;
}
.badge-hot   { background:var(--gold);  color:var(--green-dark); }
.badge-sale  { background:var(--red);   color:#fff; }
.badge-new   { background:var(--green); color:#fff; }
.badge-hotel { background:#7c3aed;      color:#fff; }

.card-note { font-size:10.5px; color:var(--muted); }
.card-price-row { display:flex; align-items:center; gap:6px; }
.card-old-price { font-size:11px; color:#bbb; text-decoration:line-through; }

.no-results {
  grid-column:1/-1; text-align:center;
  padding:56px 20px; background:#fff; border-radius:10px;
}
.no-results .nr-icon { font-size:3rem; margin-bottom:12px; display:block; }
.no-results p { font-size:14px; color:var(--muted); margin-bottom:16px; }

/* ═══════════════════════════════════════
   IMAGE PLACEHOLDER & PERFORMANCE
═══════════════════════════════════════ */

/* Smooth image loading */
.card-img img,
.gallery-main img,
#qv-main-img {
  transition: opacity .3s ease;
}

/* Card image placeholder background */
.card-img {
  background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
}

/* Skeleton shimmer for loading state */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.img-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Placeholder icon */
.img-placeholder {
  position: absolute;
  font-size: 2.5rem;
  opacity: .2;
  pointer-events: none;
}

/* Fix card-qv button */
.card-qv {
  position: absolute;
  bottom: -36px;
  left: 0; right: 0;
  background: rgba(26,61,43,.9);
  color: #fff;
  border: none;
  padding: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  transition: bottom .3s;
  width: 100%;
  cursor: pointer;
}
.product-card:hover .card-qv { bottom: 0; }

/* Speed: contain layout shifts */
.card-img {
  contain: layout;
}

/* Thumb strip smooth transition */
.gallery-thumb img,
.thumb-strip img {
  transition: border-color .2s, transform .2s;
}

/* ═══════════════════════════════════════
   DRAWERS — Cart & Wishlist
═══════════════════════════════════════ */
.cart-drawer,
.wl-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 380px;
  background: #fff;
  z-index: 2000;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 24px rgba(0,0,0,.12);
}
.cart-drawer.open,
.wl-drawer.open {
  transform: translateX(0);
}
.cart-overlay,
.wl-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1999;
  display: none;
  transition: opacity .3s;
}
.cart-overlay.open,
.wl-overlay.open {
  display: block;
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}
.drawer-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; color: var(--green-dark);
}
.drawer-close {
  background: #f0f0f0; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 14px; cursor: pointer; color: #333;
}
.drawer-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
}
.drawer-footer {
  padding: 14px 18px;
  border-top: 1px solid #f0f0f0;
  flex-shrink: 0;
  background: #fff;
}
.drawer-empty {
  text-align: center; padding: 48px 20px;
  color: var(--muted);
}
.drawer-empty-icon { font-size: 3rem; margin-bottom: 12px; opacity: .4; }
.cart-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; background: var(--bg); border-radius: 8px;
  margin-bottom: 8px;
}
.cart-item-img { width: 52px; height: 52px; flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-size: 12px; font-weight: 600; color: var(--green-dark); }
.cart-item-price { font-size: 11.5px; color: var(--green); font-weight: 700; margin-top: 2px; }
.qty-control { display: flex; align-items: center; gap: 5px; }
.qty-btn {
  width: 24px; height: 24px; border-radius: 50%;
  background: #f0f0f0; border: none; font-size: 14px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--green-dark);
}
.qty-btn:hover { background: var(--green); color: #fff; }
.qty-val { font-size: 13px; font-weight: 700; min-width: 20px; text-align: center; }
.remove-btn {
  background: none; border: none; color: #ccc;
  font-size: 15px; cursor: pointer; padding: 4px;
  flex-shrink: 0;
}
.remove-btn:hover { color: var(--red); }
.pay-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  border: 1.5px solid #e0e0e0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 8px; transition: all .2s; background: #fff;
}
.pay-opt.sel-paid  { border-color: var(--green); color: var(--green); background: rgba(26,61,43,.05); }
.pay-opt.sel-nopay { border-color: var(--gold);  color: var(--green-dark); background: rgba(200,169,81,.08); }
.delivery-bar-wrap { background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.delivery-bar-track { height: 6px; background: #e0e0e0; border-radius: 3px; overflow: hidden; margin: 6px 0; }
#delivery-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .4s ease; width: 0%; }