/*
Theme Name: Harper Brewing
Theme URI: https://harperbrewing.co.za
Author: Harper Brewing Co
Description: Custom theme for Harper Brewing Co — a Johannesburg craft brewery and social enterprise. Black & cream, WooCommerce-ready. Edit safely via the Harper Brewing Child theme.
Version: 1.6.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: harper
WC requires at least: 7.0
*/

/* ============================================================
   FONTS
   Add custom webfont file URLs in Customize → Harper Brewing → Typography.
============================================================ */

/* ============================================================
   DESIGN TOKENS  (override these in the child theme to retune the brand)
============================================================ */
:root{
  --ink:#14110E; --ink-2:#1E1A15; --cream:#F1E7D4; --cream-2:#E5D8BF;
  --gold:#D89A3C; --amber:#C8862F; --line:rgba(241,231,212,.16);
  /* per-beer accents */
  --pale:#E2245B; --blonde:#69BF4A; --amber-ale:#FD6C35; --stout:#C99A3F; --ipa:#1D9ADD; --mixed:#CBA85C;
  --maxw:1200px; --pad:clamp(20px,5vw,64px);
}

/* ============================================================
   BASE
============================================================ */
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--cream);font-family:var(--font-body,"Limerick",system-ui,sans-serif);font-size:var(--body-font-size,17px);font-weight:var(--body-font-weight,400);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.display{font-family:var(--font-display,"Anton",Impact,sans-serif);font-weight:var(--display-font-weight,400);text-transform:uppercase;line-height:.92;letter-spacing:.01em}
.mono{font-family:var(--font-label,"Space Mono",monospace)}
.eyebrow{font-family:var(--font-label,"Space Mono",monospace);font-size:.72rem;font-weight:var(--label-font-weight,400);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:var(--button-font-weight,700);font-size:.95rem;padding:.85em 1.4em;border-radius:3px;border:1.5px solid var(--cream);cursor:pointer;font-family:inherit;transition:background .18s,color .18s,transform .18s}
.btn-solid{background:var(--cream);color:var(--ink)} .btn-solid:hover{background:var(--gold);border-color:var(--gold)}
.btn-ghost{background:transparent;color:var(--cream)} .btn-ghost:hover{background:var(--cream);color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)} .btn-dark:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.textlink{font-weight:700;color:var(--cream);border-bottom:1px solid var(--gold);padding-bottom:3px}
.textlink:hover{color:var(--gold)}

/* ============================================================
   NAV
============================================================ */
.nav{position:sticky;top:0;z-index:50;background:rgba(20,17,14,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:14px}
.brand{flex:0 0 auto;display:flex;align-items:center;line-height:0}
.brand-logo{height:28px !important;width:auto !important;max-height:28px;display:block}
.nav-right{display:flex;align-items:center;gap:1.6rem}
.nav-links{display:flex;align-items:center;gap:1.5rem;font-size:.9rem;font-weight:700;list-style:none;margin:0;padding:0}
.nav-links a{opacity:.85;white-space:nowrap} .nav-links a:hover{opacity:1;color:var(--gold)}
.nav .btn{padding:.5em 1em}
.nav-account-group{display:flex;align-items:center;gap:1rem}
.nav-account{font-size:.88rem;font-weight:700;background:none;border:0;color:var(--cream);cursor:pointer;font-family:inherit;opacity:.85;padding:.2em;white-space:nowrap;text-decoration:none}
.nav-account:hover{opacity:1;color:var(--gold)}
.nav-signout{opacity:.6;font-weight:400}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--cream);padding:.5em .7em;border-radius:3px;cursor:pointer;font-family:inherit}
@media(max-width:860px){
  .nav-toggle{display:inline-block;order:3}
  .nav-right{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;background:var(--ink);padding:18px var(--pad);gap:1.2rem;border-bottom:1px solid var(--line)}
  .nav-right.open{display:flex}
  .nav-links{flex-direction:column;align-items:flex-start;gap:1.1rem;width:100%}
  .nav-account-group{flex-direction:column;align-items:flex-start;gap:1rem;width:100%;border-top:1px solid var(--line);padding-top:1.1rem}
}

/* ============================================================
   HERO  (background image set inline from the Customizer)
============================================================ */
.hero{position:relative;isolation:isolate;padding-top:clamp(48px,9vw,110px);padding-bottom:0;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos,center center)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(0deg, var(--ink) 1%, rgba(20,17,14,.15) 42%, rgba(20,17,14,.45) 100%),
  linear-gradient(90deg, rgba(20,17,14,.94) 0%, rgba(20,17,14,.74) 40%, rgba(20,17,14,.30) 72%, rgba(20,17,14,.50) 100%);}
@media(min-width:760px){.hero{min-height:var(--hero-min-height,78vh);display:flex;align-items:center;padding-top:0}.hero .wrap{width:100%}}
.hero h1{font-size:clamp(2.9rem,11vw,var(--hero-title-max,8.4rem));max-width:14ch;margin:0 0 1.3rem}
.hero h1 .good{color:var(--gold)}
.hero-lead{max-width:46ch;font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--cream-2);margin:0 0 2rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-bottom:.9rem}
.cta-sub{font-family:"Space Mono",monospace;font-size:.78rem;letter-spacing:.04em;color:var(--gold);margin:0 0 clamp(18px,3vw,34px)}
.hero-stats{display:flex;flex-wrap:wrap;gap:2.4rem;padding-block:1.1rem 1.35rem;border-top:1px solid var(--line)}
.stat .n{font-family:"Anton",sans-serif;font-size:2.2rem;line-height:1}
.stat .l{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:.4rem}

