:root {
  --porcelain: #f7fafc;
  --mist: #ddeaFA;
  --jade: #789786;
  --deep-jade: #496858;
  --shell: #f2ccda;
  --silver: #c9d4db;
  --ink: #172226;
  --quiet: #617076;
  --line: rgba(23, 34, 38, 0.16);
  --display: "Bodoni Moda", Georgia, serif;
  --body: "Plus Jakarta Sans", Arial, sans-serif;
  --utility: "IBM Plex Mono", monospace;
  --page: min(1440px, calc(100vw - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--porcelain); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.55; }
body.no-scroll { overflow: hidden; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--deep-jade); outline-offset: 4px; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 14px; left: 14px; padding: 10px 16px; background: white; border: 1px solid var(--ink); }

.announcement { min-height: 34px; padding: 7px 24px; display: flex; justify-content: center; gap: 36px; background: var(--ink); color: white; font: 10px/1.4 var(--utility); letter-spacing: .08em; text-transform: uppercase; }
.announcement__status { color: #b9d5c5; }
.site-header { width: var(--page); height: 78px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 5; }
.wordmark { width: fit-content; font: 600 22px/1 var(--display); letter-spacing: .22em; }
.desktop-nav { display: flex; align-items: center; gap: 34px; font-size: 12px; }
.desktop-nav a, .bag-button { position: relative; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s ease; }
.desktop-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.bag-button { justify-self: end; border: 0; background: none; padding: 10px 0 10px 12px; cursor: pointer; font-size: 12px; }
.bag-button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px; border: 1px solid var(--line); border-radius: 50%; font: 10px var(--utility); }

