/* DORADO storefront polish v2 — 2026-09-27
   Final visual override. Keeps content/functionality intact while fixing:
   - overlapping hero/card/header composition
   - near-black page bands
   - harsh pure-white surfaces
   - low-contrast hover states
   - desktop/tablet/mobile consistency
*/

:root{
  --dorado-bg:#10212d;
  --dorado-bg-2:#132734;
  --dorado-bg-3:#172d3b;
  --dorado-panel:#19313f;
  --dorado-panel-2:#1e3746;
  --dorado-line:rgba(234,226,212,.14);
  --dorado-line-strong:rgba(234,226,212,.24);
  --dorado-ivory:#ece5d8;
  --dorado-ivory-2:#e2d8ca;
  --dorado-ink:#18242d;
  --dorado-text:#f1ece3;
  --dorado-muted:#b8c2c7;
  --dorado-gold:#d7a13a;
  --dorado-gold-soft:#e6bd68;
  --dorado-green:#25d366;
}

html{
  background:var(--dorado-bg)!important;
  scroll-padding-top:84px!important;
}
body{
  background:var(--dorado-bg)!important;
  color:var(--dorado-text)!important;
  overflow-x:hidden!important;
}
main{overflow:clip!important;}

/* =========================================================
   HEADER — clean on hero, readable after scroll
   ========================================================= */
