/**
 * Montecarlo Catalog — Salient-compatible styles.
 * Uses theme's color variables and grid patterns.
 */

/* ============================================
   Design tokens — single source of truth
   (approved: docs/ui-refinement-plan.md §3)
   ============================================ */
:root {
    /* Brand (identidade — não mudar o vermelho) */
    --mc-brand:        #cd1719;
    --mc-brand-hover:  #a81214;
    --mc-brand-soft:   rgba(205, 23, 25, 0.08);   /* bg de destaque ativo */
    --mc-brand-ring:   rgba(205, 23, 25, 0.18);   /* focus ring */

    /* Texto (todos ≥4.5:1 sobre branco) */
    --mc-text:        #212121;   /* títulos/info principal */
    --mc-text-strong: #111111;
    --mc-text-muted:  #5f6368;   /* secundário */
    --mc-text-faint:  #6f6f6f;   /* terciário/placeholders (4.73:1 sobre --mc-surface-muted, 5.02:1 sobre branco) */

    /* Superfícies e bordas */
    --mc-surface:        #ffffff;
    --mc-surface-muted:  #f7f8fa;
    --mc-border:         #e5e7eb;
    --mc-border-strong:  #d1d5db;
    --mc-divider:        rgba(17, 24, 39, 0.08);

    /* Status */
    --mc-success:      #1e7e34;   /* texto/ícone */
    --mc-success-bg:   #e8f5ec;
    --mc-danger:       #c0392b;   /* ERROS — único vermelho de erro */
    --mc-danger-bg:    #fdf0ef;
    --mc-warning:      #906500;   /* texto (4.84:1 sobre --mc-warning-bg) */
    --mc-warning-bg:   #fef7e0;

    /* Forma */
    --mc-radius-sm: 6px;    /* inputs */
    --mc-radius-md: 8px;    /* cards, botões, itens, thumbs */
    --mc-radius-lg: 12px;   /* toast, modal, summary card */
    --mc-radius-pill: 999px;/* badges, contagem */

    /* Espaçamento (escala 4px) */
    --mc-space-1: 4px;  --mc-space-2: 8px;  --mc-space-3: 12px;
    --mc-space-4: 16px; --mc-space-5: 20px; --mc-space-6: 24px;
    --mc-space-8: 32px;

    /* Elevação — hover/cards ≤8px blur (regra impeccable) */
    --mc-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.08);
    /* Overlays flutuantes — blur >8px é intencional (camada acima do conteúdo,
       exceção documentada à regra ≤8px do plano §"Elevação") */
    --mc-shadow-modal:    -4px 0 16px rgba(0, 0, 0, 0.12);  /* offcanvas (gaveta) + toast */
    --mc-shadow-overlay:  0 8px 24px rgba(0, 0, 0, 0.2);    /* quickview */
    --mc-shadow-lightbox: 0 8px 40px rgba(0, 0, 0, 0.3);    /* lightbox de imagem */
}

/* Outlet flag — top-right corner of card */
.mc-flag-outlet {
    position: absolute;
    top: var(--mc-space-2);
    right: var(--mc-space-2);
    background: #666; /* superfície escura decorativa (branco sobre #666 = 5.7:1) */
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: var(--mc-radius-pill);
    line-height: 1;
    z-index: 2;
    pointer-events: none;
}

/* Single product: above title, inline (not absolute) */
.mc-flag-outlet--single {
    position: static;
    display: inline-block;
    margin-bottom: 0.5em;
}

/* Badges (legacy) */
.mc-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--mc-radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mc-badge-outlet {
    background: var(--mc-brand);
    color: #fff;
}
.mc-badge-normal {
    background: var(--mc-success);
    color: #fff;
}

/* Filters bar */
.mc-filters {
    margin-bottom: 25px;
    padding: var(--mc-space-5);
    background: var(--mc-surface-muted);
    border-radius: var(--mc-radius-md);
}
.mc-filters-form {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.mc-filters-form select,
.mc-filters-form input[type="search"] {
    min-width: 180px;
}
.mc-filters-form .mc-btn {
    background: var(--mc-brand);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button */
    cursor: pointer;
    font-weight: 600;
}
/* Raio do botão do filtro — (0,2,2)!important vence o button do tema (0,2,1)!important */
form.mc-filters-form button.mc-btn {
    border-radius: var(--mc-radius-md) !important;
}

/* Toolbar */
.mc-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* mobile: contador e select quebram para linha própria */
    row-gap: var(--mc-space-2);
    margin-bottom: var(--mc-space-5);
    padding-bottom: var(--mc-space-2);
    border-bottom: 1px solid var(--mc-border);
}
.mc-count {
    color: var(--mc-text-muted);
    font-size: 14px;
    white-space: nowrap;
}

/* Select de ordenação: o tema força width:100% em select, o que espreme o
   contador e o quebra para uma segunda linha. Contido e encolhível para
   contador e select dividirem a mesma linha no desktop. */
.mc-toolbar .mc-order {
    width: auto;
    min-width: 0;
    max-width: 200px;
    flex-shrink: 1;
    font-size: 14px;
}

/* Product Grid — uses Salient column system */
.mc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--mc-space-5);
    margin-bottom: var(--mc-space-8);
}

/* Empty state */
.mc-grid-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    color: var(--mc-text-muted);
    font-size: 15px;
    background: var(--mc-surface-muted);
    border: 1px dashed var(--mc-border-strong);
    border-radius: var(--mc-radius-md);
}

/* Card — coluna flex: imagem fixa, corpo, footer ancorado na base do card.
   O alinhamento interno nunca muda com tamanho de imagem ou nº de linhas do título. */
.mc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    overflow: hidden;
    transition: box-shadow 0.2s ease-out, transform 0.2s ease-out;
}
.mc-card:hover {
    box-shadow: var(--mc-shadow-hover);
    transform: translateY(-3px);
}
.mc-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;   /* absorve o espaço livre da linha; footer fica na base */
    min-height: 0;
}
.mc-card-img {
    width: 100%;
    aspect-ratio: 4 / 3; /* altura uniforme — vence o height:auto do tema */
    height: auto;
    object-fit: contain;
    padding: var(--mc-space-4);
    background: var(--mc-surface);
    box-sizing: border-box;
    display: block;
    flex-shrink: 0; /* a caixa 4/3 nunca encolhe dentro do link flex */
}
.mc-card-img-placeholder {
    aspect-ratio: 4 / 3;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-surface-muted);
    color: var(--mc-text-faint);
    font-size: 14px;
    flex-shrink: 0; /* mesma caixa fixa do img */
}
.mc-card-body {
    padding: var(--mc-space-4);
    border-top: 1px solid var(--mc-divider);
}
.mc-card-title {
    font-size: 14px;
    line-height: 1.4;
    margin: var(--mc-space-2) 0;
    color: var(--mc-text);
    font-weight: 500;
    /* Área de título fixa em exatamente 2 linhas (14px × 1.4 × 2 = 2.8em):
       títulos de 1 ou 2 linhas ocupam o mesmo espaço e a marca alinha na mesma
       base em todos os cards. Títulos maiores truncam com reticências na 2ª linha. */
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mc-card-marca {
    font-size: 12px;
    color: var(--mc-text-muted);
    display: block;
    margin-bottom: var(--mc-space-2);
}

/* Add to cart button — altura 36px unificada com o stepper (plano §4.2) */
.mc-btn-add-cart {
    background: var(--mc-brand);
    color: #fff;
    border: none;
    height: 36px;
    padding: 0 16px;
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button — manter o token */
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.15s ease-out, transform 0.15s ease-out;
}
.mc-btn-add-cart:hover {
    background: var(--mc-brand-hover);
}
.mc-btn-add-cart:active {
    transform: translateY(1px);
}
.mc-add-cart-wrapper .mc-qty-input {
    width: 44px;
    height: 36px;
    padding: 0;
    text-align: center;
    border: 1px solid var(--mc-border-strong);
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 0.9em;
    color: var(--mc-text);
    background: var(--mc-surface);
    box-sizing: border-box;
    flex-shrink: 0; /* o stepper nunca colapsa quando o botão tem flex:1 */
    -moz-appearance: textfield;
}

.mc-add-cart-wrapper .mc-qty-input::-webkit-inner-spin-button,
.mc-add-cart-wrapper .mc-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mc-add-cart-wrapper {
    display: flex;
    align-items: center;
    column-gap: 0;      /* stepper é um grupo único — minus/input/plus contíguos */
    row-gap: var(--mc-space-2); /* espaço vertical quando o botão quebra de linha */
    margin-top: var(--mc-space-2);
}

/* Stepper como grupo próprio (borda + radius próprios) — separado do botão */
.mc-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--mc-border-strong);
    background: var(--mc-surface);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    color: var(--mc-text);
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
    padding: 0;
    box-sizing: border-box;
    flex-shrink: 0; /* o stepper nunca colapsa quando o botão tem flex:1 */
}

