/* Typography */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 130%;
    color: var(--dark);
    max-height: 1920px;
}

.tz-light {
    font-weight: 300;
}

.tz-regular {
    font-weight: 400;
}

.tz-medium {
    font-weight: 500;
}

.tz-semibold {
    font-weight: 600;
}

.tz-bold {
    font-weight: 700;
}

.tz-txt-upper {
    text-transform: uppercase;
}

/* Colors */
:root {
    --cream: #FBF3E4;
    --mustard: #EBC470;
    --brown-1: #85603C;
    --brown-2: #A37E4E;
    --brown-3: #C99B5F;

    --dark: #353130;

    --sesame-1: #FBE9D9;
    --sesame-2: #DFC1A6;
    --sesame-3: #C4A486;

    --red: #ec0000;
    --orange: #D78046;
    --gold: #E8B340;

    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;

    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
}

.tz-bg-sesame-2 {
    background-color: var(--sesame-2);
}

.tz-text-brown-2 {
    color: var(--brown-2);
}

/* Buttons */
.tz-btn-1 {
    border: 1px solid var(--dark);
    border-radius: 64px;
    padding: 9px 8px 8px 32px;
    background-color: white;
    line-height: 130%;
    color: var(--dark);
}

.tz-btn-1:active, .tz-btn-2:active, .tz-btn-3:active, .tz-btn-5:active {
    background-color: var(--bs-gray-200);
}

.tz-btn-pill {
    padding: 4px 16px 3px 16px;
    background-color: var(--bs-gray-300);
    border-radius: 64px;
    margin-left: 16px;
    font-size: 12px;
}

.tz-btn-1:active .tz-btn-pill, .tz-btn-2:active .tz-btn-pill {
    background-color: var(--bs-gray-400);
}

.tz-search-btn {
    padding: 9px 360px 8px 32px;
    background-color: var(--sesame-2);
    border-radius: 64px;
    line-height: 130%;
    border: none;
}

.tz-active {
    background-color: var(--sesame-2);
}

.tz-active .tz-btn-pill {
    background-color: var(--sesame-3);
}

.tz-btn-2 {
    border: 1px solid var(--sesame-3);
    color: var(--brown-2);
    border-radius: 64px;
    padding: 9px 8px 8px 32px;
    background-color: white;
    line-height: 130%;
}

.tz-btn-2 .tz-btn-pill {
    background-color: var(--sesame-1);
}

.tz-btn-3 {
    border: 1px solid var(--sesame-3);
    color: var(--brown-2);
    border-radius: 64px;
    padding: 8px 32px 8px 32px;
    background-color: white;
    line-height: 130%;
}

.tz-btn-4 {
    border: none;
    background-color: white;
    padding: 1rem;
}

.tz-btn-4:active {
    color: var(--brown-3);
}

.tz-btn-5 {
    text-decoration: none;
    border: 1px solid var(--dark);
    border-radius: 64px;
    padding: 24px;
    width: 680px;
    background-color: var(--sesame-1);
    color: var(--dark);
    font-size: 2rem;
    text-align: center;
    line-height: 2rem;
}

.tz-btn-5:hover {
    transform: scale(1.05);
    color: var(--dark);
}

.tz-btn-lang-wrapper{
    display: flex;
    justify-content: space-between;
    width: 680px;
}
.tz-btn-lang {
    text-decoration: none;
    border: 1px solid var(--dark);
    border-radius: 64px;
    padding: 24px 36px;
    background-color: var(--sesame-1);
    color: var(--dark);
    font-size: 1.5rem;
    text-align: center;
    line-height: 2rem;
    text-transform: capitalize;
}
.tz-btn-lang:hover {
    transform: scale(1.05);
    color: var(--dark);
}
.tz-icon-btn, a .tz-icon-btn, .tz-icon-btn:hover, a .tz-icon-btn:hover {
    background-color: transparent;
    color: var(--dark);
    border: none;
    font-size: 3rem !important;
    -webkit-text-stroke-width: 1.5px;
}

.tz-icon-btn:active, a .tz-icon-btn:active {
    color: var(--bs-gray-500);
}

.badge.rounded-pill.tz-btn-action{
    border: none;
}

.badge.rounded-pill.tz-btn-action:active{
    opacity: 80%;
}