.topbar{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

@media (min-width:981px){
  .topbar{
    position:absolute!important;
    top:8px!important;
    left:50%!important;
    z-index:96!important;
    width:auto!important;
    transform:translateX(-50%)!important;
    color:rgba(241,236,227,.80)!important;
  }
  .topbar-inner{
    width:auto!important;
    min-height:32px!important;
    margin:0!important;
    padding:0 10px!important;
    justify-content:center!important;
    gap:16px!important;
  }
  .topbar-inner span{
    color:rgba(241,236,227,.80)!important;
    font-size:10px!important;
    font-weight:750!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    text-shadow:0 2px 14px rgba(0,0,0,.40)!important;
  }
  .topbar-inner .ui-icon{color:#e4b657!important}
  .topbar-sep{
    width:3px!important;
    height:3px!important;
    background:rgba(241,236,227,.45)!important;
  }

  .nav{
    position:absolute!important;
    top:40px!important;
    left:50%!important;
    z-index:95!important;
    width:min(1180px,calc(100vw - 40px))!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 4px!important;
    transform:translateX(-50%)!important;
    grid-template-columns:minmax(170px,1fr) auto minmax(260px,1fr)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .nav .brand{
    grid-column:1!important;
    grid-row:1!important;
    justify-self:start!important;
  }
  .nav .nav-logo{
    width:76px!important;
    height:56px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 4px 15px rgba(0,0,0,.24))!important;
  }
  .nav .navlinks{
    grid-column:2!important;
    grid-row:1!important;
    justify-content:center!important;
    gap:26px!important;
  }
  .nav .navlinks a{
    padding:27px 0!important;
    color:rgba(241,236,227,.76)!important;
    font-size:10.5px!important;
    font-weight:750!important;
    letter-spacing:.025em!important;
    text-transform:uppercase!important;
    text-shadow:0 2px 14px rgba(0,0,0,.38)!important;
  }
  .nav .navlinks a:hover,
  .nav .navlinks a.active,
  .nav .navlinks a[aria-current="page"]{
    color:#fff!important;
  }
  .nav .navlinks a::after{
    bottom:18px!important;
    height:1.5px!important;
    background:var(--dorado-gold)!important;
  }
  .nav .nav-actions{
    grid-column:3!important;
    grid-row:1!important;
    justify-self:end!important;
    gap:8px!important;
  }

  .nav.scrolled{
    position:fixed!important;
    top:10px!important;
    width:min(1160px,calc(100vw - 28px))!important;
    height:64px!important;
    min-height:64px!important;
    padding:0 18px!important;
    border:1px solid var(--dorado-line)!important;
    border-radius:999px!important;
    background:rgba(16,33,45,.94)!important;
    box-shadow:0 16px 38px rgba(4,11,17,.22)!important;
    backdrop-filter:blur(14px) saturate(125%)!important;
    -webkit-backdrop-filter:blur(14px) saturate(125%)!important;
  }
  .nav.scrolled .nav-logo{width:64px!important;height:48px!important}
  .nav.scrolled .navlinks a{padding:22px 0!important}
  .nav.scrolled .navlinks a::after{bottom:13px!important}
}

/* Navigation action buttons */
.nav-cta,
.nav-cta:visited,
.orders-trigger{
  min-height:42px!important;
  color:var(--dorado-text)!important;
  background:rgba(241,236,227,.055)!important;
  border-color:rgba(241,236,227,.17)!important;
  box-shadow:none!important;
}
.nav-cta .ui-icon{color:var(--dorado-green)!important}
.nav-cta:hover,
.nav-cta:focus-visible,
.nav-cta:active{
  color:#fff!important;
  background:rgba(37,211,102,.16)!important;
  border-color:rgba(37,211,102,.52)!important;
  box-shadow:0 9px 24px rgba(37,211,102,.10)!important;
}
.nav-cta:hover .ui-icon,
.nav-cta:focus-visible .ui-icon{color:#64e492!important}
.orders-trigger:hover{
  color:#fff!important;
  background:rgba(241,236,227,.10)!important;
  border-color:rgba(241,236,227,.24)!important;
}
.cart-trigger{
  color:#10212d!important;
  background:var(--dorado-gold)!important;
  border-color:var(--dorado-gold)!important;
}
.cart-trigger:hover{
  color:#10212d!important;
  background:var(--dorado-gold-soft)!important;
  border-color:var(--dorado-gold-soft)!important;
}
.cart-count{background:#10212d!important;color:#fff!important}

/* =========================================================
   HERO — no black card, no stacking over benefit cards
   ========================================================= */
.hero-combined-scene{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(7,18,27,.03) 0%,rgba(7,18,27,.10) 58%,rgba(16,33,45,.55) 100%),
    url('../images/backgrounds/hero-bg-dorado.webp') center 48%/cover no-repeat!important;
}
.hero-combined-scene::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(90deg,
      rgba(7,18,27,.06) 0%,
      rgba(7,18,27,.05) 40%,
      rgba(7,18,27,.30) 66%,
      rgba(7,18,27,.64) 100%)!important;
}
.hero-combined-scene>.hero,
.hero-combined-scene>.dorado-field-strip{
  position:relative!important;
  z-index:1!important;
}
.hero{
  min-height:clamp(650px,86svh,840px)!important;
  padding:0!important;
  background:transparent!important;
}
.hero-bg,
.hero-bg::before{
  background:transparent!important;
  background-image:none!important;
}
.hero-bg::after{background:transparent!important}
.hero-grid{opacity:.016!important}
.hero-glow{opacity:.22!important}

.hero-shell{
  width:min(1180px,calc(100% - 56px))!important;
  min-height:clamp(650px,86svh,840px)!important;
  margin:0 auto!important;
  padding:150px 0 76px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
}
.hero-content{
  width:min(610px,49vw)!important;
  max-width:610px!important;
  margin-left:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  text-align:left!important;
  text-shadow:0 2px 18px rgba(0,0,0,.30)!important;
}
.eyebrow{
  display:inline-flex!important;
  min-height:34px!important;
  padding:0 13px!important;
  border:1px solid rgba(241,236,227,.18)!important;
  border-radius:999px!important;
  background:rgba(16,33,45,.18)!important;
  color:rgba(241,236,227,.82)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
.eyebrow-dot{background:var(--dorado-gold)!important}
.hero-content h1{
  margin-top:20px!important;
  color:#fff!important;
  font-size:clamp(46px,5.1vw,74px)!important;
  line-height:.94!important;
  letter-spacing:-.06em!important;
  text-shadow:0 3px 24px rgba(0,0,0,.30)!important;
}
.hero-content h1 span{
  color:#f0aa2e!important;
  text-shadow:0 3px 24px rgba(0,0,0,.22)!important;
}
.hero-lead{
  max-width:560px!important;
  margin-top:20px!important;
  color:rgba(241,236,227,.90)!important;
  font-size:clamp(14px,1.18vw,17px)!important;
  line-height:1.62!important;
  text-shadow:0 2px 14px rgba(0,0,0,.40)!important;
}
.hero-actions{
  margin-top:26px!important;
  gap:10px!important;
}
.hero-btn{
  min-height:50px!important;
  background:#f0a12a!important;
  color:#10212d!important;
  border-color:#f0a12a!important;
  box-shadow:none!important;
}
.hero-btn:hover{
  background:#f4b44f!important;
  color:#10212d!important;
}
.hero-secondary{
  min-height:50px!important;
  color:#fff!important;
  background:rgba(16,33,45,.18)!important;
  border:1px solid rgba(241,236,227,.30)!important;
  box-shadow:none!important;
}
.hero-secondary:hover{
  color:#fff!important;
  background:rgba(16,33,45,.42)!important;
  border-color:rgba(241,236,227,.50)!important;
}
.hero-proof{
  margin-top:22px!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px 16px!important;
  color:rgba(241,236,227,.82)!important;
  font-size:9px!important;
  text-shadow:0 2px 12px rgba(0,0,0,.40)!important;
}
.hero-proof .ui-icon{color:#e9bd61!important}
.hero-scroll{display:none!important}

/* Benefits now sit below the hero instead of overlapping it. */
.dorado-field-strip,
.hero-combined-scene .dorado-field-strip{
  width:min(1180px,calc(100% - 56px))!important;
  margin:0 auto 34px!important;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  border:1px solid rgba(241,236,227,.11)!important;
  border-radius:22px!important;
  background:rgba(16,33,45,.72)!important;
  box-shadow:0 16px 34px rgba(5,13,19,.18)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.dorado-field-strip .feature{
  min-height:122px!important;
  padding:19px!important;
  border:1px solid rgba(241,236,227,.08)!important;
  border-radius:16px!important;
  background:rgba(241,236,227,.035)!important;
  color:var(--dorado-text)!important;
}
.dorado-field-strip .feature:hover{
  background:rgba(241,236,227,.065)!important;
  border-color:rgba(215,161,58,.30)!important;
  transform:none!important;
}
.dorado-field-strip .feature strong{color:#f5f1e9!important}
.dorado-field-strip .feature span:not(.field-no){color:#b6c0c5!important}
.dorado-field-strip .field-no{color:#e0ad4b!important}

/* =========================================================
   COHERENT PAGE PALETTE
   ========================================================= */
.about{background:var(--dorado-bg-2)!important}
.dorado-story-copy h2,
.dorado-story-copy h2 span,
.dorado-story-copy>p,
.about-copy-note,
.about-highlight strong{
  color:var(--dorado-text)!important;
}
.about-copy-note,
.about-highlight span{color:#b7c1c6!important}
.about-highlight{
  border-color:rgba(241,236,227,.09)!important;
}

.dorado-catalog,
.process,
.location,
.site-footer{
  background:var(--dorado-bg)!important;
}
.catalog-shell-dark{background:transparent!important}
.dorado-catalog .section-title,
.dorado-catalog .section-desc,
.process h2,
.process-step-copy strong,
.location-copy h2,
.site-footer,
.site-footer a{
  color:var(--dorado-text)!important;
}
.dorado-catalog .section-desc,
.process-step-copy p,
.location-copy>p,
.site-footer p,
.footer-bottom{
  color:#b5c0c5!important;
}

/* Product cards stay dark but not black. */
.dorado-catalog .product,
.dorado-catalog .product-info{
  background:var(--dorado-panel)!important;
  color:var(--dorado-text)!important;
  border-color:rgba(241,236,227,.10)!important;
  box-shadow:0 14px 30px rgba(5,13,19,.15)!important;
}
.dorado-catalog .product-img{
  background:
    radial-gradient(circle at 50% 42%,rgba(215,161,58,.07),transparent 44%),
    linear-gradient(145deg,var(--dorado-panel-2),#17303e)!important;
  border-bottom-color:rgba(241,236,227,.07)!important;
}
.dorado-catalog .product-info h3,
.dorado-catalog .product-price,
.dorado-catalog .product-price-current{color:var(--dorado-text)!important}
.dorado-catalog .product-card-description,
.dorado-catalog .card-quantity-row>span{color:#aeb9be!important}
.dorado-catalog .quantity-selector{
  background:#142936!important;
  border-color:rgba(241,236,227,.13)!important;
}
.dorado-catalog .quantity-selector .qty-btn,
.dorado-catalog .quantity-selector .qty-input{color:var(--dorado-text)!important}
.dorado-catalog .add-card-product{
  background:linear-gradient(135deg,#dfa93e,#bf8626)!important;
  color:#10212d!important;
}
.category-chip{
  background:var(--dorado-ivory)!important;
  color:#46545d!important;
  border-color:rgba(215,161,58,.14)!important;
}
.category-chip:hover,
.category-chip.active{
  background:#d2a03b!important;
  color:#10212d!important;
  border-color:#d2a03b!important;
}

.process-step{
  background:rgba(25,49,63,.72)!important;
  border-color:rgba(241,236,227,.09)!important;
}

/* Reviews + FAQ: warm, not glaring white. */
.trust-section{
  background:linear-gradient(180deg,#e7dfd2 0%,#ddd3c5 100%)!important;
}
.faq-section{
  background:linear-gradient(180deg,#ddd3c5 0%,#e9e2d7 100%)!important;
}
.trust-copy h2,
.faq-intro h2,
.reviews-filter-head strong,
.faq-question{
  color:#1b2730!important;
}
.trust-copy p,
.faq-intro p,
.reviews-filter-empty{color:#67727a!important}
.reviews-filter-button,
.reviews-google-link,
.reviews-filter-panel,
.faq-item{
  background:rgba(248,244,236,.62)!important;
  border-color:rgba(107,91,65,.18)!important;
  color:#26323a!important;
}
.reviews-filter-button:hover,
.reviews-google-link:hover{
  background:#f4eee4!important;
  color:#1c2730!important;
}

/* Contact: softer ivory cards over navy. */
.location{
  border-top:1px solid rgba(241,236,227,.06)!important;
}
.location-box{
  background:var(--dorado-bg-2)!important;
  border-color:var(--dorado-line)!important;
  box-shadow:0 18px 42px rgba(5,13,19,.15)!important;
}
.location-copy>p{color:#bcc5ca!important}
.contact-line{
  background:var(--dorado-ivory)!important;
  border-color:rgba(215,161,58,.11)!important;
  box-shadow:0 7px 18px rgba(5,13,19,.05)!important;
}
.contact-line:hover{
  background:var(--dorado-ivory-2)!important;
  border-color:rgba(215,161,58,.36)!important;
  box-shadow:0 10px 22px rgba(5,13,19,.08)!important;
}
.contact-line small{color:#78848b!important}
.contact-line strong{color:var(--dorado-ink)!important}
.contact-line .contact-detail{color:#6d7980!important}
.contact-icon{
  color:#bd761d!important;
  background:#f0dfbe!important;
  border-color:rgba(189,118,29,.12)!important;
}
.contact-actions>a[href*="instagram.com"]{
  background:var(--dorado-ivory)!important;
  color:var(--dorado-ink)!important;
  border-color:rgba(215,161,58,.14)!important;
}
.contact-actions>a[href*="instagram.com"]:hover{
  background:var(--dorado-ivory-2)!important;
  color:var(--dorado-ink)!important;
}
.contact-actions>a[href*="wa.me"],
.contact-actions>a[href*="wa.me"]:visited,
.contact-actions>a[href*="wa.me"]:hover,
.contact-actions>a[href*="wa.me"]:focus-visible{
  color:#fff!important;
}
.contact-actions>a[href*="wa.me"]:hover,
.contact-actions>a[href*="wa.me"]:focus-visible{
  background:#20bd5a!important;
  border-color:#20bd5a!important;
}

/* Footer */
.site-footer{
  border-top:1px solid rgba(241,236,227,.08)!important;
}
.site-footer a:hover{color:#e6bd68!important}

/* =========================================================
   TABLET
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  .hero-shell{
    width:calc(100% - 48px)!important;
    padding-top:140px!important;
  }
  .hero-content{
    width:min(570px,55vw)!important;
  }
  .dorado-field-strip,
  .hero-combined-scene .dorado-field-strip{
    width:calc(100% - 48px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:980px){
  html{scroll-padding-top:78px!important}
  .topbar{display:none!important}
  .nav,
  .nav.scrolled{
    position:fixed!important;
    top:8px!important;
    left:50%!important;
    width:calc(100vw - 20px)!important;
    height:64px!important;
    min-height:64px!important;
    padding:0 14px!important;
    transform:translateX(-50%)!important;
    grid-template-columns:auto 1fr auto!important;
    border:1px solid var(--dorado-line)!important;
    border-radius:20px!important;
    background:rgba(16,33,45,.95)!important;
    box-shadow:0 12px 28px rgba(5,13,19,.18)!important;
    backdrop-filter:blur(12px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
  }
  .nav .brand{grid-column:1!important;justify-self:start!important}
  .nav .nav-logo{width:56px!important;height:48px!important}
  .navlinks{
    top:74px!important;
    left:0!important;
    right:0!important;
    border:1px solid var(--dorado-line)!important;
    border-radius:18px!important;
    background:rgba(16,33,45,.985)!important;
    box-shadow:0 18px 42px rgba(5,13,19,.24)!important;
  }
  .navlinks a{
    color:var(--dorado-text)!important;
  }
  .navlinks a.active{
    background:rgba(215,161,58,.13)!important;
    color:#fff!important;
  }
  .nav-actions .nav-cta,
  .nav-actions .orders-trigger{display:none!important}
  .cart-trigger{min-width:42px!important;height:42px!important}

  .hero-combined-scene{
    background-position:38% center!important;
  }
  .hero-combined-scene::after{
    background:
      linear-gradient(180deg,rgba(7,18,27,.10) 0%,rgba(7,18,27,.14) 42%,rgba(7,18,27,.68) 100%)!important;
  }
  .hero{
    min-height:720px!important;
  }
  .hero-shell{
    width:calc(100% - 36px)!important;
    min-height:720px!important;
    padding:112px 0 54px!important;
    align-items:flex-end!important;
  }
  .hero-content{
    width:min(650px,100%)!important;
    max-width:650px!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  .hero-content h1{
    max-width:620px!important;
    font-size:clamp(44px,8.5vw,66px)!important;
  }
  .hero-lead{max-width:560px!important}
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:700px){
  :root{
    --dorado-bg:#10212d;
    --dorado-bg-2:#142a37;
  }
  body{padding-bottom:78px!important}
  .nav,
  .nav.scrolled{
    width:calc(100vw - 16px)!important;
    top:8px!important;
    border-radius:18px!important;
  }
  .hero-combined-scene{
    background:
      linear-gradient(180deg,rgba(7,18,27,.03) 0%,rgba(7,18,27,.22) 48%,rgba(7,18,27,.78) 100%),
      url('../images/backgrounds/hero-bg-dorado-mobile.webp') center 45%/cover no-repeat!important;
  }
  .hero-combined-scene::after{
    background:
      linear-gradient(180deg,rgba(7,18,27,.04) 0%,rgba(7,18,27,.16) 42%,rgba(7,18,27,.72) 100%)!important;
  }
  .hero{
    min-height:680px!important;
  }
  .hero-shell{
    width:calc(100% - 28px)!important;
    min-height:680px!important;
    padding:108px 0 46px!important;
    align-items:flex-end!important;
  }
  .hero-content{
    width:100%!important;
    max-width:none!important;
  }
  .eyebrow{
    min-height:30px!important;
    padding:0 10px!important;
    font-size:8.5px!important;
  }
  .hero-content h1{
    max-width:100%!important;
    font-size:clamp(39px,11.8vw,54px)!important;
    line-height:.95!important;
  }
  .hero-lead{
    max-width:100%!important;
    font-size:13.5px!important;
    color:rgba(241,236,227,.92)!important;
  }
  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .hero-actions>a{
    width:100%!important;
    justify-content:center!important;
  }
  .hero-proof{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
    font-size:7.5px!important;
  }
  .hero-proof span{
    min-width:0!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .dorado-field-strip,
  .hero-combined-scene .dorado-field-strip{
    width:calc(100% - 24px)!important;
    margin:0 auto 22px!important;
    padding:9px!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    border-radius:18px!important;
  }
  .dorado-field-strip .feature{
    min-height:108px!important;
    padding:14px!important;
    border-radius:14px!important;
  }

  .trust-section,
  .faq-section{
    padding-left:0!important;
    padding-right:0!important;
  }
  .location{
    padding-left:0!important;
    padding-right:0!important;
  }
  .location-box{
    width:calc(100% - 24px)!important;
    padding:12px!important;
    border-radius:20px!important;
  }
  .dorado-map-live{min-height:360px!important}
  .contact-line{
    min-height:76px!important;
    padding:13px!important;
  }
}

@media (max-width:430px){
  .hero{
    min-height:650px!important;
  }
  .hero-shell{
    min-height:650px!important;
    padding-top:102px!important;
  }
  .hero-content h1{
    font-size:clamp(36px,12vw,49px)!important;
  }
  .hero-proof{
    grid-template-columns:1fr!important;
  }
  .hero-proof span{
    justify-content:flex-start!important;
  }
  .dorado-field-strip,
  .hero-combined-scene .dorado-field-strip{
    grid-template-columns:1fr!important;
  }
  .dorado-field-strip .feature{
    min-height:92px!important;
  }
}

@media (max-width:360px){
  .nav,
  .nav.scrolled{
    width:calc(100vw - 12px)!important;
    padding-inline:10px!important;
  }
  .hero-shell{
    width:calc(100% - 22px)!important;
  }
  .hero-content h1{
    font-size:34px!important;
  }
}

/* Focus and reduced motion */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid rgba(215,161,58,.90)!important;
  outline-offset:3px!important;
}
@media (prefers-reduced-motion:reduce){
  .hero-bg::before,
  .hero-content,
  .dorado-field-strip,
  .feature,
  .product,
  .process-step,
  .contact-line{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}


/* =========================================================
   HERO HEADER ALIGNMENT + TITLE REFINEMENT — 2026-09-27
   Requested visual adjustments for desktop while preserving
   responsive safety on tablet/mobile.
   ========================================================= */

@media (min-width:1181px){
  .nav{
    width:min(1240px,calc(100vw - 24px))!important;
    grid-template-columns:1fr auto 1fr!important;
    padding:0!important;
  }

  .nav .brand{
    margin-left:-8px!important;
  }

  .nav .nav-logo{
    width:88px!important;
    height:64px!important;
  }

  .nav .navlinks{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:max-content!important;
    gap:28px!important;
  }

  .nav .nav-actions{
    justify-self:end!important;
    margin-right:-6px!important;
    gap:9px!important;
  }

  .hero-content{
    transform:translateY(14px)!important;
  }

  .eyebrow{
    min-height:38px!important;
    padding:0 15px!important;
    font-size:11px!important;
    letter-spacing:.095em!important;
    margin-bottom:2px!important;
  }

  .hero-content h1{
    margin-top:16px!important;
  }
}

.hero-content h1 .hero-title-line{
  display:block!important;
  white-space:nowrap!important;
}

.hero-content h1 .hero-title-line-primary{
  color:#fff!important;
}

.hero-content h1 .hero-title-line-accent{
  color:#f0aa2e!important;
}

@media (min-width:981px) and (max-width:1180px){
  .nav{
    grid-template-columns:minmax(145px,.75fr) auto minmax(250px,1fr)!important;
  }

  .nav .brand{
    margin-left:-4px!important;
  }

  .nav .nav-logo{
    width:82px!important;
    height:60px!important;
  }

  .nav .navlinks{
    gap:18px!important;
  }

  .nav .nav-actions{
    gap:7px!important;
  }

  .eyebrow{
    min-height:36px!important;
    padding-inline:14px!important;
    font-size:10.5px!important;
  }

  .hero-content{
    transform:translateY(10px)!important;
  }
}

@media (max-width:980px){
  .hero-content{
    transform:none!important;
  }

  .hero-content h1 .hero-title-line{
    white-space:normal!important;
  }

  .eyebrow{
    margin-bottom:0!important;
  }
}

@media (max-width:700px){
  .hero-content h1 .hero-title-line{
    display:block!important;
    white-space:nowrap!important;
  }
}

@media (max-width:430px){
  .hero-content h1{
    font-size:clamp(32px,10.8vw,44px)!important;
  }
}


/* =========================================================
   FINAL HEADER LAYOUT — 2026-09-27
   Three independent desktop zones:
   1) logo at far left
   2) primary navigation locked to true viewport center
   3) actions locked to far right with fixed gaps
   This prevents overlap regardless of text width.
   ========================================================= */

@media (min-width:1181px){
  .nav{
    width:min(1260px,calc(100vw - 32px))!important;
    max-width:1260px!important;
    display:block!important;
    padding:0!important;
  }

  .nav .brand{
    position:absolute!important;
    left:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
    width:auto!important;
    height:auto!important;
  }

  .nav .nav-logo{
    width:92px!important;
    height:68px!important;
  }

  .nav .navlinks{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:max-content!important;
    max-width:none!important;
    gap:30px!important;
    margin:0!important;
    padding:0!important;
  }

  .nav .navlinks a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .nav .nav-actions{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    margin:0!important;
    padding:0!important;
    width:auto!important;
  }

  .nav .nav-actions > *{
    flex:0 0 auto!important;
    margin:0!important;
  }

  .nav .nav-cta,
  .nav .orders-trigger,
  .nav .cart-trigger{
    min-height:42px!important;
    white-space:nowrap!important;
  }

  .nav.scrolled{
    display:block!important;
    width:min(1180px,calc(100vw - 28px))!important;
  }

  .nav.scrolled .brand{
    left:16px!important;
  }

  .nav.scrolled .nav-actions{
    right:16px!important;
  }
}

/* Intermediate desktop / small laptop.
   Keep the menu visually centered and shrink only the peripheral controls. */
@media (min-width:1051px) and (max-width:1180px){
  .nav{
    width:calc(100vw - 24px)!important;
    display:block!important;
    padding:0!important;
  }

  .nav .brand{
    position:absolute!important;
    left:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    margin:0!important;
  }

  .nav .nav-logo{
    width:78px!important;
    height:58px!important;
  }

  .nav .navlinks{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:max-content!important;
    gap:17px!important;
  }

  .nav .navlinks a{
    font-size:9.5px!important;
    white-space:nowrap!important;
  }

  .nav .nav-actions{
    position:absolute!important;
    right:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0!important;
  }

  .nav .nav-cta,
  .nav .orders-trigger,
  .nav .cart-trigger{
    min-height:40px!important;
    padding-inline:10px!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }
}

/* Below 1050px there is not enough horizontal room for three full groups.
   Use the compact navigation rather than allowing any overlap. */
@media (min-width:981px) and (max-width:1050px){
  .nav{
    grid-template-columns:auto 1fr auto!important;
    padding:0 16px!important;
  }

  .menu-toggle{
    display:flex!important;
  }

  .navlinks{
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    top:78px!important;
    width:auto!important;
    transform:translateY(-10px)!important;
    display:grid!important;
    gap:0!important;
    padding:10px!important;
    border:1px solid var(--dorado-line)!important;
    border-radius:18px!important;
    background:rgba(16,33,45,.985)!important;
    box-shadow:0 18px 42px rgba(5,13,19,.24)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .nav.menu-open .navlinks,
  body.menu-open .nav .navlinks{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .navlinks a{
    padding:14px 12px!important;
    font-size:12px!important;
  }

  .nav-actions .nav-cta,
  .nav-actions .orders-trigger{
    display:none!important;
  }
}


/* =========================================================
   DARK REVIEWS / FAQ + SITE SCROLLBAR — 2026-09-27
   Keep these areas visually continuous with the storefront
   regardless of the operating-system light/dark preference.
   ========================================================= */

/* Page scrollbar: explicit site colors, independent from Windows theme. */
html{
  scrollbar-width:thin;
  scrollbar-color:#536b79 #0d1b25;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:12px;
  height:12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:#0d1b25;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  background:#536b79;
  border:3px solid #0d1b25;
  border-radius:999px;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:#708895;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:#0d1b25;
}

/* Reviews and FAQ stay on the same dark navy family as the store. */
#opiniones.trust-section,
#preguntas-frecuentes.faq-section{
  background:var(--dorado-bg)!important;
  color:var(--dorado-text)!important;
}

#opiniones .trust-copy h2,
#preguntas-frecuentes .faq-intro h2{
  color:#f3eee5!important;
}

#opiniones .trust-copy h2 span,
#preguntas-frecuentes .faq-intro h2 span{
  color:#d9a63d!important;
}

#opiniones .trust-copy p,
#preguntas-frecuentes .faq-intro p,
#opiniones .reviews-filter-empty,
#preguntas-frecuentes .faq-list details p{
  color:#aebbc2!important;
}

#opiniones .section-index b,
#opiniones .kicker,
#preguntas-frecuentes .section-index b,
#preguntas-frecuentes .kicker{
  color:#d9a63d!important;
}

#opiniones .section-index i,
#preguntas-frecuentes .section-index i{
  background:rgba(217,166,61,.42)!important;
}

/* Review controls */
#opiniones .reviews-rating-summary,
#opiniones .reviews-filter-button,
#opiniones .reviews-google-link{
  color:#f3eee5!important;
}

#opiniones .reviews-filter-button,
#opiniones .reviews-google-link{
  background:rgba(241,236,227,.055)!important;
  border-color:rgba(241,236,227,.16)!important;
}

#opiniones .reviews-filter-button:hover,
#opiniones .reviews-google-link:hover{
  background:rgba(217,166,61,.12)!important;
  border-color:rgba(217,166,61,.44)!important;
  color:#fff!important;
}

/* Review cards */
#opiniones .review-card{
  background:var(--dorado-panel)!important;
  border-color:rgba(241,236,227,.10)!important;
  box-shadow:0 16px 34px rgba(5,13,19,.16)!important;
}

#opiniones .review-author strong{
  color:#f4efe7!important;
}

#opiniones .review-author small,
#opiniones .review-card p{
  color:#aeb9bf!important;
}

#opiniones .review-stars{
  color:#e6b849!important;
}

#opiniones .reviews-filter-panel,
#opiniones .reviews-empty{
  background:var(--dorado-bg-2)!important;
  border-color:rgba(241,236,227,.11)!important;
}

#opiniones .reviews-filter-head strong,
#opiniones .reviews-empty strong{
  color:#f4efe7!important;
}

#opiniones .reviews-filter-head select{
  background:var(--dorado-panel)!important;
  color:#f4efe7!important;
  border-color:rgba(241,236,227,.14)!important;
}

/* FAQ cards */
#preguntas-frecuentes .faq-item,
#preguntas-frecuentes .faq-list details{
  background:rgba(25,49,63,.66)!important;
  border-color:rgba(241,236,227,.09)!important;
  color:var(--dorado-text)!important;
  box-shadow:none!important;
}

#preguntas-frecuentes .faq-item:hover,
#preguntas-frecuentes .faq-list details:hover,
#preguntas-frecuentes .faq-list details[open]{
  background:rgba(30,55,70,.92)!important;
  border-color:rgba(217,166,61,.28)!important;
}

#preguntas-frecuentes .faq-question,
#preguntas-frecuentes summary{
  color:#f3eee5!important;
}

/* No light flash between these adjacent sections. */
#opiniones + #preguntas-frecuentes{
  border-top:1px solid rgba(241,236,227,.06)!important;
}

@media (max-width:700px){
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width:8px;
    height:8px;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb{
    border-width:2px;
  }
}


/* =========================================================
   HEADER SPACING FIX — 2026-09-27
   Shift primary nav slightly left and guarantee a no-overlap
   buffer between Contacto and WhatsApp / Mis pedidos / Carrito.
   ========================================================= */

@media (min-width:1181px){
  /* Top-of-page: a subtle left shift from the exact viewport center. */
  .nav:not(.scrolled) .navlinks{
    left:47.25%!important;
  }

  /* Keep actions anchored to the right edge with their own fixed spacing. */
  .nav:not(.scrolled) .nav-actions{
    right:0!important;
    gap:12px!important;
  }

  /* Scrolled header is narrower, so reserve more room for the action group. */
  .nav.scrolled .navlinks{
    left:43.5%!important;
    gap:26px!important;
  }

  .nav.scrolled .nav-actions{
    right:16px!important;
    gap:12px!important;
  }

  .nav.scrolled .navlinks a{
    font-size:10px!important;
  }

  .nav.scrolled .nav-cta,
  .nav.scrolled .orders-trigger,
  .nav.scrolled .cart-trigger{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}

/* Typical notebooks: preserve separation before switching to compact mode. */
@media (min-width:1051px) and (max-width:1180px){
  .nav:not(.scrolled) .navlinks{
    left:45.5%!important;
  }

  .nav.scrolled .navlinks{
    left:41.5%!important;
    gap:15px!important;
  }

  .nav.scrolled .nav-actions{
    right:10px!important;
    gap:7px!important;
  }

  .nav.scrolled .navlinks a{
    font-size:9px!important;
  }

  .nav.scrolled .nav-cta,
  .nav.scrolled .orders-trigger,
  .nav.scrolled .cart-trigger{
    padding-inline:9px!important;
    font-size:8.5px!important;
  }
}

/* Add a visible air gap at the boundary between main links and action buttons. */
@media (min-width:1051px){
  .nav .nav-actions::before{
    content:""!important;
    display:block!important;
    width:10px!important;
    height:1px!important;
    flex:0 0 10px!important;
  }
}


/* =========================================================
   DARK CONTACT + GOOGLE MAP — 2026-09-27
   Visually integrate the embedded Google map and contact cards
   with DORADO's navy palette without changing location behavior.
   ========================================================= */

#contacto.location{
  background:var(--dorado-bg)!important;
}

#contacto .location-box{
  background:var(--dorado-bg-2)!important;
  border-color:rgba(241,236,227,.10)!important;
  box-shadow:0 18px 44px rgba(5,13,19,.16)!important;
}

