@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600;700;800&family=Rubik:wght@300;400;500;600&display=swap');
/*
Fonts:
- Poppins: 300, 400, 600, 700, 800
- Rubik: 300, 400, 500, 600
*/

:root {
    --primary-color: #ff6b6b;
    --secondary-color: #794afa;
    --secondary-dark-color: #453c5c;

    /* Fase 4 do sistema de temas (store/PLANO_TEMAS.md): as variáveis
       abaixo passam a DERIVAR dos tokens de estilo carregados por
       tokens-{estilo}.css, que o head.php linka antes deste arquivo.
       A indireção é de propósito -- amarrando aqui, no :root, os
       ~centenas de `var(--radius)`/`var(--shadow)` espalhados pelo
       arquivo seguem o tema sem nenhum ser reescrito.
       O fallback de cada uma é o valor de hoje, então uma loja que
       (por qualquer motivo) não carregue o arquivo de token continua
       renderizando igual em vez de quebrar. */
    --white-color: var(--surface, #ffffff);
    --light-bg-color: var(--surface-alt, #f2f3f5);
    --light-text-color: var(--text-muted, #7c899a);
    --border-color: var(--border-tint, #e5e8ec);
    --dark-color: var(--text-strong, #0a021c);
    --card-background: var(--surface-card, #ffffff);
    --text-color: var(--text-base, #333333);

    --font-small: var(--fs-small, 13px);
    --font-smaller: var(--fs-smaller, 11px);

    --percent100: 100%;
    --percente50: 50%;

    /* Pesos: a alavanca visual mais barata que existe. Um tema "minimal"
       que usa 400 onde o padrão usa 700 já parece outro site, sem mexer
       em uma única regra de layout. */
    --fw3: var(--weight-light, 300);
    --fw5: var(--weight-medium, 500);
    --fw6: var(--weight-semibold, 600);
    --fw7: var(--weight-bold, 700);
    --fw8: var(--weight-black, 800);

    --trans-background-color: var(--transition-base, background-color .3s, color .3s);
    --trans-background: var(--transition-bg, background-color .3s);
    --trans-color: var(--transition-color, color .3s);

    --shadow: var(--shadow-style, 0 4px 6px rgba(0, 0, 0, 0.1));
    --hover-shadow: var(--hover-shadow-style, 0 6px 12px rgba(0, 0, 0, 0.15));

    --success-color: #2fb380;
    --error-color: #ef5757;
    --warning-color: #f5a623;
    --info-color: #4a90e2;

    /* Raio padrão dos controles — um só valor pra todos os botões/inputs,
       nada de pill (2em/50px) espalhado por página. Deriva do token
       (ver bloco de tema acima); --radius-sm acompanha por proporção pra
       não ficar 6px de canto arredondado num tema de raio zero. */
    --radius: var(--radius-base, 8px);
    --radius-sm: calc(var(--radius-base, 8px) * 0.75);
}

* {
    margin: 0;
    padding: 0;
}
*,::before,::after {
    box-sizing: border-box;
}

::selection {
    background-color: var(--primary-color); /* Cor de fundo da seleção */
    color: var(--white-color); /* Cor do texto selecionado */
}

body {
    font-family: var(--font-body, 'Rubik', sans-serif);
    font-size: calc(16px * var(--type-scale, 1));
    font-weight: 400;
    line-height: 1.4;
    color: var(--dark-color);
    background-color: var(--white-color);
} a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}
ul {
    list-style: nome;
}
img {
    max-width: var(--percent100);
    vertical-align: middle;
}
strong {
    font-weight: var(--fw8);
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
input::placeholder {
    font: inherit;
}

h1,h2,h3,h4 {
    font-family: var(--font-heading, 'Poppins', sans-serif);
}

h1 {
    font-size: calc(1.3em + 1vw);
    font-weight: var(--fw8);
    line-height: 1;
}
h2 {
    font-size: 2.5em;
}
h3 {
    font-size: 1.2em;
    font-weight: var(--fw7);
}
h4 {
    font-size: 1em;
    font-weight: var(--fw6);
}

/* ----------------- *
 * REUSABLE SELECTOR *
 * ----------------- */

.container {
    max-width: var(--container-width, 1280px);
    margin: 0 auto;
    padding: 0 0.938em;
} 
.column {
    margin-left: -0.938em;
    margin-right: -0.938em;
}
.column .row {
    padding: 0 0.938em;
}
.flexwrap {
    display: flex;
    flex-wrap: wrap;
}
.flexcenter {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flexitem {
    display: flex;
    align-items: center;
}
.flexcol {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.main-links a:hover {
    color: var(--secondary-color);
}
.second-links a:hover {
    color: var(--light-text-color);
}

.icon-small, .icon-large {
    display: flex;
    align-items: center;
    padding: 0 0.25em;
    font-weight: normal;
}
.icon-small {
    font-size: 1.25em;
    margin-left: auto;
}
.icon-large {
    font-size: 1.75em;
    padding: 0 0.75em 0 0;
}

.mobile-hide {
    display: none;
}

.object-cover {
    position: relative;
    overflow: hidden;
}

.object-cover img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.products .media {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.primary-button, .secondary-button, .light-button {
    font-size: var(--font-small);
    padding: 0.9em 2em;
    height: auto;
    width: fit-content;
    border-radius: var(--radius);
    transition: var(--trans-background-color), transform 0.15s ease;
}
.primary-button:active, .secondary-button:active, .light-button:active {
    transform: scale(0.98);
}
.primary-button{
    background-color: var(--primary-color);
    color: var(--white-color);    
}
.primary-button:hover {
    background-color: var(--dark-color);
}
.secondary-button{
    background-color: var(--secondary-dark-color);
    color: var(--white-color);    
}
.secondary-button:hover {
    background-color: var(--light-bg-color);
    color: var(--secondary-dark-color);
}
.light-button {
    background-color: var(--light-bg-color);    
}
.light-button:hover {
    background-color: var(--secondary-dark-color);
}

.view-all {
    font-size:  var(--font-small);
    display: flex;
    gap: 1em;
    transition: var(--trans-color);
}

.mini-text {
    font-size: var(--font-smaller);
    color: var(--light-text-color);    
}


/* ---------------
 * Structure Styling

    00. Reusable selectors

    01. HEADER
        a. Header Top
        b. Header Nav
        c. Header Main, Departments Category
        d. Search Form
        e. Responsive MENU - Off Canvas
    02. SLIDER
    03. BRANDS
    04. PRODUCT
        a. Global product
        b. BIG product
        c. MINI product
        d. MAIN product
    05. BANNERS
        a. News Letter
        b. Widgets
        c. Footer Info
    06. BOTTOM MENU
        a. Search
    07. OVERLAY
    08. PAGE SINGLE
        a. Breadcrumb
        b. Product details
        c. Product description
        d. Product Review
        e. Product Review Form
    09. PAGE SINGLE: SPECIAL OFFER
    10. PAGE CATEGORY
        a. Sidebar products filter
        b. Products block
    11. CART
    12. PAGE CART
    13. PAGE CHECKOUT
    14. MODAL
    15. RESPONSIVE
 * -------------- */

/* --------------
 * 01. HEADER
 * ------------*/

ul {
    list-style: none;
}

:where(.off-canvas, header) li > a {
    display: flex;
    position: relative;
    line-height: inherit;
    transition: var(--trans-color);
}

    /* 01. HEADER ----------------------------------------
        a. Header Top
       ---------------*/

.header-top .wrapper {
   font-size: var(--font-small);
   font-weight: var(--fw3);
   justify-content: space-between;
   line-height: 42px; 
}      
.header-top .wrapper ul {
    gap: 2em;
}
.header-top li {
    position: relative;
}
.header-top ul ul {
    position: absolute;
    left: -1em;
    line-height: 2em;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    z-index: 1;
    display: none;
}
:where(.header-top, .thetop-nav) .right ul ul li a {
    padding: 0.25em 1em;
}
:where(.header-top, .thetop-nav) .right ul ul li.current a {
    background-color: var(--border-color);
}
.header-top li:hover ul {
    display: block;    
}

    /* 01. HEADER ----------------------------------------
        b. Header Nav
       ---------------*/

.header-nav {
    padding: 0.5em 0;
    margin-bottom: 1.5em;
    border-bottom: 1px solid var(--border-color);
}       
.trigger {
    font-size: 1.5em;
    display: flex;
    padding: 0.25em;
    margin-right: 0.5em;
}  
.logo a {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 1.75em;
    position: relative;
    font-weight: var(--fw8);
    display: flex;
    padding-left: 1.75em;
    margin-right: 2em;
}
.logo img {
    display: block; /* Melhora a renderização para elementos <img> */
    padding-left: 1.75em; /* Mantém o espaçamento à esquerda */
    margin-right: 2em; /* Espaçamento à direita */
    position: relative; /* Apenas necessário se houver conteúdo posicionado dentro da logo */
    max-width: 180px; /* Limita o tamanho máximo */
    width: auto; /* Garante que a proporção original seja mantida */
    height: auto; /* Evita distorção */
}
.circle {
    position: absolute;
    top: -15px;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--percente50);
    background-color: var(--light-bg-color);
    z-index: -1;
}
.circle::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    border-radius: var(--percente50);
    background-color: var(--secondary-color);
    bottom: 5px;
    right: 5px;
    opacity: .4;
}
.header-nav nav > ul {
    line-height: 100px;
    gap: 2em;
}

.fly-item {
    position: absolute;
    height: 16px;
    font-size: var(--font-smaller);
    padding: 3px;
    text-align: center;
    line-height: 10px;
    color: var(--white-color);
}
nav .fly-item,
.header-nav .mini-cart .price .fly-item {
    top: 50%;
    margin-top: -24px;
    width: 34px;
    border-radius: 3px;
    right: -32px;
    background-color: var(--primary-color);
}
.header-nav .right {
    position: relative;
    margin-left: auto;
}
.header-nav .right .icon-large {
    position: relative;
}
.header-nav .right .fly-item {
   top: 0; 
   right: 16px;
   width: 16px;
   background-color: var(--secondary-dark-color);
   border-radius: var(--percente50);
}
.mega .flexcol {
    flex: 1;
    min-width: 180px;
    padding-right: 2.5em;
    margin-bottom: 1.5em;
    z-index: 1;
}

/* 01. HEADER ----------------------------------------
        c. Header Main, Departments, Category
       ---------------*/

.header-main {
    background-color: var(--secondary-dark-color); 
    padding: 1.5em 0;
    margin-bottom: 2em;  
}  
.dpt-cat {
    position: relative;
    z-index: 10;
}     
.dpt-cat .dpt-head {
    position: relative;
    width: 300px;
    padding: 0.75em 1.5em;
    background-color: var(--primary-color);
    border-radius: 7px 7px 0 0;
    color: var(--white-color);
    margin-bottom: -2.15em;
}
.dpt-cat .dpt-head .mini-text {
    color: var(--light-bg-color);
}
.dpt-cat .dpt-trigger {
    position: absolute; 
    right: 0;
    top: 0;
    padding: 1.3em;
    height: 60px;
    width: 60px;  
}

.dpt-menu > ul > li > a {
    font-size: var(--font-small);
    height: 46px;  
    align-items: center;  
}
.dpt-menu .has-child:hover ul {
    display: block;
}
.dpt-menu .has-child li a:hover {
    text-decoration: underline;
}

/* 01. HEADER ----------------------------------------
        d. Search Form
       ---------------*/

.header-main .right {
    flex: 1;    
} 
form {
    position: relative;
}  
form.search input {
    line-height: 3.25em;
    padding: 0 7em 0 4.5em;
    border: 0;
    outline: 0;
    width: var(--percent100);
    border-radius: 7px;
    font-size: 0.9em;
    font-weight: var(--fw3);
}   
form.search :where(span,button) {
    position: absolute;
    top: 0;
    padding: 0.55em 1.5em;
    font-size: 1em;
    color: var(--light-text-color);
    height: var(--percent100);
} 
form.search button {
    right: 0;
    border: 0;
    outline: 0;
    font-size: 0.875em;
    font-weight: var(--fw6);
    background-color: var(--primary-color);
    color: var(--white-color);
    border-radius: 0 7px 7px 0;
    cursor: pointer;
    transition: var(--trans-background);    
}
form.search button:hover {
    background-color: var(--dark-color);
}

    /* 01. HEADER ----------------------------------------
        e. Responsive MENU - Off Canvas
       ---------------*/

.site-off {
    position: fixed;
    width: 320px;
    height: var(--percent100);
    background-color: var(--white-color);
    overflow-y: auto;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .4s, visibility .4s;
    will-change: transform, visibility;
}
.showmenu .site-off {
    transform: translateX(0);
    visibility: visible;
    transform: transform .4s 0s, visibility 0s 0s;
}

.off-canvas {
    width: var(--percent100);
    height: var(--percent100);
    touch-action: auto;
    padding: 1.5em;
}
.off-canvas .canvas-head {
    color: var(--white-color);
    justify-content: space-between;
    padding: 1.5em;
    margin: -1.5em -1.5em 1.5em;
    background-color: var(--secondary-dark-color);
    border-bottom-right-radius: 160px 25px;
}
.off-canvas .canvas-head .logo {
    z-index: 10;
    position: relative;
}
.off-canvas .canvas-head .logo .circle {
    opacity: .75;
}
.t-close {
    font-size: 1.25em;
    width: 32px;
    height: 32px;
    border-radius: var(--percente50);
    background-color: var(--secondary-dark-color);
    color: var(--white-color);
    transition: var(--trans-background-color);
}
.t-close:hover {
    background-color: var(--white-color);
    color: var(--secondary-dark-color);
    opacity: .75;
}
.off-canvas .dpt-head {
    font-size: var(--font-small);
    padding: 1em;
    margin-bottom: 1em;
    text-align: center;
    background-color: var(--light-bg-color);
    border-radius: 7px 7px 0 0;
}
.off-canvas .has-child > :where(ul, .mega) {
    font-size: var(--font-small);
    font-weight: var(--fw3);
    line-height: 28px;
    padding-left: 3em;

    height: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.off-canvas .expand > :where(ul, .mega) {
    max-height: 2000px;
}

.off-canvas .thetop-nav ul, .off-canvas nav > ul {
    flex-direction: column;
    align-items: flex-start;
    font-size: var(--font-small);
    line-height: 36px;
    padding-top: 1.25em;
    margin: 1.25em 0 ;
    border-top: 1px solid var(--border-color);
}
.off-canvas nav .mega {
    padding: 0;
}
.off-canvas nav .mega .products {
    display: none;
}
.off-canvas .dpt-menu .icon-small {
    padding: 0.5em;
    line-height: initial;
}
.off-canvas .dpt-menu .icon-small i {
    transform: rotate(90deg);
}
.off-canvas .dpt-menu {
    width: var(--percent100);
}
.off-canvas .thetop-nav .right > ul > :where(:nth-child(4), li:nth-child(5)) > a {
    display: none;
}
.off-canvas .thetop-nav .right ul ul {
    display: flex;
    flex-direction: row;
}
.off-canvas .thetop-nav .right ul ul li a {
    padding: 0.5em;
    border: 1px solid var(--border-color);
    line-height: 16px;
    margin: 0 0.5em 0.5em 0;
}

    /* 02. SLIDER ----------------------------------------
       ---------------*/

  
.slider {
    max-height: 474px;    
}       
.slider .item {
    position: relative;
    height: 474px;
}
.slider .text-content{
    position: relative;
    height: var(--percent100);
    justify-content: flex-end;
    padding: 0 0 10% 10%;
    z-index: 1;
}
.slider h4 {
    font-size: var(--font-small);
    font-weight: var(--fw7);
    width: fit-content;
    padding: 4px 10px;
    background-color: var(--dark-color);
    color: var(--white-color);
    border-radius: 4px;
}
.text-content :where(h2, h3) span:first-child {
    font-weight: var(--fw3);
    color: var(--light-text-color);
}
.text-content :where(h2, h3) span:last-child {
    color: var(--secondary-dark-color);
    text-transform: uppercase;
    letter-spacing: -1px;
}
.swiper-pagination {
    margin-top: 0;
}
.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--secondary-dark-color);
}
.swiper-wrapper {
    max-height: 474px;
}

@media (max-width: 480px) {
    .slider,
    .slider .item,
    .swiper-wrapper {
        height: auto;
        max-height: none;
        aspect-ratio: 16 / 9;
    }

    .slider img,
    .slider .item img,
    .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* ------------------
 * 03. BRANDS
 * ------------------ */

.brands .wrapper {
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 2em 0;
}
.brands .item img {
    opacity: .25;
    transition: opacity .3s;
    max-width: 140px; 
    max-height: 100px; 
    object-fit: contain; 
    width: auto;
    height: auto;
}
.brands .item a:hover img {
    opacity: 1;
}

/* ------------------
 * 04. PRODUCT BLOCK STYLE
 * ------------------ */
.sectop {
    justify-content: space-between;
    padding-bottom: 0.5em;
    margin-bottom: 2em;
    border-bottom: 1px solid var(--border-color);
}
.sectop h2 {
    position: relative;
    font-size: 1.5em;
    font-weight: var(--fw7);
}
/* O .circle era um círculo cinza decorativo flutuando atrás do título —
   lia como ícone quebrado. Virou um traço de acento na cor da loja. */
.sectop h2 span:not(.circle) {
    padding: 0 0 0 0.6em;
    border-left: 4px solid var(--primary-color);
}
.sectop h2 .circle {
    display: none;
}

    /* 04. PRODUCT ----------------------------------------
        a. Global product
       ---------------*/

.products .offer {
    text-align: center;
    margin-bottom: 1.5em;
}       
.products .offer p {
    text-transform: uppercase;
    margin-bottom: 0.5em;
}
.products .offer ul {
    gap: 1em;
}
.products .offer ul li {
    position: relative;
    width: 34px;
    height: 34px;
    padding: 0.5em;
    line-height: initial;
    color: var(--secondary-dark-color);
    background-color: var(--light-bg-color);
    border-radius: 5px;
}
.products .offer ul li:not(:last-child)::before {
    content: ':';
    position: absolute;
    right: -0.6em;
    color: var(--light-text-color);
}
.products :where(.image, .thumbnail) img {
    transition: transform .3s;
}
.products :where(.image, .thumbnail):hover img {
    transform: scale(1.1);
}
.products .hoverable {
    position: absolute;
    top: 0;
    right: 0;
}
.products .hoverable li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0.25em;
    margin: 0.25em;
    border-radius: var(--percente50);
    line-height: 1;
    background-color: var(--white-color);
    opacity: .5;
    transition: var(--trans-background-color), opacity .3s;
}
.products .item:hover .hoverable li a {
    opacity: 1;
}
.products .hoverable li a:hover {
    color: var(--white-color);
    background-color: var(--dark-color);
}
.products .hoverable li.active a:hover {
    background-color: var(--primary-color);
}
.products .hoverable li:not(.active) {
    transform: translateX(100%);
    opacity: 0;
    transition: transform .3s, opacity .2s;
}
.products .item:hover .hoverable li {
    transform: translateX(0);
    opacity: 1;
}
.products .hoverable li:last-child {
    transition-delay: .1s;
}

.products .discount {
    top: auto;
    right: 0;
    left: auto;
    bottom: 0;
    background-color: transparent;
    z-index: 1; 
}
.products .discount::before {
    background-color: var(--dark-color);
}
.products .discount span {
    position: relative;
    font-size: var(--font-smaller);
    font-weight: var(--fw5);
    color: var(--white-color);
}

/* Selo de cashback do produto ("Ganhe R$X de volta") — mesmo espírito do
   selo de desconto acima, mas pill no canto inferior esquerdo da imagem
   (o de desconto ocupa o direito). */
.products .cashback-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    background-color: var(--success-color);
    color: var(--white-color);
    font-size: var(--font-smaller);
    font-weight: var(--fw5);
    line-height: 1;
    padding: 0.45em 0.7em;
    border-radius: 0 var(--radius, 8px) 0 0;
    /* deixa o canto direito livre pro círculo de desconto */
    max-width: calc(100% - 48px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variante inline (PDP): flui no texto em vez de ancorar na imagem. */
.products .cashback-badge.inline {
    position: static;
    display: inline-block;
    align-self: flex-start;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--font-small);
    padding: 0.4em 0.8em;
    margin-top: 0.5em;
}

.products .content {
    display: flex;
    flex-direction: column;
}
.products:where(.big,.main, .one) .content {
    gap: 1em;
    margin-top: 1.25em;
}
.products .rating {
    display: flex;
    align-items: center;
    gap: 0.5em;
}
/* Trilha cinza fixa de 5 estrelas + preenchimento dourado proporcional ao
   rating real. Antes a largura base era 80px (5 douradas) e rating 0 não
   tinha regra — todo produto sem avaliação aparecia com 5 estrelas. */
.products .rating .stars {
    position: relative;
    width: 80px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='rgba(210,214,220,1)'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z'%3E%3C/path%3E%3C/svg%3E");
    background-position-y: top;
    background-repeat: repeat-x;
    background-size: 16px 100%;
}
.products .rating .stars::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='rgba(240,187,64,1)'%3E%3Cpath d='M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z'%3E%3C/path%3E%3C/svg%3E");
    background-position-y: top;
    background-repeat: repeat-x;
    background-size: 16px 100%;
}

.products .rating .stars[data-rating="1"]::after { width: 16px; }
.products .rating .stars[data-rating="2"]::after { width: 32px; }
.products .rating .stars[data-rating="3"]::after { width: 48px; }
.products .rating .stars[data-rating="4"]::after { width: 64px; }
.products .rating .stars[data-rating="5"]::after { width: 80px; }
.products h3 {
    font-family: var(--font-body, 'Rubik', sans-serif);
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.products h3 a:hover {
    text-decoration: underline;
}
.products .price .current {
    font-size: calc(1em + 1vw);
    color: var(--primary-color);
    margin-right: 0.25em;
}
.products .price .normal {
    color: var(--light-text-color);
    text-decoration: line-through;
}
.products .stock .qty {
    display: flex;
    justify-content: space-between;
}
.products .stock .bar {
    height: 3px;
    margin-top: 1em;
    background-color: var(--border-color);
    overflow: hidden;
}
.products .stock .available {
    height: 3px;
    width: 21%;
    background-color: var(--secondary-color);
}

.products .item {
    display: flex;
    position: relative;
}
.products .stock-danger {
    color: var(--primary-color);
}

.flexwrap .row {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 2em;
}







    /* 04. PRODUCT ----------------------------------------
        b. BIG product
       ---------------*/
.products.big .item {
    flex-direction: column;
    padding: 2.5em;
    border: 2px solid var(--secondary-dark-color);
    border-radius: 7px;
    max-width: 460px;
    margin: 0 auto;
}       

    /* 04. PRODUCT ----------------------------------------
        c. MINI product
       ---------------*/
.products.mini .item {
    margin-bottom: 2em;
}
.products.mini .media {
    width: 130px;
    height: 160px;
    margin-right: 1.25em;
}
.products.mini .content {
    margin: 0;
    gap: 0.75em;
}
.products:where(.mini,.main) h3 {
    font-weight: 400;
}

    /* 04. PRODUCT ----------------------------------------
        d. MAIN product
       ---------------*/
.products.main {
    display: grid;
    /* `auto-fill` por largura mínima, não contagem fixa de coluna: o
       plano previa um token `--grid-columns: 4`, mas fixar a contagem
       quebraria o responsivo que já existe (media queries logo abaixo
       reduzem o card e forçam 2 colunas no celular). O que de fato
       controla a densidade aqui é a largura mínima do card -- é ela que
       virou token. */
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-card, 220px), 1fr));
    gap: var(--grid-gap, 1.5rem);
    margin: 0 -0.5rem;
    padding: 0 0.5rem; /* Add padding to the container */
}
.products.main .item {
    flex-direction: column;
    padding: 0.5rem;
    padding-bottom: 1rem;
    transition: transform 0.2s ease;
}
.products.main .media {
    height: 220px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    object-fit: cover;
}
.products.main .thumbnail {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products.main .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.products.main .content {
    padding: 0.5rem 0;
}
.products.main .footer {
    position: absolute;
    left: 0;
    right: 0;
    padding: 0.5rem;
    border-radius: 0 0 7px 7px;
    z-index: 1;
    background: linear-gradient(0deg, var(--light-bg-color) 0%, var(--white-color) 70%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}
.products.main .item:hover .footer {
    opacity: 1;
    visibility: visible;
}
.products.main .footer ul {
    list-style: disc;
    padding: 0.75rem 0 0 1rem;
    line-height: 1.5;
    border-top: 1px solid var(--border-color);
    margin-top: 0.75rem;
}
/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .products.main {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
        margin: 0; /* Remove negative margin */
        padding: 0 1rem; /* Increase padding for mobile */
    }
    .products.main .media {
        height: 160px;
    }
    .products.main .item {
        padding: 0.25rem; /* Reduce item padding on mobile */
    }
    .products.main .content {
        padding: 0.25rem 0; /* Reduce content padding on mobile */
    }
}
/* Additional mobile optimization */
@media screen and (max-width: 480px) {
    .products.main {
        grid-template-columns: repeat(2, 1fr); /* Force 2 columns on very small screens */
        gap: 0.5rem;
        padding: 0 0.5rem; /* Further reduce padding for very small screens */
    }
    .products.main .media {
        height: 140px; /* Slightly reduce image height for very small screens */
    }
    .products.main .item {
        padding: 0.2rem; /* Further reduce item padding */
    }
}

.purchase-section {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    align-items: center;
    width: 100%;
}

/* ============ CONTROLE DE QUANTIDADE ============ */
.purchase-quantity {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--white-color);
    overflow: hidden;
    flex-shrink: 0;
}

/* Botões de diminuir/aumentar quantidade */
.purchase-quantity-btn {
    width: 30px;
    height: 30px;
    border: none;
    background-color: var(--white-color);
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: var(--fw6);
    transition: var(--trans-background-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.purchase-quantity-btn:hover {
    background-color: var(--light-bg-color);
}

.purchase-quantity-btn:active {
    background-color: var(--secondary-dark-color);
    color: var(--white-color);
}

/* Input do campo de quantidade */
.purchase-quantity-input {
    width: 40px;
    height: 30px;
    border: none;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.85rem;
    font-weight: var(--fw6);
    background-color: var(--white-color);
    color: var(--text-color);
    padding: 0;
}

.purchase-quantity-input:focus {
    outline: none;
    background-color: var(--light-bg-color);
}

/* Remove spinner padrão do input number */
.purchase-quantity-input::-webkit-outer-spin-button,
.purchase-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.purchase-quantity-input[type=number] {
    -moz-appearance: textfield;
}

/* ============ BOTÃO DE COMPRA ============ */
.purchase-btn {
    flex: 1;
    min-width: 0;
    padding: 0.65rem 0.5rem;
    border: none;
    border-radius: var(--radius);
    background-color: var(--primary-color);
    color: var(--white-color);
    font-size: 0.70rem;
    font-weight: var(--fw7);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    min-height: 40px;
    white-space: nowrap;
}

.purchase-btn:hover {
    background-color: var(--secondary-dark-color);
    color: var(--white-color);
}

.purchase-btn:active {
    transform: scale(0.97);
}

.purchase-btn:disabled {
    background-color: var(--light-text-color);
    color: var(--white-color);
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
}

/* Ícone dentro do botão */
.purchase-btn-icon {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
}

/* ============ RESPONSIVO ============ */
@media screen and (max-width: 768px) {
    .purchase-section {
        gap: 0.5rem;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
    }

    .purchase-quantity {
        height: 36px;
    }

    .purchase-quantity-btn {
        width: 24px;
        font-size: 0.85rem;
    }

    .purchase-quantity-input {
        width: 30px;
        font-size: 0.8rem;
    }

    .purchase-btn {
        padding: 0.5rem 0.4rem;
        font-size: 0.68rem;
        min-height: 36px;
        gap: 0.35rem;
    }

    .purchase-btn-icon {
        font-size: 1rem;
    }
}
@media screen and (max-width: 480px) {
    .purchase-section {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .purchase-quantity {
        width: 100%;
        flex-shrink: 1;        
        justify-content: space-between; 
    }
    
    .purchase-quantity-input {
        width: 60%;
    }
    
    .purchase-quantity-btn {
        max-width: 40px;
    }

    .purchase-btn {
        width: 100%;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        min-height: 36px;
    }
}

.purchase-section {
    max-width: 100%;
    box-sizing: border-box;
}

.purchase-btn {
    flex-grow: 1;
    min-width: 0; /* impede vazamento do botão */
}

.purchase-quantity {
    flex-shrink: 1;
    min-width: 0; /* impede overflow lateral */
}

.products.main .item {
    overflow: hidden; 
    box-sizing: border-box;
}

/* ------------------- 
 * 05. BANNER
 * ------------------- */  
.banners .item {
    position: relative;
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
}
.banner .image {
    text-align: right;
}
.banner .get-gray {
    background-color: var(--border-color);
}
.banner :where(.text-content, .over-link) {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--percent100);
    height: var(--percent100);
}
.banner .text-content {
    padding: 1.5em 2.5em;
}
.banner h3 {
    font-size: calc(1em + 0.5vw);
    font-weight: var(--fw3);
}
.banner h3 span {
    font-size: 80%;
}
.banner .primary-button {
    z-index: 3;
}

.banners .product-categories .item {
    display: flex;
    padding: 1.5em;
}
.banners .product-categories .image {
    max-width: 150px;
    margin-right: 1em;
}
.mini-links ul {
    font-size: var(--font-small);
    color: var(--light-text-color);
    margin-top: 1em;
}
.banners .second-links {
    margin-top: 2em;
}
.mini-links li a:hover {
    text-decoration: underline;
}

/* ------------------- 
 * 06. FOOTER
 * ------------------- */  

    /* 06. FOOTER ----------------------------------------
        a. News Letter
       ---------------*/
.newsletter {
    padding: 2.5em 0;
    background-color: var(--dark-color);
    color: var(--white-color);
}       
.newsletter h3 {
    font-size: 1.5em;
}
.newsletter p {
    font-weight: var(--fw3);
    color: var(--border-color);
    margin: 0.5em 0 1.5em;
}
/* Antes usava --primary-color, que em lojas de tema escuro (ex.: #000)
   desaparecia sobre o fundo escuro da newsletter. */
.newsletter p strong {
    color: var(--white-color);
    font-weight: var(--fw6);
}
.newsletter form {
    max-width: 500px;
    width: var(--percent100);
}

    /* 06. FOOTER ----------------------------------------
        b. Widgets
       ---------------*/
.widgets {
    padding: 3.5em 2.5em;
    background-color: var(--light-bg-color);
}

    /* 06. FOOTER ----------------------------------------
        c. Footer Info
       ---------------*/
.footer-info {
    padding: 3.5em 0 5em;
}       
.footer-info .wrapper .flexcol {
    align-items: center;
    gap: 0;
}
.footer-info ul li a {
    font-size: 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--light-bg-color);
    border-radius: var(--percente50);
    margin: 0.25em;
    transition: var(--trans-background);
}
.footer-info ul li a:hover {
    background-color: var(--border-color);
}
.footer-info .logo a{
    margin: 0 0 1em -0.75em;
}
.footer-info .mini-text {
    margin-top: 2em;
    text-align: center;
}

/* ------------------- 
 * 07. BOTTOM MENU
 * ------------------- */  

.menu-bottom {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   height: 60px;
   background-color: var(--white-color);
   box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
   z-index: 900;
}
.menu-bottom nav li {
   flex: 1;
}
.menu-bottom nav li a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5em 0;
    color: var(--light-text-color);
    transition: var(--trans-color);
}
.menu-bottom nav li a:hover {
    color: var(--dark-color);
}
.menu-bottom nav li a span {
    font-size: var(--font-smaller);
}
.menu-bottom nav li a i {
    font-size: 1.25em;
}
.menu-bottom .fly-item {
    right: 50%;
    width: 16px;
    border-radius: var(--percente50);
    margin-right: -20px;
    background-color: var(--secondary-dark-color);    
}

    /* 07. BOTTOM MENU ----------------------------------------
        a. Search
       ---------------*/
.search-bottom {
    position: fixed;
    bottom: 60px;
    width: var(--percent100);
    padding: 2.5em 0;
    background-color: var(--secondary-dark-color);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    will-change: visibility, opacity;
}       
.showsearch .search-bottom {
    visibility: inherit;
    opacity: 1;
}
.search-bottom .t-close {
    position: absolute;
    top: -54px;
    right: 0;
}
.search-bottom .t-close:hover {
    background-color:  var(--primary-color);
}

/* ------------------- 
 * 08. OVERLAY
 * ------------------- */
.overlay {
    position: fixed;
    width: var(--percent100);
    height: var(--percent100);
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
}
:where(.showmenu, .showmodal) .overlay {
    visibility: inherit;
    opacity: .7;
}


/* ------------------- 
 * 09. PAGE SINGLE
 * ------------------- */


    /* 07. PAGE SINGLE ----------------------------------------
        a. Department Menu
       ---------------*/
.page-home .dpt-cat .dpt-trigger,
.dpt-trigger .ri-close-line,
.showdpt .dpt-trigger .ri-menu-3-line {
    display: none;
}
.showdpt .dpt-trigger .ri-close-line {
    display: block;
}

    /* 07. PAGE SINGLE ----------------------------------------
        b. Breadcrumb
       ---------------*/

.breadcrumb {
    font-size: var(--font-small);
    margin-bottom: 2em;
}       
.breadcrumb li:not(:last-child)::after {
    content: '/';
    padding: 0 0.35em;
} 
.breadcrumb li:last-child {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--light-text-color);
}

    /* 07. PAGE SINGLE ----------------------------------------
        c. Product details
       ---------------*/

.products.one .item {
    flex-direction: column;
}       
.products.one .price .discount {
    font-size: 1em;
    font-weight: var(--fw7);
    line-height: 1;
    position: absolute;
    top: 0;
    bottom: auto;
    padding: 1em;
    z-index: 2;
    background-color: var(--dark-color);
    color: var(--white-color);
    border-radius: var(--percente50);
    margin: 0.5em;    
}       
.products.one .big-image {
    position: relative;
    margin-bottom: 1em;
}
.products.one :where(.big-image, .small-image) {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.products.one :where(.big-image, .small-image) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.products.one .thumbnail-show {
    position: relative;
    width: 130px;
    height: 110px;
    overflow: hidden;
    margin: 0 2em 2em 0;
}
.products :is(.swiper-button-next, .swiper-button-prev) {
    outline: 0;
    color: var(--secondary-dark-color);
    transition: var(--trans-background), transform .3s;
}
.products .big-image:hover .swiper-button-next {
    transform: translateX(10px);
}
.products .big-image:hover .swiper-button-prev {
    transform: translateX(-10px);
}
.products :is(.swiper-button-next, .swiper-button-prev::after) {
    font-size: 1.5em;
}
.products .big-image:hover :is(.swiper-button-next, .swiper-button-prev) {
    background-color: var(--light-bg-color);
}



    /* 07. PAGE SINGLE ----------------------------------------
        d. Product description
       ---------------*/
.products.one .available {
    font-size: var(--font-small);
    font-weight: var(--fw5);
    padding: 0.5em;
    margin-right: 1em;
    border-radius: 3px;
    color: #18ac84;
    background-color: var(--light-bg-color);
}       
.products.one .add-review {
    color: var(--dark-color);
}
.products.one .price {
    display: flex;
    gap: 1em;
    align-items: center;
    flex-wrap: wrap;
}
.products.one .price .current {
    font-size: 2.5em;
}
.products .variant form {
    display: flex;
    margin-top: 0.5em;
}
.products .variant form p {
    position: relative;
    margin: 0 0.5em 0.5em;
}
.products :where(.variant, .actions) .circle {
    display: block;
    position: static;
    top: 0;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
:where(.products .variant, .filter-block:not(.pricing)) input {
    clip: rect(0,0,0,0);
    overflow: hidden;
    position: absolute;
    height: 0;
    width: 0;
}
.products .actions input[type="text"] {
    font-size: var(--fw4);
    text-align: center;
    transition: transform 0.3s ease;
}
.products .actions input[type="text"].animate-number {
    transform: scale(1.2);
}
.products .colors .variant label::before {
    opacity: 1;
}
.products .variant label[for="cogrey"]::before {
    background-color: #576574;
}
.products .variant label[for="coblue"]::before {
    background-color: #45a0ff;
}
.products .variant label[for="cogreen"]::before {
    background-color: #1dd1a1;
}
.single-product .variant form p input:checked + label {
    background-color: transparent;
    border: 2px solid var(--dark-color);
    color: var(--white-color);
}

.products .sizes .variant label::before {
    background-color: var(--white-color);
}
.products .sizes .variant label span {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--percent100);
    height: var(--percent100);
    font-size: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.single-product .sizes .variant form p input:checked + label::before {
    background-color: var(--dark-color);
    opacity: 1;
}

/* Seletor de unidade de medida: carrossel horizontal de cards (substitui
   os antigos círculos .circle). Scroll por touch no mobile, setas no desktop. */
.sizes.unit-measures {
    margin-top: 1.25em;
}
.unit-carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.5em;
    margin-top: 0.5em;
}
.unit-track {
    display: flex;
    gap: 0.6em;
    flex: 1;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.unit-track::-webkit-scrollbar {
    display: none;
}
.unit-card {
    position: relative;
    flex: 0 0 auto;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.65em 1.6em 0.65em 0.85em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--card-background);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.unit-card input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.unit-card:hover {
    border-color: var(--dark-color);
}
.unit-card:has(input:checked) {
    border-color: var(--dark-color);
    background-color: var(--light-bg-color);
}
.unit-name {
    font-size: var(--font-small);
    font-weight: var(--fw6);
    color: var(--dark-color);
    white-space: nowrap;
}
.unit-price {
    font-size: var(--font-small);
    color: var(--light-text-color);
    white-space: nowrap;
}
.unit-contains {
    font-size: var(--font-smaller);
    color: var(--light-text-color);
    white-space: nowrap;
}
.unit-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background-color: var(--card-background);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.unit-card input:checked ~ .unit-check {
    background-color: var(--dark-color);
    border-color: var(--dark-color);
    color: var(--white-color);
}
.unit-discount-badge {
    position: absolute;
    top: -8px;
    left: 0.6em;
    padding: 0.05em 0.5em;
    font-size: var(--font-smaller);
    font-weight: var(--fw6);
    color: var(--success-color);
    background-color: var(--card-background);
    border: 1px solid var(--success-color);
    border-radius: var(--radius-sm);
    line-height: 1.6;
}
.unit-savings-msg {
    display: none;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.6em;
    padding: 0.5em 0.75em;
    font-size: var(--font-small);
    color: var(--success-color);
    border: 1px solid var(--success-color);
    border-radius: var(--radius-sm);
}
.unit-savings-msg.visible {
    display: flex;
}
.unit-nav {
    flex: 0 0 auto;
    align-self: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background-color: var(--card-background);
    color: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}
.unit-nav:hover {
    background-color: var(--light-bg-color);
}
.unit-nav:disabled {
    opacity: 0.3;
    cursor: default;
}
.unit-carousel.no-overflow .unit-nav {
    display: none;
}
@media (max-width: 768px) {
    .unit-nav {
        display: none;
    }
}

.products .actions {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2em;
}
.products .qty-control {
    width: fit-content;
    padding: 0.5em;
    border: 1px solid var(--border-color);
    margin: 0 2em 2em 0;
}
.quantity-tiers {
    margin: 1em 0 1.5em;
}
.quantity-tiers-title {
    font-size: var(--font-small);
    font-weight: var(--fw6);
    color: var(--secondary-dark-color);
    margin-bottom: 0.5em;
}
.quantity-tiers ul {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}
.quantity-tiers li {
    font-size: var(--font-small);
    color: var(--light-text-color);
    padding: 0.5em 0.8em;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.quantity-tiers li strong {
    color: var(--primary-color);
}
.quantity-tiers li.active {
    border-color: var(--secondary-color);
    color: var(--text-color);
}

/* "Compre junto" (leva de 5 features, item 3) -- mesma receita de
   .quantity-tiers/.unit-card acima: bloco novo, mas cores/tipografia/raio
   vêm 100% das variáveis já usadas no resto da página de produto. */
.buy-together {
    margin: 1.5em 0;
    padding: 1em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--light-bg-color);
}
.buy-together-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--font-small);
    font-weight: var(--fw6);
    color: var(--secondary-dark-color);
    margin-bottom: 0.8em;
}
.buy-together-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
}
.buy-together-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    width: 92px;
    text-align: center;
}
.buy-together-card .thumbnail {
    width: 64px;
    height: 64px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--card-background);
}
.buy-together-card .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.buy-together-name {
    font-size: var(--font-smaller);
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.buy-together-price {
    font-size: var(--font-smaller);
    font-weight: var(--fw6);
    color: var(--dark-color);
}
.buy-together-price .normal {
    font-weight: 400;
    color: var(--light-text-color);
    text-decoration: line-through;
    margin-left: 0.3em;
}
.buy-together-plus {
    font-size: var(--font-small);
    color: var(--light-text-color);
    flex: 0 0 auto;
}
.buy-together-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8em;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px dashed var(--border-color);
}
.buy-together-total {
    font-size: var(--font-small);
    color: var(--text-color);
}
.buy-together-total strong {
    color: var(--primary-color);
}
.buy-together-footer .primary-button {
    width: auto;
}

