@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;

    --white-color: #ffffff;
    --light-bg-color: #f2f3f5;
    --light-text-color: #7c899a;
    --border-color: #e5e8ec;
    --dark-color: #0a021c;
    --card-background: #ffffff;
    --text-color: #333333;

    --font-small: 13px;
    --font-smaller: 11px;

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

    --fw3: 300;
    --fw5: 500;
    --fw6: 600;
    --fw7: 700;
    --fw8: 800;

    --trans-background-color: background-color .3s, color .3s;
    --trans-background: background-color .3s;
    --trans-color: color .3s;

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

* {
    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: 'Rubik', sans-serif;
    font-size: 16px;
    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: 'Poppins';
}

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: 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 img {
    position: absolute;
    object-fit: cover;
    width: var(--percent100);
    height: var(--percent100);
    display: block;
}

.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: 2em;
    transition: var(--trans-background-color);    
}
.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: 'Poppins';
    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;
}

/* ------------------
 * 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);
}
.sectop h2 span:not(.circle) {
    padding: 0 0 0 2em;
}
.sectop h2 .circle {
    top: -5px;
}

    /* 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);
}

.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;
}
.products .rating .stars {
    width: 80px; /* Largura total para 5 estrelas */
    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(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%; /* Tamanho de cada estrela */
}

.products .rating .stars[data-rating="1"] { width: 16px; }
.products .rating .stars[data-rating="2"] { width: 32px; }
.products .rating .stars[data-rating="3"] { width: 48px; }
.products .rating .stars[data-rating="4"] { width: 64px; }
.products .rating .stars[data-rating="5"] { width: 80px; }
/* to set width of stars */
.products .item:where(:nth-child(3), :nth-child(3)) .stars {
    width: 64px;
}
/* to set width of stars */
.products .item:where(:nth-child(3), :nth-child(3)) .stars {
    width: 64px;
}
.products h3 {
    font-family: 'Rubik';
    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;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    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;
}
.products.main .thumbnail {
    height: 100%;
    width: 100%;
}
.products.main .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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 */
    }
}

/* ------------------- 
 * 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;
}
.newsletter p strong {
    color: var(--primary-color);
}
.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 :where(.big-image, .small-image) {
    overflow: hidden;
}
.products.one .big-image {
    position: relative;
    margin-bottom: 1em;
}
.products.one :where(.big-image, .small-image) img {
    object-fit: cover;
    width: var(--percent100);
    height: var(--percent100);
    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;
}

.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;
}
.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: 2em;
    color: var(--light-text-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);
}
.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: 'Poppins';
    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: 5em 0;
}
.checkout .left {
    padding: 2em;
    background-color: var(--light-bg-color);
    box-shadow: 0 15px 70px -8px rgb(0 0 0 / 20%);
}
.checkout .item {
    width: var(--percent100);
}
.checkout .left h1 {
    font-weight: var(--fw3);
    margin-bottom: 1.5em;
}
.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: 0.5em;
    margin-bottom: 0.75em;
    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);
}

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


/* ------------------- 
 * 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
 * ------------------- */ 

@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 5px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: var(--font-small);
    font-weight: var(--fw5);
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

.pagination .btn1,
.pagination .btn2 {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-small);
    font-weight: var(--fw5);
    color: var(--dark-color);
    background: transparent;
    outline: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.pagination .btn1 img,
.pagination .btn2 img {
    width: 18px;
    margin-right: 5px;
}

.pagination .btn2 img {
    transform: rotate(180deg);
}

.pagination ul li.active {
    color: var(--white-color);
    background-image: linear-gradient(var(--secondary-color), var(--secondary-color));
    background-repeat: no-repeat;
    background-position: 0 0;
}

/* 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 {
        font-size: calc(var(--font-small) - 2px);
        margin: 0 5px;
    }

    .pagination .btn1 img,
    .pagination .btn2 img {
        width: 14px;
        margin-right: 3px;
    }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white; /* Cor de fundo do preloader */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Para ficar acima de tudo */
}

.bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    animation: bubble 1.2s infinite ease-in-out;
    margin: 0 5px;
}

.bubble:nth-child(1) {
    animation-delay: 0s;
}

.bubble:nth-child(2) {
    animation-delay: 0.2s;
}

.bubble:nth-child(3) {
    animation-delay: 0.4s;
}

.bubble:nth-child(4) {
    animation-delay: 0.6s;
}

.bubble:nth-child(5) {
    animation-delay: 0.8s;
}

@keyframes bubble {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-30px);
        opacity: 1;
    }
}

#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); /* Cor verde para quando selecionado */
}

.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: 20px;
    justify-content: center;
}

.payment-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    flex: 1 1 calc(33.333% - 20px);
    min-width: 250px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.payment-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
}

.payment-card h3 {
    margin: 0 0 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.payment-card h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
}