/* Contact information cards */
#contacto .contact-line{
  background:var(--dorado-panel)!important;
  border-color:rgba(241,236,227,.10)!important;
  color:var(--dorado-text)!important;
  box-shadow:0 8px 20px rgba(5,13,19,.08)!important;
}

#contacto .contact-line:hover{
  background:var(--dorado-panel-2)!important;
  border-color:rgba(217,166,61,.34)!important;
  box-shadow:0 11px 24px rgba(5,13,19,.12)!important;
}

#contacto .contact-line small{
  color:#95a5ae!important;
}

#contacto .contact-line strong{
  color:#f2ede5!important;
}

#contacto .contact-line .contact-detail{
  color:#aebbc2!important;
}

#contacto .contact-icon{
  background:rgba(217,166,61,.11)!important;
  border-color:rgba(217,166,61,.18)!important;
  color:#e4b04b!important;
}

#contacto .store-open-status.is-open{
  color:#70df98!important;
  background:rgba(37,211,102,.10)!important;
}

#contacto .store-open-status.is-closed{
  color:#a9b4ba!important;
  background:rgba(241,236,227,.055)!important;
}

/* Secondary social button should also remain dark. */
#contacto .contact-actions>a[href*="instagram.com"]{
  background:var(--dorado-panel)!important;
  color:#f2ede5!important;
  border-color:rgba(241,236,227,.13)!important;
}

