/* ===============================================================
   Ficha de producto en formato largo
   =============================================================== */

/* ---- Estructura del bloque de compra --------------------------
   WooCommerce y Astra maquetan esto con floats y anchos en %. Hay que
   ganarles en especificidad y desactivar los floats, o el grid no aplica.
   ---------------------------------------------------------------- */
.woocommerce.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  max-width: var(--sym-maxw);
  margin-inline: auto;
  float: none;
}

.woocommerce.single-product div.product::before,
.woocommerce.single-product div.product::after {
  content: none;
}

/* El !important es deliberado: Astra reparte estas dos columnas con
   floats y anchos en % desde varias hojas, y pelear a especificidad aquí
   es frágil. Se limita a las dos propiedades que estorban al grid. */
.woocommerce.single-product div.product .woocommerce-product-gallery,
.woocommerce.single-product div.product .summary {
  width: auto !important;
  float: none !important;
  max-width: none;
  margin: 0;
  clear: none;
  /* Sin esto el ancho mínimo del item es el de su contenido (la imagen a
     tamaño completo), y la columna se niega a encogerse en móvil. */
  min-width: 0;
}

.woocommerce.single-product div.product .woocommerce-product-gallery img {
  max-width: 100%;
  height: auto;
}

.woocommerce.single-product div.product .woocommerce-product-gallery {
  position: sticky;
  top: 2rem;
  grid-column: 1;
}

.woocommerce.single-product div.product .summary {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: var(--sym-gap-s);
}

/* Todo lo que va debajo (descripción, relacionados) ocupa el ancho entero. */
.woocommerce.single-product div.product > :not(.woocommerce-product-gallery):not(.summary) {
  grid-column: 1 / -1;
}

.single-product div.product .product_title {
  margin: 0;
  font-size: var(--sym-step-3);
}

.single-product div.product .price {
  font-family: var(--sym-font-display);
  font-size: var(--sym-step-2);
  color: var(--sym-ink);
}

.single-product div.product .price del { color: var(--sym-ink-mute); font-size: .6em; }
.single-product div.product .price ins { text-decoration: none; color: var(--sym-accent); }

/* La ficha se lee sola: sin fotos aún, el hueco no debe parecer un error. */
.single-product .woocommerce-product-gallery__image img {
  border-radius: var(--sym-radius);
  background: var(--sym-sand);
}

/* ---- Chips de variación --------------------------------------- */
.sym-select-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* La tabla de variaciones se aplana: cada atributo es un bloque con su
   etiqueta encima de los chips, no una fila de tabla. */
.woocommerce div.product form.cart .variations { margin-bottom: var(--sym-gap-m); }

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
}

.woocommerce div.product form.cart .variations tr + tr { margin-top: var(--sym-gap-m); }

.woocommerce div.product form.cart .variations label {
  display: block;
  margin-bottom: .45rem;
  font-size: var(--sym-step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sym-ink-mute);
}


.sym-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.sym-chip {
  padding: .8rem 1.3rem;
  min-width: 3.5rem;
  background: #fff;
  border: 1.5px solid var(--sym-clay);
  border-radius: var(--sym-radius-sm);
  font-family: inherit;
  font-size: var(--sym-step--1);
  font-weight: 500;
  color: var(--sym-ink-soft);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.sym-chip:hover:not([disabled]) { border-color: var(--sym-accent); color: var(--sym-ink); }

.sym-chip.is-selected {
  border-color: var(--sym-ink);
  background: var(--sym-ink);
  color: var(--sym-bone);
}

.sym-chip.is-unavailable {
  color: var(--sym-ink-mute);
  background: var(--sym-sand);
  border-color: transparent;
  cursor: not-allowed;
  text-decoration: line-through;
  opacity: .6;
}

.sym-chip:focus-visible { outline: 2px solid var(--sym-accent-deep); outline-offset: 2px; }

.woocommerce div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: .5rem;
  font-size: var(--sym-step--1);
  color: var(--sym-ink-mute);
}

/* ---- Señales de confianza ------------------------------------- */
/* En una sola columna: el panel de compra es estrecho y con tres
   elementos en rejilla quedaban dos arriba y uno suelto debajo. */
.sym-trust {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--sym-gap-s) 0 0;
  padding: .35rem var(--sym-gap-s);
  list-style: none;
  background: var(--sym-accent-wash);
  border-radius: var(--sym-radius);
}

.sym-trust__item {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .7rem 0;
}

