/* Espresso, parchment and copper: an isolated art-direction study. */
.hero.hero-atelier{isolation:isolate;background-color:#231713}
.hero-atelier .hero-landscape{background-size:cover;background-position:center 42%}
.hero-atelier .hero-landscape:after{content:none}
.hero.hero-atelier:before{background:linear-gradient(90deg,rgba(43,23,14,.94),rgba(63,30,14,.67) 38%,rgba(63,30,14,.12) 80%),linear-gradient(0deg,#351e17b3,transparent 50%);opacity:1}
.hero-atelier .hero-copy{position:relative;z-index:3}
.hero-atelier h1{color:#fff8e9;font-size:clamp(68px,7.6vw,110px);line-height:1.02;letter-spacing:-.045em;text-shadow:0 2px 22px #24160e38;font-weight:400;text-wrap:balance}
.hero-atelier h1 em{display:block;color:#ffd06a;background:linear-gradient(110deg,#ffe6a1 3%,#ffd064 48%,#eca733 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.04em;margin-top:9px;font-weight:400}
.hero-atelier .hero-copy>p{color:#f0e1ca;max-width:350px;font-size:14px;line-height:1.85;text-shadow:0 1px 12px #1c130c55}
.hero-atelier .hero-copy .eyebrow{color:#ffda8a;letter-spacing:.18em;font-weight:500}
.hero-atelier .hero-copy .button{background:linear-gradient(115deg,#ffbd36,#ed971b 70%,#e78a15);color:#3b210b;border-color:#f5af2e;box-shadow:0 7px 28px #d687151a}
.hero-atelier .hero-copy .button:hover{background:linear-gradient(115deg,#ffd25b,#f6a423 70%,#ef971b);box-shadow:0 9px 32px #eb9c2929}
.hero-atelier .barrel-gallery:before{content:'';position:absolute;left:10%;right:10%;top:62%;height:65px;background:radial-gradient(ellipse,rgba(205,136,69,.27),transparent 68%);filter:blur(19px);pointer-events:none}
.hero-atelier .barrel-card{padding:5px;border:1px solid #ead3ae66;background:rgba(226,210,183,.23);border-radius:5px;box-shadow:0 25px 38px #10090855;filter:none;transition:filter .7s,opacity .7s,box-shadow .7s;cursor:grab;touch-action:pan-y;user-select:none}
.hero-atelier .barrel-artwork{background:rgba(241,230,207,.14);aspect-ratio:3/4;border-radius:2px}
.hero-atelier .barrel-artwork img{opacity:1;transition:opacity .5s;user-select:none;-webkit-user-drag:none}
.hero-atelier .barrel-card:hover .barrel-artwork img,.hero-atelier .barrel-card.is-selected .barrel-artwork img{opacity:1}
.hero-atelier .barrel-card-caption{padding:11px 3px 5px;background:none;color:#f4e8d3;font:500 9px/1.5 var(--sans);letter-spacing:.04em}
.hero-atelier .barrel-stage{cursor:grab;touch-action:pan-y;user-select:none}
.hero-atelier .is-dragging .barrel-stage,.hero-atelier .is-dragging .barrel-card{cursor:grabbing}
.hero-atelier .barrel-card:hover{filter:brightness(1);box-shadow:0 0 0 1px #e6c497,0 24px 45px #0e070aaa}
.hero-atelier .has-selection .barrel-card:not(.is-selected){opacity:.12;filter:brightness(.5) blur(2px)}
.hero-atelier .has-selection .barrel-card.is-selected{filter:none;box-shadow:0 0 65px rgba(var(--barrel-magic-rgb),.14),0 28px 65px #10090988}
.hero-atelier .barrel-detail{background:linear-gradient(125deg,#f7ecd7,#e9d8b8);border:1px solid #cda772;border-radius:5px;padding:23px 28px;box-shadow:0 20px 65px #140b0966;backdrop-filter:none}
.hero-atelier .barrel-detail-kicker{color:#9a6a40;letter-spacing:.18em}
.hero-atelier .barrel-detail h2{color:#3b231b;font-size:38px;margin:8px 28px 9px 0}
.hero-atelier .barrel-detail p{color:#76583d;line-height:1.7}
.hero-atelier .barrel-detail .barrel-detail-meta{color:#7a3c2d;font-size:10px;letter-spacing:.04em}
.hero-atelier .barrel-buy{color:#63291f;border-color:#cdb38c;font-size:12px}
.hero-atelier .barrel-buy span:last-child{color:#792a23}
.hero-atelier .barrel-close{background:#b8956414;border-color:#a77b4455;color:#613e2b}
.hero-atelier .barrel-navigation button{width:32px;min-height:32px;background:#eed9b812;border-color:#d8af7559;color:#e4c89e}
.hero-atelier .barrel-navigation .atelier-playback{display:grid;place-items:center;background:#eed9b812;box-shadow:none}
.atelier-playback svg{display:block;width:17px;height:17px;pointer-events:none}
.hero-atelier .barrel-navigation .atelier-playback:before,.hero-atelier .barrel-navigation .atelier-playback:after{content:none}
.hero-atelier .barrel-hint{color:#c1a27f;letter-spacing:.22em}
.hero-atelier .barrel-aroma-aura{opacity:.6}
.hero-atelier .barrel-aroma-world canvas{opacity:.62}
.hero-atelier .barrel-aroma-steam{opacity:.35}
.atelier-preview{position:absolute;left:6vw;top:17px;z-index:8;display:flex;gap:14px;align-items:center;color:#c9ac89;font:8px/1.5 var(--sans);letter-spacing:.16em}
.atelier-preview a{color:#e3c49c;text-decoration:underline;text-underline-offset:4px;letter-spacing:0;font-size:10px}
.atelier-preview{flex-wrap:wrap;row-gap:6px}
.atelier-preview select{font:10px/1.4 var(--sans);min-height:28px;padding:4px 24px 4px 8px;border:1px solid #e8c79b55;border-radius:3px;color:#f0dec4;background:#342219aa;letter-spacing:0;max-width:145px}
.hero-atelier[data-finish=bronze] .barrel-card{background:#533e2d66;border-color:#d0a47277;box-shadow:0 22px 36px #160c0755;filter:none}
.hero-atelier[data-finish=bronze] .barrel-artwork img{opacity:1}
.hero-atelier[data-finish=minimal] .barrel-card{padding:0;background:none;border-color:transparent;box-shadow:none}
.hero-atelier[data-finish=minimal] .barrel-card-caption{padding:12px 3px 5px}
.hero-atelier[data-finish=minimal] .barrel-artwork img{opacity:1}
.hero-atelier:has(.barrel-navigation:hover) .hero-cursor-warmth:after,.hero-atelier:has(.barrel-detail:hover) .hero-cursor-warmth:after{opacity:0}
@media(max-width:760px){
 .hero-atelier .hero-landscape:after{content:none}
 .hero.hero-atelier:before{background:linear-gradient(180deg,#2a180fe8,#542b16a6 50%,#60371533),linear-gradient(0deg,#371b17cc,transparent 40%)}
 .hero-atelier h1{font-size:clamp(52px,14.2vw,70px);line-height:1.03;letter-spacing:-.04em}
 .hero-atelier .hero-copy>p{font-size:13px;line-height:1.8;max-width:310px}
 .hero-atelier .barrel-stage{overflow:hidden;inset:0 -6vw 100px;perspective:1000px;touch-action:pan-y}
 .hero-atelier .barrel-ring{transform:none;top:47%;width:0;height:0}
 .hero-atelier .barrel-card{width:170px;transform:translate(calc(-50% + var(--mobile-x,0px)),-50%) scale(var(--mobile-scale,1)) rotateY(var(--mobile-yaw,0deg));opacity:var(--mobile-opacity,1);backface-visibility:visible}
 .hero-atelier .has-selection .barrel-stage{overflow:visible;inset:0 -20px auto;height:330px}
 .hero-atelier .has-selection .barrel-ring{top:165px;transform:none}
 .hero-atelier .has-selection .barrel-card.is-selected{width:190px;transform:translate(-50%,-50%);opacity:1}
 .hero-atelier .barrel-detail h2{font-size:32px}
 .hero-atelier .barrel-detail{padding:21px 23px}
 .hero-atelier .hero-products{height:480px}
 .hero-atelier.is-barrel-selected .hero-products{height:680px}
 .hero-atelier .barrel-artwork{aspect-ratio:3/4}
}
@media(prefers-reduced-motion:reduce){.hero-atelier .barrel-card{transition:none}}
.hero-atelier .barrel-card{background:var(--studio-frame,rgba(226,210,183,.23))!important}
.hero-atelier .barrel-artwork img,.hero-atelier .barrel-card:hover .barrel-artwork img,.hero-atelier .barrel-card.is-selected .barrel-artwork img{opacity:var(--studio-art,1)!important}
.barrel-studio{position:absolute;top:100%;left:0;right:0;z-index:7;margin:0 auto;max-width:430px;color:#f7e6c9;font:12px/1.5 var(--sans);text-align:left}
.barrel-studio summary{cursor:pointer;padding:10px 14px;border:1px solid #d8b47d66;border-radius:5px;background:#382216ee}
.barrel-studio summary span{float:right;color:#d9b47c;font-size:9px;text-transform:uppercase}
.barrel-studio>div{padding:16px;background:#2c1c16fa;border:1px solid #d8b47d66;border-radius:5px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.barrel-studio label{display:flex;flex-direction:column;gap:7px}.barrel-studio label:first-child,.barrel-studio p{grid-column:1/-1}
.barrel-studio select,.barrel-studio button{min-height:38px;padding:8px;color:#f7e6c9;background:#54372a;border:1px solid #bb9363;border-radius:3px;font:inherit;width:100%}
.barrel-studio input[type=range]{width:100%;accent-color:#efac42;min-height:24px}.barrel-studio input[type=color]{width:100%;height:38px;border:1px solid #bb9363;background:transparent;padding:3px}
.barrel-studio output{color:#f3c470}.barrel-studio p{margin:0;font-size:10px;color:#d4bc9f}


/* Keep the experiment panel outside the hero clipping/stacking context. */
.barrel-studio{position:fixed;top:auto;left:20px;right:auto;bottom:20px;width:min(350px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;z-index:99999;margin:0;box-shadow:0 15px 60px #170c0866;border-radius:5px}
.barrel-studio>div{max-height:calc(100dvh - 110px);overflow:auto}
.hero-atelier .barrel-card-caption{color:var(--studio-caption,#f4e8d3)}
.hero-atelier .barrel-detail h2{color:var(--studio-detail,#3b231b)}
.hero-atelier .barrel-detail p{color:var(--studio-detail,#76583d)}
.hero-atelier .barrel-detail .barrel-detail-meta{color:var(--studio-detail,#7a3c2d)}
.hero-atelier .barrel-detail-kicker{color:var(--studio-detail,#9a6a40)}
.hero-atelier .barrel-buy,.hero-atelier .barrel-buy span:last-child{color:var(--studio-detail,#63291f)}

/* Real alpha product art exposes this independently coloured card surface. */
.hero-atelier .barrel-artwork{background:var(--studio-background,rgba(226,210,183,.23));transition:background-color .18s}
.hero-atelier[data-finish=minimal] .barrel-artwork{background:var(--studio-background,transparent)}
.hero-atelier .barrel-artwork img{filter:drop-shadow(0 7px 6px #1b0b0833)}
/* Studio geometry retains responsive sizes and expands radius with card count. */
.hero-atelier .barrel-stage{translate:0 var(--studio-y,0px)}
.hero-atelier .barrel-ring{transform:translateZ(-80px) rotateX(var(--studio-tilt,-9deg))}
.hero-atelier .barrel-gallery{--studio-base-width:185px;--studio-base-radius:280px;--barrel-card-width:calc(var(--studio-base-width)*var(--studio-size,1));--barrel-radius:calc(var(--studio-base-radius)*var(--studio-size,1)*var(--studio-gap,1)*var(--studio-density,1))}
.hero-atelier .barrel-card{border-width:var(--studio-border,1px);border-color:var(--studio-border-colour,#ead3ae);border-radius:var(--studio-corner,5px)}
.hero-atelier .barrel-aroma-world canvas{opacity:var(--studio-magic,.62)}
.barrel-studio{width:min(350px,calc(100vw - 40px))}
@media(min-width:1500px){.hero-atelier .barrel-gallery{--studio-base-width:210px;--studio-base-radius:315px}}
@media(max-width:1100px) and (min-width:761px){.hero-atelier .barrel-gallery{--studio-base-width:140px;--studio-base-radius:215px}}
@media(max-width:760px){.hero-atelier .barrel-ring{transform:none}.hero-atelier .barrel-card{width:calc(170px*var(--studio-size,1))}}

/* Approved polish: borders deliberately retain the user's exact settings. */
.hero-atelier .barrel-card-caption{font-size:11px;line-height:1.55;font-weight:500;text-shadow:0 1px 4px #170c0870;padding:11px 4px 7px;letter-spacing:.02em}
.hero-atelier .has-selection .barrel-card.is-selected{transition:opacity .6s,filter .6s,box-shadow .7s}
.hero-atelier .barrel-detail{background:linear-gradient(125deg,#321d17ef,#4a2d20e8);backdrop-filter:blur(20px);box-shadow:0 20px 65px #140b0966;animation:barrel-detail-arrive .5s ease both}
.hero-atelier .barrel-detail h2,.hero-atelier .barrel-detail p,.hero-atelier .barrel-detail .barrel-detail-meta,.hero-atelier .barrel-detail-kicker,.hero-atelier .barrel-buy,.hero-atelier .barrel-buy span:last-child{color:var(--studio-detail,#f1e1c7)}
.hero-atelier .barrel-close{color:#f5e3c8;background:#ead0a512;border-color:#d3ac744d}
@keyframes barrel-detail-arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:760px){.hero-atelier .barrel-card-caption{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){.hero-atelier .barrel-detail{animation:none}}

/* One bounded scroll area: every Studio control remains reachable in the iframe. */
.barrel-gallery[hidden],.hero-products>[hidden]{display:none!important}
.barrel-studio{top:16px;bottom:auto;max-height:calc(100dvh - 32px);overflow:hidden}
.barrel-studio[open]{display:flex;flex-direction:column}
.barrel-studio>summary{flex:0 0 auto}
.barrel-studio>div{flex:1 1 auto;min-height:0;max-height:calc(100dvh - 86px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:24px}
.barrel-studio label:has(select[aria-label="Hero layout"]){grid-column:1/-1}
.hero[data-hero-layout="original"] .hero-products{z-index:3}