/* ============================================================
   Piclick — overrides do WooCommerce (clássico + Blocks)
   ============================================================ */

/* ---------- Botões base ---------- */
body .woocommerce a.button,
body .woocommerce button.button,
body .woocommerce input.button,
body .woocommerce-page a.button,
body .woocommerce-page button.button,
body .woocommerce-page input.button,
body .wc-block-components-button,
body button.single_add_to_cart_button,
body .woocommerce .add_to_cart_button,
body .woocommerce a.add_to_cart_button,
body .woocommerce .product_type_simple,
body .woocommerce-cart .button,
body .woocommerce-cart a.button,
body .wp-element-button,
body .wc-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.7rem 1.4rem;
    border-radius: 999px !important;
    border: 3px solid var(--pc-plum) !important;
    box-shadow: 0 5px 0 0 var(--pc-plum) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    text-decoration: none;
    cursor: pointer;
}
body .woocommerce a.button:active,
body .woocommerce button.button:active,
body .woocommerce input.button:active,
body button.single_add_to_cart_button:active,
body .wc-block-components-button:active,
body .wp-element-button:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 var(--pc-plum) !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover,
.wc-block-components-button:hover,
button.single_add_to_cart_button:hover {
    background: var(--pc-pink);
    color: var(--pc-white);
    opacity: 0.95;
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce-page a.button:active,
.woocommerce-page button.button:active,
.woocommerce-page input.button:active,
.wc-block-components-button:active,
button.single_add_to_cart_button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 -1px var(--pc-plum);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.checkout-button,
.wc-block-components-checkout-place-order-button {
    background: var(--pc-pink);
    color: var(--pc-white);
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.wc-block-components-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Botões secundários (e.g. "Continuar comprando") */
body .woocommerce-cart .wc-backward,
body .woocommerce-cart-form .button[name="update_cart"],
body .woocommerce a.added_to_cart,
body .woocommerce .button.wc-backward {
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    border: 3px solid var(--pc-plum) !important;
    box-shadow: 0 5px 0 0 var(--pc-plum) !important;
}
body .woocommerce-cart .wc-backward:hover,
body .woocommerce-cart-form .button[name="update_cart"]:hover,
body .woocommerce a.added_to_cart:hover {
    color: var(--pc-plum) !important;
    background: var(--pc-cream) !important;
}

/* ---------- Forms ---------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce .quantity input.qty,
.wc-block-components-text-input input.wc-block-components-text-input__input,
.wc-block-components-select select {
    width: 100%;
    padding: 0.7rem 0.95rem;
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    background: var(--pc-white);
    color: var(--pc-plum);
    font-family: var(--pc-font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .quantity input.qty:focus,
.wc-block-components-text-input input.wc-block-components-text-input__input:focus,
.wc-block-components-select select:focus {
    border-color: var(--pc-plum);
    outline: none;
}
.woocommerce form .form-row label,
.wc-block-components-text-input label {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}
.woocommerce .quantity input.qty {
    width: 4.5rem;
    text-align: center;
    padding: 0.55rem 0.4rem;
}

/* ---------- Notices ---------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
    padding: 0.9rem 1.1rem;
    border-radius: var(--pc-radius-md);
    border: 2px solid rgba(96, 11, 46, 0.2);
    font-family: var(--pc-font-action);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-image: none;
    list-style: none;
}
.woocommerce-message {
    background: var(--pc-butter);
    color: var(--pc-plum);
    padding-left: 1.1rem;
}
.woocommerce-info {
    background: var(--pc-pink-soft);
    color: var(--pc-plum);
}
/* Login prompt do checkout ("Já é cliente? Clique aqui pra entrar")
   é UI persistente, não notificação. Usa paleta butter pra diferenciar
   visualmente das mensagens de erro (rosa/vermelho-claro). */
.woocommerce-form-login-toggle .woocommerce-info {
    background: var(--pc-butter);
    border-color: rgba(96, 11, 46, 0.25);
}
.woocommerce-form-login-toggle .woocommerce-info .showlogin {
    color: var(--pc-plum);
    font-weight: 700;
    text-decoration: underline;
}
.woocommerce-form-login-toggle .woocommerce-info .showlogin:hover {
    color: var(--pc-pink);
}
.woocommerce-error {
    border-color: rgba(220, 38, 38, 0.3);
    background: #fee2e2;
    color: #991b1b;
}
/* Icone do success notice agora vem do template woocommerce/notices/success.php
   como SVG inline. Aqui so escondemos o ::before nativo do Woo e estilizamos
   o SVG injetado pelo template. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    display: none !important;
}
.woocommerce-message .piclick-notice-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: var(--pc-plum);
}
/* Botao "Ver carrinho" dentro da notice — pill plum-outline */
.woocommerce-message .button,
.woocommerce-info .button {
    margin-left: auto;
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    border: 2px solid var(--pc-plum) !important;
    border-radius: 999px !important;
    padding: 0.5rem 1.1rem !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 3px 0 var(--pc-plum) !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 0 var(--pc-plum) !important;
}

/* Notices Woo Blocks (versao moderna do "Adicionado ao carrinho") */
.wc-block-store-notices,
.wc-block-components-notice-banner {
    border-radius: var(--pc-radius-md) !important;
    border: 2px solid rgba(96, 11, 46, 0.2) !important;
    background: var(--pc-butter) !important;
    color: var(--pc-plum) !important;
    padding: 0.9rem 1.1rem !important;
    font-family: var(--pc-font-body) !important;
    font-size: 0.95rem !important;
    margin-bottom: 1.25rem !important;
    box-shadow: none !important;
}
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success {
    background: var(--pc-butter) !important;
    color: var(--pc-plum) !important;
}
.wc-block-components-notice-banner.is-error {
    background: #fee2e2 !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    color: #991b1b !important;
}
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner svg {
    fill: var(--pc-plum) !important;
    color: var(--pc-plum) !important;
}
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a,
.wc-block-store-notices a {
    color: var(--pc-pink) !important;
    font-weight: 700;
    text-decoration: underline;
}

/* Feedback de loading no botao "Adicionar ao carrinho" da pagina do produto.
   NOTA: nao setamos `disabled` via JS (quebra o POST), usamos `pointer-events: none`
   pra impedir double-click enquanto o redirect acontece. */
.single_add_to_cart_button.is-loading,
button.single_add_to_cart_button:disabled,
.wc-block-components-product-button button:disabled {
    opacity: 0.85;
    cursor: wait;
}
.single_add_to_cart_button.is-loading {
    pointer-events: none;
}

/* ---------- Preços ---------- */
.woocommerce .price,
.woocommerce-Price-amount,
.amount,
.wc-block-formatted-money-amount {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    font-variant-numeric: tabular-nums;
}
.woocommerce .price del .amount,
.woocommerce ins {
    background: transparent;
}
.woocommerce .price del {
    color: var(--pc-plum);
    opacity: 0.5;
    margin-right: 0.4rem;
}

/* ---------- Tabelas ---------- */
.woocommerce table.shop_table {
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background: var(--pc-white);
}
.woocommerce table.shop_table th {
    background: var(--pc-cream);
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.9rem 1rem;
    border-bottom: 2px solid var(--pc-plum-soft);
}
.woocommerce table.shop_table td {
    padding: 1rem;
    border-top: 1px solid var(--pc-plum-soft);
    vertical-align: middle;
}
.woocommerce table.shop_table tbody tr:first-child td {
    border-top: none;
}
.woocommerce table.shop_table .product-thumbnail img {
    border-radius: var(--pc-radius-sm);
    max-width: 60px;
}
.woocommerce table.shop_table .product-name a {
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 700;
}
.woocommerce table.shop_table .product-name dl.variation,
.woocommerce table.shop_table .product-name .wc-item-meta {
    margin-top: 0.4rem;
    padding-left: 0;
    list-style: none;
    font-size: 0.85rem;
}
.woocommerce table.shop_table .product-name .wc-item-meta li {
    margin: 0.15rem 0;
}
.woocommerce table.shop_table .product-name .wc-item-meta strong {
    font-weight: 700;
}

/* ---------- Grid de produtos (loja + relacionados + Woo Blocks) ----------
   Container fica centralizado na pagina (margin auto + max-width).
   Cards usam tamanho fixo (240px) e wrap natural — sem cards esticando. */
.woocommerce ul.products,
.wc-block-grid__products,
ul.wp-block-woocommerce-product-template,
ul.wc-block-product-template,
.products.columns-1,
.products.columns-2,
.products.columns-3,
.products.columns-4 {
    /* CSS Grid com auto-fill cria slots fixos de 240px que sao reservados
       mesmo em rows incompletas. Cards orfaos ficam alinhados verticalmente
       com os cards das outras rows (em vez do flex que centraliza cada row
       independente, gerando colunas desalinhadas entre rows). */
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 240px) !important;
    gap: 1.5rem !important;
    list-style: none !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: stretch !important;
}
/* Esconde os ::before/::after do Woo (clearfix legado pra float layouts).
   Em flex eram invisiveis, mas em grid viram grid items e ocupam o slot 1
   — empurrando os produtos pra direita. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce .products ul::before,
.woocommerce .products ul::after {
    display: none !important;
    content: none !important;
}
/* Produtos relacionados / upsells: left-align em vez de center, pra alinhar
   visualmente com o heading "Produtos relacionados" da secao. Sao poucos
   cards (max 3-4), o left-align fica mais natural que center. */
.woocommerce div.product .related ul.products,
.woocommerce div.product .upsells ul.products {
    justify-content: start !important;
}
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product,
ul.wp-block-woocommerce-product-template > li,
ul.wc-block-product-template > li {
    position: relative;
    width: 240px !important;
    max-width: 100% !important;
    flex: 0 0 240px !important;
    margin: 0 !important;
    background: linear-gradient(180deg, var(--pc-pink-soft) 0%, var(--pc-white) 70%);
    border: 2px solid rgba(96, 11, 46, 0.12);
    border-radius: 1.75rem;
    padding: 1rem 1rem 1rem;
    text-align: center;
    box-shadow: 0 6px 18px rgba(96, 11, 46, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    overflow: visible;
    display: flex !important;
    flex-direction: column !important;
    list-style: none !important;
    float: none !important;
    clear: none !important;
}
@media (max-width: 600px) {
    .woocommerce ul.products li.product,
    .wc-block-grid__products .wc-block-grid__product,
    ul.wp-block-woocommerce-product-template > li,
    ul.wc-block-product-template > li {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}
.woocommerce ul.products li.product:hover {
    border-color: var(--pc-plum);
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(96, 11, 46, 0.18);
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale,
.wc-block-components-sale-badge,
.wp-block-woocommerce-product-sale-badge,
.wc-block-grid__product-onsale,
.wc-block-grid__product .wc-block-components-sale-badge,
li.wc-block-product-template__product .wc-block-components-sale-badge,
.wp-block-woocommerce-empty-cart-block .wc-block-components-sale-badge {
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.7rem !important;
    padding: 0.3rem 0.7rem !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    min-height: 0 !important;
    min-width: 0 !important;
    line-height: 1 !important;
    border: none !important;
    box-shadow: 0 3px 8px rgba(96, 11, 46, 0.18) !important;
}
.woocommerce ul.products li.product .onsale {
    top: 0.85rem;
    right: 0.85rem;
    left: auto;
}
.woocommerce div.product .onsale {
    top: 0.85rem;
    left: 0.85rem;
    right: auto;
}
.woocommerce ul.products li.product a {
    color: var(--pc-plum);
    text-decoration: none;
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.wp-block-woocommerce-product-template img,
.wc-block-product-template img,
li.wc-block-product-template__product img,
.wc-block-grid__product-image img,
.wc-block-components-product-image img {
    width: 83% !important;
    height: auto !important;
    margin: 0 auto 0.9rem !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    background: var(--pc-white) !important;
    border: 4px solid var(--pc-white) !important;
    box-shadow: 0 10px 24px rgba(96, 11, 46, 0.14) !important;
    display: block !important;
}
/* Container da imagem dos cards Woo Blocks — remove qualquer borda/bg extra */
.wp-block-woocommerce-product-template .wc-block-components-product-image,
.wc-block-product-template .wc-block-components-product-image,
li.wc-block-product-template__product .wc-block-components-product-image,
.wc-block-grid__product-image {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 0.5rem !important;
    text-align: center !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--pc-plum);
    padding: 0;
    margin: 0 0 0.4rem;
}
.woocommerce ul.products li.product .price {
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.15;
    display: block;
    margin: 0 0 1rem;
}
.woocommerce ul.products li.product .price del {
    opacity: 0.45;
    margin-right: 0.4rem;
    font-size: 0.85em;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    color: var(--pc-pink);
}
.woocommerce ul.products li.product .button,
body .woocommerce ul.products li.product .button {
    margin: auto 0 0 !important;
    width: 100%;
    padding: 0.85rem 1rem !important;
    border-radius: 999px !important;
    font-size: 0.95rem !important;
    /* Plum solid em vez do pink global — contraste alto contra o bg
       pink-soft do card. Mantem a "chunky" shadow pra coerencia. */
    background: var(--pc-plum) !important;
    background-color: var(--pc-plum) !important;
    color: var(--pc-white) !important;
    border-color: var(--pc-plum) !important;
}
body .woocommerce ul.products li.product .button:hover {
    background: var(--pc-pink) !important;
    background-color: var(--pc-pink) !important;
    border-color: var(--pc-pink) !important;
    color: var(--pc-white) !important;
}
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}
.woocommerce ul.products li.product .button.added::after {
    display: none !important;
}
.woocommerce ul.products li.product .button.is-added {
    background: var(--pc-butter) !important;
    color: var(--pc-plum) !important;
}

.woocommerce-result-count,
.woocommerce-ordering {
    margin-bottom: 1.5rem;
}

/* Ordenação / contagem */
.woocommerce .woocommerce-result-count {
    color: var(--pc-plum);
    opacity: 0.75;
    font-size: 0.9rem;
}
.woocommerce .woocommerce-ordering select {
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--pc-plum-soft);
    background: var(--pc-white);
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 600;
    font-size: 0.9rem;
}

/* ---------- Página de produto único ---------- */
.woocommerce div.product {
    display: grid;
    gap: 2rem;
}
@media (min-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }
}
.woocommerce div.product .woocommerce-product-gallery {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
.woocommerce div.product .summary {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells {
    grid-column: 1 / -1;
}
.woocommerce div.product .woocommerce-product-gallery {
    background: linear-gradient(135deg, var(--pc-cream) 0%, var(--pc-white) 100%);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem;
    box-shadow: 0 8px 24px rgba(96, 11, 46, 0.08);
}
/* Galeria: forca aspect-ratio 1/1 pra evitar que fotos portrait estiquem o
   container. object-fit: cover croppa o excesso. */
.woocommerce div.product .woocommerce-product-gallery__image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--pc-radius-md);
    background: var(--pc-white);
}
.woocommerce div.product .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery__image > div {
    display: block;
    width: 100%;
    height: 100%;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
}
.woocommerce div.product .product_meta {
    display: none;
}
.piclick-product-category-pill {
    display: inline-block;
    background: var(--pc-pink-soft);
    color: var(--pc-plum);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.65rem;
}
.piclick-product-category-pill a {
    color: var(--pc-plum);
    text-decoration: none;
}
.woocommerce div.product .woocommerce-product-details__short-description {
    color: rgba(96, 11, 46, 0.85);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.5rem 0 1.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description p {
    margin-bottom: 0.5rem;
}
.woocommerce div.product .product_title {
    font-family: var(--pc-font-action);
    font-weight: 800;
    color: var(--pc-plum);
    margin: 0 0 0.75rem;
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.woocommerce div.product .price {
    font-size: 1.85rem;
    color: var(--pc-pink);
    margin: 0.5rem 0 1.25rem;
    font-family: var(--pc-font-action);
    font-weight: 800;
}
.woocommerce div.product .price ins {
    color: var(--pc-pink);
    text-decoration: none;
}
.woocommerce div.product .product_meta {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: rgba(96, 11, 46, 0.7);
}
.woocommerce div.product .product_meta a {
    color: var(--pc-plum);
    font-weight: 700;
}
.woocommerce div.product form.cart {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
/* Quantity selector — wrapper vira pill com botoes + / - estilizados
   (injetados via JS em site.js, similar ao Cart Block quantity selector). */
.woocommerce div.product form.cart .quantity {
    margin: 0;
    background: var(--pc-pink-soft);
    border: 2px solid var(--pc-plum-soft);
    border-radius: 999px;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    height: auto;
}
.woocommerce div.product form.cart .quantity input.qty {
    background: transparent !important;
    border: none !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-action);
    font-weight: 700;
    width: 2.5rem !important;
    text-align: center;
    font-size: 1rem;
    padding: 0 !important;
    /* Remove os spinners default do <input type="number"> que consomem
       espaco a direita e deslocam o "1" do centro. */
    -moz-appearance: textfield;
    appearance: textfield;
}
.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.woocommerce div.product form.cart .quantity input.qty:focus {
    outline: none;
}
.piclick-qty-btn {
    background: var(--pc-plum);
    color: var(--pc-white);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.piclick-qty-btn:hover {
    background: var(--pc-pink);
}
.piclick-qty-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1;
    min-width: 12rem;
    padding: 0.9rem 1.5rem;
    font-size: 1rem;
}
/* Tabs como pills (vs underline default) */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: none;
    padding: 0;
    margin: 1.5rem 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none !important;
    content: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    background: var(--pc-plum-soft);
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    background: var(--pc-pink-soft);
    color: var(--pc-plum);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background: var(--pc-butter);
    color: var(--pc-plum);
}

/* Esconde o <h2> auto-injetado pelos templates da tab (description, additional
   information, reviews) — o nome da tab ja diz o titulo, o h2 dentro do painel
   e redundante. Reviews tem estrutura diferente (#comments > h2), entao
   precisamos do seletor especifico .woocommerce-Reviews-title. */
.woocommerce div.product .woocommerce-Tabs-panel > h2:first-child,
.woocommerce div.product .woocommerce-Reviews-title {
    display: none;
}

/* === Avaliacoes (#reviews) ================================================
   Estrutura WC: #reviews > .commentlist (reviews existentes) + #review_form_wrapper >
   #review_form > #respond > h3.comment-reply-title + form#commentform com
   p.comment-form-rating > .stars (links a.star-1 ate a.star-5),
   p.comment-form-comment > textarea,
   p.form-submit > input.submit. */

.woocommerce #reviews,
.woocommerce div.product #reviews {
    margin: 0;
}

/* Titulo "Seja o primeiro a avaliar" / "Adicionar uma avaliacao" */
.woocommerce #review_form #respond .comment-reply-title,
.woocommerce #reviews #respond .comment-reply-title {
    display: block;
    font-family: var(--pc-font-action);
    font-weight: 800;
    color: var(--pc-plum);
    font-size: 1.05rem;
    margin: 0 0 1rem;
}
.woocommerce #reviews .woocommerce-noreviews {
    color: rgba(96, 11, 46, 0.75);
    background: var(--pc-cream);
    border: 1px dashed var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
}

