/*
 * GUILDA NERDS — PRODUTO V8 VISUAL
 * FRONT-END apenas.
 * Complementa produto.css atual sem alterar regras comerciais.
 */

:root {
    --gn-product-purple: var(--color-primary, #672bbf);
    --gn-product-purple-dark: var(--color-primary-dark, #24165f);
    --gn-product-purple-soft: #f6f1ff;
    --gn-product-green: #168451;
    --gn-product-green-dark: #12663f;
    --gn-product-green-soft: #e3f5ea;
    --gn-product-gold-dark: #704700;
    --gn-product-gold-soft: #fff1c8;
    --gn-product-text: #1d1824;
    --gn-product-muted: #706979;
    --gn-product-border: #e6e0eb;
}

/* Breadcrumb: Catálogo e categoria são links; produto atual é texto. */
.product-breadcrumb {
    margin-bottom: 18px !important;
}
.product-breadcrumb a {
    color: var(--gn-product-purple) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}
.product-breadcrumb a:hover,
.product-breadcrumb a:focus-visible {
    color: var(--gn-product-purple-dark) !important;
    text-decoration: underline !important;
}

/* Desktop: galeria maior e compra compacta, aproximadamente 55/45. */
.product-detail {
    grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr) !important;
    gap: clamp(34px, 4.5vw, 64px) !important;
    align-items: start !important;
    margin-bottom: 32px !important;
}
.product-detail-gallery {
    min-width: 0 !important;
}
.product-detail-main-image,
.product-detail-no-image {
    aspect-ratio: 1 / 1 !important;
    padding: clamp(18px, 2.5vw, 28px) !important;
    border: 1px solid var(--gn-product-border) !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #fff 0%, #faf9fc 100%) !important;
    box-shadow: 0 7px 22px rgba(42, 27, 70, .05) !important;
}
.product-detail-main-image {
    touch-action: pan-y !important;
    user-select: none !important;
}
.product-detail-main-image img {
    width: 96% !important;
    height: 96% !important;
    object-fit: contain !important;
    transform: none !important;
    transition: none !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
}
.product-detail-main-image:hover img {
    transform: none !important;
}

/* Desktop thumbnails: vertical rail; mobile returns horizontal below image. */
@media (min-width: 821px) {
    .product-detail-gallery {
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) !important;
        grid-template-areas: "thumbs main" !important;
        gap: 12px !important;
        align-items: start !important;
    }
    .product-detail-main-image,
    .product-detail-no-image {
        grid-area: main !important;
    }
    .product-detail-thumbnails {
        grid-area: thumbs !important;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 !important;
        max-height: min(560px, 66vw) !important;
        padding: 1px 4px 1px 1px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}
.product-detail-thumbnail {
    width: 58px !important;
    height: 58px !important;
    flex: 0 0 58px !important;
    padding: 3px !important;
    border: 1px solid #e3ddea !important;
    border-radius: 9px !important;
    background: #fff !important;
    opacity: .9 !important;
    transform: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease !important;
}
.product-detail-thumbnail:hover {
    transform: none !important;
    border-color: #bba5dd !important;
    opacity: 1 !important;
}
.product-detail-thumbnail.is-selected {
    border: 2px solid var(--gn-product-purple) !important;
    box-shadow: 0 0 0 2px rgba(103, 43, 191, .08) !important;
    opacity: 1 !important;
}

/* Product hierarchy. */
.product-detail-info {
    padding-top: 3px !important;
}
.product-detail-info .product-category {
    margin: 0 0 7px !important;
}
.product-detail-info .product-category a {
    color: var(--gn-product-purple) !important;
    font-size: .74rem !important;
    font-weight: 950 !important;
    letter-spacing: .08em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}
.product-detail-info .product-category a:hover,
.product-detail-info .product-category a:focus-visible {
    color: var(--gn-product-purple-dark) !important;
    text-decoration: underline !important;
}
.product-detail-info > h1 {
    margin-bottom: 10px !important;
    color: var(--gn-product-text) !important;
    font-size: clamp(2rem, 3.4vw, 2.85rem) !important;
    font-weight: 950 !important;
    line-height: 1.04 !important;
    letter-spacing: -.035em !important;
}
.product-detail-short-description {
    margin-bottom: 12px !important;
    color: var(--gn-product-muted) !important;
}

/* Same color language approved in catalog: gold / lilac / green. */
.product-badges {
    gap: 6px !important;
    margin-bottom: 12px !important;
}
.product-badges .badge {
    border: 1px solid #edc96f !important;
    border-radius: 999px !important;
    color: var(--gn-product-gold-dark) !important;
    background: var(--gn-product-gold-soft) !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
}
.product-badges .badge + .badge {
    border-color: #d8c4f5 !important;
    color: var(--gn-product-purple-dark) !important;
    background: #efe7ff !important;
}

/* Purchase block: compact, strong, no unnecessary white space. */
.product-purchase-inline {
    margin-top: 10px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e9e4ee !important;
}
.product-purchase-heading {
    margin-bottom: 9px !important;
}
.product-purchase-kicker {
    color: var(--gn-product-purple) !important;
    font-size: .66rem !important;
    font-weight: 950 !important;
}
.product-purchase-heading h2 {
    font-size: 1.28rem !important;
    font-weight: 950 !important;
}
.product-detail-sku {
    padding: 14px !important;
    border: 1px solid #ded7e8 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(33, 20, 86, .045) !important;
}
.product-detail-sku.is-selected {
    border-color: var(--gn-product-purple) !important;
    box-shadow: 0 0 0 1px var(--gn-product-purple), 0 8px 20px rgba(71,35,142,.06) !important;
}
.product-detail-sku-header {
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
}
.product-detail-sku-header h3 {
    color: var(--gn-product-purple-dark) !important;
    font-size: 1rem !important;
    font-weight: 950 !important;
}
.product-detail-sku-header p {
    color: var(--gn-product-muted) !important;
    font-size: .66rem !important;
}
.product-detail-price-block.has-pix-price {
    display: grid !important;
    grid-template-columns: minmax(125px, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    text-align: right !important;
}
.product-detail-pix-label {
    color: #514858 !important;
    font-size: .66rem !important;
    font-weight: 800 !important;
}
.product-detail-pix-label small {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 5px !important;
    padding: 4px 7px !important;
    border: 1px solid #bfe5cf !important;
    border-radius: 999px !important;
    color: var(--gn-product-green-dark) !important;
    background: var(--gn-product-green-soft) !important;
    font-size: .61rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
}
.product-detail-price {
    color: var(--gn-product-purple-dark) !important;
    font-size: clamp(1.55rem, 2.4vw, 1.95rem) !important;
    font-weight: 950 !important;
}
.product-detail-boleto-price {
    color: var(--gn-product-muted) !important;
    font-size: .72rem !important;
    white-space: nowrap !important;
}
.product-detail-boleto-price strong {
    color: var(--gn-product-text) !important;
    font-size: .84rem !important;
}

/* Keep quantity and CTA in the same row, including mobile. */
.product-detail-add-form {
    display: grid !important;
    grid-template-columns: 126px minmax(0, 1fr) !important;
    gap: 8px !important;
    max-width: none !important;
    margin: 9px 0 4px !important;
}
.product-quantity-stepper,
.product-detail-add-form .button {
    min-height: 44px !important;
}
.product-detail-add-form .button {
    border-radius: 10px !important;
    color: #fff !important;
    background: var(--gn-product-purple-dark) !important;
    font-size: .8rem !important;
    font-weight: 950 !important;
    transform: none !important;
}
.product-detail-add-form .button:hover {
    color: #fff !important;
    background: var(--gn-product-purple) !important;
    transform: none !important;
}

/* Description is lighter and more compact. */
.product-description-bottom {
    margin-top: 18px !important;
    margin-bottom: 52px !important;
    padding: clamp(24px, 3vw, 36px) !important;
    border: 1px solid var(--gn-product-border) !important;
    border-radius: 17px !important;
    box-shadow: 0 6px 20px rgba(33, 20, 86, .03) !important;
}
.product-description-bottom-header {
    margin-bottom: 16px !important;
    padding-bottom: 11px !important;
}
.product-description-bottom-header span {
    color: var(--gn-product-purple) !important;
    font-weight: 950 !important;
}
.product-description-content {
    max-width: 880px !important;
    color: #676170 !important;
    line-height: 1.72 !important;
}

/* Mobile: preserve the approved header and current product structure, only polish it. */
@media (max-width: 820px) {
    .product-breadcrumb {
        margin-bottom: 12px !important;
    }
    .product-detail {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }
    .product-detail-gallery {
        display: block !important;
        position: static !important;
    }
    .product-detail-main-image,
    .product-detail-no-image {
        aspect-ratio: 1 / .88 !important;
        padding: 10px !important;
        border-radius: 15px !important;
    }
    .product-detail-thumbnails {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
        margin-top: 9px !important;
        max-height: none !important;
        padding: 1px 1px 3px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
    }
    .product-detail-thumbnail {
        width: 54px !important;
        height: 54px !important;
        flex-basis: 54px !important;
    }
    .product-detail-info > h1 {
        margin-bottom: 8px !important;
        font-size: clamp(1.7rem, 7.2vw, 2.05rem) !important;
    }
    .product-badges {
        margin-bottom: 10px !important;
    }
    .product-purchase-inline {
        margin-top: 8px !important;
        padding-top: 12px !important;
    }
    .product-detail-sku {
        padding: 12px !important;
    }
    .product-detail-sku-header {
        display: grid !important;
        grid-template-columns: minmax(0, .9fr) minmax(145px, 1.1fr) !important;
        gap: 8px !important;
        align-items: center !important;
    }
    .product-detail-price-block,
    .product-detail-price-block.has-pix-price {
        margin-top: 0 !important;
        text-align: right !important;
    }
    .product-detail-price-block.has-pix-price {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
    .product-detail-boleto-price {
        padding-top: 5px !important;
        border-top: 1px solid #eee9f2 !important;
    }
    .product-detail-add-form {
        grid-template-columns: 126px minmax(0, 1fr) !important;
        gap: 7px !important;
        margin-top: 8px !important;
    }
    .product-description-bottom {
        margin-top: 8px !important;
        padding: 18px !important;
        border-radius: 15px !important;
    }
}

@media (max-width: 380px) {
    .product-detail-sku-header {
        grid-template-columns: minmax(0, .85fr) minmax(135px, 1.15fr) !important;
    }
    .product-detail-add-form {
        grid-template-columns: 112px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
    .product-detail-add-form .button {
        padding-inline: 8px !important;
        font-size: .74rem !important;
    }
}