.mc-qty-btn:hover {
    background: var(--mc-surface-muted);
}

.mc-qty-btn:active {
    background: var(--mc-border);
}

/* Cantos do stepper — (0,3,0)+!important: o tema (body[data-button-style] button,
   (0,2,1)!important) força 4px em todo button; só especificidade maior aplica. */
.mc-add-cart-wrapper .mc-qty-btn.mc-qty-minus,
.mc-offcanvas-item-qty .mc-qty-btn.mc-qty-minus,
.mc-quote-summary-qty .mc-qty-btn.mc-qty-minus {
    border-radius: var(--mc-radius-sm) 0 0 var(--mc-radius-sm) !important;
}

.mc-add-cart-wrapper .mc-qty-btn.mc-qty-plus,
.mc-offcanvas-item-qty .mc-qty-btn.mc-qty-plus,
.mc-quote-summary-qty .mc-qty-btn.mc-qty-plus {
    border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0 !important;
}

.mc-add-cart-wrapper .mc-btn-add-cart {
    width: auto;
    flex: 1;
    margin-left: var(--mc-space-2); /* 8px apenas entre o grupo do stepper e o botão */
}
.mc-btn-primary {
    background: var(--mc-brand);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button */
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.15s ease-out, transform 0.15s ease-out;
}
.mc-btn-primary:hover {
    background: var(--mc-brand-hover);
}
.mc-btn-primary:active {
    transform: translateY(1px);
}

/* Pagination */
.mc-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--mc-space-1);
    margin: var(--mc-space-8) 0;
}
.mc-page {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-md);
    color: var(--mc-text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}
.mc-page-active {
    background: var(--mc-brand);
    color: #fff;
    border-color: var(--mc-brand);
}
.mc-page:hover:not(.mc-page-active) {
    background: var(--mc-brand-soft);
}
.mc-page-nav-disabled {
    color: var(--mc-text-muted);
    border-color: var(--mc-border);
    cursor: default;
    pointer-events: none;
}
.mc-page-dots {
    padding: 8px 2px;
    color: var(--mc-text-muted);
    font-size: 14px;
    user-select: none;
}

/* Product Single */
.mc-product-single {
    display: flex;
    gap: 40px;
    margin: 40px 0;
    flex-wrap: wrap;
}
.mc-product-image {
    flex: 0 0 400px;
    max-width: 100%;
}
.mc-product-image-link {
    display: block;
    cursor: zoom-in;
}
.mc-product-image-img {
    width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
    border-radius: var(--mc-radius-md);
    transition: opacity 0.2s;
}
.mc-product-image-img:hover {
    opacity: 0.9;
}
.mc-product-info {
    flex: 1;
    min-width: 300px;
}
.mc-product-title {
    font-size: 26px;
    margin-bottom: 5px;
}
.mc-product-sku {
    color: var(--mc-text-muted);
    font-size: 14px;
    margin-bottom: 15px;
}
.mc-product-specs {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
}
.mc-product-specs th,
.mc-product-specs td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mc-divider);
    text-align: left;
    font-size: 14px;
}
.mc-product-specs th {
    width: 150px;
    color: var(--mc-text-muted);
    font-weight: 500;
}
.mc-no-image {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-surface-muted);
    color: var(--mc-text-faint);
}

/* Notices */
.mc-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #333; /* superfície escura (branco sobre #333 = 12.6:1) */
    color: #fff;
    padding: 12px 24px;
    border-radius: var(--mc-radius-lg);
    font-size: 14px;
    /* Above the quick-view modal/offcanvas (100001) and toasts (100002) so
       the cart confirmation stays fully visible when adding from the modal. */
    z-index: 100003;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.mc-notice-show {
    opacity: 1;
    transform: translateY(0);
}

/* Quote form */
.mc-quote-form {
    margin: var(--mc-space-8) 0;
}
.mc-quote-form input,
.mc-quote-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
}
.mc-success { color: var(--mc-success); padding: 12px; background: var(--mc-success-bg); border-radius: var(--mc-radius-sm); }
.mc-error   { color: var(--mc-danger); padding: 12px; background: var(--mc-danger-bg); border-radius: var(--mc-radius-sm); }
.mc-warning { color: var(--mc-warning); padding: 12px; background: var(--mc-warning-bg); border-radius: var(--mc-radius-sm); }

/* Responsive */
@media (max-width: 768px) {
    .mc-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .mc-filters-form {
        flex-direction: column;
    }
    .mc-filters-form select,
    .mc-filters-form input[type="search"] {
        width: 100%;
        min-width: auto;
    }
    .mc-product-single {
        flex-direction: column;
    }
    .mc-product-image {
        flex: 1;
    }
}

/* ============================================
   MC Catalog - Filter Sidebar
   Works with [mc_catalogo] shortcode and
   the page-catalogo.php template.
   ============================================ */

.mc-sidebar {
    font-size: 0.9em;
}

.mc-sidebar-form {
    /* form wraps everything */
}

.mc-sidebar-section {
    margin-bottom: 1.5em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--mc-divider);
}

.mc-sidebar-section:last-child {
    border-bottom: none;
}

.mc-sidebar-heading {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: var(--mc-space-2);
    cursor: pointer;
    user-select: none;
}

.mc-sidebar details > .mc-sidebar-heading {
    list-style: none;
}

.mc-sidebar details > .mc-sidebar-heading::-webkit-details-marker,
.mc-sidebar details > .mc-sidebar-heading::marker {
    display: none;
    content: '';
}

.mc-sidebar details > .mc-sidebar-heading::before {
    content: '\25B8 ';
    font-size: 0.8em;
}

.mc-sidebar details[open] > .mc-sidebar-heading::before {
    content: '\25BE ';
}

.mc-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-sidebar-item {
    margin: 0;
    padding: 0.35em 0;
}

.mc-sidebar-item a {
    color: var(--mc-text);
    text-decoration: none;
    padding: 0.15em 0;
    display: block;
    transition: color 0.15s ease-out;
    font-size: 0.95em;
}

.mc-sidebar-item a:hover {
    color: var(--mc-brand);
}

.mc-sidebar-item.active a {
    font-weight: 700;
    color: var(--mc-brand);
}

/* Sidebar list truncation ("Exibir mais") and filter search */
.mc-sidebar-item-collapsed,
.mc-sidebar-item-hidden {
    display: none;
}

.mc-sidebar-more[hidden] {
    display: none; /* defensive vs theme button rules */
}