.sym-trust__item + .sym-trust__item {
  border-top: 1px solid rgba(62, 76, 58, .14);
}
.sym-trust__title { font-weight: 600; font-size: var(--sym-step--1); }
.sym-trust__desc { font-size: var(--sym-step--1); color: var(--sym-ink-soft); }

/* ---- Barra de compra pegajosa ---------------------------------- */
.sym-stickybar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: .75rem clamp(1rem, 4vw, 2rem);
  background: rgba(250, 248, 245, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sym-clay);
  box-shadow: 0 -8px 24px -18px rgba(31, 29, 27, .5);
  animation: sym-slide-up .22s ease;
}

@keyframes sym-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.sym-stickybar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sym-gap-s);
  max-width: var(--sym-maxw);
  margin-inline: auto;
}

.sym-stickybar__id { display: flex; flex-direction: column; min-width: 0; }
.sym-stickybar__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sym-stickybar__variant { font-size: var(--sym-step--1); color: var(--sym-ink-mute); }
.sym-stickybar__buy { display: flex; align-items: center; gap: var(--sym-gap-s); }
.sym-stickybar__price { font-family: var(--sym-font-display); font-size: var(--sym-step-1); white-space: nowrap; }
.sym-stickybar__price del { display: none; }

@media (max-width: 782px) {
  .woocommerce.single-product div.product { grid-template-columns: minmax(0, 1fr); }
  .woocommerce.single-product div.product .woocommerce-product-gallery,
  .woocommerce.single-product div.product .summary { grid-column: 1; }
  .woocommerce.single-product div.product .woocommerce-product-gallery { position: static; }
  .sym-stickybar__name { font-size: var(--sym-step--1); }
  .sym-stickybar__price { font-size: var(--sym-step-0); }
}

@media (prefers-reduced-motion: reduce) {
  .sym-stickybar { animation: none; }
}

/* ---- Botón de compra ------------------------------------------- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: var(--sym-gap-s);
  flex-wrap: wrap;
}

.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .single_variation_wrap { flex: 1 0 100%; }

.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto;
  white-space: nowrap;
}

.woocommerce div.product form.cart div.quantity { flex: 0 0 auto; }

.woocommerce div.product form.cart div.quantity input {
  height: 100%;
  min-height: 3.25rem;
  padding: 0 .5rem;
  border: 1.5px solid var(--sym-clay);
  border-radius: var(--sym-radius-sm);
  background: #fff;
  text-align: center;
}

.woocommerce div.product .woocommerce-variation-price { margin-bottom: var(--sym-gap-xs); }

/* ---- Chip con precio ------------------------------------------- */
.sym-chip.has-price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  padding: .7rem 1.1rem;
  text-align: left;
}

.sym-chip__label { font-weight: 600; }

.sym-chip__price {
  font-size: .78em;
  font-weight: 500;
  color: var(--sym-ink-mute);
  font-variant-numeric: tabular-nums;
}

.sym-chip.is-selected .sym-chip__price { color: var(--sym-sand); }
.sym-chip.is-unavailable .sym-chip__price { color: inherit; }

/* ---- Estados del chip ------------------------------------------
   Astra pinta el fondo de los <button> en :hover y :focus con su color
   de acento. Aquí se fija el fondo en todos los estados para que el
   único chip oscuro sea siempre el elegido, y nunca el que tiene el foco.
   ---------------------------------------------------------------- */
.sym-chip,
.sym-chip:hover,
.sym-chip:focus,
.sym-chip:active {
  background: #fff;
  color: var(--sym-ink-soft);
}

.sym-chip.is-selected,
.sym-chip.is-selected:hover,
.sym-chip.is-selected:focus,
.sym-chip.is-selected:active {
  background: var(--sym-ink);
  color: var(--sym-bone);
  border-color: var(--sym-ink);
}

.sym-chip.is-unavailable,
.sym-chip.is-unavailable:hover,
.sym-chip.is-unavailable:focus {
  background: var(--sym-sand);
  color: var(--sym-ink-mute);
  border-color: transparent;
}

/* ===============================================================
   Secciones de formato largo
   =============================================================== */
.sym-section {
  /* El width:100% es necesario: con márgenes laterales auto, un grid item
     deja de estirarse y se encoge a su contenido. Sin esto, la sección de
     preguntas (solo texto) queda más estrecha que las demás. */
  width: 100%;
  max-width: var(--sym-maxw);
  margin: var(--sym-gap-xl) auto 0;
  padding-inline: clamp(0rem, 2vw, 1rem);
}

