/*
Theme Name:   Sofasymas
Theme URI:    https://sofasymas.es
Description:  Tema a medida de Sofás y mucho más. Tienda monoproducto (un colchón, un sofá) con fichas de producto de formato largo.
Author:       Sofasymas
Version:      0.1.0
Template:     astra
Text Domain:  sofasymas
*/

/* ===============================================================
   Base
   =============================================================== */

/* El atributo hidden solo vale display:none en la hoja del navegador, y
   cualquier regla del tema con display propio lo pisa: las hojas de autor
   ganan siempre a las del user agent. Sin esto, un componente al que se le
   pone display (flex, grid…) sigue viéndose aunque el JavaScript lo marque
   como oculto. Le pasó al aviso de cookies: guardaba la decisión y no
   desaparecía. */
[hidden] { display: none !important; }

body {
  background: var(--sym-bone);
  color: var(--sym-ink);
  font-family: var(--sym-font-body);
  font-size: var(--sym-step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sym-display {
  font-family: var(--sym-font-display);
  /* Cormorant es de trazo fino: en 500 se deshilacha sobre fondo claro. */
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.005em;
  color: var(--sym-ink);
  /* Sus cifras por defecto son de estilo antiguo, con astas que suben y
     bajan. Preciosas en prosa, ilegibles en un precio o en "100 noches". */
  font-variant-numeric: lining-nums;
}

/* Todo lo que sea una cifra que se lee como dato: alineada y de ancho fijo. */
.price,
.sym-pick__price,
.sym-layer__num,
.sym-step__num,
.sym-stickybar__price,
.sym-table,
.woocommerce .amount,
.cart_totals .amount {
  font-variant-numeric: lining-nums tabular-nums;
}

/* La cabecera venía con la tipografía de Astra: el nombre de la marca
   debe ir en la del tema, y el menú en la de texto. */
.site-title,
.site-title a,
.ast-site-identity .site-title {
  font-family: var(--sym-font-display);
  font-weight: 600;
  letter-spacing: -.005em;
}

.main-header-menu a,
.ast-header-break-point .main-header-menu a {
  font-family: var(--sym-font-body);
  font-size: var(--sym-step--1);
  letter-spacing: .02em;
}

h1 { font-size: var(--sym-step-4); }
h2 { font-size: var(--sym-step-3); }
h3 { font-size: var(--sym-step-1); }

/* ---- Botones ------------------------------------------------- */
.sym-btn,
.woocommerce .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--sym-font-body);
  font-size: var(--sym-step-0);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.sym-btn--primary,
.woocommerce .single_add_to_cart_button {
  background: var(--sym-ink);
  color: var(--sym-bone);
}

.sym-btn--primary:hover,
.woocommerce .single_add_to_cart_button:hover {
  background: var(--sym-accent-deep);
  color: #fff;
}

.sym-btn:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible {
  outline: 2px solid var(--sym-accent-deep);
  outline-offset: 3px;
}

.woocommerce .single_add_to_cart_button.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.sym-btn--light {
  background: var(--sym-bone);
  color: var(--sym-ink);
}

.sym-btn--light:hover { background: #fff; color: var(--sym-ink); }

.sym-btn--ghost {
  background: transparent;
  border-color: var(--sym-ink);
  color: var(--sym-ink);
}

.sym-btn--ghost:hover { background: var(--sym-ink); color: var(--sym-bone); }

/* Antetítulo: la pieza que más rápido eleva el tono de una página. */
.sym-eyebrow {
  margin: 0 0 .9rem;
  font-size: var(--sym-step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sym-ink-mute);
}

/* ===============================================================
   Pie de página
   Mismo negro que el bloque de cierre de la portada: allí los dos
   se funden en una sola pieza final, y en el resto del sitio da
   sensación de cierre.
   =============================================================== */
.sym-footer {
  background: var(--sym-ink);
  color: var(--sym-clay);
  padding: var(--sym-gap-xl) clamp(1.25rem, 4vw, 2rem) 0;
}

.sym-footer__inner {
  display: grid;
  /* Número fijo de columnas: con auto-fit se generaban dos columnas vacías. */
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(140px, 1fr));
  gap: var(--sym-gap-l) var(--sym-gap-m);
  max-width: var(--sym-maxw);
  margin: 0 auto;
  padding-bottom: var(--sym-gap-l);
}

.sym-footer__brand { min-width: 0; max-width: 34ch; }

.sym-footer__name {
  margin: 0 0 .6rem;
  font-family: var(--sym-font-display);
  font-size: var(--sym-step-1);
  color: var(--sym-bone);
}

.sym-footer__tagline {
  margin: 0 0 var(--sym-gap-s);
  font-size: var(--sym-step--1);
  line-height: 1.55;
  color: var(--sym-ink-mute);
}

.sym-footer__contact {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: var(--sym-step--1);
}

.sym-footer__contact a { color: var(--sym-clay); text-decoration: none; }
.sym-footer__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.sym-footer__hours { color: var(--sym-ink-mute); }

.sym-footer__col { min-width: 0; }

.sym-footer__col-title {
  margin: 0 0 var(--sym-gap-s);
  font-family: var(--sym-font-body);
  font-size: var(--sym-step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sym-ink-mute);
}

.sym-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.sym-footer__links a {
  font-size: var(--sym-step--1);
  color: var(--sym-clay);
  text-decoration: none;
  transition: color .15s ease;
}

.sym-footer__links a:hover { color: #fff; }

.sym-footer__links a:focus-visible,
.sym-footer__contact a:focus-visible {
  outline: 2px solid var(--sym-accent);
  outline-offset: 3px;
}

.sym-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sym-gap-s);
  flex-wrap: wrap;
  max-width: var(--sym-maxw);
  margin: 0 auto;
  padding: var(--sym-gap-s) 0;
  border-top: 1px solid rgba(250, 248, 245, .12);
}

