/* VIVA_PRODUCT_DESKTOP_PREMIUM_V1
   Desktop premium da pagina individual de produto.
   Mantem a mesma identidade visual do mobile premium.
*/

@media (min-width: 1001px) {

    .vf-page > main.vf-width {
        width: min(calc(100% - 56px), 1580px);
    }

    .vf-product-layout.vf-desktop-premium-active {
        display: grid;
        grid-template-columns:
            minmax(0, 1.92fr)
            minmax(390px, 0.88fr);

        align-items: start;
        gap: 38px;
        padding-bottom: 72px;
    }

    /* ==========================================================
       GALERIA
       ========================================================== */

    .vf-desktop-gallery-active
    > .vf-product-main-image,

    .vf-desktop-gallery-active
    > .vf-thumbnails {
        display: none !important;
    }

    .vf-desktop-gallery-grid {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
        width: 100%;
    }

    .vf-desktop-gallery-item {
        position: relative;
        width: 100%;
        min-width: 0;
        overflow: hidden;

        aspect-ratio: 4 / 5;

        border:
            1px solid rgba(48, 56, 55, 0.08);

        border-radius: 12px;

        background: #f6f7f5;
    }

    .vf-desktop-gallery-item img,
    .vf-desktop-gallery-item video {
        display: block;
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center center;

        background: #f6f7f5;
    }

    /* ==========================================================
       COLUNA DE COMPRA
       ========================================================== */

    .vf-product-layout.vf-desktop-premium-active
    .vf-product-details {
        position: sticky;
        top: 24px;

        width: 100%;
        max-width: 500px;

        margin: 0;
        padding: 6px 0 0;
    }

    .vf-product-layout.vf-desktop-premium-active
    .vf-product-details h1 {
        max-width: 500px;

        margin:
            4px
            0
            14px;

        color: #303837;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size: 34px;
        font-weight: 400;
        line-height: 1.14;
        letter-spacing: -0.025em;
    }

    .vf-product-layout.vf-desktop-premium-active
    .vf-product-price {
        margin:
            0
            0
            28px;

        color: #303837;

        font-size: 27px;
        font-weight: 700;
        line-height: 1.1;
    }

    /* ==========================================================
       FORMULARIO PREMIUM
       ========================================================== */

    #vf-product-form.vf-desktop-options-enhanced {
        display: block;

        width: 100%;
        max-width: none;

        margin: 0;
        padding:
            25px
            0
            0;

        border: 0;
        border-top:
            1px solid rgba(48, 56, 55, 0.12);

        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #vf-product-form.vf-desktop-options-enhanced
    > label {
        display: block;

        margin:
            0
            0
            10px;

        color:
            rgba(48, 56, 55, 0.80);

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 10.5px;
        font-weight: 800;
        line-height: 15px;
        letter-spacing: 0.11em;

        text-transform: uppercase;
    }

    #vf-product-form.vf-desktop-options-enhanced
    > label:not(:first-of-type) {
        margin-top: 24px;
    }

    .vf-desktop-native-choice {
        position: absolute !important;

        width: 1px !important;
        height: 1px !important;

        padding: 0 !important;
        margin: -1px !important;

        overflow: hidden !important;

        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;

        border: 0 !important;
        opacity: 0.01 !important;
    }

    .vf-desktop-option-group {
        display: flex;
        flex-wrap: wrap;

        gap: 9px;

        width: 100%;
    }

    .vf-desktop-option-button {
        min-width: 58px;
        height: 46px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        padding: 0 16px;

        border:
            1px solid rgba(48, 56, 55, 0.18);

        border-radius: 10px;

        background:
            rgba(255, 255, 255, 0.84);

        color: #303837;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 13px;
        font-weight: 600;
        line-height: 1;

        cursor: pointer;

        transition:
            background-color 160ms ease,
            border-color 160ms ease,
            color 160ms ease,
            transform 120ms ease;
    }

    .vf-desktop-option-group--color
    .vf-desktop-option-button {
        min-width: 88px;
    }

    .vf-desktop-option-button:hover {
        border-color:
            rgba(54, 86, 80, 0.48);
    }

    .vf-desktop-option-button:active {
        transform: scale(0.97);
    }

    .vf-desktop-option-button.is-selected {
        border-color: #365650;
        background: #365650;
        color: #ffffff;
    }

    .vf-desktop-option-button:focus-visible {
        outline:
            3px solid rgba(54, 86, 80, 0.20);

        outline-offset: 2px;
    }

    .vf-desktop-option-hint {
        width: 100%;
        min-height: 44px;

        display: flex;
        align-items: center;

        padding: 0 14px;

        border:
            1px dashed rgba(48, 56, 55, 0.18);

        border-radius: 10px;

        background:
            rgba(251, 243, 240, 0.34);

        color:
            rgba(48, 56, 55, 0.58);

        font-size: 12px;
        line-height: 18px;
    }

    /* ==========================================================
       QUANTIDADE
       ========================================================== */

    .vf-desktop-quantity-stepper {
        display: grid !important;

        grid-template-columns:
            46px
            58px
            46px !important;

        grid-template-rows:
            44px !important;

        width: 150px !important;
        height: 46px !important;

        overflow: hidden;

        border:
            1px solid rgba(48, 56, 55, 0.18);

        border-radius: 10px;

        background:
            rgba(255, 255, 255, 0.84);
    }

    .vf-desktop-quantity-stepper
    > button {
        display: flex !important;
        align-items: center;
        justify-content: center;

        grid-row: 1 !important;

        width: 46px !important;
        height: 44px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;

        background: transparent !important;
        color: #303837 !important;

        font-size: 22px !important;
        font-weight: 400 !important;

        cursor: pointer;
    }

    .vf-desktop-quantity-stepper
    > button:first-child {
        grid-column: 1 !important;
    }

    .vf-desktop-quantity-stepper
    #vf-quantity {
        display: block !important;

        grid-column: 2 !important;
        grid-row: 1 !important;

        width: 58px !important;
        height: 44px !important;

        padding: 0 !important;
        margin: 0 !important;

        border: 0 !important;
        border-left:
            1px solid rgba(48, 56, 55, 0.10) !important;

        border-right:
            1px solid rgba(48, 56, 55, 0.10) !important;

        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;

        color: #303837;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 14px;
        font-weight: 700;
        text-align: center;

        appearance: textfield;
        -moz-appearance: textfield;
    }

    .vf-desktop-quantity-stepper
    #vf-quantity::-webkit-inner-spin-button,

    .vf-desktop-quantity-stepper
    #vf-quantity::-webkit-outer-spin-button {
        margin: 0;
        -webkit-appearance: none;
    }

    .vf-desktop-quantity-stepper
    > button:last-child {
        grid-column: 3 !important;
    }

    /* ==========================================================
       CTA
       ========================================================== */

    #vf-product-form.vf-desktop-options-enhanced
    > .vf-primary {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 56px !important;
        height: 56px !important;

        margin-top: 28px !important;
        padding: 0 24px !important;

        border:
            1px solid #365650 !important;

        border-radius: 10px !important;

        background: #365650 !important;
        color: #ffffff !important;

        font-family:
            Arial,
            Helvetica,
            sans-serif !important;

        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0.095em !important;

        text-align: center;
        text-transform: uppercase;

        box-shadow:
            0 8px 20px rgba(54, 86, 80, 0.16) !important;

        cursor: pointer;

        transition:
            background-color 160ms ease,
            border-color 160ms ease,
            box-shadow 160ms ease,
            transform 120ms ease !important;
    }

    #vf-product-form.vf-desktop-options-enhanced
    > .vf-primary:hover {
        border-color: #2f4b46 !important;
        background: #2f4b46 !important;

        box-shadow:
            0 10px 24px rgba(54, 86, 80, 0.20) !important;

        transform: translateY(-1px);
    }

    #vf-product-form.vf-desktop-options-enhanced
    > .vf-primary:active {
        border-color: #29433e !important;
        background: #29433e !important;

        transform:
            translateY(0)
            scale(0.99);
    }

    /* ==========================================================
       BLOCO INFERIOR
       ========================================================== */

    .vf-product-layout.vf-desktop-premium-active
    .vf-product-note {
        max-width: 500px;

        margin-top: 24px;

        padding:
            18px
            0;

        border-top:
            1px solid rgba(48, 56, 55, 0.10);

        border-bottom:
            1px solid rgba(48, 56, 55, 0.10);
    }

    .vf-product-layout.vf-desktop-premium-active
    .vf-product-description {
        max-width: 500px;

        margin-top: 26px;
    }
}

/* ========================================================================
   VIVA_PRODUCT_DESKTOP_GALLERY_V2

   Refinamento desktop:
   - remove limite antigo de 620px da coluna de fotos
   - amplia a galeria para ocupar a area disponivel
   - reduz o vazio central
   - preserva painel de compra e comportamento mobile
   ======================================================================== */

@media (min-width: 1001px) {

    .vf-product-layout.vf-desktop-premium-active {
        grid-template-columns:
            minmax(0, 2.05fr)
            minmax(420px, 0.95fr);

        gap: 36px;
    }

    /*
       Neutraliza a regra antiga:
       .vf-product-layout > div:first-child { max-width:620px; }
    */
    .vf-product-layout.vf-desktop-premium-active
    > div:first-child {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        justify-self: stretch !important;
    }

    .vf-desktop-gallery-grid {
        width: 100% !important;
        max-width: none !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .vf-desktop-gallery-item {
        width: 100%;
        max-width: none;

        aspect-ratio: 4 / 5;
    }

    .vf-product-layout.vf-desktop-premium-active
    .vf-product-details {
        width: 100%;
        max-width: 500px;

        justify-self: end;
    }
}