/* BABA'S site styles. Layout lives in inline styles copied from the design (tasarim/*.dc.html);
   this file holds what inline styles cannot express: resets, hover states and breakpoints that
   the design computed in JavaScript. Hover rules use !important to beat the inline styles. */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#111;font-family:'IBM Plex Sans',sans-serif;-webkit-font-smoothing:antialiased}
body.dark{background:#111;color:#fff}
a{color:#111}
a:hover{color:#E10814}
body.dark a{color:#fff}
body.dark a:hover{color:#fff;text-decoration-color:#E10814}
::selection{background:#E10814;color:#fff}
img{display:block}
h1,h2,h3{overflow-wrap:break-word;hyphens:auto}
html.guide{scroll-behavior:smooth}
h2[id]{scroll-margin-top:90px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:#111;color:#fff;padding:10px 14px;font-weight:600}
.skip:focus{top:8px;color:#fff}
:focus-visible{outline:2px solid #E10814;outline-offset:2px}
button{font-family:inherit}

@media (max-width:767px){
  input,select,textarea{font-size:16px!important}
  main a:not(p a):not(li p a),main button,main summary{min-height:44px}
  main a:not(p a){display:inline-flex;align-items:center}
  main nav a,main [role=tablist] a{min-width:44px}
  footer a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- hover states (design: style-hover) ---- */
.h-ul:hover{text-decoration:underline!important}
.h-ink:hover{color:#111!important}
.h-white:hover{color:#fff!important}
.h-red:hover{color:#E10814!important}
.h-wul:hover{color:#fff!important;text-decoration:underline!important}
.h-row:hover{color:#111!important;background:#FAFAF8!important}
.h-stone:hover{background:#F4F2EE!important;color:#111!important}
.h-gap16:hover{gap:16px!important}
.h-gap14:hover{gap:14px!important}
.h-gap13:hover{gap:13px!important}
.h-red-btn:hover{background:#C1060F!important;color:#fff!important}
.h-dark-btn:hover{background:#2B2A27!important;color:#fff!important}
.h-ghost:hover{background:#1E1E1E!important;color:#fff!important}
.h-dk:hover{background:#1A1A1A!important}
.h-wa:hover{background:#E10814!important;border-color:#E10814!important}

/* ---- header ---- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;font-family:'IBM Plex Sans',sans-serif}
.hdr-spacer{height:116px}
.hdr-bar{background:#111;color:#EDEBE6;overflow:hidden;height:36px;transition:height .2s ease}
.hdr-main{height:80px;transition:height .2s ease}
.hdr-logo{font-size:32px;transition:font-size .2s ease}
.hdr.is-scrolled .hdr-bar{height:0;visibility:hidden}
.hdr.is-scrolled .hdr-main{height:60px}
.hdr.is-scrolled .hdr-logo{font-size:26px}
.hdr-wide{display:contents}
.hdr-desk{display:flex}
.hdr-tab,.hdr-mob{display:none}
@media (max-width:1119px){.hdr-desk{display:none}.hdr-mob{display:flex}.hdr-tab{display:flex}}
@media (max-width:899px){.hdr-wide{display:none}}
@media (max-width:767px){
  .hdr-spacer{height:64px}
  .hdr-bar{height:0;visibility:hidden}
  .hdr-main,.hdr.is-scrolled .hdr-main{height:64px}
  .hdr.is-scrolled .hdr-main{height:56px}
  .hdr-logo,.hdr.is-scrolled .hdr-logo{font-size:26px}
  .hdr-tab{display:none}
}
.mega{display:none}
.hdr.mega-open .mega{display:block}
@media (max-width:1119px){.hdr.mega-open .mega{display:none}}
.mega a.on{color:#E10814!important}
.mega-mark{display:none}
.mega-brand.on .mega-mark{display:block}
.menu-panel{position:fixed;inset:0;z-index:80;background:#fff;display:flex;flex-direction:column;font-family:'IBM Plex Sans',sans-serif;overflow-y:auto}
body.menu-open{overflow:hidden}
.wa-float{position:fixed;right:calc(16px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;background:#111;color:#fff;border:1px solid #111;box-shadow:0 0 0 1px #fff;border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;transition:background .15s,opacity .15s}
.wa-float.is-hidden{opacity:0;pointer-events:none}
body.dark .wa-float{color:#fff}

/* ---- footer accordion (mobile) ---- */
.ft-col{padding:24px 24px 32px 0}
.ft-head{min-height:0;margin-bottom:18px;cursor:default;pointer-events:none}
.ft-sign{display:none}
.ft-list{display:grid!important}
.ft-row{min-height:28px}
@media (max-width:767px){
  .ft-col{padding:0}
  .ft-head{min-height:52px;margin-bottom:0;cursor:pointer;pointer-events:auto}
  .ft-sign{display:inline}
  .ft-list{display:none!important;padding-bottom:12px}
  .ft-col.open .ft-list{display:grid!important}
  .ft-row{min-height:44px}
}

/* ---- home ---- */
.why-head{flex-direction:row;align-items:baseline}
@media (max-width:767px){.why-head{flex-direction:column;align-items:flex-start}}
.bbq-img{order:0}
@media (max-width:959px){.bbq-img{order:1}}

/* ---- product page ---- */
.gal{flex-direction:row}
.gal-thumbs{flex-direction:column}
@media (max-width:699px){.gal{flex-direction:column-reverse}.gal-thumbs{flex-direction:row}}
.thumb.on{border-color:#111!important;outline:2px solid #E10814!important}
.strip{grid-template-columns:repeat(auto-fit,minmax(118px,1fr))}
@media (max-width:767px){.strip{grid-template-columns:repeat(2,minmax(0,1fr))}.strip>div.odd-last{grid-column:1 / -1}}
.tabbar{scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab-fade{display:none}
@media (max-width:899px){.tabbar{padding-right:40px}.tab-fade{display:flex}.tab-fade.at-end{display:none}}
.tab-panel{display:none}
.tab-panel.on{display:flex}
.tab-ind{display:none}
[aria-selected=true] .tab-ind{display:block}
.rowlist li{grid-template-columns:44px minmax(0,200px) minmax(0,1fr)}
.rowlist li.nolabel{grid-template-columns:44px minmax(0,1fr)}
@media (max-width:639px){.rowlist li,.rowlist li.nolabel{grid-template-columns:32px minmax(0,1fr)}.rowlist li>span:last-child{grid-column:2}}
.spec-cards{display:none}
@media (max-width:639px){.spec-wide{display:none}.spec-cards{display:block}}
.quickbar,.quickbar-spacer{display:none}
@media (max-width:1023px){.quickbar{display:grid}.quickbar-spacer{display:block}}
.zoom{position:fixed;inset:0;z-index:95;background:#F4F2EE;display:flex;align-items:center;justify-content:center;cursor:zoom-out}

/* ---- category ---- */
.filters{display:block}
.filter-btn{display:none!important}
.chips-desk{display:flex}
@media (max-width:899px){.filters{display:none}.filter-btn{display:inline-flex!important}.chips-desk{display:none}}
.card-extra{display:flex}
@media (max-width:599px){.card-extra{display:none!important}}
.sheet{position:fixed;inset:0;z-index:90;background:rgba(17,17,17,.55);display:flex;align-items:flex-end}
.check{width:16px;height:16px;border:1px solid #111;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;line-height:1}
.on>.check{background:#E10814}
.chip-opt.on{background:#111!important;color:#fff!important}

/* ---- guide / blog ---- */
.toc-aside{display:block}
.toc-mob{display:none}
@media (max-width:1023px){.toc-aside{display:none}.toc-mob{display:block}}
.toc a.on{color:#111!important;font-weight:600!important}
.toc-mark{display:none}
.toc a.on .toc-mark{display:block}
.article p a{text-decoration:underline;text-decoration-color:#E10814;text-underline-offset:3px}
.article table{width:100%;border-collapse:collapse;font-size:15px}
.article th,.article td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid #D9D6CF;vertical-align:top}
.article th{border-bottom:1px solid #111;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;color:#5C5A55;font-weight:500}

/* ---- FAQ ---- */
.faq-nav{flex-direction:column}
@media (max-width:819px){.faq-nav{flex-direction:row}}
.faq-nav a.on{font-weight:600!important}
.faq-nav .ind{display:none}
.faq-nav a.on .ind{display:block}
.faq-a{display:none}
.faq-item.open .faq-a{display:block}

/* ---- gallery ---- */
@media (max-width:599px){.gal-item{grid-column:span 1!important;grid-row:span 1!important}}
.lightbox{position:fixed;inset:0;z-index:95;background:#111;color:#fff;display:flex;flex-direction:column}

/* ---- forms ---- */
.field-err{font-size:14px;color:#C1060F;font-weight:500}
.inp[aria-invalid=true]{border-color:#C1060F!important}
.hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.btn-busy{opacity:.6;pointer-events:none}

/* ---- cookie notice ---- */
.cookie{position:fixed;left:16px;right:96px;bottom:16px;z-index:70;max-width:560px;background:#111;color:#EDEBE6;border:1px solid #2E2D2A;padding:14px 16px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;font-size:14px;line-height:1.45}
.cookie a{color:#fff}
@media (max-width:767px){.cookie{right:16px;bottom:88px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}