@property --progress {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
:root {
--z-header: 60;
--z-menu: 90;
--z-drawer: 100;
--z-toast: 120;
--admin-offset: 0px;
--shell-scrim: color-mix(in oklab, var(--moss-950) 62%, transparent);
}
.admin-bar { --admin-offset: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
.admin-bar { --admin-offset: 0px; } } html.is-scroll-locked { overflow: hidden; }
html.is-scroll-locked body { padding-right: var(--scrollbar-comp, 0px); } .announce :focus-visible,
.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible,
.ormus-drawer__head :focus-visible,
.ormus-toast :focus-visible { outline-color: var(--focus-on-moss); } .announce {
position: relative;
z-index: calc(var(--z-header) + 1);
background: var(--moss-950);
color: var(--on-moss-soft);
font-size: var(--fs-micro);
line-height: 1.35;
letter-spacing: .02em;
}
.announce__inner {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 2.25rem;
padding-block: .45rem;
text-align: center;
}
.announce__icon {
flex: none;
width: 1.15rem;
height: 1.15rem;
color: var(--gold-400);
}
.announce__text { margin: 0; }
.announce__text strong,
.announce__text .amount { color: var(--on-moss); font-weight: 650; }
.announce__sep {
display: inline-block;
width: 4px;
height: 4px;
margin: 0 .7em .18em;
border-radius: 50%;
background: var(--gold-500);
vertical-align: middle;
}
@media (max-width: 599px) {
.announce__extra { display: none; }
} .site-header {
position: sticky;
top: var(--admin-offset);
z-index: var(--z-header);
height: var(--header-h);
color: var(--on-moss);
background-color: var(--moss-900);
border-bottom: 1px solid transparent;
transition:
transform var(--d-3) var(--ease-out),
background-color var(--d-2) var(--ease-out),
border-color var(--d-2) var(--ease-out),
box-shadow var(--d-2) var(--ease-out);
}
.site-header:not(.is-ready) { transition: none; } .site-header::before {
content: "";
position: absolute;
inset: 0 0 -70%;
z-index: -1;
background: linear-gradient(to bottom, var(--shell-scrim), transparent);
opacity: 0;
pointer-events: none;
transition: opacity var(--d-2) var(--ease-out);
}
.site-header.is-scrolled { background-color: color-mix(in oklab, var(--moss-900) 94%, transparent);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
backdrop-filter: blur(16px) saturate(1.2);
border-bottom-color: var(--line-on-moss);
box-shadow: var(--shadow-1);
}
.site-header.is-hidden {
transform: translate3d(0, calc(-100% - var(--admin-offset) - 2px), 0);
box-shadow: none;
}
.site-header.is-hidden:focus-within { transform: none; } .has-hero .site-header { margin-bottom: calc(var(--header-h) * -1); }
.has-hero .site-header:not(.is-scrolled) { background-color: transparent; }
.has-hero .site-header:not(.is-scrolled)::before { opacity: 1; }
.site-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--s-5);
height: 100%;
} .brand {
justify-self: start;
display: inline-flex;
align-items: center;
gap: .7rem;
min-height: 44px;
color: inherit;
text-decoration: none;
border-radius: var(--r-sm);
}
.brand__logo {
width: auto;
height: 40px;
max-width: 76px;
object-fit: contain;
transform-origin: 50% 92%;
transition: transform var(--d-3) var(--ease-out);
}
.brand:hover .brand__logo { transform: rotate(-5deg) scale(1.05); } .brand__word {
font-family: var(--font-display);
font-size: 1.375rem;
font-weight: 430;
line-height: 1;
letter-spacing: -.02em;
font-variation-settings: "opsz" 36;
} .primary-nav { justify-self: center; }
.primary-nav__list {
display: flex;
align-items: center;
gap: clamp(1.5rem, 3vw, 3rem);
margin: 0;
padding: 0;
list-style: none;
}
.primary-nav__list a {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding-inline: .2rem;
color: var(--on-moss-soft);
font-size: .9375rem;
font-weight: 600;
letter-spacing: .015em;
text-decoration: none;
transition: color var(--d-2) var(--ease-out);
} .primary-nav__list a::after {
content: "";
position: absolute;
left: 50%;
bottom: 2px;
width: 7px;
height: 7px;
margin-left: -3.5px;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 55%, var(--gold-600));
opacity: 0;
transform: translateY(-14px) rotate(45deg) scale(.45);
transition: transform 560ms var(--ease-drop), opacity var(--d-1) var(--ease-out);
}
.primary-nav__list a:hover,
.primary-nav__list a:focus-visible { color: var(--on-moss); }
.primary-nav__list a:hover::after { opacity: .6; transform: translateY(0) rotate(45deg) scale(.72); }
.primary-nav__list .current-menu-item > a,
.primary-nav__list .is-current > a { color: var(--on-moss); }
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .is-current > a::after { opacity: 1; transform: translateY(0) rotate(45deg) scale(1); } .shell-actions {
justify-self: end;
display: flex;
align-items: center;
gap: .125rem;
margin-right: -.6rem;
}
.shell-icon {
position: relative;
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: inherit;
text-decoration: none;
-webkit-tap-highlight-color: transparent;
transition: background-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.shell-icon:hover { background-color: color-mix(in oklab, var(--lichen-50) 10%, transparent); }
.shell-icon:active { transform: scale(.93); }
.shell-icon .icon { width: 22px; height: 22px; } .shell-cart .icon--bag {
transform-origin: 50% 90%;
transition: transform var(--d-3) var(--ease-out);
}
.shell-cart:hover .icon--bag { transform: rotate(-7deg); }
.shell-cart__drop {
position: absolute;
top: 5px;
left: 50%;
width: 8px;
height: 8px;
margin-left: -4px;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 60%);
opacity: 0;
transform: translateY(-16px) rotate(45deg) scale(.5);
pointer-events: none;
}
.shell-cart.is-dropping .shell-cart__drop { animation: shell-drop-fall 760ms var(--ease-drop) both; }
.shell-cart.is-dropping .icon--bag { animation: shell-bag-catch 560ms var(--ease-out) 480ms both; }
.shell-cart.is-dropping .ormus-cart-count { animation: shell-badge-pop 560ms var(--ease-out) 520ms both; }
@keyframes shell-drop-fall {
0% { opacity: 0; transform: translateY(-18px) rotate(45deg) scale(.45); }
22% { opacity: 1; }
78% { opacity: 1; transform: translateY(9px) rotate(45deg) scale(.95); }
100% { opacity: 0; transform: translateY(13px) rotate(45deg) scale(.35); }
}
@keyframes shell-bag-catch {
0% { transform: none; }
35% { transform: translateY(1.5px) scale(1.06, .9); }
100% { transform: none; }
}
@keyframes shell-badge-pop {
0% { transform: scale(1); }
40% { transform: scale(1.38); }
100% { transform: scale(1); }
} .ormus-cart-count {
position: absolute;
top: 3px;
right: 0;
display: grid;
place-items: center;
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: var(--r-pill);
background: var(--gold-500);
color: var(--moss-950);
font-size: .6875rem;
font-weight: 750;
line-height: 1;
font-variant-numeric: tabular-nums;
box-shadow: 0 0 0 2px var(--moss-900);
pointer-events: none;
transition: transform var(--d-2) var(--ease-out), opacity var(--d-2) var(--ease-out);
}
.has-hero .site-header:not(.is-scrolled) .ormus-cart-count { box-shadow: 0 2px 8px -2px var(--shell-scrim); } .ormus-cart-count[data-cart-count="0"] { opacity: 0 !important; transform: scale(.3); } .shell-burger { display: none; }
.shell-burger__bars {
position: relative;
display: block;
width: 22px;
height: 11px;
}
.shell-burger__bars span {
position: absolute;
left: 0;
width: 22px;
height: 1.6px;
border-radius: 2px;
background: currentColor;
transform-origin: 0 50%;
transition: transform var(--d-3) var(--ease-out);
}
.shell-burger__bars span:first-child { top: 0; }
.shell-burger__bars span:last-child { bottom: 0; transform: scaleX(.59); }
.shell-burger:hover .shell-burger__bars span:last-child { transform: none; }
@media (max-width: 1023px) {
.site-header__inner { grid-template-columns: 1fr auto; gap: var(--s-3); }
.primary-nav { display: none; }
.shell-burger { display: inline-grid; }
.no-js .shell-burger { display: none; }
}
@media (max-width: 479px) {
.brand { gap: .55rem; }
.brand__logo { height: 34px; max-width: 60px; }
.brand__word { font-size: 1.25rem; }
} .mobile-menu {
--ox: calc(100% - 2.5rem);
--oy: 2.5rem;
position: fixed;
inset: 0;
z-index: var(--z-menu);
background: var(--moss-950);
color: var(--on-moss);
clip-path: circle(0px at var(--ox) var(--oy));
transition: clip-path 620ms var(--ease-in-out);
}
.mobile-menu.is-open {
clip-path: circle(150vmax at var(--ox) var(--oy));
transition: clip-path 1000ms var(--ease-out);
}
@media (min-width: 1024px) {
.mobile-menu { display: none !important; }
}
.mobile-menu__photo {
position: absolute;
inset: auto 0 0;
height: 58%;
pointer-events: none;
opacity: .42;
-webkit-mask-image: linear-gradient(to bottom, transparent, black 72%);
mask-image: linear-gradient(to bottom, transparent, black 72%);
}
.mobile-menu__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 70%;
opacity: 0;
transform: scale(1.12);
transition: transform 1800ms var(--ease-out), opacity 1200ms var(--ease-out);
}
.mobile-menu.is-open .mobile-menu__img.is-loaded,
.mobile-menu.is-open .mobile-menu__img[data-loaded] { opacity: 1; transform: none; }
.mobile-menu__scroll {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
padding-top: var(--menu-top, 0px);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.mobile-menu__bar {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
height: var(--header-h);
}
.mobile-menu__close { margin-right: -.6rem; }
.mobile-menu__close .icon { transition: transform var(--d-3) var(--ease-out); }
.mobile-menu.is-open .mobile-menu__close .icon { transform: rotate(90deg); }
.mobile-menu__body {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--s-6);
padding-top: clamp(1rem, 4vh, 2.5rem);
padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}
.mobile-menu__list {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line-on-moss);
}
.mobile-menu__list li {
border-bottom: 1px solid var(--line-on-moss);
opacity: 0;
transform: translate3d(0, 28px, 0);
transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms + 200ms);
}
.mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; }
.mobile-menu__list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 4.25rem;
padding-block: .45rem;
color: var(--on-moss);
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.5rem + 4.4vw, 3.5rem);
font-weight: 360;
line-height: 1.04;
letter-spacing: -.03em;
text-decoration: none;
font-variation-settings: "opsz" 72;
}
.mobile-menu__arrow {
width: 1.6rem;
height: 1.6rem;
color: var(--on-moss-soft);
transition: transform var(--d-3) var(--ease-out), color var(--d-2);
}
.mobile-menu__list a:hover .mobile-menu__arrow,
.mobile-menu__list a:focus-visible .mobile-menu__arrow { color: var(--gold-400); transform: translate(3px, -3px); }
.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .is-current > a { font-style: italic; }
.mobile-menu__list .current-menu-item > a::before,
.mobile-menu__list .is-current > a::before {
content: "";
order: 2;
width: 10px;
height: 10px;
margin-left: auto;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 55%, var(--gold-600));
transform: rotate(45deg);
}
.mobile-menu__list .current-menu-item .mobile-menu__arrow,
.mobile-menu__list .is-current .mobile-menu__arrow { order: 3; margin-left: .25rem; } .mobile-menu__late {
opacity: 0;
transform: translate3d(0, 18px, 0);
transition: opacity 600ms var(--ease-out), transform 900ms var(--ease-out);
transition-delay: calc(var(--late, 0) * 70ms + 420ms);
}
.mobile-menu.is-open .mobile-menu__late { opacity: 1; transform: none; } .menu-product {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-4);
padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
border: 1px solid var(--line-on-moss);
border-radius: var(--r-lg);
background: color-mix(in oklab, var(--moss-850) 80%, transparent);
color: var(--on-moss);
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.menu-product:hover { background: var(--moss-800); border-color: color-mix(in oklab, var(--gold-400) 40%, transparent); }
.menu-product__bottle {
display: grid;
place-items: center;
width: 3.75rem;
height: 5rem;
border-radius: var(--r-md);
background: radial-gradient(closest-side, color-mix(in oklab, var(--gold-400) 38%, transparent), transparent);
}
.menu-product__img { width: auto; height: 4.5rem; filter: drop-shadow(0 6px 8px color-mix(in oklab, var(--moss-950) 70%, transparent)); }
.menu-product__text { display: grid; gap: .1rem; min-width: 0; }
.menu-product__name {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 430;
line-height: 1.2;
letter-spacing: -.01em;
}
.menu-product__price { font-weight: 650; font-size: var(--fs-small); color: var(--on-moss); }
.menu-product__note { font-size: var(--fs-micro); color: var(--on-moss-soft); }
.menu-product__go {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gold-500);
color: var(--moss-950);
transition: transform var(--d-2) var(--ease-out);
}
.menu-product:hover .menu-product__go { transform: translateX(3px); }
.mobile-menu__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-3);
margin: 0;
padding: 0;
list-style: none;
--late: 1;
}
.mobile-menu__meta a {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
min-height: 3.25rem;
padding: 0 1.1rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
color: var(--on-moss);
font-size: var(--fs-small);
font-weight: 600;
text-decoration: none;
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.mobile-menu__meta a:hover { background: color-mix(in oklab, var(--lichen-50) 7%, transparent); border-color: color-mix(in oklab, var(--lichen-50) 40%, transparent); }
.mobile-menu__meta .icon { width: 1.2rem; height: 1.2rem; color: var(--on-moss-soft); }
.mobile-menu__meta .ormus-cart-count { position: static; margin-left: auto; box-shadow: none; }
.mobile-menu__contact {
--late: 2;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
}
.mobile-menu__mail {
display: inline-flex;
align-items: center;
gap: .55rem;
min-height: 44px;
color: var(--on-moss-soft);
font-size: var(--fs-small);
text-decoration: none;
}
.mobile-menu__mail:hover { color: var(--on-moss); }
.mobile-menu__mail .icon { width: 1.15rem; height: 1.15rem; } .social-links {
display: flex;
gap: .25rem;
margin: 0;
padding: 0;
list-style: none;
}
.social-links__link { color: var(--on-moss-soft); border: 1px solid var(--line-on-moss); }
.social-links__link:hover { color: var(--on-moss); } .ormus-drawer {
position: fixed;
inset: 0;
z-index: var(--z-drawer);
}
.ormus-drawer__overlay {
position: absolute;
inset: 0;
background: color-mix(in oklab, var(--moss-950) 52%, transparent);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
cursor: pointer;
transition: opacity var(--d-3) var(--ease-out);
}
.ormus-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(440px, 100vw);
background: var(--lichen-50);
color: var(--ink);
box-shadow: var(--shadow-3);
outline: none;
overflow: hidden;
touch-action: pan-y;
transform: translate3d(100%, 0, 0);
transition: transform 640ms var(--ease-out);
} .admin-bar .ormus-drawer__panel { top: var(--drawer-top, var(--admin-offset)); }
@media (min-width: 480px) {
.ormus-drawer__panel { border-radius: var(--r-lg) 0 0 var(--r-lg); }
}
.ormus-drawer.is-open .ormus-drawer__overlay { opacity: 1; }
.ormus-drawer.is-open .ormus-drawer__panel { transform: translate3d(var(--drag, 0px), 0, 0); }
.ormus-drawer.is-dragging .ormus-drawer__panel { transition: none; } .ormus-drawer__head {
position: relative;
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-3);
min-height: 4.5rem;
padding: var(--s-2) var(--s-3) var(--s-2) var(--s-5);
background:
radial-gradient(120% 160% at 100% 0%, color-mix(in oklab, var(--gold-500) 16%, transparent), transparent 55%),
var(--moss-900);
color: var(--on-moss);
}
.ormus-drawer__title {
display: flex;
align-items: center;
gap: .6rem;
margin: 0;
font-size: 1.5rem;
font-weight: 420;
letter-spacing: -.02em;
}
.ormus-drawer__count {
display: inline-grid;
place-items: center;
min-width: 1.75rem;
height: 1.75rem;
padding: 0 .5rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
font-family: var(--font-ui);
font-size: .8125rem;
font-weight: 700;
letter-spacing: 0;
color: var(--on-moss);
font-variant-numeric: tabular-nums;
}
.ormus-drawer__count[data-cart-count="0"] { display: none; }
.ormus-drawer__close .icon { transition: transform var(--d-3) var(--ease-out); }
.ormus-drawer__close:hover .icon { transform: rotate(90deg); } .ormus-drawer__content {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
} .ship-progress {
flex: none;
padding: var(--s-4) var(--s-5) 1.15rem;
background: var(--lichen-100);
border-bottom: 1px solid var(--line);
transition: --progress 1100ms var(--ease-out);
}
.ship-progress__text {
display: flex;
align-items: center;
gap: .55rem;
margin: 0 0 .8rem;
font-size: var(--fs-small);
line-height: 1.35;
color: var(--ink-soft);
}
.ship-progress__text strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.ship-progress__icon { flex: none; width: 1.2rem; height: 1.2rem; color: var(--moss-700); }
.ship-progress__track {
position: relative;
height: 6px;
border-radius: var(--r-pill);
background: var(--lichen-300);
}
.ship-progress__fill {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--progress) * 100%);
border-radius: inherit;
background: linear-gradient(90deg, var(--gold-600), var(--gold-500) 60%, var(--gold-400));
}
.ship-progress__drop { position: absolute;
top: 50%;
right: 0;
width: 15px;
height: 15px;
border-radius: 0 50% 50% 50%;
background: radial-gradient(circle at 62% 62%, var(--gold-200), var(--gold-500) 52%, var(--gold-600));
box-shadow: 0 3px 8px -2px color-mix(in oklab, var(--gold-700) 70%, transparent);
transform: translate(50%, -62%) rotate(45deg);
}
.ship-progress__drop::after { content: "";
position: absolute;
top: 44%;
left: 44%;
width: 4px;
height: 3px;
border-radius: 50%;
background: var(--lichen-50);
opacity: .85;
}
.ship-progress.is-free .ship-progress__text { color: var(--success-700); font-weight: 650; }
.ship-progress.is-free .ship-progress__icon { color: var(--success-700); }
.ship-progress.is-free .ship-progress__track { overflow: visible; }
.ship-progress.is-free .ship-progress__fill { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.ship-progress.is-free .ship-progress__fill::after { content: "";
position: absolute;
inset: -3px 0;
border-radius: inherit;
background: linear-gradient(100deg, transparent 35%, color-mix(in oklab, var(--gold-200) 90%, transparent) 50%, transparent 65%);
background-size: 260% 100%;
animation: ship-glint 2.4s var(--ease-out) .5s 1 both;
}
@keyframes ship-glint {
from { background-position: 100% 0; }
to { background-position: -60% 0; }
} .ormus-drawer__scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: var(--lichen-400) transparent;
padding-bottom: var(--s-4);
}
.ormus-lines {
margin: 0;
padding: var(--s-2) var(--s-5) 0;
list-style: none;
}
.ormus-line {
position: relative;
isolation: isolate;
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: var(--s-4);
padding-block: var(--s-4);
border-bottom: 1px solid var(--line);
}
.ormus-line:last-child { border-bottom-color: transparent; }
.ormus-line__media {
display: block;
align-self: start;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--r-md);
background: var(--lichen-200);
}
.ormus-line__media img {
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
transition: transform var(--d-3) var(--ease-out);
}
a.ormus-line__media:hover img { transform: scale(1.05); }
.ormus-line__body { display: flex; flex-direction: column; min-width: 0; }
.ormus-line__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-2);
}
.ormus-line__name {
padding-top: .1rem;
color: var(--ink);
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 450;
line-height: 1.25;
letter-spacing: -.01em;
text-decoration: none;
text-wrap: pretty;
}
a.ormus-line__name:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.ormus-line__remove {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin: -.6rem -.75rem 0 0;
border-radius: 50%;
color: var(--ink-soft);
transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.ormus-line__remove .icon { width: 1.15rem; height: 1.15rem; }
.ormus-line__remove:hover { color: var(--error-600); background: color-mix(in oklab, var(--error-600) 9%, transparent); }
.ormus-line__meta,
.ormus-line__unit {
margin: .2rem 0 0;
font-size: var(--fs-micro);
color: var(--ink-soft);
}
.ormus-line__unit { font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ormus-line__unit-label { opacity: .8; }
.ormus-line__per { margin-inline: .35em; }
.ormus-line__each { white-space: nowrap; }
.ormus-line__foot {
display: flex;
flex-wrap: wrap; align-items: center;
justify-content: space-between;
gap: var(--s-2) var(--s-3);
margin-top: auto;
padding-top: var(--s-3);
}
.ormus-line__stepper.qty-stepper { height: 2.75rem; background: var(--lichen-50); }
.ormus-line__stepper button { width: 2.75rem; }
.ormus-line__stepper button .icon { width: 1rem; height: 1rem; }
.ormus-line__stepper button:disabled { opacity: .35; cursor: default; background: none; }
.ormus-line__stepper input { width: 2.25rem; font-size: .9375rem; }
.ormus-line__single { font-size: var(--fs-small); color: var(--ink-soft); }
.ormus-line__total {
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
transition: opacity var(--d-2) var(--ease-out);
} .ormus-line.is-busy .ormus-line__total { opacity: .35; }
.ormus-line.is-busy::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
background-size: 40% 100%;
background-repeat: no-repeat;
animation: line-busy 900ms var(--ease-in-out) infinite;
}
@keyframes line-busy {
from { background-position: -40% 0; }
to { background-position: 140% 0; }
} .ormus-line.is-removing {
opacity: 0;
transform: translate3d(24px, 0, 0);
padding-block: 0;
border-bottom-color: transparent;
overflow: hidden;
transition:
opacity 220ms var(--ease-out),
transform 360ms var(--ease-out),
height 360ms var(--ease-out) 80ms,
padding 360ms var(--ease-out) 80ms;
} .ormus-line.is-glint::before {
content: "";
position: absolute;
inset: 6px -12px;
z-index: -1;
border-radius: var(--r-md);
background:
linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--gold-300) 80%, transparent) 50%, transparent 70%) 110% 0 / 260% 100% no-repeat,
color-mix(in oklab, var(--gold-200) 62%, transparent);
animation: line-glint 1.9s var(--ease-out) .1s both;
pointer-events: none;
}
@keyframes line-glint {
0% { background-position: 110% 0, 0 0; opacity: 1; }
55% { background-position: -70% 0, 0 0; opacity: .95; }
100% { background-position: -70% 0, 0 0; opacity: 0; }
} .ormus-drawer.is-opening .ormus-line,
.ormus-drawer.is-opening .ship-progress,
.ormus-drawer.is-opening .ormus-drawer__empty > * {
animation: line-in 760ms var(--ease-out) both;
animation-delay: calc(var(--i, 0) * 70ms + 160ms);
}
.ormus-drawer.is-opening .ship-progress { animation-delay: 100ms; }
.ormus-drawer.is-opening .ormus-line.is-glint::before { animation-delay: .6s; }
@keyframes line-in {
from { opacity: 0; transform: translate3d(28px, 0, 0); }
to { opacity: 1; transform: none; }
} .ormus-upsell {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s-3);
margin: var(--s-2) var(--s-5) 0;
padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
border: 1px solid color-mix(in oklab, var(--gold-600) 35%, transparent);
border-radius: var(--r-md);
background:
radial-gradient(90% 140% at 0% 0%, color-mix(in oklab, var(--gold-300) 26%, transparent), transparent 60%),
var(--lichen-100);
}
.ormus-upsell__icon {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 50%;
background: var(--moss-900);
color: var(--gold-300);
}
.ormus-upsell__icon .icon { width: 1.1rem; height: 1.1rem; }
.ormus-upsell__icon .icon--set { width: 1.3rem; height: 1.3rem; }
.ormus-upsell__title { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 450; line-height: 1.25; }
.ormus-upsell__detail { margin: .15rem 0 0; font-size: var(--fs-micro); line-height: 1.45; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-wrap: pretty; }
.ormus-upsell__detail strong { color: var(--ink); font-weight: 650; }
.ormus-upsell__price { white-space: nowrap; }
.ormus-upsell__btn.btn--sm { min-height: 2.75rem; padding-inline: 1rem; }
.ormus-upsell__btn.is-loading { color: transparent; }
.ormus-drawer.is-opening .ormus-upsell { animation: line-in 760ms var(--ease-out) .42s both; }
@media (max-width: 439px) { .ormus-upsell { grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: var(--s-2); }
.ormus-upsell__btn { grid-column: 2; justify-self: start; }
} .ormus-drawer__foot {
flex: none;
padding: var(--s-4) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--line);
background: var(--lichen-50);
}
.ormus-drawer__sum {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-3);
}
.ormus-drawer__sum-label { font-weight: 650; font-size: var(--fs-small); }
.ormus-drawer__sum-value {
font-family: var(--font-display);
font-size: 1.625rem;
font-weight: 450;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
}
.ormus-drawer__sum-value small,
.ormus-drawer__sum-value .tax_label { font-family: var(--font-ui); font-size: var(--fs-micro); color: var(--ink-soft); letter-spacing: 0; }
.ormus-drawer__sum--discount { margin-top: .15rem; color: var(--success-700); }
.ormus-drawer__sum-small { font-weight: 650; font-variant-numeric: tabular-nums; }
.ormus-drawer__note { margin-top: .1rem; text-align: right; }
.ormus-drawer__note .price-note { display: inline; }
.ormus-drawer__actions {
display: grid;
gap: var(--s-2);
margin-top: var(--s-4);
}
.ormus-drawer__actions .btn--ghost { min-height: 3rem; }
.ormus-drawer__facts {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .35rem var(--s-5);
margin: var(--s-4) 0 0;
padding: 0;
list-style: none;
font-size: var(--fs-micro);
color: var(--ink-soft);
}
.ormus-drawer__facts li { display: inline-flex; align-items: center; gap: .4rem; }
.ormus-drawer__facts .icon { width: 1.05rem; height: 1.05rem; color: var(--moss-600); } @media (max-height: 820px) {
.ship-progress { padding-block: var(--s-3) var(--s-4); }
.ship-progress__text { margin-bottom: .6rem; }
.ormus-lines .ormus-line { padding-block: var(--s-3); }
.ormus-drawer__foot { padding-top: var(--s-3); }
.ormus-drawer__sum-value { font-size: 1.375rem; }
.ormus-drawer__actions { margin-top: var(--s-3); }
.ormus-drawer__actions .btn--lg { min-height: 3.25rem; padding-block: .8rem; }
.ormus-drawer__actions .btn--ghost { min-height: 2.75rem; padding-block: .55rem; }
.ormus-drawer__facts { display: none; }
} .ormus-drawer__empty {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-3);
padding: var(--s-7) var(--s-6) calc(var(--s-7) + env(safe-area-inset-bottom, 0px));
text-align: center;
background: radial-gradient(70% 45% at 50% 34%, var(--lichen-100), transparent 70%);
}
.ormus-drawer__empty > * { --i: 0; }
.ormus-drawer__empty > :nth-child(2) { --i: 1; }
.ormus-drawer__empty > :nth-child(3) { --i: 2; }
.ormus-drawer__empty > :nth-child(4) { --i: 3; }
.ormus-drawer__empty > :nth-child(5) { --i: 4; }
.ormus-drawer__empty-title {
margin: var(--s-3) 0 0;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.15;
letter-spacing: -.02em;
text-wrap: balance;
}
.ormus-drawer__empty-text {
margin: 0 0 var(--s-3);
max-width: 26ch;
font-size: var(--fs-small);
color: var(--ink-soft);
}
.ormus-drawer__empty-price { display: block; margin-top: .15rem; color: var(--ink); font-weight: 650; }
.ormus-drawer__empty-note { margin-top: -.25rem; }
.dew-scene { width: 220px; height: auto; overflow: visible; }
.dew-scene__s0 { stop-color: var(--gold-200); }
.dew-scene__s1 { stop-color: var(--gold-400); }
.dew-scene__s2 { stop-color: var(--gold-600); }
.dew-scene__s3 { stop-color: var(--gold-700); }
.dew-scene__c0 { stop-color: var(--gold-200); stop-opacity: .95; }
.dew-scene__c1 { stop-color: var(--gold-200); stop-opacity: 0; }
.dew-scene__halo { fill: var(--gold-200); opacity: .35; }
.dew-scene__mound-back { fill: var(--moss-500); }
.dew-scene__mound { fill: var(--moss-700); }
.dew-scene__tufts { fill: none; stroke: var(--moss-300); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
.dew-scene__stalk { fill: none; stroke: var(--moss-600); stroke-width: 1.8; stroke-linecap: round; }
.dew-scene__capsule { fill: var(--gold-600); }
.dew-scene__shadow { fill: var(--moss-950); opacity: .28; }
.dew-scene__spec { fill: var(--lichen-50); opacity: .92; }
.dew-scene__spec2 { fill: var(--lichen-50); opacity: .8; }
.dew-scene__fall,
.dew-scene__bead { fill: var(--gold-400); }
.dew-scene__fall { opacity: 0; }
.dew-scene__drop {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: dew-breathe 4.8s var(--ease-in-out) infinite;
}
.dew-scene__fall { animation: dew-fall 4.8s var(--ease-drop) 1.2s infinite; }
@keyframes dew-breathe {
0%, 100% { transform: scale(1, 1); }
50% { transform: scale(1.025, .975); }
}
@keyframes dew-fall {
0%, 8% { opacity: 0; transform: translateY(0) scale(.6); }
14% { opacity: 1; transform: translateY(0) scale(1); }
34% { opacity: 1; transform: translateY(44px) scale(1, 1.1); }
38%, 100% { opacity: 0; transform: translateY(48px) scale(1.4, .4); }
} .ormus-toast {
pointer-events: none;
visibility: hidden;
opacity: 0;
transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out), visibility 0s linear var(--d-3);
}
.ormus-toast.is-visible {
pointer-events: auto;
visibility: visible;
opacity: 1;
transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out), visibility 0s;
}
.ormus-toast__inner {
display: flex;
align-items: center;
gap: .7rem;
min-height: 3.25rem;
padding: .4rem .45rem .4rem 1rem;
border-radius: var(--r-pill);
background: var(--moss-950);
color: var(--on-moss);
font-size: var(--fs-small);
line-height: 1.35;
box-shadow: var(--shadow-2);
}
.ormus-toast__icon { flex: none; display: grid; color: var(--moss-300); }
.ormus-toast__icon .icon { width: 1.2rem; height: 1.2rem; }
.ormus-toast__icon .icon--info,
.ormus-toast.is-error .ormus-toast__icon .icon--check { display: none; }
.ormus-toast.is-error .ormus-toast__icon .icon--info { display: block; }
.ormus-toast__msg { flex: 1; padding-right: .6rem; }
.ormus-toast__action {
flex: none;
min-height: 44px;
padding: 0 1.1rem;
border: 0;
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--lichen-50) 10%, transparent);
color: var(--gold-300);
font-weight: 700;
font-size: var(--fs-small);
transition: background-color var(--d-2) var(--ease-out);
}
.ormus-toast__action:hover { background: color-mix(in oklab, var(--lichen-50) 18%, transparent); }
.ormus-toast.is-error .ormus-toast__icon { color: var(--gold-300); }
.ormus-toast.is-error .ormus-toast__inner { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold-400) 45%, transparent), var(--shadow-2); }
.ormus-toast--global {
position: fixed;
left: 50%;
bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
z-index: var(--z-toast);
width: max-content;
max-width: calc(100vw - 2 * var(--gutter));
transform: translate3d(-50%, 140%, 0);
}
.ormus-toast--global.is-visible { transform: translate3d(-50%, 0, 0); } .ormus-toast--drawer {
flex: none;
display: grid;
grid-template-rows: 0fr;
padding-inline: var(--s-3);
transition:
grid-template-rows var(--d-3) var(--ease-out),
opacity var(--d-2) var(--ease-out),
padding var(--d-3) var(--ease-out),
visibility 0s linear var(--d-3);
}
.ormus-toast--drawer.is-visible {
grid-template-rows: 1fr;
padding-block: var(--s-3) 0;
transition: grid-template-rows var(--d-3) var(--ease-out), opacity var(--d-2) var(--ease-out), visibility 0s;
}
.ormus-toast--drawer .ormus-toast__inner { min-height: 0; overflow: hidden; border-radius: var(--r-md); box-shadow: none; }
.ormus-toast--drawer.is-visible .ormus-toast__inner { min-height: 3.25rem; } .site-footer {
position: relative;
overflow: hidden;
padding-top: clamp(4rem, 2.5rem + 6vw, 7.5rem);
background: var(--moss-950);
color: var(--on-moss);
}
.footer-top {
display: grid;
gap: var(--s-6) var(--s-8);
align-items: end;
padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
border-bottom: 1px solid var(--line-on-moss);
}
@media (min-width: 900px) {
.footer-top { grid-template-columns: minmax(0, 1fr) auto; }
}
.footer-top__brand {
display: flex;
align-items: flex-start;
gap: clamp(1rem, .5rem + 2vw, 2rem);
}
.footer-top__tree {
flex: none;
width: clamp(56px, 40px + 3vw, 84px);
height: auto;
margin-top: .2rem;
}
.footer-top__line {
margin: 0;
max-width: 24ch;
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 370;
line-height: 1.22;
letter-spacing: -.02em;
text-wrap: balance;
}
.footer-top__line em { font-style: italic; color: var(--gold-300); font-weight: inherit; }
.footer-top__cta { display: grid; justify-items: start; gap: .7rem; }
@media (min-width: 900px) {
.footer-top__cta { justify-items: end; text-align: right; }
}
.footer-top__price { margin: 0; font-size: var(--fs-small); color: var(--on-moss-soft); }
.footer-top__from { color: var(--on-moss); font-weight: 650; margin-right: .35em; }
.footer-top__price .price-note { display: inline; color: var(--on-moss-soft); }
.footer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--s-7) var(--s-5);
padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.footer-col--contact { grid-column: 1 / -1; }
@media (min-width: 900px) {
.footer-grid { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
.footer-col--contact { grid-column: auto; padding-right: var(--s-6); }
}
.footer-col__title {
margin: 0 0 var(--s-4);
font-family: var(--font-ui);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .1em;
line-height: 1.3;
text-transform: uppercase;
color: var(--on-moss-soft);
font-variation-settings: normal;
}
.footer-col__text { max-width: 30ch; margin-bottom: var(--s-3); font-size: var(--fs-small); color: var(--on-moss-soft); }
.footer-links {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.footer-links a,
.footer-mail {
display: inline-flex;
align-items: center;
min-height: 2.25rem;
color: var(--on-moss);
font-size: var(--fs-small);
text-decoration: none;
background: linear-gradient(currentColor, currentColor) 0 calc(100% - .45rem) / 0 1px no-repeat;
transition: background-size var(--d-3) var(--ease-out), color var(--d-2);
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-mail:hover { background-size: 100% 1px; }
.footer-links .current-menu-item > a { color: var(--moss-200); }
.footer-mail { gap: .55rem; }
.footer-mail .icon { width: 1.15rem; height: 1.15rem; color: var(--gold-400); }
.footer-social { margin-top: var(--s-3); }
@media (pointer: coarse) {
.footer-links a,
.footer-mail { min-height: 2.75rem; }
}
.footer-pay {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3) var(--s-4);
padding-block: var(--s-5);
border-top: 1px solid var(--line-on-moss);
}
.footer-pay__label {
display: inline-flex;
align-items: center;
gap: .45rem;
margin: 0;
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--on-moss-soft);
}
.footer-pay__label .icon { width: 1rem; height: 1rem; }
.pay-pills {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin: 0;
padding: 0;
list-style: none;
}
.pay-pill {
padding: .35rem .9rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--lichen-50) 4%, transparent);
font-size: var(--fs-micro);
font-weight: 600;
color: var(--on-moss);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .35rem var(--s-5);
padding-block: var(--s-4);
border-top: 1px solid var(--line-on-moss);
font-size: var(--fs-micro);
color: var(--on-moss-soft);
}
.footer-bottom__item { margin: 0; }
.footer-bottom__notice { max-width: 62ch; text-wrap: pretty; }
.footer-bottom__item a { color: inherit; text-underline-offset: .2em; }
.footer-bottom__item a:hover { color: var(--on-moss); }
.footer-bottom__credit { margin-left: auto; }
@media (max-width: 599px) {
.footer-bottom { flex-direction: column; align-items: flex-start; }
.footer-bottom__credit { margin-left: 0; }
} .footer-mark {
position: relative;
display: flex;
justify-content: center;
height: .8em; margin-top: 0;
overflow: hidden;
font-family: var(--font-display);
font-size: clamp(4.25rem, 17.4vw, 20rem);
font-weight: 400;
line-height: 1;
letter-spacing: -.045em;
white-space: nowrap;
color: var(--moss-850);
-webkit-user-select: none;
user-select: none;
font-variation-settings: "opsz" 72;
}
.footer-mark::before { background: radial-gradient(38vw circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--gold-400) 16%, transparent), transparent 60%);
}
.footer-mark__word { display: block; padding-inline: .02em; }
.footer-mark__char { display: inline-block; }
.js .footer-mark .footer-mark__char {
transform: translate3d(0, 72%, 0);
transition: transform 1500ms var(--ease-out);
transition-delay: calc(var(--i, 0) * 65ms);
}
.js .footer-mark.is-in .footer-mark__char { transform: none; } .ormus-store-notice.woocommerce-store-notice {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: calc(var(--z-header) + 2);
margin: 0;
padding: .8rem var(--gutter);
background: var(--moss-950);
color: var(--on-moss);
font-size: var(--fs-small);
text-align: center;
box-shadow: var(--shadow-2);
}
.ormus-store-notice .woocommerce-store-notice__dismiss-link {
margin-left: .75rem;
color: var(--gold-300);
font-weight: 650;
} @media (prefers-reduced-motion: reduce) {
.mobile-menu,
.mobile-menu.is-open { clip-path: none; }
.mobile-menu__list li,
.mobile-menu__late,
.mobile-menu__img,
.js .footer-mark .footer-mark__char { opacity: 1; transform: none; }
.dew-scene__drop,
.dew-scene__fall,
.ormus-line.is-busy::after { animation: none; }
.ormus-drawer__panel { transition: none; }
}.home { display: block; }
.home .section--moss h2 em,
.home .section--deep h2 em,
.finale h2 em { color: var(--moss-200); }
.home .section--lichen h2 em,
.story h2 em { color: var(--moss-700); }
.drop-glyph { display: block; } .home {
--bottle-clip: polygon(0 0, 100% 0, 100% 97.4%, 86.6% 97.4%, 84.6% 98.2%, 81% 98.8%, 73% 99.25%, 62% 99.5%, 38% 99.5%, 27% 99.25%, 19.5% 98.8%, 16.6% 98.2%, 15.4% 97.4%, 0 97.4%);
} .hero {
--hero-gap: clamp(1rem, 3vh, 2.5rem);
position: relative;
isolation: isolate;
display: grid;
min-height: clamp(640px, calc(100vh - var(--hero-offset, var(--announce-h, 2.25rem))), 980px);
min-height: clamp(640px, calc(100svh - var(--hero-offset, var(--announce-h, 2.25rem))), 980px);
padding-top: calc(var(--hero-overlap, calc(var(--header-h) + var(--announce-h, 0px))) + var(--hero-gap));
padding-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
background: var(--moss-950);
color: var(--on-moss);
overflow: hidden;
} .hero__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: var(--moss-950);
}
.hero__picture,
.hero__img {
width: 100%;
height: 100%;
}
.hero__img {
object-fit: cover;
object-position: 72% 50%;
transform-origin: 62% 58%;
}
.hero__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
linear-gradient(180deg, rgb(11 26 16 / .9) 0%, rgb(11 26 16 / .8) 36%, rgb(11 26 16 / .5) 52%, rgb(11 26 16 / 0) 68%),
linear-gradient(0deg, rgb(11 26 16 / .9) 0%, rgb(11 26 16 / .4) 14%, rgb(11 26 16 / 0) 32%);
} @media (prefers-reduced-motion: no-preference) {
.js .hero__img {
filter: blur(14px);
transform: scale(1.06);
transition: filter 1400ms var(--ease-out), transform 1800ms var(--ease-out);
animation: home-focus-safety 1400ms var(--ease-out) 3200ms forwards;
will-change: filter, transform;
}
.js .hero.is-focused .hero__img {
filter: blur(0);
transform: none;
animation: none;
}
.js .hero.is-sharp .hero__img { filter: none; will-change: auto; } .js .hero__title[data-split]:not([data-split-done]) {
opacity: 0;
animation: home-show 1ms linear 2500ms forwards;
} .js .hero__facts { animation: home-rise 900ms var(--ease-out) 1150ms both; }
.js .hero__caption { animation: home-rise 900ms var(--ease-out) 1300ms both; }
}
@keyframes home-focus-safety { to { filter: blur(0); transform: none; } }
@keyframes home-show { to { opacity: 1; } }
@keyframes home-rise {
from { opacity: 0; transform: translate3d(0, 10px, 0); filter: blur(4px); }
to { opacity: 1; transform: none; filter: none; }
}
.hero .price-note,
.finale .price-note { color: var(--on-moss-soft); } .hero__inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto minmax(5.5rem, 1fr) auto;
column-gap: 1rem;
}
.hero__copy {
grid-column: 1 / -1;
grid-row: 1;
max-width: 44rem;
}
.hero__facts {
grid-column: 1;
grid-row: 3;
align-self: end;
}
.hero__product {
grid-column: 2;
grid-row: 2 / 4;
align-self: end;
justify-self: end;
margin-right: clamp(0px, 3vw, 1.5rem);
}
.hero__title {
margin: 0;
font-size: min(var(--fs-display), 12.5svh);
color: var(--lichen-50);
text-shadow: 0 2px 28px rgb(11 26 16 / .45);
}
.hero__title em { font-weight: 360; }
.hero__lead {
margin-top: clamp(1rem, 2.8vh, 1.9rem);
max-width: 34rem;
font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem);
color: var(--on-moss-soft);
}
.hero__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .875rem 1.5rem;
margin-top: clamp(1.25rem, 3.2vh, 2.25rem);
}
.hero__buy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .75rem .9rem;
}
.hero__cta { padding-inline: 1.4rem; }
.hero__cta .icon { transition: transform var(--d-3) var(--ease-out); }
.hero__cta:hover .icon,
.hero__cta:focus-visible .icon { transform: translateY(3px); }
.hero__price {
display: grid;
gap: .15rem;
margin: 0;
line-height: 1.2;
}
.hero__from {
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.hero__from .amount {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 450;
letter-spacing: -0.015em;
color: var(--lichen-50);
}
.hero__price { min-width: 0; }
.hero__price .price-note { max-width: 8.25rem; }
.hero__price .price-note a { text-underline-offset: .18em; }
.hero__more { min-height: 2.75rem; padding: .65rem 1.25rem; font-size: .9375rem; } .hero .hero__more { --btn-bg: rgb(11 26 16 / .46); --btn-bd: rgb(242 245 232 / .38); }
.hero .hero__more:hover { --btn-bg: rgb(11 26 16 / .62); --btn-bd: rgb(242 245 232 / .7); }
.hero__facts {
display: flex;
flex-direction: column;
gap: .55rem;
margin: 0;
padding: 0;
list-style: none;
font-size: var(--fs-small);
line-height: 1.25;
color: var(--on-moss);
}
.hero__facts li {
display: flex;
align-items: center;
gap: .6rem;
text-shadow: 0 1px 12px rgb(11 26 16 / .6);
}
.hero__facts .icon {
width: 1.15rem;
height: 1.15rem;
color: var(--gold-300);
} .hero__caption {
display: none;
margin: 0;
font-family: var(--font-display);
font-size: var(--fs-micro);
font-weight: 400;
line-height: 1.25;
letter-spacing: .01em;
white-space: nowrap;
color: var(--on-moss-soft);
text-shadow: 0 1px 10px rgb(11 26 16 / .75);
pointer-events: none;
} .hero__caption.is-crowded { visibility: hidden; } .hero__product {
position: relative;
width: max-content;
pointer-events: none;
}
.hero__bottle {
position: relative;
z-index: 2;
filter: drop-shadow(0 18px 22px rgb(5 12 7 / .45));
}
.hero__bottle-img {
width: auto;
height: clamp(170px, 27svh, 240px);
aspect-ratio: 336 / 984;
clip-path: var(--bottle-clip);
}
.hero__halo {
position: absolute;
z-index: 0;
left: 50%;
top: 44%;
width: 360%;
aspect-ratio: 1;
translate: -58% -52%;
border-radius: 50%;
background: radial-gradient(closest-side at 44% 42%, rgb(246 226 166 / .42), rgb(229 188 85 / .2) 34%, rgb(217 174 69 / .07) 60%, rgb(217 174 69 / 0) 100%);
mix-blend-mode: screen;
}
.hero__shadow {
position: absolute;
z-index: 1;
left: 50%;
bottom: -5px;
width: 150%;
height: 22px;
translate: -50% 0;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(5 12 7 / .85), rgb(5 12 7 / .4) 55%, rgb(5 12 7 / 0));
}
@media (prefers-reduced-motion: no-preference) {
.hero__bottle { animation: home-float 6s var(--ease-in-out) infinite; }
.hero__shadow { animation: home-float-shadow 6s var(--ease-in-out) infinite; }
.hero.is-paused .hero__bottle,
.hero.is-paused .hero__shadow { animation-play-state: paused; }
}
@keyframes home-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -4px, 0); }
}
@keyframes home-float-shadow {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(.92); opacity: .78; }
} .hero .lens {
transform: none;
translate: var(--x, 0px) var(--y, 0px);
will-change: translate, scale, opacity;
box-shadow: 0 0 0 1px rgb(246 226 166 / .14), 0 24px 46px -18px rgb(5 12 7 / .8);
} .hero .lens__img { filter: saturate(1.38) brightness(1.16) contrast(1.06); } .hero .lens__rim {
position: absolute;
inset: 0;
z-index: 4;
border-radius: 50%;
pointer-events: none;
background:
radial-gradient(3.2% 3.2% at 71% 77%, rgb(255 255 255 / .9) 0 35%, rgb(255 255 255 / 0) 100%),
radial-gradient(closest-side, rgb(11 26 16 / 0) 87%, rgb(11 26 16 / .36) 91.5%, rgb(11 26 16 / .66) 96.5%, rgb(11 26 16 / .8) 100%),
radial-gradient(64% 64% at 30% 24%, rgb(255 248 224 / .17), rgb(255 248 224 / 0) 70%);
box-shadow:
inset 0 0 0 1px rgb(246 226 166 / .16),
inset 0 1px 1px rgb(255 255 255 / .22);
}
.hero .lens::before {
top: 11%;
left: 18%;
width: 31%;
height: 15%;
background: radial-gradient(closest-side, rgb(255 255 255 / .97) 0 56%, rgb(255 255 255 / .55) 76%, rgb(255 255 255 / 0) 100%);
transform: rotate(-33deg);
}
.hero .lens::after {
top: 0;
left: 0;
right: auto;
bottom: auto;
width: 100%;
height: 100%; background: radial-gradient(55% 55% at 42.5% 38.5%, rgb(246 226 166 / 0) 89%, rgb(240 207 122 / .72) 96%, rgb(246 226 166 / .95) 100%);
-webkit-mask-image:
radial-gradient(closest-side, #000 80%, rgb(0 0 0 / .3) 98%),
conic-gradient(rgb(0 0 0 / 0) 45deg, #000 105deg 170deg, rgb(0 0 0 / 0) 235deg);
-webkit-mask-composite: source-in;
mask-image:
radial-gradient(closest-side, #000 80%, rgb(0 0 0 / .3) 98%),
conic-gradient(rgb(0 0 0 / 0) 45deg, #000 105deg 170deg, rgb(0 0 0 / 0) 235deg);
mask-composite: intersect;
mix-blend-mode: screen;
filter: blur(1.5px);
} .hero__drop {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
opacity: 0;
pointer-events: none;
background:
radial-gradient(circle at 36% 30%, rgb(255 255 255 / .95) 0 9%, rgb(255 255 255 / 0) 28%),
radial-gradient(circle at 50% 64%, var(--gold-300) 0%, var(--gold-500) 55%, var(--gold-700) 100%);
box-shadow:
inset 0 -3px 6px rgb(124 91 18 / .5),
inset 0 2px 3px rgb(255 255 255 / .5),
0 8px 18px -6px rgb(5 12 7 / .7);
will-change: transform, opacity;
}
.hero__ripple {
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 56px;
height: 56px;
margin: -28px 0 0 -28px;
border: 1.5px solid var(--gold-200);
border-radius: 50%;
opacity: 0;
pointer-events: none;
will-change: transform, opacity;
} @media (max-width: 899px) {
.hero .lens { scale: .37; }
.hero .lens.is-active { scale: .68; }
}
@media (min-width: 900px) and (max-width: 1199px) {
.hero .lens { scale: .45; }
.hero .lens.is-active { scale: .74; }
}
@media (max-width: 379px) {
.hero__buy { gap: .75rem .7rem; }
.hero__cta { padding-inline: 1.1rem; font-size: 1rem; }
.hero__from .amount { font-size: 1.375rem; }
.hero__price .price-note { max-width: 7.75rem; }
}
@media (min-width: 600px) {
.hero__cta { padding-inline: 1.6rem; }
.hero__price .price-note { max-width: none; }
.hero__more { min-height: 3.25rem; padding: .9rem 1.6rem; font-size: 1rem; }
}
@media (min-width: 768px) {
.hero__img { object-position: 50% 60%; }
}
@media (min-width: 900px) {
.hero__media::after {
background:
linear-gradient(90deg, rgb(11 26 16 / .9) 0%, rgb(11 26 16 / .74) 26%, rgb(11 26 16 / .34) 47%, rgb(11 26 16 / 0) 64%),
linear-gradient(0deg, rgb(11 26 16 / .92) 0%, rgb(11 26 16 / .45) 16%, rgb(11 26 16 / 0) 40%),
linear-gradient(180deg, rgb(11 26 16 / .55) 0%, rgb(11 26 16 / 0) 20%);
}
.hero__inner {
grid-template-columns: repeat(12, minmax(0, 1fr));
grid-template-rows: minmax(0, 1fr) auto;
column-gap: clamp(1rem, 2vw, 1.5rem);
}
.hero__copy {
grid-column: 1 / span 7;
grid-row: 1;
align-self: center;
padding-block: clamp(1rem, 4vh, 3rem);
}
.hero__title em { display: block; }
.hero__facts {
grid-column: 1 / span 7;
grid-row: 2;
flex-direction: row;
flex-wrap: wrap;
gap: .75rem 2.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line-on-moss);
color: var(--on-moss-soft);
}
.hero__product {
grid-column: 8 / -1;
grid-row: 1 / -1;
justify-self: center;
margin: 0 0 clamp(.25rem, 1vh, .75rem);
translate: 6% 0;
}
.hero__bottle-img { height: clamp(300px, 57svh, 540px); }
.hero__shadow { height: 30px; bottom: -8px; } .hero__caption {
grid-column: 8 / -1;
grid-row: 2;
justify-self: end;
align-self: end;
margin-bottom: 1.5px;
}
} @media (min-width: 1200px) {
.hero__caption { display: block; }
} @media (min-width: 900px) and (max-height: 820px) {
.hero__copy { padding-block: .5rem; }
.hero__lead { margin-top: 1rem; }
.hero__actions { margin-top: 1.25rem; }
.hero__facts { padding-top: 1rem; }
} .home-band {
position: relative;
display: flex;
align-items: center;
background: var(--moss-950);
color: var(--on-moss);
border-top: 1px solid var(--line-on-moss);
}
.home-band__marquee {
--marquee-gap: clamp(1.4rem, 3vw, 2.5rem);
--marquee-duration: 56s;
flex: 1 1 auto;
min-width: 0;
padding-block: clamp(.95rem, 1.8vw, 1.35rem);
}
.home-band .marquee__track {
margin: 0;
padding-left: 0;
list-style: none;
align-items: center;
}
.home-band__item {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
font-style: italic;
font-weight: 380;
line-height: 1.2;
letter-spacing: -0.005em;
white-space: nowrap;
color: var(--lichen-50);
}
.home-band__sep {
display: grid;
place-items: center;
color: var(--gold-400);
}
.home-band__sep svg {
width: .8rem;
height: .8rem;
fill: currentColor;
}
.home-band__toggle {
flex: none;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
margin: 0 var(--gutter) 0 .25rem;
padding: 0;
border: 1px solid var(--line-on-moss);
border-radius: 50%;
background: transparent;
color: var(--on-moss-soft);
transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.home-band__toggle:hover { color: var(--lichen-50); border-color: rgb(242 245 232 / .5); }
.home-band__toggle:focus-visible { outline-color: var(--focus-on-moss); border-radius: 50%; }
.home-band__play { display: none; }
.home-band.is-paused .home-band__play { display: block; }
.home-band.is-paused .home-band__pause { display: none; }
.home-band.is-paused .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
.home-band__toggle { display: none; }
.home-band [data-marquee] { justify-content: center; mask-image: none; }
.home-band .marquee__track { flex-shrink: 1; flex-wrap: wrap; justify-content: center; row-gap: .5rem; padding-inline: var(--gutter); }
.home-band .marquee__track[aria-hidden="true"] { display: none; }
} .essenz { overflow: clip; }
.essenz__grid {
display: grid;
grid-template-areas: "copy" "figure" "measure";
gap: clamp(2.5rem, 6vw, 4.5rem);
}
.essenz__copy { grid-area: copy; }
.essenz__figure { grid-area: figure; }
.essenz__measure { grid-area: measure; }
.essenz__title { max-width: 13ch; }
.essenz__title em { display: inline-block; }
.essenz__text { margin-top: clamp(1rem, 2vw, 1.5rem); max-width: 30rem; } .essenz__figure {
--orb: min(560px, 86vw);
--lines-mode: v;
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "n1 n2" "orb orb" "n4 n3";
gap: 1.5rem 1.25rem;
margin: 0;
}
.essenz__orb {
grid-area: orb;
justify-self: center;
width: var(--orb);
aspect-ratio: 1;
overflow: hidden;
background: var(--moss-950);
box-shadow:
0 40px 80px -36px rgb(11 26 16 / .7),
0 12px 28px -14px rgb(11 26 16 / .45);
}
.essenz__photo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; object-position: 50% 52%;
transform: scale(1.12);
filter: saturate(.95) brightness(.88) contrast(1.05);
}
.essenz__backlight {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(30% 40% at 46% 42%, rgb(246 226 166 / .42), rgb(217 174 69 / .14) 52%, rgb(217 174 69 / 0) 78%);
mix-blend-mode: screen;
}
.essenz__bottle {
position: absolute;
left: 50%;
bottom: 19%;
z-index: 1;
height: 64%;
aspect-ratio: 336 / 984;
translate: -50% 0;
filter: drop-shadow(0 10px 14px rgb(5 12 7 / .5));
}
.essenz__bottle::after { content: "";
position: absolute;
left: -45%;
right: -45%;
bottom: -4%;
z-index: -1;
height: 8%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(5 12 7 / .8), rgb(5 12 7 / 0));
}
.essenz__bottle-img {
width: 100%;
height: 100%;
clip-path: var(--bottle-clip);
}
.essenz__rim {
position: absolute;
inset: 0;
z-index: 2;
border-radius: 50%;
pointer-events: none;
background:
radial-gradient(closest-side, rgb(11 26 16 / 0) 76%, rgb(11 26 16 / .34) 100%),
radial-gradient(70% 60% at 68% 84%, rgb(240 207 122 / .16), rgb(240 207 122 / 0) 70%);
box-shadow:
inset 0 4px 12px rgb(255 255 255 / .32),
inset 0 -30px 60px rgb(11 26 16 / .55),
inset 0 0 0 1px rgb(255 255 255 / .16);
} .essenz__pt {
position: absolute;
left: var(--px);
top: var(--py);
width: 0;
height: 0;
}
.essenz__pt--1 { --px: 42%; --py: 8.5%; }
.essenz__pt--2 { --px: 87%; --py: 46.5%; }
.essenz__pt--3 { --px: 74%; --py: 83.2%; }
.essenz__pt--4 { --px: 30%; --py: 88.2%; }
.essenz__lines {
position: absolute;
inset: 0;
z-index: 3;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.essenz__line,
.essenz__line-casing {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.essenz__line-casing { stroke: var(--lichen-50); stroke-width: 3.5; stroke-opacity: .75; }
.essenz__line { stroke: var(--moss-950); stroke-width: 1.15; }
.essenz__dot { fill: var(--gold-300); stroke: var(--moss-950); stroke-width: 1.5; }
.essenz__dot-ring { fill: none; stroke: var(--lichen-50); stroke-width: 1.5; stroke-opacity: .85; }
.essenz__note {
position: relative;
z-index: 4;
display: grid;
align-content: start;
gap: .2rem;
margin: 0;
font-size: var(--fs-small);
line-height: 1.35;
color: var(--ink-soft);
}
.essenz__note--1 { grid-area: n1; align-self: end; justify-items: end; text-align: right; }
.essenz__note--2 { grid-area: n2; align-self: end; }
.essenz__note--3 { grid-area: n3; }
.essenz__note--4 { grid-area: n4; justify-items: end; text-align: right; }
.essenz__key {
font-family: var(--font-ui);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
}
.essenz__key--label {
font-family: var(--font-display);
font-size: 1.0625rem;
font-style: italic;
font-weight: 420;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
}
.essenz__key--label::before { content: "„"; }
.essenz__key--label::after { content: "“"; }
.essenz__sub { font-size: var(--fs-micro); color: var(--ink-soft); } .essenz__figure.is-armed .essenz__note {
opacity: 0;
transform: translate3d(0, 6px, 0);
transition: opacity var(--d-3) var(--ease-out), transform var(--d-4) var(--ease-out);
transition-delay: calc(500ms + var(--i, 0) * 180ms);
}
.essenz__figure.is-armed.is-drawn .essenz__note { opacity: 1; transform: none; }
.essenz__dots { opacity: 1; }
.essenz__figure.is-armed .essenz__dots { opacity: 0; transition: opacity var(--d-2) var(--ease-out) 250ms; }
.essenz__figure.is-armed.is-drawn .essenz__dots { opacity: 1; } .essenz__measure {
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.essenz__number {
display: flex;
align-items: baseline;
gap: .14em;
margin: 0;
font-family: var(--font-display);
font-size: clamp(4.75rem, 2.4rem + 8vw, 9.5rem);
font-weight: 330;
line-height: .86;
letter-spacing: -0.04em;
font-variant-numeric: lining-nums tabular-nums;
font-variation-settings: "opsz" 72;
color: var(--moss-800);
}
.essenz__unit {
font-size: .24em;
font-style: italic;
font-weight: 420;
letter-spacing: 0;
color: var(--gold-700);
}
.essenz__caption {
margin-top: 1rem;
max-width: 28ch;
font-size: var(--fs-small);
color: var(--ink-soft);
}
@media (max-width: 759px) {
.essenz__figure { justify-items: stretch; }
}
@media (min-width: 760px) {
.essenz__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "copy measure" "figure figure";
align-items: end;
}
.essenz__figure {
--orb: clamp(340px, 46vw, 520px);
--lane: clamp(11rem, 20vw, 15rem);
--lane-gap: clamp(2.5rem, 5vw, 4.5rem);
--lines-mode: h;
display: block;
justify-self: center;
width: calc(var(--orb) + var(--lane-gap) + var(--lane));
}
.essenz__orb { width: var(--orb); justify-self: start; margin: 0; }
.essenz__note {
position: absolute;
left: calc(var(--orb) + var(--lane-gap));
top: var(--ny);
width: var(--lane);
justify-items: start !important;
text-align: left !important;
translate: 0 -50%;
}
.essenz__note--1 { --ny: 17%; }
.essenz__note--2 { --ny: 39%; }
.essenz__note--3 { --ny: 62%; }
.essenz__note--4 { --ny: 84%; } .essenz__pt--1 { --px: 58%; }
.essenz__pt--2 { --px: 78%; --py: 45.5%; }
.essenz__pt--4 { --px: 70%; }
}
@media (min-width: 1200px) {
.essenz__grid {
grid-template-columns: auto minmax(18rem, 1fr);
grid-template-rows: auto auto;
grid-template-areas: "figure copy" "figure measure";
align-items: stretch;
column-gap: clamp(3rem, 5vw, 6rem);
}
.essenz__figure {
--orb: clamp(400px, 36vw, 540px);
--lane: 13rem;
--lane-gap: clamp(2.5rem, 4vw, 4rem);
align-self: center;
}
.essenz__copy { align-self: end; }
.essenz__measure { align-self: start; }
} .vorrat {
position: relative;
overflow: clip;
}
.vorrat::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(55% 60% at 88% 0%, rgb(217 174 69 / .13), rgb(217 174 69 / 0) 70%),
radial-gradient(45% 55% at 0% 72%, rgb(79 122 42 / .2), rgb(79 122 42 / 0) 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgb(0 0 0 / 0) 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 55%, rgb(0 0 0 / 0) 100%);
}
.vorrat > .container { position: relative; }
.vorrat__head {
display: grid;
gap: 1rem 3rem;
margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.vorrat__title { font-size: var(--fs-h1); color: var(--lichen-50); }
.vorrat__lead { margin: 0; max-width: 26rem; }
.vorrat__options {
display: grid;
gap: 1.1rem;
}
.home-supply {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"mark label price"
"mark units per";
align-items: center;
gap: .4rem 1rem;
min-height: 5.5rem;
padding: 1.15rem 1.25rem;
border: 1px solid var(--line-on-moss);
border-radius: var(--r-lg);
background: color-mix(in oklab, var(--moss-800) 62%, var(--moss-900));
color: var(--on-moss);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
transition:
border-color var(--d-2) var(--ease-out),
background-color var(--d-2) var(--ease-out),
box-shadow var(--d-3) var(--ease-out),
transform var(--d-3) var(--ease-out);
}
.home-supply:focus-visible { border-radius: var(--r-lg); outline-offset: 4px; }
.home-supply__head,
.home-supply__prices { display: contents; }
.home-supply__label {
grid-area: label;
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
font-weight: 420;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--lichen-50);
}
.home-supply__mark {
grid-area: mark;
display: grid;
place-items: center;
width: 1.75rem;
height: 1.75rem;
border: 1.5px solid rgb(242 245 232 / .45);
border-radius: 50%;
color: var(--moss-950);
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.home-supply__mark .icon {
width: 1rem;
height: 1rem;
stroke-width: 2.2;
opacity: 0;
transform: scale(.4);
transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out);
} .home-supply__units {
--unit: 1.75rem;
grid-area: units;
display: flex;
flex-wrap: wrap; margin-left: calc(var(--unit) * -.34);
}
.home-supply__unit + .home-supply__unit { margin-left: calc(var(--unit) * -.36); }
.home-supply__unit svg {
display: block;
width: var(--unit);
height: var(--unit);
fill: none;
stroke: var(--gold-300);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .5;
transition:
opacity var(--d-2) var(--ease-out),
transform var(--d-3) var(--ease-out);
transition-delay: calc(var(--i, 0) * 70ms);
}
.home-supply__unit .bottle-glyph__glass {
fill: rgb(229 188 85 / 0);
transition: fill var(--d-3) var(--ease-out) calc(var(--i, 0) * 70ms);
}
.home-supply__unit .bottle-glyph__label { transition: stroke var(--d-3) var(--ease-out) calc(var(--i, 0) * 70ms); }
.home-supply__price {
grid-area: price;
justify-self: end;
font-family: var(--font-display);
font-size: clamp(1.5rem, 1.25rem + 1vw, 2.5rem);
font-weight: 400;
line-height: 1;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
color: var(--lichen-50);
white-space: nowrap;
}
.home-supply__per {
grid-area: per;
justify-self: end;
font-size: var(--fs-micro);
font-variant-numeric: tabular-nums;
color: var(--on-moss-soft);
white-space: nowrap;
}
.home-supply__tag {
position: absolute;
top: 0;
right: 1.25rem;
translate: 0 -50%;
padding: .3rem .8rem;
border-radius: var(--r-pill);
background: var(--gold-500);
color: var(--moss-950);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: .02em;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 6px 16px -8px rgb(0 0 0 / .6);
}
.home-supply__tag--out { background: var(--moss-700); color: var(--lichen-50); }
@media (hover: hover) {
.home-supply:not([aria-disabled="true"]):hover {
border-color: rgb(242 245 232 / .34);
transform: translateY(-2px);
}
.home-supply:not([aria-disabled="true"]):hover .home-supply__unit svg { opacity: .85; }
}
.home-supply[aria-checked="true"] {
border-color: var(--lichen-200);
background: color-mix(in oklab, var(--moss-700) 42%, var(--moss-850));
box-shadow:
inset 0 0 0 1px var(--lichen-200),
inset 0 0 64px -18px rgb(240 207 122 / .32),
0 28px 54px -30px rgb(0 0 0 / .75);
}
.home-supply[aria-checked="true"] .home-supply__mark { background: var(--lichen-100); border-color: var(--lichen-100); }
.home-supply[aria-checked="true"] .home-supply__mark .icon { opacity: 1; transform: none; }
.home-supply[aria-checked="true"] .home-supply__unit svg {
opacity: 1;
transform: translateY(-1px);
}
.home-supply[aria-checked="true"] .bottle-glyph__glass { fill: var(--gold-400); }
.home-supply[aria-checked="true"] .bottle-glyph__label { stroke: var(--moss-850); }
.home-supply[aria-disabled="true"] { cursor: not-allowed; opacity: .55; }
.home-supply[aria-disabled="true"] .home-supply__price { text-decoration: line-through; text-decoration-thickness: 1px; } .vorrat__buy {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1.1rem 2.25rem;
margin-top: clamp(2rem, 4vw, 3rem);
}
.vorrat__cta {
flex: 1 1 100%;
min-height: 4rem;
padding-inline: 1.25rem;
}
.vorrat__cta-label,
.vorrat__cta-done {
display: inline-flex;
align-items: center;
gap: .6em;
transition: opacity var(--d-2) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.vorrat__cta-done {
position: absolute;
inset: 0;
justify-content: center;
opacity: 0;
transform: translate3d(0, 70%, 0);
}
.vorrat__cta.is-added .vorrat__cta-label { opacity: 0; transform: translate3d(0, -70%, 0); }
.vorrat__cta.is-added .vorrat__cta-done { opacity: 1; transform: none; }
.vorrat__cta.is-loading .vorrat__cta-done { opacity: 0; }
.vorrat__cta-dot { opacity: .5; }
.vorrat__cta-price {
display: inline-block;
font-variant-numeric: tabular-nums;
}
.vorrat__cta-price.is-swapping { animation: home-price-in 520ms var(--ease-out); }
@keyframes home-price-in {
from { opacity: 0; transform: translate3d(0, 45%, 0); filter: blur(3px); }
}
.vorrat__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1.75rem;
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.vorrat__meta .price-note { font-size: var(--fs-small); }
.vorrat__ship {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 0;
}
.vorrat__ship .icon { color: var(--gold-300); }
.vorrat__details { color: var(--lichen-50); } .vorrat__buy .added_to_cart {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
font-size: var(--fs-small);
font-weight: 650;
color: var(--moss-200);
text-decoration: underline;
text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
text-underline-offset: .22em;
}
.vorrat__buy .added_to_cart:hover { color: var(--lichen-50); }
.vorrat__status {
flex-basis: 100%;
margin: 0;
font-size: var(--fs-small);
color: var(--moss-200);
}
.vorrat__status:empty { margin-top: -1.1rem; } .vorrat__notice {
display: flex;
flex-basis: 100%;
align-items: flex-start;
gap: .55rem;
max-width: 46rem;
margin: 0;
font-size: var(--fs-micro);
line-height: 1.45;
color: var(--on-moss-soft);
}
.vorrat__notice .icon {
flex: none;
width: 1.05rem;
height: 1.05rem;
margin-top: .05rem;
color: var(--moss-300);
} .vorrat__solo { margin: 0; }
.vorrat__solo-price {
font-family: var(--font-display);
font-size: clamp(2.25rem, 1.6rem + 2vw, 3.5rem);
font-weight: 400;
line-height: 1;
letter-spacing: -0.025em;
font-variant-numeric: tabular-nums;
color: var(--lichen-50);
}
.vorrat__solo-price del { font-size: .5em; color: var(--on-moss-soft); }
.vorrat__solo-price ins { text-decoration: none; }
@media (min-width: 600px) {
.vorrat__cta { flex: 0 0 auto; min-width: 22rem; padding-inline: 2rem; }
}
@media (min-width: 760px) {
.vorrat__options {
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
gap: clamp(1rem, 1.8vw, 1.5rem);
}
.home-supply {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto minmax(1.5rem, 1fr) auto auto;
grid-template-areas:
"label mark"
"units units"
". ."
"price price"
"per per";
align-items: start;
gap: .9rem .75rem;
min-height: clamp(12.5rem, 17vw, 14.5rem);
padding: clamp(1.4rem, 2.4vw, 2rem);
}
.home-supply__price,
.home-supply__per { justify-self: start; }
.home-supply__per { margin-top: -.35rem; font-size: var(--fs-small); }
.home-supply__units { --unit: clamp(2.5rem, 1.7rem + 1.6vw, 3.25rem); margin-top: .1rem; }
.home-supply__tag { right: auto; left: clamp(1.4rem, 2.4vw, 2rem); }
}
@media (min-width: 900px) {
.vorrat__head {
grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
align-items: end;
}
.vorrat__lead { justify-self: end; margin-bottom: .45em; }
} .lineup { overflow: clip; }
.lineup__inner {
--stage: 19rem; --shot: 21rem; --foot: .136; --rule: 2px;
--shelf: var(--moss-700);
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "shelf" "note";
}
.lineup__head {
grid-area: head;
margin-bottom: clamp(2.25rem, 6vw, 3.5rem);
}
.lineup__title { max-width: 14ch; }
.lineup__lead { margin-top: 1rem; max-width: 27rem; } .lineup__shelf {
grid-area: shelf;
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(41vw, 12.5rem);
gap: 1rem;
margin: 0 calc(-1 * var(--gutter));
padding: 0 var(--gutter) .75rem;
list-style: none;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
background: linear-gradient(var(--shelf), var(--shelf)) 0 var(--stage) / 100% var(--rule) no-repeat local;
}
.lineup__shelf::-webkit-scrollbar { display: none; }
.lineup__shelf:focus-visible { outline-offset: -2px; }
.lineup__entry {
min-width: 0;
scroll-snap-align: start;
}
.lineup__item {
display: grid;
grid-template-rows: var(--stage) auto;
height: 100%;
color: var(--ink);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.lineup__item:focus-visible {
outline-offset: 6px;
border-radius: var(--r-md);
} .lineup__niche {
position: relative;
isolation: isolate;
align-self: end;
display: block;
width: 100%;
max-width: var(--niche-max, none);
height: calc(var(--stage) * var(--h, 1));
overflow: hidden;
border-radius: 999px 999px 0 0;
background:
radial-gradient(85% 55% at 28% 16%, rgb(250 252 240 / .7), rgb(250 252 240 / 0) 70%),
linear-gradient(0deg, rgb(37 80 44 / .16), rgb(37 80 44 / 0) 34%),
var(--lichen-200);
box-shadow: inset 0 1px 0 rgb(255 255 255 / .45);
}
.lineup__entry.is-hero .lineup__niche {
background:
radial-gradient(62% 40% at 50% 30%, rgb(246 226 166 / .95), rgb(240 207 122 / .42) 42%, rgb(240 207 122 / 0) 78%),
radial-gradient(85% 55% at 28% 16%, rgb(250 252 240 / .55), rgb(250 252 240 / 0) 70%),
linear-gradient(0deg, rgb(37 80 44 / .16), rgb(37 80 44 / 0) 34%),
var(--lichen-200);
} .lineup__img {
position: absolute;
left: 50%;
bottom: calc(var(--shot) * var(--foot) * -1);
z-index: 1;
display: block;
width: var(--shot);
max-width: none;
height: var(--shot);
object-fit: contain;
translate: -50% 0;
mix-blend-mode: multiply;
-webkit-mask-image: linear-gradient(0deg, transparent calc(var(--foot) * 100%), #000 calc(var(--foot) * 100%));
mask-image: linear-gradient(0deg, transparent calc(var(--foot) * 100%), #000 calc(var(--foot) * 100%));
transition: transform var(--d-3) var(--ease-out);
} .lineup__niche::before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
z-index: 0;
width: calc(var(--shot) * .26);
height: .9rem;
translate: -50% 50%;
border-radius: 50%;
background: radial-gradient(closest-side, rgb(11 26 16 / .34), rgb(11 26 16 / 0));
pointer-events: none;
transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out);
}
.lineup__img--cutout {
bottom: 0;
width: auto;
height: calc(var(--shot) * .6);
aspect-ratio: 336 / 984;
mix-blend-mode: normal;
-webkit-mask-image: none;
mask-image: none;
clip-path: var(--bottle-clip);
}
.lineup__img--empty {
bottom: 18%;
width: 42%;
height: auto;
aspect-ratio: 1;
mix-blend-mode: normal;
-webkit-mask-image: none;
mask-image: none;
} .lineup__niche::after {
content: "";
position: absolute;
inset: -10% -80%;
z-index: 2;
pointer-events: none;
background: linear-gradient(104deg, rgb(255 251 235 / 0) 42%, rgb(255 251 235 / .62) 50%, rgb(255 251 235 / 0) 58%);
opacity: 0;
transform: translate3d(-45%, 0, 0);
transition: transform 1150ms var(--ease-out), opacity var(--d-2) var(--ease-out);
}
@media (hover: hover) {
.lineup__item:hover .lineup__niche::after { opacity: 1; transform: translate3d(45%, 0, 0); }
.lineup__item:hover .lineup__img { transform: translate3d(0, -6px, 0); }
.lineup__item:hover .lineup__niche::before { opacity: .55; transform: scale(.82); }
.lineup__item:hover .lineup__more { background-size: 100% 1px; }
.lineup__item:hover .lineup__more .icon { transform: translateX(3px); }
}
.lineup__item:focus-visible .lineup__niche::after { opacity: 1; transform: translate3d(45%, 0, 0); }
.lineup__item:focus-visible .lineup__more { background-size: 100% 1px; } .js .lineup__niche[data-reveal]:not(.is-in) {
transform: translate3d(0, -14px, 0);
filter: blur(6px);
} .lineup__label {
display: grid;
justify-items: start;
align-content: start;
padding-top: 1.1rem;
}
.lineup__name {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 420;
line-height: 1.12;
letter-spacing: -0.018em;
font-variation-settings: "opsz" 48;
}
.lineup__latin {
font-size: var(--fs-small);
line-height: 1.3;
color: var(--moss-700);
}
.lineup__meta {
display: flex;
flex-wrap: wrap;
gap: 0 .35rem;
margin-top: .7rem;
font-size: var(--fs-micro);
font-weight: 600;
line-height: 1.4;
letter-spacing: .02em;
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
}
.lineup__fact { white-space: nowrap; }
.lineup__price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 .4rem;
margin-top: .3rem;
font-family: var(--font-display);
font-size: 1.3125rem;
font-weight: 420;
line-height: 1.3;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.lineup__from {
font-family: var(--font-ui);
font-size: var(--fs-small);
font-weight: 400;
letter-spacing: 0;
color: var(--ink-soft);
}
.lineup__price del {
order: 2;
font-size: .78em;
color: var(--ink-soft);
text-decoration-thickness: 1px;
}
.lineup__price ins { text-decoration: none; }
.lineup__more {
display: inline-flex;
align-items: center;
gap: .4em;
margin-top: .65rem;
padding-bottom: 2px;
font-size: var(--fs-small);
font-weight: 650;
color: var(--moss-700);
background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
transition: background-size var(--d-2) var(--ease-out);
}
.lineup__more .icon {
width: 1.05em;
height: 1.05em;
transition: transform var(--d-2) var(--ease-out);
}
.lineup__note {
grid-area: note;
margin-top: 1.25rem;
} @media (min-width: 760px) {
.lineup__inner {
--stage: 23rem;
--shot: 26rem;
--niche-max: 15.5rem;
}
.lineup__head {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
align-items: end;
gap: 1rem 3rem;
}
.lineup__lead { margin: 0 0 .45em; justify-self: end; }
.lineup__inner:not(.lineup__inner--many) .lineup__shelf {
grid-auto-flow: row;
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
gap: clamp(1rem, 2.6vw, 2rem);
position: relative;
margin: 0;
padding: 0;
overflow: visible;
background: none;
} .lineup__inner:not(.lineup__inner--many) .lineup__shelf::before {
content: "";
position: absolute;
left: calc(50% - 50vw);
right: calc(50% - 50vw);
top: var(--stage);
height: var(--rule);
background: var(--shelf);
pointer-events: none;
}
.lineup__inner--many .lineup__shelf { grid-auto-columns: 13rem; }
} @media (min-width: 1200px) {
.lineup__inner {
--stage: 27rem;
--shot: 30rem;
grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
grid-template-rows: var(--stage) auto;
grid-template-areas: "head shelf" "note shelf";
column-gap: clamp(2rem, 4vw, 4.5rem);
}
.lineup__inner::before {
content: "";
position: absolute;
left: calc(50% - 50vw);
right: calc(50% - 50vw);
top: var(--stage);
height: var(--rule);
background: var(--shelf);
pointer-events: none;
}
.lineup__head {
display: block;
align-self: end;
margin: 0;
padding-bottom: 2.5rem;
}
.lineup__lead { margin: 1.1rem 0 0; justify-self: auto; }
.lineup__note {
align-self: start;
margin: 0;
padding-top: 1.35rem;
}
.lineup__shelf { background: none; }
.lineup__inner:not(.lineup__inner--many) .lineup__shelf::before { content: none; }
.lineup__inner:not(.lineup__inner--many) .lineup__shelf { gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.lineup__inner--many .lineup__shelf {
margin: 0 calc(-1 * var(--gutter)) 0 0;
padding: 0 var(--gutter) .75rem 0;
}
} .story {
position: relative;
background: var(--lichen-100);
color: var(--ink);
}
.story__media {
position: relative;
height: clamp(420px, 72svh, 860px);
overflow: hidden;
background: var(--moss-950);
}
.story__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 62% 50%;
}
.story__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg, var(--moss-900) 0%, rgb(18 41 26 / 0) 26%),
linear-gradient(0deg, rgb(11 26 16 / .45) 0%, rgb(11 26 16 / 0) 38%);
}
.story__inner {
position: relative;
z-index: 1;
margin-top: calc(-1 * clamp(180px, 34svh, 440px));
}
.story__panel {
position: relative;
max-width: 42rem;
padding: clamp(1.75rem, .9rem + 4vw, 4.25rem);
border-radius: var(--r-xl);
background: var(--lichen-50);
box-shadow: var(--shadow-2);
}
.story__title { max-width: 16ch; }
.story__body {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
max-width: 60ch;
color: var(--ink-soft);
}
.story__quote {
display: flex;
gap: .8rem;
margin: 1.6em 0;
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
font-style: italic;
font-weight: 380;
line-height: 1.35;
color: var(--moss-800);
}
.story__quote .icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-top: .2em;
color: var(--gold-600);
}
.story__link {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
color: var(--moss-800);
}
.story__caption { display: none; } @media (min-width: 900px) {
.story {
display: grid;
background: var(--moss-950);
}
.story__media,
.story__inner { grid-area: 1 / 1; }
.story__media { height: auto; min-height: 100%; }
.story__media::after {
background:
linear-gradient(180deg, var(--moss-900) 0%, rgb(18 41 26 / 0) 18%),
linear-gradient(90deg, rgb(11 26 16 / .55) 0%, rgb(11 26 16 / 0) 55%),
linear-gradient(0deg, rgb(11 26 16 / .55) 0%, rgb(11 26 16 / 0) 30%);
}
.story__inner {
display: grid;
grid-template-columns: minmax(0, calc(42rem + clamp(0px, 4vw, 4rem))) minmax(0, 1fr);
column-gap: clamp(2rem, 5vw, 5rem);
align-items: center;
margin-top: 0;
padding-block: clamp(6rem, 3rem + 7vw, 10rem);
}
.story__panel { margin-left: clamp(0px, 4vw, 4rem); } .story__caption {
display: flex;
align-items: center;
gap: .75rem;
font-family: var(--font-display);
font-size: var(--fs-small);
font-style: normal;
white-space: nowrap;
color: var(--on-moss-soft); text-shadow: 0 0 2px rgb(11 26 16 / .7), 0 1px 12px rgb(11 26 16 / .9);
} .story .story__caption {
position: absolute;
right: var(--gutter);
bottom: 2.25rem;
margin: 0;
}
.story__caption::before {
content: "";
width: 2.5rem;
height: 1px;
background: var(--line-on-moss);
}
} .ritual {
position: relative;
isolation: isolate;
overflow: hidden;
}
.ritual__beams {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(114deg,
rgb(255 248 214 / 0) 0 14%, rgb(255 248 214 / .95) 19%, rgb(255 248 214 / 0) 25%,
rgb(255 248 214 / 0) 34%, rgb(246 226 166 / .7) 38.5%, rgb(255 248 214 / 0) 44%,
rgb(255 248 214 / 0) 55%, rgb(246 226 166 / .55) 58.5%, rgb(255 248 214 / 0) 63.5%,
rgb(255 248 214 / 0) 73%, rgb(255 248 214 / .7) 77%, rgb(255 248 214 / 0) 82%);
-webkit-mask-image: linear-gradient(270deg, #000 0%, rgb(0 0 0 / .75) 45%, rgb(0 0 0 / 0) 92%);
mask-image: linear-gradient(270deg, #000 0%, rgb(0 0 0 / .75) 45%, rgb(0 0 0 / 0) 92%);
}
.ritual__grid {
display: grid;
grid-template-areas: "title" "lead" "photo" "moments";
gap: 0;
}
.ritual__copy { display: contents; }
.ritual__title { grid-area: title; }
.ritual__lead { grid-area: lead; margin-top: 1rem; max-width: 30rem; }
.ritual__photo {
grid-area: photo;
position: relative;
margin-top: clamp(1.75rem, 5vw, 2.5rem);
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: var(--r-xl);
background: var(--moss-800);
box-shadow: var(--shadow-2);
}
.ritual__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 52%;
}
.ritual__moments {
grid-area: moments;
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.ritual__moment {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "icon name" "icon text";
align-items: start;
gap: .3rem 1.25rem;
padding-block: 1.5rem;
border-top: 1px solid var(--line);
}
.ritual__moment:last-child { border-bottom: 1px solid var(--line); }
.ritual__icon {
grid-area: icon;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--lichen-50);
color: var(--moss-700);
box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px -10px rgb(11 26 16 / .4);
}
.ritual__icon .icon { width: 1.35rem; height: 1.35rem; }
.ritual__name {
grid-area: name;
font-size: clamp(1.3rem, 1.15rem + .55vw, 1.6rem);
line-height: 1.2;
}
.ritual__text {
grid-area: text;
margin: 0;
max-width: 44ch;
color: var(--ink-soft);
}
@media (max-width: 899px) {
.ritual__moments {
grid-auto-flow: column;
grid-auto-columns: min(80%, 19rem);
gap: .875rem;
margin: 1.25rem calc(-1 * var(--gutter)) 0;
padding: .25rem var(--gutter) 1rem;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
scrollbar-width: none;
}
.ritual__moments::-webkit-scrollbar { display: none; }
.ritual__moment {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "icon" "name" "text";
gap: .7rem;
padding: 1.4rem 1.35rem 1.5rem;
border: 0;
border-radius: var(--r-lg);
background: rgb(242 245 232 / .86);
box-shadow: var(--shadow-1);
scroll-snap-align: start;
}
.ritual__moment:last-child { border: 0; }
.ritual__beams {
-webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / .3) 0%, #000 40%, #000 70%, rgb(0 0 0 / 0) 100%);
mask-image: linear-gradient(180deg, rgb(0 0 0 / .3) 0%, #000 40%, #000 70%, rgb(0 0 0 / 0) 100%);
}
}
@media (min-width: 900px) {
.ritual__grid {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
grid-template-areas: "copy photo";
align-items: center;
column-gap: clamp(3rem, 7vw, 7rem);
}
.ritual__copy { display: block; grid-area: copy; }
.ritual__moments { margin-top: clamp(2rem, 4vw, 3rem); }
.ritual__photo {
margin-top: 0;
aspect-ratio: 2 / 3;
max-height: 80svh;
}
}
@media (min-width: 1200px) {
.ritual__moment {
grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr);
grid-template-areas: "icon name text";
align-items: center;
column-gap: 1.5rem;
padding-block: 1.75rem;
}
.ritual__text { padding-top: .1rem; }
} .stimmen__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.25rem 3rem;
margin-bottom: clamp(2.25rem, 5vw, 3.75rem);
}
.stimmen__title { max-width: 14ch; }
.stimmen__score {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem .9rem;
margin: 0;
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.rating-drops {
--drop: 1.35rem;
display: inline-flex;
gap: .22rem;
color: var(--gold-400);
}
.rating-drops__item {
position: relative;
display: block;
width: var(--drop);
height: var(--drop);
}
.rating-drops__item svg {
width: var(--drop);
height: var(--drop);
max-width: none;
}
.rating-drops__empty { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .42; }
.rating-drops__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.rating-drops__full { fill: currentColor; stroke: currentColor; stroke-width: 1.6; }
.stimmen__track {
display: grid;
gap: clamp(1rem, 3vw, 2.5rem);
margin: 0;
padding: 0;
list-style: none;
}
.stimmen__track--static { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.stimmen__track:not(.stimmen__track--static) {
--fade: var(--gutter);
grid-auto-flow: column;
grid-auto-columns: min(36rem, 86%); margin-inline: calc(-1 * var(--gutter));
padding-inline: var(--gutter);
scroll-padding-inline: var(--gutter);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, var(--fade))), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, var(--fade))), transparent 100%);
}
[data-carousel].is-scrolled .stimmen__track { --fade-l: var(--fade); }
[data-carousel].is-end .stimmen__track { --fade-r: 0px; }
.stimmen__track:not(.stimmen__track--static)::-webkit-scrollbar { display: none; }
.stimmen__item { scroll-snap-align: start; }
.stimmen__figure {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 2rem;
height: 100%;
margin: 0;
padding-top: clamp(3rem, 5vw, 3.75rem);
border-top: 1px solid var(--line-on-moss);
}
.stimmen__quote {
position: relative;
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.375rem, 1.05rem + 1.25vw, 2.125rem);
font-style: italic;
font-weight: 370;
line-height: 1.3;
letter-spacing: -0.012em;
color: var(--lichen-50);
text-wrap: pretty;
}
.stimmen__quote::before {
content: "„";
position: absolute;
left: -.04em;
top: -1.2em;
font-size: 2.2em;
font-style: normal;
line-height: 1;
color: var(--moss-300);
}
.stimmen__item--long .stimmen__quote { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); }
.stimmen__by {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem 1rem;
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.stimmen__by .rating-drops { --drop: 1rem; gap: .15rem; }
.stimmen__author { font-weight: 650; color: var(--lichen-50); }
.stimmen__verified {
display: inline-flex;
align-items: center;
gap: .35rem;
color: var(--moss-300);
}
.stimmen__verified .icon { width: 1rem; height: 1rem; }
.stimmen__nav {
display: flex;
justify-content: flex-end;
gap: .75rem;
margin-top: 1.75rem;
}
.stimmen__btn[disabled] { opacity: .3; }
[data-carousel].is-static .stimmen__nav { display: none; } .home-service {
--svc-px: clamp(1rem, 2.4vw, 2.25rem);
background: var(--lichen-50);
color: var(--ink);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.home-service__list {
display: flex;
flex-wrap: wrap;
margin: 0 calc(-1 * var(--svc-px));
padding: 0;
overflow: hidden;
list-style: none;
}
.home-service__item {
display: flex;
flex: 1 1 15rem;
align-items: flex-start;
gap: .9rem;
margin: -1px 0 0 -1px;
padding: clamp(1.25rem, 2.6vw, 2rem) var(--svc-px);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.home-service__item .icon {
flex: none;
width: 1.5rem;
height: 1.5rem;
margin-top: .05rem;
color: var(--moss-700);
}
.home-service__text {
display: grid;
gap: .2rem;
line-height: 1.35;
}
.home-service__text strong { font-weight: 650; }
.home-service__sub {
font-size: var(--fs-small);
color: var(--ink-soft);
}
a.home-service__sub {
justify-self: start;
text-decoration: underline;
text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
transition: color var(--d-2) var(--ease-out), text-decoration-color var(--d-2);
}
a.home-service__sub:hover { color: var(--moss-700); text-decoration-color: currentColor; } .home-faq__grid {
display: grid;
gap: clamp(2rem, 5vw, 3rem);
}
.home-faq__title { max-width: 10ch; }
.home-faq__text {
margin-top: 1rem;
max-width: 30ch;
color: var(--on-moss-soft);
}
.home-faq__links {
display: grid;
justify-items: start;
gap: .9rem;
margin-top: 1.5rem;
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.home-faq__links .link-arrow { font-size: 1rem; color: var(--lichen-50); }
.home-faq__mail a { color: var(--lichen-50); text-underline-offset: .2em; }
.home-faq__mail a:hover { color: var(--moss-200); }
.home-faq__list { border-bottom: 1px solid var(--line-on-moss); }
.home-faq__item { border-top: 1px solid var(--line-on-moss); }
.home-faq__q {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 3.5rem;
padding: 1.3rem 0;
list-style: none;
cursor: pointer;
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.02rem + .55vw, 1.5rem);
font-weight: 420;
line-height: 1.3;
letter-spacing: -0.01em;
color: var(--lichen-50);
transition: color var(--d-2) var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.home-faq__q::-webkit-details-marker { display: none; }
.home-faq__q::marker { content: ""; }
.home-faq__q:focus-visible { border-radius: var(--r-xs); }
.home-faq__q:hover { color: var(--moss-200); }
.home-faq__icon {
position: relative;
flex: none;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--line-on-moss);
border-radius: 50%;
transition:
background-color var(--d-2) var(--ease-out),
border-color var(--d-2) var(--ease-out),
transform var(--d-3) var(--ease-out);
}
.home-faq__icon::before,
.home-faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 13px;
height: 1.6px;
margin: -.8px 0 0 -6.5px;
border-radius: 2px;
background: var(--lichen-50);
transition: transform var(--d-3) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.home-faq__icon::after { transform: rotate(90deg); }
.home-faq__q:hover .home-faq__icon { border-color: rgb(242 245 232 / .5); }
.home-faq__item[open]:not(.is-closing) .home-faq__icon {
border-color: var(--gold-500);
background: var(--gold-500);
transform: rotate(180deg);
}
.home-faq__item[open]:not(.is-closing) .home-faq__icon::before,
.home-faq__item[open]:not(.is-closing) .home-faq__icon::after { background: var(--moss-950); }
.home-faq__item[open]:not(.is-closing) .home-faq__icon::after { transform: rotate(0deg); }
.home-faq__a { overflow: hidden; }
.home-faq__a-inner {
max-width: 62ch;
padding: 0 clamp(0rem, 6vw, 4rem) 1.6rem 0;
color: var(--on-moss-soft);
}
.home-faq__a-inner > * { margin: 0; }
.home-faq__a-inner > * + * { margin-top: .75em; }
.home-faq__a-inner a { color: var(--moss-200); text-underline-offset: .2em; }
.home-faq__a-inner a:hover { color: var(--lichen-50); }
.home-faq__a-inner ul,
.home-faq__a-inner ol { padding-left: 1.2em; }
.home-faq__a-inner li + li { margin-top: .3em; }
@media (min-width: 900px) {
.home-faq__grid {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
align-items: start;
gap: clamp(3rem, 7vw, 7rem);
}
.home-faq__intro {
position: sticky;
top: calc(var(--header-h) + 2.5rem);
}
} .finale {
position: relative;
isolation: isolate;
display: grid;
align-items: center;
min-height: clamp(560px, 90svh, 920px);
overflow: hidden;
background: var(--moss-950);
color: var(--on-moss);
text-align: center;
}
.finale__media {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
}
.finale__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 32% 28%;
}
.finale__media::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none; background:
radial-gradient(52% 42% at 50% 52%, rgb(11 26 16 / .66), rgb(11 26 16 / .4) 55%, rgb(11 26 16 / 0) 100%),
radial-gradient(40% 34% at 30% 18%, rgb(246 226 166 / .16), rgb(246 226 166 / 0) 100%),
linear-gradient(180deg, var(--moss-900) 0%, rgb(18 41 26 / .5) 22%, rgb(11 26 16 / .5) 60%, var(--moss-950) 100%);
}
.finale__price,
.finale__ship { text-shadow: 0 1px 12px rgb(11 26 16 / .8); }
.finale__inner {
display: grid;
justify-items: center;
padding-block: var(--section-y);
}
.finale__title {
max-width: 13ch;
font-size: var(--fs-h1);
color: var(--lichen-50);
text-shadow: 0 2px 30px rgb(11 26 16 / .5);
}
.finale__title em { display: block; }
.finale__price {
display: grid;
justify-items: center;
gap: .2rem;
margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
}
.finale__from {
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.finale__from .amount {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 420;
letter-spacing: -0.015em;
color: var(--lichen-50);
}
.finale__actions { margin-top: clamp(1.5rem, 3vw, 2rem); }
.finale__ship {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 1.25rem 0 0;
font-size: var(--fs-small);
color: var(--on-moss-soft);
}
.finale__ship .icon { color: var(--gold-300); }.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;margin:0 0 -4px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left;padding:0}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin:0;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:var(--wc-form-color-background,#fff);color:var(--wc-form-color-text,#000);border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected],.select2-results__option[data-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff}.select2-hidden-accessible{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none;margin:5px 5px 0 0}.select2-container--default .select2-selection--multiple .select2-selection__rendered li:before{content:"";display:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#444;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid #000 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:0 0;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[data-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted[data-selected]{background-color:var(--wp-admin-theme-color,#0073aa);color:#fff}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#444}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:0 0;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:linear-gradient(to bottom,#fff 0,#eee 50%);background-repeat:repeat-x}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);background-repeat:repeat-x}.select2-container--classic .select2-selection--multiple{background-color:#fff;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:700;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid var(--wp-admin-theme-color,#0073aa)}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected],.select2-container--classic .select2-results__option--highlighted[data-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:var(--wp-admin-theme-color,#0073aa)}