/* Black Kow site styles. Generated by tools/build.mjs from the design export; edit freely. */

/* Base rules from the design export. */
body{margin:0;font-family:var(--font-sans);background:#fff}a{color:#000;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}button{font-family:var(--font-sans)}:focus-visible{outline:3px solid #000;outline-offset:2px;box-shadow:0 0 0 6px #FFC300}main:focus{outline:none}@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}input{font-family:var(--font-sans)}

/* hidden must win over the inline display on drawers, answers and filtered cards. */
[hidden]{display:none !important}

/* The design swaps desktop nav for the menu button at 820px. */
@media (max-width:820px){[data-if="isDesktop"]{display:none !important}}
@media (min-width:821px){[data-if="isMobile"]{display:none !important}}

/* Values the design computes from the viewport width. */
:root{--bk-foot-gap:32px;--bk-foot-cols:repeat(auto-fit,minmax(180px,1fr));--bk-foot-logo-pad:0px}
@media (max-width:820px){:root{--bk-foot-gap:0px;--bk-foot-cols:minmax(0,1fr);--bk-foot-logo-pad:24px}}

/* On mobile the "More Black Kow products" cards on product pages stack. */
:root{--bk-more-cols:repeat(auto-fit,minmax(max(150px,calc((100% - 60px)/4)),1fr))}
@media (max-width:820px){:root{--bk-more-cols:minmax(0,1fr)}}

/* On mobile each footer column folds behind its heading button. */
@media (max-width:820px){[data-bk="foot"][aria-expanded="false"] ~ [data-if="c.showLinks"]{display:none !important}}

/* Buttons that navigate are links styled as buttons. */
a.bk-btn{box-sizing:border-box;text-align:center;text-decoration:none}
a.bk-btn:hover{text-decoration:none}

/* Hover and focus states from the design (style-hover / style-focus). */
.bk-f1:focus{left:16px !important}
.bk-h2:hover{background:#E0E0E0 !important}
.bk-h3:hover{background:#fff !important;border-color:#fff !important;text-decoration:none !important}
.bk-h4:hover{background:#424242 !important}
.bk-h5:hover{background:#000 !important;color:#fff !important;text-decoration:none !important}