/**
 * Catálogo — Design System (Etapa 1)
 * Tokens semânticos, tipografia, tema escuro unificado (body.dark-theme).
 */

:root {
    /* —— Cores semânticas (tema claro) —— */
    --color-bg: #f7f8fa;
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-border: #e2e8f0;
    --color-border-subtle: #edf2f7;
    --color-text: #0D0D0D;
    --color-text-muted: #5a5a5a;
    --color-text-inverse: #ffffff;
    --color-brand: #0D0D0D;
    --color-brand-hover: #BF0404;
    --color-accent: #F20519;
    --color-accent-hover: #BF0404;
    --color-accent-bright: #F20519;
    --color-danger: #e53e3e;
    --color-success: #38a169;
    --color-warning: #d69e2e;

    /* Focus ring (marca vermelha) */
    --focus-ring-color: rgba(242, 5, 25, 0.25);
    --focus-ring: 0 0 0 0.2rem var(--focus-ring-color);
    --focus-border-color: rgba(242, 5, 25, 0.55);

    /* —— Tipografia —— */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;

    /* —— Espaçamento —— */
    --space-section: 3rem;
    --space-section-mobile: 2rem;
    --card-padding-mobile: 1rem;
    --card-padding-desktop: 1.25rem;
    --catalog-layout-max-width: 1280px;
    --product-card-gap-mobile: 1rem;
    --product-card-gap-desktop: 1.25rem;
    --content-max-width: 720px;
    --form-max-width: 460px;
    --checkout-max-width: 1180px;
    --cart-max-width: 1140px;
    --commerce-panel-padding-mobile: var(--card-padding-mobile);
    --commerce-panel-padding-desktop: 1.5rem;
    --commerce-panel-header-padding: 0.85rem 1.15rem;
    --commerce-summary-sticky-top: calc(var(--header-height, 72px) + 1rem);
    --commerce-panel-border: 1px solid var(--color-border);
    --commerce-panel-shadow: var(--shadow-sm);

    /* —— Raio —— */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;
    --border-radius: var(--radius-md);

    /* —— Sombras —— */
    --shadow-sm: 0 1px 3px rgba(45, 55, 72, 0.08);
    --shadow-md: 0 4px 12px rgba(45, 55, 72, 0.1);
    --shadow-lg: 0 10px 28px rgba(45, 55, 72, 0.12);
    --shadow-soft: var(--shadow-md);
    --shadow-hover: var(--shadow-lg);
    --shadow-success: 0 4px 12px rgba(242, 5, 25, 0.2);

    /* —— Transições —— */
    --transition-fast: 150ms ease;
    --transition: 200ms cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 300ms cubic-bezier(0.25, 0.8, 0.25, 1);

    /* —— Ícones —— */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;

    /* —— Camadas z-index —— */
    --z-dropdown: 1050;
    --z-header: 1100;
    --z-sticky: 1200;
    --z-modal: 1300;
    --z-toast: 1400;
    --z-fab: 1350;

    /* —— Vidro / gradientes —— */
    --glass-bg: rgba(13, 13, 13, 0.08);
    --glass-border: rgba(13, 13, 13, 0.15);
    --glass-bg-dark: rgba(255, 255, 255, 0.08);
    --glass-border-dark: rgba(255, 255, 255, 0.12);
    --primary-gradient: linear-gradient(135deg, #0D0D0D 0%, #BF0404 100%);
    --secondary-gradient: linear-gradient(135deg, #f4f4f4 0%, #e9ecef 100%);

    /* —— Aliases legados (compatibilidade com styles.css existente) —— */
    --primary-color: var(--color-brand);
    --primary-solid: var(--color-brand);
    --secondary-color: var(--color-accent);
    --secondary-solid: var(--color-accent);
    --success-solid: var(--color-accent);
    --accent-color: var(--color-surface);
    --accent-solid: var(--color-surface);
    --dark-solid: var(--color-brand-hover);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-muted);
    --text-light: var(--color-text-inverse);

    /* Bootstrap — sem azul #0d6efd no catálogo (Fase 13 QA) */
    --bs-primary: #F20519;
    --bs-primary-rgb: 242, 5, 25;
    --bs-link-color: var(--color-brand);
    --bs-link-hover-color: var(--color-brand-hover);
    --bs-focus-ring-color: var(--focus-ring-color);
}

/* —— Tema escuro: html (carga antecipada) + body.dark-theme (componentes) —— */
html.catalogo-theme-dark,
body.dark-theme {
    --color-bg: #0D0D0D;
    --color-surface: #161616;
    --color-surface-elevated: #1f1f1f;
    --color-border: #2a2a2a;
    --color-border-subtle: #1a1a1a;
    --color-text: #f5f5f5;
    --color-text-muted: #a3a3a3;
    --color-text-inverse: #0D0D0D;
    --color-brand: #f5f5f5;
    --color-brand-hover: #F20519;
    --color-accent-bright: #F20519;
    --focus-ring-color: rgba(242, 5, 25, 0.35);
    --focus-border-color: rgba(242, 5, 25, 0.5);
    --glass-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.4);
    --secondary-gradient: linear-gradient(135deg, #161616 0%, #0D0D0D 100%);
}

/* —— Base global —— */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    min-height: 100vh;
    transition: background-color var(--transition-slow), color var(--transition-slow);
}

