/* fix to broken homepage callouts in neighborhood 3.0 */
@media only screen and (min-width: 1500px) {
	.alt-bg {
		margin-left: -710px!important;
		padding-left: 710px;
		padding-right: 710px;
	}
}

/* all desktop layouts big widest */
@media only screen and (min-width: 980px) and (max-width: 1499px) {
	/*
	#cart-after #shopper-review-gallery .shopperapproved_widget {height: 156px !important;}
	#cart-after #shopper-review-gallery .sa_review {height: 126px !important; }
	#cart-after #shopper-review-gallery .sa_comments {height: 4.6em !important;}
	*/
}

@media only screen and (min-width: 1200px) and (max-width: 1499px) {
	.alt-bg {
		padding-left: 210px;
		padding-right: 210px;
		margin-left: -210px!important;
	}
}

/* buggered up forced iphone landscape menu, wtf */
@media only screen and (max-width: 1024px) {
	#logo a:first-child {float: right;}
	
	.woocommerce ul.products li.product figure figcaption .shop-actions > a {
		width: 100%;
		border-left: none !important;
		border-right: none !important;
		opacity: .85;
	}
	.product-list div.rightcol {max-width: 30%;}
}

@media only screen and (min-width: 1200px) {
	.home-box.cotton {margin-left: -30px;}
	.shopmain .home-image img.collage {height: 276px;}
	.home .home-image img.collage {height: 330px;}
	
	/* fix pixel jog on landing slider */
	#header-banner div.rev_slider_wrapper {width: 488px;}
	#header-banner.full div.rev_slider_wrapper {width: 870px;}
	
	/* checkout error msg alignment */
	form.woocommerce-checkout > ul,
	div.woocommerce div.help-bar,
	.woocommerce-NoticeGroup-checkout {margin-left: 30px;}
	
	/* avoid homepage FOUC */
	.teaser-img a img {height: 128px;}
	
	/* product page */
	#review_image {float: left; margin-top: -36px;}
}

@media only screen and (max-width: 979px) {
	/* The JS loader skips Google Trusted Store below the desktop breakpoint. This also hides a badge
		that was loaded at desktop width before the viewport was resized or rotated narrower. */
	[id*="merchantwidget-iframe-wrapper"] {display: none !important;}

	.woocommerce-cart .woocommerce .span3 {margin-top: 20px;}
	h1, .spb_impact_text .spb_call_text, .impact-text {font-size: 22px; line-height: 26px;}
	/* smaller than full, so content div */
	.header-copy {font-size: 92%;width:100%;}
	
	.eco h4.mission {font-size: 12px;}

	.alt-bg {
		margin-left: -130px !important;
		padding-left: 130px;
		padding-right: 130px;
	}

	#cart-after #shopper-review-gallery {margin-left: auto; margin-right: auto;}

	/* fix "mobile menu covered by some message elements" */
	/* 2 was under `div.images` (z-index 3) on every product page, so the product image painted over
	   the open dropdown. The sub-menu's own 9995 never applied: #main-nav caps its whole subtree,
	   and the .container inside was raised to 20 for the filter without that being noticed.
	   100 clears page content (highest is 4) and stays under #mini-header and the notice at 998/999. */
	#main-nav {
		z-index: 100;
		position: absolute;
		background-color: white;
		width: 100%;
	}

	/* gift card */
	#giftcard div.notice {font-size: 14px; letter-spacing: 1px;}
	
	/* product landing pages */
	.product-list .header-copy {font-size: 12px; width: 70%;}
	.product-list .header-copy p {font-size: 12px;}
	
	nav#main-navigation .menu > li > a,
	.header-4 nav .menu > li > a, .header-4 nav .menu > li > a,
	.header-5 nav .menu > li > a,
	.header-4 nav#main-navigation .menu > li > a,
	.header-5 nav#main-navigation .menu > li > a {padding: 8px 0; font-size: 14px;}
	
	/* product tabs */
	.woocommerce div.product .woocommerce-tabs .panel {padding: 10px 2px !important;}
	#review_header .graph.block,
	#review_header .percentage.block {margin-left: 2px !important;}
	
	/* cart */
	#cart-after #shopper-review-gallery {margin-bottom: 40px;}
	
	/* t-121: SORT BY was absolutely positioned at top: 101px to sit under three rows of filters.
	   Its own comment said "only works if all filters still showing" — above 900 they fit on one
	   row, so 101px dropped it onto the product grid. It flows correctly on its own. */
}

@media only screen and (max-width: 1199px) {
	/* wool homepage shop icons */
	.home-box .home-image .overlay, .shopmain .home-box .home-image .overlay {margin-top: -173px; height: 40px; width: 230px;}
	.home-box .home-image .overlay a {font-size: 16px; padding: 6px 0; line-height: 26px;}
	
	/* cart */
	#cart-after #shopper-review-gallery .sa_review {padding: 4px !important;}
	#cart-after #shopper-review-gallery .sa_name {font-size: 11px;}
	
	#menu-main-navigation > li.menu-item > a:first-child {margin-left: 6px;}
	
	/* demo store notice display to fit above rugs on sale. Note: only works for shorter, 2 line messages. Mobile box inlined below 600ish. */
	p.demo_store a {display: inline;}
	p.demo_store {min-height: 36px;}
	p.demo_store strong {line-height: 16px;}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.home-box .home-image .overlay, .shopmain .home-box .home-image .overlay {margin-top: -186px !important;}
	.home-image img.collage {height: 329px;}
	
	.teaser-img a.shopbutton {font-size: 14px; line-height: 22px; top: 23px;}
	
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {padding: 6px;}
}

/* FILTER COLLAPSE — below 900, which is where the plugin itself starts stacking the facets
   (`width: 50% !important` at max-width: 900px in its own styles.css). Eric 2026-08-06: "collapse by
   default only for mobile sites where things stack so below 900". Its own block rather than the 767
   one, because the stacking seam and the phone seam are different things. */