/* Upsell (leva de 5 features, item 5) -- mesma receita visual de
   .buy-together acima (raio/cor/tipografia das variáveis do tema), mas
   layout de card próprio: cada item tem preço + botão individual (não 1
   botão pro conjunto todo), então não dá pra reaproveitar .buy-together-card
   sem reescrever a estrutura interna. */
.upsell {
    margin: 1.5em 0;
    padding: 1em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--light-bg-color);
}
.upsell-title {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: var(--font-small);
    font-weight: var(--fw6);
    color: var(--secondary-dark-color);
    margin-bottom: 0.8em;
}
.upsell-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8em;
}
.upsell-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    width: 120px;
    text-align: center;
}
.upsell-card .thumbnail {
    display: block;
    width: 80px;
    height: 80px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--card-background);
}
.upsell-card .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.upsell-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}
.upsell-name {
    font-size: var(--font-smaller);
    color: var(--text-color);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.upsell-price {
    font-size: var(--font-smaller);
    font-weight: var(--fw6);
    color: var(--dark-color);
}
.upsell-add-btn {
    font-size: var(--font-smaller);
    padding: 0.4em 0.6em;
    width: auto;
}

/* Upsell do CARRINHO (leva de 5 features, item 5) -- bloco discreto abaixo
   da lista de itens, mesmo espírito do .upsell da página de produto só que
   compacto (1 produto só) pra caber no fluxo do carrinho/mini-cart sem
   empurrar o botão "Finalizar Compra" pra fora da vista. */
.cart-upsell {
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin-top: 1em;
    padding: 0.8em;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--light-bg-color);
}
.cart-upsell .thumbnail {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--card-background);
}
.cart-upsell .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cart-upsell-content {
    flex: 1 1 auto;
    min-width: 0;
}
.cart-upsell-label {
    font-size: var(--font-smaller);
    color: var(--light-text-color);
    margin-bottom: 0.1em;
}
.cart-upsell-name {
    font-size: var(--font-small);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cart-upsell-price {
    font-size: var(--font-small);
    font-weight: var(--fw6);
    color: var(--dark-color);
    margin-left: 0.4em;
}
.cart-upsell-add-btn {
    flex: 0 0 auto;
    font-size: var(--font-smaller);
    padding: 0.4em 0.6em;
    width: auto;
}
.products .actions :where(input, button) {
    font-size: 1.25em;
    outline: 0;
    border: 0;
}
.products .actions input {
    width: 50px;
    text-align: center;
}
.products .qty-control button::before {
    background-color: transparent;
}
.products .actions .button-cart {
    flex: 1;
    min-width: 200px;
}
.products .actions .button-cart button {
    width: var(--percent100);
    cursor: pointer;
}
.wish-share a {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: var(--fw7);
    margin: 1em 2em 1em 0;
    transition: var(--trans-color);
}

#confirmation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

    /* 07. PAGE SINGLE ----------------------------------------
        e. Product review
       ---------------*/
.products .collapse .has-child > a {
    position: relative;
    font-weight: var(--fw7);
    text-transform: uppercase;
    padding: 1em 1.25em;
    border-top: 1px solid var(--border-color);
}     
.products .collapse .has-child > a::before {
    content: '+';
    position: absolute;
    left: 0;
}  
.products .collapse .content {
    margin: 0 0 1.5em 2em;
    font-size: var(--font-small);
}
.products .collapse .content li span:first-child {
    min-width: 100px;
    display: inline-flex;
    font-weight: var(--fw7);
    text-transform: uppercase;
}
.products .collapse table {
    line-height: 3em;
}
.products .collapse table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--dark-color);
}
.products .collapse table :where(th, td) {
    border-bottom: 1px solid var(--border-color);
    padding-left: 2em;
}
.products .collapse .content {
    display: none;
}
.products .collapse .expand .content {
    display: flex;
}
.products .collapse .expand > a::before {
    content: '-';
}

    /* 07. PAGE SINGLE ----------------------------------------
        e + 1. Product review select variations
       ---------------*/

