/* Olimp 7 - shop.html (28.09.2026). Typography, colours and header/footer come from olimp-story.css. */
.sp-page .st-header{background:var(--studio)}
.sp-page .st-header.is-solid{box-shadow:0 1px 0 var(--line)}
.sp-page .st-nav a[aria-current="page"]{background-size:100% 1px}
.sp-page main{padding-top:68px}
.sp-wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sp-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(14px,2vw,28px)}
/* intro */
.sp-intro{padding-top:clamp(28px,6vh,72px);padding-bottom:clamp(40px,6vh,72px);align-items:center}
.sp-intro-copy{grid-column:1/span 6}
.sp-h1{font-size:clamp(4rem,10.4vw,9.6rem);max-width:none}
.sp-intro .st-lead{margin:24px 0 32px;max-width:31ch;color:var(--soft)}
.sp-intro-media{grid-column:7/span 6;margin:0;background:#4a3a40}
.sp-intro-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;max-height:calc(100vh - 140px)}
/* the choice */
.sp-choose{padding-top:clamp(32px,5vh,60px);padding-bottom:clamp(44px,6.5vh,84px)}
.sp-choose-head,.sp-pair{max-width:1000px;margin-left:auto;margin-right:auto}
.sp-choose-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 40px;margin-bottom:clamp(28px,5vh,56px)}
.sp-choose-head .st-h2{margin:0}
.sp-choose-head p{margin:0;max-width:36ch;color:var(--soft)}
.sp-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3.2vw,52px);align-items:start}
.sp-bottle{display:flex;flex-direction:column;min-width:0}
.sp-stage{display:block;overflow:hidden;background:linear-gradient(#e2e2e1,#d3d2d0);line-height:0}
.sp-stage img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sp-bottle:hover .sp-stage img{transform:scale(1.025)}
.sp-vol{position:relative;font-family:var(--display);font-weight:380;font-size:clamp(3.2rem,7.6vw,7.8rem);line-height:.8;letter-spacing:-.01em;margin:-.2em 0 0 .05em;color:var(--ink)}
.sp-vol small{font-size:.34em;margin-left:.14em;letter-spacing:0}
.sp-name{font:600 1.08rem/1.35 var(--text);margin:16px 0 6px}
.sp-name a{text-decoration:none}
.sp-name a:hover{text-decoration:underline;text-underline-offset:.2em}
.sp-for{margin:0;color:var(--soft);max-width:34ch}
.sp-for b{color:var(--ink);font-weight:600}
.sp-buy{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:16px}
.sp-price{font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,3.3vw,3rem);line-height:1;margin:0;min-width:3.6ch}
.sp-bottle .st-textlink{align-self:flex-start;margin-top:14px;font-size:.96rem}
.l-short{display:none}
@media (hover:hover) and (min-width:601px){.sp-bottle{transition:opacity .45s ease}.sp-pair:hover .sp-bottle:not(:hover){opacity:.62}}
/* origin band */
.sp-origin{background:var(--copper);color:#f4e6da}
.sp-origin-in{padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(56px,8vh,96px);align-items:center}
.sp-origin-media{grid-column:1/span 5;margin:0}
.sp-origin-media img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:#4b3a2c}
.sp-origin-media figcaption{margin-top:12px;font-size:.95rem;color:rgba(244,230,218,.86)}
.sp-origin-copy{grid-column:7/span 6}
.sp-facts{margin:30px 0 0;border-top:1px solid rgba(244,230,218,.22)}
.sp-facts div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:4px 24px;padding:17px 0;border-bottom:1px solid rgba(244,230,218,.22)}
.sp-facts dt{font-weight:600}
.sp-facts dd{margin:0;color:rgba(244,230,218,.8)}
.sp-origin .st-textlink{margin-top:28px}
/* use */
.sp-use{padding-top:clamp(44px,6.5vh,84px);padding-bottom:clamp(32px,5vh,60px);align-items:center}
.sp-use-copy{grid-column:1/span 5;grid-row:1}
.sp-use-copy>p{color:var(--soft);margin:20px 0 0}
.sp-use-media{grid-column:7/span 6;grid-row:1;margin:0;background:#8c8c8c}
.sp-use-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
/* faq */
.sp-faq .st-textlink{margin-top:26px}
@media (max-width:900px){
 .sp-page main{padding-top:64px}
 .sp-intro,.sp-origin-in,.sp-use{display:block}
 .sp-intro-media,.sp-use-media{margin-top:30px}
 .sp-origin-in{padding-top:56px;padding-bottom:72px}
 .sp-intro-media img{max-height:none}
 .sp-origin-copy{margin-top:38px}
 .sp-facts div{grid-template-columns:1fr}
}
@media (max-width:600px){
 .sp-pair{gap:12px}
 .sp-vol{font-size:3.2rem;margin-top:-.18em}
 .sp-name{font-size:.95rem;margin-top:12px}
 .sp-for span{display:none}
 .sp-for{font-size:.95rem}
 .sp-buy{flex-direction:column;align-items:stretch;gap:10px;margin-top:14px}
 .sp-price{font-size:1.95rem}
 .sp-buy .st-btn{min-height:48px;padding:0 10px;font-size:.98rem}
 .l-long{display:none}.l-short{display:inline}
 .sp-bottle .st-textlink{font-size:.9rem}
}