/* ============================================================
   Tézal Kafenta — estilos para WooCommerce
   Re-estiliza las plantillas POR DEFECTO de WooCommerce (tienda,
   producto, carrito, checkout) para que combinen con la marca.
   NO cambia la lógica de WooCommerce: pagos, envíos y checkout
   siguen funcionando exactamente igual.
   Variables (--red, --ink, etc.) vienen de main.css.
   ============================================================ */

.woo-page { padding-top: 150px; }
.woocommerce-content { color: var(--cream); }

/* Títulos */
.woocommerce-products-header__title,
.woocommerce div.product .product_title,
.woocommerce-content h1, .woocommerce-content h2 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.01em; color: var(--cream);
}
.woocommerce-products-header__title { font-size: clamp(32px,4.4vw,56px); margin-bottom: 30px; }

/* Breadcrumb */
.woocommerce-breadcrumb {
  font-family: var(--round); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 26px;
}
.woocommerce-breadcrumb a { color: var(--cream-soft); }
.woocommerce-breadcrumb a:hover { color: var(--red); }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  background: var(--charcoal); border-top: 3px solid var(--red); color: var(--cream);
  border-radius: 10px; font-family: var(--round);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--red); }
.woocommerce-error { border-top-color: #c0392b; }

/* Botones */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce #place_order {
  font-family: var(--round); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 600; background: var(--red); color: #fff; border: none; border-radius: 40px;
  padding: 15px 30px; transition: all .4s var(--ease); cursor: pointer;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce #place_order:hover,
.woocommerce #respond input#submit:hover {
  background: var(--red-deep); color: #fff; transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(227,6,19,.7);
}
.woocommerce a.button.added::after { color: #fff; }

/* Loop de tienda */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  background: linear-gradient(180deg,var(--charcoal),var(--ink));
  border: 1px solid var(--line); border-radius: 18px; padding: 22px; text-align: center;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.woocommerce ul.products li.product:hover { border-color: var(--line-red); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
.woocommerce ul.products li.product a img {
  border-radius: 14px; margin-bottom: 18px;
  background: radial-gradient(120% 120% at 50% 18%,#F4F0E5,#E0D6C2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--round); font-weight: 600; font-size: 18px; color: var(--cream); padding-bottom: 6px;
}
.woocommerce ul.products li.product .price {
  color: var(--cream); font-family: var(--round); font-weight: 600; font-size: 16px;
}
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; }
.woocommerce ul.products li.product .price ins { color: var(--red); text-decoration: none; }
.woocommerce span.onsale {
  background: var(--red); color: #fff; font-family: var(--round); font-weight: 600;
  border-radius: 30px; min-height: auto; min-width: auto; padding: 6px 12px; line-height: 1;
}
.woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: var(--red); }

/* Producto individual */
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--cream); font-family: var(--round); font-weight: 600; font-size: 26px;
}
.woocommerce div.product p.price ins { color: var(--red); text-decoration: none; }
.woocommerce div.product p.price del { color: var(--muted); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--cream-soft); font-weight: 300; }
.woocommerce div.product form.cart { margin-top: 24px; }
.woocommerce .quantity .qty {
  background: var(--charcoal); border: 1px solid var(--line); color: var(--cream);
  border-radius: 12px; padding: 12px; font-family: var(--round);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--charcoal); border-color: var(--line); border-radius: 10px 10px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--ink); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { color: var(--cream-soft); font-family: var(--round); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--line); }
.woocommerce-Tabs-panel { color: var(--cream-soft); font-weight: 300; }
.woocommerce #reviews #comments h2, .woocommerce div.product .woocommerce-tabs .panel h2 {
  font-family: var(--display); color: var(--cream);
}

/* Tablas (carrito / totales) */
.woocommerce table.shop_table {
  border: 1px solid var(--line); border-radius: 14px; color: var(--cream-soft); background: var(--charcoal);
}
.woocommerce table.shop_table th { color: var(--cream); font-family: var(--round); }
.woocommerce table.shop_table td { border-top: 1px solid var(--line); }
.woocommerce-cart table.cart img { border-radius: 8px; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review, .woocommerce-checkout #order_review_heading {
  color: var(--cream);
}

/* Formularios (checkout, cuenta) */
.woocommerce form .form-row label, .woocommerce-checkout label { color: var(--cream-soft); font-family: var(--round); font-size: 13px; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-checkout input.input-text, .woocommerce-checkout select, .woocommerce-checkout textarea,
.woocommerce form .form-row select {
  background: var(--charcoal); border: 1px solid var(--line); color: var(--cream);
  border-radius: 10px; padding: 12px 14px; font-family: var(--display);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input.input-text:focus, .woocommerce-checkout textarea:focus {
  border-color: var(--red); outline: none;
}
.select2-dropdown { background: var(--charcoal); border-color: var(--line); color: var(--cream); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--red); }

/* Resumen del pedido / métodos de pago (NO se altera la funcionalidad, solo el color) */
.woocommerce-checkout #payment { background: var(--charcoal); border-radius: 14px; border: 1px solid var(--line); }
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment div.payment_box { background: var(--ink); color: var(--cream-soft); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--ink); }
.woocommerce-info a, .woocommerce-message a { color: var(--red); }

