:root{
  /* === MyOasis palette === */
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft: rgba(38,40,51,.03);

  /* Header/menu/footer */
  --menu:#262833;
  --menu2:#3c3f50;

  /* Text */
  --txt:#262833;
  --muted: rgba(38,40,51,.70);

  /* Accent */
  --wa:#39e991;
  --wa2:#18d777;
  --wa3:#67eeaa;

  /* Borders / shadows (clean premium) */
  --border: rgba(38,40,51,.12);
  --border2: rgba(38,40,51,.08);

  --shadow: 0 18px 46px rgba(38,40,51,.14);
  --shadow2: 0 10px 22px rgba(38,40,51,.08);
  --shadow3: 0 26px 70px rgba(38,40,51,.14);

  --radius: 18px;

  /* Focus ring */
  --focus: 0 0 0 4px rgba(57,233,145,.18);
}

/* =========================================================
   Base
========================================================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--txt);
  background: var(--bg);
  line-height:1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img{max-width:100%;height:auto;display:block;border-radius:16px}
a{color:inherit;text-decoration:none}
strong{color:inherit}

.container{max-width:1120px;margin:0 auto;padding:0 18px}

/* Unified section rhythm */
.section{padding:62px 0}
.section.alt{background: var(--surface-soft)}
.sectionHead{margin-bottom:18px}
.sectionHead h2{
  margin:0 0 10px;
  font-size:clamp(22px, 2.4vw, 36px);
  letter-spacing:-.02em;
}
.muted{color:var(--muted)}
.small{font-size:13px}

/* A11y helper */
.srOnly{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Skip */
.skip{
  position:absolute;left:-999px;top:12px;
  background:var(--menu);color:#fff;padding:10px 12px;border-radius:10px;
}
.skip:focus{left:12px;z-index:9999}

/* =========================================================
   Motion preferences
========================================================= */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .card, .shot, .btn, .footerCtaBtn, .menu.menuV2 > a, .dropMenu a, .navSearch button{
    transition:none !important;
  }
}

/* =========================================================
   Header (clean premium)
========================================================= */
.header{
  position:sticky;top:0;z-index:50;
  background: rgba(38,40,51,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(38,40,51,.28);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header.elevated{
  background: rgba(38,40,51,.98);
  box-shadow: 0 14px 28px rgba(38,40,51,.32);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

/* Brand */
.brand img{
  height:46px;width:auto;
  border-radius:0;
}
@media (max-width: 768px){
  .brand img{
    content: url("/static/img/logo-myoasis-icon-white.svg");
    height: 42px;
  }
}

/* =========================================================
   Desktop Menu (clean premium)
========================================================= */
.menu{
  display:flex;
  align-items:center;
  gap:10px;
}
.menu.menuV2{
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
}

.menu.menuV2 > a,
.menu.menuV2 .hasDrop > a{
  display:inline-flex;
  align-items:center;
  height:40px;
  padding:0 10px;
  border-radius:12px;
  font-weight:900;
  position:relative;
  color: rgba(255,255,255,.86);
  border:1px solid transparent;
  background:transparent;
  transition: background .14s ease, color .14s ease, border-color .14s ease, transform .14s ease;
}

.menu.menuV2 > a::after,
.menu.menuV2 .hasDrop > a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:6px;
  height:1px;
  border-radius:1px;
  background:transparent;
  transition: background .14s ease;
}

.menu.menuV2 > a:hover,
.menu.menuV2 .hasDrop > a:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.98);
  transform: translateY(-1px);
}

.menu.menuV2 > a.active,
.menu.menuV2 .hasDrop > a.active{
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,.98);
}
.menu.menuV2 > a.active::after,
.menu.menuV2 .hasDrop > a.active::after{
  background: rgba(57,233,145,.95);
}

.menu.menuV2 > a:focus,
.menu.menuV2 .hasDrop > a:focus{
  outline:none;
  box-shadow: var(--focus);
}