#contacto .contact-actions>a[href*="instagram.com"]:hover{
  background:var(--dorado-panel-2)!important;
  color:#fff!important;
  border-color:rgba(225,92,157,.34)!important;
}

/* Dark visual treatment for Google Maps embed.
   The iframe remains fully interactive and opens Google Maps normally. */
#contacto .dorado-map-live{
  position:relative!important;
  background:#0d1b25!important;
  border-color:rgba(241,236,227,.11)!important;
  box-shadow:0 18px 42px rgba(5,13,19,.18)!important;
  isolation:isolate!important;
}

#contacto .dorado-map-live iframe{
  filter:
    invert(.88)
    hue-rotate(180deg)
    saturate(.72)
    brightness(.82)
    contrast(1.08)!important;
  opacity:.96!important;
}

#contacto .dorado-map-live::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,rgba(16,33,45,.05),rgba(16,33,45,.15)),
    radial-gradient(circle at 50% 48%,transparent 0 45%,rgba(8,18,26,.08) 100%)!important;
}

#contacto .map-open-button{
  z-index:3!important;
  background:rgba(16,33,45,.94)!important;
  color:#f4efe7!important;
  border:1px solid rgba(241,236,227,.14)!important;
  box-shadow:0 12px 28px rgba(5,13,19,.24)!important;
}

#contacto .map-open-button:hover{
  background:#d9a63d!important;
  color:#10212d!important;
  border-color:#d9a63d!important;
}

/* Keep map legible and performant on smaller devices. */
@media (max-width:700px){
  #contacto .dorado-map-live{
    min-height:350px!important;
  }

  #contacto .dorado-map-live iframe{
    filter:
      invert(.86)
      hue-rotate(180deg)
      saturate(.70)
      brightness(.84)
      contrast(1.06)!important;
  }
}


/* =========================================================
   CART DRAWER CONTRAST — 2026-09-27
   Explicit dark cart palette so global light/dark inheritance
   can never make product names, prices or totals unreadable.
   ========================================================= */

.cart-drawer{
  background:#10212d!important;
  color:#f3eee6!important;
  border-left:1px solid rgba(241,236,227,.10)!important;
  box-shadow:-28px 0 70px rgba(4,11,17,.30)!important;
}

.cart-head{
  background:#132734!important;
  border-bottom-color:rgba(241,236,227,.10)!important;
}

.cart-head-copy strong{
  color:#f4efe7!important;
}

.cart-head-copy span{
  color:#9facb4!important;
}

.cart-close{
  background:#19313f!important;
  color:#f3eee6!important;
  border-color:rgba(241,236,227,.14)!important;
}

.cart-close:hover{
  background:#213c4b!important;
  color:#fff!important;
  border-color:rgba(241,236,227,.24)!important;
}

.cart-items{
  background:#10212d!important;
  color:#f3eee6!important;
  scrollbar-width:thin!important;
  scrollbar-color:#536b79 #10212d!important;
}

