/* ==========================================================================
   Responsive by Foxco
   Loaded after style.css / woocommerce.css so these rules win by source
   order. Two things happen here:
   1) A couple of base (non-media-query) fixes for layout bugs that were
      breaking things at ALL widths, not just mobile.
   2) Breakpoints that make the fixed/desktop-only layout stack and behave
      on tablets and phones.
   ========================================================================== */

/* --------------------------------------------------------------------
   1) BASE FIXES (apply at every width)
   -------------------------------------------------------------------- */

/* The "With Sidebar" page template renders #main-column and #sidebar-left
   side by side using flex:0 0 69%% / etc, but their parent
   (.has-sidebar .w.p.clearfix) never had display:flex — so those flex
   values were being ignored and the sidebar was stacking full-width even
   on desktop. Also #sidebar-left had no width rule at all (only the
   unused #sidebar-right did). Fixing the actual layout, which then gives
   us something correct to make responsive below. */
.has-sidebar .w.clearfix {
	display: -webkit-box; display: -ms-flexbox; display: flex;
	-ms-flex-wrap: wrap; flex-wrap: wrap;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.has-sidebar #main-column {
	-ms-flex: 0 0 69%;
	flex: 0 0 69%;
	max-width: 69%;
}
#sidebar-left {
	-ms-flex: 0 0 27%;
	flex: 0 0 27%;
	max-width: 27%;
}

/* Any table dropped into WYSIWYG content should scroll instead of
   blowing out the layout on narrow screens. */
.content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------
   2) HAMBURGER BUTTON (hidden on desktop, shown under 1023px below)
   -------------------------------------------------------------------- */
#mobile-nav-toggle {
	display: none;
	position: absolute;
	top: 18px;
	right: 15px;
	width: 34px;
	height: 30px;
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 101;
}
#mobile-nav-toggle .hamburger-line {
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform .25s, opacity .25s, top .25s;
}
#mobile-nav-toggle .hamburger-line:nth-child(2) { top: 4px; }
#mobile-nav-toggle .hamburger-line:nth-child(3) { top: 14px; }
#mobile-nav-toggle .hamburger-line:nth-child(4) { top: 24px; }
body.mobile-nav-open #mobile-nav-toggle .hamburger-line:nth-child(2) {
	top: 14px;
	transform: rotate(45deg);
}
body.mobile-nav-open #mobile-nav-toggle .hamburger-line:nth-child(3) {
	opacity: 0;
}
body.mobile-nav-open #mobile-nav-toggle .hamburger-line:nth-child(4) {
	top: 14px;
	transform: rotate(-45deg);
}

/* Off-canvas panel: on desktop it must not affect layout at all, since
   #header-store-links and #header-menu rely on being direct visual
   children of #header (#header-store-links is position:absolute against
   it). display:contents removes the wrapper from the box tree entirely. */
#mobile-nav-panel {
	display: contents;
}

/* Dim overlay behind the open mobile panel — reuses the existing
   body:after element the theme already uses for the desktop dropdown. */
body.mobile-nav-open:after {
	content: '';
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0,0,0,.5);
	z-index: 100;
}

/* --------------------------------------------------------------------
   TABLET / SMALL DESKTOP  (<=1023px)
   -------------------------------------------------------------------- */
