/* ==== Plantilla "Boutique": lujo ====
   Barra y portada oscuras (el color principal llevado casi a negro), foto a
   todo lo ancho con el titulo encima, letras con serifa en mayusculas y
   espaciadas, detalles en el color secundario y botones de linea. */

body[data-plantilla="boutique"] {
  --tema-serifa: "Didot", "Bodoni MT", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --tema-oscuro: color-mix(in srgb, var(--tienda-primario) 22%, #0d0d0f);
  /* Acento claro para que se lea sobre lo oscuro */
  --tema-dorado: color-mix(in srgb, var(--tienda-secundario) 75%, #fff);
  --barra-fondo: var(--tema-oscuro);
  --barra-texto: #f5f1ea;
  --barra-suave: rgba(255, 255, 255, .08);
  --barra-activa-fondo: transparent;
  --barra-activa-texto: var(--tema-dorado);
  --barra-numero-fondo: var(--tema-dorado);
  --barra-numero-texto: #111;
}
body[data-plantilla="boutique"] h1,
body[data-plantilla="boutique"] h2,
body[data-plantilla="boutique"] .brand-tienda,
body[data-plantilla="boutique"] .tarjeta-nombre,
body[data-plantilla="boutique"] .catalogo-titulo { font-family: var(--tema-serifa); font-weight: 400; }

/* Barra oscura, nombre espaciado */
body[data-plantilla="boutique"] .topbar-tienda { box-shadow: none; border-bottom: 1px solid color-mix(in srgb, var(--tema-dorado) 35%, transparent); }
body[data-plantilla="boutique"] .brand-tienda a { text-transform: uppercase; letter-spacing: .28em; font-size: 1rem; }
body[data-plantilla="boutique"] .nav-tienda a { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
body[data-plantilla="boutique"] .nav-tienda a.activa { box-shadow: none; border-bottom: 1px solid var(--tema-dorado); border-radius: 0; }
body[data-plantilla="boutique"] .nav-tienda-movil .nav-tienda { border-radius: 0; border: 1px solid color-mix(in srgb, var(--tema-dorado) 35%, transparent); }
body[data-plantilla="boutique"] .buscador-tienda-form input[type=search] { border-radius: 0; }
body[data-plantilla="boutique"] .buscador-tienda-lupa { border-radius: 0; background: var(--tema-oscuro); }

/* Portada oscura a todo lo ancho; con foto, el titulo va encima */
body[data-plantilla="boutique"] .portada {
  position: relative; display: block; overflow: hidden;
  margin: 0 calc(50% - 50vw + var(--ancho-barra, 0px) / 2) 40px;
  background: var(--tema-oscuro); color: #f5f1ea; min-height: 420px;
}
body[data-plantilla="boutique"] .portada-foto { position: absolute; inset: 0; border-radius: 0; background: none; }
body[data-plantilla="boutique"] .portada-foto img { height: 100%; width: 100%; object-fit: cover; }
body[data-plantilla="boutique"] .portada.con-foto .portada-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .15), rgba(0, 0, 0, .6));
}
/* Alto Automatico: la foto completa y el texto encima. Foto y texto comparten
   la misma celda, asi la portada mide lo que sea mas alto: si la foto es
   bajita (celular) crece para que quepa el texto, en vez de que el texto se
   salga y quede tapado por el buscador */
