/* =============================================================================
   polish.css — camada de refinamento NÃO-DESTRUTIVA do tema criativatek-shop-1
   -----------------------------------------------------------------------------
   Carregado DEPOIS de style.css (ver layouts/css.blade.php) para sobrepor sem
   tocar no CSS compilado. Aditivo e retrocompatível: se este ficheiro não
   existir, o tema fica exactamente como estava.

   Princípios (.impeccable.md): credibilidade, zero ruído, transições
   "Intercom-quality" (ease-out entrada), cor de marca com critério.
   A cor de marca vem de --main-color (injectada em css.blade.php a partir das
   definições do site). Fallbacks neutros garantem que nada parte se faltar.
   ========================================================================== */

:root {
    /* curvas e tempos consistentes em todo o site */
    --ck-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ck-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ck-dur: 0.22s;
    --ck-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
    --ck-shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.12);
    --ck-shadow-header: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* -----------------------------------------------------------------------------
   1. Base — ritmo, anti-overflow e selecção
   -------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

/* Rede de segurança contra scroll horizontal em mobile (causa nº1 de "site
   partido" no telemóvel). Targeted, não esconde conteúdo legítimo. */
img,
svg,
video,
iframe {
    max-width: 100%;
}

/* Selecção de texto: usar o default do browser. Tema-la com a cor de marca
   falha quando a marca é um neutro claro (fundo cinza-claro + texto branco =
   ilegível). O default é sempre legível em qualquer site. */

/* Foco acessível por teclado. Tom escuro neutro GARANTIDO — um focus ring tem
   de ter contraste suficiente sempre; com marca clara (ex.: #c4c4c4 sobre
   branco, ~1.4:1) o anel ficava invisível. Acessibilidade > expressão de marca
   neste indicador. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    border-radius: 3px;
}

/* -----------------------------------------------------------------------------
   2. Header / logo — substitui as alturas inline removidas do master.blade.php
   -------------------------------------------------------------------------- */
.header .logo img {
    height: auto;
    max-height: 45px;
    transition: opacity var(--ck-dur) var(--ck-ease-out);
}
.header .logo:hover img {
    opacity: 0.85;
}
/* logo menor na barra sticky */
.header-bottom .logo.hidden-logo img {
    max-height: 35px;
}

/* sombra subtil quando o header fica fixo (mais "moderno" que o corte seco) */
.header-bottom.fixed,
.sticky-header.fixed {
    box-shadow: var(--ck-shadow-header);
    transition: box-shadow var(--ck-dur) var(--ck-ease-out);
}

/* -----------------------------------------------------------------------------
   3. Navegação principal — hover/focus com cor de marca + dropdown suave
   -------------------------------------------------------------------------- */
.main-nav .menu > li > a {
    transition: color var(--ck-dur) var(--ck-ease-out);
}
/* Hover do menu: escurecer o texto (não usar a cor de marca — com marca clara
   o item desbotava ao passar o rato). O realce de marca fica no traço (::after)
   abaixo, que é decorativo e não compromete a legibilidade. */