@media screen and (max-width: 1023px) {

	html, body {
		min-width: 0;
	}

	/* header switches into hamburger mode */
	#mobile-nav-toggle {
		display: block;
	}
	#header-logo-c {
		padding: 16px 60px 16px 15px;
		text-align: left;
	}
	#site-name-logo {
		font-size: 28px;
	}

	/* the nav + store-links become a slide-in panel from the right */
	#mobile-nav-panel {
		display: block;
		position: fixed;
		top: 0;
		right: -320px;
		bottom: 0;
		width: 300px;
		max-width: 85%;
		overflow-y: auto;
		background: #000;
		z-index: 101;
		transition: right .3s;
		-webkit-overflow-scrolling: touch;
	}
	body.mobile-nav-open #mobile-nav-panel {
		right: 0;
		box-shadow: -3px 0 12px rgba(0,0,0,.3);
	}

	#header-store-links {
		position: static;
		padding: 20px 20px 10px;
		border-bottom: 1px solid #877432;
	}
	#header-store-links .row.no-gutter {
		display: block;
	}
	#header-store-links .row.no-gutter > .col-auto {
		display: block;
		width: 100%;
		margin-bottom: 12px;
	}
	#header-store-links > .row > div {
		border: 0;
	}
	#header #search-field-header {
		width: 100%;
		border: 1px solid #877432;
		color: #fff;
	}
	#twt-cart-link {
		padding: 0 0 0 12px !important;
	}

	/* nav menu becomes a full-width vertical accordion instead of a
	   centered horizontal hover bar */
	#header-menu {
		font-size: 1em;
	}
	#header-menu:before {
		display: none;
	}
	#header-menu > ul {
		display: block;
		width: 100%;
		padding: 0;
		background: none;
	}
	#header-menu > ul > li {
		display: block;
		width: 100%;
		border-top: 1px solid #877432;
	}
	#header-menu > ul > li:first-child {
		border-top: 0;
	}
	#header-menu > ul > li > a {
		padding: 14px 20px;
	}
	/* submenus: the theme's existing touchstart handler already toggles
	   a `.hover` class on tap for touch devices (see page.js) — we just
	   need it to render inline/static instead of as a floating dropdown */
	#header-menu ul ul {
		position: static;
		top: auto;
		left: auto;
		transform: none;
		box-shadow: none;
		background: #1a1a1a;
	}
	#header-menu li li a {
		padding: 10px 20px 10px 35px;
		min-width: 0;
	}
	.dropdown-active:after {
		display: none; /* mobile-nav-open:after covers this instead */
	}

	/* generic grid: stack columns instead of sitting side by side */
	.row > [class*="col-"]:not(.col-auto) {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* sidebar template stacks under content */
	.has-sidebar #main-column,
	#sidebar-left,
	#sidebar-right {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	#sidebar-left,
	#sidebar-right {
		margin-top: 30px;
	}

	/* hero slideshow: less side padding, smaller headline */
	.slide-content-c {
		padding: 0 40px;
	}
	.slide-content-c h2.h1,
	.slide-content-c h1 {
		font-size: 2.5em;
	}
	.slide-left, .slide-right {
		width: 3rem;
		height: 3rem;
		line-height: 3rem;
		margin-top: -1.5rem;
	}
	.slide-left { left: 8px; }
	.slide-right { right: 8px; }

	/* product grid: 3 -> 2 columns */
	#main ul.products.columns-4 li,
	.related ul.products.columns-4 li {
		width: 50% !important;
	}
	#main ul.products.columns-4 li:nth-child(3n+1) {
		clear: none;
	}
	#main ul.products.columns-4 li:nth-child(2n+1) {
		clear: both;
	}

	/* footer stacks and centers */
	#footer-main-right {
		text-align: center;
		margin-top: 25px;
	}
	#footer-main-right .col-6:first-child {
		text-align: center;
	}
	.footer-menu-c {
		display: block;
		margin: 0 0 25px !important;
		text-align: center;
	}
	#footer-bottom .row {
		text-align: center;
	}
	#footer-bottom .col,
	#footer-bottom .col-auto {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 6px;
	}
}

/* --------------------------------------------------------------------
   MOBILE  (<=767px)
   -------------------------------------------------------------------- */
@media screen and (max-width: 767px) {

	body {
		font-size: .9375em;
	}
	h1, .h1 { font-size: 2.5em; }
	h2 { font-size: 1.75em; }
	h3, .h3 { font-size: 1.25em; }

	#pre-header li {
		display: block;
		margin: 4px 8px;
		font-size: .8125em;
	}

	#slideshow-c {
		height: auto;
		min-height: 340px;
		max-height: none;
	}
	.slide-content-c {
		padding: 0 30px;
	}
	.slide-content-c h2.h1,
	.slide-content-c h1 {
		font-size: 1.875em;
	}

	#main-content {
		padding-top: 25px;
		padding-bottom: 30px;
	}
	.title-c {
		margin-bottom: 20px;
	}

	/* product grid: down to 1 column on phones */
	#main ul.products.columns-4 li,
	.related ul.products.columns-4 li {
		width: 100% !important;
		clear: both !important;
	}

	/* form rows that were 50/50 (checkout, my account) go full width */
	#main form .form-row-first,
	#main .woocommerce form .form-row-last,
	#main .woocommerce-page form .form-row-last {
		width: 100%;
		padding-right: 0;
		padding-left: 0;
	}

	.btn, #main .button {
		width: 100%;
		text-align: center;
	}
	#header-store-links .search-field-c .btn,
	.slide-content-c .btn {
		width: auto;
	}
}

/* --------------------------------------------------------------------
   SMALL MOBILE  (<=480px)
   -------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	h1, .h1 { font-size: 2em; }
	.slide-content-c h2.h1,
	.slide-content-c h1 {
		font-size: 1.5em;
	}
	#site-name-logo {
		font-size: 22px;
	}
	#mobile-nav-panel {
		width: 260px;
	}
}