/* ============================================================
   ESTANDARTE — single-product.css
   Ficha de producto. Figma 763:8529.
   ============================================================ */

.product-page { background: #fafafa; }

/* ----------------------------------------------------------
   1. Migas + layout de dos columnas
   Figma: galería 680 · resumen 680 · gap 40
   ---------------------------------------------------------- */
.prod-detail { padding-block: 33px 60px; }
.prod-detail__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 43px;
    color: #0072ce;
    font-size: var(--fs-14);
    text-transform: uppercase;
}
.prod-detail__crumb a { color: #0072ce; }
.prod-detail__crumb a:hover { color: #0e1946; }
.prod-detail__crumb span { color: #b8bfbf; }

.prod-detail__inner { display: flex; gap: 40px; align-items: flex-start; }

/* ----------------------------------------------------------
   2. Galería
   ---------------------------------------------------------- */
.prod-gallery { flex: 1 1 680px; max-width: 680px; min-width: 0; }
.prod-gallery__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 554px;
    padding: 30px;
    background: var(--color-white);
    border: 1px solid #d5d6e6;
    border-radius: 5px;
    overflow: hidden;
}
/* La señal ocupa la caja: con max-* una imagen pequeña se quedaba diminuta */
.prod-gallery__img { width: 100%; height: 100%; object-fit: contain; display: block; }

.prod-gallery__thumbs {
    display: flex;
    gap: 40px;
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
}
.prod-gallery__thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px; height: 180px;
    padding: 14px;
    background: var(--color-white);
    border: 1px solid #d5d6e6;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.prod-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prod-gallery__thumb:hover { border-color: #0072ce; }
.prod-gallery__thumb.is-active { border-color: #0072ce; box-shadow: 0 0 0 1px #0072ce inset; }

/* ----------------------------------------------------------
   3. Resumen
   ---------------------------------------------------------- */
.prod-summary { position: relative; flex: 1 1 680px; max-width: 680px; min-width: 0; padding-top: 24px; }

/* Estrella arriba a la izquierda de la columna (Figma x=746) */
.prod-summary__fav { position: absolute; top: 0; right: auto; left: -74px; }

.prod-summary__meta {
    margin: 0 0 10px;
    color: #0072ce;
    font-weight: var(--fw-medium, 500);
    font-size: var(--fs-16);
    line-height: 1.341;
    letter-spacing: 0.64px;
}
.prod-summary__title {
    margin: 0 0 10px;
    color: #172222;
    font-weight: var(--fw-medium, 500);
    font-size: 32px;
    line-height: normal;
}
.prod-summary__sku {
    margin: 0 0 10px;
    color: #525b5b;
    font-weight: var(--fw-medium, 500);
    font-size: var(--fs-12);
    line-height: 1.341;
    letter-spacing: 0.48px;
}
.prod-summary__excerpt { color: #000; font-size: var(--fs-18); line-height: 1.341; }
.prod-summary__excerpt p { margin: 0 0 0.5em; }
.prod-summary__excerpt > *:last-child { margin-bottom: 0; }

.prod-summary__price {
    margin: 17px 0 0;
    color: #172222;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-24);
    line-height: 1.341;
}
.prod-summary__price del { opacity: 0.5; font-weight: var(--fw-roman, 400); margin-right: 8px; }

/* ----------------------------------------------------------
   4. Formulario: cantidad, desplegables y botón
   ---------------------------------------------------------- */
.prod-form { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; margin-top: 14px; }

.prod-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 161px; height: 48px;
    padding: 0 12px;
    border: 1px solid #172222;
    border-radius: 4px;
}
.prod-qty__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px; height: 24px;
    padding: 0;
    background: none;
    border: none;
    color: #172222;
    cursor: pointer;
}
.prod-qty__btn svg { width: 24px; height: 24px; }
.prod-qty__btn:hover { color: #0072ce; }
.prod-qty__input {
    width: 51px;
    padding: 0;
    background: none;
    border: none;
    color: #172222;
    font-weight: var(--fw-medium, 500);
    font-size: var(--fs-20);
    letter-spacing: 0.8px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}
.prod-qty__input::-webkit-outer-spin-button,
.prod-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prod-qty__input:focus { outline: none; }

.prod-form__note { margin: 0; color: #000; font-size: var(--fs-12); line-height: 1.341; max-width: 676px; }

.prod-field { display: flex; flex-direction: column; gap: 10px; width: 440px; max-width: 100%; margin: 0; }
.prod-field__label { color: #525b5b; font-weight: var(--fw-light, 300); font-size: var(--fs-14); }

/* Desplegable propio (valor arriba + lista con precio a la derecha) */
.prod-select { position: relative; }
.prod-select__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    background: var(--color-white);
    border: 1px solid #0e1946;
    border-radius: 8px;
    color: #0e1946;
    font-size: var(--fs-18);
    line-height: normal;
    text-align: left;
    cursor: pointer;
}
.prod-select__toggle:focus-visible { outline: none; border-color: #0072ce; box-shadow: 0 0 0 1px #0072ce; }
.prod-select__value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Recargo dentro del botón cerrado, a la derecha antes de la flecha */
.prod-select__toggle-price { flex: 0 0 auto; color: #8e92a6; font-weight: var(--fw-roman); font-size: var(--fs-16); white-space: nowrap; }
.prod-select__toggle-price .woocommerce-Price-amount { font-weight: var(--fw-roman); }
.prod-select__chevron { flex: 0 0 12px; width: 12px; height: 8px; color: #0e1946; transition: transform var(--transition); }
.prod-select.is-open .prod-select__chevron { transform: scaleY(-1); }

.prod-select__list {
    list-style: none;
    margin: 6px 0 0;
    padding: 6px;
    position: absolute;
    left: 0; right: 0;
    z-index: 20;
    background: var(--color-white);
    border: 1px solid #0e1946;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(14, 25, 70, 0.12);
    max-height: 280px;
    overflow-y: auto;
}
.prod-select__list[hidden] { display: none; }
.prod-select__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-radius: 5px;
    color: #0e1946;
    font-size: var(--fs-16);
    text-align: left;
    cursor: pointer;
}
.prod-select__opt:hover { background: #f2f6fc; }
.prod-select__opt.is-selected { font-weight: var(--fw-heavy); }
.prod-select__opt-label { flex: 1 1 auto; min-width: 0; }
.prod-select__opt-price { flex: 0 0 auto; color: #8e92a6; font-weight: var(--fw-roman); white-space: nowrap; }
.prod-select__opt.is-selected .prod-select__opt-price { color: #8e92a6; font-weight: var(--fw-roman); }
.prod-select__opt-price .woocommerce-Price-amount { font-weight: inherit; }

.prod-form__submit { padding: 14px 40px; font-size: var(--fs-18); }

/* ----------------------------------------------------------
   5. Banda azul "Detalles del producto"
   Figma: 1322×356 · padding 60/80 · col izq 315 · gap 168
   ---------------------------------------------------------- */
.prod-band-detail {
    margin-top: 70px;
    padding: 60px 80px;
    background: #0072ce;
    border-radius: 5px;
}
.prod-band-detail__inner { display: flex; gap: 168px; align-items: flex-start; }

.prod-band-detail__aside {
    flex: 0 0 315px;
    max-width: 315px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 230px;
}
.prod-band-detail__title {
    margin: 0;
    color: var(--color-white);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-24);
    line-height: 1.341;
    text-transform: uppercase;
}
.prod-band-detail__btn {
    align-self: flex-start;
    padding: 14px 32px;
    background: var(--color-white);
    border-radius: 5px;
    color: #0072ce;
    font-weight: var(--fw-black);
    font-size: var(--fs-16);
}
.prod-band-detail__btn:hover { background: #eaf3fb; color: #0e1946; }

.prod-band-detail__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.prod-band-detail__item { display: flex; align-items: center; gap: 14px; }
.prod-band-detail__icon { flex: 0 0 32px; width: 32px; height: 32px; color: var(--color-white); }
.prod-band-detail__icon svg { width: 32px; height: 32px; display: block; }
.prod-band-detail__text { color: var(--color-white); font-size: var(--fs-18); line-height: 1.341; }

/* ----------------------------------------------------------
   6. Productos similares
   ---------------------------------------------------------- */
.prod-similar { background: var(--color-white); padding-block: 65px 80px; }
.prod-similar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 52px;
}
.prod-similar__title {
    margin: 0;
    color: #0072ce;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-36);
    line-height: 1;
    text-transform: uppercase;
}
.prod-similar__back { display: inline-flex; align-items: center; gap: 14px; color: #0072ce; font-size: var(--fs-18); }
.prod-similar__back svg { flex: 0 0 27px; width: 27px; height: 23px; }
.prod-similar__back:hover { color: #0e1946; }

/* Figma: flechas a 32px de la pista, que mide 1238 en un contenedor de 1400 */
.prod-similar__carousel { position: relative; display: flex; align-items: center; gap: 32px; }

/* La pista ocupa todo el ancho: si no, con pocos productos la flecha
   derecha se pegaba a la última tarjeta en vez de quedarse en el borde. */
.prod-similar__track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.prod-similar__track::-webkit-scrollbar { display: none; }
/* Tarjeta idéntica a la de la Tienda: 230 × 326, que es lo que mide en el
   Figma y también lo que acaba midiendo en la rejilla del listado. Con este
   ancho entran 4 completas y se asoma la quinta, como en el diseño. */
.prod-similar__track > li.product,
.woocommerce .prod-similar__track > li.product {
    flex: 0 0 230px;
    width: 230px;
    max-width: 230px;
    height: 326px;
    margin: 0;
    padding: 10px;
    float: none;
    scroll-snap-align: start;
}
.prod-similar__track::before,
.prod-similar__track::after { content: none; }

.prod-similar__nav {
    flex: 0 0 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px; height: 27px;
    padding: 0;
    background: none;
    border: none;
    color: #0072ce;
    cursor: pointer;
    transition: color var(--transition), opacity var(--transition);
}
.prod-similar__nav svg { width: 27px; height: 27px; display: block; }
/* Siempre en azul de marca, también al pasar el cursor o al estar al tope */
.prod-similar__nav:hover,
.prod-similar__nav[disabled] { color: #0072ce; opacity: 1; }
.prod-similar__nav[disabled] { cursor: default; }

/* ----------------------------------------------------------
   7. Responsive
   ---------------------------------------------------------- */
@media (max-width: 1280px) {
    .prod-detail__inner { gap: 32px; }
    .prod-gallery__stage { height: 460px; }
    .prod-gallery__thumbs { gap: 24px; }
    .prod-gallery__thumb { width: 160px; height: 145px; }
    .prod-band-detail { padding: 48px 56px; }
    .prod-band-detail__inner { gap: 80px; }
    /* La estrella ya no cabe fuera de la columna: se mete al borde */
    .prod-summary__fav { left: auto; right: 0; top: -6px; }
    .prod-summary__meta,
    .prod-summary__title { padding-right: 36px; }
}

/* Las dos columnas se estrechan antes de apilarse */
@media (max-width: 1100px) {
    .prod-gallery__stage { height: 400px; }
    .prod-gallery__thumb { width: 132px; height: 120px; }
    .prod-summary__title { font-size: 28px; }
    .prod-field { width: 100%; }
}

@media (max-width: 992px) {
    .prod-detail { padding-block: 24px 48px; }
    .prod-detail__crumb { margin-bottom: 24px; }
    .prod-detail__inner { flex-direction: column; gap: 32px; }
    .prod-gallery,
    .prod-summary { flex: none; max-width: none; width: 100%; }
    .prod-summary { padding-top: 0; }
    .prod-summary__fav { top: -4px; }

    /* Apilado, el formulario aprovecha el ancho completo */
    .prod-form { width: 100%; }
    .prod-field { max-width: 440px; }

    .prod-band-detail { margin-top: 40px; padding: 40px 32px; }
    .prod-band-detail__inner { flex-direction: column; gap: 32px; }
    .prod-band-detail__aside {
        flex: none;
        max-width: none;
        min-height: 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
    }
    .prod-band-detail__btn { align-self: auto; white-space: nowrap; }

    .prod-similar { padding-block: 48px 64px; }
    .prod-similar__head { margin-bottom: 32px; }
    .prod-similar__carousel { gap: 16px; }
}

@media (max-width: 768px) {
    .prod-detail { padding-block: 16px 40px; }
    .prod-detail__crumb { margin-bottom: 18px; gap: 6px; font-size: var(--fs-12); }

    .prod-gallery__stage { height: 340px; padding: 20px; }
    /* Miniaturas en carril deslizable, sin cortar la última */
    .prod-gallery__thumbs {
        gap: 12px;
        margin-top: 14px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .prod-gallery__thumbs::-webkit-scrollbar { display: none; }
    .prod-gallery__thumb { flex: 0 0 104px; width: 104px; height: 96px; padding: 8px; }

    .prod-summary__meta { font-size: var(--fs-14); }
    .prod-summary__title { font-size: var(--fs-24); }
    .prod-summary__excerpt { font-size: var(--fs-16); }
    .prod-summary__price { font-size: var(--fs-20); margin-top: 14px; }
    .prod-form { gap: 14px; }
    .prod-field { width: 100%; max-width: none; }
    .prod-field__select { font-size: var(--fs-16); padding: 11px 16px; padding-right: 42px; }
    .prod-form__submit { width: 100%; justify-content: center; }

    .prod-band-detail { margin-top: 32px; padding: 28px 20px; }
    .prod-band-detail__inner { gap: 24px; }
    /* Vuelve a apilarse: en fila el botón ahogaba el título */
    .prod-band-detail__aside { flex-direction: column; align-items: stretch; gap: 18px; }
    .prod-band-detail__title { font-size: var(--fs-20); }
    .prod-band-detail__btn { width: 100%; justify-content: center; text-align: center; white-space: normal; }
    .prod-band-detail__list { gap: 20px; }
    .prod-band-detail__item { align-items: flex-start; gap: 12px; }
    .prod-band-detail__icon { flex-basis: 26px; width: 26px; height: 26px; }
    .prod-band-detail__icon svg { width: 26px; height: 26px; }
    .prod-band-detail__text { font-size: var(--fs-16); }

    .prod-similar { padding-block: 36px 48px; }
    .prod-similar__head { margin-bottom: 24px; }
    .prod-similar__title { font-size: var(--fs-24); }
    .prod-similar__back { font-size: var(--fs-16); gap: 10px; }
    .prod-similar__back svg { flex-basis: 22px; width: 22px; height: 19px; }
    /* En móvil se arrastra con el dedo: sobran las flechas */
    .prod-similar__nav { display: none; }
    .prod-similar__carousel { gap: 0; }
    .prod-similar__track { gap: 14px; padding: 4px 0; }
    .prod-similar__track > li.product,
    .woocommerce .prod-similar__track > li.product {
        flex-basis: 180px;
        width: 180px;
        max-width: 180px;
        height: 300px;
    }
}

@media (max-width: 480px) {
    .prod-gallery__stage { height: 280px; padding: 16px; }
    .prod-gallery__thumb { flex-basis: 88px; width: 88px; height: 82px; }
    .prod-summary__title { font-size: var(--fs-20); }
    .prod-summary__fav { width: 22px; height: 22px; }
    .prod-summary__fav svg { width: 22px; height: 22px; }
    .prod-summary__meta,
    .prod-summary__title { padding-right: 30px; }

    .prod-similar__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .prod-similar__track > li.product,
    .woocommerce .prod-similar__track > li.product {
        flex-basis: 165px;
        width: 165px;
        max-width: 165px;
        height: 285px;
    }
}