@media only screen and (max-width: 900px) {
	:root {
		/* Shared height for the filter row's controls — toggle and chips — so they cannot drift.
		   Defined HERE: it is used by this block, and living in the 767 one left it undefined
		   between 768 and 900, where the collapse is active. */
		--hal-pf-chip-h: 26px;
	}

		/* Collapsed by default where the dropdowns stack — the form goes, the heading and the applied
	   chips stay, which is the whole point: you can still see WHAT is filtered without the panel
	   eating the screen above the products. js/listing.js owns the toggle and the state. */
	/* Collapse hides the FACETS, not the form — Sort By is not a filter and stays reachable
	   (Eric 2026-08-06: "is sort by a filter? I dont think it is. It should remain visible").
	   It lives inside the same wrapper as the five facets, so it is excluded by name rather than
	   by hiding the form, which took it with it. !important because the plugin's JS puts an
	   INLINE display:block on the form, which no stylesheet selector can outrank. */
	body .prdctfltr_wc.prdctfltr_woocommerce.pf_select.hal-pf-collapsed .prdctfltr_woocommerce_ordering
		.prdctfltr_filter_wrapper .prdctfltr_filter:not(.prdctfltr_orderby),
	body .prdctfltr_wc.hal-pf-collapsed .prdctfltr_customize,
	body .prdctfltr_wc.hal-pf-collapsed .prdctfltr_buttons {
		display: none !important;
	}

	/* The toggle js/listing.js injects INTO the heading — it carries the heading's own words, so
	   there is one control and one label rather than a heading plus a redundant button.
	   Sized to the chips beside it (Eric: "same height and font size for visual appeal") via the
	   shared --hal-pf-chip-h. 12px rather than the chips' native 10px: matching DOWN would put it
	   under WAVE's small-text threshold that t-120 is already open about, so the chips come up. */
	.hal-pf-toggle {
		appearance: none;
		-webkit-appearance: none;
		box-sizing: border-box;
		font-family: "Open Sans", Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 1;
		height: var(--hal-pf-chip-h);
		padding: 0 12px;
		background: var(--hal-color-action-bg);
		color: var(--hal-color-action-text);
		border: 1px solid var(--hal-color-action-border);
		border-radius: 4px;
		cursor: pointer;
	}

	/* margin-bottom: 6px was lifting each chip inside the row's 32px box — measured mid 605 against
	   the button's 608. The row is a flex line and gaps come from `gap`, so the margin only skewed
	   the centring. */
	.prdctfltr_wc .prdctfltr_topbar .prdctfltr_title_selected {
		box-sizing: border-box;
		height: var(--hal-pf-chip-h);
		font-size: 12px;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		margin: 0;
	}

	/* The funnel now lives INSIDE the toggle (js/listing.js moves it there), so it is a glyph in a
	   button rather than a third thing to line up. */
	.hal-pf-toggle {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}

	.hal-pf-toggle .hal-pf-glyph {
		font-size: 13px;
		line-height: 1;
		color: inherit;
	}

	/* `hidden` is only a UA `display: none`, so the rule below that gives this anchor a display
	   silently outranked it and the emptied element kept holding 22px — the button started at x=24
	   while the row started at x=2, which read as the group floating rather than left-aligned. */
	.prdctfltr_wc .prdctfltr_filter_title > a.prdctfltr_woocommerce_filter[hidden] {
		display: none !important;
	}

	/* COLLAPSED changes the geometry the gap tokens were calibrated against. --hal-pf-count-offset
	   subtracts the facet grid's 14px overhang, and with the grid hidden there is no overhang — so
	   the gap below Sort By collapsed to 0 while the gap above became 40 (the row's own 20px margin
	   plus Sort By's 20px padding). Both are corrected against the collapsed geometry rather than
	   by re-tuning a token that is right for the expanded case. */
	/* Carries .hal-pf-collapsed on the SAME long selector as the rule it overrides — a shorter one
	   with !important still loses, which is what left the gap above at 40. */
	body .prdctfltr_wc.prdctfltr_woocommerce.pf_select.hal-pf-collapsed .prdctfltr_woocommerce_ordering
		.prdctfltr_filter_wrapper .prdctfltr_filter.prdctfltr_orderby {
		/* the chip row's own margin-bottom already supplies the gap above */
		padding-top: 0 !important;
	}

	/* Collapsed, the wrapper sits 6px ABOVE Sort By's box rather than overhanging it, so the offset
	   flips sign. Same formula as the expanded case so the two stay legible side by side. */
	body:has(.prdctfltr_wc.hal-pf-collapsed) div.woocommerce-count-wrap p.woocommerce-result-count {
		margin-top: calc(var(--hal-pf-sortby-gap) - var(--hal-pf-count-offset-collapsed));
	}

	/* The results line sat directly on the ship-date note — 0px between them. Some of the height the
	   collapse gave back goes here rather than all of it to the product grid. Its own token, 30%
	   under the Sort By gap (Eric 2026-08-06): these two are read as one block, so the space between
	   them should be tighter than the space that separates Sort By from either. */
	body div.woocommerce-count-wrap p.woocommerce-result-count {
		margin-bottom: var(--hal-pf-count-ship-gap);
	}

	.hal-pf-toggle:focus-visible {
		outline: 2px solid var(--hal-color-focus);
		outline-offset: 2px;
	}

	/* The funnel sat on its own line ABOVE the label — Eric 2026-08-06: "on this layout the
	   funnel is out of place". Its container is the row holding the heading and the chips, so
	   making that a flex line puts the glyph back beside the words it belongs to. */
	/* One row, one baseline. The funnel, the label, the toggle and the chip strip were sitting at
	   four different vertical centres (592/598/594/592 with heights 16/18/27/26) because each is
	   a different element type left to its own flow. */
	.prdctfltr_wc .prdctfltr_filter_title {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center !important;
		gap: 6px;
		min-height: var(--hal-pf-chip-h);
	}

	/* The chip strip is itself a flex item, so it needs centring INSIDE too or its chips sit at
	   the top of whatever height the row settles on. */
	.prdctfltr_wc .prdctfltr_filter_title > .prdctfltr_topbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px;
		margin: 0;
	}

	/* The glyph is inside `a.prdctfltr_woocommerce_filter`, not a direct child of the row, so the
	   ANCHOR is what has to move — targeting the <i> matched nothing. */
	.prdctfltr_wc .prdctfltr_filter_title > a.prdctfltr_woocommerce_filter {
		order: -1;
		margin: 0;
		float: none;
		line-height: 1;
	}

}