.cart-items::-webkit-scrollbar{width:8px!important}
.cart-items::-webkit-scrollbar-track{background:#10212d!important}
.cart-items::-webkit-scrollbar-thumb{
  background:#536b79!important;
  border:2px solid #10212d!important;
  border-radius:999px!important;
}

.cart-item{
  border-bottom-color:rgba(241,236,227,.10)!important;
  color:#f3eee6!important;
}

.cart-item-image{
  background:#e8e1d5!important;
  border:1px solid rgba(215,161,58,.12)!important;
}

.cart-item-name{
  color:#f4efe7!important;
}

.cart-item-category{
  color:#98a6ae!important;
}

.cart-item-unit{
  color:#9eabb2!important;
}

.cart-item-subtotal{
  color:#f4efe7!important;
}

.cart-item .quantity-selector{
  background:#152b38!important;
  border-color:rgba(241,236,227,.15)!important;
}

.cart-item .qty-btn{
  background:transparent!important;
  color:#dce3e6!important;
  border-color:rgba(241,236,227,.10)!important;
}

.cart-item .qty-btn:hover{
  background:rgba(241,236,227,.08)!important;
  color:#fff!important;
}

.cart-item .qty-input{
  background:transparent!important;
  color:#f4efe7!important;
  border-color:rgba(241,236,227,.10)!important;
}

.cart-remove{
  color:#aeb9bf!important;
}

.cart-remove:hover{
  background:rgba(211,81,73,.13)!important;
  color:#ff7f78!important;
}

.cart-remove svg{
  stroke:currentColor!important;
}

.cart-empty{
  color:#f3eee6!important;
}

.cart-empty-icon{
  background:#19313f!important;
  color:#d7a13a!important;
}

.cart-empty h3{
  color:#f4efe7!important;
}

.cart-empty p{
  color:#a5b1b7!important;
}

.cart-footer{
  background:#132734!important;
  border-top-color:rgba(241,236,227,.10)!important;
  color:#f3eee6!important;
  box-shadow:0 -12px 30px rgba(4,11,17,.14)!important;
}

.cart-summary-row{
  color:#aeb9bf!important;
}

.cart-summary-row strong{
  color:#d9b45d!important;
}

.cart-total-row{
  color:#b8c2c7!important;
}

.cart-total-row strong{
  color:#f4efe7!important;
}

.cart-checkout{
  background:linear-gradient(135deg,#f0aa2e,#d89018)!important;
  color:#10212d!important;
  border-color:#e6a126!important;
  box-shadow:0 12px 26px rgba(216,144,24,.16)!important;
}

.cart-checkout:hover:not(:disabled){
  background:linear-gradient(135deg,#f4b64d,#e39a24)!important;
  color:#10212d!important;
}

.cart-checkout-note{
  color:#94a2aa!important;
}

.cart-link-button{
  color:#b9c3c8!important;
}

.cart-link-button:hover{
  color:#fff!important;
}

.cart-link-danger{
  color:#ef7c74!important;
}

.cart-link-danger:hover{
  color:#ff918a!important;
  background:rgba(211,81,73,.10)!important;
}

@media (max-width:900px){
  .cart-head{
    background:#132734!important;
  }

  .cart-drawer,
  .cart-items,
  .cart-footer{
    color:#f3eee6!important;
  }
}


/* =========================================================
   CART PREMIUM FINISH — 2026-09-27
   Replace the flat/basic drawer appearance with a restrained
   premium navy + bronze composition while preserving contrast.
   ========================================================= */

.cart-drawer{
  background:
    radial-gradient(circle at 105% -5%,rgba(215,161,58,.11),transparent 28%),
    linear-gradient(180deg,#0e1c26 0%,#10212d 48%,#0d1a23 100%)!important;
  border-left:1px solid rgba(232,211,169,.12)!important;
  box-shadow:
    -34px 0 80px rgba(2,8,13,.34),
    inset 1px 0 0 rgba(255,255,255,.025)!important;
}

.cart-head{
  background:
    linear-gradient(180deg,rgba(26,50,64,.96),rgba(19,39,52,.94))!important;
  border-bottom:1px solid rgba(228,184,92,.12)!important;
  box-shadow:0 10px 28px rgba(2,8,13,.10)!important;
}

.cart-head-copy strong{
  color:#f5efe5!important;
  font-size:21px!important;
  letter-spacing:-.045em!important;
}

.cart-head-copy span{
  color:#93a3ac!important;
  font-size:8.5px!important;
}

.cart-close{
  background:rgba(255,255,255,.045)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#e8e3da!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01)!important;
}

.cart-close:hover{
  background:rgba(215,161,58,.11)!important;
  border-color:rgba(215,161,58,.35)!important;
  color:#f7f1e7!important;
}

.cart-items{
  background:
    linear-gradient(180deg,rgba(12,27,37,.88),rgba(14,30,40,.94))!important;
  padding-top:16px!important;
}

.cart-item{
  position:relative!important;
  margin-bottom:10px!important;
  padding:14px!important;
  border:1px solid rgba(233,223,205,.085)!important;
  border-radius:18px!important;
  background:
    linear-gradient(145deg,rgba(26,50,64,.78),rgba(19,39,52,.88))!important;
  box-shadow:
    0 10px 24px rgba(2,8,13,.12),
    inset 0 1px 0 rgba(255,255,255,.018)!important;
}

.cart-item:hover{
  border-color:rgba(215,161,58,.20)!important;
  background:
    linear-gradient(145deg,rgba(29,55,70,.86),rgba(20,42,55,.92))!important;
}

.cart-item-image{
  background:
    linear-gradient(145deg,#eee7dc,#dcd1c3)!important;
  border:1px solid rgba(215,161,58,.16)!important;
  box-shadow:0 8px 18px rgba(2,8,13,.10)!important;
}

.cart-item-name{
  color:#f7f1e8!important;
  font-size:11.5px!important;
  letter-spacing:-.015em!important;
}

.cart-item-category{
  color:#8fa2ab!important;
  font-size:7.5px!important;
  letter-spacing:.075em!important;
}

.cart-item-unit{
  color:#91a4ad!important;
  font-size:7.5px!important;
}

.cart-item-subtotal{
  color:#f6efe6!important;
  font-size:13px!important;
  letter-spacing:-.02em!important;
}

.cart-item .quantity-selector{
  background:rgba(8,22,30,.50)!important;
  border:1px solid rgba(233,223,205,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}

.cart-item .qty-btn{
  color:#b9c7ce!important;
}

.cart-item .qty-btn:hover{
  background:rgba(215,161,58,.10)!important;
  color:#f6efe6!important;
}

.cart-item .qty-input{
  color:#f5efe6!important;
  font-weight:800!important;
}

.cart-remove{
  color:#7f929d!important;
}

.cart-remove:hover{
  background:rgba(213,86,77,.12)!important;
  color:#ff8c84!important;
}

.cart-footer{
  position:relative!important;
  background:
    linear-gradient(180deg,rgba(20,41,54,.98),rgba(14,29,39,.995))!important;
  border-top:1px solid rgba(228,184,92,.13)!important;
  box-shadow:
    0 -20px 42px rgba(2,8,13,.20),
    inset 0 1px 0 rgba(255,255,255,.018)!important;
}

.cart-footer::before{
  content:""!important;
  position:absolute!important;
  left:20px!important;
  right:20px!important;
  top:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(215,161,58,.35),transparent)!important;
  pointer-events:none!important;
}

.cart-summary-row{
  color:#a9b7be!important;
  font-size:9px!important;
}

.cart-summary-row strong{
  color:#e0b456!important;
  font-size:10px!important;
}

.cart-total-row{
  margin-top:9px!important;
  color:#b9c4c9!important;
}

.cart-total-row span{
  font-size:10px!important;
  letter-spacing:.04em!important;
}

.cart-total-row strong{
  color:#f8f1e7!important;
  font-size:28px!important;
  letter-spacing:-.055em!important;
  text-shadow:0 2px 18px rgba(0,0,0,.16)!important;
}

.cart-checkout{
  min-height:50px!important;
  margin-top:15px!important;
  border-radius:16px!important;
  background:
    linear-gradient(135deg,#eab33f 0%,#d68d18 100%)!important;
  color:#0f1e28!important;
  border:1px solid rgba(255,218,142,.28)!important;
  box-shadow:
    0 12px 26px rgba(204,133,18,.20),
    inset 0 1px 0 rgba(255,255,255,.22)!important;
  font-weight:900!important;
}

.cart-checkout:hover:not(:disabled){
  background:
    linear-gradient(135deg,#f0bd51 0%,#df9a24 100%)!important;
  box-shadow:
    0 14px 30px rgba(204,133,18,.24),
    inset 0 1px 0 rgba(255,255,255,.24)!important;
  transform:translateY(-1px)!important;
}

.cart-checkout-note{
  margin-top:9px!important;
  color:#81939d!important;
  font-size:7.5px!important;
  line-height:1.5!important;
}

.cart-footer-actions{
  gap:24px!important;
  margin-top:14px!important;
}

.cart-link-button{
  color:#aab8bf!important;
  font-size:8px!important;
  letter-spacing:.055em!important;
}

.cart-link-button:hover{
  color:#f4eee5!important;
}

.cart-link-danger{
  color:#ee7971!important;
}

.cart-link-danger:hover{
  color:#ff928a!important;
}

/* Make the empty-cart state feel part of the same premium system. */
.cart-empty-icon{
  background:
    linear-gradient(145deg,rgba(30,55,70,.85),rgba(19,39,52,.92))!important;
  border:1px solid rgba(215,161,58,.15)!important;
  color:#e4b04b!important;
  box-shadow:0 10px 24px rgba(2,8,13,.12)!important;
}

@media (max-width:900px){
  .cart-item{
    margin-bottom:8px!important;
    border-radius:16px!important;
  }

  .cart-footer{
    border-top-color:rgba(228,184,92,.12)!important;
  }
}


/* =========================================================
   MOBILE HEADER + DOCK POLISH — 2026-09-27
   Mobile only. Desktop layout is intentionally untouched.
   ========================================================= */
@media (max-width:700px){
  /* Remove the large shared capsule: logo and cart float independently. */
  .nav,
  .nav.scrolled{
    width:100%!important;
    height:72px!important;
    min-height:72px!important;
    top:8px!important;
    left:0!important;
    transform:none!important;
    padding:0 18px!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    pointer-events:none!important;
  }

  .nav .brand,
  .nav .nav-actions,
  .nav .cart-trigger{
    pointer-events:auto!important;
  }

  .nav .brand{
    position:absolute!important;
    left:18px!important;
    top:4px!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    transform:none!important;
  }

  .nav .nav-logo,
  .nav.scrolled .nav-logo{
    width:76px!important;
    height:62px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,.20))!important;
  }

  .nav .nav-actions{
    position:absolute!important;
    right:18px!important;
    top:8px!important;
    display:flex!important;
    align-items:center!important;
    margin:0!important;
    transform:none!important;
  }

  .nav .cart-trigger,
  .nav.scrolled .cart-trigger{
    width:56px!important;
    min-width:56px!important;
    height:56px!important;
    min-height:56px!important;
    padding:0!important;
    border-radius:50%!important;
    border:1px solid rgba(255,218,142,.20)!important;
    background:linear-gradient(145deg,#e7ad39,#cf8f1d)!important;
    color:#10212d!important;
    box-shadow:0 10px 24px rgba(5,13,19,.22)!important;
  }

  .nav .cart-trigger:hover,
  .nav .cart-trigger:active{
    background:linear-gradient(145deg,#efba4d,#d99b2d)!important;
  }

  .nav .cart-trigger-label{
    display:none!important;
  }

  /* Compact hero eyebrow: less heavy, more refined over the photo. */
  .hero-content .eyebrow{
    width:max-content!important;
    max-width:calc(100vw - 48px)!important;
    min-height:24px!important;
    margin:0 0 9px!important;
    padding:0 9px!important;
    gap:6px!important;
    border:1px solid rgba(226,180,86,.20)!important;
    border-radius:999px!important;
    background:rgba(7,18,27,.26)!important;
    color:rgba(246,239,227,.82)!important;
    font-size:clamp(6.8px,2.05vw,8px)!important;
    font-weight:700!important;
    letter-spacing:.075em!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-shadow:none!important;
    backdrop-filter:blur(4px)!important;
    -webkit-backdrop-filter:blur(4px)!important;
  }

  .hero-content .eyebrow-dot{
    width:5px!important;
    height:5px!important;
    flex:0 0 5px!important;
    background:#d9a63d!important;
    box-shadow:0 0 0 3px rgba(217,166,61,.08)!important;
  }

  /* Dock states: clear active section + subtle activation animation. */
  .mobile-dock{
    overflow:hidden!important;
  }

  .mobile-dock-item{
    position:relative!important;
    isolation:isolate!important;
    transition:
      color .24s ease,
      background-color .28s ease,
      box-shadow .28s ease,
      transform .22s cubic-bezier(.22,.8,.2,1)!important;
  }

  .mobile-dock-item::before{
    content:""!important;
    position:absolute!important;
    inset:4px!important;
    z-index:-1!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,rgba(222,164,55,.15),rgba(222,164,55,.075))!important;
    border:1px solid rgba(229,178,74,.26)!important;
    opacity:0!important;
    transform:scale(.88)!important;
    transition:
      opacity .24s ease,
      transform .34s cubic-bezier(.22,.8,.2,1)!important;
  }

  .mobile-dock-item.active{
    color:#edb13d!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .mobile-dock-item.active::before{
    opacity:1!important;
    transform:scale(1)!important;
  }

  .mobile-dock-item.active .ui-icon{
    transform:translateY(-1px) scale(1.08)!important;
    filter:drop-shadow(0 4px 8px rgba(215,161,58,.16))!important;
  }

  .mobile-dock-item .ui-icon{
    transition:
      transform .30s cubic-bezier(.22,.8,.2,1),
      filter .30s ease!important;
  }

  .mobile-dock-item.active span:last-child{
    color:#edb13d!important;
  }

  /* WhatsApp keeps its own green identity even while other states move. */
  .mobile-dock-item[href*="wa.me"],
  .mobile-dock-item[href*="wa.me"] span:last-child{
    color:#48dc7d!important;
  }
}

@media (max-width:380px){
  .nav .brand{left:14px!important}
  .nav .nav-actions{right:14px!important}
  .nav .nav-logo,
  .nav.scrolled .nav-logo{width:68px!important;height:58px!important}
  .nav .cart-trigger,
  .nav.scrolled .cart-trigger{
    width:52px!important;
    min-width:52px!important;
    height:52px!important;
    min-height:52px!important;
  }

  .hero-content .eyebrow{
    max-width:calc(100vw - 38px)!important;
    font-size:6.5px!important;
    letter-spacing:.06em!important;
    padding-inline:8px!important;
  }
}


/* =========================================================
   MOBILE LOGO / CART VISUAL BALANCE — 2026-09-27
   Mobile only. Keep desktop untouched.
   ========================================================= */
@media (max-width:700px){
  .nav .brand{
    top:8px!important;
    left:18px!important;
    width:58px!important;
    height:58px!important;
    display:grid!important;
    place-items:center!important;
  }

  .nav .nav-logo,
  .nav.scrolled .nav-logo{
    width:68px!important;
    height:68px!important;
    max-width:none!important;
    object-fit:contain!important;
    transform:none!important;
  }

  .nav .nav-actions{
    top:8px!important;
    right:18px!important;
    height:58px!important;
    display:flex!important;
    align-items:center!important;
  }

  .nav .cart-trigger,
  .nav.scrolled .cart-trigger{
    width:50px!important;
    min-width:50px!important;
    height:50px!important;
    min-height:50px!important;
    border-radius:50%!important;
  }
}

@media (max-width:380px){
  .nav .brand{
    left:14px!important;
    width:54px!important;
    height:54px!important;
  }

  .nav .nav-logo,
  .nav.scrolled .nav-logo{
    width:64px!important;
    height:64px!important;
  }

  .nav .nav-actions{
    right:14px!important;
    height:54px!important;
  }

  .nav .cart-trigger,
  .nav.scrolled .cart-trigger{
    width:48px!important;
    min-width:48px!important;
    height:48px!important;
    min-height:48px!important;
  }
}


/* =========================================================
   FOOTER INFORMATION ANCHOR + LEGAL VISIBILITY — 2026-09-27
   Adds a clear final information destination and keeps the legal
   line readable on every viewport.
   ========================================================= */

#informacion{
  scroll-margin-top:92px!important;
}

.footer-bottom{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:18px!important;
  min-height:48px!important;
  margin-top:0!important;
  padding:18px 0 6px!important;
  border-top:1px solid rgba(241,236,227,.14)!important;
  color:#b9c3c8!important;
  font-size:10px!important;
  line-height:1.45!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  opacity:1!important;
  visibility:visible!important;
}

.footer-bottom .footer-rights{
  color:#e1e7ea!important;
  font-weight:750!important;
}

.footer-bottom .footer-address{
  color:#9eabb2!important;
  text-align:right!important;
  white-space:nowrap!important;
}

/* Six top-level links now fit without touching the action cluster. */
@media (min-width:1181px){
  .nav .navlinks{
    gap:22px!important;
  }

  .nav:not(.scrolled) .navlinks{
    left:45.75%!important;
  }

  .nav.scrolled .navlinks{
    left:42.5%!important;
    gap:18px!important;
  }
}

@media (min-width:1051px) and (max-width:1180px){
  .nav .navlinks{
    gap:13px!important;
  }

  .nav .navlinks a{
    font-size:9px!important;
  }

  .nav:not(.scrolled) .navlinks{
    left:44%!important;
  }

  .nav.scrolled .navlinks{
    left:40.5%!important;
    gap:11px!important;
  }
}

@media (max-width:700px){
  #informacion{
    scroll-margin-top:84px!important;
  }

  .footer-bottom{
    grid-template-columns:minmax(0,1fr)!important;
    gap:5px!important;
    padding:16px 0 8px!important;
    font-size:10.5px!important;
    text-align:left!important;
  }

  .footer-bottom .footer-address{
    text-align:left!important;
    white-space:normal!important;
  }
}


/* =========================================================
   CATALOGO — FILTROS DE CATEGORÍAS REALES
   Las categorías se generan desde los productos activos.
   ========================================================= */
.dorado-catalog .category-chip{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
}

.dorado-catalog .category-chip-count{
  display:inline-grid!important;
  place-items:center!important;
  min-width:19px!important;
  height:19px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.09)!important;
  color:currentColor!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1!important;
}

.dorado-catalog .category-chip:not(.active) .category-chip-count{
  background:rgba(215,161,58,.12)!important;
  color:#d7a13a!important;
}

@media(max-width:700px){
  .dorado-catalog .category-chips{
    padding-bottom:10px!important;
    scroll-padding-inline:14px!important;
  }

  .dorado-catalog .category-chip{
    min-height:42px!important;
    padding-inline:14px!important;
  }

  .dorado-catalog .category-chip-count{
    min-width:20px!important;
    height:20px!important;
  }
}


/* =========================================================
   PRODUCT DETAIL — CONTRAST + VISUAL BALANCE
   Clear readable product modal on desktop/tablet/mobile.
   ========================================================= */
#producto-dinamico .product-detail-inner{
  background:#f6f2e9!important;
  grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr)!important;
  border:1px solid rgba(236,229,216,.26)!important;
}

#producto-dinamico .product-detail-gallery{
  background:#ece9e1!important;
}