.products .select {
    align-items: left;
}

.products #variation-select label {
    font-size: var(--font-small);
    letter-spacing: 0.0225rem;
}

.products #select-button {
    margin-top: .5rem;
    display: flex;
    padding: 0.75rem;
    align-items: center;
    justify-content: space-between;
    
    border-radius: .375rem;
    border: 1px solid var(--border-color);
    background-color: var(--light-bg-color);
}

.products #selected-value {
    color: var(--light-text-color);
    font-size: var(--font-small);
    letter-spacing: 0.02625rem;
}

.products #chevrons svg {
    width: 1rem;
    height: 1rem;
}

.products #chevrons {
    color: var(--secondary-dark-color);
}

.products #chevrons [data-lucide="chevron-up"] {
    display: none;
}

#options-view-button:focus + #select-button,
#options-view-button:checked + #selected-button {
    outline: 1px solid var(--primary-color);
}

#variation-select:has(#options-view-button:checked) label,
#options-view-button:checked + #select-button #chevrons {
    color: var(--primary-color);
}

#options-view-button:checked + #select-button #chevrons
[data-lucide="chevron-down"] {
    display: none;
}

#options-view-button:checked + #select-button #chevrons
[data-lucide="chevron-up"] {
    display: block;
}

.products #variation-select {
    position: relative;
}

