/* .images (float:left) e .summary (float:right, do WooCommerce) sem
   clearfix colapsam a altura de .product pra 0 — o footer, que vem depois
   no HTML, sobe e fica visualmente por cima da galeria/abas, roubando os
   cliques do mouse mesmo sem aparecer nada errado no layout em si. */
.single-product div.product::after {
    content: "";
    display: table;
    clear: both;
}

.single-product div.product div.images {
    display: flex;
    flex-direction: row-reverse; /* imagem grande à direita */
    gap: 10px;
}

.single-product .flex-control-thumbs {
    width: 234px; /* +30%: thumbs maiores pra ler as posicoes do bone */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.single-product .flex-control-thumbs li {
    width: 100% !important;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
    border: 0 !important;
    width: 100% !important;
}

.woocommerce div.product form.cart {
    margin-bottom:  0 !important;
}

.woocommerce div.product form.cart .reset_variations,
.woocommerce-variation-availability {
    display: none !important;
}


/* Os botoes que ficavam a direita do titulo desceram pro fim do buy block
   (dwonder_render_product_ctas()), entao aqui sobrou so o titulo + SKU. */
.title__product-single {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.title__product-single-heading {
    display: flex;
    flex-direction: column;
}

.woocommerce div.product .product_title {
    margin-bottom: 0;
    font-size: 24px;
    text-transform: uppercase;
    color: #190f5d;
}

.product-sku-inline {
    margin: 4px 0 0;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.02em;
}

/* O azul mais quente do "Request a Quote" (ex-"Budget") foi escolhido antes
   pra distinguir esse botao do "Customize"; o botao mudou de lugar, a cor
   continua a mesma. Layout dos dois fica em .pdp-ctas, abaixo. */
.pdp-ctas .budget {
    background: #3D5AC4;
}

.pdp-ctas .budget:hover {
    background: #2C4499;
}

.woocommerce div.product form.cart .variations label {
    text-transform: uppercase;
    border-bottom: 1px #dedede solid;
    padding-bottom: 5px;
    margin-bottom: 5px;
    width: 100%;
    font-size: 15px;
}

.woocommerce div.product form.cart .variations span {
    display: none;
}

.woocommerce div.product form.cart {
    padding: 20px;
    border-radius: 5px;
    border: 1px #dedede solid;
    margin-bottom: 30px !important;
}

.product-full-description {
    border: 1px #dedede solid;
    padding: 0;
    background: #fff;
    color: #000;
    border-radius: 4px;
    font-size: 14px;
    overflow: hidden;
}

.product-full-description p {
    margin-bottom: 15px;
    line-height: 2;
}

/* Specifications lista muitas linhas curtas ("Style: ...", "Profile: ...").
   Com margin-bottom 15px + line-height 2 a caixa ficava com quase o dobro da
   altura necessaria e o cliente pediu pra compactar. Vale so nessa aba: a de
   Customization e' texto corrido e mantem o respiro. Coluna e posicao ficam
   como estao. */
.pfd-panel[data-pfd-tab="specifications"] {
    font-size: 13px;
}

.pfd-panel[data-pfd-tab="specifications"] p {
    margin-bottom: 0;
    line-height: 1.7;
}

.product-full-description p strong {
    color: #190f5d;
}

.product-full-description p:last-child {
    margin-bottom: 0;
}

/* Abas — nav lateral a lateral, Overview ativa por padrão */
.pfd-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px #dedede solid;
    background: #fafafa;
}

.pfd-tab-btn {
    appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 16px 20px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #8a8a99;
    border-bottom: 3px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.pfd-tab-btn:hover {
    color: var(--azul);
}

.pfd-tab-btn.is-active {
    color: var(--azul);
    border-bottom-color: var(--azul);
}

.pfd-tabs-panels {
    padding: 20px;
}

.pfd-panel {
    display: none;
}

.pfd-panel.is-active {
    display: block;
}

.pfd-list {
    margin: 0 0 15px;
    padding-left: 20px;
}

.pfd-list li {
    margin-bottom: 6px;
    line-height: 1.6;
}

/* Copia de "Ideal For" dentro da aba Overview — só existe visualmente no
   mobile (ver breakpoint abaixo). No desktop cabem todas as abas lado a
   lado, então "Ideal For" continua como aba própria e essa copia fica
   escondida pra não duplicar o texto. */
.pfd-mobile-ideal-for {
    display: none;
}

.pfd-mobile-divider {
    border: 0;
    border-top: 1px #dedede solid;
    margin: 15px 0;
}

.pfd-mobile-ideal-for h4 {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--azul);
    font-size: 14px;
    margin-bottom: 10px;
}

/* Swatches de variação — a tabela nativa do WooCommerce (selects) continua
   no DOM e funcionando (é o que o JS usa pra achar a variação certa), só
   fica escondida visualmente; os swatches são a única coisa que aparece. */
.woocommerce div.product form.cart .dwonder-variations-table-fallback {
    display: none;
}

.dwonder-variation-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.dwonder-variation-swatches .dwonder-swatch {
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid #dedede;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease-in-out;
}

.dwonder-variation-swatches .dwonder-swatch:hover {
    border-color: #9aa3c9;
}

.dwonder-variation-swatches .dwonder-swatch.is-selected {
    border-color: var(--azul, #190f5d);
}

.dwonder-variation-swatches .dwonder-swatch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    /* Banner do título */
    section.title__page {
        padding: 30px 20px !important;
    }

    section.title__page h1 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Breadcrumb com padding */
    .woocommerce .woocommerce-breadcrumb {
        padding: 0 15px !important;
    }

    /* Layout do produto sem overflow */
    .woocommerce div.product,
    .woocommerce div.product .entry-summary,
    .woocommerce div.product div.images {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Título e botões centralizados com espaço nas bordas */
    .title__product-single {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 15px !important;
    }
/* 
    .woocommerce div.product .product_title {
        text-align: center !important;
    } */

    /* Buy block no mobile: preco e quantidade empilhados em vez de lado a
       lado, e o mesmo respiro lateral que a caixa de descricao ja usa. */
    .pdp-buy-top,
    .pdp-color,
    .pdp-ctas,
    .woocommerce div.product form.cart.variations_form {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pdp-buy-top {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* Galeria empilhada */
    .single-product div.product div.images {
        flex-direction: column !important;
        padding: 0 15px !important;
    }

    .single-product .flex-control-thumbs {
        width: 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    .single-product .flex-control-thumbs li {
        width: 78px !important; /* +30%, mesmo aumento do desktop */
    }

    /* Descrição com espaço nas bordas. So as laterais: o atalho
       `margin: 0 15px !important` zerava tambem a margem de cima, e a caixa
       encostava no botao "Request a Quote". A distancia entre os dois e' a
       margin-top de 28px da regra da PDP premium, a mesma do desktop. */
    .product-full-description {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }

    /* Nav de abas com scroll horizontal em vez de quebrar linha */
    .pfd-tabs-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pfd-tab-btn {
        padding: 14px 16px;
        font-size: 12px;
    }

    /* "Ideal For" vira parte do Overview no mobile em vez de aba própria —
       ninguém ia rolar a nav de abas até achar ela. */
    .pfd-mobile-ideal-for {
        display: block;
    }

    .pfd-tab-btn[data-pfd-tab="ideal-for"],
    .pfd-panel[data-pfd-tab="ideal-for"] {
        display: none;
    }
}

/**
 * =========================
 * BUY BLOCK (price / stock / quantity / color / CTAs)
 * =========================
 * Three separate pieces in the summary column, in this DOM order:
 *
 *   .pdp-buy-top          price + stock + quantity   (priority 10)
 *   form.cart.variations_form  color swatches        (priority 30, native)
 *   .pdp-ctas             Customize + Request a Quote (priority 31)
 *
 * The middle one is WooCommerce's own variation form with
 * woo-variation-swatches on top of it, untouched — these rules only lay it
 * out. See dwonder_render_product_buy_top() in functions.php for why the
 * form isn't rendered from inside a wrapper of ours.
 */

/* Price on the left, stock + quantity + minimum on the right. */
.pdp-buy-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px 30px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px #ededed solid;
}

.pdp-price-wrap {
    display: flex;
    flex-direction: column;
}

.pdp-price-wrap .price {
    margin-bottom: 0 !important;
}

.pdp-price-unit {
    margin-top: 2px;
    font-size: 12px;
    color: #8a8a99;
}

.pdp-order {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.pdp-order .stock {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pdp-order .stock.in-stock {
    color: #1e8e3e;
}

.pdp-order .stock.out-of-stock {
    color: #c0392b;
}

.pdp-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pdp-qty__label {
    font-size: 14px;
    color: #4a4a57;
}

/* .quantity / input.qty are WooCommerce's own classes — styled, not
   rebuilt. The 24-unit min and step live on the input itself, set through
   the woocommerce_quantity_input_args filter. */
.pdp-qty .quantity {
    margin: 0 !important;
    float: none !important;
}

/* woocommerce.css esconde `.entry-summary .quantity .qty` e e' carregado
   DEPOIS deste arquivo, entao este seletor precisa ganhar no peso (0,5,2
   contra 0,4,1) em vez de depender da ordem ou de !important. */
.woocommerce div.product .entry-summary .pdp-qty .quantity input.qty {
    display: block;
    width: 96px;
    padding: 9px 10px;
    border: 1px #d5d5dd solid;
    border-radius: 6px;
    font-size: 15px;
    text-align: center;
}

.pdp-minorder {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--azul);
}

/* Color line for a simple product, written by dwonder_render_product_buy_top()
   from the product's Color attribute. A variable product doesn't use this —
   its color name comes from the variation form below and updates as the
   customer clicks. */
.pdp-color {
    margin: 0 0 12px;
    font-size: 15px;
    color: #4a4a57;
}

.pdp-color strong {
    color: #190f5d;
}

/* O formulario e' so o seletor de cores (o botao de add-to-cart foi
   removido no PHP), entao a moldura da regra generica form.cart nao faz
   sentido aqui — o mockup mostra os swatches soltos na coluna.
   A tabela de fallback do plugin continua escondida pela regra que ja existe
   acima: ela so existe pros <select> nativos alimentarem o WooCommerce. */
.woocommerce div.product form.cart.variations_form {
    padding: 0 !important;
    margin-bottom: 0 !important;
    border: 0 !important;
}

/* Both CTAs full width, stacked, below the color options. */
.pdp-ctas {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.pdp-ctas .cta__primary {
    width: 100%;
}


/* ==========================================================================
   PDP PREMIUM (2026-09-29) — página de produto no padrão do mockup aprovado
   ==========================================================================
   Sobrescreve o que está acima sem apagar nada (dá pra comparar/reverter por
   seção). Todo seletor começa em `body.woocommerce.single-product div.product`
   porque woocommerce.css é carregado DEPOIS deste arquivo — ganhar por
   especificidade evita !important e evita depender da ordem do enqueue.

   Grade (desktop):
     [ galeria        ] [ resumo  ]
     [ (abas dentro do resumo, abaixo dos CTAs) ]
     [ You May Also Like  (largura toda) ]
   ========================================================================== */

body.woocommerce.single-product {
    --pdp-navy: var(--azul, #190F5D);
    --pdp-navy-dark: var(--azul-escuro, #09013d);
    --pdp-sky: #A9CDFB;
    --pdp-sky-hover: #93BFF8;
    --pdp-line: #E4E7EE;
    --pdp-panel: #F3F4F7;
    --pdp-muted: #6B7185;
    --pdp-radius: 10px;
}

/* ---------- Grade ---------- */
body.woocommerce.single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 8px;
    align-items: start;
    margin-bottom: 56px;
}

/* o clearfix do topo do arquivo viraria um item da grade */
body.woocommerce.single-product div.product::after {
    content: none;
}

body.woocommerce.single-product div.product div.images,
body.woocommerce.single-product div.product div.summary {
    float: none;
    width: auto;
    margin: 0;
}

body.woocommerce.single-product div.product div.images { grid-column: 1; grid-row: 1; }
body.woocommerce.single-product div.product div.summary { grid-column: 2; grid-row: 1; }
body.woocommerce.single-product div.product .pdp-related { grid-column: 1 / -1; grid-row: 2; }

/* ---------- Breadcrumb ---------- */
body.woocommerce.single-product .woocommerce-breadcrumb {
    margin: 22px 0 22px;
    font-size: 13px;
    color: var(--pdp-muted);
}

body.woocommerce.single-product .woocommerce-breadcrumb a {
    color: var(--pdp-muted);
}

body.woocommerce.single-product .woocommerce-breadcrumb a:hover {
    color: var(--pdp-navy);
}

/* ---------- Galeria ---------- */
body.woocommerce.single-product div.product div.images {
    position: relative;
    gap: 14px;
}

body.woocommerce.single-product div.product div.images .flex-viewport,
body.woocommerce.single-product div.product div.images > .woocommerce-product-gallery__wrapper {
    flex: 1 1 auto;
    min-width: 0;
    background: none; /* sem painel cinza: a foto ocupa a área toda */
    border-radius: var(--pdp-radius);
    overflow: hidden;
}

body.woocommerce.single-product div.product div.images .woocommerce-product-gallery__image img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
}

body.woocommerce.single-product div.product div.images .flex-control-thumbs {
    /* +30% sobre os 86px do desenho original, a pedido do cliente: as fotos
       mostram ângulos diferentes do boné (frente, lado, trás) e em 86px não
       dava pra distinguir qual era qual. A faixa continua com a altura do
       painel da foto principal, então sobra rolagem quando há muitas. */
    flex: 0 0 112px;
    width: 112px;
    margin: 0;
    padding: 0;
    gap: 10px;
    padding: 3px; /* folga pro contorno do thumb ativo não ser cortado pelo overflow */
    max-height: 560px;
    overflow-y: auto;
    scrollbar-width: none;
}

body.woocommerce.single-product div.product div.images .flex-control-thumbs::-webkit-scrollbar {
    display: none;
}

body.woocommerce.single-product div.product div.images .flex-control-thumbs li {
    float: none;
    margin: 0;
}

body.woocommerce.single-product div.product div.images .flex-control-thumbs li img {
    opacity: 1;
    border: 1px solid var(--pdp-line) !important; /* vence o !important do topo do arquivo */
    border-radius: 6px;
    background: var(--pdp-panel);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.woocommerce.single-product div.product div.images .flex-control-thumbs li img:hover {
    border-color: #AEB6CC !important;
}

body.woocommerce.single-product div.product div.images .flex-control-thumbs li img.flex-active {
    border-color: var(--pdp-navy) !important;
    box-shadow: 0 0 0 1px var(--pdp-navy);
}

/* setas: o flexslider põe a <ul> como filha da galeria, fora do viewport */
body.woocommerce.single-product div.product div.images .flex-direction-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 126px; /* 112px dos thumbs + 14px de gap — acompanha a largura da faixa */
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

body.woocommerce.single-product div.product div.images .flex-direction-nav li {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

body.woocommerce.single-product div.product div.images .flex-direction-nav .flex-nav-prev { left: 14px; }
body.woocommerce.single-product div.product div.images .flex-direction-nav .flex-nav-next { right: 14px; }

body.woocommerce.single-product div.product div.images .flex-direction-nav a {
    pointer-events: auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--pdp-navy);
    box-shadow: 0 2px 10px rgba(16, 24, 64, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}

body.woocommerce.single-product div.product div.images .flex-direction-nav a:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(16, 24, 64, .18);
}

body.woocommerce.single-product div.product div.images .flex-direction-nav a.flex-disabled {
    opacity: .35;
    pointer-events: none;
}

body.woocommerce.single-product div.product div.images .woocommerce-product-gallery__trigger {
    top: 14px;
    right: 14px;
    left: auto;
}

/* ---------- Título + SKU ---------- */
body.woocommerce.single-product div.product .title__product-single {
    margin-bottom: 14px;
}

body.woocommerce.single-product div.product .product_title {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .product-sku-inline {
    margin-top: 8px;
    font-size: 13px;
    color: var(--pdp-muted);
}

/* ---------- Preço + mínimo ---------- */
body.woocommerce.single-product div.product .pdp-buy-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px 24px;
    padding: 0;
    margin: 0 0 14px;
    border: 0;
}

body.woocommerce.single-product div.product .pdp-price-wrap .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 36px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pdp-price-wrap .price ins {
    /* woocommerce.css da ao <ins> margin-top 10px e margin-bottom 30px (de
       quando o preco promocional ficava sozinho numa linha). Aqui ele divide
       a linha com o <del>, entao essa margem so empurrava o "Price per unit"
       30px pra baixo — e so quando havia promocao, porque sem promocao o
       WooCommerce nem gera <ins>. */
    margin: 0;
    text-decoration: none;
    font-weight: 800;
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pdp-price-wrap .price del {
    order: 2;
    font-size: 18px;
    font-weight: 500;
    color: #9AA0B2;
    opacity: 1;
}

body.woocommerce.single-product div.product .pdp-price-unit {
    margin-top: 4px;
    font-size: 13px;
    color: var(--pdp-muted);
}

body.woocommerce.single-product div.product .pdp-order {
    margin-top: 0;
    align-items: flex-start;
}

body.woocommerce.single-product div.product .pdp-minorder {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pdp-info {
    position: relative;
    display: inline-grid;
    place-items: center;
    color: var(--pdp-navy);
    cursor: help;
    border-radius: 50%;
}

body.woocommerce.single-product div.product .pdp-info:focus-visible {
    outline: 2px solid var(--pdp-navy);
    outline-offset: 2px;
}

body.woocommerce.single-product div.product .pdp-info::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 4px);
    width: max-content;
    max-width: 240px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--pdp-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 5;
}

body.woocommerce.single-product div.product .pdp-info:hover::after,
body.woocommerce.single-product div.product .pdp-info:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ---------- Cor + swatches ---------- */
body.woocommerce.single-product div.product .pdp-color {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pdp-color strong {
    color: inherit;
}

body.woocommerce.single-product div.product .dwonder-variation-swatches {
    gap: 8px;
    margin-bottom: 22px;
}

body.woocommerce.single-product div.product .dwonder-variation-swatches .dwonder-swatch,
body.woocommerce.single-product div.product .dwonder-swatch-more {
    width: 54px;
    height: 54px;
    border: 1px solid var(--pdp-line);
    border-radius: 8px;
    background: #fff;
}

body.woocommerce.single-product div.product .dwonder-variation-swatches .dwonder-swatch img {
    object-fit: contain;
    padding: 3px;
}

body.woocommerce.single-product div.product .dwonder-variation-swatches .dwonder-swatch.is-selected {
    border-color: var(--pdp-navy);
    box-shadow: 0 0 0 1px var(--pdp-navy);
}

body.woocommerce.single-product div.product .dwonder-variation-swatches.is-collapsed .dwonder-swatch.is-extra {
    display: none;
}

body.woocommerce.single-product div.product .dwonder-swatch-more {
    appearance: none;
    padding: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.25;
    color: var(--pdp-muted);
    transition: border-color .15s ease, color .15s ease;
}

body.woocommerce.single-product div.product .dwonder-swatch-more span {
    display: block;
    font-size: 14px;
}

body.woocommerce.single-product div.product .dwonder-swatch-more:hover {
    border-color: #9AA3C9;
    color: var(--pdp-navy);
}

/* ---------- CTAs ---------- */
body.woocommerce.single-product div.product .pdp-ctas {
    gap: 12px;
    margin-top: 0;
}

body.woocommerce.single-product div.product .pdp-cta {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: var(--pdp-radius);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

body.woocommerce.single-product div.product .pdp-cta > .pdp-icon:first-child { grid-column: 2; }
body.woocommerce.single-product div.product .pdp-cta__label { grid-column: 3; }
body.woocommerce.single-product div.product .pdp-cta > .pdp-icon--chevron { grid-column: 4; justify-self: end; }

body.woocommerce.single-product div.product .pdp-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 24, 64, .16);
}

body.woocommerce.single-product div.product .pdp-cta:focus-visible {
    outline: 3px solid var(--pdp-sky);
    outline-offset: 2px;
}

body.woocommerce.single-product div.product .pdp-ctas .customize {
    background: var(--pdp-navy);
    color: #fff;
}

body.woocommerce.single-product div.product .pdp-ctas .customize:hover {
    background: var(--pdp-navy-dark);
}

body.woocommerce.single-product div.product .pdp-ctas .budget {
    background: var(--pdp-sky);
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pdp-ctas .budget:hover {
    background: var(--pdp-sky-hover);
}

/* ---------- Abas (Specifications / Customization) ---------- */
/* Caixa com borda na coluna do resumo (mockup CORK – BLUE); a base fica no
   topo do arquivo, aqui só o ajuste de espaço e de cor. */
body.woocommerce.single-product div.product .product-full-description {
    margin-top: 28px;
    border-radius: var(--pdp-radius);
}

body.woocommerce.single-product div.product .pfd-tab-btn {
    color: var(--pdp-muted);
}

body.woocommerce.single-product div.product .pfd-tab-btn.is-active,
body.woocommerce.single-product div.product .pfd-tab-btn:hover {
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pfd-tabs-panels {
    padding: 18px 24px;
}

/* ---------- You May Also Like ---------- */
body.woocommerce.single-product div.product .pdp-related {
    margin-top: 48px;
}

body.woocommerce.single-product div.product .pdp-related__title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 800;
    color: var(--pdp-navy);
}

body.woocommerce.single-product div.product .pdp-related__viewport {
    position: relative;
}

body.woocommerce.single-product div.product ul.products.pdp-related__track {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 4px 2px 10px;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

body.woocommerce.single-product div.product ul.products.pdp-related__track::-webkit-scrollbar {
    display: none;
}

body.woocommerce.single-product div.product ul.products.pdp-related__track::before,
body.woocommerce.single-product div.product ul.products.pdp-related__track::after {
    content: none; /* clearfix do WooCommerce vira espaço no flex */
}

body.woocommerce.single-product div.product ul.products.pdp-related__track li.product {
    flex: 0 0 calc((100% - 5 * 14px) / 6);
    width: auto;
    float: none;
    margin: 0;
    padding: 12px;
    scroll-snap-align: start;
    border: 1px solid var(--pdp-line);
    border-radius: var(--pdp-radius);
    background: #fff;
    transition: box-shadow .15s ease, border-color .15s ease;
}

body.woocommerce.single-product div.product ul.products.pdp-related__track li.product:hover {
    border-color: #CBD1E0;
    box-shadow: 0 6px 18px rgba(16, 24, 64, .08);
}

body.woocommerce.single-product div.product .pdp-related__nav {
    position: absolute;
    top: 38%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--pdp-navy);
    box-shadow: 0 2px 10px rgba(16, 24, 64, .14);
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}

body.woocommerce.single-product div.product .pdp-related__nav--prev { left: -18px; }
body.woocommerce.single-product div.product .pdp-related__nav--next { right: -18px; }

body.woocommerce.single-product div.product .pdp-related__nav:hover { transform: scale(1.06); }

body.woocommerce.single-product div.product .pdp-related__nav:disabled {
    opacity: 0;
    pointer-events: none;
}

body.woocommerce.single-product div.product .pdp-related__viewport.is-static .pdp-related__nav {
    display: none;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1199px) {
    body.woocommerce.single-product div.product ul.products.pdp-related__track li.product {
        flex-basis: calc((100% - 3 * 14px) / 4);
    }
}

@media (max-width: 991px) {
    body.woocommerce.single-product div.product {
        grid-template-columns: minmax(0, 1fr);
    }

    body.woocommerce.single-product div.product div.images,
    body.woocommerce.single-product div.product div.summary,
    body.woocommerce.single-product div.product .pdp-related {
        grid-column: 1;
        grid-row: auto;
    }

    body.woocommerce.single-product div.product div.summary {
        margin-top: 18px;
    }
}

@media (max-width: 768px) {
    body.woocommerce.single-product div.product .product_title { font-size: 24px; }

    /* Preco/estoque/quantidade colavam na borda da tela: a regra do desktop
       acima zera o padding de .pdp-buy-top com o mesmo peso de seletor que
       vence a regra antiga de mobile (padding-left 15px). Aqui volta o mesmo
       respiro de 15px que titulo, cor, swatches e botoes ja tem. */
    body.woocommerce.single-product div.product .pdp-buy-top {
        padding-left: 15px;
        padding-right: 15px;
    }
    body.woocommerce.single-product div.product .pdp-price-wrap .price { font-size: 30px; }

    /* galeria: thumbs viram fileira abaixo da foto (regra antiga já empilha) */
    body.woocommerce.single-product div.product div.images .flex-control-thumbs {
        flex: 0 0 auto;
        width: 100% !important;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    body.woocommerce.single-product div.product div.images .flex-control-thumbs li {
        /* mesmo +30% do desktop (60 -> 78) */
        flex: 0 0 78px;
        width: 78px !important;
    }

    body.woocommerce.single-product div.product div.images .flex-direction-nav {
        left: 15px;
        right: 15px;
        bottom: 76px; /* acima da fileira de thumbs */
    }

    body.woocommerce.single-product div.product .pdp-related {
        padding: 0 15px;
    }

    /* Cor e swatches ficavam colados na borda: o form de variacoes perde o
       padding na regra generica de form.cart. Mesmo respiro do resto. */
    body.woocommerce.single-product div.product form.cart.variations_form {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* "You May Also Like" no celular: carrossel de 2 em 2.
       O responsivo.css transforma TODA ul.products do mobile num grid de 2
       colunas com !important — e' o que fazia os relacionados empilharem em
       pares. Aqui o trilho volta a ser uma faixa horizontal (precisa do mesmo
       !important, com seletor mais pesado, pra ganhar). O viewport reserva
       30px de cada lado pras setas, e os cards encolhem pra caber 2 por tela
       sem que as setas fiquem por cima deles. */
    body.woocommerce.single-product div.product .pdp-related__viewport {
        padding: 0 30px;
    }

    body.woocommerce.single-product div.product ul.products.pdp-related__track {
        display: flex !important;
        grid-template-columns: none !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
    }

    body.woocommerce.single-product div.product ul.products.pdp-related__track li.product {
        flex: 0 0 calc((100% - 10px) / 2);
        width: auto !important;
        max-width: none !important;
        padding: 10px !important;
    }

    body.woocommerce.single-product div.product .pdp-related__nav {
        width: 32px;
        height: 32px;
        top: 36%; /* centro da foto do card, nao do card inteiro */
    }

    body.woocommerce.single-product div.product .pdp-related__nav--prev { left: -1px; }
    body.woocommerce.single-product div.product .pdp-related__nav--next { right: -1px; }
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce.single-product div.product ul.products.pdp-related__track { scroll-behavior: auto; }
    body.woocommerce.single-product div.product .pdp-cta,
    body.woocommerce.single-product div.product .pdp-related__nav,
    body.woocommerce.single-product div.product div.images .flex-direction-nav a { transition: none; }
}

/* Customization: mesmo ritmo compacto das specs, itens da lista com "- " */
body.woocommerce.single-product div.product .pfd-panel[data-pfd-tab="customization"] {
    font-size: 13px;
}

body.woocommerce.single-product div.product .pfd-panel[data-pfd-tab="customization"] p {
    margin: 0 0 6px;
    line-height: 1.7;
}

body.woocommerce.single-product div.product .pfd-panel[data-pfd-tab="customization"] .pfd-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.woocommerce.single-product div.product .pfd-panel[data-pfd-tab="customization"] .pfd-list li {
    margin: 0;
    line-height: 1.7;
}

body.woocommerce.single-product div.product .pfd-panel[data-pfd-tab="customization"] .pfd-list li::before {
    content: "- ";
}
/* TEMPORÁRIO: oculta preço, estoque, quantidade e pedido mínimo na PDP.
   O HTML continua na página (só display:none) — pra voltar, apagar este bloco. */
.pdp-buy-top {
	display: none !important;
}

/* Cor sem foto própria: só o placeholder, sem miniaturas nem setas. */
.single-product .woocommerce-product-gallery.is-no-photo .flex-control-thumbs,
.single-product .woocommerce-product-gallery.is-no-photo .flex-direction-nav {
    display: none !important;
}
.single-product .woocommerce-product-gallery.is-no-photo .woocommerce-product-gallery__image:not(:first-child) {
    display: none !important;
}