/* Product visualization — page-specific sections (kit styles in service-page.css). */

/* One bottle, four worlds */
.sv-worlds{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:28px;padding:40px var(--sv-pad) 170px}
.sv-worlds-head{grid-column:1/6;grid-row:1}
.sv-worlds-head h2{font-size:clamp(40px,4.6vw,70px);line-height:1;margin:18px 0 26px}
.sv-worlds-head p:last-child{font:16px/1.6 var(--display);color:var(--sv-soft);max-width:400px}
.sv-packshot{grid-column:1/4;grid-row:2;align-self:end;margin:0}
.sv-packshot img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;background:#fff}
.sv-packshot figcaption,.sv-detail-inner figcaption{font:13px/1.4 var(--sans);color:var(--sv-muted);margin-top:12px}
.sv-packshot figcaption span{color:var(--sv-fg);margin-right:8px}
.sv-world{grid-column:6/13;grid-row:1/3}
.sv-world-frame{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:color-mix(in srgb,currentColor 8%,transparent)}
.sv-world-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-world-frame img:not(.is-active){scale:1.05}
.sv-world-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sv-world-note{font:14px/1.4 var(--display);color:var(--sv-soft);margin-top:14px;min-height:1.4em}
.sv-worlds-link{grid-column:6/13}

/* Detail: the Liquid Aroma exploded view (4:5 film) beside the copy, the inside of the Signal ring below the copy */
.sv-detail{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;padding:40px var(--sv-pad) 170px}
.sv-exploded{grid-column:1/6;grid-row:1/3;align-self:start;margin:0;border-radius:14px;overflow:hidden;background:#d8586c}
.sv-exploded video{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.sv-detail-copy{grid-column:7/13;grid-row:1;align-self:end}
.sv-detail-copy>*{max-width:520px}
.sv-detail-copy h2{font-size:clamp(36px,4vw,62px);line-height:1.04;margin:16px 0 20px}
.sv-detail-copy p:last-child{font:16px/1.6 var(--display);color:var(--sv-soft)}
.sv-detail-inner{grid-column:8/13;grid-row:2;align-self:start;margin:80px 0 0}
.sv-detail-inner img{display:block;width:100%;height:auto;border-radius:12px}

@media(max-width:760px){
 .sv-worlds{display:flex;flex-direction:column;padding-bottom:110px}
 .sv-worlds-head{order:1}.sv-world{order:2;margin-top:36px}.sv-packshot{order:3;width:58%;margin:32px 0 0}.sv-worlds-link{order:4;margin-top:28px}
 .sv-worlds-head h2{font-size:40px}
 .sv-detail{display:flex;flex-direction:column;padding-bottom:110px}
 .sv-exploded{width:84%}
 .sv-detail-copy{margin-top:36px}
 .sv-detail-copy h2{font-size:36px}
 .sv-detail-inner{width:70%;margin:48px 0 0 auto}
}