.products #options-view-button {
    all: unset;

    position: absolute;
    inset: 0;
    
    cursor: pointer;
    z-index: 3;
}

.products .select #options {
    margin-top: .25rem;

    border-radius: .375rem;
    border: 1px solid var(--border-color);
    background: var(--light-bg-color);

    display: none;
}

.products .select .option {
    display: flex;
    position: relative;
    align-items: center;
    gap: .5rem;

    padding: .75rem;

    border-bottom: 1px solid var(--border-color);
}

.products .select .option label {
    color: var(--light-text-color);
}

.products .select .option svg {
    width: 1rem;
    height: 1rem;
}

.products .select #options .option svg {
    margin-left: auto;
    color: var(--secondary-dark-color);
}

.products .select #options .option:has(input:checked),
.option:hover {
    border-bottom: 1px solid var(--border-color);
    background-color: var(--border-color);
}

.products .select #options .option:has(input:focus) {
    outline: 1px solid var(--secondary-dark-color);
}

.products .select .option [data-lucide="check"] {
    display: none;
}

.products .select #options .option:has(input:checked) [data-lucide="check"] {
    display: block;
}

.products .select .option input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.products .select #variation-select:has(#options-view-button:checked) + #options {
    display: block;
}

.products .select:has(.option input:checked) #variation-select label {
    color: var(--light-text-color);    
}

.products .select:has(.option input:checked) #selected-value {
    color: var(--light-text-color);    
}

    /* 07. PAGE SINGLE ----------------------------------------
        f. Product review
       ---------------*/

.products .reviews h4 {
    font-size: 1.5em;
    color: var(--dark-color);
    padding-top: 1em;
    margin: 1em 0 0.5em;
    border-top: 1px solid var(--border-color);
}       
.products .review-block {
    color: initial;
}
.products .review-block-head > a {
    display: block;
    font-size: 1.25em;
    width: var(--percent100);
    margin-top: 1em;
    text-align: center;
    gap: 1em;
    align-items: flex-start;
}
.products .review-block-head .rate-sum {
    position: relative;
    font-size: 4em;
    font-weight: var(--fw7);
    padding-right: 0.5em;
}
.products .review-block-head .rate-sum::before {
    content: '';
    width: 2px;
    height: 50px;
    display: block;
    position: absolute;
    top: 10px;
    right: 13px;
    transform: rotate(22deg);
    background-color: var(--light-bg-color);
}
.products .review-block-body .item {
    gap: 1em;
    padding-bottom: 2.5em;
    margin-top: 3.5em;
}
.products .review-block-body :where(.person, .review-title) {
    font-weight: var(--fw7);
    text-transform: uppercase;
}
.products .review-block-body :where(.review-title, .view-all) {
    font-size: 1.25em;
    justify-content: end;
}
.products .review-block-body .item:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

    /* 07. PAGE SINGLE ----------------------------------------
        g. Product review Form
       ---------------*/
.review-form .rating {
    flex-wrap: wrap;
}
.review-form p {
    font-size: 1.25em;
    margin-right: 1em;
}
.review-form .rate-this input {
    display: none;
}
.review-form .rate-this label {
    float: right;
    font-size: 2em;    
    color: var(--secondary-dark-color);
}
.rate-this > input:checked ~ label,
.rate-this:not(:checked) > label:hover,
.rate-this:not(:checked) > label:hover ~ label {
    color: #f1c40e;
}
.rate-this > input:checked + label:hover,
.rate-this > input:checked ~ label:hover,
.rate-this > label:hover ~ input:checked ~ label,
.rate-this > input:checked ~ label:hover ~ label {
    color: #ffed85;
}
.review-form form {
    margin-top: 2.5em;
}

form p {
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}
form :where(input,textarea) {
    line-height: 1;
    padding: 1em;
    border: 1px solid var(--border-color);
    outline: 0;
}
form label {
    font-weight: var(--fw5);
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

/* ------------------- 
 * 09. PAGE SINGLE: SPECIAL OFFER
 * ------------------- */
.page-single .stock {
    margin: 2em 0;
}
.page-single .stock .qty span:last-child {
    color: initial;
} 
.single-product .stock .bar {
    height: 10px;
}
.page-single .stock .bar .available {
    margin: 0;
    border-radius: 0;
    background-color: var(--secondary-dark-color);
}

.related-products .content {
    height: var(--percent100);
}
.related-products .offer {
    margin: 0;
}
.related-products .offer p {
    margin: 0 1em 0 0;
    text-transform: none;
    line-height: 1;
}
.related-products .offer ul li {
    width: 20px;
    height: 28px;
    font-size: var(--font-small);
    padding: 0.5em 0.25em;
}
.related-products .content .stock {
    margin-top: auto;
}

/* ------------------- 
 * 10. PAGE CATEGORY
 * ------------------- */

.single-category .holder {
    display: flex;
    flex-direction: column;
} 
.single-category .sidebar,
.single-category .section {
    flex:  0 100%;
}

    /* 10. PAGE CATEGORY ----------------------------------------
        a. Sidebar products filter
       ---------------*/

.filter-block {
    margin-bottom: 1em;
    padding-bottom: 1em;
}       
.filter-block:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.filter-block h4 {
    font-size: 1.25em;
    margin-bottom: 0.5em;
}
.filter-block li {
    display: flex;
    font-size: 0.9em;
    position: relative;
    line-height: 2;
}
.filter-block label .checked {
    width: 16px;
    height: 16px;
    position: relative;
    line-height: 0;
    display: inline-block;
    border: 2px solid var(--secondary-dark-color);
    vertical-align: text-top;
    margin: 0 7px 0 0;
    cursor: pointer;
}
.filter-block label .checked::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: var(--secondary-dark-color);
    top: 2px;
    left: 2px;
    opacity: 0;
}
.filter-block input:checked + label .checked::before {
    opacity: 1;
}
.filter-block li .count {
    margin-left: auto;
    color: var(--light-text-color);
}

.bycolor label[for="cored"]::before {
    background-color: var(--primary-color);
}
.bycolor label[for="colight"]::before {
    background-color: var(--border-color);
}
.bycolor input:checked + label {
    background-color: transparent;
    border: 2px solid var(--dark-color);
}

input[type="range"] {
    -webkit-appearance: none;
    width: var(--percent100);
}
input[type="range"]:focus {
    outline: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
    width: var(--percent100);
    height: 5px;
    cursor: pointer;
    background-color: var(--border-color);
    box-shadow: none;
    border: 0;
}
input[type="range"]::-webkit-slider-thumb {
    z-index: 2;
    position: relative;
    height: 18px;
    width: 14px;
    background-color: var(--primary-color);
    -webkit-appearance: none;
    margin-top: -7px;
}
.byprice .price-range {
    display: flex;
    justify-content: space-between;
    color: var(--light-text-color);
    margin-top: 0.5em;
}

    /* 10. PAGE CATEGORY ----------------------------------------
        b. Head & products block
       ---------------*/

