/**
 * Resume Place FSE — WooCommerce token refinements.
 *
 * Maps WooCommerce's default block + classic storefront markup onto the theme's
 * design tokens, so the store holds visual parity with the React commerce blocks
 * (src/components/blocks/ecommerce/*). No hardcoded colors: everything resolves
 * from the same tokens the rest of the theme uses. Loaded only on Woo pages
 * (see velocity_enqueue_styles in functions.php). See docs/COMPONENT_PARITY_MATRIX.md.
 */

/* ---- Product images: warm muted tile, rounded (matches React ProductCard) ---- */
.woocommerce ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-image img {
  border-radius: var(--radius-lg);
}
.woocommerce ul.products li.product a img,
.woocommerce div.product .woocommerce-product-gallery {
  background: var(--muted);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---- Single-product title: display scale ---- */
/* Classic markup uses .product_title; the block single-product template renders
   the title as a core post-title block, so target that within .single-product too. */
.woocommerce div.product .product_title,
.wc-block-components-product-name,
body.single-product .wp-block-post-title {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ---- Price ---- */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: var(--foreground);
  font-weight: 600;
}
.woocommerce div.product p.price { font-size: 1.5rem; }

/* ---- Variation select + quantity: token inputs, fix the clipped select ---- */
.woocommerce div.product form.cart .variations {
  border: 0;
  margin: 0 0 1.25rem;
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  padding: 0 0 0.75rem;
  vertical-align: middle;
}
.woocommerce div.product form.cart .variations label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--foreground);
}
.woocommerce div.product form.cart .variations select,
.woocommerce .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce-ordering select {
  appearance: auto;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.4;
}

/* ---- Quantity + add-to-cart row alignment ---- */
.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation { flex-basis: 100%; }
.woocommerce .quantity .qty { width: 4.5rem; text-align: center; }

/* ---- Buttons: read as theme primary (tangelo) everywhere ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link) {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  transition: opacity 0.2s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:not(.is-link):hover {
  background: var(--primary);
  color: var(--primary-foreground);
  opacity: 0.9;
}
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce .single_add_to_cart_button.disabled { opacity: 0.45; }

/* ---- Archive cards: radius + subtle image zoom on hover ---- */
.woocommerce ul.products li.product,
.wc-block-grid__product { border-radius: var(--radius-lg); }
.woocommerce ul.products li.product a img { transition: transform 0.3s ease; }
.woocommerce ul.products li.product:hover a img { transform: scale(1.03); }

/* ---- Tabs: token underline ---- */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  border-bottom: 2px solid var(--primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: var(--border);
}

/* ---- Result count + ordering, breadcrumb ---- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb {
  color: var(--muted-foreground);
  font-family: var(--font-sans);
}

/* ---- Sale badge ---- */
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* ---- Notices: token surfaces ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--primary);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
}