/* === base/_variables.css === */
/* Contém todas as variáveis CSS para cores, sombras, etc. */
:root {
    /* Cores */
    --cor-texto: #1C1C1C;
    --cor-fundo: #FFFFFF;
    --cor-borda-subtil: #E5E5E5;
    --cor-cinza-medio: #757575;
    --cor-sucesso: #28a745;
    --cor-erro: #c0392b;
    --cor-texto-pagina: #1C1C1C;
    --cor-texto-pagina-suave: #64748B;
    --cor-divisor-pagina: rgba(28, 28, 28, 0.15);
    --cor-divisor-pagina-forte: rgba(28, 28, 28, 0.24);
    --cor-superficie-cartao: #FFFFFF;
    --cor-borda-cartao: rgba(28, 28, 28, 0.16);
    --cor-divisor-cartao: rgba(28, 28, 28, 0.11);

    /* === TEMA DINÂMICO ===
       Accent: o header.php injeta os valores reais (auto-derivados do fundo,
       ou a cor custom escolhida no admin). Estes são apenas fallback. */
    --cor-accent: #B08968;
    --cor-accent-soft: #C9A989;
    /* Tons estruturais que acompanham automaticamente a --cor-fundo-pagina */
    --tema-superficie: #FFFFFF;
    --tema-linha: color-mix(in srgb, var(--cor-fundo-pagina, #FAF8F4), #000 8%);
    --tema-tinte: color-mix(in srgb, var(--cor-fundo-pagina, #FAF8F4), #fff 55%);
    --tema-ink: var(--cor-texto-pagina, #1C1C1C);
    --tema-ink-suave: color-mix(in srgb, var(--cor-texto-pagina, #1C1C1C) 76%, var(--cor-fundo-pagina, #FAF8F4));
    --tema-muted: var(--cor-texto-pagina-suave, #8A857D);
    --tema-accent-tinte: color-mix(in srgb, var(--cor-accent) 12%, transparent);

    /* Sombras */
    --sombra-subtil: 0 5px 15px rgba(0, 0, 0, 0.06);
    --sombra-media: 0 8px 25px rgba(0, 0, 0, 0.1);
    --sombra-forte: 0 10px 30px rgba(0, 0, 0, 0.15);

    /* Arredondamento de Bordas (NOVO) */
    --border-radius-pequeno: 4px;  /* Para inputs, botões secundários */
    --border-radius-medio: 8px;   /* Para cartões, modais, imagens */
    --border-radius-grande: 25px; /* Para botões principais, estilo "pílula" */
    /* Sistema global de botoes - baseado no botao "Editar Perfil" do admin */
    --button-bg: #fff;
    --button-border: #e2e8f0;
    --button-color: #475569;
    --button-icon-color: #64748b;
    --button-hover-bg: #f8fafc;
    --button-hover-border: #cbd5e1;
    --button-hover-color: #1e293b;
    --button-hover-icon-color: #64748b;
    --button-padding: 10px 18px;
    --button-radius: 99px;
    --button-gap: 8px;
    --button-font-size: 0.85rem;
    --button-font-weight: 600;
    --button-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --button-hover-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --button-transition: all 0.2s ease;
}

/* === base/_reset.css === */
/* Remove os estilos padrão do navegador para consistência. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-tap-highlight-color: transparent;
}

a,
button,
input,
textarea,
select,
label,
summary,
[role="button"],
[tabindex] {
    -webkit-tap-highlight-color: transparent;
}

:focus:not(:focus-visible) {
    outline: none;
}

/* === base/_typography.css === */
/* Estilos globais para a tipografia do site. */

body {
    font-family: 'Inter', sans-serif;
    color: var(--cor-texto);
    line-height: 1.6;
    background-color: var(--cor-fundo-pagina, #FAF8F4);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Sticky Footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/*
 * Fundo global configurável.
 * A especificidade e o !important impedem páginas como checkout,
 * autenticação, sucesso e 404 de voltarem a impor um fundo fixo.
 * Cartões, formulários e painéis internos mantêm os seus próprios fundos.
 */
body > main {
    background-color: var(--cor-fundo-pagina, #FAF8F4) !important;
    color: var(--cor-texto-pagina, #1C1C1C);
}


main h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

main p {
    font-size: 1rem;
    margin-bottom: 30px;
    color: var(--cor-cinza-medio);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ESTILO BASE PARA H3 (MODIFICADO) */
main h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--cor-texto);
    text-align: left; /* Alinhado à esquerda por defeito */
}

/* MODIFICADOR PARA H3 CENTRALIZADO (NOVO) */
main h3.centrado {
    text-align: center;
}

/* === base/_utilities.css === */
/* public/css/base/_utilities.css */

/* --- GLOBAL HIDDEN SCROLLBARS --- */
/* Hide scrollbar for Chrome, Safari, Edge and Opera */
::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Firefox */
* {
    scrollbar-width: none;
}

/* Hide scrollbar for IE and older Edge */
* {
    -ms-overflow-style: none;
}

/* Scroll Lock Utility */
.scroll-lock {
    overflow: hidden !important;
}

/* --- IMAGE ZOOM --- */
.zoom-container {
    overflow: hidden;
    touch-action: none; 
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.zoom-container img {
    display: block;
    max-width: none; 
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    transition: transform 120ms ease-out; 
    will-change: transform;
    transform-origin: center center;
}

/* --- TIPPY.JS THEME --- */
.tippy-box[data-theme~='toptop-professional'] {
    background-color: #1C1C1C;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    padding: 10px 14px;
    max-width: 300px;
    text-align: center;
}

.tippy-box[data-theme~='toptop-professional'] > .tippy-arrow {
    color: #1C1C1C;
}

.tippy-box[data-theme~='toptop-professional'] .tippy-content {
    white-space: normal;
    word-wrap: break-word;
}

/* --- ENTRY ANIMATIONS --- */
.animate-entry {
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    will-change: transform, opacity;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* === layout/_main.css === */
/* Estilos para o contentor principal <main> do site */
main {
    padding: 60px 40px;
    max-width: 1280px;
    margin: 0 auto;
    flex: 1; /* Sticky Footer */
    width: 100%;
}

/* Estilos específicos para o <main> da homepage, que não tem padding */
.main-home {
    padding: 0;
    max-width: none;
}

/* Responsividade do <main> */
@media (max-width: 1024px) {
    main {
        padding: 30px 20px;
    }
}

@media (max-width: 480px) {
    main {
        padding: 24px 16px;
    }
}
/* === layout/_grid.css === */
/* Estilos para os sistemas de grelha reutilizáveis. */
.produtos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

/* Responsividade das Grelhas */
@media (max-width: 1024px) {
    .produtos-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .produtos-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .produtos-grid { grid-template-columns: 1fr; }
}

/* === layout/_header.css === */
/* Estilos para o cabeçalho e navegação principal. */
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(16px, 4vw, 40px);
    background-color: var(--cor-fundo);
    border-bottom: 1px solid var(--cor-borda-subtil);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Elevação subtil ao fazer scroll — CSS puro (scroll-driven), sem JS.
   Degrada graciosamente em browsers sem suporte (fica sem sombra). */
@supports (animation-timeline: scroll()) {
    .site-header {
        animation: site-header-elevate linear both;
        animation-timeline: scroll(root);
        animation-range: 0 90px;
    }

    @keyframes site-header-elevate {
        to {
            box-shadow: 0 6px 20px rgba(28, 28, 28, 0.07);
            border-bottom-color: transparent;
        }
    }
}

/* Header dinâmico: esconde no scroll para baixo, revela no scroll para cima.
   Ativado por toggle no painel dev (classe adicionada no header.php). */
.site-header.header-auto-hide {
    transition: transform .4s cubic-bezier(.22, .61, .25, 1);
    will-change: transform;
}
.site-header.header-auto-hide.is-hidden {
    transform: translateY(-100%);
}
.site-header.header-auto-hide.is-tracking-top {
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .site-header.header-auto-hide {
        transition: none;
    }
}

.site-header .logo img.logo-img {
    height: 100px;
}

.main-nav-desktop {
    display: block;
}

.main-nav-desktop ul {
    list-style: none;
    display: flex;
    align-items: center;
}

.main-nav-desktop li {
    position: relative;
    margin-left: 30px;
}

.main-nav-desktop a,
.main-nav-desktop .nav-categorias-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cor-texto);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.25s ease;
    opacity: 0.82;
    cursor: pointer;
}

.main-nav-desktop a:hover,
.main-nav-desktop a.ativo,
.main-nav-desktop .nav-categorias-toggle:hover,
.main-nav-desktop .nav-categorias-toggle.ativo,
.nav-item-categorias.aberto .nav-categorias-toggle {
    opacity: 1;
}

/* Sublinhado indicador (hover + página ativa) — cresce a partir do centro.
   Limitado aos links de topo (não afeta os do dropdown de categorias). */
.main-nav-desktop > ul > li > a,
.main-nav-desktop > ul > li > .nav-categorias-toggle {
    position: relative;
}

.main-nav-desktop > ul > li > a::after,
.main-nav-desktop > ul > li > .nav-categorias-toggle::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-nav-desktop > ul > li > a:hover::after,
.main-nav-desktop > ul > li > a.ativo::after,
.main-nav-desktop > ul > li > .nav-categorias-toggle:hover::after,
.main-nav-desktop > ul > li > .nav-categorias-toggle.ativo::after,
.nav-item-categorias.aberto > .nav-categorias-toggle::after {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .main-nav-desktop > ul > li > a::after,
    .main-nav-desktop > ul > li > .nav-categorias-toggle::after {
        transition: none;
    }
}

.nav-categorias-toggle svg {
    transition: transform 0.24s ease;
}

.nav-item-categorias:hover .nav-categorias-toggle svg,
.nav-item-categorias.aberto .nav-categorias-toggle svg {
    transform: rotate(180deg);
}

.nav-categorias-dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    z-index: 120;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 32px));
    max-height: min(420px, 70vh);
    padding: 8px;
    overflow-y: auto;
    border: 1px solid #e8edf3;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -4px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.nav-item-categorias:hover .nav-categorias-dropdown,
.nav-item-categorias.aberto .nav-categorias-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.nav-categorias-dropdown .nav-categoria-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 38px;
    padding: 10px 12px !important;
    border-radius: 12px;
    box-shadow: none;
    color: #1f2937;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
    transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.nav-categorias-dropdown .nav-categoria-link:hover {
    z-index: 1;
    background: #f8fafc;
    color: #111;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

.nav-categorias-dropdown .nav-categoria-todos {
    margin-bottom: 4px;
    color: #000;
    font-weight: 750;
}

.header-direita {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Ações e Ícones da Direita */
.header-acoes {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- ACCOUNT DROPDOWN --- */
.header-account-container {
    position: relative;
    display: flex;
    align-items: center;
}

.header-account-dropdown {
    position: absolute;
    top: 100%;
    right: -10px;
    z-index: 130;
    min-width: 200px;
    padding: 8px;
    margin-top: 5px; /* Added margin instead of top gap to allow bridge */
    border: 1px solid #eef2f7;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(15, 23, 42, 0.15);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.95);
    transform-origin: top right;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Invisible bridge to keep menu open while moving mouse from icon to dropdown */
.header-account-dropdown::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.header-account-container:hover .header-account-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.account-dropdown-info {
    padding: 10px 12px 12px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 6px;
}

.account-dropdown-info strong {
    display: block;
    font-size: 0.82rem;
    color: #0f172a;
    font-weight: 750;
    text-transform: none;
    letter-spacing: -0.01em;
}

.account-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #475569;
    font-size: 0.86rem;
    font-weight: 650;
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.18s ease;
}

.account-dropdown-link:hover {
    background: #f8fafc;
    color: #0f172a;
}

.account-dropdown-link svg {
    color: #94a3b8;
    transition: color 0.18s ease;
}

.account-dropdown-link:hover svg {
    color: #475569;
}

.account-dropdown-link.logout {
    color: #ef4444;
}

.account-dropdown-link.logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

.account-dropdown-link.logout svg {
    color: #fca5a5;
}

.account-dropdown-link.logout:hover svg {
    color: #ef4444;
}

.account-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 6px 0;
}

.header-account-link {
    color: var(--cor-texto);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 5px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.header-account-link > span:last-child {
    display: none;
}

.header-account-link .account-icon-svg {
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.account-close-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8) rotate(-45deg);
    transition: opacity 0.2s ease, transform 0.25s ease;
    pointer-events: none;
}

.account-close-line {
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background-color: currentColor;
}

.account-close-line:nth-child(1) {
    transform: rotate(45deg);
}

.account-close-line:nth-child(2) {
    transform: rotate(-45deg);
}

.header-account-link.ativo .account-icon-svg {
    opacity: 0;
    transform: scale(0.72) rotate(18deg);
}

.header-account-link.ativo .account-close-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.icon-carrinho {
    color: var(--cor-texto);
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 5px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.icon-carrinho .cart-icon-svg {
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.cart-close-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8) rotate(-45deg);
    transition: opacity 0.2s ease, transform 0.25s ease;
    pointer-events: none;
}

.cart-close-line {
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background-color: currentColor;
}

.cart-close-line:nth-child(1) {
    transform: rotate(45deg);
}

.cart-close-line:nth-child(2) {
    transform: rotate(-45deg);
}

.icon-carrinho.ativo .cart-icon-svg {
    opacity: 0;
    transform: scale(0.72) rotate(18deg);
}

.icon-carrinho.ativo .cart-close-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.icon-carrinho.ativo #contagem-carrinho {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}

.search-toggle-mobile {
    position: relative;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    color: var(--cor-texto) !important;
}

.search-toggle-mobile .search-icon-svg {
    position: relative;
    z-index: 1;
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.search-close-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8) rotate(-45deg);
    transition: opacity 0.2s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.search-close-line {
    position: absolute;
    width: 24px;
    height: 2px;
    border-radius: 999px;
    background-color: var(--cor-texto);
}

.search-close-line:nth-child(1) {
    transform: rotate(45deg);
}

.search-close-line:nth-child(2) {
    transform: rotate(-45deg);
}

.search-toggle-mobile.ativo .search-icon-svg {
    opacity: 0;
    transform: scale(0.72) rotate(18deg);
}

.search-toggle-mobile.ativo .search-close-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.header-icon-dev {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.header-icon-dev:hover {
    color: #ef4444;
    background: #fef2f2;
    transform: rotate(45deg);
}

.header-icon-dev.loading {
    animation: cfg-spin 0.8s linear infinite;
    pointer-events: none;
    color: #94a3b8;
}

/*#contagem-carrinho { position: absolute; top: -8px; right: -8px; background-color: var(--cor-erro); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; border: 2px solid var(--cor-fundo); display: none; }

/* Esconde elementos mobile por defeito */
.header-icon-mobile,
.hamburger-btn {
    display: none;
}

.main-nav-mobile,
.menu-overlay,
.search-overlay {
    display: none;
}

/* Barra de Pesquisa Desktop */
.form-procura {
    position: relative;
    display: flex;
    align-items: center;
}

.form-procura input[type="search"] {
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 20px;
    padding: 8px 40px 8px 15px;
    font-size: 0.9rem;
    width: 200px;
    transition: width 0.3s ease;
}

.form-procura input[type="search"]:focus {
    width: 250px;
}

.form-procura button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--cor-cinza-medio);
    transition: color 0.3s ease;
}

.form-procura button:hover {
    background-color: transparent !important;
    color: var(--cor-texto);
}

/* --- REGRAS RESPONSIVAS --- */
@media (max-width: 768px) {
    .site-header .logo img.logo-img {
        height: 80px;
    }

    .main-nav-desktop,
    .form-procura {
        display: none;
    }

    .header-icon-mobile,
    .hamburger-btn {
        background: transparent !important;
        border: none;
        cursor: pointer;
        color: var(--cor-texto) !important;
        padding: 5px;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .header-icon-mobile {
        display: block;
    }

    .search-toggle-mobile {
        display: inline-flex;
    }

    .hamburger-btn {
        display: flex;
        width: 34px;
        height: 34px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
    }

    .hamburger-btn:hover,
    .hamburger-btn:focus,
    .hamburger-btn:active,
    .search-toggle-mobile:hover,
    .search-toggle-mobile:focus,
    .search-toggle-mobile:active,
    .search-toggle-mobile.ativo,
    .hamburger-btn.ativo {
        background: transparent !important;
        color: var(--cor-texto) !important;
    }

    .hamburger-line {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--cor-texto);
        border-radius: 999px;
        transform-origin: center;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .hamburger-btn.ativo .hamburger-line:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger-btn.ativo .hamburger-line:nth-child(2) {
        opacity: 0;
    }

    .hamburger-btn.ativo .hamburger-line:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header-icon-mobile:focus,
    .hamburger-btn:focus,
    .header-icon-mobile:active,
    .hamburger-btn:active,
    .icon-carrinho:active,
    .icon-carrinho:focus {
        background: transparent !important;
        outline: none;
    }

    .header-acoes {
        gap: 5px;
    }

    .header-account-dropdown {
        display: none !important;
    }

    /* Reduz o espaço entre os ícones no mobile */

    /* Overlay do Menu Hamburger */
    .menu-overlay {
        display: block;
        position: fixed;
        top: var(--site-header-height, 101px);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--site-header-height, 101px));
        height: calc(100dvh - var(--site-header-height, 101px));
        background-color: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(4px);
        z-index: 98;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.32s ease;
    }

    .menu-overlay.ativo {
        opacity: 1;
        pointer-events: auto;
    }

    .main-nav-mobile {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: var(--site-header-height, 101px);
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - var(--site-header-height, 101px));
        height: calc(100dvh - var(--site-header-height, 101px));
        max-height: calc(100vh - var(--site-header-height, 101px));
        max-height: calc(100dvh - var(--site-header-height, 101px));
        background-color: #fff;
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-24px);
        transform-origin: top center;
        transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 0;
        overflow: hidden;
    }

    .main-nav-mobile.ativo {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .main-nav-mobile li,
    .nav-mobile-footer-links li {
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: 0s;
    }

    .main-nav-mobile.ativo li,
    .main-nav-mobile.ativo .nav-mobile-footer-links li {
        opacity: 1;
        transform: translateY(0);
    }

    .main-nav-mobile.ativo li:nth-child(1) {
        transition-delay: 0.06s;
    }

    .main-nav-mobile.ativo li:nth-child(2) {
        transition-delay: 0.09s;
    }

    .main-nav-mobile.ativo li:nth-child(3) {
        transition-delay: 0.12s;
    }

    .main-nav-mobile.ativo li:nth-child(4) {
        transition-delay: 0.15s;
    }

    .main-nav-mobile.ativo li:nth-child(5) {
        transition-delay: 0.18s;
    }

    .main-nav-mobile.ativo li:nth-child(6) {
        transition-delay: 0.21s;
    }

    .main-nav-mobile.ativo .nav-mobile-footer-links li:nth-child(1) {
        transition-delay: 0.18s;
    }

    .main-nav-mobile.ativo .nav-mobile-footer-links li:nth-child(2) {
        transition-delay: 0.21s;
    }

    .main-nav-mobile.ativo .nav-mobile-footer-links li:nth-child(3) {
        transition-delay: 0.24s;
    }

    .nav-mobile-header {
        display: none;
        padding: 5px 20px;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #f1f5f9;
        width: 100%;
    }

    .nav-mobile-logo {
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .nav-mobile-logo img {
        height: 75px;
        object-fit: contain;
    }


    .nav-mobile-body {
        flex: 1;
        overflow-y: auto;
        padding: 18px 0;
    }

    .main-nav-mobile ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
    }

    .main-nav-mobile li {
        width: 100%;
    }

    .main-nav-mobile a {
        padding: 16px 25px;
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        text-decoration: none;
        color: #1a1a1a;
        font-size: 1.05rem;
        font-weight: 500;
        text-transform: uppercase;
        transition: all 0.2s ease;
    }

    .nav-mobile-category-toggle {
        display: flex;
        align-items: center;
        gap: 15px;
        width: 100%;
        padding: 16px 25px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #1a1a1a !important;
        font-size: 1.05rem !important;
        font-weight: 500 !important;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0 !important;
        cursor: pointer;
    }

    .nav-mobile-category-toggle svg {
        color: #94a3b8;
        transition: color 0.2s ease, transform 0.24s ease;
    }

    .nav-mobile-category-toggle:hover {
        background-color: #f8fafc !important;
        color: #1a1a1a !important;
        transform: none !important;
    }

    .nav-mobile-category-toggle.ativo,
    .nav-mobile-categorias.aberto .nav-mobile-category-toggle {
        background-color: #f1f5f9 !important;
        color: #000 !important;
        font-weight: 700 !important;
    }

    .nav-mobile-categorias.aberto .nav-mobile-category-toggle svg {
        color: #000;
    }

    .nav-mobile-category-toggle .nav-mobile-category-chevron {
        margin-left: auto;
    }

    .nav-mobile-categorias.aberto .nav-mobile-category-chevron {
        transform: rotate(180deg);
    }

    .nav-mobile-category-list {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.32s ease, opacity 0.22s ease;
    }

    .nav-mobile-categorias.aberto .nav-mobile-category-list {
        max-height: min(420px, 52vh);
        opacity: 1;
        overflow-y: auto;
    }

    .nav-mobile-category-list a {
        min-height: 38px;
        padding: 10px 25px 10px 60px;
        color: #64748b;
        font-size: 0.9rem;
        font-weight: 650;
        letter-spacing: 0;
        text-transform: none;
        background: #fff;
    }

    .nav-mobile-category-list a:first-child {
        padding-top: 14px;
        color: #111;
    }

    .nav-mobile-category-list a:last-child {
        padding-bottom: 16px;
    }

    .main-nav-mobile a svg {
        color: #94a3b8;
        transition: color 0.2s ease;
    }

    .main-nav-mobile a:hover {
        background-color: #f8fafc;
    }

    .main-nav-mobile a:hover svg {
        color: #000;
    }

    .main-nav-mobile a.ativo {
        background-color: #f1f5f9;
        color: #000;
        font-weight: 700;
    }

    .main-nav-mobile a.ativo svg {
        color: #000;
    }

    .nav-mobile-divider {
        height: 1px;
        background: #f1f5f9;
        margin: 15px 25px;
    }

    .nav-mobile-footer {
        display: block;
        padding: 18px 25px calc(22px + env(safe-area-inset-bottom));
        border-top: 1px solid #f1f5f9;
        text-align: left;
        color: #94a3b8;
        font-size: 0.85rem;
    }

    .nav-mobile-footer-links {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0;
        margin: 0;
    }

    .nav-mobile-footer-links a {
        display: block;
        padding: 0;
        color: #64748b;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .nav-mobile-footer-links a:hover,
    .nav-mobile-footer-links a:focus {
        background: transparent;
        color: #000;
    }
}

.search-overlay {
    display: flex;
    position: fixed;
    top: var(--site-header-height, 101px);
    left: 0;
    right: 0;
    width: 100%;
    height: calc(100vh - var(--site-header-height, 101px));
    height: calc(100dvh - var(--site-header-height, 101px));
    z-index: 99;
    align-items: flex-start;
    justify-content: center;
    padding: 26px 18px;
    background: #fbfcfd;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
    transform-origin: top center;
    transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
}

.search-overlay.ativo {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.search-overlay .fechar-pesquisa-btn {
    display: none;
}

.search-panel {
    width: min(100%, 640px);
}

.search-panel-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.search-panel-heading span {
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 760;
    line-height: 1.15;
}

.search-panel-heading small {
    color: #7c8798;
    font-size: 0.84rem;
    font-weight: 600;
}

.form-procura-overlay {
    position: relative;
    width: 100%;
}

.form-procura-overlay input[type="search"] {
    width: 100%;
    height: 56px;
    padding: 0 60px 0 18px;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: 0;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-procura-overlay input[type="search"]::placeholder {
    color: #a0aab8;
    font-weight: 550;
}

.form-procura-overlay input[type="search"]:focus {
    outline: none;
    border-color: #cbd5e1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.045);
}

.form-procura-overlay button {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: #0f172a !important;
    color: #fff;
    cursor: pointer;
    transform: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.form-procura-overlay button:hover {
    background: #020617 !important;
    color: #fff;
    transform: translateY(-1px);
}

.form-procura-overlay button svg {
    width: 20px;
    height: 20px;
}

.search-results-container {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    width: 100%;
    max-height: min(460px, calc(100dvh - var(--site-header-height, 101px) - 110px));
    overflow-y: auto;
    display: none;
    z-index: 1001;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.1);
}

.search-result-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    color: #0f172a;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.search-result-item+.search-result-item {
    border-top: 1px solid #f1f5f9;
}

.search-result-item:hover,
.search-result-item:focus {
    background-color: #f8fafc;
}

.search-result-item img {
    width: 54px;
    height: 66px;
    object-fit: cover;
    border: 1px solid #edf1f6;
    border-radius: 8px;
    background: #f8fafc;
    flex-shrink: 0;
}

.search-result-info {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.search-result-info .nome {
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-info .preco {
    color: #6b7280;
    font-size: 0.84rem;
    font-weight: 700;
}

.search-results-footer {
    display: block;
    padding: 13px 12px;
    border-top: 1px solid #eef2f7;
    background-color: #fff;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.search-results-footer:hover,
.search-results-footer:focus {
    background: #f8fafc;
}

.search-results-empty {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.35;
}

.search-results-empty strong {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 750;
}

.search-results-empty a {
    width: fit-content;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-transform: uppercase;
}

.search-assist-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 22px;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.search-quick-section {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #eef2f7;
}

.search-assist-panel.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.search-assist-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 11px;
    color: #7c8798;
    font-size: 0.74rem;
    font-weight: 780;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.search-history-clear {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #98a2b3 !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.search-history-clear:hover,
.search-history-clear:focus {
    color: #111827 !important;
    transform: none !important;
}

.search-history-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-quick-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.search-history-chip {
    display: inline-flex;
    height: 36px;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid #e6eaf0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #475569 !important;
    box-shadow: none !important;
    font-size: 0.82rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.search-history-term,
.search-history-remove {
    display: inline-flex !important;
    height: 34px !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    transform: none !important;
}

.search-history-term {
    width: auto !important;
    padding: 0 4px 0 13px !important;
    font: inherit !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    text-align: left;
    text-transform: none !important;
}

.search-history-remove {
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin-right: 6px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #a7afbd !important;
    font-size: 1.05rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    opacity: 0.72;
    transition: color 0.18s ease, opacity 0.18s ease;
    margin-top: -2px;
}

.search-history-remove span {
    display: block;
    line-height: 1;
    transform: translateY(0.5px);
}

.search-history-chip:hover,
.search-history-chip:focus-within {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
    transform: translateY(-1px);
}

.search-history-remove:hover,
.search-history-remove:focus {
    background: transparent !important;
    color: #ef4444 !important;
    opacity: 1;
}

.search-quick-links a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 0 2px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #475569 !important;
    font-size: 0.9rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.search-quick-links a::after {
    content: "→";
    color: #cbd5e1;
    font-size: 1rem;
    transition: color 0.2s ease, transform 0.2s ease;
}

.search-quick-links a:hover,
.search-quick-links a:focus {
    color: #111827 !important;
    padding-left: 4px;
    transform: none;
}

.search-quick-links a:hover::after,
.search-quick-links a:focus::after {
    color: #111827;
    transform: translateX(3px);
}

.search-empty-note {
    margin: 0;
    color: #98a2b3;
    font-size: 0.86rem;
    font-weight: 600;
}

@media (min-width: 769px) {
    .search-overlay {
        top: 0;
        height: 100vh;
        height: 100dvh;
        z-index: 10002;
        padding-top: 12vh;
        background: rgba(251, 252, 253, 0.96);
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 480px) {
    .search-overlay {
        padding: 18px;
    }

    .search-panel-heading span {
        font-size: 1rem;
    }

    .form-procura-overlay input[type="search"] {
        height: 50px;
        padding-left: 15px;
    }

    .form-procura-overlay button {
        top: 6px;
        right: 6px;
        width: 38px;
        height: 38px;
    }
}

/* ... (código existente no início do ficheiro) ... */

.cart-badge-wrapper {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 10;
}

#contagem-carrinho {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--cor-erro);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--cor-fundo);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
}

#contagem-carrinho.visivel {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

#contagem-carrinho.pop {
    animation: cart-badge-pop 0.24s ease-out both;
}

@keyframes cart-badge-pop {
    0% {
        transform: scale(0.85);
    }

    65% {
        transform: scale(1.12);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes cfg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* === layout/_footer.css === */
/* Estilos para o rodapé do site. */
.site-footer {
    position: relative;
    background-color: #ffffff;
    border-top: 1px solid var(--cor-borda-subtil);
    color: var(--cor-cinza-medio);
    padding: clamp(48px, 6vw, 72px) clamp(24px, 5vw, 40px) 28px;
    font-size: 0.9rem;
}

.site-footer-home {
    border-top: 0;
    padding-top: clamp(78px, 10vw, 120px);
}

.site-footer-home.site-footer-white-bg {
    border-top: 1px solid var(--cor-borda-subtil);
    padding-top: clamp(48px, 6vw, 72px);
}

/* Onda bege exclusiva da homepage. */
.site-footer-home::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(54px, 7vw, 88px);
    background-color: var(--cor-fundo-pagina, #FAF8F4);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H1440%20V46%20C1150,84%20870,14%20600,44%20C380,68%20170,30%200,50%20Z'%20fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%2090'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,0%20H1440%20V46%20C1150,84%20870,14%20600,44%20C380,68%20170,30%200,50%20Z'%20fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: clamp(32px, 4vw, 56px);
    max-width: 1280px;
    margin: 0 auto clamp(34px, 4vw, 48px) auto;
    text-align: left;
}

.footer-coluna h4 {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer-coluna p {
    margin-bottom: 0;
    line-height: 1.85;
    max-width: 100%;
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    color: var(--cor-cinza-medio);
}

.footer-coluna p a,
.footer-links a {
    /* Regra modificada para incluir os links da lista */
    color: var(--cor-cinza-medio);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-coluna p a:hover,
.footer-links a:hover {
    /* Regra modificada para incluir o hover */
    color: var(--cor-texto);
}

/* --- LISTA DE LINKS --- */
.footer-links {
    list-style: none;
    /* Remove os pontos */
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0px;
    line-height: 2;
}

/* Sublinhado subtil no hover */
.footer-links a {
    position: relative;
    display: inline-block;
}

.footer-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.footer-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* ── Lista de Contatos ── */
.footer-contato-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contato-info li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 13px;
    line-height: 1.5;
}

.footer-contato-info li svg {
    flex-shrink: 0;
    color: var(--cor-texto);
    margin-top: 2px;
    opacity: 0.75;
}

.footer-contato-info li span,
.footer-contato-info li a {
    color: var(--cor-cinza-medio);
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-contato-info li a:hover {
    color: var(--cor-texto);
}

/* ── Redes Sociais (botões circulares, inspirado na referência) ── */
.footer-social {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer-social-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid var(--cor-borda-subtil);
    background-color: #ffffff;
    color: var(--cor-cinza-medio);
    text-decoration: none;
    opacity: 1;
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, transform 0.25s cubic-bezier(.22, .61, .25, 1);
}

.footer-social-link svg {
    display: block;
    width: 18px;
    height: 18px;
}

.footer-social-link:hover {
    color: #ffffff;
    border-color: transparent;
    transform: translateY(-3px);
}

.footer-social-link.wa:hover { background-color: #25D366; }
.footer-social-link.ig:hover { background-color: #E1306C; }
.footer-social-link.fb:hover { background-color: #1877F2; }

/* ── Copyright ── */
.footer-copyright {
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    padding-top: 26px;
    border-top: 1px solid var(--cor-borda-subtil);
    color: var(--cor-cinza-medio);
    font-size: 0.82rem;
}

.footer-copyright p {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .footer-links a::after,
    .footer-social-link {
        transition: none;
    }
}

/* === layout/_forms.css === */
/* Estilos genéricos para formulários. */
form label {
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
    font-size: 0.9rem;
    margin-top: 8px;
}

form input[type="text"],
form input[type="number"],
form input[type="password"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
    padding: 12px;
    border-radius: var(--border-radius-pequeno);
    border: 1px solid var(--cor-borda-subtil);
    width: 100%;
    max-width: 100%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Inter', sans-serif;
    background-color: #fcfcfc;
}

form textarea {
    resize: none;
}

form input:focus, form select:focus, form textarea:focus {
    outline: none;
    border-color: var(--cor-texto);
    box-shadow: 0 0 0 3px rgba(28, 28, 28, 0.1);
}

/* Password Visibility Toggle */
.password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.toggle-senha {
    position: absolute;
    right: 0;
    height: 100%;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cor-cinza-medio);
    user-select: none;
    z-index: 5;
    transition: all 0.2s ease;
}

.toggle-senha:hover {
    color: var(--cor-texto);
    transform: scale(1.1);
}

.toggle-senha svg {
    pointer-events: none;
    width: 20px;
    height: 20px;
}

/* Garante que o input tem espaço para o ícone */
.password-wrapper input {
    padding-right: 45px !important;
}

/* Estrutura de Formulários do Admin */
.admin-form-container {
    display: inline-block;
    text-align: left;
    width: 100%;
    max-width: 700px;
}

.form-group {
    margin-bottom: 25px;
    position: relative;
}

.form-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

/* Mensagens de Autenticação/Feedback */
.auth-message {
    max-width: 350px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid;
    border-radius: var(--border-radius-pequeno);
    text-align: center;
    font-size: 0.9rem;
}

.admin-main-content .auth-message {
    max-width: 100%;
    margin: 20px 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-message.error { background-color: #f8d7da; border-color: #f5c6cb; color: #721c24; }
.auth-message.success { background-color: #d4edda; border-color: #c3e6cb; color: #155724; }
.auth-message.warning { background-color: #fff3cd; border-color: #ffeeba; color: #856404; font-weight: bold; }

@media (max-width: 768px) {
    .admin-form-container {
        display: block;
        width: 100%;
    }
    .input-com-olho {
        max-width: 100%;
    }
}

/* --- INÍCIO DO NOVO LAYOUT DE LOGIN (MODERNO E ELEGANTE) --- */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 20px;
}

.login-card {
    width: 100%;
    max-width: 440px;
    background-color: #ffffff;
    padding: 45px 50px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-card:hover {
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08), 0 2px 5px rgba(0, 0, 0, 0.03);
    transform: translateY(-2px);
}

.login-card h2 {
    text-align: center;
    margin-bottom: 35px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: -0.02em;
}

.login-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

.login-card .form-group {
    margin-bottom: 22px;
}

.login-card label {
    font-size: 0.9rem;
    color: #4a4a4a;
    font-weight: 600;
    margin-bottom: 8px;
}

.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"],
.login-card input[type="tel"],
.login-card input[type="number"] {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    background-color: #fcfcfc;
    font-size: 1rem;
    line-height: 1.2; /* Altura de linha fixa */
    height: 52px;      /* Altura total fixa para consistência absoluta */
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    box-sizing: border-box;
}

.login-card input:focus {
    background-color: #ffffff;
    border-color: #000000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.login-card input[type="submit"] {
    width: 100%;
    padding: 15px;
    margin-top: 10px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.login-card input[type="submit"]:hover {
    background-color: #333333;
}

.login-card input[type="submit"]:active {
    transform: scale(0.98);
}

.form-actions-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid #f0f0f0;
}

.link-recuperar {
    font-size: 0.9rem;
    color: #666666;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.link-recuperar:hover {
    color: #000000;
}

.login-card .input-com-olho {
    max-width: 100%;
    margin-bottom: 22px;
}

@media (max-width: 600px) {
    .login-container {
        min-height: 0;
        align-items: flex-start;
        padding: 0;
    }

    .login-card {
        max-width: 100%;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 36px 22px 48px;
    }

    .login-card:hover {
        transform: none;
        box-shadow: none;
    }
}
/* --- FIM DO NOVO LAYOUT DE LOGIN --- */
/* === layout/_admin-layout.css === */
/* Cabeçalho Unificado das Páginas de Admin */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; 
    gap: 15px 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cor-borda-subtil);
    width: 100%;
}

/* Grupo: Seta + Título */
.header-title-container,
.admin-page-header > div:first-child:not([class]) {
    display: flex !important;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 200px;
}

/* Grupo: Botões de Ação */
.header-actions-container,
.admin-page-header > div:last-child:not(:first-child) {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.admin-page-header .btn-back-arrow {
    margin-bottom: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cor-accent, #B08968);
}

.admin-page-header .btn-back-arrow:hover {
    background: var(--cor-accent, #B08968);
    border-color: var(--cor-accent, #B08968);
    color: #fff;
    transform: translateX(-4px);
}

.admin-page-header h2 {
    margin: 0 !important;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.2;
}

@media (max-width: 992px) {
    .admin-page-header {
        gap: 12px 15px;
        margin-bottom: 25px;
        padding-bottom: 15px;
    }
    .admin-page-header h2 {
        font-size: 1.4rem;
    }
}

@media (max-width: 576px) {
    .admin-page-header {
        margin-bottom: 20px;
    }
    .admin-page-header h2 {
        font-size: 1.2rem;
    }
    .admin-page-header .btn-back-arrow svg {
        width: 20px;
        height: 20px;
    }
    .header-actions-container,
    .admin-page-header > div:last-child:not(:first-child) {
        width: 100%;
        margin-left: 0;
    }
    .header-actions-container button,
    .header-actions-container .btn-primary {
        flex: 1;
        justify-content: center;
    }
}

/* Content Containers */
.admin-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 15px;
}

.admin-container.large {
    max-width: 1200px;
}

/* === components/_buttons.css === */
/* Estilos para todos os botões e links estilizados como botões. */
.button, button, input[type="submit"], .voltar-btn, .add-btn, .edit-btn, .delete-btn {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--cor-texto);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 12px 25px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--cor-texto);
    color: var(--cor-fundo);
    border-radius: var(--border-radius-grande); /* PADRÃO PÍLULA */
}

.button:hover, button:hover, input[type="submit"]:hover, .add-btn:hover, .edit-btn:hover {
    background-color: #333;
    color: var(--cor-fundo);
}

.voltar-btn {
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    border-color: var(--cor-borda-subtil);
}
.voltar-btn:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
    color: var(--cor-texto) !important;
}

/* Novo botão de voltar com seta moderna (sem texto) */
.btn-back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px; /* Estilo moderno levemente arredondado */
    border: 1px solid var(--cor-borda-subtil);
    background: color-mix(in srgb, var(--cor-accent, #B08968) 10%, #fff);
    color: var(--cor-accent, #B08968);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    margin-bottom: 25px;
}

.btn-back-arrow:hover {
    background: var(--cor-accent, #B08968);
    border-color: var(--cor-accent, #B08968);
    color: #fff;
    transform: translateX(-4px); /* Efeito de movimento para a esquerda */
    box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cor-accent, #B08968) 55%, transparent);
}

.btn-back-arrow svg {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}

/* --- ALTERAÇÕES AQUI: Botões secundários também são pílula, mas mais pequenos --- */
.edit-btn, .delete-btn {
    font-size: 0.8rem;
    padding: 8px 20px;
    border-radius: var(--border-radius-grande); /* MODIFICADO de --border-radius-grande */
}
.delete-btn {
    background-color: var(--cor-fundo);
    color: var(--cor-erro);
    border-color: var(--cor-erro);
}
.delete-btn:hover {
    background-color: var(--cor-erro);
    border-color: var(--cor-erro);
    color: #fff;
}
/* --- FIM DAS ALTERAÇÕES --- */

/* BOTÃO DE ADICIONAR RÁPIDO */
.btn-adicionar-rapido {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--border-radius-grande); /* MODIFICADO */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 85%;
    padding: 14px 10px;
    font-size: 0.85rem;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda-subtil);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
}

.produto:hover .btn-adicionar-rapido,
.produto.mobile-actions-visible .btn-adicionar-rapido {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.btn-adicionar-rapido:hover {
    background-color: var(--cor-texto);
    color: #fff;
    border-color: var(--cor-texto);
}

@media (hover: none) and (pointer: coarse) {
    .produto:hover .btn-adicionar-rapido {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
}

.produto.mobile-actions-visible .btn-adicionar-rapido {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* === components/_close-button.css === */
/* public/css/components/_close-button.css */

/* 
   UNIFIED CLOSE BUTTON
   This class provides a shared base for all "X" buttons.
   It uses !important only for essential overrides (background/border) 
   to allow contextual styles (like in cart/checkout) to prevail.
*/

.btn-close-unified {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    outline: none;
    /* Default color and size - can be overridden by specific classes */
    color: var(--cor-texto, #111);
    font-size: 1.5rem;
}

.btn-close-unified:hover {
    color: var(--cor-erro, #c0392b);
    background: none !important;
}

.btn-close-unified:active {
    transform: scale(0.9);
}

/* ── Contexts that REQUIRE Absolute Positioning (Modals/Popups) ── */
.qe-modal .btn-close-unified,
.modal .btn-close-unified,
.filtros-sidebar .btn-close-unified,
.gal-lb .btn-close-unified,
.modal-header-shipping .btn-close-unified {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 300;
    z-index: 1000;
}

/* ── EXACT REPLICATION OF ORIGINAL STYLES FOR CART & CHECKOUT ── */

/* 1. Side Cart Header Button */
.btn-fechar-side-cart.btn-close-unified {
    font-size: 2rem;
    color: var(--cor-cinza-medio);
}
.btn-fechar-side-cart.btn-close-unified:hover {
    color: var(--cor-texto); /* Side cart header turns black, not red */
}

/* 2. Cart & Checkout Item Removal Button */
.remover-item-btn.btn-close-unified {
    font-size: 1.2rem;
    color: var(--cor-cinza-medio);
    position: static; /* Maintains original layout flow */
}
.remover-item-btn.btn-close-unified:hover {
    color: var(--cor-erro);
}

/* 3. Popup Notification Button */
.popup .btn-close-unified {
    padding: 0 15px;
}

/* ── Responsive adjustments for Modals ── */
@media (max-width: 768px) {
    .qe-modal .btn-close-unified,
    .modal .btn-close-unified,
    .filtros-sidebar .btn-close-unified {
        top: 15px;
        right: 15px;
        font-size: 1.4rem;
    }
}

/* === components/_product-card.css === */
/* ===================================================
   CSS FINAL PARA O CARTÃO DE PRODUTO - VERSÃO DEFINITIVA
   =================================================== */

.produto {
    background-color: var(--cor-superficie-cartao);
    border-radius: var(--border-radius-medio);
    overflow: hidden;
    box-shadow: var(--sombra-subtil);
    /* MODIFICADO */
    border: 1px solid var(--cor-borda-cartao);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;
    text-decoration: none;
    color: var(--cor-texto);
}

.produto:hover {
    transform: translateY(-8px);
    box-shadow: var(--sombra-media);
    /* MODIFICADO */
}

.produto-imagem-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    /* ALTERADO AQUI */
    background-color: #f0f0f0;
    overflow: hidden;
}

.produto-imagem-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 101%;
    object-fit: cover;
    transition: opacity 0.4s ease-in-out;
}

.produto-imagem-container .imagem-secundaria {
    opacity: 0;
}

.produto-info {
    padding: 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.produto h4 {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.produto p {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-texto);
    margin: 0;
}

.preco-promocao del {
    color: var(--cor-cinza-medio);
    font-weight: 400;
    font-size: 0.9em;
}

.preco-promocao strong {
    margin-left: 8px;
    color: var(--cor-erro);
    font-weight: 700;
}

.badge.promocao {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--cor-erro);
    color: #fff;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 5;
}

.badge-esgotado-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    color: var(--cor-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    backdrop-filter: blur(2px);
    z-index: 10;
}

.btn-adicionar-rapido {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    position: absolute;
    bottom: 15px;
    left: 50%;
    width: 85%;
    padding: 14px 10px;
    font-size: 0.85rem;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--cor-texto);
    border: 1px solid var(--cor-borda-subtil);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
}

.btn-adicionar-rapido:hover {
    background-color: var(--cor-texto);
    color: #fff;
    border-color: var(--cor-texto);
}


/* --- CORREÇÃO FINAL E DEFINITIVA PARA MOBILE/DESKTOP --- */

/* Regra para MOBILE: A visibilidade é controlada APENAS pela classe do JavaScript */
.produto.mobile-actions-visible .btn-adicionar-rapido {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.produto.mobile-actions-visible .produto-imagem-container .imagem-secundaria {
    opacity: 1;
}

/* Regra para DESKTOP: A visibilidade é controlada APENAS pelo hover do rato.
   A media query garante que estas regras são ignoradas em dispositivos de toque. */
@media (hover: hover) and (pointer: fine) {
    .produto:hover .btn-adicionar-rapido {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .produto:hover .produto-imagem-container .imagem-secundaria {
        opacity: 1;
    }
}

/* === components/_modal.css === */
/* ===================================================
   CSS CORRIGIDO PARA O MODAL - VERSÃO DEFINITIVA
   =================================================== */

.modal {
    display: flex;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.modal.ativo {
    opacity: 1;
    pointer-events: auto;
}
.modal-conteudo {
    background-color: var(--cor-fundo);
    border-radius: 8px;
    padding: 30px;
    position: relative;
    width: 90%;
    max-width: 800px;
    transform: scale(0.95);
    transition: transform 0.3s ease;
    /* --- INÍCIO DA CORREÇÃO --- */
    max-height: 90vh; /* Define uma altura máxima (90% da altura do ecrã) */
    overflow-y: auto; /* Adiciona uma barra de scroll vertical se o conteúdo for maior */
    /* --- FIM DA CORREÇÃO --- */
}
.modal.ativo .modal-conteudo {
    transform: scale(1);
}

.modal-grid-conteudo {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
    visibility: hidden;
}
.modal-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#modalNome {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
    padding-right: 40px;
}
#modalPreco {
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--cor-texto);
    margin-bottom: 20px;
}
#modalDescricao {
    font-size: 1rem;
    color: var(--cor-cinza-medio);
    line-height: 1.7;
    margin-bottom: 15px;
}
.modal .fechar {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--cor-cinza-medio);
    cursor: pointer;
    z-index: 10;
    /* --- INÍCIO DA CORREÇÃO --- */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* Garante alinhamento vertical perfeito */
    transition: all 0.2s ease; /* Transição para cor e fundo */
    /* --- FIM DA CORREÇÃO --- */
}

.variacoes-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}
.selecao-variacao {
    flex: 1;
}
.selecao-variacao label {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
}


/* Galeria e Zoom */
.modal-galeria {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zoom-container {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    border-radius: 8px;
    border: 1px solid var(--cor-borda-subtil);
}
#modalImagemPrincipal {
    width: 101%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    border: none;
    outline: none;
    display: block;
    transform: scale(1.01);
}
.modal-thumbnails {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.modal-thumbnail {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}
.modal-thumbnail.ativa, .modal-thumbnail:hover {
    border-color: var(--cor-texto);
}

/* Responsividade do Modal */
@media (max-width: 768px) {
    .modal-conteudo {
        width: 95%;
        padding: 50px 20px 20px 20px;
        max-height: 90vh;
        overflow-y: auto;
    }
    .modal-grid-conteudo {
        grid-template-columns: 1fr;
    }
    .modal .fechar { top: 5px; right: 18px; font-size: 2rem; }
    .modal-info { margin-top: 10px; }
    #modalNome { font-size: 1.8rem; }
    #modalPreco { font-size: 1.5rem; }
}

/* Produtos Relacionados */
.produtos-relacionados-container {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--cor-borda-subtil);
}
.produtos-relacionados-container h4 {
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 15px;
}
.produtos-relacionados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.relacionado-item {
    text-decoration: none;
    color: var(--cor-texto);
    font-size: 0.8rem;
    text-align: center;
    transition: transform 0.2s ease;
    min-width: 0;
}
.relacionado-item:hover { transform: translateY(-4px); }
.relacionado-item img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid var(--cor-borda-subtil);
}
.relacionado-item span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Por defeito (Desktop), escondemos a versão mobile */
.desktop-only { display: block; }
.mobile-only { display: none; }

/* Em ecrãs pequenos (Mobile)... */
@media (max-width: 768px) {
    /* ...escondemos a versão desktop... */
    .desktop-only {
        display: none;
    }
    /* ...e mostramos a versão mobile. */
    .mobile-only {
        display: block;
    }
}

/* Modal de Confirmação */
.modal-confirmacao { display: none; position: fixed; z-index: 20000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6); align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.modal-confirmacao.ativo { display: flex; opacity: 1; pointer-events: auto; }
.modal-confirmacao-conteudo { background-color: #fff; padding: 30px; border-radius: var(--border-radius-medio); width: 90%; max-width: 450px; text-align: center; box-shadow: var(--sombra-forte); /* MODIFICADO */ transform: scale(0.95); transition: transform 0.3s ease; }
.modal-confirmacao.ativo .modal-confirmacao-conteudo { transform: scale(1); }
.modal-confirmacao-conteudo h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.4rem; }
.modal-confirmacao-conteudo p { color: var(--cor-cinza-medio); margin-bottom: 30px; font-size: 1rem; line-height: 1.6; }
.modal-confirmacao-acoes { display: flex; justify-content: center; gap: 15px; }
/* ===================================================
   INÍCIO DA REVISÃO FINAL: DESIGN DO SIDE-CART APLICADO
   =================================================== */

.bloco-acoes-compra {
    background-color: #f9f9f9; padding: 25px; border-radius: 8px;
    border: 1px solid var(--cor-borda-subtil); margin-bottom: 25px;
}

/* (A lógica de animação e layout vertical permanece intacta) */
.modal-acoes-principais {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.seletor-quantidade {
    flex-shrink: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: max-height 0.4s ease, margin-bottom 0.4s ease, opacity 0.2s 0.2s ease;
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    align-items: center;
}
.seletor-quantidade label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--cor-texto);
}
.modal-acoes-principais.seletor-visivel .seletor-quantidade {
    opacity: 1;
    max-height: 60px;
    margin-bottom: 25px;
}

/* --- INÍCIO DAS NOVAS REGRAS DE DESIGN --- */

/* 1. O 'wrapper' tem as bordas arredondadas e o efeito de hover */
.seletor-quantidade .input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 25px; /* Arredondado como no carrinho */
    background-color: #fff;
    height: 48px;
    transition: box-shadow 0.2s ease;
}

/* 2. O input do número tem largura fixa */
.seletor-quantidade input[type="number"] {
    width: 50px;
    height: 100%;
    text-align: center;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--cor-texto);
    border: none;
    background: none;
    padding: 0;
}
.seletor-quantidade input::-webkit-outer-spin-button,
.seletor-quantidade input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

/* 3. Os botões são transparentes e não têm bordas */
.seletor-quantidade .btn-qty {
    height: 100%;
    width: 45px;
    background-color: transparent;
    color: var(--cor-cinza-medio);
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}
.seletor-quantidade .btn-qty:hover {
    color: var(--cor-texto); /* Apenas a cor do ícone muda no hover */
}
.seletor-quantidade .btn-qty:disabled {
    color: #e0e0e0;
    cursor: not-allowed;
}

/* --- FIM DAS NOVAS REGRAS DE DESIGN --- */

/* --- INÍCIO DA CORREÇÃO PARA PRODUTOS SEM ATRIBUTOS --- */
.bloco-acoes-compra.sem-variacoes {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 0px;
}
/* --- FIM DA CORREÇÃO --- */


/* ===================================================
   FIM DA REVISÃO
   =================================================== */

/* Estlos para o Loading do Modal (Mantidos) */
.modal-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; z-index: 20; border-radius: 8px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; }
.modal-loading-overlay.ativo { opacity: 1; visibility: visible; }
.spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--cor-texto); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


/* Correção para o botão de fechar em modais com scroll */
.modal-confirmacao .fechar {
    position: sticky;
    top: -20px;
    float: right;
    margin-right: -25px;
    margin-top: -20px;
    margin-bottom: -40px; /* Impede que o texto fique por baixo do botão */
    background: var(--cor-fundo);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    border: none;
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--cor-cinza-medio);
    transition: color 0.2s ease;
}

.modal-confirmacao .fechar:hover {
    background: var(--cor-fundo);
    color: var(--cor-texto);
}

/* Product modal refresh */
.modal {
    background-color: rgba(16, 24, 39, 0.48);
    backdrop-filter: blur(10px);
}

.modal-conteudo {
    width: min(94vw, 1080px);
    max-width: 1080px;
    padding: clamp(18px, 2.8vw, 30px);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(16, 24, 39, 0.24);
}

.modal-grid-conteudo {
    grid-template-columns: minmax(290px, 0.9fr) minmax(350px, 1fr);
    gap: clamp(22px, 4vw, 42px);
    align-items: start;
}

.modal .fechar {
    top: 15px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent !important;
    color: var(--cor-cinza-medio);
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    box-shadow: none;
}

.modal .fechar:hover {
    color: var(--cor-texto);
    background: transparent !important;
    transform: none;
}

.modal .modal-galeria {
    gap: 12px;
}

.modal .zoom-container {
    border: 1px solid #e6ebf0;
    border-radius: 18px;
    background: linear-gradient(145deg, #f9fafb, #f1f3f5);
    box-shadow: 0 18px 42px rgba(16, 24, 39, 0.08);
}

.modal #modalImagemPrincipal {
    width: 100%;
    border-radius: 18px;
    transform: none;
}

.modal .zoom-container:hover #modalImagemPrincipal {
    transform: scale(1.02);
}

.modal .modal-thumbnails {
    gap: 9px;
}

.modal .modal-thumbnail {
    border: 1px solid #e2e8ef;
    border-radius: 10px;
    background: #fff;
    opacity: 0.72;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.modal .modal-thumbnail.ativa,
.modal .modal-thumbnail.active,
.modal .modal-thumbnail:hover {
    border-color: var(--cor-texto);
    box-shadow: 0 8px 18px rgba(16, 24, 39, 0.12);
    opacity: 1;
    transform: translateY(-1px);
}

.modal .modal-info {
    gap: 14px;
    padding: 4px 8px 4px 0;
}

.modal #modalNome {
    margin: 0;
    padding-right: 52px;
    color: var(--cor-texto);
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: 0;
}

.modal #modalPreco {
    margin: 0;
    color: var(--cor-texto);
    font-size: clamp(1.45rem, 2.4vw, 1.95rem);
    font-weight: 700;
    line-height: 1.1;
}

.modal .preco-promocao del {
    margin-right: 9px;
    color: #9aa1aa;
    font-size: 0.72em;
    font-weight: 500;
}

.modal .produto-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.modal .meta-item {
    min-height: 32px;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 0.8rem;
}

.modal .variacoes-container {
    gap: 12px;
    margin-bottom: 16px;
}

.modal .selecao-variacao label {
    margin-bottom: 7px;
    color: var(--cor-texto);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.modal .select-wrapper {
    position: relative;
}

.modal .select-estilizado {
    width: 100%;
    min-height: 46px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    background-color: #fff;
    color: var(--cor-texto);
    font-size: 0.92rem;
    font-weight: 600;
}

.modal .select-estilizado:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}

.modal .bloco-acoes-compra {
    margin: 0 0 8px;
    padding: 18px;
    border: 1px solid #e5e9ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(16, 24, 39, 0.08);
}

.modal .bloco-acoes-compra.sem-variacoes {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.modal .modal-acoes-principais {
    gap: 12px;
}

.modal #btn-guia-tamanhos {
    width: 100%;
    margin: 0 0 8px !important;
}

.modal .seletor-quantidade {
    gap: 12px;
}

.modal .seletor-quantidade label {
    font-size: 0.92rem;
}

.modal .seletor-quantidade .input-wrapper {
    height: 46px;
    border-radius: 999px;
    border-color: #dce2e8;
}

.modal .detalhes-produto-acordeao {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.modal .detalhes-produto-acordeao .acordeao-item {
    overflow: hidden;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    background: #fff;
}

.modal .detalhes-produto-acordeao .acordeao-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 52px;
    padding: 0 48px 0 16px;
    border: 0;
    background: transparent;
    color: var(--cor-texto);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.modal .detalhes-produto-acordeao .acordeao-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 16px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal .detalhes-produto-acordeao .acordeao-item.ativo .acordeao-header::after {
    transform: translateY(-35%) rotate(225deg);
}

.modal .detalhes-produto-acordeao .acordeao-conteudo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.modal .detalhes-produto-acordeao .acordeao-conteudo p {
    padding: 0 16px 16px;
    color: #59616c;
    font-size: 0.93rem;
    line-height: 1.65;
}

.modal .produtos-relacionados-container {
    margin-top: 20px;
    padding-top: 18px;
    border-top-color: #e8edf3;
}

.modal .produtos-relacionados-container h4 {
    margin: 0 0 14px;
    color: #68707c;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modal .produtos-relacionados-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.modal .modal-related-footer {
    margin: clamp(20px, 3vw, 28px) 0 0;
    padding: clamp(16px, 2.5vw, 22px) clamp(2px, 1vw, 6px) 0;
    border-top: 1px solid #edf0f3;
}

.modal .modal-related-footer .relacionado-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 8px;
    border: 1px solid #eef1f4;
    border-radius: 14px;
    background: #fff;
    text-align: left;
    box-shadow: 0 8px 20px rgba(16, 24, 39, 0.04);
}

.modal .modal-related-footer .relacionado-item:hover {
    border-color: #d8dee6;
    box-shadow: 0 12px 28px rgba(16, 24, 39, 0.08);
    transform: translateY(-2px);
}

.modal .relacionado-item img {
    border-radius: 10px;
    border-color: #e5e9ef;
}

.modal .modal-related-footer .relacionado-item img {
    width: 58px;
    aspect-ratio: 1;
    margin: 0;
}

.modal .modal-related-footer .relacionado-item span {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.25;
}

.modal-loading-overlay {
    border-radius: 22px;
    background-color: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(4px);
}

@media (max-width: 820px) {
    .modal-conteudo {
        width: min(96vw, 620px);
        padding: 58px 18px 20px;
        border-radius: 18px;
    }

    .modal-grid-conteudo {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .modal .fechar {
        top: 5px;
        right: 18px;
        font-size: 2rem;
    }

    .modal .modal-info {
        padding-right: 0;
    }

    .modal #modalNome {
        padding-right: 0;
        font-size: clamp(1.45rem, 7vw, 2rem);
    }

    .modal .modal-acoes-principais.seletor-visivel .seletor-quantidade {
        max-height: none;
    }

    .modal .produtos-relacionados-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal .modal-related-footer .relacionado-item {
        grid-template-columns: 54px minmax(0, 1fr);
    }

    .modal .modal-related-footer .relacionado-item img {
        width: 54px;
    }
}

@media (max-width: 520px) {
    .modal-conteudo {
        width: 100%;
        max-height: 100vh;
        border-radius: 18px 18px 0 0;
    }

    .modal {
        align-items: flex-end;
    }

    .modal .zoom-container,
    .modal #modalImagemPrincipal {
        border-radius: 14px;
    }

    .modal .bloco-acoes-compra {
        padding: 14px;
        border-radius: 15px;
    }
}

/* === components/_popup.css === */
/* Estilos para o pop-up de notificação. */
.popup {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    background-color: var(--cor-fundo);
    border-radius: var(--border-radius-medio);
    box-shadow: var(--sombra-forte); /* MODIFICADO */
    display: flex;
    overflow: hidden;
    transform: translateX(calc(100% + 20px));
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 20001;
}
.popup.ativo {
    transform: translateX(0);
}
.popup-barra {
    width: 8px;
    background-color: var(--cor-cinza-medio);
}
.popup.sucesso .popup-barra {
    background-color: #28a745;
}
.popup.erro .popup-barra {
    background-color: #c0392b;
}
.popup-conteudo {
    padding: 15px;
    flex-grow: 1;
}
#popupTitulo {
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}
#popupTexto {
    font-size: 0.9rem;
    color: var(--cor-cinza-medio);
}
.popup-fechar {
    background: none;
    border: none;
    color: var(--cor-cinza-medio);
    font-size: 1.5rem;
    padding: 0 15px;
    cursor: pointer;
    transition: color 0.3s ease;
}
.popup-fechar:hover {
    background: none;
    color: var(--cor-texto);
}

@media (max-width: 480px) {
    .popup { width: calc(100% - 40px); }
}
/* === components/_admin-table.css === */
/* ===================================================
   CSS FINAL PARA TABELAS DE ADMIN - VERSÃO DEFINITIVA E RESPONSIVA
   =================================================== */

/* --- ESTILOS GERAIS PARA TODAS AS TABELAS --- */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin-bottom: 40px;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 10px;
    background-color: #fff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.admin-table th, .admin-table td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center; /* Centrar tudo por defeito */
}

.admin-table th {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: #64748b;
    background-color: #f8fafc;
    white-space: nowrap;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover {
    background-color: #f9fbff;
}

.acoes-tabela {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

/* Note: Badges and Action Buttons are now centralized in _admin-ui.css and _admin-buttons.css */


/* --- RESPONSIVIDADE --- */
@media (max-width: 1200px) {
    .tabela-produtos {
        width: 1200px;
    }
}
/* === components/_side-cart.css === */
/* public/css/components/_side-cart.css */
.side-cart-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.38);
    z-index: 10003;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(4px);
    transition: opacity 0.34s ease, visibility 0.34s ease;
}

.side-cart-overlay.ativo {
    opacity: 1;
    visibility: visible;
}

.side-cart {
    position: fixed;
    top: 0;
    right: 0;
    width: min(440px, 92vw);
    max-width: 92vw;
    height: 100%;
    background: #fff;
    box-shadow: -18px 0 45px rgba(15, 23, 42, 0.18);
    z-index: 10004;
    transform: translateX(100%);
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.side-cart.ativo {
    transform: translateX(0);
}

.side-cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
    flex-shrink: 0;
}

.side-cart-header h4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    font-weight: 760;
    line-height: 1.15;
    letter-spacing: 0;
    text-transform: none;
}

.side-cart-header h4 span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn-fechar-side-cart {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.btn-fechar-side-cart:hover,
.btn-fechar-side-cart:focus {
    background: transparent !important;
    color: #ef4444;
}

.side-cart-items {
    flex-grow: 1;
    overflow-y: auto;
    padding: 18px;
    background: #fff;
}


/* Os itens do side-cart agora são controlados pelo componente unificado _unified-cart-item.css */

.remover-item-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.remover-item-btn:hover,
.remover-item-btn:focus {
    background: transparent !important;
    color: var(--cor-erro);
}

.side-cart-vazio {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 38px 24px;
    text-align: center;
    color: #64748b;
}

.side-cart-vazio svg {
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    color: #cbd5e1;
}

.side-cart-vazio h5 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1rem;
    font-weight: 750;
}

.side-cart-vazio p {
    max-width: 260px;
    margin: 0 0 22px;
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.45;
}

.side-cart-vazio .button {
    min-width: 190px;
}

.side-cart-footer {
    padding: 18px 24px 22px;
    border-top: 1px solid #eef2f7;
    background: #fff;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.06);
    flex-shrink: 0;
}

.side-cart-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.side-cart-subtotal span:first-child {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.side-cart-subtotal span:last-child {
    min-width: 0;
    color: #020617;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: right;
}

.side-cart-subtotal small {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.side-cart-footer .button {
    display: flex !important;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 8px !important;
}

.side-cart-footer .add-btn {
    background: #111827 !important;
    border-color: #111827 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.18) !important;
}

.side-cart-footer .add-btn:hover {
    background: #020617 !important;
    border-color: #020617 !important;
    color: #fff !important;
}

.side-cart-footer .voltar-btn {
    background: #fff !important;
    border-color: #e2e8f0 !important;
    color: #334155 !important;
    box-shadow: none !important;
}

.side-cart-footer .voltar-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #111827 !important;
}

.side-cart-footer .button:last-child {
    margin-bottom: 0;
}

/* Mobile: same panel model as the main nav. */
@media (max-width: 768px) {
    .side-cart-overlay {
        top: var(--site-header-height, 101px);
        height: calc(100vh - var(--site-header-height, 101px));
        height: calc(100dvh - var(--site-header-height, 101px));
        background-color: rgba(0, 0, 0, 0.25);
        backdrop-filter: blur(4px);
        z-index: 98;
        transition: opacity 0.32s ease, visibility 0.32s ease;
    }

    .side-cart {
        top: var(--site-header-height, 101px);
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: calc(100vh - var(--site-header-height, 101px));
        height: calc(100dvh - var(--site-header-height, 101px));
        max-height: calc(100vh - var(--site-header-height, 101px));
        max-height: calc(100dvh - var(--site-header-height, 101px));
        background-color: #fff;
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
        z-index: 99;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-24px);
        transform-origin: top center;
        transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        overflow: hidden;
    }

    .side-cart.ativo {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .side-cart-header {
        min-height: 62px;
        padding: 0 25px;
        border-bottom: 1px solid #f1f5f9;
        background: #fff;
    }

    .side-cart-header h4 {
        color: #1a1a1a;
        font-size: 1.05rem;
        font-weight: 750;
    }

    .btn-fechar-side-cart {
        display: none !important;
    }

    .side-cart-items {
        padding: 0 18px;
        background: #fff;
    }

    /* Os itens agora usam as regras do componente unificado */

    .remover-item-btn {
        width: 32px;
        height: 32px;
    }

    .side-cart-footer {
        padding: 18px 25px calc(22px + env(safe-area-inset-bottom));
        border-top: 1px solid #f1f5f9;
        background: #fff;
        box-shadow: none;
    }

    .side-cart-subtotal {
        margin-bottom: 16px;
    }

    .side-cart-footer .button {
        min-height: 46px;
        margin-bottom: 10px;
    }
}


@media (max-width: 380px) {
    .side-cart-header h4 {
        font-size: 1.1rem;
    }
}
/* === components/_back-to-top.css === */
/* public/css/components/_back-to-top.css */
.voltar-ao-topo-btn {
    position: fixed;
    bottom: 32px;
    right: 32px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--cor-destaque, #1a1a1a) 0%, #333 100%);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background 0.25s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 1px 4px rgba(0, 0, 0, 0.15);
    /* Borda subtil com glass effect */
    outline: 1.5px solid rgba(255, 255, 255, 0.12);
    outline-offset: -1px;
}

.voltar-ao-topo-btn svg {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.voltar-ao-topo-btn.ativo {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

body.app-panel-open .voltar-ao-topo-btn,
body.app-panel-open .voltar-ao-topo-btn.ativo {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px) scale(0.8);
    animation: none;
}

.voltar-ao-topo-btn:hover {
    background: linear-gradient(135deg, #444 0%, #111 100%);
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.voltar-ao-topo-btn:hover svg {
    transform: translateY(-2px);
}

.voltar-ao-topo-btn:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition-duration: 0.1s;
}

/* Animação de pulso suave enquanto visível */
@keyframes pulse-ring {
    0% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(0, 0, 0, 0.12);
    }

    70% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.voltar-ao-topo-btn.ativo {
    animation: pulse-ring 2.5s ease-out 1s 1;
}

/* Responsivo: um pouco menor em mobile */
@media (max-width: 768px) {
    .voltar-ao-topo-btn {
        width: 46px;
        height: 46px;
        bottom: 20px;
        right: 20px;
    }
}

/* === components/_pagination.css === */
/* public/css/components/_pagination.css */
.pagination-container {
    margin: 80px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.pagination-list {
    list-style: none;
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0;
    align-items: center;
}

.pagination-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    color: #94a3b8; /* Soft slate */
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.pagination-item .page-link:hover {
    color: #1e293b;
    background-color: #f1f5f9;
}

.pagination-item.active .page-link {
    background-color: #111;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.pagination-item.active .page-link:hover {
    background-color: #000;
}

.pagination-item.prev .page-link,
.pagination-item.next .page-link {
    color: #334155;
}

.pagination-item.disabled {
    opacity: 0.2;
    pointer-events: none;
}

/* Setas SVG */
.pagination-item svg {
    width: 18px;
    height: 18px;
    display: block;
    transition: transform 0.2s ease;
}

.pagination-item.prev:hover svg {
    transform: translateX(-2px);
}

.pagination-item.next:hover svg {
    transform: translateX(2px);
}

/* Responsividade */
@media (max-width: 640px) {
    .pagination-container {
        margin: 50px auto;
    }
    .pagination-item .page-link {
        min-width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}
/* === components/_form-components.css === */
/* public/css/components/_form-components.css */

.select-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-right: 1.8px solid #111;
    border-bottom: 1.8px solid #111;
    transform: translateY(-60%) rotate(45deg);
    transform-origin: 60% 60%;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
    pointer-events: none;
}

.select-wrapper.is-open::after {
    transform: translateY(-35%) rotate(225deg);
}

.select-wrapper:focus-within::after {
    border-color: #000;
}

.select-estilizado,
.select-wrapper select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    min-height: 46px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background-color: #fff;
    background-image: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    color: #111;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.select-estilizado:hover,
.select-wrapper select:hover {
    border-color: #94a3b8;
    background-color: #fff;
}

.select-estilizado:focus,
.select-wrapper select:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}

.select-estilizado:disabled,
.select-wrapper select:disabled {
    cursor: not-allowed;
    color: #94a3b8;
    background-color: #f8fafc;
}

.select-wrapper.custom-select-wrapper {
    min-height: 46px;
}

.select-wrapper.custom-select-wrapper select {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.custom-select-trigger {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    color: #111;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.custom-select-trigger:hover {
    border-color: #94a3b8;
    background: #fff;
    color: #111;
    transform: none;
}

.custom-select-trigger:focus-visible {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}

.custom-select-trigger:disabled {
    cursor: not-allowed;
    color: #94a3b8;
    background-color: #f8fafc;
}

.custom-select-options {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: 10020;
    box-sizing: border-box;
    width: var(--custom-select-menu-width, 100%);
    min-width: 100%;
    max-width: calc(100vw - 32px);
    max-height: min(300px, 45vh);
    padding: 5px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #fbfcfd 100%);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-2px) scale(0.98);
    transform-origin: top center;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.custom-select-options.align-right {
    left: auto;
    right: 0;
}

.select-wrapper.is-open .custom-select-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.custom-select-options::-webkit-scrollbar {
    width: 8px;
}

.custom-select-options::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid transparent;
    background: #cfd6df;
    background-clip: padding-box;
}

.custom-select-options::-webkit-scrollbar-thumb:hover {
    background: #aeb8c5;
    background-clip: padding-box;
}

.custom-select-option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 32px;
    margin: 1px 0;
    padding: 6px 34px 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1f2937;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.custom-select-option:hover,
.custom-select-option.is-focused {
    background: #f4f6f8;
    color: #111;
    box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.6);
    transform: none;
}

.custom-select-option.is-selected {
    background: #111;
    color: #fff;
    box-shadow: none;
}

.custom-select-option.is-selected::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 7px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-62%) rotate(45deg);
}

.custom-select-option.is-disabled {
    cursor: not-allowed;
    color: #a4acb8;
    background: transparent;
    box-shadow: none;
}

.custom-select-option.is-disabled:hover {
    color: #a4acb8;
    background: transparent;
    box-shadow: none;
}

@media (max-width: 600px) {
    .custom-select-options {
        max-height: min(260px, 50vh);
        border-radius: 12px;
    }

    .custom-select-option {
        min-height: 36px;
        font-size: 0.9rem;
    }
}

/* 5. Toggle Switch Moderno (iOS Style) */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #cbd5e1;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input:checked+.slider {
    background-color: #000;
}

input:checked+.slider:before {
    transform: translateX(20px);
}

/* 6. Inputs Globais Refinados */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #000;
}

input:focus,
textarea:focus {
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
    outline: none;
}
/* === components/_admin-ui.css === */
/* ── ADMIN UI COMPONENTS (SHARED) ── */

/* ── Sistema unificado de badges / pills ── */
.badge,
.badge-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Variantes de cor genéricas */
.badge-verde    { background: #f0fdf4; color: #15803d; border-color: #dcfce7; }
.badge-vermelho { background: #fef2f2; color: #b91c1c; border-color: #fee2e2; }
.badge-azul     { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.badge-amarelo  { background: #fff7ed; color: #c2410c; border-color: #ffedd5; }
.badge-roxo     { background: #faf5ff; color: #7e22ce; border-color: #f3e8ff; }
.badge-teal     { background: #f0fdfa; color: #0f766e; border-color: #ccfbf1; }
.badge-cinzento { background: #f8fafc; color: #475569; border-color: #e2e8f0; }
.badge-dourado  { background: #fefce8; color: #a16207; border-color: #fef08a; }

/* Visibilidade (toggle em admin_produtos — classes mantidas para compat. JS) */
.badge.visivel, .badge-status.visivel { background: #f0fdf4; color: #15803d; border-color: #dcfce7; }
.badge.oculto,  .badge-status.oculto  { background: #f8fafc; color: #475569; border-color: #e2e8f0; }

/* Badge interativo (toggle de visibilidade) */
.badge.interativo, .badge-status.interativo {
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.badge.interativo:hover, .badge-status.interativo:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}
.badge.interativo.loading, .badge-status.interativo.loading {
    opacity: 0.5;
    pointer-events: none;
}


/* Barras de Seleção e Ações em Massa (Bulk) */
.sel-mode-bar {
    max-width: 1200px;
    margin: 0 auto 14px;
    display: none;
    align-items: center;
    gap: 12px;
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: .85rem;
    color: #1e40af;
    font-weight: 500;
}
.sel-mode-bar.visible { display: flex; }

.btn-sel-all {
    background: #fff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

.btn-sel-all:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    transform: translateY(-1px);
}

.btn-sel-all:active {
    transform: translateY(0);
}

.bulk-bar {
    position: fixed; bottom: -80px; left: 50%; transform: translateX(-50%);
    background: #000; color: #fff;
    border-radius: 18px;
    padding: 12px 24px;
    display: flex; align-items: center; gap: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    transition: bottom .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 500;
    white-space: nowrap;
    min-width: 320px;
    border: 1px solid rgba(255,255,255,0.1);
}
.bulk-bar.visible { bottom: 30px; }
.bulk-bar-spacer { flex: 1; }

/* ── Checkbox de seleção (partilhado) ── */
.log-check-circle {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #cbd5e1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s; vertical-align: middle;
}
.log-check-circle svg { width: 12px; height: 12px; color: #fff; opacity: 0; }

/* ── Sel-mode genérico para todas as tabelas com .table-wrapper ── */
.table-wrapper.sel-mode .col-sel         { display: table-cell !important; }
.table-wrapper.sel-mode tbody tr[data-id]{ cursor: pointer; }
.table-wrapper.sel-mode tbody tr[data-id]:hover td { background: #f0f7ff; }
.table-wrapper.sel-mode tbody tr.selecionado td    { background: #dbeafe; }
.table-wrapper.sel-mode .acoes-tabela    { pointer-events: none; opacity: .25; }
.table-wrapper.sel-mode tr.selecionado .log-check-circle     { background: #3b82f6; border-color: #3b82f6; }
.table-wrapper.sel-mode tr.selecionado .log-check-circle svg { opacity: 1; }

/* ── Input de pesquisa partilhado (toolbar de todas as páginas admin) ── */
.search-input-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.search-input-wrap .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
}
.search-input-toolbar {
    height: 44px;
    padding: 0 18px 0 40px;
    border-radius: 99px;
    border: 1px solid var(--cor-borda-subtil);
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--cor-texto);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 240px;
}
.search-input-toolbar:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}
.search-input-toolbar::placeholder { color: #94a3b8; }
/* remove o X nativo do type=search em webkit */
.search-input-toolbar::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Checkboxes Customizados em Tabelas */
.prod-foto-wrap { position: relative; display: inline-block; }
.prod-check-badge {
    display: none;
    position: absolute; top: -5px; left: -5px;
    width: 20px; height: 20px;
    background: #e2e8f0; border-radius: 50%;
    border: 2px solid #fff;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.prod-check-badge svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.sel-mode .prod-check-badge { display: flex; }
.sel-mode tr.selecionado .prod-check-badge { background: #3b82f6; }
.sel-mode tr.selecionado .prod-check-badge svg { opacity: 1; }

/* Bloqueio de scroll ao abrir modal */
.scroll-lock { overflow: hidden !important; }

/* === components/_admin-buttons.css === */
/* public/css/components/_admin-buttons.css */

/* ── Botões Globais de Administração ── */

/* Base para botões de ação única (Pílulas com Ícone) */
.btn-view-single,
.btn-edit-single,
.btn-del-single,
.btn-cancel-single,
.btn-duplicate-single,
.btn-archive-single,
.btn-reply-single,
.btn-check-single {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    padding: 0 !important;
    background-color: #f1f5f9 !important; /* Fundo suave padrão */
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
}

/* Ícone Base usando Mask (Super robusto para cores e SVG) */
.btn-view-single::after,
.btn-edit-single::after,
.btn-del-single::after,
.btn-cancel-single::after,
.btn-duplicate-single::after,
.btn-archive-single::after,
.btn-reply-single::after,
.btn-check-single::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: currentColor !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    transition: transform 0.2s ease !important;
}

/* Ícones Específicos */
.btn-view-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'%3E%3C/path%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3C/svg%3E");
}

.btn-edit-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}

.btn-del-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
}

.btn-duplicate-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
}

.btn-check-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

.btn-archive-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'%3E%3C/polyline%3E%3Crect x='1' y='3' width='22' height='5'%3E%3C/rect%3E%3Cline x1='10' y1='12' x2='14' y2='12'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'%3E%3C/polyline%3E%3Crect x='1' y='3' width='22' height='5'%3E%3C/rect%3E%3Cline x1='10' y1='12' x2='14' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.btn-reply-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'%3E%3C/polyline%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'%3E%3C/polyline%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'%3E%3C/path%3E%3C/svg%3E");
}

/* ── Estados e Cores ── */

/* Visualização (Azul) */
.btn-view-single { color: #3b82f6 !important; }
.btn-view-single:hover { background-color: #eff6ff !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2) !important; }

/* Edição (Preto) */
.btn-edit-single { color: #000 !important; }
.btn-edit-single:hover { background-color: #f1f1f1 !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; }

/* Duplicação / Resposta / Arquivo (Cinza/Azul) */
.btn-duplicate-single, .btn-reply-single, .btn-archive-single { color: #64748b !important; }
.btn-duplicate-single:hover, .btn-reply-single:hover, .btn-archive-single:hover { color: #1e293b !important; background-color: #f1f5f9 !important; transform: translateY(-2px) scale(1.05) !important; }

/* Cancelar / Repor (Laranja) */
.btn-cancel-single { color: #f97316 !important; }
.btn-cancel-single:hover { background-color: #fff7ed !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.2) !important; }
.btn-cancel-single::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'%3E%3C/polyline%3E%3Cpath d='M3.51 15a9 9 0 1 0 .49-6.14'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 4 1 10 7 10'%3E%3C/polyline%3E%3Cpath d='M3.51 15a9 9 0 1 0 .49-6.14'%3E%3C/path%3E%3C/svg%3E");
}

/* Eliminação (Vermelho) */
.btn-del-single { color: #ef4444 !important; }
.btn-del-single:hover { background-color: #fef2f2 !important; transform: translateY(-2px) scale(1.05) !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important; }

/* ── Botões de Admin (Padrão Retangular) ── */
.btn-admin-primary,
.btn-admin-secondary,
.btn-admin-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    gap: 8px;
    text-decoration: none;
}

.btn-admin-primary { background: #000; color: #fff; }
.btn-admin-primary:hover { background: #333; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.btn-admin-secondary { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.btn-admin-secondary:hover { background: #e2e8f0; color: #1e293b; }

.btn-admin-danger { background: #fee2e2; color: #ef4444; }
.btn-admin-danger:hover { background: #ef4444; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2); }

/* Ajustes para Botão Voltar (Global) */
.btn-back-admin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.btn-back-admin:hover {
    border-color: #cbd5e1;
    color: #1e293b;
    background: #f8fafc;
    transform: translateX(-3px);
}

/* O estilo .action-btn-pill foi centralizado em components/_button-system.css. */

/* === components/_quick-edit.css === */
/* public/css/components/_quick-edit.css */

.qe-modal {
    position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.5);
    backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center;
    padding: 20px; transition: opacity .3s ease;
}

/* Guia de tamanhos abre por cima do modal do produto (z-index 10000) */
#modalGuiaTamanhos { z-index: 10005; }

#modalGuiaTamanhos .qe-card {
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}

#modalGuiaTamanhos .qe-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: 300;
    color: #111;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s ease;
    background: none;
}
#modalGuiaTamanhos .qe-close:hover { color: #555; background: none; }

#guia-conteudo {
    overflow-x: auto;
}

#guia-conteudo table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#guia-conteudo th {
    padding: 12px 16px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    border-bottom: 2px solid #e5e7eb;
    text-align: center;
    background: #fff;
    white-space: nowrap;
}

#guia-conteudo td {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    text-align: center;
}

#guia-conteudo tr:last-child td { border-bottom: none; }
#guia-conteudo tbody tr:hover td { background: #f9fafb; }
.qe-modal.ativo { display: flex !important; }

@keyframes qe-fade { from { opacity: 0; } to { opacity: 1; } }

.qe-card {
    position: relative;
    background: #fff; border-radius: 20px; width: 100%; max-width: 500px;
    padding: 32px; box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    animation: qe-slide .3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-sizing: border-box !important;
}

@keyframes qe-slide { from { transform: translateY(20px); } to { transform: translateY(0); } }

.qe-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.qe-hd h3 { font-size: 1.25rem; font-weight: 800; color: #111; margin: 0; }

.qe-close { background: none; border: none; cursor: pointer; color: #a0aec0; transition: color 0.2s; }
.qe-close:hover { color: #111; }

.qe-body { display: grid; gap: 16px; }

.qe-f { display: flex; flex-direction: column; gap: 6px; }
.qe-f label { font-size: 0.75rem; font-weight: 700; color: #718096; text-transform: uppercase; letter-spacing: 0.05em; }

.qe-in { 
    padding: 12px 14px; border: 2px solid #edf2f7; border-radius: 10px;
    font-size: 0.95rem; transition: all 0.2s; background: #f8fafc; 
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}
.qe-in:focus { outline: none; border-color: #000; background: #fff; }

.qe-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.qe-footer { display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end; }
.qe-btns { display: flex; gap: 12px; margin-top: 24px; }

.qe-btn { 
    flex: 1; padding: 14px; border-radius: 12px; font-size: 0.95rem;
    font-weight: 700; cursor: pointer; transition: all 0.2s; border: none;
}

.qe-btn-save { background: #111; color: #fff; }
.qe-btn-save:hover { background: #333; transform: translateY(-2px); }
.qe-btn-save:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.qe-btn-cancel { background: #f1f5f9; color: #475569; }
.qe-btn-cancel:hover { background: #e2e8f0; }

/* === components/_context-menu.css === */
/* public/css/components/_context-menu.css */

.ctx-menu {
    position: fixed;
    display: none;
    z-index: 3000;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid #edf2f7;
    min-width: 180px;
    padding: 6px;
    animation: ctx-pop .15s ease-out;
}

@keyframes ctx-pop {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.ctx-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    color: #4a5568;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
}

.ctx-item:hover {
    background: #f7fafc;
    color: #111;
}

.ctx-item.danger, .ctx-item-danger {
    color: #ef4444;
}

.ctx-item.danger:hover, .ctx-item-danger:hover {
    background: #fff5f5;
    color: #dc2626;
}

.ctx-sep {
    height: 1px;
    background: #edf2f7;
    margin: 6px 0;
}

.ctx-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* === components/_editable-content.css === */
/* Inline editors for header/footer content */

.site-footer h4.footer-editable {
    display: inline-block;
    margin-bottom: 15px;
}

.footer-editable,
.header-editable,
.home-editable {
    position: relative;
    border-radius: 4px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Suggestive element: a small floating edit icon */
.global-edit-mode-active .footer-editable::after,
.global-edit-mode-active .header-editable::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    top: -10px;
    right: -10px;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5) translateY(5px);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    z-index: 10;
}

.global-edit-mode-active .footer-editable:hover,
.global-edit-mode-active .header-editable:hover {
    outline: 1.5px dashed rgba(37, 99, 235, 0.4);
    outline-offset: 6px;
    background-color: rgba(37, 99, 235, 0.04);
}

.global-edit-mode-active .footer-editable:hover::after,
.global-edit-mode-active .header-editable:hover::after {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.global-edit-mode-active .footer-editable.editing-current,
.global-edit-mode-active .header-editable.editing-current,
.global-edit-mode-active .home-editable.editing-current {
    outline: 2px solid #2563eb;
    outline-offset: 6px;
    background-color: rgba(37, 99, 235, 0.08);
    animation: pulseActive 2s infinite ease-in-out;
}

.global-edit-mode-active .footer-editable.editing-current::after,
.global-edit-mode-active .header-editable.editing-current::after,
.global-edit-mode-active .home-editable.editing-current::after {
    opacity: 1;
    transform: scale(1) translateY(0);
    background: #2563eb;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
    border-color: #2563eb;
}

/* Ajustes específicos para o Logo (evita transbordar o cabeçalho) */
.logo.header-editable:hover {
    outline-offset: -3px;
    background-color: rgba(37, 99, 235, 0.04);
}
.logo.header-editable.editing-current {
    outline-offset: -3px;
    background-color: rgba(37, 99, 235, 0.08);
    animation: pulseActiveLogo 2s infinite ease-in-out;
}
.logo.header-editable::after {
    top: 5px;
    right: 5px;
}

@keyframes pulseActiveLogo {
    0% { box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { box-shadow: inset 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: inset 0 0 0 0 rgba(37, 99, 235, 0); }
}

@keyframes pulseActive {
    0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.footer-editor-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10001 !important;
}

.footer-editor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.54);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 10000;
    padding: 20px;
}

.footer-editor-modal .qe-card {
    width: min(520px, 100%);
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow: auto;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    animation: editorCardIn 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes editorCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.footer-editor-modal .form-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}

.footer-editor-modal .form-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.25;
    color: #0f172a;
}

.footer-editor-modal .card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
}

.footer-editor-modal .form-card-body {
    padding: 22px;
}

.footer-editor-modal .form-group label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 0.86rem;
    font-weight: 700;
}

.footer-editor-modal .form-footer-actions {
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}

.admin-warning-box {
    margin-bottom: 15px;
    padding: 10px;
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
    font-size: 0.85rem;
    color: #92400e;
}

.admin-warning-icon {
    vertical-align: middle;
    margin-right: 5px;
}

#footer-sync-warning,
#footer-edit-address-fields,
#footer-edit-social-fields,
#header-edit-logo-fields {
    display: none;
}

.admin-textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 12px 13px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-textarea:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.admin-input-style {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    padding: 11px 12px;
    font-size: 0.95rem;
    outline: none;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-input-style:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.header-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
}

.header-logo-preview img {
    display: block;
    max-width: 180px;
    max-height: 86px;
    object-fit: contain;
}

.header-logo-hint {
    margin-top: 8px;
    font-size: 0.85rem;
    color: #64748b;
}

@media (max-width: 640px) {
    .footer-editor-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .footer-editor-modal .qe-card {
        max-height: calc(100vh - 20px);
        border-radius: 12px;
    }

    .footer-editor-modal .form-card-header,
    .footer-editor-modal .form-card-body {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 992px) {
    .footer-editable,
    .header-editable,
    .footer-editable:hover,
    .header-editable:hover,
    .footer-editable:active,
    .header-editable:active {
        pointer-events: none !important;
        outline: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .footer-editable > *,
    .header-editable > * {
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }
    .footer-editable::after,
    .header-editable::after {
        display: none !important;
    }
}

/* Home Edit Mode */
.global-edit-mode-active .home-editable {
    position: relative !important;
}

.global-edit-mode-active .home-editable:hover {
    outline: 1.5px dashed rgba(37, 99, 235, 0.4) !important;
    outline-offset: 6px !important;
    cursor: pointer !important;
    background-color: rgba(37, 99, 235, 0.04) !important;
}

.global-edit-mode-active .home-editable::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    left: auto !important;
    background: #fff;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    z-index: 10;
    opacity: 0;
    transform: scale(0.5) translateY(5px);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

.global-edit-mode-active .home-editable:hover::after {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Ajustes para Hero Section */
.global-edit-mode-active section.home-editable::after {
    top: 30px !important;
    right: 30px !important;
}

.global-edit-mode-active .hero-section.home-editable:hover {
    background-color: transparent !important;
}

.global-edit-mode-active .hero-section.home-editable:hover::before {
    background:
        linear-gradient(rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.22)),
        linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    box-shadow: none;
}

.global-edit-mode-active .hero-section.home-editable.editing-current::before {
    background:
        linear-gradient(rgba(37, 99, 235, 0.28), rgba(37, 99, 235, 0.28)),
        linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    box-shadow: none;
}

.global-edit-mode-active .hero-section.home-editable:hover .hero-content,
.global-edit-mode-active .hero-section.home-editable.editing-current .hero-content {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px) saturate(0.75);
    -webkit-backdrop-filter: blur(5px) saturate(0.75);
}

.global-edit-mode-active .hero-section.home-editable:has(.hero-content:hover)::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    box-shadow: none;
}

.global-edit-mode-active .hero-section.home-editable:has(.hero-content:hover) .hero-content {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* === components/_switch.css === */
/* ── COMPONENTE: SWITCH (TOGGLE) ── */
/* Estilo unificado "Premium Black" para todos os interruptores do site */

.switch-premium, 
.toggle-visiveis, 
.cfg-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap; /* Garante que o texto fique numa linha só */
}

/* Esconder checkbox original */
.switch-premium input, 
.toggle-visiveis input, 
.cfg-switch input {
    display: none;
    width: 0;
    height: 0;
    opacity: 0;
}

/* ── TRACK (O fundo do interruptor) ── */
.switch-premium .slider, 
.toggle-visiveis .toggle-track, 
.cfg-switch .cfg-switch-slider {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    background-color: #e2e8f0;
    border-radius: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

/* ── THUMB (A bolinha branca) ── */
.switch-premium .slider::before, 
.toggle-visiveis .toggle-thumb, 
.cfg-switch .cfg-switch-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ── ESTADO: CHECKED (PRETO) ── */
.switch-premium input:checked + .slider,
.toggle-visiveis input:checked ~ .toggle-track,
.cfg-switch input:checked + .cfg-switch-slider {
    background-color: #000;
}

/* ── MOVIMENTO DO THUMB ── */
.switch-premium input:checked + .slider::before,
.toggle-visiveis input:checked ~ .toggle-track .toggle-thumb,
.cfg-switch input:checked + .cfg-switch-slider::before {
    transform: translateX(18px);
}

/* Ajuste específico para o cfg-switch (que era ligeiramente maior) */
.cfg-switch .cfg-switch-slider {
    width: 42px; /* Uniformizado */
    height: 24px;
}

/* Hover effect */
.switch-premium:hover .slider,
.toggle-visiveis:hover .toggle-track,
.cfg-switch:hover .cfg-switch-slider {
    filter: brightness(0.95);
}

/* === components/_cart-ui.css === */
/* ── COMPONENTE: CART UI (UNIFICADO) ── */
/* Estilos para controlo de quantidade em todo o site (Side-Cart, Carrinho, Checkout) */

/* 1. Contentor do Editor de Quantidade */
.cart-qty-editor {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    padding: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    user-select: none;
}

/* 2. Botões (+ / -) */
.qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #000;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    line-height: 1;
}

.qty-btn:hover:not(:disabled) {
    background: #f1f5f9;
    color: #000;
}

.qty-btn:disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    background: none;
}

/* 3. Valor da Quantidade */
.cart-qty-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: #111;
    min-width: 28px;
    text-align: center;
}

/* 4. Wrapper Flexível (Para alinhar editor + botão de remover quando necessário) */
.cart-qty-stack {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

/* === components/_unified-cart-item.css === */
/* public/css/components/_unified-cart-item.css */

/* 
   UNIFIED CART ITEM
   Shared by: Side Cart (.side-cart-item) and Checkout Summary (.ck-prod-item)
*/

.ck-prod-item, 
.side-cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.ck-prod-item:last-child, 
.side-cart-item:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}

.ck-prod-item > img, 
.side-cart-item img {
    width: 76px;
    height: 96px;
    object-fit: cover;
    border-radius: 7px;
    border: 1px solid #e8edf3;
    background: #f8fafc;
    flex-shrink: 0;
}

.ck-prod-info, 
.side-cart-item-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.ck-prod-title, 
.side-cart-item-info h5 {
    display: block;
    color: #111827;
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 6px;
    margin-top: -1px;
    max-width: 100%;
}

/* Compatibilidade para side cart h5 original */
.side-cart-item-info h5 {
    margin-top: -1px;
}

.ck-prod-info .side-cart-item-atributo, 
.side-cart-item-info .side-cart-item-atributo {
    width: 100%;
    margin: 1px 0;
    color: #64748b;
    font-size: .82rem;
    line-height: 1.3;
    text-align: left;
}

.ck-prod-info .side-cart-item-atributo strong, 
.side-cart-item-info .side-cart-item-atributo strong {
    color: #334155;
    font-weight: 700;
}

.ck-prod-price, 
.side-cart-item-preco {
    font-size: .92rem;
    font-weight: 700;
    color: #020617;
    margin: 35px 0 0;
    text-align: left;
}

.ck-prod-acoes, 
.side-cart-item-acoes {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    height: 100%;
    flex-shrink: 0;
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
    .ck-prod-item, 
    .side-cart-item {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 520px) {
    .ck-prod-item, 
    .side-cart-item {
        grid-template-columns: 64px minmax(0, 1fr) auto;
    }

    .ck-prod-item > img, 
    .side-cart-item img {
        width: 64px;
        height: 86px;
    }

    .ck-prod-title, 
    .side-cart-item-info h5 {
        font-size: .9rem;
    }

    .ck-prod-acoes, 
    .side-cart-item-acoes {
        justify-content: center;
        gap: 14px;
    }
}

/* === pages/_home.css === */

/* Estilos exclusivos da página inicial. */
.main-home {
    padding: 0;
    max-width: none;
    background: var(--cor-fundo-pagina, #FAF8F4);
    /* Tokens de design da homepage (editorial premium, inspirado nas referências) */
    --home-bg: var(--cor-fundo-pagina, #FAF8F4);
    --home-surface: var(--tema-superficie);
    --home-ink: var(--tema-ink);
    --home-ink-soft: var(--tema-ink-suave);
    --home-muted: var(--tema-muted);
    --home-line: var(--tema-linha);
    --home-accent: var(--cor-accent);
    --home-accent-soft: var(--cor-accent-soft);
    --home-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --home-ease: cubic-bezier(.22, .61, .25, 1);
    --home-radius: 18px;
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: zoomBg 20s ease-in-out infinite alternate;
}
@keyframes zoomBg {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 800px;
    width: 90%;
}
.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 35px;
    color: #f8f8f8;
    text-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.button-hero {
    display: inline-block;
    padding: 16px 40px;
    background-color: #fff;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #fff;
}
.button-hero:hover {
    background-color: transparent;
    color: #fff;
}

/* --- TRUST BADGES --- */
.trust-badges {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 40px 20px;
    background-color: #fafafa;
    border-bottom: 1px solid #eee;
    flex-wrap: wrap;
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #333;
}
.trust-badge svg {
    color: #111;
}
.trust-badge-info h4 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}
.trust-badge-info p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    text-align: left;
}

/* --- BENTO GRID CATEGORIAS --- */
.featured-categories {
    padding: 80px 20px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
.section-title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: #111;
}
.category-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 20px;
    width: 100%;
}
.category-card {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    background-color: #f5f5f5;
    border-radius: 12px;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.category-card.large {
    grid-column: span 2;
    grid-row: span 2;
}
.category-card.wide {
    grid-column: span 2;
    grid-row: span 1;
}
.category-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.category-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}
.category-card:hover img {
    transform: scale(1.1);
}
.category-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
    pointer-events: none;
    transition: background 0.4s ease;
}
.category-card:hover::after {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
}
.category-title {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
}
.category-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
    text-align: left;
    display: block;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.category-card:hover h3 {
    transform: translateY(-8px);
}
.category-card.large h3 {
    font-size: 2.2rem;
}

.category-card.large {
    grid-column: span 2;
    grid-row: span 2;
}

.category-card.wide {
    grid-column: span 2;
    grid-row: span 1;
}

.global-edit-mode-active .home-category-editor .category-card {
    cursor: grab;
}

.global-edit-mode-active .home-category-editor .category-card:active {
    cursor: grabbing;
}

.global-edit-mode-active .home-category-editor .category-card.focal-adjusting {
    z-index: 20;
}

.global-edit-mode-active .home-category-editor {
    position: relative;
}

.home-bento-editbar {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 156px;
    right: -112px;
    z-index: 15;
}

.home-layout-selector {
    align-items: center;
    flex-direction: column;
    gap: 10px;
    width: 88px;
    padding: 14px 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
}

.home-layout-selector .layout-label {
    padding: 0;
    font-size: 0.62rem;
    line-height: 1;
    font-weight: 900;
    color: #475569;
    letter-spacing: 0.12em;
}

.home-layout-selector .layout-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-layout-selector .layout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    min-width: 54px;
    height: 38px;
    padding: 0;
    border-radius: 7px;
    color: #334155;
    background: #f8fafc;
    border: 1px solid transparent;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12);
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-layout-selector .layout-btn:hover {
    color: #111;
    background: #fff;
    border-color: rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.home-layout-selector .layout-btn.active {
    color: #fff;
    background: #111;
    border-color: #111;
    box-shadow: 0 10px 22px rgba(17, 17, 17, 0.22);
}

.preview-sortable-ghost {
    opacity: 0.25;
}

.global-edit-mode-active .home-category-editor .category-card.focal-adjusting img {
    transition: none !important;
}

.global-edit-mode-active .home-category-editor .category-card.focal-adjusting {
    cursor: default;
    transform: none !important;
    box-shadow: none !important;
}

.focal-picker-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 30;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

.focal-label {
    padding: 15px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.focal-crosshair {
    position: absolute;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.focal-crosshair::before,
.focal-crosshair::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.focal-crosshair::before {
    width: 2px;
    height: 60px;
    left: -1px;
    top: -30px;
}

.focal-crosshair::after {
    height: 2px;
    width: 60px;
    top: -1px;
    left: -30px;
}

.focal-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    top: -6px;
    left: -6px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.focal-controls-global {
    position: fixed;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(12px);
    padding: 14px 24px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 25px;
    z-index: 10000;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    opacity: 0;
    animation: focal-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    min-width: 400px;
}

@keyframes focal-slide-up {
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.zoom-control {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    flex: 1;
}

.zoom-slider {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.zoom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s;
}

.zoom-slider:active::-webkit-slider-thumb {
    transform: scale(1.3);
}

.zoom-val {
    font-size: 0.75rem;
    font-weight: 700;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.focal-btns {
    display: flex;
    gap: 8px;
    padding-left: 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.focal-btns button {
    border: none;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.focal-btn-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

.focal-btn-cancel:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.focal-btn-save {
    background: #fff;
    color: #000;
}

.focal-btn-save:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.btn-edit-framing {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
}

.btn-edit-framing:hover {
    background: #000;
}

.global-edit-mode-active .home-category-editor .category-name-editable {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 2;
    max-width: calc(100% - 60px);
    border-radius: 4px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.global-edit-mode-active .home-category-editor .category-name-editable h3 {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.global-edit-mode-active .home-category-editor .category-name-editable::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    cursor: pointer;
    opacity: 0;
    pointer-events: auto;
    transform: translate(50%, -50%) scale(0.5);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.global-edit-mode-active .home-category-editor .category-name-editable:hover {
    outline: 1.5px dashed rgba(37, 99, 235, 0.4);
    outline-offset: 6px;
    background-color: rgba(37, 99, 235, 0.04);
}

.global-edit-mode-active .home-category-editor .category-name-editable:hover::after {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
}

.global-edit-mode-active .home-category-editor .category-name-editable.editing-current {
    outline: 2px solid #2563eb;
    outline-offset: 6px;
    background-color: rgba(37, 99, 235, 0.08);
    animation: pulseActive 2s infinite ease-in-out;
}

.global-edit-mode-active .home-category-editor .category-name-editable.editing-current::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4L18.5 2.5z'%3E%3C/path%3E%3C/svg%3E");
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
    background: #2563eb;
    border-color: #2563eb;
}

.global-edit-mode-active .home-category-editor .category-card.focal-adjusting .category-name-editable::after {
    display: none;
}
.global-edit-mode-active .home-category-editor .btn-edit-framing {
    opacity: 0;
}

.global-edit-mode-active .home-category-editor .category-card:hover .btn-edit-framing,
.global-edit-mode-active .home-category-editor .category-card.focal-adjusting .btn-edit-framing {
    opacity: 1;
}

.global-edit-mode-active .home-category-editor .category-card.focal-adjusting .btn-edit-framing {
    display: none;
}

/* --- NOVIDADES --- */
.new-arrivals {
    padding: 20px 20px 80px 20px;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
}
.btn-ver-mais-container {
    text-align: center;
    margin-top: 40px;
}
.btn-ver-mais {
    display: inline-block;
    padding: 12px 30px;
    background-color: #111;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.3s ease;
}
.btn-ver-mais:hover {
    background-color: #333;
}

/* Bento adaptativo por número de categorias (1-8) */
.category-bento.count-1 {
    grid-template-columns: 1fr;
    grid-auto-rows: 450px;
}

.category-bento.count-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 350px;
}

.category-bento.count-3 {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
}

.category-bento.count-4,
.category-bento.count-5,
.category-bento.count-6,
.category-bento.count-7,
.category-bento.count-8 {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
}

/* Reset de spans para layouts simples */
.category-bento.count-1 .category-card,
.category-bento.count-2 .category-card,
.category-bento.count-3 .category-card {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
}

/* Responsividade */
@media (max-width: 992px) {
    .category-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .category-card.large {
        grid-row: span 1;
    }
    .category-bento.count-3,
    .category-bento.count-4,
    .category-bento.count-5,
    .category-bento.count-6,
    .category-bento.count-7,
    .category-bento.count-8 {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-badges {
        gap: 30px;
    }
}
@media (max-width: 768px) {
    .hero-section {
        height: 70vh;
    }
    .hero-content {
        padding: 30px 20px;
        width: 95%;
    }
    .hero-content h1 {
        font-size: 2.2rem;
    }
    .hero-content p {
        font-size: 1rem;
    }
    .trust-badges {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 15%;
    }
    .category-bento,
    .category-bento.count-1,
    .category-bento.count-2,
    .category-bento.count-3,
    .category-bento.count-4,
    .category-bento.count-5,
    .category-bento.count-6,
    .category-bento.count-7,
    .category-bento.count-8 {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }
    .category-card,
    .category-card.large,
    .category-card.wide {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
    .featured-categories {
        padding: 50px 20px;
    }
    .category-title {
        left: 20px;
        bottom: 20px;
    }
}

@media (max-width: 992px) {
    .global-edit-mode-active .home-bento-editbar,
    .global-edit-mode-active .home-category-editor .btn-edit-framing {
        display: none !important;
    }

    .global-edit-mode-active .home-category-editor .category-card {
        cursor: pointer;
    }
}

/* ==========================================================================
   ANIMAÇÃO DE CORTINAS PREMIUM (HOME PRELOADER)
   ========================================================================== */
.premium-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Painéis das cortinas */
.curtain-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    will-change: transform;
}

/* Camada de vidro (Glassmorphism Light) */
.curtain-panel.main-layer {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 2;
    box-shadow: 0 0 50px rgba(0,0,0,0.05); 
}

/* Camada de atraso (Parallax suave escuro) */
.curtain-panel.bg-layer {
    background-color: #f8fafc;
    transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
    transition-delay: 0.1s;
    z-index: 1;
}

/* Posições */
.curtain-panel.left {
    left: 0;
    transform-origin: left;
}

.curtain-panel.right {
    right: 0;
    transform-origin: right;
}

/* Linha central suave */
.curtain-glow-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);
    z-index: 3;
    transform: translateX(-50%);
    transition: opacity 0.4s ease;
}

/* Conteúdo central (Logo) */
.preloader-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    animation: preloader-float 3s infinite ease-in-out;
}

/* Imagem do logo no preloader */
.preloader-logo-img {
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08));
    transition: all 0.5s ease;
}

@keyframes preloader-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.02); }
}

/* --- Estados de Abertura --- */
.premium-preloader.open .curtain-panel.main-layer.left {
    transform: translateX(-100%);
}
.premium-preloader.open .curtain-panel.main-layer.right {
    transform: translateX(100%);
}

.premium-preloader.open .curtain-panel.bg-layer.left {
    transform: translateX(-100%);
}
.premium-preloader.open .curtain-panel.bg-layer.right {
    transform: translateX(100%);
}

.premium-preloader.open .curtain-glow-line {
    opacity: 0;
}

.premium-preloader.open .preloader-content {
    opacity: 0;
    transform: scale(1.2); /* Efeito cinemático: zoom ao desaparecer */
}

/* ==========================================================================
   REDESIGN PREMIUM DA HOMEPAGE
   Inspirado nos projectos de referência (casa_em_ordem + brasporto):
   tipografia serif editorial, kickers, marquee, cards refinados, reveal.
   Tudo scoped a .main-home para não afectar outras páginas.
   ========================================================================== */

/* --- HERO --- */
.main-home .hero-section {
    min-height: 88vh;
}
.main-home .hero-section::before {
    background: linear-gradient(to bottom, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .12) 38%, rgba(0, 0, 0, .58) 100%);
}
.main-home .hero-content {
    padding: 0 24px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    max-width: 840px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-home .hero-content > * {
    animation: heroRise .9s var(--home-ease) both;
}
.main-home .hero-content h1 { animation-delay: .12s; }
.main-home .hero-content p { animation-delay: .24s; }
.main-home .hero-content .button-hero {
    /* fade sem transform, para o hover (translateY) continuar a funcionar */
    animation: heroFade .9s var(--home-ease) both .36s;
}
@keyframes heroFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.main-home .hero-content h1 {
    font-family: var(--home-display);
    font-size: clamp(2.6rem, 6vw, 4.9rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.015em;
    text-transform: none;
    margin-bottom: 1.1rem;
    text-shadow: 0 2px 34px rgba(0, 0, 0, .4);
}
.main-home .hero-content p {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    font-weight: 300;
    line-height: 1.65;
    max-width: 34rem;
    margin: 0 auto 2.3rem;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 16px rgba(0, 0, 0, .4);
}
.main-home .button-hero {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 1.05rem 2.5rem;
    background: #fff;
    color: #1C1C1C;
    border: 1px solid #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .55);
    transition: transform .45s var(--home-ease), background .35s ease, color .35s ease, border-color .35s ease;
}
.main-home .button-hero:hover {
    background: var(--home-accent);
    border-color: var(--home-accent);
    color: #fff;
    transform: translateY(-3px);
}
.main-home .hero-scroll {
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    color: rgba(255, 255, 255, .85);
    pointer-events: none;
}
.main-home .hero-scroll-line {
    width: 1.5px;
    height: 42px;
    background: linear-gradient(rgba(255, 255, 255, .95), transparent);
    transform-origin: top;
    animation: heroScroll 2.2s var(--home-ease) infinite;
}
.main-home .hero-scroll span {
    font-size: .6rem;
    letter-spacing: .26em;
    text-transform: uppercase;
}
@keyframes heroScroll {
    0% { transform: scaleY(0); opacity: 0; }
    35% { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
}

/* --- TRUST BADGES (cards elegantes) --- */
.main-home .trust-badges {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) 24px;
    background: transparent;
    border-bottom: none;
}
.main-home .trust-badge {
    gap: 1.1rem;
    padding: 1.5rem 1.7rem;
    background: var(--home-surface);
    border: 1px solid var(--home-line);
    border-radius: var(--home-radius);
    transition: transform .4s var(--home-ease), box-shadow .4s var(--home-ease), border-color .4s ease;
}
.main-home .trust-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -26px rgba(28, 28, 28, .35);
    border-color: var(--home-accent-soft);
}
.main-home .trust-badge svg {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--home-accent);
    padding: 12px;
    box-sizing: content-box;
    background: color-mix(in srgb, var(--cor-accent) 12%, transparent);
    border-radius: 14px;
}
.main-home .trust-badge-info h4 {
    font-size: .85rem;
    color: var(--home-ink);
}
.main-home .trust-badge-info p {
    font-size: .8rem;
    color: var(--home-muted);
}

/* --- MARQUEE / FAIXA --- */
.main-home .home-marquee {
    overflow: hidden;
    background: var(--home-ink);
    padding: 1.1rem 0;
}
.main-home .home-marquee__track {
    display: flex;
    width: max-content;
    animation: homeMarquee 34s linear infinite;
    will-change: transform;
}
.main-home .home-marquee__track span {
    white-space: nowrap;
    margin-right: 3.4rem;
    font-family: var(--home-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.15rem, 2.2vw, 1.7rem);
    color: #FAF8F4;
    position: relative;
}
.main-home .home-marquee__track span::after {
    content: "\2726";
    position: absolute;
    right: -2.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .55em;
    font-style: normal;
    color: var(--home-accent-soft);
}
.main-home .home-marquee:hover .home-marquee__track {
    animation-play-state: paused;
}
@keyframes homeMarquee {
    to { transform: translateX(-50%); }
}

/* --- SECTION HEAD + KICKER --- */
.main-home .featured-categories,
.main-home .new-arrivals {
    background: transparent;
}
.main-home .featured-categories {
    padding-top: clamp(2rem, 4vw, 3rem);
}
.main-home .home-section-head {
    margin-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.main-home .section-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: none;
    margin: 0 0 1rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--home-accent);
}
.main-home .section-kicker::before,
.main-home .section-kicker::after {
    content: "";
    width: 24px;
    height: 1.5px;
    background: currentColor;
    opacity: .55;
}
.main-home .section-title {
    font-family: var(--home-display);
    font-size: clamp(1.9rem, 3.4vw, 2.85rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--home-ink);
    margin-bottom: 0;
    padding-bottom: 0;
}
.main-home .section-title::after {
    display: none;
}

/* --- CATEGORY CARDS (refinamento) --- */
.main-home .category-card {
    border-radius: var(--home-radius);
    box-shadow: 0 10px 30px -18px rgba(28, 28, 28, .25);
}
.main-home .category-card h3 {
    font-family: var(--home-display);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* --- NOVIDADES / BOTÃO VER MAIS --- */
.main-home .btn-ver-mais {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 1rem 2.6rem;
    background: var(--home-ink);
    color: #fff;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: 0 18px 40px -20px rgba(28, 28, 28, .55);
    transition: transform .45s var(--home-ease), background .35s ease;
}
.main-home .btn-ver-mais:hover {
    background: var(--home-accent);
    transform: translateY(-3px);
}

/* --- REVEAL ON SCROLL (progressive enhancement) --- */
.main-home.reveal-armed [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--home-ease), transform .9s var(--home-ease);
}
.main-home.reveal-armed [data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* --- RESPONSIVE (homepage premium) --- */
@media (max-width: 860px) {
    .main-home .trust-badges {
        grid-template-columns: 1fr;
        max-width: 460px;
        gap: 1rem;
    }
}
@media (max-width: 768px) {
    .main-home .hero-section {
        min-height: 78vh;
    }
    .main-home .hero-scroll {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .main-home .home-marquee__track,
    .main-home .hero-scroll-line,
    .main-home .hero-content > *,
    .main-home .button-hero {
        animation: none;
    }
}

/* ==========================================================================
   MICRO-DETALHES (o segredo está nos pormenores)
   ========================================================================== */

/* Cor de seleção de texto editorial */
.main-home ::selection {
    background: var(--home-accent);
    color: #fff;
}

/* Ícone das trust badges preenche-se ao passar o rato */
.main-home .trust-badge svg {
    transition: background .4s ease, color .4s ease;
}
.main-home .trust-badge:hover svg {
    background: var(--home-accent);
    color: #fff;
}

/* Seta subtil nos botões principais (desliza no hover) */
.main-home .button-hero::after,
.main-home .btn-ver-mais::after {
    content: "\2192";
    display: inline-block;
    transition: transform .35s var(--home-ease);
}
.main-home .button-hero:hover::after,
.main-home .btn-ver-mais:hover::after {
    transform: translateX(4px);
}

/* === pages/_products.css === */
/* Estilos exclusivos da página de produtos, principalmente os filtros. */
.pagina-produtos {
    /* Tokens editoriais espelhados da homepage */
    --p-accent: var(--cor-accent);
    --p-accent-soft: var(--cor-accent-soft);
    --p-ink: var(--tema-ink);
    --p-display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

.pagina-produtos .loja-header {
    display: block;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--cor-divisor-pagina);
    padding-bottom: 22px;
}
.pagina-produtos .loja-kicker {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    max-width: none;
    margin: 0 0 .7rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--p-accent);
    text-align: left;
}
.pagina-produtos .loja-kicker::before {
    content: "";
    width: 24px;
    height: 1.5px;
    background: currentColor;
    opacity: .55;
}
.pagina-produtos .loja-header h2 {
    font-family: var(--p-display);
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 500;
    text-transform: none;
    letter-spacing: -.01em;
    color: var(--p-ink);
    text-align: left;
    margin-bottom: 0;
}

.loja-container {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start; /* Importante para o sticky funcionar corretamente */
}

/* ── Barra Lateral de Filtros (Sticky no Desktop) ── */
.filtros-sidebar {
    border-right: 1px solid var(--cor-divisor-pagina);
    padding-right: 20px;
    position: sticky;
    top: 120px; /* Altura do header (101px) mais espaçamento (19px) */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    z-index: 90;
}

/* Personalização da scrollbar da sidebar para ser mais premium */
.filtros-sidebar::-webkit-scrollbar {
    width: 4px;
}
.filtros-sidebar::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}

/* ── Cabeçalho Mobile ── */
.filtros-mobile-header {
    display: none;
}

.sidebar-desktop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--cor-divisor-pagina);
}

.sidebar-desktop-header svg {
    color: #000;
}

.sidebar-desktop-header span {
    font-size: 1.1rem;
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: -0.02em;
    color: #000;
}

/* ── Acordeão de Filtros ── */
.filtro-grupo {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--cor-divisor-pagina);
}

.filtro-grupo:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.filtro-titulo {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
    transition: all 0.2s ease;
}

.filtro-titulo:hover {
    color: var(--p-accent, #475569);
}

.filtro-titulo svg {
    width: 14px;
    height: 14px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.filtro-grupo.aberto .filtro-titulo {
    margin-bottom: 20px;
}

.filtro-grupo.aberto .filtro-titulo svg {
    transform: rotate(180deg);
}

.filtro-conteudo {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    overflow: hidden;
}

.filtro-grupo.aberto .filtro-conteudo {
    grid-template-rows: 1fr;
    opacity: 1;
}

.filtro-conteudo-inner {
    min-height: 0;
}

/* Ajuste na lista para o novo wrapper inner */
.lista-filtros {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 5px; /* Pequeno respiro após o título */
}

.filtro-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b; /* Slate 500 */
    transition: all 0.2s ease;
    user-select: none;
}

.filtro-checkbox:hover {
    color: #000;
}

.filtro-checkbox input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 1.5px solid #e2e8f0;
    border-radius: 6px;
    margin-right: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background-color: #fff;
    flex-shrink: 0;
}

.filtro-checkbox:hover .custom-checkbox {
    border-color: #cbd5e1;
}

.filtro-checkbox input[type="checkbox"]:checked + .custom-checkbox {
    background-color: var(--p-accent, #000);
    border-color: var(--p-accent, #000);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.filtro-checkbox input[type="checkbox"]:checked ~ .filtro-label-text {
    color: #000;
    font-weight: 600;
}

/* Checkbox Destaque (Apenas promoções) */
.filtro-checkbox.principal {
    font-weight: 600;
    color: #111;
}

/* ── Ações de Filtro ── */
.filtro-acoes {
    margin-top: 10px;
    padding-top: 4px;
    display: flex;
    align-items: center;
    width: 100%;
}
.filtro-acoes .link-limpar {
    width: auto !important;
    min-height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 650;
    color: #64748b !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.filtro-acoes .link-limpar:hover {
    color: var(--p-accent, #111) !important;
    background: transparent !important;
    transform: none !important;
}

.botao-filtros-mobile {
    display: none;
}

.mobile-filter-bar {
    display: none;
}

.filtro-sort-mobile {
    display: none;
}

/* Grelha e Ordenação */
#produtos-grid-container {
    transition: opacity 0.3s ease;
}
.cabecalho-grelha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--cor-divisor-pagina);
}


.ordenar-container {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ordenar-container label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--cor-cinza-medio);
    white-space: nowrap;
}

/* Responsividade dos Filtros */
.page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.32);
    backdrop-filter: none;
    z-index: 10002;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.page-overlay.ativo {
    opacity: 1;
    pointer-events: auto;
}

.desktop-only-flex {
    display: flex !important;
}

.mobile-only-flex {
    display: none !important;
}

.sidebar-promo-toggle {
    padding: 0 0 25px 0;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--cor-divisor-pagina);
}

.site-bg-dark .pagina-produtos .loja-header h2,
.site-bg-dark .sidebar-desktop-header,
.site-bg-dark .sidebar-desktop-header svg,
.site-bg-dark .sidebar-desktop-header span,
.site-bg-dark .filtro-titulo,
.site-bg-dark .filtro-checkbox.principal,
.site-bg-dark .filtro-checkbox input[type="checkbox"]:checked ~ .filtro-label-text {
    color: var(--cor-texto-pagina);
}

.site-bg-dark .filtro-checkbox,
.site-bg-dark .ordenar-container label,
.site-bg-dark .filtro-acoes .link-limpar {
    color: var(--cor-texto-pagina-suave) !important;
}

.site-bg-dark .filtro-checkbox:hover,
.site-bg-dark .filtro-titulo:hover,
.site-bg-dark .filtro-acoes .link-limpar:hover {
    color: var(--cor-texto-pagina) !important;
}

@media (max-width: 768px) {
    .pagina-produtos .loja-header {
        display: block;
        margin-bottom: 12px;
    }

    .pagina-produtos .loja-header h2 {
        min-width: 0;
        font-size: 1.35rem;
        text-align: left;
        width: 100%;
    }

    .mobile-filter-bar {
        display: block;
        margin-bottom: 12px;
    }

    .cabecalho-grelha {
        display: none;
    }

    .desktop-only-flex {
        display: none !important;
    }
    .mobile-only-flex {
        display: flex !important;
    }
    .sidebar-promo-toggle {
        padding: 0 0 18px 0;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--cor-divisor-cartao);
    }

    .filtro-sort-mobile {
        display: block;
        padding: 0 0 18px 0;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--cor-divisor-cartao);
    }

    .filtro-sort-mobile label {
        display: block;
        margin-bottom: 10px;
        color: #111;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .filtro-sort-mobile .select-wrapper,
    .filtro-sort-mobile select {
        width: 100%;
    }

    .filtro-sort-mobile select {
        min-height: 46px;
        border: 1px solid #dfe3ea;
        border-radius: 999px;
        background-color: #fff;
        color: #111;
        font-size: 0.92rem;
        font-weight: 600;
        padding: 0 44px 0 16px;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    }

    .loja-container {
        grid-template-columns: 1fr;
    }

    .pagina-produtos .produtos-grid {
        margin-top: 0;
    }
    
    .filtros-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        height: min(88dvh, 720px);
        max-height: calc(100dvh - 18px);
        background-color: var(--cor-fundo);
        z-index: 10003;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(105%);
        transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
        padding: 0;
        overflow: hidden;
        box-shadow: 0 -18px 45px rgba(15, 23, 42, 0.18);
        border-right: none;
        border-radius: 22px 22px 0 0;
    }
    .filtros-sidebar.ativo {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* O painel mobile é uma superfície branca, mesmo quando a página é escura. */
    .site-bg-dark .filtros-sidebar,
    .site-bg-dark .filtros-sidebar .filtro-titulo,
    .site-bg-dark .filtros-sidebar .filtro-sort-mobile label,
    .site-bg-dark .filtros-sidebar .filtro-checkbox.principal,
    .site-bg-dark .filtros-sidebar .filtro-checkbox input[type="checkbox"]:checked ~ .filtro-label-text {
        color: #111827;
    }

    .site-bg-dark .filtros-sidebar .filtro-checkbox,
    .site-bg-dark .filtros-sidebar .filtro-acoes .link-limpar {
        color: #64748b !important;
    }

    .site-bg-dark .filtros-sidebar .filtro-checkbox:hover,
    .site-bg-dark .filtros-sidebar .filtro-titulo:hover,
    .site-bg-dark .filtros-sidebar .filtro-acoes .link-limpar:hover {
        color: #111827 !important;
    }
    
    .filtros-mobile-header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        padding: 30px 22px 18px;
        border-bottom: 1px solid var(--cor-divisor-cartao);
        background-color: #fff;
        position: relative;
        cursor: grab;
        touch-action: none;
        user-select: none;
    }
    .filtros-mobile-header::before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        width: 42px;
        height: 4px;
        border-radius: 999px;
        background: #d9dde4;
        transform: translateX(-50%);
    }
    .filtros-mobile-header:active {
        cursor: grabbing;
    }
    .filtros-mobile-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-align: center;
    }
    .btn-fechar-filtros {
        width: 38px;
        height: 38px;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 50%;
        font-size: 1.55rem;
        line-height: 1;
        color: #111;
        cursor: pointer;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .btn-fechar-filtros:hover {
        background: #f1f5f9 !important;
        color: #111;
        transform: none !important;
    }
    
    #form-filtros {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 20px 22px calc(28px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
    }

    .filtro-grupo {
        padding-bottom: 18px;
        margin-bottom: 18px;
    }

    .filtro-titulo {
        font-size: 0.82rem;
    }

    .lista-filtros {
        gap: 10px;
    }

    .filtro-checkbox {
        min-height: 38px;
        padding: 4px 0;
    }
    
    .filtro-acoes {
        position: static;
        width: 100%;
        padding: 2px 0 0;
        background: transparent;
        border-top: 0;
        margin: -2px 0 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .filtro-acoes .link-limpar {
        background: transparent !important;
        color: #64748b !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 0 !important;
        min-height: auto;
        font-size: 0.82rem;
    }

    .botao-filtros-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        flex-shrink: 0;
        padding: 12px 18px !important;
        min-height: 48px;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        background-color: #fff !important;
        color: var(--cor-texto) !important;
        border: 1px solid #dfe3ea !important;
        border-radius: 999px !important;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05) !important;
        transform: none !important;
    }
    .botao-filtros-mobile:hover {
        background-color: #f8fafc !important;
        transform: none !important;
    }
    .botao-filtros-mobile svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linejoin: round;
    }
}

/* === pages/_contact.css === */
/* ===== PÁGINA DE CONTACTO — design editorial alinhado com a homepage ===== */

.pagina-contacto {
    /* Tokens espelhados da homepage (editorial premium) */
    --c-surface: var(--tema-superficie);
    --c-ink: var(--tema-ink);
    --c-ink-soft: var(--tema-ink-suave);
    --c-muted: var(--tema-muted);
    --c-line: var(--tema-linha);
    --c-accent: var(--cor-accent);
    --c-accent-soft: var(--cor-accent-soft);
    --c-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --c-ease: cubic-bezier(.22, .61, .25, 1);
    --c-radius: 18px;

    max-width: 1180px;
    margin-inline: auto;
    padding: clamp(2.6rem, 5vw, 4.6rem) clamp(20px, 5vw, 40px) clamp(4rem, 7vw, 6.5rem);
}

/* ---- HERO / INTRO ---- */
.contacto-hero {
    text-align: center;
    margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
.pagina-contacto .contacto-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: none;
    margin: 0 auto 1rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--c-accent);
    text-align: center;
}
.pagina-contacto .contacto-kicker::before,
.pagina-contacto .contacto-kicker::after {
    content: "";
    width: 24px;
    height: 1.5px;
    background: currentColor;
    opacity: .55;
}
.pagina-contacto .contacto-titulo {
    font-family: var(--c-display);
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--c-ink);
    margin: 0 0 1rem;
}
.pagina-contacto .contacto-sub {
    max-width: 38rem;
    margin: 0 auto;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.7;
    color: var(--c-muted);
    text-align: center;
}

/* ---- GRID (dois cartões) ---- */
.pagina-contacto .contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(1.1rem, 2vw, 1.6rem);
    align-items: stretch;
    margin-top: 0;
    /* reset da antiga caixa única */
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
}

.pagina-contacto .info-coluna,
.pagina-contacto .form-coluna {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius);
    padding: clamp(2rem, 3vw, 2.8rem);
    box-shadow: 0 14px 38px -28px rgba(28, 28, 28, .35);
}

/* títulos de coluna (kicker discreto) */
.pagina-contacto .info-coluna h3,
.pagina-contacto .form-coluna h3 {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-muted);
    text-align: left;
    margin: 0 0 1.8rem;
}

/* ---- INFO ITEMS ---- */
.pagina-contacto .info-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.6rem;
}
.pagina-contacto .info-item:last-child {
    margin-bottom: 0;
}
.pagina-contacto .info-item-icona {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-accent);
    background: color-mix(in srgb, var(--cor-accent) 12%, transparent);
    border-radius: 14px;
    transition: background .35s var(--c-ease), color .35s var(--c-ease), transform .35s var(--c-ease);
}
.pagina-contacto .info-item:hover .info-item-icona {
    background: var(--c-accent);
    color: #fff;
    transform: translateY(-2px);
}
.pagina-contacto .info-item-texto {
    padding-top: 2px;
}
.pagina-contacto .info-item-texto h4 {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-muted);
    margin-bottom: .35rem;
}
.pagina-contacto .info-item-texto p,
.pagina-contacto .info-item-texto div p {
    font-size: .95rem;
    color: var(--c-ink-soft);
    margin: 0;
    line-height: 1.6;
    text-align: left;
    max-width: none;
}
.pagina-contacto .info-item-texto a:not(.contacto-social-link) {
    color: var(--c-ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, color .25s ease;
}
.pagina-contacto .info-item-texto a:not(.contacto-social-link):hover {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent-soft);
}

