/* ===========================================================
   ACASCIA THEME — Amazon-Style Frontend (Bootstrap 5)
   Palette: #DDF4E7, #67C090, #26667F, #124170
   =========================================================== */
/* Acascia Theme — Amazon-like, not minimalist */
/* Palette from previous version: #DDF4E7, #67C090, #26667F, #124170 */
:root{
  --mint:#DDF4E7;        /* footer bg */
  --accent:#67C090;      /* primary brand */
  --teal:#26667F;        /* links/hover */
  --navy:#124170;        /* navbar/headings */

  --page:#f6f8fb;
  --bs-body-bg: var(--page);
  --bs-body-color: #1f2d3d;
  --bs-primary: var(--accent);
  --bs-primary-rgb: 103,192,144;
  --bs-link-color: var(--teal);
  --bs-link-hover-color: var(--navy);
}

*{box-sizing:border-box}
body{
  font-family: 'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  background: var(--page);
  color: var(--bs-body-color);
  line-height: 1.4;
}
h1,h2,h3,h4,h5,h6{ color:var(--navy); letter-spacing:.2px }

/* NAVBAR (Amazon-ish) */
.navbar-acascia{ background:var(--navy) }
.navbar-acascia .navbar-brand{ font-weight:700; color:#fff !important; letter-spacing:.4px }
.navbar-acascia .nav-link{ color:#e7eef7 !important; opacity:.95 }
.navbar-acascia .nav-link:hover{ opacity:1 }
.navbar-acascia .badge-cart{
  background:#fff; color:var(--navy); font-weight:700; border-radius:.5rem; padding:.15rem .35rem; margin-left:.15rem;
}

/* SEARCH BAR */
.searchbar{ max-width: 780px }
.searchbar .input-group-text{ background:#fff }
.autocomplete-panel{
  position:absolute; z-index:20; top:100%; left:0; right:0;
  background:#fff; border:1px solid #e6e9ef; border-top:none; border-radius:0 0 .75rem .75rem;
  box-shadow:0 18px 38px rgba(18,65,112,.12);
  overflow:hidden;
}
.autocomplete-item{ display:flex; align-items:center; gap:.65rem; padding:.55rem .8rem; cursor:pointer }
.autocomplete-item:hover{ background:#f5f8fb }

/* HERO */
.hero{
  background:url('/assets/img/hero.jpg') center/cover no-repeat;
  min-height: 420px; border-radius:1rem; position:relative; overflow:hidden;
}
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(18,65,112,.25),rgba(18,65,112,.55)) }
.hero .inner{ position:relative; z-index:2; padding:clamp(1.6rem,4vw,4rem); color:#fff; text-align:center }
.hero .btn-primary{ font-weight:700; padding:.7rem 1.25rem; border-radius:.6rem }

/* CATEGORY CARDS */
.cat-card{ position:relative; border-radius:1rem; overflow:hidden; min-height:160px; background:#fff; }
.cat-card img{ width:100%; height:100%; object-fit:cover; display:block }
.cat-card .label{
  position:absolute; left:1rem; bottom:1rem; background:rgba(0,0,0,.55); color:#fff;
  padding:.35rem .6rem; border-radius:.5rem; font-weight:600; backdrop-filter: blur(2px);
}

/* PRODUCT CARDS */
.card{ border:none; border-radius:1rem; background:#fff; box-shadow:0 12px 28px rgba(18,65,112,.08) }
.card .card-body{ padding:1rem 1rem 1.1rem }
.product-img{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:#f7f8fa; border-top-left-radius:1rem; border-top-right-radius:1rem;
}
.price{ font-weight:800; font-size:1.05rem; color:#0b7f57 }
.brand{ color:#6c7a89; font-size:.9rem }

/* TRUST BADGES */
.trust i{ font-size:1.6rem; color:var(--teal) }
.trust .card{ text-align:center; padding:1.25rem }

/* FOOTER */
footer.site-footer{ background:var(--mint) }
footer.site-footer .text-muted{ color:#2b4b6c !important }

/* UTILITIES */
.text-navy{ color:var(--navy) }
.rounded-xl{ border-radius:1.25rem }
.badge-soft{ background:rgba(103,192,144,.15); color:var(--teal) }

/* GRID SPACING FOR AMAZON FEEL */
.section{ padding-block: 1.4rem }
.section + .section{ padding-top: 0 }



/* =========================================================
   [PATCH THEME] Refuerzos visuales (mantiene paleta actual)
   ========================================================= */

.navbar-dark { background-color: var(--navy) !important; }
.navbar-dark .nav-link { font-weight:600; opacity:.95; }
.navbar-dark .nav-link:hover { opacity:1; }

.input-group .form-control { height: 46px; }
.input-group .btn { height: 46px; }

.card { border:none; box-shadow:0 10px 28px rgba(18,65,112,.10); border-radius:1rem; }
.card .card-body { padding:1rem; }

.hero{ min-height:460px; border-radius:1.25rem; overflow:hidden;
  background:url('/assets/hero.jpg') center/cover no-repeat; position:relative; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,65,112,.35), rgba(18,65,112,.75)); }
.hero .inner{ position:relative; z-index:2; color:#fff; padding:clamp(2rem, 4vw, 4rem); text-align:center; }
.hero .inner .btn-lg{ padding:.8rem 1.6rem; font-weight:700; }

.trust { text-align:center; padding:1.25rem; border-radius:1rem; }
.trust i { font-size:1.8rem; color:var(--teal); }

.cat-card{ position:relative; border-radius:1rem; overflow:hidden; min-height:170px; }
.cat-card img{ width:100%; height:100%; object-fit:cover; }
.cat-card .label{
  position:absolute; left:1rem; bottom:1rem;
  background:rgba(0,0,0,.55); color:#fff; padding:.4rem .65rem; border-radius:.5rem;
  font-weight:700; letter-spacing:.2px; }

.btn-primary{ background:var(--accent); border-color:var(--accent); font-weight:700; }
.btn-primary:hover{ background:var(--teal); border-color:var(--teal); }












/* --------- Brand Palette --------- */
:root {
  --mint: #DDF4E7;     /* footer & highlights */
  --accent: #67C090;   /* primary */
  --teal: #26667F;     /* hover / links */
  --navy: #124170;     /* main navbar / headings */
  --page: #f6f8fb;     /* background */

  --bs-body-bg: var(--page);
  --bs-body-color: var(--navy);
  --bs-primary: var(--accent);
  --bs-primary-rgb: 103,192,144;
  --bs-link-color: var(--teal);
  --bs-link-hover-color: var(--navy);
  --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
}

/* --------- General --------- */
body {
  background: var(--page);
  color: var(--bs-body-color);
  font-family: var(--bs-font-sans-serif);
}
h1,h2,h3,h4,h5,h6 {
  color: var(--navy);
  font-weight: 600;
}

/* --------- Navbar / Header --------- */
.navbar-dark {
  background-color: var(--navy) !important;
}
.navbar-dark .navbar-brand {
  font-weight: 700;
  letter-spacing: 0.5px;
}
.navbar-dark .nav-link {
  color: #fff !important;
  opacity: .9;
}
.navbar-dark .nav-link:hover {
  opacity: 1;
  color: var(--mint) !important;
}

/* Search Bar */
header form input[type="text"] {
  border-radius: 50rem;
  border: none;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
}
header form input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 0 0.15rem rgba(103,192,144,.25);
}

/* --------- Hero Section --------- */
.hero {
  background: url('/assets/img/hero.jpg') center/cover no-repeat;
  min-height: 420px;
  border-radius: 1.25rem;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18,65,112,.35), rgba(18,65,112,.65));
}
.hero > .inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: clamp(2rem, 4vw, 4rem);
}
.hero h1 {
  font-weight: 700;
  color: #fff;
}
.hero p {
  font-size: 1.1rem;
  opacity: .95;
}

/* --------- Buttons --------- */
.btn-primary {
  background-color: var(--accent);
  border-color: var(--accent);
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--teal);
  border-color: var(--teal);
}
.btn-outline-primary {
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline-primary:hover {
  background-color: var(--teal);
  color: #fff;
}

/* --------- Cards --------- */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(18,65,112,.08);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(18,65,112,.12);
}
.card img {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* --------- Category Cards --------- */
.cat-card {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 160px;
  background: #fff;
  cursor: pointer;
  transition: transform .2s ease;
}
.cat-card:hover { transform: scale(1.02); }
.cat-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cat-card .label {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: .35rem .6rem;
  border-radius: .5rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
}

/* --------- Trust Badges --------- */
.trust i {
  font-size: 1.8rem;
  color: var(--teal);
}
.trust .card {
  text-align: center;
  padding: 1.25rem;
}

/* --------- Footer --------- */
footer.site-footer {
  background: var(--mint);
  color: #2b4b6c;
  border-top: 2px solid var(--accent);
}
footer.site-footer a {
  color: var(--teal);
  text-decoration: none;
}
footer.site-footer a:hover {
  color: var(--navy);
  text-decoration: underline;
}

/* --------- Utilities --------- */
.badge-soft {
  background: rgba(103,192,144,.15);
  color: var(--teal);
}
.rounded-xl { border-radius: 1.25rem; }
.shadow-soft { box-shadow: 0 6px 18px rgba(18,65,112,.08); }

/* --------- Product Image Frames --------- */
.product-main {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .2s ease;
  cursor: zoom-in;
}
.product-main img.zoomed {
  transform: scale(1.04);
  cursor: zoom-out;
}

/* Thumbnails */
.thumbs img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: .5rem;
  border: 2px solid transparent;
  transition: border-color .2s ease;
}
.thumbs img:hover,
.thumbs img.active {
  border-color: var(--bs-primary);
}

/* Scrollbar cleanup */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background-color: rgba(18,65,112,.3);
  border-radius: 4px;
}