/*
Theme Name: threadtheword

WooCommerce styles override
*/

/**
 * Shop tables
 */
table.shop_table_responsive thead {
	display: none;
}

table.shop_table_responsive tbody th {
	display: none;
}

table.shop_table_responsive tr td {
	display: block;
	text-align: right;
	clear: both;
}

table.shop_table_responsive tr td::before {
	content: attr(data-title) ": ";
	float: left;
}

table.shop_table_responsive tr td.product-remove a {
	text-align: left;
}

table.shop_table_responsive tr td.product-remove::before {
	display: none;
}

table.shop_table_responsive tr td.actions::before,
table.shop_table_responsive tr td.download-actions::before {
	display: none;
}

table.shop_table_responsive tr td.download-actions .button {
	display: block;
	text-align: center;
}

@media screen and (min-width: 48em) {

	table.shop_table_responsive thead {
		display: table-header-group;
	}

	table.shop_table_responsive tbody th {
		display: table-cell;
	}

	table.shop_table_responsive tr th,
	table.shop_table_responsive tr td {
		text-align: left;
	}

	table.shop_table_responsive tr td {
		display: table-cell;
	}

	table.shop_table_responsive tr td::before {
		display: none;
	}
}

/**
 * Products
 */
ul.products {
	margin: 0;
	padding: 0;
}

ul.products li.product {
	list-style: none;
	position: relative;
	margin-bottom: 2em;
}

ul.products li.product img {
	display: block;
}

ul.products li.product .button {
	display: block;
}

@media screen and (min-width: 48em) {

	ul.products li.product {
		width: 30.79667%;
		float: left;
		margin-right: 3.8%;
	}

	ul.products li.product.first {
		clear: both;
	}

	ul.products li.product.last {
		margin-right: 0;
	}

	ul.products.columns-1 li.product {
		float: none;
		width: 100%;
	}

	ul.products.columns-2 li.product {
		width: 48.1%;
	}

	ul.products.columns-3 li.product {
		width: 30.79667%;
	}

	ul.products.columns-4 li.product {
		width: 22.15%;
	}

	ul.products.columns-5 li.product {
		width: 16.96%;
	}

	ul.products.columns-6 li.product {
		width: 13.49333%;
	}
}

/**
 * Single product
 */
.single-product div.product {
	padding-bottom: 50px;
}

.single-product div.product .woocommerce-product-gallery {

}

.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 10px;
	right: 20px;
	display: block;
	z-index: 99;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport {
	margin-bottom: 1em;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
	margin: 0;
	padding: 0;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
	list-style: none;
	cursor: pointer;
	float: left;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
	opacity: 0.5;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
	opacity: 1;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
	width: 48.1%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
	width: 30.79667%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
	clear: both;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
	width: 16.96%;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
	margin-right: 0;
}

.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
	clear: both;
}

.stock:empty::before {
	display: none;
}

.stock.in-stock {
	color: #0f834d;
}

.stock.out-of-stock {
	color: #e2401c;
}

/**
 * Checkout
 */

.woocommerce-additional-fields__field-wrapper{
	margin-top: 15px;
}

@media screen and (min-width: 768px) {

	.col2-set .form-row-first {
		float: left;
		margin-right: 3.8%;
	}
	
	.col2-set .form-row-last {
		float: right;
		margin-right: 0;
	}

	.col2-set .form-row-first.form-row-zip.form-row-last {
		float: left;
		margin-right: 3.8%;
	}

	.col2-set .form-row-first,
	.col2-set .form-row-last {
		width: 48.1%;
	}
}

/**
 * General WooCommerce components
 */

/**
 * Header cart
 */
.site-header-cart {
	position: relative;
	margin: 0;
	padding: 0;
}

.site-header-cart .cart-contents {
	text-decoration: none;
}

.site-header-cart .widget_shopping_cart {
	display: none;
}

.site-header-cart .product_list_widget {
	margin: 0;
	padding: 0;
}

/**
 * Star rating
 */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1.618em;
	line-height: 1.618;
	width: 5.3em;
	font-family: star;
	font-weight: 400;
}