/* Form do review — card cream que envolve tudo */
.woocommerce #review_form #respond,
.woocommerce #reviews #respond {
    background: var(--pc-cream);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 1.25rem 1.25rem 1.1rem;
}
.woocommerce #review_form #respond form.comment-form {
    margin: 0;
}
.woocommerce #review_form #respond p {
    margin: 0 0 0.85rem;
}
.woocommerce #review_form #respond label {
    display: block;
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

/* Estrelas do form (links a.star-1 a a.star-5) — pink-soft, hover/selecionado pink */
.woocommerce p.stars a {
    color: var(--pc-pink-soft) !important;
    font-size: 1.1rem;
    transition: color 0.15s ease;
}
.woocommerce p.stars a:hover,
.woocommerce p.stars.selected a.active,
.woocommerce p.stars.selected a:not(.active) {
    color: var(--pc-pink) !important;
}
.woocommerce p.stars.selected a.active ~ a {
    color: var(--pc-pink-soft) !important;
}

/* Textarea */
.woocommerce #review_form #respond textarea,
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"] {
    width: 100%;
    background: var(--pc-white);
    color: var(--pc-plum);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.75rem 0.9rem;
    font-family: var(--pc-font-body);
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce #review_form #respond textarea {
    min-height: 7rem;
    resize: vertical;
}
.woocommerce #review_form #respond textarea:focus,
.woocommerce #review_form #respond input:focus {
    outline: none;
    border-color: var(--pc-pink);
    box-shadow: 0 0 0 3px rgba(232, 62, 140, 0.15);
}

/* Botao Enviar */
.woocommerce #review_form #respond .form-submit {
    margin: 1rem 0 0;
    text-align: right;
}
.woocommerce #review_form #respond input.submit,
.woocommerce #review_form #respond button[type="submit"] {
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    border: 2px solid var(--pc-plum) !important;
    border-radius: 999px !important;
    padding: 0.7rem 1.6rem !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 3px 0 var(--pc-plum) !important;
    cursor: pointer !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
.woocommerce #review_form #respond input.submit:hover {
    transform: translateY(1px);
    box-shadow: 0 2px 0 var(--pc-plum) !important;
}

/* Lista de reviews existentes (.commentlist) */
.woocommerce #reviews ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.85rem;
}
.woocommerce #reviews ol.commentlist li {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 1rem 1.1rem;
}
.woocommerce #reviews ol.commentlist li .comment_container {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
}
.woocommerce #reviews ol.commentlist li img.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--pc-plum-soft);
    background: var(--pc-cream);
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}
.woocommerce #reviews ol.commentlist li .comment-text {
    flex: 1;
    padding: 0;
    border: none;
    margin: 0;
}
.woocommerce #reviews ol.commentlist li .meta {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
}
.woocommerce #reviews ol.commentlist li .meta time {
    color: rgba(96, 11, 46, 0.6);
    font-weight: 500;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}
.woocommerce #reviews ol.commentlist li .description {
    color: rgba(96, 11, 46, 0.85);
    line-height: 1.55;
}
/* Star-rating em reviews ja postadas (visualizacao) — usa font do WC com chars unicode.
   Forcamos cor pink. */
.woocommerce #reviews .star-rating,
.woocommerce #reviews .star-rating::before,
.woocommerce #reviews .star-rating span::before {
    color: var(--pc-pink) !important;
}

/* Tabela de informação adicional do produto */
.woocommerce div.product .woocommerce-product-attributes,
.woocommerce div.product table.shop_attributes {
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--pc-plum-soft);
    text-align: left;
}
.woocommerce div.product .shop_attributes tr:last-child th,
.woocommerce div.product .shop_attributes tr:last-child td {
    border-bottom: none;
}
.woocommerce div.product .shop_attributes th {
    background: var(--pc-cream);
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    width: 30%;
}
.woocommerce div.product .shop_attributes td {
    font-style: normal;
    background: var(--pc-white);
}

/* === Widget "Simulacao de frete" da Melhor Envio na pagina de produto =====
   Estrutura (plugin melhor-envio-cotacao/Controllers/ShowCalculatorProductPage.php):
     #woocommerce-correios-calculo-de-frete-na-pagina-do-produto.containerCalculator
       .calculatorRow > .row > .col-75
         p (label "Simulacao de frete")
         input.iptCep#inputCep (CEP)
       #calcular-frete-loader (gif de loading)
       .resultado-frete.tableResult > table (resultados)
   O CSS do plugin (calculator.css) e bem leve mas usa cinza default. Aqui
   reestilizamos pra cara da marca, com especificidade suficiente pra vencer. */
.woocommerce div.product .containerCalculator,
body #woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
    background: var(--pc-cream) !important;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-md) !important;
    padding: 1rem 1.1rem !important;
    margin: 0 0 1.25rem !important;
    box-shadow: none !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body) !important;
}
.woocommerce div.product .containerCalculator .calculatorRow,
.woocommerce div.product .containerCalculator .row,
.woocommerce div.product .containerCalculator .col-75 {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: initial !important;
}
.woocommerce div.product .containerCalculator > .calculatorRow {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.woocommerce div.product .containerCalculator p {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.woocommerce div.product .containerCalculator input.iptCep,
.woocommerce div.product .containerCalculator input#inputCep {
    width: 100% !important;
    max-width: 18rem;
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: 0.75rem !important;
    padding: 0.65rem 0.9rem !important;
    font-family: var(--pc-font-body) !important;
    font-size: 0.95rem !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.woocommerce div.product .containerCalculator input.iptCep:focus,
.woocommerce div.product .containerCalculator input#inputCep:focus {
    outline: none !important;
    border-color: var(--pc-pink) !important;
    box-shadow: 0 0 0 3px rgba(232, 62, 140, 0.15) !important;
}
.woocommerce div.product .containerCalculator input.iptCep::placeholder {
    color: rgba(96, 11, 46, 0.5) !important;
}
/* Tabela de resultado herda visual da tabela de atributos */
.woocommerce div.product .containerCalculator .resultado-frete table {
    margin-top: 0.75rem;
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--pc-white);
}
.woocommerce div.product .containerCalculator .resultado-frete th,
.woocommerce div.product .containerCalculator .resultado-frete td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--pc-plum-soft);
    color: var(--pc-plum);
    font-size: 0.9rem;
    text-align: left;
}
.woocommerce div.product .containerCalculator .resultado-frete tr:last-child td {
    border-bottom: none;
}
.woocommerce div.product .containerCalculator .resultado-frete th {
    background: var(--pc-cream);
    font-family: var(--pc-font-action);
    font-weight: 700;
}
.woocommerce div.product .containerCalculator small {
    display: block;
    margin-top: 0.5rem;
    color: rgba(96, 11, 46, 0.7);
    font-size: 0.85rem;
}
.woocommerce div.product .containerCalculator #calcular-frete-loader img {
    margin: 0.5rem 0;
}
/* Defensivo: esconde explicitamente o bloco de resultado e <small> de feedback
   enquanto nao houver linhas na tbody. O CSS do plugin ja faz isso na
   .tableResult, mas alguma combinacao de CSS estava deixando uma "linha
   perdida" abaixo do input. Quando o AJAX popular a tbody, :has(tbody tr)
   passa a NAO matchar, a regra cai, e o .show() do JS volta a funcionar. */
.woocommerce div.product .containerCalculator .resultado-frete:not(:has(tbody tr)) {
    display: none !important;
}
.woocommerce div.product .containerCalculator small:empty {
    display: none !important;
}

/* Esconder widget de calculadora de frete (Woo Better Shipping etc) na pagina de produto.
   No carrinho/checkout o widget e necessario, so estilizamos abaixo. */
.woocommerce div.product [class*="woo-better-"],
.woocommerce div.product [id*="woo-better-"],
.woocommerce div.product [class*="melhorenvio" i],
.woocommerce div.product [id*="melhorenvio" i],
.woocommerce div.product [class*="melhor-envio" i],
.woocommerce div.product [id*="melhor-envio" i],
.woocommerce div.product [class*="cotacao" i],
.woocommerce div.product [class*="frete-calculator" i],
.woocommerce div.product [class*="shipping-calculator" i] {
    display: none !important;
}

/* Widget Melhor Envio:
   - na pagina de produto individual: ESCONDER (form.cart ja tem o suficiente)
   - no carrinho/checkout: MOSTRAR mas re-estilizar pra remover o azul.
   Estrutura real do plugin (DOM inspecionado):
     .woo-better-info-block (root)
       .woo-better-current-postcode-block  (header CEP)
       .woo-better-content-block.expanded  (corpo) */

/* 1. Esconde so na pagina de produto individual */
.woocommerce div.product [class*="woo-better-"],
.woocommerce div.product [id*="woo-better-"] {
    display: none !important;
}

/* 2. Container raiz no cart/checkout: branding cream + plum */
body .woo-better-info-block {
    background: var(--pc-cream) !important;
    background-image: none !important;
    border: 2px solid rgba(96, 11, 46, 0.15) !important;
    border-radius: 1rem !important;
    color: var(--pc-plum) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    font-family: var(--pc-font-body) !important;
}

/* 3. Header CEP — pink-soft (era azul) */
body .woo-better-current-postcode-block,
body .woo-better-info-block .woo-better-current-postcode-block {
    background: var(--pc-pink-soft) !important;
    background-image: none !important;
    background-color: var(--pc-pink-soft) !important;
    color: var(--pc-plum) !important;
    border: none !important;
    border-bottom: 2px solid rgba(96, 11, 46, 0.15) !important;
    padding: 0.85rem 1rem !important;
}

/* 4. Body do widget — cream.
   IMPORTANTE: padding/overflow so quando .expanded. O plugin colapsa via
   height:0, mas nosso padding deixava ~28px sobrando com o "Carrinho" visivel. */
body .woo-better-content-block,
body .woo-better-info-block .woo-better-content-block {
    background: var(--pc-cream) !important;
    background-image: none !important;
    background-color: var(--pc-cream) !important;
    color: var(--pc-plum) !important;
    overflow: hidden !important;
    padding: 0 !important;
    transition: padding 0.2s ease !important;
}
body .woo-better-content-block.expanded,
body .woo-better-info-block .woo-better-content-block.expanded {
    padding: 0.85rem 1rem !important;
}

/* 5. Qualquer descendente do widget: zera fundos azuis + cinza */
body .woo-better-info-block *,
body .woo-better-current-postcode-block *,
body .woo-better-content-block * {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--pc-plum) !important;
    border-color: rgba(96, 11, 46, 0.15) !important;
}

/* 6. Links */
body [class*="woo-better-"] a,
body .woo-better-info-block a {
    color: var(--pc-pink) !important;
    text-decoration: underline !important;
    background: transparent !important;
}

/* 7. SVG icones: forca cor plum (inclusive os com fill inline azul) */
body [class*="woo-better-"] svg,
body [class*="woo-better-"] svg *,
body .woo-better-info-block svg,
body .woo-better-info-block svg * {
    color: var(--pc-plum) !important;
    fill: var(--pc-plum) !important;
    stroke: var(--pc-plum) !important;
}

/* 8. Inputs (campo CEP) — estilo branded */
body [class*="woo-better-"] input[type="text"],
body [class*="woo-better-"] input[type="number"],
body .woo-better-info-block input {
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.7rem !important;
    font-family: var(--pc-font-body) !important;
}

/* 9. Botao "Alterar" (com texto) — pill pink */
body .woo-better-change-postcode-button,
body .woo-better-info-block .woo-better-change-postcode-button {
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    border: 2px solid var(--pc-plum) !important;
    border-radius: 999px !important;
    padding: 0.4rem 0.9rem !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    box-shadow: 0 2px 0 var(--pc-plum) !important;
    cursor: pointer !important;
}

/* 10. Botoes que sao SO icone (toggle do header, update no footer):
   ficam sem fundo/borda, so o icone aparece */
