/* =============================================================
   AMYTEA — WooCommerce Overrides
   Complete visual reset of WooCommerce's default styles.
   Every !important here documents an actual WC specificity war.
   ============================================================= */

/* ── Disable WooCommerce's own styles ──────────────────────── */
/* (enqueue.php handles dequeuing — this handles any that slip through) */

/* ── WC Layout ──────────────────────────────────────────────── */
.woocommerce,
.woocommerce-page {
  margin-top: 72px; /* nav offset */
}

/* WC uses these; we override with our container */
.woocommerce .woocommerce-notices-wrapper {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}

/* ── Products Loop ─────────────────────────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: var(--card-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.woocommerce ul.products li.product {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}

/* ── Single Product ────────────────────────────────────────── */
.woocommerce div.product {
  margin: 0 !important;
}

/* Star ratings */
.woocommerce .star-rating {
  color: var(--color-accent) !important;
  font-size: var(--text-sm) !important;
}

.woocommerce .star-rating::before,
.woocommerce .star-rating span::before {
  color: var(--color-accent) !important;
}

/* Price */
.woocommerce .price {
  color: var(--color-primary) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--text-xl) !important;
}

/* Add to Cart button */
.woocommerce .single_add_to_cart_button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button {
  background-color: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase !important;
  padding: 14px var(--space-8) !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
  background-color: var(--color-primary-dark) !important;
  border-color: var(--color-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(91,45,142,0.35) !important;
  transform: translateY(-1px);
  color: var(--color-text-inverse) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
}

/* ── WC Forms ──────────────────────────────────────────────── */
.woocommerce form .form-row label {
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-2) !important;
  font-family: var(--font-body) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px var(--space-4) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
  background: var(--color-surface-raised) !important;
  box-shadow: none !important;
  transition: border-color var(--duration-normal) var(--ease-out) !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(91,45,142,0.15) !important;
  outline: none !important;
}

/* ── WC Cart Table ─────────────────────────────────────────── */
.woocommerce table.shop_table {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.woocommerce table.shop_table th {
  background: var(--color-surface-sunken) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-wider) !important;
  text-transform: uppercase !important;
  padding: var(--space-4) var(--space-6) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

.woocommerce table.shop_table td {
  padding: var(--space-5) var(--space-6) !important;
  border-bottom: 1px solid var(--color-border) !important;
  vertical-align: middle !important;
  font-family: var(--font-body) !important;
}

/* ── WC Checkout ───────────────────────────────────────────── */
.woocommerce-checkout .col2-set {
  float: none !important;
  width: 100% !important;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .woocommerce-checkout .col2-set {
    grid-template-columns: 1fr;
  }
}

.woocommerce #customer_details .col-1,
.woocommerce #customer_details .col-2 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Order review */
.woocommerce #order_review_heading,
.woocommerce #order_review {
  float: none !important;
  width: 100% !important;
}

/* Payment box */
.woocommerce #payment {
  background: var(--color-surface-raised) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--color-border) !important;
  padding: var(--space-6) !important;
}

.woocommerce #payment ul.payment_methods {
  border-bottom: 1px solid var(--color-border) !important;
  padding: 0 !important;
  margin-bottom: var(--space-5) !important;
}

.woocommerce #payment ul.payment_methods li {
  padding: var(--space-3) 0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
}

/* ── WC Notices (already in base.css, reinforced) ──────────── */
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--color-primary) !important;
}

/* ── Remove WC breadcrumbs (we use our own) ─────────────────── */
.woocommerce .woocommerce-breadcrumb {
  display: none !important;
}

/* ── Quantity Input ────────────────────────────────────────── */
.woocommerce .quantity input.qty {
  border: 2px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px var(--space-3) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold) !important;
  text-align: center !important;
  width: 64px !important;
  height: 44px !important;
}

/* ── Related Products ──────────────────────────────────────── */
.related.products {
  clear: both;
  margin-top: var(--space-20) !important;
}

.related.products h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-3xl) !important;
  margin-bottom: var(--space-8) !important;
}

/* ── My Account ────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary) !important;
  transition: all var(--duration-normal) var(--ease-out);
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-primary-tint);
  color: var(--color-primary) !important;
}