/* ============================================
   Bebeto — WooCommerce stock-markup styling
   Covers screens we deliberately did NOT hand-template (see the plan's
   "WooCommerce scope boundary"): lost password, edit-address, edit-
   account, single order view — plus the handful of WC-native elements
   that surface inside our custom templates (result count, ordering
   dropdown, native pagination, notices, generic buttons, terms checkbox).
   Only loaded on WooCommerce screens — see inc/enqueue.php.
   ============================================ */

/* ---------- Generic WC buttons → .btn look ---------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce-account .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-glow-primary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out-quart), transform var(--duration-fast);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  color: var(--color-on-primary);
}
.woocommerce a.button.loading,
.woocommerce button.button.loading { opacity: 0.7; }

/* ---------- Notices ---------- */
.woocommerce-error, .woocommerce-message, .woocommerce-info {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.woocommerce-error { background-color: oklch(58% 0.21 25 / 0.1); color: oklch(45% 0.21 25); }
.woocommerce-message { background-color: var(--color-success-tint); color: var(--color-success); }
.woocommerce-info { background-color: var(--color-accent-tint); color: var(--color-accent-hover); }
.woocommerce-error a.button, .woocommerce-message a.button, .woocommerce-info a.button {
  padding: 0.5rem 1.25rem; font-size: var(--text-sm); box-shadow: none;
}

/* ---------- Shop toolbar: result count + ordering ---------- */
.woocommerce-result-count { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.woocommerce-ordering { margin: 0; }
.woocommerce-ordering select { margin: 0; }

/* ---------- Native WC pagination (archive-product.php uses woocommerce_pagination()) ---------- */
.woocommerce-pagination ul.page-numbers {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  list-style: none; margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0; padding: 0;
}
.woocommerce-pagination .page-numbers li { display: inline-flex; }
.woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background-color: var(--color-surface);
  color: var(--color-ink-soft); font-weight: 600; font-size: var(--text-sm);
  box-shadow: var(--shadow-sm); transition: background-color var(--duration-base), color var(--duration-base);
}
.woocommerce-pagination .page-numbers a:hover { background-color: var(--color-primary-tint); color: var(--color-primary); }
.woocommerce-pagination .page-numbers .current { background-color: var(--color-primary); color: var(--color-on-primary); }

/* ---------- Terms checkbox + payment box (checkout) ---------- */
.woocommerce-terms-and-conditions-wrapper { margin-block: var(--space-4); font-size: var(--text-sm); }
.woocommerce-terms-and-conditions-wrapper label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--color-primary); }
.woocommerce-checkout-payment ul.payment_methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.payment_box { background: none; padding-top: var(--space-3); }
.payment_box p:first-child { margin-top: 0; }

/* ---------- Single product short description (woocommerce_template_single_excerpt) ---------- */
.woocommerce-product-details__short-description { color: var(--color-ink-soft); line-height: var(--leading-relaxed); }
.woocommerce-product-details__short-description p { margin: 0; }

/* ---------- Quantity input (used outside our custom qty-stepper contexts) ---------- */
.quantity .qty { width: 4rem; text-align: center; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: 0.6rem; font-family: var(--font-heading); font-weight: 700; }

/* ---------- Star ratings (reviews tab, uses WC core markup) ---------- */
.star-rating { color: var(--color-gold); font-size: var(--text-sm); overflow: hidden; position: relative; height: 1.2em; line-height: 1.2; width: 5.4em; }
.star-rating::before { content: "\2606\2606\2606\2606\2606"; 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: "\2605\2605\2605\2605\2605"; top: 0; position: absolute; left: 0; }
#reviews .comment-text { background-color: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
#reviews #respond { margin-top: var(--space-6); }

/* ---------- Country/state dropdowns on checkout (select2/selectWoo) ----------
   This theme disables WooCommerce's own stylesheets (see inc/enqueue.php),
   which is where these boxes normally get their sizing/positioning from.
   Without this, select2 renders at an inline-block "natural" width set by
   JS, which overflows a narrow mobile .form-row instead of filling it —
   the main checkout-on-mobile breakage. */
