/* ==========================================================================
   BBQ LORD — responsive layer.
   Loaded last on every page, after site, shop, order and account styles.
   Breakpoints: 1200 · 1000 · 900 · 768 · 600 · 480 · 380 (small phones)
   plus short-landscape and hover-less (touch) rules.
   ========================================================================== */

/* ---------- global safety ---------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;overflow-wrap:break-word}
img,svg,video,iframe,embed,object{max-width:100%}
img,video{height:auto}
iframe{border:0}
table{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
h1,h2,h3,h4,.mega,.flowhead__title,.acct-head__title,.bbq-thanks__title,.pagehead h1{overflow-wrap:break-word;hyphens:manual}
.entry{min-width:0}
.entry .wp-block-table,.entry figure.wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry .alignwide,.entry .alignfull{max-width:100%}
.entry .wp-block-columns{flex-wrap:wrap}
.entry .wp-block-embed__wrapper iframe{width:100%}
/* long unbroken strings (emails, URLs, order numbers) never push a card wider than the screen */
.deflist dd,.acct-card,.acct-order,.woocommerce-account address,.bbq-thanks__facts strong,.bbq-citem__name,.bbq-minibag__name,.foot__col a{overflow-wrap:anywhere}
/* safe areas on notched phones */
.nav__in{padding-left:max(var(--edge),env(safe-area-inset-left));padding-right:max(var(--edge),env(safe-area-inset-right))}

/* ---------- touch devices ---------------------------------------------- */
@media(hover:none){
  .card:hover,.fcard:hover,.ev:hover,.acct-quick__item:hover,.fav:hover{transform:none;box-shadow:none}
  .btn:hover{box-shadow:none}
  .btn--primary::after{display:none}
  a,button,input,select,textarea,label{-webkit-tap-highlight-color:rgba(211,84,44,.14)}
}

/* ---------- iOS: stop inputs zooming the page on focus ----------------- */
/* Safari zooms any field under 16px. Every field is 16px on small screens. */
@media(max-width:1000px){
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=search],input[type=number],input[type=date],input[type=time],input[type=url],select,textarea,
  .input-text,.bbq-co .input-text,.bbq-co select,.bbq-co textarea,.woocommerce-account form .input-text,.woocommerce-account form select,.bbq-auth .input-text,.menu__search input,.field input,.field select,.field textarea,.bbq-coupon__row input,.acct-copy input,
  .bbq-flow .select2-container .select2-selection--single,.select2-container .select2-search__field{font-size:16px!important}
}

/* ---------- containers & sections ------------------------------------- */
@media(max-width:600px){
  :root{--edge:18px}
  .sec{padding:clamp(56px,14vw,80px) 0}
  .h-xl{font-size:clamp(2.1rem,10vw,3rem)}
  .h-lg{font-size:clamp(1.8rem,8.4vw,2.5rem)}
  .h-md{font-size:clamp(1.35rem,6vw,1.75rem)}
  .lede{font-size:1rem}
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow .btn{width:100%}
  .btnrow--center{align-items:stretch}
  .split{gap:28px}
  .deflist div{flex-direction:column;gap:4px}
  .deflist dd{text-align:left}
}
@media(max-width:380px){
  :root{--edge:14px}
  .btn{padding:0 22px;font-size:.74rem}
  .btn--sm{padding:0 16px}
}

/* ---------- header & mobile menu -------------------------------------- */
@media(max-width:1000px){
  .nav__right{gap:8px}
  .nav__lock span{display:none}
}
@media(max-width:480px){
  .nav__logo img{height:32px}
  .nav__lock b{font-size:.92rem}
  .nav__bag,.nav__burger{width:42px;height:42px}
}
@media(max-width:360px){.nav__lock{display:none}}
.mmenu{overflow-y:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start}
@media(min-height:640px){.mmenu{justify-content:center}}
@media(max-height:560px){.mmenu ol a{font-size:clamp(1.6rem,7vh,2.4rem)}.mmenu__foot{margin-top:20px}}

/* ---------- page headers ---------------------------------------------- */
@media(max-width:600px){
  .pagehead{padding:calc(var(--nav-h-compact) + 36px) 0 32px}
  .pagehead h1{font-size:clamp(2rem,10vw,2.8rem)}
  .crumbs{flex-wrap:wrap;margin-bottom:14px}
}

