/*
Theme Name: MKL Shopping Theme
Theme URI: https://vaniacroches.com
Author: MKL
Author URI: https://mklforge.com
Description: Tema de loja em blocos da MKL — sistema de design próprio (cores, tipografia e layout via theme.json + Fraunces/Mulish self-hosted). Vitrine WooCommerce com identidade artesanal: assinatura do "fio contínuo", cards suaves e etiquetas "feito à mão". Reaproveitável entre lojas por style variations.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: mkl-shopping-theme
Tags: block-theme, e-commerce, full-site-editing, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   MKL Shopping Theme — CSS de assinatura
   Tokens vêm do theme.json (--wp--preset--color--*, fontes).
   Aqui: header, hero, fio, benefícios, cards, footer, etc.
   ============================================================ */
:root{
  --line: #E7DACB;
  --surface: var(--wp--preset--color--surface, #FFFDF8);
  --radius: 14px;
  --radius-lg: 26px;
  --shadow-sm: 0 1px 2px rgba(59,34,48,.06), 0 6px 16px -10px rgba(59,34,48,.16);
  --shadow: 0 1px 2px rgba(59,34,48,.05), 0 14px 32px -14px rgba(59,34,48,.20);
}

body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
:where(h1,h2,h3){ text-wrap:balance; }
a{ text-underline-offset:3px; }

/* Foco visível acessível */
a:focus-visible, button:focus-visible, .wp-element-button:focus-visible,
input:focus-visible, .wp-block-search__input:focus-visible{
  outline:3px solid var(--wp--preset--color--primary);
  outline-offset:3px; border-radius:8px;
}

/* Botões: leve elevação no hover */
.wp-element-button, .wc-block-components-button, .button{
  transition: transform .16s ease, background-color .2s ease, box-shadow .2s ease !important;
}
.wp-element-button:hover, .button:hover{ transform: translateY(-2px); }

/* Botão outline (usado no hero/loja) */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button{
  border:2px solid currentColor; background:transparent;
}

/* ================= ANNOUNCEMENT BAR ================= */
.mkl-announce{
  background:var(--wp--preset--color--plum-deep); color:#F7ECE2;
  font-size:.82rem; letter-spacing:.01em; overflow:hidden;
}
.mkl-announce strong{ color:var(--wp--preset--color--marigold); font-weight:600; }
/* Letreiro animado (texto correndo pra esquerda) */
.mkl-marquee{ overflow:hidden; }
.mkl-marquee__track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:mkl-marquee 34s linear infinite !important; }
.mkl-marquee__g{ display:inline-block; padding-block:.55rem; }
.mkl-marquee:hover .mkl-marquee__track{ animation-play-state:paused !important; }
@keyframes mkl-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* WP força padding:1.25em em grupos com fundo (.wp-block-group.has-background).
   Isso criava o vão creme ACIMA do letreiro (padding-top do .mkl-header). Zeramos. */
.mkl-header{ padding-top:0 !important; padding-bottom:0 !important; }
.mkl-announce{ padding:0 !important; }
.wp-site-blocks > :first-child{ margin-block-start:0 !important; }

/* ================= HEADER ================= */
.mkl-header{ border-bottom:1px solid var(--line); }
.mkl-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.mkl-header .wp-block-site-title a{ text-decoration:none; }
/* Marca + contexto: "Vânia Crochês / Bolsas & Acessórios" + subtítulo (descrição da coleção).
   O <h1> da página vive aqui. Texto completo no HTML; reticências só no visual. */
