/*
 * assets/css/producto/single.css — Nuestro Tiempo Theme
 *
 * Estilos de la página de producto individual (single-product.php).
 * Secciones: breadcrumb, main (galería + info), descripción,
 *            proceso artesanal, reseñas, relacionados.
 *
 * @package nuestro-tiempo
 */

/* ═══════════════════════════════════
   BREADCRUMB
═══════════════════════════════════ */
.nt-breadcrumb {
    background-color: var(--c-crema);
    border-bottom: 1px solid rgba(26, 26, 26, 0.07);
    padding-block: 1rem;
}

.nt-breadcrumb__inner {
    display: flex;
    align-items: center;
}

/* WooCommerce genera .woocommerce-breadcrumb */
.woocommerce-breadcrumb {
    font-family: var(--f-sans) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.04em !important;
    color: rgba(26, 26, 26, 0.45) !important;
    margin: 0 !important;
}

.woocommerce-breadcrumb a {
    color: rgba(26, 26, 26, 0.55) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.woocommerce-breadcrumb a:hover {
    color: var(--c-cobre) !important;
}


/* ═══════════════════════════════════
   MAIN: galería + info
═══════════════════════════════════ */
.sp-main {
    background-color: var(--c-crema);
    padding-block: 4rem;
}

.sp-main__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 900px) {
    .sp-main__grid {
        grid-template-columns: 1fr 1fr;
        gap: 5rem;
        align-items: start;
    }
}


/* ═══════════════════════════════════
   GALERÍA (sobrescribe estilos WooCommerce)
═══════════════════════════════════ */
.sp-gallery {
    position: sticky;
    top: 6rem;
    /* compensa el header fixed */
}

/* Imagen principal */
.sp-gallery .woocommerce-product-gallery {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.sp-gallery .woocommerce-product-gallery__wrapper {
    border-radius: 16px;
    overflow: hidden;
}

.sp-gallery .woocommerce-product-gallery__image:first-child {
    border-radius: 16px;
    overflow: hidden;
}

.sp-gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* Miniaturas */
.sp-gallery .flex-control-thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0 !important;
    list-style: none;
}

.sp-gallery .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.sp-gallery .flex-control-thumbs li:hover,
.sp-gallery .flex-control-thumbs .flex-active {
    border-color: var(--c-cobre) !important;
}

.sp-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Lupa de zoom */
.sp-gallery .woocommerce-product-gallery__trigger {
    background: rgba(26, 26, 26, 0.7) !important;
    border-radius: 50% !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 1rem !important;
    right: 1rem !important;
    opacity: 0;
    transition: opacity 0.2s !important;
}

.sp-gallery .woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger {
    opacity: 1;
}

.sp-gallery .woocommerce-product-gallery__trigger img {
    filter: invert(1) !important;
    width: 1rem !important;
    height: 1rem !important;
}


/* ═══════════════════════════════════
   INFO: panel derecho
═══════════════════════════════════ */
.sp-info {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Categoría */
.sp-info__cat {
    font-family: var(--f-sans);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-cobre);
    margin: 0 0 0.75rem;
}

.sp-info__cat a {
    color: inherit;
    text-decoration: none;
}

/* Título */
.sp-info__title {
    font-family: var(--f-serif);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    color: var(--c-negro);
    margin: 0 0 1rem;
}

/* Badge Marisol */
.sp-info__master {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-sans);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(26, 26, 26, 0.60);
    margin-bottom: 1.5rem;
}

.sp-info__master-icon {
    color: var(--c-cobre);
    flex-shrink: 0;
}

/* Precio */
.sp-info__price {
    margin-bottom: 1.5rem;
}

