/* Start:/local/templates/jinove_wine/template_styles.css?1792619614127900*/
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f0.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f1.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f0.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f1.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f0.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cinzel";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f1.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f3.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f6.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f4.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f2.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f5.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f3.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f6.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f4.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f2.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f5.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f3.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f6.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f4.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f2.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f5.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f3.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f6.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f4.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f2.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f5.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f12.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f7.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f8.woff2) format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f10.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f11.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f9.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f12.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f7.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f8.woff2) format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f10.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f11.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f9.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f12.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f7.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f8.woff2) format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f10.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f11.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f9.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f12.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f7.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f8.woff2) format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f10.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f11.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f9.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f12.woff2) format("woff2");
unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f7.woff2) format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f8.woff2) format("woff2");
unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f10.woff2) format("woff2");
unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f11.woff2) format("woff2");
unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(/local/templates/jinove_wine/./assets/fonts/f9.woff2) format("woff2");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--color-wine-950: #080504;
--color-wine-900: #0e0908;
--color-wine-800: #160b0a;
--color-wine-700: #1a1110;
--color-burgundy-800: #6b1d33;
--color-brown-950: #1a120c;
--color-gold-500: #c9a96a;
--color-gold-400: #d8bd84;
--color-red-600: #a8392c;
--color-red-400: #e07a6c;
--color-green-200: #bfe6bf;
--color-white: #ffffff;
--color-black: #000000;
--color-bg: var(--color-wine-900);
--color-bg-deep: var(--color-wine-950);
--color-bg-soft: var(--color-wine-800);
--color-surface: var(--color-wine-700);
--color-accent: var(--color-gold-500);
--color-accent-hover: var(--color-gold-400);
--color-danger: var(--color-red-600);
--color-danger-soft: var(--color-red-400);
--color-success-soft: var(--color-green-200);
--color-on-accent: var(--color-brown-950);
--color-text: var(--color-white);
--color-text-muted: color-mix(in srgb, var(--color-white) 70%, transparent);
--color-text-faint: color-mix(in srgb, var(--color-white) 50%, transparent);
--color-line: color-mix(in srgb, var(--color-white) 10%, transparent);
--color-line-field: color-mix(in srgb, var(--color-white) 38%, transparent);
--shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
--font-serif: "Cormorant Garamond", Georgia, serif;
--font-sans: "Manrope", "Segoe UI", sans-serif;
--font-caps: "Cinzel", "Cormorant Garamond", serif;
--fs-caption: .625rem;
--text-xs: .75rem;
--text-13: .8125rem;
--text-15: .9375rem;
--text-base: 1rem;
--text-17: 1.0625rem;
--text-19: 1.1875rem;
--measure: 46rem;
--fs-h4: clamp(1.125rem, 1.6vw, 1.5rem);
--fs-h3: clamp(1.625rem, 2.4vw, 2.5rem);
--fs-h2: clamp(1.875rem, 4vw, 3.25rem);
--fs-display: clamp(2.5rem, 6vw, 5.5rem);
--fs-title-md: clamp(2rem, 4.5vw, 3.5rem);
--fs-title-lg: clamp(2.875rem, 6vw, 5.25rem);
--leading-tight: 1.05;
--leading-title: 1.2;
--leading-ui: 1.45;
--leading-text: 1.65;
--leading-long: 1.75;
--tracking-tight: -.01em;
--tracking-xs: .06em;
--tracking-sm: .12em;
--tracking-md: .16em;
--tracking-ui: .2em;
--tracking-wide: .3em;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-3-5: 14px;
--space-4: 16px;
--space-5: 20px;
--space-5-5: 22px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--icon-md: 22px;
--blur-md: 14px;
--space-section: var(--space-24);
--space-head: var(--space-12);
--space-card: var(--space-6);
--gutter: var(--space-12);
--space-grid-base: var(--space-6);
--space-grid-wide: var(--space-12);
--container: 1280px;
--radius-sm: 2px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-full: 999px;
--duration-fast: .2s;
--duration-base: .25s;
--duration-header: .45s;
--duration-mid: .55s;
--duration-soft: .7s;
--duration-slow: .9s;
--ease-base: ease;
--ease-out: ease-out;
--size-tap: 44px;
--size-header: 85px;
--z-header: 50;
--z-lang: 60;
--z-tabbar: 90;
--z-skip: 1000;
--z-cookie: 1100;
--z-modal: 1150;
--z-search: 1200;
--z-toast: 1200;
--z-age: 9999;
--icon-star: url("data:image/svg+xml;utf8,");
}
.vino-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-head);
flex-wrap: wrap;
}
.vino-section {
border-top: 1px solid var(--color-line);
background: var(--color-bg);
color: var(--color-text);
}
.vino-section__link-icon {
width: 16px;
height: 16px;
transition: transform var(--duration-fast) var(--ease-base);
}
.vino-section__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin: 0;
}
.vino-section__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-accent);
border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
padding-bottom: var(--space-1);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 500;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
transition: border-color var(--duration-fast) var(--ease-base), color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-section__link:hover {
color: var(--color-text);
border-bottom-color: var(--color-accent);
}
}
.vino-section__more {
position: relative;
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 500;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
text-decoration: none;
padding-bottom: var(--space-1);
white-space: nowrap;
border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
}
.vino-section__count {
opacity: .62;
font-variant-numeric: tabular-nums;
}
.vino-section__count::before {
content: " ยท ";
}
.vino-section__more::after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: -1px;
height: 1px;
background: var(--color-accent);
transition: right var(--duration-base) var(--ease-base);
}
@media (hover:hover) {
.vino-section__more:hover::after {
right: 0;
}
}
@media (max-width:760px) {
.vino-section__inner {
display: flex;
flex-direction: column;
}
.vino-section__inner > .vino-section__head {
display: contents;
}
.vino-section__intro {
order: 1;
margin-bottom: var(--space-head);
}
.vino-section__body {
order: 2;
}
.vino-section__all {
order: 3;
align-self: flex-start;
margin-top: var(--space-5);
}
.vino-section__count {
display: inline;
}
}
.vino-razdel-hero:has(.vino-showcase-banner--catalog) + .vino-section {
border-top: 0;
}
.vino-razdel-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
.vino-razdel-hero__note {
margin: var(--space-3) 0 0;
color: var(--color-text-muted);
font-size: var(--text-15);
}
.vino-razdel-hero__mark {
color: var(--color-accent);
}
.vino-razdel-hero__title {
margin: var(--space-4) 0 0;
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--fs-h2);
font-weight: 400;
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.vino-razdel-hero__lead {
max-width: var(--measure);
margin: var(--space-4) 0 0;
color: var(--color-text-muted);
font-size: var(--text-base);
line-height: var(--leading-long);
}
.vino-razdel-hero {
padding-right: var(--gutter);
padding-left: var(--gutter);
padding-top: var(--space-8);
padding-bottom: 0;
}
.vino-news__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
@media (min-width:761px) {
.vino-news__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.vino-news__card {
position: relative;
transition: transform var(--duration-base) var(--ease-base);
}
.vino-news__media {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
margin-bottom: var(--space-8);
}
.vino-news__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .8;
transition: opacity var(--duration-fast) var(--ease-base), transform var(--duration-soft) var(--ease-base);
}
.vino-news__date {
display: block;
margin: 0 0 var(--space-4);
color: var(--color-text-faint);
font-size: var(--text-13);
letter-spacing: var(--tracking-xs);
text-transform: uppercase;
}
.vino-news__title {
margin: 0 0 var(--space-4);
font-family: var(--font-serif);
font-size: var(--fs-h4);
font-weight: 400;
line-height: var(--leading-title);
transition: color var(--duration-fast) var(--ease-base);
}
.vino-news__link {
color: inherit;
}
.vino-news__link::after {
content: "";
position: absolute;
inset: 0;
}
.vino-news__text {
display: -webkit-box;
overflow: hidden;
margin: 0;
color: color-mix(in srgb, var(--color-white) 60%, transparent);
font-size: 1rem;
line-height: var(--leading-long);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media (hover:hover) {
.vino-news__card:hover {
transform: translateY(-3px);
}
.vino-news__card:hover .vino-news__img {
opacity: 1;
transform: scale(1.05);
}
.vino-news__card:hover .vino-news__title {
color: var(--color-accent);
}
}
@media (max-width:760px) {
.vino-news__grid {
gap: var(--space-5);
}
.vino-news__title {
font-size: 1.375rem;
}
.vino-news__date {
font-size: var(--fs-caption);
letter-spacing: 0;
text-transform: none;
}
.vino-news__card--compact {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
grid-template-rows: auto 1fr;
column-gap: var(--space-4);
padding-top: var(--space-5);
border-top: 1px solid var(--color-line);
}
.vino-news__card--compact .vino-news__media {
grid-row: span 2;
aspect-ratio: 4 / 3;
margin: 0;
}
.vino-news__card--compact .vino-news__date {
margin-bottom: var(--space-1);
}
.vino-news__card--compact .vino-news__title {
margin: 0;
font-size: var(--text-17);
}
.vino-news__card--compact .vino-news__text {
display: none;
}
}
.vino-news {
background: var(--color-bg);
}
@media (min-width:981px) {
.vino-news .vino-news__grid {
gap: var(--space-12);
}
}
* {
box-sizing: border-box;
}
html {
margin: 0;
background: var(--color-bg);
scrollbar-color: color-mix(in srgb, var(--color-accent) 40%, transparent) var(--color-bg);
scroll-padding-top: calc(var(--size-header) + var(--space-4));
-webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
button, input {
font: inherit;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vino-wrap, .vino-header__inner, .vino-footer__grid {
max-width: var(--container);
margin: 0 auto;
}
.vino-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.vino-icon--search {
stroke-width: 1.4;
}
.vino-btn .vino-icon {
width: 16px;
height: 16px;
}
@media (hover:hover) {
.vino-btn:hover {
background: var(--color-white);
box-shadow: 0 18px 44px color-mix(in srgb, var(--color-accent) 20%, transparent);
transform: translateY(-2px);
}
.vino-btn--outline:hover {
background: var(--color-accent);
color: var(--color-bg);
}
}
.vino-btn {
display: inline-flex;
align-items: center;
gap: var(--space-3);
background: var(--color-accent);
color: var(--color-bg);
font-size: var(--text-13);
letter-spacing: var(--tracking-ui);
padding: var(--space-3) var(--space-6);
text-transform: uppercase;
box-shadow: 0 12px 32px color-mix(in srgb, var(--color-accent) 12%, transparent);
transition: background var(--duration-fast) var(--ease-base), box-shadow var(--duration-fast) var(--ease-base), color var(--duration-fast) var(--ease-base), transform var(--duration-fast) var(--ease-base);
border: 0;
font-family: var(--font-sans);
font-weight: 600;
line-height: var(--leading-title);
text-decoration: none;
cursor: pointer;
}
@media (pointer:coarse) {
.vino-btn {
min-height: var(--size-tap);
}
}
.vino-btn--sm {
padding: 11px var(--space-4);
white-space: nowrap;
}
.vino-btn--outline {
background: transparent;
color: var(--color-accent);
border: 1px solid var(--color-accent);
}
.vino-btn:disabled {
opacity: .6;
cursor: default;
pointer-events: none;
}
.vino-btn--loading {
position: relative;
}
.vino-btn--loading::after {
content: "";
position: absolute;
top: 50%;
right: var(--space-1);
width: 14px;
height: 14px;
margin-top: -7px;
border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
border-top-color: currentColor;
border-radius: 50%;
animation: vinoBtnSpin .7s linear infinite;
}
@media (max-width:760px) {
.vino-tabbar__item .vino-icon {
width: var(--icon-md);
height: var(--icon-md);
}
}
.vino-tabbar {
display: none;
}
.vino-footer .vino-logo--footer {
gap: var(--space-3);
margin-top: -18px;
margin-bottom: var(--space-5);
text-decoration: none;
}
@media (max-width:980px) {
.vino-footer .vino-logo--footer {
margin-top: 0;
}
}
.vino-footer .vino-subscribe__row .vino-btn {
box-shadow: none;
}
.vino-footer {
padding: var(--space-16) var(--space-6) var(--space-6);
border-top: 1px solid var(--color-line);
background: var(--color-bg);
color: var(--color-text-muted);
}
.vino-footer__news {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6) var(--space-12);
max-width: var(--container);
margin: 0 auto var(--space-12);
padding-bottom: var(--space-12);
border-bottom: 1px solid var(--color-line);
}
.vino-footer__news-form {
flex: 0 1 520px;
}
.vino-footer__title {
margin: 0 0 var(--space-5);
color: var(--color-text);
font-size: var(--text-13);
font-weight: 400;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
font-family: var(--font-sans);
line-height: var(--leading-ui);
}
.vino-footer__title--news {
margin-bottom: var(--space-2);
font-family: var(--font-serif);
font-size: var(--fs-h3);
letter-spacing: 0;
line-height: var(--leading-title);
text-transform: none;
}
.vino-footer__lead, .vino-footer__about, .vino-footer__item, .vino-footer__link {
color: var(--color-text-muted);
font-size: var(--text-15);
line-height: var(--leading-text);
}
.vino-footer__lead {
margin: 0;
}
.vino-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
align-items: start;
}
.vino-footer__col {
min-width: 0;
}
.vino-footer__about {
max-width: 320px;
margin: 0;
}
.vino-footer__list {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.vino-footer__phone {
color: var(--color-text);
font-size: var(--text-17);
line-height: var(--leading-text);
font-variant-numeric: tabular-nums;
}
.vino-footer__tg {
display: inline-flex;
margin-top: var(--space-5);
color: var(--color-text);
font-size: var(--text-15);
line-height: var(--leading-text);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-base);
}
.vino-footer__tg-icon {
width: 24px;
height: 24px;
}
.vino-footer__bottom {
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-12);
padding-top: var(--space-6);
border-top: 1px solid var(--color-line);
color: var(--color-text-faint);
font-size: var(--text-13);
}
.vino-footer__legal, .vino-footer__docs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-6);
}
.vino-footer__doc {
color: var(--color-text-faint);
font-size: var(--text-13);
line-height: var(--leading-text);
text-decoration: none;
}
.vino-footer__doc--button {
padding: 0;
border: 0;
background: none;
font-family: inherit;
text-align: left;
cursor: pointer;
}
.vino-footer__age {
margin-right: var(--space-2);
padding: 0 var(--space-1);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-weight: 600;
}
@media (hover:hover) {
.vino-footer__link:hover, .vino-footer__phone:hover, .vino-footer__tg:hover, .vino-footer__doc:hover {
color: var(--color-accent);
}
}
@media (pointer:coarse) {
.vino-footer__tg::after {
content: "";
position: absolute;
inset: -10px;
}
.vino-footer__doc {
position: relative;
}
.vino-footer__doc::before {
content: "";
position: absolute;
inset: -11px 0;
}
}
@media (max-width:760px) {
.vino-footer__grid {
grid-template-columns: repeat(2, minmax(0,1fr));
gap: var(--space-10) var(--space-6);
}
.vino-footer__col--wide {
grid-column: 1 / -1;
}
}
@media (min-width:761px) {
.vino-footer {
padding-right: var(--space-12);
padding-left: var(--space-12);
}
.vino-footer__bottom {
flex-direction: row;
justify-content: space-between;
}
}
@media (min-width:761px) and (max-width:980px) {
.vino-footer__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width:981px) {
.vino-footer__grid {
grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);
column-gap: var(--space-12);
}
}
@media (min-width:981px) and (max-width:1179px) {
.vino-footer__grid {
column-gap: var(--space-10);
}
}
.vino-footer .vino-subscribe {
display: block;
max-width: none;
margin: 0;
}
.vino-footer .vino-subscribe .vino-consent {
margin: var(--space-3) 0 0;
}
.vino-footer .vino-consent--sm .vino-consent__text {
font-size: var(--text-13);
}
.vino-footer .vino-consent__link {
color: var(--color-accent);
font-size: inherit;
line-height: inherit;
}
@media (hover:hover) {
.vino-footer .vino-consent__link:hover {
color: var(--color-accent-hover);
}
}
.vino-age .vino-age__logo .vino-logo__icon {
width: 56px;
height: 56px;
}
.vino-age .vino-age__logo .vino-logo__name {
color: var(--color-accent);
font-size: var(--fs-h4);
}
.vino-age {
position: fixed;
inset: 0;
z-index: var(--z-age);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
background: color-mix(in srgb, var(--color-bg-deep) 80%, transparent);
backdrop-filter: blur(var(--blur-md)) saturate(120%);
-webkit-backdrop-filter: blur(var(--blur-md)) saturate(120%);
animation: vinoAgeFade .5s ease both;
}
.vino-age[hidden] {
display: none;
}
.vino-age__card {
position: relative;
width: 100%;
max-width: 460px;
padding: var(--space-12) 44px var(--space-10);
text-align: center;
background: radial-gradient(130% 120% at 50% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 55%), var(--color-surface);
border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
border-radius: 6px;
box-shadow: 0 40px 120px color-mix(in srgb, var(--color-black) 60%, transparent);
animation: vinoAgeRise .6s cubic-bezier(.2, .72, .2, 1) both;
}
.vino-age__card:focus {
outline: none;
}
.vino-age__title {
margin: 0 0 var(--space-4);
color: var(--color-text);
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-h3);
line-height: var(--leading-tight);
font-variant-numeric: lining-nums;
}
.vino-age__text {
margin: 0 auto 30px;
max-width: 340px;
color: color-mix(in srgb, var(--color-white) 60%, transparent);
font-family: var(--font-sans);
font-size: var(--text-15);
line-height: var(--leading-text);
}
.vino-age__actions {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.vino-age__btn {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 28px;
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 600;
letter-spacing: var(--tracking-sm);
text-transform: uppercase;
cursor: pointer;
transition: background var(--duration-base) var(--ease-base), color var(--duration-base) var(--ease-base), border-color var(--duration-base) var(--ease-base);
}
.vino-age__btn--yes {
background: var(--color-accent);
color: var(--color-on-accent);
}
@media (hover:hover) {
.vino-age__btn--yes:hover {
background: var(--color-accent-hover);
}
}
.vino-age__btn--no {
background: transparent;
color: color-mix(in srgb, var(--color-white) 65%, transparent);
border-color: color-mix(in srgb, var(--color-white) 18%, transparent);
}
@media (hover:hover) {
.vino-age__btn--no:hover {
color: var(--color-text);
border-color: color-mix(in srgb, var(--color-white) 40%, transparent);
}
}
.vino-age__legal {
margin: var(--space-6) 0 0;
color: color-mix(in srgb, var(--color-white) 60%, transparent);
font-family: var(--font-sans);
font-size: var(--text-xs);
line-height: var(--leading-ui);
}
.vino-age--leaving {
opacity: 0;
transition: opacity .4s;
}
.vino-age .vino-age__logo {
flex-direction: column;
gap: var(--space-3);
width: auto;
height: auto;
margin: 0 auto var(--space-6);
}
.vino-subscribe .vino-btn {
flex: 0 0 auto;
}
.vino-subscribe__row .vino-btn {
flex: 0 0 auto;
height: 48px;
padding: 0 var(--space-5);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
@media (hover:hover) {
.vino-subscribe__row .vino-btn:hover {
transform: none;
}
}
.vino-subscribe .vino-inp {
flex: 1 1 100%;
min-width: 0;
margin: 0;
}
.vino-subscribe__row .vino-inp {
flex: 1 1 auto;
height: 48px;
margin: 0;
border-right: 0;
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.vino-subscribe__row .vino-inp:focus {
border-color: color-mix(in srgb, var(--color-accent) 60%, transparent);
outline: 0;
}
.vino-subscribe {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-2);
margin: var(--space-3-5) 0 0;
max-width: 340px;
}
.vino-subscribe__row {
display: flex;
}
.vino-subscribe .vino-consent {
flex: 1 0 100%;
margin: 2px 0 0;
}
.vino-subscribe .vino-sub-msg {
min-height: calc(1em * var(--leading-ui));
margin: var(--space-2) 0 0;
line-height: var(--leading-ui);
}
.vino-subscribe .vino-sub-msg[hidden] {
display: block;
visibility: hidden;
}
.vino-footer .vino-subscribe__row .vino-inp {
border-color: color-mix(in srgb, var(--color-white) 20%, transparent);
background: transparent;
}
.vino-sub-msg {
margin: var(--space-3-5) 0 0;
color: var(--color-success-soft);
font-size: var(--text-13);
}
.vino-sub-msg--err {
color: var(--color-danger-soft);
}
.vino-cookie[hidden] {
display: none;
}
.vino-cookie--on {
transform: none;
}
.vino-cookie__link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.vino-cookie__actions {
display: flex;
flex: 0 0 auto;
gap: var(--space-2);
}
.vino-cookie {
position: fixed;
z-index: var(--z-cookie);
background: var(--color-surface);
transform: translateY(100%);
transition: transform var(--duration-base) var(--ease-base);
left: auto;
right: clamp(12px,3vw,32px);
bottom: clamp(12px,3vw,28px);
width: min(720px,calc(100vw - 24px));
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 0 18px 70px color-mix(in srgb, var(--color-black) 48%, transparent);
}
.vino-cookie__inner {
max-width: var(--container);
margin: 0 auto;
display: flex;
align-items: center;
padding: var(--space-3) var(--space-3-5);
gap: var(--space-3-5);
}
.vino-cookie__text {
flex: 1;
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
line-height: var(--leading-ui);
}
.vino-cookie__ok {
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width:560px) {
.vino-cookie {
right: 10px;
width: calc(100vw - 20px);
border-radius: var(--radius-md);
}
.vino-cookie__inner {
flex-direction: column;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 10px;
padding: 10px 10px 10px var(--space-3);
}
.vino-cookie__text {
font-size: var(--text-xs);
line-height: var(--leading-ui);
}
.vino-cookie__ok {
width: auto;
min-height: 34px;
padding: var(--space-2) var(--space-3);
}
.vino-cookie__actions {
flex-direction: column;
}
}
@media (pointer:coarse) {
.vino-cookie__ok {
min-height: 44px;
}
}
@media (min-width:561px) {
.vino-cookie {
left: var(--space-8);
right: auto;
bottom: var(--space-8);
width: 460px;
border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
border-radius: var(--radius-md);
background: var(--color-bg-soft);
transform: translateY(calc(100% + var(--space-12)));
}
.vino-cookie--on {
transform: none;
}
.vino-cookie__inner {
display: grid;
gap: var(--space-5);
padding: var(--space-6);
}
.vino-cookie__text {
font-size: var(--text-15);
line-height: var(--leading-text);
}
.vino-cookie__ok {
justify-self: start;
}
}
.vino-header__inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
}
.vino-header {
position: sticky;
top: 0;
z-index: var(--z-header);
padding: var(--space-3-5) var(--gutter);
border-bottom: 1px solid color-mix(in srgb, var(--color-white) 5%, transparent);
background: color-mix(in srgb, var(--color-bg) 40%, transparent);
backdrop-filter: blur(4px);
transition: background var(--duration-fast) var(--ease-base), border-color var(--duration-fast) var(--ease-base), box-shadow var(--duration-fast) var(--ease-base), backdrop-filter var(--duration-fast) var(--ease-base);
}
.vino-header--scrolled {
border-bottom-color: var(--color-line);
background: color-mix(in srgb, var(--color-bg) 80%, transparent);
box-shadow: 0 8px 30px color-mix(in srgb, var(--color-black) 35%, transparent);
backdrop-filter: blur(12px);
}
@media (max-width:560px) {
.vino-header__inner {
gap: 10px;
}
}
.vino-header__main {
display: flex;
flex: 1;
align-items: center;
gap: var(--space-10);
min-width: 0;
margin-left: var(--space-8);
}
.vino-header.vino-header--mega {
background: color-mix(in srgb, var(--color-bg) 97%, transparent);
}
@media (min-width:981px) {
.vino-header .vino-header__main {
justify-content: center;
margin-left: var(--space-10);
margin-right: var(--space-10);
}
}
@media (min-width:981px) and (max-width:1279px) {
.vino-header .vino-header__main {
gap: var(--space-4);
margin-left: var(--space-5);
margin-right: var(--space-5);
}
}
@media (max-width:980px) {
.vino-header .vino-header__main {
margin-right: 0;
margin-left: 0;
}
}
@media (min-width:981px) and (max-width:1279px) {
.vino-header .vino-actions {
gap: var(--space-3);
}
}
.vino-logo {
display: flex;
align-items: center;
gap: var(--space-2);
border: 0;
background: transparent;
color: var(--color-text);
}
.vino-logo__icon {
display: block;
object-fit: contain;
width: 24px;
height: 24px;
color: var(--color-accent);
filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color-accent) 18%, transparent));
transition: filter var(--duration-header) var(--ease-base), color var(--duration-header) var(--ease-base);
}
@media (hover:hover) {
.vino-logo:hover .vino-logo__icon {
filter: drop-shadow(0 0 20px color-mix(in srgb, var(--color-accent) 50%, transparent));
color: var(--color-accent-hover);
}
}
.vino-logo__name {
text-transform: uppercase;
font-family: var(--font-caps);
font-weight: 500;
font-size: var(--text-19);
letter-spacing: var(--tracking-md);
}
.vino-logo--header {
gap: var(--space-3);
}
.vino-logo--header .vino-logo__icon {
width: 56px;
height: 56px;
}
.vino-logo--header .vino-logo__name {
color: var(--color-accent);
font-size: var(--fs-h4);
white-space: nowrap;
}
@media (min-width:981px) and (max-width:1279px) {
.vino-logo--header .vino-logo__icon {
width: 48px;
height: 48px;
}
}
@media (max-width:400px) {
.vino-logo--header {
gap: var(--space-2);
}
.vino-logo--header .vino-logo__icon {
width: 48px;
height: 48px;
}
.vino-logo--header .vino-logo__name {
font-size: var(--text-15);
}
}
.vino-logo--footer .vino-logo__icon {
width: 56px;
height: 56px;
}
.vino-logo--footer .vino-logo__name {
color: var(--color-accent);
font-size: var(--fs-h4);
white-space: nowrap;
}
@media (min-width:981px) and (max-width:1179px) {
.vino-logo--header .vino-logo__name {
display: none;
}
}
@media (max-width:340px) {
.vino-logo--header .vino-logo__name {
display: none;
}
}
.vino-logo--footer {
margin-bottom: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-15);
line-height: var(--leading-text);
}
.vino-nav {
display: none;
align-items: center;
gap: var(--space-10);
font-size: var(--text-13);
}
.vino-nav__link {
color: color-mix(in srgb, var(--color-white) 80%, transparent);
transition: color var(--duration-fast) var(--ease-base);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.vino-nav__link--extra, .vino-nav__ask {
display: none;
}
.vino-nav__link--active {
color: var(--color-accent);
}
@media (hover:hover) {
.vino-nav__link:hover {
color: var(--color-accent);
}
}
@media (max-width:980px) {
.vino-nav--open {
position: absolute;
top: calc(100% + 16px);
right: 0;
left: 0;
display: grid;
gap: 0;
border: 1px solid var(--color-line);
background: var(--color-bg);
padding: 10px 0;
box-shadow: 0 18px 40px color-mix(in srgb, var(--color-black) 34%, transparent);
backdrop-filter: blur(var(--blur-md));
}
.vino-nav--open .vino-nav__link {
padding: var(--space-3-5) var(--space-5-5);
}
.vino-nav--open .vino-nav__ask {
display: block;
padding: var(--space-4) var(--space-6);
border: 0;
border-top: 1px solid var(--color-line);
background: none;
color: var(--color-accent);
font-family: var(--font-serif);
font-size: var(--text-19);
letter-spacing: var(--tracking-ui);
text-align: left;
text-transform: uppercase;
cursor: pointer;
}
}
@media (max-width:760px) {
.vino-nav--open .vino-nav__link--extra {
display: block;
}
}
@media (min-width:981px) {
.vino-nav {
display: flex;
flex: 0 1 auto;
justify-content: center;
}
.vino-nav__link {
font-weight: 500;
white-space: nowrap;
}
.vino-nav__link:not(.vino-nav__link--active) {
color: color-mix(in srgb, var(--color-white) 70%, transparent);
}
.vino-nav__link--catalog {
display: none;
}
}
@media (min-width:981px) and (hover:hover) {
.vino-nav__link:not(.vino-nav__link--active):hover {
color: var(--color-text);
}
}
@media (min-width:981px) and (max-width:1279px) {
.vino-nav {
gap: var(--space-4);
}
}
@media (min-width:981px) {
.vino-catalog-btn::after {
content: "";
position: absolute;
right: 0;
bottom: calc(var(--space-3) - 6px);
left: 0;
height: 1px;
background: currentColor;
transform: scaleX(.3);
transform-origin: left center;
transition: transform .35s ease;
}
.vino-catalog-btn--open::after {
transform: scaleX(1);
}
}
@media (min-width:981px) and (hover:hover) {
.vino-catalog-btn:hover::after {
transform: scaleX(1);
}
}
.vino-catalog-btn {
position: relative;
display: none;
align-items: center;
padding: var(--space-3) 0;
border: 0;
background: transparent;
color: color-mix(in srgb, var(--color-white) 80%, transparent);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 600;
line-height: var(--leading-ui);
letter-spacing: var(--tracking-ui);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-base);
}
.vino-catalog-btn--open {
color: var(--color-accent);
}
.vino-catalog-btn:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 4px;
}
@media (min-width:981px) {
.vino-catalog-btn {
display: inline-flex;
}
}
@media (min-width:981px) and (hover:hover) {
.vino-catalog-btn:hover {
color: var(--color-text);
}
}
.vino-actions {
display: flex;
align-items: center;
gap: var(--space-5);
color: color-mix(in srgb, var(--color-white) 80%, transparent);
}
@media (max-width:760px) {
.vino-actions .vino-act--account, .vino-actions .vino-act--fav, .vino-actions .vino-act--compare {
display: none;
}
.vino-actions .vino-act--cart {
display: none;
}
}
.vino-actions .vino-lang__current {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
width: auto;
height: 40px;
padding: 0;
border: 0;
background: transparent;
color: color-mix(in srgb, var(--color-white) 70%, transparent);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 500;
letter-spacing: var(--tracking-ui);
cursor: pointer;
transition: color var(--duration-fast) var(--ease-base);
}
.vino-actions .vino-lang__option {
display: block;
width: auto;
height: auto;
padding: var(--space-2) var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-13);
font-weight: 500;
letter-spacing: var(--tracking-ui);
text-align: center;
text-decoration: none;
}
@media (hover:hover) {
.vino-actions .vino-lang__option:hover {
color: var(--color-text);
}
}
.vino-actions .vino-lang__option--active {
color: var(--color-accent);
}
.vino-act {
position: relative;
display: flex;
width: var(--icon-md);
height: var(--icon-md);
overflow: visible;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
padding: 0;
transition: color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-act:hover {
color: var(--color-accent);
}
}
@media (min-width:981px) {
.vino-act--menu {
display: none;
}
}
@media (pointer:coarse), (max-width:760px) {
.vino-act::before {
content: "";
position: absolute;
inset: -12px;
}
}
.vino-act__count {
position: absolute;
top: calc(var(--space-2) * -1);
right: calc(var(--space-2) * -1);
min-width: 16px;
height: 16px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-on-accent);
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 700;
line-height: 16px;
letter-spacing: 0;
text-align: center;
pointer-events: none;
}
.vino-demo-bar {
margin: 0;
padding: var(--space-2) var(--space-4);
border-bottom: 1px solid var(--color-line);
background: var(--color-bg-deep);
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--text-13);
line-height: var(--leading-ui);
text-align: center;
}
.vino-demo-bar__link {
color: var(--color-accent);
text-decoration: none;
}
@media (hover:hover) {
.vino-demo-bar__link:hover {
text-decoration: underline;
}
}
.vino-mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg);
border-top: 1px solid var(--color-line);
border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
box-shadow: 0 30px 60px color-mix(in srgb, var(--color-black) 45%, transparent);
animation: vino-mega-in var(--duration-base) var(--ease-base);
}
.vino-mega::after {
content: "";
position: absolute;
top: 100%;
right: 0;
left: 0;
height: 100vh;
background: color-mix(in srgb, var(--color-bg-deep) 62%, transparent);
pointer-events: none;
}
.vino-mega[hidden] {
display: none;
}
.vino-mega__inner {
display: grid;
grid-template-columns: 1fr 1fr 1fr 300px;
gap: var(--space-12);
max-width: var(--container);
margin: 0 auto;
padding: var(--space-10) var(--space-12) var(--space-8);
}
.vino-mega__title {
margin: 0 0 var(--space-5);
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.vino-mega__list {
display: grid;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
.vino-mega__link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-1) 0;
color: color-mix(in srgb, var(--color-white) 80%, transparent);
font-family: var(--font-serif);
font-size: var(--text-19);
line-height: var(--leading-title);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-base);
}
.vino-mega__count {
color: var(--color-text-faint);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-style: normal;
letter-spacing: var(--tracking-xs);
transition: color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-mega__link:hover, .vino-mega__link:hover .vino-mega__count {
color: var(--color-accent);
}
}
.vino-mega__more {
display: inline-block;
margin-top: var(--space-4);
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-mega__more:hover {
color: var(--color-accent-hover);
}
}
.vino-mega__card {
position: relative;
display: block;
min-height: 320px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
border-radius: var(--radius-sm);
text-decoration: none;
}
.vino-mega__card-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 0;
transition: transform var(--duration-soft) var(--ease-base);
}
@media (hover:hover) {
.vino-mega__card:hover .vino-mega__card-img {
transform: scale(1.04);
}
}
.vino-mega__card-body {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: grid;
gap: var(--space-2);
padding: var(--space-6);
background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 92%, transparent), transparent);
}
.vino-mega__card-kicker {
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.vino-mega__card-title {
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--fs-h4);
line-height: var(--leading-title);
}
@media (max-width:1279px) {
.vino-mega__inner {
grid-template-columns: 1fr 1fr 1fr 200px;
gap: var(--space-8);
padding-right: var(--space-8);
padding-left: var(--space-8);
}
}
@media (max-width:980px) {
.vino-mega {
display: none;
}
}
.vino-mega__card-link {
color: color-mix(in srgb, var(--color-white) 80%, transparent);
font-family: var(--font-sans);
font-size: var(--text-13);
justify-self: start;
}
@media (pointer:coarse) {
.vino-lang__current::after {
content: "";
position: absolute;
inset: -2px -4px;
}
}
.vino-lang {
position: relative;
}
.vino-lang[data-open="true"] .vino-lang__current {
color: var(--color-text);
}
.vino-lang__label {
display: inline-grid;
}
.vino-lang__text {
grid-area: 1 / 1;
}
.vino-lang__text--ghost {
visibility: hidden;
}
.vino-lang__chev {
width: 10px;
height: 6px;
transition: transform var(--duration-fast) var(--ease-base);
}
.vino-lang[data-open="true"] .vino-lang__chev {
transform: rotate(180deg);
}
.vino-lang__menu {
position: absolute;
top: 100%;
left: 50%;
z-index: var(--z-lang);
display: flex;
flex-direction: column;
min-width: 64px;
padding: var(--space-1);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-bg);
opacity: 0;
visibility: hidden;
transform: translateX(-50%);
transition: opacity var(--duration-fast) var(--ease-base), visibility var(--duration-fast) var(--ease-base);
}
.vino-lang[data-open="true"] .vino-lang__menu {
opacity: 1;
visibility: visible;
}
@media (hover:hover) {
.vino-actions .vino-lang__current:hover {
color: var(--color-text);
}
}
.vino-skip {
position: fixed;
top: -80px;
left: var(--space-4);
z-index: var(--z-skip);
padding: var(--space-3) var(--space-4);
background: var(--color-accent);
color: var(--color-bg);
font-size: var(--text-13);
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.vino-skip:focus {
top: var(--space-4);
}
@media (max-width:760px) {
.vino-kicker {
display: none;
}
}
.vino-kicker {
margin: 0 0 var(--space-3);
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 600;
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.vino-badge {
position: absolute;
top: -7px;
right: -8px;
min-width: 15px;
height: 15px;
padding: 0 var(--space-1);
border-radius: var(--radius-full);
background: var(--color-accent);
color: var(--color-on-accent);
font-family: var(--font-sans);
font-size: var(--fs-caption);
font-weight: 700;
letter-spacing: var(--tracking-xs);
line-height: 15px;
text-align: center;
box-shadow: 0 0 0 2px var(--color-brown-950);
pointer-events: none;
}
.vino-busy {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
background: color-mix(in srgb, var(--color-bg) 85%, transparent);
}
.vino-busy[hidden] {
display: none;
}
.vino-busy__spinner {
width: 40px;
height: 40px;
border: 3px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
border-top-color: var(--color-accent);
border-radius: 50%;
animation: vinoBtnSpin .8s linear infinite;
}
.vino-busy__text {
margin: 0;
color: var(--color-text);
font-size: var(--text-15);
letter-spacing: var(--tracking-ui);
}
@keyframes vinoBtnSpin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
.vino-btn--loading::after,
.vino-busy__spinner {
animation-duration: 2s;
}
}
.vino-modal__form .vino-btn {
justify-content: center;
width: 100%;
height: 48px;
margin-top: var(--space-3);
border-radius: var(--radius-sm);
box-shadow: none;
}
.vino-modal__form .vino-inp {
display: block;
height: 48px;
margin: 0 0 var(--space-3);
border-radius: var(--radius-sm);
}
.vino-modal__form .vino-txt {
height: auto;
}
.vino-modal__form .vino-consent {
margin: var(--space-4) 0 0;
}
.vino-modal__form .vino-consent--sm .vino-consent__text {
font-size: var(--text-13);
}
.vino-modal {
width: 100%;
height: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: var(--space-6);
border: 0;
background: transparent;
color: inherit;
overflow: hidden;
align-items: center;
justify-content: center;
}
.vino-modal[open] {
display: flex;
}
.vino-modal::backdrop {
background: color-mix(in srgb, var(--color-black) 72%, transparent);
}
.vino-modal__dialog {
position: relative;
width: 100%;
max-width: 480px;
max-height: calc(100vh - var(--space-12));
overflow: auto;
padding: var(--space-10);
border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
border-radius: var(--radius-sm);
background: var(--color-bg);
}
.vino-modal__close {
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: var(--color-text-muted);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-base);
}
@media (pointer:coarse) {
.vino-modal__close {
width: var(--size-tap);
height: var(--size-tap);
}
}
.vino-modal__close-icon {
width: 20px;
height: 20px;
}
.vino-modal__kicker {
margin: 0 0 var(--space-2);
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-13);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.vino-modal__title {
margin: 0;
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: 500;
line-height: var(--leading-title);
}
.vino-modal__lead {
margin: var(--space-3) 0 var(--space-6);
color: var(--color-text-muted);
font-size: var(--text-15);
line-height: var(--leading-text);
}
.vino-modal__err {
min-height: calc(2em * var(--leading-ui));
margin: var(--space-3) 0 0;
color: var(--color-danger-soft);
font-size: var(--text-13);
line-height: var(--leading-ui);
}
.vino-modal__err[hidden] {
display: block;
visibility: hidden;
}
@media (max-width:560px) {
.vino-modal {
align-items: stretch;
padding: 0;
}
.vino-modal__dialog {
max-width: none;
max-height: none;
height: 100%;
padding: var(--space-12) var(--space-6) var(--space-8);
border: 0;
border-radius: 0;
}
}
.vino-modal__done:focus {
outline: none;
}
.vino-modal__contact {
color: var(--color-text);
overflow-wrap: anywhere;
}
.vino-showcase-banner--catalog .vino-btn--outline {
background: color-mix(in srgb, var(--color-bg) 60%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
@media (max-width:560px) {
.vino-showcase-banner__actions .vino-btn {
justify-content: center;
}
}
@media (hover:hover) {
.vino-showcase-banner--catalog .vino-btn--outline:hover {
border-color: color-mix(in srgb, var(--color-accent), var(--color-white) 75%);
background: color-mix(in srgb, var(--color-bg) 60%, transparent);
color: color-mix(in srgb, var(--color-accent), var(--color-text) 75%);
}
}
.vino-showcase-banner {
margin-top: var(--space-head);
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: var(--space-6);
align-items: end;
padding: clamp(var(--space-6),4vw,var(--space-10));
border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
background: radial-gradient(720px 260px at 88% 14%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 62%), linear-gradient(135deg, rgba(26,16,14,.96), rgba(14,9,8,.98));
box-shadow: 0 22px 70px color-mix(in srgb, var(--color-black) 24%, transparent);
}
.vino-showcase-banner__eyebrow {
display: block;
margin-bottom: var(--space-3);
color: var(--color-accent);
font-size: var(--text-13);
font-weight: 600;
letter-spacing: var(--tracking-sm);
text-transform: uppercase;
}
@media (max-width:760px) {
.vino-showcase-banner__eyebrow {
display: none;
}
}
.vino-showcase-banner__title {
margin: 0;
max-width: 760px;
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: 400;
line-height: var(--leading-tight);
text-wrap: balance;
}
.vino-showcase-banner__text {
max-width: 720px;
margin: var(--space-4) 0 0;
text-wrap: pretty;
color: var(--color-text-muted);
line-height: var(--leading-text);
}
.vino-showcase-banner__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
justify-content: flex-end;
}
@media (max-width:760px) {
.vino-showcase-banner {
padding: var(--space-6);
}
}
.vino-showcase-banner--catalog {
position: relative;
isolation: isolate;
overflow: hidden;
}
.vino-showcase-banner__media {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
width: 62%;
pointer-events: none;
}
.vino-showcase-banner__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .45;
filter: brightness(.6) saturate(.72);
-webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 70%);
mask-image: linear-gradient(90deg, transparent 15%, #000 70%);
}
@media (max-width:980px) {
.vino-showcase-banner {
grid-template-columns: minmax(0,1fr);
align-items: start;
}
.vino-showcase-banner__actions {
justify-content: flex-start;
}
.vino-showcase-banner__media {
width: 100%;
}
.vino-showcase-banner__img {
opacity: .25;
}
}
@media (max-width:560px) {
.vino-showcase-banner__actions {
display: grid;
grid-template-columns: minmax(0,1fr);
}
}
@media (hover:hover) {
.vino-btn:hover .vino-icon, .vino-section__link:hover .vino-section__link-icon {
transform: translateX(4px);
}
}
.vino-brands__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--color-line);
border-left: 1px solid var(--color-line);
}
@media (min-width:761px) {
.vino-brands__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.vino-brands__more {
display: flex;
justify-content: center;
width: 100%;
margin-top: var(--space-6);
}
.vino-brands__more[hidden] {
display: none;
}
@media (hover:hover) {
.vino-brands__item:hover {
background: var(--color-bg-soft);
transform: translateY(-2px);
}
.vino-brands__item:hover .vino-brands__name {
color: var(--color-text);
}
}
.vino-brands__item {
--vino-brands-item-height: 140px;
min-height: var(--vino-brands-item-height);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-right: 1px solid var(--color-line);
border-bottom: 1px solid var(--color-line);
text-align: center;
transition: background var(--duration-fast) var(--ease-base), transform var(--duration-base) var(--ease-base);
padding: var(--space-10) var(--space-6);
gap: var(--space-2);
}
.vino-brands__logo {
--vino-brands-logo-height: 88px;
display: block;
width: 100%;
height: var(--vino-brands-logo-height);
margin-bottom: var(--space-2);
object-fit: contain;
}
.vino-brands__item--logo .vino-brands__name {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
}
.vino-brands__name {
color: var(--color-accent);
text-transform: uppercase;
transition: color var(--duration-fast) var(--ease-base);
font-family: var(--font-serif);
font-size: clamp(1rem, 1.4vw, 1.25rem);
letter-spacing: var(--tracking-ui);
margin-bottom: var(--space-3);
font-weight: 500;
}
.vino-brands__meta {
color: var(--color-text-faint);
font-family: var(--font-sans);
font-size: var(--text-13);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.vino-brands {
background: var(--color-bg);
}
.vino-brands__page {
display: contents;
}
@media (max-width:760px) {
.vino-brands__grid--slider {
display: grid;
grid-template-columns: none;
grid-template-rows: auto auto;
grid-auto-columns: 100%;
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
border: 0;
}
.vino-brands__grid--slider::-webkit-scrollbar {
display: none;
}
.vino-brands__page {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--color-line);
border-left: 1px solid var(--color-line);
scroll-snap-align: start;
scroll-snap-stop: always;
}
.vino-brands__grid--slider .vino-brands__item {
height: auto;
min-height: 96px;
padding: var(--space-4) var(--space-3);
}
.vino-brands__grid--slider .vino-brands__name {
margin-bottom: var(--space-1);
letter-spacing: var(--tracking-sm);
}
.vino-brands__grid--slider .vino-brands__meta {
color: color-mix(in srgb, var(--color-white) 70%, transparent);
font-size: var(--text-13);
letter-spacing: 0;
text-transform: none;
}
.vino-brands__dots {
margin-top: var(--space-3);
}
}
.vino-sections {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
.vino-sections__item {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.vino-sections__media {
display: block;
aspect-ratio: 16 / 9;
background: var(--color-bg-soft);
}
.vino-sections__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--duration-soft) var(--ease-base);
}
.vino-sections__body {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-12) var(--space-6) var(--space-5);
background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 92%, transparent), transparent);
}
.vino-sections__name {
color: var(--color-text);
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 500;
line-height: var(--leading-tight);
transition: color var(--duration-fast) var(--ease-base);
}
.vino-sections__meta {
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-13);
letter-spacing: .08em;
text-transform: uppercase;
}
@media (min-width:561px) {
.vino-sections {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.vino-sections__name {
font-size: var(--fs-h3);
}
}
@media (min-width:561px) and (max-width:760px) {
.vino-sections__item:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
}
@media (min-width:761px) {
.vino-sections {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.vino-sections__item {
grid-column: span 2;
}
.vino-sections__item:nth-child(4):nth-last-child(2), .vino-sections__item:nth-child(5):nth-last-child(1) {
grid-column: span 3;
}
}
@media (hover:hover) {
.vino-sections__item:hover .vino-sections__img {
transform: scale(1.04);
}
.vino-sections__item:hover .vino-sections__name {
color: var(--color-accent);
}
}
.vino-product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-grid-base);
}
@media (max-width:980px) and (min-width:761px) {
.vino-product-grid--full {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width:760px) {
.vino-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width:560px) {
.vino-product-grid {
grid-template-columns: 1fr;
}
.vino-product-grid--full {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.vino-card__img {
transition: transform var(--duration-soft) var(--ease-base);
}
@media (hover:hover) {
.vino-card:hover .vino-card__img {
transform: scale(1.05);
}
.vino-card:hover .vino-card__title {
color: var(--color-accent);
}
}
.vino-card__image {
--vino-card-image-height: 260px;
--vino-card-image-ratio: 25 / 22;
height: var(--vino-card-image-height);
display: block;
overflow: hidden;
background: var(--color-surface);
margin-bottom: var(--space-5);
position: relative;
}
@media (max-width:560px) {
.vino-card__image {
height: auto;
aspect-ratio: var(--vino-card-image-ratio);
}
}
.vino-card__title {
color: var(--color-text);
transition: color var(--duration-fast) var(--ease-base);
font-family: var(--font-serif);
font-size: var(--fs-h4);
font-weight: 500;
line-height: var(--leading-title);
margin: 0 0 var(--space-1);
margin-bottom: 10px;
}
.vino-card__place {
font-family: var(--font-sans);
font-size: var(--text-13);
font-style: normal;
display: block;
margin: 0 0 10px;
color: var(--color-text-muted);
}
.vino-card__cart {
display: inline-flex;
align-items: center;
border: 1px solid var(--color-accent);
color: var(--color-accent);
font-family: var(--font-sans);
font-weight: 600;
text-transform: uppercase;
background: transparent;
cursor: pointer;
white-space: nowrap;
gap: 0;
width: 40px;
min-width: 40px;
height: 40px;
padding: 0;
justify-content: center;
font-size: 0;
letter-spacing: 0;
border-radius: var(--radius-sm);
transition: background var(--duration-fast) var(--ease-base), color var(--duration-fast) var(--ease-base), border-color var(--duration-fast) var(--ease-base);
margin-left: auto;
flex: none;
}
.vino-card__cart::before {
content: "";
flex: 0 0 auto;
background-color: currentColor;
width: 19px;
height: 19px;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
@media (hover:hover) {
.vino-card__cart:hover {
background: var(--color-accent);
color: var(--color-bg);
border-color: var(--color-accent);
}
}
@media (pointer:coarse) {
.vino-card__cart {
width: 44px;
min-width: 44px;
height: 44px;
}
}
.vino-card__image--shot .vino-card__img {
object-fit: cover;
}
.vino-card__price {
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--fs-h4);
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
color: var(--color-accent);
}
.vino-card__old {
display: block;
margin-bottom: var(--space-1);
color: var(--color-text-faint);
font-size: var(--text-13);
font-weight: 400;
}
.vino-card__old s {
text-decoration-thickness: 1px;
}
.vino-card__percent {
margin-left: var(--space-2);
color: var(--color-accent);
font-weight: 600;
}
.vino-card__qty {
display: none;
align-items: center;
margin-left: auto;
height: 40px;
border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
border-radius: 0;
overflow: hidden;
}
.vino-card__qty--active {
display: inline-flex;
}
.vino-card__qty--active + .vino-card__cart {
display: none;
}
.vino-card__step {
width: 38px;
min-width: 38px;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--color-accent);
font-family: var(--font-sans);
font-size: var(--text-19);
line-height: 1;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--duration-fast) var(--ease-base), color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-card__step:hover {
color: var(--color-text);
}
}
.vino-card__count {
display: flex;
align-items: center;
justify-content: center;
align-self: stretch;
min-width: 30px;
text-align: center;
font-family: var(--font-sans);
font-size: var(--text-15);
font-weight: 600;
color: var(--color-text);
font-variant-numeric: tabular-nums;
}
.vino-card__tools {
position: absolute;
top: 14px;
right: 14px;
z-index: 4;
display: inline-flex;
align-items: center;
gap: var(--space-3);
}
.vino-card .vino-card__tool {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
min-width: 0;
padding: 0;
margin: -5px;
border: 0;
border-radius: 50%;
background: transparent;
color: color-mix(in srgb, var(--color-white) 78%, transparent);
letter-spacing: 0;
text-transform: none;
cursor: pointer;
transition: color var(--duration-fast) var(--ease-base), background var(--duration-fast) var(--ease-base), transform var(--duration-fast) var(--ease-base);
}
.vino-card__tool-icon {
width: 21px;
height: 21px;
flex-shrink: 0;
display: block;
transition: fill var(--duration-fast) var(--ease-base), stroke var(--duration-fast) var(--ease-base);
}
.vino-card:where(:has(.vino-card__image--shot)) .vino-card__tool {
color: rgba(38,22,18,.82);
}
.vino-card:has(.vino-photo-stub) .vino-card__tool {
color: color-mix(in srgb, var(--color-white) 78%, transparent);
}
@media (hover:hover) {
.vino-card .vino-card__tool:not(.vino-card__tool--active):hover {
color: var(--color-danger);
background: transparent;
}
}
.vino-card .vino-card__tool--active {
color: var(--color-danger);
}
.vino-card__tool--active .vino-card__tool-icon {
fill: var(--color-danger);
}
@media (pointer:coarse) {
.vino-card__tool::after {
content: "";
position: absolute;
inset: -5px;
}
.vino-card__qty {
height: var(--size-tap);
}
.vino-card__step {
width: var(--size-tap);
min-width: var(--size-tap);
}
}
.vino-card {
color: var(--color-text);
cursor: pointer;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
background: var(--color-bg-soft);
transition: border-color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-card:hover {
border-color: color-mix(in srgb, var(--color-accent) 35%, transparent);
}
}
.vino-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: var(--space-card);
}
.vino-card__rating {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin: 0 0 var(--space-1);
color: var(--color-accent);
font-size: var(--text-13);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.vino-card__rating-star {
width: 12px;
height: 12px;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--icon-star) center / contain no-repeat;
mask: var(--icon-star) center / contain no-repeat;
}
.vino-card__rating-count {
color: var(--color-text-faint);
font-weight: 400;
}
.vino-card--line {
display: grid;
grid-template-columns: 200px minmax(0, 1fr) auto;
align-items: stretch;
}
.vino-card--line .vino-card__image {
height: 240px;
margin-bottom: 0;
}
.vino-card--line .vino-card__buy {
flex-direction: column;
align-items: flex-end;
justify-content: center;
gap: var(--space-3);
min-width: 200px;
margin-top: 0;
padding: var(--space-card);
border-top: 0;
}
.vino-card--line .vino-card__tool {
color: var(--color-text-faint);
}
.vino-card__grapes {
display: block;
color: var(--color-text-faint);
font-size: var(--text-13);
}
.vino-card__unavailable {
margin-left: auto;
color: var(--color-text-faint);
font-size: var(--text-13);
text-transform: uppercase;
letter-spacing: var(--tracking-ui);
}
.vino-card__buy {
justify-content: space-between;
gap: var(--space-3);
position: relative;
display: flex;
align-items: center;
margin-top: auto;
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
}
.vino-card__spec {
display: block;
margin-top: 0;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-sm);
text-transform: uppercase;
color: color-mix(in srgb, var(--color-white) 42%, transparent);
margin-bottom: var(--space-4);
}
.vino-photo-stub {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: var(--space-4);
text-align: center;
}
.vino-photo-stub__brand {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.2vw, 2rem);
letter-spacing: .08em;
line-height: 1.15;
text-transform: uppercase;
color: var(--color-accent);
opacity: .6;
}
.vino-photo-stub--sm {
padding: 2px;
}
.vino-photo-stub--sm .vino-photo-stub__brand {
font-size: .625rem;
letter-spacing: 0;
overflow-wrap: anywhere;
}
.vino-photo-stub__text {
color: var(--color-text-faint);
font-size: var(--text-13);
letter-spacing: .08em;
text-transform: uppercase;
}
.vino-slider__track .vino-card {
flex: 0 0 calc((100% - var(--vino-slider-gap) * (var(--vino-slider-cols) - 1)) / var(--vino-slider-cols));
scroll-snap-align: start;
}
.vino-slider__nav {
display: inline-flex;
align-items: center;
gap: 10px;
}
.vino-slider__viewport {
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-ms-overflow-style: none;
scrollbar-width: none;
}
.vino-slider__track {
--vino-slider-gap: clamp(16px, 1.8vw, 24px);
--vino-slider-cols: 4;
display: flex;
gap: var(--vino-slider-gap);
padding: 2px 0 6px;
}
@media (min-width:761px) and (max-width:980px) {
.vino-slider__track {
--vino-slider-cols: 3;
}
}
@media (max-width:760px) {
.vino-slider__nav {
display: none;
}
}
.vino-slider__head-actions {
display: inline-flex;
align-items: center;
gap: var(--space-5-5);
}
@media (max-width:760px) {
.vino-slider__viewport {
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
scroll-padding-inline: var(--gutter);
}
.vino-slider__track {
gap: var(--space-3);
}
}
@media (max-width:760px) {
.vino-slider__track .vino-card {
flex-basis: calc((100vw - var(--gutter) - var(--space-3) * 2) / 2.3);
}
.vino-slider__track .vino-card__tools {
top: var(--space-2);
right: var(--space-2);
gap: var(--space-1);
}
.vino-slider__track .vino-card__tool-icon {
width: 18px;
height: 18px;
}
.vino-slider__track .vino-card__body {
padding: var(--space-3);
}
.vino-slider__track .vino-card__title {
display: -webkit-box;
overflow: hidden;
margin-bottom: var(--space-1);
font-size: var(--text-15);
line-height: 1.25;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.vino-slider__track .vino-card__place, .vino-slider__track .vino-card__spec {
overflow: hidden;
margin-bottom: var(--space-1);
font-size: var(--text-13);
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.vino-slider__track .vino-card__spec {
margin-bottom: var(--space-3);
font-weight: 400;
text-transform: none;
}
.vino-slider__track .vino-card__buy {
padding-top: var(--space-3);
}
.vino-slider__track .vino-card__price {
font-size: var(--text-17);
}
.vino-card__buy {
flex-wrap: wrap;
}
.vino-card__buy .vino-card__cart, .vino-card__buy .vino-card__qty {
flex: 1 0 100%;
height: var(--size-tap);
margin: 0;
}
.vino-card__buy .vino-card__cart {
gap: var(--space-1);
width: auto;
min-width: 0;
font-size: var(--fs-caption);
letter-spacing: var(--tracking-xs);
text-transform: uppercase;
}
.vino-card__buy .vino-card__cart::before {
width: 16px;
height: 16px;
}
.vino-card__buy .vino-card__qty {
justify-content: space-between;
}
.vino-card__buy .vino-card__unavailable {
display: flex;
flex: 1 0 100%;
align-items: center;
min-height: var(--size-tap);
margin-left: 0;
}
}
.vino-card--line .vino-card__body {
justify-content: center;
padding: var(--space-card) var(--space-6);
}
.vino-card--line .vino-card__place {
margin-bottom: var(--space-2);
font-size: var(--text-15);
}
.vino-card--line .vino-card__spec {
margin-bottom: var(--space-1);
}
.vino-card--line .vino-card__cart {
width: auto;
min-width: 0;
height: 44px;
margin-left: 0;
padding: 0 var(--space-5);
gap: var(--space-2);
font-size: var(--text-13);
letter-spacing: var(--tracking-ui);
}
@media (max-width:560px) {
.vino-card--line {
grid-template-columns: 96px minmax(0, 1fr);
}
.vino-card--line .vino-card__image {
grid-row: span 2;
height: 100%;
min-height: 160px;
}
.vino-card--line .vino-card__body {
padding: var(--space-3) var(--space-3) 0;
}
.vino-card--line .vino-card__buy {
align-items: stretch;
min-width: 0;
padding: var(--space-3);
border-left: 0;
}
}
.vino-card .vino-card__spec {
color: var(--color-text-faint);
font-size: var(--text-13);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.vino-story, .vino-sales {
color: var(--color-text);
}
@media (min-width:761px) {
.vino-story__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.vino-story__image {
--vino-story-image-height: 480px;
--vino-story-image-ratio: auto;
height: var(--vino-story-image-height);
aspect-ratio: var(--vino-story-image-ratio);
overflow: hidden;
}
.vino-story__img {
transform: scale(1.01);
transition: transform var(--duration-slow) var(--ease-base);
}
@media (hover:hover) {
.vino-story__image:hover .vino-story__img {
transform: scale(1.045);
}
}
.vino-story__text {
max-width: 50ch;
margin: 0 0 var(--space-8);
color: var(--color-text-muted);
font-size: var(--text-15);
line-height: var(--leading-long);
}
.vino-story__grid {
display: grid;
align-items: center;
gap: var(--space-10);
}
@media (min-width:981px) {
.vino-story__grid {
gap: var(--space-20);
}
}
.vino-story__title {
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-h2);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
margin: 0;
margin-bottom: var(--space-6);
}
.vino-story {
background: var(--color-bg-soft);
border-top: 1px solid var(--color-line);
}
.vino-sales {
border-top: 1px solid var(--color-line);
background: var(--color-bg);
}
@media (prefers-reduced-motion:no-preference) {
.vino-section, .vino-story, .vino-sales, .vino-footer, .vino-pdp, .vino-reviews, .vino-pdp-related, .vino-auth:not(.vino-auth--embed) {
animation: vinoSectionIn var(--duration-soft) var(--ease-out) both;
}
.vino-brands__item, .vino-section .vino-card, .vino-news__card {
animation: vinoItemIn var(--duration-mid) var(--ease-out) both;
}
.vino-brands__item:nth-child(2), .vino-section .vino-card:nth-child(2), .vino-news__card:nth-child(2) {
animation-delay: .06s;
}
.vino-brands__item:nth-child(3), .vino-section .vino-card:nth-child(3), .vino-news__card:nth-child(3) {
animation-delay: .12s;
}
.vino-brands__item:nth-child(4), .vino-section .vino-card:nth-child(4), .vino-news__card:nth-child(4) {
animation-delay: .18s;
}
}
@keyframes vinoSectionIn {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes vinoItemIn {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion:reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .001ms !important;
}
}
.vino-section, .vino-story, .vino-sales {
padding: var(--space-section) var(--gutter);
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
box-shadow: none;
}
.vino-catalog-layout {
display: grid;
gap: var(--space-8);
}
@media (min-width:981px) {
.vino-catalog-layout {
grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
align-items: start;
}
}
.vino-hero {
position: relative;
display: grid;
grid-template-columns: repeat(4,1fr);
height: 82vh;
min-height: 520px;
max-height: 800px;
overflow: hidden;
background: #000;
border-bottom: 1px solid var(--color-line);
}
.vino-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
z-index: 0;
filter: brightness(1.08) contrast(1.04) saturate(1.08);
}
.vino-hero__panel {
position: relative;
z-index: 1;
cursor: pointer;
overflow: hidden;
display: block;
text-decoration: none;
color: var(--color-text);
}
.vino-hero__img {
position: absolute;
inset: 0;
background-image: var(--img);
background-size: cover;
background-position: center;
opacity: 0;
filter: grayscale(.25) brightness(.5) saturate(.85);
transition: opacity var(--duration-mid) var(--ease-base), filter var(--duration-mid) var(--ease-base);
}
@media (hover:hover) {
.vino-hero__panel:hover .vino-hero__img {
opacity: 1;
filter: grayscale(0) brightness(.92) saturate(1.05);
}
}
.vino-hero__veil {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg-deep) 72%, transparent) 0%, color-mix(in srgb, var(--color-bg-deep) 12%, transparent) 32%, transparent 58%);
transition: background var(--duration-mid) var(--ease-base);
}
@media (hover:hover) {
.vino-hero__panel:hover .vino-hero__veil {
background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg-deep) 72%, transparent) 0%, color-mix(in srgb, var(--color-bg-deep) 10%, transparent) 40%, transparent 64%);
}
.vino-hero:hover .vino-hero__panel:not(:hover) .vino-hero__veil {
background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg-deep) 86%, transparent) 0%, color-mix(in srgb, var(--color-bg-deep) 50%, transparent) 45%, color-mix(in srgb, var(--color-bg-deep) 32%, transparent) 100%);
}
.vino-hero:hover .vino-hero__panel:not(:hover) .vino-hero__img {
opacity: 0;
filter: grayscale(.4) brightness(.4) saturate(.7);
}
}
.vino-hero__panel + .vino-hero__panel::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
z-index: 3;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent);
}
.vino-hero__content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 44px 34px;
}
.vino-hero__kicker {
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
color: var(--color-accent,var(--color-accent));
margin: 0 0 10px;
}
.vino-hero__title {
margin: 0;
font-family: var(--font-serif);
font-weight: 500;
line-height: var(--leading-tight);
font-size: var(--fs-h3);
color: var(--color-text);
}
.vino-hero__rule {
height: 1px;
width: 46px;
background: var(--color-accent,var(--color-accent));
margin: var(--space-4) 0 0;
transform: scaleX(.35);
transform-origin: left;
opacity: .55;
transition: transform .55s cubic-bezier(.2,.72,.2,1), opacity var(--duration-mid) var(--ease-base);
}
.vino-hero__desc {
margin: var(--space-3-5) 0 0;
color: color-mix(in srgb, var(--color-white) 84%, transparent);
font-size: var(--text-15);
line-height: var(--leading-text);
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .55s cubic-bezier(.2,.72,.2,1), opacity var(--duration-mid) var(--ease-base), margin var(--duration-mid) var(--ease-base);
}
.vino-hero__cta {
display: inline-flex;
align-items: center;
gap: var(--space-2);
align-self: flex-start;
margin-top: 0;
color: var(--color-accent,var(--color-accent));
font-family: var(--font-sans);
font-weight: 600;
font-size: var(--text-xs);
letter-spacing: var(--tracking-sm);
text-transform: uppercase;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height var(--duration-mid) var(--ease-base), opacity var(--duration-mid) var(--ease-base), margin var(--duration-mid) var(--ease-base);
}
@media (hover:hover) {
.vino-hero__panel:hover .vino-hero__rule {
transform: scaleX(1);
opacity: 1;
}
.vino-hero__panel:hover .vino-hero__desc {
max-height: 90px;
opacity: 1;
}
.vino-hero__panel:hover .vino-hero__cta {
max-height: 40px;
opacity: 1;
margin-top: 18px;
}
}
.vino-hero__grain {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
opacity: .06;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width:760px) {
.vino-hero__img {
opacity: 1;
}
.vino-hero__desc, .vino-hero__cta {
display: none;
}
}
.vino-hero__cta.vino-link {
transition: max-height var(--duration-mid) var(--ease-base), opacity var(--duration-mid) var(--ease-base), margin var(--duration-mid) var(--ease-base), background-size var(--duration-base) var(--ease-base);
}
@media (max-width:760px) {
.vino-hero__panel + .vino-hero__panel::before {
top: 0;
right: 0;
bottom: auto;
left: 0;
width: auto;
height: 1px;
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent);
}
}
@media (min-width:761px) and (max-width:980px) {
.vino-hero {
grid-template-columns: 1fr 1fr;
height: auto;
min-height: 0;
}
.vino-hero__panel {
height: auto;
}
.vino-hero__content {
position: relative;
inset: auto;
min-height: 320px;
padding: var(--space-10) var(--space-8);
}
.vino-hero__img {
opacity: 1;
}
.vino-hero__desc, .vino-hero__cta {
max-height: none;
opacity: 1;
overflow: visible;
}
.vino-hero__cta {
margin-top: var(--space-4);
}
.vino-hero__panel:nth-child(4)::before {
display: none;
}
}
@media (max-width:760px) {
.vino-hero {
height: auto;
grid-template-columns: 1fr;
min-height: 0;
display: flex;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.vino-hero::-webkit-scrollbar {
display: none;
}
.vino-hero__panel {
height: auto;
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.vino-hero__content {
position: relative;
inset: auto;
padding: var(--space-8) var(--space-6);
justify-content: flex-end;
min-height: 320px;
padding-bottom: var(--space-12);
}
.vino-hero__panel + .vino-hero__panel::before, .vino-hero__grain {
display: none;
}
}
@media (max-width:980px) {
.vino-hero .vino-hero__video, .vino-hero__rule {
display: none;
}
@media (hover:hover) {
.vino-hero:hover .vino-hero__panel:not(:hover) .vino-hero__img {
opacity: 1;
filter: grayscale(.25) brightness(.5) saturate(.85);
}
.vino-hero:hover .vino-hero__panel:not(:hover) .vino-hero__veil {
background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg-deep) 72%, transparent) 0%, color-mix(in srgb, var(--color-bg-deep) 12%, transparent) 32%, transparent 58%);
}
}
}
.vino-age__icon {
width: 34px;
height: 34px;
margin: 0 auto var(--space-5-5);
color: var(--color-accent);
}
@keyframes vinoAgeFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes vinoAgeRise {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: none;
}
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-17);
line-height: var(--leading-ui);
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
font-synthesis-weight: none;
margin: 0;
}
a {
text-decoration: none;
color: inherit;
}
.vino-slider__viewport::-webkit-scrollbar {
display: none;
}
.vino-bestsellers {
background: var(--color-bg-soft);
}
.vino-arrow {
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-line);
border-radius: var(--radius-full);
background: transparent;
color: var(--color-text);
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-base), color var(--duration-fast) var(--ease-base), background var(--duration-fast) var(--ease-base), opacity var(--duration-fast) var(--ease-base);
}
.vino-arrow__icon {
width: 19px;
height: 19px;
display: block;
}
@media (hover:hover) {
.vino-arrow:hover {
border-color: var(--color-accent);
color: var(--color-accent);
}
}
.vino-arrow[hidden] {
display: none;
}
.vino-arrow[disabled] {
opacity: .32;
cursor: default;
pointer-events: none;
}
.vino-new-arrivals {
background: var(--color-bg);
}
.vino-progress {
display: none;
}
@media (max-width:760px) {
.vino-progress {
display: block;
position: relative;
height: 2px;
margin-top: var(--space-5);
overflow: hidden;
background: color-mix(in srgb, var(--color-white) 15%, transparent);
}
.vino-progress__bar {
display: block;
width: var(--vino-progress-width, 30%);
height: 100%;
background: var(--color-accent);
transform: translateX(var(--vino-progress-shift, 0%));
}
}
.vino-inp {
width: 100%;
background: var(--color-bg-soft,#0a0605);
border: 1px solid var(--color-line-field);
border-radius: var(--radius-sm);
color: var(--color-text);
padding: var(--space-3) var(--space-3-5);
margin: 0 0 var(--space-3);
font: inherit;
font-size: var(--text-15);
}
.vino-inp:focus {
outline: none;
border-color: var(--color-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.vino-inp::placeholder {
color: var(--color-text-faint);
}
.vino-inp:-webkit-autofill,
.vino-inp:-webkit-autofill:hover,
.vino-inp:-webkit-autofill:focus {
background-clip: padding-box;
-webkit-text-fill-color: var(--color-text);
caret-color: var(--color-text);
box-shadow: 0 0 0 1000px var(--color-bg-soft, #0a0605) inset;
transition: background-color 600000s 0s;
}
.vino-modal__form .vino-inp--invalid {
border-color: var(--color-danger-soft);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent);
}
.vino-txt {
min-height: 96px;
max-height: 240px;
resize: vertical;
}
.vino-hp {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
opacity: 0;
}
.vino-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin: var(--space-3-5) 0 var(--space-1);
cursor: pointer;
line-height: var(--leading-ui);
}
.vino-consent__checkbox {
flex: 0 0 auto;
margin-top: 2px;
width: 16px;
height: 16px;
border: 1px solid var(--color-accent);
border-radius: 3px;
background: transparent center / 14px 14px no-repeat;
cursor: pointer;
appearance: none;
}
.vino-consent__checkbox:checked {
background-color: var(--color-accent);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.75 8.25l2.75 2.75 5.75-6.25' fill='none' stroke='%230e0908' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.vino-consent__checkbox:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 2px;
}
.vino-consent__text {
color: var(--color-text-muted);
font-size: var(--text-15);
}
.vino-consent__link {
color: var(--color-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (hover:hover) {
.vino-consent__link:hover {
color: var(--color-accent-hover);
}
}
.vino-consent--sm .vino-consent__text {
font-size: var(--text-xs);
line-height: var(--leading-ui);
}
.vino-search {
position: fixed;
inset: 0;
z-index: var(--z-search);
}
.vino-search[hidden] {
display: none;
}
.vino-search__backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color-black) 62%, transparent);
opacity: 0;
transition: opacity var(--duration-base) var(--ease-base);
}
.vino-search--open .vino-search__backdrop {
opacity: 1;
}
.vino-search__bar {
position: relative;
background: var(--color-bg);
border-bottom: 1px solid var(--color-line);
box-shadow: 0 24px 60px color-mix(in srgb, var(--color-black) 50%, transparent);
transform: translateY(-100%);
transition: transform var(--duration-base) var(--ease-base);
}
.vino-search--open .vino-search__bar {
transform: none;
}
.vino-search__panel {
max-width: calc(var(--container) + var(--gutter) * 2);
margin: 0 auto;
display: flex;
align-items: center;
gap: 0;
padding: var(--space-5-5) var(--gutter);
}
.vino-search__close {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0 -11px 0 var(--space-6);
padding: 0;
border: 0;
background: none;
color: color-mix(in srgb, var(--color-white) 80%, transparent);
cursor: pointer;
transition: color var(--duration-fast) var(--ease-base);
}
.vino-search__close-icon {
width: 20px;
height: 20px;
}
@media (hover:hover) {
.vino-search__close:hover {
color: var(--color-accent);
}
}
.vino-query__field {
flex: 1;
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
background: var(--color-bg-soft);
border: 1px solid var(--color-line);
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
padding: var(--space-3) var(--space-5);
transition: border-color var(--duration-fast) var(--ease-base);
}
.vino-query__field:focus-within {
border-color: var(--color-accent);
}
.vino-query__icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
color: var(--color-accent);
}
.vino-query__input {
flex: 1;
min-width: 0;
background: none;
border: none;
outline: none;
color: var(--color-text);
font: inherit;
font-size: var(--text-19);
}
.vino-query__input:focus-visible {
outline: none;
}
.vino-query__input::placeholder {
color: var(--color-text-faint);
}
.vino-query__submit {
align-self: stretch;
padding-right: var(--space-8);
padding-left: var(--space-8);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
box-shadow: none;
}
@media (hover:hover) {
.vino-query__submit:hover {
transform: none;
border-color: var(--color-white);
background: var(--color-white);
box-shadow: none;
}
}
.vino-query__input::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin-left: var(--space-2);
background-color: color-mix(in srgb, var(--color-white) 60%, transparent);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
cursor: pointer;
transition: background-color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-query__input::-webkit-search-cancel-button:hover {
background-color: var(--color-accent);
}
}
.vino-suggest {
--vino-suggest-pic-width: 48px;
--vino-suggest-pic-height: 60px;
position: absolute;
top: 100%;
right: 0;
left: 0;
max-width: calc(var(--container) + var(--gutter) * 2);
margin: 0 auto;
padding: 0 var(--gutter);
}
.vino-suggest[hidden] {
display: none;
}
.vino-suggest__box {
border: 1px solid var(--color-line);
border-top: 0;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
background: var(--color-bg);
box-shadow: 0 24px 60px color-mix(in srgb, var(--color-black) 50%, transparent);
}
.vino-suggest__list {
overflow-y: auto;
max-height: calc(100vh - 190px);
max-height: calc(100dvh - 190px);
overscroll-behavior: contain;
}
.vino-suggest__item {
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-2) var(--space-4);
color: var(--color-text);
transition: background var(--duration-fast) var(--ease-base);
}
.vino-suggest__item--active, .vino-suggest__item:active, .vino-suggest__all:active {
background: var(--color-bg-soft);
}
@media (hover:hover) {
.vino-suggest__item:hover, .vino-suggest__all:hover {
background: var(--color-bg-soft);
}
}
.vino-suggest__pic {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: var(--vino-suggest-pic-width);
height: var(--vino-suggest-pic-height);
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--vino-shot);
}
.vino-suggest__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vino-suggest__kind {
color: var(--color-text-faint);
font-size: var(--fs-caption);
letter-spacing: var(--tracking-ui);
text-transform: uppercase;
}
.vino-suggest__text {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.vino-suggest__name {
display: -webkit-box;
overflow: hidden;
font-family: var(--font-serif);
font-size: var(--text-19);
line-height: var(--leading-title);
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.vino-suggest__mark {
background: none;
color: var(--color-accent);
font-weight: inherit;
}
.vino-suggest__meta {
color: var(--color-text-muted);
font-size: var(--text-13);
}
.vino-suggest__price {
flex: none;
color: var(--color-accent);
font-weight: 600;
}
.vino-suggest__all {
display: block;
padding: var(--space-4);
border-top: 1px solid var(--color-line);
color: var(--color-accent);
font-size: var(--text-13);
font-weight: 600;
letter-spacing: var(--tracking-sm);
text-align: center;
text-transform: uppercase;
}
@media (max-width:560px) {
.vino-suggest__item {
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
}
.vino-suggest__name {
font-size: var(--text-17);
}
}
@media (max-width:560px) {
.vino-search__panel {
padding-top: var(--space-4);
padding-bottom: var(--space-4);
}
.vino-query--compact .vino-query__field {
border-radius: var(--radius-sm);
}
.vino-query--compact .vino-query__submit {
display: none;
}
.vino-search__close {
margin-left: var(--space-2);
}
}
.vino-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.vino-showcase-banner__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(270deg, color-mix(in srgb, var(--color-bg) 55%, transparent), transparent 45%);
}
.vino-empty-state {
display: grid;
grid-template-columns: 88px minmax(0,1fr);
gap: var(--space-6);
align-items: center;
padding: clamp(26px,5vw,46px);
border: 1px solid color-mix(in srgb, var(--color-accent) 26%, transparent);
background: radial-gradient(420px 220px at 94% 0%,color-mix(in srgb, var(--color-accent) 16%, transparent),transparent 64%),var(--color-surface);
}
.vino-empty-state__svg {
width: 32px;
height: 32px;
}
.vino-empty-state--plain {
grid-template-columns: minmax(0, 1fr);
}
.vino-empty-state--inline {
margin-top: 18px;
}
.vino-empty-state__icon {
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 1px solid color-mix(in srgb, var(--color-accent) 50%, transparent);
color: var(--color-accent);
font-family: var(--font-serif);
font-size: 34px;
}
.vino-empty-state__actions {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
margin-top: var(--space-5);
}
@media (max-width:760px) {
.vino-empty-state {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
padding: var(--space-6);
}
.vino-empty-state__icon {
width: 58px;
height: 58px;
font-size: 28px;
}
}
.vino-empty-page {
padding: var(--space-head) var(--gutter) var(--space-section);
}
.vino-showcase {
padding: var(--space-head) var(--gutter) var(--space-section);
}
.vino-showcase__list {
margin: 0;
padding: 0;
border-top: 1px solid var(--color-line);
list-style: none;
}
.vino-showcase__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding: var(--space-5) 0;
border-bottom: 1px solid var(--color-line);
}
.vino-showcase__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
.vino-showcase__name {
font-family: var(--font-serif);
font-size: var(--fs-h4);
}
.vino-showcase__checks {
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-5);
}
.vino-showcase__check {
position: relative;
color: var(--color-accent);
font-size: var(--text-15);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-base);
}
@media (pointer:coarse) {
.vino-showcase__checks {
row-gap: var(--space-6);
}
.vino-showcase__check::before {
content: "";
position: absolute;
inset: -12px -8px;
}
}
@media (hover:hover) {
.vino-showcase__check:hover {
color: var(--color-text);
}
}
.vino-showcase__open {
flex: none;
}
.vino-showcase-shots {
padding: var(--space-section) var(--gutter);
background: linear-gradient(var(--color-bg), var(--color-bg-soft) var(--space-section));
}
.vino-showcase-shots__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-12) var(--space-8);
margin: 0;
padding: 0;
list-style: none;
}
.vino-showcase-shots__title {
margin: 0 0 var(--space-4);
font-family: var(--font-serif);
font-size: var(--fs-h4);
font-weight: 400;
}
.vino-showcase-shots__link {
display: block;
border: 1px solid var(--color-line);
transition: border-color var(--duration-fast) var(--ease-base);
}
.vino-showcase-shots__img {
display: block;
width: 100%;
height: auto;
}
@media (hover:hover) {
.vino-showcase-shots__link:hover {
border-color: var(--color-accent);
}
}
@media (max-width:760px) {
.vino-showcase-shots__list {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
}
.vino-404 {
padding: var(--space-12) var(--gutter) var(--space-section);
text-align: center;
}
.vino-404__code {
margin: 0;
color: var(--color-accent);
font-family: var(--font-serif);
font-size: clamp(6rem, 16vw, 12rem);
line-height: .9;
}
.vino-404__title {
margin: var(--space-6) 0 0;
font-family: var(--font-serif);
font-size: var(--fs-h2);
font-weight: 400;
line-height: var(--leading-tight);
}
.vino-404__text {
max-width: var(--measure);
margin: var(--space-4) auto var(--space-6);
color: var(--color-text-muted);
line-height: var(--leading-long);
}
.vino-404__heading {
margin: 0 0 var(--space-head);
}
.vino-empty-state h1, .vino-empty-state h2 {
margin: 0;
color: var(--color-text);
font-family: var(--font-serif);
font-size: var(--fs-h3);
}
.vino-empty-state p {
max-width: 620px;
margin: 10px 0 0;
color: var(--color-text-muted);
line-height: var(--leading-text);
}
button.vino-mega__card {
width: 100%;
padding: 0;
background: none;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
@keyframes vino-mega-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
}
.vino-link {
padding-bottom: var(--space-1);
background: linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 1px no-repeat, linear-gradient(color-mix(in srgb, var(--color-accent) 28%, transparent), color-mix(in srgb, var(--color-accent) 28%, transparent)) left bottom / 100% 1px no-repeat;
text-decoration: none;
transition: background-size var(--duration-base) var(--ease-base), color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-link:hover, a:hover .vino-link {
background-size: 100% 1px, 100% 1px;
}
}
@media (pointer:coarse) {
.vino-lang__current, .vino-footer__tg, .vino-card__tool {
position: relative;
}
}
.vino-page-lead {
max-width: 680px;
margin: var(--space-5) 0 0;
color: var(--color-text-muted);
line-height: var(--leading-text);
}
.vino-card__tool--compare.vino-card__tool--active .vino-card__tool-icon, .vino-pdp__iconbtn--compare.vino-pdp__iconbtn--active .vino-pdp__icon {
fill: none;
}
.vino-toast {
position: fixed;
left: 50%;
bottom: var(--space-8);
z-index: var(--z-toast);
padding: var(--space-4) var(--space-6);
border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
border-radius: var(--radius-sm);
background: var(--color-bg-soft);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-15);
box-shadow: 0 18px 50px color-mix(in srgb, var(--color-black) 50%, transparent);
opacity: 0;
pointer-events: none;
transform: translate(-50%, var(--space-5));
transition: opacity var(--duration-base) var(--ease-base), transform var(--duration-base) var(--ease-base);
}
.vino-toast--on {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.vino-toast__link {
margin-left: var(--space-3);
color: var(--color-accent);
}
.vino-reveal .vino-reveal__item {
animation: none;
}
.vino-reveal .vino-reveal__item:not(.vino-reveal__item--visible) > *, .vino-reveal .vino-reveal__item--deep:not(.vino-reveal__item--visible) .vino-brands__item, .vino-reveal .vino-reveal__item--deep:not(.vino-reveal__item--visible) .vino-card, .vino-reveal .vino-reveal__item--deep:not(.vino-reveal__item--visible) .vino-news__card {
animation: none;
opacity: 0;
}
.vino-reveal .vino-reveal__item--visible > * {
animation: vinoSectionIn var(--duration-soft) var(--ease-out) both;
}
@media (hover:hover) {
.vino-modal__close:hover {
color: var(--color-accent);
}
}
html[data-auth="1"] .vino-review-guest,
html[data-auth="0"] .vino-review-user {
display: none;
}
html:has(.vino-modal[open]) {
overflow: hidden;
}
.vino-breadcrumbs {
color: color-mix(in srgb, var(--color-white) 44%, transparent);
font-size: var(--text-13);
letter-spacing: var(--tracking-sm);
text-transform: uppercase;
}
.vino-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
gap: var(--space-3);
}
.vino-breadcrumbs__item {
display: flex;
align-items: center;
gap: var(--space-3);
}
.vino-breadcrumbs__link {
margin-right: calc(var(--tracking-sm) * -1);
color: color-mix(in srgb, var(--color-white) 54%, transparent);
transition: color var(--duration-fast) var(--ease-base);
}
@media (hover:hover) {
.vino-breadcrumbs__link:hover {
color: var(--color-accent);
}
}
.vino-breadcrumbs__current {
margin-right: calc(var(--tracking-sm) * -1);
color: var(--color-accent);
}
.vino-breadcrumbs__sep {
flex: none;
width: 5px;
height: 5px;
border-top: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent);
border-right: 1px solid color-mix(in srgb, var(--color-white) 40%, transparent);
transform: translateX(-2px) rotate(45deg);
}
@media (max-width:980px) {
:root {
--gutter: var(--space-8);
--space-section: var(--space-16);
--space-head: var(--space-8);
--space-grid-wide: var(--space-8);
}
}
a:active:not(.vino-card__image, .vino-hero__panel, .vino-cart__pic, .vino-news__link, .vino-offers__link, .vino-search-page__link, .vino-suggest__item, .vino-suggest__all, .vino-showcase-shots__link, .vino-brands__item), button:active, [role="button"]:active {
filter: brightness(.85);
}
.vino-dots {
display: none;
}
@media (max-width:760px) {
.vino-dots {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-1);
}
.vino-dots--overlay {
position: relative;
z-index: 5;
height: var(--space-12);
margin-top: calc(var(--space-12) * -1);
padding-bottom: var(--space-2);
pointer-events: none;
}
.vino-dots--overlay .vino-dots__dot {
pointer-events: auto;
}
.vino-dots__dot {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
margin: -10px;
}
.vino-dots__dot::before {
content: "";
width: 8px;
height: 8px;
border-radius: 4px;
background: color-mix(in srgb, var(--color-white) 30%, transparent);
transition: width var(--duration-fast) var(--ease-base), background var(--duration-fast) var(--ease-base);
}
.vino-dots__dot--active::before {
width: 20px;
background: var(--color-accent);
}
.vino-dots--lines {
gap: var(--space-2);
}
.vino-dots--lines .vino-dots__dot {
width: 44px;
margin: -10px -8px;
}
.vino-dots--lines .vino-dots__dot::before, .vino-dots--lines .vino-dots__dot--active::before {
width: 28px;
height: 2px;
border-radius: 0;
}
}
@media (max-width:760px) {
.vino-tabbar {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: var(--z-tabbar);
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
height: calc(var(--size-tabbar) + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
border-top: 1px solid var(--color-line);
background: color-mix(in srgb, var(--color-bg) 94%, transparent);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.vino-tabbar__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-1);
color: var(--color-text-muted);
font-size: var(--fs-caption);
line-height: 1;
transition: color var(--duration-fast) var(--ease-base);
}
.vino-tabbar__item--active {
color: var(--color-accent);
}
.vino-tabbar__count {
top: var(--space-1);
right: auto;
left: calc(50% + var(--space-1));
}
}
@media (max-width:760px) {
:root {
--space-head: var(--space-6);
--fs-caption: .75rem;
--size-tabbar: 60px;
--gutter: var(--space-6);
--space-grid-base: var(--space-4);
--space-grid-tight: var(--space-3);
--space-grid-wide: var(--space-6);
--space-card: var(--space-4);
}
.vino-brands__logo {
--vino-brands-logo-height: var(--space-16);
}
.vino-story__image {
--vino-story-image-height: auto;
--vino-story-image-ratio: 3 / 2;
}
.vino-brands__item {
padding: var(--space-6) var(--space-3);
}
}
@media (max-width:560px) {
:root {
--gutter: var(--space-4);
--space-section: var(--space-12);
}
}
@media (max-width:760px) {
body {
padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom));
}
.vino-cookie, .vino-toast {
bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom) + var(--space-2));
}
}
@media (max-width:760px) {
.vino-pdp__rating, .vino-breadcrumbs__link, .vino-card .vino-card__tool, .vino-card__link, .vino-footer__link, .vino-consent__link, .vino-lang__current, .vino-demo-bar__link, .vino-section__link {
position: relative;
}
.vino-actions {
gap: var(--space-5-5);
}
.vino-pdp__rating::before {
content: "";
position: absolute;
inset: -11px;
}
.vino-breadcrumbs__link::before, .vino-card__link::before, .vino-footer__link::before, .vino-consent__link::before, .vino-lang__current::before, .vino-demo-bar__link::before, .vino-section__link::before {
content: "";
position: absolute;
inset: -13px -4px;
}
.vino-card .vino-card__tool {
width: 40px;
height: 40px;
margin: 0;
}
.vino-card .vino-card__tool::before {
content: "";
position: absolute;
inset: -2px;
}
.vino-actions .vino-lang__option {
min-height: 44px;
}
}
.vino-main:focus {
outline: 0;
}
.vino-subscribe .vino-inp--invalid {
border-color: var(--color-danger-soft);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 25%, transparent);
}
/* End */
/* /local/templates/jinove_wine/template_styles.css?1792619614127900 */