.hero { width: var(--page); min-height: min(730px, calc(100vh - 112px)); margin: 0 auto; position: relative; overflow: hidden; background: var(--mist); border-radius: 4px; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(230, 241, 255, .98) 0%, rgba(230, 241, 255, .82) 29%, rgba(230, 241, 255, .08) 60%, rgba(230, 241, 255, 0) 100%); }
.hero__content { position: relative; z-index: 1; width: min(570px, 48%); min-height: inherit; padding: 8% 0 6% 7%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.eyebrow { margin: 0 0 24px; font: 500 10px/1.4 var(--utility); letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { max-width: 600px; margin: 0; font: 500 clamp(54px, 6vw, 96px)/.92 var(--display); letter-spacing: -.055em; }
.hero__intro { max-width: 490px; margin: 34px 0 0; color: #34484e; font-size: clamp(14px, 1.15vw, 17px); }
.hero__actions { display: flex; gap: 28px; align-items: center; margin-top: 42px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 24px; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; font-size: 12px; transition: background .2s ease, color .2s ease; }
.button--ink { background: var(--ink); color: white; }
.button--ink:hover { background: var(--deep-jade); border-color: var(--deep-jade); }
.button--wide { width: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid currentColor; font-size: 12px; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translate(3px, 3px); }

.principles { width: var(--page); margin: 0 auto; min-height: 96px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--line); }
.principles p { margin: 0; padding: 12px 5vw; text-align: center; border-right: 1px solid var(--line); font-size: 11px; }
.principles p:last-child { border-right: 0; }
.principles span { margin-right: 14px; color: var(--deep-jade); font: 10px var(--utility); }

.shop-section { width: var(--page); margin: 0 auto; padding: 130px 0 120px; }
.section-heading { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 8%; }
.section-heading h2, .ritual h2, .newsletter h2 { margin: 0; font: 500 clamp(46px, 5.4vw, 78px)/.98 var(--display); letter-spacing: -.04em; }
.section-heading__copy { max-width: 440px; margin: 0 0 5px; color: var(--quiet); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 58px 0 30px; }
.filter { padding: 9px 17px; border: 1px solid var(--line); border-radius: 99px; background: transparent; cursor: pointer; font-size: 11px; transition: .2s ease; }
.filter:hover, .filter.is-active { background: var(--ink); color: white; border-color: var(--ink); }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 18px; }
.product-card { min-width: 0; }
.product-card__visual { display: block; width: 100%; aspect-ratio: .82; position: relative; border: 0; overflow: hidden; background: #e8f0f3; cursor: pointer; }
.product-card:nth-child(4n+2) .product-card__visual { background: #e7ecdf; }
.product-card:nth-child(4n+3) .product-card__visual { background: #f3e5ea; }
.product-card:nth-child(4n+4) .product-card__visual { background: #e1edf4; }
.product-card__badge { position: absolute; top: 14px; left: 14px; padding: 5px 8px; background: rgba(247,250,252,.86); backdrop-filter: blur(8px); font: 9px var(--utility); text-transform: uppercase; letter-spacing: .08em; }
.product-card__image { width: 100%; height: 100%; object-fit: contain; background: rgba(255,255,255,.24); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.product-card__visual:hover .product-card__image { transform: scale(1.035); }
.product-card__view { position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; background: rgba(23,34,38,.9); color: white; font: 9px var(--utility); letter-spacing: .04em; transform: translateY(8px); opacity: 0; transition: .25s ease; }
.product-card__visual:hover .product-card__view { transform: translateY(0); opacity: 1; }
.product-card__info { padding-top: 14px; }
.product-card__name { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: 500 15px/1.3 var(--body); }
.product-card__price { display: flex; gap: 8px; margin-top: 6px; font-size: 12px; }
.product-card__price del, .dialog-price del { color: #859096; }
.product-card__add { width: 100%; margin-top: 14px; padding: 10px 0; display: flex; justify-content: space-between; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; cursor: pointer; font-size: 11px; }
.product-card__add:hover { color: var(--deep-jade); }

.tool-visual { position: absolute; inset: 0; display: grid; place-items: center; transform: scale(.82); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card__visual:hover .tool-visual { transform: scale(.88) rotate(-2deg); }
.tool-visual span, .tool-visual i { display: block; position: absolute; }
.tool-visual--roller span { width: 26%; height: 21%; top: 20%; border-radius: 50%; background: linear-gradient(135deg,#a9bfae,#5f8873); box-shadow: inset 8px 4px 16px rgba(255,255,255,.45), 14px 20px 30px rgba(58,86,72,.12); }
.tool-visual--roller i { width: 7%; height: 42%; top: 37%; border-radius: 8px; background: linear-gradient(90deg,#bbccd0 0 18%,#698e79 19% 80%,#bcccd0 81%); }
.tool-visual--gua span { width: 48%; height: 42%; background: linear-gradient(135deg,#b8cfbc,#6f947e); border-radius: 46% 55% 42% 18%; transform: rotate(-18deg); box-shadow: inset 14px 8px 24px rgba(255,255,255,.35), 12px 24px 36px rgba(58,86,72,.15); }
.tool-visual--tweezer span { width: 52%; height: 5%; background: linear-gradient(#edf2f2,#87999e); transform: rotate(-48deg) translateY(-24px); clip-path: polygon(0 0,100% 18%,100% 72%,0 100%,5% 52%); }
.tool-visual--tweezer i { width: 52%; height: 5%; background: linear-gradient(#87999e,#e9eeee); transform: rotate(-42deg) translateY(24px); clip-path: polygon(0 0,100% 18%,100% 72%,0 100%,5% 52%); }
.tool-visual--brush span { width: 18%; height: 32%; top: 18%; border-radius: 50% 50% 28% 28%; background: linear-gradient(90deg,#f8f7f2,#c8c5c0,#fff); box-shadow: 8px 14px 30px rgba(30,45,50,.1); }
.tool-visual--brush i { width: 12%; height: 35%; top: 47%; background: linear-gradient(90deg,#9aabb0 0 20%,#668b79 21% 78%,#b9c6ca 79%); border-radius: 0 0 14px 14px; }
.tool-visual--globe span, .tool-visual--globe i { width: 26%; aspect-ratio: 1; top: 18%; border-radius: 50%; background: radial-gradient(circle at 32% 28%,#fff 0 5%,rgba(255,255,255,.65) 7%,rgba(138,196,223,.5) 54%,rgba(89,149,186,.72)); box-shadow: 10px 20px 36px rgba(55,111,142,.18); }
.tool-visual--globe span::after, .tool-visual--globe i::after { content:""; position:absolute; width:28%; height:120%; left:36%; top:82%; background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(108,176,211,.55),rgba(255,255,255,.7)); border-radius:0 0 8px 8px; }
.tool-visual--globe span { left:25%; transform:rotate(-8deg); }.tool-visual--globe i { right:25%; transform:rotate(8deg); }
.tool-visual--sponge span, .tool-visual--sponge i { width: 34%; height: 42%; border-radius: 48% 42% 50% 38%; background: radial-gradient(circle,#fff 0 1px,#e4d9df 2px 4px,#f7f4f5 5px); box-shadow: 12px 18px 30px rgba(75,64,69,.1); }
.tool-visual--sponge span { transform: translate(-20%,-8%) rotate(-12deg); }.tool-visual--sponge i { transform: translate(24%,14%) rotate(15deg); }
.tool-visual--set span { width: 46%; height: 40%; background: linear-gradient(135deg,#afc8b4,#668a75); border-radius: 58% 40% 50% 22%; transform: translate(-13%,-8%) rotate(-16deg); box-shadow: 10px 20px 30px rgba(56,85,69,.12); }
.tool-visual--set i { width: 10%; height: 54%; background: linear-gradient(90deg,#b8c6ca 0 22%,#e9eeee 23% 29%,#789a86 30% 82%,#c1cdd0 83%); border-radius: 50% 50% 8px 8px; transform: translate(120%,12%) rotate(12deg); }
.tool-visual--comb span { width: 11%; height: 58%; background: linear-gradient(90deg,#566b70 0 55%,transparent 56%); transform: rotate(18deg); border-radius: 10px; }
.tool-visual--comb i { width: 32%; height: 18%; top: 18%; left: 36%; background: repeating-linear-gradient(90deg,#566b70 0 3px,transparent 3px 7px); transform: rotate(18deg); }
.tool-visual--curler span { width: 44%; height: 40%; border: 5px solid #8da0a5; border-left-color: transparent; border-radius: 50%; transform: translateY(-15%) rotate(-12deg); }
.tool-visual--curler i { width: 40%; height: 38%; border-left: 5px solid #8da0a5; border-bottom: 5px solid #8da0a5; border-radius: 0 0 0 50%; transform: translate(18%,35%) rotate(-12deg); }

.ritual { width: var(--page); margin: 0 auto 120px; display: grid; grid-template-columns: 1fr 1fr; min-height: 660px; }
.ritual__panel { padding: clamp(50px,7vw,100px); }
.ritual__panel--copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: var(--jade); color: #f8fbf9; }
.ritual__panel--copy > p:not(.eyebrow) { max-width: 520px; margin: 32px 0; color: rgba(255,255,255,.8); }
.ritual__panel--steps { background: var(--mist); display: flex; flex-direction: column; justify-content: center; }
.ritual__panel--steps article { padding: 34px 0; border-bottom: 1px solid rgba(23,34,38,.14); display: grid; grid-template-columns: 72px 1fr; column-gap: 22px; }
.ritual__panel--steps article:last-child { border-bottom: 0; }
.ritual__panel--steps span { grid-row: 1 / 3; color: var(--deep-jade); font: 10px var(--utility); text-transform: uppercase; letter-spacing: .08em; }
.ritual__panel--steps h3 { margin: 0; font: 500 22px var(--display); }
.ritual__panel--steps p { margin: 8px 0 0; color: var(--quiet); font-size: 13px; }

.newsletter { width: var(--page); margin: 0 auto; padding: 95px 8%; background: var(--shell); display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10%; }
.newsletter form { position: relative; }
.newsletter input { width: 100%; height: 54px; padding: 0 140px 0 0; border: 0; border-bottom: 1px solid var(--ink); background: transparent; border-radius: 0; }
.newsletter button { position: absolute; right: 0; top: 0; height: 54px; border: 0; background: transparent; cursor: pointer; font-size: 12px; }
.newsletter form p { min-height: 20px; margin: 10px 0 0; font-size: 11px; }

.site-footer { width: var(--page); margin: 0 auto; padding: 90px 0 34px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 7%; border-bottom: 10px solid var(--ink); }
.wordmark--footer { font-size: 31px; }
.footer__brand p { color: var(--quiet); }
.site-footer h2 { margin: 0 0 18px; font: 500 11px var(--utility); text-transform: uppercase; letter-spacing: .08em; }
.site-footer > div:not(.footer__brand) { display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.footer__legal { grid-column: 1 / -1; margin: 70px 0 0; color: var(--quiet); font-size: 10px; }

.cart { position: fixed; inset: 0; z-index: 30; visibility: hidden; pointer-events: none; }
.cart.is-open { visibility: visible; pointer-events: auto; }
.cart__scrim { position: absolute; inset: 0; background: rgba(23,34,38,.38); opacity: 0; transition: opacity .3s ease; }
.cart.is-open .cart__scrim { opacity: 1; }
.cart__panel { position: absolute; top: 0; right: 0; width: min(480px,100%); height: 100%; display: flex; flex-direction: column; background: var(--porcelain); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.cart.is-open .cart__panel { transform: translateX(0); }
.cart__header { height: 80px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.cart__header h2 { margin: 0; font: 500 28px var(--display); }
.cart__header button, .dialog-close { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; font-size: 26px; font-weight: 300; }
.cart__items { flex: 1; overflow: auto; padding: 0 28px; }
.cart__empty { min-height: 100%; display: grid; place-content: center; text-align: center; }
.cart__empty p { margin: 0; font: 500 28px var(--display); }.cart__empty span { margin-top: 8px; color: var(--quiet); font-size: 12px; }
.cart-line { display: grid; grid-template-columns: 100px 1fr; gap: 18px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.cart-line__image { width: 100px; height: 120px; display: block; background: #e5eef0; overflow: hidden; }
.cart-line__image img { width: 100%; height: 100%; object-fit: contain; }
.cart-line__title { display: block; margin: 6px 0; font: 500 14px/1.35 var(--body); }
.cart-line h3 { margin: 6px 0; font: 500 14px var(--body); }.cart-line p { margin: 0; font-size: 12px; }
.quantity { width: fit-content; margin-top: 16px; display: flex; align-items: center; border: 1px solid var(--line); }
.quantity button { width: 32px; height: 28px; border: 0; background: none; cursor: pointer; }.quantity span { min-width: 24px; text-align: center; font: 10px var(--utility); }
.cart__footer { padding: 22px 28px 28px; border-top: 1px solid var(--line); }.cart__footer > p { display: flex; justify-content: space-between; margin: 0 0 18px; }.cart__footer small { display: block; margin-top: 12px; color: var(--quiet); text-align: center; font-size: 9px; }

.product-dialog { width: min(980px,calc(100% - 32px)); padding: 0; border: 0; background: var(--porcelain); color: var(--ink); }
.product-dialog::backdrop { background: rgba(23,34,38,.52); backdrop-filter: blur(3px); }
.dialog-close { position: absolute; z-index: 2; top: 14px; right: 14px; }
.dialog-layout { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; }
.dialog-visual { position: relative; min-height: 520px; background: var(--mist); }.dialog-visual .tool-visual { transform: scale(1); }
.dialog-copy { padding: 10%; display: flex; flex-direction: column; justify-content: center; }.dialog-copy h2 { margin: 0; font: 500 clamp(38px,5vw,64px)/1 var(--display); letter-spacing: -.04em; }
.dialog-price { margin: 20px 0 30px; font-size: 13px; }.dialog-blurb { color: var(--quiet); }
.care-note { margin: 28px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.care-note span { font: 9px var(--utility); text-transform: uppercase; letter-spacing: .08em; }.care-note p { margin: 7px 0 0; font-size: 11px; color: var(--quiet); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 28px; padding: 12px 18px; background: var(--ink); color: white; transform: translate(-50%,30px); opacity: 0; pointer-events: none; transition: .25s ease; font-size: 11px; }.toast.is-visible { transform: translate(-50%,0); opacity: 1; }

.policy-page { width: min(820px,calc(100% - 40px)); margin: 0 auto; padding: 80px 0 140px; }.policy-page h1 { margin: 0 0 42px; font: 500 clamp(48px,8vw,80px)/1 var(--display); letter-spacing: -.04em; }.policy-page h2 { margin: 42px 0 10px; font: 500 25px var(--display); }.policy-page p, .policy-page li { color: #46565b; }.policy-page__note { padding: 20px; background: var(--mist); border-left: 3px solid var(--deep-jade); }

/* Product detail: a beauty instrument record, not a generic product template. */
.product-loading { width: var(--page); min-height: 60vh; margin: 0 auto; display: grid; place-items: center; color: var(--quiet); font: 11px var(--utility); text-transform: uppercase; letter-spacing: .1em; }
.product-breadcrumb { width: var(--page); margin: 0 auto; padding: 18px 0 30px; display: flex; gap: 9px; overflow: hidden; color: var(--quiet); white-space: nowrap; font: 9px var(--utility); text-transform: uppercase; letter-spacing: .06em; }
.product-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.product-breadcrumb a:hover { color: var(--deep-jade); }
.product-hero { width: var(--page); margin: 0 auto; display: grid; grid-template-columns: minmax(0,1.18fr) minmax(390px,.82fr); gap: clamp(44px,6vw,94px); align-items: start; }
.product-gallery { min-height: 720px; position: relative; display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 14px; padding: 18px; background: #e8f0f2; }
.product-gallery__rail { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.product-gallery__thumb { width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid transparent; background: rgba(255,255,255,.45); cursor: pointer; }
.product-gallery__thumb.is-active { border-color: var(--ink); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-gallery__main { min-height: 680px; display: grid; place-items: center; overflow: hidden; background: rgba(255,255,255,.22); }
.product-gallery__main img { width: 100%; height: 100%; max-height: 720px; object-fit: contain; }
.product-gallery__label { position: absolute; right: 19px; bottom: 16px; padding: 7px 9px; background: rgba(247,250,252,.86); backdrop-filter: blur(8px); font: 9px var(--utility); letter-spacing: .08em; text-transform: uppercase; }
.product-summary { position: sticky; top: 24px; padding: 18px 0 40px; }
.product-summary h1 { max-width: 620px; margin: 0; font: 500 clamp(52px,5.3vw,82px)/.94 var(--display); letter-spacing: -.052em; }
.product-summary__price { margin: 26px 0 0; display: flex; align-items: center; gap: 12px; }
.product-summary__price strong { font-size: 17px; font-weight: 500; }
.product-summary__price del { color: #859096; font-size: 13px; }
.product-summary__price span { padding: 5px 8px; background: var(--shell); font: 9px var(--utility); text-transform: uppercase; }
.product-summary__intro { max-width: 590px; margin: 30px 0 0; color: #46575d; font-size: 14px; line-height: 1.75; }
.product-features { margin: 28px 0; padding: 0; list-style: none; }
.product-features li { position: relative; padding: 8px 0 8px 24px; border-bottom: 1px solid rgba(23,34,38,.08); font-size: 12px; }
.product-features li::before { content: "↳"; position: absolute; left: 0; color: var(--deep-jade); font-family: var(--utility); }
.instrument-record { margin: 32px 0 24px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.instrument-record p { margin: 0; padding: 11px 0; display: grid; grid-template-columns: 110px 1fr; gap: 12px; border-bottom: 1px solid var(--line); }
.instrument-record p:last-child { border-bottom: 0; }
.instrument-record span { color: var(--quiet); font: 9px var(--utility); text-transform: uppercase; letter-spacing: .08em; }
.instrument-record strong { font-size: 11px; font-weight: 500; }
.purchase-row { display: grid; grid-template-columns: 118px 1fr; gap: 10px; }
.purchase-quantity { min-height: 54px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; border: 1px solid var(--ink); }
.purchase-quantity button { height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.purchase-quantity span { text-align: center; font: 11px var(--utility); }
.purchase-add { min-height: 54px; }
.checkout-note { margin: 10px 0 22px; color: var(--quiet); font-size: 9px; }
.product-assurances { border-top: 1px solid var(--line); }
.product-assurances details { border-bottom: 1px solid var(--line); }
.product-assurances summary { padding: 17px 2px; cursor: pointer; list-style: none; font: 500 11px var(--utility); text-transform: uppercase; letter-spacing: .06em; }
.product-assurances summary::-webkit-details-marker { display: none; }
.product-assurances summary::after { content: "+"; float: right; }
.product-assurances details[open] summary::after { content: "−"; }
.product-assurances details p { margin: 0; padding: 0 30px 20px 0; color: var(--quiet); font-size: 11px; }
.product-story { width: var(--page); margin: 130px auto 0; padding: 100px 7%; background: var(--mist); display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; }
.product-story__heading { position: sticky; top: 40px; align-self: start; }
.product-story h2 { max-width: 520px; margin: 0; font: 500 clamp(46px,5vw,74px)/.98 var(--display); letter-spacing: -.045em; }
.product-story__copy p { max-width: 720px; margin: 0 0 28px; color: #3f535a; font-size: 15px; line-height: 1.85; }
.product-story__images { grid-column: 1/-1; margin-top: 48px; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.product-story__images figure { margin: 0; min-width: 0; background: rgba(255,255,255,.28); }
.product-story__images img { width: 100%; aspect-ratio: 1.12; object-fit: contain; }
.product-story__images figcaption { padding: 12px; border-top: 1px solid rgba(23,34,38,.1); font: 8px var(--utility); text-transform: uppercase; letter-spacing: .06em; }
.related-products { width: var(--page); margin: 0 auto; padding: 130px 0 40px; }
.related-products .section-heading { align-items: end; }
.related-products .text-link { justify-self: end; }
.related-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.product-not-found { width: var(--page); min-height: 65vh; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.product-not-found h1 { max-width: 800px; margin: 0 0 34px; font: 500 clamp(52px,7vw,90px)/.94 var(--display); letter-spacing: -.05em; }
.product-image-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--mist); color: rgba(23,34,38,.2); font: 500 90px var(--display); }

@media (max-width: 980px) {
  :root { --page: calc(100vw - 30px); }
  .site-header { grid-template-columns: 1fr 1fr; }.desktop-nav { display: none; }
  .hero { min-height: 710px; }.hero__veil { background: linear-gradient(180deg,rgba(230,241,255,.95) 0%,rgba(230,241,255,.58) 52%,rgba(230,241,255,.05) 100%); }.hero__image { object-position: 61% center; }.hero__content { width: 72%; padding: 70px 0 280px 7%; justify-content: flex-start; }
  .product-grid { grid-template-columns: repeat(2,1fr); }.ritual { grid-template-columns: 1fr; }.newsletter { grid-template-columns: 1fr; gap: 50px; }
  .product-hero { grid-template-columns: 1fr; gap: 50px; }.product-summary { position: static; width: min(680px,100%); margin: 0 auto; }.product-gallery { min-height: 620px; }.product-gallery__main { min-height: 580px; }.product-story { grid-template-columns: 1fr; }.product-story__heading { position: static; }.product-story__copy { margin-top: 40px; }.related-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 620px) {
  .announcement { justify-content: center; }.announcement__status { display: none; }.site-header { height: 66px; }
  .hero { min-height: 680px; }.hero__content { width: 100%; padding: 52px 22px 300px; }.hero h1 { font-size: 52px; }.hero__intro { margin-top: 24px; }.hero__actions { margin-top: 28px; gap: 18px; flex-wrap: wrap; }.hero__image { object-position: 66% center; }
  .principles { grid-template-columns: 1fr; padding: 14px 0; }.principles p { border-right: 0; padding: 8px; }
  .shop-section { padding: 92px 0; }.section-heading { grid-template-columns: 1fr; }.section-heading__copy { margin-top: 24px; }.filters { margin-top: 36px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 5px; }.filter { flex: 0 0 auto; }.product-grid { grid-template-columns: 1fr 1fr; gap: 38px 10px; }.product-card__name { font-size: 12px; }.product-card__price { flex-direction: column; gap: 1px; }.product-card__add { font-size: 10px; }
  .ritual { margin-bottom: 80px; }.ritual__panel { padding: 52px 28px; }.ritual__panel--steps article { grid-template-columns: 54px 1fr; }
  .newsletter { padding: 64px 28px; }.site-footer { grid-template-columns: 1fr 1fr; }.footer__brand { grid-column: 1/-1; margin-bottom: 30px; }.footer__legal { margin-top: 35px; }
  .dialog-layout { grid-template-columns: 1fr; }.dialog-visual { min-height: 320px; }.dialog-copy { padding: 40px 24px; }.dialog-copy h2 { font-size: 38px; }
  .product-breadcrumb { padding: 12px 0 20px; }.product-hero { gap: 38px; }.product-gallery { min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 10px; }.product-gallery__rail { grid-row: 2; flex-direction: row; overflow-x: auto; }.product-gallery__thumb { flex: 0 0 68px; }.product-gallery__main { grid-row: 1; min-height: 430px; }.product-gallery__label { right: 14px; top: 14px; bottom: auto; }.product-summary h1 { font-size: 51px; }.product-summary__intro { font-size: 13px; }.purchase-row { grid-template-columns: 100px 1fr; }.instrument-record p { grid-template-columns: 92px 1fr; }.product-story { margin-top: 80px; padding: 70px 24px; }.product-story h2 { font-size: 48px; }.product-story__images { grid-template-columns: 1fr; }.related-products { padding-top: 88px; }.related-products .section-heading { grid-template-columns: 1fr; }.related-products .text-link { justify-self: start; margin-top: 22px; }.related-grid { gap: 36px 10px; }.product-card__view { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}