.sp-info__price .price,
.sp-info__price p.price {
    font-family: var(--f-sans) !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: var(--c-negro) !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.sp-info__price .price ins {
    text-decoration: none !important;
}

.sp-info__price .price del {
    font-size: 1.1rem !important;
    color: rgba(26, 26, 26, 0.35) !important;
    font-weight: 400 !important;
    margin-right: 0.5rem !important;
}

/* Descripción corta */
.sp-info__short-desc {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(26, 26, 26, 0.65);
    margin-bottom: 1.5rem;
}

/* Separador */
.sp-info__divider {
    border: none;
    border-top: 1px solid rgba(26, 26, 26, 0.10);
    margin: 0.5rem 0 1.5rem;
}

/* Atributos */
.sp-info__attrs {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.sp-info__attr-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.sp-info__attr-key {
    font-family: var(--f-sans);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, 0.40);
    min-width: 80px;
    flex-shrink: 0;
}

.sp-info__attr-val {
    font-family: var(--f-sans);
    font-size: 0.88rem;
    color: var(--c-negro);
}

/* Rating */
.sp-info__rating {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.sp-info__rating .star-rating {
    font-size: 0.82rem !important;
    color: var(--c-cobre) !important;
}

.sp-info__rating-count {
    font-family: var(--f-sans);
    font-size: 0.78rem;
    color: rgba(26, 26, 26, 0.45);
}

/* ── Carrito (sobrescribir WooCommerce) ── */
.sp-info__cart {
    margin-bottom: 2rem;
}

/* Ocultar título, precio, descripción y rating del hook nativo
   porque los mostramos manualmente arriba */
.sp-info__cart .product_title,
.sp-info__cart .price,
.sp-info__cart .woocommerce-product-rating,
.sp-info__cart .woocommerce-product-details__short-description {
    display: none !important;
}

/* Selector de cantidad */
.sp-info__cart .quantity {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: 1rem;
}

.sp-info__cart .quantity .qty {
    width: 60px !important;
    height: 52px !important;
    border: 1px solid rgba(26, 26, 26, 0.20) !important;
    border-radius: 8px !important;
    background: #fff !important;
    font-family: var(--f-sans) !important;
    font-size: 1rem !important;
    text-align: center !important;
    color: var(--c-negro) !important;
    padding: 0 !important;
    outline: none !important;
}

/* Contenedor add-to-cart */
.sp-info__cart .cart {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex-wrap: wrap;
}

/* Botón de añadir al carrito */
.sp-info__cart .single_add_to_cart_button {
    flex: 1;
    min-width: 200px;
    padding: 1rem 2rem !important;
    background-color: var(--c-negro) !important;
    color: var(--c-crema) !important;
    font-family: var(--f-sans) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease !important;
    text-align: center !important;
    line-height: 1 !important;
}

.sp-info__cart .single_add_to_cart_button:hover {
    background-color: var(--c-cobre) !important;
}

/* Trust badges */
.sp-info__trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sp-info__trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--f-sans);
    font-size: 0.78rem;
    color: rgba(26, 26, 26, 0.55);
}

.sp-info__trust-item svg {
    color: var(--c-cobre);
    flex-shrink: 0;
}


/* ═══════════════════════════════════
   DESCRIPCIÓN COMPLETA
═══════════════════════════════════ */
.sp-desc {
    background-color: #fff;
    padding-block: var(--space-section);
    border-top: 1px solid rgba(26, 26, 26, 0.07);
}

.sp-desc__inner {
    max-width: 780px;
}

.sp-desc__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--c-negro);
    margin: 0 0 2rem;
}

.sp-desc__body {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    line-height: 1.75;
    color: rgba(26, 26, 26, 0.70);
}

.sp-desc__body p {
    margin-bottom: 1rem;
}

.sp-desc__body h2,
.sp-desc__body h3 {
    font-family: var(--f-serif);
    color: var(--c-negro);
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.sp-desc__body ul,
.sp-desc__body ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.sp-desc__body li {
    margin-bottom: 0.4rem;
}


/* ═══════════════════════════════════
   PROCESO ARTESANAL
═══════════════════════════════════ */
.sp-proceso {
    background-color: var(--c-negro);
    color: var(--c-crema);
    padding-block: var(--space-section);
    border-top: 1px solid rgba(200, 121, 65, 0.3);
}

.sp-proceso__eyebrow {
    font-family: var(--f-sans);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-cobre);
    margin: 0 0 0.75rem;
}

.sp-proceso__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--c-crema);
    margin: 0 0 3rem;
}

.sp-proceso__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 3rem;
    counter-reset: none;
}

@media (min-width: 600px) {
    .sp-proceso__steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .sp-proceso__steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.sp-proceso__step {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    border: 1px solid rgba(200, 121, 65, 0.20);
    border-radius: 12px;
    transition: border-color 0.3s;
}

.sp-proceso__step:hover {
    border-color: rgba(200, 121, 65, 0.60);
}

.sp-proceso__step-num {
    font-family: var(--f-serif);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-cobre);
    opacity: 0.5;
    line-height: 1;
}

.sp-proceso__step-text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sp-proceso__step-text strong {
    font-family: var(--f-sans);
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    color: var(--c-crema);
}

.sp-proceso__step-text span {
    font-family: var(--f-sans);
    font-size: 0.82rem;
    color: rgba(249, 247, 242, 0.55);
    line-height: 1.5;
}