/* ---- REDES SOCIAIS (botões circulares) ---- */
.pagina-contacto .contacto-social-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding-top: .25rem;
}
.pagina-contacto .contacto-social-link {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink-soft);
    text-decoration: none;
    transition: color .25s, background .25s, border-color .25s, transform .25s var(--c-ease);
}
.pagina-contacto .contacto-social-link svg {
    display: block;
    width: 18px;
    height: 18px;
}
.pagina-contacto .contacto-social-link:hover {
    transform: translateY(-3px);
    border-color: transparent;
    color: #fff;
}
.pagina-contacto .contacto-social-link.wa:hover { background: #25D366; }
.pagina-contacto .contacto-social-link.ig:hover { background: #E1306C; }
.pagina-contacto .contacto-social-link.fb:hover { background: #1877F2; }

/* ---- FORMULÁRIO ---- */
.pagina-contacto .form-coluna label {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--c-muted);
    text-align: left;
    display: block;
    margin-bottom: .5rem;
}
.pagina-contacto .form-coluna input[type="text"],
.pagina-contacto .form-coluna input[type="email"],
.pagina-contacto .form-coluna textarea {
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    font-size: .95rem;
    font-family: inherit;
    color: var(--c-ink);
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 1.3rem;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.pagina-contacto .form-coluna input[type="text"]:focus,
.pagina-contacto .form-coluna input[type="email"]:focus,
.pagina-contacto .form-coluna textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--c-accent-soft);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-accent) 16%, transparent);
}
.pagina-contacto .form-coluna textarea {
    resize: vertical;
    min-height: 140px;
    margin-bottom: .4rem;
}
.pagina-contacto .contador-caracteres {
    text-align: right;
    font-size: .75rem;
    color: var(--c-muted);
}

