/* ───────────────────────────────────────────────────────────
   WooCommerce overrides — match the Covalent Bio brand palette.
   Loaded only on Woo-aware pages (PDP, shop, cart, checkout).
   ─────────────────────────────────────────────────────────── */


/* ═══ Buttons ═══ */
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt {
  background: var(--color-teal);
  color: var(--color-ivory);
  border: 0;
  border-radius: var(--r-pill, 999px);
  padding: var(--sp-3) var(--sp-7);
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: var(--fs-13, var(--fs-14));
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
  text-decoration: none;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--color-teal-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 76, 92, 0.18);
}
.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce a.button:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

/* Block-styled add-to-cart wrapper on PDP */
.cb-add-to-cart .single_add_to_cart_button { min-width: 220px; }

/* ═══ Quantity field ═══ */
.woocommerce .quantity .qty {
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  width: 64px;
  height: 48px;
  text-align: center;
  background: var(--color-paper);
}
.woocommerce form.cart .quantity { margin-right: var(--sp-3); }
.woocommerce div.product form.cart { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }


/* ═══ Prices ═══ */
.woocommerce .price,
.woocommerce-Price-amount {
  font-family: var(--font-display);
  color: var(--color-ink);
}
.woocommerce ins {
  background: transparent;
  text-decoration: none;
  color: var(--color-teal);
  font-weight: 500;
}
.woocommerce del,
.woocommerce del .woocommerce-Price-amount {
  color: var(--color-ink-3);
  text-decoration: line-through;
  font-size: 0.85em;
  opacity: 0.7;
}
.woocommerce .price del { margin-right: var(--sp-2); }


/* ═══ Variations form (Dose / format selectors) ═══ */
.woocommerce div.product form.cart .variations {
  background: var(--color-ivory);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-4) 0;
  width: 100%;
  border-collapse: separate;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  padding: var(--sp-2) var(--sp-3);
  vertical-align: middle;
  border: 0;
  background: transparent;
}
.woocommerce div.product form.cart .variations label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-ink-2);
  font-weight: 600;
  margin: 0;
}
.woocommerce div.product form.cart .variations select {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-4); /* extra right pad for arrow */
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
  background-color: var(--color-paper);
  /* Custom chevron-down arrow so users know it's a dropdown (Safari/Firefox
     hide the native arrow when we style the select). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230F4C5C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 14px 14px;
  width: 100%;
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.woocommerce div.product form.cart .variations select:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}
.woocommerce div.product form.cart .reset_variations {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.woocommerce-variation-price { margin-block: var(--sp-3); font-size: var(--fs-20); }


/* ═══ Related products — make the WooCommerce shortcode grid ═══ */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* WooCommerce's legacy float-clearing CSS adds ::before / ::after pseudo-
   elements to ul.products — in a CSS Grid container those become real grid
   items and push every product card one cell to the right (leaving an empty
   first cell and forcing the last item to row 2). Kill them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  content: none !important;
  display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  clear: none !important;
}
.woocommerce ul.products li.product::before,
.woocommerce-page ul.products li.product::before {
  content: none;
}
.woocommerce ul.products li.product .product-card { width: 100%; }

@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  /* Tighten product card padding so two-up still reads cleanly on phones. */
  .woocommerce ul.products li.product .product-card__body { padding: var(--sp-3); }
  .woocommerce ul.products li.product .product-card__name  { font-size: var(--fs-15, 0.95rem); }
}


/* ═══ Stock / notices ═══ */
.woocommerce .stock {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--color-teal);
  letter-spacing: var(--tracking-wide);
}
.woocommerce .out-of-stock { color: var(--color-red); }


/* Hide the duplicate cart button WC injects on cards — our card has its own UI */
.woocommerce ul.products li.product .product-card .button,
.woocommerce ul.products li.product > a.button,
.woocommerce ul.products li.product .added_to_cart {
  display: none;
}


/* ═══ WooCommerce Cart Blocks (Gutenberg-based cart page) ═══
   The block cart uses a 2-column flex layout (items | summary). On narrow
   viewports it doesn't always collapse cleanly — line items overflow to the
   right and the "Proceed to Checkout" button gets clipped. Force a vertical
   stack and contain every block to the viewport width. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart .wc-block-cart,
.wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block {
  max-width: 100%;
  overflow-x: hidden;
}

/* Hello Elementor applies `.alignwide { margin-inline: -80px }` to "break out"
   of the content column on desktop. The cart-block container has the
   `alignwide` class — on mobile that -80px pulls 80px of content off the
   left AND right edges of the viewport. Reset it on narrow screens. */
@media (max-width: 1000px) {
  .alignwide,
  .wp-block-woocommerce-cart.alignwide,
  .wp-block-woocommerce-checkout.alignwide {
    margin-inline: 0 !important;
  }
}

@media (max-width: 880px) {
  /* Stack items + summary instead of side-by-side. */
  .wp-block-woocommerce-cart .wc-block-cart,
  .wp-block-woocommerce-cart .wp-block-woocommerce-filled-cart-block {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart__main,
  .wp-block-woocommerce-cart .wc-block-cart__sidebar,
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-items-block,
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-totals-block,
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }

  /* Cart line-item table is too wide on phones — let columns wrap nicely. */
  .wp-block-woocommerce-cart .wc-block-cart-items,
  .wp-block-woocommerce-cart table.wc-block-cart-items {
    width: 100%;
    table-layout: fixed;
  }
  .wp-block-woocommerce-cart .wc-block-cart-items th,
  .wp-block-woocommerce-cart .wc-block-cart-items td {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Make the "Proceed to Checkout" button always fit. */
  .wp-block-woocommerce-cart .wc-block-cart__submit-container,
  .wp-block-woocommerce-cart .wc-block-components-checkout-place-order-button {
    width: 100% !important;
  }
  .wp-block-woocommerce-cart .wc-block-cart__submit-container .wp-block-button__link,
  .wp-block-woocommerce-cart .wc-block-cart__submit-button {
    width: 100%;
    white-space: normal;
  }
}