/* Connecting H2O — WooCommerce brand styling.
   Native WooCommerce templates (Hello Elementor parent), restyled to the brand
   using the design tokens from assets/tokens.css. Loaded only on store pages.
   Targets standard WooCommerce markup so it survives Woo/theme updates. */

.woocommerce, .woocommerce-page { color: var(--foreground); }

/* ---- page container + header ---- */
.woocommerce .site-main,
.woocommerce-page .site-main {
  max-width: 80rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}
.woocommerce-products-header { text-align: center; margin-bottom: 1rem; }
.woocommerce-products-header__title.page-title {
  font-size: clamp(2rem, 1rem + 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}
.woocommerce .woocommerce-breadcrumb { color: var(--muted-foreground); font-size: 0.85rem; margin-bottom: 1.5rem; }
.woocommerce .woocommerce-breadcrumb a { color: var(--primary); text-decoration: none; }

/* ---- result count + ordering ---- */
.woocommerce .woocommerce-result-count { color: var(--muted-foreground); font-size: 0.875rem; margin-top: 0.5rem; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--border); border-radius: 9999px; padding: 0.5rem 1rem;
  background: var(--card); color: var(--foreground); font-size: 0.875rem;
}

/* ---- product grid ---- */
.woocommerce ul.products {
  display: grid !important;
  gap: 1.5rem;
  margin: 1.5rem 0 0 !important;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }
@media (min-width: 640px) {
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
}

.woocommerce ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-3xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column; text-align: center;
}
.woocommerce ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.woocommerce ul.products li.product a img {
  border-radius: var(--radius-xl);
  margin: 0 0 1rem;
  background: var(--tint);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem; font-weight: 600; line-height: 1.4;
  color: var(--foreground); padding: 0 0 0.5rem;
}
.woocommerce ul.products li.product .price {
  color: var(--accent) !important; font-weight: 700; font-size: 1.15rem; margin-bottom: 0.75rem;
}
.woocommerce ul.products li.product .price del { color: var(--muted-foreground); font-weight: 400; opacity: 0.7; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.add_to_cart_button {
  margin-top: auto;
  background: var(--primary); color: #fff;
  border-radius: 9999px; padding: 0.75rem 1.25rem; font-weight: 600;
  transition: background .2s, transform .15s;
}
.woocommerce ul.products li.product .button:hover { background: var(--primary-light); }
.woocommerce ul.products li.product .added_to_cart {
  display: inline-block; margin-top: 0.5rem; color: var(--primary); font-weight: 600; font-size: 0.85rem;
}

/* sale badge */
.woocommerce span.onsale {
  background: var(--accent); color: var(--accent-foreground);
  border-radius: 9999px; min-height: auto; min-width: auto; line-height: 1;
  padding: 0.35rem 0.8rem; font-weight: 700; top: 0.75rem; left: 0.75rem;
}

/* ---- buttons (global within store) ---- */
.woocommerce .button, .woocommerce button.button,
.woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button {
  background: var(--primary); color: #fff;
  border-radius: 9999px; font-weight: 600; padding: 0.8rem 1.6rem;
  border: 0; transition: background .2s, filter .2s;
}
.woocommerce .button:hover, .woocommerce button.button:hover, .woocommerce a.button:hover { background: var(--primary-light); color: #fff; }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--accent); color: var(--accent-foreground);
}
.woocommerce .button.alt:hover { filter: brightness(1.05); background: var(--accent); }

/* ---- single product ---- */
.woocommerce div.product { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .woocommerce div.product { grid-template-columns: 1fr 1fr; align-items: start; } }
.woocommerce div.product .woocommerce-product-gallery { margin: 0; }
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius-2xl); }
.woocommerce div.product .product_title {
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; color: var(--foreground);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--accent); font-weight: 700; font-size: 1.6rem; }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--muted-foreground); line-height: 1.7; }
.woocommerce .quantity .qty {
  border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; width: 4.5rem; color: var(--foreground);
}
.woocommerce div.product form.cart { margin-top: 1.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.woocommerce div.product .product_meta { color: var(--muted-foreground); font-size: 0.85rem; margin-top: 1.5rem; }
.woocommerce div.product .product_meta a { color: var(--primary); }

/* tabs + related (full width under the 2-col grid) */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { grid-column: 1 / -1; }
.woocommerce-tabs ul.tabs::before { border-color: var(--border); }
.woocommerce-tabs ul.tabs li { border-color: var(--border); background: var(--tint); border-radius: 0.5rem 0.5rem 0 0; }
.woocommerce-tabs ul.tabs li.active { background: var(--card); }
.woocommerce-tabs ul.tabs li.active a { color: var(--primary); }
.woocommerce .related.products > h2, .woocommerce .upsells > h2 {
  font-size: 1.5rem; font-weight: 700; color: var(--foreground); margin-bottom: 1.5rem;
}

/* ---- notices ---- */
.woocommerce-message, .woocommerce-info { border-top-color: var(--primary); background: var(--tint); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--primary); }
.woocommerce-error { border-top-color: var(--destructive); }
.woocommerce-error::before { color: var(--destructive); }

/* ---- cart & checkout ---- */
.woocommerce table.shop_table { border-color: var(--border); border-radius: var(--radius-xl); overflow: hidden; }
.woocommerce table.shop_table th { color: var(--foreground); }
.woocommerce-cart table.cart img { border-radius: 0.5rem; }
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.25rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.select2-container--default .select2-selection--single {
  border: 1px solid var(--border) !important; border-radius: 0.5rem; padding: 0.65rem 0.75rem;
}
.woocommerce-checkout #payment { background: var(--tint); border-radius: var(--radius-xl); }
.woocommerce-checkout #payment ul.payment_methods { border-color: var(--border); }