.main-nav .menu > li:hover > a,
.main-nav .menu > li.active > a {
    color: #111;
}
/* sublinhado animado de marca por baixo do item de topo */
.main-nav .menu > li > a::after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    margin-top: 2px;
    background: var(--main-color, #111);
    transition: width var(--ck-dur) var(--ck-ease-out);
}
.main-nav .menu > li:hover > a::after {
    width: 100%;
}
/* submenu: entrada ease-out (scale + opacity) em vez de aparecer seco */
.main-nav .menu ul {
    transition: opacity var(--ck-dur) var(--ck-ease-out),
        transform var(--ck-dur) var(--ck-ease-out),
        visibility var(--ck-dur);
    transform: translateY(6px);
}
.main-nav .menu li:hover > ul {
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   4. Cards de produto — lift no hover, zoom subtil da imagem, título de marca
   -------------------------------------------------------------------------- */
/* Hover: SÓ zoom suave da imagem. Sem sombra, sem caixa, sem lift — contra o
   fundo branco qualquer sombra desenhava uma "caixa" feia à volta da foto. O
   zoom contido (overflow:hidden) é o efeito editorial/premium adequado a uma
   marca soft; a afordância textual fica no título (escurece + sublinha). */
.product-media {
    overflow: hidden;
}
.product-media img {
    transition: transform 0.5s var(--ck-ease-out);
}
.product:hover .product-media img:not(.product-image-alternative) {
    transform: scale(1.06);
}
.product-title a {
    transition: color var(--ck-dur) var(--ck-ease-out);
}
/* Hover: escurecer + sublinhar (afordância de link). NÃO usar a cor de marca
   aqui — quando a marca é um neutro claro (ex.: #c4c4c4) o título desbotava em
   vez de realçar. Escuro + underline funciona em qualquer cor de marca. */
.product-title a:hover {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.product-label.label-sale {
    border-radius: 4px;
    letter-spacing: 0.02em;
}

/* -----------------------------------------------------------------------------
   4b. Cartão de produto — hierarquia (nome / preço / referência)
   Objectivo: alinhar os preços entre cards (o título de comprimento variável
   desalinhava-os), tornar o preço a âncora visual e demover o SKU.
   -------------------------------------------------------------------------- */

/* Nome: 2 linhas no máximo + altura reservada → todos os preços ficam à mesma
   altura na fila, mesmo com nomes de 1 ou 2 linhas. */
.product .product-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    margin-bottom: 0.35rem;
    font-weight: 500;
    line-height: 1.3;
}
.product .product-title a {
    color: #333;
}

/* Preço: âncora visual — escuro e bold (neutro, não a cor de marca cinza-clara).
   O sufixo "c/ IVA" e o preço antigo ficam discretos. */
.product .product-price {
    font-weight: 600;
    font-size: 1.35rem;
    color: #333;
}
.product .product-price sup {
    font-weight: 400;
    font-size: 0.62em;
    color: #9f9f9f;
}
.product .product-price .old-price {
    color: #9f9f9f;
}

/* Referência (SKU): removida do card — é um código técnico que destoa do tom
   soft/premium da loja; continua visível na ficha do produto. CSS-only →
   reversível e o markup fica intacto (outras vistas não afectadas). */
.product .product-cat {
    display: none;
}

/* -----------------------------------------------------------------------------
   4c. Ficha de produto — CTA forte, preço-âncora, descrição legível
   -------------------------------------------------------------------------- */

/* CTA "Adicionar ao carrinho": o tema deixava-o outline com texto cinza-claro
   (parecia desactivado). Numa ficha, o botão de compra é o elemento mais forte
   → sólido escuro, alto contraste. (A marca é cinza-clara, por isso o preto dá
   melhor CTA que a cor de marca.) `!important` para bater as utility classes
   `.border`/`.btn-product` do tema. */
.btn-product.btn-cart {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.btn-product.btn-cart:hover,
.btn-product.btn-cart:focus {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* Preço da ficha: o tema punha `text-muted` + cor inline translúcida → cinza
   fraco. Torná-lo âncora (escuro + bold). Scope `.fs-3` = só a ficha (os cards
   da listagem usam `.product-price` sem `fs-3`). */
.product-price.fs-3 {
    font-weight: 700 !important; /* bate a utility `.fw-normal` (que é !important) */
    color: #222;
}
.product-price.fs-3 [data-price-field] {
    color: #222 !important;
}

/* Descrição curta: subir o contraste (de #777 para #555). */
.product-content p {
    color: #555;
}

/* -----------------------------------------------------------------------------
   5. Botões — transição e micro-lift consistentes
   -------------------------------------------------------------------------- */
.btn {
    transition: transform var(--ck-dur) var(--ck-ease-out),
        box-shadow var(--ck-dur) var(--ck-ease-out),
        background-color var(--ck-dur) var(--ck-ease-out),
        border-color var(--ck-dur) var(--ck-ease-out),
        color var(--ck-dur) var(--ck-ease-out);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.btn:active {
    transform: translateY(0);
}

/* -----------------------------------------------------------------------------
   6. Toolbox / breadcrumb / títulos de secção — respiração e clareza
   -------------------------------------------------------------------------- */
.breadcrumb {
    background: transparent;
}
.toolbox .select-custom select.form-control {
    transition: border-color var(--ck-dur) var(--ck-ease-out),
        box-shadow var(--ck-dur) var(--ck-ease-out);
}
.toolbox .select-custom select.form-control:focus {
    border-color: var(--main-color, #111);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04);
}

/* -----------------------------------------------------------------------------
   7. Footer — hover dos ícones sociais e links com cor de marca
   -------------------------------------------------------------------------- */
.footer .social-icon {
    transition: transform var(--ck-dur) var(--ck-ease-out),
        color var(--ck-dur) var(--ck-ease-out),
        opacity var(--ck-dur) var(--ck-ease-out);
}
.footer .social-icon:hover {
    transform: translateY(-2px);
}
.footer .widget-list a {
    transition: color var(--ck-dur) var(--ck-ease-out),
        padding-left var(--ck-dur) var(--ck-ease-out);
}
.footer .widget-list a:hover {
    color: #111;
    padding-left: 3px;
}

/* -----------------------------------------------------------------------------
   7b. Galeria da ficha de produto — miniaturas e imagem principal
   Cosmético e conservador (a galeria é gerida por JS — slider/zoom — não mexer
   no layout do slider). Cobre os dois conjuntos de classes em uso (markup do
   package e markup do cliente). Centrar verticalmente as miniaturas elimina o
   "espaço morto" quando há poucas imagens numa coluna alta.
   -------------------------------------------------------------------------- */
.product-main-image img,
.product-main-image-wrapper img {
    border-radius: 8px;
}
.product-gallery-item img,
.product-image-thumbs-wrapper img {
    border-radius: 6px;
    transition: opacity var(--ck-dur) var(--ck-ease-out);
}
.product-gallery-item:hover img,
.product-image-thumbs-wrapper:hover img {
    opacity: 0.85;
}
.product-gallery-item.active img,
.product-image-thumbs-wrapper.active img {
    outline: 2px solid #1a1a1a;
    outline-offset: 1px;
}
/* coluna de miniaturas (markup cliente): centrar para equilibrar o vazio */
.mini-photos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* -----------------------------------------------------------------------------
   7c. Ficha de produto — legibilidade do texto (Detalhes / Informações
   adicionais). O conteúdo é HTML livre do admin; aqui só melhoramos a
   tipografia para a "parede de texto" respirar e ler-se melhor.
   -------------------------------------------------------------------------- */
.product-desc-content {
    max-width: 75ch;
    color: #555;
    line-height: 1.7;
}
.product-desc-content p {
    margin-bottom: 0.9rem;
}
.product-desc-content h3 {
    margin-top: 1.75rem;
    font-weight: 600;
    color: #222;
}

/* -----------------------------------------------------------------------------
   7d. CTA "Adicionar ao carrinho" fixo em mobile (barra inferior)
   Injectada por polish.js (clone do botão real). Escondida por defeito; só
   aparece em ≤768px. `bottom` é ajustado pelo JS para ficar ACIMA do cookie
   banner (não tapar o consentimento).
   -------------------------------------------------------------------------- */
.ck-sticky-cart {
    display: none;
}
@media (max-width: 768px) {
    .ck-sticky-cart {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1020;
        padding: 10px 14px;
        background: #fff;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
        transition: transform 0.25s var(--ck-ease-out);
    }
    .ck-sticky-cart__price {
        font-weight: 700;
        font-size: 1.15rem;
        color: #222;
        white-space: nowrap;
    }
    .ck-sticky-cart__btn {
        flex: 1;
        border: none;
        border-radius: 6px;
        background: #1a1a1a;
        color: #fff;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 13px 16px;
        cursor: pointer;
    }
    .ck-sticky-cart__btn:active {
        background: #000;
    }
    body.ck-has-sticky-cart {
        padding-bottom: 68px;
    }
}

/* -----------------------------------------------------------------------------
   7e. Carrinho (drawer) — componente standard partilhado. Polish conservador:
   subtotal-âncora, linha Qtd/preço mais clara, input de quantidade mais limpo,
   botão de checkout coerente (escuro, como o "Adicionar ao carrinho").
   -------------------------------------------------------------------------- */

/* Título do item */
.drawer .cart-content h2 {
    color: #333;
    line-height: 1.3;
}

/* Linha "Qtd: X  17,90 €": preço escuro (bate o inline #404141); "Qtd" recua. */
.drawer .cart-content .fw-bold {
    color: #222 !important;
}
.drawer .cart-content .fw-bold i {
    color: #9a9a9a;
    font-weight: 400;
    font-style: normal;
}

/* Ícone de remover: cinza → vermelho no hover (afordância clara) */
.drawer .cart-content [data-remove-from-cart] {
    color: #b8b8b8;
    transition: color var(--ck-dur) var(--ck-ease-out);
}
.drawer .cart-content [data-remove-from-cart]:hover {
    color: #d33;
}

/* Stepper de quantidade "− [n] +" (injectado por polish.js). Botões grandes
   tap-friendly que funcionam em desktop E telemóvel (o input nativo não mostra
   setas em mobile). */
.ck-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.ck-qty__btn {
    width: 36px;
    height: 36px;
    border: 0;
    background: #fff;
    color: #222;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--ck-dur) var(--ck-ease-out);
    -webkit-tap-highlight-color: transparent;
}
.ck-qty__btn:hover {
    background: #f3f3f3;
}
.ck-qty__btn:active {
    background: #e9e9e9;
}
.ck-qty__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
/* o input no meio do stepper: sem borda/setas próprias, só o número */
.ck-qty .custom-input-quantity {
    width: 40px !important;
    height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid #eee !important;
    border-right: 1px solid #eee !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #222 !important;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.ck-qty .custom-input-quantity::-webkit-outer-spin-button,
.ck-qty .custom-input-quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* fallback: input de quantidade fora de um stepper (raro) fica limpo na mesma */
.drawer .custom-input-quantity {
    border: 1px solid #dcdcdc !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #222 !important;
    margin-bottom: 0 !important;
}

/* Telemóvel: alvos de toque maiores (stepper + ícone de remover) */
@media (max-width: 768px) {
    .ck-qty__btn {
        width: 44px;
        height: 44px;
        font-size: 1.35rem;
    }
    .ck-qty .custom-input-quantity {
        width: 46px !important;
        height: 44px;
    }
    .drawer .cart-content [data-remove-from-cart] {
        padding: 8px;
        margin: -8px;
    }
}

/* Subtotal: âncora — escuro e maior */
.drawer .cart-footer .h5 {
    font-weight: 600;
    color: #222;
}
.drawer .cart-footer .h4 {
    font-weight: 700;
    color: #222;
    font-size: 1.4rem;
}

/* Botão de checkout: escuro coerente com o add-to-cart (em vez do verde
   genérico do Bootstrap que destoa da paleta). Scope ao drawer → não afecta
   outros `.btn-success` do site. */
.drawer .cart-footer .btn-success {
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 6px;
    padding-top: 13px;
    padding-bottom: 13px;
}
.drawer .cart-footer .btn-success:hover {
    background-color: #000 !important;
    border-color: #000 !important;
}

/* -----------------------------------------------------------------------------
   8. Scroll-to-top — entrada suave
   -------------------------------------------------------------------------- */
#scroll-top {
    transition: opacity var(--ck-dur) var(--ck-ease-out),
        transform var(--ck-dur) var(--ck-ease-out),
        background-color var(--ck-dur) var(--ck-ease-out);
}
#scroll-top:hover {
    transform: translateY(-3px);
}
/* Drawer do carrinho (ou menu mobile) aberto → esconder o "voltar ao topo".
   Senão a seta (fixed, bottom-right) sobrepõe-se ao botão "Finalização da
   compra" no fundo do drawer. open-drawer é adicionado ao body pelo cart.js;
   mmenu-active pelo menu mobile. Usa a transição de opacity já definida acima. */
body.open-drawer #scroll-top,
body.mmenu-active #scroll-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* -----------------------------------------------------------------------------
   9. Menu mobile / drawer — entrada ease-out
   -------------------------------------------------------------------------- */
.mobile-menu-container {
    transition: transform 0.3s var(--ck-ease-out);
}
.mobile-menu-overlay {
    transition: opacity 0.3s var(--ck-ease-out);
}

/* -----------------------------------------------------------------------------
   10. Responsivo — afinações por breakpoint (mobile-first nas correcções)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* o menu desktop usa text-wrap:nowrap; garantir que a versão mobile e o
       conteúdo nunca empurram a largura para lá do ecrã */
    .page-content,
    .footer,
    .main {
        overflow-x: clip;
    }
}

@media (max-width: 767.98px) {
    /* hero: título mais contido e legível no telemóvel */
    .intro-slide .intro-title {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
        line-height: 1.15;
    }
    .intro-slide .intro-content {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    /* page-header das listagens: menos altura desperdiçada */
    .page-header {
        padding-top: 2.25rem !important;
        padding-bottom: 2.25rem !important;
    }
    .page-header .page-title {
        font-size: 1.35rem;
    }
    /* grelha de produtos: gap consistente e respiração */
    .products .row {
        --bs-gutter-x: 0.75rem;
    }
    .product {
        margin-bottom: 0.5rem;
    }
    /* footer centrado e equilibrado em coluna única */
    .footer .widget-title {
        margin-top: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .intro-slide .intro-title {
        font-size: clamp(1.35rem, 8vw, 1.9rem);
    }
}

/* -----------------------------------------------------------------------------
   11. Acessibilidade — respeitar quem reduz movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -----------------------------------------------------------------------------
   12. App-like (PWA) — barra de navegação inferior + banner de instalação
   Camada polish, mobile-only. Reutiliza os triggers do tema (markup intacto).
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ck-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
        display: flex; align-items: stretch;
        background: rgba(255, 255, 255, 0.92);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-top: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: 0 -2px 18px rgba(40, 30, 15, 0.08);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ck-tab {
        flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 9px 4px 7px; border: 0; background: none; cursor: pointer;
        color: #8f877b; font-family: inherit; font-size: 10.5px; font-weight: 600;
        text-decoration: none; -webkit-tap-highlight-color: transparent;
        transition: color 0.18s var(--ck-ease-out, ease);
    }
    .ck-tab svg { width: 23px; height: 23px; transition: transform 0.18s var(--ck-ease-out, ease); }
    .ck-tab:active svg { transform: scale(0.86); }
    .ck-tab.is-active { color: #2c2620; }
    .ck-tab.is-active svg { stroke-width: 2; }
    .ck-tab-ico { position: relative; display: inline-flex; }
    .ck-tab-badge {
        position: absolute; top: -5px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: 999px; background: #e0524d; color: #fff; font-size: 10px; font-weight: 700;
        line-height: 16px; text-align: center; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
    }
    .ck-tab-badge[hidden] { display: none; }

    body.ck-has-tabbar { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; }

    /* Elementos flutuantes do tema sobem acima da tab bar. O botão de WhatsApp
       (czm) é fixed no FILHO .czm-button / .czm-speech-bubble — é esse que tem
       de subir, não o contentor .czm-chat-support (que é estático). */
    .ck-has-tabbar .czm-fixed .czm-button,
    .ck-has-tabbar .czm-fixed .czm-speech-bubble,
    .ck-has-tabbar [class*="whatsapp"],
    .ck-has-tabbar .back-to-top,
    .ck-has-tabbar #scroll-to-top,
    .ck-has-tabbar .scroll-top {
        bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
    .ck-has-tabbar .ck-sticky-cart { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }

    /* Drawer aberto (menu mobile `mmenu-active` OU carrinho `open-drawer`) →
       esconder a tab bar. Senão tapava o botão "Finalizar compra" no fundo do
       carrinho e o rodapé do menu. */
    body.mmenu-active .ck-tabbar,
    body.open-drawer .ck-tabbar { transform: translateY(110%); pointer-events: none; }
    .ck-tabbar { transition: transform 0.26s var(--ck-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
}

/* -----------------------------------------------------------------------------
   Pesquisa app-like — overlay full-screen (qualquer breakpoint, usado em mobile)
   -------------------------------------------------------------------------- */
.ck-search-overlay {
    position: fixed; inset: 0; z-index: 2100;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; transition: opacity 0.22s var(--ck-ease-out, ease);
    padding-top: env(safe-area-inset-top);
}
.ck-search-overlay.is-in { opacity: 1; }
.ck-search-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 12px 12px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    transform: translateY(-10px); transition: transform 0.26s var(--ck-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
.ck-search-overlay.is-in .ck-search-bar { transform: translateY(0); }
.ck-search-back, .ck-search-go {
    flex: 0 0 auto; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; background: none; color: #2c2620; cursor: pointer; border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
}
.ck-search-back svg, .ck-search-go svg { width: 22px; height: 22px; }
.ck-search-back:active, .ck-search-go:active { background: rgba(0, 0, 0, 0.05); }
.ck-search-bar input {
    flex: 1 1 auto; min-width: 0; height: 44px; border: 0; outline: none; background: none;
    font-size: 16px; color: #2c2620; font-family: inherit;
}
.ck-search-bar input::placeholder { color: #b7b0a4; }
@media (min-width: 992px) {
    .ck-tabbar { display: none !important; }
}

.ck-install {
    position: fixed; left: 50%; transform: translate(-50%, 160%);
    bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 1050;
    width: calc(100% - 28px); max-width: 440px;
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px;
    padding: 12px 12px 12px 14px; box-shadow: 0 14px 40px rgba(40, 30, 15, 0.18);
    opacity: 0;
    transition: transform 0.34s var(--ck-ease-out, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.34s ease;
}
.ck-install.is-in { transform: translate(-50%, 0); opacity: 1; }
.ck-install-icon img { width: 42px; height: 42px; border-radius: 11px; display: block; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); }
.ck-install-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ck-install-txt strong { font-size: 13.5px; color: #2c2620; }
.ck-install-txt span { font-size: 11.5px; color: #8f877b; }
.ck-install-go { border: 0; border-radius: 999px; background: #2c2620; color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; white-space: nowrap; transition: opacity 0.15s ease; }
.ck-install-go:active { opacity: 0.88; }
.ck-install-x { border: 0; background: none; color: #b7b0a4; font-size: 22px; line-height: 1; padding: 0 2px; cursor: pointer; }
@media (min-width: 992px) { .ck-install { bottom: 24px; } }

/* -----------------------------------------------------------------------------
   13. App-like mobile — header sticky, cards, chips de categorias, quick-add
   Camada polish, mobile-only (≤ 991px). Refina sobre o tema sem o tocar.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Header app-like: sticky compacto com blur */
    .header .header-middle {
        position: sticky; top: 0; z-index: 1001;
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.2s var(--ck-ease-out, ease);
    }
    .header .header-middle .container { padding-top: 7px; padding-bottom: 7px; min-height: 56px; }
    .header .header-left, .header .header-right { min-width: 0 !important; }
    /* ícones limpos e tap-friendly */
    .header .mobile-menu-toggler,
    .header .header-search .search-toggle,
    .header .cart-button > a {
        display: inline-flex !important; align-items: center; justify-content: center;
        width: 42px; height: 42px; margin: 0; padding: 0; border-radius: 12px;
        color: #2c2620; background: none; -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
    }
    .header .mobile-menu-toggler:active,
    .header .header-search .search-toggle:active,
    .header .cart-button > a:active { background: rgba(0, 0, 0, 0.05); }
    .header .mobile-menu-toggler i, .header .header-search .search-toggle i, .header .cart-button i { font-size: 19px; }
    .header .cart-button { padding-left: 0 !important; }
    .header .logo img { height: 38px !important; }

    /* Cards de produto — app-like */
    .product {
        position: relative; height: 100%;
        background: #fff; border-radius: 14px; overflow: hidden;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 10px 26px rgba(40, 30, 15, 0.055);
        transition: transform 0.18s var(--ck-ease-out, ease), box-shadow 0.2s ease;
    }
    .product:active { transform: scale(0.985); }
    .product .product-media {
        position: relative; margin: 0; aspect-ratio: 1 / 1;
        background: #f6f3ee; overflow: hidden; border-radius: 14px 14px 0 0;
    }
    .product .product-media > a { display: block; width: 100%; height: 100%; }
    /* contain (não cover) → mostra a foto inteira do produto sem cortar topo/fundo;
       fotos verticais (vestidos/fofos) deixam de ficar cortadas no card quadrado */
    .product .product-media img.product-image { width: 100%; height: 100%; object-fit: contain; }
    .product .product-body { padding: 9px 11px 12px; }
    .product .product-cat { display: none; } /* SKU fora do card em mobile */
    .product .product-title { margin: 0 0 3px; font-size: 12.8px; line-height: 1.32; font-weight: 500;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.64em; }
    .product .product-title a { color: #2b2620; }
    .product .product-price { font-size: 14px; font-weight: 700; color: #1f1b16; }
    .product .product-price .old-price { font-size: 11.5px; color: #b7b0a4; font-style: normal; }
    .product .product-price sup { font-size: 8.5px; color: #b7b0a4; font-weight: 400; }
    .product .product-label { border-radius: 999px; padding: 3px 9px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; top: 8px; left: 8px; }

    /* espaçamento da grelha 2-col */
    .products .row { margin-left: -6px; margin-right: -6px; row-gap: 12px; }
    .products .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }

    /* Hero — premium */
    .hero-area { border-radius: 16px; overflow: hidden; margin: 10px 12px 0; box-shadow: 0 10px 30px rgba(40, 30, 15, 0.08); }
    .hero-area img { border-radius: 16px; }

    /* Títulos de secção */
    .main-content h2, .title-wrapper .title, section > .container > .row h2 {
        font-size: 1.12rem; letter-spacing: -0.01em;
    }
}

/* Quick-add "+" no card (mobile e desktop) */
.ck-quick-add {
    position: absolute; right: 8px; bottom: 8px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: #2c2620; color: #fff; display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 5px 16px rgba(20, 14, 8, 0.28); cursor: pointer; padding: 0;
    transition: transform 0.15s var(--ck-ease-out, ease), background 0.2s ease, opacity 0.2s ease;
}
.ck-quick-add svg { width: 19px; height: 19px; }
.ck-quick-add:hover { background: #000; }
.ck-quick-add:active { transform: scale(0.88); }
.ck-quick-add.is-loading { opacity: 0.6; pointer-events: none; }
.ck-quick-add.is-done { background: #2e7d46; }
@media (min-width: 992px) { .ck-quick-add { opacity: 0; transform: translateY(6px); } .product:hover .ck-quick-add { opacity: 1; transform: none; } }

/* -----------------------------------------------------------------------------
   Quick-view modal (produtos variáveis) — popup central para escolher a variação
   -------------------------------------------------------------------------- */
.ck-qv { position: fixed; inset: 0; z-index: 3000; display: none; padding: 24px; }
.ck-qv.is-open { display: flex; align-items: center; justify-content: center; }
.ck-qv-overlay {
    position: absolute; inset: 0; background: rgba(20, 14, 8, 0.5);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ck-qv-dialog {
    position: relative; max-width: 720px; width: 100%;
    max-height: calc(100vh - 48px); margin: 0; background: #fff;
    border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 30px 80px rgba(20, 14, 8, 0.35);
    animation: ckQvIn 0.28s var(--ck-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes ckQvIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.ck-qv-close {
    position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px;
    border: 0; background: rgba(255, 255, 255, 0.88); border-radius: 50%;
    font-size: 24px; line-height: 1; color: #2c2620; cursor: pointer;
}
.ck-qv-body { display: flex; overflow: auto; }
.ck-qv-media {
    flex: 0 0 45%; background: #f4efe8; display: flex; align-items: center;
    justify-content: center; min-height: 280px;
}
.ck-qv-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-qv-info { flex: 1 1 auto; padding: 30px 28px; }
.ck-qv-name { font-size: 20px; font-weight: 600; color: #2c2620; margin: 0 0 8px; line-height: 1.25; }
.ck-qv-price { font-size: 18px; color: #2c2620; margin-bottom: 18px; }
.ck-qv-price sup { font-size: 10px; color: #8f877b; }
.ck-qv-group { margin-bottom: 14px; }
.ck-qv-glabel { display: block; font-size: 13px; color: #8f877b; margin-bottom: 7px; }
.ck-qv-items { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-qv-item {
    padding: 8px 15px; border: 1px solid #ddd6cc; border-radius: 8px; background: #fff;
    color: #2c2620; font: inherit; font-size: 14px; cursor: pointer; position: relative;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ck-qv-item:hover { border-color: #2c2620; }
.ck-qv-item.is-selected { border-color: #2c2620; background: #2c2620; color: #fff; }
/* Variação esgotada: cor apagada + corte diagonal */
.ck-qv-item.is-oos { color: #b7b0a4; border-color: #ece7df; background: #faf7f2; overflow: hidden; }
.ck-qv-item.is-oos::after {
    content: ''; position: absolute; left: -8%; top: 50%; width: 116%; height: 1.5px;
    background: #c9a6a0; transform: rotate(-16deg); transform-origin: center;
}
.ck-qv-item.is-oos.is-selected { background: #f0e6e4; color: #9a8f8b; border-color: #d9bdb8; }
.ck-qv-status { font-size: 13px; margin: 8px 0 14px; min-height: 18px; }
.ck-qv-status.is-ok { color: #2e7d46; }
.ck-qv-status.is-oos { color: #c0392b; }
.ck-qv-add {
    display: block; width: 100%; padding: 14px; border: 0; border-radius: 10px;
    background: #2c2620; color: #fff; font: inherit; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease;
}
.ck-qv-add:hover { background: #000; }
/* Botão desativado (variação sem stock / nada escolhido): cor morta */
.ck-qv-add.is-disabled { background: #d8d2c8; color: #fff; cursor: not-allowed; pointer-events: none; opacity: 0.9; }
.ck-qv-add.is-loading { opacity: 0.6; pointer-events: none; }
.ck-qv-detail { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: #8f877b; text-decoration: underline; }
.ck-qv-loading { padding: 56px 24px; text-align: center; color: #8f877b; width: 100%; }
body.ck-qv-lock { overflow: hidden; }
@media (max-width: 600px) {
    .ck-qv-body { flex-direction: column; }
    .ck-qv-media { flex-basis: auto; min-height: 200px; }
    .ck-qv-info { padding: 22px 18px; }
}

/* -----------------------------------------------------------------------------
   Ficha de produto — mesma linguagem do quick-view: variações esgotadas com
   corte diagonal e botão "Adicionar ao carrinho" morto quando sem stock.
   -------------------------------------------------------------------------- */
.product-variants-item .ck-oos .radio-label {
    color: #b7b0a4; background: #faf7f2; border-color: #ece7df !important;
    position: relative; overflow: hidden;
}
.product-variants-item .ck-oos .radio-label::after {
    content: ''; position: absolute; left: -8%; top: 50%; width: 116%; height: 1.5px;
    background: #c9a6a0; transform: rotate(-16deg); transform-origin: center; pointer-events: none;
}
.ck-btn-dead,
a.btn-product.ck-btn-dead {
    background: #d8d2c8 !important; border-color: #d8d2c8 !important; color: #fff !important;
    cursor: not-allowed !important; pointer-events: none !important; opacity: 0.9;
}

/* Chips de categorias (horizontal scroll) */
.ck-cats { margin: 14px 0 2px; }
.ck-cats-track {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 14px 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ck-cats-track::-webkit-scrollbar { display: none; }
.ck-cat {
    flex: 0 0 auto; padding: 8px 16px; border-radius: 999px;
    background: #f1ece4; color: #4a443b; font-size: 13px; font-weight: 600;
    text-decoration: none; white-space: nowrap; border: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, transform 0.12s ease;
}
.ck-cat:active { background: #e6dfd4; transform: scale(0.97); }
@media (min-width: 992px) { .ck-cats { display: none; } }

/* Safe-area no topo quando instalada (standalone) */
@media (display-mode: standalone) {
    .header .header-middle { padding-top: env(safe-area-inset-top); }
}

/* -----------------------------------------------------------------------------
   14. Página "A minha conta" (login + registo) — limpa, on-brand
   -------------------------------------------------------------------------- */
.ck-auth-page { padding: 40px 0 64px; background: #faf7f2; }
.ck-auth-card {
    max-width: 460px; margin: 0 auto; padding: 0 16px;
}
.ck-auth-title {
    font-size: 26px; font-weight: 700; color: #2c2620; text-align: center;
    margin: 0 0 6px; letter-spacing: -0.01em;
}
.ck-auth-sub {
    text-align: center; color: #8f877b; font-size: 14px; line-height: 1.5;
    margin: 0 auto 22px; max-width: 380px;
}
.ck-auth-page .form-box {
    background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px;
    box-shadow: 0 8px 30px rgba(40, 30, 15, 0.07); padding: 8px 22px 26px;
}
.ck-auth-page .nav-pills { margin-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.ck-auth-page .nav-pills .nav-link {
    background: none; border: 0; border-radius: 0; color: #b7b0a4; font-weight: 600;
    font-size: 14.5px; padding: 16px 8px 13px; position: relative;
}
.ck-auth-page .nav-pills .nav-link.active {
    background: none; color: #2c2620;
}
.ck-auth-page .nav-pills .nav-link.active::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2c2620;
}
.ck-auth-page .form-group { margin-bottom: 14px; }
.ck-auth-page label { font-size: 13px; font-weight: 600; color: #5a544b; }
.ck-auth-page .form-control {
    height: 46px; border: 1px solid #e4ded4; border-radius: 10px; padding: 0 14px;
    font-size: 15px; color: #2c2620; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ck-auth-page .form-control:focus {
    border-color: #2c2620; box-shadow: 0 0 0 3px rgba(44, 38, 32, 0.08); outline: none;
}
.ck-auth-check { font-size: 13px; color: #6b645a; font-weight: 500; cursor: pointer; }
.ck-auth-check input { margin-right: 6px; vertical-align: middle; accent-color: #2c2620; }
.ck-auth-link { font-size: 13px; color: #2c2620; font-weight: 600; text-decoration: underline; }
.ck-auth-link:hover { color: #6535c8; }
.ck-auth-page .btn-outline-primary-2 {
    height: 48px; border-radius: 999px; background: #2c2620; border: 0; color: #fff;
    font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 6px; transition: opacity 0.15s ease, transform 0.12s ease;
}
.ck-auth-page .btn-outline-primary-2:hover { background: #2c2620; color: #fff; opacity: 0.92; }
.ck-auth-page .btn-outline-primary-2:active { transform: scale(0.99); }
.ck-auth-page .btn-outline-primary-2 span { color: inherit; }

/* Ícone "A minha conta" no header. Em mobile (≤991px) a tab bar inferior já
   tem o separador "Conta", por isso esconde-se aqui para não duplicar. */
.ck-account-btn {
    display: inline-flex; align-items: center; justify-content: center;
    color: inherit; padding-left: 16px; text-decoration: none;
}
.ck-account-btn .icon { display: inline-flex; }
.ck-account-btn .icon i { font-size: 21px; line-height: 1; }
.ck-account-btn:hover { color: var(--main-color, #2c2620); opacity: 0.85; }
@media (max-width: 991px) { .ck-account-btn { display: none; } }

/* -----------------------------------------------------------------------------
   Header — igualar e alinhar os ícones de conta + carrinho (principal e sticky)
   Antes: no header principal a conta (21px) era muito menor que o carrinho
   (3.2rem) e desalinhada; no sticky a regra do tema
   (.header-bottom .header-right i: 1.6rem) encolhia ambos. Normaliza tamanho
   e centra verticalmente nos dois headers.
   -------------------------------------------------------------------------- */
.header-right { align-items: center; }
.header-right .ck-account-btn,
.header-right .cart-button { display: inline-flex; align-items: center; }

/* Header principal: conta passa a igualar o carrinho (mesmo tamanho e nudge) */
.header-middle .ck-account-btn .icon i {
    font-size: 3.2rem;
    line-height: 1;
    margin-top: -3px;
}

/* Sticky: os dois ícones maiores e alinhados (vence a regra 1.6rem do tema) */
.header-intro-clearance .header-bottom .header-right .ck-account-btn .icon i,
.header-intro-clearance .header-bottom .header-right .cart-button .dropdown-toggle i {
    font-size: 2.6rem;
    line-height: 1;
    margin-top: 0;
    margin-right: 0;
}
/* o glifo do carrinho assenta ~5px mais baixo que o da conta no sticky; o
   margin-top é absorvido pelo flex (align-items:center) e não mexe nada, por
   isso uso transform (valor medido com Playwright: diff exato de 5px) */
.header-intro-clearance .header-bottom .header-right .cart-button .dropdown-toggle i {
    transform: translateY(-5px);
}