/* botão pílula (igual aos da home, com seta a deslizar) */
.pagina-contacto .contacto-submit {
    width: 100%;
    margin-top: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: 1rem 2.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--c-ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 18px 40px -20px rgba(28, 28, 28, .55);
    transition: transform .45s var(--c-ease), background .35s ease;
}
.pagina-contacto .contacto-submit:hover {
    background: var(--c-accent);
    transform: translateY(-3px);
}
.pagina-contacto .contacto-submit::after {
    content: "\2192";
    display: inline-block;
    transition: transform .35s var(--c-ease);
}
.pagina-contacto .contacto-submit:hover::after {
    transform: translateX(4px);
}

/* ---- MAPA ---- */
.contacto-mapa-head {
    margin: clamp(3rem, 5vw, 4.2rem) 0 clamp(1.4rem, 2.5vw, 2rem);
    text-align: center;
}
.pagina-contacto .mapa-wrapper-full {
    margin-top: 0;
    border-radius: var(--c-radius);
    overflow: hidden;
    height: clamp(320px, 42vw, 460px);
    border: 1px solid var(--c-line);
    box-shadow: 0 22px 50px -34px rgba(28, 28, 28, .4);
}
.pagina-contacto .mapa-wrapper-full iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(.25) contrast(1.02);
    transition: filter .5s ease;
}
.pagina-contacto .mapa-wrapper-full:hover iframe {
    filter: grayscale(0);
}