@media only screen and (min-width: 415px) and (max-width: 979px) {
.woocommerce div.product .woocommerce-tabs ul.tabs li a {padding: 6px 5px;font-size: 10px;}

	/* don't let product title run over pinterest icon' */
	#product-title h1 {width: 80%;}
}

/* fix crappy tablet layout */
/* t-119: Bootstrap fixes .span4 at 300px from 980 up, but only here does the search field reach its
   full 179px (it is 103px below 1025). The cart link grows with the order total — "$1,210.00 (3)"
   measures 110px — so 179 + 110 overflowed 300 and the two floats wrapped, dropping search onto its
   own row. The nav floats right into empty space, so widening it costs the menu nothing. */
@media only screen and (min-width: 1025px) and (max-width: 1199px) {
	#main-nav .span4.header-right > nav {min-width: 350px;}
}

@media only screen and (min-width: 980px) and (max-width: 1199px) {
	/*.home-box .home-image .overlay {margin-top: -173px;}*/
	.shopmain .home-box .home-image .overlay {margin-top: -166px;}
	.shopmain .home-image img.collage {height: 216px;}
	.home .home-image img.collage {height: 280px;}
	
	body.organics .lower-copy p {min-height: 133px;}

	/* make rightnav more readable */
	.sidebar.right-sidebar {padding-left: 0;}

	/* t-136: #order_review's 45px side padding leaves the terms row 286px and the sentence needs 313,
	   so it wraps mid-phrase in this band only. #payment already escapes that padding the same way. */
	.woocommerce-terms-and-conditions-wrapper {margin-left: -45px; margin-right: -45px;}

	/* make sure review tabs fit on one line */
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {
		padding: 6px 8px;
		font-size: 11px;
	}
	
	/* topnav */
	nav#main-navigation .menu > li > a {padding: 0 6px;}
	#menu-main-navigation > li.menu-item > a {margin-left: 10px; margin-right: 10px; font-size: 15px;}
	
	/* filter popups wide enough for content */
	.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_add_scroll {
		width: calc(100% + 30px);
	}
	
	/* avoid homepage FOUC */
	.teaser-img a img {height: 103px;}
	
	.home-box h2 {font-size:16px; width: 90%;}
 
	.alt-bg {
		padding-left: 200px;
		padding-right: 200px;
		margin-left: -200px!important;
	}	
}

@media only screen and (min-width: 768px) {
	#menu-main-navigation ul.sub-menu > li > a {padding: 10px 15px; margin: 2px;}
	#menu-main-navigation ul.sub-menu > li.menu-item-has-children > a {padding-right: 30px;}
	#menu-main-navigation ul.sub-menu > li {margin: 0;}
	
	#menu-main-navigation .sub-menu .parent > a:after {border-left-color: #666;}
	
	nav ul.menu ul.sub-menu {left: 10px;}
	nav .menu ul.sub-menu li:first-child:before {margin-top: -10px; left: 10px;}

	/* overwrite dumb neighborhood css for our grid layout */
		.woocommerce ul.products li.product.first, .woocommerce-page ul.products li.product.first {clear: none !important;}
		.woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n)
		{float: none !important;}
}

/* treat 768px and up (ipad portrait) as desktop site, show top menu etc. Since site crosses between 979 and 1024, rules that apply to 768-1024 go here for now. */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.home-box .home-image .overlay, .shopmain .home-box .home-image .overlay {margin-top: -134px;}
	
	/* adjust menu so "our eco commitment" fits */
	#main-menu-navigation {margin-right: -55px;}
	div.header-right.span4 {margin-left: 0;}
	.searchform .search-field {width: 40px;}
	.sidebar #shopper-review-gallery .verified {float: none;}
	
	/* sidebar nav fitting better */
	a.button.wc-forward {
		padding: 12px 10px !important;
	}

	.sidebar .widget_nav_menu ul>li.menu-item.rugpad a {
		font-size: 13px;
		color: var(--hal-color-text-muted);
	}

	.sidebar .widget_nav_menu ul>li.menu-item-has-children>a {
		font-size: 12px;
		color: var(--hal-color-text-muted);
	}
	
	#product-pint {left: 0;}
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
	/* t-138: the mobile search form's per-breakpoint top/left offsets are gone — it sits in its own
	   row under the header controls now (style.css). */

	/* t-121: Bootstrap gives .span3 166px in this band, which crushed the product gallery and
	   summary to 258px each. Adopt the sub-768 layout — no right nav — up to 979, per Eric. */
	body.single-product aside.sidebar {display: none;}
	body.single-product .inner-page-wrap.has-right-sidebar > article.span9 {width: 100%;}

	/* shop wool / cotton box tweaks */
	.home-box .shopbutton {margin-right: 5px;margin-top: 6px;}
	.home-box ul.links li a {padding: 2px 3px;margin-right: 3px; letter-spacing: inherit;}
	.home-box h2 {font-size: 16px; width: auto; letter-spacing: normal;font-weight: 400;}
	.shopmain .home-image img.collage {height: 159px;}
	.home .home-image img.collage {height: 204px;}
	
	/* avoid homepage FOUC */
	.teaser-img a img {height: 79px;}
	
	.product-list .header-copy h1 {font-size: 20px;}

	/* giftcard top border fix */
	#giftcard {margin-top: -15px;}
	
	/* standalone copy pages */
	.eco .seams img {width:269px; height: 234px;}
	.eco.chooserug .page-content h2 {font-size: 16px;}
	.cat-box div {width: 254px;}
	.cat-box div.double {width: 538px;}
	
	.woocommerce .widget_shopping_cart .cart_list li,
	.woocommerce.widget_shopping_cart .cart_list li {padding-left: 0;}
	
	.woocommerce.widget .buttons a {padding: 10px 4px; text-align: center;}
	
	/* txt-img styling */
	div.img-text {padding: 24px 0;}
	.img-text .textblock p {font-size: 16px; line-height: 22px;padding: 0;}
	
	/* menu adjustments: 768 and up as desktop menu */
	nav#main-navigation ul.menu li,
	nav#main-navigation ul.menu li:first-child {
		display: inline-block;
		border-bottom: none;
		border-top: none;
	}
	#menu-main-navigation > li.menu-item > a {margin-left: 10px; margin-right: 10px; font-size: 14px;}
	#main-navigation ul li.parent > a:after {content: "";}

	/* footer */
	.confidence-logos {margin-top: 60px;}
	/* t-015: the `top: -26px` here re-tuned an offset that no longer exists — the rating renders
	   inside the contentinfo now and needs no pulling into place at any width. */
	
	
	/* 2col product listing experiment: treat like span8/span4 from 768-979 */
		body.archive .has-right-sidebar > .span9 {width: 476px;}
		body.archive .has-right-sidebar > .span3 {width: 228px;}
		
	/* experimenting with 2-col product layout here instead of 767 */
	/* end 2col 900 experiment */
	
	/* filter -- have to deal with <900px responsive nonsense */

		/* filter popups wide enough for content  (because of 2col experiment) */
		.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_add_scroll {
			width: calc(100% + 30px);
		}
		
		.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter.prdctfltr_orderby .prdctfltr_add_scroll {
			width: calc(100% - 10px);
		}
		
		.prdctfltr_wc.prdctfltr_wc_regular.prdctfltr_woocommerce.woocommerce.pf_select .prdctfltr_woocommerce_ordering 
			.prdctfltr_filter {
			width: calc(33.3% - 2px) !important;
			margin-right: 0 !important;
		}
		
		.prdctfltr_wc.prdctfltr_wc_regular.prdctfltr_woocommerce.woocommerce.pf_select .prdctfltr_woocommerce_ordering 
			.prdctfltr_filter.prdctfltr_orderby {
				margin-bottom: -20px;
				width: 100px !important;
		}
	/* end filter */
}