.select2-container { width: 100% !important; }
.select2-container .select2-selection--single {
  height: auto;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 0.875rem 1.25rem;
  background-color: var(--color-bg);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: var(--leading-snug);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: auto;
  top: 50%;
  inset-inline-end: 1rem;
  inset-inline-start: auto;
  transform: translateY(-50%);
}
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--color-primary);
}
.select2-dropdown {
  border-color: var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.select2-search--dropdown .select2-search__field {
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
}
.select2-results__option {
  padding: 0.6rem 1rem;
  font-size: var(--text-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ---------- Shop sidebar: price filter widget (WC_Widget_Price_Filter) ----------
   This theme disables WooCommerce's own stylesheets (see inc/enqueue.php), so
   the jQuery-UI price slider arrives completely unstyled without these rules. */
.widget_price_filter .price_slider { margin-bottom: var(--space-4); }
.widget_price_filter .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-soft); }
.widget_price_filter .price_slider_amount .button {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem;
  font-size: var(--text-xs);
  font-weight: 700;
}
.widget_price_filter .ui-slider {
  position: relative;
  height: 0.35rem;
  margin: var(--space-5) 0.5rem var(--space-4);
  background-color: var(--color-border);
  border-radius: var(--radius-pill);
}
.widget_price_filter .ui-slider-range {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: var(--color-primary);
  border-radius: var(--radius-pill);
}
.widget_price_filter .ui-slider-handle {
  position: absolute;
  top: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin-inline-start: -0.55rem;
  transform: translateY(-50%);
  background-color: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  outline: none;
}

/* ---------- Shop sidebar: rating filter widget (WC_Widget_Rating_Filter) ---------- */
.widget_rating_filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.widget_rating_filter li a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  transition: background-color var(--duration-base), color var(--duration-base);
}
.widget_rating_filter li a:hover { background-color: var(--color-surface-alt); color: var(--color-ink); }
.widget_rating_filter li .star-rating { flex-shrink: 0; }

/* ---------- My Account: lost password / edit address / edit account / view order
   (no dedicated PHP overrides for these — see plan's scope boundary) ---------- */
.woocommerce-ResetPassword, .woocommerce-EditAccountForm, .woocommerce-address-fields {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.woocommerce-ResetPassword p, .woocommerce-EditAccountForm p, .woocommerce-address-fields p,
.woocommerce-form-row { margin-bottom: var(--space-5); }
.woocommerce-ResetPassword label, .woocommerce-EditAccountForm label, .woocommerce-address-fields label {
  display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-2);
}
.woocommerce-address-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.woocommerce-address-fields__field-wrapper p:has(select#billing_country),
.woocommerce-address-fields__field-wrapper p:has(textarea) { grid-column: 1 / -1; }
.woocommerce-EditAccountForm fieldset { border: none; padding: 0; margin: var(--space-6) 0 0; }
.woocommerce-EditAccountForm legend { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-4); padding: 0; }

.woocommerce-order-details, .woocommerce-customer-details {
  background-color: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); margin-bottom: var(--space-6);
}
.woocommerce-order-details__title, .woocommerce-column__title { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.woocommerce-table--order-details { width: 100%; border-collapse: collapse; }
.woocommerce-table--order-details th, .woocommerce-table--order-details td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); text-align: start; }
.woocommerce-customer-details address { font-size: var(--text-sm); color: var(--color-ink-soft); line-height: var(--leading-relaxed); font-style: normal; }

@media (max-width: 36rem) {
  .woocommerce-address-fields__field-wrapper { grid-template-columns: 1fr; }
}

/* ---------- Variable product add-to-cart: match simple product buy-row layout ---------- */
.woocommerce-variation-add-to-cart {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.woocommerce-variation-add-to-cart .qty-stepper {
  flex-shrink: 0;
  width: auto;
}
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
  flex: 1;
  min-width: 12rem;
}

/* WC injects .onsale as a 3rd .product-detail grid child — hide it since
   we render our own badge inside .product-info instead. */
.product-detail > .onsale { display: none; }