/* ==========================================================================
   LEGADO AZZURRO - custom layer
   Upload to: static/css/legado-custom.css

   Loaded from layouts/layout.tpl. Bump the ?v= there on EVERY change:
   static_url adds no hash, so CloudFront keeps serving the old file forever.

   This is a layer on top of a third-party theme (Rio). !important is used
   deliberately where the theme's own rules would otherwise win the cascade.
   ========================================================================== */

:root{
  --lgz-green:#00a650;        /* discount green, Mercado Libre style */
  --lgz-wine:#7d121d;         /* brand burgundy */
  --lgz-wine-br:#a81f2c;
}

/* ==========================================================================
   1. DISCOUNT BADGE - grid items and product detail
   ========================================================================== */

.lgz-off{
  display:inline-block;
  margin-left:8px;
  padding:2px 7px;
  border-radius:4px;
  background:var(--lgz-green);
  color:#fff !important;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
  letter-spacing:.2px;
  white-space:nowrap;
  vertical-align:middle;
}

/* Grid: struck-through price on its own line, current price + badge below. */
.js-item-price-container{ line-height:1.35; }
.js-item-price-container .price-compare{
  display:block !important;
  font-size:13px;
  opacity:.55;
  margin-bottom:1px;
}
.js-item-price-container .item-price{
  font-size:17px;
  font-weight:700;
}

/* Interest-free installments in green as well: on Mercado Libre that green
   line is what carries the click, and here it rendered in the same grey as
   the rest of the card. */
.item-installments .text-accent,
.js-item-installments-container .text-accent{
  color:var(--lgz-green) !important;
}

@media (max-width:600px){
  .lgz-off{ font-size:11px; padding:1px 6px; margin-left:6px; }
  .js-item-price-container .item-price{ font-size:15px; }
}

/* Product detail: same badge, scaled up. */
#single-product .lgz-off{
  font-size:15px;
  padding:4px 10px;
  border-radius:5px;
  margin-left:12px;
}

/* ==========================================================================
   2. PRODUCT DETAIL - smaller photo, bigger buying block
   The column split (8/4 -> 7/5) lives in templates/product.tpl.
   ========================================================================== */

/* Cap the image height so price and CTA are above the fold on a laptop.
   The theme lets the image grow to its natural height. */
@media (min-width:768px){
  #single-product .product-image-cont img,
  #single-product .js-product-slider-main img{
    max-height:78vh;
    object-fit:contain;
  }
}

#single-product .js-price-display{
  font-size:34px !important;
  font-weight:800 !important;
  line-height:1.1;
  letter-spacing:-.5px;
}
#single-product .js-compare-price-display{
  font-size:17px !important;
  opacity:.5;
  margin-bottom:2px;
}

@media (max-width:767px){
  #single-product .js-price-display{ font-size:28px !important; }
}

/* --- Size and colour selectors ------------------------------------------- */

#single-product .btn-variant{
  min-width:52px;
  min-height:46px;
  padding:10px 14px;
  font-size:15px;
  font-weight:600;
  border-width:1.5px;
  border-radius:6px;
  transition:transform .15s ease, border-color .15s ease, background-color .15s ease;
}
#single-product .btn-variant:hover{
  transform:translateY(-2px);
  border-color:var(--lgz-wine);
}
#single-product .btn-variant.selected{
  border-color:var(--lgz-wine) !important;
  border-width:2px;
  background:rgba(125,18,29,.06);
}
/* Colour swatches are square images, not text: they need size, not padding. */
#single-product .btn-variant-color{
  min-width:46px;
  width:46px;
  height:46px;
  padding:3px;
}

/* The TALLE / COLOR labels rendered at body-text size. */
#single-product .form-label,
#single-product .js-variation-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:10px;
}

/* --- Add to cart ---------------------------------------------------------- */

#single-product .js-addtocart.btn-primary{
  min-height:60px;
  font-size:17px;
  font-weight:800;
  letter-spacing:1.4px;
  text-transform:uppercase;
  border-radius:8px;
  box-shadow:0 8px 22px rgba(125,18,29,.28);
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
#single-product .js-addtocart.btn-primary:hover:not(:disabled){
  transform:translateY(-2px);
  background:var(--lgz-wine-br);
  box-shadow:0 14px 30px rgba(125,18,29,.38);
}
#single-product .js-addtocart.btn-primary:active:not(:disabled){
  transform:translateY(0);
}

/* --- Payment / shipping accordions ---------------------------------------- */
/* They rendered as two bare text links. As bordered rows they read as things
   you can open, which is what they are. */

#single-product .js-accordion-container,
#single-product .product-shipping-calculator{
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  padding:14px 16px;
  margin-bottom:12px !important;
  transition:border-color .18s ease, background-color .18s ease;
}
#single-product .js-accordion-container:hover,
#single-product .product-shipping-calculator:hover{
  border-color:rgba(125,18,29,.45);
  background:rgba(125,18,29,.03);
}
#single-product .js-accordion-toggle .subtitle{
  font-size:14px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
}