.mc-sidebar-more {
    display: inline-block;
    background: transparent;
    border: none;
    padding: 0.25em 0;
    font-size: 0.85em;
    font-family: inherit;
    text-align: left;
    color: var(--mc-text-muted);
    cursor: pointer;
    transition: color 0.15s ease-out;
}

.mc-sidebar-more:hover,
.mc-sidebar-more:focus-visible {
    color: var(--mc-brand);
}

.mc-sidebar-search {
    width: 100%;
    padding: 0.6em 0.8em;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    font-size: 0.95em;
    background: transparent;
}

/* Sidebar inputs — o tema (input[type=...]) força 4px/borda própria;
   o âncora #sidebar (ID) garante os tokens. A busca fica transparente;
   o filtro mantém o fundo muted (o tema força #f1f1f1 em input[type=text],
   então o !important com âncora de ID é necessário). */
#sidebar .mc-sidebar-search {
    border: 1px solid var(--mc-border-strong) !important;
    border-radius: var(--mc-radius-sm) !important;
    background: transparent !important;
    color: var(--mc-text) !important;
}

#sidebar .mc-sidebar-filter-search {
    border: 1px solid var(--mc-border-strong) !important;
    border-radius: var(--mc-radius-sm) !important;
    background: var(--mc-surface-muted) !important;
    color: var(--mc-text) !important;
}

/* Foco por teclado nos inputs da sidebar — o bloco #sidebar acima usa
   !important na borda; o ring (--mc-brand-ring) é o indicador visível. */
#sidebar .mc-sidebar-search:focus-visible,
#sidebar .mc-sidebar-filter-search:focus-visible {
    border-color: var(--mc-brand) !important;
    background: var(--mc-surface) !important;
    box-shadow: 0 0 0 3px var(--mc-brand-ring) !important;
    outline: none;
}

/* Sidebar search submit — mc-btn family, compact and full-width under the input.
   Salient theme rules (button[type="submit"], .container-wrap button[type="submit"])
   fight this button with equal-or-higher specificity and !important, so the
   critical declarations are hardened with !important to stay predictable. */
.mc-sidebar-submit {
    width: 100% !important;
    margin-top: 0.6em;
    padding: 0.55em 1em !important;
    background: var(--mc-brand) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--mc-radius-md) !important;
    cursor: pointer;
    font-size: 0.9em !important;
    font-weight: 600;
    font-family: inherit !important;
    transition: background 0.2s;
}

.mc-sidebar-submit:hover,
.mc-sidebar-submit:focus-visible {
    background: var(--mc-brand-hover) !important;
}

/* Salient's body[data-form-submit="regular"] .container-wrap button[type="submit"]
   (0,3,2) !important wins over the base rule for padding; the catalog sidebar
   renders inside #sidebar, so anchor the padding there to stay deterministic. */
#sidebar .mc-sidebar-submit {
    padding: 0.55em 1em !important;
    border-radius: var(--mc-radius-md) !important; /* o ID vence o button do tema (0,2,1)!important */
}

/* Responsive: sidebar becomes top section on mobile */
@media (max-width: 768px) {
    .mc-sidebar {
        margin-bottom: 2em;
    }

    .mc-sidebar-section details {
        background: var(--mc-surface-muted);
        border-radius: var(--mc-radius-sm);
        padding: 0.5em 1em;
    }
}

/* Salient fixed sidebar compatibility */
#sidebar[data-fixed-on="desktop"] .mc-sidebar {
    /* inherit Salient's fixed sidebar behavior */
}

/* Sidebar active filters — "Limpar Filtros" button (now at bottom) */
.mc-sidebar-active-filters {
    margin-top: 1em;
    padding-top: 0.75em;
    border-top: 1px solid var(--mc-divider);
}

.mc-sidebar-clear {
    display: inline-block;
    font-size: 0.85em;
    color: var(--mc-danger);
    text-decoration: none;
    padding: 0.3em 0.8em;
    border: 1px solid var(--mc-danger);
    border-radius: var(--mc-radius-md);
    transition: all 0.15s ease-out;
}

.mc-sidebar-clear:hover {
    background: var(--mc-danger);
    color: #fff;
}

/* ========================================================================
   Header Cart Icon
   ======================================================================== */

.mc-header-cart {
    list-style: none;
    position: relative;
}

.mc-header-cart a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    position: relative;
    min-width: 38px;
    min-height: 38px;
}

.mc-cart-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

/* Fallback: SVG cart icon fills space when icon font is unavailable */
.mc-cart-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* (0,2,0): o tema força .sf-menu * { padding: 0 } (0,2,0, mesma força, carregado
   antes) e o ancoraria no desktop — o cart do header vive dentro de .sf-menu. */
.mc-header-cart .mc-cart-count {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--mc-brand);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px; /* 4px+4px = 18px (min-height) centram o texto mesmo quando o
                        JS força display:inline/block inline (vence o CSS não-!important) */
    border-radius: var(--mc-radius-pill);
    min-width: 16px;
    min-height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

/* Desktop cart icon in Salient header ul.buttons */
ul.buttons .mc-header-cart {
    display: inline-flex;
    align-items: center;
    list-style: none;
    margin: 0 5px;
}

/* Cart icon hidden by default — shown via JS when items exist */
.mc-header-cart {
    display: none !important;
}

.nectar-mobile-only .mc-header-cart {
    display: none !important;
}

.mc-header-cart.mc-cart-active {
    display: inline-flex !important;
}

ul.buttons .mc-header-cart.mc-cart-active {
    display: inline-flex !important;
}

.nectar-mobile-only .mc-header-cart.mc-cart-active {
    display: inline-block !important;
}

ul.buttons .mc-header-cart a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    position: relative;
    color: inherit;
}

ul.buttons .mc-header-cart a:hover {
    opacity: 0.8;
}

/* Tema Salient força #top nav > ul > li > a { display:block; padding:0 } no
   desktop (ID #top e [data-lhe=...] vencem o seletor de classes), deixando o
   ícone colado no canto. Âncora no #header-outer + !important restaura o flex
   centrado no círculo de toque 38×38. */
#header-outer ul.buttons .mc-header-cart a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
}

/* Mobile Cart Icon */
@media (max-width: 1000px) {
    .mc-header-cart {
        display: inline-block;
    }

    ul.buttons .mc-header-cart {
        margin: 0;
    }
}

/* ========================================================================
   Navbar Search (Salient header — same hooks as the cart icon)
   Markup rendered by MC_Catalog::render_header_search():
   <li class="mc-header-search"><form class="mc-navbar-search-form">
       <input type="search" name="mc_s" ...><button type="submit">...</button>
   </form></li>
   ======================================================================== */

.mc-header-search {
    list-style: none;
}

/* Desktop: compact flex item inside the header ul.buttons, like the cart */
ul.buttons .mc-header-search {
    display: inline-flex;
    align-items: center;
    list-style: none;
    margin: 0 5px;
}

.mc-navbar-search-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color-scheme: light; /* keep the native search cancel button dark on Salient's header */
}

.mc-navbar-search-form input[type="search"] {
    width: 130px;
    padding: 5px 10px;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    font-size: 13px;
    background: transparent;
    color: inherit;
}

.mc-navbar-search-form input[type="search"]::placeholder {
    color: var(--mc-text-faint);
    opacity: 1;
}

.mc-navbar-search-form input[type="search"]:focus {
    border-color: var(--mc-brand);
    outline: none;
}

.mc-navbar-search-form button[type="submit"] {
    padding: 5px 12px;
    background: var(--mc-brand);
    color: #fff;
    border: none;
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button */
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.2s;
}

.mc-navbar-search-form button[type="submit"]:hover,
.mc-navbar-search-form button[type="submit"]:focus-visible {
    background: var(--mc-brand-hover);
}