/* fix a bug in woocommerce rules for 768px exactly. WP-rocket moves woocommerce small-screen.css above responsive */
@media only screen and (min-width: 768px) and (max-width: 768px) {
	
	/* override default listing layout in favor of our grid */
		.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
				width: auto;
				float: none;
				clear: none;
				margin: 0;
		}
}

/* basic mobile catchall */
@media only screen and (max-width: 767px) {
	/* override neighborhood layout section padding */
	[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
	margin-bottom: 6px;
	}

	/* override default listing layout in favor of our grid */
		body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
			width: auto !important;
			margin-right: 0 !important;
		}

		.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
			width: auto;
			float: none;
			clear: none;
			margin: 0;
		}

	/* end override */
	
	#contact-submit, #contact-recaptcha-holder {
		float: none;
		clear: both;
		margin-top: 30px;
	}

	/* Keep the float so the wrapper shrink-wraps its 300px widget. As a block it went full width —
	   387px against fields ending at 369 — which read as the widget being too wide and pushed Send
	   onto its own line. Floated, Send sits beside it when there is room and drops when there is not. */
	#container .wpcf7 .wpcf7-turnstile {
		max-width: 100%;
	}

	/* The 95% field width leaves a dead 5% gutter that only makes sense on a wide column. Full width
	   below the mobile breakpoint, and the submit row loses its matching 5% inset with it. */
	#container .wpcf7 input[type="text"],
	#container .wpcf7 input[type="email"],
	#container .wpcf7 textarea,
	#container .wpcf7 select {
		width: 100%;
		/* these are content-box from Bootstrap 2, so 100% + padding + border overflowed by 12px */
		box-sizing: border-box;
	}

	#contact-submit {
		margin-right: 0;
	}

	/* Follows the fields off the 5% gutter. */
	#container .wpcf7 form .wpcf7-response-output {
		width: 100%;
	}

	/* The intro sentences read left-aligned against a page that is centred everywhere else here. */
	#hal-contact-header p {
		text-align: center;
	}

	/* Three help buttons on one wrapping line broke mid-row. Live Chat goes on its own line above
	   the two numbers: order it first, then a zero-height full-basis pseudo-element forces the wrap
	   after it, so the button keeps its own width instead of stretching. */
	#contact-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
	}

	#contact-buttons .hal-contact-lc {
		order: -2;
	}

	#contact-buttons:after {
		content: "";
		flex-basis: 100%;
		height: 0;
		order: -1;
	}

	/* 22px is the desktop <h2> size this label replaced; on a phone it out-sizes the section heading
	   above it. The theme does not scale that h2, so the label has to scale on its own. */
	#container .wpcf7 label.hal-field-lead {
		font-size: 18px;
		line-height: 24px;
	}

	/* Hug the button rather than filling the row: the spinner is positioned off the row's left edge,
	   and a full-width row pushed it to x=-35, i.e. off-canvas while submitting.
	   `clear` is dropped (the rule above sets it for #contact-recaptcha-holder's sake) so Send sits
	   beside the floated Turnstile wherever there is room and drops below it only when there is not,
	   instead of always wrapping. */
	#contact-submit {
		margin-top: 18px;
		margin-left: auto;
		width: fit-content;
		clear: none;
	}

	/* gift styling */
	#gift-logo {
		padding-top: 70px;
		width: 335px;
		margin: 0 auto;
	}

	#giftcard #redeemed_instructions {
		width: 80%;
		margin: 0 auto;
	}
	
	/* hide help bar on mobile */
	div.help-bar {display: none;}
	#hal-checkout-sep {margin: 28px 0;}
	
	/* organics page */
	body.organics .home-box-container {margin: 0 auto;}
	body.organics .home-box {width: inherit;max-width: 600px;}
	body.organics .organic-logos-full div.organics-content {padding: 0 20px;padding-bottom: 20px;}
	body.organics div.organics-content {padding: 20px;}
	body.organics .full-width.home-content.teaser {margin-top: -40px;}
	
	h1.alt_banner {
		font-size: 14px;
		padding-top: 6px;
		padding-bottom: 14px;
	}
	
	body.playroom .header-box h2 {font-size: 14px;}
	
	.mobile-nav-item {display: block !important;}
	
	/* checkout error msg alignment */
	form.woocommerce-checkout > ul, div.woocommerce div.help-bar {margin-left: 0;}
	
	/* override bootstrap */
	body {padding-right: 0;padding-left: 0;}
	
	.home-box {margin-bottom: 40px;}

	/* Eric 2026-08-05: every skinny layout keeps a small gutter on BOTH sides, so it is obvious
	   nothing is being cut off. Was 1px left / 2px right — one rule, same value both sides. */
	#page-wrap {padding-left: 2px; padding-right: 2px;}
	body.home #page-wrap,body.home .container, #main-container .container, #header .container {padding: 0;}
	#payment p.form-row.terms {margin: 16px auto 0 auto;}
	
	/* homepage box styling (single file) */
	.home-content .spb_content_wrapper {display: inherit;}
	.home-box {display: inherit; width: 100%;}
	.home-box.cotton {margin-left: 0;border: none;}
	.home-box.wool {border: none;}
	.full-width.returns {padding-top: 20px;padding-bottom: 20px;}
	.full-width.returns h2, .full-width.returns p {font-size: 2em;}
	/* 12px was small enough to read as fine print under the slider. Eric 2026-08-06: slightly
	   bigger on mobile. 14px/19px keeps the same three-line shape without pushing the fold. */
	/* 12px read as fine print and 14px was still too small for the site's main statement — Eric
	   2026-08-06: "that font is really skinny and unreadable and that size, wait, that's 14px?!".
	   16px/22px; the bar has the room now that the empty spacer below it is gone. */
	.full-width.callout h1, .shopmain .header-copy h2 {font-size: 16px;line-height: 22px;padding: 0;}
	/* The demoted rhetorical line tracks the heading it used to live inside. */
	.full-width.callout p {font-size: 16px;line-height: 22px;}
	/* The bar carries three lines now and had dead space under it before the next section — Eric
	   2026-08-06: "we can use that space to expand the black bar so it looks more symmetrical".
	   The space came from an EMPTY .home-content wrapper: [include-page id="3650"] renders nothing,
	   so its 30px top padding was 30px of grey between the bar and the next real section. */
	.full-width.callout {padding-block: 8px;}
	/* `:empty` does NOT match it — the div holds whitespace text nodes, which :empty counts.
	   `:not(:has(> *))` tests for no ELEMENT children, which is the real condition, and the
	   adjacency keeps it to the one wrapper under the bar rather than every empty spacer. */
	.full-width.callout + .full-width.home-content:not(:has(> *)) {display: none;}

	/* Three lines, one per clause. The span holds clause two, so blocking it is what breaks the
	   heading — no <br> in the content, and desktop keeps its single line. Needs #container: the
	   base rule in style.css has equal specificity and loads after this file. */
	#container .full-width.callout h1 span {display: block;padding-left: 0;}
	
	.organics-copy-intro-lower {margin-left: 0;}
	
	/* txt-img styling */
	div.alt-bg.imgtext {padding-top: 0;}
	div.img-text {padding: 0;}
	.img-text .img-right .image {float: none;text-align: center;}
	.img-text .img-left .textblock {float: none;}
	.img-text .textblock p {font-size: 14px; line-height: 20px;padding: 0 6px;}
	.img-text .textblock h2 {padding-top: 12px;}
	.img-text .text-img-row:first-child {margin-bottom: 24px;}
	.img-text .image {margin-top: 0;}
	
	
	/* hide all the extra links if we're viewing mobile */
	.home-content.lower-links.full-width,
	.home-content.links.full-width {display: none;}
	
	/* remove sidebar menu navs */
	aside.sidebar {display: none;}
	
	/* topnav styling */
	#logo {margin: 0 10px;margin-left: 0;}
	#logo a:first-child {float: right;}
	#logo a:first-child {float: right;}

	/* t-148 item 4: the mobile menu's disclosure control. The chevron was an ::after on the ANCHOR,
	   so there was nothing to press — every tap was a link tap, and the parent theme only collapses
	   rows whose href is "#". js/hal.js injects a real button; this puts it where the chevron was and
	   retires the ::after. */
	#main-navigation ul li.parent > a:after {content: "" !important;}

	/* The row wraps: link and button on line one, the sub-menu on line two. Absolute positioning was
	   tried first and is wrong — `height: 100%` of the li spans the EXPANDED sub-menu too, so the
	   collapse tap landed on a sub-menu link instead of the button (measured, 2026-08-07). Stretching
	   inside a flex row sizes the control to the row itself, with no height to hard-code. */
	nav#main-navigation ul.menu li.menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	nav#main-navigation ul.menu li.menu-item-has-children > a {flex: 1 1 auto;}
	nav#main-navigation ul.menu li.menu-item-has-children > ul.sub-menu {flex: 0 0 100%;}

	nav#main-navigation ul.menu li.menu-item-has-children > .hal-submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		/* The 35px row already clears 2.5.8's 24x24; the width is what was missing, since the chevron
		   was painted glyph-only inside the anchor and owned no target at all. */
		flex: 0 0 56px;
		padding: 0;
		border: 0;
		background: none;
		-webkit-appearance: none;
		appearance: none;
		color: inherit;
		opacity: 0.5;
		cursor: pointer;
	}

	nav#main-navigation ul.menu li.menu-item-has-children > .hal-submenu-toggle:before {
		content: "\f078";
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		font-style: normal;
		font-size: 14px;
		line-height: 1;
	}

	nav#main-navigation ul.menu li.sub-menu-open > .hal-submenu-toggle:before {content: "\f077";}

	nav#main-navigation ul.menu li.menu-item-has-children > .hal-submenu-toggle:focus-visible {
		outline: 2px solid var(--hal-color-focus);
		outline-offset: -2px;
		opacity: 1;
	}
	
	.teaser-img a.shopbutton {font-weight: 600;}
	
	/* product landing pages */
	.product-list .header-copy {width: 100%;}
	.product-list #header-banner img {max-width: 95%;}
	.product-list #header-banner a.mobile {display: block;}
	.product-list #header-banner a.default {display: none;}
	.product-list div.rightcol {display: none;}
	.product-list .header-copy p.copy {width: 100%;}
	.product-list .header-copy h1 {font-size: 18px; width: 100%; padding-bottom: 0;}
	
	/* product page */
	#product-img-notice {display: none;}
	div.summary.entry-summary {box-sizing: border-box;padding: 0 4px;}
	
	/* stop mobile images from misaligning due to product name length */
	ul.products li.product .product-details {height: 40px; overflow-y: hidden;}
	
	/* checkout page */
		.woocommerce form #customer_details .form-row {margin-bottom: 36px;}
		.woocommerce form #customer_details .form-row label {line-height: 18px;}
	
	/* cart */
		/* fix broken neighborhood cart in 3.30 -- no qty field or image present */
		.woocommerce table.shop_table {margin-bottom: 20px;}
		.woocommerce table.shop_table tr td.product-name {  }
		.woocommerce table.shop_table .product-thumbnail,
		.woocommerce table.shop_table .product-quantity {display: table-cell;}

		.woocommerce table.shop_table .product-thumbnail {
			width: auto;
			padding-right: 10px;
		}
		.woocommerce table.shop_table .product-price {display: none; }
		.woocommerce table.shop_table tr td.product-subtotal { padding-top: 32px; }
		.woocommerce table.shop_table tr td.product-quantity .quantity {
			background-color: transparent;
			box-shadow: none;
			margin-right: 0 !important;
		}

		.woocommerce .quantity input.qty {
			position: inherit;
			width: 16px;
			padding-right: 6px;
			box-shadow: none;
			border: 1px solid #e0e0e0;
			background: #f8f8f8;
		}
		
		.woocommerce table.shop_table td {border-top: none;}

		/* remove labels from cart items (product, quantity, total headers) */
		.woocommerce table.shop_table_responsive tr td::before {content: none;}

		/* t-121: these were `display: inherit`, meant only as "undo WooCommerce's block stacking".
		   A `tr` inherits `table-row-group` from `tbody` and then shrink-wraps, so the row capped at
		   its natural 448px and left 315px of the table unused at 767. Real values, not inherit. */
		.woocommerce table.shop_table_responsive tr {display: table-row;}
		.woocommerce table.shop_table_responsive tr td {display: table-cell;}

		/* Stack the mobile quantity control in one compact, centered column. */
		.woocommerce table.shop_table tr td.product-thumbnail {min-width: 60px;}
		
		.woocommerce table.shop_table tr td.product-quantity {
			min-width: 24px;
			padding: 0;
			vertical-align: middle;
		}

		.woocommerce table.shop_table tr td.product-quantity .quantity {
			display: grid;
			grid-template: repeat(3, 24px) / 24px;
			width: 24px;
			height: 72px;
			margin: 0 auto !important;
		}

		.woocommerce table.shop_table .quantity .qty-adjust {
			display: contents;
		}
		
		.woocommerce table.shop_table_responsive tr td.product-name,
		.woocommerce table.shop_table_responsive tr td.product-subtotal,
		.woocommerce table.shop_table_responsive tr td.product-remove {
			display: table-cell;
			vertical-align: middle;
			padding: 0;
			padding-top: 0;
		}
		.woocommerce table.shop_table_responsive tr td.product-name {padding-right: 12px;}
		.woocommerce table.shop_table_responsive tr td.product-subtotal {padding-left: 10px;}
		.woocommerce table.shop_table_responsive tr td.product-remove {padding-left: 10px;}

		/* t-121, Eric's spec: "Subtotal should br right-aligned, both th and td." */
		.woocommerce table.shop_table th.product-subtotal,
		.woocommerce table.shop_table td.product-subtotal {text-align: right;}
		
		/* 24x24 minimum touch target (WCAG 2.5.8 / t-009) — was 20x20. The glyph is centered by flex
		   (see .qty-adjust a in style.css), so the old per-button line-height nudges that faked
		   centering here (17px, then 8px/22px) are gone rather than re-tuned. */
		.woocommerce div.quantity .qty-plus,
		.woocommerce div.quantity .qty-minus {
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			width: 24px;
			height: 24px;
			text-align: center;
			font-size: 14px;
			border: none;
		}

		.woocommerce table.shop_table .quantity .qty-plus {
			grid-row: 1;
			margin: 0;
		}

		.woocommerce table.shop_table .quantity .qty-minus {grid-row: 3;}

		.woocommerce table.shop_table tr td.product-quantity .quantity input.qty {
			grid-row: 2;
			box-sizing: border-box;
			padding: 0;
			width: 24px;
			height: 24px;
			text-align: center;
		}
		
		/* fix pad link formatting */
		div.rugpad-link p {
			clear: left;
			text-align: center;
		}

		/* The return-policy footnote reads as a continuation of the pad link directly above it, and
		   the two share a container — so centred there means centred here. It kept the desktop
		   `text-align: right` and sat flush to the edge while the line above it was centred. */
		.summary-top-replacement .hal-return-policy {
			text-align: center;
		}
		
		div.rugpad-link p a {font-weight: bold;}

		h2.bag-summary {
			text-align: center;
			float: none;
			margin: 0;
			line-height: 1;
		}
		
		h2.bag-totals {
			text-align: center;
			margin-bottom: 2px;
			margin-top: 0;
		}
		
		.woocommerce .cart_totals table th,
		.woocommerce .cart_totals table td {padding-top: 0;}
		
		body.woocommerce-cart h1 {display: none;}
		
		/* t-148 item 1: the margin-top that used to live here was the second of three owners of the
		   stack's spacing (10px against the 12px above PayPal, which is what read as uneven). The
		   flex gap in style.css owns it now. The label was 14px in a button beside two full-height
		   gateway wordmarks — Eric 2026-08-07, "the font on our proceed to checkout button should be
		   bigger". */
		.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
			text-align: center;
			font-size: 17px;
		}
		
		.woocommerce a.continue-shopping {
			text-align: center;
			margin: 0 auto;
			margin-top: 40px;
			margin-right: auto;
			margin-bottom: 0px;
			margin-left: auto;
			display: block;
			width: 10em;
			font-size: 14px;
			margin-top: 40px;
		}
		
	/* end cart */

	/* fix swift-themes neg margin kludge for mobile layouts */
	.alt-bg {margin-left: 0!important;padding-left: 0;padding-right: 0;}
	
	#intl-button {float: none; margin-left: 0; margin-top: -41px;}
	
	.woocommerce .page-heading .heading-text {margin-left: 0;}
	
	.home-box .home-image .overlay, .shopmain .home-box .home-image .overlay {margin-top: -186px;}
	#search-title {font-size: 20px;}
	.confidence-logos {width: 322px;height: 60px;}
	/* The 0.5 opacity here made the cart trust badges read as disabled on a phone, and it halved the
	   contrast of the text inside them (Shopper Approved review count, Trust Guard SECURE/ACTIVE). */
	#geotrust-seal {display: none;}
	
	/* footer */
	/* t-015: `top: 0; left: 0` here was undoing the desktop offset at narrow widths. The offset is
	   gone, so there is nothing left to undo. */
	/* divide up rating into 2 lines */
	#shopper-schema .shopper-rating-count {display: block;}
	#footer .confidence-logos {
		margin: 0 auto;
		width: 132px;
	}
	#footer-widgets #epsocialwidget-2 {
		width: 136px;
		padding-bottom: 10px;
		margin: 0 auto;
	}
	#footer .ep_social_widget a:last-child {margin-right: 0;}
	#footer section#text-2, #footer section#text-4 {display: none;}
	#copyright {padding: 10px;}
	
	/* filter */
		.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter .prdctfltr_add_scroll {
			width: calc(100% - 20px);
		}
		
		.prdctfltr_wc.prdctfltr_wc_regular.prdctfltr_woocommerce.woocommerce.pf_select .prdctfltr_woocommerce_ordering 
			.prdctfltr_filter {
			width: 50% !important;
			margin-right: 0 !important;
		}
		
		/* Sort By: centred on its own row, gapped below the filter grid and above the results line —
		   Eric 2026-08-06, "i'd prefer to just center it and have it gapped below the other
		   dropdowns right above the showing all rugs line". It was 100px wide at
		   `left: calc(50% - 50px)`, which floated it into the two-column grid at NEITHER column —
		   measured at l:151 against columns starting at -8 and 197, on a row of its own. Taking it
		   out of the float entirely is simpler than fitting it in: it is not one of the five facets
		   and should not read as one. The -20px margin went with it; it was pulling the results line
		   up into the gap. */
		/* The `body` prefix and .prdctfltr_filter_wrapper are BOTH needed. The plugin's own rule is
		   `…pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter_wrapper:not(.prdctfltr_columns_1)
		   .prdctfltr_filter {width: 50% !important}` — seven classes, and :not() counts its argument.
		   A six-class selector loses to it even with !important, which is why the first attempt
		   changed the font and nothing else. */
		/* The gap ABOVE Sort By and the gap BELOW it are set on different elements — this padding and
		   the results line's margin — which is how they drifted apart. One token drives both. */
		:root {
			--hal-pf-sortby-gap: 20px;
			/* The filter wrapper overhangs Sort By by 4px and carries margin-bottom: -10px, so 14px
			   of the gap below already exists before any margin of ours. Subtracted rather than
			   eyeballed, so changing the gap above changes the gap below by the same amount. */
			--hal-pf-count-offset: 14px;
		/* Collapsed the facet grid is gone, so the wrapper no longer overhangs Sort By — it sits 6px
		   above it instead, and the offset flips sign. */
		--hal-pf-count-offset-collapsed: -6px;
		/* Results line to the ship-date note. 30% under the Sort By gap: the two lines read as one
		   block, so they sit closer to each other than either sits to Sort By. */
		--hal-pf-count-ship-gap: 14px;
		}

		body .prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering
			.prdctfltr_filter_wrapper .prdctfltr_filter.prdctfltr_orderby {
				float: none !important;
				clear: both;
				width: 140px !important;
				/* PADDING, not margin: this element clears the floated filter grid, and clearance
				   absorbs a top margin outright — 33px of margin-top moved it zero pixels. */
				margin: 0 auto !important;
				/* !important for the same reason as width: the plugin's seven-class rule sets
				   `padding: 0 10px !important`, so an un-flagged padding here computes to 0. */
				padding-top: var(--hal-pf-sortby-gap) !important;
				left: 0;
				font-size: 14px;
		}

		/* Sort By sits EVENLY between the last filter row and the results line — Eric 2026-08-06:
		   "the distance between sort by bottom and showing all rugs top has to match that of the
		   distance between the bottom-most filter box". One variable drives both, so they cannot
		   drift: the gap above is this element's padding, the gap below is the results line's own
		   margin, and both now read the same token. The two are set in different rules on different
		   elements, which is exactly how they got out of step in the first place. */
		/* The gap below is built from TWO margins — the wrap's and the paragraph's — so zeroing one
		   left it 10px larger than the gap above. Both selectors have to out-specify what already
		   sets them: `div.woocommerce-shop-page div.woocommerce-count-wrap` in the 414 block, and
		   `…p.woocommerce-result-count:only-child`, where the pseudo-class is the extra weight. */
		body div.woocommerce-shop-page div.woocommerce-count-wrap,
		body div.woocommerce-count-wrap {
				margin-top: 0;
		}

		body div.woocommerce-count-wrap p.woocommerce-result-count,
		body div.woocommerce-count-wrap p.woocommerce-result-count:only-child {
				margin-top: calc(var(--hal-pf-sortby-gap) - var(--hal-pf-count-offset));
		}

	/* end filter */
	
}

