/**
 * Psyrup — woocommerce.css
 * Additional WooCommerce layout & component styles
 * loaded only when WooCommerce is active.
 */

/* ── Shop Layout ──────────────────────────────────────────── */
.woocommerce-page .site-main,
.woocommerce .site-main {
  padding-top: 1.25rem;
}

.woocommerce-products-header {
  margin-bottom: 1.5rem;
}

.woocommerce-products-header__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

/* ── Product Grid ─────────────────────────────────────────── */
ul.products {
  gap: 1.25rem !important;
}

ul.products li.product {
  position: relative;
}

ul.products li.product a img {
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  transition: transform var(--duration-lg) var(--ease-settle);
}

ul.products li.product:hover a img {
  transform: scale(1.03);
}

ul.products li.product .woocommerce-loop-product__link {
  overflow: hidden;
}

/* ── Single Product ───────────────────────────────────────── */
.woocommerce div.product {
  gap: var(--space-md);
}

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.woocommerce div.product .entry-summary {
  padding: 0 0 0 var(--space-md);
}

.woocommerce div.product form.cart .qty {
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(107, 83, 68, 0.2);
  font-size: 1rem;
  width: 4rem;
  text-align: center;
  padding: 0.5rem;
}

/* ── Qty Stepper ──────────────────────────────────────────── */
.quantity {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.psyrup-qty-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md) !important;
  background: var(--psyrup-cream) !important;
  color: var(--psyrup-mid) !important;
  border: 1.5px solid rgba(107, 83, 68, 0.2) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-sm) ease !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.psyrup-qty-btn:hover {
  background: var(--psyrup-amber) !important;
  color: #fff !important;
  border-color: var(--psyrup-amber) !important;
  transform: none !important;
}

/* ── Related Products ─────────────────────────────────────── */
.related.products h2,
.upsells.products h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 400;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(107, 83, 68, 0.1);
}

/* ── Reviews ──────────────────────────────────────────────── */
#reviews #comments ol.commentlist li {
  background: var(--psyrup-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid rgba(107, 83, 68, 0.08);
  margin-bottom: 1rem;
}

#reviews #comments ol.commentlist li img.avatar {
  border-radius: 50%;
  border: 2px solid var(--psyrup-amber-light);
}

.star-rating span::before {
  color: var(--psyrup-amber) !important;
}

/* ── Mini-Cart ────────────────────────────────────────────── */
.widget_shopping_cart .cart_list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(107, 83, 68, 0.08);
}

.widget_shopping_cart .cart_list li a {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--psyrup-charcoal);
}

.widget_shopping_cart .total {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 1rem 0 0;
}

.widget_shopping_cart .total .amount {
  color: var(--psyrup-amber);
}

/* ── Checkout ─────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(107, 83, 68, 0.1);
}

.woocommerce-checkout .woocommerce-form-row label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--psyrup-earth-light);
}

/* ── Account Pages ────────────────────────────────────────── */
.woocommerce-account .woocommerce-MyAccount-navigation {
  background: var(--psyrup-cream);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  border: 1px solid rgba(107, 83, 68, 0.1);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--psyrup-mid);
  transition: all var(--duration-sm) ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--psyrup-amber);
  color: #fff;
}