/* ============================================================
   BANDS / SECTIONS
============================================================ */
.band{padding-block:clamp(48px,8vw,92px)}
.band.cream{background:var(--cream);color:var(--ink)}
.band.cream .eyebrow{color:var(--amber)}
.section-head{max-width:62ch;margin-bottom:clamp(28px,5vw,52px)}
.section-head h2{font-size:clamp(2rem,5.6vw,var(--section-title-max,3.6rem));margin:.6rem 0 1rem;line-height:1}
.section-head p{font-size:1.08rem;color:var(--cream-2)}
.band.cream .section-head p{color:#5a4f3d}

.core-band.no-limited-before{padding-top:var(--home-after-hero-gap,clamp(20px,3.5vw,42px))}
.limited-empty{margin:0;color:var(--cream-2);font-size:1rem}

/* Homepage first-section spacing: keeps the next section tighter after the hero.
   Values are controlled in Customize → Harper Brewing → Home · Hero. */
.home main > .hero + .band{padding-top:var(--home-after-hero-gap,clamp(24px,4vw,48px))}
.home main > .hero + .limited-band{padding-top:var(--home-after-hero-gap,clamp(24px,4vw,48px))}
@media(max-width:759px){.hero{padding-top:clamp(34px,7vw,70px)}.home main > .hero + .band{padding-top:clamp(22px,7vw,38px)}}

/* skyline divider motif */
.skyline-divider{width:100%;display:block;opacity:.5}
.skyline-divider.on-cream{opacity:.35}

/* ============================================================
   PRODUCT CARDS  (.beer) — used on home, shop, related
============================================================ */
.range-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.range-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1040px){.range-grid{grid-template-columns:repeat(3,1fr)}}
.beer{position:relative;display:flex;gap:16px;align-items:center;text-decoration:none;background:var(--ink-2);border:1px solid var(--line);border-radius:12px;overflow:hidden;padding:14px 16px 14px 14px;transition:border-color .2s,transform .2s}
.beer:hover{border-color:var(--accent);transform:translateY(-3px)}
.beer-img::before{display:none;content:"";position:absolute;inset:6px;background-image:var(--pat);background-size:cover;background-position:center;opacity:.13;z-index:0;border-radius:10px}
.beer::before{content:"";position:absolute;inset:0;background-image:var(--pat);background-size:cover;background-position:center;opacity:.12;z-index:0;border-radius:12px}
.beer-img{position:relative;flex:0 0 84px;display:flex;justify-content:center;align-items:center;min-height:138px}
.beer-img::after{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:118%;height:62%;background:var(--accent);filter:blur(34px);opacity:.30;border-radius:50%;z-index:0}
.beer-img img{position:relative;z-index:1;height:138px;width:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
.beer-body{flex:1;min-width:0;position:relative;z-index:1}
.beer-name{font-family:var(--font-display,"Anton",sans-serif);text-transform:uppercase;font-size:var(--card-title-size,1.5rem);line-height:1;letter-spacing:.01em;transition:color .18s;margin:0}
.beer:hover .beer-name{color:var(--accent)}
.beer-style{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-top:.4rem}
.beer-spec{font-family:"Space Mono",monospace;font-size:.7rem;color:var(--cream-2);margin:.5rem 0}
.beer-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-top:.7rem}
.beer-price{font-family:"Anton",sans-serif;font-size:1.15rem}
.beer-price small{font-family:"Space Mono",monospace;font-size:.56rem;letter-spacing:.08em;color:var(--accent);text-transform:uppercase;display:block;line-height:1}
.beer-buy{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.beer.sold{opacity:.66}
.beer-flag{position:absolute;top:10px;right:10px;z-index:2;font-family:"Space Mono",monospace;font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--accent);padding:.2em .55em;border-radius:3px}
@media(min-width:680px){
  .beer{flex-direction:column;align-items:stretch;text-align:left;padding:18px 18px 16px}
  .beer::before{display:none}
  .beer-img::before{display:block}
  .beer-img{flex:none;min-height:210px}
  .beer-img img{height:210px}
}

/* ============================================================
   LIMITED STRIP
============================================================ */
.limited-band{background:linear-gradient(180deg,#16130F,#1b1712)}
.limited-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.limited-head h2{font-size:clamp(1.6rem,4.6vw,2.6rem);line-height:1;margin:.5rem 0 0}
.limited-head .all{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:3px;white-space:nowrap}
.limited-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.limited-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}
.scard{position:relative;display:flex;gap:16px;align-items:center;background:#211b13;border:1px solid rgba(216,154,60,.32);border-radius:12px;padding:14px;overflow:hidden;transition:border-color .2s,transform .2s}
.scard:hover{border-color:var(--gold);transform:translateY(-3px)}
.scard-tag{position:absolute;top:0;left:0;font-family:"Space Mono",monospace;font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.3em .7em;border-radius:0 0 8px 0;font-weight:700}
.scard-img{flex:0 0 92px}
.scard-img img{width:92px;height:92px;object-fit:cover;border-radius:8px}
.scard-name{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:1.4rem;line-height:1;margin:.2rem 0 0}
.scard:hover .scard-name{color:var(--gold)}
.scard-style{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-top:.35rem}
.scard-note{font-size:.9rem;color:var(--cream-2);margin:.45rem 0 .55rem;line-height:1.45}
.scard-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.scard-avail{font-family:"Space Mono",monospace;font-size:.66rem;color:var(--cream-2)}
.scard-cta{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* ============================================================
   VALUES STRIP
============================================================ */
.valuestrip{border-block:1px solid var(--line);background:var(--ink-2);padding-block:clamp(26px,4vw,42px)}
.values{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;justify-content:center;align-items:center;margin:0;padding:0}
.values li{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);display:flex;align-items:center;gap:.7rem}
.values li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}

/* ============================================================
   PURPOSE
============================================================ */
.purpose{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);align-items:center}
.purpose .huge{font-family:"Anton",sans-serif;font-size:clamp(5rem,17vw,12rem);line-height:.8;color:var(--ink)}
.purpose .huge span{color:var(--amber)}
.purpose .huge .sub{display:block;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#8a7a5f;margin-top:.7rem;line-height:1.4}
.purpose h2{font-size:clamp(1.7rem,4.2vw,2.6rem);line-height:1.05;margin-bottom:1rem}
.purpose p{color:#5a4f3d;margin-bottom:1rem;max-width:46ch}
.purpose .huge{text-align:center}
.purpose-copy{text-align:var(--purpose-align,center)}
.purpose-copy p{margin-left:auto;margin-right:auto}
@media(max-width:760px){.purpose{grid-template-columns:1fr;gap:1.2rem}.purpose .huge{font-size:clamp(5rem,26vw,8rem)}}

/* teaser / work */
.teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;border:1px solid var(--line);border-radius:6px;padding:clamp(24px,4vw,40px);background:var(--ink-2)}
.worklist{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:2.4rem}
@media(min-width:620px){.worklist{grid-template-columns:1fr 1fr;column-gap:2.6rem}}
.workitem{border-top:1px solid rgba(20,17,14,.18);padding:1.1rem 0}
.workitem .tag{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);display:block;margin-bottom:.5rem}
.workitem p{color:#5a4f3d;font-size:.96rem;margin:0}
.work-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.work-note{font-family:"Space Mono",monospace;font-size:.74rem;color:#5a4f3d}

/* ============================================================
   FAQ  (dark)
============================================================ */
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line);padding:1.1rem 0}
.faq summary{font-weight:700;font-size:1.12rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Anton",sans-serif;color:var(--gold);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--cream-2);margin-top:.7rem;max-width:70ch}

/* ============================================================
   FOOTER
============================================================ */
.foot{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(40px,6vw,80px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.foot h4{font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.foot a{display:block;color:var(--cream-2);padding:.2rem 0}.foot a:hover{color:var(--gold)}
.foot address{font-style:normal;color:var(--cream-2);line-height:1.7}
.foot-logo{height:30px;margin-bottom:1rem}
.foot .legal{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.82rem;color:rgba(241,231,212,.5);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr;gap:1.8rem}}

/* ============================================================
   STICKY MOBILE SHOP BAR
============================================================ */
.shopbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;background:var(--cream);color:var(--ink);align-items:center;justify-content:space-between;gap:1rem;padding:.7rem var(--pad);border-top:2px solid var(--gold);box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.shopbar .sb-good{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.06em;line-height:1.3;max-width:18ch}
@media(max-width:860px){.shopbar{display:flex}body.home{padding-bottom:72px}}

/* ============================================================
   WOOCOMMERCE  (shop archive + single restyle; cards reuse .beer)
============================================================ */
.woocommerce-products-header{padding-top:clamp(36px,7vw,72px)}
.woocommerce-products-header__title{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.4rem,8vw,5rem)}
ul.products{list-style:none;display:grid;grid-template-columns:1fr;gap:14px;margin:0;padding:0}
@media(min-width:680px){ul.products{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1040px){ul.products{grid-template-columns:repeat(3,1fr)}}
/* single product */
.single-product div.product{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,56px);padding-top:clamp(20px,4vw,40px)}
@media(min-width:880px){.single-product div.product{grid-template-columns:1fr 1fr;align-items:start}}
.single-product .product_title{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.4rem,7vw,3.6rem)}
.single-product .price{font-family:"Anton",sans-serif}
/* pack buttons (variation select -> buttons) */
.pack-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.pack-btn{flex:1;min-width:96px;background:var(--ink-2);color:var(--cream);border:1.5px solid var(--line);border-radius:10px;padding:.8rem .6rem;cursor:pointer;font-family:inherit;font-weight:700;transition:.15s}
.pack-btn:hover{border-color:var(--gold)}
.pack-btn.sel{border-color:var(--gold);background:rgba(216,154,60,.12)}
.single-product .single_add_to_cart_button{background:var(--cream);color:var(--ink);border:0;border-radius:8px;font-weight:700;padding:.9em 1.6em;cursor:pointer}
.single-product .single_add_to_cart_button:hover{background:var(--gold)}
.harper-good-line{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--gold);margin:1rem 0}

