.shop-page{padding:140px 0 80px;min-height:65vh}.shop-page__header{max-width:760px;margin-bottom:32px}.shop-hero{padding:150px 0 80px;background:linear-gradient(135deg,var(--color-primario-tinte,#f6f0df),#fff)}.shop-hero h1{font-size:clamp(2.4rem,5vw,4.5rem);color:var(--color-titulos);font-weight:700}.shop-hero__image{border-radius:24px;max-height:480px;width:100%;object-fit:cover}.shop-section{padding:72px 0}.shop-section--muted{background:#f7f7f7}.shop-section h2{color:var(--color-titulos);margin-bottom:32px}.category-grid,.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.category-card,.product-card{background:#fff;border:1px solid #e9e9e9;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.05);transition:.2s}.category-card:hover,.product-card:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(0,0,0,.1)}.category-card{display:flex;min-height:160px;align-items:end;padding:20px;position:relative;color:var(--color-titulos)}.category-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}.category-card strong{position:relative;font-size:1.2rem}.product-card__image{height:260px;display:flex;align-items:center;justify-content:center;background:#f2f2f2;position:relative;color:#777}.product-card__image img{width:100%;height:100%;object-fit:cover}.product-badge{position:absolute;top:12px;left:12px;background:var(--color-primario);color:var(--color-boton-texto,#fff);border-radius:20px;padding:5px 10px;font-size:.75rem}.product-card__body{padding:20px}.product-card__body h3{font-size:1.12rem;min-height:2.7em}.product-price{display:flex;gap:10px;align-items:center}.product-price del{color:#888;font-size:.85rem}.product-price strong{color:var(--color-titulos)}.catalog-tools{display:grid;grid-template-columns:1fr 220px auto;gap:12px;margin-bottom:18px}.category-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}.category-pills a{border:1px solid #ddd;border-radius:24px;padding:7px 14px}.category-pills a.is-active{background:var(--color-primario);color:var(--color-boton-texto,#fff)}.product-gallery{display:grid;gap:16px}.product-gallery img,.product-placeholder{border-radius:14px;background:#eee;min-height:300px;object-fit:cover}.product-detail{padding-left:48px}.product-detail form{display:grid;gap:10px;margin:24px 0}.qty-input{max-width:110px}.product-content{margin-top:30px}.eyebrow{text-transform:uppercase;letter-spacing:.1em;color:var(--color-primario);font-size:.8rem;font-weight:700}.cart-list,.order-items{border-top:1px solid #ddd}.cart-line{display:grid;grid-template-columns:1fr 100px 150px;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid #ddd}.cart-line small{display:block;color:#777}.cart-actions,.account-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-top:28px}.cart-actions>div{display:grid;grid-template-columns:auto auto;gap:12px;text-align:right}.cart-actions .btn{grid-column:1/-1}.order-summary{background:#f7f7f7;border-radius:14px;padding:28px;height:max-content}.order-summary p{display:flex;justify-content:space-between;gap:15px}.checkout-form .form-group{margin-bottom:18px}.narrow,.auth-box{max-width:760px}.auth-box{max-width:520px}.auth-box form p{display:grid;gap:6px}.auth-box input{display:block;width:100%;padding:10px;border:1px solid #ddd;border-radius:5px}.order-status{display:flex;justify-content:space-between;padding:18px 20px;border-radius:10px;background:#eef1f5;margin:24px 0}.order-status--pagado,.order-status--entregado{background:#e3f5e8;color:#196b31}.order-status--rechazado,.order-status--cancelado{background:#fde7e7;color:#8b1f1f}.order-total{display:flex;justify-content:space-between;font-size:1.3rem;margin-top:24px}.order-list{display:grid;gap:12px}.order-list a{display:grid;grid-template-columns:1fr 1fr auto;padding:18px;border:1px solid #ddd;border-radius:10px}.account-heading{margin-bottom:24px}@media(max-width:991px){.category-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-detail{padding-left:15px;margin-top:32px}}@media(max-width:575px){.category-grid,.product-grid{grid-template-columns:1fr}.catalog-tools{grid-template-columns:1fr}.cart-line{grid-template-columns:1fr 80px}.cart-line>strong{grid-column:2}.cart-actions,.account-heading{flex-direction:column;gap:20px}.order-list a{grid-template-columns:1fr}.shop-page{padding-top:110px}}
.shop-faq{border-bottom:1px solid #ddd;padding:18px 0}.shop-faq summary{cursor:pointer;font-weight:700;color:var(--color-titulos)}.shop-faq div{padding-top:12px}

/* --- Hero de la tienda ----------------------------------------------------
   Alineado con el hero institucional (.untree_co-hero en style.css), que ya
   tenía resueltos el contraste del texto, el recorte de la imagen y el
   respiro en mobile. Va al final del archivo, después del bloque minificado,
   así estas reglas ganan por orden sin subir la especificidad. */

.shop-hero {
  padding: 8rem 0 4rem; }

.shop-hero h1 {
  /* Antes clamp(2.4rem,5vw,4.5rem): en mobile 5vw nunca llega al mínimo, así
     que un título de tres líneas quedaba a 38px. Misma escala que el
     institucional, que sí crece con el ancho. */
  font-size: clamp(30px, 3vw + 16px, 46px);
  line-height: 1.15;
  margin-bottom: 24px; }

.shop-hero p {
  /* Heredaba el gris del body (#939393): muy poco contraste para el primer
     texto que lee alguien que entra. */
  color: #4a4a4a;
  font-size: 17px;
  max-width: 54ch;
  margin-bottom: 28px; }

.shop-hero .btn {
  padding: 12px 30px; }

.shop-hero__image {
  /* `cover` recortaba la imagen: en un logo o una ilustración se come los
     bordes. `contain` la muestra entera sea cual sea la que suba el cliente. */
  object-fit: contain;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin-left: auto;
  margin-right: auto; }

@media (max-width: 991.98px) {
  .shop-hero {
    text-align: center;
    /* El nav es absolute y no empuja contenido: 150px era demasiado arriba y
       dejaba un hueco enorme antes de la sección siguiente. */
    padding: 5.5rem 0 2.5rem; }
  .shop-hero p {
    margin-left: auto;
    margin-right: auto; }
  .shop-hero__image {
    display: block;
    max-height: 280px;
    /* La imagen va arriba del título (order-1 en la plantilla), así que el
       aire tiene que quedar debajo. */
    margin-bottom: 28px; } }

@media (max-width: 767.98px) {
  /* 72px arriba y abajo por sección obliga a scrollear de más en un teléfono. */
  .shop-section {
    padding: 48px 0; }
  .shop-section h2 {
    margin-bottom: 24px; } }

/* --- Tarjeta de producto: nombre a la izquierda, precio a la derecha,
       botón centrado ----------------------------------------------------
   Se resuelve solo con CSS porque el HTML sale de un único parcial
   `_producto_card.html`, que usan tanto la vidriera del inicio como el
   catálogo: así la grilla se ve igual en todo el ecommerce. */

.product-card {
  /* Para que el cuerpo pueda estirarse y los botones de tarjetas vecinas
     queden a la misma altura aunque un nombre ocupe dos líneas y otro una. */
  display: flex;
  flex-direction: column;
}

.product-card__image {
  flex-shrink: 0;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-card__body h3 {
  /* Sin cambios respecto de antes: el nombre queda a la izquierda. */
  text-align: left;
}

.product-price {
  justify-content: flex-end;
  /* Separa el precio del botón y absorbe el espacio sobrante de la tarjeta. */
  margin-bottom: 16px;
  margin-top: auto;
}

.product-card__body .btn {
  align-self: center;
}

/* --- Fotos de producto: que se vean enteras -------------------------------
   El bloque minificado fija `height:260px` + `object-fit:cover` en la caja de
   la imagen. Como el alto es fijo y el ancho depende de la grilla, cuanto más
   ancha la tarjeta más recorta: en el ancho chico se notaba poco, en mediano y
   grande se come la parte de arriba y abajo de la foto, y en mobile (una sola
   columna, tarjeta a pantalla completa) el recorte es el peor de todos.

   La caja pasa a ser cuadrada (`aspect-ratio`) y la imagen a `contain`, así se
   ve completa venga como venga: cuadrada, vertical o apaisada. */

.product-card__image {
  height: auto;
  aspect-ratio: 1 / 1;
  /* Blanco, no gris: la mayoría de las fotos de producto vienen recortadas
     sobre fondo blanco y con `contain` se vería el recuadro. */
  background: #fff;
  border-bottom: 1px solid #f0f0f0; }

.product-card__image img {
  /* Absoluta a propósito: si la foto quedara en el flujo, su alto intrínseco
     mandaría sobre el `aspect-ratio` y una foto vertical estiraría la caja.
     Fuera del flujo, el alto lo fija siempre la proporción de arriba. */
  position: absolute;
  inset: 0;
  object-fit: contain;
  /* El padding va acá y no en la caja: con `border-box` achica el área de
     contenido, que es sobre la que trabaja `object-fit`, y así la foto tiene
     aire sin tocar los bordes de la tarjeta. */
  box-sizing: border-box;
  padding: 14px; }

/* El gris queda solo para la tarjeta sin foto. El `:not` evita que el badge
   "Digital" cuente como contenido de texto. Donde `:has` no exista se ve
   blanca, que es una degradación aceptable. */
.product-card__image:has(> span:not(.product-badge)) {
  background: #f2f2f2; }

@media (max-width: 575.98px) {
  .product-card__image {
    /* A una columna la tarjeta ocupa todo el ancho: un cuadrado perfecto
       obligaría a scrollear una pantalla por producto. */
    aspect-ratio: 4 / 3; } }

/* Misma corrección en la ficha del producto: la galería recortaba con
   `object-fit:cover` sobre un alto mínimo. */
.product-gallery img {
  object-fit: contain;
  background: #fff;
  max-height: 560px; }

/* --- Tarjeta de categoría -------------------------------------------------
   Estaba con `opacity:.3`: la imagen se lavaba hasta quedar casi gris y el
   nombre dependía del contraste que diera esa mancha. Ahora la foto se ve de
   verdad y el texto se apoya en un degradado oscuro que siempre lo sostiene,
   suba el cliente la imagen que suba.

   Las categorías sin imagen no llevan degradado: siguen como estaban, con el
   color de títulos sobre el fondo de la tarjeta. */

.category-card img {
  opacity: 1; }

.category-card:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.15) 62%); }

.category-card:has(img) strong {
  color: #fff;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }

/* --- Carrito --------------------------------------------------------------
   La línea tenía tres columnas (datos, cantidad, subtotal) y ninguna foto: el
   comprador revisaba su compra leyendo nombres. Ahora entran la miniatura y el
   botón de quitar, que antes no existía —para sacar algo había que poner 0 y
   apretar "Actualizar", cosa que nadie descubre solo. */

.cart-line {
  grid-template-columns: 88px 1fr 90px 130px 36px; }

.cart-line__foto {
  width: 88px;
  height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center; }

.cart-line__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.cart-line__sinfoto {
  font-size: 11px;
  color: #999;
  text-align: center; }

.cart-line__nombre {
  font-weight: 700;
  color: var(--color-titulos); }

.cart-line__unitario {
  color: #777; }

.cart-line__subtotal {
  text-align: right; }

.cart-line__quitar {
  border: 0;
  background: none;
  color: #999;
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  transition: color .15s; }

.cart-line__quitar:hover,
.cart-line__quitar:focus-visible {
  color: #c0392b; }

/* Los dos selectores llevan `.cart-actions` adelante a propósito: la regla
   vieja `.cart-actions>div` (grid de dos columnas) es más específica que una
   clase sola y, si no, apila los botones de la izquierda y manda la nota del
   envío al lado del subtotal en vez de abajo. */

.cart-actions .cart-actions__izquierda {
  display: flex;
  gap: 14px;
  align-items: center; }

.cart-actions .cart-actions__total {
  display: grid;
  grid-template-columns: auto;
  gap: 10px;
  justify-items: end;
  text-align: right; }

.cart-total {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-size: 1.2rem; }

.cart-total strong {
  color: var(--color-titulos); }

.cart-total__nota {
  color: #777; }

.cart-vacio {
  padding: 40px 0; }

/* --- Checkout -------------------------------------------------------------
   Los campos venían en una sola tirada de once, con las etiquetas de Django
   ("Nombre:") y el checkbox pegado al texto. Agruparlos en bloques hace que se
   lea como tres pasos cortos en vez de un formulario interminable. */

.checkout-bloque {
  border: 1px solid #e9e9e9;
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 20px; }

.checkout-bloque legend {
  float: none;
  width: auto;
  padding: 0 8px;
  margin: 0 0 6px -8px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--color-titulos); }

.checkout-form .form-group label {
  display: block;
  margin-bottom: 4px;
  color: #555;
  font-size: .9rem; }

.checkout-form .form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px; }

.checkout-form .form-check input {
  margin-top: 4px;
  flex: 0 0 auto; }

.checkout-form .form-check label {
  margin: 0;
  color: #333; }

.checkout-legal {
  display: block;
  color: #777;
  margin: -4px 0 8px 28px; }

.checkout-pagar {
  width: 100%; }

/* --- Opciones de envío ----------------------------------------------------
   Reemplazan al desplegable vacío que decía "Elegí una opción" hasta que se
   enviaba el formulario. Cada opción muestra su costo: el comprador ve lo que
   va a pagar antes de que lo manden a Mercado Pago. */

.envio-opciones {
  display: grid;
  gap: 10px;
  margin-bottom: 18px; }

.envio-opcion {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s; }

.envio-opcion:hover {
  border-color: var(--color-primario); }

.envio-opcion.is-elegida {
  border-color: var(--color-primario);
  box-shadow: 0 0 0 2px var(--color-primario-tinte, rgba(0, 0, 0, .06)); }

.envio-opcion__datos {
  flex: 1;
  display: grid; }

.envio-opcion__datos small {
  color: #777; }

.envio-opcion__costo {
  font-weight: 700;
  color: var(--color-titulos);
  white-space: nowrap; }

.envio-vacio {
  color: #8b1f1f;
  background: #fde7e7;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0; }

/* --- Resumen del pedido --------------------------------------------------- */

.order-summary {
  position: sticky;
  top: 100px; }

.order-summary__total {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  font-size: 1.25rem;
  padding-top: 10px;
  border-top: 1px solid #ddd; }

.order-summary__total strong {
  color: var(--color-titulos); }

.order-summary__nota {
  display: block;
  color: #777;
  margin-top: 8px; }

@media (max-width: 575px) {
  .cart-line {
    position: relative;
    grid-template-columns: 64px 1fr 70px;
    grid-template-areas:
      "foto datos datos"
      "foto cantidad subtotal"; }
  .cart-line__foto {
    grid-area: foto;
    width: 64px;
    height: 64px; }
  .cart-line__datos {
    grid-area: datos; }
  .cart-line__cantidad {
    grid-area: cantidad; }
  /* `.cart-line>strong` (regla vieja, más específica) reubicaba el subtotal en
     mobile; se la gana repitiendo el selector de clase. */
  .cart-line strong.cart-line__subtotal {
    grid-area: subtotal; }
  .cart-line__quitar {
    position: absolute;
    right: 0; }
  .order-summary {
    position: static; }
  .cart-actions .cart-actions__izquierda .btn {
    white-space: nowrap; } }

/* El total al lado del botón: sólo hace falta cuando el resumen del costado
   cae debajo del formulario (una columna). En escritorio sobra. */

.checkout-total-movil {
  display: none; }

@media (max-width: 991px) {
  .checkout-total-movil {
    display: block;
    margin-bottom: 16px; }
  .checkout-total-movil .order-summary__linea {
    display: flex;
    justify-content: space-between;
    gap: 15px; } }

/* --- Página del pedido ----------------------------------------------------
   Antes esta página era el estado, los ítems y el total. Le faltaba lo que el
   comprador realmente quiere confirmar: cuánto le cobraron de envío, a dónde
   va y qué pasa ahora. */

.pedido-fecha {
  color: #777;
  margin-top: -10px; }

.pedido-explicacion {
  color: #555;
  margin-bottom: 28px; }

.pedido-linea {
  grid-template-columns: 1fr 140px 120px; }

.pedido-linea__unitario {
  color: #777;
  text-align: right; }

.order-cuentas {
  margin-top: 24px; }

/* El total es el número que el comprador vino a ver: se lee como tal. */
.order-total strong {
  color: var(--color-titulos); }

.order-cuentas .order-summary__linea {
  display: flex;
  justify-content: space-between;
  gap: 15px; }

.pedido-bloque {
  margin-top: 32px; }

.pedido-bloque h2 {
  font-size: 1.05rem;
  color: var(--color-titulos);
  margin-bottom: 8px; }

.pedido-direccion {
  color: #555;
  margin-bottom: 4px; }

.pedido-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 36px; }

@media (max-width: 575px) {
  .pedido-linea {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "datos datos"
      "unitario subtotal"; }
  .pedido-linea .cart-line__datos {
    grid-area: datos; }
  .pedido-linea__unitario {
    grid-area: unitario;
    text-align: left; }
  .pedido-linea strong.cart-line__subtotal {
    grid-area: subtotal; } }

/* --- Agregar desde la tarjeta del catálogo -------------------------------- */

.product-card__agregar {
  margin-bottom: 8px; }

.product-card__agregar .btn {
  width: 100%; }

.product-card__ver {
  display: block;
  text-align: center;
  font-size: .85rem;
  color: #777; }

.product-card__ver:hover {
  color: var(--color-primario); }

/* --- Ficha de producto ----------------------------------------------------
   El precio vivía adentro del desplegable ("Presentación única · $12.900 · 20
   disponibles") y el descuento tachado, que la tarjeta del catálogo sí mostraba,
   acá no aparecía: los dos datos que más venden, escondidos justo donde se
   decide la compra. */

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: .85rem;
  color: #888;
  margin-bottom: 24px; }

.migas a {
  color: #888; }

.migas a:hover {
  color: var(--color-primario); }

.migas strong {
  color: var(--color-titulos);
  font-weight: 600; }

.galeria {
  display: grid;
  gap: 16px; }

.galeria__foto {
  width: 100%;
  border-radius: 14px;
  object-fit: cover; }

/* Sin JS se ven todas apiladas (el comportamiento de siempre); con JS, sólo la
   activa y el resto se eligen desde las miniaturas. */
.galeria--js .galeria__foto {
  display: none; }

.galeria--js .galeria__foto.is-activa {
  display: block; }

.galeria-miniaturas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px; }

.galeria-miniatura {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color .15s; }

.galeria-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover; }

.galeria-miniatura.is-activa,
.galeria-miniatura:hover {
  border-color: var(--color-primario); }

.producto__resumen {
  color: #555; }

.producto-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 6px; }

.producto-precio strong {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-titulos); }

.producto-precio del {
  color: #999;
  font-size: 1.05rem; }

.producto-descuento {
  background: var(--color-primario);
  color: var(--color-boton-texto, #fff);
  border-radius: 20px;
  padding: 4px 11px;
  font-size: .8rem;
  font-weight: 700; }

.producto-stock {
  color: #b45309;
  font-weight: 700;
  font-size: .9rem;
  margin: 0 0 14px; }

.producto-form {
  display: grid;
  gap: 4px;
  margin: 18px 0 16px;
  max-width: 340px; }

.producto-comprar {
  width: 100%;
  margin-top: 8px; }

.producto-whatsapp {
  display: inline-block;
  font-weight: 700;
  color: var(--color-primario); }

.producto-confianza {
  margin-top: 28px;
  border-top: 1px solid #e9e9e9; }

.producto-confianza details {
  border-bottom: 1px solid #e9e9e9; }

.producto-confianza summary {
  padding: 14px 0;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-titulos); }

.producto-confianza details > div {
  padding-bottom: 12px;
  color: #555; }

.producto-contenido {
  margin-top: 48px;
  max-width: 760px; }

@media (max-width: 991px) {
  .producto .product-detail {
    padding-left: 15px;
    margin-top: 28px; }
  .producto-form {
    max-width: none; } }