.page-title {
    margin-bottom: 3em;
}       
.cat-description p {
    font-weight: var(--fw3);
    font-size: 0.9em;
}       
.cat-navigation {
    font-size: 0.85em;
    margin: 2em 0;
    justify-content: flex-end;
    gap: 1em;
}
.cat-navigation .item-filter {
    margin-right: auto;
}
.cat-navigation > div {
    position: relative;
}
.cat-navigation .item-filter a {
    align-items: center;
    text-transform: uppercase;
}
.cat-navigation ul {
    display: none;
    position: absolute;
    left: 0;
    min-width: var(--percent100);
    width: max-content;
    z-index: 10; 
}
.cat-navigation .label .cat-navigation ul li {
    display: flex;
    gap: 0.5em;
    padding: 0.5em 1em;
    transition: var(--trans-color);
}
:where(.item-sortir, .item-options) .label,
.cat-navigation ul {
    color: var(--light-text-color);
    padding: 0.5em 1em;
    background-color: var(--light-bg-color);
    cursor: pointer;
}
.cat-navigation :where(label, ul li):hover {
    color: var(--dark-color);
}
:where(.item-sortir, .item-options):hover ul {
    display: block;
}

.load-more {
    margin: 2em 0 4em;
}

.filter {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    padding: 2em;
    max-width: 400px;
    width: 90%;
    background-color: var(--white-color);
    overflow: auto;
    z-index: 1000;
    box-shadow: rgb(0 0 0 / 30%) 0 10px 50px;
    visibility: hidden;
    opacity: 0;
}
.filter.show {
    visibility: visible;
    opacity: 1;
}

/* ------------------- 
 * 11. PAGE CART
 * ------------------- */
.mini-cart {
    position: absolute;
    width: 400px;
    top: 100%;
    right: 0;
    background-color: var(--white-color);
    z-index: 1000;
    box-shadow: rgb(0 0 0 / 30%) 0 10px 50px;
    visibility: hidden;
    opacity: 0;
}
.iscart:hover .mini-cart {
    visibility: visible;
    opacity: 1;
}
:is(.mini-cart .products, .products.cart, .checkout .products) .thumbnail img {
    transform: none;
}
.mini-cart ul :where(li, .price) {
    position: relative;
}
.mini-cart .content {
    width: var(--percent100);
    height: var(--percent100);
    touch-action: auto;
    padding: 1.5em;
}
.mini-cart .cart-head {
    font-size: 1.5em;
    font-weight: var(--fw5);
    color: var(--light-text-color);
    padding-bottom: 0.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--border-color);
}
.mini-cart .cart-body {
    padding: 0 1.5em;
    margin: 0 -1.5em;
    max-height: 450px;
    overflow: auto;
}
:where(.mini-cart, .products.cart, .checkout) .thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 1em;
}
.mini-cart .item-content p {
    font-size: var(--font-small);
    font-weight: var(--fw5);
    margin-bottom: 1.5em;
    line-height: 1.2;
}
.mini-cart .item-remove {
    margin-left: 1em;
    flex: 1;
    justify-content: flex-end;
}
.mini-cart .subtotal {
    display: flex;
    flex-direction: column;
    padding-top: 1em;
    margin-bottom: 2em;
    border-top: 1px solid var(--border-color);
}
.mini-cart .subtotal p:last-child {
    font-size: 2em;
}
.mini-cart .actions a {
    display: block;
    width: var(--percent100);
    text-align: center;
    margin-bottom: 1em;
}

.mini-cart.show {
    visibility: visible;
    opacity: 1;
    position: fixed;
    top: 0;
    bottom: 0;
    max-width: 400px;
    width: 90%;
}

/* ------------------- 
 * 12. PAGE CART
 * ------------------- */
.products.cart form {
    width: var(--percent100);
}
.products.cart table thead th {
    vertical-align: middle;
    background-color: var(--light-bg-color);
}
.products.cart table :where(th, td) {
    padding: 2em 1em;
    text-align: center;
}
.products.cart table :where(th, td):first-child {
    text-align: left;
    padding-left: 2em;
}
.products.cart table tbody td:first-child {
    padding-left: 0;
}
.products.cart table td :where(.content, .qty-control, p) {
    margin: 0;
    padding: 0;
}
.products.cart .qty-control :where(button, input) {
    width: 32px;
    height: 32px;
    padding: 0.25em;
    text-align: center;
    outline: 0;
    border: 0;
    background-color: transparent;
}
.products.cart .qty-control button {
    cursor: pointer;
}
.products.cart table tbody tr {
    border-bottom: 1px solid var(--border-color);
}

.cart-summary {
    width: var(--percent100);
    margin: 2.5em 0 4em;
}
.cart-summary .item {
    background-color: var(--light-bg-color);
}

/* ---------------------------------------------------------------
 * Barra de progresso do frete grátis (2026-08-11)
 *
 * Duas telas, um desenho só: o topo do resumo do carrinho e, com o
 * modificador `--mini`, a gaveta do mini-carrinho que existe em toda
 * página com cabeçalho. Quem monta é
 * scripts/features/cart/FreeShippingBar.js -- ver lá o porquê de o
 * módulo do tema CLÁSSICO morar em `features/` e não em `themes/`.
 *
 * O CSS mora aqui, e não num arquivo próprio, porque `style.css` É o
 * tema clássico (ver views/partials/theme-assets.php): tema próprio não
 * carrega este arquivo, e é exatamente isso que mantém a barra de cada
 * tema separada da dos outros.
 * --------------------------------------------------------------- */
.free-shipping-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    padding: 1.5em;
    border-bottom: 1px solid var(--border-color);
}
.free-shipping-bar__text {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--font-small);
    line-height: 1.4;
    color: var(--light-text-color);
}
.free-shipping-bar__text strong {
    color: var(--dark-color);
    font-weight: var(--fw7);
}
.free-shipping-bar__text i {
    font-size: 1.35em;
    color: var(--primary-color);
}
.free-shipping-bar--won .free-shipping-bar__text i,
.free-shipping-bar--won .free-shipping-bar__text strong {
    color: var(--success-color);
}
.free-shipping-bar__track {
    height: 6px;
    background-color: var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}
.free-shipping-bar__fill {
    display: block;
    width: 0;
    height: var(--percent100);
    background-color: var(--primary-color);
    border-radius: inherit;
    transition: width 0.5s ease;
}
.free-shipping-bar--won .free-shipping-bar__fill {
    background-color: var(--success-color);
}

/* Na gaveta o rodapé já tem o respiro do painel, então aqui a barra
   dispensa a moldura: só o espaço até o subtotal, cujo próprio
   `border-top` faz a separação. */
.free-shipping-bar--mini {
    padding: 0;
    border-bottom: 0;
    margin-bottom: 0.5em;
}
.cart-summary .coupon input {
    font-size: 1.1em;
    outline: 0;
    width: var(--percent100);
    padding: 0 1.5em;
    line-height: 50px;
    background-color: var(--white-color);
    border: 3px solid var(--dark-color);
}
.cart-summary .coupon button {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    outline: 0;
    font-size: 1em;
    padding: 0 2.5em;
    line-height: 54px;
    background-color: var(--dark-color);
    color: var(--white-color);
    cursor: pointer;
}
.cart-summary .shipping-rate {
    padding: 0 2em 0 1em;
}
.cart-summary .shipping-rate .has-child > a {
    font-size: 1em;
    margin: 2em 0;
    border: 0;
}
.cart-summary .content form {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}
.styled :where(input, select, textarea) {
    padding: 0.75em;
    outline: 0;
    background-color: var(--white-color);
    border-width: 0 0 3px 0;
    border-style: solid;
    border-color: var(--border-color);
}
.products .cart-summary .variant form label {
    position: relative;
    border: 0;
    background-color: var(--white-color);
    transform: scale(.5) translateX(-25px);
}
.cart-summary .variant p span {
    position: absolute;
    top: 0;
    left: 28px;
    line-height: 3;
}
.cart-summary .variant input:checked + label::before {
    opacity: 1;
}
.products.cart .cart-total table tr > * {
    padding: 0;
}
.products.cart .cart-total table td {
    text-align: right;
}
.cart-summary .cart-total {
    padding: 2em;
    background-color: var(--border-color);
    line-height: 2em;
}
.cart-summary .cart-total table {
    width: var(--percent100);
}
.cart-summary .cart-total table tr {
    display: flex;
    justify-content: space-between;
}
.cart-summary .grand-total td {
    font-size: 2em;
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: var(--fw8);
    line-height: 2em;
}
.cart-summary .cart-total > a {
    width: var(--percent100);
    display: block;
    text-align: center;
    margin-top: 2em;
    font-size: 1.25em;
}

/* ------------------- 
 * 13. PAGE CHECKOUT
 * ------------------- */

.checkout {
    max-width: var(--percent100);
    margin: 2.5em 0;
}
.checkout .left {
    padding: 2em;
    background-color: var(--light-bg-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.checkout .item {
    width: var(--percent100);
}
/* Títulos do checkout — antes h1 ("Endereço para entrega") saía gigante e
   fino (herdava o h1 global de calc(1.3em + 1vw) + fw3) enquanto os h2
   ("Opções de Pagamento"/"Resumo do pedido") saíam bem menores e em negrito
   — dois pesos tipográficos diferentes na mesma página. Unificado. */
.checkout .left h1,
.checkout h2 {
    font-size: 1.4em;
    font-weight: var(--fw7);
    color: var(--dark-color);
    margin-bottom: 1em;
}
.checkout .left label {
    font-size: var(--font-small);
    text-transform: capitalize;
    position: relative;
    width: fit-content;
}
.checkout .left label span {
    position: absolute;
    top: 0;
    right: -10px;
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    border-radius: var(--percente50);
}
.checkout p :where(input, textarea) {
    background-color: rgb(255 255 255 / 50%);
    font-family: inherit;
}
.checkout p input:focus {
    background-color: var(--white-color);
}
.checkout p.checkset {
    flex-direction: row;
}
.checkout p.checkset label {
    margin: 0 0 0 1em;
    cursor: pointer;
}
.checkout h2 {
    padding-top: 1.25em;
    border-top: 1px solid var(--border-color);
}
.primary-checkout button {
    display: block;
    border: 0;
    outline: 0;
    cursor: pointer;
    width: var(--percent100);
    max-width: 288px;
    font-size: 1.2em;
    margin: 3em auto 0;
}
.checkout .item.right {
    padding: 5em 0 0;
}
.summary-totals ul {
    max-width: 335px;
    line-height: 2;
    margin-bottom: 3em;
    padding-bottom: 2em;
    border-bottom: 1px solid var(--secondary-dark-color);
}
.summary-totals li {
    display: flex;
    justify-content: space-between;
    font-weight: var(--fw5);
}
.summary-totals li strong {
    font-size: 2.5em;
    line-height: 1;
}
.summary-totals li:last-child {
    margin-top: 2em;
}
.summary-totals li:not(:last-child) span:first-child {
    color: var(--light-text-color);
}

/* Linha de frete no resumo — antes era "Entrega: sedex" cru e minúsculo
   (literalmente o código interno da transportadora, não um nome de
   exibição) tudo espremido num span só. */
.summary-shipping {
    align-items: flex-start;
}
.summary-shipping-label {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
}
.summary-shipping-label .mini-text {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.summary-order .price {
    display: flex;
    flex-direction: column;
    color: var(--light-text-color);
    font-size: 0.75em;
    margin-top: 0.4em;
}

/* Box "Seus benefícios" do checkout (cashback/pontos) — item 6 */
.benefits-box {
    max-width: 335px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius, 8px);
    padding: 1em 1.2em;
    margin-bottom: 1.5em;
    background-color: var(--card-background);
}
.benefits-box h3 {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1em;
    color: var(--secondary-dark-color);
    margin-bottom: 0.75em;
}
.benefit-toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    cursor: pointer;
    padding: 0.4em 0;
}
.benefit-toggle input {
    margin-top: 0.25em;
    accent-color: var(--secondary-color);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.benefit-toggle span {
    display: flex;
    flex-direction: column;
    font-weight: var(--fw5);
}
.benefit-toggle small {
    color: var(--light-text-color);
    font-size: var(--font-smaller);
    font-weight: 400;
}


/* ------------------- 
 * 14. MODAL
 * ------------------- */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 600px;
    width: 90%;
    height: max-content;
    padding: 2em;
    margin: auto;
    text-align: center;
    background-color: var(--light-bg-color);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: transform .2s, visibility, .2s, opacity .2s;
}
.showmodal .modal {
    visibility: visible;
    opacity: 1;
    transform: translate(0);
    transition: transform 1s, visibility 1s, opacity 1s;
}
.modal .image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    height: 300px; /* Aumenta a altura do container */
    margin: 1em 0;
}