/* reveal-on-scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   ACCOUNT — nav control, login/register forms, modal
============================================================ */
.nav-account{font-size:.9rem;font-weight:700;background:none;border:0;color:var(--cream);cursor:pointer;font-family:inherit;opacity:.85;padding:.2em .2em}
.nav-account:hover{opacity:1;color:var(--gold)}

/* form fields (shared by page + modal) */
.harper-auth-form .form-row{display:block;margin:0 0 1rem}
.harper-auth-form label{display:block;font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-2);margin-bottom:.4rem}
.harper-auth-form .required{color:var(--gold)}
.harper-auth-form input[type=text],
.harper-auth-form input[type=email],
.harper-auth-form input[type=password]{width:100%;background:var(--ink-2);border:1.5px solid var(--line);border-radius:8px;color:var(--cream);font-family:inherit;font-size:1rem;padding:.75em .85em}
.harper-auth-form input:focus{outline:none;border-color:var(--gold)}
.harper-auth-row{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;justify-content:space-between}
.harper-remember{display:flex!important;align-items:center;gap:.5rem;text-transform:none!important;letter-spacing:0!important;font-family:inherit!important;font-size:.85rem!important;color:var(--cream-2)!important;margin:0!important}
.harper-auth-form .btn{margin-top:.2rem}
.harper-auth-form .lost_password{font-family:"Space Mono",monospace;font-size:.72rem;margin-top:.6rem}
.harper-auth-form .lost_password a{color:var(--gold)}
.harper-auth-hint{font-size:.85rem;color:var(--cream-2);margin:.2rem 0 1rem}

/* My Account PAGE login layout */
.harper-auth--page{padding-block:clamp(40px,7vw,80px)}
.harper-auth-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,56px);max-width:920px;margin:0 auto}
.harper-auth-grid.two{grid-template-columns:1fr}
@media(min-width:760px){.harper-auth-grid.two{grid-template-columns:1fr 1fr}}
.harper-auth-col h2{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:1rem}
.harper-auth-col + .harper-auth-col{border-top:1px solid var(--line);padding-top:clamp(28px,5vw,0)}
@media(min-width:760px){.harper-auth-col + .harper-auth-col{border-top:0;border-left:1px solid var(--line);padding-top:0;padding-left:clamp(28px,4vw,56px)}}

/* MODAL */
.auth-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-modal[hidden]{display:none}
.auth-backdrop{position:absolute;inset:0;background:rgba(8,7,5,.78);backdrop-filter:blur(3px)}
.auth-dialog{position:relative;z-index:1;width:100%;max-width:440px;max-height:90vh;overflow:auto;background:var(--ink);border:1px solid var(--line);border-radius:16px;padding:clamp(22px,5vw,34px);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.auth-x{position:absolute;top:12px;right:14px;background:none;border:0;color:var(--cream-2);font-size:1.6rem;line-height:1;cursor:pointer}
.auth-x:hover{color:var(--gold)}
.auth-tabs{display:flex;gap:.4rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.auth-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--cream-2);font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding:.6em .4em;cursor:pointer;margin-bottom:-1px}
.auth-tab.sel{color:var(--cream);border-bottom-color:var(--gold)}
.auth-panel[hidden]{display:none}
body.auth-open{overflow:hidden}

/* WooCommerce notices (errors/success) styled for dark */
.woocommerce-error,.woocommerce-message,.woocommerce-info{list-style:none;margin:0 0 1.2rem;padding:.9rem 1.1rem;border-radius:8px;border:1px solid var(--line);background:var(--ink-2);color:var(--cream);font-size:.92rem}
.woocommerce-error{border-color:#9c3b3b}
.woocommerce-message{border-color:#4f7a3a}

/* Plain (non-beer) cards: no pattern, no glow — clean product card */
.beer.plain::before{display:none}
.beer.plain .beer-img::before{display:none}
.beer.plain .beer-img::after{display:none}
.beer.plain{--accent:var(--gold)}

/* ============================================================
   WOOCOMMERCE — layout fixes + chrome
   (the !important rules neutralise Woo's own float grid, which is
    what makes shop/single look broken inside a custom grid theme)
============================================================ */
.woo-main{padding-top:clamp(20px,4vw,40px)}

/* shop chrome */
.woocommerce-breadcrumb{font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.06em;color:var(--cream-2);margin-bottom:1.4rem}
.woocommerce-breadcrumb a{color:var(--gold)}
.woocommerce-products-header__title,.woocommerce-products-header .page-title,.woocommerce .page-title{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,7vw,4rem);margin:.2rem 0 1rem;line-height:1}
.term-description{color:var(--cream-2);max-width:60ch;margin-bottom:1.5rem}
.woocommerce-result-count{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--cream-2);margin:0 0 1rem}
.woocommerce-ordering{margin:0 0 1.6rem}
.woocommerce-ordering select{background:var(--ink-2);color:var(--cream);border:1.5px solid var(--line);border-radius:8px;padding:.6em .8em;font-family:inherit}

/* PRODUCT GRID — beat Woo's float widths, use our grid */
.woocommerce ul.products, ul.products{display:grid !important;grid-template-columns:1fr;gap:14px;margin:0 0 2rem !important;padding:0 !important;list-style:none}
@media(min-width:680px){.woocommerce ul.products, ul.products{grid-template-columns:repeat(2,1fr);gap:20px}}
@media(min-width:1040px){.woocommerce ul.products, ul.products{grid-template-columns:repeat(3,1fr)}}
.woocommerce ul.products li.product, ul.products li.product{width:auto !important;float:none !important;margin:0 !important;padding:0 !important;list-style:none}
.woocommerce ul.products li.product::before{display:none !important}

/* pagination */
.woocommerce-pagination ul{display:flex;gap:.4rem;list-style:none;padding:0;justify-content:center}
.woocommerce-pagination a,.woocommerce-pagination span{display:inline-flex;min-width:42px;height:42px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;color:var(--cream);text-decoration:none}
.woocommerce-pagination .current{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* SINGLE PRODUCT — beat Woo's float columns, use grid */
.single-product div.product{display:grid !important;grid-template-columns:1fr;gap:clamp(24px,5vw,56px);float:none !important}
@media(min-width:900px){.single-product div.product{grid-template-columns:1.05fr 1fr;align-items:start}}
.single-product div.product .woocommerce-product-gallery,
.single-product div.product .summary{width:auto !important;float:none !important;margin:0 !important}
.single-product .woocommerce-product-gallery img{border-radius:14px}
.single-product .product_title{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;margin:0 0 .6rem}
.single-product .summary .price{font-family:"Anton",sans-serif;font-size:1.8rem;color:var(--cream);margin:.4rem 0 1rem}
.single-product .summary .price del{opacity:.5;font-size:1.1rem;margin-right:.4rem}
.single-product .woocommerce-product-details__short-description{color:var(--cream-2);margin-bottom:1.2rem}
.single-product .quantity input{background:var(--ink-2);color:var(--cream);border:1.5px solid var(--line);border-radius:8px;padding:.6em;width:5em}
.single-product .product_meta{font-family:"Space Mono",monospace;font-size:.74rem;color:var(--cream-2);margin-top:1.4rem}
.single-product .product_meta a{color:var(--gold)}
.single-product table.variations{margin-bottom:1rem}
.single-product table.variations td,.single-product table.variations th{padding:.3rem 0;vertical-align:middle}

/* tabs + related (span full width under the two columns) */
.woocommerce-tabs{grid-column:1 / -1;margin-top:clamp(32px,6vw,64px)}
.woocommerce-tabs ul.tabs{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;border-bottom:1px solid var(--line);margin:0 0 1.4rem}
.woocommerce-tabs ul.tabs a{display:block;padding:.6em 1em;font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-2);border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.woocommerce-tabs ul.tabs li.active a{color:var(--cream);border-bottom-color:var(--gold)}
.related.products,.up-sells{grid-column:1 / -1;margin-top:clamp(32px,6vw,64px)}
.related.products>h2,.up-sells>h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:1.2rem}