.sp-proceso__firma {
    font-family: var(--f-serif);
    font-style: italic;
    font-size: 0.9rem;
    color: rgba(249, 247, 242, 0.40);
    margin: 0;
    text-align: right;
}


/* ═══════════════════════════════════
   RESEÑAS
═══════════════════════════════════ */
.sp-reviews {
    background-color: #fff;
    padding-block: var(--space-section);
    border-top: 1px solid rgba(26, 26, 26, 0.07);
}

.sp-reviews__inner {
    max-width: 860px;
}

/* WooCommerce: título de reseñas */
#reviews #reviews-heading,
#reviews h2,
#review-title {
    font-family: var(--f-serif) !important;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: var(--c-negro) !important;
    margin: 0 0 1.5rem !important;
}

/* Mensaje sin reseñas */
#reviews .woocommerce-noreviews,
.woocommerce-product-rating~p {
    font-family: var(--f-sans) !important;
    font-size: 0.9rem !important;
    color: rgba(26, 26, 26, 0.45) !important;
}

/* Stars en el form */
#reviews #respond .stars a {
    color: var(--c-cobre) !important;
    font-size: 1.2rem !important;
}

/* Tabs de WooCommerce (si se muestran) */
.woocommerce-tabs .tabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid rgba(26, 26, 26, 0.10) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem !important;
}

.woocommerce-tabs .tabs li a {
    display: block !important;
    padding: 0.6rem 1.25rem !important;
    font-family: var(--f-sans) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(26, 26, 26, 0.45) !important;
    border-bottom: 2px solid transparent !important;
    text-decoration: none !important;
    transition: color 0.2s, border-color 0.2s !important;
    margin-bottom: -1px !important;
}

.woocommerce-tabs .tabs li.active a {
    color: var(--c-negro) !important;
    border-bottom-color: var(--c-cobre) !important;
}

/* Formulario de reseña */
#review_form {
    background: var(--c-crema) !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    margin-top: 2rem !important;
}

#review_form .comment-reply-title {
    font-family: var(--f-serif) !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--c-negro) !important;
    margin: 0 0 1.5rem !important;
    border: none !important;
}

#review_form .comment-form>p {
    margin-bottom: 1.25rem !important;
}

#review_form label {
    display: block !important;
    font-family: var(--f-sans) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(26, 26, 26, 0.45) !important;
    margin-bottom: 0.4rem !important;
}

#review_form input[type="text"],
#review_form input[type="email"],
#review_form textarea {
    background: #fff !important;
    border: 1px solid rgba(26, 26, 26, 0.15) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    font-family: var(--f-sans) !important;
    font-size: 0.9rem !important;
    color: var(--c-negro) !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
    outline: none !important;
    box-sizing: border-box !important;
}

#review_form input:focus,
#review_form textarea:focus {
    border-color: var(--c-cobre) !important;
}

#review_form #submit {
    display: inline-block !important;
    background: var(--c-negro) !important;
    color: var(--c-crema) !important;
    font-family: var(--f-sans) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 0.9rem 2.5rem !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.25s !important;
    width: auto !important;
}

#review_form #submit:hover {
    background: var(--c-cobre) !important;
}

/* Lista de reseñas existentes */
#reviews .commentlist {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 2rem !important;
}

#reviews .commentlist li.comment {
    background: #fff !important;
    border: 1px solid rgba(26, 26, 26, 0.07) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    margin-bottom: 1.25rem !important;
}

#reviews .commentlist .star-rating {
    color: var(--c-cobre) !important;
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
}

#reviews .commentlist .comment-text p {
    font-family: var(--f-sans) !important;
    font-size: 0.88rem !important;
    color: rgba(26, 26, 26, 0.65) !important;
    line-height: 1.6 !important;
    margin: 0.5rem 0 0 !important;
}

#reviews .commentlist cite {
    font-family: var(--f-sans) !important;
    font-size: 0.78rem !important;
    font-style: normal !important;
    font-weight: 700 !important;
    color: var(--c-negro) !important;
}


/* ═══════════════════════════════════
   RELACIONADOS
═══════════════════════════════════ */
.sp-related {
    background-color: var(--c-crema);
    padding-block: var(--space-section);
    border-top: 1px solid rgba(26, 26, 26, 0.07);
}

.sp-related__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--c-negro);
    margin: 0 0 2.5rem;
}

/* ul que contiene los .nt-card li */
.sp-related__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.sp-related__grid::before,
.sp-related__grid::after {
    display: none !important;
    content: none !important;
}

@media (min-width: 640px) {
    .sp-related__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 900px) {
    .sp-related__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Los li de los relacionados usan .nt-card */
.sp-related__grid li.nt-card {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}