.modal .image img {
    width: 90%; /* Define o tamanho da imagem como 80% da largura do container */
    height: auto;
    max-height: 90%; /* Garante que a imagem não ultrapasse o container */
    object-fit: contain;
    margin-left: 10px;
    border-radius: 8px;
}
.modal h2 {
    font-size: 1.75em;
    text-transform: uppercase;
    max-width: 300px;
    margin: 0.5em auto;
    line-height: 1;
}
.modal p {
    margin-bottom: 1em;
    color: var(--light-text-color);
}
.modal .t-close {
    position: absolute;
    top: 1em;
    right: 1em;
}

/* ------------------- 
 * 15. RESPONSIVE
 * ------------------- */ 


.products.one .big-image {
    height: 600px;
}

.products.one .image-show {
    height: 600px;
}

@media screen and (min-width: 481px) {
    .products.main .item {
        flex: 0 0 50%;
    }

    /* page single */
    .products.one .big-image {
        margin-bottom: 2em;
    }
    .products.one .image-show {
        height: 600px;
    }
    .products.one .thumbnail-show {
        height: 168px;
    }
} 

@media screen and (max-width: 639px) {
    .logo img {
        display: block; /* Melhora a renderização para elementos <img> */
        padding-left: 0.1em; /* Mantém o espaçamento à esquerda */
        margin-right: 0; /* Espaçamento à direita */
        position: relative; /* Apenas necessário se houver conteúdo posicionado dentro da logo */
        max-width: 60px; /* Limita o tamanho máximo em largura */
        max-height: 50px; /* Limita o tamanho máximo em altura */
        width: auto; /* Garante que a proporção original seja mantida */
        height: auto; /* Evita distorção */
    }
    #cart-table thead {
        display: none;
    }
    #cart-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        position: relative;
        align-items: center;
    }
    #cart-table tbody tr td:first-child {
        width: var(--percent100);
        min-width: var(--percent100);
        position: relative;
    }
    #cart-table tbody tr td:not(:first-child) {
        flex-basis: 0;
        flex-grow: 1;
        max-width: var(--percent100);
    }
    #cart-table tbody tr td:last-child {
        position: absolute;
        top: 0;
        right: 0;
    }
}

@media screen and (min-width: 768px) {
    .products .price .current {
        font-size: 1.25em;
    }
    .products.mini, 
    .banner .row,
    .widgets .row,
    .checkout .item {
        flex: 0 0 50%;
    }
    .products.main .item {
        flex: 0 0 33.3333%;
    }
    .products.one .row {
        flex: 0 0 50%;
        width: 50%;
    }
    .products.one .is_sticky,
    .is_sticky {
        position: sticky;
        top: 2em;
    }
    .checkout .item.right {
        padding: 5em 0 0 5em;        
    }
} 

@media screen and (min-width: 922px) {
    .container {
        padding: 0.2em;
    }    
    .desktop-hide {
        display: none;
    }
    .mobile-hide {
        display: block;
    }
    .logo a {
        margin-right: 2em;
    }
    .header-nav {
        padding: 0;
        margin: 0;
        border-bottom: 0;
    }
    .header-nav .right li > a {
        margin-left: 1em;
    }

    /* mega menu */
    nav .mega {
        position: absolute;
        width: var(--percent100);
        height: auto;
        top: auto;
        left: 0;
        right: 0;
        padding: 2.5em;
        line-height: 2em;
        background-color: var(--light-bg-color);
        box-shadow: rgb(0 0 0 / 20%) 0 30px 20px -30px;
        z-index: 100;

        display: none;
    }

    nav li.has-child:hover .mega {
        display: block;
    }

    nav .mega .wrapper {
        display: flex;
    }
    nav .mega h4{
        font-size: 0.8em;
        text-transform: uppercase;
    }
    nav .mega ul {
        font-size: var(--font-small);
    }
    nav .mega .brands {
        display: flex;
        flex-wrap: wrap;    
        max-width: 180px;
    }
    nav .mega .brands li {
        min-width: 80px;    
    }
    nav .mega .view-all {
        margin-top: 1em;    
    }
    nav .mega .products {
        flex: 2;   
        padding: 0;
        align-items: center; 
    }
    nav .mega .products .row {
        width: var(--percent100);
    }
    nav .mega .products .media {
        height: 400px;
    }
    nav .mega .products .text-content {
        line-height: initial;
        display: flex;
        flex-direction: column;  
        align-items: center;
        gap: 0.5em;
        position: absolute;
        bottom: 4em;
        width: var(--percent100);
    }
    nav .mega .products .text-content h4 {
        font-size: 2em;
        font-weight: var(--fw8);
        text-align: center;
        color: var(--secondary-dark-color);
    }

    .header-main .right {
        max-width: 600px;
        margin-left: auto;
    }

    /* Departments menu */
    .dpt-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 300px;
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-top: 0;
        border-bottom: 0;
    }
    
    .dpt-menu > ul > li > a {
        font-weight: var(--fw5);
        padding: 0 1.5em;
        border-bottom: 1px solid var(--border-color);
        position: relative;
    }
    
    .dpt-menu .has-child > ul, .dpt-menu .mega {
        position: absolute;
        top: 0;
        left: 100%;
        width: 300px;
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-top: 0;
        display: none;
        background-position: right bottom;
        background-repeat: no-repeat;
        background-size: auto;
    }
    
    .dpt-menu .has-child:hover > .mega {
        display: flex;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 300px;
        width: auto;
        background-color: var(--white-color);
        border: 1px solid var(--border-color);
        border-top: 0;
        padding: 1.5em;
        box-sizing: border-box;
    }

    .dpt-menu .has-child > :where(ul, .mega)::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, rgba(225,225,225,1) 0%, rgba(225,225,225,0));
    } 
    
    /* slider */
    .slider > div > .wrapper {
        width: calc(100% - (300px + 2em));
        margin-left: auto;
    }     

    /* products */
    .trending .products,
    .product-categories .row {
        flex: 0 0 33.3333%;
    }
    .products.big .media {
        max-height: 373px;    
    }

    .products.main .item,
    .widgets .row {
        flex: 0 0 25%;
    }

    /* footer */
    .newsletter .box {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Page Single */

    #page:not(.page-home) .dpt-menu {
        display: none;
    }
    #page.showdpt .dpt-menu {
        display: block;
    }
    .products.one .flexwrap > .row:last-child > .item {
        padding-left: 2em;
    }

    /* Page Category */
    .single-category .holder {
        flex-direction: row;
    }
    .single-category .section {
        flex: 0 0 25%;
    }
    .single-category .section {
        flex: 0 0 75%;
    }
    .single-category .sidebar .filter {
        padding-right: 1.5em;
        position: sticky;
        top: 2em;
        box-shadow: none;
        width: var(--percent100);
        z-index: initial;
        visibility: visible;
        opacity: 1;
    }
    .single-category .products.main .item {
        flex: 0 0 33.3333%;
    }

    /* page cart */
    .products.cart .form-cart {
        width: 66%;
    }
    .products.cart .cart-summary {
        width: 34%;
        padding-left: 2.5em;
        margin-top: 0;
    }

}

/* ------------------- 
 * 16. PAGINATION
 * ------------------- */

 .pagination {
    display: flex;
    align-items: center;
    background-color: var(--white-color);
    color: var(--light-text-color);
    padding: 10px 20px;
    border-radius: 6px;
    justify-content: space-between;
    max-width: 98%;
    margin: 0 auto;
    overflow-x: hidden; /* Desativa o scroll no desktop */
}

.pagination ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    justify-content: flex-start;
}

.pagination ul li {
    display: inline-block;
    margin: 0 4px;
    width: 35px;
    height: 35px;
    line-height: 33px;
    font-size: var(--font-small);
    font-weight: var(--fw5);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pagination ul li.link:hover {
    background-color: var(--light-bg-color);
    border-color: var(--border-color);
}

.pagination .btn1,
.pagination .btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-size: 1.1em;
    color: var(--dark-color);
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}
.pagination .btn1:hover,
.pagination .btn2:hover {
    background-color: var(--light-bg-color);
}

.pagination ul li.active {
    color: var(--white-color);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Esconder a barra de rolagem, mantendo a funcionalidade */
.pagination {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pagination::-webkit-scrollbar {
    display: none;
}

/* Media Queries para Responsividade */
@media (max-width: 768px) {
    .pagination {
        padding: 10px;
    }

    .pagination ul {
        overflow-x: auto; /* Habilita o scroll lateral apenas no mobile */
    }

    .pagination ul li {
        margin: 0 2px;
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: calc(var(--font-small) - 2px);
    }

    .pagination .btn1,
    .pagination .btn2 {
        width: 30px;
        height: 30px;
        margin: 0 5px;
    }
}

/* Preloader — nome da loja + barra indeterminada na cor do tenant
   (--primary-color, sobrescrita em runtime por ThemeColors.js). Fade-out
   controlado por shared/Preloader.js via .is-done. */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Para ficar acima de tudo */
    transition: opacity 0.35s ease-out;
}

#preloader.is-done {
    opacity: 0;
    pointer-events: none;
}

.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 1.5rem;
}

.preloader-name {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-weight: var(--fw8);
    font-size: clamp(1.35rem, 4vw, 1.9rem);
    letter-spacing: -0.02em;
    color: var(--dark-color);
    text-align: center;
    animation: preloader-breathe 2.2s ease-in-out infinite;
}

.preloader-bar {
    position: relative;
    width: 152px;
    height: 3px;
    border-radius: 999px;
    background: var(--light-bg-color);
    overflow: hidden;
}

.preloader-bar span {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: var(--primary-color);
    transform: translateX(-110%);
    animation: preloader-sweep 1.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes preloader-sweep {
    to { transform: translateX(260%); }
}

@keyframes preloader-breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    #preloader { transition: none; }
    .preloader-name { animation: none; }
    .preloader-bar span { animation: none; left: 0; width: 100%; }
}

#page {
    display: none; /* Inicialmente oculto, exibido após o preloader */
}

#calculateFreight {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

#calculateFreight:hover {
    background-color: var(--secondary-dark-color);
}

.delivery-option span {
    flex-grow: 1; /* Faz o texto crescer e ocupar o espaço disponível */
    font-weight: var(--fw5);
    color: var(--secondary-color);
}
.delivery-option input {
    margin-left: 10px;
    accent-color: var(--secondary-color);
}
.delivery-option label {
    cursor: pointer;
}
.delivery-option input[type="radio"] {
    display: none;
}
.delivery-option input[type="radio"]:checked ~ .freight-info span {
    color: var(--secondary-color);
}
.delivery-option input[type="radio"]:checked ~ .freight-info {
    border-color: var(--secondary-color);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.freight-info {
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 15px;
    width: 100%;
    margin-top: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.freight-info img {
    width: 50px;
    height: auto;
    margin-right: 30px;
}

.freight-info p {
    margin: 5px 0;
    color: var(--light-text-color);
    font-size: var(--font-small);
}
.freight-info h3 {
    font-size: var(--font-small);
    font-weight: var(--fw5);
    margin: 0;
    color: var(--primary-color);
}


#loader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.spinner {
    border: 8px solid rgba(255, 255, 255, 0.3); /* Cor do fundo do spinner */
    border-top: 8px solid var(--secondary-dark-color); /* Cor do topo do spinner */
    border-radius: 50%; /* Forma circular */
    width: 50px; /* Largura do spinner */
    height: 50px; /* Altura do spinner */
    animation: spin 1s linear infinite; /* Animação de rotação */
}

@keyframes spin {
    0% {
        transform: rotate(0deg); /* Início da rotação */
    }
    100% {
        transform: rotate(360deg); /* Fim da rotação */
    }
}

.address-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.address-card {
    border: 2px solid transparent;
    padding: 15px;
    border-radius: 10px;
    background-color: var(--white-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    transition: border-color 0.3s ease;
    position: relative; /* Certifique-se de que a classe disabled será aplicada corretamente */
}

.edit-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--secondary-dark-color); /* Cor de fundo do botão */
    border: none;
    border-radius: 5px; /* Adiciona borda arredondada se desejado */
    cursor: pointer;
    font-size: 20px;
    color: white; /* Cor do ícone, para destacar sobre o fundo */
    padding: 8px; /* Espaçamento interno ao redor do ícone */
    text-decoration: none; /* Remove underline do link */
    transition: background-color 0.3s ease, color 0.3s ease; /* Suaviza a transição de cor */
}

.edit-btn:hover {
    background-color: var(--primary-color); /* Cor de fundo no hover */
    color: white; /* Garante que o ícone continue visível no hover */
}

.address-card.disabled {
    pointer-events: none;  /* Impede interações com o card */
    opacity: 0.5;          /* Torna o card visualmente mais claro */
}

.address-card.selected {
    border-color: var(--secondary-color);
    background-color: var(--light-bg-color);
}
/* Confirmação explícita de qual endereço está selecionado — só a borda
   fina não era perceptível em temas escuros */
.address-card.selected::after {
    content: '✓';
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: var(--fw7);
    color: var(--white-color);
    background-color: var(--success-color);
    border-radius: 50%;
}

.address-card input[type="checkbox"] {
    display: none; /* Esconder o checkbox */
}

.address-card label {
    font-size: var(--font-smaller);
    color: var(--light-text-color);
    line-height: 1.5;
    display: block;
    width: 100%;
}

.address-card:hover {
    border-color: var(--light-text-color); /* Borda cinza clara ao passar o mouse */
}

.address-info div {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaço entre ícone e texto */
}

.address-info ion-icon {
    font-size: var(--font-small);
    color: var(--secondary-dark-color); /* Ajuste a cor conforme desejar */
}