/* =========================================================
   Dropdown (clean premium)
========================================================= */
.hasDrop{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.hasDrop::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:10px;
}

.dropMenu{
  position:absolute;
  top:100%;
  left:0;
  min-width: 260px;
  padding:10px;
  border-radius: 16px;

  background: rgba(38,40,51,.98);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
  z-index: 80;

  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}

.hasDrop:hover .dropMenu,
.hasDrop:focus-within .dropMenu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}

.dropMenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  font-weight:900;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.dropMenu a::after{content:none !important}

.dropMenu a:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.dropMenu a.active{
  background: rgba(255,255,255,.08);
  border-color: rgba(57,233,145,.22);
}

.dropMenu hr{
  border:none;
  border-top:1px solid rgba(255,255,255,.10);
  margin:10px 0;
}

/* =========================================================
   Header Search (clean premium)
========================================================= */
.navSearchWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.navSearch{
  display:flex;
  align-items:center;
  height:40px;
  gap:8px;
  margin-left: 6px;
  padding:4px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.navSearch:focus-within{
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  background: rgba(255,255,255,.07);
}

.navSearch input{
  width: 220px;
  height:32px;
  border:0;
  outline:none;
  background: transparent;
  color: rgba(255,255,255,.92);
  padding: 0 10px;
  border-radius: 999px;
  box-shadow:none;
}
.navSearch input::placeholder{color: rgba(255,255,255,.55)}

.navSearch button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.navSearch button:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}
.navSearch button:active{transform: translateY(0)}

@media (max-width: 1100px){
  .navSearch input{ width: 170px; }
}

/* =========================================================
   Autocomplete dropdown (clean)
========================================================= */
.search-results{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(520px, 92vw);
  background: rgba(38,40,51,.98);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,.42);
  padding: 10px;
  z-index: 120;

  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}
.search-results.open{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.search-sec{margin-bottom:10px}
.search-sec:last-child{margin-bottom:0}
.search-sec__title{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(255,255,255,.60);
  font-weight:900;
  margin: 6px 6px 8px;
}
.search-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.search-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.14);
  transform: translateY(-1px);
}
.search-item__title{font-weight:900}
.search-item__meta{font-size:12px;color: rgba(255,255,255,.68)}
.navSearchWrap--mobile{width:100%}
.navSearchWrap--mobile .search-results{width:100%;left:0}

/* =========================================================
   Fix: visible search text + selection + autofill
========================================================= */
.header .navSearch input[type="search"],
.header .navSearch input[name="q"],
.header .navSearch input{
  color: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92) !important;
}
.header .navSearch input::placeholder{
  color: rgba(255,255,255,.55) !important;
  opacity: 1 !important;
}
.header .navSearch input::selection{
  background: rgba(57,233,145,.28) !important;
  color: #062016 !important;
}
.header .navSearch input:-webkit-autofill,
.header .navSearch input:-webkit-autofill:hover,
.header .navSearch input:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0px 1000px rgba(38,40,51,.60) inset !important;
  border-radius: 999px;
}

/* =========================================================
   Hamburger / Mobile menu
========================================================= */
.hamburger{
  display:none;background:none;border:0;
  padding:10px;border-radius:12px;
}
.hamburger:hover{background: rgba(255,255,255,.08)}
.hamburger span{
  display:block;width:22px;height:2px;
  background:rgba(255,255,255,.85);
  margin:5px 0;border-radius:2px;
}

.mobileMenu{
  display:none;
  flex-direction:column;
  gap:6px;
  padding:14px 14px 18px;

  background: rgba(38,40,51,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mobileMenu.open{display:flex}

.mobileMenu a{
  position:relative;
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight:900;
  border:1px solid rgba(255,255,255,.10);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.mobileMenu a:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
  transform: translateY(-1px);
}

.mobileMenu a.active{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.98);
  padding-left:18px;
}
.mobileMenu a.active::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:3px;
  background: rgba(57,233,145,.95);
}

