/* ===========================
   VDR OVERRIDES (SAFE FOR REFRESH)
   =========================== */

/* === VDR SUPER PREMIUM STYLES === */

/* 1. Botones premium */
.button,
.shopify-buy__btn,
.btn,
.shopify-payment-button__button,
.button--secondary {
  border: 2px solid transparent;
  border-radius: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.button:hover,
.shopify-buy__btn:hover,
.btn:hover,
.shopify-payment-button__button:hover,
.button--secondary:hover {
  transform: translateY(-2px);
  border-color: #D4AF37;
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.22);
}

/* 2. Tarjetas de producto */
.card,
.product-card {
  border: 1px solid rgba(212, 175, 55, 0.18);
  border-radius: 14px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.card:hover,
.product-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
  border-color: rgba(212, 175, 55, 0.35);
}

/* 3. Imágenes dentro de tarjetas */
.card__media img,
.product-card__image,
.card img {
  transition: transform 0.35s ease, filter 0.35s ease;
}
.card:hover .card__media img,
.product-card:hover .product-card__image,
.card:hover img {
  transform: scale(1.04);
  filter: brightness(0.95);
}

/* 4. Títulos con subrayado animado dorado */
h2, h3 {
  position: relative;
  display: inline-block;
}
h2::after, h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 3px;
  background: #D4AF37;
  transition: width 0.3s ease;
}
h2:hover::after, h3:hover::after { width: 100%; }

/* 5. Badges dorados */
.badge,
.badge--bottom-left,
.badge--top-left,
.badge--top-right {
  background: #D4AF37 !important;
  color: #1A1A1A !important;
  font-weight: 700;
  border-radius: 8px;
}

/* 6. Precio de oferta destacado */
.price__sale .price-item--sale { font-weight: 800; }

/* 7. Animación de anuncio tipo marquesina */
.announcement-bar__message {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
}
@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* 8. Ajustes mobile */
@media (max-width: 749px) {
  .card:hover, .product-card:hover { transform: translateY(-2px) scale(1.01); }
  h2::after, h3::after { bottom: -6px; height: 2px; }
}

