/* ==========================================================================
   BABOLOON Shop — single product: options, quantity, CTA
   --------------------------------------------------------------------------
   WooCommerce ships this area as an unstyled markup fragment: a native
   <select> at 13px/17px tall, a quantity box and an Add-to-cart button that
   both end up squeezed into the same flex row as the variations table, and a
   purple "alt" button that ignores the brand palette. This file owns that
   block end to end.

   Kept out of main.css on purpose: rollback is one line in functions.php.
   ========================================================================== */

/* ---------- 1. form shell ---------- */
/* form.cart is a flex row by default, which puts the variations table and the
   quantity+button column side by side. Let each block own a full row instead;
   simple products (no table, no wrap) keep quantity+button on one line. */
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 12px;
  margin: 20px 0 0;
}

/* ---------- 2. variation table -> stacked label/field ---------- */
/* It is a layout table, not tabular data: strip the cell chrome and stack. */
.woocommerce div.product form.cart table.variations {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: none;
}
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th.label,
.woocommerce div.product form.cart table.variations td.value {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.woocommerce div.product form.cart table.variations tr + tr {
  margin-top: 16px;
}
.woocommerce div.product form.cart table.variations th.label {
  padding-bottom: 8px;
}
.woocommerce div.product form.cart table.variations th.label label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: default;
}
.woocommerce div.product form.cart table.variations td.value {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

/* ---------- 3. the select itself ---------- */
/* Native arrow plus a 118,118,118 border is what makes it look unfinished.
   appearance:none + our own chevron + full brand focus ring. */
.woocommerce div.product form.cart table.variations select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 1 340px;
  width: 340px;
  /* WooCommerce ships `min-width: 75%` on this element, which otherwise
     stretches it across the summary column and ignores `width`. */
  min-width: 0;
  max-width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 44px 0 16px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: normal;
  color: var(--ink);
  text-overflow: ellipsis;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.woocommerce div.product form.cart table.variations select:hover {
  border-color: #c7d2e3;
}
.woocommerce div.product form.cart table.variations select:focus,
.woocommerce div.product form.cart table.variations select:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(22, 104, 227, .12);
}
/* Before a choice is made the field reads as a placeholder, not a value. */
.woocommerce div.product form.cart table.variations select:has(option[value=""]:checked) {
  color: var(--muted);
  font-weight: 500;
}

/* Spring note: :has() is in every current browser; if it is missing the
   select simply keeps the ink colour and everything else still applies. */

/* ---------- 4. "Clear" ---------- */
.woocommerce div.product .reset_variations {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  background: var(--soft-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.woocommerce div.product .reset_variations:hover {
  color: var(--brand-700);
  background: var(--brand-soft);
  border-color: var(--brand);
}

/* ---------- 5. variation price / availability ---------- */
.woocommerce div.product .single_variation_wrap {
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
}
.woocommerce div.product .woocommerce-variation {
  margin: 0;
}
.woocommerce div.product .woocommerce-variation:empty {
  display: none;
}
.woocommerce div.product .woocommerce-variation-price .price {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}
.woocommerce div.product .woocommerce-variation-availability {
  margin-bottom: 12px;
}
.woocommerce div.product .woocommerce-variation-description {
  color: var(--ink-2);
  font-size: 14.5px;
}

/* ---------- 6. quantity + Add to cart ---------- */
.woocommerce div.product .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.woocommerce div.product .quantity {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 50px;
  margin: 0;
}
/* main.css carries `.woocommerce div.product form.cart .qty { width: 72px }`
   (0,3,2), so this has to name form.cart to win. */
.woocommerce div.product form.cart .quantity .qty {
  width: 92px;
  height: 50px;
  margin: 0;
  padding: 0 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  -moz-appearance: textfield;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce div.product .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.woocommerce div.product .quantity .qty:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(22, 104, 227, .12);
}

/* Specificity has to beat WooCommerce's `.woocommerce button.button.alt`
   and its `:disabled[disabled]` variant, otherwise the CTA falls back to
   WooCommerce purple. */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  flex: 1 1 220px;
  min-width: 0;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(22, 104, 227, .24);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(22, 104, 227, .3);
}
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:active,
.woocommerce div.product form.cart button.single_add_to_cart_button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(22, 104, 227, .22);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(22, 104, 227, .22);
}
/* "Pick a colour first": grey + neutral, not a half-transparent purple
   button that reads as broken. */
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.wc-variation-selection-needed,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:disabled[disabled] {
  background: var(--soft-2) !important;
  border-color: var(--line) !important;
  color: #98a2b3 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  transform: none;
}

/* ---------- 7. secondary CTA + meta ---------- */
.woocommerce div.product .summary > a.okg-btn--outline.okg-btn--block {
  margin-top: 12px;
  min-height: 48px;
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.woocommerce div.product .summary > a.okg-btn--outline.okg-btn--block:hover {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-700);
}
.woocommerce div.product .product_meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 13.5px;
  color: var(--muted);
}
.woocommerce div.product .product_meta > span {
  display: inline-block;
  margin-right: 14px;
}
.woocommerce div.product .product_meta .sku_wrapper,
.woocommerce div.product .product_meta .posted_in,
.woocommerce div.product .product_meta .tagged_as {
  color: var(--muted);
}

/* ---------- 8. colour swatch chips (progressive enhancement) ---------- */
/* product-form.js adds .okg-vs on the value cell only after it has built
   working chips; without JS the native select stays exactly as styled above. */
.woocommerce div.product .okg-vs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.woocommerce div.product .okg-vs[hidden] {
  display: none;
}
.woocommerce div.product .okg-vs__chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 16px 0 12px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-2);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.woocommerce div.product .okg-vs__chip:hover {
  border-color: #c7d2e3;
  background: var(--soft-2);
}
.woocommerce div.product .okg-vs__chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(22, 104, 227, .18);
}
/* Selected state mirrors the brand blue used by the primary CTA. */
.woocommerce div.product .okg-vs__chip.is-selected {
  color: var(--brand-700);
  background: var(--brand-soft);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(22, 104, 227, .1);
}
.woocommerce div.product .okg-vs__chip.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}
.woocommerce div.product .okg-vs__dot {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14);
}
/* The native select is still in the DOM for WooCommerce's own variation
   script and for screen readers; only visually demoted. The selector has to
   repeat `.product form.cart table.variations` (4 classes + 4 elements) or the
   sizing rule in section 3 out-specifies it and the field keeps its 48px box,
   leaving a 340px hole in the layout. */
.woocommerce div.product form.cart table.variations select.okg-vs__native {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 9. responsive ---------- */
@media (max-width: 640px) {
  .woocommerce div.product form.cart table.variations select {
    flex: 1 1 100%;
    width: 100%;
  }
  .woocommerce div.product form.cart .quantity .qty {
    width: 80px;
  }
  .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
  .woocommerce div.product form.cart button.single_add_to_cart_button {
    flex: 1 1 160px;
    padding: 0 18px;
    font-size: 15px;
  }
  .woocommerce div.product .product_meta > span {
    display: block;
    margin: 0 0 4px;
  }
}

/* Motion-sensitive visitors: no lift on the CTA. */
@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product form.cart button.single_add_to_cart_button,
  .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt {
    transition: none;
  }
  .woocommerce div.product form.cart button.single_add_to_cart_button:hover,
  .woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover {
    transform: none;
  }
}