/* —— Escala tipográfica —— */
.text-xs { font-size: var(--text-xs); line-height: var(--leading-normal); }
.text-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.text-base { font-size: var(--text-base); line-height: var(--leading-normal); }
.text-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.text-xl { font-size: var(--text-xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }

.heading-page {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
}

.heading-section {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--color-text);
}

.text-muted-ds {
    color: var(--color-text-muted);
}

/* —— Ícones padronizados —— */
.icon-sm { font-size: var(--icon-sm); line-height: 1; }
.icon-md { font-size: var(--icon-md); line-height: 1; }
.icon-lg { font-size: var(--icon-lg); line-height: 1; }
.icon-xl { font-size: 3rem; line-height: 1; }
.icon-2xl { font-size: 4rem; line-height: 1; }

/* —— Espaçamento de seção —— */
.section-spacing {
    padding-top: var(--space-section-mobile);
    padding-bottom: var(--space-section-mobile);
}

@media (min-width: 768px) {
    .section-spacing {
        padding-top: var(--space-section);
        padding-bottom: var(--space-section);
    }
}

/* —— Larguras máximas de conteúdo —— */
.content-readable {
    max-width: var(--content-max-width);
    margin-left: auto;
    margin-right: auto;
}

.form-container-narrow {
    max-width: var(--form-max-width);
    margin-left: auto;
    margin-right: auto;
}

.checkout-container-wide {
    max-width: var(--checkout-max-width);
    margin-left: auto;
    margin-right: auto;
}

