:root,:host {
    --font-size-xs: 10px;
    --font-size-11: 11px;
    --font-size-sm: 12px;
    --font-size-13: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-22: 22px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-34: 34px;
    --font-size-5xl: 38px;
    --font-size-hero: 40px;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --color-black: #000;
    --color-white: #fff;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;

    /* --shadow-card-hover: 0 6px 28px #00000021, 0 2px 8px #00000012;
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-plus-jakarta-sans);
    --default-mono-font-family: var(--font-geist-mono);
    --color-background: #f9f7f4;
    --color-foreground: var(--foreground);
    --font-display: var(--font-plus-jakarta-sans);*/
    
    --color-primary: #f63a5c;
    --color-primary-hover: #d42e4f;
    --color-muted: var(--muted);
    --color-secondary: var(--secondary);

    --color-white-opacity-25:rgba(255,255,255,0.25);
    --color-white-opacity-40:rgba(255,255,255,0.4);
    --color-white-opacity-60:rgba(255,255,255,0.6);
    --color-white-opacity-65:rgba(255,255,255,0.65);
    --color-white-opacity-70:rgba(255, 255, 255, 0.7);
    --color-white-opacity-75:rgba(255, 255, 255, 0.75);
    --color-white-opacity-80:rgba(255,255,255,0.8);

    /* --color-ring: var(--ring);
    --color-border: var(--border);
    --color-destructive: var(--destructive);
    --color-muted-foreground: var(--muted-foreground);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-primary-foreground: var(--primary-foreground);
    --color-card-foreground: var(--card-foreground);
    --color-card: var(--card); */
  
    --color-accent: #ffc926;
    --color-background: #f9f7f4;
    --color-background-alt: #f2efe9;
    --color-background-light: #e8e4dc;
    --color-background-sidebar: #eae7df;
    --color-background-dark: #211518;
    --color-background-near-black: #100c0d;
    --color-bg-card: #fff;
    --color-bg-card-hover: #fafafa;
    --color-product-card-bg: #fff;
    --color-product-section-bg: #f2efe9;
    --color-text: #291b1c;
    --color-text-dark: #444;
    --color-text-body: #444;
    --color-text-medium: #666;
    --color-text-nav: #585958;
    --color-text-secondary: #777;
    --color-text-muted: #aaa;
    --color-text-action: #acacac;
    --color-text-disabled: #bababa;
    --color-text-white: #fff;
    --color-success: #28a745;
    --color-success-hover: #1e8f3a;
    --color-warning: #ffbf00;
    --color-info: #17a2b8;
    --color-info-blue: #0af;
    --color-whatsapp: #25d366;
    --color-whatsapp-hover: #1ebe5d;
    --color-badge-dark: #222;
    --color-search-btn-bg: #111;
    --color-navbar-bg: #fff;
    --color-price-primary: #f63a5c;
    --color-price-secondary: #aaa;
    --color-border-subtle: #0000000f;
    --color-border-default: #0000001f;
    --color-border-medium: #0003;

    

    --radius-pill: 100px;
    --radius-circle: 50%;
    --breakpoint-xxs: 23.75rem;
    --breakpoint-xs: 30rem;
    --container-max-width: 1250px;
    --navbar-height: 64px;
    --sidebar-width: 96px;
    --shadow-card: 0 1px 3px #0000000f, 0 4px 12px #0000000a;
}

.text-xs {font-size: var(--font-size-xs);}
.text-size-11 {font-size: var(--font-size-11);}
.text-sm {font-size: var(--font-size-sm);}
.text-size-13 {font-size: var(--font-size-13);}
.text-base {font-size: var(--font-size-base);}
.text-md {font-size: var(--font-size-md);}
.text-lg {font-size: var(--font-size-lg);}
.text-xl {font-size: var(--font-size-xl);}
.text-size-22 {font-size: var(--font-size-22);}
.text-2xl {font-size: var(--font-size-2xl);}
.text-3xl {font-size: var(--font-size-3xl);}
.text-4xl {font-size: var(--font-size-4xl);}
.text-size-34 {font-size: var(--font-size-34);}
.text-5xl {font-size: var(--font-size-5xl);}
.text-hero {font-size: var(--font-size-hero);}