/* Raio do submit do header — (0,3,2)!important vence o button do tema (0,2,1)!important */
li.mc-header-search .mc-navbar-search-form button[type="submit"] {
    border-radius: var(--mc-radius-md) !important;
}

/* Mobile header: compact but still usable */
.nectar-mobile-only .mc-header-search {
    display: inline-flex;
    align-items: center;
    list-style: none;
    margin: 0;
}

@media (max-width: 1000px) {
    .mc-header-search {
        display: inline-block;
    }

    .mc-navbar-search-form input[type="search"] {
        width: 110px;
    }
}

@media (max-width: 480px) {
    .mc-navbar-search-form input[type="search"] {
        width: 90px;
        max-width: 38vw;
    }
}

/* ========================================================================
   Offcanvas Cart
   ======================================================================== */

.mc-offcanvas-bg {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.mc-offcanvas-bg--visible {
    opacity: 1;
    visibility: visible;
}

.mc-offcanvas {
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    max-width: 90vw;
    height: 100%;
    background: var(--mc-surface);
    z-index: 100001;
    display: flex;
    flex-direction: column;
    transition: right 0.35s ease;
    box-shadow: var(--mc-shadow-modal);
}

.mc-offcanvas--open {
    right: 0;
}

.mc-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mc-space-4) var(--mc-space-5);
    border-bottom: 1px solid var(--mc-divider);
    flex-shrink: 0;
}

.mc-offcanvas-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.mc-offcanvas-close {
    background: none;
    border: none;
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    color: var(--mc-text-muted);
    transition: color 0.15s ease-out;
}

.mc-offcanvas-close:hover {
    color: var(--mc-text-strong);
}

.mc-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--mc-space-4) var(--mc-space-5);
}

.mc-offcanvas-empty {
    text-align: center;
    color: var(--mc-text-muted);
    padding: 40px 0;
    font-size: 0.95em;
}

.mc-offcanvas-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--mc-space-3) 0;
    border-bottom: 1px solid var(--mc-divider);
}

.mc-offcanvas-item:last-child {
    border-bottom: none;
}

.mc-offcanvas-item-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface-muted);
    flex-shrink: 0;
}

.mc-offcanvas-item-info {
    flex: 1;
    min-width: 0;
}

.mc-offcanvas-item-sku {
    display: block;
    font-weight: 600;
    font-size: 0.85em;
    color: var(--mc-text);
}

.mc-offcanvas-item-desc {
    display: block;
    font-size: 0.78em;
    color: var(--mc-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.mc-offcanvas-item-qty {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Offcanvas qty stepper — compacto (32px), grupo com borda própria */
.mc-offcanvas-item-qty {
    display: flex;
    align-items: center;
    gap: 0;
}

.mc-offcanvas-item-qty .mc-qty-btn,
.mc-quote-summary-qty .mc-qty-btn {
    width: 32px;
    height: 32px;
}

.mc-offcanvas-item-qty .mc-qty-input,
.mc-quote-summary-qty .mc-qty-input {
    width: 36px;
    height: 32px;
    padding: 0;
    text-align: center;
    border: 1px solid var(--mc-border-strong);
    border-left: none;
    border-right: none;
    border-radius: 0;
    font-size: 0.85em;
    color: var(--mc-text);
    background: var(--mc-surface);
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.mc-offcanvas-item-qty .mc-qty-input::-webkit-inner-spin-button,
.mc-offcanvas-item-qty .mc-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mc-offcanvas-item-remove {
    background: none;
    border: none;
    font-size: 1.2em;
    color: var(--mc-danger); /* plano §4.3: remover é ação destrutiva — danger em repouso */
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s ease-out, background 0.15s ease-out, border-radius 0.15s ease-out;
}

.mc-offcanvas-item-remove:hover {
    background: var(--mc-danger);
    color: #fff;
    border-radius: var(--mc-radius-sm); /* hover consistente com o × do chip da sidebar */
}

.mc-offcanvas-footer {
    padding: var(--mc-space-4) var(--mc-space-5);
    border-top: 1px solid var(--mc-divider);
    flex-shrink: 0;
    text-align: center;
}

.mc-offcanvas-total {
    margin-bottom: 12px;
    font-size: 0.95em;
    color: var(--mc-text-muted);
}

.mc-offcanvas-footer .mc-btn-primary {
    display: block;
    width: 100%;
    margin-bottom: 8px;
}

/* Raio do CTA do offcanvas — (0,3,0)!important vence o button do tema (0,2,1)!important */
.mc-offcanvas .mc-offcanvas-footer .mc-btn-primary {
    border-radius: var(--mc-radius-md) !important;
}

.mc-offcanvas-continue {
    font-size: 0.82em;
    color: var(--mc-text-muted);
    text-decoration: underline;
}

.mc-offcanvas-continue:hover {
    color: var(--mc-text);
}

/* ========================================================================
   Offcanvas Quote Form
   ======================================================================== */

.mc-offcanvas-form h4 {
    margin: 0 0 8px;
    font-size: 1em;
    font-weight: 600;
    color: var(--mc-text);
}

.mc-offcanvas-form-summary {
    font-size: 0.85em;
    color: var(--mc-text-muted);
    margin-bottom: 16px;
}

.mc-form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    font-size: 0.9em;
    line-height: 1.4;
    background: var(--mc-surface);
    color: var(--mc-text);
    box-sizing: border-box;
}

.mc-form-input:focus {
    border-color: var(--mc-brand);
    outline: none;
    box-shadow: 0 0 0 3px var(--mc-brand-ring);
}

/* Inputs do form — o tema (input[type=...], (0,1,1)+) força 4px/borda própria;
   os tokens só aplicam com especificidade maior + !important. */
#mc-quote-form .mc-form-input,
.mc-offcanvas .mc-offcanvas-form .mc-form-input {
    border: 1px solid var(--mc-border-strong) !important;
    border-radius: var(--mc-radius-sm) !important;
    background: var(--mc-surface) !important;
    color: var(--mc-text) !important;
}

#mc-quote-form .mc-form-input:focus,
.mc-offcanvas .mc-offcanvas-form .mc-form-input:focus {
    border-color: var(--mc-brand) !important;
    box-shadow: 0 0 0 3px var(--mc-brand-ring) !important;
}

.mc-form-textarea {
    resize: vertical;
    min-height: 60px;
}

.mc-form-error {
    background: var(--mc-danger-bg);
    color: var(--mc-danger);
    padding: 10px 14px;
    border-radius: var(--mc-radius-sm);
    font-size: 0.85em;
    margin-bottom: 12px;
    border: 1px solid var(--mc-brand-ring);
}

.mc-btn-back {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button */
    padding: 10px;
    font-size: 0.85em;
    color: var(--mc-text-muted);
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.15s ease-out;
}

.mc-btn-back:hover {
    background: var(--mc-surface-muted);
}

/* Raio do botão voltar — (0,3,0)!important vence o button do tema */
.mc-offcanvas .mc-offcanvas-form .mc-btn-back {
    border-radius: var(--mc-radius-md) !important;
}

/* Expanded offcanvas for quote form */
.mc-offcanvas--expanded {
    width: 600px !important;
    max-width: 100vw !important;
}

.mc-offcanvas-form {
    padding: 0 0 1.5em;
    border-bottom: 1px solid var(--mc-divider);
    margin-bottom: 1em;
}

.mc-offcanvas-form h4 {
    margin: 0 0 1em;
    font-size: 1.1em;
}

.mc-offcanvas-form-summary {
    color: var(--mc-text-muted);
    margin-bottom: 1em;
    font-size: 0.9em;
}

.mc-form-fields p {
    margin: 0 0 0.75em;
}

/* Items list within form */
.mc-offcanvas-form-items {
    margin-bottom: 1em;
}

.mc-offcanvas-form-items h4 {
    font-size: 0.95em;
    color: var(--mc-text);
    margin-bottom: 0.75em;
}

.mc-offcanvas-form-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 0;
    border-bottom: 1px solid var(--mc-divider);
}

.mc-offcanvas-form-item-img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface-muted);
    flex-shrink: 0;
}