.navSearchMobile{
  margin: 6px 0 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  height:auto;
  padding:6px;
}
.navSearchMobile input{width:100%;height:40px}
.navSearchMobile button{width:44px;height:40px}

/* =========================================================
   Buttons (clean premium)
========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow2);
  font-weight:950;
  letter-spacing:-.01em;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn:active{transform: translateY(0); box-shadow: var(--shadow2)}

.btnPrimary{
  background: var(--wa);
  color:#062016;
  border-color: rgba(57,233,145,.55);
}
.btnPrimary:hover{
  background: var(--wa3);
  border-color: rgba(57,233,145,.60);
}

.btnGhost{
  background: #fff;
  color: var(--txt);
  border-color: var(--border);
}
.btnGhost:hover{background: rgba(38,40,51,.02)}

.link{color: var(--wa2); font-weight:900}
.link:hover{color: var(--wa); text-decoration: underline}

/* =========================================================
   Hero (clean – sin gradientes)
========================================================= */
.hero{
  padding:46px 0 30px;
  background: var(--surface-soft);
}
.heroInner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.kicker{
  color: rgba(38,40,51,.55);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  margin:0 0 10px;
}
.hero h1{
  margin:0 0 12px;
  font-size:clamp(30px, 3.4vw, 56px);
  line-height:1.05;
  letter-spacing:-.03em;
}
.lead{
  color: rgba(38,40,51,.72);
  font-size:clamp(16px, 1.25vw, 18px);
  margin:0 0 18px;
}
.ctaRow{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.trustRow{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  padding:8px 10px;border-radius:999px;
  background: rgba(57,233,145,.10);
  border:1px solid rgba(57,233,145,.18);
  font-size:12px;
  color: rgba(38,40,51,.78);
}

/* =========================================================
   Surfaces (clean glass OFF: lo dejamos sólido)
========================================================= */
.heroCard,
.card,
.shot,
.pageHeroCard,
details,
.callout,
.carouselShell{
  background: #fff;
  border: 1px solid var(--border2);
}

.heroCard{
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow3);
}

.heroCardOverlay{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.stat{
  padding:10px 12px;border-radius:14px;
  background: rgba(38,40,51,.02);
  border:1px solid var(--border2);
}
.stat strong{display:block;color: var(--txt)}
.stat span{display:block;color: rgba(38,40,51,.65);font-size:12px}

/* =========================================================
   Cards / gallery (clean hover, sin glow)
========================================================= */
.cards{display:grid;grid-template-columns: repeat(3, 1fr);gap:16px}
.card{
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow3);
  border-color: rgba(38,40,51,.14);
}

.cardBody{padding:16px}
.card h3{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:-.01em;
}
.card p{margin:0 0 10px;color: rgba(38,40,51,.76)}
.miniList{margin:10px 0 0;padding-left:16px;color: rgba(38,40,51,.74)}
.miniList li{margin:6px 0}
.card img{border-radius: 16px 16px 0 0}

.gallery{display:grid;grid-template-columns: repeat(3, 1fr);gap:16px}
.shot{
  padding:12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.shot:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow3);
  border-color: rgba(38,40,51,.14);
}
.shot figcaption{margin-top:10px;color: rgba(38,40,51,.72);font-size:13px}

/* =========================================================
   FAQ / details
========================================================= */
.faq{display:grid;gap:10px}
details{
  border-radius: 16px;
  padding:12px 14px;
  box-shadow: var(--shadow2);
}
summary{cursor:pointer;font-weight:950;color: var(--txt)}
details p{margin:10px 0 0;color: rgba(38,40,51,.76)}

/* =========================================================
   CTA + Form (clean)
========================================================= */
.cta .ctaBox{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  padding:20px;
  border-radius: var(--radius);
  background: #fff;
  border:1px solid var(--border2);
  box-shadow: var(--shadow3);
}

