/*
 * Styling for WooCommerce's own cart/checkout markup, which we deliberately
 * did NOT override as PHP templates — those forms carry WooCommerce's
 * tested AJAX behaviour (quantity updates, coupon apply, checkout
 * validation, place-order) and reimplementing them without a real
 * WooCommerce install to test against would risk silently breaking order
 * placement. Everything below is presentation only.
 */

/* WooCommerce's own buttons (add to cart, place order, apply coupon,
   update cart) don't carry the theme's .btn classes in markup — map them
   to the same look here so every actionable button in the storefront
   reads as one system instead of falling back to the browser default. */
.button,
.single_add_to_cart_button,
#place_order,
.woocommerce-cart-form button[name="update_cart"],
.woocommerce-cart-form button[name="apply_coupon"]{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font-family: var(--font-base); font-weight: 700; font-size: 15px; cursor: pointer;
  background: var(--color-primary); color: var(--color-primary-contrast);
  transition: background-color .15s ease, transform .05s ease;
}
.button:hover, .single_add_to_cart_button:hover, #place_order:hover,
.woocommerce-cart-form button[name="update_cart"]:hover,
.woocommerce-cart-form button[name="apply_coupon"]:hover{ background: var(--color-primary-hover); }
.button:active, .single_add_to_cart_button:active, #place_order:active{ transform: scale(.98); }
.button.disabled, .single_add_to_cart_button.disabled, .button:disabled{ opacity: .5; cursor: not-allowed; }

.woocommerce-cart-form button[name="update_cart"]{ background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.woocommerce-cart-form button[name="update_cart"]:hover{ background: var(--color-bg-muted); }

/* Quantity stepper look, applied to WooCommerce's default .qty input via
   JS-injected +/- buttons (see main.js `initQtyStepper`). The box/button
   look itself lives in style.css (.qty-stepper, shared with .quantity so
   it applies before that JS class exists — see the comment there). */
.qty-stepper__input{ -moz-appearance: textfield; }
.qty-stepper__input::-webkit-outer-spin-button,
.qty-stepper__input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* Shop / category loop container WooCommerce renders via woocommerce_product_loop_start(). */
ul.products{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
@media (min-width: 640px){ ul.products{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ ul.products{ grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } }
ul.products li.product{ list-style: none; margin: 0 !important; }

.woocommerce-products-header__title{ font-size: 22px; margin: var(--space-3) 0; }

/* Result count (left) + sort dropdown (right) — see the .shop-toolbar wrapper
   archive-product.php adds around woocommerce_before_shop_loop. */
.shop-toolbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-4); flex-wrap: wrap;
}
.woocommerce-result-count, .woocommerce-ordering{ font-size: 13px; color: var(--color-text-muted); margin: 0; }
.woocommerce-ordering select{ height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); padding: 0 var(--space-2); }

/* Cart table */
.woocommerce-cart-form table.cart,
table.shop_table{ width: 100%; border-collapse: collapse; }
table.shop_table th, table.shop_table td{ padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; font-size: 14px; }
table.shop_table img{ width: 56px; height: 56px; object-fit: contain; background: var(--color-bg-muted); border-radius: var(--radius-sm); }
.product-remove a.remove{ color: var(--color-danger); font-size: 20px; line-height: 1; display: inline-flex; }
td.actions{ text-align: right; }
.cart-collaterals{ margin-top: var(--space-5); }
.cart_totals{ background: var(--color-bg-muted); border-radius: var(--radius-md); padding: var(--space-4); max-width: 420px; margin-left: auto; }
.cart_totals table{ width: 100%; }
.cart_totals .order-total .amount{ font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.price, .amount{ font-variant-numeric: tabular-nums; }
.wc-proceed-to-checkout .checkout-button{ display: block; text-align: center; height: 48px; line-height: 48px; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); font-weight: 700; margin-top: var(--space-3); }
.coupon{ display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.coupon input{ height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); flex: 1; }

/* Checkout — layout/field styling lives in style.css next to the actual
   woocommerce/checkout/*.php templates it targets. */
#payment{ background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); }
#payment ul.payment_methods{ list-style: none; margin: 0 0 var(--space-3); padding: 0; }
#payment .payment_box{ background: var(--color-bg-muted); border-radius: var(--radius-sm); padding: var(--space-3); margin-top: var(--space-2); font-size: 13px; }
#place_order{ width: 100%; height: 52px; }

/* Single product tabs / reviews — now rendered full-width below the
   gallery+summary grid, see content-single-product.php. */
