/**
 * Product page: price on one line, variation dropdowns (minimal style), quantity + button aligned.
 * Applies to single product form and quick look popup.
 */

/* ============================================================
   1. Regular price and discounted price on same line
   ============================================================ */
.woocommerce div.product .entry-summary .price,
.woocommerce div.product p.price,
.qlpwa-popup-wrap .price {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
  margin: 0 0 1rem;
}

.woocommerce div.product .entry-summary .price del,
.woocommerce div.product .entry-summary .price ins,
.woocommerce div.product p.price del,
.woocommerce div.product p.price ins,
.qlpwa-popup-wrap .price del,
.qlpwa-popup-wrap .price ins {
  display: inline !important;
}

.woocommerce div.product .entry-summary .price del,
.woocommerce div.product p.price del {
  margin-right: 0.25em;
}

/* ============================================================
   2. Variation dropdowns – same minimal style (like Density)
   ============================================================ */

/* Scope: product form and quick look */
.woocommerce form.cart table.variations,
.qlpwa-popup-wrap table.variations {
  width: 100%;
  border: none;
  border-collapse: collapse;
  margin: 0 0 1rem;
  background: #fff;
}

.woocommerce form.cart table.variations tbody,
.qlpwa-popup-wrap table.variations tbody {
  display: block;
}

.woocommerce form.cart table.variations tr,
.qlpwa-popup-wrap table.variations tr {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding: 0px 0;
  margin: 0;
}

/* Separator under every row (Color, Gray, Density) – keep last border for consistency */

/* Label column – bold, left (Color, Gray, Density all bold) */
.woocommerce form.cart table.variations th.label,
.qlpwa-popup-wrap table.variations th.label,
.entry-summary .cart table.variations th.label {
  display: block;
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  font-size: 14px;
  font-weight: 700 !important;
  color: #111;
  text-align: left;
  vertical-align: middle;
}

.woocommerce form.cart table.variations th.label label,
.qlpwa-popup-wrap table.variations th.label label,
.entry-summary .cart table.variations th.label label,
.woocommerce form.cart table.variations tr th.label,
.qlpwa-popup-wrap table.variations tr th.label {
  margin: 0;
  font-weight: 700 !important;
  cursor: default;
	font-size:14px;
	font-family:'Montserrat' !important;
}

/* Value column – same width for every row so all dropdowns are equal width */
.woocommerce form.cart table.variations td.value,
.qlpwa-popup-wrap table.variations td.value,
.entry-summary .cart table.variations td.value {
  display: flex;
  flex: 1 1 0%;
  align-items: center;
  padding: 0 0.7rem 0 0;
  margin: 0;
  border: none;
  min-width: 0;
  position: relative;
}

/* Select fills value cell so all dropdowns are equal width */
.woocommerce form.cart table.variations td.value select,
.qlpwa-popup-wrap table.variations td.value select,
.entry-summary .cart table.variations td.value select {
  flex: 1 1 0%;
  min-width: 0;
}

/* Reset/Clear link: out of flow so it doesn't shrink the select; sits in padding area */
/* Hide default inline "Clear" link inside the row
   – we render our own small button above the variations instead. */
.woocommerce form.cart table.variations td.value .reset_variations,
.qlpwa-popup-wrap table.variations td.value .reset_variations,
.entry-summary .cart table.variations td.value .reset_variations {
  display: none !important;
}

/* Select: same as Density – equal width, no border, chevron, selected text bold */
.woocommerce form.cart table.variations td.value select,
.qlpwa-popup-wrap table.variations td.value select,
.entry-summary .cart table.variations td.value select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 28px 8px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700 !important;
  color: #111;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 512'%3E%3Cpath fill='%23111' d='M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
	font-family:'Montserrat' !important;
}

.woocommerce form.cart table.variations td.value select:focus,
.qlpwa-popup-wrap table.variations td.value select:focus,
.entry-summary .cart table.variations td.value select:focus {
  outline: none;
}

/* Optional: match addon row spacing on product page */
.entry-summary .cart table.variations {
  margin-bottom: 1rem;
}

