/* Nine-card geometry: width stays below 2 × radius × tan(20deg), leaving a 16–20px tangent gap. */
/* Original CSS 3D cylinder; approved studio artwork remains untouched. */
.hero.coffee-barrel{min-height:800px;grid-template-columns:1fr 1.08fr;padding-bottom:100px}
.coffee-barrel .hero-copy{max-width:560px}
.coffee-barrel .hero-products{height:610px;min-width:0;align-self:center;margin:0;z-index:4}
.coffee-barrel .hero-products>[hidden]{display:none!important}
.coffee-barrel .barrel-gallery{height:100%;position:relative;color:#fff0d8;--barrel-radius:280px;--barrel-card-width:185px}
.barrel-stage{position:absolute;inset:5px -25px 85px;perspective:1400px;perspective-origin:50% 42%;isolation:isolate}
.barrel-ring{position:absolute;left:50%;top:47%;width:0;height:0;transform:translateZ(-80px) rotateX(-9deg);transform-style:preserve-3d}
.coffee-barrel .barrel-card{position:absolute;left:0;top:0;width:var(--barrel-card-width);padding:0;border:1px solid #ffe2ad66;background:#321d17;border-radius:9px;color:#ffeed8;min-height:0;line-height:1.3;transform:translate(-50%,-50%) rotateY(var(--card-angle)) translateZ(var(--barrel-radius));transform-style:preserve-3d;backface-visibility:hidden;box-shadow:0 18px 40px #1d0e1455;transition:opacity .7s,filter .7s,box-shadow .7s;overflow:hidden}
.barrel-artwork{display:block;aspect-ratio:3/4;overflow:hidden;position:relative;background:#47231c}
.barrel-artwork img{display:block;max-width:none!important;height:100%!important;object-fit:cover;pointer-events:none}
.barrel-artwork .barrel-sprite-image{width:200%!important;object-fit:fill}
.barrel-artwork[data-position=ground] .barrel-sprite-image{transform:translateX(-50%)}
.barrel-artwork .barrel-single-image{width:100%!important}
.barrel-card-caption{display:block;padding:10px 5px;font:9px/1.4 var(--sans);letter-spacing:.015em;text-align:center;background:linear-gradient(120deg,#3b2017,#5c2b1d)}
.barrel-card:focus-visible{outline:2px solid #ffdf9c;outline-offset:7px}
.barrel-card:hover{box-shadow:0 0 0 1px #ffd784,0 20px 50px #0005}
.barrel-hint{position:absolute;left:0;right:0;bottom:57px;text-align:center;color:#ffe1b0;font:8px/1.5 var(--sans);letter-spacing:.18em;margin:0}
.barrel-navigation{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:10px}
.coffee-barrel .barrel-navigation button{min-height:32px;width:32px;padding:0;border:1px solid #efcc914f;background:#47251888;border-radius:50%;color:#ffe4ba;font:17px/1 var(--sans);backdrop-filter:blur(8px)}
.barrel-navigation button:hover{background:#bc7b3444;border-color:#f5cb87}
.barrel-detail{position:absolute;left:50%;bottom:0;width:min(480px,105%);transform:translateX(-50%);padding:23px 29px 22px;background:linear-gradient(125deg,#331910f5,#5b2c1bf7);border:1px solid #d9ad6e88;border-radius:14px;box-shadow:0 20px 80px #24100866;z-index:20;backdrop-filter:blur(18px)}
.barrel-detail[hidden]{display:none!important}
.barrel-detail-kicker{font:8px/1.5 var(--sans);letter-spacing:.19em;color:#efc17d}
.coffee-barrel .barrel-detail h2{font:400 clamp(20px,2.1vw,29px)/1.15 var(--serif);letter-spacing:-.025em;color:#fff1d9;margin:9px 25px 10px 0}
.coffee-barrel .barrel-detail p{font:11px/1.65 var(--sans);color:#e7cfad;margin:8px 0}
.coffee-barrel .barrel-detail .barrel-detail-meta{color:#ffcb83;font-size:10px}
.barrel-buy{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:11px;margin-top:12px;border-top:1px solid #ffd49455;color:#fff0d7;font:600 11px/1.5 var(--sans)}
.barrel-buy span:last-child{font-size:25px;color:#ffc367}
.coffee-barrel .barrel-close{position:absolute;top:14px;right:14px;width:30px;min-height:30px;padding:0;background:#f6d49a15;border:1px solid #e8c69144;border-radius:50%;color:#fff1d9;font:20px/1 var(--sans)}
.has-selection .barrel-card:not(.is-selected){opacity:.18;filter:blur(1.5px);pointer-events:none}
.has-selection .barrel-card.is-selected{width:240px;transform:translate(-50%,-50%) translateZ(80px) rotateX(9deg);z-index:10;box-shadow:0 0 65px rgba(var(--magic-rgb,239,151,27),.28),0 20px 50px #0005;transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .7s;cursor:default}
.has-selection .barrel-stage{inset:0 -25px auto;height:390px}
.has-selection .barrel-ring{top:195px}
.has-selection .barrel-detail{top:405px;bottom:auto}
.coffee-barrel.is-barrel-selected .hero-products{height:740px}
.barrel-preview-label{position:absolute;top:16px;left:6vw;display:flex;gap:12px;align-items:center;z-index:8;color:#f6d9ae;font:8px/1.6 var(--sans);letter-spacing:.13em}
.barrel-preview-label a{text-decoration:underline;text-underline-offset:4px;letter-spacing:0;font-size:9px}
.has-selection .barrel-hint,.has-selection .barrel-navigation{visibility:hidden}
@media(min-width:1500px){.coffee-barrel .barrel-gallery{--barrel-radius:315px;--barrel-card-width:210px}}
@media(max-width:1100px) and (min-width:761px){.coffee-barrel .barrel-gallery{--barrel-radius:215px;--barrel-card-width:140px}.coffee-barrel .barrel-stage{perspective:900px}.hero.coffee-barrel{grid-template-columns:.95fr 1.05fr}.coffee-barrel .hero h1{font-size:clamp(52px,7vw,90px)}}
@media(max-width:760px){.hero.coffee-barrel{display:flex;flex-direction:column;min-height:0;padding-top:55px;padding-bottom:100px;gap:12px}.coffee-barrel .hero-copy{width:100%;position:relative;z-index:5}.coffee-barrel .hero-products{width:100%;height:540px;flex:none}.coffee-barrel .barrel-gallery{--barrel-radius:195px;--barrel-card-width:125px}.barrel-stage{inset:0 -20px 100px;perspective:850px}.barrel-detail{width:100%;padding:18px 23px}.coffee-barrel .barrel-detail h2{font-size:23px}.has-selection .barrel-card.is-selected{width:190px;transform:translate(-50%,-50%) translateZ(80px) rotateX(9deg)}.has-selection .barrel-stage{height:330px}.has-selection .barrel-ring{top:165px}.has-selection .barrel-detail{top:345px}.barrel-hint{font-size:7px;letter-spacing:.1em}.barrel-preview-label{font-size:7px;gap:9px}}
@media(max-width:400px){.coffee-barrel .barrel-gallery{--barrel-radius:170px;--barrel-card-width:108px}.coffee-barrel .hero-products{height:510px}.coffee-barrel.is-barrel-selected .hero-products{height:740px}.barrel-stage{perspective:800px}}
@media(prefers-reduced-motion:reduce){.coffee-barrel .barrel-card,.has-selection .barrel-card.is-selected{transition:none}}