.address-card.disabled label,
.address-card.disabled input {
    pointer-events: none;  /* Desativa a interação com o checkbox e o label */
}

.payment-options {
    max-width: 800px;
    margin: 0 auto;
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.payment-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    flex: 1 1 calc(33.333% - 12px);
    min-width: 220px;
    transition: border-color .2s ease;
}

.payment-card h3 {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    font-weight: var(--fw6);
}

.payment-card h3 i {
    font-size: 1.3em;
    color: var(--secondary-color);
}

.payment-card p {
    color: var(--light-text-color);
    font-size: var(--font-small);
    margin-bottom: 16px;
}

.payment-card input[type="radio"] {
    display: none;
}

.payment-card label {
    cursor: pointer;
    display: inline-block;
    padding: 0.6em 1.2em;
    background-color: var(--light-bg-color);
    color: var(--text-color);
    border-radius: 4px;
    font-size: var(--font-small);
    transition: var(--trans-background-color);
}

.payment-card label:hover {
    background-color: var(--border-color);
}

.payment-card input[type="radio"]:checked + label {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.payment-card input[type="radio"]:focus + label {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.payment-card:has(input[type="radio"]:checked) {
    border-color: var(--secondary-color);
}

@media (max-width: 768px) {
    .payment-card {
        flex-basis: calc(50% - 12px);
    }
}

@media (max-width: 480px) {
    .payment-card {
        flex-basis: 100%;
    }
}

  .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    background-color: var(--card-background);
    color: var(--text-color);
    border-radius: 8px;
    padding: 15px;
    box-shadow: var(--shadow);
    z-index: 1000; /* Para ficar acima de outros elementos */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none; /* Não permitir interações quando escondido */
}

.notification-content {
    display: flex;
    flex-direction: column;
}

.notification-title {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--font-small);
}
.notification-title i {
    font-size: 1.2em;
    color: var(--primary-color);
}

.progress-bar {
    width: 100%;
    background-color: var(--light-bg-color);
    border-radius: 5px;
    margin-top: 10px;
}

.progress {
    height: 8px;
    width: 0;
    background-color: var(--primary-color);
    border-radius: 5px;
    transition: width 0.4s ease;
}

/* -------------------
 * COMPONENTES COMPARTILHADOS: TOAST / MODAL / SKELETON
 * (core/Toast.js, core/Modal.js — usados em toda página, um estilo só)
 * ------------------- */

.toast-stack {
    position: fixed;
    top: 1.25em;
    right: 1.25em;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    max-width: 340px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 0.75em;
    background-color: var(--card-background);
    color: var(--text-color);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 0.9em 1.1em;
    font-size: var(--font-small);
    cursor: pointer;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity .25s ease, transform .25s ease;
}
.toast.toast-visible {
    opacity: 1;
    transform: translateX(0);
}
.toast i {
    font-size: 1.3em;
    line-height: 1;
    flex-shrink: 0;
}
.toast-success i { color: var(--success-color); }
.toast-error i { color: var(--error-color); }
.toast-warning i { color: var(--warning-color); }
.toast-info i { color: var(--info-color); }

.app-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 2, 28, 0.5);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}
.app-modal-backdrop.modal-visible {
    opacity: 1;
}
.app-modal-backdrop .modal-dialog {
    background-color: var(--white-color);
    border-radius: 7px;
    box-shadow: var(--shadow);
    max-width: 460px;
    width: 90%;
    /* Trava o modal na tela e deixa só o corpo rolar — sem isso, conteúdo
       grande (ex.: lista de variações) empurrava o modal pra fora da
       viewport, sem scroll nenhum (achado ao vivo, print do usuário
       2026-07-25). */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform .2s ease;
}
.app-modal-backdrop.modal-visible .modal-dialog {
    transform: translateY(0);
}
/* ---- Modal-gate de login obrigatório (components/login_gate.php) ----
   Reusa o backdrop/dialog do core/Modal.js, mas fica acima de TUDO
   (inclusive header/menus) e não fecha por clique/Esc. */
.app-modal-backdrop.login-gate {
    z-index: 8000;
}
.login-gate .login-gate-dialog {
    padding: 2em;
    gap: 0.75em;
}
.login-gate h3 {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1.25em;
    color: var(--secondary-dark-color);
}
.login-gate .login-gate-text {
    color: var(--light-text-color);
    line-height: 1.5;
    margin-bottom: 0.75em;
}
.login-gate .form-group label {
    display: block;
    margin-bottom: 0.4em;
    font-weight: var(--fw5);
    color: var(--secondary-dark-color);
}
.login-gate .form-group input {
    width: 100%;
    padding: 0.75em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    font-size: 1em;
}
.login-gate .form-group input:focus {
    outline: none;
    border-color: var(--secondary-color);
}
.login-gate .login-gate-error {
    color: var(--error-color);
    font-size: var(--font-small);
    margin: 0.5em 0 0;
}
.login-gate .primary-button {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1em;
    padding: 0.8em 1em;
    border: 0;
    border-radius: var(--radius-sm, 6px);
    background-color: var(--primary-color);
    color: var(--white-color);
    font-weight: var(--fw6);
    cursor: pointer;
    transition: var(--trans-background);
}
.login-gate .primary-button:hover {
    background-color: var(--secondary-color);
}
.login-gate .primary-button:disabled {
    opacity: 0.6;
    cursor: default;
}

.modal-dialog .modal-header {
    padding: 2em 2em 0;
    flex-shrink: 0;
}
.modal-dialog .modal-title {
    font-size: 1.3em;
    color: var(--secondary-dark-color);
    margin-bottom: 0.6em;
}
.modal-dialog .modal-body {
    padding: 0 2em;
    overflow-y: auto;
    /* min-height:0 é o que permite um filho flex rolar em vez de esticar
       o pai indefinidamente — sem isso o max-height do .modal-dialog é
       ignorado pelo conteúdo. */
    min-height: 0;
}
.modal-dialog .modal-message {
    color: var(--light-text-color);
    margin-bottom: 1.5em;
    line-height: 1.5;
}
.modal-dialog .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75em;
    padding: 1.5em 2em 2em;
    flex-shrink: 0;
}
.modal-dialog.modal-warning .modal-title,
.modal-dialog.modal-danger .modal-title {
    color: var(--error-color);
}
.btn-modal {
    border: none;
    border-radius: 4px;
    padding: 0.7em 1.4em;
    font-size: var(--font-small);
    cursor: pointer;
    transition: var(--trans-background);
}
.btn-modal-secondary {
    background-color: var(--light-bg-color);
    color: var(--text-color);
}
.btn-modal-secondary:hover {
    background-color: var(--border-color);
}
.btn-modal-primary {
    background-color: var(--secondary-color);
    color: var(--white-color);
}
.btn-modal-primary:hover {
    background-color: var(--secondary-dark-color);
}
.btn-modal-danger {
    background-color: var(--error-color);
    color: var(--white-color);
}
.btn-modal-danger:hover {
    filter: brightness(0.92);
}

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--light-bg-color);
    border-radius: 4px;
}
.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
    100% { transform: translateX(100%); }
}
.skeleton-text {
    height: 0.9em;
    margin-bottom: 0.5em;
    width: 100%;
}
.skeleton-text.short { width: 40%; }
.skeleton-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}
.skeleton-card {
    height: 120px;
    border-radius: 8px;
}

#boletoContainer {
    position: absolute;
    top: 50%; /* Move o container para o meio da tela verticalmente */
    left: 50%; /* Move o container para o meio da tela horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta a posição para centralizar corretamente */
    z-index: 10; /* Coloca o container do boleto na frente */
    background-color: white; /* Para o fundo do container ser branco */
    padding: 20px; /* Adiciona algum padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona sombra para destacar */
}

#boletoIframe {
    background-color: white; /* Para que o fundo do iframe seja branco */
    z-index: 5; /* Garante que o iframe esteja acima, se necessário */
    width: 100%; /* Para o iframe ocupar toda a largura do container */
    height: 500px; /* Ajuste a altura conforme necessário */
}

#imprimirBoleto {
    margin-top: 10px; /* Espaço entre o iframe e o botão */
    z-index: 6; /* Coloca o botão na frente, se necessário */
}

#loader1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escurecido */
    z-index: 9999; /* Para garantir que fique acima de outros elementos */
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-circle1 {
    border: 8px solid rgba(255, 255, 255, 0.3);
    border-top: 8px solid white; /* Cor do círculo */
    border-radius: 50%;
    width: 50px; /* Tamanho do círculo */
    height: 50px; /* Tamanho do círculo */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* iFrame inside the popup */
#checkoutFrame {
    width: 100%; /* Aumentando para 100% da largura disponível */
    height: 100%; /* Aumentando a altura */
    border: none;
    box-sizing: border-box; /* Inclui padding e border no cálculo do tamanho */
}

.popup-frame-content {
    display: none;
    background-color: #fff;
    width: 100%;
    height: 500px;
    position: relative;
    padding: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#selectedFiltersList {
    display: inline-block;
    font-size: 14px;
    margin-top: 10px;
}

#selectedFiltersList span {
    margin-right: 5px;
    white-space: nowrap; /* Evita quebra de linha nos filtros */
    opacity: 0;
    animation: fadeIn 0.3s forwards; /* Aplica a animação de fadeIn */
    transform: translateY(10px); /* Inicia o filtro abaixo */
}

#selectedFiltersList span:after {
    content: ', '; /* Adiciona a vírgula entre os filtros */
}

#selectedFiltersList span:last-child:after {
    content: ''; /* Remove a vírgula do último filtro */
}

#selectedFiltersList span.remove {
    animation: fadeOut 0.3s forwards; /* Aplica a animação de fadeOut */
    opacity: 0;
    transform: translateY(-10px); /* Move o filtro para cima antes de desaparecer */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px); /* Começa do fundo (baixo) */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Chega ao topo */
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0); /* Começa no topo */
    }
    to {
        opacity: 0;
        transform: translateY(-10px); /* Sai para cima */
    }
}

.mobile-return-button {
    display: none; /* Inicialmente escondido */
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: -1; /* Começa atrás dos outros elementos */
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, z-index 0s 0.3s;
}

.mobile-return-button.visible {
    display: block; /* Torna o botão visível */
    opacity: 1;
    z-index: 1000; /* Coloca o botão na frente de outros elementos */
}

.mobile-return-button a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Mostrar o botão apenas em dispositivos móveis */
@media screen and (max-width: 768px) {
    .mobile-return-button {
        display: block;
    }
}

.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--white-color);
    padding: 2em;
    border-radius: 7px;
    box-shadow: var(--shadow);
    max-width: 500px;
    width: 90%;
}

.popup h2 {
    font-size: 1.75em;
    margin-bottom: 1em;
    color: var(--secondary-dark-color);
}

.form-group {
    margin-bottom: 1.5em;
}

.form-row {
    display: flex;
    gap: 1em;
}

.form-row .form-group {
    flex: 1;
}

.popup label {
    display: block;
    margin-bottom: 0.5em;
    color: var(--dark-color);
    font-size: var(--font-small);
}

.popup input[type="text"],
.popup select {
    width: 100%;
    padding: 0.75em;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: var(--font-small);
    outline: none;
    transition: border-color 0.3s ease;
}

.popup input[type="text"]:focus,
.popup select:focus {
    border-color: var(--secondary-color);
}

.submit-btn {
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 0.75em 1.5em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: var(--font-small);
    transition: background-color 0.3s ease;
}

.submit-btn:hover {
    background-color: var(--secondary-color);
}

@media screen and (max-width: 480px) {
    .popup-content {
        padding: 1.5em;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }
}

/*ENTERPRISE SCREEN*/
/* Página de informações da empresa — cards flat, alinhados ao design system */
.enterprise-info-box {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    margin-bottom: 2em;
}

@media screen and (min-width: 768px) {
    .enterprise-info-box {
        flex-direction: row;
        align-items: flex-start;
    }

    .info-section {
        flex: 3;
        margin-right: 1.5em;
    }

    .map-section {
        flex: 2;
        position: sticky;
        top: 1.5em;
    }

    .enterprise-info-box.no-map .info-section {
        margin-right: 0;
    }
}

.info-section,
.map-section {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

.info-section-head,
.map-head {
    padding: 1.15em 1.5em;
    border-bottom: 1px solid var(--border-color);
}

.info-section-head h3,
.map-head h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1.05em;
    font-weight: var(--fw6);
    color: var(--secondary-dark-color);
}

.info-section-head h3 i,
.map-head h3 i {
    color: var(--secondary-color);
    font-size: 1.15em;
}

.company-info-list {
    list-style: none;
    padding: 0 1.5em;
    margin: 0;
}

.company-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.9em;
    padding: 1em 0;
    border-bottom: 1px solid var(--border-color);
}

.company-info-list li:last-child {
    border-bottom: none;
}

.info-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background-color: var(--light-bg-color);
    color: var(--secondary-dark-color);
    font-size: 1.05em;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    min-width: 0;
}

.info-content strong {
    font-weight: var(--fw6);
    font-size: var(--font-small);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--light-text-color);
}

.info-content > span {
    color: var(--dark-color);
    word-break: break-word;
}

.company-info-list li a {
    color: var(--secondary-color);
    transition: var(--trans-color);
}

.company-info-list li a:hover {
    color: var(--primary-color);
}

/* Status badge — flat, sem preenchimento pesado */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.7em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: var(--font-small);
    font-weight: var(--fw6);
    width: fit-content;
}