body .woo-better-toggle-button,
body .woo-better-update-icon-container,
body .woo-better-info-block .woo-better-toggle-button,
body .woo-better-info-block .woo-better-update-icon-container {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.25rem !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    cursor: pointer !important;
}

/* 11. Imagens-icone do widget (.blue-icon) sao .svg externos carregados como <img>.
   Como nao podemos editar o conteudo do SVG via CSS, usamos filter pra
   recolorir azul -> plum (#600b2e). */
body img.blue-icon,
body .blue-icon,
body [class*="woo-better-"] img.blue-icon,
body .woo-better-info-block img,
body .woo-better-info-block .blue-icon {
    filter: brightness(0) saturate(100%) invert(11%) sepia(67%) saturate(2950%) hue-rotate(312deg) brightness(91%) contrast(98%) !important;
}

/* 12. Override agressivo de qualquer inline style com cor azul */
body [class*="woo-better-"] [style*="background"]:not(.woo-better-change-postcode-button),
body [class*="woo-better-"] [style*="color"]:not(.woo-better-change-postcode-button) {
    background-color: transparent !important;
    color: var(--pc-plum) !important;
}

/* ---------- Icones do shortcode [piclick_icon] (base) ---------- */
.piclick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    line-height: 1;
    vertical-align: middle;
}
.piclick-icon svg {
    width: 100%;
    height: 100%;
}

/* ---------- Mochila vazia (Cart Block + Grupo Gutenberg com class piclick-empty-cart) ----------
   Estrutura esperada:
   .piclick-empty-cart (Group)
     .piclick-icon--bag (shortcode [piclick_icon name="bag"])
     h2
     p
     .wp-block-buttons
       .wp-block-button > .wp-block-button__link            (primario)
       .wp-block-button.is-style-outline > .wp-block-button__link  (ghost) */
.piclick-empty-cart {
    max-width: 520px;
    margin: 1.5rem auto 2.5rem !important;
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(180deg, var(--pc-pink-soft) 0%, var(--pc-white) 70%);
    border: 2px solid rgba(96, 11, 46, 0.12);
    border-radius: 1.75rem;
    box-shadow: 0 6px 18px rgba(96, 11, 46, 0.08);
    color: var(--pc-plum);
}
.piclick-empty-cart .piclick-icon--bag {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--pc-white);
    border: 4px solid var(--pc-white);
    box-shadow: 0 10px 24px rgba(96, 11, 46, 0.14);
    color: var(--pc-plum);
}
.piclick-empty-cart .piclick-icon--bag svg {
    width: 48px;
    height: 48px;
}
.piclick-empty-cart h2 {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.75rem;
    line-height: 1.15;
    color: var(--pc-plum);
    margin: 0 0 0.5rem;
}
.piclick-empty-cart p {
    font-family: var(--pc-font-body);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--pc-plum);
    opacity: 0.85;
    margin: 0 0 1.5rem;
}
.piclick-empty-cart .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin: 0;
}
.piclick-empty-cart .wp-block-button__link {
    display: inline-block;
    padding: 0.85rem 1.5rem !important;
    border-radius: 999px !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    border: 2px solid var(--pc-plum) !important;
    box-shadow: 0 4px 0 var(--pc-plum) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.piclick-empty-cart .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 var(--pc-plum) !important;
}
.piclick-empty-cart .is-style-outline .wp-block-button__link {
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    box-shadow: none !important;
}
.piclick-empty-cart .is-style-outline .wp-block-button__link:hover {
    background: var(--pc-pink-soft) !important;
}
/* Cross-sells / "Novo na loja" / sugestoes */
.cross-sells,
.wc-block-cart__empty-cart__title,
.wc-block-cart-items__empty-cart__title {
    margin-top: 2rem;
}
.cross-sells > h2,
.wc-empty-cart-message + .cross-sells > h2 {
    text-align: center;
    font-family: var(--pc-font-action);
    font-weight: 800;
    color: var(--pc-plum);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}
/* Botoes "Adicionar ao carrinho" nos cards do empty cart e qualquer lista de produtos
   Woo Blocks — espelha exatamente o estilo dos botoes da loja.
   body prefix garante especificidade maior que regras do plugin Woo Blocks.
   Cobrimos: produto template (collection), grid legado, e variantes de botao
   (<a>, <button>, .wp-element-button, .wp-block-button__link, .add_to_cart_button). */
body .wp-block-woocommerce-product-template .wp-block-button__link,
body .wc-block-product-template .wp-block-button__link,
body .wp-block-woocommerce-product-template .wp-element-button,
body .wc-block-product-template .wp-element-button,
body .wc-block-grid__products .wp-element-button,
body .wp-block-woocommerce-product-template button,
body .wc-block-product-template button,
body li.wc-block-product-template__product .wp-element-button,
body li.wc-block-product-template__product button,
body li.wc-block-product-template__product .wp-block-button__link,
body .wc-block-components-product-button .wp-element-button,
body .wc-block-components-product-button__button,
body .wc-block-grid__product .wc-block-grid__product-add-to-cart a,
body .wc-block-grid__product .wc-block-grid__product-add-to-cart button,
body .wc-block-grid__product a.button,
body .wc-block-grid__product a.add_to_cart_button,
body .wc-block-grid__product button.add_to_cart_button,
body .wp-block-woocommerce-product-template a.button,
body .wp-block-woocommerce-product-template a.add_to_cart_button,
body li.wc-block-grid__product a.wp-block-button__link,
body li.wc-block-grid__product .wp-element-button,
body .wp-block-woocommerce-empty-cart-block a.button,
body .wp-block-woocommerce-empty-cart-block a.add_to_cart_button,
body .wp-block-woocommerce-empty-cart-block .wp-element-button,
body .wp-block-woocommerce-empty-cart-block button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--pc-pink) !important;
    background-color: var(--pc-pink) !important;
    background-image: none !important;
    color: var(--pc-white) !important;
    border: 3px solid var(--pc-plum) !important;
    border-radius: 999px !important;
    padding: 0.85rem 1.2rem !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    line-height: 1.2 !important;
    box-shadow: 0 5px 0 0 var(--pc-plum) !important;
    width: 100% !important;
    margin-top: auto !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
body .wp-block-woocommerce-product-template .wp-element-button:hover,
body .wc-block-product-template .wp-element-button:hover,
body .wc-block-grid__products .wp-element-button:hover,
body .wc-block-components-product-button__button:hover {
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    opacity: 0.95;
}
body .wp-block-woocommerce-product-template .wp-element-button:active,
body .wc-block-product-template .wp-element-button:active,
body .wc-block-grid__products .wp-element-button:active,
body .wc-block-components-product-button__button:active {
    transform: translateY(3px) !important;
    box-shadow: 0 2px 0 0 var(--pc-plum) !important;
}

/* ---------- Carrinho ---------- */
.woocommerce .cart-collaterals .cart_totals {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.25rem 1.5rem;
}
.woocommerce .cart-collaterals .cart_totals h2 {
    color: var(--pc-plum);
    margin: 0 0 1rem;
}
/* Borders e cores do cart_totals agora vivem no bloco refactor lá em baixo
   (.shop_table tr com border-bottom dashed, .order-total .amount em pink).
   Manter regras aqui criava linha duplicada (th solid + tr dashed). */
.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0;
    margin-top: 1rem;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100%;
    font-size: 1rem;
    padding: 1rem;
}

/* Coupon form */
.woocommerce-cart-form__contents .coupon {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.woocommerce-cart-form__contents .coupon input.input-text {
    max-width: 14rem;
}

/* Remover item link */
.woocommerce a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--pc-plum-soft) !important;
    color: var(--pc-plum) !important;
    font-size: 0.9rem;
}
.woocommerce a.remove:hover {
    background: var(--pc-plum) !important;
    color: var(--pc-white) !important;
    text-decoration: none;
}

/* ---------- Checkout ---------- */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

/* Billing e shipping empilhados dentro de #customer_details, pra os campos
   ocuparem largura total. ATENCAO: #customer_details E o elemento .col2-set
   (mesma tag), nao pai/filho. Seletor com espaco ".col2-set" nao casa. */
.woocommerce-checkout #customer_details {
    display: block;
}
.woocommerce-checkout #customer_details > .col-1,
.woocommerce-checkout #customer_details > .col-2 {
    float: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
}
.woocommerce-checkout #customer_details > .col-2 {
    margin-top: 1.25rem;
}

/* "Seu pedido": integrar o heading ao topo da caixa do resumo (sem gap solto). */
.woocommerce-checkout #order_review_heading {
    margin: 0;
    padding: 1.5rem 1.5rem 0;
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-bottom: none;
    border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
}
.woocommerce-checkout #order_review {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: 0;
}

/* Cupom inline (widget proprio) dentro da caixa "Seu pedido", entre os
   produtos/totais e o payment. Aparenta ser uma faixa creme separadora. */
.woocommerce-checkout .piclick-coupon-row {
    padding: 1rem 1.5rem;
    /* margin-bottom dá respiro entre a faixa cream do cupom e o card
       de pagamento abaixo — antes ficavam colados. Negative side-margins
       compensam o padding do #order_review pra faixa ir borda-a-borda. */
    margin: 0 -1.5rem 1.25rem;
    background: var(--pc-cream);
    border-top: 1px solid var(--pc-plum-soft);
    border-bottom: 1px solid var(--pc-plum-soft);
}
.woocommerce-checkout .piclick-coupon-input {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.woocommerce-checkout .piclick-coupon-input input[type="text"] {
    flex: 1;
    min-width: 0;
}
.woocommerce-checkout .piclick-coupon-input button {
    flex: 0 0 auto;
    white-space: nowrap;
}
.woocommerce-checkout .piclick-coupon-msg {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    min-height: 0;
}
.woocommerce-checkout .piclick-coupon-msg:empty {
    display: none;
}
.woocommerce-checkout .piclick-coupon-msg[data-state="error"] {
    color: #c0392b;
}
.woocommerce-checkout .piclick-coupon-msg[data-state="success"] {
    color: var(--pc-plum);
}

/* Sumir com qualquer remanescente do cupom default do Woo (caso outro plugin
   re-adicione o hook). Defensivo. */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout form.checkout_coupon {
    display: none !important;
}

/* Layout 2 colunas no checkout classico (shortcode [woocommerce_checkout]).
   Esquerda: #customer_details. Direita: .piclick-checkout-sidebar (wrapper
   injetado via inc/wc-checkout-tweaks.php) que contem cupom + "Seu pedido"
   + resumo + pagamento, todos empilhados.
   Usamos flexbox simples (nao grid-template-areas) porque o wrapper deixa
   apenas 2 filhos diretos no form.checkout — robusto contra plugins que
   injetem filhos extras.
   Mobile (< 980px) cai pra coluna unica empilhada. */
@media (min-width: 980px) {
    .woocommerce-checkout form.checkout {
        display: flex;
        flex-wrap: wrap;
        gap: 0 2rem;
        align-items: flex-start;
    }
    /* Notices viram banda full-width no topo */
    .woocommerce-checkout form.checkout > .woocommerce-NoticeGroup,
    .woocommerce-checkout form.checkout > .woocommerce-notices-wrapper {
        flex: 1 1 100%;
        order: -1;
    }
    .woocommerce-checkout #customer_details {
        flex: 1.3 1 0;
        min-width: 0;
        margin-bottom: 0;
    }
    .woocommerce-checkout .piclick-checkout-sidebar {
        flex: 1.2 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
}
/* Mobile: sidebar continua empilhando seus filhos verticalmente */
.woocommerce-checkout .piclick-checkout-sidebar {
    display: flex;
    flex-direction: column;
}
.woocommerce-checkout h3 {
    color: var(--pc-plum);
    margin-top: 0;
}
.woocommerce-checkout #payment {
    background: var(--pc-cream);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 1.25rem;
}
.woocommerce-checkout #payment ul.payment_methods {
    border-bottom: 1px solid var(--pc-plum-soft);
    padding: 0;
    list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
    padding: 0.75rem 0;
    border-top: 1px solid var(--pc-plum-soft);
}
.woocommerce-checkout #payment ul.payment_methods li:first-child {
    border-top: none;
}
.woocommerce-checkout #payment div.payment_box {
    background: var(--pc-white);
    border: 1px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-sm);
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--pc-plum);
}
.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

/* ---------- Checkout — Mini-seções com pill ---------- */
/* Cada bloco lógico do checkout (billing, shipping, notes) vira um "card"
   com border plum-soft + pill colorida de título. Reusa a paleta dos cards
   da Minha Conta pra manter coerência visual. */
.piclick-co-section {
    position: relative;
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 2rem 1.5rem 1.5rem;
    margin: 0 0 1.25rem;
}
.piclick-co-section + .piclick-co-section {
    margin-top: 0;
}

/* Pill de título — versão "label" (sem sombra chunky, border 2px) pra NÃO
   competir visualmente com o botão Finalizar (que usa sombra 0 5px 0 plum). */
.piclick-co-section__pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 2px solid var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 0.72rem;
    color: var(--pc-plum);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: absolute;
    top: -0.7rem;
    left: 1.25rem;
}
.piclick-co-section__pill--butter { background: var(--pc-butter); }
.piclick-co-section__pill--peach { background: var(--pc-peach); color: var(--pc-plum); }
/* pink agora outline (fundo branco com texto plum) pra zero competição com CTA */
.piclick-co-section__pill--pink { background: var(--pc-white); color: var(--pc-plum); }

/* Mobile: zera margens encadeadas pra os cards .piclick-co-section terem
   largura útil. Estrutura aninhada:
     .piclick-woo-page    (padding 1rem)
       #customer_details  (card branco + border + padding 1.5rem)
         .piclick-co-section (mini-cards SEUS DADOS / ENDEREÇO / MAIS DETALHES)
   Sem este reset, 16 + 24 + 24 = 64px de cada lado em telas estreitas.
   #customer_details vira pure layout (sem card visual — os mini-cards já são
   cards). #order_review reduz só o padding (continua sendo um card único). */
@media (max-width: 600px) {
    body.woocommerce-checkout .piclick-woo-page {
        padding-left: 0;
        padding-right: 0;
    }
    .woocommerce-checkout #customer_details {
        background: none;
        border: none;
        padding: 0;
        margin-bottom: 1rem;
        border-radius: 0;
    }
    .woocommerce-checkout #order_review {
        padding: 0.75rem;
    }
    .woocommerce-checkout .piclick-co-section {
        padding: 1.75rem 0.9rem 1.1rem;
    }
}

/* Esconde os <h3> default do Woo ("Detalhes de cobrança", "Detalhes para entrega",
   "Informação adicional") — a pill já dá o título.
   ATENÇÃO: o h3 do Woo vive FORA do .piclick-co-section (renderiza ANTES do
   hook woocommerce_before_checkout_billing_form), então o seletor real precisa
   ser o wrapper Woo, não o nosso. Mantemos `> h3` como defensivo.
   EXCEÇÃO: <h3 id="ship-to-different-address"> NÃO é heading — é o wrapper
   do checkbox "Entregar em endereço diferente". Esconder mata o controle. */
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3:not(#ship-to-different-address),
.woocommerce-checkout .woocommerce-additional-fields > h3,
.piclick-co-section > h3 {
    display: none;
}

/* Visual do checkbox "Entregar em endereço diferente" — fica como toggle
   próprio (não h3 de seção). Reset do font-weight/size típico de h3. */
.woocommerce-checkout h3#ship-to-different-address {
    font-family: var(--pc-font-action);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pc-plum);
    margin: 0.25rem 0;
    padding: 0.65rem 1rem;
    background: var(--pc-cream);
    border: 1px dashed rgba(96, 11, 46, 0.25);
    border-radius: var(--pc-radius-md);
}
.woocommerce-checkout h3#ship-to-different-address label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
}
.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pc-pink);
    cursor: pointer;
}

