﻿/* Single product layout styling for Celebrare */

.single-product .site-main{
    padding-top: 100px;
}
.single-product .site-main .woocommerce-breadcrumb{
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 20px;
}
.celebrare-single-product{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.celebrare-single-product > .celebrare-product{
    width: 1200px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: start;
}
.celebrare-single-product-header{
    display: block;
    height: 0px;
}
.celebrare-product__meta{
    width: 1200px;
    max-width: 100%;
}

.celebrare-product__gallery{
    position: relative;
}

.celebrare-product .badge-oferta {
    position: absolute;
    top: 15px;
    left: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #a5212a;
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.celebrare-product .badge-oferta i { font-size: 14px; }

.celebrare-product .badge-off-percent {
    font-weight: 800;
    opacity: .95;
}

.celebrare-product__summary{
    padding: 25px;
    border:3px solid  rgba(193, 47, 58, 0.4);
    background-color: #fff;
    border-radius: 25px;
}

/* Garante contexto de posicionamento no bloco da galeria */
.celebrare-product .woocommerce-product-gallery {
    position: relative;
    width: 48%;
}
.celebrare-product  .celebrare-product__summary{
    width: 48%;
}

.celebrare-product .badge-oferta{
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(193, 47, 58, 0.9);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Ícone */
.woocommerce .celebrare-product .badge-oferta i {
    font-size: 14px;
}

/* Container das categorias */
.celebrare-product .product-categories {
    margin-bottom: 12px;
    margin-top:5px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.celebrare-product .category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: linear-gradient(90deg, #a83279, #d38312);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
}
.celebrare-product .category-badge i {
    font-size: 14px;
}

/* === Destaque do preço === */
.product_cl_price {
    display: inline-flex;
    background: #faf8f8; /* fundo claro */
    border-radius: 8px;
    padding: 8px 18px;
    margin: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.product_cl_price .price{
    margin-bottom: 0 !important;
}
/* Força a cor vinho no valor */
.product_cl_price .price,
.product_cl_price .woocommerce-Price-amount,
.product_cl_price .woocommerce-Price-amount bdi {
    color: #4b101b !important; /* vinho escuro */
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.3px;
    text-align: center;
}

/* R$ menor e mais discreto */
.product_cl_price .woocommerce-Price-currencySymbol {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.6;
    position: relative;
    top: -2px;
    margin-right: 2px;
    color: #4b101b !important; /* mesma cor, menor destaque */
}




/* Espaço do ícone */
.celebrare-product  .single_add_to_cart_button i {
    margin-right: 8px;
    font-size: 15px;
    vertical-align: middle;
}

/* ===== Só na página do produto ===== */
.single-product .woocommerce-tabs { margin-top: 28px; }

/* ===== Barra de abas centralizada, SEM bordas/pílulas ===== */
.single-product .woocommerce-tabs ul.tabs,
.single-product .woocommerce-tabs .wc-tabs,
.single-product .woocommerce-tabs .nav-tabs {
    display: flex;
    justify-content: center;
    gap: 42px;
    margin: 0 0 22px;
    padding: 0 0 14px;             /* espaço para a linha de base (em baixo) */
    border: 0 !important;
    border-bottom: 1px solid #af7373 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative;
}

/* WooCommerce coloca uma linha "em cima" via :before — esconda */
.single-product .woocommerce-tabs ul.tabs:before {
    display: none !important;
}

/* Linha fina DEBAIXO dos links (base line) */
.single-product .woocommerce-tabs ul.tabs::after,
.single-product .woocommerce-tabs .wc-tabs::after,
.single-product .woocommerce-tabs .nav-tabs::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: #e1e1e1;          /* ajuste a cor se quiser */
}


/* Remove molduras/pílulas dos itens/links */
.single-product .woocommerce-tabs ul.tabs li,
.single-product .woocommerce-tabs .wc-tabs li,
.single-product .woocommerce-tabs .nav-tabs .nav-item {
    margin: 0; padding: 0;
    border: 0 !important;
    background: none !important;
}

.single-product .woocommerce-tabs ul.tabs li a,
.single-product .woocommerce-tabs .wc-tabs li a,
.single-product .woocommerce-tabs .nav-tabs .nav-link {
    display: inline-block;
    padding: 8px 0;
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #9aa0a6;               /* cor inativa */
    font-weight: 600;
    position: relative;
}

/* Estado ativo: texto escuro + sublinha grossa SOBRE a linha de base */
.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs .wc-tabs li.active a,
.single-product .woocommerce-tabs .nav-tabs .nav-link.active,
.single-product .woocommerce-tabs .nav-tabs .nav-link[aria-selected="true"] {
    color: #151515;
}

.single-product .woocommerce-tabs ul.tabs li.active a::after,
.single-product .woocommerce-tabs .wc-tabs li.active a::after,
.single-product .woocommerce-tabs .nav-tabs .nav-link.active::after,
.single-product .woocommerce-tabs .nav-tabs .nav-link[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -1px;                  /* fica por cima da base line */
    height: 2px;
    background: #832e2e;           /* cor da sublinha da aba ativa */
}

/* Painéis sem borda/fundo */
.single-product .woocommerce-tabs .woocommerce-Tabs-panel {
    border: 0; background: transparent; padding: 0;
}

.single-product .related.products{
    margin-top: 40px;
}

.gallery-inner {
    width: 100%;
    max-width: 600px; /* ajuste conforme o layout desejado */
    margin: 0 auto;
    position: relative;
}

/* Galeria principal */
.woocommerce div.product div.images {
    width: 100%;
    max-width: 600px;       /* ajuste conforme o layout */
    margin: 0 auto 20px;
    background: #fff;
}

/* Mantém proporção do viewport */
.woocommerce div.product div.images .flex-viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    height: auto !important;
    transition: height 0.2s ease;
}


/* Cria um wrapper interno flexível para centralização */
.woocommerce div.product div.images .woocommerce-product-gallery__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Imagem centralizada e proporcional */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Miniaturas em faixa horizontal */
.woocommerce div.product div.images .flex-control-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}
.woocommerce div.product div.images .flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
}
.woocommerce div.product div.images .flex-control-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease, transform .2s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
    border: 2px solid #53111c; /* cor do tema */
}

@media (max-width: 992px) {
    .celebrare-single-product > .celebrare-product{
        width: 1200px;
        max-width: 100%;
        display: flex;
        justify-content:center;
        flex-direction: column;
        align-items: start;
    }
    .celebrare-single-product > .celebrare-product > div{
        width: 700px !important;
        max-width: 100%;
    }
}
