/* WooCommerce-specific overrides only.
   Keep this file minimal and do not duplicate base styles from app.css */
/* Mini-cart & cart JS behavior lives in resources/main.js → "Mini-cart & Cart system — single JS block". */

/* Checkout: keep content within site layout width and centered */
.woocommerce-checkout .woocommerce { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 12px; box-sizing: border-box; }
@media (max-width: 640px) { .woocommerce-checkout .woocommerce { padding: 10px; } }
/* Checkout page: remove horizontal padding from the page container to align with coupon width */
.woocommerce-checkout .container-page.is-simple { padding-inline: 0px; }

/*
  Shop loop grid → align with .ds-primary-grid without altering global layout
*/
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .woocommerce ul.products,
  .woocommerce-page ul.products { grid-template-columns: repeat(var(--shop-grid-cols-mobile, 1), minmax(0, 1fr)); }
}

/*
  Card container → visually match .product-card.is-vertical
*/
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: var(--shadow-ambient);
  display: grid;
  grid-template-rows: auto auto auto;
}
html.dark .woocommerce ul.products li.product,
html.dark .woocommerce-page ul.products li.product {
  border-color: var(--glass-border);
  background-color: var(--glass-bg);
  box-shadow: var(--shadow-ambient);
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-fg) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-fg) 14%, transparent);
}
html.dark .woocommerce ul.products li.product:hover,
html.dark .woocommerce-page ul.products li.product:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-fg) 25%, transparent);
  border-color: color-mix(in srgb, var(--color-fg) 16%, transparent);
}

/* Image/media */
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
  width: 100%;
  height: auto;
  display: block;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link {
  display: block;
  background: color-mix(in srgb, var(--color-fg) 6%, transparent);
}

/* Body/content */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
  margin: 0;
  padding: 12px 12px 0 12px;
  font-weight: 600;
  line-height: 1.35;
  font-size: 1rem;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
  padding: 2px 12px 12px 12px;
  font-weight: 600;
}

/* Actions: add to cart, view options, etc. → full width buttons */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  width: calc(100% - 24px);
  margin: 0 12px 12px 12px;
  padding: 8px 10px;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}
/* Primary button color mapping to theme tokens */
.woocommerce ul.products li.product .button.add_to_cart_button,
.woocommerce-page ul.products li.product .button.add_to_cart_button,
.woocommerce ul.products li.product .button.product_type_variable,
.woocommerce-page ul.products li.product .button.product_type_variable {
  background-color: var(--btn-primary-bg) !important;
  color: var(--color-bg) !important;
}
.woocommerce ul.products li.product .button.add_to_cart_button:hover,
.woocommerce-page ul.products li.product .button.add_to_cart_button:hover,
.woocommerce ul.products li.product .button.product_type_variable:hover,
.woocommerce-page ul.products li.product .button.product_type_variable:hover {
  background-color: var(--btn-primary-hover) !important;
}
html.dark .woocommerce ul.products li.product .button.add_to_cart_button,
html.dark .woocommerce-page ul.products li.product .button.add_to_cart_button,
html.dark .woocommerce ul.products li.product .button.product_type_variable,
html.dark .woocommerce-page ul.products li.product .button.product_type_variable {
  color: var(--color-bg) !important;
}

/* Onsale badge → map to .badge.sale */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--badge-danger);
  background: transparent;
  color: var(--badge-danger);
  min-height: auto;
  line-height: 1.2;
  margin: 0;
}

/* Out of stock state */
.woocommerce ul.products li.product.outofstock a.woocommerce-LoopProduct-link::after,
.woocommerce-page ul.products li.product.outofstock a.woocommerce-LoopProduct-link::after {
  content: "Laost otsas";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface-dark) 55%, transparent);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce ul.products li.product.outofstock .button,
.woocommerce-page ul.products li.product.outofstock .button { opacity: 0.6; pointer-events: none; }