/* Mark Color and Gray as required with * */
.woocommerce div.product form.cart table.variations th.label label[for="pa_color"]::after,
.woocommerce div.product form.cart table.variations th.label label[for="pa_gray"]::after {
  content: " *";
  color: #000000;
  font-weight: 700;
}
h2.wc-pao-addon-name[data-addon-name="Density"]::after {
    content: " *";
  color: #000000;
  font-weight: 700;
}
/* Disabled tiles in variation flyout (e.g. Gray percentages when Color is All Gray) */
.options-flyout .config_item.is-disabled {
  /*opacity: 0.35;*/
  cursor: default;
}

/* Custom Clear button wrapper above variations */
.hw-reset-variations-wrap {
  text-align: right;
  margin: 0 0 4px;
}

/* Custom Clear control – simple text */
.hw-reset-variations-link {
  display: inline;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700 !important;
  line-height: 1.4;
  font-weight: 400;
  text-transform: none;
  border: none;
  border-radius: 0;
  background: none;
  color: #0d69a0;
  text-decoration: none;
  cursor: pointer;
  font-family:'Montserrat' !important;
}

.hw-reset-variations-link:hover {
  color: #004c75;
}

@media (max-width: 520px) {
  .woocommerce form.cart table.variations th.label,
  .qlpwa-popup-wrap table.variations th.label {
    width: 120px;
    min-width: 120px;
    font-size: 14px;
  }

}


/* =================================================================
   RESPONSIVE & CONSISTENT — Variations + Addons
   Add this AFTER your existing CSS. Does not remove anything.
   ================================================================= */

/* ── Shared row style: applies to BOTH variation rows & addon rows ── */
.woocommerce form.cart table.variations tr,
.qlpwa-popup-wrap table.variations tr,
.wc-pao-addon-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  padding: 5px 0px 0px 0px;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
}

/* Remove double border: last variation row already gets border,
   first addon row shouldn't add another */
.wc-pao-addons-container {
  margin-top: 0;
}

/* ── Addon label: match variation th.label exactly ── */
.wc-pao-addon-container h2.wc-pao-addon-name,
.wc-pao-addon-container label.wc-pao-addon-name {
  display: block;
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700 !important;
  color: #111;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.4;
  /* remove h2 default margins */
  border: none;
  background: none;
}

/* ── Addon value wrapper: match variation td.value ── */
.wc-pao-addon-container .wc-pao-addon-wrap {
  flex: 1 1 0%;
  min-width: 0;
  padding: 0 0.7rem 0 0;
  margin: 0;
  display: flex;
  align-items: center;
}

/* ── Addon select: match variation select exactly ── */
.wc-pao-addon-container select.wc-pao-addon-select {
  flex: 1 1 0%;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 28px 8px 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700 !important;
  color: #111;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 256 512'%3E%3Cpath fill='%23111' d='M119.5 326.9L3.5 209.1c-4.7-4.7-4.7-12.3 0-17l7.1-7.1c4.7-4.7 12.3-4.7 17 0L128 287.3l100.4-102.2c4.7-4.7 12.3-4.7 17 0l7.1 7.1c4.7 4.7 4.7 12.3 0 17L136.5 327c-4.7 4.6-12.3 4.6-17-.1z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0 center !important;
  font-family: 'Montserrat', sans-serif !important;
	letter-spacing: 1.5px !important;
}

.wc-pao-addon-container select.wc-pao-addon-select:focus {
  outline: none;
}

/* Remove p tag default spacing inside addon wrap */
.wc-pao-addon-container p.wc-pao-addon-wrap {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0 0.7rem 0 0;
}

/* Remove bottom border on last addon container */
.wc-pao-addons-container .wc-pao-addon-container:last-of-type {
  border-bottom: none;
}

/* Also remove border on last variation row if addon follows immediately */
.woocommerce form.cart table.variations tr:last-child {
  border-bottom: 1px solid #e5e5e5;
}