/* Paginación */
.woocommerce nav.woocommerce-pagination ul { border-color: var(--line); }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  color: var(--cream-soft); background: var(--charcoal);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--red); color: #fff; }

/* ============================================================
   PRODUCTO INDIVIDUAL estilo prototipo (.pdp)
   Usado por el override woocommerce/content-single-product.php
   (galería a la izquierda, ficha a la derecha). Mapea la marcación
   de WooCommerce al aspecto de las páginas producto-*.html.
   Punto de partida — afinar en staging con un producto real.
   ============================================================ */
.pdp-product { float: none; }
.pdp-product .pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }

/* --- Galería (columna izq.) --- */
.pdp-product .pdp-gallery { position: sticky; top: 100px; }
.pdp-product .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; }
.pdp-product .woocommerce-product-gallery__wrapper { margin: 0; }
.pdp-product .woocommerce-product-gallery__image,
.pdp-product .woocommerce-product-gallery .flex-viewport {
  border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 16%, #F4F0E5, #DED3BD);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 30px 60px -36px rgba(0,0,0,.85);
}
.pdp-product .woocommerce-product-gallery__image a { display: block; }
.pdp-product .woocommerce-product-gallery img { border-radius: 20px; }
/* miniaturas (estilo .pdp-thumbs) */
.pdp-product .flex-control-thumbs { display: flex; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
.pdp-product .flex-control-thumbs li { width: 88px; height: 88px; margin: 0; float: none; }
.pdp-product .flex-control-thumbs li img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 12px;
  border: 1px solid var(--line); background: radial-gradient(120% 120% at 50% 16%, #F4F0E5, #DED3BD);
  cursor: pointer; opacity: 1; transition: border-color .3s, transform .3s;
}
.pdp-product .flex-control-thumbs li img:hover { transform: translateY(-3px); }
.pdp-product .flex-control-thumbs li img.flex-active { border-color: var(--red); }

/* --- Ficha (columna der., .summary/.entry-summary) --- */
.pdp-product .summary.pdp-info { margin: 0; }
.pdp-product .product_title {
  font-family: var(--display); font-weight: 800; font-size: clamp(32px,4vw,52px);
  line-height: 1.04; letter-spacing: -.02em; margin: 0 0 14px; color: var(--cream);
}
.pdp-product .summary .price { font-size: 26px; margin-bottom: 20px; display: block; }
.pdp-product .woocommerce-product-details__short-description {
  color: var(--cream-soft); font-size: 16px; font-weight: 300; margin: 0 0 26px; line-height: 1.7;
}
.pdp-product form.cart { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 0 0 26px; }
.pdp-product form.cart .quantity { margin: 0; }
.pdp-product .single_add_to_cart_button { flex: 0 1 auto; }
.pdp-product .stock { font-family: var(--round); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pdp-product .stock.out-of-stock { color: var(--red); }
.pdp-product .product_meta {
  border-top: 1px solid var(--line); padding-top: 22px; margin-top: 6px;
  font-family: var(--round); font-size: 13px; color: var(--cream-soft);
  display: flex; flex-direction: column; gap: 9px;
}
.pdp-product .product_meta > span { display: block; }
.pdp-product .product_meta .sku_wrapper,
.pdp-product .product_meta .posted_in,
.pdp-product .product_meta .tagged_as { color: var(--cream-soft); }
.pdp-product .product_meta a { color: var(--cream); }
.pdp-product .product_meta a:hover { color: var(--red); }

/* --- Descripción / pestañas (ancho completo) --- */
.pdp-product .woocommerce-tabs { margin-top: 60px; }
/* Si pegas el bloque de "ficha rica" (feature-row / ingredientes / nutrición) en la
   descripción del producto, lo estiliza main.css (clases .feature-row, .ing, .nutri…). */

/* --- Relacionados ("Completa tu ritual") --- */
.pdp-product .related.products,
.pdp-product .upsells.products { margin-top: 30px; }
.related.products > h2, .upsells.products > h2 {
  font-family: var(--display); font-weight: 800; font-size: clamp(28px,3.4vw,46px);
  text-align: center; margin: 60px 0 40px; color: var(--cream); letter-spacing: -.01em;
}

/* Responsive: 1 columna en móvil/tablet */
@media (max-width: 980px) {
  .pdp-product .pdp-grid { grid-template-columns: 1fr; gap: 40px; }
  .pdp-product .pdp-gallery { position: static; }
}

/* Contenido de páginas (Nosotros, políticas, etc.) */
.entry-content { color: var(--cream-soft); font-weight: 300; line-height: 1.8; font-size: 16px; }
.entry-content h2, .entry-content h3 { font-family: var(--display); color: var(--cream); margin: 30px 0 14px; }
.entry-content a { color: var(--red); }
.entry-content img { border-radius: 12px; }
.entry-content ul, .entry-content ol { padding-left: 22px; margin: 14px 0; }