/* ═══════════════════════════════════════════════════════════════════
   GUAYACAN · 24-sep-2026 · LOS COLORES DE LA MARCA (assets/gy-marca.css)

   Botones y todo lo "elegido" pasan del negro al VERDE OLIVA de Guayacan:
   el del logo, en su version profunda, para que se vea elegante como el
   negro y el texto blanco se lea bien. Los numeritos (carrito y favoritos)
   van en el AZUL del isotipo, el mismo que ya usa el carrito de Tiendu.

     #ABAE55  oliva del logo    → lineas, subrayados, foco del teclado
     #5F612E  oliva profundo    → botones y selecciones (blanco encima: 6,5 a 1)
     #4E502B  oliva noche       → al pasar el mouse y titulos grandes
     #4684B9  azul del isotipo  → (hasta el 25-sep) numeritos del carrito y favoritos
     #6B99C7  azul Guayacan claro   ┐ 25-sep (pedido de la familia): WhatsApp en AZUL GUAYACAN
     #5186BD  azul Guayacan         ┘ (degradado claro → azul). Los numeritos pasan a #5186BD.
     El carrito y el pago de Tiendu (Personalizar → Color principal) van en el oliva #5F612E:
     verde = comprar, azul = hablar con nosotros.

   25-sep (tarde, pedido de la familia con capturas): "cambia esos verdes por este
   verde #ABAE55". Los verdes de COMPRAR (botones, "Agregar", colores y talles
   elegidos, ventanita de Agregar, buscador, carrito flotante) pasan al verde del
   logo #ABAE55, igual que la categoria elegida de la barra: letra blanca con la
   misma sombrita casi invisible para que se lea. Al pasar el mouse: #989B46.
   El carrito y el pago de Tiendu (Personalizar -> Color principal) tambien pasan
   a #abae55. Quedan como estaban: los titulos (#4E502B), el numerito de cada
   categoria en la portada (#5F612E) y los detalles del menu y de la guia de talles.
   Volver al oliva profundo: :root --gy-accion y --color-accent a #5F612E (y el
   color principal de Tiendu a #5f612e) · copia exacta del archivo anterior en la PC:
   CRM\tiendu_respaldos\tema_vivo_verde_claro_25sep\gy-marca.css.antes_verde_claro
   25-sep (noche, pedido de la familia con captura): el "Agregar" de las tarjetas vuelve
   a como estaba antes: letra en oliva profundo #5F612E con el subrayado en #ABAE55
   (al pasar el mouse, letra #4E502B y subrayado #5F612E). Lo demas sigue en #ABAE55.

   Volver atras: borrar la linea de gy-marca.css en layout/theme.liquid.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --gy-oliva: #ABAE55;
  --gy-accion: #ABAE55;
  --gy-accion-hover: #4E502B;
  --gy-accion-boton-hover: #989B46;
  --gy-accion-sombra: 0 0 1px rgba(78, 80, 43, .45);
  --gy-oliva-profundo: #5F612E;
  --gy-accion-texto: #FFFFFF;
  --gy-azul: #5186BD;
  --gy-azul-claro: #6B99C7;
  --color-accent: #ABAE55;
  --color-accent-text: #FFFFFF;
}

/* ── botones principales del tema (Agregar al carrito, Suscribirme…) ── */
html .button:not(.button--light):not(.button--ghost) {
  background: var(--gy-accion);
  color: var(--gy-accion-texto);
  text-shadow: var(--gy-accion-sombra);
}
html .button:not(.button--light):not(.button--ghost):hover {
  opacity: 1;
  background: var(--gy-accion-boton-hover);
}

/* ── el "Agregar" de las tarjetas ── */
html .button-quiet {
  color: var(--gy-oliva-profundo);
  border-bottom: 2px solid var(--gy-oliva);
  font-weight: 600;
}
html .button-quiet:hover {
  opacity: 1;
  color: var(--gy-accion-hover);
  border-bottom-color: var(--gy-oliva-profundo);
}