/* Sub-divider visual dentro do card "Seus dados" entre endereço e persontype/cpf.
   Persontype field vem do plugin Calculadora — id #billing_persontype_field.
   Pega o sibling :before como linha divisora. */
.piclick-co-section--billing #billing_persontype_field {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(96, 11, 46, 0.2);
}

/* ---------- Checkout — Ajustes do "Seu pedido" (thead, shipping, cupom) ---------- */
/* Esconde a thead "PRODUTO / SUBTOTAL" — labels redundantes (cada row mostra
   thumb + nome + preço explicitamente). Remove a linha divisória entre o
   heading "Seu pedido" e a primeira row do produto. */
.woocommerce-checkout-review-order-table thead {
    display: none;
}
/* Também mata o border-top da table E do #order_review wrapper pra heading +
   resumo virarem UM card contínuo (sem 2 linhas empilhadas no meio). */
.woocommerce-checkout #order_review {
    border-top: none;
}
.woocommerce-checkout-review-order-table {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Shipping methods (lista de opções de frete) — melhora respiro e legibilidade.
   Sem isso, 2+ opções ficam coladas e o label "Envio" quebra em várias linhas. */
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th {
    vertical-align: top;
    white-space: nowrap;
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-methods li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-methods li input[type="radio"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-methods li label {
    margin: 0;
    line-height: 1.35;
    font-size: 0.85rem;
    color: var(--pc-plum);
    font-family: var(--pc-font-body);
    font-weight: 400;
}

/* Cupom: input vira pill (border-radius 999px) pra combinar com o botão Aplicar.
   Sem isso o input herda --pc-radius-md (1.25rem) do .form-row genérico e fica
   "quadrado" comparado ao botão. */
.woocommerce-checkout .piclick-coupon-input input[type="text"] {
    border-radius: 999px !important;
    border: 2px solid var(--pc-plum-soft);
    padding: 0.55rem 1rem;
    background: var(--pc-white);
    font-family: var(--pc-font-body);
    font-size: 0.9rem;
    color: var(--pc-plum);
}
.woocommerce-checkout .piclick-coupon-input input[type="text"]:focus {
    border-color: var(--pc-plum);
    outline: none;
}

/* ---------- Checkout — Select2 (Estado, País) consistente ---------- */
/* O Woo envolve <select> com Select2 que tem seu próprio markup e estilos.
   Aqui re-estilizamos pra parecer um <input> do mesmo card. */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: auto;
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.55rem 0.95rem;
    font-family: var(--pc-font-body);
    color: var(--pc-plum);
    transition: border-color 0.15s ease;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.4;
    color: var(--pc-plum);
    font-size: 0.95rem;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    height: auto;
    width: auto;
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--pc-plum) transparent transparent transparent;
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pc-plum);
}
.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--pc-plum) transparent;
}
/* Dropdown aberto */
.select2-container--default .select2-dropdown {
    border: 2px solid var(--pc-plum);
    border-radius: var(--pc-radius-md);
    margin-top: 0.25rem;
    box-shadow: 0 8px 24px rgba(96, 11, 46, 0.18);
    overflow: hidden;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--pc-pink-soft);
    color: var(--pc-plum);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-sm);
    padding: 0.5rem 0.7rem;
}

/* ---------- Checkout — Textarea de observações consistente ---------- */
/* O #order_comments_field herda do .form-row genérico mas com alguns sobrescritos
   internos do Woo que dão aparência levemente diferente. Reforça aqui pra ficar
   idêntico aos inputs do card. */
.woocommerce-checkout #order_comments_field {
    margin-top: 0;
}
.woocommerce-checkout #order_comments_field label {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    display: block;
}
.woocommerce-checkout #order_comments_field textarea {
    width: 100%;
    min-height: 5rem;
    padding: 0.7rem 0.95rem;
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    background: var(--pc-white);
    color: var(--pc-plum);
    font-family: var(--pc-font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.woocommerce-checkout #order_comments_field textarea:focus {
    border-color: var(--pc-plum);
    outline: none;
}

/* ---------- Checkout — Top notice é controlado por JS (não CSS) ----------
   Lógica de mostrar/esconder o .woocommerce-NoticeGroup-checkout no topo
   foi movida pra checkout-polish.js (ajaxComplete + checkout_error):
   - Validação de campo (com .form-row.woocommerce-invalid): JS REMOVE
     o group do DOM (alerta no topo é redundante com o inline).
   - Erro de pagamento/gateway (sem .form-row.woocommerce-invalid): JS
     MANTÉM o group + scrolla até ele (única fonte da mensagem pro user).

   A regra CSS antiga (display: none !important em ambos) escondia
   indiscriminadamente — usuário nunca via erro do Mercado Pago. */

/* Mantém erros visíveis EM CAMPO: garante que .woocommerce-invalid
   ainda destaque o input. */
.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-container--default .select2-selection--single {
    border-color: #c0392b !important;
    background: rgba(192, 57, 43, 0.04);
}
.woocommerce-checkout .form-row.woocommerce-invalid label {
    color: #c0392b;
}

/* ---------- Checkout — Item do "Seu pedido" com thumb ---------- */
/* Estrutura final (review-order.php override):
   <tr class="cart_item">
     <td class="product-name">
       <span class="piclick-co-item">
         <span class="piclick-co-item__thumb"><img></span>
         <span class="piclick-co-item__body">
           <span class="piclick-co-item__name">...</span>
           <span class="piclick-co-item__meta">...</span>
           <span class="piclick-co-item__qty">...</span>
         </span>
       </span>
     </td>
     <td class="product-total">R$ X,XX</td>
   </tr>
*/

/* Reset da td.product-name pra deixar o grid interno respirar */
.woocommerce-checkout-review-order-table .cart_item td.product-name {
    padding-right: 0.5rem;
}
.woocommerce-checkout-review-order-table .cart_item td.product-total {
    text-align: right;
    vertical-align: top;
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    white-space: nowrap;
}

.piclick-co-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0.75rem;
    align-items: start;
}
.piclick-co-item__thumb {
    width: 48px;
    height: 48px;
    border-radius: var(--pc-radius-sm);
    overflow: hidden;
    border: 2px solid var(--pc-plum-soft);
    background: var(--pc-white);
}
.piclick-co-item__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.piclick-co-item__body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.piclick-co-item__name {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    font-size: 0.95rem;
    line-height: 1.25;
}
.piclick-co-item__meta {
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(96, 11, 46, 0.7);
}
/* DL: cada par dt+dd vira UMA linha (grid 2-col: label | valor).
   Antes os elementos eram `display: inline` com `•` separador, mas em coluna
   estreita cada palavra quebrava. Grid resolve: rótulo à esquerda, valor à
   direita, próximo par na linha de baixo.
   Removido também o `::after { content: ': ' }` no dt porque o Woo já
   adiciona o colon no texto do <dt> (causava "Tamanho::" duplo). */
.piclick-co-item__meta dl {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.1rem 0.5rem;
}
.piclick-co-item__meta dl dt {
    margin: 0;
    padding: 0;
    font-weight: 700;
}
.piclick-co-item__meta dl dd {
    margin: 0;
    padding: 0;
}

/* UL (.wc-item-meta): cada <li> é "Label: Value" inline. Empilha um por linha. */
.piclick-co-item__meta .wc-item-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.piclick-co-item__meta .wc-item-meta li {
    margin: 0;
    padding: 0;
}
.piclick-co-item__meta .wc-item-meta .wc-item-meta-label {
    font-weight: 700;
    margin-right: 0.25rem;
}
.piclick-co-item__qty {
    font-size: 0.75rem;
    color: rgba(96, 11, 46, 0.55);
    font-family: var(--pc-font-action);
    font-weight: 600;
}

/* ---------- Checkout — Total como herói ---------- */
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 2px solid var(--pc-plum-soft);
}
.woocommerce-checkout-review-order-table tfoot .order-total th {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1rem;
    color: var(--pc-plum);
    text-transform: none;
    letter-spacing: 0;
}
.woocommerce-checkout-review-order-table tfoot .order-total td {
    text-align: right;
}
.woocommerce-checkout-review-order-table tfoot .order-total .amount {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--pc-pink);
    line-height: 1;
}

/* Subtotal/Shipping/Fees menos prominentes pra hierarquia */
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) th,
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) td {
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    color: rgba(96, 11, 46, 0.85);
    border-top: none;
}
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) th {
    font-family: var(--pc-font-action);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}
.woocommerce-checkout-review-order-table tfoot tr:not(.order-total) td {
    text-align: right;
}

/* ---------- Checkout — Microinterações: pulse, flash, shake, loading ---------- */
@keyframes pc-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.pc-pulse {
    animation: pc-pulse 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    transform-origin: center right;
}
@keyframes pc-shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-6px); }
    50%  { transform: translateX(6px); }
    75%  { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}
.piclick-coupon-input input.is-shake {
    animation: pc-shake 350ms ease-in-out;
    border-color: #c0392b !important;
}
@keyframes pc-flash-success {
    0%   { background: var(--pc-cream); }
    30%  { background: rgba(16, 185, 129, 0.18); }
    100% { background: var(--pc-cream); }
}
.piclick-coupon-row.is-success {
    animation: pc-flash-success 1.5s ease-out;
}

.woocommerce-checkout #place_order.is-loading {
    pointer-events: none;
    opacity: 0.75;
    position: relative;
    padding-left: 2.5rem !important;
}
@keyframes pc-spin {
    from { transform: translateY(-50%) rotate(0deg); }
    to   { transform: translateY(-50%) rotate(360deg); }
}
.woocommerce-checkout #place_order.is-loading::before {
    content: '';
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: var(--pc-white);
    border-radius: 50%;
    animation: pc-spin 0.8s linear infinite;
}

.woocommerce-checkout #order_review.is-updating {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* ---------- Checkout — Mobile (< 980px) ---------- */
@media (max-width: 979px) {
    /* Em mobile, ordem natural: form de cobrança primeiro, sidebar com resumo
       + payment + Finalizar embaixo. Stack invertido foi tentado mas colocava
       o botão "Finalizar" antes dos campos a preencher — fluxo quebrado. */
    .woocommerce-checkout .piclick-checkout-sidebar,
    .woocommerce-checkout #customer_details {
        width: 100%;
    }

    /* Mini-seções: padding reduzido pra caber em telas pequenas */
    .piclick-co-section {
        padding: 1.5rem 1rem 1rem;
    }
    .piclick-co-section__pill {
        left: 1rem;
        font-size: 0.72rem;
        padding: 0.3rem 0.8rem;
    }

    /* Sidebar compacta: o heading "Seu pedido" + #order_review continuam
       visíveis full. Mantém simples na primeira iteração — sticky-collapse
       fica como upgrade futuro se cliente reclamar. */
    .woocommerce-checkout #order_review_heading {
        font-size: 1.1rem;
    }

    /* Total em mobile fica ainda mais destacado */
    .woocommerce-checkout-review-order-table tfoot .order-total .amount {
        font-size: 1.35rem;
    }
}

/* Em telas estreitas (<600px), Nome/Sobrenome (e quaisquer outros pares
   .form-row-first/.form-row-last) empilham 1 por linha pra não ficarem
   estreitos demais pra digitar.
   ATENÇÃO especificidade: o Woo tem `.woocommerce form .form-row-first`
   (0,0,2,1) com `width: 47%`. Pra vencer precisamos casar a especificidade
   E usar !important pra blindar contra plugins (Calculadora de Frete etc)
   que sobrescrevem com inline styles ou regras próprias. */
@media (max-width: 600px) {
    .woocommerce-checkout form .form-row-first,
    .woocommerce-checkout form .form-row-last,
    .woocommerce-page form .form-row-first,
    .woocommerce-page form .form-row-last {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
}

/* ---------- Cart — Totais como herói (desktop e mobile) ---------- */
.woocommerce .cart-collaterals .cart_totals .order-total .amount {
    font-size: 1.65rem;
    color: var(--pc-pink);
    font-family: var(--pc-font-action);
    font-weight: 800;
}
.woocommerce .cart-collaterals .cart_totals .order-total th {
    font-family: var(--pc-font-action);
    font-weight: 800;
    color: var(--pc-plum);
    border-top: 2px solid var(--pc-plum-soft);
    padding-top: 1rem;
}
.woocommerce .cart-collaterals .cart_totals .order-total td {
    border-top: 2px solid var(--pc-plum-soft);
    padding-top: 1rem;
    text-align: right;
}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    box-shadow: 0 6px 0 0 var(--pc-plum) !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.05rem !important;
}

/* ---------- Minha Conta ---------- */
/* Grid sidebar + content SO quando logado (tem nav). Sem :has, o grid
   aplica tambem no deslogado e a primeira coluna vazia empurra os forms
   pra direita. */
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 1.5rem;
    align-items: flex-start;
}
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
    display: none;
}
@media (max-width: 768px) {
    .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
/* Deslogado: limita largura + centraliza os 2 cards (login + registro) */
.woocommerce-account .woocommerce:not(:has(.woocommerce-MyAccount-navigation)) {
    max-width: 900px;
    margin: 0 auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--pc-cream);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    overflow: hidden;
    width: auto;
    float: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
    border-top: 1px solid var(--pc-plum-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child {
    border-top: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.2rem;
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 600;
    transition: background 0.15s ease, box-shadow 0.15s ease, font-weight 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover {
    background: var(--pc-pink-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--pc-butter);
    box-shadow: inset 4px 0 0 var(--pc-plum);
    font-weight: 800;
}
/* Primeiro/ultimo item precisam herdar o raio do container — sem isso a
   barra de ativo (box-shadow inset) e o bg do hover tem cantos quadrados
   que vazam por cima/abaixo da curva do nav. */
.woocommerce-account .woocommerce-MyAccount-navigation li:first-child a {
    border-top-left-radius: calc(var(--pc-radius-lg) - 2px);
    border-top-right-radius: calc(var(--pc-radius-lg) - 2px);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
    border-bottom-left-radius: calc(var(--pc-radius-lg) - 2px);
    border-bottom-right-radius: calc(var(--pc-radius-lg) - 2px);
}
.woocommerce-account .woocommerce-MyAccount-navigation .piclick-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    color: currentColor;
}
.woocommerce-account .woocommerce-MyAccount-navigation .piclick-icon svg {
    width: 100%;
    height: 100%;
}
/* Sair: separado conceitualmente do resto + cor mais sutil pra nao competir
   visualmente com Painel/Pedidos/etc. Hover ganha leve hint de cuidado. */
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout a {
    color: rgba(96, 11, 46, 0.65);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout:not(.is-active) a:hover {
    background: rgba(204, 51, 102, 0.08);
    color: var(--pc-plum);
}

.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem;
    width: auto;
    float: none;
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.75rem 1.25rem 1.25rem;
    margin: 1.5rem 0 1rem;
}
.woocommerce-account .woocommerce-MyAccount-content legend {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    padding: 0 0.5rem;
    font-size: 0.95rem;
}

.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-message {
    flex-wrap: wrap;
    gap: 0.85rem;
}
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-message .button {
    margin-left: 0;
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    margin-top: 0;
    color: var(--pc-plum);
}
.woocommerce-MyAccount-content > p:first-child,
.woocommerce-MyAccount-content > .woocommerce > p:first-child {
    margin-top: 0;
}

/* === Minha Conta: Dashboard customizado ===
   Override em woocommerce/myaccount/dashboard.php — substitui o paragrafo
   default do Woo por saudacao + card do ultimo pedido + 3 cards de atalho. */
.piclick-account-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.piclick-account-dashboard__greeting-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.piclick-account-dashboard__greeting {
    margin: 0;
    font-family: var(--pc-font-action);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--pc-plum);
}
.piclick-account-dashboard__greeting span {
    color: var(--pc-pink);
}
.piclick-account-dashboard__greeting-hint {
    display: inline-block;
    color: var(--pc-pink);
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    width: fit-content;
}
.piclick-account-dashboard__greeting-hint:hover {
    color: var(--pc-plum);
}

/* Card horizontal "Ultimo pedido" */
.piclick-account-last-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--pc-cream);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 1.25rem 1.5rem;
    color: var(--pc-plum);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.piclick-account-last-order:hover {
    transform: translateY(-2px);
    border-color: var(--pc-plum);
    color: var(--pc-plum);
    text-decoration: none;
}
.piclick-account-last-order__info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}
.piclick-account-last-order__label {
    font-family: var(--pc-font-action);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(96, 11, 46, 0.65);
}
.piclick-account-last-order__number {
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--pc-plum);
}
.piclick-account-last-order__total {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    text-align: right;
}
.piclick-account-last-order__total .amount {
    font-size: 1.15rem;
}
.piclick-account-last-order__cta {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pc-pink);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
@media (max-width: 540px) {
    .piclick-account-last-order {
        flex-direction: column;
        align-items: flex-start;
    }
    .piclick-account-last-order__total {
        align-items: flex-start;
        text-align: left;
    }
}