.sym-section__title {
  margin: 0 0 var(--sym-gap-s);
  font-size: var(--sym-step-2);
}

.sym-section__intro {
  max-width: 58ch;
  margin: 0 0 var(--sym-gap-m);
  font-size: var(--sym-step-1);
  line-height: 1.45;
  color: var(--sym-ink-soft);
}

/* ---- Tarjetas --------------------------------------------------- */
.sym-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sym-gap-m);
}

.sym-card {
  padding: var(--sym-gap-m);
  background: #fff;
  border: 1px solid var(--sym-clay);
  border-radius: var(--sym-radius);
}

.sym-cards--service .sym-card {
  background: var(--sym-accent-wash);
  border-color: transparent;
}

.sym-card__title { margin: 0 0 .5rem; font-size: var(--sym-step-1); }
.sym-card__text  { margin: 0; color: var(--sym-ink-soft); }

/* ---- Capas ------------------------------------------------------ */
.sym-layers {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sym-clay);
}

.sym-layer {
  display: flex;
  gap: var(--sym-gap-m);
  padding: var(--sym-gap-m) 0;
  border-bottom: 1px solid var(--sym-clay);
}

.sym-layer__num {
  flex: 0 0 auto;
  font-family: var(--sym-font-display);
  font-size: var(--sym-step-2);
  line-height: 1;
  color: var(--sym-accent);
  font-variant-numeric: tabular-nums;
}

.sym-layer__body { display: flex; flex-direction: column; gap: .3rem; }
.sym-layer__title { font-weight: 600; font-size: var(--sym-step-1); font-family: var(--sym-font-display); }
.sym-layer__text  { color: var(--sym-ink-soft); max-width: 62ch; }

/* ---- Tabla de medidas ------------------------------------------- */
.sym-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sym-clay);
  border-radius: var(--sym-radius);
  background: #fff;
}

.sym-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sym-table th,
.sym-table td {
  padding: .9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--sym-sand);
  white-space: nowrap;
}

.sym-table thead th {
  font-size: var(--sym-step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sym-ink-mute);
  background: var(--sym-bone);
}

.sym-table tbody th { font-weight: 600; }
.sym-table td { color: var(--sym-ink-soft); }
.sym-table tbody tr:last-child th,
.sym-table tbody tr:last-child td { border-bottom: 0; }

/* ---- Preguntas frecuentes --------------------------------------- */
.sym-faq { border-top: 1px solid var(--sym-clay); }

.sym-faq__item { border-bottom: 1px solid var(--sym-clay); }

.sym-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sym-gap-s);
  padding: var(--sym-gap-s) 0;
  font-family: var(--sym-font-display);
  font-size: var(--sym-step-1);
  cursor: pointer;
  list-style: none;
}

.sym-faq__q::-webkit-details-marker { display: none; }

.sym-faq__q::after {
  content: "";
  flex: 0 0 auto;
  width: .65rem;
  height: .65rem;
  border-right: 2px solid var(--sym-ink-mute);
  border-bottom: 2px solid var(--sym-ink-mute);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}

.sym-faq__item[open] .sym-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.sym-faq__q:focus-visible { outline: 2px solid var(--sym-accent-deep); outline-offset: 2px; }

.sym-faq__a {
  padding-bottom: var(--sym-gap-s);
  max-width: 62ch;
  color: var(--sym-ink-soft);
}

.sym-faq__a p { margin: 0; }

@media (max-width: 600px) {
  .sym-layer { gap: var(--sym-gap-s); }
  .sym-section { margin-top: var(--sym-gap-l); }
}

/* ---- Botón de compra: todos los estados -------------------------
   Mismo caso que los chips: Astra colorea :hover, :focus y :disabled
   con su acento, así que hay que fijarlos uno a uno.
   ----------------------------------------------------------------- */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
  background: var(--sym-ink);
  color: var(--sym-bone);
  border-color: var(--sym-ink);
  min-height: 3.4rem;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(.disabled) {
  background: var(--sym-accent-deep);
  border-color: var(--sym-accent-deep);
  color: #fff;
}

.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button:disabled {
  opacity: .35;
}

/* La barra fija tapaba el final de la página. */
body.single-product { padding-bottom: 5.5rem; }

/* El bloque de metadatos de WooCommerce anunciaba "SKU: N/D" y repetía la
   categoría, que ya aparece sobre el título. No aporta nada al comprador. */
.woocommerce div.product .product_meta { display: none; }