.mc-offcanvas-form-item-info {
    flex: 1;
    min-width: 0;
}

.mc-offcanvas-form-item-sku {
    display: block;
    font-size: 0.75em;
    color: var(--mc-text-muted);
}

.mc-offcanvas-form-item-desc {
    display: block;
    font-size: 0.85em;
    color: var(--mc-text);
    line-height: 1.3;
}

.mc-offcanvas-form-footer {
    padding: 1em 0 0;
    border-top: 1px solid var(--mc-divider);
    text-align: center;
}

.mc-offcanvas-form-footer .mc-btn-primary {
    width: 100%;
    margin-bottom: 0.5em;
}

/* Responsive: full-width on mobile */
@media (max-width: 768px) {
    .mc-offcanvas--expanded {
        width: 100vw !important;
    }
}

/* Stepper + Adicionar em cards estreitos (2 colunas até 768px): o botão
   quebra para a própria linha, mantendo o stepper íntegro e usável.
   O limite de 600px cobre o range 481–600px, onde o card de 2 colunas
   ainda é estreito demais para stepper + botão na mesma linha. */
@media (max-width: 600px) {
    .mc-card > .mc-add-cart-wrapper {
        flex-wrap: wrap;
    }
    .mc-card > .mc-add-cart-wrapper .mc-btn-add-cart {
        flex: 1 1 100%;
        margin-left: 0; /* linha própria — sem indentação do gap de 8px */
    }
}

/* ========================================================================
   Toast Notification
   ======================================================================== */

.mc-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #333; /* superfície escura (branco sobre #333 = 12.6:1) */
    color: #fff;
    padding: 16px 24px;
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-modal);
    z-index: 100002;
    font-size: 0.95em;
    max-width: 400px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}

.mc-toast--visible {
    opacity: 1;
    transform: translateY(0);
}

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

/* Hide top filter bar on catalog page template (sidebar has filters) */
.page-template-page-catalogo .mc-filters {
    display: none;
}

/* ========================================================================
   Sidebar Filter Search
   ======================================================================== */

.mc-sidebar-filter-search {
    width: 100%;
    padding: 0.4em 0.6em;
    margin-bottom: 0.5em;
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm);
    font-size: 0.85em;
    background: var(--mc-surface-muted);
    box-sizing: border-box;
}

/* Grid card add-cart-wrapper (outside <a> tag) — ancorado na base do card:
   margin-top:auto empurra o grupo qty+Adicionar para o fundo em toda a linha;
   o gap visual de 8px acima do stepper vira padding-top (mesmo resultado). */
.mc-card > .mc-add-cart-wrapper {
    display: flex;
    align-items: center;
    column-gap: 0;      /* (0,2,0) — deve manter o grupo do stepper contíguo (bloco base é (0,1,0)) */
    row-gap: var(--mc-space-2); /* espaço vertical quando o botão quebra de linha */
    margin-top: auto;
    padding: var(--mc-space-2) var(--mc-space-4) var(--mc-space-4);
}
/* O input do card herda a regra genérica (.mc-add-cart-wrapper .mc-qty-input):
   largura 44px, altura 36px, sem bordas laterais dentro do grupo. */

/* Raio do botão Adicionar — (0,3,0)!important vence o button do tema (0,2,1)!important */
.mc-card > .mc-add-cart-wrapper .mc-btn-add-cart,
.mc-product-info .mc-add-cart-wrapper .mc-btn-add-cart,
.mc-quickview .mc-add-cart-wrapper .mc-btn-add-cart {
    border-radius: var(--mc-radius-md) !important;
}

/* ========================================================================
   Active filter item - highlighted at top of list
   ======================================================================== */

.mc-sidebar-item-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4em 12px 0.4em 10px;
    margin-bottom: 0.3em;
    background: var(--mc-brand-soft);
    border: 1px solid var(--mc-brand-ring);
    border-radius: var(--mc-radius-md);
    font-weight: 600;
    font-size: 0.9em;
}

.mc-sidebar-active-label {
    flex: 1;
    color: var(--mc-brand);
}

.mc-sidebar-item-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--mc-danger);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    transition: background 0.15s;
    flex-shrink: 0;
    margin-left: 0.3em;
}

/* O × do chip precisa vencer .mc-sidebar-item a (0,2,0) e o border killer do tema */
.mc-sidebar-item-active .mc-sidebar-item-remove {
    color: var(--mc-danger) !important;
}

/* Tema Salient e o próprio plugin forçam li a { display: block } no chip,
   esticando o × para uma caixa bloco e quebrando o círculo 20×20.
   Ancorado no #sidebar (mesmo padrão do border killer acima) para restaurar o inline-flex. */
#sidebar .mc-sidebar-item-remove {
    display: inline-flex !important;
}

/* !important também no hover: o base (0,2,0)!important venceria o color:#fff
   sem ele — vermelho sobre vermelho deixaria o × invisível no hover. */
.mc-sidebar-item-remove:hover,
.mc-sidebar-item-remove:focus-visible {
    background: var(--mc-danger);
    color: #fff !important;
}

/* Tema força #sidebar div ul li { padding: 8px 0 } / widget li { padding: 4px 0 }
   (IDs vencem o seletor de classes) — zerava o respiro horizontal e colava o ×
   na borda direita. Âncora no #sidebar restaura o padding do chip. */
#sidebar .mc-sidebar-item-active {
    border: 1px solid var(--mc-brand-ring) !important;
    padding-left: 10px !important;
    padding-right: 12px !important;
}

/* Single product page */
.mc-product-single-main {
    display: flex;
    gap: 3em;
    margin-bottom: 3em;
}

.mc-product-image {
    flex: 0 0 400px;
    max-width: 100%;
}

.mc-product-image-link {
    display: block;
    cursor: zoom-in;
}

.mc-product-image-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--mc-radius-md);
    transition: opacity 0.2s;
}

.mc-product-image-img:hover {
    opacity: 0.9;
}

.mc-product-info {
    flex: 1;
    min-width: 0;
}

.mc-product-title {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.mc-product-sku {
    font-size: 0.9em;
    color: var(--mc-text-muted);
    margin-bottom: 0.5em;
    font-family: monospace;
}

.mc-product-meta {
    font-size: 0.95em;
    margin-bottom: 0.3em;
}

.mc-product-meta a {
    color: var(--mc-brand);
    text-decoration: none;
}

.mc-product-meta a:hover {
    text-decoration: underline;
}

.mc-product-info .mc-badge-outlet {
    display: inline-block;
    margin-bottom: 0.5em;
}

.mc-product-info .mc-add-cart-wrapper {
    margin: 1.5em 0;
}

.mc-product-info .mc-btn-add-cart {
    padding: 0 1.8em;
    font-size: 0.95em;
}

/* Specs table */
.mc-product-specs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.mc-product-specs th,
.mc-product-specs td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid var(--mc-divider);
    text-align: left;
}

.mc-product-specs th {
    font-weight: 600;
    color: var(--mc-text-muted);
    width: 140px;
}

/* Related products */
.mc-related-products {
    margin-top: 3em;
    padding-top: 2em;
    border-top: 1px solid var(--mc-divider);
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.mc-related-title {
    font-size: 1.3em;
    margin-bottom: 1em;
}

/* Related products — Carousel */
.mc-related-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mc-related-carousel {
    flex: 1;
    min-width: 0; /* important: allows flex item to shrink below content size */
    overflow: hidden;
    position: relative;
}

.mc-related-carousel-track {
    display: flex;
    gap: 1.5em;
    transition: transform 0.5s ease;
    will-change: transform;
}

.mc-related-card {
    flex: 0 0 calc((100% - 4.5em) / 4);
    min-width: 0;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: 1em;
    background: var(--mc-surface);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-sizing: border-box;
    cursor: pointer;
}

.mc-related-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mc-shadow-hover);
}