/* General */

.tz-modal-lg{
    max-width: 60% !important;
}

.tz-search-modal-dialog {
    margin-top: 33%;
}

.tz-search-modal-content {
    min-height: 30%;
    max-height: 880px !important;
    overflow-y: scroll;
}
.tz-home-wrapper {
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tz-home-wrapper section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;

    width: 70vw;
    /*margin-top: 440px;*/
}

.tz-index-logo {
    width: 60%;
    margin: 3.6rem 0;
}
.tz-workin-logo {
    width: 100%;
    margin: 3.6rem 0;
}
.tz-header-logo{
    width: 180px;
}

.tz-index-logo, .tz-header-logo{
    fill: var(--dark);
}

.tz-home-wrapper .wine-img {
    position: relative;
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

.tz-home-wrapper .wine-img .tz-bottom {
    margin: auto; /* Required */
    position: absolute; /* Required */
    bottom: 0; /* Aligns at the bottom */
    left: 0;
    right: 0; /* Aligns horizontal center */
    max-height: 100%; /* images bigger than 175 px  */
    max-width: 100%;
}

aside {
    position: fixed;
    left: 0;
    height: 78vh;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll;
}

aside::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.tz-subtag-wrapper {
    margin-left: 40px;
    padding-left: 16px;
    border-left: 1px solid var(--dark);
    display: flex;
    flex-direction: column;
    align-items: start;
}

.tz-subwine-wrapper {
    margin-left: 40px;
    padding-left: 16px;
    border-left: 1px solid var(--dark);
    display: flex;
    flex-direction: column;
    align-items: start;
}

.tz-img-wrapper {
    /*background-color: var(--bs-gray-300);*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 175px;
    height: 250px;
}

.tz-wine-card {
    height: 100%;
    display: grid;
    grid-template-columns: 6fr auto auto;
    align-items: center;
    border-top: 1px solid var(--bs-gray-400);
    color: var(--dark);
}

.tz-card-info {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tz-card-info .tz-winery {
    font-size: .8rem;
}

.tz-card-price {
    margin-top: auto;
}

.tz-old-price {

    text-decoration: line-through;
    color: var(--dark);
}

.tz-datasheet-info .tz-old-price{
    font-size: 2.4rem !important;
}

.tz-current-price {
    color: var(--dark);
}

.tz-offer-price {
    color: var(--red);
}

.tz-card-info .badge {
    min-width: 100px;
}

.tz-offer {
    background-color: var(--red);
}

.tz-new {
    background-color: #FFA800;
}

.tz-eco {
    background-color: #53A500;
}

.tz-selection {
    background-color: #BF5C00;
}

.tz-search-input, .tz-ean-input {
    border: 2px solid var(--brown-3);
    /*background-color: var(--bs-gray-200);*/
    border-radius: 64px;
}

.tz-ean-input:focus {
    border: none !important;
    outline: 2px solid var(--brown-3);
    box-shadow: none;
    -moz-box-shadow: none;

    background-color: var(--bs-gray-100);
    border-radius: 64px;
}

.tz-search-input .input-group-text, .tz-search-input input {
    border: none;
    background-color: transparent;
    border-radius: 64px;
}

.tz-search-input input:focus {
    outline: 2px solid var(--brown-3);
    box-shadow: none;
    -moz-box-shadow: none;

    background-color: var(--sesame-1);
    border-radius: 64px;
}

.tz-datasheet-wrapper {
    background-color: var(--sesame-2);
    height: 100vh;
}

.tz-datasheet-wrapper p {
    line-height: 160%;
    margin: 0 0 .5rem 0;
}

.tz-datasheet-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.tz-carousel-item {
    background-color: var(--sesame-1);
    width: 100%;
    height: 460px;
}

.tz-img-item{
    background-color: var(--sesame-1);
    width: 100%;
    height: 460px;
}

.tz-datasheet-img {
    width: 300px;
    height: auto;
}

/* bootstrap 5 */
.page-item.active .page-link{
    background-color: var(--sesame-2) !important;
    border-color: var(--sesame-2) !important;
}

.page-link{
    color: var(--dark) !important;
}

.page-link:focus{
    box-shadow: var(--sesame-1) !important;
}