/* ── numeritos, carrito flotante y WhatsApp ── */
html .cart-badge { background: var(--gy-azul); color: #FFFFFF; }
html .cart-float { background: var(--gy-accion); color: #FFFFFF; }
html .cart-float:hover { background: var(--gy-accion-boton-hover); }
html .cart-float__badge { background: var(--gy-azul); color: #FFFFFF; }
html .whatsapp-float {
  background: linear-gradient(150deg, var(--gy-azul-claro) 0%, var(--gy-azul) 100%);
  border-color: var(--gy-azul);
  color: #FFFFFF;
  text-shadow: 0 1px 1px rgba(20, 45, 80, .25);
}
html .whatsapp-float:hover { background: var(--gy-azul); border-color: var(--gy-azul); }

/* ── foco del teclado y favorito marcado ── */
html :focus-visible { outline-color: var(--gy-oliva); }
html .wishlist-heart[aria-pressed="true"] { color: var(--gy-accion); }

/* ── ficha del producto: color y talle elegidos, foto activa ── */
html [data-attribute-option]:has(input:checked) {
  border-color: var(--gy-accion);
  background: color-mix(in srgb, var(--gy-oliva) 16%, var(--color-bg-elevated));
}
html [data-attribute-option]:has(input:checked) [data-option-swatch] {
  border-color: var(--gy-accion);
  box-shadow: 0 0 0 2px var(--color-bg-elevated), 0 0 0 4px var(--gy-accion);
}
html [data-gallery-thumbnail][aria-current="true"] { border-color: var(--gy-accion); }

/* ── portada: barra de categorias, titulos y "volver" ── */
html .gyp-chip:hover,
html .gyp-barra__arriba:hover { border-color: var(--gy-accion); }
html .gyp-chip[aria-current="true"] {
  background: var(--gy-accion);
  border-color: var(--gy-accion);
  color: #FFFFFF;
}
html .gyp-cat__num { color: var(--gy-oliva-profundo); }
html .gyp-cat__titulo { color: var(--gy-accion-hover); }
html .gyp-fin button { border-color: var(--gy-accion); color: var(--gy-accion); }
html .gyp-fin button:hover { background: var(--gy-accion); color: #FFFFFF; text-shadow: var(--gy-accion-sombra); }

/* ── vidriera: muestra elegida y ventanita de "Agregar" ── */
html body .gy-muestra[data-gy-elegida] { border-color: var(--gy-accion); }
html body .gy-pop__color[aria-pressed="true"] { border-color: var(--gy-accion); }
html body .gy-pop__talle[aria-pressed="true"] {
  background: var(--gy-accion);
  border-color: var(--gy-accion);
  color: #FFFFFF;
  text-shadow: var(--gy-accion-sombra);
}
html body .gy-pop__agregar { background: var(--gy-accion); color: #FFFFFF; text-shadow: var(--gy-accion-sombra); }
html body .gy-pop__agregar:hover { background: var(--gy-accion-boton-hover); }

/* ── buscador de la lupa ── */
html body .gyb-cat:hover,
html body .gyb-tal:hover { border-color: var(--gy-accion); }
html body .gyb-cat[aria-pressed="true"],
html body .gyb-tal[aria-pressed="true"] {
  background: var(--gy-accion);
  border-color: var(--gy-accion);
  color: #FFFFFF;
  text-shadow: var(--gy-accion-sombra);
}
html body .gyb-col[aria-pressed="true"] { border-color: var(--gy-accion); }
html body .gyb-agregar { background: var(--gy-accion); color: #FFFFFF; text-shadow: var(--gy-accion-sombra); }
html body .gyb-agregar:hover { background: var(--gy-accion-boton-hover); }

/* ── la X de las ventanitas: anillo de foco suave, pegado al boton ── */
html body .gy-pop__x:focus-visible,
html body .gyb__x:focus-visible {
  outline: 2px solid var(--gy-oliva);
  outline-offset: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   4-oct-2026 (tarde, pedido de la familia) · LA TARJETA DE PRODUCTO

   1) EL PRECIO VA ENSEGUIDA DESPUES DEL NOMBRE, en el mismo renglon:
         Vestido Maxi Lino | $ 1.790
      (un espacio, una barra, otro espacio y el precio). El precio conserva
      su letra y su color: solo cambia de lugar, y ya no ocupa un renglon
      aparte. Si el nombre es largo y pasa a dos renglones, el precio sigue
      a continuacion de la ultima palabra (nunca queda solo en un renglon).
      Como se hace sin tocar el HTML: la tarjeta deja de ser una columna
      "flex" y pasa a bloque (se ve igual), y el enlace, el nombre y el
      precio se escriben "en linea", uno a continuacion del otro. La foto
      sigue siendo un bloque. El espacio que antes separaba la foto del
      nombre (0.85rem) ahora lo pone la foto. El alto de linea de la
      tarjeta va en 1 para que el renglon del nombre mida lo mismo que antes
      (20); a todo lo demas de la tarjeta se le devuelve el alto de siempre.
      Si un producto tuviera estrellas de opiniones entre el nombre y el
      precio, el precio queda como antes, en su renglon.

   2) COLORES Y TALLES MAS JUNTOS: el nombre del color (aparece al tocar o
      elegir un color) queda a 2 de las muestras y a 2 de los talles.
      Antes: 8 y 8. La distancia entre colores y talles pasa de 29 a 17.
      Los estilos de base estan en assets/layout.js (ESTILOS); aca solo se
      ajustan esos margenes y el lugar que se guarda mientras llegan las
      muestras (63 y 59 pasan a 57 y 53).

   Historia del 4-oct: 14:28 el precio se probo dentro de la foto (abajo a
   la izquierda); a la familia no le gusto y pidio esta variante.

   Volver atras: borrar este bloque entero · copia exacta del archivo sin
   este bloque en la PC: CRM\tiendu_respaldos\tarjeta_precio_al_lado_del_nombre_04oct\sin_bloque\
   ═══════════════════════════════════════════════════════════════════ */
html .product-card { display: block; line-height: 1; }
html .product-card > * { line-height: var(--leading); }
html .product-card > .product-card__link { display: inline; line-height: 1; white-space: nowrap; }
html .product-card > .product-card__link > .media { margin-bottom: 0.85rem; }
html .product-card > .product-card__link > .product-card__title { display: inline; white-space: normal; }
html .product-card > .product-card__link + .product-card__price {
  display: inline;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}
html .product-card > .product-card__link + .product-card__price::before { content: "|\00a0"; }
.product-card .card-swatches .gy-nombre-color { margin-top: -4px; }
.product-card .card-swatches + .gy-talles { margin-top: 2px; }
.product-card .card-swatches[data-gy-muestras]:not([data-gy-listo]) { min-height: 57px; }
@media (max-width: 760px) {
  .product-card .card-swatches[data-gy-muestras]:not([data-gy-listo]) { min-height: 53px; }
}

/* 5-oct-2026 (tarde, pedido de la familia): lugar para "Guía de talles" debajo de los talles, entre los talles y
   "Agregar" (la pone assets/gy-carrito.js, bloque GY-GUIA, solo en la tarjeta que se mira). "Agregar" baja 12 px
   en todas las tarjetas con talles, asi nada se mueve cuando la guia pasa de una tarjeta a otra.
   5-oct noche: con mas aire arriba y abajo de la guia ("Agregar" baja 24 px en vez de 12).
   Volver atras: borrar este bloque (y en GY-GUIA volver la regla a la derecha de los talles). */
html article[data-product-card] .gy-talles + .product-card__action{margin-top:34px}

/* 5-oct-2026 (noche, pedido de la familia): al bajar por la portada, el titulo de la categoria que se mira se
   subraya con la misma linea verde que al tocar la barra (la pone assets/gy-portada.js, clase is-vista).
   Volver atras: borrar esta regla. */
.gyp-cat.is-vista .gyp-cat__titulo::after{transform:scaleX(1)}