/* ================================================================
   RESPONSIVE — 520px and below (mobile)
   ================================================================ */
@media (max-width: 520px) {

  /* Stack label above select on mobile */
  .woocommerce form.cart table.variations tr,
  .qlpwa-popup-wrap table.variations tr,
  .wc-pao-addon-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
    gap: 6px;
  }

  /* Label full width */
  .woocommerce form.cart table.variations th.label,
  .qlpwa-popup-wrap table.variations th.label,
  .wc-pao-addon-container h2.wc-pao-addon-name {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px;
  font-weight: 700 !important;
  }

  /* Value cell full width */
  .woocommerce form.cart table.variations td.value,
  .qlpwa-popup-wrap table.variations td.value,
  .wc-pao-addon-container .wc-pao-addon-wrap,
  .wc-pao-addon-container p.wc-pao-addon-wrap {
    width: 100%;
    padding-right: 0;
  }

  /* Select full width */
  .woocommerce form.cart table.variations td.value select,
  .qlpwa-popup-wrap table.variations td.value select,
  .wc-pao-addon-container select.wc-pao-addon-select {
    font-size: 14px;
  font-weight: 700 !important;
    padding: 6px 28px 6px 0;
  }

  /* Quantity + button: stack on very small screens */
  .woocommerce div.product .variations_button,
  .woocommerce div.product .woocommerce-variation-add-to-cart,
  .qlpwa-popup-wrap .variations_button {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .woocommerce div.product .variations_button .quantity,
  .qlpwa-popup-wrap .variations_button .quantity {
    margin-right: 0;
    width: 100%;
	max-width:150px;
	float:left !important;
	padding: 5px 10px 5px 0px;
  }

  .woocommerce div.product .variations_button .single_add_to_cart_button,
  .qlpwa-popup-wrap .variations_button .single_add_to_cart_button {
    width: 100%;
    text-align: center;
	  max-width:200px;
  }
}

/* ================================================================
   RESPONSIVE — 521px to 768px (tablet)
   ================================================================ */
@media (min-width: 521px) and (max-width: 768px) {

  .woocommerce form.cart table.variations th.label,
  .qlpwa-popup-wrap table.variations th.label,
  .wc-pao-addon-container h2.wc-pao-addon-name {
    width: 130px;
    min-width: 130px;
    font-size: 14px;
	  font-weight:700;
  }

  .wc-pao-addon-container select.wc-pao-addon-select,
  .woocommerce form.cart table.variations td.value select {
    font-size: 14px;
  }
}