.cart-layout-wide {
    max-width: var(--cart-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* —— Cabeçalho de página interna —— */
.page-header {
    margin-bottom: 1.5rem;
}

.page-header__breadcrumb {
    margin-bottom: 0.65rem;
}

.page-header__breadcrumb .breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.page-header__breadcrumb .breadcrumb a:hover,
.breadcrumb a:hover {
    color: var(--color-accent-hover);
}

.page-header__breadcrumb .breadcrumb-item.active {
    color: var(--color-text-muted);
}

.page-header__title {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
}

.page-header__subtitle {
    margin: 0.35rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* —— Focus acessível —— */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
    border-color: var(--color-brand);
    box-shadow: var(--focus-ring);
}

/* —— Superfícies reutilizáveis —— */
.surface-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* —— Reduzir animações quando solicitado —— */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    img.product-image.is-loading,
    .footer-section,
    .whatsapp-float.whatsapp-float--intro,
    .logo-skeleton__shimmer,
    .footer-logo-skeleton,
    .footer-skeleton-line,
    .skeleton-block,
    .skeleton-line,
    .ui-skeleton-line {
        animation: none !important;
    }
}

/* =============================================================================
   Etapa 8 — Polish (micro-interações, a11y, toasts, imagens)
   ============================================================================= */

/* Contraste Bootstrap .text-muted */
.text-muted {
    color: var(--color-text-muted) !important;
}

/* Feedback de clique em botões */
.btn:active:not(:disabled),
.add-to-cart-btn:active:not(.disabled),
.catalog-toolbar__btn:active,
.header-icon-btn:active,
.quantity-btn:active,
.doc-toggle__btn:active:not(:disabled),
.btn-cart-finalize:active:not(:disabled),
.btn-auth-primary:active:not(:disabled),
.social-link:active,
.footer-link:active {
    transform: scale(0.97);
}

/* Áreas clicáveis mínimas no touch */
@media (pointer: coarse) {
    .header-icon-btn,
    .btn-icon-touch,
    .quantity-btn,
    .back-to-top,
    .whatsapp-float {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Imagens — padrão vitrine/listagem */
.product-image,
.product-image-cart,
.cart-item-image {
    object-fit: contain;
    object-position: center;
    background: var(--color-border-subtle);
}

body.dark-theme .product-image,
body.dark-theme .product-image-cart,
body.dark-theme .cart-item-image {
    background: var(--color-surface-elevated);
}

/* Placeholder enquanto imagem carrega */
img.product-image[loading="lazy"]:not([src=""]) {
    background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-surface) 50%, var(--color-border-subtle) 75%);
    background-size: 200% 100%;
}

img.product-image.is-loading {
    animation: imgShimmer 1.2s ease-in-out infinite;
}

@keyframes imgShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    img.product-image.is-loading {
        animation: none;
    }
}

/* Toasts do carrinho — não conflitam com WhatsApp (canto inferior direito) */
.catalog-toast-host {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}

.catalog-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-inverse);
    animation: catalogToastIn var(--transition-slow) ease-out;
}

.catalog-toast--success {
    background: var(--color-success);
}

.catalog-toast--error {
    background: var(--color-danger);
}

body.dark-theme .catalog-toast--success {
    background: #2f855a;
    color: #f0fff4;
    border: 1px solid rgba(198, 246, 213, 0.28);
}

body.dark-theme .catalog-toast--error {
    background: #c53030;
    color: #fff5f5;
    border: 1px solid rgba(254, 215, 215, 0.28);
}

body.dark-theme .catalog-toast__close:focus-visible {
    outline-color: rgba(255, 255, 255, 0.75);
}

.catalog-toast__icon {
    font-size: var(--icon-lg);
    flex-shrink: 0;
}

.catalog-toast__message {
    flex: 1;
    line-height: var(--leading-normal);
}

.catalog-toast__close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.85;
    padding: 0.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-sm);
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition);
}

.catalog-toast__close:hover {
    opacity: 1;
}

.catalog-toast__close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.catalog-toast.is-leaving {
    animation: catalogToastOut var(--transition) ease-in forwards;
}

@keyframes catalogToastIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes catalogToastOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (min-width: 768px) {
    .catalog-toast-host {
        top: 1.25rem;
        left: 1.25rem;
        transform: none;
        width: min(380px, calc(100vw - 2.5rem));
    }
}

/* =============================================================================
   Fase 1 — Botões globais e overrides Bootstrap (estética)
   ============================================================================= */

.btn-brand {
    --bs-btn-color: var(--color-text-inverse);
    --bs-btn-bg: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--color-brand-hover);
    --bs-btn-hover-border-color: var(--color-brand-hover);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--color-brand-hover);
    --bs-btn-active-border-color: var(--color-brand-hover);
    --bs-btn-disabled-color: var(--color-text-inverse);
    --bs-btn-disabled-bg: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-text-muted);
}