/* cart / checkout readability on dark */
.woocommerce table.shop_table{border-color:var(--line)}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line)}

/* extra defensive neutralisers (cover every Woo float/width context) */
.woo-main .wrap{max-width:var(--maxw)}
.woocommerce, .woocommerce-page{max-width:100%}
ul.products[class*="columns-"] li.product{width:auto !important;float:none !important;margin:0 !important}
.woocommerce ul.products::after,.woocommerce div.product::after{content:"";display:block;clear:both}
.single-product .woocommerce-product-gallery{max-width:100% !important;float:none !important;margin:0 !important}
.single-product .woocommerce-product-gallery__wrapper{margin:0}
.single-product div.summary.entry-summary{float:none !important;width:auto !important}
/* if the gallery has a single image, stop flexslider squashing it */
.single-product .woocommerce-product-gallery .flex-viewport{max-width:100%}

/* ============================================================
   CUSTOM SINGLE PRODUCT (Harper layout)
============================================================ */
/* neutralise the generic product grid for our custom wrapper */
.single-product div.product.harper-single{display:block !important;grid-template-columns:none !important;float:none !important}
.hsingle-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,56px)}
@media(min-width:900px){.hsingle-grid{grid-template-columns:1.02fr 1fr;align-items:start}}
.hsingle-media{position:relative;border-radius:16px;overflow:hidden;background:var(--ink-2);padding:clamp(20px,4vw,44px);display:flex;align-items:center;justify-content:center;min-height:320px}
.harper-single:not(.plain) .hsingle-media::before{content:"";position:absolute;inset:0;background-image:var(--pat);background-size:cover;background-position:center;opacity:.10;z-index:0}
.harper-single:not(.plain) .hsingle-media::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;height:60%;background:var(--accent,var(--gold));filter:blur(70px);opacity:.30;border-radius:50%;z-index:0}
.hsingle-media .woocommerce-product-gallery{position:relative;z-index:1;width:100% !important;margin:0 !important;float:none !important}
.hsingle-media img{border-radius:10px}
.hsingle-buy .product_title{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1;margin:0 0 .4rem}
.hsingle-style{font-family:"Space Mono",monospace;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,var(--gold));margin:.1rem 0 1rem}
.hsingle-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 1.2rem}
.hsingle-chips .chip{font-family:"Space Mono",monospace;font-size:.7rem;border:1px solid var(--line);border-radius:100px;padding:.4em .8em;color:var(--cream-2)}
.hsingle-chips .chip b{color:var(--gold)}
.hsingle-buy .price{font-family:"Anton",sans-serif;font-size:1.7rem;color:var(--cream);margin:.2rem 0 1rem}
.hsingle-note{color:var(--cream-2);margin-bottom:1.4rem}
.hsingle-buy .cart{margin:0 0 1rem}
.hsingle-sections{margin-top:clamp(40px,7vw,72px);display:grid;gap:clamp(28px,5vw,48px);max-width:760px}
.hsingle-sec h2{font-size:clamp(1.6rem,4.4vw,2.4rem);margin-bottom:.7rem;line-height:1}
.hsingle-rte{color:var(--cream-2);line-height:1.75}
.hsingle-rte strong{color:var(--cream)}
.hsingle-rte p{margin:0 0 1rem}

/* ============================================================
   IMAGE SIZING — beat WooCommerce's img{width:100%;height:auto}
   (this is what was blowing the bottle up to full card width)
============================================================ */
/* Catalog / related cards: contain the image in a uniform area, centred */
.beer .beer-img img,
.woocommerce ul.products li.product .beer-img img{
  width:auto !important;height:auto !important;
  max-height:210px !important;max-width:100% !important;
  object-fit:contain;margin:0 auto;
}
@media(max-width:679px){
  .beer .beer-img img,
  .woocommerce ul.products li.product .beer-img img{max-height:120px !important}
}

/* Single product media: centre + cap the bottle/label height */
.hsingle-media{min-height:420px}
.hsingle-media .woocommerce-product-gallery{
  width:100% !important;max-width:400px;margin-left:auto !important;margin-right:auto !important;float:none !important;
}
.hsingle-media .woocommerce-product-gallery img{
  width:auto !important;height:auto !important;
  max-height:480px !important;max-width:100% !important;
  margin:0 auto;display:block;
}

/* ============================================================
   WOOCOMMERCE BUTTONS — kill the default purple, use brand
============================================================ */
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single-product .single_add_to_cart_button,
.woocommerce-checkout #place_order,
.woocommerce #place_order{
  background:var(--cream) !important;color:var(--ink) !important;border:0 !important;
  border-radius:8px !important;font-weight:700 !important;font-family:inherit !important;
  padding:.85em 1.6em !important;text-transform:none !important;text-shadow:none !important;cursor:pointer;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover,
.single-product .single_add_to_cart_button:hover,
.woocommerce #place_order:hover{background:var(--gold) !important}
/* secondary buttons (update cart, apply coupon, etc.) */
.woocommerce .button:not(.alt):not(.single_add_to_cart_button){
  background:var(--ink-2) !important;color:var(--cream) !important;border:1.5px solid var(--line) !important;
  border-radius:8px !important;font-family:inherit !important;padding:.7em 1.2em !important;text-shadow:none !important;
}
.woocommerce .button:not(.alt):hover{border-color:var(--gold) !important}
.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled],
.single_add_to_cart_button.disabled{opacity:.5 !important;cursor:not-allowed}

/* ============================================================
   ADD-TO-CART AREA — quantity + button aligned, good line below
============================================================ */
.single-product form.cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:.7rem;margin-bottom:1rem}
.single-product form.cart.variations_form{display:block}
.single-product .woocommerce-variation-add-to-cart{display:flex;flex-wrap:wrap;align-items:stretch;gap:.7rem}
.single-product form.cart .quantity{margin:0}
.single-product .quantity input.qty{
  background:var(--ink-2) !important;color:var(--cream) !important;border:1.5px solid var(--line) !important;
  border-radius:8px !important;padding:.6em !important;min-height:50px;width:5em;text-align:center;
}
.single-product .single_add_to_cart_button{margin:0 !important;min-height:50px}
.harper-good-line{flex-basis:100%;width:100%;order:10;font-family:"Space Mono",monospace;font-size:.78rem;color:var(--gold);margin:.5rem 0 0}