@media (max-width: 520px) {

  /* Keep label + select on SAME ROW on mobile */
  .woocommerce form.cart table.variations tr,
  .qlpwa-popup-wrap table.variations tr,
  .wc-pao-addon-container {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }

  /* Label: fixed small width */
  .woocommerce form.cart table.variations th.label,
  .qlpwa-popup-wrap table.variations th.label,
  .wc-pao-addon-container h2.wc-pao-addon-name {
    width: 90px !important;
    min-width: 90px !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
	  font-weight:700;
  }

  /* Value cell: take remaining space */
  .woocommerce form.cart table.variations td.value,
  .qlpwa-popup-wrap table.variations td.value,
  .wc-pao-addon-container p.wc-pao-addon-wrap,
  .wc-pao-addon-container .wc-pao-addon-wrap {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Select: fill remaining space */
  .woocommerce form.cart table.variations td.value select,
  .qlpwa-popup-wrap table.variations td.value select,
  .wc-pao-addon-container select.wc-pao-addon-select {
    width: 100% !important;
    font-size: 14px !important;
    padding: 6px 24px 6px 0 !important;
  }

  /* Qty + button: keep on same row 
  .woocommerce div.product .variations_button,
  .woocommerce div.product .woocommerce-variation-add-to-cart,
  .qlpwa-popup-wrap .variations_button {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  .woocommerce div.product .variations_button .quantity,
  .qlpwa-popup-wrap .variations_button .quantity {
    width: auto !important;
    margin-right: auto !important;
  }

  .woocommerce div.product .variations_button .single_add_to_cart_button,
  .qlpwa-popup-wrap .variations_button .single_add_to_cart_button {
    width: auto !important;
    flex: 1 1 auto !important;
  }*/
}

/* Remove all default spacing from addon p wrapper */
.wc-pao-addon-container p.wc-pao-addon-wrap {
  margin: 0 !important;
  padding: 0 0.7rem 0 0 !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Ensure addon label width exactly matches th.label */
.wc-pao-addon-container h2.wc-pao-addon-name {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Tablet override too */
@media (min-width: 521px) and (max-width: 768px) {
  .wc-pao-addon-container h2.wc-pao-addon-name {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }
}
/* ═══ FINAL ALIGNMENT FIX ═══ */

/* Desktop + Tablet: h2 exact same as th.label, p same as td.value */
.wc-pao-addon-container {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.wc-pao-addon-container h2.wc-pao-addon-name {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin: 0 !important;       /* kill h2 default top/bottom margin */
  padding: 0 !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

.wc-pao-addon-container p.wc-pao-addon-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  margin: 0 !important;       /* kill p default margin */
  padding: 0 0.7rem 0 0 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

.wc-pao-addon-container select.wc-pao-addon-select {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.e-atc-qty-button-holder {
flex-wrap:nowrap !important;	
}
/* Tablet */
@media (min-width: 521px) and (max-width: 768px) {
  .wc-pao-addon-container h2.wc-pao-addon-name {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }
}

/* Mobile: label same fixed width as th.label (90px) */
@media (max-width: 520px) {
  .wc-pao-addon-container {
    flex-direction: row !important;
    align-items: center !important;
  }

  .wc-pao-addon-container h2.wc-pao-addon-name {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    font-size: 14px !important;
	  font-weight:700;
  }

  .wc-pao-addon-container p.wc-pao-addon-wrap {
    padding: 0 !important;
  }
}

@media (max-width: 768px) {

  /* Step 1: variations_button — block layout */
  .woocommerce div.product .woocommerce-variation-add-to-cart.variations_button,
  .woocommerce div.product .variations_button {
    display: block !important;
  }

  /* Step 2: qty-holder — simple flex row */
  .e-atc-qty-button-holder {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 65px !important;
    width: 100% !important;
    position: static !important;
  }

  /* Step 3: quantity div — shrink to fit label+input only */
  .e-atc-qty-button-holder .quantity {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    width: auto !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
	font-family: "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
  }
  /* Step 4: qty label inline */
  .e-atc-qty-button-holder .quantity .hpw-qty-label {
    display: inline !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  /* Step 5: qty input fixed width */
  .e-atc-qty-button-holder .quantity input.qty {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    position: static !important;
    margin: 0 !important;
    float: none !important;
    text-align: center !important;
	font-family: "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
	border:1px solid #000;
  }
	.woocommerce .quantity .qty {
    text-align: center;
    font-family: "Montserrat", Sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
}

  /* Step 6: button fills remaining space */
  .e-atc-qty-button-holder .single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
    white-space: nowrap !important;
  }
}
 .e-atc-qty-button-holder .quantity input.qty{
	font-family: "Montserrat", Sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000000 !important;
	border:1px solid #000;
  }
.quantity input {
    width: 40px !important;
    padding: 0 !important;
    height: 2em !important;
    font-size: 18px;
    font-weight: 700;
    border: 1px solid #000 !important;
}
.hpw-qty-label {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: black;
    padding-right: 5px;
}

.config_item.is-out-of-stock {
    cursor: not-allowed;
}

.config_item.is-out-of-stock .img,
.config_item.is-out-of-stock .flyout-title {
    opacity: 0.45;
}
.config_item.is-disabled:not(.is-out-of-stock) .flyout-title {
    opacity: 0.45;
}
/* Sold Out badge full opacity + red */
.config_item.is-out-of-stock .flyout-sold-out {
    display: block;
    opacity: 1;
    color: #c83c43 !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 3px;
    font-family: 'Montserrat', sans-serif;
}