/* ---- REVEAL ON SCROLL (progressive enhancement, igual à home) ---- */
.pagina-contacto.reveal-armed [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--c-ease), transform .9s var(--c-ease);
}
.pagina-contacto.reveal-armed [data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .pagina-contacto .contacto-grid {
        grid-template-columns: 1fr;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pagina-contacto.reveal-armed [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .pagina-contacto .info-item:hover .info-item-icona,
    .pagina-contacto .contacto-social-link:hover,
    .pagina-contacto .contacto-submit:hover {
        transform: none;
    }
}

/* === pages/_cart.css === */
/* ── PÁGINA DO CARRINHO (PREMIUM REDESIGN) ── */

.pagina-carrinho {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.cart-header {
    margin-bottom: 40px;
    text-align: center; /* FIX: Igual ao Fale Connosco */
}

.cart-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cor-texto);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

/* Layout Principal */
.cart-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 50px;
    align-items: start;
}

.cart-container.vazio {
    display: block;
}

/* ── Lista de Itens ── */
.cart-items-wrapper {
    background: transparent;
    min-width: 0; /* Evita quebra de grid com textos longos */
}

/* Overrides de tamanho sobre a estrutura partilhada (_unified-cart-item.css) */
.item-carrinho {
    grid-template-columns: 86px minmax(0, 1fr) auto;
    padding: 24px 0;
    background: transparent;
    border-bottom-color: var(--cor-divisor-pagina);
}

.item-carrinho:first-child {
    padding-top: 0;
}

.item-carrinho img {
    width: 86px;
    height: 108px;
}

/* Empurra o qty-editor para baixo dentro da coluna de ações */
.item-carrinho .cart-qty-editor {
    margin-top: auto;
}

/* ── Sumário Lateral ── */
.cart-summary-wrapper {
    position: sticky;
    top: 120px;
}

.cart-summary-card {
    background: var(--cor-superficie-cartao);
    border: 1px solid var(--cor-borda-cartao);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 24px;
    color: #1c1c1c;
    box-shadow: 0 16px 38px -32px rgba(28, 28, 28, .42);
}

.cart-summary-card h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
    margin: 0 0 25px 0;
    border-bottom: 1px solid var(--cor-divisor-cartao);
    padding-bottom: 15px;
}

.cart-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 0.95rem;
    color: #475569;
}

.cart-sum-row.total {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--cor-divisor-cartao);
    color: #000;
    font-weight: 800;
    font-size: 1.3rem;
}

.cart-sum-row.total div {
    text-align: right;
}

.cart-sum-row small {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    margin-top: 2px;
}