/* Empty state: sem pedidos */
.piclick-account-last-order--empty {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    background: var(--pc-pink-soft);
    border-color: var(--pc-pink);
}
.piclick-account-last-order__empty-cta {
    display: inline-block;
    background: var(--pc-plum);
    color: var(--pc-white);
    font-family: var(--pc-font-action);
    font-weight: 700;
    padding: 0.65rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.piclick-account-last-order__empty-cta:hover {
    background: var(--pc-pink);
    color: var(--pc-white);
    text-decoration: none;
    transform: translateY(-2px);
}

/* === Status pill (reusavel — usado em dashboard, pedidos, etc) === */
.piclick-status-pill {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-family: var(--pc-font-action);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--pc-butter);
    color: var(--pc-plum);
    border: 1px solid rgba(96, 11, 46, 0.15);
    width: fit-content;
}
.piclick-status-pill--completed {
    background: var(--pc-pink-soft);
    border-color: rgba(204, 51, 102, 0.3);
}
.piclick-status-pill--cancelled,
.piclick-status-pill--refunded,
.piclick-status-pill--failed {
    background: var(--pc-plum-soft);
    color: rgba(96, 11, 46, 0.6);
}

/* === Cards de atalho === */
.piclick-account-dashboard__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
@media (max-width: 720px) {
    .piclick-account-dashboard__cards {
        grid-template-columns: 1fr;
    }
}
.piclick-account-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 1.25rem 1.25rem 2.75rem;
    color: var(--pc-plum);
    text-decoration: none;
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.piclick-account-card:hover {
    transform: translateY(-2px);
    border-color: var(--pc-plum);
    background: var(--pc-cream);
    color: var(--pc-plum);
    text-decoration: none;
}
.piclick-account-card .piclick-icon {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--pc-pink);
    margin-bottom: 0.35rem;
}
.piclick-account-card .piclick-icon svg {
    width: 100%;
    height: 100%;
}
.piclick-account-card h3 {
    margin: 0;
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 1rem;
    color: var(--pc-plum);
}
.piclick-account-card p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(96, 11, 46, 0.7);
}
.piclick-account-card__arrow {
    position: absolute;
    bottom: 1rem;
    right: 1.25rem;
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-pink);
    transition: transform 0.15s ease;
}
.piclick-account-card:hover .piclick-account-card__arrow {
    transform: translateX(3px);
}

/* === Minha Conta: Pedidos ===
   Override em woocommerce/myaccount/orders.php — substitui a tabela default
   por lista de cards. Mais coerente com o resto da Minha Conta + mais limpo
   em mobile (sem precisar do truque shop_table_responsive do Woo). */
.piclick-orders-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.piclick-order-card {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 1.25rem 1.5rem;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.piclick-order-card:hover {
    border-color: var(--pc-plum);
    transform: translateY(-2px);
}
.piclick-order-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}
.piclick-order-card__id {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.piclick-order-card__number {
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--pc-plum);
    text-decoration: none;
}
.piclick-order-card__number:hover {
    color: var(--pc-pink);
    text-decoration: none;
}
.piclick-order-card__total {
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--pc-plum);
    white-space: nowrap;
}
.piclick-order-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.piclick-order-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(96, 11, 46, 0.7);
    font-size: 0.875rem;
}
.piclick-order-card__dot {
    color: rgba(96, 11, 46, 0.4);
}
.piclick-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
/* Acoes: view = primaria (plum solid), pay = pink solid (mais urgente),
   cancel = ghost. Outras acoes desconhecidas caem no estilo default (view). */
.piclick-order-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: var(--pc-plum);
    color: var(--pc-white);
    border: 1px solid var(--pc-plum);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.piclick-order-action:hover {
    background: var(--pc-pink);
    color: var(--pc-white);
    border-color: var(--pc-pink);
    text-decoration: none;
    transform: translateY(-1px);
}
.piclick-order-action--pay {
    background: var(--pc-pink);
    border-color: var(--pc-pink);
}
.piclick-order-action--pay:hover {
    background: var(--pc-plum);
    border-color: var(--pc-plum);
}
.piclick-order-action--cancel {
    background: transparent;
    color: var(--pc-plum);
    border-color: var(--pc-plum-soft);
}
.piclick-order-action--cancel:hover {
    background: var(--pc-plum-soft);
    color: var(--pc-plum);
    border-color: var(--pc-plum-soft);
}

/* Mobile: empilha header (id + total) e body (meta + acoes) */
@media (max-width: 540px) {
    .piclick-order-card__header,
    .piclick-order-card__body {
        flex-direction: column;
        align-items: flex-start;
    }
    .piclick-order-card__actions {
        width: 100%;
    }
    .piclick-order-action {
        flex: 1;
        justify-content: center;
    }
}

/* Paginacao */
.piclick-orders-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 1rem;
}
.piclick-orders-pagination__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: var(--pc-cream);
    color: var(--pc-plum);
    border: 2px solid var(--pc-plum-soft);
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.piclick-orders-pagination__link:hover {
    background: var(--pc-butter);
    border-color: var(--pc-plum);
    color: var(--pc-plum);
    text-decoration: none;
}

/* Empty state: sem pedidos */
.piclick-account-orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    background: var(--pc-pink-soft);
    border: 2px solid var(--pc-pink);
    border-radius: var(--pc-radius-md);
    padding: 2.5rem 1.5rem;
}
.piclick-account-orders-empty .piclick-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--pc-pink);
    margin-bottom: 0.25rem;
}
.piclick-account-orders-empty .piclick-icon svg {
    width: 100%;
    height: 100%;
}
.piclick-account-orders-empty h3 {
    margin: 0;
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--pc-plum);
}
.piclick-account-orders-empty p {
    margin: 0;
    max-width: 360px;
    color: rgba(96, 11, 46, 0.75);
    font-size: 0.95rem;
    line-height: 1.5;
}
.piclick-account-orders-empty__cta {
    display: inline-block;
    margin-top: 0.5rem;
    background: var(--pc-plum);
    color: var(--pc-white);
    font-family: var(--pc-font-action);
    font-weight: 700;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.piclick-account-orders-empty__cta:hover {
    background: var(--pc-pink);
    color: var(--pc-white);
    text-decoration: none;
    transform: translateY(-2px);
}

/* === Minha Conta: Detalhes da conta ===
   Override em woocommerce/myaccount/form-edit-account.php — agrupa campos
   em <fieldset>s e usa CSS Grid 2-col pra Nome + Sobrenome. */
.woocommerce-EditAccountForm {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.woocommerce-EditAccountForm .piclick-account-section {
    /* Reusa o fieldset styling base (border + padding + radius) mas
       sobrescreve o margin do existente pra ficar coerente com o gap
       do flex do form pai. */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.piclick-account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 540px) {
    .piclick-account-form-grid {
        grid-template-columns: 1fr;
    }
}
/* Override do float-based layout default do Woo (form-row-first/last 47%).
   Prefixo "form." pra empatar especificidade com .woocommerce form .form-row-first
   do woocommerce-layout.css; source order garante que ganhamos. */
form.woocommerce-EditAccountForm .form-row,
form.woocommerce-EditAccountForm .form-row-first,
form.woocommerce-EditAccountForm .form-row-last,
form.woocommerce-EditAccountForm .form-row-wide {
    width: auto;
    float: none;
    display: flex;
    flex-direction: column;
    margin: 0;
}
/* Asterisco de required em pink. Woo default tem visibility: hidden com
   especificidade alta (.woocommerce form .form-row .required), entao
   precisamos espelhar e adicionar visibility: visible. */
form.woocommerce-EditAccountForm .form-row .required {
    color: var(--pc-pink);
    text-decoration: none;
    visibility: visible;
}
/* Descricao em italico do "Nome de exibição" — footnote */
.woocommerce-EditAccountForm em {
    display: block;
    font-style: normal;
    font-size: 0.8rem;
    color: rgba(96, 11, 46, 0.65);
    margin-top: 0.4rem;
    line-height: 1.4;
}
.woocommerce-EditAccountForm > .form-row > span {
    display: block;
}
.piclick-account-form-submit {
    margin: 0.5rem 0 0;
    display: flex;
}

/* Endereços */
.woocommerce-account .woocommerce-Addresses,
.woocommerce-account .u-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin: 0;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after,
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after {
    display: none;
}
@media (max-width: 640px) {
    .woocommerce-account .woocommerce-Addresses,
    .woocommerce-account .u-columns {
        grid-template-columns: 1fr;
    }
}
.woocommerce-account .woocommerce-Address,
.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
    width: auto !important;
    float: none !important;
    background: var(--pc-cream);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.85rem 0.6rem 1rem;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-Address-title,
.woocommerce-account .woocommerce-Address header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem 0.75rem;
    /* Margin negativa estende o header ate as bordas do card (sem isso, a
       border-bottom para no padding-x do card). Padding interno alinha
       com o card padding-x. */
    margin: 0 -0.6rem 0.85rem;
    padding: 0 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(96, 11, 46, 0.12);
}
@media (max-width: 640px) {
    .woocommerce-account .woocommerce-Address-title,
    .woocommerce-account .woocommerce-Address header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* Titulo do card vira "etiqueta" (uppercase + menor) pra nao competir com o
   nome do cliente. align-items: center alinha o EDITAR na mesma altura visual. */
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    font-size: 0.8rem;
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: rgba(96, 11, 46, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.woocommerce-account .woocommerce-Address-title .edit {
    flex-shrink: 0;
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-pink);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
    color: var(--pc-plum);
}
.woocommerce-account .woocommerce-Address address,
.woocommerce-Address address,
.woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.6;
    color: rgba(96, 11, 46, 0.85);
    margin: 0;
    font-size: 0.9rem;
}
/* Primeira linha do <address> (nome do cliente) vira o destaque visual do card. */
.woocommerce-account .woocommerce-Address address::first-line,
.woocommerce-Address address::first-line {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--pc-plum);
}

/* Tabela de pedido em mobile fica mais legivel */
@media (max-width: 640px) {
    .woocommerce table.shop_table {
        font-size: 0.85rem;
    }
    .woocommerce table.shop_table th,
    .woocommerce table.shop_table td {
        padding: 0.75rem 0.6rem;
    }
    .woocommerce-customer-details address {
        font-size: 0.9rem;
    }
}

/* === Minha Conta: Endereços (listing + edit) ===
   Listing usa o styling de .woocommerce-Address ja definido acima
   (linha ~1740). Aqui foco no edit form (form-edit-address.php) e
   no paragrafo de intro do listing. */

/* Intro paragraph do listing ("The following addresses will be used...") */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    font-size: 0.9rem;
    color: rgba(96, 11, 46, 0.7);
    line-height: 1.5;
    margin: 0 0 1rem;
}

/* Heading "Endereço de cobrança / entrega" no topo do edit form.
   Woo template usa <h2> (form-edit-address.php), nao <h3>. */
.woocommerce-account .woocommerce-MyAccount-content form h2 {
    margin: 0 0 1.25rem;
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--pc-plum);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Grid 2-col pro form de edicao de endereco. Mesma estrategia do
   edit-account: empata especificidade com .woocommerce form .form-row-first
   do woocommerce-layout.css e ganha por source order. */
.woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.woocommerce-address-fields__field-wrapper > p.form-row {
    grid-column: 1 / -1;
    width: auto;
    float: none;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.woocommerce-address-fields__field-wrapper > p.form-row-first {
    grid-column: 1;
}
.woocommerce-address-fields__field-wrapper > p.form-row-last {
    grid-column: 2;
}
@media (max-width: 540px) {
    .woocommerce-address-fields__field-wrapper {
        grid-template-columns: 1fr;
    }
    .woocommerce-address-fields__field-wrapper > p.form-row-first,
    .woocommerce-address-fields__field-wrapper > p.form-row-last {
        grid-column: 1 / -1;
    }
}

/* Asterisco required em pink + visivel (Woo default tem visibility:hidden
   com especif. alta). */
.woocommerce-address-fields__field-wrapper .form-row .required {
    color: var(--pc-pink);
    text-decoration: none;
    visibility: visible;
}

/* Botao "Salvar endereco" — wrap em <p> sem classe no template default.
   O <p> esta dentro de .woocommerce-address-fields, NAO direto no <form>.
   Da um respiro do field-wrapper + alinha a direita. */
.woocommerce-address-fields > p:has(button[name="save_address"]) {
    margin: 1.5rem 0 0;
    display: flex;
    justify-content: flex-end;
}

/* País/Estado: forçar border-radius + branding. Cobre tanto o <select>
   nativo (caso o Brazilian plugin desabilite Select2) quanto o wrapper
   Select2 que pode estar renderizando no lugar. !important porque o Woo
   define border-radius via var(--wc-form-border-radius) com mesma
   especificidade e a source-order pode nao ser garantida. */
.woocommerce-address-fields__field-wrapper select {
    border-radius: var(--pc-radius-md) !important;
}
.woocommerce-address-fields__field-wrapper .select2-container .select2-selection {
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-md) !important;
    height: auto !important;
    padding: 0.55rem 0.95rem !important;
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body) !important;
    font-size: 0.95rem !important;
}
.woocommerce-address-fields__field-wrapper .select2-container--default .select2-selection__rendered {
    color: var(--pc-plum) !important;
    line-height: 1.4 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.woocommerce-address-fields__field-wrapper .select2-container--default .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.5rem !important;
}

/* Select2 dropdown popup (parte expandida) — appended ao <body>, entao
   precisa de seletor global (sem scope no field-wrapper). */