.mkl-brand{ min-width:0; align-items:center; }
.mkl-context{ display:flex; align-items:flex-start; gap:.6rem; margin:0; min-width:0; }
/* Separador decorativo. Vem do CSS (e não do HTML) para não dar texto solto ao wpautop. */
.mkl-context::before{
  content:"/"; flex:0 0 auto;
  font-family:var(--wp--preset--font-family--heading); font-size:1.15rem; font-weight:400;
  color:var(--line); line-height:1.35;
}
.mkl-context__text{ min-width:0; display:flex; flex-direction:column; gap:.05rem; }
.mkl-context__title{
  font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:1.15rem;
  letter-spacing:-.01em; color:var(--wp--preset--color--muted); line-height:1.35; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Na página de produto o título vira link p/ a coleção (substitui o breadcrumb) */
.mkl-context__title a{ color:inherit; text-decoration:none; }
.mkl-context__title a:hover{ color:var(--wp--preset--color--primary); }
.mkl-context__sub{
  font-size:.78rem; line-height:1.3; color:var(--wp--preset--color--muted); opacity:.72; margin:0;
  max-width:46ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
@media (max-width:1100px){ .mkl-context__sub{ display:none; } }
@media (max-width:900px){ .mkl-context{ display:none; } }
.mkl-header .wp-block-navigation a{ font-weight:600; padding-bottom:2px; border-bottom:2px solid transparent; }
.mkl-header .wp-block-navigation a:hover{ border-color:var(--wp--preset--color--primary); color:var(--wp--preset--color--contrast); }
.mkl-header .wc-block-mini-cart__button,
.mkl-header .wp-block-woocommerce-customer-account a{ color:var(--wp--preset--color--contrast); }
/* Remove o vão de 1.5rem entre o letreiro e a linha do menu (centraliza o header) */
.mkl-header > *{ margin-block-start:0 !important; }
/* Menu à direita com pontos (·) entre os itens */
.mkl-nav-right .wp-block-navigation-item + .wp-block-navigation-item::before{
  content:"·"; color:var(--wp--preset--color--muted); font-weight:700; margin-right:.5rem; align-self:center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before{ content:none !important; }

/* ================= HERO ================= */
.mkl-hero{ position:relative; overflow:hidden; }
/* Largura única do site: sempre o wideSize do theme.json, nunca um número solto aqui.
   Assim hero, benefícios e fio acompanham cabeçalho, barra da loja e grade. */
.mkl-hero .wp-block-cover__inner-container{ max-width:var(--wp--style--global--wide-size); margin-inline:auto; width:100%; }
.mkl-benefits, .mkl-thread{ max-width:var(--wp--style--global--wide-size); margin-inline:auto; }
.mkl-hero h1{
  font-size:clamp(2.4rem,5vw,3.6rem); line-height:1.04; letter-spacing:-.02em;
  color:#F8EEE4; margin:0;
}
.mkl-hero h1 em{ font-style:italic; color:var(--wp--preset--color--marigold); }
.mkl-hero p.mkl-lead{ color:#DCC3CF; font-size:clamp(1.05rem,1.6vw,1.25rem); max-width:44ch; margin-top:1.2rem; }
.mkl-hero .wp-block-buttons{ margin-top:1.8rem; gap:.9rem; }
.mkl-hero .is-style-outline .wp-block-button__link{ color:#F8EEE4; }
.mkl-hero .wp-block-button:not(.is-style-outline) .wp-element-button{
  background:var(--wp--preset--color--marigold); color:#43260a;
}
.mkl-hero .wp-block-button:not(.is-style-outline) .wp-element-button:hover{ background:#f2b455; }
/* estatísticas do hero */
.mkl-herostats{ display:flex; gap:1.8rem; flex-wrap:wrap; margin-top:2.2rem; }
.mkl-herostats .s{ color:#DCC3CF; font-size:.85rem; line-height:1.3; }
.mkl-herostats .s b{ display:block; font-family:var(--wp--preset--font-family--heading); font-size:1.5rem; color:#F8EEE4; font-weight:600; }

/* Hero em 2 colunas: texto (esq.) + carrossel (dir.) */
.mkl-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; width:100%; }
.mkl-hero-copy{ min-width:0; }
.mkl-hero-media{ min-width:0; width:100%; max-width:410px; margin-inline:auto; }

/* Carrossel de produtos do hero */
.mkl-hero-carousel{ position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.mkl-hero-carousel__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; }
.mkl-hero-carousel__track::-webkit-scrollbar{ display:none; }
.mkl-hero-card{ position:relative; flex:0 0 100%; scroll-snap-align:center; text-decoration:none; color:#fff; display:block; }
.mkl-hero-card__img{ display:block; position:relative; aspect-ratio:1/1; background:var(--wp--preset--color--plum-deep) center/cover no-repeat; }
.mkl-hero-card__badge{ position:absolute; top:14px; left:14px; background:var(--wp--preset--color--primary); color:#fff; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.4em .75em; border-radius:999px; }
.mkl-hero-card__info{ position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.3rem 1.2rem; display:flex; flex-direction:column; gap:.15rem;
  background:linear-gradient(0deg, rgba(20,8,14,.9) 0%, rgba(20,8,14,.35) 55%, transparent); }
.mkl-hero-card__name{ font-family:var(--wp--preset--font-family--heading); font-size:1.3rem; font-weight:600; line-height:1.15; color:#fff; }
.mkl-hero-card__price{ font-size:1.05rem; color:#fff; }
.mkl-hero-card__price .amount{ font-weight:700; }
.mkl-hero-card__price del{ opacity:.7; font-size:.85em; margin-right:.35em; }
.mkl-hero-card__price ins{ text-decoration:none; }
.mkl-hero-carousel__dots{ position:absolute; bottom:14px; right:14px; display:flex; gap:6px; }
.mkl-dot{ width:8px; height:8px; border-radius:999px; border:0; background:rgba(255,255,255,.5); cursor:pointer; padding:0; transition:width .2s ease, background .2s ease; }
.mkl-dot.is-active{ background:#fff; width:22px; }
@media (max-width:900px){
  .mkl-hero-grid{ grid-template-columns:1fr; }
  .mkl-hero-media{ display:none; }
}

/* ---- Hero: brilho de fundo (mesh) + textura de crochê "Bolinhas" (16% · 77%) ---- */
.mkl-hero .wp-block-cover__background{
  background-image:
    radial-gradient(70% 65% at 10% 18%, rgba(232,163,61,.18), transparent 55%),
    radial-gradient(75% 80% at 95% 95%, rgba(155,54,90,.34), transparent 55%),
    radial-gradient(55% 60% at 85% 8%, rgba(124,154,115,.14), transparent 55%);
  background-repeat:no-repeat;
}
.mkl-hero .wp-block-cover__background::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='6' cy='6' r='2.3' fill='%23ffffff'/%3E%3Ccircle cx='17' cy='17' r='2.3' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:17px 17px; background-repeat:repeat; opacity:.16;
}

/* ================= LINHA DE COSTURA (assinatura) ================= */
/* Ponto reto (running stitch): tracejado com pontas arredondadas.
   vector-effect:non-scaling-stroke mantém o tamanho do ponto constante
   em qualquer largura. A animação "costura" da esquerda pra direita. */
.mkl-thread{ display:block; line-height:0; background:var(--wp--preset--color--base); }
.mkl-thread svg{ display:block; width:100%; height:28px; color:var(--wp--preset--color--primary); }
.mkl-thread path{
  fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round;
  stroke-dasharray:14 9; /* ponto 14px · vão 9px */
}
.mkl-thread .stitch-holes{ stroke-width:2.6; stroke-dasharray:0.1 23; stroke-dashoffset:-18.5; opacity:.45; }
@media (prefers-reduced-motion:no-preference){
  .mkl-thread svg{ animation:mkl-sew 2.4s ease both; }
  @keyframes mkl-sew{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
}

/* etiqueta "feito à mão" */
.mkl-tag{
  display:inline-flex; align-items:center; gap:.45em;
  background:var(--wp--preset--color--marigold); color:#43260a;
  font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.4em .7em; border-radius:6px;
}
.mkl-tag::before{ content:""; width:7px; height:7px; border-radius:2px; background:#43260a; opacity:.55; }

/* ================= BENEFÍCIOS ================= */
.mkl-benefits{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-block:1px solid var(--line); background:var(--surface);
}
.mkl-benefit{ display:flex; gap:.85rem; align-items:flex-start; padding:1.5rem 1.35rem; }
.mkl-benefit + .mkl-benefit{ border-left:1px solid var(--line); }
.mkl-benefit svg{ width:26px; height:26px; color:var(--wp--preset--color--primary); flex:0 0 auto; margin-top:2px; }
.mkl-benefit b{ display:block; font-size:.98rem; color:var(--wp--preset--color--contrast); }
.mkl-benefit span{ font-size:.85rem; color:var(--wp--preset--color--muted); }

/* ================= CABEÇALHOS DE SEÇÃO ================= */
.mkl-eyebrow{
  font-size:.74rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--wp--preset--color--primary); margin:0 0 .35rem;
}

/* ================= CATEGORIAS (cards coloridos) ================= */
.woocommerce ul.products{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:20px !important;
  margin:0 !important; padding:0 !important; list-style:none; width:auto !important;
}
.woocommerce ul.products::before,.woocommerce ul.products::after{ display:none; }
.woocommerce ul.products li.product,
.woocommerce ul.products li.product-category{
  width:auto !important; margin:0 !important; float:none !important; padding:0;
}
/* categoria */
.woocommerce ul.products li.product-category a{
  position:relative; display:flex; min-height:240px; border-radius:var(--radius); overflow:hidden;
  color:#fff; text-decoration:none; box-shadow:var(--shadow-sm);
  align-items:flex-end; padding:1.1rem; isolation:isolate;
  transition:transform .18s ease, box-shadow .2s ease;
}
.woocommerce ul.products li.product-category a:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.woocommerce ul.products li.product-category a img{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; margin:0;
  transition:transform .4s ease;
}
.woocommerce ul.products li.product-category a:hover img{ transform:scale(1.06); }
.woocommerce ul.products li.product-category a::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(0deg, rgba(30,14,24,.88) 0%, rgba(30,14,24,.30) 45%, rgba(30,14,24,.04) 78%);
}
/* rotação de cor de fundo caso não haja imagem */
.woocommerce ul.products li.product-category:nth-child(6n+1) a{ background:var(--wp--preset--color--primary); }
.woocommerce ul.products li.product-category:nth-child(6n+2) a{ background:var(--wp--preset--color--secondary); }
.woocommerce ul.products li.product-category:nth-child(6n+3) a{ background:var(--wp--preset--color--marigold); }
.woocommerce ul.products li.product-category:nth-child(6n+4) a{ background:var(--wp--preset--color--plum); }
.woocommerce ul.products li.product-category:nth-child(6n+5) a{ background:#B0603A; }
.woocommerce ul.products li.product-category:nth-child(6n+6) a{ background:#3E6E63; }
.woocommerce ul.products li.product-category h2.woocommerce-loop-category__title{
  font-size:1.15rem; color:#fff; margin:0; padding:0; line-height:1.2;
}
.woocommerce ul.products li.product-category .count{
  display:block; background:transparent; color:rgba(255,255,255,.85);
  font-size:.8rem; font-weight:600; padding:0; margin-top:.15rem;
}

/* ===== COLEÇÕES ([mkl_collections] — markup limpo, foto de produto no fundo) ===== */
.mkl-collections{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.mkl-collections li{ margin:0; }
.mkl-collection{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:240px; border-radius:var(--radius); overflow:hidden; padding:1.1rem;
  color:#fff; text-decoration:none; isolation:isolate;
  background:var(--wp--preset--color--plum) center/cover no-repeat;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .2s ease;
}
.mkl-collection:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.mkl-collection::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(0deg, rgba(30,14,24,.9) 0%, rgba(30,14,24,.32) 45%, rgba(30,14,24,.02) 78%); }
.mkl-collection > *{ position:relative; z-index:1; }
.mkl-collection__t{ font-family:var(--wp--preset--font-family--heading); font-weight:600; font-size:1.18rem; line-height:1.2; }
.mkl-collection__c{ font-size:.8rem; opacity:.9; margin-top:.15rem; }
@media (max-width:900px){ .mkl-collections{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .mkl-collections{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   PRODUTO (single-product) — escopado em .mkl-product
   ============================================================ */
/* O breadcrumb saiu da página: a coleção agora vive no cabeçalho (.mkl-context). */

/* "Cor" nos detalhes do produto */
.mkl-product-cor{ font-size:1rem; color:var(--wp--preset--color--contrast); margin:.2rem 0 1rem; }
.mkl-product-cor span{ font-weight:700; }

.mkl-product-top{ align-items:flex-start; }
.mkl-product-media{ position:relative; max-width:560px; }

/* Galeria sempre 1:1. A foto original pode ser retrato; recortamos no centro. */
.mkl-product .woocommerce-product-gallery__wrapper{ margin:0; }
.mkl-product .woocommerce-product-gallery__image{
  border-radius:var(--radius); overflow:hidden; background:var(--surface);
}
.mkl-product .woocommerce-product-gallery__image img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
}
.mkl-product .flex-viewport{ border-radius:var(--radius); }

/* Miniaturas quadradas, em grade (o padrão do Woo usa float + 25%) */
.mkl-product .flex-control-thumbs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin:10px 0 0 !important; padding:0; list-style:none;
}
.mkl-product .flex-control-thumbs li{ margin:0; width:auto !important; float:none !important; list-style:none; }
.mkl-product .flex-control-thumbs img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px;
  border:1px solid transparent; opacity:.7; cursor:pointer; transition:opacity .18s ease, border-color .18s ease;
}
.mkl-product .flex-control-thumbs img.flex-active,
.mkl-product .flex-control-thumbs img:hover{ opacity:1; border-color:var(--wp--preset--color--primary); }

/* Selo "Oferta" à ESQUERDA e lupa à direita, dentro da foto, sem colidir.
   Especificidade extra (.woocommerce-product-gallery) + !important para vencer a
   regra genérica ".woocommerce span.onsale" (mais abaixo, que joga o selo à direita). */
.mkl-product .wp-block-woocommerce-product-image-gallery{ position:relative; }
.mkl-product .wp-block-woocommerce-product-image-gallery span.onsale{
  position:absolute !important; top:14px !important; left:14px !important; right:auto !important; bottom:auto !important; z-index:3;
  margin:0 !important; min-height:0; line-height:1.4;
  background:var(--wp--preset--color--primary); color:#fff;
  border-radius:999px; padding:.3rem .8rem;
  font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.mkl-product .woocommerce-product-gallery__trigger{ top:14px; right:14px; left:auto; z-index:3; }

.mkl-product-summary .wp-block-post-title{ margin:0 0 .4rem; font-size:clamp(1.9rem,3vw,2.5rem); }
.mkl-product-summary .wp-block-woocommerce-product-price{ margin:0 0 .1rem; }
.mkl-product .wp-block-woocommerce-product-meta{ margin-top:1.25rem; font-size:.9rem; }

/* Simulação de frete (Melhor Envio): o plugin manda um bloco cinza #f2f2f2. */
#woocommerce-correios-calculo-de-frete-na-pagina-do-produto.containerCalculator{
  background:var(--surface) !important;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.15rem 1.25rem !important;
  margin:1.4rem 0 1.5rem !important;
}
.containerCalculator p{
  margin:0 0 .6rem; font-weight:700; font-size:.92rem;
  color:var(--wp--preset--color--contrast);
}
.containerCalculator input[type=text].iptCep{
  max-width:260px; padding:.7rem 1.1rem !important;
  border:1px solid var(--line) !important; border-radius:999px !important;
  background:#fff; font-family:inherit; font-size:.95rem;
}
.containerCalculator input[type=text].iptCep:focus{
  outline:none; border-color:var(--wp--preset--color--primary) !important;
}
.containerCalculator .resultado-frete table{ width:100%; margin-top:.85rem; font-size:.9rem; border-collapse:collapse; }
.containerCalculator .resultado-frete td{ padding:.45rem .25rem; border-top:1px solid var(--line); }
.containerCalculator small{ display:block; margin-top:.5rem; font-size:.8rem; color:var(--wp--preset--color--muted); }

/* Separa "Produtos relacionados" e dá respiro antes do rodapé */
.woocommerce .related.products,
.woocommerce.single-product .related.products{
  margin-top:clamp(3rem,6vw,4.5rem) !important;
  margin-bottom:clamp(3rem,6vw,4.5rem) !important;
}

/* Produtos relacionados (product-collection): cards de altura uniforme.
   Quando um título quebra em mais linhas, preço e botão não podem desalinhar. */
.mkl-product .wp-block-woocommerce-product-collection li.wc-block-product{
  display:flex; flex-direction:column; height:100%;
}
/* Foto 1:1, igual às da loja e da galeria */
.mkl-product .wp-block-woocommerce-product-collection .wc-block-components-product-image img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius);
}
/* Título sempre em 2 linhas: 1 linha reserva o espaço da 2ª (min-height),
   3+ linhas são cortadas com reticências (line-clamp). Assim TODOS os cards têm
   a mesma altura de título → preço e botão alinham em qualquer largura de tela.
   O nome completo continua no atributo title/link (tooltip ao passar o mouse). */
.mkl-product .wp-block-woocommerce-product-collection .wp-block-post-title{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:2.7em; line-height:1.35; margin-bottom:.35rem; text-align:center;
}
/* Botão colado na base do card → todos alinhados, independentemente do título */
.mkl-product .wp-block-woocommerce-product-collection .wp-block-woocommerce-product-button{
  margin-top:auto;
}
.mkl-product .wp-block-woocommerce-product-collection .wc-block-components-product-button__button{
  white-space:nowrap;   /* "Adicionar ao carrinho" numa linha só */
}

@media (max-width:781px){
  .mkl-product-media{ max-width:none; }
}

/* ============================================================
   LOJA (archive-product) — escopado em .mkl-shop
   ============================================================ */
/* Título e descrição da coleção agora vivem no cabeçalho do site (ver .mkl-context).
   A página começa direto na barra de filtros. */

/* Pills de coleção */
.mkl-cat-pills{ margin:0; }
.mkl-cat-pills ul{ display:flex; flex-wrap:wrap; gap:.55rem; list-style:none; margin:0; padding:0; }
.mkl-cat-pills li{ margin:0; }
.mkl-cat-pills a{
  display:inline-block; padding:.5em 1.05em; border-radius:999px;
  border:1.5px solid var(--line); background:var(--surface);
  color:var(--wp--preset--color--contrast); text-decoration:none; font-weight:600; font-size:.9rem;
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.mkl-cat-pills a:hover{ border-color:var(--wp--preset--color--primary); color:var(--wp--preset--color--primary); }
.mkl-cat-pills a.is-active{ background:var(--wp--preset--color--contrast); border-color:var(--wp--preset--color--contrast); color:#fff; }

/* Barra ÚNICA: pills (esq.) + busca e ordenação (dir.) */
/* Área de avisos vazia não ocupa espaço (senão sobra vão entre o header e a barra) */
.mkl-shop .woocommerce-notices-wrapper:empty,
.mkl-shop .wp-block-woocommerce-store-notices:empty{ display:none; margin:0; }
/* Só a borda de baixo — a de cima duplicava com a borda do cabeçalho.
   As laterais precisam ser `auto`: o layout constrained centraliza .alignwide com
   margin-inline:auto, e um `0` aqui encostaria a barra na margem esquerda. */
.mkl-shop-bar{ border-top:0; border-bottom:1px solid var(--line); padding-block:.9rem; margin:0 auto 1.9rem !important; gap:1rem 1.5rem; }
.mkl-shop-tools{ gap:.7rem; align-items:center; }
.mkl-shop .wc-block-product-search{ margin:0; }
.mkl-shop .wc-block-product-search__label{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mkl-shop .wc-block-product-search__fields{
  display:flex; align-items:center; background:var(--surface);
  border:1.5px solid var(--line); border-radius:999px; overflow:hidden; transition:border-color .16s ease;
}
.mkl-shop .wc-block-product-search__fields:focus-within{ border-color:var(--wp--preset--color--primary); }
.mkl-shop .wc-block-product-search__field{
  border:0 !important; background:transparent !important; box-shadow:none !important;
  padding:.55em .3em .55em 1.05em; min-width:190px; font:inherit; font-size:.92rem; color:var(--wp--preset--color--contrast);
}
.mkl-shop .wc-block-product-search__field:focus{ outline:none; }
.mkl-shop .wc-block-product-search__button{
  background:transparent !important; border:0 !important; padding:.4em .95em .4em .3em;
  color:var(--wp--preset--color--muted); cursor:pointer; display:grid; place-items:center;
}
.mkl-shop .wc-block-product-search__button:hover{ color:var(--wp--preset--color--primary); }
.mkl-shop .wc-block-product-search__button svg{ width:18px; height:18px; fill:currentColor; }
.mkl-shop .woocommerce-ordering select,
.mkl-shop select.orderby{
  border:1.5px solid var(--line); background:var(--surface); border-radius:999px;
  padding:.55em 1.05em; font:inherit; font-size:.92rem; color:var(--wp--preset--color--contrast); cursor:pointer;
}
.mkl-shop .woocommerce-ordering{ margin:0; }

/* Grid de produtos (bloco product-collection) */
.mkl-shop .wc-block-product-template{
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:22px !important;
  margin:0 !important; padding:0 !important; list-style:none;
}
.mkl-shop li.wc-block-product{
  position:relative; margin:0 !important; padding:0 !important; width:auto !important; float:none !important;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; text-align:left;
  transition:transform .18s ease, box-shadow .2s ease;
}
.mkl-shop li.wc-block-product:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.mkl-shop li.wc-block-product .wc-block-components-product-image{ position:relative; margin:0 0 .75rem !important; }
.mkl-shop li.wc-block-product .wc-block-components-product-image img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block; border-radius:0 !important; margin:0;
}
/* Selo "Novo" (sup. esquerdo) */
.mkl-shop li.wc-block-product .mkl-badge-novo{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--wp--preset--color--marigold); color:#43260a; border-radius:999px;
  padding:.45em .75em; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1;
}
/* Selo "Oferta" (sup. direito) */
.mkl-shop li.wc-block-product .wp-block-woocommerce-product-sale-badge{ position:static; margin:0; }
.mkl-shop li.wc-block-product .wc-block-components-product-sale-badge{
  position:absolute !important; top:12px !important; right:12px !important; left:auto !important; bottom:auto !important; z-index:3;
  background:var(--wp--preset--color--primary) !important; color:#fff !important; border:0 !important;
  border-radius:999px !important; padding:.45em .75em !important; margin:0 !important;
  font-size:.72rem !important; font-weight:700 !important; letter-spacing:.03em; text-transform:uppercase; line-height:1;
}
/* Título / preço / botão */
.mkl-shop li.wc-block-product .wp-block-post-title{
  font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:1.05rem;
  padding:0 1rem; margin:0 0 .3rem !important; text-align:left !important; line-height:1.35;
}
.mkl-shop li.wc-block-product .wp-block-post-title a{ color:var(--wp--preset--color--contrast); text-decoration:none; }
.mkl-shop li.wc-block-product .wp-block-post-title a:hover{ color:var(--wp--preset--color--primary); }
.mkl-shop li.wc-block-product .wp-block-woocommerce-product-price{
  padding:0 1rem; margin:0 0 .9rem !important; text-align:left !important;
  font-family:var(--wp--preset--font-family--heading); font-size:1.25rem; font-weight:600; color:var(--wp--preset--color--contrast);
}
.mkl-shop li.wc-block-product .wc-block-components-product-price__regular{ color:var(--wp--preset--color--muted); font-size:.8rem; font-weight:400; margin-right:.35rem; }
.mkl-shop li.wc-block-product .wc-block-components-product-price__value.is-discounted{ font-weight:600; }
.mkl-shop li.wc-block-product .wp-block-woocommerce-product-button{ margin:auto 1rem 1.1rem !important; text-align:left !important; }
.mkl-shop li.wc-block-product .wp-block-woocommerce-product-button a,
.mkl-shop li.wc-block-product .wc-block-components-product-button__button{
  display:block; width:100%; text-align:center; background:var(--wp--preset--color--primary) !important; color:#fff !important;
  border:0 !important; border-radius:999px !important; padding:.72rem 1rem !important; font-weight:700; font-size:.95rem; text-decoration:none;
}
.mkl-shop li.wc-block-product .wp-block-woocommerce-product-button a:hover{ background:var(--wp--preset--color--primary-dark) !important; }

/* Paginação */
.mkl-shop .wp-block-query-pagination{ margin-top:2.5rem; gap:.4rem; }
.mkl-shop .wp-block-query-pagination a,
.mkl-shop .wp-block-query-pagination .page-numbers{
  min-width:40px; height:40px; display:inline-grid; place-items:center; border-radius:999px;
  border:1.5px solid var(--line); color:var(--wp--preset--color--contrast); text-decoration:none; font-weight:600; font-size:.92rem;
}
.mkl-shop .wp-block-query-pagination .page-numbers.current{ background:var(--wp--preset--color--contrast); border-color:var(--wp--preset--color--contrast); color:#fff; }

@media (max-width:1000px){ .mkl-shop .wc-block-product-template{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width:760px){
  .mkl-shop .wc-block-product-template{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
  .mkl-shop-bar{ justify-content:flex-start; }
  /* pills rolam na horizontal no mobile (padrão de PLP) */
  .mkl-cat-pills{ width:100%; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
  .mkl-cat-pills::-webkit-scrollbar{ display:none; }
  .mkl-cat-pills ul{ flex-wrap:nowrap; }
  .mkl-shop-tools{ width:100%; }
  .mkl-shop .wc-block-product-search{ flex:1; }
  .mkl-shop .wc-block-product-search__field{ min-width:120px; width:100%; }
}

/* ================= PRODUTOS (cards) ================= */
.woocommerce ul.products li.product{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; text-align:left;
  transition:transform .18s ease, box-shadow .2s ease; position:relative;
}
.woocommerce ul.products li.product:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display:flex; flex-direction:column; color:inherit; text-decoration:none;
}
.woocommerce ul.products li.product img{
  width:100%; aspect-ratio:1/1; object-fit:cover; margin:0 0 .7rem; background:var(--wp--preset--color--base-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--wp--preset--font-family--body); font-weight:700; font-size:1.05rem;
  color:var(--wp--preset--color--contrast); padding:0 1rem; margin:0;
}
.woocommerce ul.products li.product .price{
  padding:.35rem 1rem 0; margin:0; color:var(--wp--preset--color--contrast);
  font-family:var(--wp--preset--font-family--heading); font-size:1.3rem; font-weight:600;
}
.woocommerce ul.products li.product .price del{ color:var(--wp--preset--color--muted); font-size:.85rem; font-weight:400; opacity:1; margin-right:.35rem; }
.woocommerce ul.products li.product .price ins{ text-decoration:none; }
.woocommerce ul.products li.product .star-rating{ margin:.5rem 1rem 0; color:var(--wp--preset--color--marigold); font-size:.9rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
  margin:.85rem 1rem 1.1rem; text-align:center; justify-content:center;
  background:var(--wp--preset--color--primary); color:#fff; border-radius:999px;
  padding:.7rem 1rem; font-weight:700; font-size:.95rem; display:block; text-decoration:none;
}
.woocommerce ul.products li.product .button:hover{ background:var(--wp--preset--color--primary-dark); }
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale{
  position:absolute !important; top:12px !important; right:12px !important; left:auto !important; bottom:auto !important;
  margin:0 !important; z-index:3;
  background:var(--wp--preset--color--primary); color:#fff; border-radius:999px;
  min-height:0; min-width:0; line-height:1; padding:.45em .75em; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
}
/* Selo "Novo" (produtos recentes) — canto superior esquerdo */
.woocommerce ul.products li.product .mkl-badge-novo{
  position:absolute; top:12px; left:12px; z-index:3;
  background:var(--wp--preset--color--marigold); color:#43260a; border-radius:999px;
  padding:.45em .75em; font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; line-height:1;
}
/* (a imagem da coleção agora é a foto de um produto da categoria — ver functions.php) */

/* ================= FAIXA HISTÓRIA ================= */
.mkl-story{ position:relative; isolation:isolate; overflow:hidden; color:#F8EEE4; border-radius:var(--radius-lg); background-color:#32172a; }
.mkl-story h2{ color:#F8EEE4; }
.mkl-story p{ color:#DCC3CF; }
.mkl-story .mkl-eyebrow{ color:var(--wp--preset--color--marigold); }
.mkl-signature{ font-family:var(--wp--preset--font-family--heading); font-style:italic; font-size:1.5rem; color:var(--wp--preset--color--marigold); }

/* ================= CTA WHATSAPP ================= */
.mkl-cta{ position:relative; isolation:isolate; overflow:hidden; color:#fff; border-radius:var(--radius-lg); background-color:#8f2249; }
.mkl-cta h2{ color:#fff; }
.mkl-cta p{ color:#ffe1ea; }
.mkl-cta .wp-element-button{ background:var(--wp--preset--color--marigold); color:#43260a; }
.mkl-cta .wp-element-button:hover{ background:#f2b455; }

/* ---- Fundo de TRAMA (knit) + overlay da cor do bloco (força 60%) ---- */
.mkl-story, .mkl-cta{
  background-image:
    radial-gradient(130% 90% at 12% 8%, rgba(232,163,61,.20), transparent 55%),
    radial-gradient(120% 100% at 92% 100%, rgba(255,255,255,.09), transparent 55%),
    repeating-linear-gradient(63deg, rgba(255,255,255,.06) 0 2.5px, transparent 2.5px 12px),
    repeating-linear-gradient(-63deg, rgba(255,255,255,.06) 0 2.5px, transparent 2.5px 12px);
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
.mkl-story::before, .mkl-cta::before{ content:""; position:absolute; inset:0; z-index:-1; }
.mkl-story::before{ background:color-mix(in srgb, var(--wp--preset--color--plum) 60%, transparent); }
.mkl-cta::before{ background:color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent); }
.mkl-story > *, .mkl-cta > *{ position:relative; }

/* ================= FOOTER ================= */
.mkl-footer a{ color:#D9C2CE; text-decoration:none; }
.mkl-footer a:hover{ color:#F8EEE4; }
.mkl-footer h3,.mkl-footer h4{ color:#F8EEE4; }
.mkl-pay{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.mkl-pay span{
  font-size:.68rem; font-weight:700; letter-spacing:.04em; color:#F8EEE4;
  background:rgba(248,238,228,.10); border:1px solid rgba(248,238,228,.18);
  padding:.4em .7em; border-radius:6px;
}

/* ================= RESPONSIVO ================= */
@media (max-width:900px){
  .mkl-benefits{ grid-template-columns:repeat(2,1fr); }
  .mkl-benefit:nth-child(3){ border-left:0; }
  .mkl-benefit{ border-top:1px solid var(--line); }
  .woocommerce ul.products{ grid-template-columns:repeat(3,1fr) !important; }
}
@media (max-width:560px){
  .mkl-benefits{ grid-template-columns:1fr; }
  .mkl-benefit + .mkl-benefit{ border-left:0; border-top:1px solid var(--line); }
  .woocommerce ul.products{ grid-template-columns:1fr 1fr !important; }
  .mkl-herostats{ gap:1.1rem; }
}

/* ============================================================
   Best practices oficiais (wordpress-block-theming)
   ============================================================ */
/* RESET DE ESPAÇAMENTO DE TOPO (a raiz do "espaçamento estranho" do site).
   O WordPress injeta margin-block-start:1.5rem em TODA região de topo
   (.wp-site-blocks > *). Em páginas de produto o WooCommerce ainda embrulha
   o conteúdo num <div.woocommerce.product>, que também herdava esses 1.5rem.
   Zeramos em TODAS as regiões de topo — header/main/footer/wrapper — de uma vez,
   para o conteúdo colar no cabeçalho. O respiro interno de cada página é
   controlado explicitamente (padding no <main>), nunca por margem automática. */
.wp-site-blocks > *{ margin-block-start:0 !important; }

/* Bandas full-bleed alternadas — ritmo visual */
.mkl-band--surface{ background:var(--surface); border-block:1px solid var(--line); }

/* Reveal ao rolar (pareado com IntersectionObserver no functions.php).
   Só esconde quando há JS (.js) — sem JS, conteúdo sempre visível. */
.js .animate-on-scroll{ opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; }
.js .animate-on-scroll.is-visible{ opacity:1; transform:translateY(0); }

/* Micro-interação utilitária de elevação */
.hover-lift{ transition:transform .18s ease, box-shadow .2s ease; }
.hover-lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

/* Reduced-motion global (obrigatório) */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .animate-on-scroll{ opacity:1 !important; transform:none !important; }
}