.btn-accent {
    --bs-btn-color: var(--color-text-inverse);
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--color-accent-hover);
    --bs-btn-hover-border-color: var(--color-accent-hover);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--color-accent-hover);
    --bs-btn-active-border-color: var(--color-accent-hover);
    --bs-btn-disabled-color: var(--color-text-inverse);
    --bs-btn-disabled-bg: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-text-muted);
}

.btn-primary {
    --bs-btn-color: var(--color-text-inverse);
    --bs-btn-bg: var(--color-accent);
    --bs-btn-border-color: var(--color-accent);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--color-accent-hover);
    --bs-btn-hover-border-color: var(--color-accent-hover);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--color-accent-hover);
    --bs-btn-active-border-color: var(--color-accent-hover);
    --bs-btn-disabled-color: var(--color-text-inverse);
    --bs-btn-disabled-bg: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-text-muted);
    --bs-btn-focus-shadow-rgb: 242, 5, 25;
    font-weight: 600;
    border-radius: var(--radius-md);
    padding: 0.65rem 1.25rem;
    box-shadow: var(--shadow-sm);
    text-transform: none;
    letter-spacing: normal;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.text-primary {
    color: var(--color-brand) !important;
}

.text-brand {
    color: var(--color-brand) !important;
}

/* Fase 13 — CTA “Adicionar ao carrinho” unificado (vitrine, produto, sticky) */
.add-to-cart-btn,
.btn-adicionar-carrinho,
.product-sticky-bar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
    transition:
        background-color var(--transition),
        box-shadow var(--transition),
        color var(--transition);
}

.add-to-cart-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.btn-adicionar-carrinho {
    font-size: var(--text-base);
    padding: 0.75rem 1.25rem;
}

.add-to-cart-btn:hover:not(:disabled):not(.disabled),
.btn-adicionar-carrinho:hover:not(:disabled):not(.disabled),
.product-sticky-bar__cta:hover:not(:disabled) {
    background: var(--color-accent-hover);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
    transform: none;
}

.add-to-cart-btn:disabled,
.add-to-cart-btn.disabled,
.btn-adicionar-carrinho:disabled,
.btn-adicionar-carrinho.disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 1;
}

.btn-outline-primary {
    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    --bs-btn-active-color: var(--color-text-inverse);
    --bs-btn-active-bg: var(--color-brand-hover);
    --bs-btn-active-border-color: var(--color-brand-hover);
    --bs-btn-disabled-color: var(--color-text-muted);
    --bs-btn-disabled-border-color: var(--color-border);
    font-weight: 600;
    border-radius: var(--radius-md);
    border-width: 1px;
}

.btn-outline-brand {
    --bs-btn-color: var(--color-brand);
    --bs-btn-border-color: var(--color-brand);
    --bs-btn-hover-color: var(--color-text-inverse);
    --bs-btn-hover-bg: var(--color-brand);
    --bs-btn-hover-border-color: var(--color-brand);
    font-weight: 600;
    border-radius: var(--radius-md);
}

.btn-secondary {
    --bs-btn-bg: var(--color-border-subtle);
    --bs-btn-border-color: var(--color-border);
    --bs-btn-color: var(--color-text);
    --bs-btn-hover-bg: var(--color-border);
    --bs-btn-hover-border-color: var(--color-border);
    --bs-btn-hover-color: var(--color-text);
    border-radius: var(--radius-md);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--text-base);
    border-radius: var(--radius-md);
}

.btn-sm {
    border-radius: var(--radius-sm);
}

/* Preços e destaque comercial */
.text-price,
.price-display {
    color: var(--color-accent) !important;
    font-size: var(--text-xl);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-shadow: none;
    line-height: var(--leading-tight);
}