/* Checkout Action */
.cart-checkout-action {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cart-checkout-action .button.add-btn.large {
    width: 100% !important;
    padding: 20px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    margin: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.cart-security-note svg {
    width: 14px;
    height: 14px;
}

/* Ações Inferiores */
.cart-actions-bottom {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--cor-divisor-pagina);
}

.site-bg-dark .cart-header h2,
.site-bg-dark .btn-continue-shopping {
    color: var(--cor-texto-pagina);
}

.site-bg-dark .cart-security-note {
    color: var(--cor-texto-pagina-suave);
}

.btn-continue-shopping {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.btn-continue-shopping:hover {
    color: #000;
}

.btn-continue-shopping svg {
    width: 18px;
    height: 18px;
}

/* Loading & Empty State */
.cart-loading, .cart-empty-state {
    text-align: center;
    padding: 100px 0;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f1f5f9;
    border-top: 3px solid #000;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsividade ── */
@media (max-width: 992px) {
    .cart-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cart-summary-wrapper {
        position: static;
    }
}

@media (max-width: 600px) {
    .item-carrinho {
        grid-template-columns: 70px minmax(0, 1fr) auto;
        gap: 12px;
    }

    .item-carrinho img {
        width: 70px;
        height: 88px;
    }
}

/* === pages/_gerir-atributos.css === */
/* ===================================================
   PÁGINA: GERIR ATRIBUTOS (REFORMULAÇÃO COMPLETA)
   Sistema de Cards e Listas Flexíveis
   =================================================== */

.admin-main-content.full-width {
    max-width: none;
    padding: 30px 20px;
}

.admin-container.large {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* --- Formulário de Adicionar Grupo (Novo Estilo) --- */
.add-group-card {
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: var(--sombra-subtil);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-group-card form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.add-group-card .input-group {
    flex-grow: 2;
    min-width: 250px;
}

.add-group-card .checkbox-group {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.add-group-card .btn-add {
    flex-shrink: 0;
}

/* --- Grid de Cards de Atributos --- */
.attributes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.attribute-card {
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.attribute-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    border-color: #ddd;
}

/* Header do Card */
.attribute-card-header {
    padding: 20px 25px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
}

.attribute-info {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    /* Indica que o header é clicável para colapsar */
    flex-grow: 1;
}

.attribute-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--cor-texto);
}

.attribute-card .chevron-icon {
    transition: transform 0.3s ease;
    color: var(--cor-cinza-medio);
}

.attribute-card.collapsed .chevron-icon {
    transform: rotate(-90deg);
}

.attribute-card.collapsed .values-container,
.attribute-card.collapsed .attribute-card-footer {
    display: none;
}

.attribute-badge {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 4px;
    background: #f1f3f5;
    color: #666;
    text-transform: uppercase;
    font-weight: 700;
}

.attribute-badge.filterable {
    background: #e7f5ff;
    color: #1c7ed6;
}

.filter-toggle-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.attribute-actions {
    display: flex;
    gap: 8px;
}


/* Lista de Valores (Flex-based) */
.values-container {
    padding: 10px 0;
}

.value-item {
    display: flex;
    align-items: center;
    padding: 12px 25px;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
}

.value-item:last-child {
    border-bottom: none;
}

.value-item:hover {
    background-color: #fcfcfc;
}

.value-drag-handle {
    width: 30px;
    color: #ced4da;
    cursor: grab;
    font-size: 1.2rem;
    user-select: none;
}

.value-name {
    flex-grow: 1;
    font-size: 0.95rem;
    color: #444;
}

.value-actions {
    display: flex;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.2s ease;
}


.value-item:hover .value-actions {
    opacity: 1;
}

/* Footer do Card (Add Value) */
.attribute-card-footer {
    padding: 20px 25px;
    background: #f9fafb;
    border-top: 1px solid #f1f1f1;
}

.add-value-form {
    display: flex;
    gap: 10px;
}

.add-value-form input {
    flex-grow: 1;
    padding: 10px 15px;
    font-size: 0.9rem;
    border: 1px solid #ddd;
    border-radius: 8px;
}

/* Sortable Specifics */
.ghost-class {
    opacity: 0.4;
    background-color: #e9ecef !important;
}

/* --- Edição Inline Simplificada --- */
.editable-container-wrapper {
    position: relative;
    padding: 5px;
    margin: -5px;
    background-color: #fff;
    border: 1px solid var(--cor-texto);
    border-radius: 8px;
    z-index: 100;
}

.editable-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.editable-container .edit-input {
    flex-grow: 1;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: 1px solid #eee;
    border-radius: 6px;
    outline: none;
}

.editable-container .edit-input:focus {
    border-color: #ccc;
}

.editable-container .save-btn,
.editable-container .cancel-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.editable-container .save-btn {
    background: var(--cor-texto);
    color: #fff;
    border: none;
}

.editable-container .cancel-btn {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #ddd;
}


/* Responsividade */
@media (max-width: 600px) {
    .add-group-card form {
        flex-direction: column;
        align-items: stretch;
    }

    .attribute-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .attribute-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .value-actions {
        opacity: 1;
    }
}
/* === pages/_dashboard.css === */
/* public/css/pages/_dashboard.css */

.dashboard-container {
    max-width: 1280px;
    margin: 0 auto;
    text-align: left;
}

.dashboard-container h2,
.dashboard-container h3,
.dashboard-container p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--cor-borda-subtil);
}

.header-welcome h2 {
    margin: 0 0 8px;
    font-size: 2.2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #000;
    line-height: 1.1;
}

.header-welcome p {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.header-welcome p strong {
    color: #000;
    font-weight: 700;
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin: 0 2px;
}

.dashboard-header .header-actions {
    display: flex;
    gap: 12px;
}

.dashboard-header .header-actions .button {
    height: 42px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-header .header-actions .edit-btn {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

.dashboard-header .header-actions .edit-btn:hover {
    background: transparent;
    color: #000;
}

.dashboard-header .header-actions .voltar-btn {
    background: #fff;
    color: #000;
    border: 1px solid var(--cor-borda-subtil);
}

.dashboard-header .header-actions .voltar-btn:hover {
    border-color: #000;
    background: #fafafa;
}

/* --- Estatísticas --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.stat-card {
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 25px;
    text-decoration: none;
    color: inherit;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    border-color: #000;
}

.stat-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s ease;
    background: #f8fafc;
    color: #000;
}

.stat-card:hover .stat-card-icon {
    background: #000;
    color: #fff;
    transform: scale(1.05);
}

.stat-card-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.8;
}

/* Variações de cor ultra-clean */
.stat-card:nth-of-type(1):hover {
    border-color: #000;
}

.stat-card:nth-of-type(2):hover {
    border-color: #f76707;
}

.stat-card:nth-of-type(2):hover .stat-card-icon {
    background: #f76707;
}

.stat-card:nth-of-type(3):hover {
    border-color: #0c8599;
}

.stat-card:nth-of-type(3):hover .stat-card-icon {
    background: #0c8599;
}

.stat-card:nth-of-type(4):hover {
    border-color: #7c3aed;
}

.stat-card:nth-of-type(4):hover .stat-card-icon {
    background: #7c3aed;
}

.stat-card-info .stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #000;
    display: block;
    margin-bottom: 6px;
    letter-spacing: -0.04em;
}

.stat-card-info .stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* --- Layout Principal --- */
.dashboard-grid-cols {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: flex-start;
}

.dashboard-section-title {
    font-size: 0.9rem;
    font-weight: 800;
    color: #000;
    margin: 0 0 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #000;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 10px;
}


.dashboard-section-title.section-spacer {
    margin-top: 50px;
}

/* --- Cartões de Navegação --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.nav-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--cor-borda-subtil);
    text-decoration: none;
    color: #000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-card:hover {
    border-color: #000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

.nav-card-icon {
    width: 44px;
    height: 44px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #000;
    transition: all 0.3s;
}

.nav-card:hover .nav-card-icon {
    background: #000;
    color: #fff;
    transform: scale(1.1);
}

.nav-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.nav-card-body {
    flex-grow: 1;
    text-align: left;
}

/* --- Reservas de Stock --- */
.reservation-table-wrapper {
    max-width: 1200px;
    margin: 0 auto 40px;
}

.reservation-table td {
    text-align: center;
}

.reservation-table th {
    text-align: center;
}

.reservation-product-cell strong {
    display: block;
    margin-bottom: 4px;
}

.reservation-product-item {
    padding: 8px 0;
}

.reservation-product-item.has-divider {
    border-top: 1px solid var(--cor-borda-subtil);
    margin-top: 4px;
}

.res-item-main {
    font-size: 0.95rem;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.res-item-main strong {
    display: inline;
    color: #000;
    margin-right: 4px;
}

.res-item-meta .reservation-muted {
    font-size: 0.78rem;
    color: #64748b;
}

.reservation-countdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.reservation-countdown.ending {
    background: #fff7ed;
    color: #c2410c;
}

.reservation-empty {
    text-align: center !important;
    padding: 32px !important;
    color: #64748b;
    font-weight: 600;
}

.nav-card-body h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.nav-card-body p {
    font-size: 0.88rem;
    color: var(--cor-cinza-medio);
    line-height: 1.5;
    margin: 0;
}

/* --- Feed de Atividade --- */
.activity-feed-container {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    text-decoration: none;
    color: #000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    margin-bottom: 4px;
}

.activity-item:hover {
    background: #f8fafc;
    border-color: var(--cor-borda-subtil);
    transform: translateX(4px);
}

.activity-icon-wrapper {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}

.activity-item:hover .activity-icon-wrapper {
    transform: scale(1.1);
}

.activity-icon-wrapper.encomenda {
    background: #eff6ff;
    color: #3b82f6;
}

.activity-icon-wrapper.mensagem {
    background: #f0fdf4;
    color: #22c55e;
}

.activity-content {
    flex-grow: 1;
}

.activity-content strong {
    font-size: 0.95rem;
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
    color: #000;
}

.activity-content span {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 500;
}

.activity-time {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.activity-item:hover .activity-time {
    background: #e2e8f0;
    color: #64748b;
}

.activity-placeholder {
    padding: 20px 20px;
    text-align: center;
}

.activity-placeholder svg {
    color: #dee2e6;
    margin-bottom: 20px;
}

.activity-placeholder h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: #000;
}

.activity-placeholder p {
    font-size: 0.9rem;
    color: var(--cor-cinza-medio);
    max-width: 200px;
    margin: 0 auto;
}

/* Responsividade */
@media (max-width: 1200px) {
    .dashboard-grid-cols {
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .dashboard-grid-cols {
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
    }

    .activity-col {
        order: 2;
        width: 100%;
    }

    .main-actions-col {
        order: 1;
        width: 100%;
    }

    .dashboard-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 30px;
        padding-bottom: 25px;
    }

    .header-welcome h2 {
        font-size: 1.6rem;
    }

    .header-welcome p {
        font-size: 0.95rem;
    }

    .header-actions {
        width: 100%;
        gap: 10px;
    }

    .header-actions .button {
        flex: 1;
        font-size: 0.75rem;
        padding: 0 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 768px) {
    #toggleGlobalEditBtn {
        display: none !important;
    }
}

/* === pages/_info-page.css === */
/* ===== PÁGINAS DE INFORMAÇÃO (trocas, envios, consultar-encomenda...) =====
   Design editorial alinhado com a homepage: serif Fraunces, accent quente,
   cards sólidos com borda subtil, ícones accent, botões pílula. */

.pagina-info {
    /* Tokens espelhados da homepage */
    --i-surface: var(--tema-superficie);
    --i-ink: var(--tema-ink);
    --i-ink-soft: var(--tema-ink-suave);
    --i-muted: var(--tema-muted);
    --i-line: var(--tema-linha);
    --i-accent: var(--cor-accent);
    --i-accent-soft: var(--cor-accent-soft);
    --i-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --i-ease: cubic-bezier(.22, .61, .25, 1);
    --i-radius: 18px;

    max-width: 1100px;
    margin-inline: auto;
    padding: clamp(2.6rem, 5vw, 4.6rem) clamp(20px, 5vw, 40px) clamp(4rem, 7vw, 6.5rem);
}

.info-premium {
    animation: fadeInPage 0.7s var(--i-ease, ease-out);
}

@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- CABEÇALHO (kicker + título serif) ---- */
.pagina-info-header {
    text-align: center;
    margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
.pagina-info .info-kicker {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    max-width: none;
    margin: 0 auto 1rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--i-accent);
}
.pagina-info .info-kicker::before,
.pagina-info .info-kicker::after {
    content: "";
    width: 24px;
    height: 1.5px;
    background: currentColor;
    opacity: .55;
}
.pagina-info-header h2 {
    display: block;
    font-family: var(--i-display);
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -.01em;
    color: var(--i-ink);
    text-transform: none;
    margin: 0 0 1rem;
    /* anula o gradient-clip antigo */
    background: none;
    -webkit-text-fill-color: currentColor;
}
.pagina-info-header p {
    max-width: 38rem;
    margin: 0 auto;
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.7;
    color: var(--i-muted);
}
.pagina-info-header p a {
    color: var(--i-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* ---- BLOCO GENÉRICO (ex.: formulário consultar-encomenda) ---- */
.pagina-info .info-bloco {
    background: var(--i-surface);
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius);
    padding: clamp(2rem, 3vw, 2.6rem);
    margin: 0 auto;
    box-shadow: 0 14px 38px -28px rgba(28, 28, 28, .35);
}

/* ---- GRELHA DE CARDS ---- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1.1rem, 2vw, 1.6rem);
    margin-top: 0;
}

.pagina-info .info-card {
    position: relative;
    overflow: hidden;
    background: var(--i-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius);
    padding: clamp(1.8rem, 2.6vw, 2.4rem);
    box-shadow: 0 14px 38px -28px rgba(28, 28, 28, .35);
    transition: transform .4s var(--i-ease), box-shadow .4s var(--i-ease), border-color .4s ease;
}
.pagina-info .info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -26px rgba(28, 28, 28, .35);
    border-color: var(--i-accent-soft);
    background: var(--i-surface);
}
.pagina-info .info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--i-accent), var(--i-accent-soft));
    opacity: 0;
    transition: opacity .4s ease;
}
.pagina-info .info-card:hover::before {
    opacity: 1;
}

/* título do card + ícone accent (estilo trust-badge da home) */
.pagina-info .info-card h3 {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.3rem;
    font-family: var(--i-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--i-ink);
    text-align: left;
}
.pagina-info .info-card h3 svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--i-accent);
    background: color-mix(in srgb, var(--cor-accent) 12%, transparent);
    border-radius: 12px;
    padding: 9px;
    box-sizing: content-box;
    transition: background .35s var(--i-ease), color .35s var(--i-ease), transform .35s var(--i-ease);
}
.pagina-info .info-card:hover h3 svg {
    background: var(--i-accent);
    color: #fff;
    transform: translateY(-1px);
}

.pagina-info .info-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagina-info .info-card ul li {
    position: relative;
    padding: .85rem 0 .85rem 1.5rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--i-ink-soft);
    border-bottom: 1px solid var(--i-line);
}
.pagina-info .info-card ul li:last-child {
    border-bottom: none;
}
.pagina-info .info-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1.35rem;
    width: 6px;
    height: 6px;
    background: var(--i-accent);
    border-radius: 50%;
}
.pagina-info .info-card ul li strong {
    color: var(--i-ink);
    font-weight: 650;
}
.pagina-info .info-card p {
    text-align: left;
    max-width: none;
    margin: 0;
    color: var(--i-ink-soft);
    line-height: 1.6;
}

/* ---- TABELA DE PORTES (envios) ---- */
.pagina-info .portes-container {
    margin-top: clamp(2.2rem, 4vw, 3.2rem);
    background: var(--i-surface);
    border: 1px solid var(--i-line);
    border-radius: var(--i-radius);
    overflow: hidden;
    box-shadow: 0 14px 38px -28px rgba(28, 28, 28, .35);
}
.pagina-info .portes-header {
    padding: clamp(1.4rem, 2.5vw, 2rem);
    background: transparent;
    border-bottom: 1px solid var(--i-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}
.pagina-info .portes-header h3 {
    font-family: var(--i-display);
    font-weight: 500;
    color: var(--i-ink);
}
.portes-filtro {
    position: relative;
    min-width: 250px;
}
.portes-filtro input {
    width: 100%;
    padding: .8rem 1.2rem .8rem 2.8rem;
    border-radius: 999px;
    border: 1px solid var(--i-line);
    background: var(--tema-tinte);
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.portes-filtro input:focus {
    outline: none;
    background: #fff;
    border-color: var(--i-accent-soft);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-accent) 16%, transparent);
}
.portes-filtro svg {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--i-muted);
}

.portes-tabela-wrapper { overflow-x: auto; }
.portes-tabela {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}
.portes-tabela th {
    background: transparent;
    padding: 16px 26px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--i-muted);
    border-bottom: 1px solid var(--i-line);
}
.portes-tabela td {
    padding: 16px 26px;
    border-bottom: 1px solid var(--i-line);
    font-size: 1rem;
    color: var(--i-ink-soft);
}
.portes-tabela tr:last-child td { border-bottom: none; }
.portes-tabela tr:hover td { background: var(--tema-tinte); }

.badge-pais {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--i-ink);
}
.iso-code {
    background: color-mix(in srgb, var(--cor-accent) 15%, transparent);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--i-accent);
}
.preco-tag {
    font-weight: 700;
    color: var(--i-accent);
    font-size: 1.05rem;
}

/* ---- ACORDEÃO DE PAÍSES ---- */
.accordion-pais {
    border-bottom: 1px solid var(--i-line);
}
.accordion-pais:last-child { border-bottom: none; }
.accordion-header {
    position: relative;
    width: 100%;
    padding: 18px clamp(1.4rem, 2.5vw, 2rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--i-surface);
    border: none;
    cursor: pointer;
}
.accordion-header:hover {
    background: var(--i-surface);
    color: inherit;
}
/* Realce arredondado e recolhido das margens — consistente em todas as linhas
   (não toca nos cantos do container, evitando o efeito meio-redondo na última). */
.accordion-header::before {
    content: "";
    position: absolute;
    inset: 5px clamp(.5rem, 1.2vw, .9rem);
    border-radius: 12px;
    background: color-mix(in srgb, var(--cor-accent) 9%, var(--i-surface));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.accordion-header:hover::before {
    opacity: 1;
}
.accordion-header .badge-pais,
.accordion-header .accordion-icon {
    position: relative;
    z-index: 1;
}
.accordion-header .badge-pais {
    font-size: 1.05rem;
    color: var(--i-ink-soft);
    transition: color .3s ease, transform .3s ease;
}
.accordion-header:hover .badge-pais {
    transform: translateX(4px);
    color: var(--i-accent);
}
.accordion-icon {
    transition: transform .45s var(--i-ease), color .3s ease;
    color: var(--i-muted);
}
.accordion-pais.active .accordion-icon {
    transform: rotate(180deg);
    color: var(--i-accent);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s var(--i-ease), padding .35s ease;
    background: var(--tema-tinte);
}
.accordion-pais.active .accordion-content {
    max-height: 1000px;
    padding-bottom: 18px;
}

/* ---- FORMULÁRIO (consultar-encomenda) ---- */
.pagina-info .form-group {
    margin-bottom: 1.3rem;
}
.pagina-info .form-group label {
    display: block;
    margin-bottom: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--i-muted);
    text-align: left;
}
.pagina-info .form-group input {
    width: 100%;
    padding: .85rem 1rem;
    border: 1px solid var(--i-line);
    border-radius: 12px;
    background: var(--tema-tinte);
    color: var(--i-ink);
    font-size: .95rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.pagina-info .form-group #encomenda_id,
.pagina-info .form-group #cliente_email,
.pagina-info .form-group #encomenda_id:valid,
.pagina-info .form-group #encomenda_id:invalid,
.pagina-info .form-group #cliente_email:valid,
.pagina-info .form-group #cliente_email:invalid {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--i-line) !important;
    border-radius: 12px;
    box-shadow: none;
}

.pagina-info .form-group #cliente_email,
.pagina-info .form-group #cliente_email:valid,
.pagina-info .form-group #cliente_email:invalid {
    background: #fff;
}

.pagina-info .form-group input:focus {
    outline: none;
    background: #fff;
    border-color: var(--i-accent-soft);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-accent) 16%, transparent);
}

.pagina-info .form-group #encomenda_id:focus,
.pagina-info .form-group #cliente_email:focus {
    border-color: var(--i-accent-soft) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor-accent) 16%, transparent);
}
.pagina-info .form-actions {
    margin-top: 1.6rem;
}
.pagina-info .button.add-btn,
.pagina-info .form-actions .add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    width: 100%;
    padding: 1rem 2.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--i-ink);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 18px 40px -20px rgba(28, 28, 28, .55);
    transition: transform .45s var(--i-ease), background .35s ease;
}
.pagina-info .button.add-btn:hover,
.pagina-info .form-actions .add-btn:hover {
    background: var(--i-accent);
    transform: translateY(-3px);
}
.pagina-info .button.add-btn::after,
.pagina-info .form-actions .add-btn::after {
    content: "\2192";
    display: inline-block;
    transition: transform .35s var(--i-ease);
}
.pagina-info .button.add-btn:hover::after,
.pagina-info .form-actions .add-btn:hover::after {
    transform: translateX(4px);
}

.pagina-info .auth-message.error {
    margin-bottom: 1.2rem;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: #FCEFEF;
    border: 1px solid #E9C9C9;
    color: var(--cor-erro, #c0392b);
    font-size: .9rem;
    text-align: left;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .pagina-info .info-card {
        padding: 1.6rem;
    }
    .pagina-info .portes-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .portes-filtro {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .info-premium { animation: none; }
    .pagina-info .info-card:hover,
    .pagina-info .info-card:hover h3 svg,
    .pagina-info .button.add-btn:hover { transform: none; }
}

/* === pages/_product-page.css === */
/* Product detail page */
.pagina-produto-detalhe {
    width: min(100%, 1160px);
    margin: 0 auto;
    padding: clamp(20px, 3.5vw, 38px) clamp(16px, 4vw, 28px) 72px;
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 28px;
    color: var(--cor-cinza-medio);
    font-size: 0.82rem;
    font-weight: 600;
}

.breadcrumbs a,
.breadcrumbs .atual {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border: 1px solid #edf0f3;
    border-radius: 999px;
    background: #fff;
    color: var(--cor-cinza-medio);
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--cor-texto);
    border-color: #d8dde4;
}

.breadcrumbs .atual {
    color: var(--cor-texto);
    background: #f7f8fa;
}

.breadcrumbs .separador {
    color: #c6cbd2;
}

.produto-detalhe-container {
    display: grid;
    grid-template-columns: minmax(280px, 470px) minmax(360px, 1fr);
    gap: clamp(34px, 6vw, 72px);
    align-items: start;
}

.pagina-produto-detalhe .modal-galeria {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 470px;
    justify-self: center;
}

.pagina-produto-detalhe .zoom-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid #e7ebef;
    border-radius: 20px;
    background: linear-gradient(145deg, #f9fafb, #f1f3f5);
    box-shadow: 0 24px 60px rgba(18, 25, 38, 0.08);
}

.pagina-produto-detalhe .zoom-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    background:
        linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.62) 45%, transparent 82%),
        rgba(248, 250, 252, 0.72);
    transform: translateX(-100%);
    transition: opacity 0.2s ease;
}

.pagina-produto-detalhe .zoom-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease, opacity 0.25s ease;
}

.pagina-produto-detalhe .zoom-container:hover img {
    transform: scale(1.025);
}

.pagina-produto-detalhe .modal-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(58px, 72px));
    justify-content: center;
    gap: 10px;
}

.pagina-produto-detalhe .modal-thumbnail {
    aspect-ratio: 1;
    width: 100%;
    border: 1px solid #e4e8ed;
    border-radius: 12px;
    background: #fff;
    object-fit: cover;
    opacity: 0.72;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.pagina-produto-detalhe .modal-thumbnail:hover,
.pagina-produto-detalhe .modal-thumbnail.ativa,
.pagina-produto-detalhe .modal-thumbnail.active {
    border-color: var(--cor-texto);
    box-shadow: 0 10px 24px rgba(18, 25, 38, 0.12);
    opacity: 1;
    transform: translateY(-1px);
}

.pagina-produto-detalhe .modal-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(24px, 3vw, 36px);
    background: var(--tema-superficie, #fff);
    border: 1px solid var(--tema-linha);
    border-radius: 20px;
    box-shadow: 0 18px 45px -28px rgba(18, 25, 38, 0.22);
}

.pagina-produto-detalhe .modal-info h1#modalNome {
    margin: 0;
    color: var(--cor-texto);
    font-size: clamp(2rem, 4vw, 2.85rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: left;
}

.pagina-produto-detalhe .modal-info p#modalPreco {
    margin: 0;
    color: var(--cor-texto);
    font-size: clamp(1.55rem, 2.6vw, 2.05rem);
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
}

.pagina-produto-detalhe .preco-promocao del {
    margin-right: 10px;
    color: #9aa1aa;
    font-size: 0.72em;
    font-weight: 500;
}

.produto-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -2px 0 0;
    padding-bottom: 2px;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid #e6ebf0;
    border-radius: 999px;
    background: #fff;
    color: #5f6874;
    font-size: 0.84rem;
    font-weight: 650;
}

.meta-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.3;
}

.meta-item.stock-ok {
    background-color: #eef8f1;
    color: #217346;
    border-color: #c9e9d2;
}

.meta-item.stock-low {
    background-color: #fff7ed;
    color: #b45309;
    border-color: #fed7aa;
}

.meta-item.stock-out {
    background-color: #fef2f2;
    color: var(--cor-erro);
    border-color: #fecaca;
}

.pagina-produto-detalhe .bloco-acoes-compra {
    margin: 2px 0 0;
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--tema-linha);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.pagina-produto-detalhe .bloco-acoes-compra.sem-variacoes {
    padding: 18px 0 0;
    border: 0;
    border-top: 1px solid var(--tema-linha);
    box-shadow: none;
    background: transparent;
}

.pagina-produto-detalhe .selecao-variacao {
    margin-bottom: 16px;
}

.pagina-produto-detalhe .selecao-variacao label {
    display: block;
    margin-bottom: 8px;
    color: var(--cor-texto);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pagina-produto-detalhe .select-wrapper {
    position: relative;
}

.pagina-produto-detalhe .select-estilizado {
    width: 100%;
    min-height: 46px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    background-color: #fff;
    color: var(--cor-texto);
    font-size: 0.92rem;
    font-weight: 600;
}

.pagina-produto-detalhe .select-estilizado:focus {
    outline: none;
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.06);
}

.pagina-produto-detalhe .modal-acoes-principais {
    gap: 12px;
}

.pagina-produto-detalhe .seletor-quantidade {
    width: 100%;
    min-width: 0;
}

.detalhes-produto-acordeao {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.detalhes-produto-acordeao .acordeao-item {
    overflow: hidden;
    border: 1px solid #e5e9ef;
    border-radius: 16px;
    background: #fff;
}

.detalhes-produto-acordeao .acordeao-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 52px 0 18px;
    border: 0;
    background: transparent;
    color: var(--cor-texto);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.detalhes-produto-acordeao .acordeao-header::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.detalhes-produto-acordeao .acordeao-item.ativo .acordeao-header::after {
    transform: translateY(-35%) rotate(225deg);
}

.detalhes-produto-acordeao .acordeao-conteudo {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.detalhes-produto-acordeao .acordeao-conteudo p {
    margin: 0;
    padding: 0 18px 18px;
    color: #59616c;
    font-size: 0.96rem;
    line-height: 1.7;
    text-align: left;
}

/* Acordeão dentro da PÁGINA de produto: integrado no card, sem sub-caixa.
   Scoped a .pagina-produto-detalhe — o modal (.modal) mantém o estilo original. */
.pagina-produto-detalhe .detalhes-produto-acordeao {
    gap: 0;
    padding-top: 0;
}
.pagina-produto-detalhe .detalhes-produto-acordeao .acordeao-item {
    border: 0;
    border-top: 1px solid var(--tema-linha);
    border-radius: 0;
    background: transparent;
}
.pagina-produto-detalhe .detalhes-produto-acordeao .acordeao-header {
    min-height: 52px;
    padding: 0 36px 0 0;
}
.pagina-produto-detalhe .detalhes-produto-acordeao .acordeao-header::after {
    right: 4px;
}
.pagina-produto-detalhe .detalhes-produto-acordeao .acordeao-conteudo p {
    padding: 0 0 16px;
}

.pagina-produto-detalhe #btn-guia-tamanhos {
    width: 100%;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.pagina-produto-detalhe > .produtos-relacionados-container {
    margin-top: clamp(44px, 7vw, 76px);
}

/* O traço separador (border-top) só deve aparecer quando há produtos relacionados.
   Quando o container está vazio, esconde-o por completo. (Scoped à página; o modal mantém-se.) */
.pagina-produto-detalhe > .produtos-relacionados-container:empty {
    display: none;
}

.image-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    display: none;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(17, 24, 39, 0.12);
    border-top-color: rgba(17, 24, 39, 0.72);
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.12);
    animation: product-page-spin 1s linear infinite;
}

@keyframes product-page-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.pagina-produto-detalhe .zoom-container.loading .image-loading-spinner {
    display: block;
}

.pagina-produto-detalhe .zoom-container.loading::after {
    opacity: 1;
    animation: product-page-shimmer 1.25s ease-in-out infinite;
}

.pagina-produto-detalhe .zoom-container.loading #modalImagemPrincipal {
    opacity: 0;
    visibility: hidden;
    transform: none;
}

@keyframes product-page-shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (max-width: 900px) {
    .produto-detalhe-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .pagina-produto-detalhe .modal-galeria {
        position: static;
        max-width: 560px;
    }

    .pagina-produto-detalhe .modal-info {
        padding: clamp(18px, 5vw, 26px);
    }
}

@media (max-width: 560px) {
    .pagina-produto-detalhe {
        padding-inline: 14px;
        padding-bottom: 52px;
    }

    .breadcrumbs {
        gap: 6px;
        margin-bottom: 18px;
    }

    .breadcrumbs a,
    .breadcrumbs .atual {
        min-height: 30px;
        padding-inline: 10px;
        font-size: 0.76rem;
    }

    .pagina-produto-detalhe .zoom-container {
        border-radius: 16px;
    }

    .pagina-produto-detalhe .modal-info {
        gap: 14px;
    }

    .pagina-produto-detalhe .modal-info h1#modalNome {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
    }

    .pagina-produto-detalhe .bloco-acoes-compra {
        border-radius: 16px;
        padding: 16px;
    }

    .pagina-produto-detalhe .modal-acoes-principais {
        flex-direction: column;
    }

    .pagina-produto-detalhe .seletor-quantidade {
        width: 100%;
        min-width: 0;
    }
}

/* === pages/_encomendas.css === */
/* public/css/pages/_encomendas.css */



.tabela-encomendas .order-id-cell {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 24px;
}

/* --- ESTILOS PARA DETALHES DA ENCOMENDA ("COCKPIT") --- */
.order-detail-title {
    margin-right: auto;
}

.order-status-top {
    margin-left: auto;
    justify-content: flex-end;
}

.order-title-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.order-title-copy p {
    margin: 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 500;
}

