/* Revestir · estética de toda la tienda (sobre el theme Recife).
   Redefine las variables de diseño de Recife + unos pocos ajustes de componentes.
   Se carga después de los estilos del theme; borrar el <link> en layout.tpl lo desactiva. */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Libre+Caslon+Text:ital@1&display=swap');

html:root {
  --main-background: #F7F4EE;
  --main-foreground: #1C1B1A;
  --accent-color: #8A4B3C;

  --button-background: #1C1B1A;
  --button-foreground: #F7F4EE;
  /* --label-*: se deja el verde original de la tienda (las etiquetas se leen mejor) */
  --sale-background: #8A4B3C;
  --sale-foreground: #F7F4EE;

  --header-featured-link-foreground: #8A4B3C;

  --footer-background: #1C1B1A;
  --footer-foreground: #EEEAE3;
  --newsletter-background: #EEEAE3;
  --newsletter-foreground: #1C1B1A;

  --heading-font: 'Jost', 'Helvetica Neue', sans-serif;
  --body-font: 'Jost', 'Helvetica Neue', sans-serif;
  --title-font-weight: 300;

  /* Esquinas "suaves": 6 px en fotos y recuadros, menos en botones y campos */
  --border-radius: 6px;
  --border-radius-half: 3px;
  --border-radius-quarter: 2px;
}

html body { background: #F7F4EE; color: #1C1B1A; font-weight: 300; -webkit-font-smoothing: antialiased; }
html h1, html h2, html h3, html .h1, html .h2, html .h3 { font-weight: 300; letter-spacing: .06em; text-transform: uppercase; }
html h4, html h5, html h6, html .h4, html .h5, html .h6 { font-weight: 400; letter-spacing: .04em; }

/* ——— Header: colores y logo originales de la tienda; solo cambia la tipografía del menú ——— */
html .nav-list-link, html .nav-desktop .nav-list-link, html .nav-item > .nav-list-link {
  font-family: 'Jost', sans-serif; font-weight: 400; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase;
}
html .nav-list-link.selected, html .nav-list-link:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ——— Grilla de productos: nombre en mayúsculas finas, precio sin negrita ——— */
html .item-name { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: 1 !important; font-weight: 400; }
html .item-price { font-weight: 300 !important; font-size: 14px; letter-spacing: .04em; }
html .price-compare { font-weight: 300; }
html .item-image { border-radius: 6px; overflow: hidden; }
html .item-image img { transition: transform 2s cubic-bezier(.42, 0, .58, 1); }
html .item:hover .item-image img { transform: scale(1.03); }
/* fotos de distinta proporción (columnas de ducha, kits): todas las tarjetas cuadradas, foto entera sobre blanco */
html .js-item-image-padding { padding-bottom: 100% !important; background: #fff; }
html .js-item-image-padding .placeholder-fade { background: transparent !important; }

/* ——— Botones: negros, esquinas apenas suaves, texto en mayúsculas ——— */
html .btn, html .btn-primary, html .btn-default, html .btn-add-to-cart {
  border-radius: 3px !important; font-family: 'Jost', sans-serif; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; font-size: 12px;
}
html .btn-primary, html .btn-add-to-cart { background: #1C1B1A; border-color: #1C1B1A; color: #F7F4EE; }
html .btn-primary:hover, html .btn-add-to-cart:hover { background: #8A4B3C; border-color: #8A4B3C; }
html .form-control, html .form-select, html input, html select, html textarea { border-radius: 3px !important; }

/* ——— Títulos de página y breadcrumbs ——— */
html .page-header h1, html .page-header .h1 { font-weight: 200; letter-spacing: .08em; }
html .breadcrumbs, html .breadcrumb { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

/* ——— Footer ——— */
html .footer-menu-link { letter-spacing: .06em; }

/* ——— Newsletter: bloque compacto (título y texto a la izquierda, campo con línea a la derecha) ——— */
html .newsletter-footer .newsletter > .row { max-width: 1080px; margin-left: auto; margin-right: auto; }
html .newsletter-footer .newsletter .h2 { font-size: clamp(22px, 2.1vw, 30px); font-weight: 200; letter-spacing: .1em; margin: 0; }
html .newsletter-footer .newsletter .font-small { font-size: 13px; letter-spacing: .03em; opacity: .7; }
html .newsletter-footer .newsletter-form .form-control {
  background: transparent; border: 0; border-bottom: 1px solid rgba(28, 27, 26, .35);
  border-radius: 0 !important; padding-left: 0; color: #1C1B1A; box-shadow: none;
}
html .newsletter-footer .newsletter-form .form-control::placeholder { color: rgba(28, 27, 26, .5); }
html .newsletter-footer .newsletter-form .form-control:focus { border-bottom-color: #1C1B1A; }
html .newsletter-footer .newsletter-form .btn {
  border: 0; border-bottom: 1px solid #1C1B1A; border-radius: 0 !important; height: 42px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: #1C1B1A;
}
@media (min-width: 768px) {
  html .newsletter-footer .newsletter > .row {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 72px; row-gap: 8px; align-items: end;
  }
  html .newsletter-footer .newsletter > .row > * { max-width: none; flex: none; width: auto; margin-bottom: 0 !important; padding-left: 0; padding-right: 0; }
  html .newsletter-footer .newsletter > .row > .col-md:nth-child(1) { grid-column: 1; grid-row: 1; }
  html .newsletter-footer .newsletter > .row > .col-md:nth-child(2) { grid-column: 1; grid-row: 2; align-self: start; }
  html .newsletter-footer .newsletter > .row > form { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  html .newsletter-footer .newsletter-form { flex-wrap: nowrap; }
  html .newsletter-footer .newsletter-form > .col-md { margin-bottom: 0 !important; }
}