.star-rating::before {
	content: "\53\53\53\53\53";
	opacity: 0.25;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "\53\53\53\53\53";
	top: 0;
	position: absolute;
	left: 0;
	color: #4169e1;
}

p.stars a {
	position: relative;
	height: 1em;
	width: 1em;
	text-indent: -999em;
	display: inline-block;
	text-decoration: none;
	margin-right: 1px;
	font-weight: 400;
}

p.stars a::before {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 1em;
	height: 1em;
	line-height: 1;
	font-family: star;
	content: "\53";
	color: #404040;
	text-indent: 0;
	opacity: 0.25;
}

p.stars a:hover ~ a::before {
	content: "\53";
	color: #404040;
	opacity: 0.25;
}

p.stars:hover a::before {
	content: "\53";
	color: #4169e1;
	opacity: 1;
}

p.stars.selected a.active::before {
	content: "\53";
	color: #4169e1;
	opacity: 1;
}

p.stars.selected a.active ~ a::before {
	content: "\53";
	color: #404040;
	opacity: 0.25;
}

p.stars.selected a:not(.active)::before {
	content: "\53";
	color: #4169e1;
	opacity: 1;
}

/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.woocommerce-tabs ul.tabs li {
	display: block;
	margin: 0;
	position: relative;
}

.woocommerce-tabs ul.tabs li a {
	padding: 1em 0;
	display: block;
}

.woocommerce-tabs .panel h2:first-of-type {
	margin-bottom: 1em;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
	text-align: right;
}

.woocommerce-password-strength.strong {
	color: #0f834d;
}

.woocommerce-password-strength.short {
	color: #e2401c;
}

.woocommerce-password-strength.bad {
	color: #e2401c;
}

.woocommerce-password-strength.good {
	color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
	box-shadow: inset 2px 0 0 #0f834d;
}

.form-row.woocommerce-invalid input.input-text {
	box-shadow: inset 2px 0 0 #e2401c;
}

.required {
	color: #f00;
}

/**
 * Notices
 */
 .woocommerce-page.page-id-8 .woocommerce-error {margin-left:-15px;}
 .woocommerce-notices-wrapper {max-width:1150px;margin:0px auto;padding:0 15px 5px 15px}
 
 .woocommerce .woocommerce-notices-wrapper > * {
	padding: 15px;
	list-style: none;
}

.woocommerce-info, 
.woocommerce-message {
	background: #eee;
    color: #000;
    border-top: 2px solid #f3e8e1;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background-color: #ba99e7;
	clear: both;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	background-color: #89ccf3;
    border-top: 2px solid #5bb4e8;
}

.woocommerce-info a.button, 
.woocommerce-message a.button {
    /* background: #88a171; */
    color: #000;
    text-decoration: underline;
	font-weight: 500;
}

.woocommerce-info a.button:hover, 
.woocommerce-message a.button:hover {
	color: #af7a66;
}

.woocommerce-error {
	background-color: #e2401c;
}

.woocommerce .entry-summary h1 {
	font-size: 20px;
	font-weight: 300;
	line-height: 23px;
	color: #7F7F7F;
	text-transform: uppercase;
	padding-bottom: 13px;
	margin-bottom: 13px;
	border-bottom: 1px solid #707070;
}

.demo_store {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 1em;
	background-color: #3d9cd2;
	z-index: 9999;
}

@media screen and (min-width: 48em) {

	/**
	 * Header cart
	 */
	.site-header-cart .widget_shopping_cart {
		position: absolute;
		top: 100%;
		width: 100%;
		z-index: 999999;
		left: -999em;
		display: block;
		box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	}

	.site-header-cart:hover .widget_shopping_cart,
	.site-header-cart.focus .widget_shopping_cart {
		left: 0;
		display: block;
	}
}

/**
 * WooCommerce widgets
 */

/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
	margin-bottom: 1.5em;
}

.widget_price_filter .price_slider_amount {
	text-align: right;
	line-height: 2.4;
}

.widget_price_filter .price_slider_amount .button {
	float: left;
}

.widget_price_filter .ui-slider {
	position: relative;
	text-align: left;
}

