/* ============================================================
   PRODUCTO (single product de WooCommerce / Blocksy) — misma estética que
   la tienda: rosa como color de la página, galería en recuadro blanco
   redondeado, título grande, meta en pills y pestañas en píldoras, sin
   mayúsculas. Se carga solo en is_product() (functions.php).
   ============================================================ */
:root {
    --primary: #e464be;
    --primary-2: #b8388f;
    --rgb-primary: 228, 100, 190;
    --btn-from: #b8388f;
    --btn-hover-from: #9c2c79;
}

/* Migas: sin mayúsculas y en gris. */
.ct-breadcrumbs,
.woocommerce-breadcrumb {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.ct-breadcrumbs a,
.woocommerce-breadcrumb a {
    color: var(--muted);
}

.ct-breadcrumbs a:hover,
.woocommerce-breadcrumb a:hover {
    color: var(--text);
}

/* Galería: la foto (fondo blanco) en un recuadro redondeado con borde tenue. */
.woocommerce-product-gallery .ct-media-container {
    border-radius: var(--radius-card);
    border: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
    overflow: hidden;
}

.woocommerce-product-gallery .flexy-pills img,
.woocommerce-product-gallery .flex-control-thumbs img {
    border-radius: var(--radius-control);
}

/* Resumen */
.woocommerce div.product .product_title {
    margin: 0 0 16px;
    font-size: clamp(32px, 3.4vw, 48px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
    color: var(--text);
}

/* Sin precio ni carrito: esos bloques y sus separadores quedan vacíos. */
.woocommerce div.product .summary .price:empty,
.woocommerce div.product .ct-product-add-to-cart:empty {
    display: none;
}

.woocommerce div.product .ct-product-divider {
    display: none;
}

.tpc-product-cta {
    margin: 8px 0 24px;
}

/* Meta (categoría, etiqueta, marca) como pills en gris claro. */
.woocommerce div.product .product_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.woocommerce div.product .product_meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--soft);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}

.woocommerce div.product .product_meta > span a {
    color: var(--text);
}

/* Pestañas como control segmentado (píldoras), sin mayúsculas ni subrayado. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    margin: 48px auto 32px;
    padding: 4px;
    border: 0;
    border-radius: 999px;
    background: var(--soft);
    overflow-x: auto;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    color: var(--muted);
    transition: background .2s ease, color .2s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

/* Contenido de las pestañas: ancho de lectura cómodo. */
.woocommerce div.product .woocommerce-Tabs-panel {
    max-width: 72ch;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
}

.woocommerce div.product .woocommerce-Tabs-panel > h2 {
    font-size: 24px;
}

.woocommerce table.shop_attributes {
    border: 0;
    border-radius: var(--radius-control);
    overflow: hidden;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
    padding: 12px 16px;
    border: 0;
    font-style: normal;
}

.woocommerce table.shop_attributes tr:nth-child(odd) th,
.woocommerce table.shop_attributes tr:nth-child(odd) td {
    background: var(--soft);
}