/* Free shipping is the strongest argument on the page and rendered in the
   same grey as the disclaimers. */
#single-product .js-product-shipping-free,
#single-product .shipping-free-message{
  color:var(--lgz-green) !important;
  font-weight:600;
}

/* ==========================================================================
   3. HEADER SEARCH - wider and taller
   ========================================================================== */

@media (min-width:768px){
  .head-big-search-md .search-container{
    max-width:none;
    width:100%;
    flex:1 1 auto;
  }
  /* The theme caps the search column at its content width; without this the
     input cannot grow no matter how wide the input itself is set.
     :has() is Baseline since 2023 and degrades to the old narrow box on
     anything older, so the header never breaks. */
  .head-big-search-md .col-utility:has(.search-container){
    flex:1 1 auto;
    max-width:none;
    min-width:0;
    padding-right:24px;
  }
}

.search-input{
  height:48px !important;
  padding:0 46px 0 18px !important;
  font-size:15px !important;
  border-radius:24px !important;
  border:1.5px solid rgba(0,0,0,.16) !important;
  background:rgba(0,0,0,.02);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.search-input::placeholder{
  font-size:14px;
  letter-spacing:.2px;
  opacity:.6;
}
.search-input:focus{
  border-color:var(--lgz-wine) !important;
  background:#fff;
  box-shadow:0 0 0 3px rgba(125,18,29,.10);
  outline:none;
}
.search-input-submit{
  width:46px;
  height:48px;
  right:0;
}

@media (max-width:767px){
  .search-input{ height:44px !important; font-size:14px !important; }
  .search-input-submit{ height:44px; }
}

/* ==========================================================================
   4. TAG BADGES - fdlt (Favoritos de la temporada) and ss (Super Sale)
   Driven from the product's Tags field in the admin. The markup is rendered
   by Twig in snipplets/grid/item.tpl, product-form.tpl and product-image.tpl;
   only the look lives here.
   ========================================================================== */

/* --- Favoritos de la temporada ------------------------------------------- */

.lgz-fdlt{
  position:relative;
  display:block;
  overflow:hidden;              /* recorta el destello que lo cruza */
  width:max-content;
  max-width:100%;
  border-radius:6px;
  line-height:0;                /* mata el hueco que deja el img inline */
}
.lgz-fdlt img{
  display:block;
  width:100%;
  height:auto;
}
/* Destello que cruza cada 4,5 s. La chapa es plana; sin esto no se mueve
   nada y el cliente pidio que llamara la atencion. */
.lgz-fdlt::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:45%;
  pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform:translateX(-160%) skewX(-18deg);
  animation:lgz-brillo 4.5s ease-in-out infinite;
}
@keyframes lgz-brillo{
  0%, 62%{ transform:translateX(-160%) skewX(-18deg); }
  85%, 100%{ transform:translateX(320%) skewX(-18deg); }
}

/* Ficha: debajo del precio. 230 px es "no muy grande" con el titulo legible. */
#single-product .lgz-fdlt{ width:230px; margin:0 0 14px; }

/* Grilla: arriba del nombre, en el lugar donde Mercado Libre pone su
   "OFERTA IMPERDIBLE". */
.js-item-description .lgz-fdlt{ width:152px; margin:0 0 7px; }

@media (max-width:600px){
  #single-product .lgz-fdlt{ width:190px; }
  .js-item-description .lgz-fdlt{ width:118px; margin-bottom:5px; }
}

/* --- Super Sale ----------------------------------------------------------- */

.lgz-ss{
  position:absolute;
  top:14px; left:14px;
  z-index:6;
  display:block;
  pointer-events:none;          /* no puede robarle el click a la foto */
  line-height:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.28));
  transform-origin:50% 50%;
  animation:lgz-sello-entra .7s cubic-bezier(.2,1.5,.4,1) both,
            lgz-sello-late 4s ease-in-out 1s infinite;
}
.lgz-ss img{ display:block; width:100%; height:auto; }

/* Entra de golpe, como un sello estampado, y despues se mece apenas. */
@keyframes lgz-sello-entra{
  from{ opacity:0; transform:scale(1.9) rotate(-22deg); }
  to{   opacity:1; transform:scale(1) rotate(-8deg); }
}
@keyframes lgz-sello-late{
  0%, 100%{ transform:scale(1) rotate(-8deg); }
  50%{      transform:scale(1.06) rotate(-3deg); }
}

#single-product .lgz-ss{ width:118px; top:18px; left:18px; }
.js-item-product .lgz-ss{ width:62px; top:8px; left:8px; }

@media (max-width:600px){
  #single-product .lgz-ss{ width:84px; top:12px; left:12px; }
  .js-item-product .lgz-ss{ width:46px; top:6px; left:6px; }
}