@media only screen and (min-width: 415px) and (max-width: 767px) {
	#logo .logo-tagline {margin-top: 32px;text-align: right;}
	.teaser-box {border-right-width: 1px;}
	.teaser-img a.shopbutton {font-size: 12px; line-height: 22px; top: 23px;}
	
	body.woocommerce-checkout div.woocommerce-form-login-toggle,
	#payhal-finish-checkout {margin-top: -9px;}
	
	/* standalone page styling */
	.cat-box div {width: 45%;}
	.cat-box div.double {width: 100%;}
	.cat-box {margin: 0 auto;text-align: center;}
}

/* phone with plus size catchall--also default for neighborhood theme */
@media only screen and (max-width: 479px) {

	/* undo default listing layout in favor of our grid */
	body .woocommerce-shop-page ul.products li.product, body .product_list_widget > div > ul.products li.product {
		width: auto;
	}


	/* slider text */
	.hal-banner-headline, .hal-banner-label, .hal-slider-label {display: none !important;}
	
	/* checkout page */ 
		div.review-order-wrap {padding: 6px;}
		#order_review th.product-total {width: 1.5em;}
		
		#customer_details #billing_state_field > label,
		#customer_details #shipping_state_field > label {float: left;width: 20%;margin-top: 10px;}
		#customer_details #billing_state_field .select2-container,
		#customer_details #shipping_state_field .select2-container {max-width:80%;}
	
		/* unique paypal-in-process mobile styling */
		body.payhal-checkout #customer_details div:nth-child(2) {float: none; text-align: center;}
		#payhal-create-account {float: none; width: auto;margin-top: 14px;}
		#payhal-create-account > p.create-account > label.checkbox[for="createaccount"] {padding: 6px 10px;}
		
		body.payhal-checkout form.woocommerce-checkout, body.payhal-checkout #customer_details {margin-top: -4px;}
		
		body.payhal-checkout #customer_details h3 {
			text-align: center;
			margin-left: auto;
			margin-right: auto;
			width: 45%;
		}
		
		body.payhal-checkout #customer_details div:first-child li {margin-left: 33%;}
		body.payhal-checkout #customer_details div:first-child li:nth-child(3) {
			margin-left: 0;
			margin-top: 28px;
		}
		
		/* filter & header */
			.hal-overlay h4,
			h4.bysize-heading {
				font-size: 16px;
			}

			/* `left: calc(50% - 50px)` was the offset that put Sort By at neither grid column. It is
			   centred by auto margins in the 767 block now, so the offset has to go or it shifts the
			   centred row back off-axis at this size. */
			.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_woocommerce_ordering .prdctfltr_filter.prdctfltr_orderby {
				left: 0;
				text-align: center;
				top: 0;
			}

			.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter.prdctfltr_orderby .prdctfltr_regular_title {padding: 3px 10px;}

			.prdctfltr_filter label { padding-left: 0; }

			.prdctfltr_wc.prdctfltr_woocommerce.pf_select .prdctfltr_filter.prdctfltr_orderby .prdctfltr_add_scroll {
				top: 28px;
			}
			
			.all-rugs-link {top: 82px;}
			.prdctfltr_topbar > span, .all-rugs-link a {font-size: 10px;padding-top: 3px;}
			.prdctfltr_topbar {margin-left:6px;}
				.prdctfltr_wc.prdctfltr_woocommerce.pf_select i.prdctfltr-down
			,	.prdctfltr_wc.prdctfltr_woocommerce.pf_select i.prdctfltr-up {right: 22px;}
			.prdctfltr_wc .prdctfltr_filter_title {font-size: 12px;}
		/* end filter */
		
		/* listing page */
			h4.sale-sizes {margin: 0;}
		/* end listing page */
}

