/**
 * 22 HUES - WooCommerce Styles
 * Custom styling for WooCommerce elements
 * 
 * @package 22Hues
 * @version 1.0.0
 */

/* ========================================
   SHOP PAGE
   ======================================== */

.woocommerce-products-header {
  text-align: center;
  padding: var(--spacing-4xl) var(--spacing-xl) var(--spacing-2xl);
}

.woocommerce-products-header__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-md);
}

.woocommerce-products-header__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-warm-gray);
  max-width: 600px;
  margin: 0 auto;
}

/* Product Grid */
.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Product Card */
.product {
  background: transparent;
  text-align: left;
  transition: transform var(--transition-normal);
}

.product:hover {
  transform: translateY(-4px);
}

.product .woocommerce-loop-product__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Product Image */
.product img,
.woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: opacity var(--transition-normal);
}

.product:hover img {
  opacity: 0.9;
}

/* Product Title */
.woocommerce-loop-product__title {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  margin: var(--spacing-md) 0 var(--spacing-xs);
  color: var(--color-black);
}

/* Product Price */
.product .price {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}

.product .price del {
  color: var(--color-gray-medium);
  font-weight: var(--font-weight-regular);
  margin-right: var(--spacing-sm);
}

.product .price ins {
  text-decoration: none;
  color: var(--color-error);
}

/* Sale Badge */
.product .onsale {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

/* Hide default Add to Cart button */
.product .add_to_cart_button {
  display: none;
}

/* ========================================
   PRODUCT FILTERS / SIDEBAR
   ======================================== */

.shop-filters {
  width: 280px;
  padding-right: var(--spacing-xl);
  border-right: 1px solid var(--border-color);
}

.filter-section {
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-color);
}

.filter-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.filter-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
}

.filter-section-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.filter-section.open .filter-section-content {
  max-height: 500px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) 0;
  cursor: pointer;
  font-size: var(--font-size-base);
}

.filter-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-black);
}

/* ========================================
   SINGLE PRODUCT PAGE
   ======================================== */

.single-product .product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl);
}

/* Product Gallery */
.woocommerce-product-gallery {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-xl));
}

.woocommerce-product-gallery__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm);
}

.woocommerce-product-gallery__image img {
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 0;
  cursor: zoom-in;
}

/* Product Thumbnails */
.woocommerce-product-gallery__trigger,
.flex-control-thumbs {
  margin-top: var(--spacing-md);
}

.flex-control-thumbs {
  display: flex;
  gap: var(--spacing-sm);
}

.flex-control-thumbs li {
  width: 60px;
  height: 60px;
}

.flex-control-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--transition-normal);
}

.flex-control-thumbs img:hover,
.flex-control-thumbs .flex-active {
  opacity: 1;
}

/* Product Summary */
.summary.entry-summary {
  padding-top: var(--spacing-xl);
}

.product_title {
  font-family: var(--font-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-regular);
  margin-bottom: var(--spacing-md);
}

.single-product .price {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-xl);
}

/* Product Short Description */
.woocommerce-product-details__short-description {
  font-size: var(--font-size-base);
  color: var(--color-warm-gray);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
}

/* Variations */
.variations {
  width: 100%;
  margin-bottom: var(--spacing-xl);
}

.variations tr {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-md);
}

.variations .label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}

.variations select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  background: var(--color-white);
}

/* Color Swatches */
.color-swatches {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.color-swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition-normal), transform var(--transition-normal);
}

.color-swatch:hover {
  transform: scale(1.1);
}

.color-swatch.active {
  border-color: var(--color-black);
}

/* Quantity */
.quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-right: var(--spacing-md);
}

.quantity .qty {
  width: 60px;
  height: 48px;
  text-align: center;
  border: none;
  font-size: var(--font-size-base);
}

/* Add to Cart Button */
.single_add_to_cart_button {
  flex: 1;
  padding: 16px 32px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-normal);
}

.single_add_to_cart_button:hover {
  background: var(--color-gray-dark);
}

/* Add to Cart Form */
form.cart {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

/* Product Meta */
.product_meta {
  font-size: var(--font-size-sm);
  color: var(--color-warm-gray);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.product_meta > span {
  display: block;
  margin-bottom: var(--spacing-sm);
}

.product_meta a {
  color: var(--color-black);
}

/* ========================================
   PRODUCT TABS
   ======================================== */

.woocommerce-tabs {
  margin-top: var(--spacing-3xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--border-color);
}

.woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-xl);
}