.widget_price_filter .ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1em;
	height: 1em;
	cursor: ew-resize;
	outline: none;
	background: #4169e1;
	box-sizing: border-box;
	margin-top: -0.25em;
	opacity: 1;
}

.widget_price_filter .ui-slider .ui-slider-handle:last-child {
	margin-left: -1em;
}

.widget_price_filter .ui-slider .ui-slider-handle:hover,
.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
	box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background: #4169e1;
}

.widget_price_filter .price_slider_wrapper .ui-widget-content {
	background: rgba(0, 0, 0, 0.1);
}

.widget_price_filter .ui-slider-horizontal {
	height: 0.5em;
}

.widget_price_filter .ui-slider-horizontal .ui-slider-range {
	height: 100%;
}

.woocs-lds-ellipsis div{
	top: -8px !important;
}

.woocs-lds-ellipsis{
	height: auto !important;
}


@media only screen and (max-width: 1024px) {.navbar-collapse.show {margin-top: 10px;}.nav-item a {font-size: 13px;}ul.navbar-nav li {padding-top: 10px;}.dropdown-menu.show{margin-top:0px;} a.dropdown-item{padding:15px;}}

/* ------------------------------------------------------------------------
   Show / hide password eye toggle.
   WooCommerce's default stylesheet (which normally styles this) isn't loaded
   on this site, and the theme never styled it, so the toggle rendered as an
   empty box below the field. This puts the dashicons eye back inside the
   field on the right, brand-violet on hover. WooCommerce's own JS still does
   the actual show/hide (it toggles the .display-password class).
   ------------------------------------------------------------------------ */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	position: relative;
	display: block;
}
.woocommerce form .password-input input,
.woocommerce-page form .password-input input {
	padding-right: 46px;
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 16px;
	width: 24px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
.woocommerce form .show-password-input::after,
.woocommerce-page form .show-password-input::after {
	font-family: dashicons;
	content: "\f177";
	font-size: 20px;
	line-height: 1;
	color: #9a9a9a;
}
.woocommerce form .show-password-input.display-password::after,
.woocommerce-page form .show-password-input.display-password::after {
	content: "\f530";
}
.woocommerce form .show-password-input:hover::after,
.woocommerce-page form .show-password-input:hover::after {
	color: #7035ec;
}

/* ------------------------------------------------------------------------
   Reset-password form: a fixed two-column grid (label | field) so the layout
   is stable. The strength meter and hint drop into the field column below the
   input instead of reflowing the row, so the fields no longer jump when you
   start typing. Labels are vertically centred, both inputs line up, and the
   Generate-password + Save buttons sit together on one line.
   ------------------------------------------------------------------------ */
.woocommerce-ResetPassword {
	/* The column geometry lives here so the button rows below — which sit
	   outside the grid — can be indented by exactly the label column and stay
	   in step if these ever change. */
	--ttw-label-col: 200px;
	--ttw-field-col: 340px;
	--ttw-col-gap: 16px;
	/* Gap between the Generate and Save pills, and the width left over for the
	   two of them. The extra 4px is the whitespace a browser renders between
	   two inline-block siblings; without allowing for it the pair lands a few
	   pixels past the right edge of the password boxes. */
	--ttw-btn-gap: 12px;
	--ttw-btn-space: calc(var(--ttw-field-col) - var(--ttw-btn-gap) - 4px);
	/* The theme pulls every .form-row 5px left of the form (margin: 0 -5px).
	   The button rows below reset their margins to sit side by side, which
	   loses that pull, so the indent has to give it back or the pair lands 5px
	   right of the password boxes. */
	--ttw-row-offset: 5px;
}
.woocommerce-ResetPassword .form-row {
	display: grid !important;
	grid-template-columns: var(--ttw-label-col) var(--ttw-field-col);
	align-items: center;
	column-gap: var(--ttw-col-gap);
	margin-bottom: 1.4em;
}
.woocommerce-ResetPassword .form-row > label {
	grid-column: 1;
	margin: 0;
	max-width: none;
}
.woocommerce-ResetPassword .form-row .password-input {
	grid-column: 2;
	width: 100%;
}
.woocommerce-ResetPassword .woocommerce-password-strength,
.woocommerce-ResetPassword .woocommerce-password-hint {
	grid-column: 2;
	max-width: 340px;
	margin: 6px 0 0;
	padding-left: 0 !important;
	text-indent: 0;
}
/* Intro line: bold, and left-aligned with the "New password" label. */
.woocommerce-ResetPassword > p:not(.form-row) {
	font-weight: 700;
	margin: 0 0 1.2em;
	padding-left: 0;
	text-indent: 0;
}
/* Keep Save a pill (it shrank to a circle once it sat next to Generate). */
.woocommerce-ResetPassword button[type="submit"] {
	min-width: 160px;
}
/* Keep the two button rows out of the grid and sit them side by side,
   Generate to the left of Save. */
.woocommerce-ResetPassword .ttw-generate-row,
.woocommerce-ResetPassword .ttw-generate-row + .form-row {
	display: inline-block !important;
	grid-template-columns: none;
	vertical-align: middle;
	margin: 8px 0 0;
}
.woocommerce-ResetPassword .ttw-generate-row {
	margin-right: var(--ttw-btn-gap);
	/* Both buttons are inline-block, so indenting the first one carries Save
	   along with it — the pair starts under the password fields rather than
	   under the labels. */
	margin-left: calc(var(--ttw-label-col) + var(--ttw-col-gap) - var(--ttw-row-offset));
}
/* Split the field column between the two pills so the pair finishes level with
   the right edge of the password boxes instead of running past them. Generate
   takes the larger share: at the site's futura-pt, "GENERATE PASSWORD" is 141px
   of text against 47px for "SAVE". */
.woocommerce-ResetPassword .ttw-generate-row {
	width: calc(var(--ttw-btn-space) * 0.57);
}
.woocommerce-ResetPassword .ttw-generate-row + .form-row {
	width: calc(var(--ttw-btn-space) * 0.43);
}
.woocommerce-ResetPassword .ttw-generate-row .ttw-generate-password,
.woocommerce-ResetPassword .ttw-generate-row + .form-row button[type="submit"] {
	width: 100%;
	min-width: 0; /* beats the 160px pill minimum above, which no longer fits */
	max-width: none;
	box-sizing: border-box;
	white-space: nowrap;
}
.woocommerce-ResetPassword .ttw-generate-password {
	background: none;
	border: 1px solid #7035ec;
	color: #7035ec;
	border-radius: 50px;
	padding: 9px 12px; /* trimmed from 22px so the label fits the narrower pill */
	font: 600 13px/1 futura-pt, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.woocommerce-ResetPassword .ttw-generate-password:hover {
	background: #7035ec;
	color: #fff;
}
/* Lost-password form ("enter your email and we'll send you a link"). WooCommerce
   gives it the same .woocommerce-ResetPassword class as the form above, so the
   label | field grid already applies and the text box lines up. Its submit row,
   though, holds only the button — the hidden inputs beside it are display:none
   and so are not grid items — which left the button auto-placed in the label
   column. Put it in the field column so it sits under the text box, and let it
   keep its own width instead of stretching across the full 340px. */
.lost_reset_password .form-row button[type="submit"] {
	grid-column: 2;
	justify-self: start;
}

@media (max-width: 600px) {
	.woocommerce-ResetPassword .form-row {
		grid-template-columns: 1fr;
	}
	.woocommerce-ResetPassword .form-row > label,
	.woocommerce-ResetPassword .form-row .password-input,
	.woocommerce-ResetPassword .woocommerce-password-strength,
	.woocommerce-ResetPassword .woocommerce-password-hint {
		grid-column: 1;
		max-width: none;
	}
	/* Single column at this width, so asking for column 2 would invent an
	   implicit second one and strand the button off to the right. */
	.lost_reset_password .form-row button[type="submit"] {
		grid-column: 1;
	}
	/* Nothing to clear on a stacked layout — drop the label-column indent, and
	   let the pills size themselves again so they do not squeeze on a phone. */
	.woocommerce-ResetPassword .ttw-generate-row,
	.woocommerce-ResetPassword .ttw-generate-row + .form-row {
		width: auto;
	}
	.woocommerce-ResetPassword .ttw-generate-row {
		margin-left: 0;
	}
}