.sym-footer__legal,
.sym-footer__made {
  margin: 0;
  font-size: var(--sym-step--1);
  color: var(--sym-ink-mute);
}

/* En la portada el cierre ya es oscuro: se eliminan las costuras. */
.home .sym-closing { padding-bottom: var(--sym-gap-l); }
.home .sym-footer { padding-top: var(--sym-gap-l); }

@media (max-width: 782px) {
  .sym-footer__inner { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .sym-footer__brand { grid-column: 1 / -1; max-width: none; }
}

/* ===============================================================
   Páginas de contenido (legales, sobre nosotros, contacto)
   Se excluyen las de WooCommerce: carrito y pago necesitan el
   ancho completo para sus tablas.
   =============================================================== */
body.page:not(.woocommerce-page) .entry-content,
body.page:not(.woocommerce-page) .entry-header {
  /* ~68 caracteres por línea. A 99, que es lo que salía, el ojo pierde
     el renglón al volver al margen izquierdo. */
  max-width: 68ch;
  /* Margen de seguridad: varias páginas heredaron de la demo un contenedor
     a sangre, y sin esto el texto arrancaba pegado al borde de la ventana. */
  padding-inline: clamp(1.25rem, 4vw, 2rem);
  margin-inline: auto;
}

body.page:not(.woocommerce-page) .entry-title {
  font-family: var(--sym-font-display);
  font-size: var(--sym-step-3);
  margin-bottom: var(--sym-gap-m);
}

/* Astra fija aquí su propia familia y escala: hay que reponer las nuestras
   con un selector más específico para no invertir la jerarquía. */
body.page:not(.woocommerce-page) .entry-content h2,
body.page:not(.woocommerce-page) .entry-content h3,
body.page:not(.woocommerce-page) .entry-content h4 {
  font-family: var(--sym-font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sym-ink);
}

body.page:not(.woocommerce-page) .entry-content h2 {
  margin: var(--sym-gap-l) 0 var(--sym-gap-xs);
  font-size: var(--sym-step-2);
  padding-top: var(--sym-gap-s);
  border-top: 1px solid var(--sym-clay);
}

body.page:not(.woocommerce-page) .entry-content h3 {
  margin: var(--sym-gap-m) 0 var(--sym-gap-xs);
  font-size: var(--sym-step-1);
}

body.page:not(.woocommerce-page) .entry-content p,
body.page:not(.woocommerce-page) .entry-content li {
  line-height: 1.65;
  color: var(--sym-ink-soft);
}

body.page:not(.woocommerce-page) .entry-content ul {
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

body.page:not(.woocommerce-page) .entry-content li::marker { color: var(--sym-accent); }

body.page:not(.woocommerce-page) .entry-content strong { color: var(--sym-ink); }

body.page:not(.woocommerce-page) .entry-content a {
  color: var(--sym-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-color: var(--sym-accent);
}

body.page:not(.woocommerce-page) .entry-content a:hover { text-decoration-color: var(--sym-ink); }

/* ---- Carrito de la cabecera --------------------------------------
   El importe y el icono venían en color de acento. En una cabecera
   sobria el acento debe reservarse para el contador, que es lo único
   que conviene que salte a la vista.
   ------------------------------------------------------------------ */
.ast-site-header-cart .ast-woo-header-cart-info-wrap,
.ast-header-woo-cart .ast-addon-cart-wrap,
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-site-header-cart a {
  color: var(--sym-ink);
  font-family: var(--sym-font-body);
  font-variant-numeric: lining-nums tabular-nums;
}

.ast-site-header-cart .ast-cart-menu-wrap .astra-icon::after,
.ast-site-header-cart .ast-icon-shopping-cart::after,
.ast-header-woo-cart .ast-cart-menu-wrap .count {
  background-color: var(--sym-ink);
  color: var(--sym-bone);
  border-color: var(--sym-ink);
}

.ast-site-header-cart svg,
.ast-site-header-cart .ahfb-svg-iconset svg {
  fill: var(--sym-ink);
  color: var(--sym-ink);
}

/* ===============================================================
   Logotipo
   =============================================================== */
.sym-logo {
  display: inline-flex;
  align-items: center;
  color: var(--sym-ink);
  line-height: 0;
}

.sym-mark {
  width: auto;
  height: 2.1rem;
  display: block;
}

/* Sobre el pie oscuro la pieza grande se aclara sola: usa currentColor. */
.sym-footer .sym-logo { color: var(--sym-bone); }

@media (max-width: 782px) {
  .sym-mark { height: 1.8rem; }
}