.select2-dropdown {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(96, 11, 46, 0.12);
}
.select2-search--dropdown {
    padding: 0.6rem;
}
.select2-search--dropdown .select2-search__field {
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-sm);
    padding: 0.5rem 0.75rem;
    font-family: var(--pc-font-body);
    font-size: 0.9rem;
    color: var(--pc-plum);
    background: var(--pc-white);
    outline: none;
    width: 100%;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--pc-plum);
}
.select2-results__options {
    max-height: 240px;
    padding: 0.25rem;
}
.select2-results__option {
    padding: 0.5rem 0.75rem;
    border-radius: var(--pc-radius-sm);
    font-family: var(--pc-font-body);
    color: var(--pc-plum);
    font-size: 0.9rem;
}
/* Hover/keyboard highlight — pink-soft + plum (vs azul padrao do Select2).
   Especificidade alta pra bater o default .select2-container--default ... */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pc-pink-soft);
    color: var(--pc-plum);
}
/* Opcao atualmente selecionada — butter + bold */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background-color: var(--pc-butter);
    color: var(--pc-plum);
    font-weight: 700;
}

/* Esconder checkboxes redundantes do edit-address (mesma decisao do checkout):
   - lkn_*_checkbox_field = "Sem número (S/N)" do plugin Link Nacional.
     Como forcamos numero obrigatorio (inc/wc-checkout-tweaks.php), bypass nao serve.
   - wc_better_calc_checkbox_*_field = "Usar o endereço retornado pelo CEP".
     Os campos ja vem preenchidos automaticamente, o confirm vira ruido. */
.woocommerce-address-fields__field-wrapper [id^="lkn_"][id$="_checkbox_field"],
.woocommerce-address-fields__field-wrapper [id^="wc_better_calc_checkbox_"] {
    display: none !important;
}

/* === Minha Conta: View Order (detalhes do pedido) ===
   Template woocommerce/myaccount/view-order.php + order/order-details.php
   + order/order-details-customer.php. Endereco usa as mesmas regras de card
   do listing (.woocommerce-Address), mas com classes diferentes
   (.woocommerce-customer-details + .woocommerce-column__title). */

/* Paragrafo intro: "O pedido #N foi realizado em DATA e atualmente esta STATUS"
   — os <mark> ja vem com bg yellow do browser default. Limpamos. */
.woocommerce-MyAccount-content > p:first-child mark {
    background: transparent;
    color: var(--pc-plum);
    font-weight: 700;
    padding: 0;
}

/* Headings das secoes de endereco do customer-details (h2.woocommerce-column__title).
   Default do h2 fica grande demais — usamos estilo etiqueta igual o listing. */
.woocommerce-customer-details .woocommerce-column__title {
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(96, 11, 46, 0.65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.6rem;
}

/* Grid 2-col pros 2 cards de endereco (billing + shipping) */
.woocommerce-customer-details .woocommerce-columns--addresses,
.woocommerce-customer-details .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.woocommerce-customer-details .woocommerce-columns--addresses::before,
.woocommerce-customer-details .woocommerce-columns--addresses::after,
.woocommerce-customer-details .col2-set::before,
.woocommerce-customer-details .col2-set::after {
    display: none;
}
.woocommerce-customer-details .woocommerce-column {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
@media (max-width: 640px) {
    .woocommerce-customer-details .woocommerce-columns--addresses,
    .woocommerce-customer-details .col2-set {
        grid-template-columns: 1fr;
    }
}

/* Address cards — mesmo styling do listing (.woocommerce-Address) */
.woocommerce-customer-details address {
    background: var(--pc-cream);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.85rem 0.6rem 1rem;
    font-style: normal;
    line-height: 1.6;
    color: rgba(96, 11, 46, 0.85);
    font-size: 0.9rem;
    margin: 0;
}
/* Primeira linha (nome do cliente) bold + maior */
.woocommerce-customer-details address::first-line {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--pc-plum);
}
/* Telefone e email aparecem como <p> dentro do <address> com icones do Woo */
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
    margin: 0.5rem 0 0 !important;
    font-size: 0.9rem;
    color: rgba(96, 11, 46, 0.85);
}

/* === Tabela de itens do pedido (order_details) ===
   Header e rows ja inherit do .shop_table generico (linha ~289+).
   Aqui foco no <tfoot> com botoes "Pagar/Cancelar" — default chunky pink
   fica grande demais nessa cell. Usa pill style igual order-actions da
   lista de pedidos. */
.woocommerce-table--order-details tfoot th.order-actions--heading,
.woocommerce-table.order_details tfoot th {
    font-family: var(--pc-font-action);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pc-plum);
    text-align: left;
}
/* Botoes "Pagar/Cancelar" no tfoot — pill menor, branded */
.woocommerce-table--order-details tfoot td a.woocommerce-button,
.woocommerce-table.order_details tfoot td a.woocommerce-button,
.woocommerce-table--order-details tfoot td a.button,
.woocommerce-table.order_details tfoot td a.button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--pc-plum) !important;
    color: var(--pc-white) !important;
    border: 1px solid var(--pc-plum) !important;
    box-shadow: none !important;
    margin-right: 0.4rem;
    transition: background 0.15s ease, transform 0.15s ease;
}
.woocommerce-table--order-details tfoot td a.pay,
.woocommerce-table.order_details tfoot td a.pay {
    background: var(--pc-pink) !important;
    border-color: var(--pc-pink) !important;
}
.woocommerce-table--order-details tfoot td a.cancel,
.woocommerce-table.order_details tfoot td a.cancel {
    background: transparent !important;
    color: var(--pc-plum) !important;
    border-color: var(--pc-plum-soft) !important;
}
.woocommerce-table--order-details tfoot td a:hover,
.woocommerce-table.order_details tfoot td a:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

/* Login/Register form */
.woocommerce-form-login,
.woocommerce-form-register {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}
.woocommerce-form-login__rememberme,
.woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form-row do botao "Acessar" — separa Lembre-me (acima) do botao (abaixo)
   pra evitar o "flutuante" lateral do checkbox que tinha antes. */
.woocommerce-form-login p.form-row:has(button[name="login"]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
}

/* "Perdeu sua senha?" — link visivel com pink + underline ao inves de
   parecer texto comum. */
.woocommerce-form-login .lost_password,
.woocommerce-LostPassword {
    margin: 1rem 0 0;
}
.woocommerce-form-login .lost_password a,
.woocommerce-LostPassword a {
    display: inline-block;
    color: var(--pc-pink);
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.woocommerce-form-login .lost_password a:hover,
.woocommerce-LostPassword a:hover {
    color: var(--pc-plum);
}

/* Textos auxiliares no form de registro (instrucao de senha + privacidade)
   — vira footnote pra balancear visualmente com o card de login mais curto. */
.woocommerce-form-register > p:not(.form-row):not(.woocommerce-form-row):not(.woocommerce-FormRow),
.woocommerce-form-register .woocommerce-privacy-policy-text {
    font-size: 0.85rem;
    color: rgba(96, 11, 46, 0.7);
    line-height: 1.5;
    margin: 0 0 0.85rem;
}

/* === Lost password + Reset password ===
   Mesma classe .woocommerce-ResetPassword cobre os 2 templates (etapa 1:
   pedir email; etapa 2: definir nova senha apos clicar no link do email).
   Usa flex-wrap pra dar 50/50 nos campos de nova senha (etapa 2) sem
   quebrar a etapa 1 que tem so 1 campo. */
.woocommerce-ResetPassword {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.5rem;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
/* Default: cada <p> ocupa linha inteira. */
.woocommerce-ResetPassword > p {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
}
/* Etapa 2 (form-reset-password.php): form-row-first + form-row-last
   lado a lado em desktop. Usa :has(+) pra detectar o par — sozinho
   (etapa 1) o form-row-first cai no default 100%. */
.woocommerce-ResetPassword > p.form-row-first:has(+ p.form-row-last),
.woocommerce-ResetPassword > p.form-row-last {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 200px;
}
@media (max-width: 480px) {
    .woocommerce-ResetPassword > p.form-row-first:has(+ p.form-row-last),
    .woocommerce-ResetPassword > p.form-row-last {
        flex: 0 0 100%;
    }
}
/* Override do width:47%/float default do woocommerce-layout.css */
form.woocommerce-ResetPassword .form-row,
form.woocommerce-ResetPassword .form-row-first,
form.woocommerce-ResetPassword .form-row-last,
form.woocommerce-ResetPassword .form-row-wide {
    width: auto;
    float: none;
    display: flex;
    flex-direction: column;
}
/* Asterisco required em pink + visivel (Woo default tem visibility:hidden) */
form.woocommerce-ResetPassword .form-row .required {
    color: var(--pc-pink);
    text-decoration: none;
    visibility: visible;
}
/* Intro paragraph como footnote */
.woocommerce-ResetPassword > p:not(.form-row):not(.woocommerce-form-row) {
    font-size: 0.9rem;
    color: rgba(96, 11, 46, 0.7);
    line-height: 1.5;
}
/* Spacer .clear nao precisa em flex */
.woocommerce-ResetPassword .clear {
    display: none;
}

/* ---------- Woo Blocks: Cart + Checkout (Gutenberg) ----------
   Branding completo do Cart Block: tabela de itens, controle de qty pill,
   sidebar de totais, cupons e barra de frete gratis. */

/* Cor base */
.wc-block-cart,
.wc-block-checkout {
    color: var(--pc-plum);
}
/* Wrapper interno: sem fundo (a tabela ja e o card branco com borda) */
.wc-block-cart__main,
.wc-block-checkout__main {
    background: transparent;
}

/* === Tabela de produtos === */
.wc-block-cart-items {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-md);
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}
.wc-block-cart-items__header {
    background: var(--pc-cream);
    border-bottom: 2px solid var(--pc-plum-soft);
}
.wc-block-cart-items__header th,
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--pc-plum) !important;
    padding: 0.9rem 1rem !important;
}
.wc-block-cart-items__row {
    border-bottom: 1px solid rgba(96, 11, 46, 0.1);
}
.wc-block-cart-items__row:last-child {
    border-bottom: none;
}

/* Thumbnail */
.wc-block-cart-item__image img {
    border-radius: var(--pc-radius-sm);
}

/* Nome do produto */
.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart-item__product a {
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
.wc-block-cart-item__product a:hover {
    color: var(--pc-pink) !important;
}

/* Preco */
.wc-block-cart-item__total-price-and-sale-badge-wrapper,
.wc-block-components-product-price__value {
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 700;
}

/* Controle de qty — pill com botoes circulares */
.wc-block-components-quantity-selector {
    background: var(--pc-pink-soft) !important;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: 999px !important;
    padding: 0.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    width: auto !important;
}
.wc-block-components-quantity-selector__button {
    background: var(--pc-plum) !important;
    color: var(--pc-white) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    font-size: 1.2rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}
.wc-block-components-quantity-selector__button:hover {
    background: var(--pc-pink) !important;
}
.wc-block-components-quantity-selector__input {
    background: transparent !important;
    border: none !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
    width: 36px !important;
    text-align: center !important;
    font-size: 1rem !important;
}

/* Botao remover */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove-link:hover {
    color: var(--pc-plum) !important;
    text-decoration: none !important;
}

/* === Sidebar === */
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
    background: var(--pc-cream);
    border-radius: var(--pc-radius-lg);
    padding: 1.25rem;
}

/* Heading TOTAL NO CARRINHO */
.wp-block-woocommerce-cart-order-summary-heading-block,
.wc-block-components-sidebar-layout h2:first-of-type {
    font-family: var(--pc-font-action) !important;
    font-weight: 800 !important;
    font-size: 1.25rem !important;
    color: var(--pc-plum) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin: 0 0 1rem !important;
    padding: 0 !important;
}

/* === Checkout: forcar entrega = cobranca ===
   Esconde o checkbox "Usar o mesmo endereco para cobranca" e a secao
   de cobranca. O checkbox vem marcado por default; quando marcado, o
   plugin Link Nacional envia woo_better_shipping_as_billing=true via
   extensions, e inc/woo-better-bridge.php copia os dados de shipping
   pras meta-keys de billing no order. */
.wc-block-checkout__use-address-for-billing,
.wp-block-woocommerce-checkout-billing-address-block {
    display: none !important;
}

/* === Checkout: esconder checkbox "Sem numero (S/N)" do plugin Link Nacional ===
   Como forcamos numero obrigatorio, o bypass de "sem numero" nao faz sentido.
   O plugin reusa a mesma class .wc-block-checkout__use-address-for-shipping
   tanto pro "Endereco inserido" (confirmacao de CEP) quanto pro "Sem numero".
   Identificamos o "Sem numero" pelo vizinho — ele e o checkbox imediatamente
   antes do campo Numero (.wc-better-shipping-number). */
.wc-block-components-address-form .wc-block-components-checkbox:has(+ .wc-better-shipping-number),
.wc-block-components-address-form .wc-block-components-checkbox:has(+ .wc-block-components-address-form__number) {
    display: none !important;
}

/* === Checkout: esconder checkbox "Usar o endereco / Endereco inserido" ===
   Esse checkbox aparece apos o usuario preencher o CEP — confirma o endereco
   retornado pela API. JS em site.js marca automaticamente quando aparece,
   entao podemos escondê-lo pro auto-preenchimento ficar transparente. */
.wc-block-components-address-form__postcode + .wc-block-components-checkbox {
    display: none !important;
}

/* === Checkout: espacamento entre secoes ===
   Cada secao (.wc-block-components-checkout-step) e um <fieldset> filho do
   <form>; usamos adjacent sibling pra acrescentar respiro entre elas. */
.wc-block-components-checkout-step + .wc-block-components-checkout-step,
.wc-block-components-checkout-step + .wp-block-woocommerce-checkout-shipping-method-block,
.wp-block-woocommerce-checkout-shipping-method-block + .wc-block-components-checkout-step {
    margin-top: 2.5rem;
}

/* === Inputs do Cart/Checkout Block: padding-top extra pro floating label ===
   O Woo Blocks usa um <label> absolutamente posicionado que sobe pro topo
   quando o input tem valor/foco. Sem padding-top maior, o label sobrepoe o
   valor digitado (mesmo bug do campo de cupom).
   Seletor amplo pra cobrir tambem inputs customizados pelo plugin
   Link Nacional (Calculadora de Frete) que nao usam a classe padrao. */
.wc-block-components-text-input input.wc-block-components-text-input__input,
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="tel"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="number"],
.wc-block-cart input[type="text"][id*="postcode"],
.wc-block-checkout input[type="text"][id*="postcode"] {
    padding-top: 1.5rem !important;
    padding-bottom: 0.4rem !important;
}

/* === Itens do resumo do pedido — APENAS no checkout (sidebar) ===
   Seletor escopo: .wp-block-woocommerce-checkout-order-summary-block
   pra nao afetar outras telas que renderizam order-summary-item. */
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(96, 11, 46, 0.12);
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item:last-child {
    border-bottom: none;
}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img {
    border-radius: var(--pc-radius-sm) !important;
    border: 1px solid var(--pc-plum-soft);
}

/* Linhas Subtotal / Taxa / Frete */
.wc-block-components-totals-item {
    font-family: var(--pc-font-body);
    color: var(--pc-plum);
    padding: 0.5rem 0;
}
.wc-block-components-totals-item__label {
    color: var(--pc-plum);
    font-weight: 600;
}
.wc-block-components-totals-item__value {
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 700;
}

/* Total estimado (footer) — destaque rosa */
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
    color: var(--pc-pink);
    font-size: 1.3rem;
}
.wc-block-components-sidebar-layout .wc-block-components-totals-footer-item {
    border-top: none !important;
}