.mc-related-card a {
    text-decoration: none;
    color: inherit;
}

.mc-related-card-img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    margin-bottom: 0.75em;
    display: block;
}

.mc-related-card-title {
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.3;
    display: block;
    color: var(--mc-text);
    margin-bottom: 0.2em;
}

.mc-related-card-sku {
    font-size: 0.75em;
    color: var(--mc-text-muted);
    font-family: monospace;
}

/* Carousel buttons */
.mc-carousel-btn {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--mc-border-strong);
    border-radius: 50% !important; /* tema Salient força 4px em button */
    background: var(--mc-surface);
    cursor: pointer;
    font-size: 1.5em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mc-text);
    transition: all 0.15s ease-out;
    z-index: 2;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    position: relative;
}

.mc-carousel-btn:hover {
    background: var(--mc-brand);
    color: #fff;
    border-color: var(--mc-brand);
}

.mc-carousel-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Raio circular dos arrows — (0,2,2)!important vence o button do tema (0,2,1)!important */
div.mc-related-carousel-wrap button.mc-carousel-btn,
div.mc-slide-carousel-wrap button.mc-carousel-btn,
div.mc-brands-carousel-wrap button.mc-carousel-btn {
    border-radius: 50% !important;
}

/* Responsive */
@media (max-width: 768px) {
    .mc-product-single-main {
        flex-direction: column;
        gap: 1.5em;
    }

    .mc-product-image {
        flex: none;
    }

    .mc-related-card {
        flex: 0 0 calc((100% - 1.5em) / 2); /* 2 columns */
    }
}

@media (max-width: 480px) {
    .mc-related-card {
        flex: 0 0 calc(100% - 0.5em); /* 1 column */
    }
}

/* Lightbox overlay */
.mc-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.9);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: zoom-out;
}

.mc-lightbox--open {
    opacity: 1;
    visibility: visible;
}

.mc-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: var(--mc-radius-md);
    box-shadow: var(--mc-shadow-lightbox); /* exceção documentada: blur >8px em overlay */
    transform: scale(0.9);
    transition: transform 0.3s;
}

.mc-lightbox--open img {
    transform: scale(1);
}

.mc-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 2em;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    z-index: 100001;
    line-height: 1;
    padding: 0;
}

.mc-lightbox-close:hover {
    opacity: 1;
}

/* Brand logo on single product */
.mc-product-brand {
    margin: 0 0 0.25em;
}

.mc-brand-logo-single {
    max-height: 40px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin-bottom: 0.5em;
}

/* Admin: brand logo preview */
.mc-brand-logo-preview {
    display: inline-block;
    vertical-align: middle;
}

/* ============================================
   Single product page — breadcrumb, discount
   notice and hover zoom
   ============================================ */

.mc-breadcrumb {
    flex: 0 0 100%; /* .mc-product-single is a flex row container */
    font-size: 0.85em;
    margin-bottom: 1.5em;
    color: var(--mc-text-muted);
}

.mc-breadcrumb a {
    color: var(--mc-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.mc-breadcrumb a:hover {
    color: var(--mc-brand);
}

.mc-breadcrumb-sep {
    margin: 0 0.5em;
    color: var(--mc-text-faint);
}

.mc-breadcrumb-current {
    color: var(--mc-text);
    font-weight: 500;
}

/* Discount notice */
.mc-price-alert {
    background: var(--mc-warning-bg);
    border-left: 4px solid var(--mc-warning);
    padding: 12px 16px;
    margin: 1em 0;
    border-radius: 0 var(--mc-radius-sm) var(--mc-radius-sm) 0;
    font-size: 0.9em;
    color: var(--mc-warning);
    line-height: 1.5;
}

/* Hover zoom */
.mc-product-image-link {
    position: relative;
    overflow: hidden;
}

.mc-zoom-lens {
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.2);
    display: none;
    pointer-events: none;
    z-index: 5;
    background-repeat: no-repeat;
    cursor: zoom-in;
}

/* ========================================================================
   Page background — surface-muted on plugin pages
   Scoped to plugin page contexts only (Salient containers are shared
   with the rest of the site).
   ======================================================================== */

/* Catalog page template */
.page-template-page-catalogo .container-wrap,
.page-template-page-catalogo .container.main-content {
    background: var(--mc-surface-muted);
}

/* Single product page — body marked with .mc-product-single-page
   by MC_Rewrites::template_redirect() */
.mc-product-single-page .container-wrap,
.mc-product-single-page .container.main-content {
    background: var(--mc-surface-muted);
}

/* ========================================================================
   Quick View Modal
   ======================================================================== */

/* Quick view trigger below the qty + add wrapper (sibling of .mc-card-link).
   Discreet helper style: smaller than the card title (14px) and add button
   (13px), muted gray, non-bold; label stays exactly as authored (lowercase,
   no uppercase transform). */
.mc-btn-quickview {
    background: var(--mc-surface);
    color: var(--mc-text-muted);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button */
    padding: 4px 8px;
    display: block;
    margin: 6px auto 15px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.mc-btn-quickview:hover {
    background: var(--mc-surface-muted);
    color: var(--mc-text);
    border-color: var(--mc-text-muted);
}

/* Raio do trigger quickview — (0,2,2)!important vence o button do tema (0,2,1)!important */
div.mc-card > button.mc-btn-quickview {
    border-radius: var(--mc-radius-md) !important;
}

/* Modal backdrop — z-index equal to the offcanvas (100001); the modal is
   appended to <body> after the offcanvas markup, so it stacks above it.
   Toasts (100002) stay visible above the modal; cart notices (.mc-notice,
   100003, created by cart.js) sit on top of everything in this band. */
.mc-quickview {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.78);
    z-index: 100001;
    padding: 20px;
}

.mc-quickview[hidden] {
    display: none;
}

/* Author display rules override the UA [hidden] rule — keep hidden honest */
.mc-quickview [hidden] {
    display: none !important;
}

.mc-quickview-panel {
    position: relative;
    background: var(--mc-surface);
    border-radius: var(--mc-radius-lg);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--mc-shadow-overlay); /* exceção documentada: blur >8px em overlay */
    padding: var(--mc-space-6);
    box-sizing: border-box;
}

.mc-quickview-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.8em;
    line-height: 1;
    cursor: pointer;
    color: var(--mc-text-muted);
    padding: 0;
    transition: color 0.15s ease-out;
    z-index: 2;
}

.mc-quickview-close:hover {
    color: var(--mc-text-strong);
}

.mc-quickview-body {
    display: flex;
    gap: 2em;
}

.mc-quickview-media {
    flex: 0 0 40%;
    min-width: 0;
}

.mc-quickview-img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    display: block;
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
}

.mc-quickview-no-image {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-surface-muted);
    color: var(--mc-text-faint);
    font-size: 14px;
}

.mc-quickview-info {
    flex: 1;
    min-width: 0;
}

.mc-quickview-title {
    font-size: 1.4em;
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 0 0.25em;
    line-height: 1.3;
    padding-right: 1.5em; /* keep clear of the close button */
}

.mc-quickview-sku {
    font-size: 0.9em;
    color: var(--mc-text-muted);
    font-family: monospace;
    margin-bottom: 0.5em;
}

.mc-quickview-meta {
    font-size: 0.95em;
}

.mc-quickview-meta p {
    margin: 0 0 0.3em;
}

