/*
 * Modern Yogi — WooCommerce Overrides
 * Resets WoodMart/WC default styles to match design system
 */

/* ─────────────────────────────────────────────
   GLOBAL WC OVERRIDES
───────────────────────────────────────────── */
.woocommerce,
.woocommerce-page {
  font-family: var(--my-font);
}

/* Remove default WC blue links */
.woocommerce a:hover {
  color: var(--my-teal);
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  font-family: var(--my-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--my-black);
  color: var(--my-white);
  border-radius: 0;
  padding: 14px 28px;
  transition: background var(--my-t-fast);
  border: 1px solid var(--my-black);
  box-shadow: none;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--my-g800);
  color: var(--my-white);
}

/* Add to cart — teal */
.woocommerce .single_add_to_cart_button,
.single-product .single_add_to_cart_button {
  background: var(--my-teal) !important;
  border-color: var(--my-teal) !important;
  color: var(--my-white) !important;
}
.woocommerce .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:hover {
  background: var(--my-teal-deep) !important;
  border-color: var(--my-teal-deep) !important;
}

/* ─────────────────────────────────────────────
   SHOP / ARCHIVE PRODUCT GRID
───────────────────────────────────────────── */

/* Override WoodMart product card radius */
.woodmart-product-categories-holder .woodmart-category-wrap,
.woocommerce ul.products li.product {
  border-radius: 0;
}

/* Shop page title */
.woocommerce-products-header__title,
.woocommerce-page .woocommerce-products-header__title {
  font-family: var(--my-font);
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ─────────────────────────────────────────────
   SINGLE PRODUCT
───────────────────────────────────────────── */
.single-product .product_title {
  font-family: var(--my-font);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}

.single-product .price {
  font-family: var(--my-font);
  font-size: 22px;
  font-weight: 600;
  color: var(--my-black);
}

.single-product .woocommerce-variation-price .price {
  font-size: 20px;
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  border-bottom: 2px solid var(--my-black);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  background: transparent;
  border: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--my-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--my-g600);
  padding: 14px 24px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--my-black);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

/* Tab content */
.woocommerce div.product .woocommerce-tabs .panel {
  border: none;
  border-top: 1px solid var(--my-g200);
  padding: 32px 0;
  margin: 0;
  font-family: var(--my-font);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--my-g600);
}

/* ─────────────────────────────────────────────
   VARIATION SWATCHES
───────────────────────────────────────────── */

/* WoodMart colour swatches */
.woodmart-variation-swatches .swatch-label {
  border-radius: 0 !important;
  font-family: var(--my-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
}

/* Colour circle swatches */
.woodmart-variation-swatches .swatch-color {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  outline: 1px solid var(--my-g200) !important;
  transition: outline-color var(--my-t-fast), border-color var(--my-t-fast) !important;
}
.woodmart-variation-swatches .swatch-color.selected,
.woodmart-variation-swatches .swatch-color:hover {
  outline-color: var(--my-black) !important;
  border-color: var(--my-white) !important;
}

/* Thickness / image swatches — pill style */
.woodmart-variation-swatches .swatch-image {
  border-radius: 0 !important;
  border: 1px solid var(--my-g200) !important;
  font-family: var(--my-font);
}
.woodmart-variation-swatches .swatch-image.selected {
  border-color: var(--my-black) !important;
}

/* Label above swatches */
.woodmart-variation-swatches-label {
  font-family: var(--my-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--my-black);
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────
   CART
───────────────────────────────────────────── */
.woocommerce table.shop_table {
  border: 1px solid var(--my-g200);
  border-radius: 0;
  font-family: var(--my-font);
}
.woocommerce table.shop_table th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--my-black);
  background: var(--my-g100);
  border-bottom: 2px solid var(--my-black);
  padding: 14px 16px;
}
.woocommerce table.shop_table td {
  border-top: 1px solid var(--my-g200);
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 300;
}

/* Cart totals */
.woocommerce .cart-collaterals .cart_totals {
  font-family: var(--my-font);
}
.woocommerce .cart-collaterals .cart_totals h2 {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
}

/* Checkout button */
.woocommerce .checkout-button.button {
  background: var(--my-teal) !important;
  border-color: var(--my-teal) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  padding: 16px 32px !important;
  width: 100%;
}
.woocommerce .checkout-button.button:hover {
  background: var(--my-teal-deep) !important;
}

/* ─────────────────────────────────────────────
   CHECKOUT
───────────────────────────────────────────── */
.woocommerce-checkout {
  font-family: var(--my-font);
}

.woocommerce form .form-row label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--my-black);
  margin-bottom: 6px;
  display: block;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  font-family: var(--my-font);
  font-size: 13px;
  font-weight: 300;
  border: 1px solid var(--my-g200);
  border-radius: 0;
  padding: 10px 12px;
  transition: border-color var(--my-t-fast);
  outline: none;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--my-black);
  box-shadow: none;
}

/* Order summary heading */
.woocommerce-checkout #order_review_heading {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--my-black);
  padding-bottom: 14px;
  margin-bottom: 0;
}

/* Place order */
#place_order {
  background: var(--my-teal) !important;
  border-color: var(--my-teal) !important;
  font-size: 12px;
  letter-spacing: .12em;
  width: 100%;
  padding: 18px !important;
}
#place_order:hover {
  background: var(--my-teal-deep) !important;
}

/* ─────────────────────────────────────────────
   NOTICES
───────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--my-teal);
  font-family: var(--my-font);
  font-size: 13px;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--my-teal);
}
.woocommerce-error {
  border-top-color: #c0392b;
  font-family: var(--my-font);
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 720px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: 10px 14px;
    font-size: 11px;
  }
}