.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label span{
  display:block;
  font-size:12px;
  color: rgba(38,40,51,.74);
  margin:0 0 6px;
  font-weight:950;
  letter-spacing:.02em;
}

input,select,textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(38,40,51,.14);
  background: #fff;
  color: var(--txt);
  padding:12px 12px;
  outline:none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
input:focus,select:focus,textarea:focus{
  border-color: rgba(57,233,145,.70);
  box-shadow: var(--focus);
}
textarea{resize:vertical}
.full{grid-column:1 / -1}

/* =========================================================
   Global page headers (clean)
========================================================= */
.pageHero,
.articleHero{
  padding:46px 0 10px;
  background: var(--surface-soft);
}
.pageHero.compact{padding:36px 0 0}
.pageHeroInner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:center;
}
.pageHeroCard{
  border-radius: var(--radius);
  padding:12px;
  box-shadow: var(--shadow2);
}

.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

/* Uniform list style */
.check{margin:12px 0 0;padding-left:0;list-style:none}
.check li{
  margin:10px 0;
  padding-left:28px;
  position:relative;
  color: rgba(38,40,51,.82)
}
.check li::before{
  content:"";
  position:absolute;left:0;top:8px;
  width:16px;height:16px;border-radius:6px;
  background: var(--wa);
}

/* =========================================================
   Article / blog typography (clean)
========================================================= */
.crumbs{color: rgba(38,40,51,.68);font-size:13px}
.crumbs a{color: var(--wa2);font-weight:950}
.prose{max-width:820px}
.prose h1{
  margin: 8px 0 12px;
  font-size: clamp(26px, 3vw, 44px);
  line-height:1.08;
  letter-spacing:-.03em;
}
.prose h2{
  margin:26px 0 10px;
  color: var(--txt);
  letter-spacing:-.02em
}
.prose h3{margin:18px 0 8px;letter-spacing:-.01em}
.prose p,.prose li{color: rgba(38,40,51,.82)}
.prose ul{margin:10px 0 18px;padding-left:18px}
.prose li{margin:8px 0}
.prose a{color: var(--wa2); font-weight:900}
.prose a:hover{color: var(--wa); text-decoration: underline}
.prose blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-radius: var(--radius);
  background: rgba(38,40,51,.02);
  border:1px solid var(--border2);
  box-shadow: var(--shadow2);
}
.prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .95em;
  background: rgba(38,40,51,.05);
  padding: 2px 6px;
  border-radius: 8px;
  border:1px solid rgba(38,40,51,.10);
}

.callout{
  margin:22px 0;
  padding:16px;
  border-radius: var(--radius);
  background: #fff;
  border:1px solid var(--border2);
  box-shadow: var(--shadow2);
}
.meta{
  margin-top:10px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(38,40,51,.02);
  border:1px solid var(--border2);
  color: rgba(38,40,51,.78);
}