/* ============================================================
   CART + CHECKOUT + ACCOUNT — dark theme styling
============================================================ */
/* form fields everywhere */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-checkout input.input-text,
.woocommerce-cart input.input-text{
  background:var(--ink-2) !important;color:var(--cream) !important;border:1.5px solid var(--line) !important;
  border-radius:8px !important;padding:.7em .8em !important;font-family:inherit !important;line-height:1.4 !important;
}
.woocommerce form .form-row label,.woocommerce-checkout label,.woocommerce-cart label{color:var(--cream-2)}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--cream);line-height:1.8}
.select2-dropdown,.select2-container--default .select2-results__option{background:var(--ink-2);color:var(--cream)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--gold);color:var(--ink)}

/* tables (cart + order review) */
.woocommerce table.shop_table{background:var(--ink-2);border:1px solid var(--line) !important;border-radius:12px;border-collapse:separate !important}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-top-color:var(--line) !important;color:var(--cream)}
.woocommerce table.cart img{width:64px;border-radius:8px}
.woocommerce a.remove{color:var(--gold) !important;border:1px solid var(--line);background:transparent}
.woocommerce a.remove:hover{background:var(--gold) !important;color:var(--ink) !important}
.woocommerce .cart_totals h2,.woocommerce #order_review_heading,
.woocommerce-checkout h3,.woocommerce-billing-fields h3,.woocommerce-additional-fields h3,
.woocommerce-cart .cart-collaterals h2{font-family:"Anton",sans-serif;text-transform:uppercase;font-size:clamp(1.4rem,3.5vw,2rem);margin:0 0 1rem;color:var(--cream)}
.woocommerce-cart-form .actions{padding-top:1rem}

/* coupon + totals */
.cart_totals,.woocommerce-checkout #order_review{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:clamp(18px,3vw,28px)}
.woocommerce-checkout #payment{background:transparent}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)}
.woocommerce-checkout #payment div.payment_box{background:var(--ink) !important;color:var(--cream-2)}
.woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--ink) !important}

/* layout: checkout two columns sit in our container */
.woocommerce-checkout .col2-set,.woocommerce .col2-set{display:grid;grid-template-columns:1fr;gap:2rem;width:auto !important;float:none !important}
.woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:auto !important;float:none !important}
.woocommerce-cart .cart-collaterals{width:100% !important}
.woocommerce-cart .cart-collaterals .cart_totals{width:100% !important;float:none !important;max-width:460px;margin-left:auto}

/* My Account */
.woocommerce-account .woocommerce::after{content:"";display:block;clear:both}
.woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--line)}
.woocommerce-MyAccount-navigation li{margin:0}
.woocommerce-MyAccount-navigation a{display:block;padding:.55em .9em;color:var(--cream-2);font-family:"Space Mono",monospace;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.woocommerce-MyAccount-navigation li.is-active a{color:var(--cream);border-bottom-color:var(--gold)}
.woocommerce-MyAccount-navigation a:hover{color:var(--gold)}
.woocommerce-MyAccount-content{width:auto !important;float:none !important}


/* ============================================================
   AGE GATE
============================================================ */
.age-gate{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.age-gate[hidden]{display:none}
.age-gate-backdrop{position:absolute;inset:0;background:rgba(8,7,5,.92);backdrop-filter:blur(4px)}
.age-gate-dialog{position:relative;z-index:1;width:min(100%,520px);background:var(--ink);border:1px solid var(--line);border-radius:18px;padding:clamp(28px,6vw,48px);box-shadow:0 30px 90px rgba(0,0,0,.65);text-align:center}
.age-gate-logo{height:clamp(32px,8vw,54px);width:auto;margin:0 auto 1.6rem}
.age-gate h2{font-size:clamp(2.2rem,8vw,4.2rem);margin:0 0 1rem}
.age-gate p{color:var(--cream-2);max-width:38ch;margin:0 auto 1.3rem}
.age-gate .btn{justify-content:center;margin:.3rem auto 1rem}
.age-gate-small{font-family:var(--font-label,"Space Mono",monospace);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)!important;margin-bottom:0!important}
body.age-gate-open{overflow:hidden}

/* ============================================================
   STICKY "VIEW CART" BUTTON
============================================================ */
.harper-cart-wrap{position:fixed;right:20px;bottom:20px;z-index:90;display:none}
.harper-cart-wrap.show{display:block}
.harper-cart{display:inline-flex;align-items:center;gap:.55rem;background:var(--gold);color:var(--ink);
  font-family:"Space Mono",monospace;font-weight:700;font-size:.8rem;letter-spacing:.03em;
  padding:.75em 1.05em;border-radius:100px;box-shadow:0 10px 30px rgba(0,0,0,.45);text-decoration:none;transition:filter .15s}
.harper-cart:hover{filter:brightness(1.06)}
.harper-cart svg{flex:none}
.harper-cart-count{background:var(--ink);color:var(--cream);border-radius:100px;min-width:1.6em;height:1.6em;
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;padding:0 .35em}
.harper-cart-total{opacity:.85}
@media(max-width:860px){body.home .harper-cart-wrap{bottom:84px}}
@media(max-width:430px){.harper-cart-label{display:none}}

/* ============================================================
   V1.3 — SINGLE PRODUCT SIZE SELECTION + OUTLINE ADD TO CART
============================================================ */
.single-product form.variations_form table.variations,
.single-product form.variations_form table.variations tbody,
.single-product form.variations_form table.variations tr,
.single-product form.variations_form table.variations th,
.single-product form.variations_form table.variations td{
  display:block !important;
  width:100% !important;
}
.single-product form.variations_form table.variations{
  margin:0 0 1rem !important;
  border:0 !important;
}
.single-product form.variations_form table.variations tr{
  margin:0 0 1rem !important;
}
.single-product form.variations_form table.variations th.label,
.single-product form.variations_form table.variations td.label{
  padding:0 0 .55rem !important;
  text-align:left !important;
}
.single-product form.variations_form table.variations th.label label,
.single-product form.variations_form table.variations td.label label{
  display:block;
  font-family:var(--font-heading), "Anton", sans-serif;
  font-size:clamp(1.15rem, 2.5vw, 1.55rem);
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--cream);
}
.single-product form.variations_form table.variations td.value{
  padding:0 !important;
}
.single-product form.variations_form .pack-btns{
  margin:.1rem 0 .75rem;
}
.single-product form.variations_form .reset_variations{
  display:inline-block;
  margin-top:.25rem;
  color:var(--gold);
  font-family:var(--font-mono), "Space Mono", monospace;
  font-size:.78rem;
}
.single-product .woocommerce-variation-add-to-cart{
  margin-top:.45rem;
}
.single-product .single_add_to_cart_button,
.woocommerce button.button.alt.single_add_to_cart_button,
.woocommerce div.product form.cart .button.single_add_to_cart_button{
  background:transparent !important;
  background-image:none !important;
  color:var(--cream) !important;
  border:1.5px solid var(--cream) !important;
  box-shadow:none !important;
}
.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus,
.woocommerce button.button.alt.single_add_to_cart_button:hover,
.woocommerce button.button.alt.single_add_to_cart_button:focus,
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button.single_add_to_cart_button:focus{
  background:rgba(242,231,211,.08) !important;
  background-image:none !important;
  color:var(--cream) !important;
  border-color:var(--cream) !important;
}