#producto-dinamico .product-detail-image{
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.92),rgba(246,243,235,.96) 46%,#e7e3da 100%)!important;
}

#producto-dinamico .product-detail-image::after{
  background:radial-gradient(ellipse,rgba(16,33,45,.13),transparent 68%)!important;
}

#producto-dinamico .product-detail-info{
  background:#f8f4ec!important;
  color:#172833!important;
  scrollbar-color:rgba(215,161,58,.50) transparent!important;
}

#producto-dinamico .dynamic-product-category{
  color:#b96d12!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}

#producto-dinamico .dynamic-product-name{
  color:#142631!important;
  text-shadow:none!important;
  opacity:1!important;
}

#producto-dinamico .product-info-section-title{
  color:#67737a!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.095em!important;
}

#producto-dinamico .dynamic-product-description,
#producto-dinamico .dynamic-product-features{
  color:#56636a!important;
  font-size:12.5px!important;
  line-height:1.72!important;
  opacity:1!important;
}

#producto-dinamico .dynamic-product-description strong,
#producto-dinamico .dynamic-product-features strong{
  color:#1c2b34!important;
}

#producto-dinamico .dynamic-product-price,
#producto-dinamico .dynamic-product-price .product-price-current{
  color:#172833!important;
  opacity:1!important;
  text-shadow:none!important;
}

#producto-dinamico .dynamic-product-price .product-price-old{
  color:#8e969a!important;
}

#producto-dinamico .product-discount-badge{
  color:#8b560e!important;
  background:#f4e0b9!important;
  border-color:#e6c27c!important;
}

#producto-dinamico .dynamic-product-stock{
  color:#227243!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}

#producto-dinamico .product-assurances{
  gap:9px!important;
}

#producto-dinamico .product-assurances>div{
  min-height:74px!important;
  padding:13px!important;
  background:#f0ebe2!important;
  border:1px solid #ddd5c7!important;
  color:#263740!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset!important;
}

#producto-dinamico .product-assurances .ui-icon{
  color:#a96c11!important;
  width:18px!important;
  height:18px!important;
  flex:0 0 auto!important;
}

#producto-dinamico .product-assurances strong{
  color:#263740!important;
  font-size:10px!important;
  font-weight:850!important;
  opacity:1!important;
}

#producto-dinamico .product-assurances small{
  color:#747f85!important;
  font-size:8.5px!important;
  opacity:1!important;
}

#producto-dinamico .quantity-label-row label{
  color:#4f5d64!important;
  font-size:9.5px!important;
  font-weight:900!important;
}

#producto-dinamico .dynamic-qty-help{
  color:#7c878c!important;
  font-size:9.5px!important;
}

#producto-dinamico .quantity-selector{
  background:#f1ece3!important;
  border-color:#d8d0c4!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.84)!important;
}

#producto-dinamico .quantity-selector .qty-btn{
  color:#526069!important;
  background:transparent!important;
}

#producto-dinamico .quantity-selector .qty-btn:hover:not(:disabled){
  color:#142631!important;
  background:#fffaf2!important;
}

#producto-dinamico .quantity-selector .qty-input{
  color:#172833!important;
  background:#f8f4ec!important;
  border-color:#d8d0c4!important;
  opacity:1!important;
}

#producto-dinamico .dynamic-add-cart{
  color:#10212d!important;
  background:linear-gradient(135deg,#f6ab34,#e78c0d)!important;
  box-shadow:0 12px 26px rgba(174,101,8,.18)!important;
}

#producto-dinamico .dynamic-add-cart:hover:not(:disabled){
  color:#10212d!important;
  background:linear-gradient(135deg,#ffb94a,#ed9517)!important;
  box-shadow:0 15px 30px rgba(174,101,8,.24)!important;
}

#producto-dinamico .product-detail-close{
  background:rgba(248,244,236,.94)!important;
  border-color:#d8d0c4!important;
  color:#263740!important;
}

