:root{
  --bg:#fbf7f2;
  --card:#ffffff;
  --text:#1f2328;
  --muted:#6b7280;
  --line:#ece5dc;
  --primary:#1f2937;
  --accent:#b08d57;
  --danger:#c0362c;
  --shadow:0 10px 30px rgba(31,35,40,.08);
  --shadow2:0 6px 16px rgba(31,35,40,.08);
  --radius:16px;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
.wrap{width:min(1120px,92%);margin:0 auto}

/* header */
.topbar{position:sticky;top:0;z-index:50;background:rgba(251,247,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand a{color:var(--text);text-decoration:none;font-weight:900;letter-spacing:.6px}
.tag{display:inline-block;margin-left:10px;font-size:12px;color:var(--muted)}
nav a{color:var(--text);text-decoration:none;margin-left:14px;font-weight:700;opacity:.9}
nav a:hover{opacity:1;color:var(--accent)}
nav a.cart{padding:10px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow2)}
/* ===== HEADER LOGO ===== */
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand{
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo{
  height: 64px;
  width: auto;
  object-fit: contain;
}

/* Mobile */
@media (max-width: 800px){
  .brand-logo{
    height: 38px;
  }
}

/* hero */
.hero{margin:18px 0;padding:22px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.hero h1{margin:0 0 8px 0;font-size:clamp(22px,3vw,34px)}
.hero p{margin:0;color:var(--muted);line-height:1.5}
.hero-inner{max-width:720px}
.hero-cta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.paybox{margin-top:14px;border-radius:14px;padding:12px;background:#fffaf2;border:1px dashed rgba(176,141,87,.45)}
.paybox strong{color:var(--primary)}
.btn{display:inline-block;padding:12px 14px;border-radius:14px;background:var(--primary);color:#fff;text-decoration:none;font-weight:900}
.btn:hover{background:#111827}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid rgba(176,141,87,.55)}
.btn-ghost:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero-banner{
  background-image:
    radial-gradient(1200px 300px at 10% 0%, rgba(176,141,87,.18), transparent 50%),
    radial-gradient(900px 280px at 90% 10%, rgba(15,61,46,.12), transparent 55%),
    url("../images/brand/hero.jpg");
  background-size:cover;background-position:center;
}

/* filters */
.filters{display:flex;gap:10px;margin:14px 0 18px}
.filters input,.filters select{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--card);outline:none}
.filters input:focus,.filters select:focus{border-color:rgba(176,141,87,.6);box-shadow:0 0 0 4px rgba(176,141,87,.12)}
.filters button{padding:12px 14px;border:0;border-radius:14px;background:var(--primary);color:#fff;font-weight:900;cursor:pointer}
.filters button:hover{background:#111827}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow2);transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.card a{color:inherit;text-decoration:none;display:block}
.imgbox{position:relative;height:190px;background:#f4efe8;display:flex;align-items:center;justify-content:center}
.imgbox img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;top:12px;left:12px;background:rgba(176,141,87,.95);color:#fff;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900}
.cardbody{padding:14px}
.title{font-weight:900}
.meta{color:var(--muted);font-size:13px;margin-top:4px}
.price{margin-top:10px;font-weight:900;color:var(--primary)}
.price .old{color:var(--muted);font-weight:700;margin-left:8px;text-decoration:line-through}
.addform{padding:12px 14px 14px;border-top:1px solid var(--line)}
.addform button{width:100%;padding:12px 14px;border:1px solid rgba(176,141,87,.55);border-radius:14px;background:#fffaf2;color:var(--primary);font-weight:900;cursor:pointer}
.addform button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* sections */
.section{margin:22px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:12px}
.section-head h2{margin:0}
.muted{color:var(--muted);margin:0}

.collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.collection{display:block;padding:16px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--text);box-shadow:var(--shadow2)}
.collection:hover{border-color:rgba(176,141,87,.55)}
.collection-title{font-weight:900}
.collection-sub{color:var(--accent);font-weight:900;margin-top:6px}

.why{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.why-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow2)}
.why-title{font-weight:900;margin-bottom:6px}

.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.t-card{background:#fffaf2;border:1px dashed rgba(176,141,87,.45);border-radius:var(--radius);padding:16px}
.t-quote{font-weight:800;line-height:1.4}
.t-name{margin-top:10px;color:var(--muted);font-weight:900}

.ig{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px;border-radius:var(--radius);border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}

/* footer */
.footer{margin-top:42px;background:#171717;color:#fff;padding:22px 0}
.footer .wrap{color:rgba(255,255,255,.88)}

/* floating whatsapp */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:999px;background:#25D366;color:#0b1a10;font-weight:900;text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.18)}
.wa-float:hover{filter:brightness(.96)}
.wa-dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.9)}

/* sticky add */
.sticky-bar{display:none}
@media (max-width:800px){
  .filters{flex-direction:column}
  .sticky-bar{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(251,247,242,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:70}
  .sticky-title{font-weight:900;font-size:12px;max-width:52vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sticky-amt{font-weight:900;color:var(--accent)}
  .sticky-form{display:flex;align-items:center;gap:8px}
  .sticky-qty{width:64px;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card)}
  .sticky-btn{padding:10px 14px;border-radius:12px;border:0;background:var(--primary);color:#fff;font-weight:900}
  body{padding-bottom:78px}
  .wa-float{bottom:90px}
}


/* ===== HERO 2-COLUMN (DESKTOP) + BADGE + CTA ANIMATION ===== */
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  align-items: center;
}

.hero-copy{ max-width: 720px; }

.hero-badges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.badge-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .25px;
  background: rgba(176,141,87,.95);
  color: #fff;
  box-shadow: var(--shadow2);
}
.badge-soft{
  background: rgba(31,41,55,.92);
}

.hero-media{
  display:flex;
  justify-content: flex-end;
}
.hero-media img{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid rgba(236,229,220,.9);
  box-shadow: var(--shadow);
}

/* Subtle CTA animation on load */
@keyframes riseFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.btn-anim{
  animation: riseFade .55s ease both;
}
.btn-anim:nth-child(2){ animation-delay: .08s; }

/* keep hero copy nicely spaced */
.hero-note{ margin-top: 10px; font-size: 13px; }

/* Mobile: stack and center */
@media (max-width: 800px){
  .hero-grid{
    grid-template-columns: 1fr;
  }
  .hero-media{
    order: -1;
    justify-content: center;
  }
  .hero-media img{
    max-width: 520px;
    aspect-ratio: 16 / 10;
  }
  .hero-badges{ justify-content:center; }
}


/* ===== Homepage Quick Tiles ===== */
.tiles{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 18px;
}
.tile{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  text-decoration:none;
  color: inherit;
  box-shadow: var(--shadow2);
}
.tile:hover{ border-color: rgba(176,141,87,.55); transform: translateY(-1px); }
.tile-ico{
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #fffaf2;
  border: 1px solid rgba(176,141,87,.25);
  display:flex; align-items:center; justify-content:center;
  flex: 0 0 auto;
}
.tile-ico img{ width: 34px; height: 34px; object-fit: contain; }
.tile-title{ font-weight: 900; }
.tile-sub{ color: currentColor; opacity: .75; font-size: 13px; margin-top: 2px; }

@media (max-width: 1000px){
  .tiles{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .tiles{ grid-template-columns: 1fr; }
}


/* ===== HEADER LOGO ===== */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text);
}
.brand-logo{
  height: 42px;
  width: auto;
  object-fit: contain;
  display:block;
}
.brand-text{
  font-weight: 900;
  letter-spacing: .2px;
}
.brand-tag{
  font-weight: 900;
  color: var(--accent);
}
@media (max-width: 800px){
  .brand-logo{ height: 34px; }
  .brand-text{ font-size: 14px; }
}


/* ===== HERO CARD (BRAND STRIP + SPLIT PAYBADGE + ANIMATION) ===== */
.hero-card{
  position: relative;
  display: grid;
  gap: 16px;
  padding: 22px 22px 22px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(7px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(236,229,220,.9);
  overflow: hidden;
  margin-bottom: 10px;
}
.hero-card-side{

  gap: 16px;
  padding: 22px 22px 22px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(7px);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  border: 1px solid rgba(236,229,220,.9);
  overflow: hidden;
 
}

.hero-card-strip{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width: 10px;
  background: linear-gradient(180deg, #0f3d2e, #2e7d32);
}
.hero-card-main{ padding-left: 10px; }
.hero-sub{
  margin: 6px 0 14px;
  line-height: 1.6;
  color: #2b2b2b;
  font-size: 15px;
}
.hero-note{
  margin-top: 10px;
  color: #5f5f5f;
  font-size: 12px;
}

/* Paybadge */
.paybadge{
  height: 100%;
  border-radius: 14px;
  background: rgba(15,61,46,.06);
  border: 1px solid rgba(15,61,46,.14);
  padding: 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 10px;
}
.paybadge-title{
  font-size: large;
    letter-spacing:900;
    text-align: center;
  font-weight: 900;
  letter-spacing: .2px;
  color: #0f3d2e;
}
.paybadge-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  font-size: 13px;
  color: #1f2937;
}
.paybadge-row span{ opacity:.75; }
.paybadge-row strong{ font-weight: 900; }
.paybadge-name{
  margin-top: 4px;
  font-size: 12px;
  opacity: .8;
}

/* Animation: fade + rise */
@keyframes heroCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-card-animate{
  animation: heroCardIn .65s ease both;
}

/* Mobile: stack paybadge below, keep strip */
@media (max-width: 800px){
  .hero-card{
    grid-template-columns: 1fr;
    max-width: 100%;
    padding: 18px 16px 16px 14px;
    text-align: center;
  }
  .hero-card-main{ padding-left: 10px; }
  .hero-cta{ justify-content: center; }
  .paybadge{ text-align:left; }
}


/* ===== STICKY HEADER FX (transparent over hero, solid on scroll, logo swap) ===== */
.site-header.header-fx{
  position: sticky;
  top: 0;
  z-index: 110;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, backdrop-filter .2s ease;
}

/* Default solid state */
.site-header.header-fx{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(236,229,220,.9);
}

/* Transparent over hero (only when at top) */
.site-header.header-fx.is-top{
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom-color: transparent;
}

/* Logo sizing */
.brand-logo{
  height: 52px;             /* Larger on desktop */
  width: auto;
  object-fit: contain;
  display: block;
  transition: height .2s ease, opacity .15s ease;
}
.site-header.header-fx.is-scrolled .brand-logo{
  height: 40px;             /* Shrink on scroll */
}

/* Swap logos: light logo on transparent; dark logo on solid */
.brand-logo--dark{ opacity: 1; }
.brand-logo--light{ opacity: 0; }
.site-header.header-fx.is-top .brand-logo--dark{ opacity: 0; }
.site-header.header-fx.is-top .brand-logo--light{ opacity: 1; }

/* Auto swap for OS theme: if user prefers dark theme, flip behavior in solid state */
@media (prefers-color-scheme: dark){
  .site-header.header-fx{
    background: rgba(10,18,14,.72);
    border-bottom-color: rgba(255,255,255,.10);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
  }
  .site-header.header-fx.is-top{
    background: transparent;
    box-shadow: none;
  }
  /* In dark mode, prefer light logo on solid */
  .brand-logo--dark{ opacity: 0; }
  .brand-logo--light{ opacity: 1; }
  .site-header.header-fx.is-top .brand-logo--dark{ opacity: 0; }
  .site-header.header-fx.is-top .brand-logo--light{ opacity: 1; }
}

/* Center logo on mobile */
@media (max-width: 800px){
  .header-inner{
    justify-content: center;
  }
  .main-nav, .header-actions{ /* if these classes exist, allow them to float; keep logo centered */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .main-nav{ right: 12px; }
  .header-actions{ left: 12px; }
  .brand-logo{ height: 42px; }
  .site-header.header-fx.is-scrolled .brand-logo{ height: 34px; }
}
/* ===== HERO DEAL SLIDER ===== */
.hero-deals{
  position: relative;
  width: 100%;
  max-width: 420px;
}

.deal-slider{
  position: relative;
  width: 100%;
  height: 520px;
}

.deal-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .6s ease, transform .6s ease;
}
.deal-slide.active{
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.deal-slide.exit-left{
  opacity: 0;
  transform: translateX(-40px);
}
.deal-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: calc(var(--radius) + 6px);
  box-shadow: var(--shadow);
  border: 1px solid rgba(236,229,220,.9);
}
@media (max-width: 800px){
  .deal-slider{ height: 340px; }
}

/* ===== DEAL SLIDE OVERLAY (badge + price) ===== */
.deal-slide{
  display:block;
  text-decoration:none;
  color: inherit;
}
.deal-slide:focus{ outline: none; }
.deal-slide:focus-visible{
  outline: 3px solid rgba(46,125,50,.35);
  outline-offset: 3px;
  border-radius: calc(var(--radius) + 8px);
}
.deal-overlay{
  position:absolute;
  inset: 0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 14px;
  border-radius: calc(var(--radius) + 6px);
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.08) 40%, rgba(0,0,0,.35));
  pointer-events:none;
}
.deal-badge{
  align-self:flex-start;
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .25px;
  background: rgba(176,141,87,.95);
  color:#fff;
  box-shadow: var(--shadow2);
}
.deal-meta{
  color:#fff;
}
.deal-name{
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.deal-price{
  margin-top: 6px;
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15,61,46,.85);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}



/* ===== PAGE LAYOUT ===== */
.page{padding:22px 0 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:10px 0 18px}
.page-head h1{margin:0;font-size:28px;letter-spacing:.2px}
.page-sub{margin:6px 0 0;color:var(--muted);line-height:1.55}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.card-h{margin:0 0 12px;font-size:16px;font-weight:900}
.grid2{display:grid;grid-template-columns:1.3fr .7fr;gap:18px}
@media (max-width: 900px){.grid2{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:12px}

.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.table th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.14em}
.table tr:last-child td{border-bottom:none}
.qty{display:flex;gap:8px;align-items:center}
.qty input{width:72px;padding:10px;border-radius:12px;border:1px solid var(--line)}
.muted{color:var(--muted)}
.hr{height:1px;background:var(--line);margin:12px 0}
.summary-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0}
.summary-row strong{font-weight:900}
.sticky{position:sticky;top:92px}

/* ===== RECOMMENDATIONS STRIP ===== */
.h-scroll{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.h-scroll::-webkit-scrollbar{height:8px}
.h-scroll::-webkit-scrollbar-thumb{background:rgba(31,35,40,.12);border-radius:999px}
.snap{scroll-snap-align:start}
.rec-card{
  min-width: 220px;
  max-width: 220px;
  flex: 0 0 auto;
}
@media (max-width: 520px){
  .rec-card{min-width: 72vw;max-width: 72vw}
}