.payment-card.pix h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--secondary-color); /* A cor será aplicada aqui */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0L1.5 6v12L12 24l10.5-6V6L12 0zm-1.4 16.6l-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4-7.2 7.2z"/></svg>');
    mask-size: cover;
}

.payment-card.credit h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color); /* A cor será aplicada aqui */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>');
    mask-size: cover;
}

.payment-card.boleto h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color); /* A cor será aplicada aqui */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
    mask-size: cover;
}

.payment-card.cash h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color); /* Use uma cor fallback para teste */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 4h-3V1H7v3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H4V6h3v3h10V6h3v14z"/></svg>');
    mask-size: cover;
}

.payment-card.pos h3::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: var(--secondary-color); /* Use uma cor fallback para teste */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0C8.69 0 5.66 1.43 3.93 3.93 2.2 6.43 1.71 9.61 3.17 12.34c1.46 2.73 4.52 4.24 7.83 4.24h.01c3.31 0 6.37-1.51 7.83-4.24 1.46-2.73.97-5.91-.73-8.41C18.37 1.43 15.34 0 12 0zm0 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/></svg>');
    mask-size: cover;
}

.payment-card p {
    margin-bottom: 20px;
}

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

.payment-card label {
    cursor: pointer;
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.payment-card input[type="radio"]:checked + label {
    background-color: var(--secondary-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

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

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

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

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

@keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(52, 152, 219, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(52, 152, 219, 0);
    }
  }
  .payment-card input[type="radio"]:checked + label::after {
    content: '✓';
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
  }
  .payment-card input[type="radio"]:checked ~ .check-icon {
    opacity: 1;
    transform: scale(1);
  }
  .payment-card input[type="radio"]:checked ~ .card-content {
    border-color: var(--primary-color);
    animation: pulse 1.5s infinite;
  }
  .check-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
  }

  .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 300px;
    background-color: #5AC782; /* Cor de fundo */
    color: white; /* Cor do texto */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    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;
}

.progress-bar {
    width: 100%;
    background-color: #ddd;
    border-radius: 5px;
    margin-top: 10px;
}

.progress {
    height: 10px;
    width: 0;
    background-color: #288F4E; /* Cor da barra de progresso */
    border-radius: 5px;
    transition: width 0.4s ease;
}
#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*/
/* Estilos para a página de informações da empresa */
.enterprise-info-box {
    display: flex;
    flex-direction: column;
    gap: 2em;
    margin-bottom: 2em;
}

@media screen and (min-width: 768px) {
    .enterprise-info-box {
        flex-direction: row;
    }
    
    .info-section {
        flex: 3;
        margin-right: 2em;
    }
    
    .map-section {
        flex: 2;
    }
}

.info-section {
    background-color: var(--white-color);
    border-radius: 7px;
    box-shadow: var(--shadow);
    padding: 2em;
}

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

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

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

.company-info-list li strong {
    flex: 0 0 150px;
    font-weight: var(--fw6);
    color: var(--secondary-dark-color);
}

.company-info-list li span {
    flex: 1;
}

.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 */
.status-badge {
    display: inline-block;
    padding: 0.25em 0.75em;
    border-radius: 4px;
    font-size: var(--font-small);
}

.status-badge.active {
    background-color: rgba(90, 199, 130, 0.15);
    color: #5ac782;
}

.status-badge.inactive {
    background-color: rgba(255, 107, 107, 0.15);
    color: var(--primary-color);
}

/* Map section */
.map-section {
    background-color: var(--white-color);
    border-radius: 7px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.map-section h3 {
    padding: 1em 2em;
    margin: 0;
    font-size: 1.2em;
    font-weight: var(--fw6);
    color: var(--secondary-dark-color);
    border-bottom: 1px solid var(--border-color);
}

.map-frame {
    padding: 1em;
    height: 350px;
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

/* Ajustes específicos para mobile */
@media screen and (max-width: 767px) {
    .info-section,
    .map-section {
        padding: 1.25em;
    }
    
    .company-info-list li {
        flex-direction: column;
        padding: 0.75em 0;
    }
    
    .company-info-list li strong {
        margin-bottom: 0.5em;
        flex-basis: auto;
    }
    
    .map-section h3 {
        padding: 0.75em 1em;
    }
    
    .map-frame {
        height: 250px;
    }
}

/* Ajustes para telas muito pequenas */
@media screen and (max-width: 480px) {
    .page-title h1 {
        font-size: 1.5em;
    }
    
    .info-section,
    .map-section {
        padding: 1em;
    }
    
    .company-info-list li {
        padding: 0.75em 0;
    }
    
    .company-info-list li strong {
        font-size: 0.9em;
        margin-bottom: 0.35em;
    }
    
    .map-frame {
        height: 200px;
    }
}