/* ---------- hero: landscape phones ------------------------------------ */
@media(max-height:500px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__in{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)!important;align-items:center;padding-bottom:24px}
  .hero__stack{max-width:260px}
  .float .float__img{max-height:62vh}
  .hero .mega{font-size:clamp(1.8rem,5.4vw,2.6rem)!important}
  .hero__sub{margin:12px 0 16px}
}

/* ---------- footer ---------------------------------------------------- */
@media(max-width:600px){
  .foot__top{padding:48px 0 32px}
  .foot__grid{gap:28px}
  .foot__bar .wrap{flex-direction:column;gap:10px}
  .foot__bar .wrap>span:last-child{gap:10px 16px}
}

/* ---------- popups ---------------------------------------------------- */
@media(max-width:600px){
  .promo,.evmodal{padding:0;align-items:end}
  .promo__box,.evmodal__box{max-height:92svh;border-radius:24px 24px 0 0}
  .promo__art{min-height:120px}
  .promo__art img{max-width:96px}
  .promo__body{padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
  .promo__acts{flex-direction:column;align-items:stretch}
  .promo__acts .btn{width:100%}
  .evmodal__body{padding:22px 20px calc(22px + env(safe-area-inset-bottom))}
  .evmodal__acts{flex-direction:column}
  .evmodal__acts .btn{width:100%}
}

/* ---------- events ---------------------------------------------------- */
@media(max-width:480px){
  .evstats{gap:18px 12px}
  .evstat__n{font-size:2.2rem}
  .evstat__l{font-size:.64rem;letter-spacing:.1em}
  .ev__meta{flex-direction:column;gap:6px}
  .evpast>div{flex-direction:column;gap:4px}
  .evpast dd{text-align:left;white-space:normal}
}

/* ---------- product page & shop --------------------------------------- */
@media(max-width:900px){
  .woocommerce div.product div.images,.woocommerce div.product div.summary{width:100%!important;float:none!important}
}
@media(max-width:600px){
  .woocommerce div.product form.cart{flex-wrap:wrap;gap:12px}
  .woocommerce div.product form.cart .button{flex:1 1 100%}
  .woocommerce div.product .woocommerce-tabs ul.tabs{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding:0!important}
  .woocommerce div.product .woocommerce-tabs ul.tabs::-webkit-scrollbar{display:none}
  .woocommerce div.product .woocommerce-tabs ul.tabs li{flex:none}
  .woocommerce table.variations,.woocommerce table.variations tbody,.woocommerce table.variations tr,.woocommerce table.variations th,.woocommerce table.variations td{display:block;width:100%}
}

/* ---------- menu page ------------------------------------------------- */
@media(max-width:1000px){
  .menu__side{grid-template-columns:minmax(0,1fr) auto}
  .menu__filters{max-height:88svh}
}
@media(max-width:380px){
  .menu__filterbtn span{display:none}
  .menu__filterbtn{padding:0 14px}
  .menu__grid .fcard__img{width:92px}
  .qty__add{padding:0 6px 0 12px;gap:6px;font-size:.66rem}
  .qty__btn{width:32px;height:32px}
  .qty__n{min-width:22px}
}

/* ---------- cart / checkout / confirmation ---------------------------- */
@media(max-width:900px){
  .bbq-cart__side,.bbq-co__side{position:static}
}
@media(max-width:600px){
  .flowhead{padding:calc(var(--nav-h-compact) + 24px) 0 22px}
  .flowhead__in{flex-direction:column;align-items:flex-start;gap:16px}
  .flowhead__title{font-size:clamp(1.9rem,9vw,2.4rem)}
  .bbq-co__step{padding:18px 16px;border-radius:18px}
  .bbq-co__summary,.bbq-cart__side .cart_totals{padding:18px 16px;border-radius:18px}
  .bbq-cart__actions{flex-direction:column;align-items:stretch}
  .bbq-coupon__row{flex-direction:column}
  .woocommerce .bbq-coupon__row .button{width:100%}
  .bbq-flow form.checkout_coupon{flex-direction:column;align-items:stretch}
  .bbq-flow form.checkout_coupon .form-row-first{min-width:0}
  .bbq-thanks__hero{padding:26px 18px;border-radius:20px}
  .bbq-thanks__facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bbq-thanks__acts{width:100%}
  .bbq-thanks__details table.shop_table th,.bbq-thanks__details table.shop_table td{padding:12px!important}
}
@media(max-width:380px){
  .bbq-thanks__facts{grid-template-columns:1fr}
  .bbq-citem{grid-template-columns:64px minmax(0,1fr) auto}
  .bbq-citem__img img{width:64px;height:64px}
}

/* ==========================================================================
   MY ACCOUNT — mobile rebuild
   ========================================================================== */

/* header: long names and the points chip always fit */
@media(max-width:768px){
  .acct-head{padding:calc(var(--nav-h-compact) + 28px) 0 24px}
  .acct-head__in{flex-direction:column;align-items:stretch;gap:16px}
  .acct-head__title{font-size:clamp(1.8rem,8.6vw,2.6rem);line-height:1;letter-spacing:-.01em}
  .acct-head__lede{font-size:.95rem}
  .acct-chip{align-self:stretch;justify-content:space-between;flex-wrap:wrap;border-radius:16px;padding:10px 12px 10px 14px}
}

/* layout: tab strip that scrolls, never squashes; content below */
@media(max-width:900px){
  .acct{display:block}
  .acct__nav{position:sticky;top:var(--nav-h-compact);z-index:30;margin:0 calc(-1 * var(--edge)) 16px;padding:10px 0;overflow:hidden}
  .acct__nav ul{padding:0 var(--edge);scroll-padding:0 var(--edge);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .acct__nav li{scroll-snap-align:start}
  .acct__nav a{gap:8px;padding:0 14px}
  .acct__nav a svg{width:16px;height:16px}
  /* fade hints there are more tabs off-screen */
  .acct__nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;background:linear-gradient(90deg,rgba(247,241,230,0),rgba(247,241,230,.95));pointer-events:none}
}
@media screen and (max-width:782px){.admin-bar .acct__nav{top:calc(var(--nav-h-compact) + 46px)}}
@media screen and (max-width:600px){.admin-bar .acct__nav{top:var(--nav-h-compact)}}

/* dashboard cards */
@media(max-width:600px){
  .acct-dash{gap:12px}
  .acct-card{padding:18px 16px;border-radius:18px}
  .acct-card__head{flex-wrap:wrap;gap:6px 12px}
  .acct-card__head h2{font-size:1.2rem}
  .acct-quick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .acct-quick__item{padding:14px;border-radius:16px}
  .acct-quick__item b{font-size:1rem}
  .acct-quick__item--hot{grid-column:1/-1}
  .acct-points__top{flex-direction:column;gap:10px}
  .acct-points__n{font-size:clamp(2.4rem,13vw,3rem)}
  .acct-tier{align-self:flex-start}
  .acct-order{flex-direction:column;align-items:stretch;gap:10px}
  .acct-order__main{flex:none}
  .acct-order__items{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .acct-order__acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .acct-order__acts .btn{width:100%;min-height:44px}
  .acct-order__acts .btn:only-child{grid-column:1/-1}
  .acct-copy{flex-direction:column;align-items:stretch}
  .acct-copy input{flex:none;width:100%}
  .acct-copy .btn{width:100%;min-height:44px}
  .acct-tiers li{padding:14px}
  .acct-ledger li{align-items:flex-start}
  .acct-empty{padding:32px 18px}
}
@media(max-width:360px){.acct-quick{grid-template-columns:1fr}}

/* favourites grid inside account */
@media(max-width:600px){.acct-favs.menu__grid{grid-template-columns:1fr}}

/* WooCommerce orders table → stacked cards with labels */
@media(max-width:768px){
  .woocommerce-account table.shop_table_responsive,.woocommerce-account table.shop_table_responsive tbody{display:block;width:100%}
  .woocommerce-account table.shop_table_responsive thead{display:none}
  .woocommerce-account table.shop_table_responsive tr{display:block;margin:0 0 12px;padding:6px 0}
  .woocommerce-account table.shop_table_responsive tr td,.woocommerce-account table.shop_table_responsive tr th{display:flex!important;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px!important;text-align:right!important;border:0!important;border-top:1px solid rgba(43,30,23,.06)!important}
  .woocommerce-account table.shop_table_responsive tr td:first-child,.woocommerce-account table.shop_table_responsive tr th:first-child{border-top:0!important}
  .woocommerce-account table.shop_table_responsive tr td::before{content:attr(data-title);float:none!important;flex:none;font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-500);text-align:left}
  .woocommerce-account table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-actions{flex-wrap:wrap;justify-content:stretch}
  .woocommerce-account table.shop_table_responsive tr td.woocommerce-orders-table__cell-order-actions::before{display:none}
  .woocommerce-account .woocommerce-orders-table .button{flex:1 1 120px;margin:0!important;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center}
  .woocommerce-account .woocommerce-pagination{flex-wrap:wrap}
  .woocommerce-account .woocommerce-pagination .button{flex:1}
}

/* single order view */
@media(max-width:600px){
  .woocommerce-account .woocommerce-table--order-details th,.woocommerce-account .woocommerce-table--order-details td{padding:12px!important;font-size:.86rem}
  .woocommerce-account .woocommerce-columns--addresses{display:grid;gap:14px}
  .woocommerce-account .woocommerce-columns--addresses .woocommerce-column{width:100%!important;float:none!important}
  .woocommerce-account .order-again .button{width:100%}
}

/* address + profile forms: one column, full-width fields and buttons */
@media(max-width:600px){
  .woocommerce-account .woocommerce-Addresses{grid-template-columns:1fr}
  .woocommerce-account .woocommerce-EditAccountForm,.woocommerce-account .woocommerce-address-fields{padding:18px 16px;border-radius:18px}
  .woocommerce-account form .form-row-first,.woocommerce-account form .form-row-last,.woocommerce-account form .form-row-wide{width:100%!important;float:none!important;margin-right:0!important}
  .woocommerce-account form .button,.woocommerce-account form button[type=submit]{width:100%;min-height:52px}
  .woocommerce-account .woocommerce-ResetPassword,.woocommerce-account .lost_reset_password{padding:22px 18px;border-radius:20px}
}

/* sign in / join: form first, perks after and compact */
@media(max-width:860px){
  .bbq-auth{gap:16px;max-width:560px}
  .bbq-auth__perks{order:0}
  .bbq-auth__perks ul{grid-template-columns:1fr}
}
@media(max-width:600px){
  .bbq-auth__card{padding:20px 16px;border-radius:20px;box-shadow:0 10px 30px rgba(43,30,23,.08)}
  .bbq-auth__tabs{margin-bottom:20px}
  .bbq-auth__tabs button{min-height:44px;font-size:.68rem;letter-spacing:.06em}
  .bbq-auth__h{font-size:1.5rem;margin-bottom:14px}
  .bbq-auth__between{flex-wrap:wrap;gap:10px}
  .bbq-auth__perks{padding:20px 18px;border-radius:20px}
  .bbq-auth__perks h2{font-size:1.4rem;margin-bottom:14px}
  .bbq-auth__mark{width:40px;margin-bottom:10px}
  .bbq-auth__perks li{font-size:.86rem}
}

/* loyalty box in bag / checkout */
@media(max-width:480px){
  .bbq-loy{padding:12px}
  .bbq-loy__btn{width:100%;justify-self:stretch}
}

/* ---------- WooCommerce notices -------------------------------------- */
@media(max-width:600px){
  .woocommerce-message,.woocommerce-info,.woocommerce-error{display:flex;flex-direction:column;gap:10px;padding:14px 16px 14px 44px!important;font-size:.88rem}
  .woocommerce-message .button,.woocommerce-info .button{float:none!important;order:2;align-self:flex-start;margin:0!important}
}

/* ---------- very large screens --------------------------------------- */
@media(min-width:1800px){
  :root{--max:1560px}
  body{font-size:18px}
}

/* ==========================================================================
   BUTTONS — always visible, always readable, on every device
   ========================================================================== */

/* 1. iOS / Android native button styling never leaks through */
.btn,button.btn,a.btn,input.btn,.qty__add,.qty__btn,.hshop__chip,.menu__tag,.bbq-loy__btn{-webkit-appearance:none;appearance:none;background-clip:padding-box;text-decoration:none;-webkit-text-fill-color:currentColor}

/* 2. WooCommerce's own .button rules (grey or purple) never override brand buttons */
.woocommerce .btn,.woocommerce a.btn,.woocommerce button.btn,.woocommerce input.btn,
.woocommerce-page .btn,.woocommerce-page a.btn,.woocommerce-page button.btn{background:var(--bg)!important;color:var(--fg)!important;border:2px solid var(--bd)!important;border-radius:999px!important;font-family:var(--font-body)!important;font-weight:800!important;letter-spacing:.1em!important;text-transform:uppercase!important;line-height:1.1!important;opacity:1}
.woocommerce .btn:hover,.woocommerce-page .btn:hover{background:var(--bg)!important;color:var(--fg)!important}
/* plain WooCommerce buttons (plugins, notices, account forms) get brand colours too */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--flame-500);color:#FFFDF8;font-family:var(--font-body);font-weight:800;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;line-height:1.1;text-align:center;white-space:normal;opacity:1}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--flame-600);color:#FFFDF8}
.woocommerce a.button.disabled,.woocommerce button.button:disabled,.woocommerce button.button:disabled[disabled]{background:var(--brown-300);color:#FFFDF8;opacity:.7}
.woocommerce-message .button,.woocommerce-info .button,.woocommerce-error .button{background:var(--brown-700)!important;color:var(--cream-100)!important}

/* 3. Outline buttons on every dark surface: cream text and border, never brown-on-brown */
.pagehead .btn--outline,.flowhead .btn--outline,.acct-head .btn--outline,.acct-points .btn--outline,.bbq-thanks__hero .btn--outline,
.bbq-auth__perks .btn--outline,.promo .btn--outline,.foot .btn--outline,.mmenu .btn--outline,.bbq-minibag .btn--outline,.bbq-loy .btn--outline,
.stickycta .btn--outline{--fg:var(--cream-100);--bd:rgba(247,241,230,.5)}
.pagehead .btn--outline:hover,.flowhead .btn--outline:hover,.acct-head .btn--outline:hover,.acct-points .btn--outline:hover,.bbq-thanks__hero .btn--outline:hover,
.bbq-auth__perks .btn--outline:hover,.promo .btn--outline:hover,.foot .btn--outline:hover,.mmenu .btn--outline:hover{--bg:var(--cream-100);--fg:var(--brown-700);--bd:var(--cream-100)}
/* dark buttons on dark surfaces switch to cream so they don't vanish */
.sec--brown .btn--dark,.sec--black .btn--dark,.hero .btn--dark,.pagehead .btn--dark,.foot .btn--dark,.acct-points .btn--dark,.bbq-thanks__hero .btn--dark,.promo .btn--dark{--bg:var(--cream-100);--fg:var(--brown-700)}
/* links styled as buttons on dark surfaces */
.sec--brown .linkline,.sec--black .linkline,.pagehead .linkline,.hero .linkline,.acct-points .linkline,.bbq-thanks__hero .linkline{color:var(--flame-300)!important}

/* 4. Buttons are never faded or offset by scroll animations */
.btn,.btnrow,.hero__ctas,.qty,.hshop__more{visibility:visible}
.rv .btn,.rv.btnrow,.rv.hero__ctas{opacity:1}
@media(max-width:1000px){
  .rv.btnrow,.rv.hero__ctas,.rv:has(> .btn),.btnrow.rv,.hero__ctas.rv{opacity:1!important;transform:none!important}
}

/* 5. Label text always fits: wrap instead of overflowing, never clipped */
.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.15;min-width:0}
.btn .arw{flex:none}