/* ============================================================
   V1.4 — REFERENCE PRODUCT + GROUPED SHOP REFINEMENTS
============================================================ */
/* Single product: closer to supplied PDP reference while keeping Woo dynamic. */
.harper-single{--pdp-radius:14px}
.single-product .woo-main{padding-top:clamp(18px,4vw,38px)}
.hsingle-grid{gap:clamp(24px,5vw,56px);padding-top:clamp(8px,2vw,18px)}
@media(min-width:900px){.hsingle-buy{position:sticky;top:92px}}
.hsingle-media{
  border:1px solid var(--line);
  border-radius:var(--pdp-radius);
  background:var(--ink-2);
  min-height:clamp(360px,48vw,560px);
  padding:clamp(24px,4vw,44px);
}
.harper-single:not(.plain) .hsingle-media::before{opacity:.11;border-radius:var(--pdp-radius)}
.harper-single:not(.plain) .hsingle-media::after{top:48%;width:62%;height:60%;filter:blur(60px);opacity:.32}
.hsingle-media .onsale{position:absolute;z-index:3;top:16px;left:16px;right:auto;margin:0;border-radius:4px;background:var(--accent,var(--gold));color:var(--ink);font-family:var(--font-label,"Space Mono",monospace);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;min-height:0;line-height:1;padding:.45em .7em}
.hsingle-media .woocommerce-product-gallery{max-width:420px!important}
.hsingle-media .woocommerce-product-gallery img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.5));border-radius:10px}
.hsingle-buy .woocommerce-breadcrumb,.hsingle-buy .eyebrow{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;color:var(--cream-2)}
.hsingle-buy .product_title{font-size:clamp(2.4rem,7vw,3.6rem);margin:.2rem 0 .5rem;color:var(--cream)}
.hsingle-style{font-size:.74rem;letter-spacing:.14em;margin-bottom:1.1rem;color:var(--accent,var(--gold))}
.hsingle-chips{gap:.5rem;margin-bottom:1.3rem}
.hsingle-chips .chip{letter-spacing:.05em;padding:.4em .8em}
.hsingle-chips .chip b{color:var(--accent,var(--gold))}
.hsingle-buy .price{font-size:1.8rem;margin:.2rem 0 1rem}
.hsingle-note{font-size:1.08rem;color:var(--cream-2);margin-bottom:1.6rem;max-width:48ch}
.hsingle-note p{margin:0 0 1rem}
.single-product form.variations_form .pack-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin:.1rem 0 1rem}
.single-product form.variations_form .pack-btn{flex:1;min-width:96px;text-align:center;background:var(--ink-2);border:1.5px solid var(--line);border-radius:10px;padding:.9rem .6rem;color:var(--cream)}
.single-product form.variations_form .pack-btn:hover{border-color:var(--accent,var(--gold))}
.single-product form.variations_form .pack-btn.sel{border-color:var(--accent,var(--gold));background:rgba(216,154,60,.10)}
.single-product .woocommerce-variation-add-to-cart{display:flex;gap:.8rem;align-items:stretch;flex-wrap:wrap;margin-bottom:1rem}
.single-product .quantity input.qty{min-height:52px;border-radius:8px!important}
.single-product .single_add_to_cart_button{min-height:52px;flex:1 1 220px;border-color:var(--cream)!important;color:var(--cream)!important;border-radius:8px!important}
.harper-good-line{display:flex;align-items:center;gap:.5rem;margin:.15rem 0 1.2rem;color:var(--gold);font-size:.78rem}
.single-product .product_meta{border-top:1px solid var(--line);padding-top:1rem;font-size:.76rem}
.hsingle-sections{padding-top:clamp(8px,2vw,16px);margin-top:clamp(36px,6vw,64px);max-width:820px;gap:clamp(24px,5vw,42px)}
.hsingle-sec{border-top:1px solid var(--line);padding-top:clamp(18px,3vw,28px)}
.hsingle-sec h2{font-size:clamp(1.4rem,4vw,2.2rem);margin:0 0 1rem}
.hsingle-rte{max-width:68ch;color:var(--cream-2)}
.hsingle-rte ul{list-style:none;margin:.5rem 0 0;padding:0;max-width:560px}
.hsingle-rte li{border-bottom:1px solid var(--line);padding:.5rem 0}

/* Keep related products compact, even with the larger single-product styling. */
.single-product .related.products,.single-product .up-sells{grid-column:1/-1;margin-top:clamp(36px,6vw,64px)}
.single-product .related.products>h2,.single-product .up-sells>h2{font-size:clamp(1.4rem,4vw,2rem)}
.single-product .related.products ul.products,.single-product .up-sells ul.products{gap:14px}
@media(min-width:900px){.single-product .related.products ul.products,.single-product .up-sells ul.products{grid-template-columns:repeat(4,1fr)!important}}
.single-product .related.products .beer,.single-product .up-sells .beer{padding:14px;border-radius:12px}
.single-product .related.products .beer-img,.single-product .up-sells .beer-img{min-height:150px}
.single-product .related.products .beer-img img,.single-product .up-sells .beer-img img{max-height:150px!important}
.single-product .related.products .beer-name,.single-product .up-sells .beer-name{font-size:clamp(1.05rem,2.4vw,1.35rem)}
.single-product .related.products .beer-style,.single-product .up-sells .beer-style{font-size:.58rem}
.single-product .related.products .beer-price,.single-product .up-sells .beer-price{font-size:1rem}

