/* [next]/internal/font/google/oswald_182dee1d.module.css [app-client] (css) */
@font-face {
font-family: Oswald;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/48cb8c496a1feb17-s.0272_f4kgluvg.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: Oswald;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/87ccb897ba116d44-s.01qprxas5cq-q.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Oswald;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/e9a8df42b0c6fb7a-s.0tkkefzut3_mo.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: Oswald;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/804b9eb4033edb5d-s.0gfbe8xl-nipr.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: Oswald;
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../media/6ad1cda2f16975ee-s.p.0t8o_f0a-dk8w.woff2") format("woff2");
unicode-range: U+??, 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: Oswald;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/48cb8c496a1feb17-s.0272_f4kgluvg.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: Oswald;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/87ccb897ba116d44-s.01qprxas5cq-q.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Oswald;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/e9a8df42b0c6fb7a-s.0tkkefzut3_mo.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: Oswald;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/804b9eb4033edb5d-s.0gfbe8xl-nipr.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: Oswald;
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../media/6ad1cda2f16975ee-s.p.0t8o_f0a-dk8w.woff2") format("woff2");
unicode-range: U+??, 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: Oswald;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../media/48cb8c496a1feb17-s.0272_f4kgluvg.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: Oswald;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../media/87ccb897ba116d44-s.01qprxas5cq-q.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Oswald;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../media/e9a8df42b0c6fb7a-s.0tkkefzut3_mo.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: Oswald;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../media/804b9eb4033edb5d-s.0gfbe8xl-nipr.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: Oswald;
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../media/6ad1cda2f16975ee-s.p.0t8o_f0a-dk8w.woff2") format("woff2");
unicode-range: U+??, 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: Oswald Fallback;
src: local(Arial);
ascent-override: 146.51%;
descent-override: 35.49%;
line-gap-override: 0.0%;
size-adjust: 81.43%;
}
.oswald_182dee1d-module__QLYKoW__className {
font-family: Oswald, Oswald Fallback;
font-style: normal;
}
.oswald_182dee1d-module__QLYKoW__variable {
--font-oswald: "Oswald", "Oswald Fallback";
}
/* [next]/internal/font/google/open_sans_42a3b79e.module.css [app-client] (css) */
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/3ce154ad7d54dc86-s.0n54~jvon9ee5.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: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/7cdbb9ca823c0a73-s.0g~9kd3dx56ng.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/1e239d59b95c7889-s.0y5o_un~q19dn.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/a421df443b3f383b-s.0-2a4_vov7hfq.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: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/c2873153dc73d9e3-s.0g6heybwh~nbo.woff2") format("woff2");
unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/d38a53d0ba90b32d-s.0-z21w-861g1d.woff2") format("woff2");
unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/5b0229109f6656bb-s.1455rc8vwuctw.woff2") format("woff2");
unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+28??, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B??, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F0??, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F7??, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/ca19bc83075b2625-s.0s0y.-f87v-al.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: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/2aec202ebfcf461b-s.0p8pxnvll2h.7.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: Open Sans;
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url("../media/cf514f5d0007dafa-s.p.0lok5zj4ubzox.woff2") format("woff2");
unicode-range: U+??, 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: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/3ce154ad7d54dc86-s.0n54~jvon9ee5.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: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/7cdbb9ca823c0a73-s.0g~9kd3dx56ng.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/1e239d59b95c7889-s.0y5o_un~q19dn.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/a421df443b3f383b-s.0-2a4_vov7hfq.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: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/c2873153dc73d9e3-s.0g6heybwh~nbo.woff2") format("woff2");
unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/d38a53d0ba90b32d-s.0-z21w-861g1d.woff2") format("woff2");
unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/5b0229109f6656bb-s.1455rc8vwuctw.woff2") format("woff2");
unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+28??, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B??, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F0??, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F7??, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/ca19bc83075b2625-s.0s0y.-f87v-al.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: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/2aec202ebfcf461b-s.0p8pxnvll2h.7.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: Open Sans;
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url("../media/cf514f5d0007dafa-s.p.0lok5zj4ubzox.woff2") format("woff2");
unicode-range: U+??, 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: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/3ce154ad7d54dc86-s.0n54~jvon9ee5.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: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/7cdbb9ca823c0a73-s.0g~9kd3dx56ng.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/1e239d59b95c7889-s.0y5o_un~q19dn.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/a421df443b3f383b-s.0-2a4_vov7hfq.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: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/c2873153dc73d9e3-s.0g6heybwh~nbo.woff2") format("woff2");
unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/d38a53d0ba90b32d-s.0-z21w-861g1d.woff2") format("woff2");
unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/5b0229109f6656bb-s.1455rc8vwuctw.woff2") format("woff2");
unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+28??, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B??, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F0??, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F7??, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/ca19bc83075b2625-s.0s0y.-f87v-al.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: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/2aec202ebfcf461b-s.0p8pxnvll2h.7.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: Open Sans;
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url("../media/cf514f5d0007dafa-s.p.0lok5zj4ubzox.woff2") format("woff2");
unicode-range: U+??, 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: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/3ce154ad7d54dc86-s.0n54~jvon9ee5.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: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/7cdbb9ca823c0a73-s.0g~9kd3dx56ng.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/1e239d59b95c7889-s.0y5o_un~q19dn.woff2") format("woff2");
unicode-range: U+1F??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/a421df443b3f383b-s.0-2a4_vov7hfq.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: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/c2873153dc73d9e3-s.0g6heybwh~nbo.woff2") format("woff2");
unicode-range: U+307-308, U+590-5FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/d38a53d0ba90b32d-s.0-z21w-861g1d.woff2") format("woff2");
unicode-range: U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C, U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9, U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/5b0229109f6656bb-s.1455rc8vwuctw.woff2") format("woff2");
unicode-range: U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190, U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299, U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+28??, U+2921-2922, U+2981, U+29BF, U+29EB, U+2B??, U+4DC0-4DFF, U+FFF9-FFFB, U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB, U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F0??, U+1F100-1F1AD, U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C, U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8, U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0, U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426, U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453, U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF, U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED, U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D, U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F, U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2, U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA, U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F7??, U+1F800-1F80B, U+1F810-1F847, U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1, U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F, U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9, U+1FAF0-1FAF8, U+1FB??;
}
@font-face {
font-family: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/ca19bc83075b2625-s.0s0y.-f87v-al.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: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/2aec202ebfcf461b-s.0p8pxnvll2h.7.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: Open Sans;
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url("../media/cf514f5d0007dafa-s.p.0lok5zj4ubzox.woff2") format("woff2");
unicode-range: U+??, 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: Open Sans Fallback;
src: local(Arial);
ascent-override: 101.65%;
descent-override: 27.86%;
line-gap-override: 0.0%;
size-adjust: 105.15%;
}
.open_sans_42a3b79e-module__EFD-5a__className {
font-family: Open Sans, Open Sans Fallback;
font-style: normal;
}
.open_sans_42a3b79e-module__EFD-5a__variable {
--font-open-sans: "Open Sans", "Open Sans Fallback";
}
/* [next]/internal/font/google/jetbrains_mono_879b5a5c.module.css [app-client] (css) */
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/d72c019e91ffb82f-s.13p4wivrd1jdu.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: JetBrains Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/8557ac4879842fb9-s.0c55c1p2uepsl.woff2") format("woff2");
unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}
@font-face {
font-family: JetBrains Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/c847346577a98de0-s.0onzgp6v4x1o7.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: JetBrains Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/db08d2e20377160a-s.0dy25cxsth5_b.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: JetBrains Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/8394f9d71e076efc-s.0ivtmx8_gg.-p.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: JetBrains Mono;
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../media/19087af2bdec32b5-s.p.08sa_orub7ous.woff2") format("woff2");
unicode-range: U+??, 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: JetBrains Mono Fallback;
src: local(Arial);
ascent-override: 75.79%;
descent-override: 22.29%;
line-gap-override: 0.0%;
size-adjust: 134.59%;
}
.jetbrains_mono_879b5a5c-module__iv7oHa__className {
font-family: JetBrains Mono, JetBrains Mono Fallback;
font-style: normal;
font-weight: 400;
}
.jetbrains_mono_879b5a5c-module__iv7oHa__variable {
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback";
}
/* [project]/app/shared.css [app-client] (css) */
:root {
--subcat-tiles3-cols: repeat(2,1fr);
--ink: #2b2b2b;
--ink-2: #4a4a4a;
--muted: #6a6a6a;
--line: #e3e1dc;
--line-2: #dcd9d1;
--bg: #f1ede4;
--page: #f6f4ee;
--card: #fff;
--topbar: #2d2d2d;
--brand-green: #3e5a1c;
--brand-green-hover: #2f4714;
--brand-green-mid: #5a7a2b;
--brand-green-light: #7fa23d;
--accent: var(--brand-green-mid);
--accent-2: var(--brand-green-light);
--accent-dark: var(--brand-green);
--cta-primary: var(--brand-green);
--cta-primary-hover: var(--brand-green-hover);
--btn: var(--cta-primary);
--btn-hover: var(--cta-primary-hover);
--sale: #c97a3a;
--sale-hover: #b06326;
--star: #e0a21a;
--glass-bg: #ffffff1f;
--glass-bg-strong: #ffffff38;
--glass-border: #ffffff47;
--glass-border-strong: #ffffff73;
--glass-blur: blur(14px) saturate(140%);
--glass-shadow: 0 8px 30px #0000002e;
--glass-light-bg: #ffffffb8;
--glass-light-border: #281e0f14;
--glass-light-blur: blur(16px) saturate(140%);
--glass-light-shadow: 0 10px 30px #281e0f1a;
}
* {
box-sizing: border-box;
}
html, body {
max-width: 100%;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-open-sans), "Open Sans",system-ui,sans-serif;
color: var(--ink);
background: var(--page);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
}
.topbar {
background: var(--topbar);
color: #fff;
justify-content: space-between;
align-items: center;
gap: 18px;
height: 34px;
padding: 0 28px;
font-size: 13px;
display: flex;
}
.topbar .tb-crumb {
letter-spacing: .06em;
color: #ffffff8c;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
font-size: 11.5px;
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
text-transform: uppercase;
align-items: center;
gap: 8px;
display: flex;
overflow: hidden;
}
.topbar .tb-crumb a {
color: #ffffff8c;
transition: color .15s;
}
.topbar .tb-crumb a:hover {
color: #fff;
}
.topbar .tb-crumb .sep {
color: #ffffff4d;
margin: 0 2px;
}
.topbar .tb-crumb .current {
color: #fffc;
}
@media (max-width: 640px) {
.topbar .tb-crumb {
display: none;
}
}
.topbar .icons {
align-items: center;
gap: 14px;
display: flex;
}
.topbar .tb-right {
align-items: center;
gap: 18px;
margin-left: auto;
display: flex;
}
.icon-btn {
background: var(--accent);
border-radius: 3px;
justify-content: center;
align-items: center;
width: 28px;
height: 22px;
transition: background .15s;
display: inline-flex;
}
.icon-btn:hover {
background: var(--accent-2);
}
.icon-btn svg {
fill: #fff;
width: 14px;
height: 14px;
}
.social {
gap: 10px;
margin-left: 6px;
display: flex;
}
.social a {
color: #fff;
opacity: .9;
align-items: center;
display: inline-flex;
}
.social svg {
fill: #fff;
width: 16px;
height: 16px;
}
.site-header {
z-index: 120;
transition: background .25s, border-color .25s, box-shadow .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s;
position: sticky;
top: 0;
}
.site-header.transparent .topbar {
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border) !important;
background: #1e1a146b !important;
}
.site-header.transparent .nav {
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
background: var(--glass-bg) !important;
border-bottom: 1px solid var(--glass-border) !important;
}
.site-header.transparent .menu a {
text-shadow: 0 1px 2px #0006;
color: #fff !important;
}
.site-header.transparent .menu a:hover {
opacity: .85;
color: #fff !important;
}
.site-header.transparent .menu a.active {
color: #fff !important;
border-bottom-color: #fff !important;
}
.site-header.transparent .brand .wordmark {
text-shadow: 0 1px 2px #0006;
color: #fff !important;
}
.site-header.transparent .hamburger span {
background: #fff !important;
}
.site-header.scrolled {
box-shadow: 0 2px 16px #0000000f;
}
.nav {
background: var(--bg);
border-bottom: 1px solid var(--line);
align-items: center;
gap: 28px;
padding: 14px 28px;
transition: background .25s, border-color .25s;
display: flex;
}
.brand {
align-items: center;
gap: 10px;
min-width: 150px;
margin-right: 18px;
display: flex;
}
.brand .brand-logo {
object-fit: contain;
width: auto;
height: 38px;
transition: filter .25s;
display: block;
}
.site-header.transparent .brand .brand-logo {
filter: brightness(0) invert() drop-shadow(0 1px 2px #0006);
}
.menu {
flex: 1;
justify-content: center;
align-items: center;
gap: clamp(12px, 1.8vw, 30px);
min-width: 0;
display: flex;
}
.menu a {
color: #3a3a3a;
white-space: nowrap;
padding: 8px 2px;
font-size: clamp(13px, 1.15vw, 15px);
font-weight: 500;
transition: color .15s;
}
.menu a:hover {
color: var(--accent);
}
.menu a.active {
color: #1f1f1f;
border-bottom: 2px solid #1f1f1f;
font-weight: 700;
}
.nav-cart {
color: #1f1f1f;
letter-spacing: .6px;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
font-family: var(--font-oswald), "Oswald", sans-serif;
white-space: nowrap;
background: #ece7db;
border: 1px solid #d6d0c1;
border-radius: 4px;
align-items: center;
gap: 10px;
margin-left: 18px;
padding: 10px 18px;
transition: background .25s, border-color .25s, color .25s;
display: inline-flex;
position: relative;
}
.nav-cart:hover {
color: #1f1f1f;
background: #e2dccd;
border-color: #c8c1ad;
}
.nav-cart svg {
fill: #1f1f1f;
flex: none;
width: 18px;
height: 18px;
}
.nav-cart-label {
display: inline-block;
}
.nav-cart-badge {
color: #fff;
min-width: 20px;
height: 20px;
font-size: 11px;
font-weight: 800;
font-family: var(--font-open-sans), "Open Sans", sans-serif;
letter-spacing: 0;
transform-origin: center;
background: #1f1f1f;
border-radius: 2px;
justify-content: center;
align-items: center;
margin-left: 2px;
padding: 0 6px;
line-height: 1;
display: inline-flex;
}
@keyframes cartBadgePulse {
0% {
transform: scale(1);
}
35% {
background: var(--accent, #5a7a2c);
transform: scale(1.45);
}
100% {
transform: scale(1);
}
}
.nav-cart-badge.pulse, .bt-cart-badge.pulse {
animation: .55s ease-out cartBadgePulse;
}
.site-header.transparent .nav-cart {
background: #ffffffeb;
border-color: #0000001f;
}
.site-header.is-minimal .topbar, .site-header.is-minimal .menu {
display: none;
}
.site-header.is-minimal .hamburger {
display: none !important;
}
.site-header.is-minimal .nav {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
background: none !important;
border-bottom: none !important;
}
.site-header.is-minimal .nav-cart {
text-shadow: 0 1px 2px #00000073;
color: #fff !important;
background: none !important;
border-color: #ffffff8c !important;
margin-left: auto !important;
}
.site-header.is-minimal .nav-cart svg {
fill: currentColor;
}
.site-header.is-minimal .nav-cart:hover {
background: #ffffff14 !important;
border-color: #ffffffd9 !important;
}
.site-header.is-minimal-scrolled .nav {
background: var(--bg) !important;
border-bottom: 1px solid var(--line) !important;
}
.site-header.is-minimal-scrolled .brand .brand-logo {
filter: none !important;
}
.site-header.is-minimal-scrolled .nav-cart {
text-shadow: none;
color: #1f1f1f !important;
background: none !important;
border-color: #0000002e !important;
}
.site-header.is-minimal-scrolled .nav-cart:hover {
background: #0000000a !important;
border-color: #0006 !important;
}
.site-header.is-minimal-scrolled .nav-cart-badge {
color: #fff;
background: #1f1f1f;
}
.hamburger {
cursor: pointer;
background: none;
border: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
margin-left: auto;
display: none;
}
.hamburger span {
background: #2b2b2b;
width: 24px;
height: 2px;
transition: transform .2s, opacity .2s;
}
.hamburger.open span:first-child {
transform: translateY(7px)rotate(45deg);
}
.hamburger.open span:nth-child(2) {
opacity: 0;
}
.hamburger.open span:nth-child(3) {
transform: translateY(-7px)rotate(-45deg);
}
.mobile-nav {
z-index: 200;
pointer-events: none;
visibility: hidden;
transition: visibility 0s linear .28s;
position: fixed;
inset: 0;
}
.mobile-nav:before {
content: "";
opacity: 0;
background: #00000080;
transition: opacity .25s;
position: absolute;
inset: 0;
}
.mobile-nav-panel {
background: var(--bg);
flex-direction: column;
width: min(320px, 85vw);
max-width: 100vw;
transition: transform .28s;
display: flex;
position: absolute;
top: 0;
bottom: 0;
right: 0;
transform: translateX(100%);
box-shadow: -10px 0 30px #0003;
}
.mobile-nav.open {
pointer-events: auto;
visibility: visible;
transition: visibility;
}
.mobile-nav.open:before {
opacity: 1;
}
.mobile-nav.open .mobile-nav-panel {
transform: translateX(0);
}
.mn-header {
border-bottom: 1px solid var(--line);
justify-content: space-between;
align-items: center;
padding: 14px 20px;
display: flex;
}
.mn-close {
cursor: pointer;
color: #2b2b2b;
background: none;
border: none;
width: 36px;
height: 36px;
font-size: 28px;
line-height: 1;
}
.mn-links {
flex-direction: column;
flex: 1;
padding: 14px 0;
display: flex;
overflow-y: auto;
}
.mn-links a {
color: #2b2b2b;
border-bottom: 1px solid var(--line);
padding: 16px 22px;
font-size: 17px;
font-weight: 500;
}
.mn-links a.active {
color: var(--accent);
font-weight: 700;
}
.mn-footer {
border-top: 1px solid var(--line);
gap: 10px;
padding: 18px 22px;
display: flex;
}
.mn-footer a {
height: 48px;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .05em;
border-radius: 4px;
flex: 1;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background .15s, border-color .15s;
display: inline-flex;
}
.mn-footer a:first-child {
background: var(--white);
border: 1px solid var(--line-2);
color: var(--ink);
}
.mn-footer a:first-child:hover {
background: var(--bg);
border-color: var(--ink-2);
}
.mn-footer a:last-child {
background: var(--cta-primary);
color: #fff;
}
.mn-footer a:last-child:hover {
background: var(--cta-primary-hover);
}
.mn-footer svg {
width: 16px;
height: 16px;
}
.mn-footer a:first-child svg {
fill: var(--ink);
}
.mn-footer a:last-child svg {
fill: #fff;
}
.seo-band {
background: #b8966e;
width: 100%;
padding: 72px 28px;
}
.seo-inner {
text-align: center;
max-width: 860px;
margin: 0 auto;
}
.seo-inner h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .03em;
text-transform: none;
color: #fff;
margin: 0 0 36px;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 600;
line-height: 1.2;
}
.seo-inner p {
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: #ffffffe0;
margin: 0 0 20px;
font-size: 15px;
line-height: 1.75;
}
.seo-inner p:last-child {
margin-bottom: 0;
}
@media (max-width: 640px) {
.seo-band {
padding: 48px 20px;
}
.seo-inner h2 {
font-size: 20px;
}
}
.three-tiles {
border-top: none;
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
gap: 1.2vw;
margin: 1.2vw;
display: grid;
}
.tile {
flex-direction: column;
justify-content: space-between;
min-height: 320px;
padding: 36px 40px 48px;
display: flex;
position: relative;
overflow: hidden;
}
.tile--beratung {
background: url("/uploads/nanobanana-1778070958814.webp") center / cover no-repeat;
}
.tile--beratung:before {
content: "";
pointer-events: none;
background: #080c0673;
position: absolute;
inset: 0;
}
.tile--beratung .tile-label, .tile--beratung .tile-title, .tile--beratung .tile-cta {
color: #fff;
z-index: 1;
position: relative;
}
.tile--beratung .tile-label {
color: #ffffffbf;
}
.tile--beratung .tile-cta {
border-bottom-color: #ffffffb3;
}
.tile--beratung .tile-cta:hover {
color: #a8c167;
border-bottom-color: #a8c167;
}
.tile--beratung .tile-top {
z-index: 1;
position: relative;
}
.tile--ratgeber {
background: url("/uploads/nanobanana-1778071354264.webp") center / cover no-repeat;
}
.tile--ratgeber:before {
content: "";
pointer-events: none;
background: #080c0673;
position: absolute;
inset: 0;
}
.tile--ratgeber .tile-label, .tile--ratgeber .tile-title, .tile--ratgeber .tile-cta {
color: #fff;
z-index: 1;
position: relative;
}
.tile--ratgeber .tile-label {
color: #ffffffbf;
}
.tile--ratgeber .tile-cta {
border-bottom-color: #ffffffb3;
}
.tile--ratgeber .tile-cta:hover {
color: #a8c167;
border-bottom-color: #a8c167;
}
.tile--ratgeber .tile-top {
z-index: 1;
position: relative;
}
.tile:not(:last-child) {
border-right: none;
}
.tile-top {
flex-direction: column;
gap: 10px;
display: flex;
}
.tile-label {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .2em;
text-transform: uppercase;
color: #7a7264;
font-size: 11px;
}
.tile-title {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .02em;
text-transform: uppercase;
color: #1f1f1f;
max-width: 280px;
font-size: clamp(22px, 2vw, 30px);
font-weight: 600;
line-height: 1.15;
}
.tile-body {
color: #5d5d5d;
max-width: 320px;
margin-top: 14px;
font-size: 14px;
line-height: 1.65;
}
.tile-cta {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
color: #1f1f1f;
border-bottom: 1.5px solid #1f1f1f;
align-items: center;
gap: 8px;
margin-top: 48px;
padding-bottom: 2px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: color .15s, border-color .15s;
display: inline-flex;
}
.tile-cta:hover {
color: var(--brand-green);
border-color: var(--brand-green);
}
.tile-cta svg {
stroke: currentColor;
fill: none;
stroke-width: 2.2px;
stroke-linecap: round;
stroke-linejoin: round;
width: 14px;
height: 14px;
transition: transform .15s;
}
.tile-cta:hover svg {
transform: translateX(3px);
}
.tile--newsletter {
background: var(--brand-green);
border-top: none;
}
.tile--newsletter .tile-label {
color: #ffffffb3;
}
.tile--newsletter .tile-title {
color: #fff;
}
.tile--newsletter .tile-body {
color: #fffc;
}
.tile--newsletter .tile-label:before {
content: "";
vertical-align: middle;
background: #fff9;
width: 20px;
height: 1px;
margin-right: 10px;
display: inline-block;
}
.fn-form {
flex-wrap: wrap;
gap: 10px;
width: 100%;
margin-top: 28px;
display: flex;
}
.fn-form input {
color: #fff;
background: #ffffff12;
border: 1px solid #ffffff26;
border-radius: 3px;
outline: none;
flex: 1 1 0;
min-width: 0;
height: 48px;
padding: 0 16px;
font-family: inherit;
font-size: 14px;
}
.fn-form input::placeholder {
color: #fff6;
}
.fn-form input:focus-visible {
background: #ffffff26;
border-color: #ffffff80;
}
.fn-form button {
height: 48px;
color: var(--brand-green);
font-size: 13px;
font-weight: 700;
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
background: #ece7db;
border: none;
border-radius: 3px;
flex: none;
padding: 0 18px;
transition: background .15s;
}
.fn-form button:hover {
background: #e0dace;
}
@media (max-width: 860px) {
.three-tiles {
grid-template-columns: 1fr;
gap: 4px;
margin: 4px;
}
.tile:not(:last-child) {
border-bottom: none;
border-right: none;
}
.tile {
min-height: 240px;
padding: 36px 28px;
}
}
.footer-newsletter {
display: none;
}
.footer-main {
color: #d4d0c4;
background: #2d2d2d;
padding: 56px 28px 28px;
}
.fm-inner {
grid-template-columns: 1.3fr 1fr 1fr 1fr 1.2fr;
gap: 40px;
max-width: 1180px;
margin: 0 auto;
display: grid;
}
.fm-brand .brand-logo {
filter: brightness(0) invert() opacity(.88);
width: auto;
height: 42px;
margin-bottom: 16px;
display: block;
}
.fm-brand p {
color: #a8a497;
max-width: 280px;
margin: 0 0 18px;
font-size: 13px;
line-height: 1.65;
}
.fm-social {
gap: 10px;
display: flex;
}
.fm-social a {
color: #d4d0c4;
background: #3d3d3d;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
display: inline-flex;
}
.fm-social svg {
fill: currentColor;
width: 15px;
height: 15px;
}
.fm-col h3 {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .14em;
color: #fff;
text-transform: uppercase;
margin: 4px 0 18px;
font-size: 13px;
font-weight: 600;
}
.fm-col ul {
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.fm-col a {
color: #b8b3a3;
font-size: 14px;
}
.fm-col a:hover {
color: #fff;
}
.fm-contact li {
color: #b8b3a3;
align-items: flex-start;
gap: 10px;
font-size: 14px;
line-height: 1.55;
display: flex;
}
.fm-contact svg {
width: 15px;
height: 15px;
stroke: var(--brand-green-light);
fill: none;
stroke-width: 2px;
flex: none;
margin-top: 3px;
}
.footer-pay {
border-top: 1px solid #3d3d3d;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 18px;
max-width: 1180px;
margin: 36px auto 0;
padding: 22px 0 0;
display: flex;
}
.fp-methods {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.fp-chip {
letter-spacing: .06em;
color: #d4d0c4;
background: #3d3d3d;
border: 1px solid #4a4a4a;
border-radius: 3px;
justify-content: center;
align-items: center;
height: 28px;
padding: 0 12px;
font-size: 11px;
font-weight: 600;
display: inline-flex;
}
.ck-card-field {
border: 1px solid var(--line);
background: #fff;
border-radius: 4px;
padding: 12px 14px;
transition: border-color .15s, background .15s;
}
.ck-card-field.focused {
border-color: var(--accent);
background: #5a7a2b08;
}
.payment-logos {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
display: flex;
}
.payment-logos .pay-logo {
border: 1px solid var(--line);
background: #fff;
border-radius: 4px;
justify-content: center;
align-items: center;
height: 28px;
padding: 0 8px;
display: inline-flex;
}
.payment-logos .pay-logo svg {
width: auto;
height: 18px;
display: block;
}
.footer-pay .payment-logos .pay-logo {
border-color: #4a4a4a;
}
.fp-badges {
color: #a8a497;
flex-wrap: wrap;
gap: 10px 20px;
font-size: 12px;
display: flex;
}
.fp-badges .b {
align-items: center;
gap: 6px;
display: inline-flex;
}
.fp-badges svg {
width: 14px;
height: 14px;
stroke: var(--brand-green-light);
fill: none;
stroke-width: 2px;
}
.footer-legal {
color: #8b8776;
background: #1f1f1f;
padding: 18px 28px;
font-size: 12px;
}
.fl-inner {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 18px;
max-width: 1180px;
margin: 0 auto;
display: flex;
}
.fl-links {
flex-wrap: wrap;
gap: 22px;
display: flex;
}
.fl-links a:hover {
color: #fff;
}
.page-hero {
color: #fff;
align-items: center;
height: 100vh;
min-height: 560px;
margin-top: -116px;
padding: 176px 28px 60px;
display: flex;
position: relative;
overflow: hidden;
}
body:has(.site-header.transparent) .hero {
margin-top: -116px;
}
body:has(.site-header.transparent) .hero .hero-inner {
padding-top: 176px;
}
.page-hero .bg {
z-index: 0;
background: radial-gradient(circle at 70% 40%, #7fa23d4d, #0000 55%), linear-gradient(135deg, #2f4417 0%, #0f1a08 100%);
position: absolute;
inset: 0;
}
.page-hero .overlay {
z-index: 1;
background: linear-gradient(#14120e26, #14120e59);
position: absolute;
inset: 0;
}
.page-hero .inner {
z-index: 2;
width: 100%;
max-width: 1180px;
margin: 0 auto;
position: relative;
}
.page-hero .breadcrumb {
color: #fff;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
letter-spacing: .02em;
border-radius: 999px;
align-items: center;
margin-bottom: 18px;
padding: 7px 14px;
font-size: 12px;
display: inline-flex;
}
.page-hero .breadcrumb a {
color: #fff;
opacity: .85;
}
.page-hero .breadcrumb a:hover {
opacity: 1;
}
.page-hero .breadcrumb .sep {
opacity: .45;
margin: 0 8px;
}
.page-hero .eyebrow {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .2em;
color: #fff;
text-transform: uppercase;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: 3px;
align-items: center;
margin-bottom: 18px;
padding: 6px 12px;
font-size: 11px;
display: inline-flex;
}
.page-hero .eyebrow:before {
content: "";
background: var(--accent-2);
width: 6px;
height: 6px;
box-shadow: 0 0 8px var(--accent-2);
border-radius: 50%;
margin-right: 8px;
display: inline-block;
}
.page-hero h1 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
margin: 0 0 16px;
font-size: clamp(36px, 5vw, 62px);
font-weight: 600;
line-height: 1.05;
}
.page-hero p.lead {
color: #e7e3d6;
max-width: 640px;
margin: 0;
font-size: 17px;
line-height: 1.6;
}
.page-hero .cta {
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
display: flex;
}
.page-hero .cta a {
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 3px;
align-items: center;
height: 48px;
padding: 0 22px;
font-size: 14px;
font-weight: 600;
transition: background .15s;
display: inline-flex;
}
.page-hero .cta .primary {
background: var(--btn);
color: #fff;
}
.page-hero .cta .primary:hover {
background: var(--btn-hover);
}
.page-hero .cta .ghost {
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
color: #fff;
border: 1px solid var(--glass-border-strong);
}
.page-hero .cta .ghost:hover {
background: var(--glass-bg-strong);
}
.subcat-section {
background: var(--page);
padding: 56px 28px;
}
.subcat-inner {
max-width: 1180px;
margin: 0 auto;
}
.section-head {
text-align: center;
margin-bottom: 36px;
}
.section-head .eyebrow {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .2em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 10px;
font-size: 11px;
}
.section-head h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink);
margin: 0 0 12px;
font-size: clamp(26px, 3vw, 38px);
font-weight: 600;
}
.section-head p {
max-width: 640px;
color: var(--muted);
margin: 0 auto;
font-size: 15px;
line-height: 1.6;
}
.subcat-grid {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
display: grid;
}
.subcat-grid.tiles-3 .subcat-tile {
aspect-ratio: 1;
}
.subcat-grid.tiles-3 .subcat-tile:last-child:nth-child(odd) {
aspect-ratio: 2;
grid-column: 1 / -1;
}
@media (min-width: 1025px) {
:root {
--subcat-tiles3-cols: repeat(3,1fr);
}
.subcat-grid.tiles-3 .subcat-tile {
aspect-ratio: 4 / 5;
}
.subcat-grid.tiles-3 .subcat-tile:last-child:nth-child(odd) {
aspect-ratio: 4 / 5;
grid-column: auto;
}
}
.subcat-tile {
aspect-ratio: 4 / 5;
color: #fff;
cursor: pointer;
border-radius: 6px;
align-items: flex-end;
padding: 16px;
transition: transform .22s, box-shadow .22s;
display: flex;
position: relative;
overflow: hidden;
}
.subcat-tile:hover {
transform: translateY(-3px);
box-shadow: 0 14px 30px #14120e38;
}
.subcat-tile .tbg {
z-index: 0;
position: absolute;
inset: 0;
}
.subcat-tile .tover {
z-index: 1;
pointer-events: none;
background: linear-gradient(#14120e2e, #14120e00 40%);
position: absolute;
inset: 0;
}
.subcat-tile .tlbl {
z-index: 2;
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
text-align: center;
background: #14120e52;
border: 1px solid #ffffff2e;
border-radius: 4px;
width: 100%;
padding: 14px 14px 12px;
position: relative;
box-shadow: 0 6px 20px #00000040;
}
.subcat-tile .tlbl h3 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .06em;
text-shadow: 0 1px 2px #00000059;
margin: 0 0 4px;
font-size: 20px;
font-weight: 600;
}
.subcat-tile .tlbl span {
color: #e7e3d6;
letter-spacing: .02em;
margin-bottom: 10px;
font-size: 12px;
display: block;
}
.subcat-tile .tlbl p {
color: #e7e3d6;
opacity: .9;
margin: 0 0 12px;
font-size: 12.5px;
line-height: 1.5;
}
.subcat-tile .tlbl .tbtn {
width: 100%;
height: 36px;
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
background: #ffffff29;
border: 1px solid #ffffff59;
border-radius: 3px;
justify-content: center;
align-items: center;
padding: 0 14px;
font-size: 12px;
font-weight: 600;
transition: background .15s, border-color .15s;
display: inline-flex;
}
.subcat-tile:hover .tlbl .tbtn {
background: #ffffff42;
border-color: #ffffff80;
}
.subcat-tile .ticon {
z-index: 2;
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
color: #fff;
background: #ffffff2e;
border: 1px solid #ffffff47;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
display: flex;
position: absolute;
top: 14px;
right: 14px;
}
.subcat-tile .ticon svg {
fill: none;
stroke: currentColor;
stroke-width: 1.5px;
width: 20px;
height: 20px;
}
.subcat-tile .timg {
z-index: 1;
pointer-events: none;
background: radial-gradient(80% 70% at 50% 45%, #ffffff59 0%, #0000 100%);
position: absolute;
inset: 0;
}
.subcat-tile .timg img {
opacity: .85;
transition: opacity .22s;
}
.subcat-tile:hover .timg img {
opacity: 1;
}
.subcat-tile.has-img .tover {
background: linear-gradient(#0000 40%, #14120ebf 90%);
}
.subcat-tile.t1 .tbg {
background: linear-gradient(135deg, #c97a3a, #8a4a1e);
}
.subcat-tile.t2 .tbg {
background: linear-gradient(135deg, #5a7a2b, #2f4417);
}
.subcat-tile.t3 .tbg {
background: linear-gradient(135deg, #6b5434, #3e2e1a);
}
.subcat-tile.t4 .tbg {
background: linear-gradient(135deg, #8a8578, #4a4a4a);
}
.subcat-tile.t5 .tbg {
background: linear-gradient(135deg, #c8ad8e, #6b5434);
}
.subcat-tile.t6 .tbg {
background: linear-gradient(135deg, #4a5a3a, #263020);
}
.feature-chapter {
border-top: 1px solid var(--line, #e3e1dc);
background: #f4f2ec;
padding: 64px 28px;
}
.fc-inner {
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 52px;
max-width: 1180px;
margin: 0 auto;
display: grid;
}
.fc-media img {
border-radius: 6px;
width: 100%;
height: auto;
display: block;
box-shadow: 0 14px 40px #281e0f2e;
}
.fc-text .eyebrow {
font-family: var(--font-mono),"JetBrains Mono",ui-monospace,monospace;
letter-spacing: .2em;
color: var(--accent);
text-transform: uppercase;
margin-bottom: 12px;
font-size: 11px;
}
.fc-text h2 {
font-family: var(--font-oswald),"Oswald",sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink);
margin: 0 0 14px;
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 600;
line-height: 1.12;
}
.fc-text p {
color: var(--muted);
max-width: 52ch;
margin: 0 0 18px;
font-size: 15.5px;
line-height: 1.65;
}
.fc-keyline {
font-family: var(--font-mono),"JetBrains Mono",ui-monospace,monospace;
letter-spacing: .08em;
color: var(--ink);
margin-bottom: 24px;
font-size: 12.5px;
}
.fc-btn {
font-family: var(--font-oswald),"Oswald",sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink);
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
box-shadow: var(--glass-light-shadow);
border-radius: 4px;
align-items: center;
gap: 8px;
padding: 13px 22px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: box-shadow .18s, transform .18s, border-color .18s;
display: inline-flex;
}
.fc-btn:hover {
border-color: #281e0f33;
transform: translateY(-1px);
box-shadow: 0 14px 36px #281e0f29;
}
@media (max-width: 900px) {
.feature-chapter {
padding: 48px 18px;
}
.fc-inner {
grid-template-columns: 1fr;
gap: 24px;
}
}
.products-section {
background: var(--page);
padding: 56px 28px;
}
.products-inner {
max-width: 1180px;
margin: 0 auto;
}
.products-toolbar {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 26px;
display: flex;
}
.view-all {
color: var(--accent);
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
display: inline-flex;
}
.view-all:hover {
color: var(--accent-dark);
}
.products-grid {
grid-template-columns: repeat(4, 1fr);
gap: 36px 28px;
display: grid;
}
.pcard {
aspect-ratio: auto;
cursor: pointer;
isolation: isolate;
color: inherit;
background: none;
border: 0;
border-radius: 0;
flex-direction: column;
text-decoration: none;
transition: transform .22s;
display: flex;
position: relative;
overflow: visible;
}
.pcard:hover {
box-shadow: none;
transform: translateY(-3px);
}
.pcard-img {
aspect-ratio: 1;
z-index: 0;
border-radius: 0;
justify-content: center;
align-items: center;
width: 100%;
transition: transform .45s;
display: flex;
position: relative;
inset: auto;
background-color: #0000 !important;
background-image: url("/assets/produkt-platzhalter.jpg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: contain !important;
}
.pcard:hover .pcard-img {
transform: scale(1.03);
}
.pcard-img .ph, .pcard:after {
display: none;
}
.ci-img, .mi-img, .it-img, .oi-img, .wl-img {
color: #0000 !important;
background-image: url("/assets/produkt-platzhalter.jpg") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
font-size: 0 !important;
}
.ci-img *, .mi-img *, .it-img *, .oi-img *, .wl-img * {
display: none !important;
}
.mi-img .mi-qty {
color: #fff !important;
font-size: 11px !important;
display: flex !important;
}
.pcard-badges {
z-index: 3;
flex-direction: column;
gap: 6px;
display: flex;
position: absolute;
top: 10px;
left: 10px;
}
.pcard-badge {
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
text-shadow: 0 1px 2px #00000038;
border-radius: 999px;
padding: 5px 11px;
font-size: 10.5px;
font-weight: 600;
box-shadow: 0 4px 12px #0000002e;
}
.pcard-badge.new {
background: #7fa23db3;
}
.pcard-badge.sale {
background: #c97a3abf;
}
.pcard-badge.top {
background: #19191999;
}
.pcard-body {
z-index: 2;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
text-align: center;
background: none;
border: 0;
border-radius: 0;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 18px 4px 0;
display: flex;
position: relative;
bottom: auto;
left: auto;
right: auto;
}
.pcard:hover .pcard-body {
background: none;
transform: none;
}
.pcard-brand {
letter-spacing: .14em;
color: var(--muted);
text-transform: uppercase;
text-shadow: none;
font-size: 10.5px;
font-weight: 600;
}
.pcard-title {
color: var(--ink);
-webkit-line-clamp: unset;
text-shadow: none;
text-align: center;
margin: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.4;
display: block;
overflow: visible;
}
.pcard-meta {
color: var(--muted);
justify-content: center;
align-items: center;
gap: 8px;
font-size: 12px;
display: flex;
}
.pcard-meta .stars {
color: var(--star);
}
.pcard-price {
justify-content: center;
align-items: baseline;
gap: 8px;
margin-top: 4px;
display: flex;
}
.pcard-price .now {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--ink);
letter-spacing: .01em;
text-shadow: none;
font-size: 19px;
font-weight: 500;
}
.pcard-price .old {
color: var(--muted);
font-size: 12.5px;
text-decoration: line-through;
}
.pcard-price .save {
color: #fff;
background: #c97a3ad9;
border: 1px solid #c97a3a4d;
border-radius: 999px;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 600;
}
.pcard-cta {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
background: #ffffff8c;
border: 1px solid #14120e24;
border-radius: 6px;
justify-content: center;
align-items: center;
margin-top: 14px;
padding: 12px 18px;
font-size: 13.5px;
font-weight: 500;
transition: background .2s, border-color .2s, transform .2s;
display: flex;
box-shadow: inset 0 1px #fff9, 0 4px 14px #140f050f;
}
.pcard:hover .pcard-cta {
background: #ffffffd9;
border-color: #14120e3d;
transform: translateY(-1px);
}
.info-strip {
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
background: #fff;
padding: 26px 28px;
}
.info-strip-inner {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1180px;
margin: 0 auto;
display: grid;
}
.info-item {
align-items: center;
gap: 14px;
display: flex;
}
.info-item .ico {
background: var(--bg);
width: 42px;
height: 42px;
color: var(--accent);
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
display: flex;
}
.info-item .ico svg {
fill: none;
stroke: currentColor;
stroke-width: 2px;
width: 20px;
height: 20px;
}
.info-item h4 {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
}
.info-item p {
color: var(--muted);
margin: 0;
font-size: 12px;
line-height: 1.5;
}
.glass {
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
color: #fff;
}
.glass-strong {
background: var(--glass-bg-strong);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border-strong);
color: #fff;
}
.glass-light {
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
box-shadow: var(--glass-light-shadow);
}
.glass-chip {
color: #fff;
background: var(--glass-bg);
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
letter-spacing: .02em;
border-radius: 999px;
align-items: center;
gap: 8px;
padding: 7px 14px;
font-size: 12px;
display: inline-flex;
}
.glass-chip.dark {
color: var(--ink);
background: var(--glass-light-bg);
border-color: var(--glass-light-border);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
}
.sticky-buy-bar {
z-index: 90;
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border-top: 1px solid var(--glass-light-border);
transition: transform .25s;
position: fixed;
bottom: 0;
left: 0;
right: 0;
transform: translateY(110%);
box-shadow: 0 -8px 30px #281e0f1a;
}
.sticky-buy-bar.on {
transform: translateY(0);
}
.sticky-buy-bar .inner {
align-items: center;
gap: 16px;
max-width: 1180px;
margin: 0 auto;
padding: 12px 28px;
display: flex;
}
.sticky-buy-bar .thumb {
background: #e3e1dc center / cover no-repeat;
border-radius: 4px;
flex: none;
width: 52px;
height: 52px;
}
.sticky-buy-bar .meta {
flex: 1;
min-width: 0;
}
.sticky-buy-bar .meta .t {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 600;
overflow: hidden;
}
.sticky-buy-bar .meta .p {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--ink);
font-size: 18px;
font-weight: 600;
}
.sticky-buy-bar .cta {
background: var(--btn);
color: #fff;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 3px;
height: 44px;
padding: 0 24px;
font-size: 13px;
font-weight: 600;
}
.sticky-buy-bar .cta:hover {
background: var(--btn-hover);
}
@media (max-width: 640px) {
.sticky-buy-bar .inner {
gap: 10px;
padding: 10px 16px;
}
.sticky-buy-bar .meta .t {
font-size: 12px;
}
.sticky-buy-bar .meta .p {
font-size: 15px;
}
.sticky-buy-bar .cta {
padding: 0 14px;
font-size: 12px;
}
}
.pcard-fav {
z-index: 2;
background: var(--glass-light-bg);
width: 34px;
height: 34px;
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
cursor: pointer;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: background .15s;
display: flex;
position: absolute;
top: 10px;
right: 10px;
}
.pcard-fav:hover {
background: #fff;
}
.pcard-fav svg {
fill: none;
width: 16px;
height: 16px;
stroke: var(--ink);
stroke-width: 1.8px;
}
.pcard-fav.on svg {
fill: var(--btn);
stroke: var(--btn);
}
.content-section {
background: var(--page);
padding: 56px 28px;
}
.content-inner {
max-width: 880px;
margin: 0 auto;
}
.content-inner h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink);
margin: 32px 0 14px;
font-size: 30px;
font-weight: 600;
}
.content-inner p {
color: var(--ink-2);
margin: 0 0 16px;
font-size: 16px;
line-height: 1.7;
}
.content-inner ul {
color: var(--ink-2);
padding-left: 20px;
line-height: 1.75;
}
.mini-cart {
z-index: 250;
pointer-events: none;
visibility: hidden;
width: min(400px, 92vw);
max-width: 100vw;
height: 100dvh;
transition: transform .32s cubic-bezier(.3, .8, .3, 1), visibility 0s linear .32s;
position: fixed;
top: 0;
right: 0;
transform: translateX(100%);
}
.mini-cart.open {
pointer-events: auto;
visibility: visible;
transition: transform .32s cubic-bezier(.3, .8, .3, 1), visibility;
transform: translateX(0);
}
.mc-inner {
-webkit-backdrop-filter: blur(24px) saturate(150%);
backdrop-filter: blur(24px) saturate(150%);
pointer-events: auto;
isolation: isolate;
background: #ffffffb8;
border: 1px solid #281e0f14;
border-radius: 8px;
flex-direction: column;
display: flex;
position: absolute;
inset: 12px;
overflow: hidden;
box-shadow: 0 20px 50px #14120e40;
}
.mini-cart .mc-close, .mini-cart .mc-btn {
z-index: 2;
cursor: pointer;
position: relative;
pointer-events: auto !important;
}
.mini-cart .mc-inner, .mini-cart .mc-head, .mini-cart .mc-body, .mini-cart .mc-foot, .mini-cart .mc-actions {
pointer-events: auto;
}
.mc-head {
border-bottom: 1px solid #281e0f14;
align-items: center;
gap: 10px;
padding: 18px 20px;
display: flex;
}
.mc-head h4 {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
font-size: 18px;
font-weight: 600;
}
.mc-head .mc-count {
color: var(--muted);
font-size: 12px;
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .1em;
text-transform: uppercase;
margin-left: auto;
}
.mc-close {
cursor: pointer;
width: 32px;
height: 32px;
color: var(--ink-2);
background: #14120e0d;
border: none;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 22px;
line-height: 1;
transition: background .15s;
display: inline-flex;
}
.mc-close:hover {
background: #14120e1a;
}
.mc-body {
flex: 1;
padding: 8px 20px;
overflow-y: auto;
}
.mc-item {
border-bottom: 1px solid #281e0f14;
gap: 14px;
padding: 14px 0;
display: flex;
}
.mc-item:last-child {
border-bottom: none;
}
.mc-img {
background: #e3dccb;
border-radius: 4px;
flex: none;
width: 68px;
height: 68px;
position: relative;
overflow: hidden;
}
.mc-img img {
object-fit: contain;
}
.mc-meta {
flex-direction: column;
flex: 1;
gap: 3px;
min-width: 0;
display: flex;
}
.mc-name {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
overflow: hidden;
}
.mc-sub {
color: var(--muted);
font-size: 12px;
}
.mc-price {
color: var(--ink-2);
align-items: baseline;
gap: 8px;
margin-top: 4px;
font-size: 13px;
display: flex;
}
.mc-price strong {
color: var(--ink);
margin-left: auto;
font-size: 14px;
font-weight: 700;
}
.mc-remove {
cursor: pointer;
width: 32px;
height: 32px;
color: var(--muted);
background: none;
border: none;
border-radius: 50%;
flex: none;
justify-content: center;
align-self: flex-start;
align-items: center;
transition: background .15s, color .15s;
display: inline-flex;
}
.mc-remove:hover:not(:disabled) {
color: #c0392b;
background: #c0392b1a;
}
.mc-remove:disabled {
opacity: .4;
cursor: not-allowed;
}
.mc-remove svg {
width: 16px;
height: 16px;
}
.cart-item-meta {
color: var(--muted);
margin: 4px 0 0;
padding: 0;
font-size: 12px;
line-height: 1.5;
list-style: none;
}
.cart-item-meta li {
margin: 1px 0;
}
.cart-item-meta .cim-name {
color: var(--ink-2, var(--ink));
font-weight: 600;
}
.cart-item-meta .cim-value {
color: var(--ink);
}
.mc-foot {
background: #ffffff73;
border-top: 1px solid #281e0f14;
padding: 16px 20px 18px;
}
.mc-sum {
color: var(--ink-2);
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
font-size: 14px;
display: flex;
}
.mc-sum strong {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--ink);
letter-spacing: .02em;
font-size: 16px;
}
.mc-sum.mc-sum-discount {
color: var(--accent, #5a7a2b);
margin-bottom: 14px;
}
.mc-sum.mc-sum-discount strong {
color: var(--accent, #5a7a2b);
font-size: 16px;
}
.mc-sum.mc-sum-total {
border-top: 1px solid #281e0f1a;
margin-top: 2px;
padding-top: 10px;
}
.mc-sum.mc-sum-total span {
color: var(--ink);
font-weight: 600;
}
.mc-sum.mc-sum-total strong {
font-size: 22px;
}
.mc-coupons {
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px;
display: flex;
}
.mc-coupon-pill {
background: color-mix(in srgb,var(--accent, #5a7a2b) 10%,transparent);
border: 1px solid color-mix(in srgb,var(--accent, #5a7a2b) 30%,transparent);
border-radius: 999px;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
display: inline-flex;
}
.mc-coupon-code {
font-family: var(--font-mono, ui-monospace,monospace);
letter-spacing: .04em;
color: var(--ink);
}
.mc-coupon-saved {
color: var(--accent, #5a7a2b);
font-weight: 600;
}
.mc-pending-coupon {
background: color-mix(in srgb,var(--accent, #5a7a2b) 8%,transparent);
border: 1px solid color-mix(in srgb,var(--accent, #5a7a2b) 25%,transparent);
color: var(--ink);
border-radius: 4px;
margin: 8px 20px 16px;
padding: 10px 14px;
font-size: 12.5px;
line-height: 1.45;
}
.mc-pending-coupon strong {
font-family: var(--font-mono, ui-monospace,monospace);
letter-spacing: .04em;
}
.mc-actions {
gap: 10px;
display: flex;
}
.mc-btn {
height: 48px;
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .05em;
text-transform: uppercase;
border-radius: 4px;
flex: 1;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background .15s, border-color .15s;
display: inline-flex;
}
.mc-btn.ghost {
background: var(--white);
color: var(--ink);
border: 1px solid var(--line-2);
}
.mc-btn.ghost:hover {
background: var(--bg);
border-color: var(--ink-2);
}
.mc-btn.primary {
background: var(--cta-primary);
color: #fff;
}
.mc-btn.primary:hover {
background: var(--cta-primary-hover);
}
.mc-backdrop {
z-index: 245;
opacity: 0;
pointer-events: none;
background: #14120e59;
transition: opacity .28s;
position: fixed;
inset: 0;
}
.mc-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.sticky-buy-bar {
z-index: 150;
transition: transform .3s cubic-bezier(.3, .8, .3, 1);
position: fixed;
bottom: 0;
left: 0;
right: 0;
transform: translateY(100%);
}
.sticky-buy-bar.show {
transform: translateY(0);
}
.sbb-inner {
-webkit-backdrop-filter: blur(18px) saturate(150%);
backdrop-filter: blur(18px) saturate(150%);
background: #ffffffd1;
border-top: 1px solid #281e0f1a;
border-radius: 8px 8px 0 0;
align-items: center;
gap: 16px;
max-width: 1180px;
margin: 0 auto;
padding: 12px 28px;
display: flex;
box-shadow: 0 -6px 24px #14120e1f;
}
.sbb-img {
background: url("/assets/produkt-platzhalter.jpg") center / cover, #e3dccb;
border-radius: 4px;
flex: none;
width: 54px;
height: 54px;
}
.sbb-text {
flex: 1;
min-width: 0;
}
.sbb-name {
color: var(--ink);
white-space: nowrap;
text-overflow: ellipsis;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
overflow: hidden;
}
.sbb-meta {
color: var(--muted);
font-size: 12px;
}
.sbb-price {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--ink);
letter-spacing: .02em;
white-space: nowrap;
padding: 0 6px;
font-size: 22px;
}
.sbb-btn {
background: var(--btn);
color: #fff;
letter-spacing: .08em;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 3px;
align-items: center;
gap: 8px;
height: 44px;
padding: 0 22px;
font-size: 13px;
font-weight: 600;
transition: background .15s;
display: inline-flex;
}
.sbb-btn:hover {
background: var(--btn-hover);
}
.sbb-btn svg {
fill: currentColor;
width: 16px;
height: 16px;
}
@media (max-width: 640px) {
.sbb-inner {
border-radius: 8px 8px 0 0;
gap: 10px;
padding: 10px 14px;
}
.sbb-img, .sbb-text {
display: none;
}
.sbb-price {
padding: 0;
font-size: 18px;
}
.sbb-btn {
flex: 1;
justify-content: center;
height: 40px;
padding: 0 12px;
}
}
@media (max-width: 1024px) {
.subcat-grid, .products-grid {
grid-template-columns: repeat(3, 1fr);
}
.info-strip-inner {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1100px) {
.nav {
gap: 14px;
}
.brand {
min-width: 0;
margin-right: 0;
}
.menu {
display: none;
}
.hamburger {
display: flex;
}
}
@media (max-width: 768px) {
.topbar {
padding: 0 16px;
}
.topbar .social, .topbar .icons {
display: none;
}
.nav {
gap: 10px;
padding: 10px 16px;
}
.brand .brand-logo {
height: 30px;
}
.page-hero {
min-height: 340px;
padding: 40px 18px;
}
.subcat-section, .products-section, .content-section {
padding: 40px 18px;
}
.subcat-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.subcat-tile {
aspect-ratio: 3 / 4;
padding: 12px;
}
.subcat-tile .tlbl {
padding: 10px 10px 9px;
}
.subcat-tile .tlbl h3 {
margin-bottom: 2px;
font-size: 16px;
}
.subcat-tile .tlbl span {
margin-bottom: 7px;
font-size: 11px;
}
.subcat-tile .tlbl .tbtn {
height: 30px;
font-size: 11px;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px 14px;
}
.pcard-body {
padding: 14px 4px 0;
}
.pcard-title {
font-size: 14px;
}
.pcard-cta {
padding: 10px 14px;
font-size: 12.5px;
}
.info-strip-inner {
grid-template-columns: 1fr;
}
.fn-inner {
flex-direction: column;
align-items: flex-start;
}
.footer-newsletter {
padding: 32px 18px;
}
.fn-form {
width: 100%;
min-width: 0;
}
.fm-inner {
grid-template-columns: 1fr;
gap: 0;
}
.fm-brand {
border-bottom: 1px solid #3d3d3d;
margin-bottom: 8px;
padding-bottom: 22px;
}
.fm-col {
border-bottom: 1px solid #3d3d3d;
}
.fm-col h3 {
cursor: pointer;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 18px 0;
display: flex;
}
.fm-col h3:after {
content: "+";
color: var(--brand-green-light);
font-size: 20px;
}
.fm-col.open h3:after {
content: "−";
}
.fm-col ul {
gap: 0;
max-height: 0;
transition: max-height .3s;
overflow: hidden;
}
.fm-col.open ul {
max-height: 500px;
padding: 0 0 18px;
}
.fm-col li a {
padding: 8px 0;
display: block;
}
.footer-pay {
flex-direction: column;
align-items: center;
}
.fl-inner {
text-align: center;
flex-direction: column;
align-items: center;
}
}
@media (max-width: 480px) {
.products-grid {
grid-template-columns: 1fr;
}
}
.bottom-tabs {
display: none;
}
@media (max-width: 1100px) {
.bottom-tabs {
z-index: 90;
-webkit-backdrop-filter: var(--glass-blur);
backdrop-filter: var(--glass-blur);
border-top: 1px solid var(--glass-border);
padding: 5px 10px calc(5px + env(safe-area-inset-bottom));
background: #1e1a146b;
grid-template-columns: 1fr 1.2fr 1fr;
align-items: stretch;
gap: 6px;
transition: grid-template-columns .35s cubic-bezier(.2, .8, .2, 1);
display: grid;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.bt-item {
color: #f3efe7;
border-radius: 12px;
justify-content: center;
align-items: center;
gap: 8px;
min-height: 36px;
text-decoration: none;
transition: background .2s, transform .2s;
display: flex;
}
.bt-item:active {
transform: scale(.96);
}
.bt-item svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8px;
stroke-linecap: round;
stroke-linejoin: round;
width: 20px;
height: 20px;
}
.bt-item svg path[d^="M7 18"], .bt-item svg path[d^="M20.8"] {
fill: currentColor;
stroke: none;
}
.bt-cart {
background: var(--cta-primary);
color: #fff;
position: relative;
overflow: hidden;
box-shadow: 0 6px 18px #3e5a1c61, inset 0 1px #ffffff2e;
}
.bt-cart-icon {
display: inline-flex;
position: relative;
}
.bt-cart-badge {
color: #222;
background: #fff;
border-radius: 999px;
justify-content: center;
align-items: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
font-size: 10.5px;
font-weight: 700;
display: inline-flex;
position: absolute;
top: -6px;
right: -8px;
box-shadow: 0 2px 6px #0003;
}
.bt-split {
background: var(--cta-primary);
color: #fff;
border-radius: 14px;
align-items: stretch;
display: none;
overflow: hidden;
box-shadow: 0 6px 18px #3e5a1c61, inset 0 1px #ffffff2e;
}
.bt-split-add, .bt-split-cart {
color: #fff;
cursor: pointer;
letter-spacing: .01em;
-webkit-tap-highlight-color: transparent;
background: none;
border: 0;
justify-content: center;
align-items: center;
gap: 8px;
padding: 0 10px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.bt-split-add {
flex: auto;
font-size: 14px;
}
.bt-split-cart {
border-left: 1px solid #ffffff38;
flex: 0 0 56px;
position: relative;
}
.bt-split-cart svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8px;
stroke-linecap: round;
stroke-linejoin: round;
width: 20px;
height: 20px;
}
.bt-split-cart svg path {
fill: currentColor;
stroke: none;
}
.bt-split-cart .bt-cart-badge {
top: 6px;
right: 6px;
}
.bt-split-add:active, .bt-split-cart:active {
background: #0000001f;
}
.bt-merge-plus {
background: #fff3;
border-radius: 50%;
justify-content: center;
align-items: center;
width: 22px;
height: 22px;
font-size: 18px;
font-weight: 300;
line-height: 1;
display: inline-flex;
}
.bt-merge-price {
font-variant-numeric: tabular-nums;
font-size: 14px;
}
.bottom-tabs.merge {
grid-template-columns: .85fr 2.5fr .85fr;
}
.bottom-tabs.merge .bt-cart {
display: none;
}
.bottom-tabs.merge .bt-split {
display: flex;
}
.bottom-tabs.added .bt-split {
animation: .55s btCartAdded;
}
@keyframes btCartAdded {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(.96);
}
65% {
transform: scale(1.04);
}
}
body {
padding-bottom: 0;
}
:root {
--bt-h: calc(54px + env(safe-area-inset-bottom));
}
.nav-cart, .sticky-buy-bar {
display: none !important;
}
}
.page-faq-section {
background: var(--bg);
border-top: 1px solid var(--line);
padding: 72px 28px 80px;
}
.page-faq-inner {
max-width: 1100px;
margin: 0 auto;
}
.page-faq-head {
margin-bottom: 32px;
}
.page-faq-head .eyebrow {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
align-items: center;
gap: 10px;
margin-bottom: 12px;
font-size: 11px;
display: inline-flex;
}
.page-faq-head .eyebrow:before {
content: "";
background: var(--accent);
width: 24px;
height: 1px;
}
.page-faq-head h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--ink);
margin: 0 0 6px;
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
line-height: 1.1;
}
.page-faq-layout {
grid-template-columns: 220px 1fr;
gap: 32px;
display: grid;
}
.page-faq-layout-single {
max-width: 840px;
}
.page-faq-cats {
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
box-shadow: var(--glass-light-shadow);
border-radius: 8px;
align-self: start;
padding: 20px;
position: sticky;
top: 90px;
}
.page-faq-cats h4 {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--accent);
align-items: center;
gap: 8px;
margin: 0 0 14px;
font-size: 10px;
display: flex;
}
.page-faq-cats h4:before {
content: "";
background: var(--accent);
width: 18px;
height: 1px;
}
.page-faq-cats a {
color: var(--ink-soft, #3a3a3a);
border-radius: 4px;
padding: 9px 10px;
font-size: 13.5px;
transition: background .15s, color .15s;
display: block;
}
.page-faq-cats a:hover {
color: var(--btn);
background: #3e5a1c0f;
}
.page-faq-cats a.on {
color: var(--btn);
background: #3e5a1c14;
font-weight: 600;
}
.page-faq-search {
max-width: 640px;
margin: 0 auto 32px;
position: relative;
}
.page-faq-search input {
border: 1px solid var(--line-2);
background: var(--glass-light-bg);
width: 100%;
height: 52px;
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
color: var(--ink);
border-radius: 8px;
padding: 0 20px 0 52px;
font-family: inherit;
font-size: 15px;
transition: border-color .15s, background .15s;
}
.page-faq-search input::placeholder {
color: var(--muted);
}
.page-faq-search input {
outline: none;
}
.page-faq-search input:focus-visible {
border-color: var(--accent);
background: #fff;
}
.page-faq-search svg {
width: 20px;
height: 20px;
fill: var(--muted);
position: absolute;
top: 50%;
left: 18px;
transform: translateY(-50%);
}
.page-faq-group, .page-faq-list {
margin-bottom: 36px;
}
.page-faq-group h2, .page-faq-list h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .22em;
color: var(--accent);
align-items: center;
gap: 10px;
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
display: flex;
}
.page-faq-group h2:before, .page-faq-list h2:before {
content: "";
background: var(--accent);
width: 24px;
height: 1px;
}
.page-faq-list {
flex-direction: column;
gap: 8px;
display: flex;
}
.page-faq-item {
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
box-shadow: var(--glass-light-shadow);
border-radius: 8px;
transition: background .2s, border-color .2s, box-shadow .2s;
overflow: hidden;
}
.page-faq-item:hover {
background: #fff;
border-color: #5a7a2b33;
box-shadow: 0 8px 28px #281e0f1f;
}
.page-faq-item[open] {
background: #fff;
border-color: #5a7a2b4d;
}
.page-faq-item summary {
cursor: pointer;
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: var(--ink);
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 17px 22px;
font-size: 14.5px;
font-weight: 600;
line-height: 1.4;
list-style: none;
display: flex;
}
.page-faq-item summary::-webkit-details-marker {
display: none;
}
.page-faq-item summary:after {
content: "";
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
flex: none;
width: 10px;
height: 10px;
margin-right: 4px;
transition: transform .2s;
transform: rotate(45deg);
}
.page-faq-item[open] summary:after {
margin-top: 6px;
transform: rotate(-135deg);
}
.page-faq-item .answer {
color: var(--ink-2, #4a4a4a);
font-family: var(--font-open-sans), "Open Sans", sans-serif;
border-top: 1px solid var(--line);
padding: 16px 22px 20px;
font-size: 14px;
line-height: 1.75;
}
.page-faq-item .answer p {
margin: 0 0 10px;
}
.page-faq-item .answer p:last-child {
margin-bottom: 0;
}
.page-faq-item .answer a {
color: var(--btn);
text-underline-offset: 3px;
text-decoration: underline;
}
.page-faq-item .answer ul {
margin: 8px 0;
padding-left: 20px;
}
.page-faq-item mark {
color: var(--ink);
background: #5a7a2b26;
border-radius: 2px;
padding: 0 3px;
}
.page-faq-contact {
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
box-shadow: var(--glass-light-shadow);
text-align: center;
border-radius: 8px;
margin-top: 40px;
padding: 32px;
}
.page-faq-contact h3 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--ink);
margin: 0 0 10px;
font-size: 22px;
}
.page-faq-contact p {
color: var(--muted);
margin: 0 0 18px;
font-size: 14px;
}
.page-faq-contact a {
background: var(--btn);
color: #fff;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 4px;
height: 46px;
padding: 0 28px;
font-size: 14px;
font-weight: 600;
line-height: 46px;
transition: background .15s;
display: inline-block;
box-shadow: 0 4px 18px #0000001f;
}
.page-faq-contact a:hover {
background: var(--btn-hover);
}
.page-faq-empty {
text-align: center;
color: var(--muted);
padding: 40px;
display: none;
}
.page-faq-empty.on {
display: block;
}
.page-faq-empty a {
color: var(--btn);
text-underline-offset: 3px;
text-decoration: underline;
}
@media (max-width: 768px) {
.page-faq-section {
padding: 48px 18px 64px;
}
.page-faq-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.page-faq-cats {
gap: 8px;
padding: 14px;
display: flex;
position: static;
overflow-x: auto;
}
.page-faq-cats h4 {
display: none;
}
.page-faq-cats a {
border: 1px solid var(--line);
white-space: nowrap;
border-radius: 20px;
flex: none;
padding: 7px 14px;
font-size: 13px;
}
.page-faq-cats a.on {
color: var(--btn);
background: #3e5a1c14;
border-color: #3e5a1c33;
}
}
.cat-hero {
color: #fff;
background: linear-gradient(#14120e8c, #14120ea6), url("/hero.webp") center / cover no-repeat;
min-height: 50vh;
padding: 29px 28px 25px;
}
.cat-hero-inner {
max-width: 1280px;
margin: 0 auto;
}
.cat-hero .breadcrumb {
color: #d4cfc1;
margin-bottom: 10px;
font-size: 13px;
}
.cat-hero .breadcrumb a {
color: #d4cfc1;
}
.cat-hero .breadcrumb a:hover {
color: #fff;
}
.cat-hero .breadcrumb .sep {
opacity: .5;
margin: 0 8px;
}
.cat-hero h1 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
text-shadow: 0 2px 12px #00000059;
margin: 0;
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 600;
}
.cat-hero-sub {
color: #d4cfc1;
letter-spacing: .04em;
text-transform: uppercase;
margin: 8px 0 0;
font-size: 13px;
font-weight: 500;
}
.cat-hero-extra {
color: #b8b1a0;
margin: 10px 0 0;
font-size: 13px;
font-style: italic;
}
.cat-hero-extra a {
color: #e8e3d4;
text-underline-offset: 3px;
-webkit-text-decoration: underline #a8c16799;
text-decoration: underline #a8c16799;
text-decoration-thickness: 1px;
}
.cat-hero-extra a:hover {
color: #fff;
-webkit-text-decoration-color: var(--accent, #5a7a2b);
text-decoration-color: var(--accent, #5a7a2b);
}
.cat-description {
max-width: 1280px;
margin: 0 auto 60px;
padding: 0 28px;
}
.cat-description-title {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .06em;
color: #3a3a3a;
border-top: 1px solid var(--line);
margin: 0 0 10px;
padding: 18px 0 0;
font-size: 15px;
font-weight: 600;
}
.cat-description-body {
max-width: 760px;
color: var(--muted, #6b6b6b);
font-size: 15px;
line-height: 1.65;
}
.cat-description-body.clamped {
max-height: 6.6em;
position: relative;
overflow: hidden;
}
.cat-description-body.clamped:after {
content: "";
background: linear-gradient(#f6f4ee00,var(--page, #f6f4ee));
pointer-events: none;
height: 2.6em;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.cat-description-body p {
margin: 0 0 12px;
}
.cat-description-body p:last-child {
margin-bottom: 0;
}
.cat-description-body h2, .cat-description-body h3, .cat-description-body h4 {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--ink, #2b2b2b);
margin: 20px 0 8px;
line-height: 1.25;
}
.cat-description-body h2 {
font-size: 20px;
}
.cat-description-body h3 {
font-size: 17px;
}
.cat-description-body h4 {
text-transform: uppercase;
letter-spacing: .04em;
font-size: 15px;
}
.cat-description-body ul, .cat-description-body ol {
margin: 0 0 12px;
padding-left: 1.3em;
}
.cat-description-body li {
margin: 0 0 6px;
}
.cat-description-body a {
color: var(--accent, #5a7a2b);
text-underline-offset: 2px;
text-decoration: underline;
text-decoration-thickness: 1px;
}
.cat-description-body a:hover {
color: var(--accent-dark, #3e5a1c);
}
.cat-description-body strong, .cat-description-body b {
color: var(--ink-2, #4a4a4a);
font-weight: 600;
}
.cat-description-body blockquote {
border-left: 3px solid var(--line);
color: var(--ink-2, #4a4a4a);
margin: 0 0 12px;
padding-left: 14px;
font-style: italic;
}
.cat-description-toggle {
cursor: pointer;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--accent, #5a7a2b);
background: none;
border: none;
align-items: center;
gap: 6px;
margin-top: 14px;
padding: 0;
font-size: 13px;
font-weight: 600;
display: inline-flex;
}
.cat-description-toggle:hover {
color: var(--accent-dark, #3e5a1c);
}
.cat-description-toggle:after {
content: "↓";
font-size: 13px;
line-height: 1;
}
.cat-description-toggle[aria-expanded="true"]:after {
content: "↑";
}
.cat-layout {
grid-template-columns: 260px 1fr;
align-items: flex-start;
gap: 34px;
max-width: 1280px;
margin: 0 auto;
padding: 28px 28px 60px;
display: grid;
}
.filters {
border: 1px solid var(--line-2);
background: #fff;
border-radius: 4px;
padding: 6px 20px 18px;
position: sticky;
top: 100px;
}
.filter-group {
border-bottom: 1px solid var(--line);
padding: 14px 0;
}
.filter-group:last-of-type {
border-bottom: none;
}
.filter-group summary {
cursor: pointer;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .1em;
color: #1f1f1f;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 14px;
font-weight: 600;
list-style: none;
display: flex;
}
.filter-group summary::-webkit-details-marker {
display: none;
}
.filter-group summary:after {
content: "−";
color: var(--accent);
font-size: 18px;
font-weight: 400;
}
.filter-group:not([open]) summary:after {
content: "+";
}
.filter-body {
flex-direction: column;
gap: 9px;
padding-top: 12px;
display: flex;
}
.filter-body label {
color: var(--ink-2);
cursor: pointer;
align-items: center;
gap: 9px;
font-size: 14px;
display: flex;
}
.filter-body input[type="checkbox"] {
appearance: none;
cursor: pointer;
background: #fff;
border: 1.5px solid #b9b2a0;
border-radius: 2px;
flex: none;
width: 16px;
height: 16px;
transition: all .15s;
}
.filter-body input[type="checkbox"]:checked {
background: var(--accent);
border-color: var(--accent);
background-image: url("data:image/svg+xml;utf8,");
background-position: center;
background-repeat: no-repeat;
background-size: 80%;
}
.filter-body label:hover {
color: var(--ink);
}
.filter-body .count {
color: #a9a294;
margin-left: auto;
font-size: 13px;
}
.color-grid {
flex-wrap: wrap;
gap: 8px;
display: flex;
}
.color-sw {
cursor: pointer;
width: 28px;
height: 28px;
box-shadow: 0 0 0 1px var(--line-2);
border: 2px solid #fff;
border-radius: 50%;
padding: 0;
transition: box-shadow .15s, transform .15s;
}
.color-sw:hover {
transform: scale(1.1);
}
.color-sw[data-c="orange"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #ff5e1f8c;
background: #ff5e1f;
}
.color-sw[data-c="blue"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #0099ff8c;
background: #09f;
}
.color-sw[data-c="green"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #22e0228c;
background: #22e022;
}
.color-sw[data-c="yellow"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #e5ff008c;
background: #e5ff00;
}
.color-sw[data-c="pink"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #ff2d8a8c;
background: #ff2d8a;
}
.color-sw[data-c="red"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #ff1a1a8c;
background: #ff1a1a;
}
.color-sw[data-c="purple"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #b833ff8c;
background: #b833ff;
}
.color-sw[data-c="teal"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #00e6cc8c;
background: #00e6cc;
}
.color-sw[data-c="amber"] {
box-shadow: 0 0 0 1px var(--line-2),0 0 6px #ff95008c;
background: #ff9500;
}
.color-sw[data-c="brown"] {
background: #6b5434;
}
.color-sw[data-c="camo"] {
background: repeating-linear-gradient(45deg, #4a5a3a 0 4px, #6b5434 4px 8px, #3e4a2e 8px 12px);
}
.color-sw[data-c="black"] {
background: #2b2b2b;
}
.color-sw[data-c="grey"] {
background: #8a8578;
}
.color-sw[data-c="olive"] {
background: #6b7a2b;
}
.color-sw[data-c="white"] {
background: #f0ece2;
}
.color-sw[data-c="beige"] {
background: #c8b896;
}
.color-sw.on {
box-shadow: 0 0 0 2px var(--accent),0 0 8px #00000026;
}
.size-grid {
flex-wrap: wrap;
gap: 6px;
display: flex;
}
.size-chip {
border: 1px solid var(--line-2);
min-width: 38px;
height: 32px;
color: var(--ink);
cursor: pointer;
background: #fff;
border-radius: 3px;
padding: 0 8px;
font-size: 13px;
}
.size-chip:hover {
border-color: #9c9582;
}
.size-chip.on {
border-color: var(--ink);
border-width: 2px;
font-weight: 600;
}
.price-range {
padding: 4px 0;
}
.price-track {
background: var(--line);
border-radius: 2px;
height: 4px;
margin: 14px 0;
position: relative;
}
.price-fill {
background: var(--accent);
border-radius: 2px;
position: absolute;
inset: 0 30% 0 15%;
}
.price-handles {
height: 0;
position: relative;
}
.price-handle {
border: 2px solid var(--accent);
cursor: grab;
background: #fff;
border-radius: 50%;
width: 18px;
height: 18px;
position: absolute;
top: -11px;
}
.price-handle.lo {
left: calc(15% - 9px);
}
.price-handle.hi {
left: calc(70% - 9px);
}
.price-vals {
color: var(--ink-2);
justify-content: space-between;
font-size: 13px;
display: flex;
}
.filter-reset {
border: 1px solid var(--line-2);
width: 100%;
height: 38px;
color: var(--ink-2);
cursor: pointer;
background: #fff;
border-radius: 3px;
margin-top: 14px;
font-family: inherit;
font-size: 13px;
transition: border-color .15s, color .15s;
}
.filter-reset:hover {
border-color: var(--ink);
color: var(--ink);
}
.filters-close {
background: none;
border: none;
display: none;
}
.filters-backdrop {
display: none;
}
.cat-toolbar {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 14px;
margin-bottom: 18px;
display: flex;
}
.result-count {
color: var(--muted);
font-size: 14px;
}
.toolbar-right {
flex-wrap: wrap;
align-items: center;
gap: 14px;
display: flex;
}
.sort-select {
border: 1px solid var(--line-2);
height: 40px;
color: var(--ink);
cursor: pointer;
appearance: none;
background: #fff url("data:image/svg+xml;utf8,") right 10px center / 14px no-repeat;
border-radius: 3px;
padding: 0 32px 0 12px;
font-family: inherit;
font-size: 14px;
}
.mobile-filters-btn {
border: 1px solid var(--line-2);
height: 40px;
color: var(--ink);
cursor: pointer;
background: #fff;
border-radius: 3px;
align-items: center;
gap: 8px;
padding: 0 14px;
font-family: inherit;
font-size: 14px;
display: none;
}
.mobile-filters-btn svg {
fill: none;
stroke: currentColor;
stroke-width: 2px;
width: 16px;
height: 16px;
}
.cat-grid {
grid-template-columns: repeat(3, 1fr);
gap: 22px;
display: grid;
}
.no-results {
text-align: center;
color: var(--muted);
padding: 60px 0;
font-size: 16px;
}
.cat-pagination {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
margin-top: 36px;
display: flex;
}
.cat-pagination button, .cat-pagination a {
border: 1px solid var(--line-2);
min-width: 40px;
height: 40px;
color: var(--ink);
cursor: pointer;
background: #fff;
border-radius: 3px;
padding: 0 12px;
font-family: inherit;
font-size: 14px;
transition: border-color .15s, background .15s;
}
.cat-pagination a {
justify-content: center;
align-items: center;
text-decoration: none;
display: inline-flex;
}
.cat-pagination button:hover:not(:disabled), .cat-pagination a:hover {
border-color: var(--ink);
}
.cat-pagination button:disabled {
opacity: .4;
cursor: not-allowed;
}
.cat-pagination button.on, .cat-pagination a.on {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.cat-pagination .ell {
color: var(--muted);
padding: 0 4px;
}
.scroll-hint {
z-index: 3;
color: #ffffffd9;
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .22em;
text-transform: uppercase;
pointer-events: none;
flex-direction: column;
align-items: center;
gap: 10px;
font-size: 11px;
animation: 1.2s .3s both scrollFade;
display: flex;
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
}
.scroll-hint .mouse {
border: 1.5px solid #ffffffbf;
border-radius: 14px;
width: 26px;
height: 42px;
position: relative;
}
.scroll-hint .mouse:after {
content: "";
background: #ffffffe6;
border-radius: 2px;
width: 3px;
height: 8px;
animation: 1.8s cubic-bezier(.6, .05, .3, 1) infinite scrollWheel;
position: absolute;
top: 7px;
left: 50%;
transform: translateX(-50%);
}
.scroll-hint.hide {
opacity: 0;
transition: opacity .4s, transform .4s;
transform: translate(-50%, 20px);
}
@keyframes scrollWheel {
0% {
opacity: 0;
transform: translate(-50%);
}
30% {
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-50%, 16px);
}
}
@keyframes scrollFade {
from {
opacity: 0;
transform: translate(-50%, 10px);
}
to {
opacity: 1;
transform: translate(-50%);
}
}
.usp-band {
background: #08110a;
border-top: 1px solid #7fa23d2e;
border-bottom: 1px solid #0006;
padding: 42px 28px 64px;
position: relative;
overflow: hidden;
}
.usp-band:before {
content: "";
pointer-events: none;
opacity: .6;
background-image: linear-gradient(#ffffff05 1px, #0000 1px), linear-gradient(90deg, #ffffff05 1px, #0000 1px);
background-size: 80px 80px;
position: absolute;
inset: 0;
}
.usp-inner {
z-index: 1;
max-width: 1180px;
margin: 0 auto;
position: relative;
}
.usp-head {
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 32px;
display: flex;
}
.usp-head .eyebrow {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .22em;
text-transform: uppercase;
color: #a8c167;
align-items: center;
gap: 10px;
margin-bottom: 10px;
font-size: 11px;
display: inline-flex;
}
.usp-head .eyebrow:before {
content: "";
background: #a8c167;
width: 24px;
height: 1px;
}
.usp-head h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: #fff;
letter-spacing: .02em;
text-transform: uppercase;
max-width: 560px;
margin: 0;
font-size: clamp(24px, 2.6vw, 34px);
font-weight: 600;
line-height: 1.1;
}
.usp-head p {
color: #b8b3a3;
max-width: 360px;
margin: 0;
font-size: 13.5px;
line-height: 1.55;
}
.usp-grid {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
display: grid;
}
.usp-card {
box-shadow: none;
background: none;
border: 0;
flex-direction: column;
display: flex;
position: relative;
}
.usp-media {
aspect-ratio: 16 / 10;
background: none;
justify-content: center;
align-items: center;
width: 100%;
display: flex;
position: relative;
overflow: hidden;
}
.usp-media img {
object-fit: cover;
width: 100%;
height: 100%;
display: block;
-webkit-mask-image: radial-gradient(88% 85%, #000 55%, #0000 100%);
mask-image: radial-gradient(88% 85%, #000 55%, #0000 100%);
}
.usp-media.contain {
background: #0000002e;
}
.usp-media.contain img {
object-fit: contain;
width: 75%;
height: auto;
-webkit-mask-image: none;
mask-image: none;
}
.usp-media.lighten img {
mix-blend-mode: lighten;
object-position: center center;
-webkit-mask-image: none;
mask-image: none;
}
.usp-media .ph {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .2em;
color: #ffffff52;
text-transform: uppercase;
text-align: center;
padding: 20px;
font-size: 10px;
line-height: 1.6;
}
.usp-media .ph strong {
color: #a8c167b3;
margin-bottom: 6px;
font-size: 11px;
font-weight: 600;
display: block;
}
.usp-text {
flex-direction: column;
gap: 10px;
padding: 18px 4px 0;
display: flex;
}
.usp-text.center {
text-align: center;
align-items: center;
}
.usp-text h3 {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: .04em;
margin: 0;
font-size: 19px;
font-weight: 600;
line-height: 1.2;
}
.usp-text p {
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: #b8b3a3;
margin: 0;
font-size: 13.5px;
line-height: 1.6;
}
.usp-text .keyline {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .04em;
color: #a8c167;
text-transform: uppercase;
flex-wrap: wrap;
align-items: baseline;
gap: 10px;
margin-top: 4px;
font-size: 15px;
font-weight: 600;
display: flex;
}
.usp-text .keyline small {
font-family: var(--font-mono), "JetBrains Mono", ui-monospace, monospace;
letter-spacing: .18em;
color: #ffffff73;
text-transform: uppercase;
font-size: 9.5px;
font-weight: 400;
}
@media (max-width: 1024px) {
.usp-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
}
@media (max-width: 640px) {
.usp-band {
padding: 44px 18px;
}
.usp-grid {
grid-template-columns: 1fr;
}
.usp-head {
flex-direction: column;
align-items: flex-start;
}
}
.themenwelt-heading {
background: var(--bg);
text-align: center;
padding: 52px 28px 0;
}
.themenwelt-heading h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .06em;
color: var(--ink);
margin: 0;
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 700;
line-height: 1.1;
}
.themenwelt-heading .tw-divider {
background: var(--accent);
width: 48px;
height: 2px;
margin: 16px auto 0;
}
.kat-grid {
background: var(--bg);
flex-direction: column;
gap: 0;
width: 100%;
padding: 60px 0 40px;
display: flex;
}
.kat-row {
gap: 1.2%;
width: 100%;
height: 560px;
margin-bottom: 1.2vw;
display: flex;
}
.kat-row:last-child {
margin-bottom: 0;
}
.kat-row:first-child .kat-cell:first-child {
flex: 3;
}
.kat-row:first-child .kat-cell:last-child, .kat-row:nth-child(2) .kat-cell:first-child {
flex: 2;
}
.kat-row:nth-child(2) .kat-cell:last-child {
flex: 3;
}
.kat-cell {
position: relative;
overflow: hidden;
}
.kat-cell .kat-img {
background: center / cover no-repeat;
transition: transform .55s;
position: absolute;
inset: 0;
}
.kat-cell:hover .kat-img {
transform: scale(1.04);
}
.kat-cell:after {
content: "";
pointer-events: none;
background: linear-gradient(#0000 55%, #0000004f 100%);
position: absolute;
inset: 0;
}
.kat-label {
z-index: 2;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
background: #ffffff14;
border-top: 1px solid #ffffff2e;
justify-content: space-between;
align-items: center;
gap: 24px;
height: 25%;
padding: 24px 28px;
display: flex;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.kat-title {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: #fff;
text-transform: uppercase;
letter-spacing: .04em;
text-shadow: 0 2px 10px #0006;
margin: 0 0 8px;
font-size: clamp(22px, 2.4vw, 34px);
font-weight: 600;
line-height: 1.1;
}
.kat-desc {
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: #ffffffe0;
text-shadow: 0 1px 6px #00000080;
text-wrap: pretty;
max-width: 320px;
margin: 0;
font-size: 13.5px;
line-height: 1.5;
}
.kat-btn {
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: #fff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
white-space: nowrap;
cursor: pointer;
letter-spacing: .03em;
background: #ffffff1f;
border: 1px solid #ffffff73;
flex: none;
justify-content: center;
align-items: center;
padding: 11px 22px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: background .2s, border-color .2s;
display: inline-flex;
}
.kat-btn:hover {
background: #ffffff3d;
border-color: #ffffffb3;
}
@media (max-width: 768px) {
.kat-row {
flex-direction: column;
gap: 4px;
height: auto;
margin-bottom: 4px;
}
.kat-row:first-child .kat-cell:first-child, .kat-row:first-child .kat-cell:last-child, .kat-row:nth-child(2) .kat-cell:first-child, .kat-row:nth-child(2) .kat-cell:last-child {
flex: none;
height: 280px;
}
.kat-label {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
height: 30%;
padding: 14px 18px;
}
.kat-title {
margin: 0 0 4px;
font-size: 18px;
}
.kat-desc {
font-size: 12px;
}
.kat-btn {
padding: 8px 16px;
font-size: 12px;
}
}
@media (max-width: 1024px) and (min-width: 901px) {
.cat-layout {
grid-template-columns: 220px 1fr;
gap: 24px;
}
.filters {
padding: 6px 16px 18px;
}
.cat-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
}
@media (max-width: 900px) {
.cat-layout {
grid-template-columns: 1fr;
gap: 0;
}
.filters {
z-index: 250;
border: none;
border-radius: 0;
max-width: 340px;
padding: 20px;
transition: transform .28s;
position: fixed;
inset: 0;
overflow-y: auto;
transform: translateX(-100%);
}
.filters.open {
transform: translateX(0);
}
.filters-backdrop {
z-index: 240;
opacity: 0;
pointer-events: none;
background: #00000080;
transition: opacity .25s;
display: block;
position: fixed;
inset: 0;
}
.filters-backdrop.on {
opacity: 1;
pointer-events: auto;
}
.mobile-filters-btn {
display: inline-flex;
}
.filters-close {
cursor: pointer;
background: none;
border: none;
width: 36px;
height: 36px;
font-size: 28px;
position: absolute;
top: 14px;
right: 14px;
display: block !important;
}
.cat-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.cat-hero {
padding: 19px 16px 17px;
}
.cat-description {
margin-bottom: 40px;
padding: 0 16px;
}
.cat-layout {
padding: 18px 16px 40px;
}
.cat-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media (max-width: 480px) {
.cat-grid {
grid-template-columns: 1fr;
}
}
.fn-form-success {
color: #2d7a2d;
border: 1px solid #2d7a2d;
border-radius: 6px;
margin-top: .75rem;
padding: 1rem;
}
.fn-form-error {
color: #c0392b;
flex-basis: 100%;
margin: 0;
font-size: .875rem;
}
.fn-form-hint {
color: #cdd5b8;
flex-basis: 100%;
margin: 0;
font-size: .75rem;
}
.fn-form-hint a {
color: #e6efce;
font-weight: 600;
text-decoration: underline;
}
.fn-form-hint a:hover {
color: #fff;
}
.ck-header {
z-index: 50;
border-bottom: 1px solid var(--line);
background: #fff;
position: sticky;
top: 0;
}
.ck-header-inner {
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 14px 28px;
display: grid;
}
.ck-header-brand {
flex: none;
align-items: center;
display: inline-flex;
}
.ck-header-brand img {
width: auto;
height: 40px;
display: block;
}
.ck-header-trust {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 22px;
display: flex;
}
.ck-trust-item {
color: var(--ink-2);
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
display: inline-flex;
}
.ck-trust-item svg {
width: 18px;
height: 18px;
color: var(--accent);
flex: none;
}
.ck-header-phone {
color: var(--ink);
justify-self: end;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
}
.ck-header-phone svg {
width: 18px;
height: 18px;
color: var(--accent);
}
.ck-header-phone:hover {
color: var(--accent);
}
.icon-btn.auth-on, .bt-item.auth-on {
position: relative;
}
.auth-dot {
background: var(--accent);
border: 2px solid #fff;
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
top: 4px;
right: 4px;
}
.gr-inline {
color: var(--ink-2);
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
display: inline-flex;
}
.gr-inline:hover {
color: var(--accent);
}
.gr-inline-rating {
color: var(--ink);
font-weight: 700;
}
.gr-inline-count {
color: var(--muted);
font-size: 12px;
font-weight: 400;
}
.gr-stars-inline {
align-items: center;
gap: 1px;
margin-right: 2px;
display: inline-flex;
}
.gr-stars-inline .gr-star {
width: 14px;
height: 14px;
line-height: 0;
display: inline-block;
position: relative;
}
.gr-stars-inline .gr-star-bg, .gr-stars-inline .gr-star-fg {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
}
@media (max-width: 780px) {
.ck-header-inner {
grid-template-columns: 1fr auto;
gap: 8px 14px;
padding: 10px 16px;
}
.ck-header-brand {
grid-area: 1 / 1;
}
.ck-header-brand img {
height: 30px;
}
.ck-header-phone {
grid-area: 1 / 2;
font-size: 13px;
}
.ck-header-phone svg {
width: 16px;
height: 16px;
}
.ck-header-trust {
border-top: 1px solid var(--line);
grid-area: 2 / 1 / auto / -1;
justify-content: space-between;
gap: 6px;
padding-top: 8px;
font-size: 11px;
}
.ck-trust-item {
text-align: center;
flex: 1;
justify-content: center;
gap: 5px;
font-size: 11px;
}
.ck-trust-item svg {
width: 14px;
height: 14px;
}
.ck-header-trust > .gr-inline {
border-top: 1px solid var(--line);
flex-basis: 100%;
justify-content: center;
margin-top: 8px;
padding-top: 10px;
font-size: 13px;
}
.gr-stars-inline .gr-star {
width: 16px;
height: 16px;
}
}
.price-range-wrap {
padding: 12px 4px 4px;
}
.price-range-wrap .rc-slider-track {
background: var(--accent, #7fa23d);
}
.price-range-wrap .rc-slider-handle {
border-color: var(--accent, #7fa23d);
opacity: 1;
background: #fff;
width: 18px;
height: 18px;
margin-top: -7px;
}
.price-range-wrap .rc-slider-handle:hover, .price-range-wrap .rc-slider-handle:focus, .price-range-wrap .rc-slider-handle-dragging {
border-color: var(--accent, #7fa23d) !important;
box-shadow: 0 0 0 4px #7fa23d33 !important;
}
.price-range-wrap .rc-slider-rail {
background: var(--line, #e7e3d6);
}
.price-range-values {
color: var(--ink-2, #555);
justify-content: space-between;
margin-top: 12px;
font-size: 13px;
display: flex;
}
.active-pills {
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
display: flex;
}
.active-pills .pill {
background: var(--accent-2, #f3eedd);
height: 30px;
color: var(--ink, #1a1a1a);
border: 1px solid var(--line-2, #d5cfb8);
cursor: pointer;
border-radius: 999px;
align-items: center;
gap: 6px;
padding: 0 12px;
font-size: 13px;
transition: background .15s, border-color .15s;
display: inline-flex;
}
.active-pills .pill:hover {
background: var(--accent, #e5dabc);
border-color: var(--ink-2, #888);
}
.active-pills .pill-x {
opacity: .6;
font-size: 16px;
line-height: 1;
}
.active-pills .pill-clear {
height: 30px;
color: var(--muted, #6b6b6b);
cursor: pointer;
background: none;
border: none;
padding: 0 12px;
font-size: 13px;
text-decoration: underline;
}
.active-pills .pill-clear:hover {
color: var(--ink, #1a1a1a);
}
.catalog-empty {
text-align: center;
border: 1px solid var(--line, #e7e3d6);
background: #fff;
border-radius: 4px;
grid-column: 1 / -1;
padding: 80px 20px;
}
.catalog-empty h3 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
margin: 0 0 12px;
font-size: 22px;
}
.catalog-empty p {
color: var(--muted, #6b6b6b);
margin: 0 0 18px;
}
.catalog-empty button {
background: var(--btn, #2f4417);
color: #fff;
cursor: pointer;
height: 40px;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .06em;
border: none;
border-radius: 3px;
padding: 0 20px;
font-size: 13px;
font-weight: 600;
}
.sf-teaser {
max-width: 1280px;
margin: 0 auto 18px;
padding: 0 24px;
}
.sf-teaser-inner {
background: linear-gradient(90deg, var(--bg) 0%, var(--page) 100%);
border: 1px solid var(--accent);
border-left: 4px solid var(--accent);
border-radius: 3px;
align-items: center;
gap: 16px;
padding: 14px 18px;
display: flex;
position: relative;
}
.sf-teaser-icon {
background: var(--accent);
color: #fff;
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
width: 38px;
height: 38px;
display: flex;
}
.sf-teaser-icon svg {
width: 22px;
height: 22px;
}
.sf-teaser-text {
flex-direction: column;
flex: 1;
gap: 2px;
min-width: 0;
display: flex;
}
.sf-teaser-text strong {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--ink);
letter-spacing: .01em;
font-size: 15px;
font-weight: 600;
}
.sf-teaser-text span {
color: var(--ink-2);
font-size: 13px;
line-height: 1.4;
}
.sf-teaser-cta {
background: var(--btn);
color: #fff;
font-size: 13px;
font-weight: 600;
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .04em;
text-transform: uppercase;
white-space: nowrap;
border-radius: 3px;
align-items: center;
padding: 10px 18px;
text-decoration: none;
transition: background .15s;
display: inline-flex;
}
.sf-teaser-cta:hover {
background: var(--btn-hover);
color: #fff;
}
.sf-teaser-close {
cursor: pointer;
width: 24px;
height: 24px;
color: var(--muted);
background: none;
border: none;
border-radius: 50%;
justify-content: center;
align-items: center;
font-size: 18px;
line-height: 1;
transition: background .15s, color .15s;
display: flex;
position: absolute;
top: 6px;
right: 8px;
}
.sf-teaser-close:hover {
color: var(--ink);
background: #0000000d;
}
@media (max-width: 720px) {
.sf-teaser-inner {
flex-wrap: wrap;
padding-right: 36px;
}
.sf-teaser-text {
flex-basis: 100%;
min-width: 0;
}
.sf-teaser-cta {
justify-content: center;
width: 100%;
}
}
.interlude-band {
background: var(--page);
padding: 48px 28px;
}
.interlude-inner {
flex-direction: column;
align-items: center;
gap: 32px;
max-width: 900px;
margin: 0 auto;
display: flex;
}
.interlude-quote {
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: var(--ink-2);
text-align: center;
text-wrap: pretty;
max-width: 720px;
font-size: clamp(17px, 2vw, 22px);
line-height: 1.7;
}
.interlude-stats {
border-top: 1px solid var(--line-2);
grid-template-columns: repeat(3, 1fr);
gap: 0;
width: 100%;
display: grid;
}
.interlude-stat {
border-right: 1px solid var(--line-2);
flex-direction: column;
align-items: center;
gap: 10px;
padding: 20px 28px;
display: flex;
}
.interlude-stat:last-child {
border-right: none;
}
.interlude-stat .stat-num {
font-family: var(--font-oswald), "Oswald", sans-serif;
color: var(--accent);
letter-spacing: .02em;
text-align: center;
font-size: clamp(36px, 4vw, 52px);
font-weight: 700;
line-height: 1;
}
.interlude-stat .stat-num.stat-text {
letter-spacing: .01em;
font-size: clamp(18px, 2.2vw, 28px);
line-height: 1.2;
}
.interlude-stat .stat-label {
font-family: var(--font-open-sans), "Open Sans", sans-serif;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
font-size: 13px;
}
@media (max-width: 640px) {
.interlude-band {
padding: 64px 18px;
}
.interlude-stats {
border-top: none;
grid-template-columns: 1fr;
}
.interlude-stat {
border-right: none;
border-top: 1px solid var(--line-2);
padding: 28px 18px;
}
}
.landing-seo {
background: var(--page, #f6f4ee);
padding: 8px 28px 56px;
}
.landing-seo-inner {
max-width: 820px;
margin: 0 auto;
}
.landing-seo h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink, #2b2b2b);
margin: 0 0 16px;
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 600;
}
.landing-seo-body {
color: var(--ink-2, #4a4a4a);
font-size: 15.5px;
line-height: 1.7;
}
.landing-seo-body p {
margin: 0 0 14px;
}
.landing-seo-body p:last-child {
margin-bottom: 0;
}
.landing-seo-body a {
color: var(--accent, #5a7a2b);
text-underline-offset: 2px;
text-decoration: underline;
text-decoration-thickness: 1px;
}
.landing-seo-body a:hover {
color: var(--accent-dark, #3e5a1c);
}
@media (max-width: 768px) {
.landing-seo {
padding: 4px 16px 40px;
}
}
.fsp {
margin: 2px 0 12px;
font-size: 11.5px;
}
.fsp-text {
color: var(--muted, #6a6a6a);
margin: 0 0 4px;
}
.fsp-text strong {
color: var(--accent-dark, #3e5a1c);
font-weight: 600;
}
.fsp-done {
color: var(--muted, #6a6a6a);
margin: 0 0 4px;
font-weight: 500;
}
.fsp-bar {
background: var(--line, #e3e1dc);
border-radius: 2px;
height: 3px;
overflow: hidden;
}
.fsp-bar span {
background: var(--accent, #5a7a2b);
height: 100%;
transition: width .3s;
display: block;
}
.versand-page {
max-width: 880px;
margin: 0 auto;
padding: 56px 28px 90px;
}
.versand-hero {
text-align: center;
margin-bottom: 40px;
}
.versand-hero .eyebrow {
margin-bottom: 10px;
}
.versand-hero h1 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink);
margin: 0 0 14px;
font-size: clamp(30px, 4.4vw, 48px);
font-weight: 700;
line-height: 1.05;
}
.versand-sub {
color: var(--ink-2);
max-width: 540px;
margin: 0 auto;
font-size: 16px;
line-height: 1.6;
}
.versand-block {
margin-bottom: 52px;
}
.versand-block > h2 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink);
margin: 0 0 22px;
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 600;
}
.versand-table {
border-collapse: collapse;
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
width: 100%;
overflow: hidden;
}
.versand-table th, .versand-table td {
text-align: left;
border-bottom: 1px solid var(--line);
padding: 16px 22px;
font-size: 15px;
line-height: 1.5;
}
.versand-table tr:last-child th, .versand-table tr:last-child td {
border-bottom: none;
}
.versand-table th {
color: var(--ink);
white-space: nowrap;
width: 38%;
font-weight: 600;
}
.versand-table td {
color: var(--ink-2);
}
.versand-table strong {
color: var(--ink);
}
.vr-stepper {
flex-direction: column;
gap: 12px;
margin: 0 0 28px;
padding: 0;
list-style: none;
display: flex;
}
.vr-step {
background: var(--card);
border: 1px solid var(--line);
border-radius: 10px;
transition: border-color .2s;
overflow: hidden;
}
.vr-step.is-open {
border-color: var(--brand-green);
}
.vr-step-head {
cursor: pointer;
text-align: left;
background: none;
border: none;
align-items: center;
gap: 14px;
width: 100%;
padding: 18px 20px;
font-family: inherit;
display: flex;
}
.vr-step-num {
background: var(--line);
width: 30px;
height: 30px;
color: var(--ink-2);
font-family: var(--font-oswald), "Oswald", sans-serif;
border-radius: 50%;
flex: none;
justify-content: center;
align-items: center;
font-size: 15px;
font-weight: 600;
transition: background .2s, color .2s;
display: flex;
}
.vr-step.is-open .vr-step-num {
background: var(--brand-green);
color: #fff;
}
.vr-step-title {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .02em;
color: var(--ink);
flex: 1;
font-size: 16px;
font-weight: 600;
}
.vr-step-chevron {
width: 20px;
height: 20px;
color: var(--muted);
flex: none;
transition: transform .2s;
}
.vr-step.is-open .vr-step-chevron {
transform: rotate(180deg);
}
.vr-step-body {
padding: 0 20px 22px;
}
.vr-step-body.is-collapsed {
display: none;
}
.vr-step-hint {
color: var(--ink-2);
margin: 0 0 18px;
font-size: 14px;
line-height: 1.55;
}
.vr-step-hint strong {
color: var(--ink);
}
.vr-step-text p {
color: var(--ink-2);
margin: 0 0 12px;
font-size: 14.5px;
line-height: 1.6;
}
.vr-step-text p:last-child {
margin: 0;
}
.vr-step-text strong {
color: var(--ink);
}
.vr-dhl {
color: #000;
height: 48px;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .05em;
background: #fc0;
border-radius: 6px;
align-items: center;
padding: 0 26px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: filter .2s;
display: inline-flex;
}
.vr-dhl:hover {
filter: brightness(.94);
}
.versand-widerruf-link {
color: var(--ink-2);
margin: 18px 0 0;
font-size: 14px;
}
.versand-widerruf-link a {
color: var(--brand-green);
text-decoration: underline;
}
.page-faq-img {
border-radius: 8px;
width: 100%;
max-width: 520px;
height: auto;
margin: 14px 0 0;
display: block;
}
.return-form {
display: block;
}
.rf-printhead {
display: none;
}
.rf-lookup {
border: 1px solid var(--line);
background: #5a7a2b0d;
border-radius: 8px;
margin: 0 0 24px;
padding: 18px;
}
.rf-lookup .rf-subhead {
margin: 0 0 12px;
}
.rf-lookup-guest {
grid-template-columns: 1fr 1fr auto;
align-items: end;
gap: 12px;
display: grid;
}
.rf-lookup-btn {
background: var(--cta-primary);
color: #fff;
height: 42px;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
cursor: pointer;
white-space: nowrap;
border: none;
border-radius: 6px;
padding: 0 18px;
font-size: 13px;
font-weight: 600;
}
.rf-lookup-btn:hover {
background: var(--cta-primary-hover);
}
.rf-lookup-btn:disabled {
opacity: .5;
cursor: not-allowed;
}
.rf-lookup-error {
color: #c0392b;
margin: 10px 0 0;
font-size: 13px;
}
@media (max-width: 640px) {
.rf-lookup-guest {
grid-template-columns: 1fr;
}
.rf-lookup-btn {
width: 100%;
}
}
.rf-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
display: grid;
}
.rf-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.rf-contact {
margin-top: 4px;
}
.rf-field {
flex-direction: column;
gap: 6px;
display: flex;
}
.rf-field span {
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: .04em;
font-size: 12px;
font-weight: 600;
}
.return-form input, .return-form select {
border: 1px solid var(--line-2);
height: 42px;
color: var(--ink);
background: #fff;
border-radius: 6px;
padding: 0 12px;
font-family: inherit;
font-size: 14px;
}
.return-form input::placeholder {
color: var(--muted);
}
.return-form input:focus, .return-form select:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 3px #5a7a2b1f;
}
.rf-subhead {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .03em;
color: var(--ink);
margin: 0 0 14px;
font-size: 14px;
font-weight: 600;
}
.rf-table {
flex-direction: column;
gap: 10px;
display: flex;
}
.rf-row {
grid-template-columns: 1.1fr .6fr 2fr 1.5fr 2fr;
align-items: center;
gap: 10px;
display: grid;
}
.rf-cell {
min-width: 0;
display: block;
}
.rf-cell-label {
display: none;
}
.rf-row input, .rf-row select {
width: 100%;
min-width: 0;
}
.rf-row-head span {
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: .03em;
font-size: 11px;
font-weight: 700;
}
.rf-addrow {
border: 1px dashed var(--line-2);
color: var(--brand-green);
cursor: pointer;
background: none;
border-radius: 6px;
margin: 14px 0 0;
padding: 10px 16px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
transition: background .15s, border-color .15s;
}
.rf-addrow:hover {
border-color: var(--accent);
background: #5a7a2b0f;
}
.rf-addnote {
color: var(--brand-green);
cursor: pointer;
text-underline-offset: 3px;
background: none;
border: none;
margin: 18px 0 0;
padding: 0;
font-family: inherit;
font-size: 14px;
font-weight: 600;
text-decoration: underline;
}
.rf-addnote:hover {
color: var(--cta-primary-hover);
}
.rf-notefield {
margin-top: 18px;
}
.rf-optional {
color: var(--ink-2);
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
.rf-textarea {
border: 1px solid var(--line-2);
min-height: 84px;
color: var(--ink);
resize: vertical;
background: #fff;
border-radius: 6px;
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
line-height: 1.5;
}
.rf-textarea:focus {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 3px #5a7a2b1f;
}
.rf-note {
color: var(--ink-2);
background: #5a7a2b0f;
border: 1px solid #5a7a2b2e;
border-radius: 8px;
margin: 24px 0 0;
padding: 16px 18px;
font-size: 13px;
line-height: 1.6;
}
.rf-note strong {
color: var(--ink);
}
.rf-actions {
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
display: flex;
}
.rf-print {
background: var(--cta-primary);
color: #fff;
height: 50px;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .05em;
cursor: pointer;
border: none;
border-radius: 6px;
padding: 0 28px;
font-size: 14px;
font-weight: 600;
transition: background .2s;
}
.rf-print:hover {
background: var(--cta-primary-hover);
}
.rf-dhl {
color: #000;
height: 50px;
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .05em;
background: #fc0;
border-radius: 6px;
align-items: center;
padding: 0 28px;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: filter .2s;
display: inline-flex;
}
.rf-dhl:hover {
filter: brightness(.94);
}
@media (max-width: 640px) {
.versand-page {
padding: 40px 18px 64px;
}
.vr-step-head {
padding: 16px;
}
.vr-step-body {
padding: 0 16px 18px;
}
.rf-grid {
grid-template-columns: 1fr;
}
.rf-table {
gap: 14px;
}
.rf-row {
border: 1px solid var(--line);
background: #fff;
border-radius: 8px;
flex-direction: column;
gap: 12px;
padding: 16px;
display: flex;
}
.rf-table .rf-row-head {
display: none;
}
.rf-cell {
flex-direction: column;
gap: 5px;
display: flex;
}
.rf-cell-label {
color: var(--ink-2);
text-transform: uppercase;
letter-spacing: .03em;
font-size: 12px;
font-weight: 600;
display: block;
}
.rf-actions {
flex-direction: column;
}
.rf-print, .rf-dhl {
justify-content: center;
width: 100%;
}
.versand-table th {
white-space: normal;
}
}
@media print {
body * {
visibility: hidden;
}
.vr-step-head, .vr-step-body {
display: none !important;
}
.vr-step-body-form {
display: block !important;
}
.vr-step {
border: none !important;
}
.return-form, .return-form * {
visibility: visible;
}
.return-form {
color: #000;
background: #fff;
border: none;
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
.rf-printhead {
border-bottom: 2px solid #000;
flex-direction: column;
gap: 2px;
margin-bottom: 20px;
padding-bottom: 8px;
display: flex;
}
.rf-printhead strong {
font-size: 15px;
}
.rf-printhead span {
font-size: 12px;
}
.return-form input, .return-form select {
appearance: none;
height: auto;
box-shadow: none;
border: none;
border-bottom: 1px solid #000;
border-radius: 0;
padding: 2px 4px;
}
.return-form textarea {
box-shadow: none;
border: 1px solid #000;
border-radius: 0;
min-height: 48px;
padding: 4px 6px;
}
.rf-actions, .rf-addrow, .rf-addnote, .rf-lookup {
display: none;
}
.rf-note {
background: none;
border: 1px solid #000;
}
}
.ck-gogreen {
background: #5a7a2b0f;
border: 1px solid #5a7a2b2e;
border-radius: 4px;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
padding: 10px 14px;
display: flex;
}
.ck-gogreen-logo {
flex: none;
display: block;
}
.ck-gogreen-body {
flex: 1;
min-width: 0;
}
.ck-gogreen-label {
color: var(--accent);
margin-bottom: 4px;
font-size: 12.5px;
font-weight: 600;
display: block;
}
.ck-gogreen-note {
color: var(--muted);
font-size: 12px;
}
.ck-gogreen-note summary {
cursor: pointer;
color: var(--accent);
align-items: center;
gap: 4px;
font-size: 12px;
list-style: none;
display: inline-flex;
}
.ck-gogreen-note summary::-webkit-details-marker {
display: none;
}
.ck-gogreen-note summary:after {
content: "▸";
color: var(--accent);
margin-left: 2px;
font-size: 10px;
transition: transform .2s;
display: inline-block;
}
.ck-gogreen-note[open] summary:after {
transform: rotate(90deg);
}
.ck-gogreen-note p {
color: var(--muted);
margin: 6px 0 0;
font-size: 11.5px;
line-height: 1.55;
}
.ck-gogreen-note p a {
color: var(--accent);
text-underline-offset: 2px;
text-decoration: underline;
}
.fp-badges .fp-gogreen-badge {
color: var(--brand-green-light);
font-size: 12px;
text-decoration: none !important;
}
.fp-badges .fp-gogreen-badge:hover {
color: #fff;
}
.fp-gogreen-badge img {
display: block;
}
/* [project]/app/globals.css [app-client] (css) */
main {
min-height: calc(100vh - 120px);
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 2px;
}
.skip-link {
z-index: 9999;
background: var(--ink);
color: #fff;
padding: 12px 20px;
font-family: inherit;
font-weight: 600;
text-decoration: none;
position: absolute;
top: 0;
left: -9999px;
}
.skip-link:focus, .skip-link:focus-visible {
top: 16px;
left: 16px;
}
.nav-loader {
background: var(--accent);
z-index: 99999;
transform-origin: 0;
pointer-events: none;
height: 3px;
animation: 2.5s cubic-bezier(.2, .7, .4, 1) forwards nav-loader-progress;
position: fixed;
top: 0;
left: 0;
right: 0;
}
@keyframes nav-loader-progress {
0% {
transform: scaleX(0);
}
30% {
transform: scaleX(.55);
}
70% {
transform: scaleX(.85);
}
100% {
transform: scaleX(.95);
}
}
.btn-primary {
background: var(--btn);
color: var(--white, #fff);
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
border: none;
border-radius: 3px;
align-items: center;
gap: 8px;
padding: 12px 24px;
font-family: Oswald, sans-serif;
font-size: 15px;
font-weight: 600;
transition: background .2s;
display: inline-flex;
}
.btn-primary:hover {
background: var(--btn-hover);
color: #fff;
}
.btn-secondary {
color: var(--ink);
border: 2px solid var(--line);
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
background: none;
border-radius: 3px;
align-items: center;
padding: 10px 22px;
font-family: Oswald, sans-serif;
font-size: 15px;
font-weight: 600;
transition: border-color .2s, background .2s;
display: inline-flex;
}
.btn-secondary:hover {
border-color: var(--ink);
background: #0000000a;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
:root {
--white: #fff;
}
/* [project]/components/CookieBanner.css [app-client] (css) */
.cookie-banner {
z-index: 240;
background: var(--glass-light-bg);
-webkit-backdrop-filter: var(--glass-light-blur);
backdrop-filter: var(--glass-light-blur);
border: 1px solid var(--glass-light-border);
box-shadow: var(--glass-light-shadow);
color: var(--ink);
border-radius: 4px;
animation: .35s cubic-bezier(.3, .8, .3, 1) both cookie-rise;
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
}
@keyframes cookie-rise {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cookie-inner {
flex-wrap: wrap;
align-items: center;
gap: 24px;
max-width: 1180px;
margin: 0 auto;
padding: 20px 24px;
display: flex;
}
.cookie-text {
flex: 420px;
min-width: 0;
}
.cookie-text h4 {
font-family: var(--font-oswald), "Oswald", sans-serif;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink);
margin: 0 0 8px;
font-size: 14px;
font-weight: 600;
}
.cookie-text p {
color: var(--ink-2);
margin: 0;
font-size: 13.5px;
line-height: 1.6;
}
.cookie-text a {
color: var(--accent);
text-underline-offset: 3px;
text-decoration: underline;
}
.cookie-details {
color: var(--muted);
flex-direction: column;
gap: 6px;
margin: 14px 0 0;
padding: 0;
font-size: 12.5px;
list-style: none;
display: flex;
}
.cookie-details li strong {
color: var(--ink);
margin-right: 6px;
}
.cookie-actions {
flex-wrap: wrap;
align-items: center;
gap: 10px;
display: flex;
}
.cookie-btn {
height: 40px;
font-family: var(--font-oswald), "Oswald", sans-serif;
letter-spacing: .06em;
text-transform: uppercase;
cursor: pointer;
border-radius: 3px;
justify-content: center;
align-items: center;
padding: 0 18px;
font-size: 13px;
font-weight: 600;
transition: background .15s, border-color .15s, color .15s;
display: inline-flex;
}
.cookie-btn-primary {
background: var(--btn);
color: #fff;
border: 1px solid var(--btn);
}
.cookie-btn-primary:hover {
background: var(--btn-hover);
border-color: var(--btn-hover);
}
.cookie-btn-ghost {
color: var(--ink);
border: 1px solid var(--line-2);
background: none;
}
.cookie-btn-ghost:hover {
border-color: var(--ink);
background: #14120e0a;
}
@media (max-width: 720px) {
.cookie-banner {
bottom: 8px;
left: 8px;
right: 8px;
}
.cookie-inner {
gap: 14px;
padding: 16px 18px;
}
.cookie-actions {
width: 100%;
}
.cookie-btn {
flex: 1;
min-width: 0;
padding: 0 10px;
}
}
/*# sourceMappingURL=%5Broot-of-the-server%5D__11ek8fj._.css.map*/