.woocommerce-tabs{ max-width: 760px; }
.woocommerce-tabs ul.tabs{ display: flex; gap: var(--space-4); border-bottom: 1px solid var(--color-border); margin: var(--space-6) 0 var(--space-4); list-style: none; padding: 0; overflow-x: auto; }
.woocommerce-tabs ul.tabs li{ margin: 0; }
.woocommerce-tabs ul.tabs li a{ display: inline-block; padding: var(--space-2) 0; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.woocommerce-tabs ul.tabs li.active a{ color: var(--color-primary); border-bottom: 2px solid var(--color-primary); }
.woocommerce-tabs .panel h2{ font-size: 18px; margin-bottom: var(--space-3); }

.star-rating{ color: var(--color-accent); overflow: hidden; position: relative; height: 1.2em; line-height: 1.2em; width: 5.4em; font-size: 14px; }
.star-rating::before{ content: '★★★★★'; float: left; top: 0; left: 0; position: absolute; color: var(--color-border); }
.star-rating span{ overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; }
.star-rating span::before{ content: '★★★★★'; top: 0; position: absolute; left: 0; color: var(--color-accent); }

.woocommerce-Reviews-title{ font-size: 18px; margin-bottom: var(--space-4); }
#comments .commentlist{ list-style: none; margin: 0 0 var(--space-5); padding: 0; }
#comments .comment{ padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
#comments .comment_container{ display: flex; gap: var(--space-3); }
#comments .avatar{ border-radius: var(--radius-pill); flex-shrink: 0; }
#comments .comment-text{ flex: 1; min-width: 0; }
#comments .meta{ font-size: 13px; color: var(--color-text-muted); margin-bottom: 4px; }
#comments .description p:last-child{ margin-bottom: 0; }

#review_form_wrapper{ background: var(--color-bg-muted); border-radius: var(--radius-md); padding: var(--space-4); }
#review_form .comment-reply-title{ font-size: 16px; margin-bottom: var(--space-3); display: block; }
.comment-form-rating label{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.comment-form-rating select{ display: none; } /* enhanced by .star-rating-selector below, kept in DOM for no-JS submission */
.comment-form-rating p.stars{ margin-bottom: var(--space-3); }
/* WooCommerce's own single-product.js swaps #rating (<select>) for this
   <a> list, and each link's real text is an accessibility label ("1 of 5
   stars" / "1 из 5 звёзд") meant for screen readers only — WooCommerce's
   default themes hide it off-canvas and show a star glyph instead. Same
   overflow/indent trick as .star-rating above, since without it that label
   text rendered visibly, overlapping the stars. */
.comment-form-rating p.stars a{
  display: inline-block; position: relative; overflow: hidden;
  width: 1.2em; height: 1.2em; text-align: center; font-size: 20px;
  color: var(--color-border); text-decoration: none;
  text-indent: 200%; white-space: nowrap;
}
.comment-form-rating p.stars a::before{
  content: '★'; position: absolute; top: 0; left: 0; width: 100%; text-indent: 0;
}
/* Fill the hovered/selected star AND every star before it (1..N), not just
   the single one under the cursor — a:has(~ a:hover) matches a star that
   has a LATER sibling being hovered, i.e. every star to its left. */
.comment-form-rating p.stars a:hover,
.comment-form-rating p.stars a:has( ~ a:hover ),
.comment-form-rating p.stars a.active,
.comment-form-rating p.stars a:has( ~ a.active ){ color: var(--color-accent); }
#comment{
  width: 100%; min-height: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-3); font-family: var(--font-base); font-size: 14px; margin-bottom: var(--space-3);
}
#review_form .form-submit input[type="submit"]{
  display: inline-flex; align-items: center; height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  border: 0; background: var(--color-primary); color: #fff; font-weight: 700; cursor: pointer;
}
#review_form .form-submit input[type="submit"]:hover{ background: var(--color-primary-hover); }
p.comment-form-comment label{ display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* Related products — full-width section below the product page grid. */
.related.products{ margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.related.products > h2{ font-size: 20px; margin-bottom: var(--space-4); }

/* "Добавлено" confirmation next to the header actions after AJAX add-to-cart. */
.header-toast{
  display: none; align-items: center; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-pill);
  background: var(--color-badge-instock-bg); color: var(--color-badge-instock-text); font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.header-toast.is-visible{ display: inline-flex; }

/* Price */
.price ins{ text-decoration: none; }
.price del{ color: var(--color-text-muted); font-size: .85em; margin-right: 6px; }

/* Filters (product category sidebar widgets, if used) */
.widget_layered_nav ul, .widget_product_categories ul{ list-style: none; padding: 0; margin: 0; }
.widget_layered_nav li, .widget_product_categories li{ padding: 6px 0; font-size: 14px; }

/* Search overlay toggled from the bottom nav on mobile */
.search-overlay{ position: fixed; inset: 0; background: var(--color-bg); z-index: var(--z-drawer); padding: var(--space-4); display: none; }
.search-overlay.is-open{ display: block; }
.search-overlay__close{ margin-bottom: var(--space-4); }