body[data-plantilla="boutique"] .portada[data-alto-foto="auto"].con-foto { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; min-height: 0; }
body[data-plantilla="boutique"] .portada[data-alto-foto="auto"] .portada-foto,
body[data-plantilla="boutique"] .portada[data-alto-foto="auto"] .portada-texto { grid-area: 1 / 1; position: relative; inset: auto; }
body[data-plantilla="boutique"] .portada[data-alto-foto="auto"] .portada-foto img { height: 100%; }
body[data-plantilla="boutique"] .portada[data-alto-foto="alto"] { min-height: 560px; }
body[data-plantilla="boutique"] .portada-texto {
  position: relative; z-index: 1; min-height: inherit; align-items: center; justify-content: center; text-align: center;
  padding: 60px 24px; gap: 18px;
}
body[data-plantilla="boutique"] .portada-etiqueta { background: none; color: var(--tema-dorado); padding: 0; letter-spacing: .4em; font-weight: 400; }
body[data-plantilla="boutique"] .portada-titulo {
  color: #fff; text-transform: uppercase; letter-spacing: .14em; font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.6rem); line-height: 1.15;
}
body[data-plantilla="boutique"] .portada-titulo::after { content: ""; display: block; width: 56px; height: 1px; margin: 20px auto 0; background: var(--tema-dorado); }
body[data-plantilla="boutique"] .portada-bajada { color: rgba(255, 255, 255, .82); letter-spacing: .04em; }
body[data-plantilla="boutique"] .portada-boton {
  border-radius: 0; background: transparent; border: 1px solid var(--tema-dorado); color: #fff; box-shadow: none;
  text-transform: uppercase; letter-spacing: .24em; font-size: .75rem; font-weight: 600; padding: 15px 30px;
}
body[data-plantilla="boutique"] .portada-boton:hover { background: var(--tema-dorado); color: #111; transform: none; }

/* Titulos centrados y espaciados */
body[data-plantilla="boutique"] .catalogo-encabezado { flex-direction: column; gap: 14px; text-align: center; }
body[data-plantilla="boutique"] .catalogo-titulo { justify-content: center; text-transform: uppercase; letter-spacing: .28em; }
body[data-plantilla="boutique"] .catalogo-titulo::before { display: none; }
body[data-plantilla="boutique"] .carrito-encabezado h1,
body[data-plantilla="boutique"] .producto-nombre { font-family: var(--tema-serifa); font-weight: 400; letter-spacing: .06em; }

/* Botones de linea, rectos */
body[data-plantilla="boutique"] .btn,
body[data-plantilla="boutique"] .carrito-continuar,
body[data-plantilla="boutique"] .barra-contacto {
  border-radius: 0; background: var(--tema-oscuro); letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
body[data-plantilla="boutique"] .barra-fav,
body[data-plantilla="boutique"] .carrito-resumen,
body[data-plantilla="boutique"] .cantidad-control,
body[data-plantilla="boutique"] .carrito-cantidad,
body[data-plantilla="boutique"] .carrito-volver,
body[data-plantilla="boutique"] .resultados-categorias a,
body[data-plantilla="boutique"] .resultados-boton,
body[data-plantilla="boutique"] .vista-catalogo,
body[data-plantilla="boutique"] .vista-catalogo button,
body[data-plantilla="boutique"] .checkout .field input,
body[data-plantilla="boutique"] .checkout .field textarea,
body[data-plantilla="boutique"] .ck-boton-opcion span,
body[data-plantilla="boutique"] .ck-pago,
body[data-plantilla="boutique"] #imagen-principal { border-radius: 0; }
body[data-plantilla="boutique"] .resultados-categorias a.activa,
body[data-plantilla="boutique"] .vista-catalogo button[aria-pressed="true"] { background: var(--tema-oscuro); border-color: var(--tema-oscuro); }
body[data-plantilla="boutique"] .barra-tienda { background: var(--tema-oscuro); border-top: 0; }
body[data-plantilla="boutique"] .barra-fav { background: transparent; color: #f5f1ea; border-color: rgba(255, 255, 255, .25); }
body[data-plantilla="boutique"] .barra-contacto { background: transparent; border: 1px solid var(--tema-dorado); }

/* Pie oscuro */
body[data-plantilla="boutique"] .pie-tienda { background: var(--tema-oscuro); color: #f5f1ea; border-top: 0; margin-top: 56px; padding: 44px 16px; }
body[data-plantilla="boutique"] .pie-tienda-nombre { font-family: var(--tema-serifa); text-transform: uppercase; letter-spacing: .3em; font-weight: 400; }
body[data-plantilla="boutique"] .pie-tienda-titulo,
body[data-plantilla="boutique"] .pie-tienda-legal { color: rgba(245, 241, 234, .65); }
body[data-plantilla="boutique"] .red-tienda { background: transparent; color: var(--tema-dorado); border-color: color-mix(in srgb, var(--tema-dorado) 45%, transparent); }
body[data-plantilla="boutique"] .red-tienda:hover { background: var(--tema-dorado); color: #111; }

@media (max-width: 760px) {
  body[data-plantilla="boutique"] .portada { min-height: 340px; margin-bottom: 28px; }
  body[data-plantilla="boutique"] .portada[data-alto-foto="alto"] { min-height: 440px; }
  body[data-plantilla="boutique"] .portada-texto { padding: 44px 20px; }
  body[data-plantilla="boutique"] .portada-titulo { font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: .1em; }
}

/* ==== Pagina de producto ====
   Boutique: datos centrados como etiqueta de lujo, nombre en mayusculas
   con linea dorada, foto alta sin esquinas. */
body[data-plantilla="boutique"] .producto-migas { text-align: center; font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; }
body[data-plantilla="boutique"] .producto-layout { align-items: center; gap: 56px; }
body[data-plantilla="boutique"] .producto-panel { text-align: center; }
body[data-plantilla="boutique"] .producto-estado-fila { justify-content: center; }
body[data-plantilla="boutique"] .producto-nombre { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; }
body[data-plantilla="boutique"] .producto-nombre::after { content: ""; display: block; width: 56px; height: 1px; margin: 18px auto 0; background: var(--tema-dorado); }
body[data-plantilla="boutique"] .producto-precio .precio-actual { font-family: var(--tema-serifa); font-weight: 400; font-size: 1.5rem; letter-spacing: .06em; }
body[data-plantilla="boutique"] .variantes-selector { justify-content: center; }
body[data-plantilla="boutique"] .variantes-selector button { border-radius: 0; background: transparent; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
body[data-plantilla="boutique"] .variantes-selector button.selected { border-color: var(--tema-oscuro); background: var(--tema-oscuro); color: #fff; }
body[data-plantilla="boutique"] .producto-comprar { justify-content: center; flex-wrap: wrap; }
body[data-plantilla="boutique"] #btn-agregar-carrito {
  flex-basis: 100%; min-height: 52px; border-radius: 0; background: var(--tema-oscuro); color: #fff;
  box-shadow: inset 0 0 0 1px var(--tema-dorado); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
}
body[data-plantilla="boutique"] .producto-galeria .galeria { justify-content: center; }
body[data-plantilla="boutique"] .galeria img { border-radius: 0; border: 0; border-bottom: 2px solid transparent; }
body[data-plantilla="boutique"] .galeria-miniatura.activa { border-bottom-color: var(--tema-dorado); }
body[data-plantilla="boutique"] .producto-descripcion { max-width: 52ch; margin-left: auto; margin-right: auto; text-align: center; }
body[data-plantilla="boutique"] .producto-descripcion h2 { font-family: var(--tema-serifa); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; font-size: .9rem; }
body[data-plantilla="boutique"] .producto-info .help, body[data-plantilla="boutique"] #variante-info { text-align: center; }
@media (max-width: 760px) {
  body[data-plantilla="boutique"] .producto-galeria { margin: 0 -20px; }
  body[data-plantilla="boutique"] #imagen-principal { border: 0; }
}