#producto-dinamico .product-detail-close:hover{
  background:#efe8dc!important;
  color:#10212d!important;
}

@media (max-width:900px){
  #producto-dinamico .product-detail-inner{
    grid-template-columns:1fr!important;
  }

  #producto-dinamico .product-detail-info{
    padding:28px 22px 32px!important;
  }

  #producto-dinamico .dynamic-product-name{
    font-size:32px!important;
  }

  #producto-dinamico .dynamic-product-description,
  #producto-dinamico .dynamic-product-features{
    font-size:12.5px!important;
  }
}

@media (max-width:640px){
  #producto-dinamico .product-detail-info{
    padding:24px 16px 28px!important;
  }

  #producto-dinamico .dynamic-product-name{
    color:#142631!important;
    font-size:29px!important;
  }

  #producto-dinamico .dynamic-product-price,
  #producto-dinamico .dynamic-product-price .product-price-current{
    color:#172833!important;
  }

  #producto-dinamico .product-assurances{
    grid-template-columns:1fr!important;
  }

  #producto-dinamico .product-assurances>div{
    min-height:58px!important;
  }

  #producto-dinamico .dynamic-product-description,
  #producto-dinamico .dynamic-product-features{
    font-size:12px!important;
  }
}


/* =========================================================
   CHECKOUT — PALETA DORADO CONSISTENTE
   Corrige bloques demasiado oscuros / contrastes lavados.
   ========================================================= */
#checkout-modal .checkout-card{
  background:#f7f2e8!important;
  color:#172833!important;
  border:1px solid rgba(241,236,227,.16)!important;
  box-shadow:0 34px 90px rgba(5,13,19,.30)!important;
}

#checkout-modal .checkout-main{
  background:#fbf7ef!important;
  color:#172833!important;
}

#checkout-modal .checkout-side{
  background:#10212d!important;
  color:#f2ede5!important;
  border-left:1px solid rgba(241,236,227,.10)!important;
}

#checkout-modal .checkout-title,
#checkout-modal .checkout-main h2,
#checkout-modal .checkout-main h3{
  color:#172833!important;
}

#checkout-modal .checkout-intro{
  color:#66737b!important;
}

#checkout-modal .checkout-field label{
  color:#59666e!important;
}

#checkout-modal .checkout-field input,
#checkout-modal .checkout-field select,
#checkout-modal .checkout-field textarea{
  background:#f3eee5!important;
  color:#172833!important;
  border-color:#d8d0c4!important;
  box-shadow:none!important;
}

#checkout-modal .checkout-field input::placeholder,
#checkout-modal .checkout-field textarea::placeholder{
  color:#8b9498!important;
  opacity:1!important;
}

#checkout-modal .checkout-field input:focus,
#checkout-modal .checkout-field select:focus,
#checkout-modal .checkout-field textarea:focus{
  background:#fffaf2!important;
  border-color:#d7a13a!important;
  box-shadow:0 0 0 3px rgba(215,161,58,.13)!important;
}

#checkout-modal .checkout-delivery-note{
  background:#efe2c6!important;
  color:#665329!important;
  border:1px solid rgba(185,118,29,.16)!important;
}

#checkout-modal .checkout-consent{
  color:#657179!important;
}

#checkout-modal .checkout-secure{
  color:#7a858b!important;
}

#checkout-modal .checkout-side h3{
  color:#f4efe7!important;
}

#checkout-modal .checkout-summary-item{
  padding:10px!important;
  border-radius:14px!important;
  background:#152b38!important;
  border:1px solid rgba(241,236,227,.08)!important;
}

#checkout-modal .checkout-summary-item img{
  background:#efe9de!important;
}

#checkout-modal .checkout-summary-item strong,
#checkout-modal .checkout-summary-price{
  color:#f3eee6!important;
}

#checkout-modal .checkout-summary-item small{
  color:#9eabb2!important;
}

#checkout-modal .checkout-summary-total{
  border-top-color:rgba(241,236,227,.13)!important;
}

#checkout-modal .checkout-summary-row{
  color:#aeb9be!important;
}

#checkout-modal .checkout-summary-row strong{
  color:#f3eee6!important;
}

#checkout-modal .checkout-summary-row.total{
  color:#f4efe7!important;
}

#checkout-modal .checkout-summary-row.total strong{
  color:#e7ad3d!important;
}

#checkout-modal .checkout-shipping{
  background:#152b38!important;
  color:#aeb9be!important;
  border:1px solid rgba(241,236,227,.08)!important;
}

#checkout-modal .checkout-whatsapp{
  background:rgba(37,211,102,.10)!important;
  color:#66df91!important;
  border-color:rgba(37,211,102,.24)!important;
}

#checkout-modal .checkout-whatsapp:hover{
  background:rgba(37,211,102,.16)!important;
  color:#7bea9f!important;
}

#checkout-modal .checkout-pay{
  background:linear-gradient(135deg,#f5aa32,#e88d10)!important;
  color:#10212d!important;
  border:0!important;
  box-shadow:0 12px 28px rgba(173,101,10,.18)!important;
}

#checkout-modal .checkout-pay:hover:not(:disabled){
  background:linear-gradient(135deg,#ffba4a,#ed971a)!important;
  color:#10212d!important;
}

#checkout-modal .checkout-close{
  background:#f7f2e8!important;
  color:#263740!important;
  border-color:#d8d0c4!important;
}

#checkout-modal .checkout-close:hover{
  background:#ece4d7!important;
  color:#10212d!important;
}

/* Payment detail panels stay light and readable inside the light form. */
#checkout-modal .payment-detail-panel{
  background:#f3eee5!important;
  border-color:#d8d0c4!important;
  color:#172833!important;
}

#checkout-modal .payment-detail-head strong{
  color:#24343d!important;
}

#checkout-modal .payment-detail-head small,
#checkout-modal .payment-detail-note{
  color:#69767d!important;
}

#checkout-modal .secure-card-fields input{
  background:#fbf7ef!important;
  color:#172833!important;
  border-color:#d8d0c4!important;
}

#checkout-modal .secure-card-fields input::placeholder{
  color:#879197!important;
}

#checkout-modal .card-brand{
  background:#fffaf3!important;
  border-color:#ddd3c6!important;
}

@media(max-width:700px){
  #checkout-modal .checkout-card{
    background:#fbf7ef!important;
  }

  #checkout-modal .checkout-side{
    background:#10212d!important;
    border-left:0!important;
    border-top:1px solid rgba(241,236,227,.10)!important;
  }
}


/* =========================================================
   CHECKOUT SIDEBAR + CARD BRANDS — FINAL VISUAL FIX
   Restore dark sidebar cards and keep payment logos legible.
   ========================================================= */

#checkout-modal .checkout-coupon{
  margin:18px 0 14px!important;
  padding:16px!important;
  border:1px solid rgba(226,184,92,.16)!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#152b38 0%,#112631 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#checkout-modal .checkout-coupon label{
  color:#d9aa47!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.13em!important;
}

#checkout-modal .checkout-coupon-row input{
  min-height:44px!important;
  background:#0d1d27!important;
  color:#f3eee6!important;
  border:1px solid rgba(241,236,227,.14)!important;
  box-shadow:none!important;
}

#checkout-modal .checkout-coupon-row input::placeholder{
  color:#93a1a8!important;
  opacity:1!important;
}

#checkout-modal .checkout-coupon-row input:focus{
  background:#10232e!important;
  border-color:#d7a13a!important;
  box-shadow:0 0 0 3px rgba(215,161,58,.12)!important;
}

#checkout-modal .checkout-coupon-row button{
  min-height:44px!important;
  background:linear-gradient(135deg,#f0aa2e,#d89018)!important;
  color:#10212d!important;
  border:1px solid rgba(240,170,46,.58)!important;
  box-shadow:0 9px 22px rgba(3,10,15,.16)!important;
}

#checkout-modal .checkout-coupon-row button:hover:not(:disabled){
  background:linear-gradient(135deg,#f4b64d,#e39a24)!important;
  color:#10212d!important;
}

#checkout-modal .checkout-coupon-message{
  color:#aab5bb!important;
}

#checkout-modal .checkout-coupon-message.ok{
  color:#73dc98!important;
}

#checkout-modal .checkout-coupon-message.error{
  color:#ff8a82!important;
}

#checkout-modal .checkout-wholesale-card{
  margin-top:14px!important;
  padding:16px!important;
  border:1px solid rgba(226,184,92,.14)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(215,161,58,.08),transparent 36%),
    linear-gradient(145deg,#152b38 0%,#112631 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}

#checkout-modal .checkout-wholesale-kicker{
  color:#d9aa47!important;
}

#checkout-modal .checkout-wholesale-copy strong{
  color:#f3eee6!important;
}

#checkout-modal .checkout-wholesale-copy p{
  color:#aab5bb!important;
}

#checkout-modal .checkout-wholesale{
  background:rgba(37,211,102,.09)!important;
  color:#70e397!important;
  border:1px solid rgba(37,211,102,.25)!important;
  box-shadow:none!important;
}

#checkout-modal .checkout-wholesale:hover{
  background:rgba(37,211,102,.15)!important;
  color:#8befab!important;
  border-color:rgba(37,211,102,.38)!important;
  box-shadow:0 10px 24px rgba(3,10,15,.14)!important;
}

/* Payment brand row: consistent tiles with each real SVG kept visible. */
#checkout-modal .card-brands-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin-top:14px!important;
}

#checkout-modal .card-brand{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  padding:8px 12px!important;
  border:1px solid #d9cfbf!important;
  border-radius:11px!important;
  background:#fffaf3!important;
  overflow:hidden!important;
  box-shadow:0 1px 0 rgba(255,255,255,.82) inset!important;
}

#checkout-modal .card-brand img{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:78px!important;
  max-height:25px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Visa's SVG is blue already; keep it blue instead of inverting it to white. */
#checkout-modal .card-brand-visa{
  background:#fffaf3!important;
  border-color:#d9cfbf!important;
}

#checkout-modal .card-brand-visa img{
  filter:none!important;
  max-width:74px!important;
  max-height:24px!important;
}

#checkout-modal .card-brand-mastercard img{
  max-width:54px!important;
  max-height:28px!important;
}

#checkout-modal .card-brand-maestro img{
  max-width:52px!important;
  max-height:28px!important;
}