/* iphone catchall - 7 plus and smaller */
@media only screen and (max-width: 414px) {

	/* contact form lead label — one more step down at phone widths */
	#container .wpcf7 label.hal-field-lead {
		font-size: 16px;
		line-height: 22px;
	}

	/* Below this, Turnstile's fixed 300px plus the button no longer fits on one line, and the float
	   pushed Send 16px past the field edge instead of dropping. Stack deliberately, and centre both:
	   Turnstile's widget is a fixed 300px we cannot shrink from CSS, so a left-aligned widget with a
	   right-aligned button reads as two unrelated things. Eric's call — centre Send under it. */
	#container .wpcf7 .wpcf7-turnstile {
		float: none;
		width: fit-content;
		margin-left: auto;
		margin-right: auto;
	}

	#contact-submit {
		clear: both;
		margin-left: auto;
		margin-right: auto;
	}

	.teaser-box {border-right-width: 1px;}
	.teaser-img a.shopbutton {font-size: 9px;line-height: 16px; top:17px;}
	
	#payment p.form-row.terms {width: inherit;}
	
	.woocommerce p.stock-note {float: none;text-align: center;}
	div.woocommerce-shop-page div.woocommerce-count-wrap {
		text-align: center;
		margin: 10px auto 0 auto;
		font-weight: bold;
	}
	
	.woocommerce ul.products li.product h3 {
		line-height: 12px;
	}
	
	.woocommerce .woocommerce-message {
		line-height: 16px;
		font-size: 11px;
		padding-right: 6px;
		padding-left: 36px;
	}
	
	body.woocommerce-checkout div.woocommerce-form-login-toggle,
	#payhal-finish-checkout {margin-top: 0;}
	
	/* checkout page */
		/* existing customer login to top */
		.woocommerce-form-login-toggle,
		#payhal-finish-checkout {
			position: absolute;
			top: 73px;
			width: 100%;
		}

		.woocommerce-checkout .page-content {margin-top: 28px;}
		
		.help-bar a.mini-call {
			float: none;
			margin-top: 8px;
			padding: 7px 10px;
			margin-left: 20px;
		}

		.help-bar ul {
			margin-left: 0;
			margin-top: -10px;
		}
	
	/* dropshadow on right column on mobile */
	.woocommerce .products ul,
	woocommerce ul.products {
		padding-right: 2px;
	}
	
	.home-box p.shopbutton {}
	div.full-width.alt-bg {padding-left: 0; padding-right: 0;}
	
	.eco .weaver img {margin-top: 0;float: none;}
	.eco .weaver {text-align: center;}
	
	#logo .logo-tagline {margin-top: 38px; font-size: 13px;text-align: right;margin-left: 0;}
	
	#product-title h1 {width: auto; float: none;}
	#product-pint {display:none; top: -30px;} /* hidden until fixed */
	#product-img-slider .zoomContainer {display: none;}
	.woocommerce div.product .woocommerce-tabs ul.tabs li a {padding: 6px 5px;}
	
	.home-box .home-image .overlay, .shopmain .home-box .home-image .overlay {margin-top: -144px !important;}
	.home .home-box h2 {letter-spacing: normal;font-size:15px;width: 90%;}
	
	/* standalone page styling */
	.cat-box div {width: 100%;}
	.cat-box div.double {width: 100%;}
	
	.shopmain.sale.woocommerce .woocommerce-result-count {float: none;}
	.woocommerce-result-count {
		font-weight: normal;
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-color: #ddd;
	}
}


@media only screen and (min-width: 480px) and (max-width: 650px) {
	/* middle ground layout between image side-by-side and full product table layouts. Fixes crunched tab layout */
	.woocommerce div.product div.summary {float: none;width: auto;}
	#product-table {width: 48%; float: right;}
	#review_image {float: left;}
}

/* topnav mobile alert no longer fits between buttons below this size */
@media only screen and (max-width: 650px) {
	p.demo_store {width: 100%;}
	body.woocommerce-demo-store #container div.header-wrap {margin-top: 32px;}
}

/* tiny phone accomodations */
@media only screen and (max-width: 360px) {
	/* product tabs */
		.product_review .images .recommend {padding-bottom: 10px;}
		.woocommerce div.product .woocommerce-tabs ul.tabs {font-size: 11px;}
}