/* Páginas del sitio generado que el prototipo no tenía: la ficha de producto
   como página propia, el título de Colección y la página 404.
   El diseño base sigue en styles.css. */

/* Marca: el logo real en la cabecera y el pie, en lugar de la corona de texto del prototipo. */
.brand{flex-direction:column;gap:4px}
.brand-logo{display:block;width:auto;height:52px}
.brand-caption{margin-top:0}
.footer-brand .brand-logo{height:43px;margin-bottom:10px}
/* En celular el logo queda entre el buscador y el carrito: más de 30 px de alto los pisa. */
@media(max-width:560px){.brand{gap:3px}.brand-logo{height:30px}}

.page-title{font:400 clamp(34px,4.4vw,52px)/1.08 var(--serif);letter-spacing:-.035em;color:#1e3557;margin:12px 0 0}
.page-title em{font-weight:400;color:#9e895f}
.collection-page{padding-top:48px}

/* Tarjetas: ahora la foto, el título y el botón son enlaces a la ficha. */
.product-title a{color:inherit}
.product-title a:hover{color:var(--gold)}
.card-actions a{flex:1;text-align:center}
/* .product-card es flex, así que el atributo hidden necesita su propia regla. */
.product-card[hidden]{display:none}
.collection-bottom{align-items:center;flex-wrap:wrap;gap:14px}
/* En el inicio no hay barra de filtros entre el título y la grilla. */
.home-grid{margin-top:34px}
.strip-link{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* Ventana flotante del producto, la que se abre desde las tarjetas. */
.dialog-loading{margin:0;padding:70px 30px;text-align:center;color:var(--muted);font-size:13px}
.dialog-more{display:inline-block;margin-top:14px}

/* Ficha de producto */
.product-page{padding-top:26px;padding-bottom:70px}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;font-size:12px;color:var(--muted)}
.breadcrumb a{color:var(--navy)}
.breadcrumb a:hover{color:var(--gold)}
.product-page .detail-layout{align-items:start;background:#fff;border:1px solid #eeeae3}
/* En la ficha la foto se ve entera, sin el recorte que tenía la ventana del prototipo. */
.product-page .detail-photo{min-height:0;height:auto;max-height:none}
.product-page .detail-photo img{display:block;height:auto}
.product-page .detail-copy{overflow:visible}
.product-page .detail-copy h1{font:500 34px/1.15 var(--serif);color:var(--navy);margin:10px 0}
/* Cantidad angosta y botón ancho: en celular el texto del botón se partía en dos líneas. */
.product-page .detail-row{grid-template-columns:96px 1fr}
/* Video del modelo. Pensado para video vertical, el mismo de TikTok y Reels. */
.product-video{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:clamp(24px,6vw,70px);margin-top:44px;padding:clamp(24px,4vw,44px);background:#f2f0eb}
.product-video-copy h2{font:400 clamp(26px,3vw,36px)/1.15 var(--serif);color:var(--navy);margin:10px 0 8px}
.product-video-copy p{font-size:13px;line-height:1.8;color:var(--muted);margin:0;max-width:44ch}
.product-video-player{display:block;width:100%;max-width:300px;aspect-ratio:9/16;background:var(--navy);object-fit:cover;border-radius:4px}
@media(max-width:700px){
  .product-video{grid-template-columns:1fr;justify-items:center;text-align:center}
  .product-video-copy p{margin-inline:auto}
}
.related{padding-top:0}

.not-found{padding:90px 22px}
.not-found .page-title{margin:10px 0 12px}

@media(max-width:560px){
  .collection-page{padding-top:30px}
  .product-page{padding-top:16px;padding-bottom:46px}
  .product-page .detail-copy h1{font-size:28px}
}