.info-cliente-item { display: flex; gap: 15px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; align-items: flex-start; }
.info-cliente-item:first-child { padding-top: 0; }
.info-cliente-item:last-child { border-bottom: none; padding-bottom: 0; }
.info-cliente-icon { flex-shrink: 0; color: #94a3b8; margin-top: 3px; }
.info-cliente-icon svg { width: 20px; height: 20px; stroke-width: 1.8; fill: none; stroke: currentColor; }
.info-cliente-texto { flex-grow: 1; display: flex; flex-direction: column; }
.info-cliente-texto strong { font-size: 0.7rem; text-transform: uppercase; color: #64748b; margin-bottom: 2px; font-weight: 700; letter-spacing: 0.05em; }
.info-cliente-texto span, .info-cliente-texto a { font-size: 0.95rem; color: #000; text-decoration: none; }
.info-cliente-texto a:hover { text-decoration: underline; color: var(--cor-accent); }
.info-cliente-item.com-acoes { align-items: center; }
.info-cliente-item.com-acoes .botoes-contacto { margin-left: auto; }
.whatsapp-btn { font-size: 0.75rem; padding: 6px 14px; border-radius: 20px; border: 1px solid #c4eadc; background-color: #e7f8f0; color: #008a45; font-weight: 600; text-decoration: none; transition: all 0.2s ease; }
.whatsapp-btn:hover { background-color: #d8f1e5; transform: translateY(-1px); }
.morada-envio { margin-top: 5px; font-size: 0.9rem !important; line-height: 1.6; color: #475569 !important; text-align: left !important; }

.tabela-itens-encomenda img { width: 60px; height: 60px; object-fit: cover; border-radius: 10px; margin-right: 15px; float: left; border: 1px solid #e2e8f0; }
.item-info-cell { display: flex; flex-direction: column; justify-content: center; min-height: 60px; }
.item-atributos-cell { font-size: 0.8rem; color: #64748b; font-weight: 500; }
.item-ref-cell { font-size: 0.75rem; color: #94a3b8; margin-top: 4px; font-family: monospace; }
.detalhes-card-sumario { padding: 24px; background-color: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; }
.sumario-box { width: 100%; max-width: 350px; }
.sumario-linha { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 0.9rem; }
.sumario-linha.total { font-size: 1.25rem; border-top: 2px solid #e2e8f0; margin-top: 12px; padding-top: 15px; font-weight: 800; color: #000; }
.sumario-linha span:first-child { color: #64748b; font-weight: 500; }
.sumario-linha span:last-child { color: #000; font-weight: 700; }
.sumario-linha.total span { color: #000; }

.painel-acoes-tabs {
    display: flex;
    background-color: #f1f5f9;
    padding: 6px;
    gap: 4px;
    border-bottom: 1px solid #e2e8f0;
}
.tab-link {
    flex: 1;
    padding: 10px 8px;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.72rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 10px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.tab-link svg {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.tab-link:hover {
    background-color: rgba(255, 255, 255, 0.5);
    color: #1e293b;
}
.tab-link.ativo {
    color: #000;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tab-link.ativo svg {
    opacity: 1;
    color: #000;
}

.tab-content { display: none; padding: 24px; }
.tab-content.ativo { display: flex; flex-direction: column; gap: 20px; }
.tab-content .form-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 0; }
.tab-content label { margin: 0; font-weight: 800; font-size: 0.72rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }

.tab-content hr { border: none; border-top: 1px solid #f1f5f9; margin: 25px 0; }
.auto-resize-textarea {
    resize: none;
    min-height: 120px;
    border: 1px solid #e2e8f0 !important;
    background-color: #fcfcfd !important;
}
.auto-resize-textarea:focus {
    border-color: #000 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04) !important;
}

.zona-perigo {
    text-align: center;
    background: #fffafa;
    padding: 24px;
    border-radius: 16px;
    border: 1px dashed #fecaca;
    transition: all 0.3s ease;
}
.zona-perigo:hover {
    background: #fff5f5;
    border-style: solid;
}
.zona-perigo p {
    font-size: 0.75rem;
    margin: 0;
    color: #991b1b;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
.aviso-bloqueio {
    text-align: center;
    font-weight: 700;
    color: #b91c1c;
    background-color: #fef2f2;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid #fee2e2;
    font-size: 0.85rem;
}

.incomplete-order-notice {
    padding: 18px;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: #fff7ed;
    color: #9a3412;
}

.incomplete-order-notice strong {
    display: block;
    margin-bottom: 6px;
    color: #9a3412;
    font-size: 0.88rem;
}

.incomplete-order-notice p {
    margin: 0;
    color: #9a3412;
    font-size: 0.82rem;
    line-height: 1.55;
}

.historico-mensagens { padding: 10px 0 0 0; }
.mensagem-item { border: 1px solid #e2e8f0; border-radius: 12px; margin-bottom: 15px; overflow: hidden; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.mensagem-header { display: flex; justify-content: space-between; align-items: center; background-color: #f8fafc; padding: 10px 16px; border-bottom: 1px solid #e2e8f0; }
.mensagem-tipo { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: #475569; }
.mensagem-data { font-size: 0.75rem; color: #94a3b8; font-weight: 500; }
.mensagem-body { padding: 16px; font-size: 0.9rem; line-height: 1.6; color: #1e293b; }
.mensagem-body strong { color: #000; }

#modal-comunicacao .modal-confirmacao-conteudo { max-height: 90vh; overflow-y: auto; }
#modal-comunicacao .modal-confirmacao-acoes { justify-content: flex-end; }
#modal-comunicacao .form-group { text-align: left; }
#modal-comunicacao textarea, #modal-comunicacao input[type="text"] { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid var(--cor-borda-subtil); font-family: 'Inter', sans-serif; font-size: 0.95rem; }

@media (max-width: 900px) {
    .detalhes-grid { grid-template-columns: 1fr; }
    .coluna-acoes { position: static; top: auto; }
    .order-status-top {
        width: auto;
        margin-left: 0;
    }
}

/* === pages/_gestor-emails.css === */
/* public/css/pages/_gestor-emails.css */

/* ── Fundo da página (Branco conforme pedido) ── */
.admin-main-content {
    background-color: #ffffff;
}

/* ── Cabeçalho e Introdução ── */
.gestor-emails-intro {
    width: 100%;
    margin-bottom: 0;
    padding-left: 64px; /* Alinha o texto com o início do título (após a seta) */
}

.gestor-emails-intro p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ── Grelha principal ── */
.gestor-emails-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

/* ── Títulos de Secção ── */
.template-grupo-titulo, .placeholder-global-titulo {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1e293b; /* Título mais escuro para destaque */
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 24px;
}

.template-grupo-titulo::after, .placeholder-global-titulo::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #e2e8f0;
}

.coluna-templates > .template-grupo-titulo {
    margin-top: 50px;
}

.coluna-templates > .template-grupo-titulo:first-child {
    margin-top: 0;
}

/* ── Coluna lateral de placeholders ── */
.coluna-placeholders .form-card {
    position: sticky;
    top: 100px;
    border: 1px solid #94a3b8; /* Contorno mais escuro para destaque */
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.coluna-placeholders .form-card-body {
    padding: 20px;
}

.coluna-placeholders ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coluna-placeholders li code {
    display: block;
    background-color: #f8fafc;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid #cbd5e1;
    cursor: copy;
    transition: all 0.2s ease;
    color: #1e293b;
}

.coluna-placeholders li code:hover {
    background-color: #f1f5f9;
    border-color: #1e293b;
    color: #000000;
    transform: translateX(4px);
}

.placeholder-seccao-titulo {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin: 24px 0 10px 0;
}

/* ── Acordeão de Templates ── */
.template-accordion-item {
    border: 1px solid #94a3b8; /* Contorno mais escuro para destaque no fundo branco */
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
    background-color: #fff;
}

.template-accordion-item:hover {
    border-color: #1e293b;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.06);
}

.template-accordion-item.ativo {
    border-color: #000000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.template-accordion-header {
    padding: 20px 24px;
    cursor: pointer;
    background-color: #fff;
    user-select: none;
}

.template-accordion-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.template-accordion-header-title h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #000000;
    font-weight: 700;
}

.template-accordion-toggle-icon {
    color: #64748b;
    transition: transform 0.3s ease;
}

.template-accordion-item.ativo .template-accordion-toggle-icon {
    transform: rotate(90deg);
    color: #000;
}

.template-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 10px;
    padding-left: 28px;
    font-size: 0.8rem;
    color: #475569;
}

.template-meta-strip span {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    font-weight: 500;
}

.template-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 0;
    background-color: #ffffff;
    border-top: 1px solid transparent;
}

.template-accordion-item.ativo .template-accordion-content {
    opacity: 1;
    border-top-color: #e2e8f0;
}

.template-accordion-inner {
    padding: 24px;
}

.template-descricao-inline {
    font-size: 0.88rem;
    color: #1e293b;
    background: #f8fafc;
    border-left: 4px solid #1e293b;
    padding: 14px 18px;
    margin: 0 0 24px 0;
    border-radius: 0 8px 8px 0;
    text-align: left;
}

/* ── Formulário ── */
.form-template-email label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
}

.form-template-email input[type="text"],
.form-template-email textarea {
    border: 1px solid #94a3b8;
    background: #fff;
    font-weight: 400;
}

.form-template-email input[type="text"]:focus,
.form-template-email textarea:focus {
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

/* ── Responsividade ── */
@media (max-width: 992px) {
    .gestor-emails-intro {
        padding-left: 0;
    }
    .gestor-emails-grid {
        grid-template-columns: 1fr;
    }
}



/* === pages/_form-produto.css === */
/* public/css/pages/_form-produto.css */

/* ── Estrutura do Formulário ── */
.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 30px;
    align-items: flex-start;
}

/* ── Estilo dos Cards ── */
.form-card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

.form-card-header {
    padding: 20px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.form-card-header h3 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #000;
    display: flex;
    align-items: center;
}

.form-card-body {
    padding: 24px;
}

.full-width-card .form-card-body {
    padding-bottom: 15px;
}

/* ── Grupos de Formulário ── */
.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ── Inputs e Textareas ── */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #000;
    background: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-group textarea {
    line-height: 1.6;
    min-height: 120px;
}

/* ── Galeria de Imagens ── */
.galeria-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    margin-top: 25px;
    padding: 25px;
    background: #fcfcfd;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    min-height: 180px;
}

.preview-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #fff;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.preview-item:hover {
    transform: scale(1.02);
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.preview-item:hover img {
    transform: scale(1.08);
}

.principal-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #000;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 10;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Drag & Drop Sortable ── */
.sortable-ghost {
    opacity: 0.3;
    background: #f1f5f9;
    border: 2px dashed #000 !important;
}

/* Botão de Remover (Caixote do Lixo) - Base */
.btn-remover-atributo,
.remover-preview-btn {
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

/* Variante para a Galeria de Imagens (Posicionamento Absoluto) */
.remover-preview-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #ef4444;
    color: #ffffff;
    border: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    z-index: 10;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.preview-item:hover .remover-preview-btn {
    opacity: 1;
    transform: translateY(0);
}

.remover-preview-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Variante para Atributos e Outros (Relativo/Flex) */
.btn-remover-atributo {
    padding: 8px;
}

.btn-remover-atributo:hover {
    color: #ef4444;
    background: #fee2e2;
    transform: scale(1.1);
}

/* ── Select Customizado (Setas melhoradas) ── */
.select-wrapper {
    position: relative;
}

.select-estilizado {
    appearance: none;
    padding-right: 44px !important;
}

.form-group .select-wrapper select,
.atributos-standard-adder .select-wrapper select {
    min-height: 46px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    font-size: 0.92rem;
    font-weight: 600;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.8px solid #111;
    border-bottom: 1.8px solid #111;
    transform: translateY(-60%) rotate(45deg);
    transform-origin: 60% 60%;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}

.select-wrapper.is-open::after {
    transform: translateY(-35%) rotate(225deg);
}

.select-wrapper:focus-within::after {
    border-color: #000;
}

/* ── Atributos Padrão (Pílulas) ── */
.atributo-bloco-valores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

.atributo-bloco-valores input[type="checkbox"] {
    display: none;
}

.atributo-bloco-valores label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #475569;
    transition: all 0.2s ease;
}

.atributo-bloco-valores input:checked+label,
.atributo-bloco-valores label:has(input:checked) {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* ── Estilos de Blocos de Atributos (Cards) ── */
.atributo-bloco {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    /* Forçar borda pois é um fieldset */
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.atributo-bloco:hover {
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

.atributo-bloco-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.atributo-bloco-header legend {
    font-size: 0.85rem;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    float: none;
    padding: 0;
    margin: 0;
}

.atributo-personalizado-item {
    display: grid;
    grid-template-columns: 220px 1fr auto;
    gap: 20px;
    align-items: center;
}

.input-nome-personalizado,
.input-valores-personalizado {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fdfdfd !important;
}

.input-nome-personalizado:focus,
.input-valores-personalizado:focus {
    background: #fff !important;
    border-color: #000 !important;
}


.atributos-divisor {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

/* ── Gestão de Variações (Premium Look) ── */
.variacoes-controlos {
    background: #fdfdfd;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.variacoes-controlos h4 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #1e293b;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.05em;
}

.variacoes-controlos h4::before {
    content: '1';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 900;
}

.variacao-control-checkbox {
    display: none;
}

.variacoes-controlos label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    margin-right: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.variacoes-controlos label:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    color: #1e293b;
    transform: translateY(-1px);
}

.variacoes-controlos label:has(input:checked),
.variacoes-controlos input:checked+label {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Contentor de Stock Simples (Elegante e Integrado) ── */
#stock-simples-container {
    background: #ffffff;
    padding: 20px 0 40px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
}

#stock-simples-container label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stock-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#stock-simples-container input {
    margin-bottom: 10px;
    width: 180px !important;
    height: 90px !important;
    font-size: 4rem !important;
    font-weight: 200 !important;
    text-align: center !important;
    border: none !important;
    border-bottom: 2px solid #f1f5f9 !important;
    background: transparent !important;
    color: #000 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#stock-simples-container input:focus {
    border-bottom-color: #000 !important;
    outline: none !important;
    box-shadow: none !important;
    transform: scale(1.05);
}

/* Remover setas de input number */
#stock-simples-container input::-webkit-outer-spin-button,
#stock-simples-container input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#stock-simples-container::after {
    content: 'UNIDADES DISPONÍVEIS';
    font-size: 0.7rem;
    font-weight: 800;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 25px;
    transition: color 0.3s ease;
}

#stock-simples-container:focus-within::after {
    color: #64748b;
}


/* ── Tabela de Variações (Design Moderno) ── */
.variacoes-table-wrapper {
    overflow: hidden;
    margin-top: 15px;
}

.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.variacoes-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9rem;
    margin: 0;
}

.variacoes-table th {
    background: #f1f5f9;
    padding: 12px 20px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #94a3b8;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    /* Centrado */
    letter-spacing: 0.05em;
}

.variacoes-table td {
    padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
    /* Centrado */
    color: #1e293b;
    transition: background-color 0.2s ease;
}

.variacoes-table tr:hover td {
    background-color: #fcfcfd;
}

.variacoes-table tr:last-child td {
    border-bottom: none;
}

/* ── Alinhamento de Colunas ── */
.col-atributo {
    font-weight: 700;
    color: #000 !important;
}

.col-stock {
    width: 100px;
    text-align: center !important;
}

.col-sku {
    width: 160px;
}

.col-images {
    width: auto;
    min-width: 350px;
}

.variacoes-table th.col-stock {
    text-align: center !important;
}

/* ── Elementos Internos da Tabela ── */
.variacao-input {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.variacao-input:focus {
    border-color: #000 !important;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.04) !important;
    background-color: #fff !important;
}

.col-stock .variacao-input {
    text-align: center;
    font-weight: 800 !important;
    color: #000 !important;
}

.variacao-imagens-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 2px 0;
}

.variacao-imagem-thumbnail {
    position: relative;
    cursor: pointer;
    width: 64px;
    /* Ajustado para ser visível mas não gigante */
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #f1f5f9;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
}

.variacao-imagem-thumbnail:hover {
    border-color: #cbd5e1;
    transform: scale(1.2);
    /* Zoom mais agressivo ao passar o rato */
    z-index: 10;
}

.variacao-imagem-thumbnail.selecionada {
    border-color: #22c55e;
    border-width: 4px;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.25);
    transform: scale(1.1);
    z-index: 5;
}

.variacao-imagem-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.variacao-imagem-thumbnail input {
    display: none;
}

.sem-imagens-aviso {
    font-size: 0.8rem;
    color: #94a3b8;
    background: #f8fafc;
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
    width: 100%;
    text-align: center;
}

.variacoes-placeholder {
    padding: 40px 20px;
    text-align: center;
    background: #f8fafc;
    border-radius: 20px;
    color: #64748b;
    font-size: 0.95rem;
    border: 2px dashed #e2e8f0;
    margin: 20px 0;
}

.variacoes-placeholder p {
    margin: 0;
    font-weight: 500;
}


/* ── Outros Ajustes ── */
.full-width-card {
    grid-column: 1 / -1;
}

.atributos-standard-adder {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 15px;
    margin-bottom: 25px;
    align-items: stretch;
}

#btn-add-grupo-standard {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

.btn-add-full {
    width: 100%;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 15px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    padding: 30px 0 30px 0;
    border-top: 1px solid #cbd5e1;
}

.form-actions input[type="submit"] {
    padding: 16px 60px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .admin-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Modal do Cropper de Imagens ── */
.modal-cropper {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    align-items: center;
    justify-content: center;
}

.modal-cropper-conteudo {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    width: 90%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

.modal-cropper-conteudo p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: #000;
    text-align: center;
}

.modal-cropper-conteudo .cropper-container {
    width: 100%;
    max-height: 55vh;
    overflow: hidden;
}

.modal-cropper-conteudo #imagemParaCortar {
    display: block;
    max-width: 100%;
}

/* === pages/_mensagens.css === */
/* public/css/pages/_mensagens.css */

.admin-header {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--cor-borda-subtil);
}
.admin-header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}
.admin-header-left h2 {
    margin: 0;
    text-align: left;
}
.admin-header-right .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mensagens-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.mensagens-coluna {
    background-color: #f9fafb;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: var(--border-radius-medio);
    display: flex;
    flex-direction: column;
    min-height: 400px; /* Garante altura mínima */
}

.coluna-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--cor-borda-subtil);
}

.coluna-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.coluna-header .contador {
    background-color: var(--cor-borda-subtil);
    color: var(--cor-cinza-medio);
    font-weight: 600;
    font-size: 0.8rem;
    padding: 3px 8px;
    border-radius: 12px;
}

.coluna-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 0 0 var(--border-radius-medio) var(--border-radius-medio);
    transition: background-color 0.2s ease, outline-color 0.2s ease;
}

.coluna-body.drag-over {
    background-color: #eef6ff;
    outline: 2px dashed #93c5fd;
    outline-offset: -10px;
}

.mensagem-card {
    background-color: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 8px;
    box-shadow: var(--sombra-subtil);
    display: flex;
    flex-direction: column;
    cursor: grab;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mensagem-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.mensagem-card.a-arrastar {
    opacity: 0.45;
    cursor: grabbing;
    transform: rotate(1deg) scale(0.99);
}

.mensagem-card.respondida {
    background-color: #f8f9fa;
    opacity: 0.8;
}
.mensagem-card.respondida:hover {
    opacity: 1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.remetente {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.remetente strong {
    font-weight: 600;
    color: var(--cor-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.remetente a, .remetente span {
    font-size: 0.85rem;
    color: var(--cor-cinza-medio);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.remetente a:hover {
    text-decoration: underline;
}

.data {
    font-size: 0.8rem;
    color: var(--cor-cinza-medio);
    flex-shrink: 0;
    margin-left: 15px;
}

.card-body {
    padding: 15px;
    flex-grow: 1;
}
.card-body p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: left;
    color: var(--cor-texto);
    word-break: break-word;
}

.card-footer {
    padding: 15px;
    border-top: 1px solid #f0f0f0;
    background-color: #fdfdfd;
    display: flex;
    justify-content: space-between; /* Alinha botões nas extremidades */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.card-footer .button, .card-footer .delete-btn {
    padding: 6px 15px;
    font-size: 0.75rem;
}

.sem-mensagens {
    text-align: center;
    color: var(--cor-cinza-medio);
    padding: 30px 15px;
}

/* --- Correções para Mobile --- */
@media (max-width: 900px) {
    .mensagens-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .admin-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* === pages/_uso-armazenamento.css === */

:root {
    --storage-bg: #f8fafc;
    --storage-accent: #1c1c1c;
    --storage-border: #eef2f6;
    --storage-text: #1e293b;
    --storage-muted: #64748b;
}

.storage-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 60px;
}

.storage-total-card {
    background: #fff;
    border: 1px solid var(--storage-border);
    border-radius: 16px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}

.total-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--storage-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.total-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--storage-accent);
    margin-bottom: 30px;
    letter-spacing: -0.02em;
}

.progress-bar-container {
    height: 12px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 15px;
}

.progress-bar {
    height: 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.success { background: #10b981; }
.progress-bar.warning { background: #f59e0b; }
.progress-bar.danger { background: #ef4444; }

.progress-info {
    font-size: 0.85rem;
    color: var(--storage-muted);
}

.storage-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.breakdown-item {
    background: #fff;
    border: 1px solid var(--storage-border);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.breakdown-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.breakdown-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.breakdown-icon.images { background: #ecfdf5; color: #10b981; }
.breakdown-icon.code { background: #eff6ff; color: #3b82f6; }
.breakdown-icon.assets { background: #fef2f2; color: #ef4444; }

.breakdown-info {
    flex-grow: 1;
}

.breakdown-info-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.breakdown-info-header .label {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--storage-text);
}

.breakdown-info-header .size {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--storage-muted);
}

.breakdown-bar-container {
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-bar {
    height: 100%;
    border-radius: 3px;
}

.breakdown-bar.images { background: #10b981; }
.breakdown-bar.code { background: #3b82f6; }
.breakdown-bar.assets { background: #ef4444; }

.dashboard-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--storage-accent);
    margin: 30px 0 15px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}


/* === pages/_guia-tamanhos.css === */
/* public/css/pages/_guia-tamanhos.css */
@keyframes fadeInPage {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.guias-premium-content {
    animation: fadeInPage 0.8s ease-out;
}


.guias-container-premium {
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid var(--cor-borda-subtil);
    overflow: hidden;
    margin-top: 0;
}

.guias-list-header {
    padding: 25px 30px;
    background: #fcfcfc;
    border-bottom: 1px solid var(--cor-borda-subtil);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.search-filter-wrapper {
    position: relative;
    width: 300px;
}

.search-filter-wrapper input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border-radius: 50px;
    border: 1px solid var(--cor-borda-subtil);
    transition: all 0.3s;
}

.search-filter-wrapper input:focus {
    border-color: var(--cor-texto);
    box-shadow: 0 0 0 4px rgba(0,0,0,0.03);
    outline: none;
}

.search-filter-wrapper svg {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* --- Estilos para a Listagem (Cards) --- */
.guias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
}

.guia-card {
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.guia-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: #eee;
}

.guia-card-content {
    margin-bottom: 25px;
}

.guia-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.guia-card-icon {
    width: 45px;
    height: 45px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    flex-shrink: 0;
}

.guia-card-title {
    margin: 0;
}

.guia-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

/* Novos botões de ação estilo premium */
.btn-action-premium {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    background-color: #f8fafc;
    display: inline-flex;
}

.btn-action-premium:hover {
    transform: scale(1.1);
    background-color: #f1f5f9;
}

.btn-preview-guia-premium {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.btn-edit-guia-premium {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
}

.btn-delete-guia-premium {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

.btn-delete-guia-premium:hover {
    background-color: #fff1f2;
}

/* --- Estilos para o novo Gerador de Tabela Visual --- */
/* --- Estilos para o Editor de Tabela Ultra-Clean --- */
.tabela-visual-editor {
    background-color: #fff;
    border: 1px solid #eef2f6;
    border-radius: 20px;
    margin: 25px 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #fcfdfe;
    border-bottom: 1px solid #f1f5f9;
}

.toolbar-section {
    display: flex;
    gap: 12px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 20px;
}

.control-group:not(:last-child) {
    border-right: 1px solid #f1f5f9;
}

.control-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.control-buttons {
    display: flex;
    background: #f8fafc;
    padding: 4px;
    border-radius: 10px;
    gap: 4px;
}

.btn-ctrl {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid transparent;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    background: #fff;
    color: var(--cor-texto);
    border-color: #e2e8f0;
}

.btn-ctrl:hover {
    background: var(--cor-texto);
    color: #fff;
    border-color: var(--cor-texto);
}

.btn-ctrl.remove:hover {
    color: #ef4444;
    background: #fff1f2;
    border-color: #fee2e2;
}

.editor-btn-compact {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.editor-btn-compact:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

.editor-btn-compact.add {
    color: var(--cor-texto);
    border-color: var(--cor-texto);
}

.editor-btn-compact svg {
    width: 16px;
    height: 16px;
}

#gerador-visual-wrapper {
    padding: 25px;
    background: #fff;
    overflow-x: auto;
}

#tabela-visual-gerada {
    width: 100%;
    border-collapse: collapse;
}

#tabela-visual-gerada th,
#tabela-visual-gerada td {
    padding: 12px 15px;
    border: 1px solid #f1f5f9;
    text-align: center;
    font-size: 0.95rem;
    color: #334155;
    transition: background 0.2s;
}

#tabela-visual-gerada th {
    background: #f8fafc;
    font-weight: 700;
    color: #1e293b;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

#tabela-visual-gerada [contenteditable]:focus {
    outline: none;
    background: #f1f5f9;
    box-shadow: inset 0 0 0 2px #e2e8f0;
}

/* --- INÍCIO DA CORREÇÃO RESPONSIVA --- */
@media (max-width: 600px) {
    .guias-grid {
        grid-template-columns: 1fr;
    }
    .editor-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }
    .toolbar-section {
        justify-content: center;
    }
}
/* --- FIM DA CORREÇÃO RESPONSIVA --- */
/* === pages/_editar-admin.css === */
/* public/css/pages/_editar-admin.css */

.profile-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: flex-start;
    margin-top: 20px;
}

@media (max-width: 992px) {
    .profile-edit-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Styling */
.form-card {
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    margin-bottom: 25px;
}

.form-card-header {
    background: #f8fafc;
    padding: 20px 25px;
    border-bottom: 1px solid var(--cor-borda-subtil);
    display: flex;
    align-items: center;
    gap: 15px;
}

.form-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #000;
}

.card-icon {
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.form-card-body {
    padding: 25px;
}

/* Helper Text */
.helper-text {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
    display: block;
}

.helper-text.warning {
    color: #b45309;
    background: #fffbeb;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #fef3c7;
    margin-top: 10px;
}

/* Actions */
.form-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 10px;
    padding: 10px 0;
}

.button-primary {
    background: #000;
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.button-primary:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.button-secondary {
    background: #fff;
    color: #64748b;
    border: 1px solid var(--cor-borda-subtil);
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s;
}

.button-secondary:hover {
    background: #f8fafc;
    color: #000;
    border-color: #000;
}

/* Specific Select Styling */
.select-estilizado {
    cursor: pointer;
}

.select-estilizado.disabled {
    background-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    cursor: not-allowed;
}

/* === pages/_login_animation.css === */
/* public/css/pages/_login_animation.css */
/* Estilos para o "Bonequinho" (Urso) animado do login */

.login-bear-container {
    --bear-face-clr: #9c5938;
    --bear-ear-clr: #8c4c2d;
    --bear-eye-clr: #2b1d14;
    --bear-snout-clr: #e7a884;
    --bear-snout-dark: #cc845e;
    --white: #fff;
    --input-focus-clr: var(--cor-texto);
    
    height: 180px;
    width: 100%;
    margin: 0 auto 10px;
    position: relative;
    overflow: hidden;
}

.bear {
    width: 200px;
    height: 100px;
    background: var(--bear-face-clr);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease-out;
    will-change: transform, bottom; /* Otimização de performance */
}

.bear::before,
.bear::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background: var(--bear-ear-clr);
    border-radius: 50%;
    position: absolute;
    top: -15px;
}
.bear::before { left: 20px; }
.bear::after { right: 20px; }

.bear-face {
    width: 100%;
    height: 100%;
    position: relative;
}

.bear-eye {
    width: 30px;
    height: 30px;
    background: var(--white);
    border-radius: 50%;
    position: absolute;
    top: 30px;
    overflow: hidden;
}
.bear-eye.left { left: 45px; }
.bear-eye.right { right: 45px; }

.bear-pupil {
    width: 20px;
    height: 20px;
    background: var(--bear-eye-clr);
    border-radius: 50%;
    position: absolute;
    top: 5px;
    left: 5px;
    transition: transform 0.1s ease-out; /* Transição mais rápida para seguir o olhar */
    will-change: transform; /* Otimização de performance */
}

.bear-snout {
    width: 60px;
    height: 40px;
    background: var(--bear-snout-clr);
    border-radius: 50%;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.bear-nose {
    width: 20px;
    height: 15px;
    background: var(--bear-eye-clr);
    border-radius: 40% 40% 50% 50%;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.bear-mouth {
    width: 4px;
    height: 8px;
    background: var(--bear-snout-dark);
    border-radius: 0 0 50% 50%;
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.bear-arm {
    width: 100px;
    height: 80px;
    background: var(--bear-face-clr);
    border: 5px solid var(--bear-ear-clr);
    border-radius: 50% 50% 30% 30%;
    position: absolute;
    bottom: -60px;
    z-index: 10;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), bottom 0.3s ease-out;
    will-change: transform, bottom; /* Otimização de performance */
}

.bear-arm.left {
    left: -40px;
    transform-origin: 100% 30%;
    transform: rotate(60deg);
}

.bear-arm.right {
    right: -40px;
    transform-origin: 0 30%;
    transform: rotate(-60deg);
}

/* --- ANIMAÇÕES E ESTADOS --- */

/* NOVO: Estado "a digitar" */
.login-bear-container.typing .bear {
    bottom: 5px;
}
.login-bear-container.typing .bear-pupil {
    transform: translate(0px, 8px); /* Olha para baixo */
}
.login-bear-container.typing .bear-arm {
    bottom: 10px;
    transform: rotate(15deg) scale(0.9);
}
.login-bear-container.typing .bear-arm.right {
    transform: rotate(-15deg) scale(0.9);
}


/* Estado Foco no Username (Tapar olhos) */
.login-bear-container.foco-username .bear-arm {
    transform: rotate(0deg);
    bottom: 5px;
}
.login-bear-container.foco-username .bear-arm.left { left: 0; }
.login-bear-container.foco-username .bear-arm.right { right: 0; }

/* Estado Foco na Password (Espreitar) */
.login-bear-container.foco-password .bear-arm {
    bottom: -30px;
    transform: scale(1.1);
}
.login-bear-container.foco-password .bear-arm.left {
    left: -40px;
    transform: rotate(130deg);
}
.login-bear-container.foco-password .bear-arm.right {
    right: -40px;
    transform: rotate(-130deg);
}
.login-bear-container.foco-password .bear {
    bottom: -10px;
}

/* Estado Hover no Botão */
.login-bear-container.hover-button .bear-arm {
    bottom: -30px;
}
.login-bear-container.hover-button .bear-arm.left {
    left: -40px;
    transform: rotate(100deg);
}
.login-bear-container.hover-button .bear-arm.right {
    right: -40px;
    transform: rotate(-100deg);
}
.login-bear-container.hover-button .bear {
    bottom: -10px;
}

/* Estado de Erro no Login */
.login-bear-container.login-error .bear {
    animation: shake 0.5s linear;
}
.login-bear-container.login-error .bear-arm {
    bottom: -30px;
}
.login-bear-container.login-error .bear-arm.left {
    left: -40px;
    transform: rotate(130deg);
}
.login-bear-container.login-error .bear-arm.right {
    right: -40px;
    transform: rotate(-130deg);
}
.login-bear-container.login-error .bear {
    bottom: -10px;
}

@keyframes shake {
    0% { transform: translateX(-50%) rotate(0deg); }
    20% { transform: translateX(-50%) rotate(-15deg); }
    40% { transform: translateX(-50%) rotate(10deg); }
    60% { transform: translateX(-50%) rotate(-10deg); }
    80% { transform: translateX(-50%) rotate(5deg); }
    100% { transform: translateX(-50%) rotate(0deg); }
}
/* === pages/_login-logs.css === */
:root {
    --primary: #1e293b;
    --success: #10b981;
    --danger:  #f43f5e;
}


.user-cell { display: flex; align-items: center; justify-content: center; gap: 12px; }
.user-avatar {
    width: 38px; height: 38px; border-radius: 12px; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    color: var(--primary); font-weight: 800; font-size: .9rem;
}

.device-info { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.device-info .browser { font-weight: 600; color: #1e293b; }
.device-info .os      { font-size: .75rem; color: #94a3b8; }

.ip-pill {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: .8rem; color: #64748b; background: #f8fafc;
    padding: 4px 10px; border-radius: 6px; border: 1px solid #e2e8f0;
}

.time-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; }
.time-cell .date { font-weight: 600; color: #1e293b; font-size: 0.85rem; }
.time-cell .rel  { font-size: .7rem; color: #94a3b8; }

.motivo {
    font-size: .75rem; color: var(--danger); font-weight: 600;
    margin-top: 4px; display: block;
}

/* Pagination */
.logs-paginacao {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 32px;
}
.logs-paginacao a, .logs-paginacao span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; border-radius: 12px; font-size: .9rem; font-weight: 700;
    text-decoration: none; color: #64748b; border: 1px solid #e2e8f0; background: #fff;
    transition: all 0.2s ease;
}
.logs-paginacao a:hover {
    border-color: var(--primary); color: var(--primary); transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.logs-paginacao span.atual {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 8px 20px -6px rgba(30, 41, 59, 0.4);
}


@media (max-width: 768px) {
    .user-avatar { width: 32px; height: 32px; font-size: 0.8rem; }
    .ip-pill { font-size: 0.75rem; padding: 2px 8px; }
}

/* sel-mode coberto pela regra genérica em _admin-ui.css */

/* === pages/_portes.css === */
:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --bg-card: #ffffff;
    --bg-header: #f8fafc;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-color: #e2e8f0;
    --danger-color: #ef4444;
}


.autosave-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    transition: all 0.3s;
}

.autosave-status .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
}

.autosave-status.saving {
    color: var(--primary-color);
    background: #eef2ff;
    border-color: #e0e7ff;
}

.autosave-status.saving .dot {
    background: var(--primary-color);
    animation: pulseAutoSave 1s infinite;
}

@keyframes pulseAutoSave {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.page-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.toolbar-shipping {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.toolbar-shipping h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.btn-primary-plus {
    background: #000;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.btn-primary-plus:hover {
    background: #333;
    color: white;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.btn-primary-plus svg {
    transition: transform 0.3s;
}

.btn-primary-plus:hover svg {
    transform: rotate(90deg);
}

.paises-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 24px;
    padding-bottom: 50px;
}

.country-card {
    background: var(--bg-card);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardEntry 0.4s ease-out backwards;
}

@keyframes cardEntry {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.country-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: var(--primary-color);
}

.country-header {
    padding: 20px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.country-title {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.iso-badge {
    background: var(--text-primary);
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}


.country-body {
    padding: 20px;
    flex-grow: 1;
}

.weight-rows-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.weight-row {
    background: #f8fafc;
    padding: 12px;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    border: 1px solid transparent;
    transition: border-color 0.2s;
}

.weight-row:hover {
    border-color: #cbd5e1;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.input-group label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.input-group input {
    width: 100%;
    padding: 8px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}


.country-footer {
    padding: 16px 20px;
    background: #ffffff;
    border-top: 1px dashed var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.interval-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.btn-add-row {
    background: #f1f5f9;
    color: var(--text-primary);
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-add-row:hover {
    background: var(--primary-color);
    color: white;
}

/* ── MODAL ── */
.modal-overlay-shipping {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center;
    z-index: 2000; padding: 20px;
    animation: fadeInModal 0.2s ease;
}
@keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }

.modal-content-shipping {
    background: #fff; width: 100%; max-width: 500px;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    animation: slideUpModal 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes slideUpModal { from { transform: translateY(30px); } to { transform: translateY(0); } }

.modal-header-shipping {
    padding: 24px 30px; border-bottom: 1px solid #f1f5f9;
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc;
}
.modal-header-shipping h3 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #0f172a; }

.btn-close-modal {
    background: #f1f5f9; border: none; font-size: 1.5rem; width: 36px; height: 36px;
    border-radius: 10px; cursor: pointer; color: #64748b;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.btn-close-modal:hover { background: #e2e8f0; color: #0f172a; }

.modal-body-shipping { padding: 30px; }

.search-wrap {
    position: relative; margin-bottom: 20px;
}
.search-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.search-wrap input {
    width: 100%; padding: 14px 14px 14px 46px; border: 2px solid #f1f5f9;
    border-radius: 12px; font-size: 0.95rem; font-weight: 600;
    transition: all 0.2s; background: #f8fafc;
}
.search-wrap input:focus { outline: none; border-color: var(--primary-color); background: #fff; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1); }

.lista-paises-scroll {
    max-height: 350px; overflow-y: auto;
    padding-right: 5px;
}
.lista-paises-scroll::-webkit-scrollbar { width: 6px; }
.lista-paises-scroll::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }

.pais-item-select {
    padding: 12px 16px; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; transition: all 0.2s; margin-bottom: 4px;
    font-weight: 600; color: #334155;
}
.pais-item-select:hover { background: #f1f5f9; color: var(--primary-color); padding-left: 20px; }
.pais-item-select .iso { font-size: 0.75rem; color: #94a3b8; font-weight: 700; background: #fff; border: 1px solid #e2e8f0; padding: 2px 6px; border-radius: 4px; }

@media (max-width: 640px) {
    .paises-grid { grid-template-columns: 1fr; }
    .weight-row { grid-template-columns: 1fr 1fr; }
    .weight-row .input-group:nth-child(3) { grid-column: span 2; }
}

/* === pages/_paleta-cores.css === */
.palette-page {
    width: 100%;
}

.palette-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr);
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto 48px;
    align-items: start;
}

.palette-card,
.palette-preview-card {
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 20px;
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 18px 50px -38px rgba(28, 28, 28, .32);
}

.palette-card-heading,
.palette-preview-heading,
.palette-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.palette-card h3,
.palette-preview-card h3 {
    margin: 3px 0 0;
    font-size: 1.35rem;
    color: var(--cor-texto);
}

.palette-eyebrow {
    color: #8a857d;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.palette-current-swatch {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 16px;
    border: 5px solid #fff;
    box-shadow: 0 0 0 1px #e5e5e5, 0 8px 22px rgba(0, 0, 0, .1);
}

.palette-description {
    margin: 22px 0 28px;
    max-width: 620px;
    color: #6f6b65;
    line-height: 1.7;
}

.palette-fields {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 18px;
    align-items: end;
}

.palette-picker-label,
.palette-hex-label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    color: #4a4742;
    font-size: .78rem;
    font-weight: 700;
}

.palette-picker-label input[type="color"] {
    width: 100%;
    height: 52px;
    padding: 4px;
    border: 1px solid #dedbd5;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.palette-picker-label input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}

.palette-hex-label input {
    height: 52px;
    padding: 0 16px;
    border: 1px solid #dedbd5;
    border-radius: 12px;
    background: #fff;
    color: #1c1c1c;
    font: 700 1rem/1 monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.palette-picker-label input:focus,
.palette-hex-label input:focus {
    outline: 2px solid rgba(176, 137, 104, .25);
    outline-offset: 2px;
    border-color: #b08968;
}

.palette-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* Cor de destaque (accent) */
.palette-accent-heading {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid #e5e5e5;
}
.palette-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 16px;
    font-size: .92rem;
    font-weight: 600;
    color: #1c1c1c;
    cursor: pointer;
    user-select: none;
}
.palette-toggle input {
    width: 18px;
    height: 18px;
    accent-color: #b08968;
    cursor: pointer;
}
#accent-fields.is-auto {
    opacity: .5;
    pointer-events: none;
}

.palette-preview {
    --palette-preview-bg: #faf8f4;
    overflow: hidden;
    margin-top: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    background: var(--palette-preview-bg);
}

.palette-preview-header {
    height: 38px;
    background: #fff;
    border-bottom: 1px solid #e8e8e8;
}

.palette-preview-content {
    padding: 30px 24px 34px;
}

.palette-preview-title {
    width: 42%;
    height: 11px;
    margin-bottom: 13px;
    border-radius: 99px;
    background: #2b2927;
}

.palette-preview-line {
    width: 54%;
    height: 6px;
    margin-top: 8px;
    border-radius: 99px;
    background: rgba(74, 71, 66, .25);
}

.palette-preview-line-long {
    width: 72%;
}

.palette-preview-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 25px;
}

.palette-preview-cards span {
    height: 58px;
    border: 1px solid #ece6dc;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 18px -15px rgba(0, 0, 0, .35);
}

.palette-preview-footer {
    height: 44px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
}

.palette-value-row {
    margin-top: 18px;
    color: #77716a;
    font-size: .8rem;
}

.palette-value-row strong {
    color: #1c1c1c;
    font-family: monospace;
    font-size: .9rem;
}

.palette-alert {
    max-width: 1080px;
    margin: 0 auto 20px;
    padding: 13px 16px;
    border: 1px solid;
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 600;
}

.palette-alert-success {
    color: #166534;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.palette-alert-error {
    color: #991b1b;
    border-color: #fecaca;
    background: #fef2f2;
}

@media (max-width: 850px) {
    .palette-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .palette-fields {
        grid-template-columns: 1fr;
    }

    .palette-actions .button {
        width: 100%;
        justify-content: center;
    }
}

/* === pages/_admin-produtos.css === */

/* ── Toolbar ── */
.prod-toolbar {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    flex-wrap: wrap;
}
.prod-toolbar-left  {
    display: flex;
    align-items: center;
    gap: 12px;
}
.prod-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.btn-sel-mode {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background-color: #fff !important;
    color: var(--cor-texto) !important;
    border-color: var(--cor-texto) !important;
    white-space: nowrap;
    transition: all .2s ease;
    height: 44px;
    box-sizing: border-box;
}
.prod-toolbar .button {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px;
    box-sizing: border-box;
}
.btn-sel-mode:hover { 
    background-color: var(--cor-texto) !important; 
    color: #fff !important;
}
.btn-sel-mode.active { 
    border-color: #3b82f6 !important; 
    background-color: #eff6ff !important; 
    color: #1d4ed8 !important; 
}
.btn-sel-mode svg { transition: transform .2s; }

/* ── Page Specific ── */
.sel-mode .tabela-produtos tbody tr:hover { background: #f5f9ff; }
.sel-mode .tabela-produtos tbody tr.selecionado { background: #dbeafe; }

.prod-foto-wrap img {
    display: block;
    border-radius: 6px;
    width: 46px; height: 46px;
    object-fit: cover;
    transition: opacity .15s;
}

/* Hide single-row actions in select mode */
.sel-mode .acoes-tabela { pointer-events: none; opacity: .25; }

/* ── Sort Select ── */
.sort-select-wrapper {
    width: auto;
    min-width: 190px;
}

.sort-select {
    height: 44px;
    min-height: 44px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    background: #fff;
    background-image: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--cor-texto);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, box-shadow .2s;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}
.sort-select:hover { border-color: #94a3b8; }
.sort-select:focus { outline: none; border-color: #111; box-shadow: 0 0 0 4px rgba(17,24,39,.06); }



/* === pages/_galeria-imagens.css === */

/* ── Layout ── */
.gal-page { max-width: 1280px; margin: 0 auto; padding: 0 0 60px; }

/* ── Page header ── */
.gal-ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.gal-ph-left h2 { margin: 0 0 3px; font-size: 1.4rem; font-weight: 700; color: var(--cor-texto); }
.gal-ph-left p  { margin: 0; font-size: .85rem; color: var(--cor-cinza-medio); }

/* ── Stat pills ── */
.gal-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.gal-stat {
    display: flex; align-items: center; gap: 8px;
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: .82rem;
    box-shadow: var(--sombra-subtil);
}
.gal-stat-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gal-stat-icon svg { width: 14px; height: 14px; }
.gal-stat-icon--imgs   { background: #eff6ff; color: #3b82f6; }
.gal-stat-icon--size   { background: #f0fdf4; color: #16a34a; }
.gal-stat-icon--ghost  { background: #fef2f2; color: #ef4444; }
.gal-stat-text small   { display: block; font-size: .68rem; color: #999; line-height: 1; margin-bottom: 1px; }
.gal-stat-text strong  { display: block; font-size: .88rem; font-weight: 700; color: var(--cor-texto); line-height: 1.1; }

/* ── Toolbar ── */
.gal-toolbar {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--cor-borda-subtil);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 22px;
    box-shadow: var(--sombra-subtil);
}

.gal-tabs { display: flex; background: #f3f4f6; border-radius: 7px; padding: 3px; gap: 2px; }
.gal-tab {
    border: none; background: none; border-radius: 5px;
    padding: 6px 16px; font-size: .82rem; font-weight: 600;
    color: #666; cursor: pointer; transition: all .15s;
    font-family: 'Inter', sans-serif;
}
.gal-tab.active { background: #fff; color: var(--cor-texto); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.gal-tab:disabled { opacity: .45; cursor: default; }

.gal-spacer { flex: 1; }

.gal-btn-scan {
    display: inline-flex; align-items: center; gap: 7px;
    background: #7c3aed; color: #fff;
    border: none; border-radius: var(--border-radius-grande);
    padding: 9px 20px; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: background .15s;
    font-family: 'Inter', sans-serif;
}
.gal-btn-scan:hover:not(:disabled) { background: #6d28d9; }
.gal-btn-scan:disabled { opacity: .55; cursor: not-allowed; }

.gal-btn-del-all {
    display: none; align-items: center; gap: 7px;
    background: #dc2626; color: #fff;
    border: none; border-radius: var(--border-radius-grande);
    padding: 9px 20px; font-size: .85rem; font-weight: 600;
    cursor: pointer; transition: background .15s;
    font-family: 'Inter', sans-serif;
}
.gal-btn-del-all.show { display: inline-flex; }
.gal-btn-del-all:hover { background: #b91c1c; }

/* ── Result banner ── */
.gal-banner {
    display: none; align-items: center; gap: 10px;
    padding: 12px 16px; border-radius: 8px;
    font-size: .85rem; margin-bottom: 20px;
    border: 1px solid;
}
.gal-banner.show { display: flex; }
.gal-banner--ok     { background: #f0fdf4; border-color: #86efac; color: #166534; }
.gal-banner--warn   { background: #fefce8; border-color: #fde047; color: #713f12; }
.gal-banner svg     { flex-shrink: 0; }

/* ── Grid ── */
.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

/* ── Card ── */
.gal-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    background: #f3f4f6;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    transition: box-shadow .2s, transform .2s;
}
.gal-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.14); transform: translateY(-2px); }
.gal-card.hidden-card { display: none; opacity: 0; transform: scale(0.9); }

.gal-card img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.gal-card:hover img { transform: scale(1.06); }

/* hover overlay */
.gal-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 35%, rgba(0,0,0,.75) 100%);
    opacity: 0; transition: opacity .2s;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 10px;
    pointer-events: none;
}
.gal-card:hover .gal-overlay { opacity: 1; }
.gal-overlay-nome { font-size: .68rem; color: #fff; word-break: break-all; line-height: 1.3; font-weight: 500; }
.gal-overlay-size { font-size: .63rem; color: rgba(255,255,255,.7); margin-top: 2px; }

/* ghost state */
.gal-card.fantasma { cursor: default; }
.gal-card.fantasma img { filter: brightness(.85); }
.gal-ghost-overlay {
    position: absolute; inset: 0;
    background: rgba(220, 38, 38, .18);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.gal-card.fantasma .gal-ghost-overlay { display: flex; }
.gal-ghost-label {
    background: #dc2626; color: #fff;
    font-size: .65rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 3px 9px; border-radius: 20px;
}
.gal-ghost-del {
    background: rgba(0,0,0,.55); color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 6px; padding: 6px 12px;
    font-size: .75rem; font-weight: 600;
    cursor: pointer; transition: background .15s;
    display: flex; align-items: center; gap: 5px;
    font-family: 'Inter', sans-serif;
}
.gal-ghost-del:hover { background: rgba(220,38,38,.9); border-color: transparent; }

.gal-empty {
    grid-column: 1/-1; text-align: center;
    padding: 80px 20px; color: var(--cor-cinza-medio);
    font-size: .95rem;
}

/* ── Lightbox ── */
.gal-lb {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.92); z-index: 9999;
    align-items: center; justify-content: center;
    padding: 20px;
}
.gal-lb.open { display: flex; }
.gal-lb-inner {
    position: relative; max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.gal-lb-inner img {
    max-width: 100%; max-height: calc(90vh - 60px);
    border-radius: 8px; display: block;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.gal-lb-info { color: rgba(255,255,255,.7); font-size: .8rem; text-align: center; }
.gal-lb-close {
    position: fixed; top: 18px; right: 22px;
    background: none; border: none; color: #fff; font-size: 2rem;
    cursor: pointer; line-height: 1; opacity: .7; transition: opacity .15s;
    font-family: sans-serif;
}
.gal-lb-close:hover { opacity: 1; }

/* ── Spinner ── */
.gal-spin {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gal-rot .65s linear infinite;
    display: inline-block; vertical-align: middle;
}
@keyframes gal-rot { to { transform: rotate(360deg); } }

/* ── Responsividade ── */
@media (max-width: 992px) {
    .gal-page { padding: 0 15px 40px; }
    .gal-ph { align-items: stretch; flex-direction: column; gap: 15px; }
    .gal-stats { width: 100%; justify-content: flex-start; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gal-stat { flex: 1; min-width: 0; }
}

@media (max-width: 768px) {
    .gal-toolbar { 
        flex-direction: column; 
        align-items: stretch; 
        padding: 10px;
        gap: 15px;
    }

    .gal-spacer { display: none; }
    
    .gal-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 5px;
        gap: 5px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        background: #f1f5f9; /* Um pouco mais escuro para contraste */
    }
    
    .gal-tabs::-webkit-scrollbar { display: none; }
    
    .gal-tab {
        white-space: nowrap;
        padding: 10px 20px; /* Aumentar área de toque */
        flex: 1 0 auto; /* Não deixa encolher e divide espaço se houver */
        text-align: center;
        font-size: 0.85rem;
    }

    .gal-tab.active {
        background: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .gal-btn-scan, .gal-btn-del-all {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }

    .gal-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }

    .gal-overlay-nome { font-size: 0.6rem; }
    
    .gal-lb-inner { max-width: 95vw; }
    .gal-lb-info { font-size: 0.7rem; }
}

@media (max-width: 480px) {
    .gal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gal-stat {
        padding: 6px 10px;
    }
    
    .gal-stat-text strong { font-size: 0.75rem; }
    .gal-stat-text small { font-size: 0.6rem; }
}


/* === pages/_gerir_categorias.css === */
/* Gerir Categorias */
.gc-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 60px;
}

.admin-page-header .btn-primary {
    margin-left: auto;
}

.gc-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gc-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.gc-item:hover {
    border-color: #e2e8f0;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

.gc-foto {
    position: relative;
    width: 100px;
    height: 80px;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f5f9;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.gc-foto:hover {
    transform: scale(1.05);
}

.gc-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gc-foto-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #f8fafc;
}

.gc-foto-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.gc-foto:hover .gc-foto-overlay {
    opacity: 1;
}

.gc-foto-overlay span {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gc-foto.uploading::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(255, 255, 255, 0.7);
}

.gc-foto.uploading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e2e8f0;
    border-top-color: #000;
    border-radius: 50%;
    animation: gc-spin 0.6s linear infinite;
}

@keyframes gc-spin {
    to { transform: rotate(360deg); }
}

.gc-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.gc-nome-input {
    width: 100%;
    max-width: 280px;
    margin-left: -12px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #0f172a;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.gc-nome-input:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.gc-nome-input:focus {
    outline: none;
    background: #fff;
    border-color: #000;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
}

.gc-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gc-meta .toggle-visiveis {
    gap: 0;
}

.gc-meta .toggle-track {
    width: 34px !important;
    height: 20px !important;
}

.gc-meta .toggle-thumb {
    top: 3px !important;
    left: 3px !important;
    width: 14px !important;
    height: 14px !important;
}

.gc-meta input:checked ~ .toggle-track .toggle-thumb {
    transform: translateX(14px) !important;
}

.gc-tag {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gc-tag.visivel {
    background: #dcfce7;
    color: #15803d;
}

.gc-tag.invisivel {
    background: #f1f5f9;
    color: #475569;
}

.gc-acoes {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gc-btn-guardar {
    padding: 8px 18px;
    border: 1px solid #111;
    border-radius: 8px;
    background: #111;
    color: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.gc-btn-guardar:hover {
    background: #000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.gc-btn-guardar:active {
    transform: translateY(0);
}

.modal-cat-card {
    max-width: 500px !important;
}

.gc-empty {
    padding: 80px 20px;
    border: 2px dashed #e2e8f0;
    border-radius: 20px;
    background: #fff;
    color: #94a3b8;
    text-align: center;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .gc-wrap {
        padding: 15px 15px 60px;
    }

    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 25px;
    }

    .admin-page-header .btn-primary {
        width: 100%;
        margin: 0;
        justify-content: center;
        padding: 14px;
    }

    .gc-item {
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "foto info"
            "foto actions";
        gap: 12px;
        padding: 15px;
    }

    .gc-foto {
        grid-area: foto;
        width: 80px;
        height: 80px;
    }

    .gc-info {
        grid-area: info;
    }

    .gc-acoes {
        grid-area: actions;
        justify-content: flex-end;
        padding-top: 10px;
        border-top: 1px solid #f1f5f9;
    }

    .gc-nome-input {
        height: 46px;
        font-size: 1rem;
        background: #f8fafc;
    }
}

@media (max-width: 480px) {
    .gc-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "foto"
            "info"
            "actions";
        text-align: center;
    }

    .gc-foto {
        width: 100%;
        height: 140px;
    }

    .gc-meta,
    .gc-acoes {
        justify-content: center;
    }
}

/* === pages/_ver-logs.css === */
/* ── Ver Logs (Premium Admin Design) ── */

.logs-container {
    max-width: 1400px;
    margin: 0 auto;
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.logs-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

/* Tabs */
.log-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.log-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    user-select: none;
}

.log-tab:hover {
    background: #fff;
    color: #000;
    border-color: #000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.log-tab.active {
    background: #000;
    color: #fff;
    border-color: #000;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
}

.log-tab.active .log-badge {
    background: rgba(255, 255, 255, 0.2);
}

/* Terminal View */
#log-conteudo {
    background: #0f172a;
    color: #e2e8f0;
    font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    padding: 24px;
    border-radius: 16px;
    height: calc(100vh - 350px);
    min-height: 400px;
    max-height: 800px;
    overflow-y: auto;
    border: 1px solid #1e293b;
    box-shadow: inset 0 2px 15px rgba(0,0,0,0.4);
    white-space: pre-wrap;
    word-break: break-all;
    position: relative;
}

/* Stylized Scrollbar */
#log-conteudo::-webkit-scrollbar {
    width: 10px;
}
#log-conteudo::-webkit-scrollbar-track {
    background: #1e293b;
    border-radius: 0 16px 16px 0;
}
#log-conteudo::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 10px;
    border: 2px solid #1e293b;
}
#log-conteudo::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Footer Controls */
.log-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.log-controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.log-label-ar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    user-select: none;
    padding: 10px 18px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    transition: all 0.2s ease;
}

.log-label-ar:hover {
    background: #fff;
    border-color: #cbd5e1;
    color: #1e293b;
}

.log-label-ar input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.log-meta {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94a3b8;
    background: #f8fafc;
    padding: 10px 18px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    letter-spacing: 0.02em;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .logs-card { padding: 20px; }
    #log-conteudo { height: calc(100vh - 400px); font-size: 0.75rem; padding: 15px; }
    .log-bar { flex-direction: column; align-items: stretch; }
    .log-controls-left { flex-direction: column; }
    .log-meta { text-align: center; }
}

/* === pages/_listar-admins.css === */
/* estilos específicos de listar_admins foram migrados para o sistema .badge em _admin-ui.css */

/* === pages/_estado-encomenda.css === */

/* ── Página de acompanhamento ── */
main.pagina-info {
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}
.acomp-wrap { max-width: 800px; margin: 0 auto; animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Cabeçalho ── */
.acomp-header { margin-bottom: 40px; text-align: center; }
.acomp-header h2 { font-size: 2.2rem; font-weight: 800; margin: 0 0 10px; letter-spacing: -1px; }
.acomp-header p  { color: #666; margin: 0; font-size: 1rem; }

/* ── Card Premium ── */
.acomp-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 24px; 
    padding: 35px;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}
.acomp-card h3 { 
    font-size: .85rem; 
    font-weight: 700; 
    text-transform: uppercase;
    letter-spacing: .15em; 
    color: #999; 
    margin: 0 0 25px; 
    display: flex;
    align-items: center;
    gap: 8px;
}
.acomp-card h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #eee;
}

/* ── Timeline ── */
.timeline-wrap { position: relative; margin: 20px 0 40px; }
.timeline-track {
    display: flex; align-items: flex-start; justify-content: space-between;
    position: relative;
}
.timeline-track::before {
    content: ''; position: absolute; top: 22px; 
    left: var(--timeline-offset, 12.5%);
    right: var(--timeline-offset, 12.5%);
    height: 4px; background: #f0f0f0; z-index: 0;
    border-radius: 10px;
}
.tl-progress {
    position: absolute; top: 22px;
    left: var(--timeline-offset, 12.5%);
    height: 4px; background: #000; z-index: 1;
    width: 0; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 10px;
}
.tl-step { display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: 2; flex: 1; }
.tl-circle {
    width: 48px; height: 48px; border-radius: 50%;
    border: 2px solid #f0f0f0; background: #fff;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    color: #ccc;
}
.tl-circle svg { width: 20px; height: 20px; }
.tl-step.done .tl-circle { border-color: #000; background: #000; color: #fff; transform: scale(1.05); }
.tl-step.active .tl-circle { 
    border-color: #000; 
    background: #fff; 
    color: #000;
    box-shadow: 0 0 0 6px rgba(0,0,0,0.05); 
    transform: scale(1.1);
}
.tl-step.cancelada .tl-circle { border-color: #ef4444; background: #fef2f2; color: #ef4444; }
.tl-label { font-size: .8rem; font-weight: 600; color: #aaa; text-align: center; line-height: 1.3; transition: color 0.3s; }
.tl-step.done .tl-label, .tl-step.active .tl-label { color: #000; }
.tl-step.cancelada .tl-label { color: #ef4444; }

/* ── Banner de estado ── */
.estado-banner {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 24px; border-radius: 16px;
    background: #f8f9fa; 
    margin-top: 30px; font-size: .95rem; line-height: 1.5;
    border: 1px solid #eee;
    transition: all 0.3s;
}
.estado-banner:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.03); }
.estado-banner.verde { background: #f0fdf4; border-color: #dcfce7; color: #166534; }
.estado-banner.laranja { background: #fffbeb; border-color: #fef3c7; color: #92400e; }
.estado-banner.vermelho { background: #fef2f2; border-color: #fee2e2; color: #991b1b; }
.estado-banner .eb-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.estado-banner strong { display: block; font-weight: 700; font-size: 1.05rem; }

/* ── Tracking ── */
.tracking-box {
    display: flex; align-items: center; gap: 16px;
    background: #fff; border: 1px solid #e5e7eb;
    border-radius: 16px; padding: 20px; margin-top: 20px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
}
.tracking-box strong { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #999; display: block; margin-bottom: 4px; }
.tracking-code { font-family: 'Inter', sans-serif; font-size: 1.2rem; font-weight: 800; color: #000; }
.tracking-box a { 
    margin-left: auto; 
    background: #000; 
    color: #fff; 
    padding: 12px 20px; 
    border-radius: 12px; 
    font-size: .85rem; 
    font-weight: 700; 
    text-decoration: none; 
    transition: all 0.2s;
}
.tracking-box a:hover { background: #333; transform: translateX(3px); }

/* ── Itens ── */
.item-linha { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid #f0f0f0; }
.item-linha:last-child { border-bottom: none; }
.item-linha img { width: 70px; height: 70px; object-fit: cover; border-radius: 14px; border: 1px solid #eee; flex-shrink: 0; }
.item-linha-info { flex: 1; min-width: 0; }
.item-linha-info strong { display: block; font-size: 1rem; font-weight: 700; color: #000; margin-bottom: 4px; }
.item-linha-info small { color: #888; font-size: .85rem; font-weight: 500; }
.item-linha-preco { font-weight: 800; font-size: 1.05rem; color: #000; }

.sumario-totais { border-top: 2px solid #f8f8f8; padding-top: 20px; margin-top: 10px; }
.total-linha { display: flex; justify-content: space-between; font-size: .95rem; color: #666; margin-bottom: 10px; }
.total-linha.final { font-size: 1.3rem; font-weight: 900; color: #000; border-top: none; padding-top: 10px; }

/* ── Detalhe entrega ── */
.entrega-info { display: flex; gap: 15px; align-items: center; font-size: .95rem; color: #444; background: #fafafa; padding: 15px; border-radius: 16px; border: 1px solid #f0f0f0; }
.entrega-info svg { flex-shrink: 0; color: #999; }
.entrega-info div { line-height: 1.6; }
.entrega-info strong { color: #000; font-weight: 700; margin-bottom: 2px; font-size: .8rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Mensagens ── */
.msg-item { padding: 20px; border-radius: 16px; background: #fafafa; border: 1px solid #f0f0f0; margin-bottom: 15px; }
.msg-item:last-child { margin-bottom: 0; }
.msg-meta { display: flex; justify-content: space-between; font-size: .75rem; color: #999; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.msg-assunto { font-weight: 800; font-size: 1rem; color: #000; margin-bottom: 8px; }
.msg-corpo { font-size: .92rem; color: #444; line-height: 1.7; }

/* ── Botões ── */
.btn-voltar-compra {
    display: inline-flex; align-items: center; justify-content: center;
    background: #000; color: #fff; padding: 18px 40px; border-radius: 50px;
    font-weight: 700; text-decoration: none; transition: all 0.3s;
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
}
.btn-voltar-compra:hover { background: #333; transform: translateY(-3px); box-shadow: 0 15px 30px -5px rgba(0,0,0,0.25); }

@media (max-width: 600px) {
    .acomp-card { padding: 25px; }
    .tl-label { font-size: .65rem; }
    .tl-circle { width: 40px; height: 40px; }
    .acomp-header h2 { font-size: 1.8rem; }
    .tracking-box { flex-direction: column; align-items: stretch; text-align: center; }
    .tracking-box a { margin-left: 0; margin-top: 10px; }
}


/* === pages/_sucesso.css === */

main.sucesso-main {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px !important;
    max-width: none !important;
    background: #f9f9f9;
}

.sc-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,.08);
    max-width: 520px;
    width: 100%;
    padding: 56px 48px;
    text-align: center;
}

/* ── Icon ── */
.sc-icon-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
}
.sc-icon-wrap.verde   { background: #eafaf0; }
.sc-icon-wrap.laranja { background: #fff8ec; }
.sc-icon-wrap.vermelho{ background: #fff0f0; }

/* Checkmark animation */
.sc-icon-wrap.verde svg { animation: pop .4s cubic-bezier(.18,.89,.32,1.28) both; }
@keyframes pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* ── Typography ── */
.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f0f0f0;
    border-radius: 100px;
    padding: 6px 18px;
    font-size: .85rem;
    font-weight: 700;
    color: #333;
    letter-spacing: .03em;
    margin-bottom: 20px;
}

.sc-card h1 {
    font-size: 1.65rem;
    font-weight: 800;
    color: #111;
    margin: 0 0 14px;
    line-height: 1.2;
}

.sc-card p {
    font-size: .97rem;
    color: #666;
    line-height: 1.75;
    margin: 0 0 10px;
}

/* ── Divider ── */
.sc-divider {
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 32px 0;
}

/* ── Buttons ── */
.sc-btns {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sc-btn-primary {
    display: block;
    background: #111;
    color: #fff;
    text-decoration: none;
    border-radius: 12px;
    padding: 15px 24px;
    font-size: .95rem;
    font-weight: 700;
    transition: background .2s, transform .15s;
}
.sc-btn-primary:hover { background: #333; transform: translateY(-1px); }

.sc-btn-secondary {
    display: block;
    color: #555;
    text-decoration: none;
    font-size: .9rem;
    padding: 10px;
    border-radius: 10px;
    transition: color .2s;
}
.sc-btn-secondary:hover { color: #111; }

@media (max-width: 480px) {
    .sc-card { padding: 40px 28px; }
    .sc-card h1 { font-size: 1.4rem; }
}


/* === pages/_404.css === */
.pagina-404.clean-version {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 60px 20px;
    text-align: center;
    background-color: #ffffff;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
}

.container-404 {
    max-width: 600px;
    width: 100%;
    animation: fadeIn 1.2s ease-out both;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Golden Hanger */
.hanger-wrapper {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
}

.gold-hanger {
    width: 120px;
    height: 120px;
    color: #D4AF37; /* Elegant Gold */
    filter: drop-shadow(0 2px 4px rgba(212, 175, 55, 0.2));
    animation: gentleSwing 6s ease-in-out infinite;
    transform-origin: 50% 10%;
}

@keyframes gentleSwing {
    0%, 100% { transform: rotate(-3deg); }
    50%       { transform: rotate(3deg); }
}

/* Content */
.error-code {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 120px;
    font-weight: 900;
    line-height: 1;
    color: #1a1a1a;
    margin-bottom: 10px;
    letter-spacing: -2px;
}

.titulo-404 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 6vw, 42px);
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
    text-transform: none;
    letter-spacing: -0.5px;
}

.texto-404 {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 48px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Boutique Buttons */
.acoes-404 {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-boutique {
    padding: 14px 40px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border-radius: 0; /* Sharp corners for high-end look */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

.btn-boutique.primary {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #1a1a1a;
}

.btn-boutique.primary:hover {
    background: transparent;
    color: #1a1a1a;
}

.btn-boutique.secondary {
    background: transparent;
    color: #1a1a1a;
    border: 1px solid #1a1a1a;
}

.btn-boutique.secondary:hover {
    background: #D4AF37;
    color: #fff;
    border-color: #D4AF37;
}

/* Game Section */
.game-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #f0f0f0;
    animation: fadeIn 1.5s ease-out both;
}

.game-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.memory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}

.memory-card {
    aspect-ratio: 1;
    perspective: 1000px;
    cursor: pointer;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.memory-card.flipped .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
}

.card-front {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
}

.card-front::after {
    content: '';
    width: 20px;
    height: 20px;
    background: #D4AF37;
    border-radius: 50%;
    opacity: 0.3;
}

.card-back {
    background: #fff;
    transform: rotateY(180deg);
    font-size: 2rem;
    border-color: #D4AF37;
}

.memory-card.matched .card-back {
    background: #fffdf5;
    border-color: #D4AF37;
}

.game-info {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

#game-stats {
    font-weight: 600;
    color: #666;
}

.btn-reset {
    background: transparent;
    border: none;
    color: #D4AF37;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-size: 0.85rem;
    padding: 5px 10px;
    border-bottom: 1px solid transparent;
    transition: all 0.3s;
}

.btn-reset:hover {
    border-bottom-color: #D4AF37;
    transform: translateY(-2px);
}

/* Win Modal */
.win-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.4s ease;
}

.win-modal.active {
    display: flex;
}

.win-modal-content {
    background: #fff;
    padding: 60px 40px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    border: 1px solid #1a1a1a;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    animation: modalSlideUp 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

.win-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 20px;
}

.win-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    margin-bottom: 15px;
    color: #1a1a1a;
}

.win-text {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 35px;
}

#final-attempts {
    font-weight: 700;
    color: #D4AF37;
}

/* Responsiveness */
@media (max-width: 600px) {
    .error-code {
        font-size: 80px;
    }
    
    .btn-boutique {
        width: 100%;
        min-width: auto;
    }

    .memory-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        max-width: 320px;
    }

    .card-back {
        font-size: 1.5rem;
    }

    .win-modal-content {
        padding: 40px 20px;
    }
}


/* === pages/_checkout.css === */
main.checkout-page {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    background: #f4f4f4;
}

.ck-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    min-height: calc(100vh - 80px);
    max-width: 1180px;
    margin: 0 auto;
}

@media(max-width:960px) {
    .ck-wrap {
        grid-template-columns: 1fr;
    }

    .ck-left {
        order: 2;
    }

    .ck-right {
        order: 1;
        border-bottom: 1px solid #e0e0e0;
    }
}

.ck-left {
    background: #fff;
    padding: 48px 52px;
    border-right: 1px solid #e0e0e0;
}

@media(max-width:600px) {
    .ck-left {
        padding: 28px 20px 48px;
    }
}

.ck-right {
    background: #fafafa;
    padding: 48px 18px;
    position: sticky;
    top: 100px;
    align-self: start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

@media(max-width:960px) {
    .ck-right {
        padding: 24px 18px;
        position: static;
    }
}

    /* Os itens agora usam as regras do componente unificado */

.ck-sec {
    margin-bottom: 30px;
}

.ck-sec-hd {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.ck-sec-hd h2 {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.ck-account-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    align-items: center;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #e6eaf0;
    border-radius: 10px;
    background: #f8fafc;
}

.ck-account-note strong,
.ck-account-note span {
    min-width: 0;
}

.ck-account-note strong {
    color: #111827;
    font-size: 0.88rem;
}

.ck-account-note span {
    color: #667085;
    font-size: 0.82rem;
}

.ck-account-note a {
    grid-row: 1 / span 2;
    grid-column: 2;
    color: #111827;
    font-size: 0.82rem;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.ck-in[readonly] {
    background-color: #f8fafc;
    color: #64748b;
    cursor: default;
    pointer-events: none;
    border-color: #e9eef4;
}

.ck-account-warning {
    display: none;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.4;
}

.ck-account-warning a {
    color: #111827;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ck-save-address {
    display: block;
    position: relative;
    padding-left: 32px;
    margin-top: 15px;
    cursor: pointer;
    user-select: none;
    min-height: 22px;
}

.ck-save-text {
    color: #4b5563;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    display: block;
}

.ck-save-address input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.ck-custom-checkbox {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ck-save-address:hover input ~ .ck-custom-checkbox {
    border-color: #111;
    background-color: #f9fafb;
}

.ck-save-address input:checked ~ .ck-custom-checkbox {
    background-color: #111;
    border-color: #111;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
}

.ck-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ck-f {
    margin-bottom: 13px;
}

.ck-f label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #888;
    margin-bottom: 5px;
}

.ck-in {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 7px;
    font-size: .95rem;
    color: #111;
    background: #fff;
    transition: border-color .15s;
}

.ck-f .select-wrapper {
    width: 100%;
}

select.ck-in.select-estilizado {
    min-height: 46px;
    padding: 0 44px 0 16px;
    border: 1px solid #dfe3ea;
    border-radius: 999px;
    background: #fff;
    background-image: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    font-size: .92rem;
    font-weight: 600;
}

.ck-in:focus {
    outline: none;
    border-color: #111;
}

.ck-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media(max-width:400px) {
    .ck-row {
        grid-template-columns: 1fr;
    }
}

.ck-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 15px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
    flex: 1;
}

.ck-card.active {
    border-color: #111;
    background: #f8f8f8;
}

.ck-card-ico {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ck-card-ico svg {
    width: 18px;
    height: 18px;
    stroke: #888;
}

.ck-card.active .ck-card-ico {
    background: #111;
}

.ck-card.active .ck-card-ico svg {
    stroke: #fff;
}

.ck-card-txt strong {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    color: #111;
}

.ck-card-txt small {
    display: block;
    font-size: .78rem;
    color: #888;
}

.ck-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 15px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    margin-top: 6px;
}

.ck-btn:hover:not(:disabled) {
    background: #333;
}

.ck-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.ck-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: #888;
    font-size: .85rem;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
}

.ck-back:hover {
    color: #111;
}

.ck-back-row {
    margin-top: 20px;
}

.ck-back-full {
    width: 100%;
}

.ck-review {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 22px;
    overflow: hidden;
}

.ck-review-row {
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ck-review-row:last-child {
    border-bottom: none;
}

.ck-review-label {
    width: 70px;
    flex-shrink: 0;
    font-size: .85rem;
    color: #888;
}

.ck-review-data {
    flex: 1;
    font-size: .85rem;
    color: #111;
    line-height: 1.4;
}

/* Os itens do checkout agora são controlados pelo componente unificado _unified-cart-item.css */

.ck-totals {
    border-top: 1px solid #e5e7eb;
    padding-top: 14px;
}

.ck-tr {
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    font-size: .86rem;
    color: #666;
}

.ck-tr.final {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
}

.ck-spin {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: ck-rot .7s linear infinite;
}

@keyframes ck-rot {
    to {
        transform: rotate(360deg);
    }
}

#ck-loading {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, .93);
    z-index: 9999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

/* === pages/_editar-encomenda.css === */

/* Estilos são os mesmos da página de criar encomenda manual, pode reutilizá-los. */
.search-wrapper { position: relative; } #search-results-container { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ccc; z-index: 100; max-height: 300px; overflow-y: auto; display: none; } .search-result-item { padding: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; } .search-result-item:hover { background-color: #f0f0f0; } .search-result-item img { width: 40px; height: 40px; object-fit: cover; } .search-result-item .info .nome { font-weight: bold; } .search-result-item .info .ref { font-size: 0.8rem; color: #777; } .itens-encomenda-preview { margin-top: 20px; border-top: 1px solid var(--cor-borda-subtil); padding-top: 20px; } .item-preview { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-bottom: 15px; } .item-preview .info .nome { font-weight: 500; } .item-preview .info .detalhes { font-size: 0.85rem; color: #666; } .item-preview .acoes { text-align: right; } .item-preview .acoes input { width: 60px; text-align: center; } .item-preview .acoes button { font-size: 1.2rem; line-height: 1; color: var(--cor-erro); background: none; border: none; cursor: pointer; padding: 5px; } .total-preview { text-align: right; font-size: 1.2rem; margin-top: 20px; border-top: 2px solid var(--cor-borda-subtil); padding-top: 15px; }


/* === pages/_cliente.css === */
/* =============================================
   ÁREA DE CLIENTE — DESIGN PREMIUM
   ============================================= */

/* --- BASE --- */
.cliente-area-page {
    min-height: calc(100vh - 100px);
}

main.cliente-area-page {
    padding: 0;
}

.cliente-auth-page {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 18px;
    background: #f8fafc;
}

.cliente-auth-page .login-container {
    width: min(100%, 430px);
}

.cliente-auth-page .login-card {
    width: 100%;
    padding: 34px;
    border: 1px solid #e6eaf0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}

.cliente-auth-page .login-card h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 1.65rem;
    line-height: 1.1;
}

.cliente-auth-copy {
    margin: 0 0 22px;
    color: #667085;
    font-size: 0.92rem;
    line-height: 1.5;
}

.cliente-auth-links {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    font-size: 0.86rem;
    font-weight: 650;
}

.cliente-auth-links a,
.cliente-panel-head a {
    color: #111827;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

/* --- MENSAGENS --- */
.cliente-auth-page .auth-message,
.cliente-area-page .auth-message {
    margin-bottom: 20px;
    padding: 14px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.cliente-auth-page .auth-message.error,
.cliente-area-page .auth-message.error {
    border: 1px solid #fee2e2;
    background: #fef2f2;
    color: #b91c1c;
}

.cliente-auth-page .auth-message.success,
.cliente-area-page .auth-message.success {
    border: 1px solid #dcfce7;
    background: #f0fdf4;
    color: #15803d;
}

/* --- CHECKBOX --- */
.cliente-check {
    display: block;
    position: relative;
    padding-left: 32px;
    margin-top: 15px;
    cursor: pointer;
    user-select: none;
    min-height: 22px;
}

.cliente-check-text {
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.4;
    display: block;
}

.cliente-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cliente-custom-check {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cliente-check:hover input ~ .cliente-custom-check {
    border-color: #111;
    background-color: #f8fafc;
}

.cliente-check input:checked ~ .cliente-custom-check {
    background-color: #111;
    border-color: #111;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 13px;
    background-position: center;
    background-repeat: no-repeat;
}

/* --- LOGIN PANEL (SLIDE-IN) --- */
.cliente-login-overlay {
    position: fixed;
    top: var(--site-header-height, 101px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--site-header-height, 101px));
    height: calc(100dvh - var(--site-header-height, 101px));
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(4px);
    transition: opacity 0.32s ease;
}

.cliente-login-overlay.ativo {
    opacity: 1;
    pointer-events: auto;
}

.cliente-login-panel {
    position: fixed;
    top: var(--site-header-height, 101px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - var(--site-header-height, 101px));
    height: calc(100dvh - var(--site-header-height, 101px));
    max-height: calc(100vh - var(--site-header-height, 101px));
    max-height: calc(100dvh - var(--site-header-height, 101px));
    background: #fff;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-24px);
    transform-origin: top center;
    transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cliente-login-panel.ativo {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.cliente-login-panel-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid #eef2f7;
    background: #fff;
    flex-shrink: 0;
    text-align: left;
}

@media (max-width: 768px) {
    .cliente-login-panel-header {
        min-height: 62px;
        padding: 0 25px;
        border-bottom: 1px solid #f1f5f9;
    }

    .cliente-login-panel-header h4 {
        color: #1a1a1a;
        font-size: 1.05rem;
        font-weight: 750;
    }
}

.cliente-login-panel-header h4 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: #111827;
    font-size: 1.08rem;
    font-weight: 760;
    line-height: 1.15;
}

.cliente-login-panel-header h4 span {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cliente-login-panel-form {
    display: grid;
    gap: 12px;
    width: min(100%, 520px);
    margin: 0 auto;
    padding: 24px 24px 18px;
}

.cliente-login-panel-form label {
    color: #4a4a4a;
    font-size: 0.86rem;
    font-weight: 650;
}

.cliente-login-panel-form input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fcfcfc;
    color: #111827;
    font-size: 1rem;
}

.cliente-login-panel-form input:focus {
    outline: none;
    border-color: #000;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.05);
}

.cliente-login-panel-form button {
    width: 100%;
    min-height: 46px;
    margin-top: 8px;
    border: 0;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
}

.cliente-login-panel-form button:hover {
    background: #333;
}

.cliente-login-panel-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(100%, 520px);
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 18px 24px calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid #eef2f7;
}

.cliente-login-panel-links a {
    display: block;
    padding: 0;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-decoration: none;
    text-transform: uppercase;
}

.cliente-login-panel-links a:hover {
    color: #000;
}

/* --- PROFILE CHOICE BUTTONS --- */
.perfil-choice-form {
    display: grid;
    gap: 16px;
    margin-top: 10px;
}

.perfil-choice-form .choice-btn {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 80px;
    padding: 12px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.perfil-choice-form .choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 1px solid #f1f5f9;
}

.perfil-choice-form .choice-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    min-width: 0;
    text-align: left;
}

.perfil-choice-form .choice-content strong {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.perfil-choice-form .choice-content span {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
}

.perfil-choice-form .choice-chevron {
    color: #cbd5e1;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover effects */
.perfil-choice-form .choice-btn:hover {
    border-color: #000;
    background: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.perfil-choice-form .choice-btn:hover .choice-icon {
    background: #000;
    color: #fff;
    border-color: #000;
    transform: scale(1.08) rotate(-3deg);
}

.perfil-choice-form .choice-btn:hover .choice-chevron {
    color: #000;
    transform: translateX(4px);
}

.perfil-choice-form .choice-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Specific button values are now identical by default */
.perfil-choice-form .choice-btn[value="cliente"],
.perfil-choice-form .choice-btn[value="admin"] {
    /* Identical styles as defined above */
}

/* --- BOTÕES TIPO PÍLULA (PADRÃO SITE) --- */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 32px;
    border: 1px solid var(--cor-texto, #111);
    border-radius: 99px;
    background: var(--cor-texto, #111);
    color: var(--cor-fundo, #fff);
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-premium:hover {
    background: #333;
    border-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-premium-secondary {
    background: #fff;
    color: var(--cor-texto, #111);
    border-color: #e2e8f0;
}

.btn-premium-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* =============================================
   LAYOUT PRINCIPAL DA ÁREA DE CLIENTE
   ============================================= */

.cliente-shell {
    display: grid;
    grid-template-columns: fit-content(calc(100% / 3)) minmax(0, 1fr);
    gap: 32px;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
    padding: 48px 0 80px;
}

/* =============================================
   SIDEBAR
   ============================================= */

.cliente-sidebar {
    align-self: start;
    padding: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.cliente-profile-info {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.cliente-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #111827, #374151);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.cliente-details {
}

.cliente-details strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #111827;
    font-size: 0.95rem;
    font-weight: 700;
}

.cliente-details span {
    display: block;
    white-space: nowrap;
    margin-top: 3px;
    color: #94a3b8;
    font-size: 0.78rem;
}

.cliente-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px;
}

.cliente-sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.cliente-sidebar nav a svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.cliente-sidebar nav a:hover {
    background: #f8fafc;
    color: #111827;
}

.cliente-sidebar nav a:hover svg {
    opacity: 1;
}

.cliente-sidebar nav a.active {
    background: #f1f5f9;
    color: #111827;
    font-weight: 700;
}

.cliente-sidebar nav a.active svg {
    opacity: 1;
}

.cliente-sidebar nav a.logout-link {
    color: #ef4444;
    margin-top: 4px;
}

.cliente-sidebar nav a.logout-link svg {
    opacity: 0.8;
}

.cliente-sidebar nav a.logout-link:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* =============================================
   CONTEÚDO PRINCIPAL
   ============================================= */

.cliente-content {
    min-width: 0;
}

.cliente-page-head {
    margin-bottom: 28px;
}

.cliente-page-head h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.cliente-page-head p {
    margin: 8px 0 0;
    color: #64748b;
    font-size: 0.95rem;
    text-align: left;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

/* --- CARDS SUMÁRIO --- */
.cliente-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cliente-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cliente-card:hover {
    border-color: var(--cor-texto, #111);
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.12);
    transform: translateY(-3px);
}

.cliente-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.cliente-card-number {
    color: #0f172a;
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
}

.cliente-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #1e293b;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cliente-card:hover .cliente-card-icon {
    background: #000;
    color: #fff;
    transform: scale(1.1) rotate(5deg);
}

.cliente-card strong {
    color: #1e293b;
    font-size: 0.9rem;
    font-weight: 700;
}

.cliente-card small {
    color: #94a3b8;
    font-size: 0.82rem;
}

/* --- PAINÉIS --- */
.cliente-panel {
    margin-bottom: 24px;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.cliente-panel-danger {
    border-color: var(--cor-erro, #c0392b);
}

.cliente-panel-danger .cliente-panel-head h2 {
    color: var(--cor-erro, #c0392b);
}

.cliente-form-grid input:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #e9eef4;
    opacity: 1;
}

.danger-zone-text {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 20px;
    line-height: 1.55;
    text-align: left;
    max-width: none;
}

.dados-inline-erro {
    min-height: 1.4em;
    margin: 8px 0 4px;
    color: var(--cor-erro, #c0392b);
    font-size: 0.85rem;
    font-weight: 600;
}

.cliente-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.cliente-panel h2,
.cliente-panel-head h2 {
    margin: 0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
    margin-bottom: 0;
}

.cliente-panel-head a {
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    transition: all 0.15s ease;
}

.cliente-panel-head a.btn-track-primary {
    background: #000;
    color: #fff;
    border-color: #000;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 8px 16px;
}

.cliente-panel-head a.btn-track-primary:hover {
    background: #333;
    border-color: #333;
    color: #fff !important;
    transform: translateY(-1px);
}

.cliente-panel-head a:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #111827;
}

/* Painéis sem head  — padding direto */
.cliente-panel>h2:first-child {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

/* --- EMPTY STATE --- */
.cliente-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: #94a3b8;
    text-align: center;
}

.cliente-empty p {
    margin: 0;
    font-size: 0.92rem;
    text-align: center;
    max-width: none;
    color: #94a3b8;
}

/* --- TABELAS DE ENCOMENDAS --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cliente-orders-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.cliente-orders-table {
    width: 100%;
    border-collapse: collapse;
    color: #334054;
    font-size: 0.9rem;
}

.cliente-orders-table th {
    height: 44px;
    padding: 0 18px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.cliente-orders-table td {
    height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
}

.cliente-orders-table tbody tr {
    transition: background 0.16s ease;
}

.cliente-orders-table tbody tr:hover {
    background: #fcfdfe;
}

.cliente-orders-table tbody tr:last-child td {
    border-bottom: none;
}

.cliente-orders-table .is-money {
    text-align: center;
}

.cliente-orders-table .is-action {
    text-align: center;
}

.order-id {
    color: #0f172a;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.order-id:hover {
    text-decoration: underline;
}

.order-date {
    color: #64748b;
    font-size: 0.85rem;
}

.order-delivery {
    color: #475569;
    font-size: 0.84rem;
    font-weight: 650;
    text-transform: capitalize;
}

.order-total {
    text-align: right;
    color: #0f172a;
    font-weight: 700;
}

.order-actions-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-track-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    background: #000;
    color: #fff;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-track-mini:hover {
    background: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.order-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e2e8f0;
    border-radius: 99px;
    background: #fff;
    color: #cbd5e1;
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.order-icon-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateX(3px);
    color: #64748b;
}

@media (max-width: 768px) {
    .cliente-orders-table-wrap {
        overflow: visible;
    }

    .cliente-orders-table,
    .cliente-orders-table thead,
    .cliente-orders-table tbody,
    .cliente-orders-table tr,
    .cliente-orders-table td {
        display: block;
        width: 100%;
    }

    .cliente-orders-table thead {
        display: none;
    }

    .cliente-orders-table tr {
        padding: 15px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .cliente-orders-table tr:last-child {
        border-bottom: none;
    }

    .cliente-orders-table td {
        display: flex;
        height: auto;
        min-height: 30px;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 4px 0;
        border-bottom: none;
        white-space: normal;
        text-align: right;
    }

    .cliente-orders-table td::before {
        content: attr(data-label);
        color: #94a3b8;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
    }

    .cliente-orders-table td.is-action::before {
        display: none;
    }

    .cliente-orders-table .is-money,
    .cliente-orders-table .is-action {
        text-align: right;
    }

    .order-actions-cell {
        justify-content: stretch;
        width: 100%;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid #f1f5f9;
    }

    .btn-track-mini {
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }

    .order-icon-btn {
        width: 40px;
        height: 40px;
    }
}

/* --- STATUS BADGES --- */
.order-status {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.status-pago {
    background: #f0fdf4;
    color: #15803d;
}

.status-em-processamento {
    background: #eff6ff;
    color: #1d4ed8;
}

.status-enviado {
    background: #f0f9ff;
    color: #0369a1;
}

.status-entregue {
    background: #f0fdf4;
    color: #15803d;
}

.status-cancelada {
    background: #fef2f2;
    color: #dc2626;
}

.status-a-aguardar-pagamento {
    background: #fefce8;
    color: #a16207;
}

.status-incompleta {
    background: #f9fafb;
    color: #6b7280;
}

/* --- ITEM DE ENCOMENDA (detalhe) --- */
.cliente-order-list-detail {
    display: flex;
    flex-direction: column;
}

.cliente-order-item {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.cliente-order-item:last-child {
    border-bottom: none;
}

.cliente-order-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #f1f5f9;
    background: #f8fafc;
}

.cliente-order-item strong {
    display: block;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.cliente-order-item span {
    color: #64748b;
    font-size: 0.82rem;
}

.cliente-order-item b {
    color: #0f172a;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

/* --- TOTAIS --- */
.cliente-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 24px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}

.cliente-totals div,
.cliente-totals span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #64748b;
    font-size: 0.88rem;
}

.cliente-totals span:last-child {
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
}

.cliente-totals strong {
    color: #0f172a;
    font-weight: 700;
}

/* --- LISTA DE MORADAS --- */
.cliente-address-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    padding: 24px;
}

.cliente-address-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #fff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cliente-address-card:hover {
    border-color: #111827;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-4px);
}

.cliente-address-card.is-principal {
    border-color: #111827;
    background: #fcfdfe;
    border-width: 1.5px;
}

.address-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.address-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
}

.cliente-address-card.is-principal .address-icon {
    background: #111827;
    color: #fff;
}

.badge-principal {
    padding: 4px 10px;
    border-radius: 99px;
    background: #111827;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.address-details {
    flex: 1;
    display: grid;
    gap: 4px;
    margin-bottom: 20px;
}

.address-details strong {
    color: #111827;
    font-size: 1.05rem;
    font-weight: 800;
}

.address-details span {
    color: #475569;
    font-size: 0.9rem;
    font-weight: 600;
}

.address-details p {
    color: #94a3b8;
    font-size: 0.82rem;
    margin: 0;
    text-align: left;
    max-width: none;
}

.address-tel {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
}

/* --- AÇÕES INLINE --- */
.cliente-inline-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
}

.address-action-group {
    display: flex;
    gap: 8px;
}

.cliente-inline-actions .btn-set-main {
    font-size: 0.8rem;
    padding: 8px 16px;
}

/* --- BOTÃO APAGAR (Estilo Admin) --- */
.btn-del-single {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    padding: 0 !important;
    background-color: #f1f5f9 !important;
    color: #ef4444 !important;
}

.btn-del-single:hover {
    background-color: #fef2f2 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15) !important;
}

.btn-del-single::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E");
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

.btn-edit-single {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    padding: 0 !important;
    background-color: #f1f5f9 !important;
    color: #475569 !important;
}

.btn-edit-single:hover {
    background-color: #e2e8f0 !important;
    transform: translateY(-2px) scale(1.05) !important;
    color: #111827 !important;
}

.btn-edit-single::after {
    content: "" !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-color: currentColor !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

@media (max-width: 480px) {
    .cliente-address-list {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

/* --- FORMULÁRIOS --- */
.cliente-form-wrap {
    padding: 24px;
}

.cliente-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.cliente-form-grid label:not(.cliente-check),
.cliente-form-grid .cliente-form-field {
    display: grid;
    gap: 6px;
    color: #475467;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.cliente-form-grid .cliente-form-field > label {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

.cliente-form-grid input:not([type="checkbox"]),
.cliente-form-grid select {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background-color: #fff;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cliente-form-grid select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.cliente-form-grid input:focus {
    outline: none;
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.07);
}

.cliente-form-grid .cliente-check,
.cliente-form-grid .button,
.cliente-form-grid input[type="submit"],
.cliente-form-grid .form-morada-actions {
    grid-column: 1 / -1;
}

.cliente-form-grid > .button:not(.voltar-btn),
.cliente-form-grid input[type="submit"] {
    width: 100%;
}

.cliente-panel-danger .cliente-form-wrap > .button {
    width: 100%;
}

.form-morada-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.form-morada-actions #btn-submit-morada {
    flex: 1;
}

/* --- DETALHE DE ENTREGA --- */
.cliente-delivery-body {
    padding: 20px 24px;
}

.cliente-morada-text {
    margin: 0;
    color: #334054;
    font-size: 0.9rem;
    line-height: 1.7;
    text-align: left;
    max-width: none;
}

.cliente-tracking-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.tracking-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.tracking-value {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.92rem;
}

/* --- LINK VOLTAR --- */
.cliente-back-link {
    margin-top: 8px;
}

.cliente-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.cliente-back-link a:hover {
    color: #0f172a;
}

/* --- BADGE PRINCIPAL --- */
.badge-principal {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    background: #f0fdf4;
    color: #15803d;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
}

/* --- LINK BOTÃO VAZIO (empty state) --- */

/* --- RESPONSIVO --- */
@media (max-width: 900px) {
    .cliente-shell {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: none;
        padding: 0 0 60px;
        gap: 0;
    }

    .cliente-sidebar {
        z-index: 10;
        margin: 12px 12px 0;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        background: #fff;
    }

    .cliente-content {
        padding: 24px 16px;
    }

    .cliente-profile-info {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .cliente-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.85rem;
    }

    .cliente-details strong {
        font-size: 0.85rem;
    }

    .cliente-details span {
        display: none;
        /* Hide email on small top bar */
    }

    /* Nav horizontal "Segmented Control" style */
    .cliente-sidebar nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 4px;
        gap: 2px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        background: #f1f5f9;
        margin: 14px 16px;
        border-radius: 99px;
        border: 1px solid #e2e8f0;
    }

    .cliente-sidebar nav::-webkit-scrollbar {
        display: none;
    }

    .cliente-sidebar nav a {
        flex: 1 0 auto;
        min-height: 36px;
        padding: 0 16px;
        font-size: 0.8rem;
        font-weight: 750;
        justify-content: center;
        white-space: nowrap;
        border-radius: 99px;
        border: none;
        color: #64748b;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cliente-sidebar nav a.active {
        background: #fff;
        color: var(--cor-texto, #111);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    }

    .cliente-sidebar nav a svg {
        display: none;
    }

    .cliente-sidebar nav a.logout-link {
        display: none;
    }
}

@media (max-width: 560px) {
    .cliente-shell {
        width: calc(100% - 20px);
        padding-top: 16px;
        gap: 12px;
    }

    .cliente-page-head {
        margin-bottom: 16px;
    }

    .cliente-page-head h1 {
        font-size: 1.55rem;
    }

    .cliente-auth-page {
        padding: 28px 12px;
    }

    .cliente-auth-page .login-card {
        padding: 18px;
    }

    .cliente-auth-links {
        align-items: flex-start;
        flex-direction: column;
    }

    .cliente-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 16px 18px;
    }

    .cliente-grid {
        grid-template-columns: 1fr;
    }

    .cliente-form-grid {
        grid-template-columns: 1fr;
    }

    .cliente-form-wrap {
        padding: 16px 18px;
    }

    .order-status {
        font-size: 0.68rem;
        padding: 3px 7px;
    }

    .cliente-order-item {
        grid-template-columns: 54px minmax(0, 1fr) auto;
        padding: 14px 16px;
        gap: 12px;
    }

    .cliente-order-item img {
        width: 54px;
        height: 54px;
    }

    .cliente-address-card {
        padding: 16px 18px;
    }

    .cliente-totals {
        padding: 14px 18px;
    }

    .cliente-delivery-body {
        padding: 16px 18px;
    }

    .cliente-card {
        padding: 18px;
    }

    .cliente-card-number {
        font-size: 2rem;
    }

    .cliente-profile-info {
        padding: 14px 16px;
    }

    .cliente-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .cliente-details strong {
        font-size: 0.88rem;
    }

    .cliente-details span {
        font-size: 0.73rem;
    }
}

/* === components/_button-system.css === */
/* Sistema DRY para botoes textuais.
   O desenho base replica o botao "Editar Perfil" do admin. */

.button,
.add-btn,
.voltar-btn,
.edit-btn,
.delete-btn,
.action-btn-pill,
.button-primary,
.button-secondary,
.btn-admin-primary,
.btn-admin-secondary,
.btn-admin-danger,
.btn-primary,
.btn-primary-plus,
.btn-add-row,
.btn-add-admin,
.btn-filtrar,
.btn-limpar,
.btn-adicionar-rapido,
.btn-boutique,
.btn-reset,
.button-hero,
.btn-ver-mais,
.btn-aplicar-mobile,
.link-limpar,
.btn-voltar-compra,
.btn-continue-shopping,
.tracking-box a,
.ck-btn,
.ck-back,
.sc-btn-primary,
.sc-btn-secondary,
.filtro-btn,
.whatsapp-btn,
.gc-btn-guardar,
.gal-btn-scan,
.gal-btn-del-all.show,
.btn-add-full,
#btn-add-grupo-standard,
.btn-action-premium,
.editor-btn-compact,
.qe-btn,
.focal-btn-cancel,
.focal-btn-save,
.btn-edit-framing,
.btn-sel-mode,
.btn-sel-all,
.bulk-bar-cancel,
.form-pesquisa-encomenda button,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap);
    padding: var(--button-padding) !important;
    border: 1px solid var(--button-border) !important;
    border-radius: var(--button-radius) !important;
    background: var(--button-bg) !important;
    color: var(--button-color) !important;
    box-shadow: var(--button-shadow) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-font-weight) !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: var(--button-transition) !important;
    -webkit-appearance: none;
    appearance: none;
}

.button:hover,
.add-btn:hover,
.voltar-btn:hover,
.edit-btn:hover,
.button-primary:hover,
.button-secondary:hover,
.btn-admin-primary:hover,
.btn-admin-secondary:hover,
.btn-primary:hover,
.btn-primary-plus:hover,
.btn-add-row:hover,
.btn-add-admin:hover,
.btn-filtrar:hover,
.btn-limpar:hover,
.btn-adicionar-rapido:hover,
.btn-boutique:hover,
.btn-reset:hover,
.button-hero:hover,
.btn-ver-mais:hover,
.btn-aplicar-mobile:hover,
.link-limpar:hover,
.btn-voltar-compra:hover,
.btn-continue-shopping:hover,
.tracking-box a:hover,
.ck-btn:hover:not(:disabled),
.ck-back:hover,
.sc-btn-primary:hover,
.sc-btn-secondary:hover,
.filtro-btn:hover,
.whatsapp-btn:hover,
.gc-btn-guardar:hover,
.gal-btn-scan:hover:not(:disabled),
.gal-btn-del-all.show:hover,
.delete-btn:hover,
.btn-admin-danger:hover,
.action-btn-pill.btn-danger:hover,
.btn-add-full:hover,
#btn-add-grupo-standard:hover,
.btn-action-premium:hover,
.editor-btn-compact:hover,
.qe-btn:hover,
.focal-btn-cancel:hover,
.focal-btn-save:hover,
.btn-edit-framing:hover,
.btn-sel-mode:hover,
.btn-sel-all:hover,
.bulk-bar-cancel:hover,
.form-pesquisa-encomenda button:hover,
input[type="submit"]:hover {
    background: var(--button-hover-bg) !important;
    border-color: var(--button-hover-border) !important;
    color: var(--button-hover-color) !important;
    box-shadow: var(--button-hover-shadow) !important;
    transform: translateY(-1px) !important;
}

.btn-adicionar-rapido:hover {
    transform: translateX(-50%) translateY(-1px) !important;
}

.button:active,
.add-btn:active,
.voltar-btn:active,
.edit-btn:active,
.delete-btn:active,
.action-btn-pill:active,
.button-primary:active,
.button-secondary:active,
.btn-admin-primary:active,
.btn-admin-secondary:active,
.btn-admin-danger:active,
.ck-btn:active,
.sc-btn-primary:active,
.sc-btn-secondary:active,
.qe-btn:active {
    transform: translateY(0);
}

.button svg,
.add-btn svg,
.voltar-btn svg,
.edit-btn svg,
.delete-btn svg,
.action-btn-pill svg,
.button-primary svg,
.button-secondary svg,
.btn-admin-primary svg,
.btn-admin-secondary svg,
.btn-admin-danger svg,
.btn-primary svg,
.btn-primary-plus svg,
.btn-add-admin svg,
.btn-action-premium svg,
.editor-btn-compact svg {
    width: 16px;
    height: 16px;
    color: var(--button-icon-color);
    flex-shrink: 0;
}

.button:hover svg,
.add-btn:hover svg,
.voltar-btn:hover svg,
.edit-btn:hover svg,
.delete-btn:hover svg,
.action-btn-pill:hover svg,
.button-primary:hover svg,
.button-secondary:hover svg,
.btn-admin-primary:hover svg,
.btn-admin-secondary:hover svg,
.btn-admin-danger:hover svg,
.btn-primary:hover svg,
.btn-primary-plus:hover svg,
.btn-add-admin:hover svg,
.btn-action-premium:hover svg,
.editor-btn-compact:hover svg {
    color: var(--button-hover-icon-color);
}

.btn-with-plus-text::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.3s;
}

.btn-with-plus svg {
    transition: transform 0.3s;
}

.btn-with-plus:hover::before,
.btn-with-plus:hover svg {
    transform: rotate(90deg);
}

.delete-btn,
.btn-admin-danger,
.gal-btn-del-all.show,
.action-btn-pill.btn-danger {
    --button-border: #fee2e2;
    --button-color: #ef4444;
    --button-icon-color: #ef4444;
    --button-hover-bg: #fef2f2;
    --button-hover-border: #fecaca;
    --button-hover-color: #dc2626;
    --button-hover-icon-color: #dc2626;
}

.btn-sel-mode.active,
.filtro-btn.ativo,
.action-btn-pill.btn-edit-active {
    --button-bg: #eef2ff;
    --button-border: #818cf8;
    --button-color: #4338ca;
    --button-icon-color: #4f46e5;
    --button-hover-bg: #eef2ff;
    --button-hover-border: #818cf8;
    --button-hover-color: #4338ca;
    --button-hover-icon-color: #4f46e5;
}

.button:disabled,
.add-btn:disabled,
.voltar-btn:disabled,
.edit-btn:disabled,
.delete-btn:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.btn-admin-primary:disabled,
.btn-admin-secondary:disabled,
.btn-admin-danger:disabled,
.ck-btn:disabled,
.gal-btn-scan:disabled,
.qe-btn:disabled,
button[disabled].action-btn-pill,
input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: var(--button-shadow);
}

.ck-btn,
.sc-btns .sc-btn-primary,
.sc-btns .sc-btn-secondary,
.btn-aplicar-mobile {
    width: 100%;
}

.filtro-acoes .link-limpar {
    width: 100%;
}

.btn-boutique {
    min-width: 200px;
}

@media (max-width: 600px) {
    .btn-boutique {
        min-width: 0;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .botao-filtros-mobile {
        gap: var(--button-gap);
        padding: var(--button-padding) !important;
        border: 1px solid var(--button-border) !important;
        border-radius: var(--button-radius) !important;
        background: var(--button-bg) !important;
        color: var(--button-color) !important;
        box-shadow: var(--button-shadow) !important;
        font-family: 'Inter', sans-serif !important;
        font-size: var(--button-font-size) !important;
        font-weight: var(--button-font-weight) !important;
        text-decoration: none !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        transition: var(--button-transition) !important;
    }

    .botao-filtros-mobile:hover {
        background: var(--button-hover-bg) !important;
        border-color: var(--button-hover-border) !important;
        color: var(--button-hover-color) !important;
        box-shadow: var(--button-hover-shadow) !important;
        transform: translateY(-1px) !important;
    }
}

/*
 * Sistema de contraste para superfícies elevadas.
 * As caixas permanecem claras e legíveis, independentemente
 * da cor global escolhida para o fundo da página.
 */
.produto,
.cart-summary-card,
.stat-card,
.nav-card,
.info-bloco,
.contacto-grid,
.cliente-card,
.form-card,
.palette-card,
.palette-preview-card,
.country-card,
.tracking-box,
.entrega-info,
.msg-item {
    border-color: var(--cor-borda-cartao);
    color: var(--cor-texto);
}

/* CSS GERAL E UTILITÁRIOS EXTRA */

/* TEMA TOOLTIP */
.tippy-box[data-theme~='toptop-professional'] {
    background-color: #1C1C1C;
    color: #FFFFFF;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.5;
    border-radius: 6px;
    padding: 10px 14px;
    max-width: 300px;
    text-align: center;
}

.tippy-box[data-theme~='toptop-professional'] > .tippy-arrow {
    color: #1C1C1C;
}

.tippy-box[data-theme~='toptop-professional'] .tippy-content {
    white-space: normal;
    word-wrap: break-word;
}