/* Grouped shop page, based on the supplied shop reference. */
.harper-shop-main{padding-top:0}
.harper-shop-hero{padding:clamp(36px,7vw,72px) 0 clamp(20px,4vw,36px)}
.harper-shop-hero .woocommerce-breadcrumb{margin-bottom:0}
.harper-shop-hero h1{font-size:clamp(2.6rem,9vw,5.4rem);margin:.8rem 0}
.harper-shop-hero p{max-width:50ch;color:var(--cream-2);font-size:1.1rem;margin:0}
.harper-shopbar2{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-bottom:1.8rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.harper-shop-cats{display:flex;gap:.5rem;flex-wrap:wrap}
.harper-shop-cats .cat{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-label,"Space Mono",monospace);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.5em 1em;border:1px solid var(--line);border-radius:100px;cursor:pointer;transition:.15s;color:var(--cream-2)}
.harper-shop-cats .cat.active,.harper-shop-cats .cat:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.harper-shop-sections{display:grid;gap:clamp(42px,7vw,72px)}
.harper-shop-section{scroll-margin-top:100px}
.harper-shop-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--line);padding-bottom:.7rem}
.harper-shop-section-head h2{font-size:clamp(1.5rem,4vw,2.2rem);margin:.15rem 0 0;line-height:1}
.harper-section-link{font-family:var(--font-label,"Space Mono",monospace);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:3px;white-space:nowrap}
.harper-shop-products--beer{margin-bottom:0!important}
.hmini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:720px){.hmini-grid{grid-template-columns:repeat(4,1fr)}}
.hmini-card{position:relative;display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--ink-2);transition:border-color .2s,transform .2s;color:var(--cream)}
.hmini-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.hmini-card.sold{opacity:.72}
.hmini-flag{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-label,"Space Mono",monospace);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--gold);padding:.2em .55em;border-radius:3px}
.hmini-tile{height:130px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink-2),#2a241c);overflow:hidden}
.hmini-tile img{width:auto!important;height:auto!important;max-width:92%!important;max-height:112px!important;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.hmini-tile span{font-family:var(--font-display,"Anton",sans-serif);text-transform:uppercase;color:rgba(241,231,212,.28);font-size:1.1rem;text-align:center;padding:1rem}
.hmini-body{padding:.9rem 1rem}
.hmini-name{font-weight:700;line-height:1.25}
.hmini-price{font-family:var(--font-label,"Space Mono",monospace);color:var(--gold);font-size:.85rem;margin-top:.25rem}
.seasonal-note{max-width:var(--maxw);margin:1.6rem auto 0;font-family:var(--font-label,"Space Mono",monospace);font-size:.76rem;color:var(--cream-2);text-align:center}
@media(max-width:679px){
  .harper-shop-section-head{align-items:start;flex-direction:column}
  .single-product .related.products ul.products,.single-product .up-sells ul.products{grid-template-columns:repeat(2,1fr)!important}
  .single-product .related.products .beer,.single-product .up-sells .beer{padding:12px}
}


/* ============================================================
   V1.5 — EDITABLE PRODUCT PAGE + SHOP GRID FIX
============================================================ */
/* WooCommerce clearfix pseudo-elements can become empty CSS-grid items. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.harper-shop-products::before,
.harper-shop-products::after{content:none!important;display:none!important;clear:none!important}

/* Product page now leans on editable Woo product fields while keeping the reference feel. */
.hsingle-buy{max-width:560px}
.hsingle-style{max-width:52ch}
.hsingle-highlights{display:grid;grid-template-columns:1fr;gap:.55rem;margin:-.25rem 0 1.35rem;max-width:520px}
@media(min-width:620px){.hsingle-highlights{grid-template-columns:repeat(2,1fr)}}
.hsingle-highlight{border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.025);padding:.75rem .85rem;display:flex;gap:.45rem;flex-direction:column;min-height:88px}
.hsingle-highlight strong{font-family:var(--font-label,"Space Mono",monospace);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--accent,var(--gold))}
.hsingle-highlight span{color:var(--cream-2);line-height:1.4}
.hsingle-subhead{font-family:var(--font-label,"Space Mono",monospace);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-2);margin:1.4rem 0 .5rem}
.hsingle-detail-list{list-style:none;display:grid;grid-template-columns:1fr;gap:.45rem;max-width:560px;margin:.5rem 0 0;padding:0}
.hsingle-detail-list li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.52rem 0;font-family:var(--font-label,"Space Mono",monospace);font-size:.82rem}
.hsingle-detail-list li span{color:var(--cream-2)}
.hsingle-detail-list li strong{color:var(--cream);font-weight:var(--label-font-weight,700);text-align:right}
.hsingle-pairgrid{display:grid;grid-template-columns:1fr;gap:.7rem;max-width:820px}
@media(min-width:620px){.hsingle-pairgrid{grid-template-columns:repeat(2,1fr)}}
.hsingle-pair{display:flex;gap:.75rem;background:var(--ink-2);border:1px solid var(--line);border-radius:8px;padding:.9rem 1rem}
.hsingle-pair .d{color:var(--accent,var(--gold));font-weight:700;line-height:1.2}
.hsingle-pair strong{display:block;color:var(--cream);margin-bottom:.15rem}
.hsingle-pair p{margin:0;color:var(--cream-2);line-height:1.45}
.hsingle-sec--small{max-width:760px}
/* Avoid duplicated ABV/IBU feel: style line is for style/appearance, chips are for numbers. */
.hsingle-chips + .price{margin-top:.1rem}
/* ============================================================
   V1.5.1 — PRODUCT DETAILS HEADING ALIGNMENT
============================================================ */
/* Details is now a first-level product section, matching About this beer and Goes well with.
   The fallback h3 selector is kept so older cached markup still receives the larger treatment. */
.single-product .hsingle-details-sec h2,
.single-product .hsingle-subhead{
  font-family:var(--font-display,"Anton",Impact,sans-serif);
  font-weight:var(--display-font-weight,400);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
  font-size:clamp(1.4rem,4vw,2.2rem);
  color:var(--cream);
  margin:0 0 1rem;
}
.single-product .hsingle-details-sec .hsingle-detail-list{margin-top:0}

/* ============================================================
   V1.5.4 — STOCKISTS MAP, PAGE + HEADER/HOVER FIXES
============================================================ */
/* Admin-bar aware sticky header. This prevents the top of the sticky nav being hidden while logged in. */
.nav{z-index:999;top:0}
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

/* Shop button hover text should stay black, including inside nav links. */
.btn-solid:hover,
.nav-links a.btn-solid:hover,
.nav .btn-solid:hover{color:var(--ink)!important}

.stockists-home{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink),#17130f)}
.stockists-home-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;margin-bottom:clamp(20px,4vw,34px)}
.stockists-home-head h2{font-size:clamp(2rem,5.6vw,var(--section-title-max,3.6rem));margin:.55rem 0 .75rem;line-height:1}
.stockists-home-head p{max-width:58ch;color:var(--cream-2);font-size:1.05rem;margin:0}
.stockists-home-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.stockists-home-grid{display:grid;grid-template-columns:1fr;gap:clamp(18px,4vw,34px);align-items:start}
@media(min-width:940px){.stockists-home-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)}}
.stockist-mapwrap{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--ink-2);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.stockist-mapwrap::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(216,154,60,.12);z-index:1;border-radius:inherit}
.stockist-mapwrap iframe{display:block;width:100%;height:var(--stockist-map-height,480px);border:0;filter:saturate(.9) contrast(.95)}
.stockist-nearest{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:clamp(16px,3vw,22px)}
.stockist-nearest-top{display:flex;align-items:end;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.85rem;margin-bottom:.8rem}
.stockist-nearest-top h3{font-family:var(--font-display,"Anton",Impact,sans-serif);font-weight:var(--display-font-weight,400);font-size:clamp(1.35rem,3vw,1.9rem);text-transform:uppercase;line-height:1;margin:0}
.stockist-nearest-top span,.stockist-loc-note{font-family:var(--font-label,"Space Mono",monospace);font-size:.68rem;letter-spacing:.04em;color:var(--cream-2);text-align:right;max-width:25ch;margin:0}
.stockist-loc-note{text-align:left;max-width:none;margin:0 0 .85rem;color:rgba(241,231,212,.58)}
.stockist-list{display:grid;gap:.7rem}
.stockist-card{position:relative;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);padding:clamp(15px,3vw,20px);transition:border-color .18s,transform .18s,background .18s}
.stockist-card:hover{border-color:rgba(216,154,60,.7);transform:translateY(-2px);background:rgba(255,255,255,.04)}
.stockist-card.compact{padding:14px;border-radius:12px}
.stockist-card[hidden]{display:none!important}
.stockist-area-pill{display:inline-flex;font-family:var(--font-label,"Space Mono",monospace);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--gold);border-radius:999px;padding:.25em .65em;margin-bottom:.65rem;font-weight:700}
.stockist-card h3{font-family:var(--font-display,"Anton",Impact,sans-serif);font-weight:var(--display-font-weight,400);font-size:clamp(1.35rem,3vw,1.85rem);text-transform:uppercase;line-height:1;margin:0 0 .45rem;color:var(--cream)}
.stockist-card.compact h3{font-size:1.25rem}
.stockist-address{color:var(--cream-2);line-height:1.45;margin:.15rem 0 .55rem}
.stockist-note{color:rgba(241,231,212,.72);font-size:.92rem;line-height:1.45;margin:.4rem 0 .65rem}
.stockist-meta{display:flex;gap:.35rem;flex-wrap:wrap;margin:.65rem 0 .75rem}
.stockist-pill{display:inline-flex;align-items:center;border:1px solid rgba(216,154,60,.45);border-radius:999px;padding:.22em .62em;font-family:var(--font-label,"Space Mono",monospace);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.stockist-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}
.stockist-dir,.stockist-web{font-family:var(--font-label,"Space Mono",monospace);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border-bottom:1px solid currentColor;padding-bottom:2px}
.stockist-web{color:var(--cream-2)}
.stockist-distance{margin-left:auto;font-family:var(--font-label,"Space Mono",monospace);font-size:.68rem;color:var(--cream-2)}
.stockist-empty,.stockist-empty-card p{color:var(--cream-2)}