.mc-quickview-meta a {
    color: var(--mc-brand);
    text-decoration: none;
}

.mc-quickview-meta a:hover {
    text-decoration: underline;
}

/* Outlet flag inside the modal: static (not absolute like on the card) */
.mc-quickview-outlet {
    position: static;
    display: inline-block;
    margin-bottom: 0.5em;
}

.mc-quickview .mc-add-cart-wrapper {
    margin: 1em 0 0;
}

.mc-quickview .mc-btn-add-cart {
    flex: 1;
    width: auto;
    padding: 0 16px; /* altura 36px unificada com o stepper (sobrepõe o padding do .mc-btn-primary) */
    font-size: 0.95em;
}

/* Link to the product page inside the modal. Discreet helper style matching
   the .mc-btn-quickview family: small (11px), weight 400, muted gray, no
   uppercase transform; the label stays exactly as authored. */
.mc-quickview-link {
    display: block;
    margin: 1em 0 0;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    background: var(--mc-surface);
    color: var(--mc-text-muted);
    border: 1px solid var(--mc-border-strong);
    border-radius: var(--mc-radius-md) !important; /* tema Salient força 4px em button */
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3px;
    transition: background 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.mc-quickview-link:hover {
    background: var(--mc-surface-muted);
    color: var(--mc-text);
    border-color: var(--mc-text-muted);
    text-decoration: none;
}

/* Raio do link do modal — (0,3,0)!important vence o button do tema (0,2,1)!important */
.mc-quickview .mc-quickview-panel .mc-quickview-link {
    border-radius: var(--mc-radius-md) !important;
}

/* Responsive: media stacks above info */
@media (max-width: 768px) {
    .mc-quickview-body {
        flex-direction: column;
    }

    .mc-quickview-media {
        flex: none;
    }
}

/* Slides — banner + product carousel */
.mc-slide {
    display: flex;
    align-items: center;
    gap: 2em;
    margin-bottom: 2.5em;
}

.mc-slide-banner {
    flex: 0 0 38%;
    min-width: 0;
    position: relative; /* anchors the banner-link overlay */
}

.mc-slide-banner img {
    display: block;
    /* !important: vence o reset inline do tema (.row .col img:not([srcset]) { width: auto; })
       que força largura intrínseca da imagem; sem ele o banner não preenche a coluna. */
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--mc-radius-md);
}

/* Banner link: the featured image wraps the same pre-filtered /catalogo/ URL
   as the CTA card. overflow:hidden clips the hidden overlay (translateY 100%)
   so it never bleeds below the image; the visible state sits fully inside. */
.mc-slide-banner-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--mc-radius-md); /* match the image's radius where the clip happens */
    text-decoration: none;
}

/* Hover overlay — slides up from the bottom on hover. pointer-events:none so
   the whole image stays the clickable target. */
.mc-slide-banner-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.2em 0.75em 0.75em;
    color: #fff;
    font-size: 0.9em;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    border-radius: 0 0 var(--mc-radius-md) var(--mc-radius-md); /* match the image's bottom radius */
    transform: translateY(100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.mc-slide-banner-link:hover .mc-slide-banner-overlay {
    transform: translateY(0);
}

/* Placeholder "Sem imagem" — same 1:1 shape as the banner image.
   !important overrides the inline aspect-ratio: 4/3 from the template. */
.mc-slide-banner-placeholder {
    aspect-ratio: 1 / 1 !important;
    /* Inline style do template usa cinza claro sem contraste (2.8:1) —
       !important vence o inline e traz o placeholder para os tokens. */
    background: var(--mc-surface-muted) !important;
    color: var(--mc-text-faint) !important;
    border-radius: var(--mc-radius-md) !important;
}

.mc-slide-carousel-wrap {
    position: relative;
    flex: 1; /* basis 0% — must not resolve against width:100% or it wraps below the banner */
    min-width: 0; /* important: allows flex item to shrink below content size */
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    box-sizing: border-box;
}

.mc-slide-carousel {
    flex: 1;
    min-width: 0; /* important: allows flex item to shrink below content size */
    overflow: hidden;
    position: relative;
}

.mc-slide-carousel-track {
    display: flex;
    gap: 1.5em;
    transition: transform 0.5s ease;
    will-change: transform;
}

.mc-slide-card {
    flex: 0 0 calc((100% - 3em) / 3); /* 3 columns */
    min-width: 0;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    padding: 1em;
    background: var(--mc-surface);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    box-sizing: border-box;
}

.mc-slide-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mc-shadow-hover);
}

.mc-slide-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.mc-slide-card-img {
    /* !important: vence o reset do tema (.row .col img:not([srcset]) { width: auto; })
       que força largura/altura intrínsecas; sem ele a imagem estoura o card compacto. */
    width: 100% !important;
    height: 150px !important;
    object-fit: contain;
    margin-bottom: 0.75em;
    display: block;
    background: var(--mc-surface);
}

.mc-slide-card-img-placeholder {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mc-surface-muted);
    color: var(--mc-text-faint);
    font-size: 13px;
    margin-bottom: 0.75em;
}

.mc-slide-card-title {
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.3;
    display: block;
    color: var(--mc-text);
}

/* CTA card: last card of every slide carousel — links to the pre-filtered
   catalog. Reuses .mc-slide-card sizing/flex-basis (it carries both classes);
   accent background, no translateY hover jump, ~image-card height. */
.mc-slide-card-cta {
    position: relative;
    background: var(--mc-brand);
    color: #fff;
    min-height: 200px; /* ~image (150px) + padding + title area of a product card */
    text-align: center;
}

.mc-slide-card-cta:hover {
    transform: none; /* CTA não pula no hover (cards de produto sobem 4px) */
    box-shadow: var(--mc-shadow-hover);
}

.mc-slide-card-cta a {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.mc-slide-card-cta-label {
    font-size: 0.95em;
    font-weight: 700;
    line-height: 1.3;
}

/* Responsive: banner stacks above carousel; 2 columns then 1 column */
@media (max-width: 768px) {
    .mc-slide {
        flex-direction: column;
        align-items: stretch;
    }

    .mc-slide-banner {
        flex: none;
        width: 100%;
    }

    .mc-slide-card {
        flex: 0 0 calc((100% - 1.5em) / 2); /* 2 columns */
    }
}

@media (max-width: 480px) {
    .mc-slide-card {
        flex: 0 0 calc(100% - 0.5em); /* 1 column */
    }
}

/* ========================================================================
   Quote Page (/finalizar-orcamento/ — [mc_quote_form])
   ======================================================================== */

.mc-quote-page {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2.5em;
    align-items: start;
    margin: 1.5em 0;
}

.mc-quote-page-form h2 {
    margin: 0 0 0.25em;
    font-size: 1.6em;
}

.mc-quote-page-intro {
    color: var(--mc-text-muted);
    margin: 0 0 1.5em;
}

/* Empty cart — friendly state, never a redirect */
.mc-quote-empty {
    background: var(--mc-surface-muted);
    border: 1px dashed var(--mc-border-strong);
    border-radius: var(--mc-radius-md);
    padding: 2.5em 1.5em;
    text-align: center;
    color: var(--mc-text-muted);
}

.mc-quote-empty[hidden] {
    display: none;
}

.mc-quote-empty p {
    margin: 0 0 1em;
}

/* Field grid */
.mc-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1em 1.4em;
}

.mc-field-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.mc-field-span-2 {
    grid-column: 1 / -1;
}

.mc-field {
    margin: 0;
}

.mc-field label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    margin-bottom: 0.35em;
    color: var(--mc-text);
}

.mc-req {
    color: var(--mc-brand);
}

.mc-field .mc-form-input {
    width: 100%;
}

