/*
 * EAI Theme — WooCommerce Styles
 * Loaded only when WooCommerce is active.
 * Full product template overrides come in Step 2.
 *
 * @package eai-theme
 */

/* ─── Breadcrumb ─────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-family: var(--font-semi);
  font-size: .8rem;
  color: var(--gray-400);
  margin-bottom: 32px;
  padding: 16px 0;
}
.woocommerce-breadcrumb a { color: var(--sky); }
.woocommerce-breadcrumb a:hover { color: var(--navy); }

/* ─── Shop archive product grid ──────────────────────────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 900px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}

.woocommerce ul.products li.product {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
}
.woocommerce ul.products li.product:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  padding: 16px 20px 4px !important;
  margin: 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  padding: 4px 20px !important;
  display: block !important;
}
.woocommerce ul.products li.product .price del {
  color: var(--gray-400) !important;
  font-size: 1rem !important;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none !important;
}

/* Add to cart button */
.woocommerce ul.products li.product .button {
  margin: 12px 20px 20px !important;
  width: calc(100% - 40px) !important;
  display: block !important;
  text-align: center !important;
  background: var(--navy) !important;
  color: var(--white) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-semi) !important;
  font-weight: 600 !important;
  font-size: .88rem !important;
  padding: 11px 20px !important;
  letter-spacing: .03em !important;
  border: 2px solid var(--navy) !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}

/* Sale badge */
.woocommerce ul.products li.product .onsale {
  background: var(--gold) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-semi) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  top: 12px !important;
  left: 12px !important;
  min-height: auto !important;
  min-width: auto !important;
  line-height: 1 !important;
  padding: 5px 10px !important;
}

/* ─── Single product ─────────────────────────────────────────────────────── */
.woocommerce div.product div.images .woocommerce-product-gallery__image img {
  border-radius: var(--radius-lg);
}

.woocommerce div.product .product_title {
  font-family: var(--font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  line-height: 1.1 !important;
  margin-bottom: 12px !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
}

.woocommerce div.product form.cart .button {
  background: var(--gold) !important;
  color: var(--white) !important;
  font-family: var(--font-semi) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  padding: 14px 32px !important;
  border-radius: var(--radius) !important;
  border: none !important;
  letter-spacing: .04em !important;
}
.woocommerce div.product form.cart .button:hover {
  background: #b07d2e !important;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--gray-200);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-semi) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
  color: var(--gray-700) !important;
  padding: 12px 20px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--navy) !important;
  border-bottom: 2px solid var(--navy) !important;
}

/* ─── Cart / Checkout ────────────────────────────────────────────────────── */
.woocommerce-cart .woo-main,
.woocommerce-checkout .woo-main {
  padding: 48px 0;
}

.woocommerce table.shop_table {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.woocommerce table.shop_table th {
  font-family: var(--font-semi) !important;
  font-size: .8rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--gray-400) !important;
  background: var(--off-white) !important;
}

.woocommerce-checkout #order_review .shop_table {
  border-radius: var(--radius-lg) !important;
}

.woocommerce form .form-row label {
  font-family: var(--font-semi) !important;
  font-size: .85rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  border: 1px solid var(--gray-200) !important;
  border-radius: var(--radius) !important;
  padding: 10px 14px !important;
  font-family: var(--font-body) !important;
  font-size: .9rem !important;
  color: var(--text) !important;
  width: 100% !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  border-color: var(--sky) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(29,111,207,.1) !important;
}

/* ─── Messages ───────────────────────────────────────────────────────────── */
.woocommerce-message {
  border-top: 3px solid var(--gold) !important;
  background: var(--gold-light) !important;
  color: var(--navy) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-semi) !important;
}
.woocommerce-info {
  border-top: 3px solid var(--sky) !important;
  background: var(--sky-light) !important;
  color: var(--navy) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-semi) !important;
}
.woocommerce-error {
  border-top: 3px solid #d93025 !important;
  background: #fce8e6 !important;
  color: #b31412 !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-semi) !important;
}