/* Bourbon site layer -- sits on top of shared koval.css design system.
   Uses koval.css tokens (var(--font-*), var(--koval-*)); only bourbon-specific layout here. */

main{flex:1 0 auto;}
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
body{color:#212529;font-family:var(--font-serif);}

h1,h2,h3{font-family:var(--font-heading);color:var(--koval-gray);font-weight:400;line-height:1.2;margin:0 0 20px;}
h4,h5,h6{font-family:var(--font-sans);color:#2d2e33;font-weight:500;text-transform:uppercase;letter-spacing:2px;line-height:1.4;margin:0 0 20px;}
h4{font-size:20px;} h5{font-size:16px;} h6{font-size:11px;}
main h1{font-size:42px;} main h2{font-size:32px;} main h3{font-size:25px;}
p{margin-bottom:1rem;}

/* Header: white, image logo left, grey 11px Montserrat nav right (original kovalbourbon spec) */
header.site{background:#fff;min-height:80px;display:flex;align-items:center;position:sticky;top:0;z-index:100;}
header.site .container{max-width:1340px;}
header.site .bar{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px;flex-wrap:nowrap;}
.brand{display:inline-flex;align-items:center;}
.brand-logo{height:33px;width:auto;max-width:none;display:block;}
nav.main{display:flex;align-items:center;gap:20px;flex-wrap:nowrap;}
nav.main a{color:#b4b5ba;font-family:var(--font-sans);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:2px;text-decoration:none;min-height:80px;display:inline-flex;align-items:center;transition:color .1s ease-in-out;white-space:nowrap;}
nav.main a:hover,nav.main a.active{color:var(--koval-gray);}
@media (max-width:980px){header.site .bar{flex-wrap:wrap;}}

footer.site{background:#fff;border-top:1px solid var(--koval-border);color:var(--koval-muted);padding:30px 0;text-align:center;font-family:var(--font-sans);font-size:12px;letter-spacing:1px;text-transform:uppercase;}

main{padding:0;}
main>.container{padding-top:50px;padding-bottom:50px;}

/* Hero (media only) */
.hero{position:relative;height:88vh;min-height:480px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#1a1410;background-size:cover;background-position:center;}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero-scrim{position:absolute;inset:0;background:rgba(20,16,12,.20);z-index:1;}
.hero-overlay{position:relative;z-index:2;text-align:center;padding:24px;}
.hero-overlay h1{color:#fff;font-family:var(--font-heading);font-size:clamp(2rem,5vw,3.4rem);margin:0;text-shadow:0 2px 24px rgba(0,0,0,.55);}

/* Band statement */
.band{padding:80px 0;}
.band-inner{max-width:900px;margin:0 auto;text-align:center;}
.band-inner h5{font-family:var(--font-sans);color:#2d2e33;font-weight:500;font-size:16px;line-height:1.4;text-transform:uppercase;letter-spacing:2px;margin:0 0 20px;}
.band-inner h6,.band-inner p{font-family:var(--font-sans);color:#2d2e33;font-weight:500;font-size:11px;line-height:1.4;text-transform:uppercase;letter-spacing:2px;margin:0 0 20px;max-width:none;}

.section-text{padding:64px 0;}
.section-text p{max-width:none;}
.center{text-align:center;}

/* Full-width parallax bg with content panel */
.bg-reveal{position:relative;min-height:80vh;display:flex;align-items:center;padding:72px 0;background-size:cover;background-position:center;}
@media(min-width:900px){.bg-reveal{background-attachment:fixed;}}
.bg-reveal .panel{background:rgba(255,255,255,.94);padding:40px 36px;max-width:680px;box-shadow:0 8px 34px rgba(0,0,0,.22);}
.bg-reveal .panel--center{margin:0 auto;}
.bg-reveal .panel--left{margin:0;}
.bg-reveal .panel--bare{background:none;box-shadow:none;padding:0;max-width:760px;}
.bg-reveal .panel h2{margin-top:0;}
.bg-reveal .panel p{max-width:none;}

/* Overlay cards (grains) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:30px;}
.card-overlay{margin:0;}
.card-media{position:relative;overflow:hidden;border-radius:10px;}
.card-media img{width:100%;max-width:none;height:320px;object-fit:cover;margin:0;display:block;}
.card-media figcaption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(45,46,51,.55);opacity:0;transition:opacity .25s;}
.card-media figcaption span{color:#fff;font-family:var(--font-sans);font-size:20px;font-weight:500;text-transform:uppercase;letter-spacing:2px;}
.card-overlay:hover .card-media figcaption{opacity:1;}
.card-title{margin:18px 0 8px;}
.card-body{padding:0 2px;}
.card-body p{max-width:none;}

/* Product / cocktail grid (bb- prefix to avoid koval .grid) */
.bb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:34px;margin-top:30px;align-items:end;}
.bb-grid--cocktail{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;}
.bb-grid-item{margin:0;text-align:center;}
.bb-grid--product .bb-grid-item img{max-width:none;width:auto;max-height:360px;margin:0 auto 14px;}
.bb-grid--cocktail .bb-grid-item img{width:100%;max-width:none;height:280px;object-fit:cover;margin:0 0 8px;}
.bb-grid-item figcaption{font-family:var(--font-serif);font-weight:700;font-size:1.05rem;color:var(--koval-gray);}
.bb-grid-meta{color:var(--koval-text);margin:0;font-family:var(--font-sans);letter-spacing:1px;}

/* Age gate */
.agegate{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(45,46,51,.92);padding:20px;}
.agegate-box{background:#fff;max-width:460px;width:100%;padding:40px 32px;text-align:center;}
.agegate-box h2{font-family:var(--font-heading);color:var(--koval-gray);font-size:1.4rem;margin-bottom:14px;}
.agegate-box p{color:#4a4b50;margin-bottom:22px;}
.agegate-actions{display:flex;gap:14px;justify-content:center;}
.agegate .btn{font-family:var(--font-sans);font-size:.78rem;letter-spacing:2px;text-transform:uppercase;font-weight:500;padding:13px 30px;border:1px solid var(--koval-gray);background:var(--koval-gray);color:#fff;cursor:pointer;}
.agegate .btn-ghost{background:transparent;color:var(--koval-gray);}
.agegate-note{margin-top:18px;color:#9a2b2b;font-weight:bold;}
body.agegate-lock{overflow:hidden;}

/* match original: header container 1200 (was 1340); cocktail images natural 4:5, 3-up like slider */
header.site .container{max-width:1200px;}
.bb-grid--cocktail{grid-template-columns:repeat(3,1fr);gap:30px;align-items:start;}
.bb-grid--cocktail .bb-grid-item img{width:100%;max-width:none;height:auto;object-fit:initial;border-radius:0;margin:0 0 8px;}
@media (max-width:760px){ .bb-grid--cocktail{grid-template-columns:repeat(2,1fr);} }

/* match original uk-container exactly: content-box 1200 + 15px padding; nav item gap 30 */
.container{box-sizing:content-box;max-width:1200px;padding-left:15px;padding-right:15px;}
header.site .container{max-width:1200px;}
nav.main{gap:30px;}

/* cocktail slides uniform 4:5 like original matched-height slider (the tall Autumn image no longer towers) */
.bb-grid--cocktail .bb-grid-item img{aspect-ratio:4/5;width:100%;max-width:none;height:auto;object-fit:cover;}

/* force uniform cocktail slide height (aspect-ratio was unreliable here) */
.bb-grid--cocktail .bb-grid-item img{height:470px;width:100%;max-width:none;object-fit:cover;aspect-ratio:auto;margin:0 0 8px;}
@media (max-width:760px){ .bb-grid--cocktail .bb-grid-item img{height:340px;} }

/* align cocktail images to bottom like original image_align:bottom; uniform box, glasses on one line */
.bb-grid--cocktail{align-items:end;}
.bb-grid--cocktail .bb-grid-item img{height:470px;width:100%;max-width:none;object-fit:contain;object-position:center bottom;aspect-ratio:auto;margin:0;}

/* cocktail images: small + natural width + bottom-aligned + centered, like original slider */
.bb-grid--cocktail{align-items:end;gap:30px;}
.bb-grid--cocktail .bb-grid-item{text-align:center;}
.bb-grid--cocktail .bb-grid-item img{height:auto;max-height:240px;width:auto;max-width:100%;object-fit:contain;object-position:center bottom;aspect-ratio:auto;margin:0 auto;display:inline-block;}

/* hero height closer to original (cocktails hero ~410px at this viewport, not full-screen) */
.hero{height:62vh;min-height:380px;}
.bb-grid--cocktail .bb-grid-item img{max-height:320px;}

/* hero = original uk-height-viewport offset-top:true(header 80px) offset-bottom:20(vh) */
.hero{height:calc(80vh - 80px);min-height:340px;}

/* Cocktails slider (carousel: 3 visible, dotnav, arrows, autoplay; images bottom-aligned) */
.bb-slider{position:relative;padding:0 44px;margin-top:30px;}
.bb-slider-viewport{overflow:hidden;width:100%;}
.bb-slider-track{display:flex;gap:30px;margin:0;padding:0;list-style:none;align-items:end;transition:transform .5s ease;will-change:transform;}
.bb-slide{flex:0 0 auto;min-width:0;box-sizing:border-box;text-align:center;}
.bb-slide img{height:auto;max-height:320px;width:auto;max-width:100%;object-fit:contain;object-position:center bottom;margin:0 auto;display:inline-block;}
.bb-slider-arrow{position:absolute;top:40%;transform:translateY(-50%);background:none;border:none;font-size:2.4rem;line-height:1;color:var(--koval-gray);cursor:pointer;z-index:2;padding:0 8px;font-family:var(--font-serif);}
.bb-slider-arrow:hover{color:#000;}
.bb-slider-prev{left:0;} .bb-slider-next{right:0;}
.bb-slider-dots{display:flex;gap:10px;justify-content:center;margin-top:22px;}
.bb-slider-dots button{width:9px;height:9px;border-radius:50%;border:none;background:#d6d6d6;cursor:pointer;padding:0;transition:background .15s;}
.bb-slider-dots button.active{background:var(--koval-gray);}
@media (max-width:760px){ .bb-slider{padding:0 36px;} }

/* media-image layers (CSP-safe; inline background-image is blocked by style-src 'self') */
.hero--img{background:#1a1410;height:80vh;}
.bg-reveal{overflow:hidden;}
.bg-reveal-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;}
.bg-reveal>.container{position:relative;z-index:1;}

/* slider slide caption (products) */
.bb-slide figcaption{font-family:var(--font-serif);font-weight:700;color:var(--koval-gray);margin-top:10px;}
.bb-slide-meta{color:var(--koval-text);margin:2px 0 0;font-family:var(--font-sans);letter-spacing:1px;}
.bb-slider .bb-slide img{max-height:300px;}

/* === Footer: matches prod kovalbourbon (full-width, two rows of 4 cols) === */
footer.site{background:#fff;border-top:1px solid var(--koval-border);padding:56px 0 44px;text-align:left;text-transform:none;letter-spacing:normal;}
.footer-wide{max-width:1200px;box-sizing:content-box;margin:0 auto;padding:0 15px;display:flex;flex-direction:column;gap:50px;}
.footer-row{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start;}
.footer-col h4{font-family:var(--font-sans);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:2px;color:var(--koval-gray);margin:0 0 14px;}
.footer-col p{font-family:var(--font-serif);font-size:14px;line-height:1.7;color:var(--koval-text);margin:0 0 10px;}
.footer-col a{display:block;font-family:var(--font-serif);font-size:14px;color:var(--koval-text);text-decoration:none;margin-bottom:8px;}
.footer-col a:hover{color:var(--koval-gray);}
.footer-col input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--koval-border);font-family:var(--font-serif);font-size:14px;background:#fff;}
.footer-barrel{width:230px;height:230px;border-radius:12px;object-fit:cover;}
.footer-forms-col{grid-column:span 2;}
.footer-forms-col form{margin-bottom:22px;}
.footer-copy{margin:0;font-family:var(--font-sans);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--koval-muted);}
@media (max-width:820px){ .footer-row{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-row{grid-template-columns:1fr;text-align:center;} .footer-barrel{margin:0 auto;} .footer-forms-col{grid-column:auto;} }

/* bigger cocktail / product slide images */
.bb-slider .bb-slide img{max-height:360px;}

/* cocktail slides: fill slide width so the glass is large like prod */
.bb-slider--cocktail .bb-slide img{width:100%;max-width:100%;height:auto;max-height:440px;object-fit:contain;object-position:center bottom;}
.bb-slider--product .bb-slide img{height:auto;max-height:360px;width:auto;}