/* Cupons accordion */
.wc-block-components-totals-coupon__button,
.wc-block-components-panel__button {
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
}
.wc-block-components-totals-coupon__form input[type="text"],
.wc-block-components-totals-coupon__content input[type="text"] {
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: 0.5rem !important;
    background: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body) !important;
    /* Padding-top maior pra reservar espaco pro floating label do Woo Blocks. */
    padding: 1.5rem 0.75rem 0.5rem 0.75rem !important;
}
/* Label flutuante do cupom (Digite o codigo) */
.wc-block-components-totals-coupon label,
.wc-block-components-text-input label {
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body) !important;
}
.wc-block-components-totals-coupon__form button,
.wc-block-components-totals-coupon button[type="submit"] {
    background: var(--pc-pink) !important;
    color: var(--pc-white) !important;
    border: 2px solid var(--pc-plum) !important;
    border-radius: 999px !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
}

/* === Barra de frete gratis (plugin Woo Better Shipping / Link Nacional) ===
   Estilos inline pintam o trilho cinza (#eeeeee) e o preenchimento verde
   (#4caf50). Sobrescrevemos com !important. */
.wc-better-shipping-progress-bar > div[style*="background"] {
    background: var(--pc-pink-soft) !important;
    border-radius: 999px !important;
    border: 2px solid var(--pc-plum-soft) !important;
    overflow: hidden !important;
}
.wc-better-shipping-progress {
    background: var(--pc-pink) !important;
}
.wc-better-shipping-progress-inner-text {
    color: var(--pc-white) !important;
    text-shadow: 0 1px 2px rgba(96, 11, 46, 0.4) !important;
    font-family: var(--pc-font-action) !important;
    font-weight: 700 !important;
}
.wc-better-shipping-progress-text {
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body) !important;
}

/* Checkbox accent */
.wc-block-components-checkbox__input {
    accent-color: var(--pc-plum);
}

/* ---------- Container das páginas Woo ---------- */
body.woocommerce-page .site-main,
body.woocommerce .site-main {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem;
    padding-right: 1rem;
}
body.woocommerce-page h1.page-title,
body.woocommerce h1.page-title,
.woocommerce .woocommerce-products-header__title {
    font-family: var(--pc-font-action);
    font-weight: 800;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pc-plum);
    margin-bottom: 1.5rem;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
    font-family: var(--pc-font-action);
    color: rgba(96, 11, 46, 0.65);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}
.woocommerce-breadcrumb a {
    color: var(--pc-plum);
}

/* ============================================================
   Cart — Lista limpa (Phase 2 mochila redesign)
   ============================================================ */

/* Container raiz */
.piclick-cart-list {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    box-shadow: 0 2px 0 rgba(96, 11, 46, 0.12);
    overflow: hidden;
    transition: opacity 0.2s ease;
}

.piclick-cart-list.is-updating {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* Header "Produto / Total" */
.piclick-cart-list__header {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pc-plum-soft);
    font-family: var(--pc-font-action);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pc-plum);
    font-weight: 700;
}

.piclick-cart-list__header span:last-child {
    text-align: right;
}

/* Card de cada item */
.piclick-cart-item {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    grid-template-areas:
        "thumb body  total"
        "thumb actions actions";
    column-gap: 1.25rem;
    row-gap: 0.5rem;
    padding: 1.25rem;
    border-bottom: 1px dashed rgba(96, 11, 46, 0.18);
    align-items: start;
    transition: opacity 0.3s ease;
}

.piclick-cart-item:last-child {
    border-bottom: 0;
}

.piclick-cart-item.is-removing {
    opacity: 0;
}

/* Grid areas — desktop usa 2 rows (body+total em cima, actions full embaixo);
   mobile usa 2 rows (thumb+body em cima, actions full embaixo).
   Controla layout sem ter actions filho de body (que comia largura no mobile). */
.piclick-cart-item__thumb { grid-area: thumb; }
.piclick-cart-item__body { grid-area: body; }
.piclick-cart-item__total--column { grid-area: total; }
.piclick-cart-item__actions { grid-area: actions; }

/* Thumb */
.piclick-cart-item__thumb {
    width: 88px;
}

.piclick-cart-item__thumb img {
    width: 88px;
    height: 88px;
    border-radius: var(--pc-radius-md);
    border: 2px solid rgba(96, 11, 46, 0.2);
    background: var(--pc-cream);
    object-fit: cover;
    display: block;
}

/* Body */
.piclick-cart-item__body {
    min-width: 0;
}

.piclick-cart-item__name {
    color: var(--pc-plum);
    font-family: var(--pc-font-display);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
}

.piclick-cart-item__unit {
    color: rgba(90, 10, 41, 0.7);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.piclick-cart-item__meta {
    color: rgba(90, 10, 41, 0.85);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-top: 0.5rem;
}

/* Actions row dentro do body */
.piclick-cart-item__actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.85rem;
}

/* Quantity widget — match do drawer (pink-soft pill + plum filled buttons) */
.piclick-qty {
    display: inline-flex;
    align-items: center;
    background: var(--pc-pink-soft);
    border: 2px solid var(--pc-plum-soft);
    border-radius: 999px;
    padding: 0.15rem;
    gap: 0.25rem;
}

.piclick-qty__btn {
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    background: var(--pc-plum);
    color: var(--pc-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.piclick-qty__btn:hover:not(:disabled) {
    background: var(--pc-pink);
}

.piclick-qty__btn:active:not(:disabled) {
    transform: scale(0.95);
}

.piclick-qty__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.piclick-qty__value {
    font-family: var(--pc-font-action);
    font-weight: 700;
    color: var(--pc-plum);
    min-width: 1.2rem;
    text-align: center;
}

/* Trash button */
.piclick-cart-item__remove {
    width: 1.8rem;
    height: 1.8rem;
    background: transparent;
    border: 0;
    color: rgba(90, 10, 41, 0.6);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease;
}

.piclick-cart-item__remove:hover {
    color: var(--pc-plum);
    background: rgba(96, 11, 46, 0.08);
}

/* Total — desktop (col 3) e mobile (inline no actions) */
.piclick-cart-item__total {
    color: var(--pc-plum);
    font-family: var(--pc-font-display);
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.piclick-cart-item__total--column {
    align-self: center;
}

.piclick-cart-item__total--inline {
    display: none; /* desktop esconde, mobile (Task 8) mostra */
    margin-left: auto;
}

/* No Woo, o subtotal vem dentro de um <span class="amount"> — não estilizar específico (herda do total) */

/* Mobile (<= 768px) */
@media (max-width: 768px) {
    .piclick-cart-list__header {
        display: none;
    }

    .piclick-cart-item {
        grid-template-columns: 72px 1fr;
        grid-template-areas:
            "thumb body"
            "actions actions";
        column-gap: 0.85rem;
        row-gap: 0.5rem;
        padding: 1rem;
    }

    .piclick-cart-item__thumb {
        width: 72px;
    }

    .piclick-cart-item__thumb img {
        width: 72px;
        height: 72px;
    }

    /* Desktop total desaparece, inline aparece dentro do actions */
    .piclick-cart-item__total--column {
        display: none;
    }

    .piclick-cart-item__total--inline {
        display: inline-block;
    }

    /* Actions full-width via grid-area, separada por dashed */
    .piclick-cart-item__actions {
        margin-top: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px dashed rgba(96, 11, 46, 0.18);
    }
}

/* ============================================================
   Free shipping bar — acima da lista de items
   ============================================================ */

/* Match do drawer: pink-soft bg, pink fill; unlocked = butter bg + plum fill */
.piclick-free-shipping {
    background: var(--pc-pink-soft);
    border-radius: var(--pc-radius-md);
    padding: 0.9rem 1.25rem;
    margin-bottom: 1.25rem;
}

.piclick-free-shipping__msg {
    margin: 0 0 0.55rem;
    font-size: 0.88rem;
    color: var(--pc-plum);
    line-height: 1.35;
}

.piclick-free-shipping__msg strong {
    font-family: var(--pc-font-action);
    font-weight: 800;
    color: var(--pc-plum);
}

.piclick-free-shipping__bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    overflow: hidden;
}

.piclick-free-shipping__fill {
    height: 100%;
    background: var(--pc-pink);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Estado "atingiu o frete grátis" — butter bg + plum fill (idem drawer) */
.piclick-free-shipping.is-unlocked {
    background: var(--pc-butter);
}

.piclick-free-shipping.is-unlocked .piclick-free-shipping__fill {
    background: var(--pc-plum);
}

/* ============================================================
   Coupon — collapsible dentro do cart_totals card
   ============================================================ */

/* O .piclick-coupon agora vive DENTRO de .cart_totals (via override de cart-totals.php),
   entre a tabela de totais e o botão "Continuar para finalização". Estilo de seção
   inline com dashed divider acima/abaixo, não um card próprio. */
.piclick-coupon {
    margin: 1rem 0;
    border-top: 1px dashed var(--pc-plum-soft);
    border-bottom: 1px dashed var(--pc-plum-soft);
}

.piclick-coupon__toggle {
    width: 100%;
    background: none;
    border: 0;
    padding: 0.85rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    color: var(--pc-plum);
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 0.95rem;
}

.piclick-coupon__chevron {
    transition: transform 0.2s ease;
}

.piclick-coupon[data-open="true"] .piclick-coupon__chevron {
    transform: rotate(180deg);
}

.piclick-coupon__panel {
    padding: 0 0 1rem;
}

.piclick-coupon__panel[hidden] {
    display: none;
}

.piclick-coupon__form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.piclick-coupon__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-sm);
    font-size: 0.95rem;
    font-family: var(--pc-font-body);
    color: var(--pc-plum);
    background: var(--pc-cream);
}

.piclick-coupon__input:focus {
    outline: none;
    border-color: var(--pc-pink);
}

.piclick-coupon__btn {
    flex: 0 0 auto;
    background: var(--pc-pink);
    color: var(--pc-white);
    border: 2px solid var(--pc-plum);
    border-radius: 99rem;
    padding: 0.6rem 1.25rem;
    font-family: var(--pc-font-action);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 var(--pc-plum);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.piclick-coupon__btn:hover {
    filter: brightness(1.05);
}

.piclick-coupon__btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--pc-plum);
}

/* Mobile: input em cima, botão embaixo */
@media (max-width: 480px) {
    .piclick-coupon__form {
        flex-direction: column;
    }
}

/* ============================================================
   Empty state — mochila vazia
   ============================================================ */

/* Esconde o <p class="cart-empty"> padrão do Woo (wc_empty_cart_message)
   pra evitar duplicar com o nosso .piclick-cart-empty.
   O hook continua disparando (compat) mas o markup default fica invisível. */
.woocommerce-cart .cart-empty.woocommerce-info {
    display: none;
}

.piclick-cart-empty {
    background: var(--pc-white);
    border: 3px solid var(--pc-plum);
    border-radius: var(--pc-radius-lg);
    box-shadow: 0 5px 0 var(--pc-plum);
    padding: 2.5rem 1.5rem;
    text-align: center;
    max-width: 28rem;
    margin: 2rem auto;
}

.piclick-cart-empty__icon {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.piclick-cart-empty__title {
    color: var(--pc-plum);
    font-family: var(--pc-font-display);
    font-size: 1.5rem;
    margin: 0 0 0.4rem;
}

.piclick-cart-empty__sub {
    color: rgba(90, 10, 41, 0.75);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
}

.piclick-cart-empty__cta {
    display: inline-block;
    background: var(--pc-pink);
    color: var(--pc-white);
    text-decoration: none;
    padding: 0.85rem 1.75rem;
    border: 2px solid var(--pc-plum);
    border-radius: 99rem;
    font-family: var(--pc-font-action);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 0 var(--pc-plum);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.piclick-cart-empty__cta:hover {
    filter: brightness(1.05);
    color: var(--pc-white);
}

.piclick-cart-empty__cta:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--pc-plum);
}

/* ============================================================
   Cart — Focus styles (a11y)
   ============================================================ */

.piclick-qty__btn:focus-visible,
.piclick-cart-item__remove:focus-visible,
.piclick-coupon__toggle:focus-visible,
.piclick-coupon__btn:focus-visible,
.piclick-cart-empty__cta:focus-visible {
    outline: 3px solid var(--pc-plum);
    outline-offset: 2px;
}

.piclick-coupon__input:focus-visible {
    outline: 2px solid var(--pc-pink);
    outline-offset: 1px;
}

/* Touch targets bumpados em mobile (WCAG 2.5.5) */
@media (max-width: 768px) {
    .piclick-qty {
        gap: 0.5rem;
        padding: 0.3rem;
    }

    .piclick-qty__btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.1rem;
    }

    .piclick-qty__value {
        min-width: 1.5rem;
        font-size: 1rem;
    }

    .piclick-cart-item__remove {
        width: 2.5rem;
        height: 2.5rem;
    }

    .piclick-cart-item__remove svg {
        width: 22px;
        height: 22px;
    }
}

/* ============================================================
   Cart page — refactor flex (substitui grid + table-layout: fixed)

   Desktop (>= 1024): items à esquerda flex, sidebar 380px sticky.
   Tablet/mobile (< 1024): stack vertical (sidebar full-width abaixo).
   ============================================================ */

/* Tablet/mobile: stack. Mata float: right e width: 48% do Woo default.
   Margin-top em cart-collaterals dá respiro visual entre o card de items
   e o card "Total da mochila" (eles tavam colados antes). */
@media (max-width: 1023px) {
    .woocommerce-cart .cart-collaterals,
    .woocommerce-cart .cart-collaterals .cart_totals {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
    }
    .woocommerce-cart .cart-collaterals {
        margin-top: 1.5rem !important;
    }
}

/* Desktop: flex row, sidebar fixa 380px com sticky. */
@media (min-width: 1024px) {
    .woocommerce-cart .woocommerce {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 2rem;
    }

    /* Notices, free-shipping bar e empty-state span full width */
    .woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
    .woocommerce-cart .woocommerce > .piclick-free-shipping,
    .woocommerce-cart .woocommerce > .piclick-cart-empty {
        flex: 1 0 100%;
    }

    .woocommerce-cart .woocommerce-cart-form {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        width: auto !important;
        float: none !important;
    }

    .woocommerce-cart .cart-collaterals {
        flex: 0 0 380px;
        float: none !important;
        width: 380px !important;
        max-width: 380px !important;
        margin: 0 !important;
    }

    .woocommerce-cart .cart-collaterals .cart_totals {
        position: sticky;
        top: 1.5rem;
        width: 100% !important;
        float: none !important;
    }
}

/* ============================================================
   Cart totals — neutralizar a <table> e renderizar cada <tr>
   como flex row (label esquerda flex:0, valor direita flex:1).

   Mata definitivamente o problema de label "ENVIO" comendo o td
   do calculador de frete e fazendo letras quebrarem vertical.
   Preserva markup do Woo (sem precisar override de cart-shipping.php).
   ============================================================ */
.woocommerce-cart .cart_totals table.shop_table,
.woocommerce-cart .cart_totals table.shop_table tbody {
    display: block;
    width: 100%;
    border: none;
    margin: 0;
}

.woocommerce-cart .cart_totals table.shop_table tr {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    padding: 0.85rem 0;
    /* box-shadow em vez de border-bottom: linha mais previsível, sem artefato
       de quebra entre th/td quando align-items causa baselines diferentes. */
    box-shadow: inset 0 -1px 0 0 var(--pc-plum-soft);
}

.woocommerce-cart .cart_totals table.shop_table tr:last-child {
    box-shadow: none;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
    display: block;
    background: none;
    border: none !important;
    padding: 0;
    word-break: normal;
}

