/* BigCommerce additions/fixes for the Kalles header area. */

/* Foundation 5 (used by Cornerstone modals) reads its config from these <meta> font-families. Cornerstone's SCSS is
   not loaded in this theme, so without them Foundation throws "[data-"Times New Roman"-dropdown]" and aborts the
   theme JS init. */
meta.foundation-version { font-family: "/5.5.3/"; }
meta.foundation-mq-small { font-family: "/only screen/"; width: 0; }
meta.foundation-mq-small-only { font-family: "/only screen and (max-width: 40em)/"; width: 0; }
meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.0625em)/"; width: 40.0625em; }
meta.foundation-mq-medium-only { font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/"; width: 40.0625em; }
meta.foundation-mq-large { font-family: "/only screen and (min-width:64.0625em)/"; width: 64.0625em; }
meta.foundation-mq-large-only { font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/"; width: 64.0625em; }
meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.0625em)/"; width: 90.0625em; }
meta.foundation-mq-xlarge-only { font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/"; width: 90.0625em; }
meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.0625em)/"; width: 120.0625em; }
meta.foundation-data-attribute-namespace { font-family: false; }

/* Live loads icon-social.css after the top-bar section styles, so its `.t4s-socials a{color:var(--text-color)}`
   wins there; here icon-social.css is in <head>, so restore that order effect. */
.t4s-top-bar .t4s-socials a:not(:hover) { color: var(--text-color); }

/* Live loads drawer.min.css AFTER theme.css (end of <body>), so its .t4s-drawer z-index/width win over theme.css.
   base.html currently links drawer.min.css before theme.css; restore the live cascade for drawers here
   (can be removed once drawer.min.css is linked after theme.css). */
.t4s-drawer { z-index: 469; width: calc(100vw - 65px); }
@media screen and (min-width: 641px) { .t4s-drawer { width: 340px; } }
@media (max-width: 360px) { .t4s-drawer { width: calc(100vw - 15px); } }