/* ==========================================================================
   5. PRODUCT DETAIL - cuotas y envio gratis, uno debajo del otro
   Sin mover una linea de marcado: la columna de las cuotas pasa a ocupar
   toda la fila y las dos lineas quedan apiladas, con la misma caja.
   ========================================================================== */

#single-product .js-price-container > .col-auto{
  flex:0 0 100%;
  max-width:100%;
  margin-top:14px;
}
/* La chapa va en su propia fila, sin el margen de las cajas de beneficio. */
#single-product .js-price-container > .col-12 > .lgz-fdlt{ margin-bottom:2px; }

/* La rayita que el tema mete entre las dos las separaba en dos bloques
   sueltos. :has() es Baseline desde 2023; donde no exista, queda la rayita
   y no se rompe nada. */
#single-product .divider:has(+ .js-free-shipping-message){ display:none; }

#single-product .js-max-installments-container,
#single-product .js-free-shipping-message{
  position:relative;
  overflow:hidden;
  display:block;
  width:100%;
  padding:13px 16px 13px 15px;
  border:1.5px solid rgba(0,166,80,.4);
  border-left:5px solid var(--lgz-green);
  border-radius:8px;
  background:rgba(0,166,80,.07);
  margin-bottom:10px !important;
}
#single-product .js-free-shipping-message{ padding-bottom:13px !important; }

#single-product .js-max-installments-container *,
#single-product .js-free-shipping-message .font-small{
  font-size:15px !important;
  line-height:1.4;
  color:#0a5c31;
}
/* El numero de cuotas y el monto son lo que se mira.
   NO va --lgz-green (#00a650) aca: medido sobre el fondo de la caja da
   2,96:1, debajo del minimo de 4,5. Justo el dato mas importante quedaba
   el mas dificil de leer. #0a6e37 da 5,90:1 y se sigue leyendo verde.
   El verde vivo funciona en la cucarda de % OFF porque ahi es texto blanco
   sobre el verde, no verde sobre claro. */
#single-product .js-installment-amount,
#single-product .js-installment-price{
  font-weight:800;
  color:#0a6e37 !important;
}
#single-product .js-free-shipping-message .svg-icon-text{
  color:var(--lgz-green);
  width:20px; height:20px;
}
/* El disclaimer de "no acumulable" no compite con el mensaje. */
#single-product .js-free-shipping-discount-not-combinable{
  font-size:12px !important;
  opacity:.6;
  color:#0a5c31;
}

/* Destello suave que recorre las dos cajas, desfasado, para que se note que
   son un beneficio y no un texto legal mas. */
#single-product .js-max-installments-container::after,
#single-product .js-free-shipping-message::after{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width:40%;
  pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  transform:translateX(-160%) skewX(-18deg);
  animation:lgz-brillo 5s ease-in-out infinite;
}
#single-product .js-free-shipping-message::after{ animation-delay:1.6s; }

@media (max-width:600px){
  #single-product .js-max-installments-container *,
  #single-product .js-free-shipping-message .font-small{ font-size:14px !important; }
}

/* ==========================================================================
   6. MAIN NAV - two rows
   Markup lives in snipplets/navigation/navigation.tpl (two <ul>) and the
   split rule in navigation-nav-list.tpl.
   ========================================================================== */

@media (min-width:768px){
  /* The theme gives every .nav-desktop-list 10px top and bottom. Two lists
     stacked would leave a 20px gutter between the rows and read as two
     separate menus instead of one in two lines. */
  .nav-desktop .nav-desktop-list{ padding-bottom:2px; }
  .nav-desktop-list-institucional{ padding-top:0 !important; }
}

/* The second row is support material, not the store's offer: it must not
   compete with the categories above it. */
.nav-desktop-list-institucional .nav-list-link{
  font-size:12.5px;
  letter-spacing:.2px;
  opacity:.62;
  transition:opacity .18s ease;
}
.nav-desktop-list-institucional .nav-list-link:hover,
.nav-desktop-list-institucional .nav-list-link.selected{
  opacity:1;
}

/* En mobile el menu es el panel lateral y no manda el parametro de fila:
   ahi salen todos los items en una sola lista, como hasta ahora. */
@media (max-width:767px){
  .nav-desktop-list-institucional{ display:none; }
}

/* ==========================================================================
   7. ACCESSIBILITY
   Every transition above is decorative and carries no information.
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .lgz-fdlt::after,
  .lgz-ss,
  #single-product .js-max-installments-container::after,
  #single-product .js-free-shipping-message::after{ animation:none !important; }
  /* El sello no puede quedar en el estado inicial de la animacion de entrada
     (opacity 0), asi que se lo devuelve a mano. */
  .lgz-ss{ opacity:1; transform:rotate(-8deg); }
  #single-product .btn-variant,
  #single-product .js-addtocart.btn-primary,
  #single-product .js-accordion-container,
  #single-product .product-shipping-calculator,
  .search-input{ transition:none !important; }
  #single-product .btn-variant:hover,
  #single-product .js-addtocart.btn-primary:hover:not(:disabled){ transform:none !important; }
}