.product-price,
.product-price-promo,
.product-price-cart,
.subtotal-price,
.total-price,
.price-block__current {
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

.product-price:not(.product-price--consulta),
.product-price-promo {
    font-size: var(--text-xl);
    font-weight: 700;
}

.cart-summary-card__total .total-price,
.checkout-summary-totals .total-price,
.price-block__current {
    font-size: var(--text-2xl);
}

.product-price-promo.text-success,
.product-price-promo {
    color: var(--color-accent) !important;
}

/* Badges Bootstrap → marca */
.badge.bg-primary {
    background-color: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
}

.badge.bg-success {
    background-color: var(--color-accent) !important;
    color: var(--color-text-inverse) !important;
}

.badge.bg-secondary {
    background-color: var(--color-text-muted) !important;
    color: var(--color-text-inverse) !important;
}

.badge.bg-danger {
    background-color: var(--color-danger) !important;
}

.badge.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-text) !important;
}

/* Alerts */
.alert-success {
    --bs-alert-color: #276749;
    --bs-alert-bg: rgba(242, 5, 25, 0.12);
    --bs-alert-border-color: rgba(242, 5, 25, 0.35);
}

.alert-danger {
    --bs-alert-bg: rgba(229, 62, 62, 0.08);
    --bs-alert-border-color: rgba(229, 62, 62, 0.25);
}

.alert-warning {
    --bs-alert-bg: rgba(214, 158, 46, 0.1);
    --bs-alert-border-color: rgba(214, 158, 46, 0.3);
}

.alert-info {
    --bs-alert-color: var(--color-text);
    --bs-alert-bg: var(--color-border-subtle);
    --bs-alert-border-color: var(--color-border);
}

body.dark-theme .alert-success {
    --bs-alert-color: #c6f6d5;
    --bs-alert-bg: rgba(242, 5, 25, 0.15);
}

body.dark-theme .alert-danger {
    --bs-alert-color: #fed7d7;
    --bs-alert-bg: rgba(229, 62, 62, 0.15);
}

/* =============================================================================
   Fase 9 — Tema escuro: cobertura global visual
   ============================================================================= */

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme textarea.form-control {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark-theme .form-control::placeholder,
body.dark-theme textarea.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 0.9;
}

body.dark-theme .form-control:disabled,
body.dark-theme .form-select:disabled {
    background-color: var(--color-border-subtle);
    color: var(--color-text-muted);
}

body.dark-theme .input-group-text {
    background: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-text-muted);
}

/* Modal */
body.dark-theme .modal-content {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

body.dark-theme .modal-header {
    background: var(--color-surface-elevated);
    border-bottom-color: var(--color-border);
}

body.dark-theme .modal-footer {
    background: var(--color-border-subtle);
    border-top-color: var(--color-border);
}

body.dark-theme .modal-title {
    color: var(--color-text);
}

body.dark-theme .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Dropdown (header / Bootstrap) */
body.dark-theme .dropdown-menu {
    background: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
}

body.dark-theme .dropdown-item {
    color: var(--color-text);
}

body.dark-theme .dropdown-item:hover,
body.dark-theme .dropdown-item:focus {
    background: rgba(242, 5, 25, 0.1);
    color: var(--color-accent-bright);
}

body.dark-theme .dropdown-divider {
    border-color: var(--color-border);
}

/* Breadcrumbs e links internos */
body.dark-theme .page-header__breadcrumb .breadcrumb a:hover,
body.dark-theme .breadcrumb a:hover {
    color: var(--color-accent-bright);
}

body.dark-theme .page-header__breadcrumb .breadcrumb-item.active {
    color: var(--color-text-muted);
}

/* Preços — contraste no escuro */
body.dark-theme .price-display,
body.dark-theme .text-price,
body.dark-theme .product-price,
body.dark-theme .product-price-promo,
body.dark-theme .product-price-cart,
body.dark-theme .subtotal-price,
body.dark-theme .quantity-modal__price,
body.dark-theme .cart-item-price {
    color: var(--color-accent-bright) !important;
}

/* Imagens e shimmer */
body.dark-theme img.product-image[loading="lazy"]:not([src=""]) {
    background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-surface-elevated) 50%, var(--color-border-subtle) 75%);
    background-size: 200% 100%;
}

