@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; }
}.wc-main > .crumbs {
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin-inline: auto;
padding: clamp(.9rem, .5rem + 1.2vw, 1.6rem) var(--gutter) clamp(.75rem, .5rem + .8vw, 1.25rem);
font-size: var(--fs-micro);
font-weight: 550;
letter-spacing: .02em;
color: var(--ink);
}
.crumbs__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .15rem .6rem;
min-width: 0;
}
.crumbs a {
color: var(--ink-soft);
text-decoration: none;
border-radius: var(--r-xs);
transition: color var(--d-1) var(--ease-out);
}
.crumbs a:hover { color: var(--moss-700); text-decoration: underline; }
.crumbs__sep { color: var(--lichen-400); font-weight: 400; } .wc-main > .woocommerce-notices-wrapper:not(:empty) {
display: grid;
gap: .6rem;
width: 100%;
max-width: calc(var(--container) + 2 * var(--gutter));
margin: 0 auto var(--s-4);
padding-inline: var(--gutter);
}
:where(.ormus-product) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .6rem 1rem;
margin: 0;
padding: .95rem 1.1rem .95rem 3.1rem;
border-radius: var(--r-md);
list-style: none;
font-size: var(--fs-small);
line-height: 1.45;
outline: none;
}
:where(.ormus-product) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
content: "";
position: absolute;
left: 1.05rem;
top: 50%;
width: 1.3rem;
height: 1.3rem;
margin-top: -.65rem;
background: currentColor;
-webkit-mask: var(--notice-icon) center / contain no-repeat;
mask: var(--notice-icon) center / contain no-repeat;
}
:where(.ormus-product) .woocommerce-message {
--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
background: var(--moss-900);
color: var(--on-moss);
box-shadow: var(--shadow-2);
}
:where(.ormus-product) .woocommerce-message::before { background: var(--gold-300); }
:where(.ormus-product) .woocommerce-message .button {
--btn-bg: var(--gold-500);
--btn-fg: var(--moss-950);
order: 2;
min-height: 2.5rem;
margin-left: auto;
padding: .5rem 1.05rem;
font-size: .9375rem;
}
:where(.ormus-product) .woocommerce-message .button:hover { --btn-bg: var(--gold-400); }
:where(.ormus-product) .woocommerce-info {
--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E");
background: var(--lichen-50);
border: 1px solid var(--line);
color: var(--ink);
}
:where(.ormus-product) .woocommerce-info::before { background: var(--moss-700); }
:where(.ormus-product) .woocommerce-error {
--notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.2v.1'/%3E%3C/svg%3E");
background: var(--error-100);
border: 1px solid color-mix(in oklab, var(--error-600) 30%, transparent);
color: #5a1d10;
}
:where(.ormus-product) .woocommerce-error::before { background: var(--error-600); }
:where(.ormus-product) .woocommerce-error li { margin: 0; }
:where(.ormus-product) :where(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) { color: inherit; font-weight: 650; } .pstage { padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.pstage__inner {
display: grid;
gap: clamp(1.75rem, 1rem + 2.5vw, 2.5rem);
}
.pstage .summary { min-width: 0; }
@media (min-width: 1024px) {
.pstage__inner {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(2.5rem, .5rem + 4vw, 5.5rem);
align-items: start;
}
.pstage .summary { padding-top: clamp(.5rem, 2vw, 2.25rem); }
.pgal {
position: sticky;
top: calc(var(--pstick, var(--header-h)) + 24px); transition: top var(--d-3) var(--ease-out);
}
} .pgal { min-width: 0; }
.pgal__stage {
--floor: clamp(1.75rem, .9rem + 3.2vw, 4.25rem);
position: relative;
isolation: isolate;
overflow: hidden;
width: 100%;
aspect-ratio: 1 / 1;
max-height: 78svh;
min-height: 300px;
border-radius: var(--r-lg);
background:
radial-gradient(130% 58% at 50% 124%, rgb(26 58 34 / .34), transparent 66%),
linear-gradient(to bottom, transparent 56%, rgb(169 182 138 / .26)),
radial-gradient(95% 75% at 14% 4%, rgb(246 226 166 / .5), transparent 62%),
var(--lichen-200);
box-shadow:
inset 0 1px 0 rgb(255 255 255 / .4),
inset 0 -60px 90px -60px rgb(18 41 26 / .22);
} @media (min-width: 1024px) {
.pgal__stage {
border-radius: var(--r-xl);
max-height: calc(100svh - var(--header-h) - 24px - 7.25rem);
min-height: 440px;
}
.pgal:not(.pgal--multi) .pgal__stage { max-height: calc(100svh - var(--header-h) - 48px); }
} .pgal__stage::after {
content: "";
position: absolute;
z-index: -1;
inset: -22% -22% 18% -22%;
background: radial-gradient(42% 46% at 32% 30%, rgb(251 238 196 / .95), rgb(240 207 122 / .4) 46%, transparent 74%);
opacity: .88;
pointer-events: none;
transform-origin: 22% 18%;
}
.js .pgal__stage::after {
animation:
pgal-dawn 2.6s var(--ease-out) .05s both,
pgal-breathe 17s var(--ease-in-out) 2.7s infinite alternate;
}
@keyframes pgal-dawn {
from { opacity: 0; transform: translate3d(-10%, -12%, 0) scale(.7); }
to { opacity: .88; transform: none; }
}
@keyframes pgal-breathe {
to { opacity: .74; transform: translate3d(3%, 2.5%, 0) scale(1.07); }
}
.pgal__track {
position: absolute;
inset: 0;
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
border-radius: inherit;
-webkit-overflow-scrolling: touch;
}
.pgal__track::-webkit-scrollbar { display: none; }
.pgal__track:focus-visible { outline: 2px solid var(--focus); outline-offset: -5px; }
.pgal__slide {
position: relative;
flex: 0 0 100%;
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.25rem, .5rem + 3.5vw, 3.25rem);
scroll-snap-align: center;
scroll-snap-stop: always;
}
.pgal__slide[data-lens-done] { cursor: none; } .pgal__img {
position: relative;
min-width: 0;
min-height: 0;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
mix-blend-mode: multiply;
user-select: none;
-webkit-user-drag: none;
} .pgal__slide--cutout {
align-items: flex-end;
padding-bottom: var(--floor);
}
.pgal__img--cutout {
height: min(560px, 86%);
max-height: none;
width: auto;
mix-blend-mode: normal;
filter: drop-shadow(0 24px 22px rgb(18 41 26 / .22));
}
.pgal__floor {
position: absolute;
z-index: -1;
left: 50%;
bottom: calc(var(--floor) - 16px);
width: min(52%, 320px);
height: 34px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(closest-side, rgb(18 41 26 / .34), rgb(18 41 26 / .12) 58%, transparent);
pointer-events: none;
}
.js .pgal__slide:first-child .pgal__img { animation: pgal-focus 1.6s var(--ease-out) .12s both; }
.js .pgal__slide:first-child .pgal__img--cutout { animation-name: pgal-focus-cutout; }
@keyframes pgal-focus {
from { transform: translate3d(0, 18px, 0) scale(.975); filter: blur(10px); }
to { transform: none; filter: blur(0); }
}
@keyframes pgal-focus-cutout {
from { transform: translate3d(0, 18px, 0) scale(.975); filter: blur(10px) drop-shadow(0 10px 12px rgb(18 41 26 / 0)); }
to { transform: none; filter: blur(0) drop-shadow(0 24px 22px rgb(18 41 26 / .22)); }
}
.pgal__placeholder { width: 38%; aspect-ratio: 1; background-color: rgb(240 207 122 / .18); } .pgal .lens { background-color: var(--lichen-200); }
.pgal .lens__img { mix-blend-mode: multiply; }
.pgal__slide--cutout .lens__img { mix-blend-mode: normal; }
.pgal__badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
padding: .35rem .85rem;
border-radius: var(--r-pill);
background: var(--gold-500);
color: var(--moss-950);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.pgal__nav {
position: absolute;
top: 50%;
z-index: 2;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
margin-top: -1.5rem;
padding: 0;
border: 1px solid color-mix(in oklab, var(--humus-900) 12%, transparent);
border-radius: 50%;
background: rgb(242 245 232 / .8);
color: var(--ink);
box-shadow: var(--shadow-1);
backdrop-filter: blur(8px);
opacity: 0;
transform: scale(.88);
transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out), background-color var(--d-1);
}
.pgal__nav--prev { left: 1rem; }
.pgal__nav--next { right: 1rem; }
.pgal__nav:hover { background: var(--lichen-50); }
.pgal__stage:hover .pgal__nav,
.pgal__nav:focus-visible { opacity: 1; transform: none; }
.pgal__nav:disabled { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .pgal__nav { display: none; } }
.pgal__count {
position: absolute;
right: .85rem;
bottom: .85rem;
z-index: 2;
margin: 0;
padding: .3rem .75rem;
border-radius: var(--r-pill);
background: rgb(18 41 26 / .78);
color: var(--lichen-50);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .06em;
font-variant-numeric: tabular-nums;
backdrop-filter: blur(6px);
}
.pgal__thumbs { display: none; }
@media (min-width: 640px) {
.pgal__count { display: none; }
.pgal__thumbs {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1rem;
}
}
.pgal__thumb {
position: relative;
display: grid;
grid-template: 100% / 100%;
place-items: center;
width: 4.75rem;
aspect-ratio: 1;
padding: .45rem;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--lichen-200);
overflow: hidden;
transition: border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.pgal__thumb:hover { border-color: color-mix(in oklab, var(--humus-900) 40%, transparent); transform: translateY(-2px); }
.pgal__thumb[aria-pressed="true"] {
border-color: var(--moss-900);
box-shadow: 0 0 0 1px var(--moss-900), var(--shadow-1);
}
.pgal__thumb-img {
width: 100%;
height: 100%;
object-fit: contain;
mix-blend-mode: multiply;
}
.pgal__thumb-img--cutout { width: auto; height: 94%; mix-blend-mode: normal; } .ptitle {
margin: 0;
font-size: clamp(2.3rem, 1.55rem + 2.3vw, 3.5rem);
font-weight: 390;
line-height: 1.02;
letter-spacing: -0.032em;
overflow-wrap: break-word;
hyphens: manual;
}
.ptitle__sub {
display: block;
margin-top: .4em;
font-size: max(1.25rem, .44em);
font-style: italic;
font-weight: 400;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--moss-700);
}
.prating {
display: inline-flex;
align-items: center;
gap: .65rem;
width: fit-content;
margin: var(--s-4) 0 0;
font-size: var(--fs-small);
color: var(--ink-soft);
text-decoration: none;
}
.prating strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
a.prating:hover .prating__text { text-decoration: underline; text-underline-offset: .2em; }
.pshort {
margin-top: var(--s-4);
max-width: 48ch;
font-size: 1.0625rem;
color: var(--ink-soft);
}
.pshort > * + * { margin-top: .75em; } .pprice {
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid var(--line);
scroll-margin-top: calc(var(--pstick, var(--header-h)) + 1.25rem);
}
.pprice__line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .2rem .65rem;
margin: 0;
}
.pprice__from { font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); } .pprice__amount {
font-family: var(--font-display);
font-size: clamp(2.2rem, 1.75rem + 1.3vw, 3rem);
font-weight: 440;
line-height: 1;
letter-spacing: -0.022em;
font-variant-numeric: tabular-nums lining-nums;
color: var(--humus-900);
} .pprice__amount del {
margin-right: .35em;
font-size: .52em;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink-soft);
text-decoration-thickness: 1px;
text-decoration-color: color-mix(in oklab, var(--humus-700) 70%, transparent);
vertical-align: .18em;
}
.pprice__amount ins { text-decoration: none; }
.pprice__per {
font-size: var(--fs-small);
font-weight: 650;
color: var(--moss-700);
font-variant-numeric: tabular-nums;
}
.pprice.is-swapping .pprice__amount,
.pprice.is-swapping .pprice__per { animation: pprice-swap 520ms var(--ease-out) both; }
@keyframes pprice-swap {
from { opacity: 0; transform: translate3d(0, .35em, 0); filter: blur(4px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
.pprice__amount,
.pprice__per { display: inline-block; }
.pprice__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .5rem 1rem;
margin-top: .65rem;
}
.pstock {
display: inline-flex;
align-items: center;
gap: .5rem;
margin: 0;
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .02em;
color: var(--moss-700);
}
.pstock__dot {
width: .55rem;
height: .55rem;
border-radius: 50%;
background: var(--moss-500);
box-shadow: 0 0 0 .22rem rgb(79 122 42 / .16);
}
.pstock--out { color: var(--error-600); }
.pstock--out .pstock__dot { background: var(--error-600); box-shadow: 0 0 0 .22rem rgb(163 52 31 / .14); }
.pstock--backorder { color: var(--gold-700); }
.pstock--backorder .pstock__dot { background: var(--gold-600); box-shadow: 0 0 0 .22rem rgb(185 141 42 / .18); }
.pstage .summary > p.stock { display: none; } .ptiles { margin-top: var(--s-5); }
.ptiles__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: .25rem 1rem;
margin: 0 0 .8rem;
}
.ptiles__label {
margin: 0;
font-size: var(--fs-small);
font-weight: 650;
color: var(--ink);
} .ptiles__note {
display: inline-flex;
align-items: center;
gap: .35rem;
margin: 0;
font-size: var(--fs-micro);
font-weight: 600;
color: var(--moss-700);
}
.ptiles__note-icon { flex: none; width: .95rem; height: .95rem; color: var(--gold-600); }
.ptiles__list {
display: grid;
gap: .7rem;
margin: 0;
padding: 0;
list-style: none;
}
.ptiles__item { display: block; }
.ptile {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .95rem;
width: 100%;
min-height: 4.3rem;
margin: 0;
padding: .85rem 1.15rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 17%, transparent);
border-radius: var(--r-md);
background: var(--lichen-50);
color: var(--ink);
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--d-2) var(--ease-out),
border-color var(--d-2) var(--ease-out),
color var(--d-2) var(--ease-out),
box-shadow var(--d-2) var(--ease-out),
transform var(--d-2) var(--ease-out);
-webkit-tap-highlight-color: transparent;
}
.ptile:hover {
border-color: color-mix(in oklab, var(--humus-900) 40%, transparent);
box-shadow: var(--shadow-1);
transform: translateY(-1px);
}
.ptile:active { transform: scale(.995); }
.ptile:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ptile.is-checked {
border-color: var(--moss-900);
background: var(--moss-900);
color: var(--on-moss);
box-shadow: var(--shadow-2);
transform: none;
}
.ptile__radio {
display: grid;
place-items: center;
width: 1.55rem;
height: 1.55rem;
border: 1.5px solid color-mix(in oklab, var(--humus-900) 32%, transparent);
border-radius: 50%;
overflow: hidden;
transition: border-color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.ptile__check {
width: .95rem;
height: .95rem;
fill: var(--gold-400);
opacity: 0;
transform: translate3d(0, -170%, 0);
}
.ptile.is-checked .ptile__radio { border-color: var(--gold-400); background: rgb(240 207 122 / .12); }
.ptile.is-checked .ptile__check { opacity: 1; transform: none; animation: ptile-drop 680ms cubic-bezier(.3, .7, .4, 1) both; }
@keyframes ptile-drop {
0% { opacity: 0; transform: translate3d(0, -170%, 0) scale(.55, .75); }
55% { opacity: 1; transform: translate3d(0, 10%, 0) scale(1.16, .8); }
76% { transform: translate3d(0, -6%, 0) scale(.94, 1.06); }
100% { opacity: 1; transform: none; }
}
.ptile__main { display: grid; gap: .35rem; min-width: 0; }
.ptile__label { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.005em; }
.ptile__drops { display: flex; align-items: center; gap: .22rem; color: var(--moss-500); }
.ptile__drops .drop { width: .8rem; height: .8rem; fill: currentColor; opacity: .5; }
.ptile__more { font-size: .6875rem; font-weight: 700; }
.ptile.is-checked .ptile__drops { color: var(--gold-400); }
.ptile.is-checked .ptile__drops .drop { opacity: 1; animation: ptile-fill 520ms var(--ease-out) both; }
.ptile.is-checked .ptile__drops .drop:nth-child(2) { animation-delay: 70ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(3) { animation-delay: 140ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(4) { animation-delay: 210ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(5) { animation-delay: 280ms; }
.ptile.is-checked .ptile__drops .drop:nth-child(6) { animation-delay: 350ms; }
@keyframes ptile-fill {
from { opacity: .3; transform: scale(.6) translate3d(0, -30%, 0); }
to { opacity: 1; transform: none; }
}
.ptile__price {
display: grid;
justify-items: end;
gap: .2rem;
text-align: right;
}
.ptile__amount {
font-family: var(--font-display);
font-size: 1.3125rem;
font-weight: 440;
line-height: 1.1;
letter-spacing: -0.012em;
font-variant-numeric: tabular-nums lining-nums;
white-space: nowrap;
}
.ptile__now {
display: inline-flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: baseline;
gap: 0 .45rem;
}
.ptile__regular {
font-family: var(--font-display);
font-size: var(--fs-micro);
color: var(--ink-soft);
white-space: nowrap;
font-variant-numeric: tabular-nums lining-nums;
}
.ptile.is-checked .ptile__regular { color: var(--on-moss-soft); }
.ptile__per {
font-size: var(--fs-micro);
font-weight: 550;
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ptile.is-checked .ptile__per { color: var(--on-moss-soft); }
.ptile__tags {
position: absolute;
top: 0;
right: 1rem;
display: flex;
gap: .35rem;
transform: translateY(-52%);
pointer-events: none;
}
.ptile__tag {
padding: .2rem .65rem;
border-radius: var(--r-pill);
background: var(--gold-500);
color: var(--moss-950);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .03em;
line-height: 1.5;
white-space: nowrap;
box-shadow: 0 6px 14px -8px rgb(124 91 18 / .7);
}
.ptile__tag--out { background: var(--lichen-300); color: var(--humus-800); box-shadow: none; }
.ptile--best { margin-top: .4rem; }
.ptile--out:not(.is-checked) .ptile__label,
.ptile--out:not(.is-checked) .ptile__price { opacity: .6; }
.ptiles__hint {
margin: .65rem 0 0;
font-size: var(--fs-small);
font-weight: 650;
color: var(--gold-700);
}
.ptiles__hint:empty { display: none; }
.ptiles.is-nudged .ptiles__list { animation: ptiles-nudge 560ms var(--ease-out); }
.ptiles.is-nudged .ptile:not(.is-checked) {
border-color: var(--gold-600);
box-shadow: 0 0 0 3px rgb(217 174 69 / .28);
}
@keyframes ptiles-nudge {
0%, 100% { transform: none; }
20% { transform: translate3d(-6px, 0, 0); }
40% { transform: translate3d(5px, 0, 0); }
60% { transform: translate3d(-3px, 0, 0); }
80% { transform: translate3d(2px, 0, 0); }
} html:not(.js) .ptiles[data-ptiles] { display: none; } .pstage .variations_form table.variations {
width: 100%;
margin: var(--s-6) 0 0;
border: 0;
border-collapse: collapse;
}
.pstage .variations_form table.variations :where(tbody, tr, th, td) {
display: block;
padding: 0;
border: 0;
background: none;
text-align: left;
}
.pstage .variations_form table.variations tr + tr { margin-top: 1rem; }
.pstage .variations_form table.variations th label {
display: block;
margin-bottom: .5rem;
font-size: var(--fs-small);
font-weight: 650;
}
.pstage .reset_variations {
display: inline-block;
margin-top: .5rem;
font-size: var(--fs-micro);
font-weight: 600;
color: var(--ink-soft);
} .js .pstage .ptiles ~ table.variations {
position: absolute !important;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.pstage .single_variation_wrap { margin-top: var(--s-5); }
.pstage .single_variation .woocommerce-variation-price,
.pstage .single_variation .woocommerce-variation-availability { display: none; }
.pstage .woocommerce-variation-description {
margin-bottom: var(--s-4);
font-size: var(--fs-small);
color: var(--ink-soft);
}
.pstage .woocommerce-variation-description:empty { display: none; }
.pstage .wc-no-matching-variations,
.pstage .single_variation p[role="alert"] {
margin: 0 0 var(--s-4);
padding: .85rem 1rem;
border-radius: var(--r-sm);
background: var(--lichen-50);
border: 1px solid var(--line);
font-size: var(--fs-small);
} .pstage form.cart:not(.variations_form):not(.grouped_form),
.pstage .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: .75rem;
}
.pstage form.cart:not(.variations_form) { margin-top: var(--s-6); }
.pstage .ptiles + form.cart { margin-top: var(--s-5); }
.pstage .quantity {
display: inline-flex;
flex: none;
align-items: center;
height: 3.75rem;
border: 1px solid color-mix(in oklab, var(--humus-900) 22%, transparent);
border-radius: var(--r-pill);
background: var(--lichen-50);
transition: border-color var(--d-1) var(--ease-out), box-shadow var(--d-1) var(--ease-out);
}
.pstage .quantity:focus-within {
border-color: var(--moss-700);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--moss-500) 26%, transparent);
}
.pstage .quantity .qty {
width: 2.75rem;
min-height: 0;
height: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
text-align: center;
font-size: 1.0625rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
-moz-appearance: textfield;
}
.pstage .quantity .qty:focus { background: none; box-shadow: none; }
.pstage .quantity .qty::-webkit-outer-spin-button,
.pstage .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pstage .quantity:has(input[type="hidden"]) { display: none; }
.qty-stepper__btn {
display: grid;
place-items: center;
width: 2.9rem;
height: 100%;
padding: 0;
border: 0;
border-radius: var(--r-pill);
background: none;
color: var(--ink);
transition: background-color var(--d-1) var(--ease-out), opacity var(--d-1);
}
.qty-stepper__btn:hover { background: color-mix(in oklab, var(--humus-900) 7%, transparent); }
.qty-stepper__btn:focus-visible { outline-offset: -2px; }
.qty-stepper__btn:disabled { opacity: .3; cursor: default; background: none; }
.qty-stepper__btn .icon { width: 1.1rem; height: 1.1rem; }
html:not(.js) .qty-stepper__btn { display: none; }
html:not(.js) .pstage .quantity .qty { width: 4.5rem; }
.pstage .single_add_to_cart_button {
--btn-bg: var(--gold-500);
--btn-fg: var(--moss-950);
flex: 1 1 13rem;
min-height: 3.75rem;
padding: 1rem 1.6rem;
font-size: 1.0625rem;
gap: .8rem;
box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 12px 32px -14px rgb(217 174 69 / .75);
}
.pstage .single_add_to_cart_button:hover {
--btn-bg: var(--gold-400);
box-shadow: 0 1px 0 rgb(255 255 255 / .45) inset, 0 18px 42px -16px rgb(229 188 85 / .85);
}
.pstage .single_add_to_cart_button::after {
content: "";
position: absolute;
inset: -40% auto -40% -30%;
width: 34%;
z-index: -1;
background: linear-gradient(100deg, transparent, rgb(255 251 230 / .75) 45%, rgb(255 255 255 / .9) 50%, rgb(255 251 230 / .75) 55%, transparent);
transform: translateX(-140%) skewX(-18deg);
pointer-events: none;
}
.pstage .single_add_to_cart_button:hover::after,
.pstage .single_add_to_cart_button:focus-visible::after,
.pstage .single_add_to_cart_button.is-lit::after {
transition: transform 900ms var(--ease-out);
transform: translateX(520%) skewX(-18deg);
} .pstage .single_add_to_cart_button.is-choose,
.pstage .single_add_to_cart_button.disabled.wc-variation-selection-needed {
--btn-bg: var(--lichen-200);
--btn-fg: var(--humus-800);
--btn-bd: color-mix(in oklab, var(--humus-900) 14%, transparent);
opacity: 1;
cursor: pointer;
box-shadow: none;
}
.pstage .single_add_to_cart_button.is-choose::after { display: none; }
.pstage .single_add_to_cart_button.is-unavailable,
.pstage .single_add_to_cart_button.disabled.wc-variation-is-unavailable {
--btn-bg: var(--lichen-300);
--btn-fg: var(--humus-700);
opacity: .8;
cursor: not-allowed;
box-shadow: none;
}
.pstage .single_add_to_cart_button.is-added { --btn-bg: var(--moss-900); --btn-fg: var(--lichen-50); box-shadow: var(--shadow-2); }
.pbtn__label,
.pbtn__price { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.pbtn__price {
padding-left: .8rem;
border-left: 1px solid rgb(11 26 16 / .22);
font-variant-numeric: tabular-nums;
}
.pbtn__price:empty { display: none; }
.is-added .pbtn__price { border-color: rgb(242 245 232 / .25); }
.pbtn__label .icon { width: 1.15rem; height: 1.15rem; } .pstage .added_to_cart,
.pcard .added_to_cart {
flex-basis: 100%;
display: inline-flex;
align-items: center;
gap: .4rem;
width: fit-content;
margin-top: .15rem;
font-size: var(--fs-small);
font-weight: 650;
color: var(--moss-700);
text-decoration: underline;
text-underline-offset: .2em;
}
.pcard .added_to_cart { display: block; margin-top: .6rem; text-align: center; width: 100%; } .pship { margin-top: var(--s-4); }
.pship__text {
display: flex;
align-items: center;
gap: .55rem;
margin: 0;
font-size: var(--fs-small);
color: var(--ink-soft);
}
.pship__text strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pship__icon { flex: none; width: 1.2rem; height: 1.2rem; color: var(--moss-700); }
.pship.is-free .pship__icon { color: var(--success-700); }
.pship__bar {
position: relative;
display: block;
height: 4px;
margin-top: .65rem;
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--humus-900) 10%, transparent);
overflow: hidden;
}
.pship__fill,
.pship__cart {
position: absolute;
inset: 0;
border-radius: inherit;
transform-origin: 0 50%;
transform: scaleX(var(--p, 0));
transition: transform var(--d-3) var(--ease-out);
}
.pship__fill { background: rgb(217 174 69 / .42); }
.pship__cart { background: linear-gradient(90deg, var(--gold-600), var(--gold-400)); }
.pservices {
display: grid;
gap: .6rem 1.25rem;
margin: var(--s-6) 0 0;
padding: var(--s-5) 0 0;
border-top: 1px solid var(--line);
list-style: none;
font-size: var(--fs-small);
line-height: 1.4;
color: var(--ink-soft);
}
@media (min-width: 560px) {
.pservices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pservices__item { display: flex; align-items: flex-start; gap: .6rem; }
.pservices__icon { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .05rem; color: var(--moss-700); }
.pservices a {
color: inherit;
text-decoration-color: color-mix(in oklab, var(--humus-900) 30%, transparent);
}
.pservices a:hover { color: var(--moss-700); text-decoration-color: currentColor; } .pnotice {
display: flex;
align-items: flex-start;
gap: .7rem;
margin: var(--s-5) 0 0;
padding: .85rem 1rem .9rem;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--lichen-50);
font-size: var(--fs-micro);
line-height: 1.5;
color: var(--ink-soft);
}
.pnotice__icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .05rem; color: var(--moss-700); }
.pnotice__text { min-width: 0; }
.pnotice__lead { font-weight: 650; color: var(--ink); } .psections { position: relative; }
.psubnav {
position: sticky;
top: var(--pstick, var(--header-h));
z-index: 20;
transition: top var(--d-3) var(--ease-out);
border-block: 1px solid var(--line);
background: color-mix(in oklab, var(--lichen-100) 88%, transparent);
backdrop-filter: saturate(1.2) blur(14px);
-webkit-backdrop-filter: saturate(1.2) blur(14px);
}
.psubnav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.85rem;
}
.psubnav__list {
display: flex;
gap: .25rem;
margin: 0 calc(var(--gutter) * -1);
padding: .45rem var(--gutter);
list-style: none;
overflow-x: auto;
scrollbar-width: none;
}
.psubnav__list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .psubnav__list { margin: 0 0 0 -.9rem; padding: .45rem 0; } }
.psubnav__link {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 2.75rem;
padding: .5rem .95rem;
border-radius: var(--r-pill);
font-size: var(--fs-small);
font-weight: 650;
color: var(--ink-soft);
text-decoration: none;
white-space: nowrap;
transition: color var(--d-2) var(--ease-out), background-color var(--d-2) var(--ease-out);
}
.psubnav__link:hover { color: var(--ink); background: color-mix(in oklab, var(--humus-900) 6%, transparent); }
.psubnav__link.is-active { color: var(--lichen-50); background: var(--moss-900); }
.psubnav__count {
min-width: 1.45rem;
padding: 0 .4rem;
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--humus-900) 10%, transparent);
font-size: .75rem;
line-height: 1.45rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
.psubnav__link.is-active .psubnav__count { background: rgb(242 245 232 / .16); }
.psubnav__buy { display: none; }
@media (min-width: 1024px) {
.psubnav__buy {
display: flex;
align-items: center;
gap: 1rem;
opacity: 0;
transform: translate3d(0, 6px, 0);
pointer-events: none;
transition: opacity var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.psubnav.is-stuck .psubnav__buy,
html:not(.js) .psubnav__buy { opacity: 1; transform: none; pointer-events: auto; }
}
.psubnav__price { font-size: var(--fs-small); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.psubnav__price del,
.pbuybar__sel del,
.pcard__price del { margin-right: .3em; font-weight: 500; text-decoration-thickness: 1px; }
.psubnav__price del,
.pcard__price del { color: var(--ink-soft); }
.psubnav__price ins,
.pbuybar__sel ins,
.pcard__price ins { text-decoration: none; }
.psec {
padding-block: clamp(3rem, 1.75rem + 4vw, 6rem);
scroll-margin-top: 3.85rem;
}
.psec + .psec { border-top: 1px solid var(--line); }
.psec__grid { display: grid; gap: var(--s-5) var(--s-7); }
@media (min-width: 900px) {
.psec__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.psec__head {
position: sticky;
top: calc(var(--pstick, var(--header-h)) + 6rem);
align-self: start;
}
}
.psec__title { font-size: var(--fs-h2); font-weight: 380; } .pdesc { max-width: 64ch; font-size: 1.125rem; line-height: 1.7; }
.pdesc > :first-child { margin-top: 0; }
.pdesc > p:first-of-type {
font-family: var(--font-display);
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--humus-800);
}
.pdesc h2 { margin-top: 1.9em; font-size: var(--fs-h3); font-weight: 420; }
.pdesc > h2:first-child { margin-top: 0; }
.pdesc h3 { margin-top: 1.6em; }
.pdesc img { height: auto; border-radius: var(--r-md); }
.pdesc a { color: var(--moss-700); } .pdetails {
max-width: 52rem;
margin: 0;
border-top: 1px solid var(--line);
}
.pdetails__row {
display: grid;
grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr);
gap: .25rem 2rem;
padding: 1.1rem 0;
border-bottom: 1px solid var(--line);
}
.pdetails__label { font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); }
.pdetails__value { margin: 0; color: var(--ink); }
.pdetails__value p { margin: 0; }
.pdetails__value a { color: var(--moss-700); }
@media (max-width: 479px) {
.pdetails__row { grid-template-columns: 1fr; }
} .rsum__score { margin-top: var(--s-5); }
.rsum__avg { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .5rem; }
.rsum__num {
font-family: var(--font-display);
font-size: clamp(4.25rem, 3rem + 4vw, 6rem);
font-weight: 340;
line-height: .9;
letter-spacing: -0.045em;
font-variant-numeric: lining-nums;
color: var(--moss-900);
}
.rsum__of { font-size: var(--fs-small); font-weight: 650; color: var(--ink-soft); }
.rsum__count { margin: .55rem 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.rsum__bars {
display: grid;
gap: .5rem;
max-width: 22rem;
margin: var(--s-5) 0 0;
padding: 0;
list-style: none;
}
.rsum__bar {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr) 1.75rem;
align-items: center;
gap: .75rem;
font-size: var(--fs-micro);
font-variant-numeric: tabular-nums;
color: var(--ink-soft);
}
.rsum__stars { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--ink); }
.rsum__drop { width: .8rem; height: .8rem; fill: var(--gold-600); }
.rsum__track {
position: relative;
height: 6px;
border-radius: var(--r-pill);
background: color-mix(in oklab, var(--humus-900) 10%, transparent);
overflow: hidden;
}
.rsum__fill {
position: absolute;
inset: 0 auto 0 0;
width: var(--w, 0%);
border-radius: inherit;
background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
transform-origin: 0 50%;
}
.js .rsum:not(.is-in) .rsum__fill { transform: scaleX(0); }
.js .rsum.is-in .rsum__fill { animation: rsum-grow 1.3s var(--ease-out) both; }
.rsum__bar:nth-child(2) .rsum__fill { animation-delay: 80ms; }
.rsum__bar:nth-child(3) .rsum__fill { animation-delay: 160ms; }
.rsum__bar:nth-child(4) .rsum__fill { animation-delay: 240ms; }
.rsum__bar:nth-child(5) .rsum__fill { animation-delay: 320ms; }
@keyframes rsum-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.rsum__n { text-align: right; }
.rsum__empty {
max-width: 24ch;
margin: var(--s-4) 0 0;
font-family: var(--font-display);
font-size: var(--fs-h4);
font-style: italic;
line-height: 1.45;
color: var(--moss-800);
}
.rsum__write { margin-top: var(--s-5); color: var(--moss-700); }
.rlist .woocommerce-Reviews-title,
.rlist .woocommerce-noreviews { display: none; }
.rlist .commentlist {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line);
}
.rlist__item { padding: var(--s-5) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.rlist__item .children { margin: var(--s-4) 0 0 3.6rem; padding: 0; list-style: none; }
.review__head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: .9rem;
}
.review__mono {
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border-radius: 50%;
background: radial-gradient(70% 70% at 30% 25%, var(--moss-700), var(--moss-900));
color: var(--gold-300);
font-family: var(--font-display);
font-size: 1.3rem;
font-style: italic;
line-height: 1;
text-transform: uppercase;
}
.review__who { display: grid; gap: .1rem; min-width: 0; }
.review__author { font-weight: 650; }
.review__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .2rem .9rem;
font-size: var(--fs-micro);
color: var(--ink-soft);
}
.review__verified { display: inline-flex; align-items: center; gap: .3rem; font-weight: 650; color: var(--success-700); }
.review__verified .icon { width: .95rem; height: .95rem; }
.review__text {
max-width: 60ch;
margin-top: 1rem;
font-family: var(--font-display);
font-size: 1.1875rem;
line-height: 1.55;
color: var(--humus-800);
}
.review__pending {
margin: .9rem 0 0;
font-size: var(--fs-small);
font-weight: 650;
color: var(--gold-700);
}
.rlist .woocommerce-pagination {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin-top: var(--s-5);
font-size: var(--fs-small);
}
.rlist .woocommerce-pagination .page-numbers {
display: inline-grid;
place-items: center;
min-width: 2.75rem;
height: 2.75rem;
padding: 0 .75rem;
border-radius: var(--r-pill);
border: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
}
.rlist .woocommerce-pagination .page-numbers.current { background: var(--moss-900); border-color: var(--moss-900); color: var(--lichen-50); }
#review_form_wrapper { margin-top: var(--s-6); }
.rlist .comment-respond {
padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--lichen-50);
box-shadow: var(--shadow-1);
}
.rform__title { margin: 0; font-size: var(--fs-h3); font-weight: 400; }
.rform__title small { display: block; margin-top: .3rem; font-family: var(--font-ui); font-size: var(--fs-micro); }
.rform__title small a { color: var(--ink-soft); }
.rform {
display: grid;
gap: 1.15rem;
margin-top: 1.1rem;
}
@media (min-width: 640px) {
.rform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; }
.rform > * { grid-column: 1 / -1; }
.rform > .comment-form-author { grid-column: 1; }
.rform > .comment-form-email { grid-column: 2; }
}
.rform__note { margin: 0; font-size: var(--fs-micro); color: var(--ink-soft); }
.rform__field { display: grid; gap: .45rem; margin: 0; }
.rform textarea { min-height: 9rem; }
.rform .comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: .6rem;
margin: 0;
font-size: var(--fs-small);
}
.rform .comment-form-cookies-consent input { flex: none; margin-top: .2rem; }
.rform .comment-form-cookies-consent label { font-weight: 400; }
.rform .form-submit { margin: 0; }
.rform .required { color: var(--gold-700); }
.rlist .must-log-in,
.rlist .woocommerce-verification-required,
.rlist .logged-in-as {
margin: 0;
font-size: var(--fs-small);
color: var(--ink-soft);
}
.rlist .must-log-in a,
.rlist .logged-in-as a { color: var(--moss-700); } .rrate { min-width: 0; margin: 0; padding: 0; border: 0; }
.rrate__legend { margin-bottom: .4rem; padding: 0; font-size: var(--fs-small); font-weight: 600; }
.rrate__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.rrate__drops { display: inline-flex; gap: .1rem; margin-left: -.4rem; }
.rrate__item { position: relative; }
.rrate__input {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
} .rrate__label {
--rrate-rim: var(--humus-600);
display: grid;
place-items: center;
width: 2.85rem;
height: 2.85rem;
border-radius: 50%;
color: var(--lichen-100);
cursor: pointer;
transition: color var(--d-1) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.rrate__drop {
width: 1.9rem;
height: 1.9rem;
fill: currentColor;
stroke: var(--rrate-rim);
stroke-width: 1.4;
transition: stroke var(--d-1) var(--ease-out);
}
.rrate__label:hover { transform: translateY(-2px) scale(1.07); }
.rrate__input:focus-visible + .rrate__label { outline: 2px solid var(--focus); outline-offset: -2px; } .rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(1) .rrate__input:checked) .rrate__item:nth-child(-n+1) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(2) .rrate__input:checked) .rrate__item:nth-child(-n+2) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(3) .rrate__input:checked) .rrate__item:nth-child(-n+3) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(4) .rrate__input:checked) .rrate__item:nth-child(-n+4) .rrate__label,
.rrate:not(.is-js) .rrate__drops:has(.rrate__item:nth-child(5) .rrate__input:checked) .rrate__item:nth-child(-n+5) .rrate__label,
.rrate__drops[data-show="1"] .rrate__item:nth-child(-n+1) .rrate__label,
.rrate__drops[data-show="2"] .rrate__item:nth-child(-n+2) .rrate__label,
.rrate__drops[data-show="3"] .rrate__item:nth-child(-n+3) .rrate__label,
.rrate__drops[data-show="4"] .rrate__item:nth-child(-n+4) .rrate__label,
.rrate__drops[data-show="5"] .rrate__item:nth-child(-n+5) .rrate__label { color: var(--gold-500); --rrate-rim: var(--gold-700); }
.rrate__drops.is-preview .rrate__label { opacity: .85; }
.rrate__item.is-pop .rrate__label { animation: rrate-pop 460ms var(--ease-out); }
@keyframes rrate-pop {
0% { transform: scale(1); }
40% { transform: scale(1.22, .86) translateY(2px); }
100% { transform: scale(1); }
}
.rrate__text { font-size: var(--fs-small); font-weight: 650; color: var(--moss-700); } .pband {
position: relative;
overflow: hidden;
padding-block: var(--section-y);
background: var(--moss-900);
color: var(--on-moss);
}
.pband::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(55% 60% at 88% 0%, rgb(217 174 69 / .16), transparent 70%),
radial-gradient(60% 50% at 0% 100%, rgb(11 26 16 / .6), transparent 70%);
pointer-events: none;
}
.pband :focus-visible { outline-color: var(--focus-on-moss); }
.pband__inner {
position: relative;
display: grid;
gap: var(--s-7);
align-items: center;
}
@media (min-width: 900px) {
.pband__inner {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(3rem, 1rem + 5vw, 7rem);
}
}
.pband__media {
position: relative;
overflow: hidden;
margin: 0;
aspect-ratio: 4 / 3;
border-radius: var(--r-lg);
box-shadow: var(--shadow-3);
}
@media (min-width: 900px) {
.pband__media { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
}
.pband__media::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(to top, rgb(11 26 16 / .35), transparent 45%);
box-shadow: inset 0 0 0 1px rgb(242 245 232 / .08);
pointer-events: none;
}
.pband__img {
position: absolute;
inset: -12% 0;
width: 100%;
height: 124%;
max-width: none;
object-fit: cover;
}
.pband__title {
max-width: 13ch;
font-size: clamp(2.6rem, 1.5rem + 3.8vw, 5.25rem);
font-weight: 360;
line-height: 1;
letter-spacing: -0.038em;
}
.pband__lead { margin-top: var(--s-5); max-width: 42ch; color: var(--on-moss-soft); }
.pband__facts {
display: grid;
margin: var(--s-7) 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--line-on-moss);
}
.pband__fact {
display: flex;
align-items: center;
gap: .75rem;
padding: 1.1rem 0;
border-bottom: 1px solid var(--line-on-moss);
font-size: var(--fs-small);
font-weight: 600;
line-height: 1.35;
}
@media (min-width: 640px) {
.pband__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pband__fact { padding: 1.35rem 1rem 1.35rem 0; border-bottom: 0; }
.pband__fact + .pband__fact { padding-left: 1.25rem; border-left: 1px solid var(--line-on-moss); }
}
.pband__icon { flex: none; width: 1.4rem; height: 1.4rem; color: var(--gold-300); }
.pservices .nowrap,
.pband__fact .nowrap { white-space: nowrap; }
.pband__fact a { color: inherit; text-decoration-color: rgb(242 245 232 / .35); }
.pband__fact a:hover { text-decoration-color: currentColor; }
.pband__cta { margin: var(--s-6) 0 0; } .pband__btn:hover .icon--arrow-up,
.pband__btn:focus-visible .icon--arrow-up { transform: translateY(-3px); } .prel {
--edge: max(var(--gutter), calc((100% - var(--container)) / 2));
position: relative;
padding-block: clamp(3.5rem, 2rem + 5vw, 7rem);
background:
radial-gradient(60% 80% at 8% 0%, rgb(246 226 166 / .32), transparent 70%),
var(--lichen-200);
color: var(--ink);
overflow: hidden;
}
.prel__head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: var(--s-6);
}
.prel__title { font-size: var(--fs-h2); font-weight: 380; }
.prel__title em { color: var(--moss-700); }
.prel__nav { display: flex; gap: .5rem; }
.prel__btn {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid color-mix(in oklab, var(--humus-900) 28%, transparent);
border-radius: 50%;
background: var(--lichen-50);
color: var(--ink);
transition: background-color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out), opacity var(--d-2);
}
.prel__btn:hover { background: var(--moss-900); border-color: var(--moss-900); color: var(--lichen-50); }
.prel__btn:disabled { opacity: .35; cursor: default; background: var(--lichen-50); border-color: color-mix(in oklab, var(--humus-900) 28%, transparent); color: var(--ink); }
@media (hover: none) { .prel__nav { display: none; } }
.prel__scroller {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--edge);
scrollbar-width: none;
}
.prel__scroller::-webkit-scrollbar { display: none; }
.prel__list {
display: flex;
gap: clamp(1rem, .6rem + 1vw, 1.5rem);
width: max-content;
margin: 0;
padding: .5rem var(--edge) 1.5rem;
list-style: none;
}
.prel__item {
flex: none;
width: clamp(15.5rem, 70vw, 19.5rem);
scroll-snap-align: start;
}
.pcard {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border-radius: var(--r-lg);
background: var(--lichen-50);
color: var(--ink);
box-shadow: var(--shadow-1);
transition: transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.pcard:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-2); }
.pcard__media {
display: grid;
grid-template: 100% / 100%;
place-items: center;
aspect-ratio: 1;
margin: .6rem .6rem 0;
overflow: hidden;
border-radius: calc(var(--r-lg) - .45rem);
background:
radial-gradient(85% 70% at 22% 12%, rgb(246 226 166 / .55), transparent 62%),
var(--lichen-200);
}
.pcard__img {
width: 84%;
height: 84%;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform var(--d-4) var(--ease-out);
}
.pcard:hover .pcard__img { transform: scale(1.05); }
.pcard__placeholder { width: 40%; aspect-ratio: 1; }
.pcard__body {
display: flex;
flex: 1;
flex-direction: column;
gap: .3rem;
padding: 1.1rem 1.25rem 1.3rem;
}
.pcard__title { margin: 0; font-size: 1.3rem; font-weight: 420; line-height: 1.2; }
.pcard__title a { color: inherit; text-decoration: none; }
.pcard__title a:hover .pcard__name { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } .pcard__line {
display: block;
margin-top: .3rem;
font-family: var(--font-ui);
font-size: var(--fs-micro);
font-weight: 650;
letter-spacing: .01em;
color: var(--ink-soft);
}
.pcard__name { display: block; }
.pcard__price { margin: .4rem 0 0; font-size: 1.0625rem; font-weight: 700; }
.pcard__per { margin: 0; font-size: var(--fs-micro); font-weight: 650; color: var(--moss-700); }
.pcard__actions { margin-top: auto; padding-top: 1rem; }
.pcard__btn { width: 100%; } .pbuybar { display: none; }
@media (max-width: 1023px) {
.js .pbuybar {
position: fixed;
left: .5rem;
right: .5rem;
bottom: calc(.5rem + env(safe-area-inset-bottom, 0px));
z-index: 30;
display: flex;
align-items: center;
gap: .75rem;
max-width: 40rem;
margin-inline: auto;
padding: .5rem .5rem .5rem .55rem;
border: 1px solid rgb(242 245 232 / .1);
border-radius: var(--r-lg);
background: rgb(18 41 26 / .93);
color: var(--on-moss);
box-shadow: var(--shadow-3);
backdrop-filter: blur(14px) saturate(1.2);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
transform: translate3d(0, calc(100% + 2rem), 0);
visibility: hidden;
transition: transform var(--d-3) var(--ease-out), visibility 0s linear var(--d-3);
}
.js .pbuybar.is-visible {
transform: none;
visibility: visible;
transition-delay: 0s;
}
}
.pbuybar :focus-visible { outline-color: var(--focus-on-moss); } @media (max-width: 1023px) {
.has-buybar .ormus-toast--global { bottom: calc(var(--ormus-buybar-h, 0px) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
}
.pbuybar__thumb {
display: grid;
grid-template: 100% / 100%;
flex: none;
place-items: center;
width: 3rem;
height: 3rem;
overflow: hidden;
border-radius: var(--r-sm);
background: radial-gradient(90% 80% at 25% 15%, rgb(246 226 166 / .55), transparent 65%), var(--lichen-200);
}
.pbuybar__img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pbuybar__img--cutout { width: auto; height: 90%; mix-blend-mode: normal; }
.pbuybar__info { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.pbuybar__name,
.pbuybar__sel {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.pbuybar__name { font-size: var(--fs-micro); font-weight: 600; color: var(--on-moss-soft); }
.pbuybar__sel { font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pbuybar__sel del { color: var(--on-moss-soft); font-size: .8125rem; }
.pbuybar__btn { flex: none; min-height: 2.9rem; padding-inline: 1.1rem; } .drops {
position: relative;
display: inline-flex;
flex: none;
line-height: 0;
vertical-align: middle;
}
.drops__base,
.drops__fill { display: inline-flex; white-space: nowrap; }
.drops__base { color: color-mix(in oklab, var(--humus-900) 15%, transparent); }
.drops__fill {
position: absolute;
inset: 0 auto 0 0;
overflow: hidden;
color: var(--gold-600);
}
.drops .drop { flex: none; width: 1em; height: 1em; fill: currentColor; }
.drops--sm { font-size: 1.05rem; }
.drops--md { font-size: 1.3rem; }
.drops--lg { font-size: 1.65rem; }
.drops--lg .drops__fill { color: var(--gold-500); } @media (max-width: 479px) {
.ptile { grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; padding: .9rem 1rem; }
.ptile__tags { right: .75rem; }
.pstage form.cart:not(.variations_form):not(.grouped_form),
.pstage .woocommerce-variation-add-to-cart { flex-wrap: nowrap; gap: .6rem; }
.pstage .quantity { height: 3.5rem; }
.pstage .quantity .qty { width: 2.1rem; }
.qty-stepper__btn { width: 2.45rem; }
.pstage .single_add_to_cart_button {
flex: 1 1 0;
min-width: 0;
min-height: 3.5rem;
padding-inline: 1rem;
font-size: 1rem;
line-height: 1.2;
white-space: normal;
text-align: center;
}
.pstage .single_add_to_cart_button .pbtn__price { display: none; }
.review__head { grid-template-columns: auto minmax(0, 1fr); }
.review__head .drops { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
.js .pgal__stage::after { animation: none; }
.ptile.is-checked .ptile__check,
.ptile.is-checked .ptile__drops .drop { animation: none; }
}.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)}