/* Field error state */
.mc-field--invalid .mc-form-input {
    border-color: var(--mc-brand);
    box-shadow: 0 0 0 2px rgba(205, 23, 25, 0.12);
}
#mc-quote-form .mc-field--invalid .mc-form-input {
    border-color: var(--mc-brand) !important;
    box-shadow: 0 0 0 2px rgba(205, 23, 25, 0.12) !important;
}

.mc-field-error {
    display: block;
    font-size: 0.78em;
    color: var(--mc-danger);
    margin-top: 0.3em;
}

.mc-field-error[hidden] {
    display: none;
}

/* Submit + result */
.mc-quote-submit-row {
    margin: 1.5em 0 0;
}

/* Raio do submit do orçamento — (0,3,0)!important vence o button do tema (0,2,1)!important */
.mc-quote-page .mc-quote-submit-row .mc-btn-primary {
    border-radius: var(--mc-radius-md) !important;
}

.mc-quote-result {
    margin-top: 1em;
}

.mc-quote-result .mc-success,
.mc-quote-result .mc-error,
.mc-quote-result .mc-warning {
    margin-bottom: 0.5em;
}

.mc-quote-result .mc-success:last-child,
.mc-quote-result .mc-error:last-child,
.mc-quote-result .mc-warning:last-child {
    margin-bottom: 0;
}

/* Summary card */
.mc-quote-page-summary {
    position: sticky;
    top: 20px;
}

.mc-quote-page-summary-card {
    background: var(--mc-surface-muted);
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-lg);
    padding: 1.25em 1.25em 1em;
}

.mc-quote-page-summary-card h3 {
    margin: 0 0 1em;
    font-size: 1.05em;
}

.mc-quote-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mc-quote-summary-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.6em 0;
    border-bottom: 1px solid var(--mc-divider);
}

.mc-quote-summary-item:last-child {
    border-bottom: none;
}

.mc-quote-summary-thumb {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: var(--mc-radius-md);
    flex-shrink: 0;
    background: var(--mc-surface);
}

.mc-quote-summary-info {
    flex: 1;
    min-width: 0;
}

.mc-quote-summary-sku {
    display: block;
    font-size: 0.75em;
    color: var(--mc-text-muted);
    font-family: monospace;
}

.mc-quote-summary-desc {
    display: block;
    font-size: 0.85em;
    color: var(--mc-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.mc-quote-summary-qty {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}
/* O stepper compacto (32px) e o input (36px) herdam a regra conjunta
   .mc-offcanvas-item-qty .mc-qty-btn/.mc-qty-input definida na seção offcanvas. */

.mc-quote-summary-qty .mc-qty-input::-webkit-inner-spin-button,
.mc-quote-summary-qty .mc-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mc-quote-summary-remove {
    flex-shrink: 0;
}

.mc-quote-summary-total {
    margin: 1em 0 0;
    padding-top: 0.75em;
    border-top: 1px solid var(--mc-divider);
    font-size: 0.9em;
    color: var(--mc-text-muted);
}

/* Responsive: single column, summary un-sticks */
@media (max-width: 768px) {
    .mc-quote-page {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .mc-quote-page-summary {
        position: static;
    }
}

@media (max-width: 480px) {
    .mc-field-grid,
    .mc-field-grid--3 {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================
   Brands shortcode ([mc_marcas]) — grid and carousel
   ======================================================================== */

/* Grid: column count from .mc-brands-cols-{3|4|5} */
.mc-brands-grid {
    display: grid;
    gap: 1.5em;
    margin: 1.5em 0;
}

.mc-brands-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mc-brands-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mc-brands-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Item card — shared by grid and carousel; always a link. Logo cards and
   fallback-name cards share the same footprint (flex-centered content). */
.mc-brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 1em;
    border: 1px solid var(--mc-border);
    border-radius: var(--mc-radius-md);
    background: var(--mc-surface);
    text-decoration: none;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    box-sizing: border-box;
}

.mc-brand-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--mc-shadow-hover);
    border-color: var(--mc-brand-ring);
}

/* Logo — !important: vence o reset do tema (.row .col img:not([srcset])
   { width: auto; }) que força largura/altura intrínsecas; o mesmo padrão do
   .mc-slide-card-img. object-fit: contain preserva a proporção do logotipo. */
.mc-brands-logo {
    width: 100% !important;
    height: 64px !important;
    object-fit: contain;
    display: block;
}

/* Brand without a logo: styled name fallback (the brand is never hidden). */
.mc-brands-fallback {
    color: var(--mc-text);
    font-weight: 600;
    font-size: 1.05em;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
}

/* Carousel (slide layout) — reuses .mc-carousel-btn for the arrows */
.mc-brands-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    box-sizing: border-box;
}

.mc-brands-carousel {
    flex: 1;
    min-width: 0; /* important: allows flex item to shrink below content size */
    overflow: hidden;
    position: relative;
}

.mc-brands-carousel-track {
    display: flex;
    gap: 1.5em;
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Card width = 100/cols% minus the (cols-1) gaps; cols comes from the
   --mc-brands-cols custom property set inline by the template (data-cols). */
.mc-brands-carousel-track .mc-brand-item {
    flex: 0 0 calc((100% - ((var(--mc-brands-cols, 4) - 1) * 1.5em)) / var(--mc-brands-cols, 4));
    min-width: 0;
}

/* Responsive: grid falls to 2 then 1 column; carousel shows 2 then 1 card
   (must match brands.js getVisibleCount() breakpoints). */
@media (max-width: 768px) {
    .mc-brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mc-brands-carousel-track .mc-brand-item {
        flex: 0 0 calc((100% - 1.5em) / 2); /* 2 columns */
    }
}

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

    .mc-brands-carousel-track .mc-brand-item {
        flex: 0 0 calc(100% - 0.5em); /* 1 column */
    }
}

/* ========================================================================
   Acessibilidade — foco visível e prefers-reduced-motion
   ======================================================================== */

/* Foco visível para navegação por teclado (o tema pode remover outlines) */
.mc-btn-add-cart:focus-visible,
.mc-btn-primary:focus-visible,
.mc-qty-btn:focus-visible,
.mc-sidebar-item a:focus-visible,
.mc-page:focus-visible,
.mc-carousel-btn:focus-visible,
.mc-quickview-link:focus-visible,
.mc-btn-quickview:focus-visible {
    outline: 2px solid var(--mc-brand);
    outline-offset: 2px;
}

/* Movimento reduzido: estados instantâneos, sem transform/box-shadow animados.
   O overlay do banner recebe apenas transition:none — o translateY(100%) de
   repouso é o que o esconde (overflow do link), e não pode ser forçado a 0.
   Mantido como último bloco do arquivo: os overrides de :hover (mesma
   especificidade, ex. .mc-brand-item:hover) precisam ser vencidos por ordem
   de origem. */
@media (prefers-reduced-motion: reduce) {
    .mc-card,
    .mc-related-card,
    .mc-slide-card,
    .mc-brand-item,
    .mc-related-carousel-track,
    .mc-slide-carousel-track,
    .mc-brands-carousel-track,
    .mc-btn-add-cart,
    .mc-btn-primary,
    .mc-qty-btn,
    .mc-sidebar-item a,
    .mc-sidebar-more,
    .mc-sidebar-clear,
    .mc-carousel-btn,
    .mc-btn-quickview,
    .mc-quickview-link,
    .mc-notice,
    .mc-toast,
    .mc-offcanvas,
    .mc-offcanvas-bg,
    .mc-lightbox,
    .mc-lightbox img,
    .mc-slide-banner-overlay,
    .mc-quickview {
        transition: none !important;
    }

    .mc-card:hover,
    .mc-related-card:hover,
    .mc-slide-card:hover,
    .mc-brand-item:hover {
        transform: none;
    }
}