.vartablehide { display: none !important; }
.table.vartable { width: 100%; }
table.vartable td, table.vartable th { padding: 5px; vertical-align: middle; position: relative; }
.vartable_title { min-width: 25%; }
.stockcol span.instock { color: var(--vartable-instock-text, #449D44);  }
.stockcol span.outofstock { color: var(--vartable-outofstock-text, #D9534F);  }
.stockcol span.backorder { color: var(--vartable-backorder-text, #ff9800);  }
.stockcol span.lowstock { color: var(--vartable-lowstock-text, #F0AD4E);  }
table.vartable .stockcol.pill span { display: inline-block; padding: 4px 12px; border-radius: 16px; white-space: nowrap;  }
table.vartable .stockcol.pill span.instock { background-color: var(--vartable-instock-bg, #DFF0D8);  }
table.vartable .stockcol.pill span.outofstock { background-color: var(--vartable-outofstock-bg, #F2DEDE);  }
table.vartable .stockcol.pill span.backorder { background-color: var(--vartable-backorder-bg, #FCEBCB);  }
table.vartable .stockcol.pill span.lowstock { background-color: var(--vartable-lowstock-bg, #FCF3D9);  }
.qtycol input { width: 60px; }
.cartcol { position: relative; }
.added2cartwrap { 
  display: inline-block;
  background-color: #449D44;
  padding: 0 6px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 20px;
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}
.added2cartwrap.notvisible {
  display: none !important;
  background-color: transparent;
  padding: 0;
}
.added2cart { color: #ffffff;  }
.added2cartglobal { color: #449D44; display: none; display: none; float: right; margin-right: 5px; margin-top: 8px; }
.globalcartbtn, .vartable_selectall { float: right; cursor: pointer; clear: right; overflow-y: auto; zoom: 1; }
.slideup_panel { display: inline-block; font-size: 24px; float: right; margin-right: 20px; color: #D00; }

.vtspinner img { 
  width: 16px; 
  height: 16px;   
  vertical-align: baseline;     
  border: 0;
  background-color: transparent;
  padding: 0;
}

.vtspinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  float: right;
  margin-right: 5px;
  margin-top: 8px;
	-webkit-animation-name: spinnerRotate;
	-webkit-animation-duration: 1.3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
  display: none;
}

.vtspinner.singlebtn { 
  float: none;
  position: absolute;
  top: -14px;
  right: 0;
}

.single_add_to_cart_button.working, .globalcartbtn.working { opacity: 0.5; }
.globalcartbtn.vt_gc_disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* Bulk "Add Selected to Cart" - sticky button. Sticks within the nearest
   scrolling ancestor, so it may not stick edge-to-edge on themes that give
   that ancestor `overflow` other than visible.
   The bottom button (.vartable_gc_wrap_bottom) is a direct child of the
   full-height .vartable_wrap, so it can be sticky itself. The top button's
   parent (.vartable_top_wrap) is only as tall as its own content, giving a
   sticky element there no room to actually stick - see the class-table-
   renderer.php comment where "vt_sticky_top" is added to .vartable_top_wrap
   (its parent, .vartable_wrap, has the height needed) instead. */
.vartable_gc_wrap.vt_sticky { z-index: 100; }
.vartable_gc_wrap_bottom.vt_sticky { position: -webkit-sticky; position: sticky; bottom: 10px; }
.vartable_top_wrap.vt_sticky_top { position: -webkit-sticky; position: sticky; top: 10px; z-index: 100; }
/* The search box shares this row (see class-table-renderer.php) - hiding it
   once the row has actually stuck (not just whenever it's sticky-capable -
   see the "vt_is_stuck" toggle in add-to-cart.js) keeps the sticky row to
   just the button while scrolled, without changing how the row looks at the
   top of the page before any scrolling has happened. */
.vartable_top_wrap.vt_sticky_top.vt_is_stuck .search_vartable_wrap { display: none; }
/* .vartable_top_wrap is a flex row (search left, button right via
   justify-content: space-between) - with the search box hidden above, the
   button would otherwise be the row's only flex item and fall back to the
   start (left) edge, so it's pushed back to the right explicitly. */
.vt_is_stuck .vartable_gc_wrap.vt_sticky { margin-left: auto; }

/* Bulk "Add Selected to Cart" - sticky "Select All" table header, same caveat.
   Needs to out-specificity the base "table.vartable td, table.vartable th {
   position: relative; }" rule above (same 0-1-2 specificity as a bare
   "th.vt_selectall_sticky" selector, and it appears first, so relative would
   otherwise win and silently cancel the sticky).
   top:0 here is just the fallback for when the sticky button (above) isn't
   also stuck - when it is, add-to-cart.js sets an inline top matching the
   button row's own height, so the two stick back-to-back instead of
   overlapping. */
table.vartable th.vt_selectall_sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 90; }

.vartable_selectall {
	white-space: nowrap;
}

.fancybox-caption .single_add_to_cart_button .msg {
	color: #fff !important;
	display: inline-block;
	padding-left: 5px;
}
.fancybox-caption .single_add_to_cart_button,
table.vartable .single_add_to_cart_button {
	white-space: nowrap;
    display: flex;
    align-items: center;
    padding: 10px;
}
.fancybox-caption .single_add_to_cart_button {
	display: inline-flex;
	background-color: #000;
	color: #fff;
	border: 1px solid #000;
	padding: 5px 10px;
	text-decoration: none;
	transform: translateY( -10px );
	float: right;
}

.qtywrap {
  width: 100px;
  background-color: #dedede;
  clear: both;
  overflow-y: auto;
}

.qtywrap input {
  margin: 0;
  padding: 10px 5px;
  float: left;
  text-align: center;
}

.qtywrap>div {
  float: left;
  width: 20px;
  text-align: center;
  font-weight: bold;
  height: 100%;
  padding: 1px 0;
  cursor: pointer;
}


.product.has-default-attributes.has-children>.images {
  opacity: 1;
}

@-webkit-keyframes spinnerRotate {
	from {
		-webkit-transform:rotate(0deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
	}
	to {
		-webkit-transform:rotate(360deg);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
	}
}

.is_sortable th {
  cursor: pointer;
}

.vartable_gc_wrap {
  clear: both;
  overflow: auto;
  margin-bottom: 10px;
}

#vt_added_to_cart_notification {
  display: block;
  position: fixed;
  width: 80%;
  left: 10%;
  top: 0;
  padding: 20px;
  background-color: #ffffff;
  text-align: center;
  color: #333;
  font-size: 18px;
  border: 1px solid #ddd;
  border-top: 0;
  border-radius: 8px;
  z-index: 10001;
}

/* Failed add-to-cart items (out of stock, quantity limits, etc.) show in
   this alert box nested inside the one notification panel, rather than a
   separate notification - light red panel with dark red, high-contrast
   text, distinct from the plain white panel it sits inside. Shown alongside
   the success text when a bulk add is a mix of both. */
.vt_notification_alert {
  margin-top: 12px;
  padding: 12px 16px;
  background-color: #fbeaea;
  border: 1px solid #f0c3c3;
  border-radius: 4px;
  color: #7a1f1f;
  text-align: center;
  font-size: 15px;
}
.vt_notification_alert a { color: #7a1f1f; text-decoration: underline; }

body.admin-bar #vt_added_to_cart_notification {
  top: 32px;
}

.wishcol a { color: #dd0000; }
.globalcartcol { text-align: right; }
table.vartable input.qty { text-align: right; }


.vartable_ywl p {
	display: none;
}
.vartable_ywl #yith-wcwtl-output label,
.vartable_ywl #yith-wcwtl-output input {
	margin-bottom: 1px;
}
.vartable_ywl #yith-wcwtl-output a:after {
	font-size: 18px;
}

.vartable_ywl #yith-wcwtl-output label,
.vartable_ywl #yith-wcwtl-output a.button,
.vartable_ywl #yith-wcwtl-output a.button.alt {
	font-size: 11px;
	width: 100%;
	border: 0;
}

.vartable .swatch-wrapper a {
	cursor: default;
}
.wg_hidden,
.vartable .swatch-label {
	display: none;
}

.vartable .sorting-asc:after {
	display: block;
	position: absolute;
	top: 2px;
	right: 2px;
	content: "\2193";
	font-size: 15px;
}
.vartable .sorting-desc:after {
	display: block;
	position: absolute;
	top: 2px;
	right: 2px;
	content: "\2191";
	font-size: 15px;
}


table.vartable.should_hide_mobile_header td:before {
    display: none;
}
table.vartable.should_hide_mobile_header td {
    text-align: center;
}
table.vartable .qtywrap {
    display: flex;
    margin-left: auto;
    margin-right: auto;
	align-items: center;
    justify-content: center;
	overflow: hidden;
}
.qtywrap.styled>div {
    font-size: 18px;
    background-color: transparent;
    border-radius: 0;
    margin: 0 5px;
    padding: 0;
    width: 24px;
    height: 24px;
}
table.vartable .qtywrap.styled {
	background: transparent;
	white-space: nowrap;
	width: 170px;
}
table.vartable .qtywrap.styled svg {
	width: 24px;
    height: 24px;
}
table.vartable .qtywrap.styled.pill-light,
table.vartable .qtywrap.styled.pill-dark {
	display: inline-flex;
	width: auto;
	border-radius: 999px;
	padding: 4px;
}
table.vartable .qtywrap.styled.pill-light {
	background-color: #EEF0F1;
	border: 1px solid #E2E5E6;
}
table.vartable .qtywrap.styled.pill-dark {
	background-color: #2B3034;
	border: 1px solid #3A4045;
}
table.vartable .qtywrap.styled.pill-light>div,
table.vartable .qtywrap.styled.pill-dark>div {
	width: 32px;
	height: 32px;
	line-height: 32px;
	border-radius: 50%;
	margin: 0;
	font-size: 18px;
}
table.vartable .qtywrap.styled.pill-light>div {
	color: #5B6670;
}
table.vartable .qtywrap.styled.pill-light>div:hover {
	background-color: #E2E5E6;
}
table.vartable .qtywrap.styled.pill-dark>div {
	color: #C7CDD1;
}
table.vartable .qtywrap.styled.pill-dark>div:hover {
	background-color: #3A4045;
}
table.vartable .qtywrap.styled.pill-light input.qty,
table.vartable .qtywrap.styled.pill-dark input.qty {
	width: 42px;
	height: 32px;
	margin: 0 2px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	text-align: center;
}
table.vartable .qtywrap.styled.pill-light input.qty {
	background-color: #ffffff;
	color: #2B3034;
}
table.vartable .qtywrap.styled.pill-dark input.qty {
	background-color: #3A4045;
	color: #ffffff;
	box-shadow: none;
}
.has_cart_icon svg {
	transform: translateY(2px);
	margin-right: 5px;
}
.has_cart_icon.remove_cart_text svg {
	transform: translateY(3px);
	margin-right: 0;
}
button.remove_cart_text span {
	display: none;
}
.vartable_top_wrap {
	display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
}
.search_vartable {
	padding: 5px;
}
.vt-sr-only {
	position:absolute;
	left:-10000px;
	top:auto;
	width:1px;
	height:1px;
	overflow:hidden;
}

@media screen and (max-width: 767px) {
   
  .vartable .sorting-desc:after, table.vartable td span.vtspinner { display: none; }
  
  table.vartable.enable_responsive thead { display: none; }
  table.vartable { max-width: 100%; }
  table.vartable.enable_responsive tr { display: block; width: 100%; border-bottom: 2px solid #6C6360; }

  table.vartable.enable_responsive td { display: block; width: 100%; clear: both; text-align: right; }
  table.vartable td.pricecol { max-width: 100%; }
  table.vartable td span { display: inline; }
  
  table.vartable.enable_responsive td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
  
  table.vartable, table.vartable tr {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }
	table.vartable.should_hide_mobile_empty.enable_responsive td.vtmobilehide {
		display: none;
	}
	td.thumbcol img,
	td.offercol img {
		margin-left: auto;
	}
	
	table.vartable.should_hide_mobile_header td.thumbcol img,
	table.vartable.should_hide_mobile_header td.offercol img {
		margin-left: auto;
		margin-right: auto;
	}
	table.vartable.should_hide_mobile_header td {
		text-align: center;
	}
	
	.swatch-wrapper {
		float: right;
	}
	
	.disable_responsive_wrap {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
  
  /* #content-area for DIVI theme */
  table.vartable td, #content-area table.vartable td {
    max-width: none;
  }

}

.titlecol .title-line {
	display: block;
}
.titlecol .title-line + .title-line {
	margin-top: 4px;
}