/* Studio only: one shared column system for image, purchasing and tea description. */
.tea-detail[data-layout=studio]{--paper:#e7e1d8;--ink:#f0ede5;--sub:#c2c3b8;--rule:#ece7dd33;background:#090d09;color:var(--ink);position:relative;isolation:isolate;min-height:100dvh}
.studio-background{position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#0005,#0008),url('assets/wuyishan-forest.jpg') center center/cover no-repeat;opacity:.55}
[data-layout=studio] main{max-width:1232px;padding-inline:clamp(22px,5vw,80px)}

[data-layout=studio] .tea-detail-header .navigation{background:#080c08d9}
[data-layout=studio] .breadcrumb{padding-block:26px}
[data-layout=studio] .product-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;gap:clamp(32px,6vw,92px);align-items:start;padding:12px 0 64px}
[data-layout=studio] .leaf{grid-column:1;grid-row:1;justify-self:start;align-self:start;width:100%;max-width:none}
[data-layout=studio] .leaf-zoom{background:#10120e;border:1px solid var(--rule)}
[data-layout=studio] .studio-information{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:32px}
[data-layout=studio] .identity{padding:0;min-width:0}
[data-layout=studio] .identity .eyebrow{margin:0 0 20px}
[data-layout=studio] h1{font-size:clamp(42px,4.6vw,66px);line-height:1.08}
[data-layout=studio] .translation{margin:20px 0 0;line-height:1.7}
[data-layout=studio] .purchase{max-width:none;margin:0}
[data-layout=studio] .tea-facts{margin:0 0 28px}
[data-layout=studio] .tea-facts>div{padding-block:16px}
[data-layout=studio] .purchase-link{color:#151811;background:#e7e1d8;min-height:56px}
[data-layout=studio] .purchase-link:hover{color:#151811}
[data-layout=studio] .purchase-note{max-width:none;line-height:1.8}
[data-layout=studio] .afterword{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,92px);padding:52px 0 68px}
[data-layout=studio] .reading{max-width:none;min-width:0;font-size:14px;line-height:1.9}
[data-layout=studio] .reading>p{margin-top:0}
[data-layout=studio] .detail-footer{background:#080c0870}
[data-layout=studio] .photo-dialog{color:#222}
@media(max-width:760px){
 [data-layout=studio] .product-composition{display:flex;flex-direction:column;gap:28px;padding-bottom:40px}
 [data-layout=studio] .studio-information{display:contents}
 [data-layout=studio] .identity{order:0;width:100%}
 [data-layout=studio] .leaf{order:1;max-width:440px;align-self:center}
 [data-layout=studio] .purchase{order:2;width:100%}
 [data-layout=studio] h1{font-size:clamp(40px,10vw,62px)}
 [data-layout=studio] .afterword{grid-template-columns:1fr;gap:28px;padding:36px 0 48px}
 [data-layout=studio] .breadcrumb{padding-block:22px}
 .studio-background{background-position:48% center}
}
/* Brewing disclosures share the existing shipping accordion treatment. */
[data-layout=studio] .guide-content{padding-top:6px}
[data-layout=studio] .brew-facts{margin:18px 0;font-size:12px}
[data-layout=studio] .brew-facts>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;border-bottom:1px solid var(--rule);padding:12px 0}
[data-layout=studio] .brew-facts dt{color:var(--sub)}
[data-layout=studio] .brew-facts dd{margin:0;text-align:right;overflow-wrap:anywhere}
[data-layout=studio] .ratio-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:12px}
[data-layout=studio] .ratio-table caption{text-align:left;color:var(--sub);padding-bottom:10px;font-size:11px}
[data-layout=studio] .ratio-table th,[data-layout=studio] .ratio-table td{padding:10px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400}
[data-layout=studio] .ratio-table th:last-child,[data-layout=studio] .ratio-table td:last-child{text-align:right}
[data-layout=studio] .guide-note{font-size:11px}
/* Product information opens directly beneath the purchase button. */
[data-layout=studio] .purchase-accordions{margin-top:24px;font-size:12px;line-height:1.85;min-width:0}
[data-layout=studio] .purchase-accordions details{border-top:1px solid var(--rule);padding:18px 0}
[data-layout=studio] .purchase-accordions details:last-child{border-bottom:1px solid var(--rule)}
[data-layout=studio] .purchase-accordions details p{color:var(--sub)}
[data-layout=studio] .purchase-accordions summary{min-height:24px;align-items:center;gap:20px}
[data-layout=studio] .purchase-accordions summary span{flex-shrink:0}
/* Origin story and map follow the photograph, sharing its column alignment. */
[data-layout=studio] .origin-section{align-items:start}
[data-layout=studio] .origin-location{min-width:0}
[data-layout=studio] .origin-place{font-size:11px;line-height:1.7;color:var(--sub);margin:22px 0 28px}
[data-layout=studio] .origin-map{margin:0;min-width:0}
[data-layout=studio] .origin-map iframe{display:block;width:100%;height:340px;max-height:65vh;border:1px solid var(--rule);background:#d8d7ce;color-scheme:light}
[data-layout=studio] .origin-map figcaption{flex-wrap:wrap;font-size:10px;line-height:1.6;padding-top:14px}
[data-layout=studio] .map-note{font-size:10px;line-height:1.7;color:var(--sub);margin:14px 0 0;max-width:48ch}
[data-layout=studio] .origin-story h3{font-size:15px;font-weight:400;line-height:1.5;margin:28px 0 12px;color:var(--ink)}
[data-layout=studio] .origin-story h3:first-child{margin-top:0}
[data-layout=studio] .origin-story p{margin:0 0 20px}
[data-layout=studio] .origin-story .origin-sources{border-top:1px solid var(--rule);padding-top:20px;margin:28px 0 0;font-size:10px;line-height:1.9;color:var(--sub)}
[data-layout=studio] .origin-sources a{display:block;text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){[data-layout=studio] .origin-map iframe{height:300px}[data-layout=studio] .origin-story{margin-top:8px}}
[data-layout=studio] .map-image-link{display:block;border:1px solid var(--rule);background:#e7e1d5}
[data-layout=studio] .map-image-link:hover{opacity:1}
[data-layout=studio] .location-map-image{display:block;width:100%;height:auto;max-height:none}
/* Minimal inline diagram: transparent, non-interactive white outlines only. */
[data-layout=studio] .origin-diagram{margin:28px 0 0;width:100%;background:none;border:0;pointer-events:none}
[data-layout=studio] .origin-diagram svg{display:block;width:100%;height:auto;overflow:visible}



[data-layout=studio] h1{font-size:clamp(36px,3.9vw,54px);overflow-wrap:normal}
@media(max-width:760px){[data-layout=studio] h1{font-size:clamp(32px,8.5vw,54px)}[data-layout=studio] h1 span{display:block}}

/* A compact selection below the origin story, before the footer. */
[data-layout=studio] .tea-recommendations{border-top:1px solid var(--rule);padding:48px 0 64px}
[data-layout=studio] .recommendations-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
[data-layout=studio] .recommendations-heading .eyebrow{margin-bottom:14px}
[data-layout=studio] .recommendations-heading h2{font-size:clamp(26px,3vw,38px)}
[data-layout=studio] .recommendations-heading>a{font-size:11px;white-space:nowrap;line-height:1.8}
[data-layout=studio] .recommendations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,5vw,72px)}
[data-layout=studio] .recommendation-card{display:block;min-width:0}
[data-layout=studio] .recommendation-card figure{margin:0;background:#e7e1d8;aspect-ratio:1;overflow:hidden}
[data-layout=studio] .recommendation-card img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
[data-layout=studio] .recommendation-card:hover{opacity:1}
[data-layout=studio] .recommendation-card:hover img{transform:scale(1.025)}
[data-layout=studio] .recommendation-copy{padding-top:17px}
[data-layout=studio] .recommendation-copy>span{font-size:10px;color:var(--sub);letter-spacing:.06em}
[data-layout=studio] .recommendation-copy h3{font-size:17px;font-weight:400;margin:8px 0 12px;line-height:1.35}
[data-layout=studio] .recommendation-copy p{font-size:10px;color:var(--sub);line-height:1.7;margin:0}
@media(max-width:600px){[data-layout=studio] .recommendations-heading{align-items:start;flex-direction:column;gap:16px}[data-layout=studio] .recommendations-grid{grid-template-columns:1fr;gap:32px;max-width:360px;margin-inline:auto}[data-layout=studio] .tea-recommendations{padding:36px 0 48px}}
@media(prefers-reduced-motion:reduce){[data-layout=studio] .recommendation-card img{transition:none}[data-layout=studio] .recommendation-card:hover img{transform:none}}