.woocommerce-tabs ul.tabs li {
  padding-bottom: var(--spacing-md);
  margin-bottom: -1px;
}

.woocommerce-tabs ul.tabs li a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-warm-gray);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: var(--spacing-md);
}

.woocommerce-tabs ul.tabs li.active a {
  color: var(--color-black);
  border-bottom-color: var(--color-black);
}

/* ========================================
   CART PAGE
   ======================================== */

.woocommerce-cart-form {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl);
}

.shop_table {
  width: 100%;
  border-collapse: collapse;
}

.shop_table th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-warm-gray);
  text-align: left;
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-color);
}

.shop_table td {
  padding: var(--spacing-lg) 0;
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

.shop_table .product-thumbnail img {
  width: 100px;
  height: 133px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.shop_table .product-name a {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
}

.shop_table .product-remove a {
  color: var(--color-warm-gray);
  font-size: var(--font-size-lg);
}

.shop_table .product-remove a:hover {
  color: var(--color-error);
}

/* Cart Totals */
.cart_totals {
  max-width: 400px;
  margin-left: auto;
  padding: var(--spacing-xl);
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.cart_totals h2 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-lg);
}

.cart_totals table {
  width: 100%;
}

.cart_totals th,
.cart_totals td {
  padding: var(--spacing-sm) 0;
}

.cart_totals th {
  text-align: left;
  font-weight: var(--font-weight-regular);
  color: var(--color-warm-gray);
}

.cart_totals td {
  text-align: right;
}

.cart_totals .order-total {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.wc-proceed-to-checkout .checkout-button {
  width: 100%;
  padding: 16px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  text-align: center;
  border: none;
  border-radius: var(--radius-sm);
  margin-top: var(--spacing-lg);
}

/* ========================================
   CHECKOUT PAGE
   ======================================== */

.woocommerce-checkout {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-2xl);
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--spacing-3xl);
}

/* Checkout Form */
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-lg);
}

.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
}

.woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-shipping-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}

.woocommerce-checkout .form-row label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
}

.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
}

.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  border-color: var(--color-black);
}

/* Order Review */
.woocommerce-checkout-review-order {
  position: sticky;
  top: calc(var(--header-height) + var(--spacing-xl));
  background: var(--color-white);
  padding: var(--spacing-xl);
  border-radius: var(--radius-lg);
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.woocommerce-checkout-review-order-table th {
  text-align: left;
  font-weight: var(--font-weight-regular);
  color: var(--color-warm-gray);
  padding: var(--spacing-sm) 0;
}

.woocommerce-checkout-review-order-table td {
  text-align: right;
  padding: var(--spacing-sm) 0;
}

/* Payment Methods */
.woocommerce-checkout-payment {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.wc_payment_methods {
  list-style: none;
}

.wc_payment_method {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-color);
}

.wc_payment_method label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

.wc_payment_method .payment_box {
  padding: var(--spacing-md) 0 0 var(--spacing-xl);
  color: var(--color-warm-gray);
  font-size: var(--font-size-sm);
}

/* Place Order Button */
#place_order {
  width: 100%;
  padding: 18px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: var(--spacing-lg);
}

#place_order:hover {
  background: var(--color-gray-dark);
}

/* ========================================
   MY ACCOUNT
   ======================================== */

.woocommerce-MyAccount-navigation {
  width: 250px;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
}

.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--border-color);
}

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--spacing-md) 0;
  font-size: var(--font-size-base);
  color: var(--color-warm-gray);
}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation a:hover {
  color: var(--color-black);
}

.woocommerce-MyAccount-content {
  flex: 1;
  padding-left: var(--spacing-2xl);
}

/* ========================================
   RELATED PRODUCTS / UPSELLS
   ======================================== */

.related.products,
.upsells.products {
  margin-top: var(--spacing-4xl);
  padding-top: var(--spacing-2xl);
  border-top: 1px solid var(--border-color);
}

.related.products h2,
.upsells.products h2 {
  font-size: var(--font-size-2xl);
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.related.products ul.products,
.upsells.products ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
  padding: 0;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1200px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
  }

  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }

  .single-product .product {
    grid-template-columns: 1fr;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout-review-order {
    position: static;
  }

  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .products {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }

  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .related.products ul.products,
  .upsells.products ul.products {
    grid-template-columns: 1fr;
  }
}