/* 6. Tap size and spacing on phones */
@media(max-width:600px){
  .btn{min-height:52px;padding:10px 22px}
  .btn--sm{min-height:44px;padding:8px 16px}
  .hero__ctas{flex-direction:column;align-items:stretch;gap:10px}
  .hero__ctas .btn{width:100%}
  .sec--cta .btnrow .btn{width:100%}
}

/* 7. Nothing fixed at the bottom covers the last buttons on a page */
@media(max-width:1000px){.has-bagbar .foot__bar{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
@media(max-width:768px){body:not(.has-bagbar) .foot__bar{padding-bottom:calc(86px + env(safe-area-inset-bottom))}}
/* only one bottom bar at a time */
.has-bagbar .stickycta{display:none!important}
@media(max-width:1000px){.has-bagbar .bbq-bagbar:not(.is-in)~.stickycta{display:block!important}}

/* 8. Keyboard focus is always visible */
.btn:focus-visible,.woocommerce .button:focus-visible,.qty__add:focus-visible,.qty__btn:focus-visible,.hshop__chip:focus-visible{outline:3px solid var(--flame-500)!important;outline-offset:3px!important}
.sec--brown .btn:focus-visible,.sec--black .btn:focus-visible,.hero .btn:focus-visible{outline-color:var(--cream-100)!important}

/* ==========================================================================
   BRAND LOGO — stacked flame, grill and wordmark
   The logo is tall, so in the header it hangs below the bar like a badge;
   that keeps "BBQ LORD · KING OF GRILLS" readable at every size.
   ========================================================================== */
.nav__logo{position:relative;align-self:flex-start;height:100%;display:block;flex:none;z-index:2}
.nav__logo img{display:block;width:auto;height:112px;margin-top:10px;filter:drop-shadow(0 8px 18px rgba(23,15,11,.45));transition:height .35s cubic-bezier(.2,.8,.2,1),margin .35s cubic-bezier(.2,.8,.2,1)}
.nav--solid .nav__logo img,.nav-solid-always .nav__logo img{height:78px;margin-top:6px}
.nav__lock{display:none}
.nav__logo:focus-visible{outline:3px solid var(--flame-500);outline-offset:4px;border-radius:12px}
/* keep page content clear of the hanging badge */
.pagehead,.flowhead,.acct-head{padding-top:calc(var(--nav-h) + clamp(56px,6vw,76px))}
@media(max-width:1000px){
  .nav__logo img{height:84px;margin-top:8px}
  .nav--solid .nav__logo img,.nav-solid-always .nav__logo img{height:62px;margin-top:4px}
}
@media(max-width:600px){
  .nav__logo img{height:72px;margin-top:8px}
  .nav--solid .nav__logo img,.nav-solid-always .nav__logo img{height:56px;margin-top:4px}
  .pagehead,.flowhead,.acct-head{padding-top:calc(var(--nav-h-compact) + 48px)}
}
@media(max-width:360px){.nav__logo img{height:62px}.nav--solid .nav__logo img{height:50px}}
@media(max-height:500px) and (orientation:landscape){.nav__logo img,.nav--solid .nav__logo img{height:52px;margin-top:4px}}
/* the mobile overlay menu sits under the badge */
.mmenu{padding-top:calc(var(--nav-h) + 56px)}

/* hero eyebrow: the logo's flame-and-grill beside the tagline */
.hero__crown img{height:56px;width:auto}
@media(max-width:600px){.hero__crown img{height:44px}}

/* loader, offer popup, confirmation, empty bag, sign-in, footer */
.loader__in img{height:clamp(120px,22vh,170px);width:auto}
.promo__art img{width:auto;max-width:none;height:clamp(150px,28vh,230px)}
@media(max-width:720px){.promo__art img{height:120px}}
@media(max-width:600px){.promo__art img{height:96px}}
.bbq-thanks__mark{width:auto;height:clamp(96px,16vw,144px)}
.bbq-empty__mark{width:auto;height:clamp(96px,14vw,134px)}
.bbq-auth__mark{width:auto;height:clamp(84px,10vw,124px)}
@media(max-width:600px){.bbq-auth__mark{height:72px}}
.foot__logo{display:block;width:auto;height:clamp(110px,12vw,150px);margin:0 0 22px}
@media(max-width:600px){.foot__logo{height:104px}}

/* ==========================================================================
   HEADER OPTIONS (Customize → BBQ Lord → Header & navigation)
   ========================================================================== */

/* logo size */
body.logo-medium .nav__logo img{height:88px}
body.logo-medium .nav--solid .nav__logo img,body.logo-medium.nav-solid-always .nav__logo img{height:66px}
body.logo-small .nav__logo{align-self:center;height:auto}
body.logo-small .nav__logo img{height:56px;margin-top:0;filter:none}
body.logo-small .nav--solid .nav__logo img,body.logo-small.nav-solid-always .nav__logo img{height:48px;margin-top:0}
body.logo-small .pagehead,body.logo-small .flowhead,body.logo-small .acct-head{padding-top:calc(var(--nav-h) + clamp(28px,4vw,48px))}
body.logo-small .mmenu{padding-top:calc(var(--nav-h) + 24px)}
@media(max-width:1000px){
  body.logo-medium .nav__logo img{height:70px}
  body.logo-medium .nav--solid .nav__logo img{height:56px}
  body.logo-small .nav__logo img{height:48px}
  body.logo-small .nav--solid .nav__logo img{height:44px}
}
@media(max-width:600px){
  body.logo-medium .nav__logo img{height:62px}
  body.logo-small .nav__logo img,body.logo-small .nav--solid .nav__logo img{height:44px}
}

/* link position */
body.navlinks-center .nav__in>nav{flex:1;display:flex;justify-content:center}
body.navlinks-right .nav__in>nav{margin-left:auto}
body.navlinks-right .nav__right{margin-left:0}
body.navlinks-center .nav__cta,body.navlinks-right .nav__cta{margin-left:0}

/* pill-button menu items: add the CSS class "nav-button" to an item */
.nav__links .nav-button>a{padding:9px 16px!important;border:1.5px solid rgba(247,241,230,.45);border-radius:999px;line-height:1}
.nav__links .nav-button>a::after{display:none}
.nav__links .nav-button>a:hover,.nav__links .nav-button.current-menu-item>a{background:var(--cream-100);color:var(--brown-700)!important;border-color:var(--cream-100)}
.mmenu .nav-button>a{display:inline-block;color:var(--flame-400)}

/* drop-down sub-menus (desktop) */
.nav__links>li{position:relative;display:flex;align-items:center;gap:2px}
.subtoggle{display:inline-grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--cream-200);cursor:pointer;transition:transform .2s,background .15s}
.subtoggle:hover{background:rgba(247,241,230,.12)}
.is-open>.subtoggle,.menu-item-has-children:hover>.subtoggle{transform:rotate(180deg)}
.nav__links .sub-menu{position:absolute;top:calc(100% + 10px);left:-14px;z-index:5;min-width:220px;margin:0;padding:8px;list-style:none;border-radius:16px;background:var(--brown-700);border:1px solid rgba(247,241,230,.12);box-shadow:0 20px 44px rgba(23,15,11,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav__links .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav__links li:hover>.sub-menu,.nav__links li:focus-within>.sub-menu,.nav__links li.is-open>.sub-menu{opacity:1;visibility:visible;transform:none}
.nav__links .sub-menu li{display:block}
.nav__links .sub-menu a{display:block;padding:11px 14px!important;border-radius:10px;font-size:.72rem!important;white-space:nowrap}
.nav__links .sub-menu a::after{display:none}
.nav__links .sub-menu a:hover,.nav__links .sub-menu .current-menu-item>a{background:rgba(247,241,230,.08);color:var(--cream-100)}
@media(hover:none){.nav__links li:hover>.sub-menu{opacity:0;visibility:hidden}.nav__links li.is-open>.sub-menu{opacity:1;visibility:visible}}

/* sub-menus in the mobile overlay: indented, always visible under their parent */
.mmenu ol .sub-menu{list-style:none;margin:2px 0 12px;padding:0 0 0 18px;border-left:2px solid rgba(211,84,44,.5);display:grid;gap:2px}
.mmenu ol .sub-menu a{font-size:clamp(1.05rem,4.6vw,1.35rem)!important;line-height:1.5;text-transform:none;font-family:var(--font-body);font-weight:700;color:var(--brown-200)}
.mmenu ol .sub-menu a:hover{color:var(--flame-400)}
.mmenu ol .subtoggle{display:none}
.mmenu ol li{overflow:visible}

/* current page in the mobile overlay */
.mmenu ol .current-menu-item>a,.mmenu ol .current_page_item>a{color:var(--flame-400)}

/* ---------- uploaded logos: navbar, scrolled, footer ------------------- */
/* any shape of logo keeps its proportions; wide logos are capped so they never crowd the links */
.nav__logo img{max-width:min(260px,46vw);object-fit:contain}
.nav__logo-alt{display:none!important}
.nav--solid .nav__logo:has(.nav__logo-alt) .nav__logo-main,.nav-solid-always .nav__logo:has(.nav__logo-alt) .nav__logo-main{display:none}
.nav--solid .nav__logo-alt,.nav-solid-always .nav__logo-alt{display:block!important}
.foot__logolink{display:inline-block;margin:0 0 22px}
.foot__logolink:focus-visible{outline:3px solid var(--flame-500);outline-offset:4px;border-radius:10px}
.foot__logo{margin:0!important;max-width:min(280px,80vw);object-fit:contain}
.foot__logo--medium{height:clamp(84px,9vw,110px)}
.foot__logo--small{height:clamp(56px,6vw,72px)}
@media(max-width:600px){.foot__logo--medium{height:80px}.foot__logo--small{height:56px}}

/* order-placed logo */
.bbq-thanks__mark{width:auto!important;height:clamp(150px,22vw,220px)!important;max-width:80%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(0,0,0,.35))}
@media(max-width:600px){.bbq-thanks__mark{height:140px!important}}