/* product-page.css - Painel de compra de alta conversão Modare Ultraconforto */

.modare-product-buy-box {
    margin-top: 18px;
    padding: 22px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2b2b2b;
}

/* Badges */
.modare-badge-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.modare-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.modare-badge.bestseller {
    background-color: #2b2b2b;
    color: #ffffff;
}
.modare-badge.discount {
    background-color: #008060;
    color: #ffffff;
}
.modare-badge.offer {
    background-color: #c9935b;
    color: #ffffff;
}

/* Preços */
.modare-price-container {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}
.modare-price-old {
    font-size: 15px;
    color: #888;
    text-decoration: line-through;
}
.modare-price-current {
    font-size: 26px;
    font-weight: 800;
    color: #2b2b2b;
}
.modare-installments {
    font-size: 13px;
    color: #555;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
}
.modare-installments b {
    color: #008060;
}

/* Seletor de Tamanho */
.modare-variation-container {
    margin-bottom: 18px;
}
.modare-var-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 8px;
}
.modare-var-label b {
    color: #2b2b2b;
}
.modare-size-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.modare-size-pill {
    min-width: 44px;
    height: 40px;
    padding: 0 10px;
    background: #ffffff;
    border: 1.5px solid #dcdcdc;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.modare-size-pill:hover {
    border-color: #2b2b2b;
}
.modare-size-pill.active {
    background: #2b2b2b;
    border-color: #2b2b2b;
    color: #ffffff;
}

/* Quantidade */
.modare-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.modare-qty-row label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
}
.modare-qty-control {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid #dcdcdc;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.modare-qty-control .qty-btn {
    width: 40px;
    height: 40px;
    background: #f8f9fa;
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background 0.15s ease, transform 0.1s ease;
}
.modare-qty-control .qty-btn:hover {
    background: #ebebeb;
    color: #000;
}
.modare-qty-control .qty-btn:active {
    background: #dedede;
    transform: scale(0.94);
}
.modare-qty-control input {
    width: 48px;
    height: 40px;
    text-align: center;
    border: none;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    outline: none;
    background: transparent;
    -moz-appearance: textfield;
}
.modare-qty-control input::-webkit-outer-spin-button,
.modare-qty-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Botões de Ação */
.modare-actions-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.modare-btn-buy-now {
    width: 100%;
    background: #008060;
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 128, 96, 0.22);
    transition: background-color 0.2s, transform 0.1s;
}
.modare-btn-buy-now:hover {
    background: #006e52;
}

.modare-btn-add-to-cart {
    width: 100%;
    background: #2b2b2b;
    color: #ffffff;
    border: 1px solid #2b2b2b;
    padding: 14px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
}
.modare-btn-add-to-cart:hover {
    background: #000000;
}

/* Benefícios */
.modare-trust-list {
    background: #fdfbf8;
    border: 1px solid #f3ece3;
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #555;
}
.modare-trust-list .trust-point {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* DESATIVAR ZOOM NA FOTO DO PRODUTO */
.zoomImg,
img.zoomImg,
.zoomWindow,
.zoomContainer,
.zoomLens,
.lg-zoom-icon,
.pswp__button--zoom {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

.fifu-slider,
.fifu-product-gallery,
.fifu-product-gallery li,
.fifu-product-gallery img,
.woocommerce-product-gallery,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery img,
.product-image-container,
.product-image,
.product-card img {
    cursor: default !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
    -webkit-touch-callout: none !important;
    transform: none !important;
    transition: none !important;
}

.fifu-slider img:hover,
.fifu-product-gallery img:hover,
.woocommerce-product-gallery img:hover,
.product-image:hover,
.product-card img:hover {
    transform: none !important;
    scale: none !important;
}