.text-color-primary {color: var(--color-primary);}
.text-color-accent{color: var(--color-accent);}
.text-color-secondary {color: var(--color-text-secondary);}
.text-color-muted {color: var(--color-text-muted);}
.text-color-medium {color: var(--color-text-medium);}
.text-color-text {color: var(--color-text);}

.text-white\/25 {color: var(--color-white-opacity-80);}
.text-white\/40 {color: var(--color-white-opacity-40);}
.text-white\/60 {color: var(--color-white-opacity-60);}
.text-white\/65 {color: var(--color-white-opacity-65);}
.text-white\/70 {color: var(--color-white-opacity-70);}
.text-white\/75 {color: var(--color-white-opacity-75);}
.text-white\/80 {color: var(--color-white-opacity-80);}

.bg-color {background-color: var(--color-background);}
.bg-color-primary{background-color: var(--color-primary);}
.bg-color-alt{background-color: var(--color-background-alt);}
.bg-color-dark{background-color: var(--color-background-dark);}
.bg-color-near-dark{background-color: var(--color-background-near-black);}


.popup-welcome {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #ffffff;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    transition: opacity 0.5s ease;
    
    #words {
        transition: opacity 0.2s ease-in-out;
    }
}

/*common css between pages*/
body {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: var(--font-size-base);
}

.container {max-width: 1250px;}

.btn-toggle-mobile-menu {
    position: absolute;
    cursor:pointer;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background:rgba(255,255,255,0.15);
    color:white;
    border-radius: 50%;
    border:none;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    left: 4px;
}

.btn-toggle-search {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
}

.container-mobile-search {
    flex: 0 1 0;
    transition: flex 0.15s;

    &:focus-within, &.expanded {
        flex: 1 1 auto;

        #input-search-mobile {
            max-width: 500px; 
            padding-inline: 12px;
        }
    }

    label {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-grow: 1;
        overflow: hidden;
        border: none;
        height: 44px;
        background-color: var(--color-white);
        border-radius: var(--radius-pill);
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.08);

        #input-search-mobile {
            flex: 1;
            max-width: 0px;
            height: 100%;
            border: none;
            outline: none;
            padding-inline: 0px;
            transition: max-width 0.15s ease-in-out, padding 0.15s ease-in-out;
        }

        &:focus-within {
            #input-search-mobile {
                max-width: 500px; 
                padding-inline: 12px; /* Devolve o padding quando abre */
            }
        }
    }
}

header {
    position: sticky;
    z-index: 10;
    top: 0;

    .grid {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr) auto;
        grid-template-areas: "col-a col-b col-c";
        align-items: center;
        width: 100%;
        gap: 1rem;

        .col-a { grid-area: col-a; }
        .col-b { grid-area: col-b; }
        .col-c { grid-area: col-c; }
    }

    .nav-list-categories a {
        opacity: 1;

        &:hover {
            opacity: 0.8;
        }
    }

    #dropdown-cotacoes {

        .dropdown-menu {
            position: absolute;
            inset: 6px 0px auto auto !important;
            width: 280px !important;
            border-radius: var(--radius-xl);
            box-shadow: rgba(0, 0, 0, 0.13) 0px 8px 32px, rgba(0, 0, 0, 0.06) 0px 2px 8px;

            button {
                background: white;

                .text-exchange{
                    color: var(--color-text);
                }

                &.active {
                    background: rgba(246, 58, 92, 0.04);
                    
                    .text-exchange {
                        color: var(--color-primary);
                    }
                }
            }
        }
    }
}

/* Mobile */
@media screen and (max-width: 992px) {
    header .grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "col-a col-c"
            "col-b col-b";
    }
}

@media screen and (max-width: 768px) {
    header .grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "col-a"
            "col-c"
            "col-b";
    }
}


#offcanvasMenuMobile ul a {
    padding: 12px 16px;
    background-color: #FFF;
    transition: background-color 0.2s ease-in;

    &:hover {
        background-color: lab(98.2596% -.247031 -.706708);
    }
}