/* RESET STYLING */
*, *::before, *::after {margin: 0; padding: 0; box-sizing: border-box;}
*::selection {color: #fff; background-color: var(--c-primary);}
html {scroll-behavior: smooth;}
body {font-family: var(--ff-primary-400); font-weight: 400; -webkit-font-smoothing: antialiased;}
h1,h2,h3,h4,h5,h6 {margin: 0; font-family: var(--ff-secondary-500); font-weight: 500; color: var(--c-text); transition: var(--trans-4);}
ul, ol {margin: 0; padding: 0; padding-left: 1rem;}
li {list-style: none; font-size: var(--fs-base);}
p {margin: 0; font-family: var(--ff-secondary-500); font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); transition: var(--trans-4);}
a {font-family: var(--ff-primary-400); color: var(--c-text); text-decoration: none; font-size: var(--fs-base); display: block; width: fit-content; transition: var(--trans-4);}
p a {display: inline; font-weight: 500; color: var(--c-primary); text-decoration: underline;}
button {font-family: var(--ff-primary-400); font-size: var(--fs-base); background-color: transparent; color: var(--c-text); border: none; cursor: pointer; transition: var(--trans-4);}
img, picture {max-width: 100%; height: auto; vertical-align: middle; font-style: italic; font-size: var(--fs-xs);}
svg {vertical-align: middle;}
input, textarea, select {width: 100%; font-family: var(--ff-primary-400); font-size: var(--fs-base); line-height: initial; color: var(--c-text); padding: .625rem .75rem; border: none;}
select {color: gray; appearance: none;}
input::placeholder, textarea::placeholder {color: gray;}
input[type="number"]::-webkit-inner-spin-button,
input[type="search"]::-webkit-search-cancel-button {appearance: none;}
textarea {resize: none;}