body.dark-theme .ui-skeleton-line,
body.dark-theme .skeleton-block,
body.dark-theme .skeleton-line {
    background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-surface-elevated) 50%, var(--color-border-subtle) 75%);
    background-size: 200% 100%;
}

body.dark-theme .product-card__media {
    background:
        radial-gradient(ellipse 80% 70% at 50% 30%, rgba(242, 5, 25, 0.08), transparent 70%),
        var(--color-surface-elevated);
    border-bottom-color: var(--color-border);
}

/* —— Skeletons de carregamento (sem texto "Carregando...") —— */
.ui-skeleton-line {
    display: block;
    height: 0.85rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-border) 50%, var(--color-border-subtle) 75%);
    background-size: 200% 100%;
    animation: imgShimmer 1.2s ease-in-out infinite;
}

.ui-skeleton-line--sm { width: 45%; max-width: 120px; }
.ui-skeleton-line--md { width: 70%; max-width: 220px; }
.ui-skeleton-line--lg { width: 90%; max-width: 320px; }
.ui-skeleton-line--full { width: 100%; }

.contact-value--loading .ui-skeleton-line + .ui-skeleton-line {
    margin-top: 0.35rem;
}

/* —— Skip link (acessibilidade) —— */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: calc(var(--z-header) + 10);
    padding: 0.65rem 1rem;
    background: var(--color-brand);
    color: var(--color-text-inverse);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: top var(--transition);
}

.skip-link:focus {
    top: 1rem;
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* =============================================================================
   Fase 10 — Tipografia, ícones e empty states
   ============================================================================= */

.icon-sm { font-size: var(--icon-sm); width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { font-size: var(--icon-md); width: var(--icon-md); height: var(--icon-md); }
.icon-lg { font-size: var(--icon-lg); width: var(--icon-lg); height: var(--icon-lg); }

.icon-xl {
    font-size: calc(var(--icon-lg) * 2);
    line-height: 1;
}

.catalog-empty-state__icon,
.cart-empty > i:first-child,
.cart-empty-modal > i:first-child {
    font-size: calc(var(--icon-lg) * 2);
    line-height: 1;
    display: block;
    margin: 0 auto 1rem;
    color: var(--color-text-muted);
    opacity: 0.65;
}

.catalog-empty-state i {
    font-size: calc(var(--icon-lg) * 2);
    line-height: 1;
}

/* =============================================================================
   Fase 11 — Responsividade e ritmo visual (global)
   ============================================================================= */

@media (min-width: 1440px) {
    body .container:not(.container-fluid) {
        max-width: var(--catalog-layout-max-width);
    }
}

@media print {
    .skip-link,
    .whatsapp-float,
    .back-to-top,
    .header-icon-btn,
    .catalog-toolbar,
    .catalog-quick-search,
    .add-to-cart-btn,
    .product-sticky-bar,
    .theme-toggle,
    #cart-modal,
    .catalog-toast-host,
    .footer-social-links,
    .header-nav,
    .header-search-form-wrap {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    .product-card,
    .cart-item-card,
    .checkout-summary-card,
    .checkout-panel,
    .order-details,
    .order-summary-card,
    .contact-info-card {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }

    .checkout-panel .panel-header,
    .order-success-hero {
        background: #f0f0f0 !important;
        color: #000 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    a[href]::after {
        content: none !important;
    }

    header {
        position: static !important;
        box-shadow: none !important;
        border-bottom: 1px solid #ccc;
    }

    .footer-modern {
        margin-top: 2rem;
        border-top: 2px solid #F20519;
        page-break-before: auto;
    }
}