.stockists-page .stockists-head{padding:clamp(44px,8vw,86px) 0 clamp(26px,5vw,46px);background:radial-gradient(circle at 15% 15%,rgba(216,154,60,.12),transparent 35%),var(--ink)}
.stockists-head .eyebrow{margin-bottom:1rem}
.stockists-head h1{font-size:clamp(2.8rem,9vw,6.4rem);margin:0 0 1rem;max-width:10ch}
.stockists-head p{max-width:64ch;color:var(--cream-2);font-size:clamp(1.03rem,2.2vw,1.22rem);margin:0 0 1.35rem}
.stockists-head-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.stockists-page-copy{margin-top:1.2rem;max-width:70ch;color:var(--cream-2)}
.stockists-page .page-map{border-radius:0;border-inline:0;border-left:0;border-right:0;border-color:var(--line)}
.stockists-page .page-map iframe{height:var(--stockist-map-height,480px)}
.stockists-all{padding-top:clamp(34px,6vw,66px)}
.stockist-area-section{margin-bottom:clamp(34px,6vw,62px)}
.stockist-area-section h2{font-family:var(--font-display,"Anton",Impact,sans-serif);font-weight:var(--display-font-weight,400);font-size:clamp(1.7rem,4.8vw,2.8rem);text-transform:uppercase;line-height:1;margin:0 0 1rem;border-bottom:1px solid var(--line);padding-bottom:.75rem;display:flex;justify-content:space-between;gap:1rem;align-items:end}
.stockist-area-section h2 span{font-family:var(--font-label,"Space Mono",monospace);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);line-height:1.3;white-space:nowrap}
.stockist-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.stockist-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.stockist-grid{grid-template-columns:repeat(3,1fr)}}
.stockist-empty-card{border:1px solid var(--line);border-radius:16px;background:var(--ink-2);padding:clamp(22px,5vw,40px)}
.stockist-empty-card h2{font-size:clamp(1.9rem,5vw,3rem);margin:0 0 1rem}
@media(max-width:680px){
  .stockists-home-actions{width:100%}.stockists-home-actions .btn{flex:1;justify-content:center}
  .stockist-nearest-top{align-items:start;flex-direction:column}.stockist-nearest-top span{text-align:left;max-width:none}
  .stockist-area-section h2{align-items:start;flex-direction:column}
}

/* Harper patch 1.5.5 — robust stockists template/shortcode fallback. */
.shortcode-stockists{margin:calc(var(--band-y,56px) * -1) 0}
.shortcode-home-stockists{margin-block:clamp(24px,5vw,56px)}


/* ============================================================
   V1.5.6 — STRONGER STICKY HEADER + SHOP MENU BUTTON FIX
============================================================ */
/* Keep the sticky header completely visible while logged in and on normal front-end views. */
.nav{
  position:sticky!important;
  top:0!important;
  z-index:10000!important;
  overflow:visible!important;
}
body.admin-bar .nav{top:32px!important}
@media(max-width:782px){body.admin-bar .nav{top:46px!important}}
@supports selector(html:has(#wpadminbar)){
  html:has(#wpadminbar) .nav{top:32px!important}
  @media(max-width:782px){html:has(#wpadminbar) .nav{top:46px!important}}
}
.nav-inner{min-height:58px;overflow:visible}
.nav-right{overflow:visible}

/* Treat any primary-menu Shop link as a button, even when it comes from Appearance → Menus
   and therefore does not have the fallback .btn-solid class. */
.nav .nav-links a[href*="/shop"],
.nav .nav-links a[href$="shop/"],
.nav .nav-links a.btn-solid{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.5em 1em;
  border:1.5px solid var(--cream);
  border-radius:3px;
  background:var(--cream);
  color:var(--ink)!important;
  opacity:1!important;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.nav .nav-links a[href*="/shop"]:hover,
.nav .nav-links a[href*="/shop"]:focus,
.nav .nav-links a[href$="shop/"]:hover,
.nav .nav-links a[href$="shop/"]:focus,
.nav .nav-links a.btn-solid:hover,
.nav .nav-links a.btn-solid:focus{
  background:var(--gold)!important;
  border-color:var(--gold)!important;
  color:var(--ink)!important;
}

/* ============================================================
   V1.5.8 — STOCKISTS MAP WIDTH REFINEMENT
   Keep the Stockists page map aligned with the main theme wrap instead of
   spanning the full browser width. Homepage map remains inside its grid.
============================================================ */
.stockists-page{background:var(--ink)}
.stockists-page .page-map{
  width:min(calc(100% - clamp(32px,6vw,96px)),var(--stockist-page-map-max-width,1180px));
  max-width:var(--stockist-page-map-max-width,1180px);
  margin:clamp(22px,4vw,42px) auto 0;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015)),var(--ink-2);
  box-shadow:0 22px 70px rgba(0,0,0,.28),0 0 0 1px rgba(216,154,60,.08) inset;
}
.stockists-page .page-map iframe{
  border-radius:18px;
}
.stockists-page .stockists-all{
  padding-top:clamp(30px,5vw,54px);
}
@media(max-width:680px){
  .stockists-page .page-map{
    width:calc(100% - 24px);
    border-radius:14px!important;
  }
  .stockists-page .page-map iframe{border-radius:14px}
}



/* ============================================================
   V1.5.9 — MOBILE MENU OVERFLOW FIX
   Prevent the opened mobile menu, long menu labels, or menu buttons from
   creating horizontal page scroll on small screens.
============================================================ */
html{
  overflow-x:hidden;
  max-width:100%;
}
@supports (overflow-x:clip){
  html,body{overflow-x:clip}
}
body.harper-menu-open{
  overflow-x:hidden;
  touch-action:pan-y;
}
@media(max-width:860px){
  .nav{
    width:100%;
    max-width:100vw;
    left:0;
    right:0;
  }
  .nav .wrap,
  .nav-inner{
    width:100%;
    max-width:100vw;
    min-width:0;
  }
  .brand{
    min-width:0;
    max-width:calc(100vw - 132px);
  }
  .brand-logo{
    max-width:100%!important;
    object-fit:contain;
  }
  .nav-toggle{
    flex:0 0 auto;
    margin-left:auto;
  }
  .nav-right{
    position:fixed!important;
    top:var(--mobile-nav-top,58px)!important;
    left:0!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    max-height:calc(100dvh - var(--mobile-nav-top,58px));
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box;
    padding:18px max(18px,env(safe-area-inset-right)) 22px max(18px,env(safe-area-inset-left));
    transform:none!important;
  }
  body.admin-bar .nav-right{
    top:calc(var(--mobile-nav-top,58px) + 46px)!important;
    max-height:calc(100dvh - var(--mobile-nav-top,58px) - 46px);
  }
  .nav-links,
  .nav-links li,
  .nav-links a,
  .nav-account-group,
  .nav-account{
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .nav-links{
    width:100%;
    overflow-x:hidden;
  }
  .nav-links li{
    width:100%;
  }
  .nav-links a,
  .nav-account{
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:normal;
  }
  .nav .nav-links a[href*="/shop"],
  .nav .nav-links a[href$="shop/"],
  .nav .nav-links a.btn-solid{
    width:fit-content;
    max-width:100%;
  }
}
@media(max-width:380px){
  .nav-inner{gap:.7rem}
  .nav-toggle{padding:.45em .6em;font-size:.92rem}
  .brand{max-width:calc(100vw - 112px)}
}