/* Nuke total nos borders do shop_table: o Woo default tem border-top: 1px
   solid em cada td, criando linha curta no lado direito (col td) acima
   do TOTAL — sobrepondo o box-shadow do tr.shipping. !important porque
   o seletor .woocommerce table.shop_table td do core tem especificidade
   suficiente pra ganhar dependendo da ordem de carregamento. */
.woocommerce-cart .cart-collaterals .cart_totals .shop_table,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table tbody,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table thead,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table tr,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table th,
.woocommerce-cart .cart-collaterals .cart_totals .shop_table td {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Mata o td::before do .shop_table_responsive (que injetava "Total:" antes
   do valor via content: attr(data-title)). Como já temos th como label,
   esse pseudo é redundante e quebrava o "R$ 19,90" no mobile. */
.woocommerce-cart .cart_totals table.shop_table td::before {
    content: none !important;
    display: none !important;
}

.woocommerce-cart .cart_totals table.shop_table th {
    flex: 0 0 auto;
    min-width: 4.5rem;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(90, 10, 41, 0.65);
    font-weight: 600;
    padding-top: 0.15rem; /* compensa baseline pra label alinhar com valor */
}

.woocommerce-cart .cart_totals table.shop_table td {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    color: var(--pc-plum);
    font-weight: 600;
}

/* Linha de envio: text-align left sempre — placeholder ("Digite seu endereço")
   e form do calculador (País/Estado/Cidade/CEP) ficam ambos com layout
   coerente. Right-align ficava ok só pro resumo mas quebrava feio o form. */
.woocommerce-cart .cart_totals table.shop_table tr.shipping td {
    text-align: left;
    font-weight: 500;
    font-size: 0.88rem;
    line-height: 1.5;
}

/* Mata borders/box-shadow herdados de plugins/Woo em QUALQUER descendente
   da td.shipping (não só filhos diretos). Calculadora de Frete (Link
   Nacional) pode rendir wrappers extras com border-bottom: 1px solid
   criando "linha duplicada" logo acima do TOTAL. */
.woocommerce-cart .cart-collaterals .cart_totals tr.shipping td p,
.woocommerce-cart .cart-collaterals .cart_totals tr.shipping td ul,
.woocommerce-cart .cart-collaterals .cart_totals tr.shipping td form,
.woocommerce-cart .cart-collaterals .cart_totals tr.shipping td div,
.woocommerce-cart .cart-collaterals .cart_totals tr.shipping td section,
.woocommerce-cart .cart-collaterals .cart_totals tr.shipping td fieldset,
.woocommerce-cart .cart-collaterals .cart_totals [class*="shipping-destination"],
.woocommerce-cart .cart-collaterals .cart_totals [class*="shipping-methods"],
.woocommerce-cart .cart-collaterals .cart_totals [class*="shipping-calculator"],
.woocommerce-cart .cart-collaterals .cart_totals [class*="calculadora"],
.woocommerce-cart .cart-collaterals .cart_totals [class*="lnshipping"],
.woocommerce-cart .cart-collaterals .cart_totals [id*="shipping-calculator"] {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping td label {
    display: block;
    text-align: left;
    margin: 0.6rem 0 0.25rem !important;
    font-weight: 600;
    color: var(--pc-plum);
    font-size: 0.82rem;
}

/* Inputs e selects do calculador — broaden seletor pra QUALQUER input/select
   dentro do .cart-collaterals (cobre plugins que renderizam o form fora do
   tr.shipping mas ainda dentro do sidebar do total). */
.woocommerce-cart .cart-collaterals input[type="text"],
.woocommerce-cart .cart-collaterals input[type="tel"],
.woocommerce-cart .cart-collaterals input[type="number"],
.woocommerce-cart .cart-collaterals select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 0.95rem;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-md) !important;
    background-color: var(--pc-white) !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body);
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: left;
    height: auto;
}

/* Select ganha appearance: none + chevron SVG custom */
.woocommerce-cart .cart-collaterals select {
    padding-right: 2.25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f1840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 14px !important;
}

.woocommerce-cart .cart-collaterals input[type="text"]:focus,
.woocommerce-cart .cart-collaterals input[type="tel"]:focus,
.woocommerce-cart .cart-collaterals input[type="number"]:focus,
.woocommerce-cart .cart-collaterals select:focus {
    border-color: var(--pc-plum) !important;
    outline: none !important;
}

/* SELECT2 — Woo usa Select2 pra País/Estado: o <select> nativo fica hidden
   (class="select2-hidden-accessible") e o que aparece é uma cadeia de
   <span class="select2-container--default"> renderizada pelo Select2.
   Estilizar o <select> não muda nada visualmente — tem que estilizar
   os spans do Select2. */
.woocommerce-cart .cart-collaterals .select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 0 !important;
    padding: 0.55rem 0.75rem !important;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-md) !important;
    background-color: var(--pc-white) !important;
    box-shadow: none !important;
    font-family: var(--pc-font-body) !important;
}

.woocommerce-cart .cart-collaterals .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-cart .cart-collaterals .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--pc-plum) !important;
    outline: none !important;
}

.woocommerce-cart .cart-collaterals .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    color: var(--pc-plum) !important;
    font-family: var(--pc-font-body) !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

.woocommerce-cart .cart-collaterals .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0.5rem !important;
    width: 1.5rem !important;
    /* Esconde a seta default do Select2 e desenha a nossa via background */
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f1840' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat center / 14px !important;
}

.woocommerce-cart .cart-collaterals .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* Dropdown panel do Select2 quando abre */
.select2-container--default .select2-dropdown {
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-md) !important;
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--pc-plum) !important;
    color: var(--pc-white) !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.shipping td button,
.woocommerce-cart .cart_totals table.shop_table tr.shipping td .button {
    display: inline-block;
    margin-top: 0.75rem !important;
}

/* Order total — destaque (pink, fonte maior). Sem padding-top extra
   pra não criar gap visual que parece linha duplicada. */
.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
    font-size: 0.78rem;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total td,
.woocommerce-cart .cart_totals table.shop_table tr.order-total .amount {
    color: var(--pc-pink);
    font-size: 1.4rem;
    font-family: var(--pc-font-display);
    font-weight: 700;
    white-space: nowrap; /* "R$ 19,90" não quebra em 2 linhas */
}

/* ============================================================
   Mobile actions row — qty (esquerda) | total | 🗑 (direita)
   Ordem do HTML: qty, total, trash. CSS só garante distribuição.
   Lixeira separada do qty pelo total + margem extra (Fitts' Law).
   ============================================================ */
@media (max-width: 768px) {
    .piclick-cart-item__actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        justify-content: flex-start;
    }

    .piclick-qty {
        flex: 0 0 auto;
    }

    .piclick-cart-item__total--inline {
        margin-left: auto;
        white-space: nowrap;
    }

    .piclick-cart-item__remove {
        flex: 0 0 auto;
        margin-left: 0.5rem;
    }

    /* Telas bem estreitas: qty pill encolhe pra total + trash não ficarem espremidos. */
    @media (max-width: 380px) {
        .piclick-qty__btn {
            width: 1.9rem;
            height: 1.9rem;
            font-size: 0.95rem;
        }
        .piclick-qty__value {
            min-width: 1.1rem;
            font-size: 0.85rem;
        }
        .piclick-cart-item__actions {
            gap: 0.35rem;
        }
        .piclick-cart-item__remove {
            margin-left: 0.35rem;
        }
    }
}

/* ============================================================
   ORDER RECEIVED / THANK YOU page (/pedido-recebido/)
   ============================================================ */

/* "Oba! Seu pedido foi recebido" — substitui o p.woocommerce-notice padrão
   por bloco de marca. O HTML real é um <p> com 2 <span> dentro (ver
   inc/wc-order-tweaks.php).

   Container ganha display: flex column pra forçar spans empilhados
   (alguma regra do .woocommerce-notice estava deixando eles inline). */
.woocommerce-order .woocommerce-thankyou-order-received {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--pc-pink-soft);
    border: 2px solid var(--pc-plum-soft);
    border-radius: var(--pc-radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 0 0 2rem;
    text-align: center;
    color: var(--pc-plum);
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
    display: none !important; /* mata ícone padrão de notice */
}

.piclick-thankyou__title {
    display: block !important;
    font-family: var(--pc-font-display);
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    color: var(--pc-plum);
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.piclick-thankyou__sub {
    display: block !important;
    font-family: var(--pc-font-body);
    font-size: 0.92rem;
    color: rgba(90, 10, 41, 0.8);
    font-weight: 500;
}

/* Order overview — Número/Data/Email/Total/Método. UL com 5 li horizontais. */
.woocommerce-order .woocommerce-order-overview {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 1.25rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px dashed var(--pc-plum-soft);
    border-bottom: 1px dashed var(--pc-plum-soft);
}

.woocommerce-order .woocommerce-order-overview li {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 1.25rem;
    border-right: 1px solid var(--pc-plum-soft);
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: rgba(90, 10, 41, 0.65);
    font-weight: 600;
}

.woocommerce-order .woocommerce-order-overview li:last-child {
    border-right: 0;
}

.woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--pc-font-display);
    font-size: 1rem;
    color: var(--pc-plum);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    word-break: break-word;
}

/* Quebra em < 768: 2 colunas */
@media (max-width: 768px) {
    .woocommerce-order .woocommerce-order-overview {
        gap: 1rem 0;
    }
    .woocommerce-order .woocommerce-order-overview li {
        flex: 1 1 calc(50% - 1px);
        border-right: 0;
        padding: 0.25rem 1rem;
    }
}

/* "Detalhes do pedido" heading */
.woocommerce-order-details__title,
.woocommerce-customer-details h2 {
    font-family: var(--pc-font-display);
    color: var(--pc-plum);
    font-size: 1.6rem;
    margin: 0 0 1.25rem;
}

/* Order details table — mesmo tratamento flex-row do cart_totals.
   Cada <tr> vira flex (label + valor). Mata os borders solid do td/th
   do Woo core que criavam ruído visual. */
.woocommerce-order-details .shop_table,
.woocommerce-order-details .shop_table thead,
.woocommerce-order-details .shop_table tbody,
.woocommerce-order-details .shop_table tfoot {
    display: block;
    width: 100%;
    border: none !important;
    margin: 0;
}

.woocommerce-order-details .shop_table {
    background: var(--pc-white);
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-lg) !important;
    padding: 1.25rem 1.5rem;
    margin: 0 0 2.5rem;
}

.woocommerce-order-details .shop_table thead tr,
.woocommerce-order-details .shop_table tbody tr,
.woocommerce-order-details .shop_table tfoot tr {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem 1rem;
    padding: 0.85rem 0;
    box-shadow: inset 0 -1px 0 0 var(--pc-plum-soft);
}

.woocommerce-order-details .shop_table tr:last-child {
    box-shadow: none;
}

.woocommerce-order-details .shop_table th,
.woocommerce-order-details .shop_table td {
    display: block !important;
    background: none !important;
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    word-break: normal;
}

/* Mata o td::before do .shop_table_responsive que injetava data-title */
.woocommerce-order-details .shop_table td::before {
    content: none !important;
    display: none !important;
}

/* Header row "Produto / Total" — vira label uppercase */
.woocommerce-order-details .shop_table thead th {
    flex: 1 1 auto;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(90, 10, 41, 0.65);
    font-weight: 600;
}

.woocommerce-order-details .shop_table thead th:last-child {
    text-align: right;
}

/* Item rows (tbody) — nome do produto à esquerda, total à direita */
.woocommerce-order-details .shop_table tbody td.product-name,
.woocommerce-order-details .shop_table tbody td:first-child {
    flex: 1 1 auto;
    color: var(--pc-plum);
    font-weight: 600;
}

.woocommerce-order-details .shop_table tbody td.product-total,
.woocommerce-order-details .shop_table tbody td:last-child {
    flex: 0 0 auto;
    text-align: right;
    color: var(--pc-plum);
    font-weight: 700;
    white-space: nowrap;
}

/* Tfoot rows — Subtotal/Desconto/Entrega/Total/Método/Observação */
.woocommerce-order-details .shop_table tfoot th {
    flex: 0 0 auto;
    min-width: 6.5rem;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(90, 10, 41, 0.65);
    font-weight: 600;
    padding-top: 0.15rem !important;
}

.woocommerce-order-details .shop_table tfoot td {
    flex: 1 1 0;
    min-width: 0;
    text-align: right;
    color: var(--pc-plum);
    font-weight: 600;
}

/* TOTAL row — destaque pink */
.woocommerce-order-details .shop_table tfoot tr.order-total td,
.woocommerce-order-details .shop_table tfoot tr.order-total .amount {
    color: var(--pc-pink) !important;
    font-size: 1.4rem;
    font-family: var(--pc-font-display);
    font-weight: 700;
    white-space: nowrap;
}

/* Customer details / address cards */
.woocommerce-order .woocommerce-customer-details {
    margin: 2rem 0 0;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-columns,
.woocommerce-order .woocommerce-customer-details .col2-set {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: stretch; /* cards iguais em altura */
}

@media (max-width: 768px) {
    .woocommerce-order .woocommerce-customer-details .woocommerce-columns,
    .woocommerce-order .woocommerce-customer-details .col2-set {
        grid-template-columns: 1fr;
    }
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column,
.woocommerce-order .woocommerce-customer-details .col-1,
.woocommerce-order .woocommerce-customer-details .col-2 {
    width: 100% !important;
    max-width: none !important;
    background: var(--pc-white) !important;
    border: 2px solid var(--pc-plum-soft) !important;
    border-radius: var(--pc-radius-lg) !important;
    padding: 1.5rem 1.5rem 1.75rem !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
    overflow: hidden; /* garante que nada vaza visualmente do radius */
}

/* Mata margin-bottom default do <p>/<address> que vinha do Woo e
   empurrava o último elemento contra a borda. */
.woocommerce-order .woocommerce-customer-details .woocommerce-column > *:last-child,
.woocommerce-order .woocommerce-customer-details address {
    margin-bottom: 0 !important;
}

.woocommerce-order .woocommerce-customer-details .woocommerce-column__title,
.woocommerce-order .woocommerce-customer-details h2,
.woocommerce-order .woocommerce-customer-details h3 {
    font-family: var(--pc-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pc-pink);
    margin: 0 0 0.85rem;
}

/* Texto do endereço — plum sólido, sem opacity (estava aparecendo
   coral/desbotado vs. o nome no topo). */
.woocommerce-order .woocommerce-customer-details address {
    font-style: normal;
    color: var(--pc-plum) !important;
    line-height: 1.65;
    border: 0 !important;
    padding: 0 !important;
    font-weight: 500;
}

.woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--phone,
.woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    color: var(--pc-plum) !important;
    font-weight: 500;
}

/* Separador antes de phone/email */
.woocommerce-order .woocommerce-customer-details address .woocommerce-customer-details--phone:first-of-type {
    padding-top: 0.75rem;
    border-top: 1px dashed var(--pc-plum-soft);
    margin-top: 0.75rem;
}

/* Mercado Pago — esconde o QR code duplicado abaixo de "Detalhes do pedido".
   Template do plugin: pix-order-received-image.php → .mp-pix-image-container.
   O bloco bom (com instruções + botão copiar) é renderizado por
   pix-order-received.php e fica ACIMA do detalhes — mantemos ele. */
body.woocommerce-order-received .mp-pix-image-container {
    display: none !important;
}