/* =========================================================
   Reveal animations
========================================================= */
.reveal{
  opacity:0;
  transform: translate3d(0,10px,0);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.in{opacity:1;transform: translate3d(0,0,0)}
.delay1{transition-delay:.06s}
.delay2{transition-delay:.12s}

/* =========================================================
   Top carousel (clean)
========================================================= */
.topCarousel{padding:16px 0 10px;background: var(--surface-soft)}
.carouselShell{
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(38,40,51,.10);
  overflow:hidden;
}
.carouselTrack{display:flex;overflow:hidden;scroll-behavior:smooth}
.slide{min-width:100%;position:relative;margin:0}
.slide img{width:100%;height:auto;display:block;border-radius:0}
.slideCap{
  position:absolute;left:14px;right:14px;bottom:14px;
  padding:12px 12px;border-radius: 16px;
  background: rgba(255,255,255,.94);
  border:1px solid rgba(38,40,51,.12);
  box-shadow: 0 10px 18px rgba(38,40,51,.10);
  display:flex;flex-direction:column;gap:4px;
}
.tag{
  display:inline-flex;align-self:flex-start;
  padding:6px 10px;border-radius:999px;
  background: rgba(57,233,145,.12);
  color: rgba(38,40,51,.78);
  border:1px solid rgba(57,233,145,.18);
  font-weight:950;
  font-size:12px;
}
.carouselControls{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 12px;
  background: rgba(255,255,255,.94);
  border-top:1px solid rgba(38,40,51,.10);
}
.cBtn{
  width:40px;height:34px;border-radius:12px;
  border:1px solid rgba(38,40,51,.10);
  background: rgba(255,255,255,.96);
  font-weight:950;cursor:pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.cBtn:hover{
  background: rgba(38,40,51,.02);
  border-color: rgba(38,40,51,.14);
  transform: translateY(-1px);
}
.cBtn:active{transform: translateY(0)}
.dots{display:flex;gap:6px;align-items:center;justify-content:center;flex:1}
.dot{
  width:8px;height:8px;border-radius:999px;
  background: rgba(38,40,51,.22);
  border:1px solid rgba(38,40,51,.10);
  cursor:pointer;
}
.dot.active{background: var(--wa)}
@media (max-width: 920px){
  .slideCap{left:10px;right:10px;bottom:10px}
  .carouselControls{padding:10px}
}

/* Icon button (cart future) */
.iconBtn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255,255,255,.92);
  transition: background .14s ease, color .14s ease;
}
.iconBtn:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.98);
}
.iconBtn .icon{display:block}
/* Cart badge disabled (catalog mode) */
.iconBtn .badge{
  display: none !important;
}


/* =========================================================
   Footer (same tone as header)
========================================================= */
.footer{
  padding: 56px 0 22px;
  background: rgba(38,40,51,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 -10px 22px rgba(38,40,51,.24);
  color: rgba(255,255,255,.88);
}
.footer *{color: inherit}
.footer a{color: rgba(255,255,255,.88)}
.footer a:hover{color: rgba(255,255,255,.98)}
.footer strong{color: rgba(255,255,255,.92)}

.footerInner{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items:center;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footerBrandCol img,
.footerLogo img{
  height: 42px;
  width:auto;
  border-radius:0;
}
.footerDesc{
  margin: 14px 0 16px;
  max-width: 46ch;
  color: rgba(255,255,255,.70);
}
.footerBadges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.fBadge{
  padding: 7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:900;
  color: rgba(255,255,255,.85);
}
.footerCtaCol{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.footerCtaBtn{
  padding:14px 18px;
  border-radius:999px;
  background: var(--wa);
  color:#062016 !important;
  font-weight:950;
  border: 1px solid rgba(57,233,145,.55);
  box-shadow: 0 16px 40px rgba(0,0,0,.34);
  transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.footerCtaBtn:hover{
  transform: translateY(-1px);
  background: var(--wa3);
  box-shadow: 0 18px 46px rgba(0,0,0,.38);
}
.footerMini{
  color: rgba(255,255,255,.55);
  font-size:13px;
  text-align:right;
}
.footerBottom{
  margin-top: 18px;
  font-size:13px;
  color: rgba(255,255,255,.45);
  text-align:center;
}
@media (max-width: 920px){
  .footerInner{grid-template-columns:1fr;gap:22px}
  .footerCtaCol{align-items:flex-start}
  .footerMini{text-align:left}
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 920px){
  .heroInner,.pageHeroInner,.cta .ctaBox,.split{grid-template-columns:1fr}
  .cards,.gallery{grid-template-columns:1fr}
  .menu{display:none}
  .hamburger{display:block}
  .section{padding:56px 0}
}

/* =========================================================
   Autocomplete product thumbnail
========================================================= */
.search-item--product{
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.search-thumb{
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(255,255,255,.08);
}

.search-item--product .search-item__title{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.tag-new{
  background: rgba(57,233,145,.18);
  border:1px solid rgba(57,233,145,.35);
  color:#0b3d26;
}

.tag-sold{
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.70);
}