.status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: currentColor;
}

.status-badge.active {
    color: var(--success-color);
    border-color: var(--success-color);
}

.status-badge.inactive {
    color: var(--error-color);
    border-color: var(--error-color);
}

/* Map section */
.map-frame {
    padding: 1em;
    height: 350px;
}

.map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
}

/* Ajustes específicos para mobile */
@media screen and (max-width: 767px) {
    .info-section-head,
    .map-head {
        padding: 1em 1.15em;
    }

    .company-info-list {
        padding: 0 1.15em;
    }

    .map-frame {
        height: 250px;
    }
}

/* Ajustes para telas muito pequenas */
@media screen and (max-width: 480px) {
    .page-title h1 {
        font-size: 1.5em;
    }

    .info-icon {
        width: 32px;
        height: 32px;
        font-size: 1em;
    }

    .map-frame {
        height: 200px;
    }
}

/* -------------------
 * MICRO-INTERAÇÕES E ESTADOS GLOBAIS
 * ------------------- */

/* Entrada suave do conteúdo principal em toda página */
@keyframes page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
main {
    animation: page-enter 0.35s ease both;
}
@media (prefers-reduced-motion: reduce) {
    main { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Logo quebrada (logotype vazio no cadastro da empresa): a img some e o
   nome da loja entra no lugar via shared/SiteChrome.js */
.logo img[src=""] {
    display: none;
}
.logo-text {
    font-family: var(--font-heading, 'Poppins', sans-serif);
    font-size: 1.35em;
    font-weight: var(--fw8);
    color: var(--dark-color);
    white-space: nowrap;
}

/* Badge do carrinho pulsando quando um item entra */
@keyframes cart-badge-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}
.fly-item.bump .item-number,
.fly-item .item-number.bump {
    animation: cart-badge-pulse 0.45s ease;
    display: inline-block;
}

/* Bolinha que voa do produto até o carrinho no add-to-cart */
.cart-fly-dot {
    position: fixed;
    z-index: 9999;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    overflow: hidden;
    pointer-events: none;
    transition: transform 0.65s cubic-bezier(0.45, 0, 0.55, 1), opacity 0.65s ease;
}
.cart-fly-dot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Feedback de sucesso no botão de adicionar */
.btn-added {
    background-color: var(--success-color) !important;
    transition: background-color 0.2s ease;
}

/* Erro inline no cálculo de frete — antes a seção simplesmente ficava
   vazia e o cliente não sabia por que não conseguia continuar */
.freight-error {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 1em 1.25em;
    margin-top: 1em;
    font-size: var(--font-small);
    color: var(--error-color);
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* Skeleton específico das opções de frete */
.skeleton-freight {
    height: 76px;
    border-radius: var(--radius);
    margin-top: 0.75em;
}

/* Unidade de medida do item no carrinho/mini-carrinho (caixa/unidade/fardo/etc)
   — texto discreto, sem caixa/pill colorida, no mesmo espírito do .mini-text
   usado no resto do design system. */
.item-unit-tag {
    display: inline-block;
    width: fit-content;
    margin-top: 0.3em;
    font-size: var(--font-smaller);
    font-weight: var(--fw3);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--light-text-color);
    opacity: 0.85;
}

/* Linha de carrinho vazio (troca de item removido/atualizado sem reload) */
.cart-empty {
    text-align: center;
    padding: 2.5em 1em;
    color: var(--light-text-color);
    font-size: var(--font-small);
}

/* Reticências da paginação em janela (1 … 4 5 6 … 24) */
.pagination .ellipsis {
    color: var(--light-text-color);
    padding: 0 0.35em;
    cursor: default;
    user-select: none;
}

/* Separador entre os limites do slider de preço — antes os dois valores
   saíam colados ("R$ 1,00R$ 2.499,90") */
.price-range .price-separator {
    color: var(--light-text-color);
    margin: 0 0.35em;
}

/* Placeholder de produto sem foto: era um "sem imagem" gigante dominando o
   card; agora aparece pequeno e apagado */
.products img[src*="sin_imagen"] {
    object-fit: contain;
    opacity: 0.25;
    padding: 2em;
}

/* Labels longos dos filtros da lateral não estouram mais a coluna */
.filter-block li label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
}
.filter-block li label span:nth-child(2) {
    overflow-wrap: anywhere;
}

/* Dropdown de buscas recentes no campo de pesquisa do header */
/* Dropdown de buscas recentes — reaproveita o MESMO visual do
   .select-box-menu/.select-box-option usado no endereço/entrega do
   checkout e na variação do produto, em vez de ter estilo próprio. */
.search-select-box {
    position: relative;
}
.search-select-box .select-box-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.search-select-box-open .select-box-menu {
    display: block;
    animation: page-enter 0.18s ease both;
}
.search-select-box .select-box-option,
.search-select-box .select-box-footer {
    /* `form.search button` (regra do botão "Pesquisar": absolute,
       height:100%, fundo na cor primária, texto branco, canto
       arredondado) pega qualquer <button> do form — sem isso as opções do
       dropdown colapsavam pra 2px de altura e saíam verdes/pretas em vez
       do branco do select-box. */
    position: static;
    top: auto;
    height: auto;
    width: 100%;
    padding: 0.85em 1em;
    border: 0;
    border-radius: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.search-select-box .select-box-option {
    background-color: transparent;
}
.search-select-box .select-box-option:hover {
    background-color: var(--light-bg-color);
}
.search-select-box .select-box-footer {
    background-color: var(--light-bg-color);
    color: var(--light-text-color);
}
.search-select-box .select-box-footer:hover {
    background-color: var(--border-color);
    color: var(--error-color);
}
.search-select-box .select-box-option .option-body {
    font-size: var(--font-small);
    color: var(--dark-color);
}
.search-select-box .select-box-option .option-icon {
    color: var(--light-text-color);
}
.search-history-clear:hover {
    color: var(--error-color);
    background-color: var(--light-bg-color);
}

/* Stepper de quantidade com a MESMA altura do botão COMPRAR (antes o
   stepper era visivelmente menor que o botão na mesma linha). Compacto o
   bastante pra não espremer o botão dentro do card de ~220px. */
.purchase-quantity {
    display: flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    flex-shrink: 0;
}
.purchase-quantity-btn {
    width: 26px;
    height: 100%;
    border: 0;
    background-color: var(--light-bg-color);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.purchase-quantity-btn:hover {
    background-color: var(--border-color);
}
.purchase-quantity-input {
    width: 34px;
    height: 100%;
    border: 0;
    text-align: center;
    font-size: 0.85rem;
    font-weight: var(--fw5);
}
.purchase-quantity-input:focus {
    outline: none;
}

/* Estado vazio da busca de produtos (antes sobravam só as setas de
   paginação penduradas no meio da tela) */
.search-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 4em 1em;
    text-align: center;
}
.search-empty i {
    font-size: 2.5em;
    color: var(--light-text-color);
}
.search-empty h3 {
    color: var(--dark-color);
}
.search-empty p {
    font-size: var(--font-small);
    color: var(--light-text-color);
    max-width: 340px;
}

/* Cards da grade com footer alinhado: preço/compra sempre no rodapé do
   card, alturas uniformes na mesma linha */
.products.main .item {
    display: flex;
    flex-direction: column;
}
.products.main .item .content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.products.main .item .purchase-section {
    margin-top: auto;
}

/* -------------------
 * SELECT-BOX (combobox customizado — endereços e entrega no checkout)
 * ------------------- */
.select-box {
    position: relative;
    width: 100%;
    max-width: 560px;
}
.select-box-toggle {
    display: flex;
    align-items: center;
    gap: 0.6em;
    width: 100%;
    padding: 0.85em 1em;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font: inherit;
    font-size: var(--font-small);
    color: var(--dark-color);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease;
}
.select-box-toggle:hover,
.select-box.open .select-box-toggle {
    border-color: var(--dark-color);
}
.select-box-toggle > i:first-child {
    color: var(--light-text-color);
    font-size: 1.15em;
}
/* Logo da transportadora no lugar do ícone genérico, quando um frete já
   está selecionado (item 5) */
.select-box-toggle-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.select-box-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--light-text-color);
}
.select-box-label.has-value {
    color: var(--dark-color);
    font-weight: var(--fw5);
}
.select-box-chevron {
    transition: transform 0.2s ease;
}
.select-box.open .select-box-chevron {
    transform: rotate(180deg);
}
.select-box-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: none;
}
.select-box.open .select-box-menu {
    display: block;
    animation: page-enter 0.18s ease both;
}
.select-box-option {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.85em 1em;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.select-box-option:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}
.select-box-option:hover {
    background-color: var(--light-bg-color);
}
.select-box-option.selected {
    background-color: var(--light-bg-color);
}
.select-box-option.selected .option-body strong::after {
    content: ' ✓';
    color: var(--success-color);
}
.select-box-option .option-icon {
    font-size: 1.25em;
    color: var(--light-text-color);
    flex-shrink: 0;
}
.select-box-option .option-icon-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}
.select-box-option .option-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-small);
}
.select-box-option .option-body span {
    color: var(--light-text-color);
    overflow: hidden;
    text-overflow: ellipsis;
}
.select-box-option .option-tag {
    font-size: var(--font-smaller);
    font-weight: var(--fw5);
    color: var(--secondary-dark-color);
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0 0.5em;
    margin-left: 0.4em;
}
.select-box-option .option-price {
    font-size: var(--font-small);
    font-weight: var(--fw6);
    white-space: nowrap;
}
.select-box-option .option-edit {
    color: var(--light-text-color);
    padding: 0.35em;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.select-box-option .option-edit:hover {
    color: var(--dark-color);
    background-color: var(--border-color);
}
.select-box-footer {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.8em 1em;
    font-size: var(--font-small);
    font-weight: var(--fw5);
    color: var(--secondary-dark-color);
    background-color: var(--light-bg-color);
    cursor: pointer;
}
.select-box-footer:hover {
    background-color: var(--border-color);
}

/* Modal de compartilhar produto */
.share-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5em;
    margin-bottom: 1em;
}
.share-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    padding: 0.9em 0.25em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: var(--font-smaller);
    color: var(--dark-color);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.share-item:hover {
    background-color: var(--light-bg-color);
    border-color: var(--dark-color);
}
.share-item i {
    font-size: 1.6em;
}
.share-whatsapp i { color: #25d366; }
.share-facebook i { color: #1877f2; }
.share-telegram i { color: #229ed9; }
.share-x i,
.share-email i { color: var(--dark-color); }
.share-copy {
    display: flex;
    gap: 0.5em;
}
.share-copy input {
    flex: 1;
    min-width: 0;
    padding: 0.6em 0.8em;
    font-size: var(--font-small);
    color: var(--light-text-color);
    background-color: var(--light-bg-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.share-copy button {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.6em 1em;
    font-size: var(--font-small);
    font-weight: var(--fw5);
    color: var(--white-color);
    background-color: var(--dark-color);
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .share-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Modal de seleção de variação (quick-buy dos cards) */
.variation-picker .variation-hint {
    margin-bottom: 0.75em;
}
.variation-option {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.7em 0.85em;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    margin-bottom: 0.5em;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.variation-option:hover {
    background-color: var(--light-bg-color);
}
.variation-option.selected {
    border-color: var(--dark-color);
    background-color: var(--light-bg-color);
}
.variation-option.out-of-stock {
    opacity: 0.5;
    cursor: not-allowed;
}
.variation-option img {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}
.variation-option .variation-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: var(--font-small);
}
.variation-option .variation-price {
    font-size: var(--font-small);
    font-weight: var(--fw6);
    white-space: nowrap;
}

/* Estado sem endereço cadastrado no checkout */
.empty-address {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75em;
    padding: 1.5em;
    background-color: var(--card-background);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius);
}
.empty-address i {
    font-size: 1.5em;
    color: var(--light-text-color);
}
.empty-address p {
    color: var(--light-text-color);
    font-size: var(--font-small);
}

/* Cadastro embutido no checkout (item 6) — mesma hierarquia de grid do
   form de conta/endereço do perfil, adaptada pro token deste stylesheet. */
.guest-register {
    padding: 1.5em;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.guest-register-hint {
    font-size: var(--font-small);
    color: var(--light-text-color);
    margin-bottom: 1.25em;
}
.guest-register .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
    margin-bottom: 1.25em;
}
.guest-register .form-field.span-2 {
    grid-column: span 2;
}
.guest-register .form-field label {
    display: block;
    font-size: var(--font-smaller);
    font-weight: var(--fw5);
    color: var(--light-text-color);
    margin-bottom: 0.4em;
}
.guest-register .form-field input,
.guest-register .form-field select {
    width: 100%;
    padding: 0.7em 0.9em;
    font: inherit;
    font-size: var(--font-small);
    color: var(--dark-color);
    background-color: var(--white-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.guest-register .form-field input:focus,
.guest-register .form-field select:focus {
    outline: none;
    border-color: var(--dark-color);
}
.guest-register .primary-button {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.guest-register-login {
    margin-top: 1em;
    text-align: center;
    font-size: var(--font-small);
    color: var(--light-text-color);
}
.guest-register-login a {
    color: var(--dark-color);
    font-weight: var(--fw6);
    text-decoration: underline;
}
@media (max-width: 640px) {
    .guest-register .form-grid {
        grid-template-columns: 1fr;
    }
    .guest-register .form-field.span-2 {
        grid-column: span 1;
    }
}