#checkout-modal .card-brand-cabal img{
  max-width:36px!important;
  max-height:30px!important;
}

@media(max-width:640px){
  #checkout-modal .checkout-coupon,
  #checkout-modal .checkout-wholesale-card{
    padding:14px!important;
  }

  #checkout-modal .card-brands-row{
    gap:6px!important;
  }

  #checkout-modal .card-brand{
    min-height:43px!important;
    padding:7px 8px!important;
  }

  #checkout-modal .card-brand img{
    max-width:64px!important;
    max-height:23px!important;
  }

  #checkout-modal .card-brand-cabal img{
    max-width:31px!important;
    max-height:27px!important;
  }
}


/* =========================================================
   MERCADO PAGO CARD FORM — SECURE EMBEDDED FIELDS
   ========================================================= */
#checkout-modal .mp-card-status{
  margin:14px 0 2px!important;
  padding:10px 12px!important;
  border:1px solid #d9cfbf!important;
  border-radius:11px!important;
  background:#fffaf3!important;
  color:#66737b!important;
  font-size:9px!important;
  line-height:1.45!important;
}

#checkout-modal .mp-card-status.loading{
  color:#8a671c!important;
  background:#fff5df!important;
  border-color:#e7d29e!important;
}

#checkout-modal .mp-card-status.ok{
  color:#267447!important;
  background:#edf8f1!important;
  border-color:#cde8d6!important;
}

#checkout-modal .mp-card-status.warning{
  color:#8a6513!important;
  background:#fff5df!important;
  border-color:#ead49c!important;
}

#checkout-modal .mp-card-status.error{
  color:#9d3e36!important;
  background:#fff0ee!important;
  border-color:#edc7c2!important;
}

#checkout-modal .mp-card-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:13px!important;
  margin-top:14px!important;
}

#checkout-modal .mp-card-form label{
  min-width:0!important;
  display:grid!important;
  gap:7px!important;
  color:#59666e!important;
}

#checkout-modal .mp-card-form label>span{
  color:#59666e!important;
  font-size:8px!important;
  font-weight:900!important;
  letter-spacing:.095em!important;
}

#checkout-modal .mp-card-field-full{
  grid-column:1/-1!important;
}

#checkout-modal .mp-secure-field,
#checkout-modal .mp-card-form input,
#checkout-modal .mp-card-form select{
  width:100%!important;
  min-width:0!important;
  min-height:50px!important;
  border:1px solid #d8d0c4!important;
  border-radius:13px!important;
  background:#fbf7ef!important;
  color:#172833!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
}

#checkout-modal .mp-secure-field{
  display:flex!important;
  align-items:center!important;
  padding:0 13px!important;
  overflow:hidden!important;
}

#checkout-modal .mp-secure-field iframe{
  width:100%!important;
  height:48px!important;
  border:0!important;
  background:transparent!important;
}

#checkout-modal .mp-card-form input,
#checkout-modal .mp-card-form select{
  padding:0 13px!important;
  outline:0!important;
  font-size:13px!important;
}

#checkout-modal .mp-card-form input:focus,
#checkout-modal .mp-card-form select:focus,
#checkout-modal .mp-secure-field:focus-within{
  border-color:#d7a13a!important;
  box-shadow:0 0 0 3px rgba(215,161,58,.12)!important;
  background:#fffaf2!important;
}

#checkout-modal .mp-card-form select{
  appearance:auto!important;
}

@media(max-width:640px){
  #checkout-modal .mp-card-form{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

  #checkout-modal .mp-card-field-full{
    grid-column:auto!important;
  }

  #checkout-modal .mp-secure-field,
  #checkout-modal .mp-card-form input,
  #checkout-modal .mp-card-form select{
    min-height:52px!important;
  }
}


/* =========================================================
   MERCADO PAGO CARD FORM — INTERACTION + CUSTOM SELECTS FIX
   ========================================================= */
#checkout-modal .mp-secure-field{
  position:relative!important;
  z-index:2!important;
  padding:0!important;
  overflow:hidden!important;
  pointer-events:auto!important;
  cursor:text!important;
}

#checkout-modal .mp-secure-field iframe{
  display:block!important;
  position:relative!important;
  z-index:3!important;
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  border:0!important;
  background:transparent!important;
  pointer-events:auto!important;
}

#checkout-modal .mp-card-form input{
  position:relative!important;
  z-index:2!important;
  pointer-events:auto!important;
}

#checkout-modal .mp-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}

#checkout-modal .mp-visual-select{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
}

#checkout-modal .mp-visual-select-trigger{
  width:100%!important;
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:0 13px!important;
  border:1px solid #d8d0c4!important;
  border-radius:13px!important;
  background:#fbf7ef!important;
  color:#172833!important;
  font:inherit!important;
  font-size:12px!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;
}

#checkout-modal .mp-visual-select-trigger:disabled{
  cursor:not-allowed!important;
  color:#8b9498!important;
  opacity:.78!important;
}

#checkout-modal .mp-visual-select-trigger:focus-visible{
  outline:0!important;
  border-color:#d7a13a!important;
  box-shadow:0 0 0 3px rgba(215,161,58,.12)!important;
}

#checkout-modal .mp-visual-select-value{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#checkout-modal .mp-visual-select-chevron{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto!important;
  transition:transform .16s ease!important;
}

#checkout-modal .mp-visual-select.is-open .mp-visual-select-chevron{
  transform:rotate(180deg)!important;
}

#checkout-modal .mp-visual-select-menu{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  z-index:10050!important;
  max-height:230px!important;
  overflow:auto!important;
  padding:6px!important;
  border:1px solid #d8d0c4!important;
  border-radius:13px!important;
  background:#fffaf3!important;
  box-shadow:0 16px 38px rgba(16,33,45,.16)!important;
}

#checkout-modal .mp-visual-select-menu[hidden]{
  display:none!important;
}

#checkout-modal .mp-visual-select-option{
  width:100%!important;
  min-height:40px!important;
  padding:9px 10px!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#172833!important;
  font:inherit!important;
  font-size:11px!important;
  text-align:left!important;
  cursor:pointer!important;
}

#checkout-modal .mp-visual-select-option:hover:not(:disabled),
#checkout-modal .mp-visual-select-option.is-selected{
  background:#f3ead8!important;
}

#checkout-modal .mp-visual-select-option:disabled{
  color:#9aa2a6!important;
  cursor:default!important;
}

@media(max-width:640px){
  #checkout-modal .mp-secure-field iframe,
  #checkout-modal .mp-visual-select-trigger{
    min-height:52px!important;
    height:52px!important;
  }
}


/* =========================================================
   DORADO — MERCADO PAGO / TARJETA · POLISH MÓVIL 2026-09-28
   Cambios visuales acotados: no altera el flujo de pago.
   ========================================================= */

/* El logo de Mercado Pago deja de verse diminuto dentro del panel. */
#checkout-modal [data-payment-panel="mercadopago"] .payment-detail-head{
  align-items:center!important;
  gap:16px!important;
}

#checkout-modal [data-payment-panel="mercadopago"] .payment-brand-mp{
  width:88px!important;
  min-width:88px!important;
  height:58px!important;
  flex:0 0 88px!important;
  display:grid!important;
  place-items:center!important;
  padding:8px 10px!important;
  border:1px solid #d9cfbf!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(16,33,45,.08)!important;
  overflow:hidden!important;
}

#checkout-modal [data-payment-panel="mercadopago"] .payment-brand-mp img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:70px!important;
  max-height:40px!important;
  object-fit:contain!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

/* Labels y campos de tarjeta con más aire y jerarquía visual. */
#checkout-modal .mp-card-form{
  gap:15px 13px!important;
}

#checkout-modal .mp-card-form label{
  gap:8px!important;
}

#checkout-modal .mp-card-form label>span{
  margin-left:3px!important;
  color:#4f6069!important;
  font-size:9px!important;
  font-weight:900!important;
  line-height:1.2!important;
  letter-spacing:.105em!important;
}

#checkout-modal .mp-secure-field{
  box-sizing:border-box!important;
  min-height:56px!important;
  padding:0 15px!important;
  border:1px solid #d6cec1!important;
  border-radius:14px!important;
  background:#fffaf3!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 2px 8px rgba(16,33,45,.025)!important;
}

#checkout-modal .mp-secure-field iframe{
  display:block!important;
  width:100%!important;
  height:54px!important;
  min-height:54px!important;
  border:0!important;
  background:transparent!important;
  pointer-events:auto!important;
}

#checkout-modal .mp-card-form input,
#checkout-modal .mp-visual-select-trigger{
  box-sizing:border-box!important;
  min-height:56px!important;
  padding:0 15px!important;
  border:1px solid #d6cec1!important;
  border-radius:14px!important;
  background:#fffaf3!important;
  color:#172833!important;
  font-size:14px!important;
  line-height:1.2!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 2px 8px rgba(16,33,45,.025)!important;
}

#checkout-modal .mp-card-form input::placeholder{
  color:#7d898f!important;
  opacity:1!important;
}

#checkout-modal .mp-card-form input:focus,
#checkout-modal .mp-secure-field:focus-within,
#checkout-modal .mp-visual-select-trigger:focus-visible{
  outline:0!important;
  border-color:#d7a13a!important;
  background:#fffdf8!important;
  box-shadow:0 0 0 3px rgba(215,161,58,.13)!important;
}

#checkout-modal .mp-card-status{
  margin-top:16px!important;
  padding:11px 13px!important;
  border-radius:12px!important;
  font-size:10px!important;
  font-weight:700!important;
}

@media(max-width:640px){
  #checkout-modal [data-payment-panel="mercadopago"] .payment-brand-mp{
    width:84px!important;
    min-width:84px!important;
    height:56px!important;
    flex-basis:84px!important;
  }

  #checkout-modal [data-payment-panel="mercadopago"] .payment-brand-mp img{
    max-width:68px!important;
    max-height:38px!important;
  }

  #checkout-modal .mp-card-form{
    gap:13px!important;
  }

  #checkout-modal .mp-secure-field,
  #checkout-modal .mp-card-form input,
  #checkout-modal .mp-visual-select-trigger{
    min-height:58px!important;
  }

  #checkout-modal .mp-secure-field iframe{
    height:56px!important;
    min-height:56px!important;
  }

  #checkout-modal .mp-card-form label>span{
    margin-left:2px!important;
    font-size:9px!important;
  }
}