/* Product studio composition. Catalogue behavior stays in catalog.js. */
:root{--paper:#f5f7f2;--ink:#1b3029;--muted:#69766e;--accent:#d9e8d8;--studio-accent:#74957a;--studio-line:#20392b1a;--studio-dark:#10241e}
body[data-mode="business"]{--ink:#20322e;--accent:#dce8e1;--studio-accent:#68857b}
body{background:var(--paper)}
button,a{-webkit-tap-highlight-color:transparent}
.site-header{height:72px;padding-inline:5vw;background:#f5f7f2e8;border-bottom:1px solid var(--studio-line);backdrop-filter:blur(22px)}
.site-header .brand{gap:14px}.site-header .brand-mark{width:120px;height:27px}.site-header .whitecat-mark{width:49px;height:43px}
.site-header nav{display:flex;gap:30px;font-size:13px}
.site-header .selection-open{padding:9px 15px;border:1px solid #20392b1c;border-radius:24px;background:transparent;color:var(--ink);font-size:12px;gap:10px}
.site-header .selection-count{border-color:#20392b4a}
.hero{height:132svh;min-height:1000px;background:var(--paper)}
.hero-sticky{position:sticky;top:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:36px auto minmax(280px,1fr) 84px 44px;grid-template-areas:"mode" "copy" "stage" "controls" "foot";align-items:stretch;justify-items:center;gap:8px;height:100svh;min-height:760px;max-height:none;padding:88px 24px 20px;overflow:hidden;isolation:isolate;background:linear-gradient(145deg,#f9faf6,#f3f7ef 55%,#e9f1e5)}
body[data-mode="business"] .hero-sticky{background:linear-gradient(145deg,#f8faf7,#f0f5ef 55%,#e8f0ea)}
.hero-sticky::before,.hero-sticky::after,body[data-mode="business"] .hero-sticky::before,.hero-atmosphere,.hero-grain,#fluid-scene,.orbit-word,.orbit-ground{display:none!important;content:none!important}
.hero-topline{position:absolute;inset:76px 24px auto auto;width:auto;padding:0;pointer-events:none}
.hero-topline>.eyebrow{display:none}
.motion-toggle{font-size:0;padding:0;gap:0;pointer-events:auto}
.motion-toggle span{width:27px;height:27px;font-size:10px;border-color:#20392b22;background:transparent}
.audience-switch{grid-area:mode;align-self:center;justify-self:center;position:static;margin:0;padding:3px;gap:2px;border:1px solid #243f2d13;border-radius:30px;background:#e4eadf;box-shadow:none;backdrop-filter:none}
.audience-switch button{min-height:30px;padding:6px 18px;font-size:12px;line-height:1.4;color:#627264;font-weight:500}
.audience-switch button[aria-pressed="true"],body[data-mode="business"] .audience-switch button[aria-pressed="true"]{color:#244030;background:white;box-shadow:0 1px 4px #16382409}
.hero-copy{grid-area:copy;align-self:center;width:100%;max-width:560px;margin:8px 0 0;padding:0;text-align:center;transform:none!important;opacity:1!important;z-index:3}
.hero-copy .eyebrow{margin-bottom:10px;color:#7b897c;font-size:10px;font-weight:500;letter-spacing:.13em;line-height:1.5}
.hero-copy h1{font-size:clamp(36px,6vw,52px);font-weight:500;letter-spacing:-.06em;line-height:1.08}
.hero-copy h1 em{color:var(--studio-accent)}
.hero-copy>p:last-child{margin:13px auto 0;max-width:360px;font-size:14px;line-height:1.55;color:#718070}
.hero .product-orbit{grid-area:stage;position:relative;inset:auto;align-self:stretch;justify-self:stretch;width:100%;max-width:none;height:100%;min-height:0;max-height:none;margin:0;padding:0;flex:none;overflow:hidden;isolation:isolate;mix-blend-mode:normal;perspective:none;transform:none;background:none;border:0;box-shadow:none;touch-action:pan-y;cursor:grab}
.product-orbit::before,.product-orbit::after{display:none;content:none}
.studio-data{display:none!important}
.studio-canvas{visibility:hidden;position:absolute;inset:0;display:block;width:100%;height:100%;border:0;outline:none;z-index:2;background:transparent;pointer-events:none}
.models-ready>.studio-canvas{visibility:visible}
.studio-fallback{position:absolute;inset:0;width:100%;height:100%;padding:12px 20px 25px;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;user-select:none;-webkit-user-drag:none;z-index:1}
.product-orbit.models-ready .studio-fallback,.models-ready .image-fallback{visibility:hidden}
.product-orbit:focus:not(:focus-visible),.story-visual:focus:not(:focus-visible){outline:none}
.product-orbit:focus-visible{outline:2px solid #76966d;outline-offset:-5px;border-radius:18px}
.product-orbit[data-model-state="photo"],.story-visual[data-model-state="photo"]{cursor:default}
.is-dragging{cursor:grabbing!important}
.studio-controls{grid-area:controls;align-self:center;justify-self:center;display:grid;justify-items:center;gap:5px;min-width:0;max-width:100%;position:relative;z-index:5}
.studio-product-name{font-size:10px;line-height:1.5;color:#52674f;letter-spacing:.01em;text-align:center}
.model-hint{position:static;margin:0;color:#84907f;font-size:10px;line-height:1.5;letter-spacing:.015em;text-align:center}
.studio-buttons{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:2px}
.studio-buttons button{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:32px;padding:5px 10px;border:1px solid #2648331b;border-radius:24px;background:#ffffff69;color:#50694e;font-size:11px;font-weight:500;line-height:1.4;transition:background .2s,border-color .2s}
.studio-buttons button[data-studio-control="left"],.studio-buttons button[data-studio-control="right"]{font-size:18px;padding-inline:9px}
.studio-buttons button:hover:not(:disabled){background:#ffffffd9;border-color:#26483355}
.studio-buttons button:disabled{opacity:.3;cursor:default}
.studio-buttons button:focus-visible{outline:2px solid #74956c;outline-offset:3px}
.studio-buttons #studio-detail{margin-left:6px;padding-inline:15px;border-color:#26483333;color:#264a34}
.hero-bottom{grid-area:foot;position:static;align-self:end;display:flex;align-items:center;justify-content:center;width:100%;margin:0;gap:20px;z-index:4}
.hero-bottom .text-link{padding:11px 23px;border:0;border-radius:30px;background:#244731;color:white;font-size:12px;line-height:1.5;gap:12px;box-shadow:none}
.hero-bottom .text-link span,.hero-edition,.hero-bottom .scroll-cue{display:none}
/* Story uses the same actual models for matching products; everything else is a photograph. */
.scroll-story{height:300svh;min-height:2280px;color:#edf3eb;background:var(--studio-dark)}
.story-sticky,body[data-mode="business"] .story-sticky{position:sticky;top:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:stretch;gap:18px;height:100svh;min-height:790px;padding:100px 6vw 28px;background:#10241e;isolation:isolate;overflow:hidden}
.story-atmosphere,.story-sticky::before,body[data-mode="business"] .story-sticky::before,.story-number,.story-caption,.story-visual::before,.story-visual::after{display:none;content:none}
.story-head{align-self:start;color:#829a89}.story-head .eyebrow{font-size:10px;font-weight:500;letter-spacing:.12em}.story-head>span{font-size:11px;color:#829a89}
.story-layout{display:flex;flex-direction:column;align-items:stretch;justify-content:start;width:100%;min-height:0;margin:0;padding:0;gap:6px}
.story-text{text-align:center;z-index:3}
.story-family{margin-bottom:12px;padding:0;border:0;color:#9eb797;font-size:10px;font-weight:500;letter-spacing:.17em;line-height:1.5}
.story-text h2{color:#eef4e9;font-size:clamp(33px,5vw,48px);font-weight:400;line-height:1.09;letter-spacing:-.055em}
.story-text>p{max-width:340px;margin:14px auto 17px;color:#a0b5a4;font-size:13px;line-height:1.6}
.story-text .dark{padding:10px 18px;border:1px solid #b1caa546;color:#d9e8d0;background:transparent;font-size:11px;line-height:1.4}
.story-text .dark:hover{background:#d9e8d011}
.story-visual{position:relative;align-self:stretch;width:100%;height:auto;min-height:300px;flex:1 1 340px;margin:2px 0 0;background:transparent;border:0;box-shadow:none;perspective:none;touch-action:pan-y;cursor:grab;outline-offset:5px}
.story-visual:focus-visible{outline:2px solid #a0ba92;border-radius:16px}
.story-product-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0;margin:0;padding:5px 0 24px;gap:0;background:none!important;border:0;border-radius:0;box-shadow:none;transform:none!important;transition:none;pointer-events:none}
.story-visual .story-product-frame img,.story-visual .story-product-frame img[data-product]{position:absolute;inset:0;width:100%!important;height:calc(100% - 24px)!important;max-width:100%!important;max-height:none;margin:0!important;padding:8px 10px;object-fit:contain;clip-path:none!important;transform:none;mix-blend-mode:normal;filter:none}
.story-product-frame span{position:absolute;inset:auto 0 0;width:100%;max-width:none;color:#97ad9b;font-size:10px;line-height:1.5;font-weight:400;letter-spacing:.02em;text-align:center;z-index:4}
.story-visual.models-ready .story-product-frame img{visibility:hidden}
.story-visual[data-model-state="photo"] .story-product-frame img{border-radius:12px}
.story-progress{align-self:end;margin:0;gap:20px;position:relative;z-index:5}
.story-progress button{padding:7px 0 0;color:#8fa494;font-size:11px;line-height:1.5}
.story-progress button[aria-pressed="true"]{color:#d7e7d0}
.story-progress button span{height:1px;margin-bottom:11px;background:#d5e7cb1c}.story-progress button span::before{background:#b5cba5}
.intro{background:white}.collection{background:#f7f8f4}.product-picture{background:#ecefe8;border-radius:10px}
.care-section{background:#eef1e9}.closing{background:#142a20}.closing-word{color:#254332}.site-footer{background:#f6f7f2}
@media(min-width:1000px){
 .hero-sticky{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:42px minmax(0,1fr) 88px;grid-template-areas:"mode stage" "copy stage" "foot controls";justify-items:stretch;column-gap:30px;row-gap:16px;min-height:700px;padding:125px 6vw 30px}
 .hero-topline{top:94px;right:6vw}.motion-toggle{display:flex;gap:9px;font-size:10px;color:#73846d}
 .audience-switch{justify-self:start}.audience-switch button{padding:7px 21px}
 .hero-copy{text-align:left;margin:0;padding:0 0 10px;align-self:center;max-width:610px}
 .hero-copy .eyebrow{margin-bottom:23px;font-size:10px;letter-spacing:.18em}
 .hero-copy h1{font-size:clamp(51px,4.7vw,76px);line-height:1.08;letter-spacing:-.062em}
 .hero-copy>p:last-child{margin:24px 0 0;max-width:390px;font-size:16px;line-height:1.7}
 .hero .product-orbit{min-height:380px}
 .hero-bottom{justify-content:flex-start;align-self:center}.hero-bottom .text-link{font-size:13px;padding:12px 25px}
 .studio-controls{gap:6px}.studio-product-name{font-size:12px}.model-hint{font-size:11px}.studio-buttons button{min-height:34px;font-size:11px}
 .story-sticky,body[data-mode="business"] .story-sticky{gap:25px;min-height:700px;padding:108px 7vw 34px}
 .story-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:50px}
 .story-text{text-align:left}.story-family{margin-bottom:26px;font-size:11px}
 .story-text h2{font-size:clamp(48px,4.5vw,72px);line-height:1.09}
 .story-text>p{margin:24px 0 28px;max-width:385px;font-size:16px;line-height:1.8}
 .story-text .dark{padding:13px 23px;font-size:13px}
 .story-visual{height:100%;min-height:420px;margin:0}.story-product-frame span{font-size:11px}
 .story-progress{gap:34px}.story-progress button{font-size:12px;padding-top:10px}
}
@media(max-width:760px){
 .site-header{height:62px;padding-inline:20px}.site-header .brand{gap:9px}.site-header .brand-mark{width:92px;height:23px}.site-header .whitecat-mark{width:40px;height:36px}
 .site-header nav{display:none}.site-header .selection-open{font-size:0;gap:0;padding:7px 10px}.site-header .selection-open::before{content:"Сонголт";font-size:11px;margin-right:7px}.site-header .selection-count{width:19px;height:19px;font-size:10px}
 .hero-sticky{padding:82px 20px 18px;grid-template-rows:34px auto minmax(280px,1fr) 82px 42px;min-height:745px}
 .hero-topline{top:74px;right:12px}
 .hero-copy h1{font-size:clamp(33px,9vw,47px)}.hero-copy .eyebrow{font-size:9px;margin-bottom:8px}
 .hero-copy>p:last-child{font-size:13px;line-height:1.5;margin-top:10px}
 .hero .product-orbit{width:calc(100% + 40px);justify-self:center}
 .studio-buttons{gap:4px}.studio-buttons button{padding-inline:9px;font-size:10px}.studio-buttons #studio-detail{margin-left:3px;padding-inline:12px}
 .scroll-story{height:290svh;min-height:2250px}
 .story-sticky,body[data-mode="business"] .story-sticky{min-height:790px;padding:88px 20px 24px;gap:15px}
 .story-head .eyebrow{font-size:9px;letter-spacing:.09em}.story-text h2{font-size:clamp(31px,8.3vw,39px)}
 .story-visual{min-height:290px}.story-progress{gap:17px}.story-progress button{font-size:10px}
}
@media(max-height:700px){
 .hero{height:auto;min-height:0}.hero-sticky{position:relative;height:auto;min-height:735px}
 .scroll-story{height:auto;min-height:0}.story-sticky,body[data-mode="business"] .story-sticky{position:relative;height:auto;min-height:790px}
 .story-visual{height:350px}
}
.no-motion .hero,.no-motion .scroll-story{height:auto;min-height:0}
.no-motion .hero-sticky,.no-motion .story-sticky{position:relative}
.no-motion .hero .product-orbit{height:100%;min-height:280px}
@media(prefers-reduced-motion:reduce){
 .hero,.scroll-story{height:auto;min-height:0}.hero-sticky,.story-sticky{position:relative}
 .studio-buttons button{transition:none}
}