/* === FIX FRANJA BLANCA BAJO EL SLIDESHOW === */
slideshow-component,
.slideshow,
.slideshow.banner,
.slider,
.slider--desktop,
.slider--mobile,
.slideshow__controls {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.slideshow__media,
.slideshow__content,
.section,
.section--slideshow {
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
}
.slider-buttons,
.slideshow__controls { padding: 8px 0 !important; margin: 0 auto !important; }
.main-page-content > .shopify-section:first-child {
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.slideshow__controls::before,
.slideshow__controls::after,
.slider-buttons::before,
.slider-buttons::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
.slider-counter { background: transparent !important; }
.slider-counter__link .dot { opacity: 0.75; }
.slider-counter__link[aria-current="true"] .dot { opacity: 1; }

/* ======================================================
   LIMITAR OVERFLOW HORIZONTAL SOLO EN HOME (INDEX)
   ====================================================== */
body.template-index,
html.template-index { overflow-x: hidden !important; }

body.template-index .slideshow,
body.template-index .banner,
body.template-index .multicolumn,
body.template-index .rich-text,
body.template-index .page-width,
body.template-index .slider--mobile {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
body.template-index [style*="100vw"] { width: 100% !important; }

/* ===== FIX específico: anuncio/marquesina ===== */
.announcement-bar,
.announcement-bar__announcement,
.utility-bar__grid .announcement-bar-slider,
.announcement-bar-slider,
.announcement-bar-slider .slider {
  overflow: hidden !important;
  max-width: 100% !important;
}
.announcement-bar__message {
  display: inline-block;
  min-width: 100%;
  will-change: transform;
}
.announcement-bar .slider-button--prev,
.announcement-bar .slider-button--next {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Guardas extra */
.slideshow, .banner, .slider, .page-width { max-width: 100%; }

/* Logo header estable */
.header__heading-logo { display:block; height:auto; max-width:100%; }
.header__heading-logo-wrapper { display:block; overflow:hidden; }

/* Evita que pseudo-elementos de rich-text cambien el layout */
.rich-text::after {
  position:absolute !important;
  display:block !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  content:'' !important;
  inset:auto !important;
  transition:none !important;
  animation:none !important;
}
@media (min-width: 990px){
  .rich-text .content-container { min-height: clamp(220px, 28vh, 380px); }
  .rich-text .content-container::after,
  .rich-text .rte::after {
    position: absolute; content: ""; inset: auto 0 0 0; height: 0; pointer-events: none;
  }
  .rich-text { position: relative; }
}

/* Línea base para header */
.section-header { border-bottom: 0px solid transparent; }
.header-wrapper--border-bottom.section-header {
  border-bottom-color: rgba(var(--color-foreground), 0.08);
}

/* Overflow global seguro */
html, body { overflow-x: clip; }

/* === Header icons: estabilidad sin duplicados === */
.header__icon,
.header__icon--summary {
  inline-size:44px; block-size:44px;
  display:inline-flex; align-items:center; justify-content:center;
}
.header__icon{
  min-inline-size:24px; min-block-size:24px; line-height:1;
}
.header__icon svg{ display:block; height:auto; width:auto; }
.header__icon .svg-wrapper,
.slider-button .svg-wrapper{ display:inline-block; inline-size:auto; block-size:auto; }
.header__icon { vertical-align: middle; }

/* Botón de búsqueda: mostrar UNA capa a la vez */
.header__icon--search .icon-close{ display:none; }
.header__icon--search[aria-expanded="true"] .icon-close{ display:inline; }
.header__icon--search[aria-expanded="true"] .icon-search{ display:none; }
.header__icon--search .svg-wrapper:last-child{ display:none; }
.header__icon--search[aria-expanded="true"] .svg-wrapper:first-child{ display:none; }
.header__icon--search[aria-expanded="true"] .svg-wrapper:last-child{ display:inline-block; }

/* ======================================================
   VDR Cart Fix — imagen, meta, quantity, remove y botón
   ====================================================== */

/* 1) Imagen del carrito: tamaño fijo + cover sin deformar */
.cart-drawer .cart-item__media,
.cart .cart-item__media{
  width:80px; height:80px; border-radius:.6rem; overflow:hidden;
  background:rgba(var(--color-foreground),.04);
  flex:0 0 auto;
}
@media(min-width:750px){
  .cart-drawer .cart-item__media,
  .cart .cart-item__media{ width:96px; height:96px; }
}
.cart-drawer .cart-item__media img,
.cart .cart-item__media img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* Soporte alterno si tu markup usa .cart-item__image */
.cart-drawer .cart-item__image,
.cart .cart-item__image{
  width:80px; height:80px; border-radius:.6rem; overflow:hidden;
  background:rgba(var(--color-foreground),.04); flex:0 0 auto;
}
@media(min-width:750px){
  .cart-drawer .cart-item__image,
  .cart .cart-item__image{ width:96px; height:96px; }
}
.cart-drawer .cart-item__image img,
.cart .cart-item__image img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
}

/* 2) Meta (Altura) en una sola línea */
.cart-item__meta,
.cart .cart-item__details .product-option,
.cart-drawer .cart-item__details .product-option {
  display: inline-flex !important;
  gap: .4rem !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
}
.cart-item__meta br,
.cart .cart-item__details .product-option br,
.cart-drawer .cart-item__details .product-option br { display: none !important; }
.cart-item__meta dl,
.cart-item__meta dt,
.cart-item__meta dd { display: inline !important; margin: 0 !important; }
.cart-item__meta dt::after { content: ":"; }

/* 3) Quantity centrado perfecto */
.quantity,
.cart .quantity,
.cart-drawer .quantity { align-items: center !important; justify-content: center !important; gap: .6rem !important; }
.quantity__button,
.cart .quantity__button,
.cart-drawer .quantity__button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:36px !important; height:36px !important; line-height:0 !important; appearance:none !important; background:transparent !important; border:0 !important;
}
.quantity__button .svg-wrapper,
.quantity__button svg,
.cart .quantity__button .svg-wrapper,
.cart .quantity__button svg,
.cart-drawer .quantity__button .svg-wrapper,
.cart-drawer .quantity__button svg{ width:18px !important; height:18px !important; display:block !important; margin:0 auto !important; }
.quantity__input,
.cart .quantity__input,
.cart-drawer .quantity__input{
  width:44px !important; height:36px !important; line-height:36px !important;
  display:inline-block !important; text-align:center !important;
  border:0 !important; background:transparent !important; padding:0 !important;
}

/* 4) Botón eliminar: consistente y centrado */
cart-remove-button button{
  padding:0 !important; margin:0 !important; min-width:44px !important; min-height:44px !important;
  width:44px !important; height:44px !important; line-height:0 !important; display:inline-flex !important;
  align-items:center !important; justify-content:center !important; border-radius:12px !important;
  border:1px solid rgba(var(--color-foreground),.15) !important;
  background:transparent !important; box-shadow:none !important;
}
.cart-drawer cart-remove-button,
.cart cart-remove-button{ display:block; margin-top:6px; }
.cart-drawer .quantity, .cart .quantity{ margin-bottom:8px; }
cart-remove-button button .icon,
cart-remove-button button .svg-wrapper,
cart-remove-button button svg{ width:20px !important; height:20px !important; display:block !important; margin:0 auto !important; }

/* 5) Alerta “fantasma”: oculta si no hay mensaje real */
.cart-item__error{ visibility:hidden; height:0; margin:0; padding:0; }
.cart-item__error .cart-item__error-text{ display:none; }
.cart-item__error[aria-hidden="false"]{
  visibility:visible; height:auto; margin-top:.4rem; padding:0;
}

/* 6) Neutralizar halo del pseudo-elemento del tema en botones del carrito */
.cart-drawer .button::after,
.cart .button::after{
  box-shadow:0 0 0 var(--buttons-border-width)
             rgba(var(--color-button),var(--alpha-button-background));
}
.cart-drawer .button:hover::after,
.cart .button:hover::after{
  box-shadow:0 0 0 var(--buttons-border-width)
             rgba(var(--color-button),var(--alpha-button-background));
}

/* 7) Checkout en tinto y sin doble borde (cubre variantes comunes) */
:root{
  --vdr-tinto: #8A1538;
  --vdr-tinto-text: #ffffff;
}
.cart__ctas .checkout,
.cart-drawer__footer .checkout,
.cart__ctas .button[name="checkout"],
.cart-drawer__footer .button[name="checkout"],
.cart__ctas [name="checkout"],
.cart-drawer__footer [name="checkout"]{
  background: var(--vdr-tinto) !important;
  color: var(--vdr-tinto-text) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: none !important;
}
.cart__ctas .checkout:after,
.cart-drawer__footer .checkout:after,
.cart__ctas .button[name="checkout"]:after,
.cart-drawer__footer .button[name="checkout"]:after,
.cart__ctas [name="checkout"]:after,
.cart-drawer__footer [name="checkout"]:after{
  box-shadow: none !important;
}
.cart__ctas .checkout:hover,
.cart-drawer__footer .checkout:hover,
.cart__ctas .button[name="checkout"]:hover,
.cart-drawer__footer .button[name="checkout"]:hover,
.cart__ctas [name="checkout"]:hover,
.cart-drawer__footer [name="checkout"]:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* ====== Fix dots: centrados + a11y 48px ====== */
.banner-container .slick-dots{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(10px, env(safe-area-inset-bottom) + 8px, 18px);
  display: flex !important;
  gap: 10px;               /* ≥8px para Lighthouse */
  margin: 0;
  padding: 0;
  background: transparent;
  z-index: 3;
}

/* Cada item define el área táctil y centra el punto */
.banner-container .slick-dots li{
  width: 48px;             /* hit area */
  height: 48px;            /* hit area */
  display: grid;
  place-items: center;     /* centra el pseudo del botón */
  margin: 0;
  line-height: 0;          /* evita herencias raras */
}

/* Botón ocupa todo el área táctil */
.banner-container .slick-dots li button{
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  position: relative;
  touch-action: manipulation;
}

/* Punto visible pequeño, centrado (anula el del tema) */
.banner-container .slick-dots li button:before{
  content: "" !important;  /* quita el '•' del tema */
  display: block;
  width: 8px;             /* tamaño del punto */
  height: 18px;
  border-radius: 999px;
  margin: 0;
  box-shadow: inset 0 0 0 1.5px var(--vdr-fg-dim);
  background: transparent;
  opacity: .95;
  transform: none;         /* nada de top/left heredados */
}

/* Hover/active */
.banner-container .slick-dots li:hover button:before{
  transform: scale(1.12);
  opacity: 1;
}
.banner-container .slick-dots li.slick-active button:before{
  background: var(--vdr-accent) !important;
  box-shadow: 0 0 0 1.5px var(--vdr-accent), 0 0 0 4px rgba(0,0,0,.12) !important;
  transform: scale(1.1);
}

/* Flechas también a 48px */
.banner-container .slick-prev,
.banner-container .slick-next{
  width: 48px;
  height: 48px;
  border-radius: 999px;
  touch-action: manipulation;
}
 /* vita clics en slides ocultos con CSS (no con href) */
.banner-container .slick-slide[aria-hidden="true"] a{
  pointer-events: none;
}