:root {
color-scheme: light;
--pine:       #3D4C49;
--pine-deep:  #2B3735;
--pine-soft:  #5C6E6A;
--paper:      #FBFAF8;
--card:       #FFFFFF;
--line:       #DDE3DB;
--line-soft:  #EAEEE8;
--stem:       #697465;
--madder:     #A8435A;
--sale:       #C9500F;
--sale-dim:   #FBEDE4;
--madder-dim: #F3E6E9;
--sun:        #8E6918;
--ink:        #171C1B;
--sale-light: #F3B38A;
--sale-tint: #FDF0E6;
--promo:      #FDA4AF;
--promo-soft: #FECDD3;
--promo-ink:  #BE123C;
--gap:   clamp(14px, 2.2vw, 22px);
--pad:   clamp(16px, 4vw, 28px);
--rail:  1180px;
--r:     10px;
--r-lg:  16px;
--ui:    "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--num:   "Spectral", ui-serif, Georgia, "Times New Roman", serif;
--ease:  cubic-bezier(.2, .7, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
a, button, summary, label, select, input[type="checkbox"] {
touch-action: manipulation;
-webkit-tap-highlight-color: color-mix(in srgb, var(--pine) 12%, transparent);
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 64px; }
html { overscroll-behavior-y: none; background: linear-gradient(var(--pine) 50%, var(--card) 50%); }
body { overscroll-behavior-y: none; isolation: isolate; min-block-size: 100vh; min-block-size: 100dvh; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
background: var(--paper);
color: var(--pine);
font: 400 16px/1.55 var(--ui);
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
}
img, svg { max-inline-size: 100%; block-size: auto; }
a { color: inherit; }
:where(a, button, input, select, summary):focus-visible {
outline: 2px solid var(--madder);
outline-offset: 2px;
border-radius: 2px;
}
.skip {
position: absolute; inset-inline-start: -9999px;
background: var(--pine); color: var(--paper);
padding: 10px 16px; z-index: 100;
}
.skip:focus { inset-inline-start: 8px; inset-block-start: 8px; }
.rail {
inline-size: min(100% - 2 * var(--pad), var(--rail));
margin-inline: auto;
}
.page-home { --rail: 1320px; }
#main { scroll-margin-block-start: 64px; }
#main:focus { outline: none; }
.sr-only {
position: absolute; inline-size: 1px; block-size: 1px;
margin: -1px; padding: 0; overflow: hidden; white-space: nowrap;
clip-path: inset(50%); border: 0;
}
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: clamp(34px, 5.4vw, 58px); font-weight: 800; text-wrap: balance; }
h2 { font-size: clamp(25px, 3.2vw, 34px); text-wrap: balance; }
h3 { font-size: clamp(18px, 2vw, 21px); }
p  { margin: 0; text-wrap: pretty; }
.lede  { font-size: clamp(17px, 1.8vw, 19px); color: var(--pine-soft); max-inline-size: 54ch; }
.muted { color: var(--stem); font-size: 14px; }
.tiny  { font-size: 13px; color: var(--stem); }
.head {
position: relative; z-index: 31;
padding-block-start: env(safe-area-inset-top);
background: var(--pine); color: var(--paper);
--on-head: color-mix(in srgb, var(--paper) 84%, var(--pine));
}
.head-in {
inline-size: min(100% - 2 * var(--pad), 1920px);
display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center; gap: var(--gap); min-block-size: 62px; padding-block: 8px;
}
.head-left { display: flex; align-items: center; gap: 2px; min-inline-size: 0; }
.head-icons { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.wordmark { display: block; text-decoration: none; line-height: 0; }
.mark {
display: block; block-size: 58px; inline-size: calc(58px * 2.32);
background: var(--paper);
-webkit-mask-image: var(--logo-mark, url("/static/logo-mark.svg"));
mask-image: var(--logo-mark, url("/static/logo-mark.svg"));
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
@media (max-width: 719px) {
.mark { block-size: 42px; inline-size: calc(42px * 2.32); }
}
.visually-hidden {
position: absolute; inline-size: 1px; block-size: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.head-link, .drop-btn, .head-icons a {
display: inline-flex; align-items: center; gap: 7px;
min-block-size: 44px; padding: 8px 10px; border: 0; border-radius: var(--r);
background: none; color: var(--on-head); font: 500 15px/1 var(--ui);
text-decoration: none; white-space: nowrap; cursor: pointer;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.head-link:hover, .drop-btn:hover, .drop.open .drop-btn, .head-icons a:hover,
.head-icons a[aria-current="page"] { background: var(--pine-deep); color: var(--paper); }
.head-icons a { inline-size: 44px; padding: 0; justify-content: center; }
.head-icons a.head-find { inline-size: auto; gap: 8px; padding: 0 8px; margin-inline-end: 14px; font-weight: 400; }
.head-find span {
min-inline-size: 96px; padding-block: 4px 5px;
border-block-end: 1px solid color-mix(in srgb, var(--paper) 45%, transparent);
transition: border-color .16s var(--ease);
}
.head-icons a.head-find:hover { background: none; }
.head-icons a.head-find:hover span { border-block-end-color: var(--paper); }
@media (max-width: 899px) {
.head-icons a.head-find { inline-size: 44px; padding: 0; margin-inline-end: 0; }
.head-find span { display: none; }
}
.tel { font-variant-numeric: tabular-nums; }
.head :focus-visible { outline-color: var(--paper); }
.drop { position: relative; }
.drop-btn svg:last-child { transition: transform .16s var(--ease); }
.drop.open .drop-btn svg:last-child { transform: rotate(180deg); }
.drop-menu {
display: none; position: absolute; z-index: 31;
inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 230px;
padding: 6px; background: var(--card); border: 1px solid var(--line);
border-radius: var(--r); box-shadow: 0 12px 30px rgba(43, 55, 53, .16);
}
.drop-menu::before {
content: ""; position: absolute; inset-inline: 0; inset-block-start: -10px; block-size: 10px;
}
.drop.open .drop-menu { display: grid; }
@media (hover: hover) { .drop:hover .drop-menu { display: grid; } }
.drop-menu a {
display: block; padding: 10px 12px; border-radius: 6px;
color: var(--pine); font-size: 15px; text-decoration: none;
}
.drop-menu a:hover { background: var(--line-soft); }
.head .drop-menu :focus-visible { outline-color: var(--madder); }
.tel-drop .drop-menu { min-inline-size: 210px; }
.tel-drop .drop-menu a { font-size: 16px; font-variant-numeric: tabular-nums; }
.page-h1 { font-size: clamp(28px, 4vw, 42px); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.more-grid a {
display: grid; gap: 6px; padding: 7px; border-radius: var(--r);
text-decoration: none; color: var(--pine-soft);
}
.more-pic {
aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
background: var(--line-soft); border-radius: var(--r);
}
.more-pic img {
inline-size: 100%; block-size: 100%; object-fit: cover; display: block;
}
.more-pic .initial {
font-family: var(--num); font-size: 26px; font-weight: 600;
color: var(--line); line-height: 1; user-select: none;
}
.more-name { font-size: 13.5px; line-height: 1.25; }
.more-grid a:hover { color: var(--pine); }
.more-grid a:hover .more-pic { outline: 2px solid var(--pine-soft); outline-offset: -2px; }
.more-all {
display: block; margin-block-start: 5px; padding: 10px 10px 8px;
border-block-start: 1px solid var(--line-soft); border-radius: var(--r);
font-size: 14px; color: var(--pine); text-decoration: none;
}
.more-all:hover { background: var(--line-soft); }
.subnav {
position: sticky; inset-block-start: 0; z-index: 30;
background: var(--pine); border-block-start: 1px solid rgba(248, 247, 245, .08);
--on-head: color-mix(in srgb, var(--paper) 84%, var(--pine));
}
.subnav-in { inline-size: min(100% - 2 * var(--pad), 1920px); display: flex; align-items: center; gap: 2px; min-block-size: 48px; }
.subnav-in > a, .subnav-drop > a {
display: inline-flex; align-items: center; gap: 5px; padding: 9px 10px;
border-radius: var(--r); font-size: 15px; font-weight: 500; color: var(--on-head);
text-decoration: none; white-space: nowrap;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.subnav-in > a:hover, .subnav-drop > a:hover { background: var(--pine-deep); color: var(--paper); }
.subnav-in > a[aria-current="page"], .subnav-drop > a[aria-current="page"] { color: var(--paper); font-weight: 600; }
.subnav-in > a.subnav-sale {
padding: 6px 14px 6px 11px; margin-inline-start: 6px; border-radius: 999px;
background: var(--promo); color: var(--pine-deep); font-weight: 700;
}
.subnav-in > a.subnav-sale:hover { background: var(--promo-soft); color: var(--pine-deep); }
.subnav-in > a.subnav-sale[aria-current="page"] {
color: var(--pine-deep); box-shadow: 0 0 0 2px var(--pine), 0 0 0 3.5px var(--promo);
}
.subnav-sale svg { flex: none; }
.subnav :focus-visible { outline-color: var(--paper); }
.subnav-drop { position: relative; }
.subnav-menu {
display: none; position: absolute; z-index: 26;
inset-block-start: calc(100% + 6px); inset-inline-start: 0;
inline-size: 470px; max-inline-size: 92vw; padding: 7px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: 0 12px 30px rgba(43, 55, 53, .18);
}
.subnav .subnav-menu :focus-visible { outline-color: var(--madder); }
.subnav-menu::before {
content: ""; position: absolute; inset-inline: 0; inset-block-start: -8px; block-size: 8px;
}
@media (hover: hover) { .subnav-drop:hover .subnav-menu { display: block; } }
.subnav-drop:focus-within .subnav-menu { display: block; }
.subnav-icons {
display: flex; gap: 2px; margin-inline-start: auto;
opacity: 0; visibility: hidden; translate: 0 -4px;
transition: opacity .2s var(--ease), translate .2s var(--ease), visibility 0s linear .2s;
}
.subnav.is-stuck .subnav-icons { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.subnav-icons a {
display: grid; place-items: center; inline-size: 40px; block-size: 40px;
border-radius: var(--r); color: var(--on-head);
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.subnav-icons a:hover, .subnav-icons a[aria-current="page"] { background: var(--pine-deep); color: var(--paper); }
@media (max-width: 1099px) { .head-city:not(.head-town) { display: none; } }
.head-town span { display: grid; line-height: 1.15; }
.head-town small { font-size: 12px; opacity: .8; }
.head-town b { font-size: 15px; }
.head-town small:last-child:not(:first-child) { font-size: 13px; font-weight: 600; opacity: 1; }
.town-toast { display: none; }
@media (max-width: 719px) {
.town-toast {
position: fixed; z-index: 45; inset-inline: 12px; inset-block-start: calc(66px + env(safe-area-inset-top));
display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px;
background: var(--card); color: var(--pine); border: 1px solid var(--line); border-radius: 14px;
box-shadow: 0 10px 30px rgba(23, 30, 28, .18); font-size: 15px;
opacity: 0; translate: 0 -8px; transition: opacity .25s var(--ease), translate .25s var(--ease);
}
.town-toast[hidden] { display: none; }
.town-toast.is-on { opacity: 1; translate: 0 0; }
.town-toast > span { flex: 1; }
.town-toast .btn { flex: none; }
}
@media (max-width: 899px) {
.tel { inline-size: 44px; padding: 0; justify-content: center; }
.tel span {
position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.tel-drop .drop-btn svg:last-child { display: none; }
.tel-drop .drop-menu { inset-inline: auto 0; }
}
@media (max-width: 719px) {
.head-in { display: flex; min-block-size: 58px; padding-block: 6px; }
.wordmark { order: -1; margin-inline-end: auto; }
.head-city, .drop, .head-icons { display: none; }
.drop.tel-drop { display: block; }
.head { position: sticky; inset-block-start: 0; }
#main { scroll-margin-block-start: 74px; }
html { scroll-padding-block-start: 74px; }
.subnav { display: none; }
}
.btn .brief { display: none; }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 20px; border: 1px solid var(--pine); border-radius: var(--r);
background: var(--pine); color: var(--paper);
font: 600 15px/1 var(--ui); text-decoration: none; cursor: pointer;
transition: background .16s var(--ease), border-color .16s var(--ease);
}
.btn:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.btn.ghost { background: transparent; color: var(--pine); border-color: var(--line); }
.btn.ghost:hover { background: var(--card); border-color: var(--pine-soft); }
.btn.small { padding: 9px 14px; font-size: 14px; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.hero { padding-block: clamp(28px, 5vw, 56px) clamp(24px, 4vw, 44px); }
.hero-in {
display: grid; gap: clamp(24px, 4vw, 46px);
grid-template-columns: 1fr;
align-items: end;
}
@media (min-width: 900px) {
.hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
.hero h1 { margin-block-end: 18px; }
.hero .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 26px; }
.facts {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px; background: var(--line); border: 1px solid var(--line);
margin-block-start: 30px;
}
.facts div { background: var(--paper); padding: 13px 14px; }
.facts b { display: block; font: 600 16px/1.2 var(--ui); }
.facts span { font-size: 12.5px; color: var(--stem); }
.showcase { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.showcase .item:first-child { grid-column: 1 / -1; }
.showcase .item:first-child .frame { aspect-ratio: 4 / 3; }
@media (min-width: 640px) and (max-width: 899px) {
.showcase { grid-template-columns: repeat(3, 1fr); }
.showcase .item:first-child { grid-column: auto; }
}
.sec { padding-block: clamp(34px, 5vw, 64px); }
.sec-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--gap); flex-wrap: wrap; margin-block-end: clamp(18px, 2.5vw, 28px);
}
.sec-head p { color: var(--stem); font-size: 15px; margin-block-start: 6px; }
.sec-head a { font-size: 15px; white-space: nowrap; }
.sec-head.center { justify-content: center; text-align: center; }
.sec-more { margin-block-start: clamp(16px, 2vw, 24px); text-align: center; }
.sec-more a { font-size: 15px; font-weight: 600; }
.grid {
display: grid; gap: var(--gap);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
}
@media (min-width: 700px) {
.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
}
@media (min-width: 900px) {
.grid.row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid.row5 {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(68%, 250px);
overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
scroll-snap-type: inline mandatory; scroll-padding-inline: var(--pad);
margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); padding-block-end: 4px;
}
.grid.row5::-webkit-scrollbar { display: none; }
.grid.row5 > * { scroll-snap-align: start; }
@media (min-width: 900px) {
.grid.row5 {
grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto;
overflow: visible; margin-inline: 0; padding-inline: 0;
}
}
.item {
position: relative;
container-type: inline-size;
display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line);
border-radius: var(--r-lg); overflow: hidden;
transition: border-color .16s var(--ease);
}
.item:hover { border-color: var(--pine-soft); }
.item > .buyline { margin-block-start: auto; }
.item > .shot { background: var(--paper); border-block-end: 1px solid var(--line-soft); }
.shot > .frame {
position: relative;
aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
}
.shot > .frame img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.item .initial {
font-family: var(--num); font-size: clamp(40px, 16cqi, 64px);
color: var(--line); font-weight: 600; line-height: 1; user-select: none;
}
.item > .name {
padding: 12px 13px 0;
font-size: 15px; font-weight: 600; line-height: 1.3;
text-decoration: none; letter-spacing: -.005em;
overflow-wrap: anywhere;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
overflow: hidden;
}
.item > .name::after { content: ""; position: absolute; inset: 0; }
.item > .specs {
padding: 6px 13px 0; flex: 1;
font-size: 12.5px; line-height: 1.35; color: var(--stem);
overflow-wrap: anywhere;
}
.item > .buyline { padding: 11px 13px 13px; display: grid; gap: 5px; }
.tag {
font-size: 11.5px; line-height: 1.25; padding: 4px 7px;
border: 1px solid var(--line); border-radius: 999px; color: var(--stem);
max-inline-size: 100%; overflow-wrap: anywhere;
}
.price {
font-family: var(--ui); font-size: 22px; font-weight: 700; line-height: 1.05;
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.price .cur { font-size: 13.5px; font-weight: 500; color: var(--stem); letter-spacing: 0; }
.price .was {
font-size: 14px; color: var(--stem); text-decoration: line-through;
margin-inline-start: 8px; font-weight: 400;
}
.price.ask { font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--stem); }
.price.cut { color: var(--promo-ink); }
.price.cut .cur { color: var(--promo-ink); }
.where { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--stem); }
.where::before {
content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%;
background: var(--pine-soft); flex: none;
}
.where.out::before { background: var(--line); }
.badge {
pointer-events: none;
position: absolute; inset-block-start: 9px; inset-inline-start: 9px; z-index: 2;
background: var(--promo); color: var(--pine-deep); border: 1px solid var(--promo);
font-size: 12.5px; font-weight: 700; line-height: 1.2;
padding: 4px 10px; border-radius: 999px; letter-spacing: .01em;
}
.badge.quiet { background: var(--pine); color: var(--paper); border-color: var(--pine); font-weight: 600; }
.catalog { display: grid; gap: clamp(20px, 3vw, 34px); align-items: start; }
@media (min-width: 960px) {
.catalog { grid-template-columns: 232px minmax(0, 1fr); }
}
.rail-filters { position: sticky; inset-block-start: 64px; }
@media (max-width: 959px) { .rail-filters { position: static; } }
.fgroup { border-block-start: 1px solid var(--line); padding-block: 15px; }
.fgroup:first-child { border-block-start: 0; padding-block-start: 0; }
.fgroup h2 { font-size: 13.5px; font-weight: 600; line-height: 1.2;
letter-spacing: 0; margin-block-end: 10px; color: var(--pine-soft); }
.fopts { display: flex; flex-direction: column; gap: 2px; }
.fopt {
display: flex; align-items: center; gap: 9px; cursor: pointer;
padding: 7px 6px; margin-inline: -6px; border-radius: var(--r); font-size: 14.5px;
min-block-size: 36px;
}
.fopt:hover { background: var(--line-soft); }
.fopt input { accent-color: var(--pine); inline-size: 18px; block-size: 18px; margin: 0; flex: none; }
.fopt .n { margin-inline-start: auto; color: var(--stem); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.fopt:has(input:checked) { font-weight: 600; }
.fopt:has(input:focus-visible) { outline: 2px solid var(--pine); outline-offset: 1px; }
.fmore > summary {
display: inline-flex; align-items: center; min-block-size: 36px; cursor: pointer;
list-style: none; font-size: 14px; font-weight: 600; color: var(--pine);
text-decoration: underline; text-underline-offset: 3px;
}
.fmore > summary::-webkit-details-marker { display: none; }
.fmore .shown, .fmore[open] .shut { display: none; }
.fmore[open] .shown { display: inline; }
.money-row { display: flex; align-items: center; gap: 8px; }
.money-row input {
inline-size: 100%; min-inline-size: 0; padding: 9px 10px; font: 400 14.5px var(--ui);
border: 1px solid var(--line); border-radius: var(--r);
background: var(--card); color: var(--pine);
}
.money-row span { color: var(--stem); }
.toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-block-end: 16px; padding-block-end: 14px; border-block-end: 1px solid var(--line);
}
.toolbar .count { font-size: 14.5px; color: var(--stem); margin-inline-end: auto; }
.sortbox { display: flex; align-items: center; gap: 8px; }
.tail-direct { display: none; }
.kind-about { margin-block-start: clamp(28px, 4vw, 44px); padding-block-start: 22px; border-block-start: 1px solid var(--line-soft); }
.kind-about h2 { margin: 0 0 10px; font-size: clamp(19px, 2.2vw, 23px); text-wrap: balance; }
.kind-about .post-body { font-size: 15.5px; color: var(--pine-soft); }
@media (max-width: 719px) {
.toolbar { flex-wrap: nowrap; }
.toolbar .count { min-inline-size: 0; }
.sortbox { min-inline-size: 0; }
.sortbox label {
position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap;
}
.toolbar select { max-inline-size: 58vw; min-block-size: 44px; }
.toolbar .count-tail { display: none; }
.sec-head .head-direct { display: none; }
.tail-direct { display: block; margin-block-start: 22px; text-align: center; }
}
.toolbar select {
padding: 9px 11px; font: 400 14.5px var(--ui); color: var(--pine);
border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.search {
display: flex; gap: 8px; margin-block-end: 16px;
}
.search input {
flex: 1; min-inline-size: 0; padding: 11px 13px; font: 400 15px var(--ui);
border: 1px solid var(--line); border-radius: var(--r);
background: var(--card); color: var(--pine);
}
.search input::placeholder { color: var(--stem); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-block-end: 14px; }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 8px 5px 11px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); font-size: 13px; text-decoration: none;
}
.chip:hover { border-color: var(--pine-soft); }
.chip b { font-weight: 600; }
.chip .x { color: var(--stem); font-size: 15px; line-height: 1; }
@media (min-width: 960px) { .fbox > summary { display: none; } }
.fbox > summary::-webkit-details-marker { display: none; }
.fbox > summary { list-style: none; }
.empty {
border: 1px dashed var(--line); border-radius: var(--r);
padding: clamp(26px, 5vw, 46px); text-align: center; background: var(--card);
}
.empty h3 { margin-block-end: 8px; }
.pager { display: flex; gap: 6px; justify-content: center; margin-block-start: 30px; flex-wrap: wrap; }
.pager a, .pager span {
min-inline-size: 40px; padding: 9px 12px; text-align: center; text-decoration: none;
border: 1px solid var(--line); border-radius: var(--r); font-size: 14.5px;
background: var(--card); font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--pine-soft); }
.pager [aria-current] { background: var(--pine); color: var(--paper); border-color: var(--pine); }
.pager .gap { border: 0; background: none; color: var(--stem); min-inline-size: 0; padding-inline: 4px; }
.pp { --rail: 1280px; }
.pp .crumbs {
display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
font-size: 13.5px; color: var(--stem);
}
.pp .crumbs a { color: var(--pine-soft); text-decoration: none; }
.pp .crumbs a:hover { color: var(--pine); text-decoration: underline; }
.pp .product-h1 {
max-inline-size: 32ch; margin: 10px auto clamp(18px, 2.4vw, 28px);
text-align: center; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12;
}
.product-card {
background: var(--card);
border: 1px solid var(--line-soft);
border-radius: 24px;
padding: clamp(14px, 2.8vw, 34px);
box-shadow: 0 1px 2px rgba(23, 30, 28, .04), 0 18px 44px rgba(23, 30, 28, .06);
}
.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.4vw, 40px); align-items: start; }
@media (min-width: 860px) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 450px); } }
.gallery-box { container-type: inline-size; }
.gallery {
--g: 12px;
display: grid; column-gap: var(--g); row-gap: 10px;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "shot" "w" "thumbs";
}
.gallery.has-h {
grid-template-columns: minmax(0, 1fr) 24px;
grid-template-areas: "shot h" "w ." "thumbs thumbs";
}
@media (min-width: 620px) {
.gallery.with-thumbs {
grid-template-columns: calc((100cqi - 3 * var(--g)) / 4) minmax(0, 1fr);
grid-template-areas: "thumbs shot" ". w";
}
.gallery.with-thumbs.has-h {
grid-template-columns: calc((100cqi - 4 * var(--g) - 28px) / 4) minmax(0, 1fr) 28px;
grid-template-areas: "thumbs shot h" ". w .";
}
}
.product .shot {
grid-area: shot; position: relative;
background: var(--paper); border: 1px solid var(--line-soft);
border-radius: 20px; overflow: hidden; container-type: inline-size;
}
.product .shot > .frame { aspect-ratio: 1 / 1; }
.product .shot .initial { font-family: var(--num); font-size: clamp(64px, 22cqi, 130px); color: var(--line); }
.product .shot .badge { inset-block-start: 12px; inset-inline-start: 12px; font-size: 13px; }
.dim { display: flex; align-items: center; pointer-events: none; }
.dim-h { grid-area: h; flex-direction: column; gap: 8px; }
.dim-h::before, .dim-h::after {
content: ""; flex: 1; inline-size: 1px;
background: color-mix(in srgb, var(--stem) 55%, transparent);
}
.dim-h span {
writing-mode: vertical-rl; rotate: 180deg;
font: 500 12.5px/1 var(--ui); color: var(--stem); white-space: nowrap;
}
.dim-w { grid-area: w; justify-self: center; inline-size: 34%; gap: 4px; }
.dim-w::before, .dim-w::after { content: ""; flex: 1; block-size: 1.5px; background: var(--pine); }
.dim-w b {
flex: none; padding: 2px 8px; border-radius: 999px;
background: var(--card); border: 1px solid var(--pine);
font: 600 12px/1.2 var(--ui); color: var(--pine); white-space: nowrap;
}
.spec { border-block-start: 1px solid var(--line); margin-block-start: 20px; }
.spec div {
display: flex; gap: 14px; justify-content: space-between;
padding-block: 11px; border-block-end: 1px solid var(--line-soft); font-size: 15px;
}
.spec dt, .spec .k { color: var(--stem); }
.spec .v { font-weight: 600; text-align: end; }
.buy {
border: 1px solid var(--line); background: var(--card);
border-radius: var(--r); padding: var(--pad); margin-block-start: 22px;
}
.buy .price { font-size: 32px; }
.panel {
background: var(--pine); color: var(--paper);
border-radius: var(--r); padding: clamp(26px, 4.5vw, 48px);
}
.panel h2 { color: var(--paper); }
.panel p { color: color-mix(in srgb, var(--paper) 78%, var(--pine)); margin-block-start: 12px; }
.panel .btn { background: var(--paper); color: var(--pine); border-color: var(--paper); }
.panel .btn:hover { background: #fff; border-color: #fff; }
.panel.panel-wide { border-radius: 0; padding-inline: 0; margin-block-start: clamp(34px, 5vw, 64px); }
.panel .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 24px; max-inline-size: 560px; }
.panel .cta .btn { flex: 1 1 220px; }
.panel .btn.ghost {
background: transparent; color: var(--paper);
border-color: color-mix(in srgb, var(--paper) 40%, transparent);
}
.panel .btn.ghost:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); }
.cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.box {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
padding: clamp(18px, 2.6vw, 26px);
}
.box h3, .box .box-h { margin-block-end: 9px; }
.box .box-h { font-size: clamp(18px, 2vw, 21px); }
.box p { color: var(--pine-soft); font-size: 15px; }
.box .addr { color: var(--stem); font-size: 14px; margin-block-start: 12px; }
.steps { counter-reset: s; }
.steps .box { position: relative; }
.steps .box::before {
counter-increment: s; content: counter(s);
font-family: var(--ui); font-size: 30px; color: var(--line);
position: absolute; inset-block-start: 14px; inset-inline-end: 18px; line-height: 1;
}
.foot {
border-block-start: 1px solid var(--line); margin-block-start: clamp(40px, 6vw, 80px);
padding-block: clamp(28px, 4vw, 46px) 30px;
}
.foot-in { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
.foot h2 { font-size: 13.5px; font-weight: 600; color: var(--stem); margin: 0; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; }
.foot-brand p { margin: 6px 0 0; font-size: 14.5px; color: var(--pine-soft); }
.foot-phone { display: block; inline-size: fit-content; font-size: 19px; font-weight: 600; color: var(--pine); font-variant-numeric: tabular-nums; }
.foot-group summary { list-style: none; cursor: default; margin-block-end: 11px; }
.foot-group summary::-webkit-details-marker { display: none; }
.foot .legal {
border-block-start: 1px solid var(--line-soft); margin-block-start: 26px; padding-block-start: 18px;
font-size: 12.5px; color: var(--stem); display: flex; gap: 8px 18px; flex-wrap: wrap;
}
@media (max-width: 719px) {
.foot-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
.foot-brand { padding-block-end: 14px; }
.foot-group { border-block-start: 1px solid var(--line-soft); }
.foot-group summary {
cursor: pointer; margin: 0; padding-block: 14px; display: flex; justify-content: space-between; align-items: center;
}
.foot-group summary h2 { font-size: 15px; color: var(--pine); }
.foot-group summary::after {
content: ""; inline-size: 8px; block-size: 8px; margin-inline-end: 4px;
border: solid var(--stem); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) translateY(-2px);
transition: transform .2s var(--ease);
}
.foot-group[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.foot-group ul { padding-block-end: 14px; gap: 2px; }
.foot-group li a { display: block; padding-block: 7px; }
}
.consent-open {
padding: 0; border: 0; background: none; cursor: pointer;
font: inherit; color: inherit; text-decoration: underline;
}
.consent-open:hover { color: var(--pine); }
.grid[aria-busy="true"],
#results[aria-busy="true"] .grid { opacity: .45; transition: opacity .12s var(--ease); }
.neterr {
border: 1px solid color-mix(in srgb, var(--madder) 35%, var(--line));
background: var(--madder-dim); color: var(--pine);
border-radius: var(--r); padding: 12px 14px; margin-block-end: 14px;
font-size: 14.5px;
}
.neterr .link {
border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
color: var(--madder); text-decoration: underline;
}
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(grid) { animation: fade .16s var(--ease) both reverse; }
::view-transition-new(grid) { animation: fade .2s var(--ease) both; }
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@media print {
.head, .foot, .rail-filters, .toolbar, .pager, .btn { display: none !important; }
body { background: #fff; }
}
.sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.size {
display: inline-flex; align-items: baseline; gap: 8px;
padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); color: var(--pine-soft); text-decoration: none; line-height: 1.2;
transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.size:hover { border-color: var(--pine-soft); color: var(--pine); }
.size b { font-size: 15px; font-weight: 600; }
.size span { font-size: 13.5px; color: var(--stem); font-variant-numeric: tabular-nums; }
.size .off { font-size: 12px; color: var(--madder); }
.size.on {
border-color: color-mix(in srgb, var(--madder) 35%, var(--line));
background: var(--madder-dim); color: var(--pine-deep);
}
.banner { padding-block: clamp(22px, 3.5vw, 40px) clamp(18px, 2.5vw, 28px); }
.banner-in { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) and (min-height: 640px) {
.banner { min-block-size: calc(100svh - 76px); display: grid; align-content: center; }
}
@media (min-width: 900px) {
.banner-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.kicker { font-size: 13.5px; color: var(--stem); margin-block-end: 14px; }
.banner h1 { margin-block-end: 16px; }
.banner .cta { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 24px; }
.promise {
margin-block-start: 20px; padding-block-start: 16px;
border-block-start: 1px solid var(--line);
font-size: 14px; color: var(--stem); line-height: 1.7;
}
.promise b { color: var(--pine); font-weight: 600; }
.banner-shot {
position: relative; display: block; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
aspect-ratio: 5 / 4;
}
.banner-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.banner-tag {
position: absolute; inset-inline: 10px; inset-block-end: 10px;
background: color-mix(in srgb, var(--pine) 92%, transparent);
color: var(--paper); font-size: 14px; font-weight: 600;
padding: 10px 13px; border-radius: var(--r);
backdrop-filter: blur(6px);
}
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.tile {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 15px; border: 1px solid var(--line); border-radius: var(--r);
background: var(--card); text-decoration: none; font-weight: 600; font-size: 15px;
min-block-size: 52px; transition: border-color .16s var(--ease);
}
.tile:hover { border-color: var(--pine); }
.tile span { color: var(--stem); font-weight: 400; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tile.wide { background: var(--pine); color: var(--paper); border-color: var(--pine); }
.tile.wide span { color: color-mix(in srgb, var(--paper) 70%, var(--pine)); }
.reel {
display: grid; grid-auto-flow: column;
grid-auto-columns: min(62%, 210px);
gap: var(--gap); overflow-x: auto; overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory; scrollbar-width: thin;
padding-block-end: 10px;
}
@media (min-width: 700px) { .reel { grid-auto-columns: minmax(215px, calc((100% - 3 * var(--gap)) / 4)); } }
.reel.reel-big { grid-auto-columns: min(82%, 320px); }
@media (min-width: 700px) {
.reel.reel-big { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
}
.reel-item { scroll-snap-align: start; display: flex; }
@media (max-width: 719px) {
.reel.reel-big { grid-auto-columns: calc((100% - var(--gap)) / 2); }
.reel.reel-big > .reel-item { scroll-snap-stop: always; }
.grid.row5 { grid-auto-columns: calc((100vw - 2 * var(--pad) - var(--gap)) / 2); }
.grid.row5 > * { scroll-snap-stop: always; }
}
.all-tile {
position: relative; isolation: isolate; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
flex: 1; min-block-size: 100%; padding: 24px 16px;
border-radius: var(--r-lg); background: var(--pine); color: var(--paper);
text-align: center; text-decoration: none;
transition: background-color .16s var(--ease);
}
.all-tile::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: currentColor; opacity: .12;
-webkit-mask-image: var(--logo-flower, url("/static/logo-flower.svg"));
mask-image: var(--logo-flower, url("/static/logo-flower.svg"));
-webkit-mask-size: 46px; mask-size: 46px;
-webkit-mask-repeat: space; mask-repeat: space;
}
.all-tile:hover { background: var(--pine-deep); }
.all-tile:focus-visible { outline: 2px solid var(--madder); outline-offset: 3px; }
.all-tile-say { font-size: clamp(20px, 5vw, 24px); font-weight: 700; line-height: 1.15; }
.all-tile-go {
display: grid; place-items: center; inline-size: 48px; block-size: 48px;
border-radius: 50%; background: var(--paper); color: var(--pine); font-size: 22px;
}
.all-tile-light { background: var(--paper); color: var(--pine); }
.all-tile-light:hover { background: var(--card); }
.all-tile-light .all-tile-go { background: var(--pine); color: var(--paper); }
@media (min-width: 900px) { .grid.row5 > .all-tile { display: none; } }
.reel-item > .item, .reel-item > .addon { flex: 1; min-inline-size: 0; }
.reel::-webkit-scrollbar { block-size: 6px; }
.reel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.reel:focus-visible { outline: 2px solid var(--madder); outline-offset: 4px; }
.sec.tight { padding-block: clamp(24px, 3.2vw, 40px); }
.product .zoom {
display: block; inline-size: 100%; block-size: 100%; padding: 0; border: 0;
background: none; cursor: zoom-in; align-self: stretch; justify-self: stretch;
}
.product .zoom img { transition: transform .3s var(--ease); }
@media (hover: hover) { .product .zoom:hover img { transform: scale(1.03); } }
html.viewer-open { overflow: hidden; }
.viewer {
inline-size: 100vw; block-size: 100dvh; max-inline-size: none; max-block-size: none;
margin: 0; padding: 0; border: 0; color: var(--paper);
background: #121816; overscroll-behavior: contain;
}
.viewer::backdrop { background: rgba(18, 24, 22, .6); }
.viewer-body {
--stage: min(calc(100vw - 24px), calc(100dvh - 170px));
block-size: 100%; padding: 12px;
display: grid; grid-template-columns: var(--stage); place-content: center; gap: 12px;
}
.viewer-stage {
position: relative; inline-size: var(--stage); block-size: var(--stage);
background: var(--card); border-radius: var(--r-lg); overflow: hidden;
}
.viewer-track {
display: flex; block-size: 100%; overflow-x: auto; overscroll-behavior: contain;
scroll-snap-type: x mandatory; scrollbar-width: none;
}
.viewer-track::-webkit-scrollbar { display: none; }
.viewer-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; }
.viewer-slide img {
display: block; inline-size: 100%; block-size: 100%; max-inline-size: none;
object-fit: contain;
}
.viewer-nav {
position: absolute; inset-block-start: 50%; translate: 0 -50%;
display: grid; place-items: center; inline-size: 42px; block-size: 50px;
border: 0; border-radius: var(--r); background: var(--card); color: var(--pine);
box-shadow: 0 2px 12px rgba(23, 30, 28, .2); cursor: pointer;
transition: background-color .16s var(--ease), opacity .16s var(--ease);
}
.viewer-nav:hover { background: var(--paper); }
.viewer-nav[disabled] { opacity: .35; cursor: default; }
.viewer-nav.prev { inset-inline-start: 12px; }
.viewer-nav.next { inset-inline-end: 12px; }
.viewer-thumbs {
display: flex; gap: 8px; justify-content: center;
overflow: auto; scrollbar-width: none;
}
.viewer-thumbs::-webkit-scrollbar { display: none; }
.viewer-thumb {
flex: none; inline-size: 72px; padding: 0; line-height: 0; cursor: pointer;
border: 2px solid transparent; border-radius: var(--r); overflow: hidden;
background: var(--card); opacity: .55;
transition: opacity .16s var(--ease), border-color .16s var(--ease);
}
.viewer-thumb img { inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.viewer-thumb:hover { opacity: .85; }
.viewer-thumb.on { opacity: 1; border-color: var(--paper); }
@media (min-width: 900px) {
.viewer-body {
--stage: min(calc(100dvh - 48px), calc(100vw - 280px));
grid-template-columns: 88px var(--stage); align-items: start;
}
.viewer-thumbs {
order: -1; flex-direction: column; justify-content: flex-start;
max-block-size: var(--stage);
}
.viewer-thumb { inline-size: 88px; }
}
.viewer-close {
position: fixed; display: grid; place-items: center;
inset-block-start: max(12px, env(safe-area-inset-top));
inset-inline-end: max(12px, env(safe-area-inset-right));
inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%;
background: rgba(248, 247, 245, .16); color: var(--paper); cursor: pointer;
transition: background-color .16s var(--ease);
}
.viewer-close:hover { background: rgba(248, 247, 245, .3); }
.thumbs {
grid-area: thumbs; display: flex; gap: 8px;
overflow-x: auto; scrollbar-width: none; padding-block-end: 2px;
}
@media (min-width: 620px) {
.gallery.with-thumbs .thumbs {
flex-direction: column; gap: var(--g); padding: 0;
overflow: hidden auto; contain: size;
}
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs .thumb {
flex: none; inline-size: 72px; padding: 0; cursor: pointer;
border: 1px solid var(--line-soft); border-radius: var(--r-lg);
background: var(--paper); overflow: hidden; line-height: 0;
transition: border-color .16s var(--ease);
}
@media (min-width: 620px) { .gallery.with-thumbs .thumbs .thumb { inline-size: 100%; } }
.thumbs .thumb img { inline-size: 100%; aspect-ratio: 1/1; object-fit: cover; }
.thumbs .thumb:hover { border-color: var(--pine-soft); }
.thumbs .thumb.on { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.thumbs .thumb { position: relative; }
.thumbs .thumb::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: rgba(255, 255, 255, .4); transition: opacity .25s var(--ease);
}
.thumbs .thumb.on::after { opacity: 0; }
.thumbs .thumb img { transition: filter .25s var(--ease); }
.thumbs .thumb:not(.on) img { filter: saturate(.8) contrast(.92); }
@media (hover: hover) { .thumbs .thumb:not(.on):hover::after { opacity: .5; } }
.deck { --deck-bg: rgba(61, 56, 44, .055); margin-block: 0 22px; background: var(--deck-bg); }
.home-chips { display: none; }
@media (max-width: 719px) {
.home-chips {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
margin-block: 16px 22px; padding-inline: var(--pad);
}
.home-chips a {
display: grid; justify-items: center; gap: 7px; text-align: center; text-decoration: none;
color: var(--pine); font: 600 13px/1.2 var(--ui);
}
.chip-ring {
display: grid; place-items: center; inline-size: min(72px, 100%); aspect-ratio: 1;
border-radius: 50%; overflow: hidden; background: var(--card); border: 2px solid var(--line);
}
.chip-ring img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.chip-ring.is-icon { background: var(--pine); border-color: var(--pine); color: var(--paper); font: 700 22px/1 var(--ui); }
.home-chips a:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; border-radius: 12px; }
}
.deck-in { position: relative; z-index: 1; inline-size: min(100%, 1920px); margin-inline: auto; }
@media (max-width: 719px) {
.deck-in { inline-size: 100%; }
}
.deck-track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-inline: contain;
scrollbar-width: none;
}
.deck-track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
.deck-track { scroll-behavior: auto; }
}
.deck-slide {
position: relative;
flex: 0 0 100%;
scroll-snap-align: start;
scroll-snap-stop: always;
aspect-ratio: 2 / 1;
max-block-size: 640px;
overflow: hidden;
background: var(--line-soft);
container-type: inline-size;
}
.deck-slide img {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
object-fit: cover;
display: block;
}
.deck-slide::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
}
.has-say.tone-dark.say-start::after {
background: linear-gradient(90deg, rgba(23, 30, 28, calc(.6 * var(--fade, 1))) 0%, rgba(23, 30, 28, calc(.3 * var(--fade, 1))) 30%, transparent 56%);
}
.has-say.tone-dark.say-end::after {
background: linear-gradient(270deg, rgba(23, 30, 28, calc(.6 * var(--fade, 1))) 0%, rgba(23, 30, 28, calc(.3 * var(--fade, 1))) 30%, transparent 56%);
}
.has-say.tone-dark.say-center::after {
background: radial-gradient(70% 60% at 50% 50%, rgba(23, 30, 28, calc(.5 * var(--fade, 1))) 0%, transparent 100%);
}
.has-say.tone-light.say-start::after {
background: linear-gradient(90deg, rgba(248, 249, 246, calc(.72 * var(--fade, 1))) 0%, rgba(248, 249, 246, calc(.36 * var(--fade, 1))) 30%, transparent 56%);
}
.has-say.tone-light.say-end::after {
background: linear-gradient(270deg, rgba(248, 249, 246, calc(.72 * var(--fade, 1))) 0%, rgba(248, 249, 246, calc(.36 * var(--fade, 1))) 30%, transparent 56%);
}
.has-say.tone-light.say-center::after {
background: radial-gradient(70% 60% at 50% 50%, rgba(248, 249, 246, calc(.62 * var(--fade, 1))) 0%, transparent 100%);
}
.deck-say {
position: absolute; inset: 0; z-index: 1;
display: grid; align-content: center;
gap: 12px;
padding: clamp(20px, 4cqi, 52px);
max-inline-size: min(46ch, 62%);
}
@media (min-width: 720px) { .deck-say { padding-inline: clamp(76px, 6cqi, 104px); } }
.say-end .deck-say { justify-self: end; margin-inline-start: auto; text-align: end; }
.say-center .deck-say {
justify-self: center; margin-inline: auto; text-align: center;
max-inline-size: min(42ch, 78%);
}
.deck-say h2 {
margin: 0;
font-size: calc(clamp(25px, 5.4cqi, 47px) * var(--say-scale, 1));
line-height: 1.06;
letter-spacing: -.018em;
font-weight: 700;
text-wrap: balance;
}
.deck-say p {
margin: 0;
font-size: calc(clamp(14.5px, 1.8cqi, 18px) * var(--say-scale, 1));
line-height: 1.45;
max-inline-size: 42ch;
}
.say-end .deck-say p, .say-center .deck-say p { margin-inline-start: auto; }
.say-center .deck-say p { margin-inline-end: auto; }
.tone-dark .deck-say { color: #F4F6F3; }
.tone-dark .deck-say p { color: rgba(244, 246, 243, .88); }
.tone-light .deck-say { color: var(--pine-deep); }
.tone-light .deck-say p { color: var(--pine-soft); }
.deck-go {
justify-self: start;
display: inline-flex; align-items: center;
padding: 11px 20px; border-radius: var(--r);
font-size: 15px; font-weight: 600; text-decoration: none;
transition: background .16s var(--ease), color .16s var(--ease);
}
.say-end .deck-go { justify-self: end; }
.say-center .deck-go { justify-self: center; }
.tone-dark .deck-go { background: var(--go-bg, var(--paper)); color: var(--go-fg, var(--pine-deep)); }
.tone-dark .deck-go:hover { background: var(--go-hover, #fff); }
.tone-light .deck-go { background: var(--go-bg, var(--pine)); color: var(--go-fg, var(--paper)); }
.tone-light .deck-go:hover { background: var(--go-hover, var(--pine-deep)); }
.deck-arrow {
position: absolute; inset-block-start: 50%; translate: 0 -50%;
z-index: 2; inline-size: 42px; block-size: 42px;
display: grid; place-items: center;
border: 0; border-radius: 50%; cursor: pointer;
background: color-mix(in srgb, var(--paper) 90%, transparent);
color: var(--pine-deep);
box-shadow: 0 2px 10px rgba(23, 30, 28, .18);
transition: background .16s var(--ease), opacity .16s var(--ease);
}
.deck-arrow:hover { background: var(--paper); }
.deck-arrow[disabled] { opacity: .32; cursor: default; }
.deck-arrow.prev { inset-inline-start: 12px; }
.deck-arrow.next { inset-inline-end: 12px; }
.deck-dots {
position: absolute; inset-block-end: 12px; inset-inline: 0;
z-index: 2; display: flex; gap: 6px; justify-content: center;
}
.deck-dots span {
inline-size: 6px; block-size: 6px; border-radius: 50%;
background: color-mix(in srgb, var(--paper) 55%, transparent);
transition: inline-size .18s var(--ease), background .18s var(--ease);
}
.deck-dots span[data-here] {
inline-size: 20px; border-radius: 3px; background: var(--paper);
}
@media (max-width: 719px) {
.deck-slide { aspect-ratio: 5 / 4; }
.deck-slide::after { display: none; }
.deck .deck-slide.has-say::after {
display: block; inset: 38% 0 0;
background: linear-gradient(transparent, rgba(23, 30, 28, .8));
}
.deck-slide .deck-say {
inset: auto 0 0; align-content: end; gap: 10px; max-inline-size: none;
padding: 0 var(--pad) 34px; text-align: start; justify-self: stretch; margin: 0;
color: #F4F6F3;
}
.deck-slide:not(.has-say) .deck-say { display: none; }
.deck-slide .deck-say h2 { font-size: calc(24px * var(--say-scale, 1)); text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.deck-slide .deck-say p { display: none; }
.deck-slide .deck-go { justify-self: start; background: var(--paper); color: var(--pine-deep); }
.deck-slide .deck-go:hover { background: #fff; }
.deck-arrow { display: none; }
}
.item .frame .peek {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%; object-fit: cover;
opacity: 0; transition: opacity .22s var(--ease);
}
@media (hover: hover) {
.item:hover .frame .peek, .item:focus-within .frame .peek { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.item .frame .peek { transition: none; }
}
.item .shots { display: contents; }
.item .shots > .more, .item .shot-dots { display: none; }
@media (max-width: 719px) {
.item .shots {
position: absolute; inset: 0; z-index: 1;
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-inline: contain;
}
.reel .item .shots { overscroll-behavior-inline: auto; }
.item .shots::-webkit-scrollbar { display: none; }
.item .shots > img, .item .shots > .more {
flex: 0 0 100%; display: block; scroll-snap-align: start; scroll-snap-stop: always;
}
.item .shots > .peek { position: static; opacity: 1; transition: none; }
.item .shot-dots {
position: absolute; inset-block-end: 8px; inset-inline-start: 50%; z-index: 2;
translate: -50% 0; pointer-events: none;
display: flex; gap: 4px; align-items: center;
padding: 4px 6px; border-radius: 999px;
background: color-mix(in srgb, var(--card) 86%, transparent);
}
.item .shot-dots i {
inline-size: 5px; block-size: 5px; border-radius: 3px;
background: color-mix(in srgb, var(--pine) 30%, transparent);
transition: inline-size .18s var(--ease), background .18s var(--ease);
}
.item .shot-dots i[data-here] { inline-size: 12px; background: var(--pine); }
}
@media (max-width: 719px) and (prefers-reduced-motion: reduce) {
.item .shot-dots i { transition: none; }
}
.pickup {
margin-block-start: 12px; padding: 12px 14px;
background: var(--paper); border-radius: var(--r);
display: grid; gap: 7px; font-size: 14.5px;
}
.pickup b { font-size: 13px; color: var(--stem); font-weight: 600; }
.pickup div {
display: flex; gap: 10px; flex-wrap: wrap;
align-items: baseline; justify-content: space-between;
}
.pickup a { color: var(--pine); white-space: nowrap; }
.promo-sec h2 { color: var(--ink); }
.promo-sec .sec-head p { color: var(--stem); }
.reel-wrap { position: relative; }
.reel-arrow {
position: absolute; inset-block-start: calc(50% - 34px); translate: 0 -50%;
z-index: 3; inline-size: 38px; block-size: 38px;
display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
background: var(--card); color: var(--pine-deep);
box-shadow: 0 2px 12px rgba(23, 30, 28, .12);
transition: background .16s var(--ease), opacity .16s var(--ease);
}
.reel-arrow:hover { background: var(--paper); }
.reel-arrow:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.reel-arrow[disabled] { opacity: .3; cursor: default; }
.reel-arrow.prev { inset-inline-start: -6px; }
.reel-arrow.next { inset-inline-end: -6px; }
.reel-arrow[hidden] { display: none; }
@media (max-width: 899px) { .reel-arrow { display: none; } }
.vcard {
--beige: #EBE1D2;
display: grid; gap: clamp(8px, 1.1vw, 14px);
grid-template-columns: 1fr 1.1fr 1fr;
grid-template-rows: 2fr 1fr 2fr;
grid-template-areas: "del cat pla" "ig cat pla" "ig cat bou";
aspect-ratio: 2.15 / 1;
}
.vt-delivery { grid-area: del; }
.vt-instagram { grid-area: ig; }
.vt-catalog { grid-area: cat; }
.vt-plants { grid-area: pla; }
.vt-bouquets { grid-area: bou; }
.vtile {
position: relative; display: block; border-radius: var(--r-lg);
perspective: 1400px; text-decoration: none;
}
.vflip {
--flip: .7s;
position: absolute; inset: 0; transform-style: preserve-3d;
transition: transform var(--flip) var(--ease);
}
.vface {
position: absolute; inset: 0; overflow: hidden; border-radius: var(--r-lg);
-webkit-backface-visibility: hidden; backface-visibility: hidden;
transition: visibility 0s linear calc(var(--flip) * .16);
}
.vfront { background: var(--pine); }
.vback { background: var(--beige); transform: rotateY(180deg); visibility: hidden; }
.vicon {
--pad: clamp(14px, 1.9vw, 28px);
position: absolute; z-index: 1;
inset-block-start: var(--pad); inset-inline-start: var(--pad);
inline-size: clamp(56px, 7.8vw, 112px); block-size: auto; aspect-ratio: 1;
fill: none; stroke: var(--pine); stroke-width: 2px;
stroke-linecap: round; stroke-linejoin: round;
}
.vicon * { vector-effect: non-scaling-stroke; }
.vt-catalog .vicon { inset-block: auto var(--pad); }
.vt-bouquets .vicon { inset-inline: auto var(--pad); }
.vlogo {
position: absolute; z-index: 1;
inset-inline-start: calc(-1 * var(--ox, 0px)); inset-block-start: calc(-1 * var(--oy, 0px));
inline-size: var(--cw, 100%); block-size: var(--ch, 100%);
-webkit-mask-image: var(--logo-full, url("/static/logo-full.svg"));
mask-image: var(--logo-full, url("/static/logo-full.svg"));
-webkit-mask-size: auto 72%; mask-size: auto 72%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.vfront .vlogo { background: var(--paper); }
.vback .vlogo { background: var(--pine); }
.vlabel {
position: absolute; z-index: 2;
inset-inline-end: clamp(12px, 1.6vw, 22px); inset-block-end: clamp(10px, 1.4vw, 18px);
padding: 5px 11px; border-radius: 999px;
font: 600 clamp(13px, 1.15vw, 15.5px)/1.2 var(--ui); color: var(--paper);
transition: background-color .3s var(--ease), color .3s var(--ease);
}
@media (hover: hover) {
.vtile:hover .vflip { transform: rotateY(180deg); }
.vtile:hover .vlabel { background: var(--card); color: var(--pine); }
.vtile:hover .vfront { visibility: hidden; }
.vtile:hover .vback { visibility: visible; }
}
.vtile.is-flipped .vflip, .vtile:focus-visible .vflip { transform: rotateY(180deg); }
.vtile.is-flipped .vfront, .vtile:focus-visible .vfront { visibility: hidden; }
.vtile.is-flipped .vback, .vtile:focus-visible .vback { visibility: visible; }
.vtile.is-flipped .vlabel, .vtile:focus-visible .vlabel { background: var(--card); color: var(--pine); }
.vtile:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.vface { transition: opacity .3s var(--ease), visibility 0s; }
.vback { transform: none; opacity: 0; }
.vtile:hover .vflip, .vtile:focus-visible .vflip, .vtile.is-flipped .vflip { transform: none; }
.vtile:hover .vback, .vtile:focus-visible .vback, .vtile.is-flipped .vback { opacity: 1; }
}
@media (max-width: 719px) {
.vcard {
grid-template-columns: 1fr 1fr; grid-template-rows: 1.5fr 1fr 1fr;
grid-template-areas: "cat cat" "del pla" "ig bou"; aspect-ratio: 3 / 4;
}
.vlogo {
-webkit-mask-size: 56% auto; mask-size: 56% auto;
-webkit-mask-position: center 4%; mask-position: center 4%;
}
.vlabel { inset: auto auto 12px 12px; max-inline-size: calc(100% - 24px); font-size: 15px; }
.vicon { inline-size: 44px; }
.vt-bouquets .vicon { inset-inline: var(--pad) auto; }
.vt-catalog .vicon { inset: auto var(--pad) var(--pad) auto; }
.vtile { transition: scale .15s var(--ease); }
.vtile:active { scale: .97; }
}
.plants-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plants-grid > .item:nth-child(n+6) { display: none; }
.plants-intro {
display: none; position: relative; overflow: hidden; isolation: isolate;
flex-direction: column; justify-content: flex-end; gap: 12px;
padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg);
background: var(--pine); color: var(--paper); text-decoration: none;
}
.plants-intro::before {
content: ""; position: absolute; z-index: -1;
inset-block-start: -6%; inset-inline-end: -12%; inline-size: 80%; aspect-ratio: 65.4 / 49.5;
background: var(--paper); opacity: .1;
-webkit-mask-image: var(--logo-flower, url("/static/logo-flower.svg"));
mask-image: var(--logo-flower, url("/static/logo-flower.svg"));
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.plants-kicker { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.plants-intro b { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; font-weight: 700; text-wrap: balance; }
.plants-lede { font-size: 16px; line-height: 1.45; max-inline-size: 34ch; color: color-mix(in srgb, var(--paper) 78%, var(--pine)); }
.plants-go {
align-self: flex-start; margin-block-start: 6px; padding: 12px 20px; border-radius: var(--r);
background: var(--paper); color: var(--pine); font-weight: 600;
transition: background-color .16s var(--ease);
}
.plants-intro:hover .plants-go { background: var(--card); }
@media (min-width: 900px) {
.v-mosaic .plants-grid, .v-split .plants-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v-mosaic .plants-grid > .item:nth-child(6) { display: flex; }
.v-mosaic .plants-grid > .item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.v-mosaic .plants-grid > .item:nth-child(2) .shot { display: flex; flex: 1 1 auto; }
.v-mosaic .plants-grid > .item:nth-child(2) .frame { flex: 1; aspect-ratio: auto; min-block-size: 280px; }
.v-mosaic .plants-grid > .item:nth-child(2) .frame img { position: absolute; inset: 0; }
.v-mosaic .plants-grid > .item:not(:nth-child(2)) .frame,
.v-split .plants-grid > .item .frame { aspect-ratio: 1 / 1; }
.v-split .plants-intro { display: flex; justify-content: center; grid-column: span 2; grid-row: span 2; }
.v-reel .plants-grid {
grid-template-columns: none; grid-auto-flow: column;
grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
overflow-x: auto; overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory; scrollbar-width: thin; padding-block-end: 10px;
}
.v-reel .plants-grid > .item { display: flex; scroll-snap-align: start; }
}
.tabbar { display: none; }
html.sheet-open { overflow: hidden; }
.sheet {
position: fixed; inset: 0 0 calc(62px + max(6px, env(safe-area-inset-bottom))); z-index: 35;
inline-size: auto; block-size: auto; max-inline-size: none; max-block-size: none;
margin: 0; border: 0; padding: 0 var(--pad) 24px; overflow-y: auto;
background: var(--card); color: var(--pine); overscroll-behavior: contain;
}
.sheet:focus { outline: none; }
.sheet {
translate: 0 100%;
transition: translate .36s var(--ease), display .36s allow-discrete;
}
.sheet[open] { translate: 0 0; }
@starting-style { .sheet[open] { translate: 0 100%; } }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }
.sheet.sheet-half {
inset-block-start: auto; block-size: 50vh; block-size: 50dvh;
padding-block-end: 16px; border-radius: 22px 22px 0 0;
box-shadow: 0 0 0 100vmax rgba(23, 30, 28, 0);
translate: 0 100%;
transition: translate .32s var(--ease), box-shadow .32s var(--ease), display .32s allow-discrete;
}
.sheet.sheet-half[open] { translate: 0 0; box-shadow: 0 0 0 100vmax rgba(23, 30, 28, .34); }
@starting-style {
.sheet.sheet-half[open] { translate: 0 100%; box-shadow: 0 0 0 100vmax rgba(23, 30, 28, 0); }
}
.sheet-half .sheet-head::before {
content: ""; position: absolute; inset-block-start: 7px; inset-inline-start: 50%;
inline-size: 38px; block-size: 4px; margin-inline-start: -19px;
border-radius: 2px; background: var(--line);
}
@media (prefers-reduced-motion: reduce) { .sheet.sheet-half { transition: none; } }
.sheet-head {
position: sticky; inset-block-start: 0; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
min-block-size: 58px; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
background: var(--card); border-block-end: 1px solid var(--line-soft);
}
.sheet-head h2 { font-size: 20px; }
.sheet-close {
display: grid; place-items: center; inline-size: 44px; block-size: 44px;
margin-inline-end: -10px; border: 0; border-radius: 50%;
background: none; color: var(--pine); cursor: pointer;
transition: background-color .16s var(--ease);
}
.sheet-close:hover { background: var(--line-soft); }
.sheet-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-block-start: 14px; }
.sheet-shelf .more-name { font-size: 15px; font-weight: 600; color: var(--pine); }
.sheet-sub { margin-block-start: 24px; font-size: 15px; font-weight: 600; color: var(--stem); }
.sheet-all { display: inline-block; margin-block: 20px 8px; font-weight: 600; color: var(--pine); }
.sheet-sale {
display: flex; align-items: center; gap: 10px; margin-block-start: 14px;
min-block-size: 52px; padding: 10px 16px; border-radius: var(--r-lg);
background: var(--promo); color: var(--pine-deep); text-decoration: none;
font-size: 16px; font-weight: 700;
}
.sheet-sale small { font-size: 13.5px; font-weight: 500; }
.sheet-sale .go { margin-inline-start: auto; flex: none; }
.sheet-sale:active { background: var(--promo-soft); }
.sheet-cols { display: grid; gap: 22px; padding-block: 18px; }
.sheet-cols h3 { font-size: 15px; margin-block-end: 4px; }
.sheet-cols ul { list-style: none; margin: 0; padding: 0; }
.sheet-cols li a { display: block; padding-block: 9px; text-decoration: none; color: var(--pine-soft); }
.sheet-cols li a:hover { color: var(--pine); }
.sheet-phone {
display: block; margin-block: 4px; font-size: 22px; font-weight: 700;
text-decoration: none; font-variant-numeric: tabular-nums;
}
.sheet-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 12px; }
.soon { max-inline-size: 640px; display: grid; gap: 16px; padding-block: clamp(24px, 6vw, 64px); }
.soon .cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 719px) {
body { padding-block-end: calc(62px + max(6px, env(safe-area-inset-bottom))); }
html { scroll-padding-block-end: calc(70px + max(6px, env(safe-area-inset-bottom))); }
.tabbar {
position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
display: grid; grid-template-columns: repeat(5, 1fr);
padding-block-end: max(6px, env(safe-area-inset-bottom));
padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
background: var(--card); border-block-start: 1px solid var(--line);
}
.tabbar a {
display: grid; justify-items: center; align-content: center; gap: 3px;
min-block-size: 62px; text-decoration: none; font-size: 12px; color: var(--pine-soft);
}
.tabbar a:hover, .tabbar a[aria-current="page"], .tabbar a[aria-expanded="true"] { color: var(--pine); }
.tabbar a[aria-current="page"], .tabbar a[aria-expanded="true"] { font-weight: 600; }
.tabbar a { position: relative; }
.tabbar a[aria-expanded="true"]::before {
content: ""; position: absolute; inset-block-start: -1px; inset-inline: 22%;
block-size: 3px; border-radius: 0 0 3px 3px; background: var(--pine);
}
}
.band-dark {
position: relative; isolation: isolate; clip-path: inset(0);
background: var(--band-bg, var(--pine)); color: var(--paper);
}
.band-dark > .rail { position: relative; z-index: 1; }
.band-dark h2 { color: var(--paper); }
.band-dark .sec-head p { color: color-mix(in srgb, var(--paper) 72%, var(--pine)); }
.band-dark .sec-head a, .band-dark .sec-more a { color: var(--paper); }
.band-dark .item { color: var(--pine); border-color: transparent; }
body::before, body::after, .band-dark::before, .band-dark::after {
content: "";
position: fixed; z-index: -1; pointer-events: none;
inset-inline-start: -25vw; inline-size: 150vw; block-size: clamp(121px, 13.2vw, 187px);
background: var(--pine); opacity: .28;
-webkit-mask-image: var(--watermark, url("/static/watermark.svg"));
mask-image: var(--watermark, url("/static/watermark.svg"));
-webkit-mask-size: auto 100%; mask-size: auto 100%;
-webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
body::before, .band-dark::before { inset-block-start: 14vh; rotate: -8deg; }
body::after, .band-dark::after {
inset-block-start: 68vh; rotate: 6deg;
-webkit-mask-position: 40% 0; mask-position: 40% 0;
}
@media print { body::before, body::after { display: none; } }
.band-dark::before, .band-dark::after { z-index: 0; background: var(--paper); opacity: .19; }
.product-page { background: none; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.stock {
display: inline-flex; align-items: center; gap: 6px; margin: 0;
font-size: 13.5px; font-weight: 600; color: #2E7D5B;
}
.stock.out { color: var(--stem); font-weight: 500; }
.sku {
padding: 3px 9px; border-radius: 999px; background: var(--paper);
border: 1px solid var(--line-soft); font-size: 12.5px; color: var(--stem);
font-variant-numeric: tabular-nums;
}
.pdeliv {
display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0;
padding: 10px 18px; border-radius: 999px;
background: var(--paper); border: 1px solid var(--line-soft);
font-size: 15px; color: var(--pine);
}
.pdeliv svg { flex: none; color: var(--pine-soft); }
.pdeliv b { font-weight: 600; font-variant-numeric: tabular-nums; }
.pdeliv-two { display: grid; line-height: 1.3; }
.photo-promise { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--pine-soft); }
.photo-promise svg { flex: none; color: var(--pine-soft); }
.pdeliv-two small { font-size: 13.5px; color: var(--pine-soft); }
.sizes-box { margin-block-start: 22px; }
.sizes-h { margin: 0 0 9px; font-size: 14.5px; font-weight: 600; color: var(--pine); }
.buyrow {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: 14px 18px; margin-block-start: 24px;
}
.pricing { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pricing .old {
font-family: var(--ui); font-size: 17px; color: var(--stem);
text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.pricing .now {
font-family: var(--ui); font-size: clamp(24px, 2.6vw, 30px); font-weight: 700;
line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}
.pricing .now.sale { color: var(--promo-ink); }
.pricing .per, .pricing .ask { font-size: 14px; color: var(--stem); }
.order { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.btn-cart, .cart-in {
min-inline-size: 220px; min-block-size: 52px; border-radius: 999px;
}
.btn-cart { padding-inline: 30px; font-size: 16px; }
.cart-in { justify-content: space-between; }
.sample-order { flex: 1 1 100%; }
.sample-order .btn-cart {
flex: 1 1 200px; min-inline-size: 0; padding-inline: 18px;
justify-content: center; text-align: center; white-space: nowrap;
}
.sample-note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.sample-note a { color: var(--pine); white-space: nowrap; }
@media (max-width: 559px) {
.btn-cart, .cart-in { min-inline-size: 100%; }
}
.qty {
display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 4px;
border: 1px solid var(--line); border-radius: 999px; background: var(--card);
}
.qty button {
display: grid; place-items: center; inline-size: 42px; block-size: 42px;
padding: 0; border: 0; border-radius: 50%; background: var(--pine);
color: var(--paper); font-size: 20px; line-height: 1; cursor: pointer;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.qty button:hover { background: var(--pine-deep); }
.qty button { position: relative; }
.qty button::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.qty button svg { inline-size: 17px; block-size: 17px; }
.qty button[data-qty-drop] { background: var(--line-soft); color: var(--stem); }
.qty button[data-qty-drop]:hover { background: var(--line); color: var(--pine); }
.qty input, .qty output {
display: grid; place-items: center; inline-size: 48px; block-size: 42px;
padding: 0; border: 0; text-align: center; color: var(--ink);
font-family: var(--ui); font-size: 16px; font-weight: 600;
font-variant-numeric: tabular-nums; background: none; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty[hidden], .qty button[hidden], .btn[hidden] { display: none; }
.qty.sm { padding: 3px; }
.qty.sm button { inline-size: 34px; block-size: 34px; font-size: 17px; }
.qty.sm button svg { inline-size: 15px; block-size: 15px; }
.qty.sm input, .qty.sm output { inline-size: 38px; block-size: 34px; font-size: 15px; }
@media (pointer: coarse) {
.qty.sm button { inline-size: 42px; block-size: 42px; }
.qty.sm input, .qty.sm output { block-size: 42px; }
.cart-drop { inline-size: 44px; block-size: 44px; }
}
.pinfo { margin-block-start: 28px; }
.ptabs {
display: flex; gap: clamp(16px, 3vw, 32px); overflow-x: auto; scrollbar-width: none;
border-block-end: 1px solid var(--line-soft);
}
.ptabs::-webkit-scrollbar { display: none; }
.ptabs [role="tab"] {
flex: none; margin-block-end: -1px; padding: 4px 0 10px; cursor: pointer;
border: 0; border-block-end: 2px solid transparent; background: none;
font: 500 16px/1.2 var(--ui); color: var(--pine-soft);
transition: color .16s var(--ease), border-color .16s var(--ease);
}
.ptabs [role="tab"]:hover { color: var(--pine); }
.ptabs [role="tab"][aria-selected="true"] {
color: var(--pine); font-weight: 600; border-block-end-color: var(--pine);
}
@media (max-width: 719px) {
.ptabs { gap: 14px; justify-content: space-between; }
.ptabs [role="tab"] { font-size: 15px; min-block-size: 44px; padding-block: 10px; }
}
@media (max-width: 379px) {
.ptabs { gap: 10px; }
.ptabs [role="tab"] { font-size: 14px; }
.ptab-tail { display: none; }
}
.ppanel { padding-block-start: 16px; font-size: 14.5px; line-height: 1.55; color: var(--pine-soft); }
.ppanel:focus-visible { outline: 2px solid var(--madder); outline-offset: 4px; }
.ppanel p { margin: 0; }
.pdl { display: grid; gap: 10px; margin: 0; }
.pdl > div { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 16px; }
.pdl dt { font-size: 14px; color: var(--stem); }
.pdl dd { margin: 0; font-size: 14.5px; color: var(--pine); }
.pdl-shop { display: block; color: var(--pine-soft); }
.pdl a { white-space: nowrap; }
.dlv { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.dlv-row {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
align-items: baseline; column-gap: 16px; font-size: 15px;
}
.dlv-k { grid-area: 1 / 1; position: relative; padding-inline-start: 20px; color: var(--pine); }
.dlv-k::before {
content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .55em;
inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--pine);
}
.dlv-v {
grid-area: 1 / 2; text-align: end; font-weight: 600; color: var(--pine);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dlv-more {
grid-area: 2 / 1; justify-self: start;
margin-block: -6px -10px; margin-inline-start: 20px; padding: 10px 0; cursor: pointer;
border: 0; background: none; font: 600 13.5px/1.2 var(--ui); color: var(--pine);
text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
transition: text-decoration-color .16s var(--ease);
}
.dlv-more:hover, .dlv-more[aria-expanded="true"] { text-decoration-color: currentColor; }
.dlv-pay { margin-block-start: 2px; padding-block-start: 18px; border-block-start: 1px solid var(--line-soft); }
.dlv-pop {
grid-area: 3 / 1 / 4 / -1; position: relative; margin-block-start: 14px;
display: grid; gap: 6px; padding: 14px 16px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
box-shadow: 0 14px 34px rgba(23, 30, 28, .14);
font-size: 14px; line-height: 1.5; color: var(--pine-soft);
}
.dlv-pop[hidden] { display: none; }
.dlv-pop::before {
content: ""; position: absolute; inset-block-start: -6px; inset-inline-start: 44px;
inline-size: 10px; block-size: 10px; rotate: 45deg; background: var(--card);
border-inline-start: 1px solid var(--line); border-block-start: 1px solid var(--line);
}
.dlv-pop p { margin: 0; }
.dlv-pop a { white-space: nowrap; }
.dlv-hours { font-size: 13px; color: var(--stem); }
.quickline-box { margin-block-start: 26px; }
.quickline-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.quickline-h label { font-size: 16px; font-weight: 600; color: var(--pine); }
.hint {
position: relative; display: grid; place-items: center; flex: none;
inline-size: 22px; block-size: 22px; padding: 0; cursor: pointer;
border: 1.5px solid var(--pine-soft); border-radius: 50%; background: none;
font: 700 12px/1 var(--num); color: var(--pine-soft);
transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.hint::before { content: ""; position: absolute; inset: -11px; }
.hint:hover, .hint[aria-expanded="true"] { background: var(--pine); border-color: var(--pine); color: var(--paper); }
.quickline-note { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--pine-soft); }
.quickline {
position: relative; display: flex; align-items: center; gap: 10px;
min-block-size: 52px; padding: 5px 5px 5px 16px;
border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.quickline:focus-within {
border-color: var(--pine);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 18%, transparent);
}
.quickline-code {
display: inline-flex; align-items: center; gap: 8px; flex: none;
font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.quickline-code svg { border-radius: 2px; }
.quickline input[type="tel"] {
flex: 1; min-inline-size: 0; block-size: 40px; padding: 0; border: 0; background: none;
font: 400 16px/1 var(--ui); color: var(--ink); font-variant-numeric: tabular-nums;
}
.quickline input[type="tel"]:focus-visible { outline: none; }
.quickline-go {
display: grid; place-items: center; flex: none; inline-size: 42px; block-size: 42px;
padding: 0; border: 0; border-radius: calc(var(--r) - 3px);
background: var(--pine); color: var(--paper); cursor: pointer;
transition: background-color .16s var(--ease), opacity .16s var(--ease);
}
.quickline-go:hover { background: var(--pine-deep); }
.quickline-go[disabled] { opacity: .5; cursor: progress; }
.trap { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
#quick-said .err { margin: 8px 0 0; font-size: 14px; color: var(--sale); }
#quick-said .ok { margin: 8px 0 0; font-size: 14px; color: #2E7D5B; }
.quickline-alt { margin: 8px 0 0; font-size: 13.5px; color: var(--stem); }
.quick-done {
display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r);
background: color-mix(in srgb, #2E7D5B 7%, var(--card));
border: 1px solid color-mix(in srgb, #2E7D5B 28%, var(--line));
}
.quick-done h2 { margin: 0; font-size: 17px; }
.quick-done h2:focus { outline: none; }
.quick-done p { margin: 0; font-size: 14.5px; }
.quick-done a { white-space: nowrap; }
.perks {
margin-block-start: clamp(20px, 3vw, 32px);
padding: clamp(24px, 3.4vw, 40px) clamp(14px, 2.8vw, 34px);
background: var(--card); border: 1px solid var(--line-soft); border-radius: 24px;
}
.perks-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.perks-list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 26px 16px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 860px) { .perks-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.perk { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; color: var(--pine); }
.perk-ico {
inline-size: clamp(52px, 5vw, 64px); block-size: auto; margin-block-end: 6px;
fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.perk-ico circle { fill: var(--card); }
.perk-ico use { fill: currentColor; stroke: currentColor; stroke-width: 1.3; }
.perk b { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; line-height: 1.2; }
.perk span { font-size: 14.5px; line-height: 1.4; color: var(--stem); text-wrap: balance; }
.pmore { margin-block-start: clamp(34px, 5vw, 56px); }
.pmore-tabs {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 6px clamp(18px, 4vw, 44px); margin-block-end: clamp(18px, 2.6vw, 28px);
}
.pmore-tabs [role="tab"] {
display: inline-flex; align-items: center; gap: 10px; padding: 6px 2px 8px; cursor: pointer;
border: 0; border-block-end: 2px solid transparent; background: none;
font: 500 17px/1.2 var(--ui); color: var(--pine-soft);
transition: color .16s var(--ease), border-color .16s var(--ease);
}
.pmore-tabs [role="tab"]:hover { color: var(--pine); }
.pmore-tabs [role="tab"][aria-selected="true"] {
color: var(--pine); font-weight: 600; border-block-end-color: var(--pine);
}
.pmore-tabs [role="tab"][hidden] { display: none; }
.pmore-tabs svg { flex: none; color: var(--pine-soft); }
.info-page { max-inline-size: 860px; }
.info-page .lede { margin-block: 10px 22px; }
.info-rows { max-inline-size: 640px; margin-block: 8px 30px; }
.info-rows .dlv-row { font-size: 16px; }
.info-h2 { margin-block: 30px 10px; font-size: 22px; }
.info-page > p { max-inline-size: 64ch; line-height: 1.6; color: var(--pine-soft); }
.info-shops { margin-block: 14px 8px; }
.info-page .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 30px; }
.town-steps { max-inline-size: 64ch; padding-inline-start: 1.3em; line-height: 1.6; color: var(--pine-soft); }
.town-steps li + li { margin-block-start: 6px; }
.town-more { margin-block-start: 24px; line-height: 1.6; }
.faq-list {
max-inline-size: 760px; margin-block-start: 14px; background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.faq-item + .faq-item { border-block-start: 1px solid var(--line-soft); }
.faq-item summary {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 15px 18px; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: ""; flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%;
background: var(--paper) center / 12px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%233D4C49' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover .faq-q { color: var(--pine); }
.faq-item summary:focus-visible { outline: 2px solid var(--pine); outline-offset: -2px; }
.faq-item .faq-q, .info-page .faq-item .faq-q { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.faq-a { max-inline-size: 64ch; margin: 0; padding: 0 18px 16px; font-size: 15px; line-height: 1.6; color: var(--pine-soft); }
@media (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
.blog-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.blog-item {
display: grid; gap: 6px; padding: 18px 20px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.blog-link { font-size: 19px; font-weight: 700; color: var(--pine); text-decoration: none; line-height: 1.3; }
.blog-link:hover { text-decoration: underline; }
.blog-item time { font-size: 13px; color: var(--stem); }
.blog-item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pine-soft); }
.post-meta { margin: 6px 0 18px; font-size: 14px; color: var(--stem); }
.post-upd { white-space: nowrap; }
.post-cover { display: block; inline-size: 100%; block-size: auto; border-radius: var(--r-lg); margin-block-end: 22px; }
.post-body { max-inline-size: 66ch; font-size: 16.5px; line-height: 1.65; color: var(--ink); }
.post-body h2 { margin-block: 30px 10px; font-size: 22px; line-height: 1.25; text-wrap: balance; }
.post-body h3 { margin-block: 22px 8px; font-size: 18px; }
.post-body p { margin-block: 0 14px; }
.post-body ul, .post-body ol { margin-block: 0 14px; padding-inline-start: 22px; display: grid; gap: 6px; }
.post-body a:not(.btn) { color: var(--pine); }
.post-body .post-shop {
inline-size: min(100vw - 2 * var(--pad), 960px); margin-block: 22px 26px;
padding: 16px; border-radius: var(--r-lg); background: var(--line-soft);
font-size: 15px; line-height: 1.4;
}
.post-shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block-end: 12px; }
.post-shop-h { font-size: 17px; color: var(--pine); }
.post-body .post-shop-more { font-weight: 600; text-decoration: none; white-space: nowrap; }
.post-body .post-shop .reel { grid-auto-columns: clamp(150px, 40vw, 200px); }
.post-body .post-shop a:not(.post-shop-more):not(.btn) { color: inherit; }
.post-body .post-shop p { margin: 0; }
.consent {
position: fixed; z-index: 50; inset-inline: 12px; inset-block-end: calc(12px + env(safe-area-inset-bottom));
margin-inline: auto; max-inline-size: 580px;
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px;
background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: 0 18px 44px rgba(23, 30, 28, .18); font-size: 14.5px;
}
.consent[hidden] { display: none; }
.consent p { flex: 1 1 260px; margin: 0; }
.consent-act { display: flex; gap: 8px; }
@media (max-width: 719px) { .consent { inset-block-end: calc(72px + max(6px, env(safe-area-inset-bottom))); } }
.fav {
position: absolute; inset-block-start: 8px; inset-inline-end: 8px; z-index: 3;
display: grid; place-items: center; inline-size: 40px; block-size: 40px;
padding: 0; border: 1px solid var(--line); border-radius: 50%;
background: var(--card); color: var(--pine); cursor: pointer;
transition: color .16s var(--ease), border-color .16s var(--ease);
}
.fav[hidden] { display: none; }
.fav::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
.fav:hover { border-color: var(--pine-soft); }
.fav[aria-pressed="true"] { color: var(--madder); border-color: color-mix(in srgb, var(--madder) 45%, var(--line)); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.product .shot .fav { inset-block-start: 12px; inset-inline-end: 12px; inline-size: 44px; block-size: 44px; }
.head-icons a, .subnav-icons a { position: relative; }
.fav-count {
position: absolute; inset-block-start: 3px; inset-inline-end: 1px;
display: grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 5px;
border-radius: 999px; background: var(--paper); color: var(--pine);
font: 700 11px/1 var(--ui); font-variant-numeric: tabular-nums;
}
.fav-count[hidden] { display: none; }
.tabbar .fav-count {
inset-block-start: 7px; inset-inline-end: auto; inset-inline-start: calc(50% + 4px);
background: var(--pine); color: var(--paper);
}
.page-fav .item:has(.fav[aria-pressed="false"]) { opacity: .55; }
.fav-pop {
position: fixed; z-index: 45; inline-size: min(380px, calc(100vw - 24px));
max-block-size: min(70vh, 560px); overflow: auto; overscroll-behavior: contain;
padding: 0 16px 16px; background: var(--card); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: 0 18px 44px rgba(23, 30, 28, .18);
}
.fav-pop[hidden] { display: none; }
.fav-pop:focus { outline: none; }
.fav-pop-head {
position: sticky; inset-block-start: 0; z-index: 1;
display: flex; align-items: center; gap: 8px;
margin-inline: -16px; padding: 6px 6px 6px 16px;
background: var(--card); border-block-end: 1px solid var(--line-soft);
}
.fav-pop-head h2 { margin: 0; font-size: 18px; }
.fav-pop-n { font-size: 13.5px; font-weight: 500; color: var(--stem); }
.fav-pop-head .sheet-close { margin-inline: auto 0; }
.fav-list { display: grid; gap: 12px; padding-block-start: 12px; }
.fav-list[aria-busy="true"] { opacity: .55; }
.fav-empty { margin: 14px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--pine-soft); }
.fav-empty[hidden] { display: none; }
.fav-mini {
display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px;
transition: opacity .16s var(--ease);
}
.fav-mini-pic {
display: grid; place-items: center; inline-size: 64px; block-size: 64px; overflow: hidden;
border-radius: var(--r); background: var(--paper); border: 1px solid var(--line-soft);
}
.fav-mini-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.fav-mini-pic .initial { font-family: var(--num); font-size: 26px; color: var(--line); }
.fav-mini-body { display: grid; gap: 2px; min-inline-size: 0; }
.fav-mini-name {
font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--pine); text-decoration: none;
overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.fav-mini-name:hover { text-decoration: underline; }
.fav-mini-price { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fav-mini-price.sale { color: var(--promo-ink); }
.fav-mini-stock { font-size: 12.5px; color: var(--stem); }
.fav-mini .fav { position: relative; inset: auto; inline-size: 38px; block-size: 38px; }
.fav-mini .fav::after { inset: -3px; }
.fav-mini:has(.fav[aria-pressed="false"]) { opacity: .5; }
.fav-mini-buy { margin-block-start: 6px; }
.fav-mini-cart { min-block-size: 36px; padding-block: 7px; }
.fav-mini-count { block-size: 36px; min-block-size: 0; min-inline-size: 0; padding: 2px; gap: 4px; }
.fav-mini-count[hidden], .fav-mini-cart[hidden] { display: none; }
.fav-mini-count button { inline-size: 30px; block-size: 30px; font-size: 17px; }
.fav-mini-count button svg { inline-size: 15px; block-size: 15px; }
.fav-mini-count output { min-inline-size: 26px; font-size: 14.5px; line-height: 1; text-align: center; }
.sheet .fav-list { padding-block: 14px 8px; }
.sheet .fav-empty { margin-block-start: 18px; }
.auth {
inline-size: min(440px, calc(100vw - 24px)); padding: 30px clamp(18px, 5vw, 34px) 28px;
border: 0; border-radius: var(--r-lg); background: var(--card); color: var(--ink);
box-shadow: 0 24px 60px rgba(23, 30, 28, .22);
}
.auth::backdrop { background: rgba(23, 30, 28, .45); }
.auth h2 { margin: 0 0 8px; text-align: center; font-size: 24px; }
.auth-lede {
margin: 0 0 18px; text-align: center; font-size: 14.5px; line-height: 1.45;
color: var(--stem);
}
.auth-note { margin: 0; text-align: center; font-size: 12.5px; color: var(--stem); }
.auth-x {
position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
.auth-x:hover { background: var(--line-soft); }
.auth-step { display: grid; gap: 14px; }
.auth-step[hidden] { display: none; }
.auth-sub { text-align: center; font-size: 15px; color: var(--pine-soft); }
.auth-line { min-block-size: 50px; padding-inline-end: 16px; }
.auth-code {
inline-size: 100%; block-size: 54px; padding: 0; text-align: center;
font: 600 22px/1 var(--ui); letter-spacing: .45em; font-variant-numeric: tabular-nums;
border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink);
}
.auth-code:focus-visible {
outline: 2px solid transparent; border-color: var(--pine);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 18%, transparent);
}
.auth-go { inline-size: 100%; min-block-size: 50px; font-size: 16px; }
.auth-err { margin: -4px 0 0; font-size: 14px; color: var(--sale); text-align: center; }
.auth-err:empty { display: none; }
.auth-alt { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--stem); }
.auth-link {
padding: 6px 2px; border: 0; background: none; font: inherit; cursor: pointer;
color: var(--pine); text-decoration: underline; text-underline-offset: 3px;
}
.auth-link[disabled] { color: var(--stem); text-decoration: none; cursor: default; }
.auth-confirm { display: grid; gap: 10px; }
.auth-confirm[hidden], .auth-note[hidden] { display: none; }
.auth-go[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.auth-said { margin: 0; text-align: center; font-size: 13.5px; color: var(--pine-soft); }
.auth-said:empty { display: none; }
.auth-later {
justify-self: center; min-block-size: 44px; padding: 0 10px;
border: 0; background: none; font: 500 14px/1.2 var(--ui); color: var(--stem);
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.auth-later[hidden] { display: none; }
.auth-later:hover { color: var(--pine); }
.auth-warn { margin: 0; text-align: center; font-size: 15px; line-height: 1.5; color: var(--ink); }
.auth-pass { position: relative; }
.auth-pass input {
inline-size: 100%; block-size: 50px; padding: 0 52px 0 16px;
font: 500 16px/1 var(--ui); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
}
.auth-pass input:focus-visible {
outline: 2px solid transparent; border-color: var(--pine);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 18%, transparent);
}
.auth-peek {
position: absolute; inset-block: 3px; inset-inline-end: 3px;
display: grid; place-items: center; inline-size: 44px; padding: 0;
border: 0; border-radius: var(--r); background: none; color: var(--stem); cursor: pointer;
}
.auth-peek[aria-pressed="true"] { color: var(--pine); }
.site-search {
position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 5;
color: var(--ink); background: var(--card);
border-block-end: 1px solid var(--line); box-shadow: 0 12px 24px rgba(23, 30, 28, .12);
}
.site-search[hidden] { display: none; }
.site-search-in { inline-size: min(100% - 2 * var(--pad), 1920px); display: flex; gap: 8px; align-items: center; padding-block: 12px; }
.site-search input {
flex: 1; min-inline-size: 0; block-size: 46px; padding: 0 14px;
font: 400 16px/1 var(--ui); color: var(--ink);
border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
.site-search :focus-visible { outline-color: var(--madder); }
.site-search input:focus-visible {
outline: 2px solid transparent; border-color: var(--pine);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--pine) 20%, transparent);
}
.site-search-close {
display: grid; place-items: center; flex: none; inline-size: 44px; block-size: 44px;
border: 0; border-radius: 50%; background: none; color: var(--pine); cursor: pointer;
}
.site-search-close:hover { background: var(--line-soft); }
@media (min-width: 720px) {
.head-search, .head .site-search { display: none; }
}
.buybar { display: none; }
@media (max-width: 719px) {
.buybar:not([hidden]) {
position: fixed; inset-inline: 0; z-index: 39;
inset-block-end: calc(62px + max(6px, env(safe-area-inset-bottom)));
display: flex; align-items: center; gap: 14px;
padding: 12px var(--pad);
background: var(--card); border-block-start: 1px solid var(--line);
box-shadow: 0 -8px 22px rgba(23, 30, 28, .09);
translate: 0 calc(100% + 12px); visibility: hidden;
transition: translate .36s var(--ease), visibility 0s linear .36s;
}
.buybar.up:not([hidden]) { translate: 0 0; visibility: visible; transition: translate .36s var(--ease); }
.buybar-price { display: grid; flex: none; line-height: 1.1; }
.buybar .now { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.buybar .now.sale { color: var(--promo-ink); }
.buybar .old { font-size: 13px; color: var(--stem); text-decoration: line-through; }
.buybar .ask { font-size: 14px; color: var(--stem); }
.cart-bar-h { font-size: 13px; color: var(--stem); }
.buybar .bonus-tag { margin-block-start: 5px; }
.buybar-buy { flex: 1; min-inline-size: 0; display: flex; }
.buybar-buy > .btn, .buybar-buy > .cart-in { flex: 1; min-inline-size: 0; min-block-size: 52px; }
.buybar .btn { font-size: 16.5px; }
html.sheet-open .buybar { display: none; }
body:has(.buybar) { padding-block-end: calc(62px + 90px + max(6px, env(safe-area-inset-bottom))); }
}
@media (prefers-reduced-motion: reduce) {
.buybar:not([hidden]), .buybar.up:not([hidden]) { transition: none; }
}
.quick .ok { color: #2E7D5B; font-size: 14px; margin: 0; }
.quick .err { color: var(--sale); font-size: 14px; margin: 0; }
.order-page { max-inline-size: 1180px; }
.order-kicker { margin: 0 0 4px; font-size: 14px; color: var(--stem); }
.order-saved {
margin-block: 14px 0; padding: 12px 16px; border-radius: var(--r-lg);
background: color-mix(in srgb, #2E7D5B 10%, var(--card)); color: #22614A; font-weight: 500;
}
.order-h2 { margin: 0 0 12px; font-size: 20px; }
.order-note { margin: 0 0 14px; color: var(--pine-soft); font-size: 15px; }
.order-track, .order-box {
padding: 22px clamp(16px, 3vw, 28px);
background: var(--card); border: 1px solid var(--line); border-radius: 24px;
}
.order-track { margin-block: 22px; }
.track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.track-step {
position: relative; display: grid; justify-items: center; align-content: start; gap: 6px;
padding-inline: 4px; text-align: center; font-size: 14px; color: var(--stem);
}
.track-step::before {
content: ""; position: absolute; inset-block-start: 7px; block-size: 2px;
inset-inline: calc(-50% + 10px) calc(50% + 10px); background: var(--line);
}
.track-step:first-child::before { display: none; }
.track-dot {
position: relative; inline-size: 16px; block-size: 16px; border-radius: 50%;
border: 2px solid var(--line); background: var(--card);
}
.track-step:is(.is-done, .is-now) { color: var(--pine); }
.track-step:is(.is-done, .is-now)::before { background: var(--pine); }
.track-step.is-done .track-dot { background: var(--pine); border-color: var(--pine); }
.track-step.is-now { font-weight: 600; }
.track-step.is-now .track-dot { border-color: var(--pine); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pine) 16%, transparent); }
.track-time { font-size: 12.5px; font-weight: 400; color: var(--stem); font-variant-numeric: tabular-nums; }
.track-lock { display: grid; gap: 18px; }
.track.is-locked { opacity: .5; filter: blur(1.2px); user-select: none; }
.track-lock-say { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.track-lock-say p { flex: 1 1 280px; margin: 0; }
@media (max-width: 559px) {
.track { grid-template-columns: none; }
.track-step {
grid-template-columns: 16px minmax(0, 1fr) auto; justify-items: start; align-items: center;
column-gap: 12px; padding: 9px 0; text-align: start;
}
.track-step::before { inset-block: -50% 50%; inset-inline: 7px auto; inline-size: 2px; block-size: auto; translate: 0 8px; }
.track-lock-say .btn { inline-size: 100%; }
}
.order-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
@media (max-width: 899px) { .order-grid { grid-template-columns: none; } }
.order-items { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.order-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; font-size: 15px; }
.oi-title a { color: var(--pine); }
.oi-tag {
margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px;
background: var(--line-soft); font-size: 12px; color: var(--stem); white-space: nowrap;
}
.oi-qty { color: var(--stem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oi-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
.order-sum { margin: 0; padding-block-start: 14px; border-block-start: 1px solid var(--line-soft); display: grid; gap: 8px; }
.order-sum div { display: flex; justify-content: space-between; gap: 12px; }
.order-sum dt { color: var(--pine-soft); }
.order-sum dd { margin: 0; font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; }
.oform { display: grid; gap: 22px; }
.oform [hidden] { display: none; }
.of-group { margin: 0; padding: 0; border: 0; min-inline-size: 0; display: grid; gap: 10px; }
.of-group legend { padding: 0; margin-block-end: 10px; font-size: 16px; font-weight: 600; color: var(--pine); }
.of-ways { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.of-way, .of-check, .of-card { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.of-way, .of-card {
padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.of-way:has(input:checked), .of-card:has(input:checked) { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.of-way:has(input:focus-visible), .of-card:has(input:focus-visible), .of-check:has(input:focus-visible) {
outline: 2px solid var(--pine); outline-offset: 2px;
}
.of-way span, .of-check span, .of-card span { display: grid; gap: 2px; }
.of-way b { font-weight: 600; color: var(--pine); }
:is(.of-way, .of-check, .of-field) small { font-size: 13px; font-weight: 400; color: var(--stem); }
:is(.of-way, .of-check, .of-card) input { flex: none; inline-size: 18px; block-size: 18px; margin: 2px 0 0; accent-color: var(--pine); }
.of-check { padding-block: 6px; }
.of-check.is-off { cursor: default; color: var(--stem); }
.of-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.of-card { align-items: center; }
.of-card img { flex: none; inline-size: 48px; block-size: 48px; border-radius: 8px; object-fit: cover; }
.of-card b { font-variant-numeric: tabular-nums; }
.of-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.of-field { display: grid; gap: 6px; }
.of-field label { font-size: 14.5px; font-weight: 500; color: var(--pine); }
.of-field :is(input, select, textarea) {
inline-size: 100%; min-block-size: 48px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 12px; background: var(--card);
color: var(--ink); font: inherit; font-size: 16px;
}
.of-field textarea { min-block-size: 100px; resize: vertical; }
.of-field :is(input, select, textarea):focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }
.of-field select:disabled { color: var(--stem); background: var(--line-soft); }
.oform [aria-invalid="true"] { border-color: var(--sale); }
.of-err { margin: 0; font-size: 13.5px; color: var(--sale); }
.of-summary {
margin: 0; padding: 10px 14px; border-radius: 12px; font-weight: 500;
background: color-mix(in srgb, var(--sale) 9%, var(--card)); color: var(--sale);
}
.of-arrival {
margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; line-height: 1.45;
background: var(--sale-tint); color: var(--pine); border-inline-start: 3px solid var(--sale);
}
.of-arrival b { white-space: nowrap; }
.of-submit { justify-self: start; min-block-size: 50px; padding-inline: 28px; }
@media (max-width: 559px) { .of-submit { justify-self: stretch; } }
.cart-page { max-inline-size: 1300px; }
.crumbs {
display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px;
font-size: 13.5px; color: var(--stem);
}
.crumbs a { color: var(--pine-soft); text-decoration: none; }
.crumbs a:hover { color: var(--pine); text-decoration: underline; }
.cart-page, .co-page { padding-block-start: clamp(18px, 2.4vw, 28px); }
.cart-page .crumbs { margin-block-end: 6px; }
.cart-page .page-h1 { text-align: center; margin-block: 0 clamp(20px, 2.6vw, 30px); }
.co-page .page-h1 {
text-align: start; font-weight: 500; font-size: clamp(24px, 2.8vw, 32px);
margin-block: 0 clamp(16px, 2vw, 24px);
}
.head-bare .head-in { display: flex; justify-content: space-between; }
.head-bare .tel { font-size: 16px; }
.card-buy { position: relative; z-index: 2; margin-block-start: 8px; }
.card-cart { inline-size: 100%; justify-content: center; }
.card-cart { min-block-size: 40px; }
.card-count {
inline-size: 100%; min-inline-size: 0; min-block-size: 0; block-size: 40px;
padding: 3px; justify-content: space-between;
}
.card-count button { inline-size: 32px; block-size: 32px; font-size: 18px; }
.card-count button svg { inline-size: 16px; block-size: 16px; }
.card-count output { font-size: 15px; line-height: 1; }
.cart-empty {
display: grid; justify-items: start; gap: 10px; padding: 28px clamp(16px, 3vw, 28px);
background: var(--card); border: 1px solid var(--line); border-radius: 24px;
}
.cart-empty p { margin: 0; }
.cart-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; }
@media (max-width: 899px) { .cart-grid { grid-template-columns: none; } }
.cart-go { inline-size: 100%; min-block-size: 50px; font-size: 16px; }
.free-ship { margin-block: 4px 14px; }
.free-ship p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; color: var(--pine-soft); }
.free-ship b { color: var(--pine); font-variant-numeric: tabular-nums; }
.free-ship-bar { display: block; block-size: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.free-ship-bar > span { display: block; block-size: 100%; border-radius: inherit; background: var(--pine); }
.cart-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 0; }
.cart-row {
display: grid; gap: 6px 18px; align-items: center;
grid-template-columns: 104px minmax(0, 1fr) max-content auto auto auto;
padding-block: 18px; border-block-start: 1px solid var(--line-soft);
}
.cart-row:first-child { border-block-start: 0; padding-block-start: 4px; }
.cart-pic {
inline-size: 104px; block-size: 104px; border-radius: 14px; overflow: hidden;
background: var(--paper); display: grid; place-items: center;
}
.cart-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cart-body { display: grid; gap: 3px; min-inline-size: 0; justify-items: start; }
.cart-name {
font-size: 16.5px; font-weight: 600; color: var(--pine);
text-decoration: none; overflow-wrap: anywhere;
}
.cart-name:hover { text-decoration: underline; }
.cart-state { font-size: 13.5px; color: var(--pine); }
.cart-state.out { color: var(--sale); }
.cart-meta, .cart-note { font-size: 13px; color: var(--stem); }
.cart-one {
font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap;
text-align: end;
}
.cart-one small { margin-inline-start: 4px; font-size: 12.5px; color: var(--stem); }
.cart-sum { font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-drop {
display: grid; place-items: center; inline-size: 36px; block-size: 36px; padding: 0;
border: 0; border-radius: 50%; background: none; color: var(--stem); cursor: pointer;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.cart-drop:hover { background: var(--line-soft); color: var(--pine); }
@media (max-width: 559px) {
.cart-row { grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px 12px; }
.cart-pic { grid-area: 1 / 1; inline-size: 84px; block-size: 84px; }
.cart-body { grid-area: 1 / 2; }
.cart-drop { grid-area: 1 / 3; align-self: start; }
.cart-one { grid-area: 2 / 1 / 3 / 2; justify-items: start; font-size: 14.5px; }
.cart-qty { grid-area: 2 / 2; justify-self: start; }
.cart-sum { grid-area: 2 / 3; align-self: center; text-align: end; }
}
.cart-more { margin-block-start: clamp(30px, 4vw, 52px); }
.cart-tabs { margin-block-end: 18px; }
.cart-tabs > :first-child { margin-inline-start: auto; }
.cart-tabs > :last-child { margin-inline-end: auto; }
.cart-pane[hidden] { display: none; }
.cart-add { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart-add li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; }
.cart-add-pic {
inline-size: 52px; block-size: 52px; border-radius: 10px; overflow: hidden;
background: var(--paper); display: grid; place-items: center;
}
.cart-add-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.cart-add-name { color: var(--pine); text-decoration: none; font-size: 14.5px; overflow-wrap: anywhere; }
.cart-add-name:hover { text-decoration: underline; }
.cart-add b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-stack { display: grid; gap: 12px; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.switch-box {
position: relative; flex: none; inline-size: 44px; block-size: 26px;
border-radius: 999px; background: var(--line); transition: background-color .18s var(--ease);
}
.switch-box::after {
content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--card);
box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: translate .18s var(--ease);
}
.switch input:checked + .switch-box { background: var(--pine); }
.switch input:checked + .switch-box::after { translate: 18px 0; }
.switch input:focus-visible + .switch-box { outline: 2px solid var(--pine); outline-offset: 2px; }
.switch-text { font-size: 15px; }
.switch-note {
margin: 0; padding: 10px 12px; border-radius: 12px;
background: var(--sale-dim); color: var(--ink); font-size: 13.5px; line-height: 1.45;
}
.switch-note[hidden] { display: none; }
.pick { display: flex; flex-wrap: wrap; gap: 18px; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inline-size: 0; block-size: 0; }
.pick span {
display: inline-block; padding-block-end: 4px; border-block-end: 2px solid transparent;
color: var(--stem); font: 600 15px/1.2 var(--ui);
transition: color .16s var(--ease), border-color .16s var(--ease);
}
.pick label:hover span { color: var(--pine); }
.pick input:checked + span { color: var(--pine); border-block-end-color: var(--pine); }
.pick input:focus-visible + span { outline: 2px solid var(--pine); outline-offset: 3px; }
.pick-days { gap: 10px; }
.pick-days button {
padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
background: var(--card); color: var(--pine); font: 600 14.5px/1 var(--ui); cursor: pointer;
transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.pick-days button:hover { border-color: var(--pine-soft); }
.pick-days button[aria-pressed="true"] { border-color: var(--pine); border-width: 2px; padding: 9px 15px; }
.timepick { position: relative; }
.timepick[hidden] { display: none; }
.timepick-btn {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
inline-size: 100%; min-block-size: 48px; padding: 10px 16px;
border: 1px solid var(--line); border-radius: 999px; background: var(--card);
color: var(--pine); font: 600 15px/1 var(--ui); cursor: pointer; text-align: start;
}
.timepick-btn:hover { border-color: var(--pine-soft); }
.timepick-btn:disabled { color: var(--stem); cursor: default; }
.timepick-list {
position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 5;
display: grid; max-block-size: 260px; overflow-y: auto; padding: 6px;
border: 1px solid var(--line); border-radius: 18px; background: var(--card);
box-shadow: 0 18px 40px rgb(0 0 0 / .12);
}
.timepick-list[hidden] { display: none; }
.timepick-item {
padding: 11px 14px; border: 0; border-radius: 12px; background: none;
color: var(--pine); font: 500 15px/1 var(--ui); text-align: start; cursor: pointer;
}
.timepick-item:hover { background: var(--line-soft); }
.timepick-item[aria-selected="true"] { font-weight: 700; }
.cardpick-item input:checked ~ .cardpick-pic { border-color: var(--pine); border-width: 2px; }
.of-count { margin: 6px 0 0; font-size: 12.5px; color: var(--stem); font-variant-numeric: tabular-nums; }
.legal > p, .info-page > p { max-inline-size: 68ch; line-height: 1.65; }
.info-page h2 {
margin-block: clamp(26px, 3vw, 36px) 10px; font-size: clamp(19px, 2.2vw, 23px);
font-weight: 600;
}
.legal > p { margin-block: 0 10px; color: var(--pine-soft); }
.legal-date { margin-block-start: 26px; font-size: 13.5px; color: var(--stem); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.priv-cards {
display: grid; gap: var(--gap); margin-block: 14px 26px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.priv-card {
display: grid; align-content: start; gap: 10px; padding: 20px;
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card);
}
.priv-card h3 { margin: 0; font-size: 18px; }
.priv-card p, .priv-card li { font-size: 15px; line-height: 1.55; color: var(--pine-soft); }
.priv-card p { margin: 0; }
.priv-card ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 6px; }
.priv-card .btn { justify-self: start; margin-block-start: 4px; }
.priv-list { max-inline-size: 64ch; margin-block: 6px 16px; color: var(--pine-soft); }
.priv-list li { padding-inline-start: 18px; position: relative; }
.priv-list li::before { content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .7em;
inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--pine-soft); }
.priv-table { overflow-x: auto; margin-block: 10px 16px; border: 1px solid var(--line);
border-radius: var(--r-lg); background: var(--card); }
.priv-table:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.priv-table table { inline-size: 100%; min-inline-size: 560px; border-collapse: collapse; font-size: 14.5px; }
.priv-table th, .priv-table td { padding: 11px 14px; text-align: start; vertical-align: top; line-height: 1.45; }
.priv-table th { font-weight: 600; color: var(--pine); border-block-end: 1px solid var(--line); }
.priv-table td { color: var(--pine-soft); border-block-end: 1px solid var(--line-soft); }
.priv-table tr:last-child td { border-block-end: 0; }
.priv-table td:first-child { color: var(--pine); font-weight: 600; white-space: nowrap; }
.plain-list li { line-height: 1.55; }
.info-page a:not(.btn) { color: var(--pine); }
.bonus-cards {
list-style: none; margin: 24px 0 0; padding: 0;
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.bonus-cards li {
display: grid; gap: 6px; padding: 18px 20px; align-content: start;
border: 1px solid var(--line); border-radius: 18px; background: var(--card);
}
.bonus-cards .bonus-dot { inline-size: 24px; block-size: 24px; }
.bonus-cards b { font-size: 17px; }
.bonus-cards span:last-child { font-size: 14px; line-height: 1.5; color: var(--stem); }
.tiers {
inline-size: 100%; max-inline-size: 560px; margin-block: 8px 12px;
border-collapse: collapse; font-variant-numeric: tabular-nums;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
overflow: hidden;
}
.tiers th, .tiers td { padding: 11px 16px; text-align: start; border-block-end: 1px solid var(--line-soft); }
.tiers thead th { font-size: 13px; font-weight: 500; color: var(--stem); }
.tiers tbody tr:last-child > * { border-block-end: 0; }
.tiers td:last-child, .tiers thead th:last-child { text-align: end; }
.tiers b { font-size: 17px; color: var(--pine); }
.tiers td:nth-child(2) { white-space: nowrap; }
@media (max-width: 479px) { .tiers th, .tiers td { padding-inline: 10px; } }
.bonus-tag {
display: inline-flex; align-items: center; gap: 6px; margin-block-start: 4px;
font: 500 12.5px/1 var(--ui); color: var(--pine-soft);
}
.bonus-dot {
display: grid; place-items: center; flex: none;
inline-size: 18px; block-size: 18px; border-radius: 50%;
background: var(--pine);
box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 2.5px var(--pine);
}
.bonus-dot::before {
content: ""; inline-size: 78%; block-size: 78%;
background: var(--paper);
-webkit-mask: var(--logo-flower) center / contain no-repeat;
mask: var(--logo-flower) center / contain no-repeat;
}
.bonus-spend { display: grid; gap: 6px; margin-block-end: 12px; }
.bonus-lock { display: grid; gap: 6px; justify-items: start; margin-block-end: 12px; }
.bonus-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--stem); }
.bonus-earn {
display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
font: 500 14px/1.3 var(--ui); color: var(--pine);
}
.bonus-earn .bonus-dot { inline-size: 20px; block-size: 20px; }
.bonus-when { font: 400 12.5px/1.3 var(--ui); color: var(--stem); }
@media (max-width: 420px) { .bonus-earn { flex-wrap: wrap; } .bonus-when { flex-basis: 100%; } }
.cart-side .bonus-earn { flex-wrap: wrap; }
.cart-side .bonus-when { flex-basis: 100%; margin-inline-start: 28px; }
.tg-call {
margin: 20px 0; padding: 20px 22px;
background: var(--card); border: 1px solid var(--line);
border-inline-start: 4px solid var(--pine); border-radius: var(--r-lg);
}
.tg-call h2 { margin: 0 0 8px; font-size: 20px; line-height: 1.25; text-wrap: balance; }
.tg-call p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--stem); }
.tg-call .btn { display: inline-flex; }
.tg-said:empty { display: none; }
.tg-said { margin: 10px 0 0; font-size: 13.5px; color: var(--stem); }
.cab { display: grid; gap: 22px; grid-template-columns: 220px minmax(0, 1fr) 260px; align-items: start; }
@media (max-width: 1023px) { .cab { grid-template-columns: minmax(0, 1fr); } }
.cab-menu {
display: grid; gap: 2px; padding: 10px;
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
position: sticky; inset-block-start: 84px;
}
.cab-menu a, .cab-out {
display: flex; align-items: center; gap: 8px;
padding: 12px 14px; border-radius: var(--r); border: 0; background: none;
font: inherit; font-size: 14.5px; color: var(--ink); text-decoration: none; cursor: pointer;
text-align: start;
}
.cab-menu a:hover, .cab-out:hover { background: var(--paper); }
.cab-menu a[aria-current] { background: var(--paper); font-weight: 600; }
.cab-out { color: var(--madder); border-block-start: 1px solid var(--line-soft); border-radius: 0; margin-block-start: 8px; }
@media (max-width: 1023px) {
.cab-menu { position: static; grid-auto-flow: column; grid-auto-columns: max-content;
overflow-x: auto; gap: 4px; }
.cab-out { border-block-start: 0; border-radius: var(--r); margin-block-start: 0; }
}
.cab-main { display: grid; gap: 30px; min-inline-size: 0; }
.cab-main > section { scroll-margin-top: 90px; }
.cab-h1 { margin: 0 0 18px; font-size: 30px; line-height: 1.15; }
.cab-h2 { margin: 0 0 14px; font-size: 21px; }
.cab-dl { margin: 0; display: grid; gap: 14px; }
.cab-dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.cab-dl dt { color: var(--stem); font-size: 14.5px; }
.cab-dl dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.cab-ok { color: var(--ok, #2F6B4F); font-size: 13.5px; white-space: nowrap; }
.cab-no { color: var(--stem); font-size: 13.5px; white-space: nowrap; }
@media (max-width: 519px) { .cab-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.cab-edit { margin-block-start: 20px; }
.cab-edit > summary {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
padding: 10px 2px; font-size: 14.5px; color: var(--pine); list-style: none;
}
.cab-edit > summary::-webkit-details-marker { display: none; }
.cab-edit > summary:hover { text-decoration: underline; }
.cab-side { display: grid; gap: 16px; }
.cab-bonus {
display: grid; gap: 2px; justify-items: center; text-align: center;
padding: 24px 18px; border-radius: var(--r-lg);
background: var(--pine); color: var(--paper); text-decoration: none;
}
.cab-bonus b { font-size: 38px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cab-bonus span { font-size: 15px; }
.cab-bonus em { margin-block-start: 8px; font-style: normal; font-size: 13.5px; opacity: .85; }
.cab-tier { margin-block-start: 6px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
.cab-level { display: grid; gap: 2px; margin-block-end: 12px; }
.cab-level p { margin: 0; }
.cab-level b { font-size: 17px; color: var(--pine); }
.cab-bonus:hover em { text-decoration: underline; }
.cab-link {
padding: 16px 18px; background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cab-link h2 { margin: 0 0 6px; font-size: 16px; }
.cab-link p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--stem); }
.me-form { display: grid; gap: 14px; max-inline-size: 420px; margin-block-start: 12px; }
.me-date { display: grid; gap: 5px; }
.me-date label { font-size: 13.5px; color: var(--stem); }
.me-date input { font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); }
.me-date input[readonly] { background: var(--paper); color: var(--stem); }
.me-date small { font-size: 12.5px; line-height: 1.4; color: var(--stem); }
.me-saved { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--pine); }
.bonus-wait { display: block; font-size: 12px; color: var(--stem); }
.bonus-burn {
margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r);
border-inline-start: 3px solid var(--sale);
background: var(--sale-tint); color: var(--pine);
font: 500 13px/1.4 var(--ui);
}
.bonus-log { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.bonus-log li {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
padding-block-end: 10px; border-block-end: 1px solid var(--line-soft);
}
.bonus-log b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.bonus-log b.minus { color: var(--stem); }
.bonus-log small { grid-column: 1 / -1; font-size: 12.5px; color: var(--stem); }
.bonus-sum {
display: flex; align-items: baseline; gap: 10px; margin: 0;
font: 700 clamp(26px, 3vw, 34px)/1 var(--ui); color: var(--pine);
}
.bonus-sum span { font: 400 14px/1 var(--ui); color: var(--stem); }
.ffield { position: relative; display: grid; }
.ffield input, .ffield textarea, .ffield select {
inline-size: 100%; padding: 22px 16px 10px; border: 1px solid var(--line);
border-radius: 16px; background: var(--card); color: var(--ink);
font: 400 16px/1.3 var(--ui);
}
.ffield textarea { min-block-size: 96px; resize: vertical; }
.ffield label {
position: absolute; inset-block-start: 17px; inset-inline-start: 17px;
color: var(--stem); font: 400 16px/1 var(--ui); pointer-events: none;
transition: translate .14s var(--ease), font-size .14s var(--ease), color .14s var(--ease);
}
.ffield input:focus, .ffield textarea:focus { outline: none; border-color: var(--pine); }
.ffield input:focus + label,
.ffield input:not(:placeholder-shown) + label,
.ffield textarea:focus + label,
.ffield textarea:not(:placeholder-shown) + label {
translate: 0 -11px; font-size: 12.5px; color: var(--pine-soft);
}
.ffield label small { font-size: inherit; color: inherit; }
.ffield.bad input, .ffield.bad textarea { border-color: var(--sale); }
.addr-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.addr-row[hidden] { display: none; }
@media (max-width: 559px) { .addr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.addr-row .ffield:first-child { grid-column: 1 / -1; } }
.co-two {
display: grid; gap: clamp(18px, 3vw, 40px);
grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start;
}
@media (max-width: 719px) { .co-two { grid-template-columns: none; } }
.co-aside { display: grid; gap: 12px; justify-items: start; }
.co-aside p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--stem); }
.ffield.has-code.plain-code input { padding-block: 15px; padding-inline-start: 112px; }
.ffield.plain-code .tel-code { font-size: 16px; }
.citypick-none {
margin: 0; padding: 10px 14px; font-size: 13px; line-height: 1.45; color: var(--stem);
}
.citypick-none[hidden], .citypick-item[hidden] { display: none; }
.daypick {
display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px;
inline-size: fit-content; max-inline-size: 100%;
border-radius: 16px; background: var(--line-soft);
}
.daypick[hidden] { display: none; }
.daypick button {
display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px;
border: 0; border-radius: 12px; background: none;
color: var(--stem); font: 500 15.5px/1 var(--ui); cursor: pointer;
transition: background-color .16s var(--ease), color .16s var(--ease);
}
.daypick button:hover:not(:disabled) { color: var(--pine); }
.daypick button[aria-pressed="true"] {
background: var(--card); color: var(--pine); font-weight: 600;
box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}
.daypick button:disabled { color: var(--stem); opacity: .45; cursor: default; }
@media (max-width: 559px) {
.daypick {
display: grid; grid-template-columns: repeat(3, auto); inline-size: 100%;
gap: 2px; padding: 4px;
}
.daypick[hidden] { display: none; }
.daypick button { justify-content: center; min-block-size: 44px; padding: 10px 8px; gap: 5px; font-size: 15px; }
.daypick button svg { inline-size: 15px; block-size: 15px; flex: none; }
}
@media (max-width: 359px) { .daypick button svg { display: none; } }
.pillbtn {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
inline-size: 100%; min-block-size: 50px; padding: 12px 18px;
border: 1px solid var(--line); border-radius: 999px; background: var(--card);
color: var(--pine); font: 500 15.5px/1 var(--ui); cursor: pointer; text-align: start;
}
.pillbtn:hover { border-color: var(--pine-soft); }
.pillbtn[aria-expanded="true"] { border-color: var(--pine); }
.datepick, .timepick { position: relative; }
.datepick[hidden], .timepick[hidden] { display: none; }
.cal {
position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; z-index: 6;
inline-size: min(330px, 100%); padding: 14px;
border: 1px solid var(--line); border-radius: 20px; background: var(--card);
box-shadow: 0 18px 40px rgb(0 0 0 / .14);
}
.cal[hidden] { display: none; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cal-head b { font: 600 15.5px/1 var(--ui); }
.cal-nav {
display: grid; place-items: center; inline-size: 34px; block-size: 34px;
border: 0; border-radius: 50%; background: none; color: var(--pine); cursor: pointer;
}
.cal-nav:hover:not(:disabled) { background: var(--line-soft); }
.cal-nav:disabled { color: var(--line); cursor: default; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-week { margin-block: 10px 4px; font-size: 12px; color: var(--stem); text-align: center; }
.cal-day {
aspect-ratio: 1; border: 0; border-radius: 50%; background: none;
color: var(--pine); font: 500 14.5px/1 var(--ui); cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--line-soft); }
.cal-day:disabled { color: var(--line); cursor: default; }
.cal-day[aria-pressed="true"] { background: var(--pine); color: var(--paper); }
.timepick-list {
position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 6;
display: grid; max-block-size: 260px; overflow-y: auto; padding: 6px;
border: 1px solid var(--line); border-radius: 18px; background: var(--card);
box-shadow: 0 18px 40px rgb(0 0 0 / .12);
}
.timepick-list[hidden] { display: none; }
.timepick-item {
padding: 11px 14px; border: 0; border-radius: 12px; background: none;
color: var(--pine); font: 500 15px/1 var(--ui); text-align: start; cursor: pointer;
}
.timepick-item:hover { background: var(--line-soft); }
.timepick-item[aria-selected="true"] { font-weight: 700; }
.ffield.has-code input { padding-inline-start: 82px; }
.tel-code {
position: absolute; inset-block-start: 22px; inset-inline-start: 16px;
display: inline-flex; align-items: center; gap: 6px;
color: var(--pine); font: 400 16px/1.3 var(--ui); pointer-events: none;
}
.ffield.plain-code .tel-code { inset-block-start: 50%; translate: 0 -50%; }
.tel-code svg { border-radius: 2px; }
.tel-code.cc { pointer-events: auto; }
.quickline-code.cc { position: relative; }
.cc-face { display: inline-flex; align-items: center; gap: 6px; }
.cc-select {
position: absolute; inset: -10px -8px; inline-size: calc(100% + 16px);
block-size: calc(100% + 20px); opacity: 0; cursor: pointer; border: 0;
font-size: 16px; appearance: none;
}
.cc-fl, .cc-flag svg {
flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(23, 30, 28, .14);
}
.cc-open {
position: absolute; inset: -10px -8px; padding: 0; border: 0; border-radius: 8px;
background: none; cursor: pointer;
}
.cc.cc-enh .cc-select { display: none; }
.tel-code.cc:has(.cc-open:focus-visible) .cc-face,
.quickline-code.cc:has(.cc-open:focus-visible) .cc-face {
outline: 2px solid var(--pine); outline-offset: 4px; border-radius: 4px;
}
.cc-shade { position: fixed; inset: 0; z-index: 90; background: transparent; }
.cc-pop {
position: fixed; z-index: 91; inline-size: 320px; max-block-size: min(420px, 70vh);
display: flex; flex-direction: column; padding: 12px;
background: var(--card); color: var(--pine);
border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: 0 18px 48px rgba(23, 30, 28, .18); overscroll-behavior: contain;
}
.cc-pop:focus { outline: none; }
.cc-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; }
.cc-pop-h { font-size: 16px; }
.cc-pop-x {
display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin: -8px -8px -8px 0;
border: 0; border-radius: 50%; background: none; color: var(--stem); font-size: 26px; cursor: pointer;
}
.cc-pop-x:hover { background: var(--line-soft); color: var(--pine); }
.cc-find {
inline-size: 100%; padding: 11px 13px; margin-block-end: 8px;
font: 400 16px var(--ui); color: var(--pine);
border: 1px solid var(--line); border-radius: var(--r); background: var(--paper);
}
.cc-find:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.cc-list { margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; }
.cc-list li {
display: flex; align-items: center; gap: 12px; min-block-size: 46px; padding: 6px 10px;
border-radius: var(--r); cursor: pointer; font-size: 15.5px;
}
.cc-list li:hover, .cc-list li.is-active { background: var(--line-soft); }
.cc-list li.is-on { font-weight: 600; }
.cc-list li.is-on::after { content: "✓"; margin-inline-start: 4px; color: var(--pine); }
.cc-list li[hidden] { display: none; }
.cc-flag { display: grid; place-items: center; inline-size: 26px; flex: none; }
.cc-name { flex: 1; min-inline-size: 0; }
.cc-dial { color: var(--stem); font-variant-numeric: tabular-nums; }
.cc-pop.cc-sheet {
inset: auto 0 0 0; inline-size: auto; max-block-size: 72vh;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
border-radius: 22px 22px 0 0; border-block-end: 0;
}
.cc-shade:has(+ .cc-sheet) { background: rgba(23, 30, 28, .35); }
@media (prefers-reduced-motion: no-preference) {
.cc-pop.cc-sheet { animation: cc-up .22s var(--ease); }
}
@keyframes cc-up { from { translate: 0 30px; opacity: 0; } }
.cc-caret { flex: none; color: var(--stem); }
.selpick { position: relative; display: inline-block; max-inline-size: 100%; }
.of-field .selpick { display: block; }
.selpick-btn {
position: absolute; inset: 0; padding: 0; border: 0; border-radius: var(--r);
background: none; cursor: pointer;
}
.selpick-btn:disabled { cursor: default; }
.selpick-btn:focus-visible { outline: none; }
.selpick:has(.selpick-btn:focus-visible) select { outline: 2px solid var(--pine); outline-offset: 1px; }
.selpick:has(.selpick-btn[aria-expanded="true"]) select { border-color: var(--pine); }
.sel-pop .cc-list li { justify-content: space-between; min-block-size: 44px; padding-inline: 12px; }
.tel-code.cc:has(.cc-select:focus-visible) .cc-face {
outline: 2px solid var(--pine); outline-offset: 4px; border-radius: 4px;
}
.ffield.has-code label { inset-inline-start: var(--code-pad, 82px); }
.ffield.has-code:not(.plain-code) label { inset-block-start: 24px; }
.ffield.has-code input:focus + label,
.ffield.has-code input:not(:placeholder-shown) + label { inset-inline-start: 17px; }
.ffield.has-code:not(.plain-code) input:focus + label,
.ffield.has-code:not(.plain-code) input:not(:placeholder-shown) + label { translate: 0 -18px; }
.citypick { position: relative; }
.citypick input { padding-inline-end: 44px; }
.citypick-arrow {
position: absolute; inset-block-start: 50%; inset-inline-end: 12px; translate: 0 -50%;
display: grid; place-items: center; inline-size: 28px; block-size: 28px;
border: 0; border-radius: 50%; background: none; color: var(--stem); cursor: pointer;
}
.citypick-arrow:hover { color: var(--pine); background: var(--line-soft); }
.citypick-list {
position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 7;
display: grid; max-block-size: 280px; overflow-y: auto; padding: 6px;
border: 1px solid var(--line); border-radius: 18px; background: var(--card);
box-shadow: 0 18px 40px rgb(0 0 0 / .12);
}
.citypick-list[hidden] { display: none; }
.citypick-item {
padding: 11px 14px; border: 0; border-radius: 12px; background: none;
color: var(--pine); font: 500 15px/1 var(--ui); text-align: start; cursor: pointer;
}
.citypick-item:hover, .citypick-item[data-on] { background: var(--line-soft); }
.addons { display: grid; gap: 26px; }
.addon-box { display: grid; gap: 10px; }
.addon-h { margin: 0; font: 500 15px/1 var(--ui); color: var(--stem); }
.addon-tabs { gap: 16px; }
.addon-pane[hidden] { display: none; }
.addon-wrap .reel {
grid-auto-columns: min(46%, 150px);
scrollbar-width: none; padding-block-end: 0;
}
.addon-wrap .reel::-webkit-scrollbar { display: none; }
.addon-wrap .reel-item { align-self: start; }
.addon { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; align-content: start; }
.addon-pic {
position: relative; display: grid; place-items: center;
inline-size: 100%; aspect-ratio: 1; flex: none;
overflow: hidden; border-radius: 16px; background: var(--paper);
}
.addon-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.addon.is-in .addon-pic { outline: 2px solid var(--pine); outline-offset: -2px; }
.addon-add {
position: absolute; inset-block-end: 8px; inset-inline-end: 8px;
display: grid; place-items: center; inline-size: 38px; block-size: 38px;
padding: 0; border: 0; border-radius: 50%; background: var(--pine);
color: var(--paper); cursor: pointer; transition: background-color .16s var(--ease);
}
.addon-add:hover { background: var(--pine-deep); }
.addon-name {
font: 400 14px/1.35 var(--ui); color: var(--pine); text-decoration: none;
overflow-wrap: anywhere;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-block-size: 2.7em;
}
.addon-name:hover { text-decoration: underline; }
.addon-price { font: 600 15px/1 var(--ui); font-variant-numeric: tabular-nums; }
.addon-chosen:not(:empty) {
display: grid; gap: 8px; margin-block-start: 4px; padding-block-start: 12px;
border-block-start: 1px solid var(--line-soft);
}
.addon-line {
display: grid; grid-template-columns: 56px minmax(0, 1fr) auto minmax(0, 1.2fr);
gap: 14px; align-items: center;
}
.addon-line-pic {
inline-size: 56px; block-size: 56px; border-radius: 10px; overflow: hidden;
background: var(--paper);
}
.addon-line-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.addon-line-body { display: grid; gap: 8px; justify-items: start; min-inline-size: 0; }
.addon-line-name { font-size: 14.5px; overflow-wrap: anywhere; }
.addon-line-cost {
display: grid; gap: 3px; justify-items: end;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.addon-line-cost .bonus-tag { margin-block-start: 0; }
.addon-line .addon-text { margin: 0; }
.addon-line .addon-text textarea { min-block-size: 72px; }
@media (max-width: 719px) {
.addon-line { grid-template-columns: 56px minmax(0, 1fr) auto; }
.addon-line .addon-text { grid-column: 1 / -1; }
}
.addon-text { margin-block-start: 6px; }
.pay-way {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px;
background: var(--card); cursor: pointer;
}
.pay-way span b { display: block; font: 600 16px/1.2 var(--ui); }
.pay-way span small { display: block; margin-block-start: 3px; font-size: 13.5px; color: var(--stem); }
.pay-way:has(input:checked) { border-color: var(--pine); border-width: 2px; padding: 15px 17px; }
.pay-way.is-off { opacity: .55; cursor: default; }
.pay-logos { margin-inline-start: auto; }
.pay-more {
display: inline-flex; align-items: center; gap: 8px; justify-self: start;
padding: 0; border: 0; background: none; color: var(--pine);
font: 600 15px/1 var(--ui); cursor: pointer;
}
.pay-more:hover { text-decoration: underline; }
[data-comment-box][hidden] { display: none; }
.of-terms { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--stem); }
.of-terms a { color: var(--pine-soft); }
.oform-steps { font-size: 16px; }
.oform-steps .co-step-h { font-weight: 500; font-size: clamp(18px, 2.1vw, 22px); }
.oform-steps .of-check span, .oform-steps .switch-text { font-size: 15.5px; font-weight: 400; }
.oform-steps .of-check span b { font-weight: 600; }
.shop-row span small { display: block; margin-block-start: 3px; font-size: 13.5px; color: var(--stem); }
.shop-map {
display: inline-block; margin-block-start: 6px; color: var(--pine-soft);
font: 600 14px/1 var(--ui); text-decoration: none;
}
.shop-map:hover { color: var(--pine); text-decoration: underline; }
.co-page { max-inline-size: 1300px; }
.co-grid {
display: grid; gap: 22px; align-items: start;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
@media (max-width: 899px) { .co-grid { grid-template-columns: none; } }
@media (min-width: 900px) { .co-side { position: sticky; inset-block-start: 20px; } }
.co-sum-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.co-edit-link { color: var(--pine-soft); font: 600 14.5px/1 var(--ui); text-decoration: none; }
.co-edit-link:hover { color: var(--pine); text-decoration: underline; }
.co-list { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 14px; }
.co-list-wrap.scrolls { position: relative; }
.co-list.scrolls {
max-block-size: 232px; overflow-y: auto; padding-inline-end: 18px;
overscroll-behavior-block: contain;
scrollbar-width: none;
}
.co-list.scrolls::-webkit-scrollbar { display: none; }
.co-rail {
position: absolute; inset-block: 2px; inset-inline-end: 2px; inline-size: 4px;
border-radius: 99px; background: var(--line-soft);
}
.co-rail-thumb {
position: absolute; inset-inline: 0; inset-block-start: 0;
border-radius: 99px; background: var(--pine-soft);
transition: translate .08s linear;
}
.co-list li {
display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
}
.co-pic {
inline-size: 64px; block-size: 64px; border-radius: 12px; overflow: hidden;
background: var(--paper); display: grid; place-items: center;
}
.co-pic img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.co-line { display: grid; gap: 3px; min-inline-size: 0; }
.co-name {
color: var(--pine); text-decoration: none; font-weight: 600; font-size: 15px;
overflow-wrap: anywhere;
}
.co-name:hover { text-decoration: underline; }
.co-stock {
display: inline-flex; align-items: center; gap: 5px;
font-size: 13px; color: #2E7D52;
}
.co-stock svg { flex: none; }
.co-stock.off { color: var(--stem); }
.co-sku { font-size: 12.5px; color: var(--stem); }
.co-money {
grid-column: 2; display: flex; align-items: baseline; gap: 12px;
margin-block-start: 6px; font-variant-numeric: tabular-nums;
}
.co-one { font-size: 15.5px; font-weight: 600; color: var(--pine); }
.co-qty { font-size: 14px; color: var(--stem); }
.co-cost { margin-inline-start: auto; font-size: 15.5px; white-space: nowrap; }
.co-perks {
display: grid; gap: 10px; padding-block: 14px;
border-block: 1px solid var(--line-soft);
}
.co-perk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.co-perk-row span { font-size: 14.5px; color: var(--stem); }
.co-link {
padding: 0; border: 0; background: none; color: var(--pine-soft);
font: 600 14.5px/1 var(--ui); cursor: pointer;
}
.co-link:hover { color: var(--pine); text-decoration: underline; }
.co-promo { position: relative; }
.co-promo input {
inline-size: 100%; padding: 13px 46px 13px 16px; border: 1px solid var(--line);
border-radius: 999px; background: var(--card); font: 400 15px/1 var(--ui);
}
.co-promo input:disabled { background: var(--paper); color: var(--stem); }
.co-promo-go {
position: absolute; inset-block-start: 50%; inset-inline-end: 8px; translate: 0 -50%;
display: grid; place-items: center; inline-size: 32px; block-size: 32px;
border: 0; border-radius: 50%; background: none; color: var(--stem);
}
.co-grand {
font-size: 17px; font-weight: 700; margin-block-start: 8px; padding-block-start: 10px;
border-block-start: 1px solid var(--line-soft);
}
.co-note { margin: 10px 0 0; font-size: 13px; color: var(--stem); }
.order-sum > div[hidden] { display: none; }
.co-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.co-step {
background: var(--card); border: 1px solid var(--line); border-radius: 20px;
padding: clamp(16px, 2.2vw, 24px);
}
.co-step-head { display: flex; align-items: center; gap: 12px; }
.co-step-n {
display: grid; place-items: center; inline-size: 30px; block-size: 30px; flex: none;
border-radius: 50%; background: var(--line-soft); color: var(--stem);
font: 600 14px/1 var(--ui);
}
.co-step[data-open] .co-step-n { background: var(--pine); color: var(--paper); }
.co-step[data-done] .co-step-n { background: var(--pine); color: var(--paper); }
.co-tick { display: none; }
.co-step[data-done]:not([data-open]) .co-step-n b { display: none; }
.co-step[data-done]:not([data-open]) .co-tick { display: block; }
.co-step-h { margin: 0; font-size: clamp(17px, 2vw, 20px); }
.co-edit {
display: inline-flex; align-items: center; gap: 6px;
margin-inline-start: auto; padding: 0; border: 0; background: none;
color: var(--pine-soft); font: 600 14px/1 var(--ui); cursor: pointer;
}
.co-edit:hover { color: var(--pine); text-decoration: underline; }
.co-edit[hidden] { display: none; }
.co-said {
margin: 8px 0 0; padding-inline-start: 42px; font-size: 14px; color: var(--stem);
overflow-wrap: anywhere;
}
.co-said[hidden] { display: none; }
.co-step-body { margin-block-start: 16px; display: grid; gap: 14px; }
.co-step-body[hidden] { display: none; }
.of-group.plain > legend { font-size: 14px; font-weight: 500; color: var(--stem); margin-block-end: 8px; }
.of-next { justify-self: start; min-block-size: 48px; }
@media (max-width: 559px) { .of-next { justify-self: stretch; } }
.profile-page { max-inline-size: 1180px; }
.profile-invite { display: grid; justify-items: start; gap: 8px; max-inline-size: 640px; }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-block: 14px 22px; }
.profile-phone { margin: 0; font-size: 16px; }
.my-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.my-orders li {
display: grid; gap: 2px 14px; align-items: baseline;
grid-template-columns: auto auto minmax(0, 1fr) auto auto;
padding-block-end: 12px; border-block-end: 1px solid var(--line-soft);
}
.my-orders li:last-child { padding-block-end: 0; border-block-end: 0; }
.mo-num { font-weight: 700; color: var(--pine); white-space: nowrap; }
.mo-when { color: var(--stem); font-size: 13.5px; white-space: nowrap; }
.mo-what { color: var(--pine-soft); font-size: 14px; overflow-wrap: anywhere; }
.mo-status { font-size: 13.5px; color: var(--pine); white-space: nowrap; }
.mo-sum { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 559px) {
.my-orders li { grid-template-columns: auto minmax(0, 1fr) auto; }
.mo-what { grid-column: 1 / -1; }
.mo-status { grid-column: 1 / 3; }
}
.cab-card {
display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
padding: 18px 20px; background: var(--card);
border: 1px solid var(--line); border-radius: var(--r-lg);
}
.cab-qr { inline-size: 200px; block-size: auto; }
.cab-card-code { display: grid; gap: 4px; min-inline-size: 180px; }
.cab-card-code span { font-size: 13.5px; color: var(--stem); }
.cab-card-code b {
font-size: 26px; letter-spacing: 1px; font-variant-numeric: tabular-nums;
color: var(--pine);
}
.cab-card-code small { font-size: 12.5px; line-height: 1.4; color: var(--stem); }
.usp-line {
margin-block: 18px 0; padding: 12px 16px; border-radius: var(--r);
background: color-mix(in srgb, var(--pine) 6%, var(--card)); color: var(--pine);
border-inline-start: 3px solid var(--pine); font-size: 15px; line-height: 1.45; text-wrap: pretty;
}
.info-page .usp-line { margin-block: 0 22px; max-inline-size: 70ch; }
.item > .vhint { color: var(--pine); font-weight: 500; }
.ppanel p + p { margin-block-start: 10px; }