/* Wise Medicine — nature & nurture */
:root {
--forest:#153f35;
--forest-deep:#102e27;
--cream:#f6f3ea;
--gold:#baa16b;
--ink:#273b32;
--muted:#69756d;
--line:#dce0d5;
--red:#ec1923;
--serif:'Noto Serif TC',Georgia,serif;
--sans:'Noto Sans TC',sans-serif;
--ease:cubic-bezier(.2,.7,.2,1)
}

* {
box-sizing:border-box
}
html {
scroll-behavior:smooth;
scroll-padding-top:115px
}
body {
margin:0;
background:#fff;
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.8;
-webkit-font-smoothing:antialiased
}
button,input,select {
font:inherit
}
button,a {
-webkit-tap-highlight-color:transparent
}
button {
color:inherit;
cursor:pointer
}
button {
border:0;
background:none;
padding:0
}
a {
color:inherit;
text-decoration:none
}
img {
display:block;
max-width:100%;
object-fit:cover
}
h1,h2,h3,h4,p {
margin:0
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
outline:2px solid var(--gold);
outline-offset:5px
}
button:disabled {
cursor:not-allowed
}
button[hidden],[hidden] {
display:none!important
}
::selection {
background:#d4e0d5
}
.shell {
max-width:1304px;
width:calc(100% - 112px);
margin:auto
}
.section-space {
padding-top:100px;
padding-bottom:100px
}
.icon-sprite {
position:absolute;
width:0;
height:0;
overflow:hidden
}
.icon {
display:inline-block;
flex-shrink:0;
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:1.45;
stroke-linecap:round;
stroke-linejoin:round;
vertical-align:middle
}
.icon.small {
width:12px;
height:12px
}
.eyebrow {
font-size:12px;
font-weight:500;
letter-spacing:3px;
color:var(--muted)
}
h2 {
font-family:var(--serif);
font-size:clamp(30px,3vw,42px);
line-height:1.55;
font-weight:500;
letter-spacing:1.5px
}
.section-desc {
color:var(--muted);
margin-top:17px;
font-size:15px
}
.site-top {
position:sticky;
top:0;
z-index:30
}
.announcement {
background:var(--forest);
color:#edece2;
font-size:11px;
letter-spacing:1px
}
.announcement-prefs {
display:flex;
align-items:center;
gap:14px;
flex:0 0 auto;
color:#edece2
}
.announcement-prefs .select-wrapper select {
color:inherit;
letter-spacing:0;
padding-top:0;
padding-bottom:0;
line-height:1;
background:transparent
}
.announcement-prefs select option {
color:var(--forest);
background:#fff
}
.announcement .shell {
height:35px;
display:flex;
align-items:center;
justify-content:space-between
}
.announcement button {
display:flex;
align-items:center;
gap:14px;
line-height:1
}
.announcement .icon {
width:15px;
height:15px
}
.header {
position:relative;
z-index:1;
background:rgba(255,255,255,.97);
border-bottom:1px solid #edf0e9;
backdrop-filter:blur(15px)
}
.header-inner {
height:94px;
display:flex;
align-items:center;
justify-content:space-between;
gap:22px
}
.brand-lockup {
display:flex;
align-items:center;
flex-shrink:0;
line-height:1
}
.brand-logo {
display:block;
height:52px;
width:auto
}
.desktop-nav {
display:flex;
align-items:center;
gap:31px;
margin-left:auto;
margin-right:auto
}
.desktop-nav a {
position:relative;
font-size:13px;
white-space:nowrap;
display:flex;
align-items:center;
gap:7px;
padding:33px 0
}
.desktop-nav a:after {
position:absolute;
bottom:23px;
left:0;
right:0;
height:1px;
background:var(--forest);
content:'';
transform:scaleX(0);
transform-origin:left;
transition:transform .2s
}
.desktop-nav a:hover:after,.desktop-nav a.active:after {
transform:scaleX(1)
}
.header-actions {
display:flex;
align-items:center;
gap:18px;
flex-shrink:0
}
.icon-button {
width:40px;
height:44px;
display:grid;
place-items:center;
transition:background .2s;
border-radius:50%
}
.icon-button:hover {
background:#eff3ed
}
.quote-button {
position:relative
}
.quote-count {
position:absolute;
top:0;
right:0;
background:var(--forest);
color:white;
width:16px;
height:16px;
font-size:9px;
display:grid;
place-items:center;
line-height:1;
border-radius:50%
}
.select-wrapper {
display:flex;
align-items:center;
position:relative
}
.select-wrapper select {
appearance:none;
border:0;
background:transparent;
padding:10px 18px 10px 0;
font-size:11px;
color:var(--forest);
outline-offset:0;
cursor:pointer
}
.select-wrapper .icon {
position:absolute;
right:0;
pointer-events:none
}
.language-wrapper select {
width:80px
}
.mobile-toggle {
display:none
}
.mobile-nav {
padding:20px 28px 28px;
background:white;
border-top:1px solid var(--line)
}
.mobile-nav a,.mobile-nav button {
display:block;
font-size:15px;
padding:12px 0;
width:100%;
text-align:left
}
.hero {
min-height:610px;
height:min(730px,calc(100svh - 129px));
position:relative;
background:#1e8a5c;
overflow:hidden;
color:white
}
.hero-image {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:58% center
}
.hero-shade {
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(4,14,26,.62) 0%,rgba(4,14,26,.4) 30%,rgba(4,14,26,.16) 52%,rgba(4,14,26,0) 72%)
}
.hero-content {
height:100%;
position:relative;
display:flex;
flex-direction:column;
justify-content:center
}
.hero-copy {
max-width:620px;
margin-top:-22px;
animation:hero-in 1s var(--ease) both
}
.hero-eyebrow {
color:#e8dfc8;
font-size:12px;
letter-spacing:2.7px;
display:flex;
gap:12px;
align-items:center;
margin-bottom:22px
}
.hero-eyebrow span {
width:24px;
height:1px;
background:var(--gold)
}
.hero h1 {
font-family:var(--serif);
font-size:clamp(42px,5.1vw,72px);
line-height:1.5;
font-weight:500;
letter-spacing:4px;
text-shadow:0 2px 18px rgba(0,0,0,.08)
}
.hero h1 em {
font-style:normal;
color:#eee4c8
}
.hero-description {
max-width:480px;
color:#e0e5da;
font-size:15px;
line-height:2;
margin-top:23px;
letter-spacing:.6px
}
.hero-buttons {
display:flex;
align-items:center;
gap:29px;
margin-top:33px
}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:26px;
min-height:49px;
padding:12px 26px;
border-radius:28px;
font-size:13px;
font-weight:500;
letter-spacing:.7px;
transition:background .2s,transform .2s
}
.button:hover {
transform:translateY(-2px)
}
.button .icon {
width:19px;
height:19px
}
.button-ivory {
background:var(--cream);
color:var(--forest)
}
.button-ivory:hover {
background:#eee6d3
}
.button-forest {
background:var(--forest);
color:var(--cream)
}
.button-outline {
border:1px solid rgba(241,237,225,.45);
color:var(--cream)
}
.button-outline:hover {
background:rgba(255,255,255,.06)
}
.hero-secondary {
font-size:13px;
border-bottom:1px solid rgba(255,255,255,.45);
padding-bottom:5px;
display:flex;
gap:18px;
align-items:center
}
.hero-foot {
position:absolute;
bottom:35px;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:center;
color:#e9ebdf;
font-size:11px;
letter-spacing:1.8px
}
.scroll-cue {
display:flex;
gap:15px;
align-items:center
}
.scroll-cue span {
border:1px solid rgba(255,255,255,.5);
height:39px;
width:39px;
border-radius:50%;
display:grid;
place-items:center;
font-size:18px
}
.hero-scene-note {
position:absolute;
right:14px;
bottom:13px;
font-size:9px;
color:#fff;
opacity:.6;
letter-spacing:1px
}
.value-strip {
display:grid;
grid-template-columns:repeat(4,1fr);
padding-top:33px;
padding-bottom:33px;
border-bottom:1px solid var(--line)
}
.value-item {
display:flex;
align-items:center;
gap:17px;
justify-content:center;
border-left:1px solid var(--line)
}
.value-item:first-child {
border-left:0;
justify-content:flex-start
}
.value-item:last-child {
justify-content:flex-end
}
.value-icon {
width:31px;
height:31px;
stroke-width:1;
color:var(--forest)
}
.value-item strong {
display:block;
font-size:14px;
letter-spacing:1px;
font-weight:500
}
.value-item span {
display:block;
color:var(--muted);
font-size:11px;
margin-top:2px
}
.collections {
display:grid;
grid-template-columns:1fr 1fr;
gap:110px;
align-items:center
}
.collection-lead .eyebrow {
margin-bottom:18px
}
.collection-lead>p:last-child {
font-size:14px;
color:var(--muted);
margin-top:20px
}
.collection-links {
border-top:1px solid var(--line)
}
.collection-link {
display:flex;
align-items:center;
gap:24px;
padding:23px 0;
border-bottom:1px solid var(--line)
}
.collection-number {
font-family:Georgia,serif;
font-size:13px;
color:var(--gold);
align-self:flex-start;
padding-top:7px
}
.collection-link strong {
font-family:var(--serif);
font-size:21px;
font-weight:500
}
.collection-link small {
font-size:12px;
display:block;
color:var(--muted);
margin-top:5px
}
.round-arrow {
display:grid;
place-items:center;
border:1px solid var(--line);
width:38px;
height:38px;
border-radius:50%;
margin-left:auto;
transition:background .2s,color .2s
}
.collection-link:hover .round-arrow {
background:var(--forest);
color:white
}
.round-arrow .icon {
width:16px;
height:16px
}
.products-section {
background:var(--cream)
}
.products-heading {
display:flex;
justify-content:space-between;
align-items:end;
gap:25px
}
.products-heading .eyebrow {
color:var(--gold);
margin-bottom:14px
}
.products-heading h2 {
font-size:clamp(28px,2.7vw,38px)
}
.section-note {
font-size:10px;
white-space:nowrap;
color:var(--muted);
border-bottom:1px solid #c9cbbc;
padding-bottom:4px;
margin-bottom:4px
}
.filter-row {
display:flex;
gap:12px;
margin:36px 0 34px;
flex-wrap:wrap
}
.filter {
font-size:12px;
letter-spacing:.5px;
padding:8px 21px;
border:1px solid #d5d9cb;
border-radius:22px;
transition:background .2s,color .2s;
min-height:38px
}
.filter:hover {
background:#e8ecdf
}
.filter.active {
background:var(--forest);
border-color:var(--forest);
color:#fff
}
.product-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
align-items:start
}
.product-card {
min-width:0
}
.product-image {
display:block;
position:relative;
aspect-ratio:3/4;
width:100%;
border-radius:4px;
overflow:hidden;
background:#f6f3ea
}
.product-image>img {
width:100%;
height:100%;
object-fit:contain;
transition:transform .7s var(--ease)
}
.product-image:hover>img {
transform:scale(1.035)
}
.image-label {
position:absolute;
left:16px;
bottom:13px;
font-size:10px;
color:#4b5c47;
background:rgba(246,243,234,.85);
padding:4px 8px;
border-radius:2px;
max-width:calc(100% - 32px)
}
.image-open {
position:absolute;
right:17px;
top:17px;
width:36px;
height:36px;
background:rgba(255,255,255,.72);
border-radius:50%;
display:grid;
place-items:center
}
.image-open .icon {
width:16px;
height:16px
}
.product-info {
padding:23px 1px 0
}
.product-category {
font-size:10px;
letter-spacing:1.5px;
color:var(--muted)
}
.product-info h3 {
font-family:var(--serif);
font-size:20px;
font-weight:500;
line-height:1.5;
margin-top:7px
}
.product-info h3 button {
text-align:left
}
.product-description {
font-size:12px;
color:var(--muted);
line-height:1.9;
margin-top:12px;
min-height:46px
}
.product-bottom {
display:flex;
align-items:center;
justify-content:space-between;
padding-top:18px;
margin-top:20px;
border-top:1px solid #d5d9cb;
font-size:13px;
gap:12px
}
.add-quote {
display:flex;
align-items:center;
gap:14px;
font-size:11px;
font-weight:500
}
.add-quote span {
font-size:19px;
line-height:1
}
.add-quote:hover {
color:#986b2f
}
.story-section {
display:grid;
grid-template-columns:1fr .94fr;
gap:96px;
align-items:center
}
.story-image {
position:relative;
aspect-ratio:4/4.5;
overflow:hidden;
border-radius:4px
}
.story-image>img {
width:100%;
height:100%;
object-fit:cover
}
.story-image>span {
position:absolute;
bottom:13px;
left:17px;
color:white;
font-size:10px;
background:rgba(14,46,34,.3);
padding:3px 6px
}
.story-image-label {
position:absolute;
left:34px;
bottom:60px;
font-family:Georgia,serif;
font-size:34px;
letter-spacing:3px;
line-height:1.25;
color:#fff;
text-shadow:0 1px 20px #153f35
}
.story-image-label i {
font-size:24px;
font-weight:400
}
.story-copy .eyebrow {
letter-spacing:2px;
margin-bottom:20px
}
.story-copy h2 {
font-size:clamp(28px,2.6vw,37px)
}
.gold-line {
width:38px;
height:1px;
background:var(--gold);
margin:28px 0
}
.story-copy>p:not(.eyebrow) {
color:var(--muted);
font-size:14px;
line-height:2.1;
margin-top:15px
}
.text-link {
display:inline-flex;
align-items:center;
gap:28px;
font-size:13px;
font-weight:500;
padding-bottom:6px;
border-bottom:1px solid var(--forest);
margin-top:28px
}
.text-link .icon {
width:18px;
height:18px
}
.text-link:hover {
color:#92783f
}
.promise-section {
background:#eff2e9
}
.promise-heading {
display:flex;
justify-content:space-between;
align-items:center;
gap:30px
}
.botanical-word {
font-family:Georgia,serif;
color:#8c9c88;
font-size:40px;
line-height:1.2;
letter-spacing:.5px
}
.botanical-word i {
font-weight:400;
color:var(--forest)
}
.promise-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:64px;
margin-top:48px
}
.promise-item {
border-top:1px solid #c6cec0;
padding-top:22px
}
.promise-number {
font-family:Georgia,serif;
font-size:12px;
color:var(--gold);
letter-spacing:2px
}
.promise-item h3 {
font-family:var(--serif);
font-size:20px;
font-weight:500;
margin-top:15px
}
.promise-item p {
font-size:13px;
color:var(--muted);
margin-top:13px;
max-width:340px
}
.quality-section {
display:grid;
grid-template-columns:1fr 1fr;
gap:100px;
align-items:center
}
.quality-seal {
display:grid;
place-items:center;
width:55px;
height:55px;
border:1px solid var(--gold);
border-radius:50%;
color:var(--gold);
margin-bottom:22px
}
.quality-seal .icon {
width:25px;
height:25px
}
.quality-section h2 {
font-size:clamp(28px,2.5vw,37px)
}
.quality-copy>p {
font-size:14px;
color:var(--muted);
line-height:2
}
.quality-status {
font-size:11px;
color:var(--muted);
margin-top:22px;
display:flex;
align-items:center;
gap:9px
}
.quality-status>span {
width:5px;
height:5px;
background:var(--gold);
border-radius:50%
}
.journal-section {
background:var(--cream)
}
.journal-header {
display:flex;
align-items:end;
justify-content:space-between;
gap:30px
}
.journal-header h2 {
display:flex;
flex-direction:column;
gap:3px
}
.serif-english {
font-family:Georgia,serif;
font-size:18px;
font-style:italic;
color:var(--muted);
letter-spacing:0
}
.journal-header>p {
color:var(--muted);
font-size:13px;
padding-bottom:4px
}
.journal-list {
margin-top:37px;
border-top:1px solid #d5d9cb
}
.journal-item {
display:flex;
align-items:center;
gap:35px;
padding:27px 0;
border-bottom:1px solid #d5d9cb
}
.journal-no {
font-family:Georgia,serif;
font-size:13px;
color:var(--gold)
}
.journal-item h3 {
font-family:var(--serif);
font-size:18px;
font-weight:500
}
.coming-label {
margin-left:auto;
color:var(--muted);
font-size:10px;
padding:4px 12px;
border:1px solid #d5d9cb;
border-radius:20px;
white-space:nowrap
}
.journal-note {
font-size:11px;
color:var(--muted);
margin-top:18px
}
.newsletter-section {
padding-top:35px;
padding-bottom:35px;
display:flex;
align-items:center;
justify-content:space-between;
gap:25px
}
.newsletter-section h3 {
font-family:var(--serif);
font-weight:500;
font-size:21px
}
.newsletter-section p {
font-size:12px;
color:var(--muted);
margin-top:5px
}
.newsletter-pending {
padding:10px 22px;
border:1px solid var(--line);
border-radius:25px;
color:var(--muted);
font-size:11px;
white-space:nowrap
}
.contact-section {
position:relative;
background:var(--forest);
color:var(--cream);
overflow:hidden
}
.contact-inner {
padding-top:83px;
padding-bottom:88px;
position:relative;
z-index:1
}
.contact-inner .eyebrow {
color:#c5caac;
font-size:10px;
margin-bottom:15px
}
.contact-inner h2 {
font-size:clamp(28px,3.1vw,43px)
}
.contact-inner>p:not(.eyebrow) {
color:#c5d0c3;
font-size:14px;
margin-top:15px
}
.contact-buttons {
display:flex;
gap:16px;
margin-top:29px
}
.contact-background-word {
position:absolute;
right:-35px;
bottom:-76px;
font-family:Georgia,serif;
font-size:270px;
font-weight:400;
line-height:1;
color:rgba(241,238,222,.035);
letter-spacing:8px;
pointer-events:none
}
.footer {
background:#fdfcf8;
padding-top:63px;
padding-bottom:26px
}
.footer-main {
display:grid;
grid-template-columns:1.9fr 1fr 1fr 1.2fr;
gap:55px
}
.footer-brand .brand-lockup {
width:max-content
}
.footer-brand .brand-logo {
height:64px
}
.footer-brand>p {
font-size:12px;
color:var(--muted);
margin-top:21px;
line-height:2
}
.footer h4 {
font-size:12px;
font-weight:500;
letter-spacing:1px;
margin-bottom:20px
}
.footer-links a,.footer-links button {
display:block;
font-size:12px;
color:var(--muted);
margin:9px 0
}
.footer-contact>p {
font-size:12px;
color:var(--muted)
}
.footer-contact .text-link {
font-size:12px;
margin-top:15px;
gap:20px
}
.footer-bottom {
display:flex;
justify-content:space-between;
align-items:center;
font-size:10px;
color:var(--muted);
border-top:1px solid var(--line);
margin-top:42px;
padding-top:23px
}
.footer-bottom button {
font-size:10px
}
.legal-note {
font-size:10px;
color:#7b8376;
margin-top:18px;
line-height:1.8;
max-width:1060px
}
.draft-note {
display:flex;
gap:16px;
margin-top:20px;
font-size:10px;
color:var(--muted);
border-top:1px dashed var(--line);
padding-top:18px;
align-items:start
}
.draft-note strong {
font-weight:500;
white-space:nowrap;
color:var(--forest)
}
.main-dialog {
width:min(800px,calc(100vw - 40px));
max-height:calc(100svh - 60px);
border:0;
border-radius:7px;
padding:45px;
background:var(--cream);
color:var(--ink);
box-shadow:0 20px 80px #0002
}
.main-dialog::backdrop {
background:rgba(15,42,33,.65);
backdrop-filter:blur(4px)
}
.dialog-close {
position:absolute;
top:12px;
right:12px
}
.main-dialog h2 {
font-size:28px;
margin-bottom:18px;
line-height:1.5;
padding-right:22px
}
.modal-description {
font-size:14px;
color:var(--muted);
line-height:2
}
.modal-product {
display:grid;
grid-template-columns:1fr 1fr;
gap:32px
}
.modal-product>img {
border-radius:4px;
width:100%;
aspect-ratio:1
}
.modal-product .product-category {
display:block;
margin-bottom:10px
}
.modal-product h2 {
font-size:23px
}
.modal-product .modal-description {
font-size:12px
}
.modal-note {
font-size:11px;
color:var(--muted);
margin-top:18px;
line-height:1.9
}
.modal-product .button {
margin-top:22px;
width:100%;
gap:12px
}
.modal-placeholder {
font-size:10px;
color:var(--muted);
margin-bottom:20px
}
.quote-item {
display:flex;
align-items:center;
gap:18px;
padding:18px 0;
border-bottom:1px solid var(--line)
}
.quote-item img {
width:74px;
height:74px;
border-radius:3px
}
.quote-item h3 {
font-family:var(--serif);
font-size:15px;
font-weight:500;
line-height:1.5
}
.quote-item .quote-item-content {
flex:1;
min-width:0
}
.quote-item .remove-item {
font-size:10px;
color:var(--muted);
margin-top:6px
}
.quantity-control {
display:flex;
align-items:center;
border:1px solid var(--line);
border-radius:3px
}
.quantity-control button {
width:33px;
height:34px
}
.quantity-control span {
width:26px;
text-align:center;
font-size:12px
}
.quote-meta {
font-size:12px;
margin-top:22px;
color:var(--muted)
}
.quote-meta strong {
color:var(--forest);
font-weight:500;
margin-left:10px
}
.quote-footer {
margin-top:27px
}
.search-input {
width:100%;
padding:15px;
border:1px solid #c6cec0;
background:white;
border-radius:3px;
outline-color:var(--gold);
font-size:14px;
margin-bottom:20px
}
.search-result {
display:flex;
align-items:center;
gap:18px;
width:100%;
text-align:left;
border-bottom:1px solid var(--line);
padding:13px 0;
font-size:14px
}
.search-result img {
width:65px;
height:65px;
border-radius:3px
}
.search-result .icon {
margin-left:auto
}
.empty-message {
font-size:14px;
color:var(--muted);
padding:30px 0
}
.toast {
position:fixed;
bottom:25px;
left:50%;
transform:translateX(-50%);
z-index:60;
display:flex;
align-items:center;
gap:25px;
background:var(--forest);
color:white;
border:1px solid #ffffff30;
border-radius:4px;
padding:14px 22px;
box-shadow:0 5px 30px #0002;
font-size:12px;
max-width:calc(100vw - 32px);
white-space:nowrap
}
.toast button {
font-size:11px;
color:#e6d6b3
}
.reveal {
opacity:1;
transform:none
}
.motion-on .reveal {
opacity:0;
transform:translateY(15px);
transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.motion-on .reveal.is-visible {
opacity:1;
transform:none
}
.product-card:nth-child(2) {
transition-delay:.08s
}
.product-card:nth-child(3) {
transition-delay:.16s
}
@keyframes hero-in {
from {
opacity:0;
transform:translateY(17px)
}
to {
opacity:1;
transform:translateY(0)
}

}

@media(min-width:1600px) {
.hero {
height:760px
}
.hero-copy {
max-width:650px
}
.hero h1 {
font-size:76px
}

}

@media(max-width:1240px) {
.shell {
width:calc(100% - 72px)
}
.desktop-nav {
gap:20px
}
.header-actions {
gap:11px
}
.brand-logo {
height:44px
}
.desktop-nav a {
font-size:12px
}
.collections {
gap:65px
}
.story-section {
gap:65px
}
.section-note {
display:none
}
.footer-main {
gap:35px
}
.hero h1 {
font-size:60px
}

}

@media(max-width:1050px) {
.desktop-nav {
display:none
}
.mobile-toggle {
display:grid
}
.header-inner {
height:83px
}
.header-actions {
margin-left:auto;
gap:16px
}
.hero {
min-height:590px;
height:650px
}
.hero-copy {
max-width:540px
}
.hero h1 {
font-size:56px
}
.value-item {
gap:12px
}
.value-item span {
font-size:10px
}
.value-icon {
width:27px;
height:27px
}
.collections {
gap:45px
}
.story-section {
gap:50px
}
.story-copy h2 {
font-size:30px
}
.quality-section {
gap:50px
}
.promise-grid {
gap:35px
}
.footer-main {
grid-template-columns:1.5fr 1fr 1fr;
gap:35px
}
.footer-contact {
grid-column:1/-1;
display:flex;
align-items:center;
gap:26px
}
.footer-contact h4 {
margin:0
}
.footer-contact .text-link {
margin:0
}
.locale-en .hero h1,.locale-ja .hero h1 {
font-size:48px
}

}

@media(max-width:760px) {
html {
scroll-padding-top:90px
}
.shell {
width:calc(100% - 44px)
}
.section-space {
padding-top:66px;
padding-bottom:66px
}
.announcement .shell {
height:31px;
flex-wrap:nowrap;
align-items:center;
gap:10px;
font-size:10px;
letter-spacing:0;
line-height:1
}
.announcement .shell>span {
flex:1 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.announcement-prefs {
gap:8px
}
.announcement-prefs .select-wrapper select {
font-size:12px
}
.announcement-prefs .currency-wrapper select {
width:52px
}
.announcement-prefs .language-wrapper select {
width:78px
}
.announcement button {
gap:7px
}
.announcement .icon {
width:12px;
height:12px
}
.header-inner {
height:77px;
gap:6px
}
.brand-logo {
height:40px
}
.footer-brand .brand-logo {
height:56px
}
.header-actions {
gap:5px
}
.icon-button {
width:35px;
height:40px
}
.icon {
width:20px;
height:20px
}
.search-button {
display:none
}
.select-wrapper select {
font-size:10px;
padding-right:14px
}
.language-wrapper select {
width:63px
}
.currency-wrapper select {
width:49px
}
.quote-count {
width:14px;
height:14px;
font-size:8px;
top:0;
right:0
}
.hero {
height:650px;
min-height:0;
max-height:none
}
.hero-image {
object-position:62% center
}
.hero-shade {
background:linear-gradient(90deg,rgba(4,14,26,.7) 0%,rgba(4,14,26,.46) 58%,rgba(4,14,26,.18) 100%)
}
.hero-copy {
margin-top:-20px;
max-width:100%
}
.hero-eyebrow {
font-size:10px;
letter-spacing:1.7px;
margin-bottom:23px
}
.hero h1 {
font-size:clamp(38px,8.9vw,59px);
letter-spacing:2.5px;
line-height:1.55
}
.hero-description {
font-size:13px;
margin-top:24px;
max-width:430px;
line-height:2.1;
letter-spacing:.4px
}
.hero-buttons {
gap:23px;
margin-top:28px
}
.button {
min-height:46px;
font-size:11px;
padding:11px 20px;
gap:18px
}
.hero-secondary {
font-size:11px;
gap:12px
}
.hero-foot {
bottom:29px;
font-size:9px;
letter-spacing:.7px
}
.scroll-cue {
gap:10px
}
.scroll-cue span {
width:31px;
height:31px
}
.hero-scene-note {
font-size:8px;
bottom:8px;
right:9px
}
.value-strip {
grid-template-columns:1fr 1fr;
padding-top:26px;
padding-bottom:26px;
gap:25px 12px
}
.value-item {
justify-content:flex-start!important;
border:0;
gap:11px
}
.value-item strong {
font-size:12px
}
.value-item span {
font-size:9px
}
.value-icon {
width:25px;
height:25px
}
.collections {
grid-template-columns:1fr;
gap:32px
}
.collection-lead h2 {
font-size:31px
}
.collection-lead .eyebrow {
font-size:10px;
letter-spacing:1.8px;
margin-bottom:13px
}
.collection-lead>p:last-child {
font-size:12px;
margin-top:16px
}
.collection-link {
gap:18px;
padding:20px 0
}
.collection-link strong {
font-size:20px
}
.collection-link small {
font-size:11px
}
.products-heading h2 {
font-size:28px;
line-height:1.65
}
.products-heading .eyebrow {
font-size:10px;
margin-bottom:14px;
letter-spacing:2.5px
}
.section-desc {
font-size:12px;
line-height:2;
max-width:460px
}
.filter-row {
gap:8px;
margin:27px 0
}
.filter {
font-size:10px;
padding:7px 16px;
min-height:35px
}
.product-grid {
grid-template-columns:1fr;
gap:37px
}
.product-image {
aspect-ratio:3/4
}
.product-info {
padding-top:18px
}
.product-info h3 {
font-size:20px
}
.product-description {
min-height:0;
font-size:12px
}
.product-bottom {
margin-top:16px;
padding-top:15px
}
.image-label {
font-size:9px
}
.story-section {
grid-template-columns:1fr;
gap:38px
}
.story-image {
aspect-ratio:4/3.8
}
.story-copy h2 {
font-size:30px
}
.story-copy .eyebrow {
font-size:10px;
margin-bottom:16px
}
.story-copy>p:not(.eyebrow) {
font-size:13px
}
.story-image-label {
font-size:32px;
bottom:50px;
left:25px
}
.promise-heading {
align-items:start;
gap:20px
}
.promise-heading h2 {
font-size:28px
}
.botanical-word {
font-size:25px;
margin-top:8px
}
.promise-grid {
grid-template-columns:1fr;
gap:29px;
margin-top:32px
}
.promise-item {
padding-top:15px
}
.promise-item h3 {
font-size:20px;
margin-top:8px
}
.promise-item p {
font-size:12px;
margin-top:10px;
max-width:100%
}
.quality-section {
grid-template-columns:1fr;
gap:25px
}
.quality-section h2 {
font-size:28px
}
.quality-seal {
width:47px;
height:47px;
margin-bottom:20px
}
.quality-copy>p {
font-size:13px
}
.quality-copy .text-link {
margin-top:22px
}
.journal-header {
flex-direction:column;
align-items:start;
gap:14px
}
.journal-header h2 {
font-size:30px
}
.journal-header>p {
font-size:12px
}
.journal-list {
margin-top:28px
}
.journal-item {
gap:18px;
padding:24px 0;
flex-wrap:wrap
}
.journal-no {
font-size:11px
}
.journal-item h3 {
font-size:17px;
flex:1;
min-width:0;
line-height:1.7
}
.coming-label {
margin-left:35px;
font-size:9px
}
.newsletter-section {
padding-top:29px;
padding-bottom:29px;
align-items:start;
flex-direction:column;
gap:17px
}
.newsletter-section h3 {
font-size:20px
}
.newsletter-section p {
font-size:11px
}
.newsletter-pending {
font-size:10px;
padding:8px 15px
}
.contact-inner {
padding-top:65px;
padding-bottom:70px
}
.contact-inner h2 {
font-size:29px;
line-height:1.65
}
.contact-inner>p:not(.eyebrow) {
font-size:12px;
line-height:2;
max-width:350px
}
.contact-background-word {
font-size:180px;
bottom:-48px;
right:-10px
}
.contact-buttons {
gap:12px;
flex-wrap:wrap
}
.contact-buttons .button {
min-width:145px;
justify-content:space-between
}
.footer {
padding-top:43px
}
.footer-main {
grid-template-columns:1fr 1fr;
gap:30px 22px
}
.footer-brand {
grid-column:1/-1
}
.footer-brand>p {
font-size:12px
}
.footer h4 {
font-size:11px;
margin-bottom:13px
}
.footer-links a,.footer-links button {
font-size:11px
}
.footer-contact {
display:block;
margin-top:4px
}
.footer-contact h4 {
margin-bottom:12px
}
.footer-contact .text-link {
margin-top:10px
}
.footer-contact>p {
font-size:11px
}
.footer-bottom {
margin-top:29px;
gap:20px;
align-items:start;
font-size:9px
}
.footer-bottom button {
font-size:9px;
white-space:nowrap
}
.legal-note {
font-size:9px;
line-height:1.9
}
.draft-note {
flex-direction:column;
gap:7px;
font-size:9px
}
.main-dialog {
padding:44px 22px 28px;
width:calc(100vw - 24px);
max-height:calc(100svh - 26px)
}
.main-dialog h2 {
font-size:23px
}
.modal-product {
grid-template-columns:1fr;
gap:23px
}
.modal-product>img {
max-height:250px;
aspect-ratio:1.2;
object-fit:contain;
background:#edf0e6
}
.modal-product .modal-description {
font-size:12px
}
.quote-item {
gap:12px
}
.quote-item img {
width:58px;
height:58px
}
.quote-item h3 {
font-size:13px
}
.quantity-control button {
width:27px;
height:32px
}
.quantity-control span {
width:22px
}
.toast {
padding:12px 16px;
font-size:11px;
gap:15px
}
.locale-en .hero h1,.locale-ja .hero h1 {
font-size:clamp(34px,8vw,47px);
letter-spacing:0;
line-height:1.5
}
.locale-en .hero-description {
font-size:12px;
line-height:1.9
}
.locale-en .hero-buttons {
gap:16px
}
.locale-en .button {
font-size:10px;
padding:12px 16px;
gap:14px
}
.locale-en .hero-secondary {
font-size:10px;
gap:8px
}
.locale-en h2 {
letter-spacing:0;
font-size:29px
}
.locale-en .botanical-word {
display:none
}
.locale-ja h2 {
letter-spacing:0;
font-size:28px
}

}

@media(max-width:380px) {
.shell {
width:calc(100% - 34px)
}
.brand-logo {
height:34px
}
.header-actions {
gap:2px
}
.language-wrapper select {
width:60px
}
.currency-wrapper select {
width:45px
}
.icon-button {
width:30px
}
.hero {
height:630px
}
.hero-buttons {
gap:17px
}
.hero-eyebrow {
font-size:9px
}
.botanical-word {
font-size:21px
}
.hero-foot {
font-size:8px
}

}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*:before,*:after {
animation:none!important;
transition:none!important
}
.motion-on .reveal {
opacity:1;
transform:none
}

}