/* MODIFIER CLASES */
.container {max-width: var(--container-size); margin-inline: auto; padding-inline: var(--container-padding);}
.btn__primary {font-size: var(--fs-xs); line-height: initial; text-transform: uppercase; background-color: var(--c-primary); color: #fff; padding: 0.75rem 1.125rem 0.625rem 1.125rem; border-radius: 3px; transition: var(--trans-4);}
.btn__primary:hover {background-color: var(--c-primary-hvr);}
.btn__white {line-height: initial; text-transform: uppercase; text-align: center; background-color: #fff; color: #111111; padding: 1rem 2rem 0.875rem 2rem; border: 2px solid transparent; border-radius: 3.75rem; transition: var(--trans-4);}
.btn__white:hover {background-color: transparent; color: #fff; border-color: #fff;}

/* Scrollbar */
:where(.scroll, .scroll__p > p) {overflow-y: auto; padding-right: 12px;}
:where(.scroll, .scroll__p > p)::-webkit-scrollbar {width: 9px;}
:where(.scroll, .scroll__p > p)::-webkit-scrollbar-track {width: 11px; border-radius: 8px; background-color: #fff; visibility: hidden;}
:where(.scroll, .scroll__p > p)::-webkit-scrollbar-thumb {border-radius: 8px; background-color: var(--c-orange-lgt); visibility: hidden;}
:where(.scroll, .scroll__p > p):hover::-webkit-scrollbar-track {visibility: visible;}
:where(.scroll, .scroll__p > p):hover::-webkit-scrollbar-thumb {visibility: visible;}
@supports not selector(::-webkit-scrollbar) {
    :where(.scroll, .scroll__p > p) {overflow-y: auto; scrollbar-width: thin; scrollbar-color: transparent transparent;}
    :where(.scroll, .scroll__p > p):hover {scrollbar-width: thin; scrollbar-color: var(--c-orange-lgt) #fff;}
}

/* VARIABLES */
:root {
    --container-size: 1600px;       /* Container Default Width */
    --container-maximum: 1920px;    /* Container Max Width */
    --container-padding: 25px;      /* Container Left-Right Padding */
    /* Font Families */
    --ff-primary-400: 'Acumin Pro - Regular', system-ui, sans-serif; 
    --ff-primary-700: 'Acumin Pro - Bold', system-ui, sans-serif; 
    --ff-secondary-300: 'Accia Flare - Light', system-ui, sans-serif; 
    --ff-secondary-500: 'Accia Flare - Medium', system-ui, sans-serif; 
    --ff-tertiary-400: 'Neue Haas Grotesk Text Pro - Regular', system-ui, sans-serif; 
    --ff-tertiary-500: 'Neue Haas Grotesk Text Pro - Medium', system-ui, sans-serif; 
    --ff-tertiary-700: 'Neue Haas Grotesk Text Pro - Bold', system-ui, sans-serif; 
    /* Font-Sizes */
    --fs-2xl: clamp(2.5rem, 1.9917rem + 2.259vw, 3.4375rem);    /* Min: 40px @360px, Max: 55px @1024px */
    --fs-xl: clamp(2rem, 1.7289rem + 1.2048vw, 2.5rem);         /* Min: 32px @360px, Max: 40px @1024px */
    --fs-lg: clamp(1.6875rem, 1.552rem + 0.6024vw, 1.9375rem);  /* Min: 27px @360px, Max: 31px @1024px */
    --fs-md: clamp(1.4375rem, 1.3358rem + 0.4518vw, 1.625rem);  /* Min: 23px @360px, Max: 26px @1024px */
    --fs-sm: clamp(1rem, 0.875rem + 0.5556vw, 1.125rem);        /* Min: 16px @360px, Max: 18px @720px */
    --fs-base: clamp(0.9375rem, 0.875rem + 0.2778vw, 1rem);     /* Min: 15px @360px, Max: 16px @720px */
    --fs-xs: clamp(0.8125rem, 0.75rem + 0.2778vw, 0.875rem);    /* Min: 13px @360px, Max: 14px @720px */
    --fs-2xs: 12px;
    /* Colors */
    --c-primary: #5f212e;
    --c-primary-hvr: #6f3743;
    --c-text: #232323;
    --c-neutral: #f2f2ed;
    --c-orange-lgt: #f26d60;
    /* Transitions */
    --trans-4: 0.4s ease-in;
    --trans-6: 0.6s ease-in;
    /* Borders */
    --br-base: 10px;
    /* Filters */
    --fltr-primary: brightness(0) saturate(100%) invert(13%) sepia(44%) saturate(2287%) hue-rotate(317deg) brightness(94%) contrast(89%);
}

/* Responsive Variable */
@media only screen and (max-width: 1024px) {
    :root {
        --container-padding: 15px;
    }
}

@media only screen and (max-width: 720px) {
    :root {
        --container-padding: 10px;
    }
}

/* PRIVATE VARIABLES */
body {
    --_fs-xl-alt: calc(var(--fs-xl) * 0.875);       /* 28px @360px, 35px @1024px */
    --_fs-md-alt: calc(var(--fs-md) * 0.925);       /* 21px @360px, 24px @1024px */
    --_fs-sm-alt-lg: calc(var(--fs-sm) * 1.115);    /* 18px @360px, 20px @720px */
    --_fs-sm-alt-xs: calc(var(--fs-sm) * 0.945);    /* 15px @360px, 17px @720px */
    --_fs-base-alt: calc(var(--fs-base) * 0.9375);  /* 14px @360px, 15px @720px */ 
    --_fs-xs-alt: calc(var(--fs-xs) * 0.935);       /* 12px @360px, 13px @720px */
}

header, .product, .product-slider, .products {
    --_c-dark: #333333;
}

.highlights, .locations {
    --_c-dark-gray: #4d4d4d;
}

.products {
    --_c-orangish: #ff6d5e;
}

.product {
    --_c-dark-1: #111111;
    --_c-fields: #f3f3f3;
    --_c-lght-gray: #e1e1e1;
    --_c-lght-gray-2: #cfcfcf;
    --_c-gray: #7e7e7e;
}

.product-slider {
    --_c-gray: #9e9e9e;
}

.category {
    --_c-bg: #f6f6f6;
}

.breadcrumb {
    --_c-dark-lgt: rgba(0,0,0,.5);
    --_c-dark-lgtst: rgba(0,0,0,.05);
}

.products {
    --_c-dark-1: #111111;
    --_c-gray-lgt: #e3e3e3;
    --_c-bg: #f3f3f3;
}