/* Notices (info/error/success) — theme-styled bars at top */
.woocommerce-notices-wrapper,
.woocommerce-NoticeGroup,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  margin: 12px auto;
  max-width: 1200px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  color: var(--color-fg);
  font-size: 0.95rem;
}
/* Hide empty notice wrappers so the bar isn't visible when there are no notices */
.woocommerce-notices-wrapper:empty,
.woocommerce-NoticeGroup:empty {
  display: none !important;
}
.woocommerce-error {
  border-color: var(--badge-danger);
  background: color-mix(in srgb, var(--badge-danger) 8%, var(--glass-bg));
}
.woocommerce-info {
  border-color: var(--badge-info, #3b82f6);
  background: color-mix(in srgb, var(--badge-info, #3b82f6) 8%, var(--glass-bg));
}
.woocommerce-message {
  border-color: var(--badge-success, #16a34a);
  background: color-mix(in srgb, var(--badge-success, #16a34a) 8%, var(--glass-bg));
}
/* Remove default list bullets inside error lists */
.woocommerce-error li { list-style: none; }
/* Align action links inside notices */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  float: right;
  margin-left: 8px;
}

/* --------------------------------------------------------------
   AJAX Reviews Block — components
   Thin scrollbar for horizontal scrollers (Firefox + WebKit)
   -------------------------------------------------------------- */
html:not(.dark) .woocommerce-account .woocommerce-MyAccount-content form input.input-text,
html:not(.dark) .woocommerce-account .woocommerce-MyAccount-content form textarea,
html:not(.dark) .woocommerce-account .woocommerce-MyAccount-content form select,
html:not(.dark) .woocommerce-account form input[type="tel"],
html:not(.dark) .woocommerce-account form input[type="email"],
html:not(.dark) .woocommerce-account form input[type="text"] {
  background: var(--color-bg);
  border-color: var(--border-color);
}
html.dark .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-input-wrapper input,
html.dark .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-input-wrapper textarea,
html.dark .woocommerce-account .woocommerce-MyAccount-content .woocommerce-address-fields .woocommerce-input-wrapper select,
html.dark .woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
html.dark .woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
html.dark .woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
html.dark .woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
html.dark .woocommerce-account .woocommerce-MyAccount-content form input[type="number"],
html.dark .woocommerce-account .woocommerce-MyAccount-content form input.input-text,
html.dark .woocommerce-account .woocommerce-MyAccount-content form textarea,
html.dark .woocommerce-account .woocommerce-MyAccount-content form select {
  background: var(--color-bg);
  border-color: var(--border-color);
}

/* --------------------------------------------------------------
   Checkout UI (parent)
   - Inputs, selects, textarea, radios/checkboxes
   - Buttons consistent with .btn tokens
   - Light scope: only on checkout route to avoid regressions
   -------------------------------------------------------------- */
.woocommerce-checkout .woocommerce form .form-row { margin: 8px 0; }
.woocommerce-checkout .woocommerce form .form-row label { font-weight: 600; font-size: 0.95rem; }

.woocommerce-checkout .woocommerce form .form-row input.input-text,
.woocommerce-checkout .woocommerce form .form-row textarea,
.woocommerce-checkout .woocommerce form .form-row select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-fg);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-sizing: border-box;
}
.woocommerce-checkout .woocommerce form .form-row input.input-text::placeholder,
.woocommerce-checkout .woocommerce form .form-row textarea::placeholder { color: color-mix(in srgb, var(--color-fg) 50%, transparent); }
.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout .woocommerce form .form-row textarea:focus,
.woocommerce-checkout .woocommerce form .form-row select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-fg) 40%, var(--border-color));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg) 12%, transparent);
}

/* Validation states */
.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid select {
  border-color: var(--badge-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--badge-danger) 18%, transparent);
}
.woocommerce-checkout .woocommerce form .form-row.woocommerce-validated input.input-text {
  border-color: var(--badge-success, #16a34a);
}

/* Required asterisk */
.woocommerce-checkout .woocommerce abbr.required { color: var(--badge-danger); text-decoration: none; border: 0; }

/* Notice links inside checkout info bars */
.woocommerce-checkout .woocommerce .woocommerce-info a { color: var(--color-fg); text-decoration: underline; font-weight: 600; }

/* Coupon form minor polish */
.woocommerce-checkout .woocommerce form.checkout_coupon { margin: 8px 0 16px; }
.woocommerce-checkout .woocommerce form.checkout_coupon .form-row-first,
.woocommerce-checkout .woocommerce form.checkout_coupon .form-row-last { margin: 6px 0; }

/* Radios/checkboxes: align with theme color */
.woocommerce-checkout input[type="checkbox"],
.woocommerce-checkout input[type="radio"] { accent-color: var(--color-fg); }

/* Select2 (country/state) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 40px; border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--color-bg);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding: 0 12px; color: var(--color-fg); }
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; right: 8px; }
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single { border-color: color-mix(in srgb, var(--color-fg) 40%, var(--border-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-fg) 12%, transparent); }

/* Buttons: normalize Woo buttons to theme .btn look */
.woocommerce-checkout .woocommerce a.button,
.woocommerce-checkout .woocommerce button.button,
.woocommerce-checkout .woocommerce input.button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px; min-height: 44px; box-sizing: border-box;
  border-radius: var(--radius); border: 0;
  background: var(--btn-primary-bg); color: var(--color-bg); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem;
}
.woocommerce-checkout .woocommerce a.button:hover,
.woocommerce-checkout .woocommerce button.button:hover,
.woocommerce-checkout .woocommerce input.button:hover { background: var(--btn-primary-hover); }

/* Place Order: ensure full width on narrow screens */
@media (max-width: 640px) {
  .woocommerce-checkout .woocommerce #place_order { width: 100%; }
}

/* Layout: two-column grid (billing/details + order review) */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1024px) { .woocommerce-checkout .col2-set { grid-template-columns: 1fr; } }

/* Field wrappers spacing + responsive two-column grid for paired fields */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper,
.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  .woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Explicit placements to ensure pairing even if Woo toggles classes */
  .woocommerce-checkout #billing_address_1_field { grid-column: 1 / 2; }
  .woocommerce-checkout #billing_country_field   { grid-column: 2 / 3; }
  .woocommerce-checkout #billing_postcode_field  { grid-column: 1 / 2; }
  .woocommerce-checkout #billing_city_field      { grid-column: 2 / 3; }
}
/* Make wide rows span both columns, except address fields (which we pair side-by-side) */
.woocommerce-checkout .form-row-wide:not(.address-field) { grid-column: 1 / -1; }

/* Order review container */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order { border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); padding: 12px; }
@media (max-width: 640px) {
  .woocommerce-checkout #order_review,
  .woocommerce-checkout .woocommerce-checkout-review-order { padding: 12px; }
}

/* Order review table */

/* --------------------------------------------------------------
   My Account — Login form small fixes
   - Button on new line
   - Remember-me label vertically centered
   Scope: only My Account login form
   -------------------------------------------------------------- */
.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.woocommerce-account .woocommerce form.woocommerce-form-login .woocommerce-form-login__submit {
  display: block;
  margin-top: 8px;
}