/**
 * Ira Wear — WooCommerce Style Overrides
 * Overrides WooCommerce default styles to match the Ira Wear brand
 */

/* ══════════════════════════════════════════════════════════
   SHOP PAGE — Full-width header above product loop
   ══════════════════════════════════════════════════════════ */

.ira-shop-header {
  text-align:    center;
  padding:       40px 20px 28px;
  background:    var(--ira-accent);
  border:        1px solid var(--ira-border);
  border-radius: var(--ira-radius-md);
  margin-bottom: 32px;
  width:         100%;
}

.ira-shop-title {
  font-family:    var(--ira-font-heading);
  font-size:      clamp(26px, 3.5vw, 38px);
  font-weight:    600;
  color:          var(--ira-text-dark);
  letter-spacing: -0.02em;
  margin:         0 0 6px;
  line-height:    1.2;
}

.ira-shop-subtitle {
  font-family: var(--ira-font-accent);
  font-style:  italic;
  font-size:   17px;
  color:       var(--ira-secondary);
  margin:      0;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT GRID — gap between cards
   ══════════════════════════════════════════════════════════ */

.woocommerce ul.products,
.woocommerce-page ul.products {
  gap: 24px !important;
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARDS (Loop / Archive)
   ══════════════════════════════════════════════════════════ */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background:     #fff;
  border:         1px solid var(--ira-border);
  border-radius:  var(--ira-radius-md);
  padding:        0 0 16px;
  overflow:       hidden;
  transition:     transform var(--ira-transition), box-shadow var(--ira-transition);
  position:       relative;
  margin:         0 !important;  /* Let gap handle spacing */
}

.woocommerce ul.products li.product:hover {
  transform:   translateY(-5px);
  box-shadow:  var(--ira-shadow-lg);
}

/* ══════════════════════════════════════════════════════════
   HIDE FLOATING CART ICON ON PRODUCT IMAGE HOVER
   Confirmed from live Astra HTML: the icon appears as a
   floating button overlaid on the product image on hover.
   We already have a proper ADD TO CART button below the image.
   ══════════════════════════════════════════════════════════ */

/* Astra's loop quick-action button (cart icon overlay) */
/* Confirmed class from live HTML inspection: ast-on-card-button */
.ast-loop-product-btn,
.ast-loop-product-btn-wrap,
.ast-on-card-button,
.ast-card-action-tooltip,
.woocommerce ul.products li.product .ast-shop-summary-wrap .ast-loop-product-btn,
.woocommerce ul.products li.product .ast-woo-shop-actions,
.woocommerce ul.products li.product .ast-woo-product-actions,
.woocommerce ul.products li.product .button.ast-loop-product-btn,
a.ast-on-card-button {
  display: none !important;
}

/* Also hide WooCommerce's default hover "view cart" link overlay */
.woocommerce ul.products li.product .added_to_cart,
.woocommerce ul.products li.product .wc-forward {
  display: none !important;
}

/* Product image */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
  width:         100%;
  aspect-ratio:  3/4;
  object-fit:    cover;
  display:       block;
  transition:    transform 400ms ease;
}

.woocommerce ul.products li.product:hover img {
  transform: scale(1.04);
}

/* Category label — Astra's native .ast-woo-product-category inside .astra-shop-summary-wrap */
.ast-woo-product-category {
  display:        block;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ira-secondary-dark);
  padding:        10px 16px 2px;
}

.ast-woo-product-category a {
  color:           var(--ira-secondary-dark);
  text-decoration: none;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family:  var(--ira-font-heading);
  font-size:    16px;
  font-weight:  600;
  color:        var(--ira-text-dark);
  padding:      0 16px;
  margin-bottom: 6px;
  line-height:  1.3;
}

/* Price */
.woocommerce ul.products li.product .price {
  font-family:  var(--ira-font-body);
  font-size:    16px;
  color:        var(--ira-primary);
  font-weight:  600;
  padding:      0 16px;
  margin-bottom: 14px;
}

.woocommerce ul.products li.product .price del {
  color:     var(--ira-text-muted);
  font-size: 13px;
  font-weight: 400;
}

.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color:           var(--ira-primary);
}

/* Add to cart button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display:        block !important;
  margin:         0 16px !important;
  text-align:     center !important;
  background:     var(--ira-primary) !important;
  color:          #fff !important;
  padding:        10px 20px !important;
  font-size:      12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius:  var(--ira-radius-sm) !important;
  font-weight:    600 !important;
  transition:     background var(--ira-transition) !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--ira-primary-dark) !important;
}

/* Sale badge */
.woocommerce span.onsale {
  background:    var(--ira-secondary);
  color:         var(--ira-text-dark);
  font-size:     11px;
  font-weight:   700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding:       5px 12px;
  border-radius: var(--ira-radius-sm);
  top:           12px;
  left:          12px;
  right:         auto;
  min-height:    auto;
  min-width:     auto;
  line-height:   1.4;
}

/* ══════════════════════════════════════════════════════════
   SINGLE PRODUCT PAGE
   ══════════════════════════════════════════════════════════ */

.single-product .product_title {
  font-family:  var(--ira-font-heading);
  font-size:    clamp(24px, 3vw, 36px);
  color:        var(--ira-text-dark);
  margin-bottom: 12px;
}

.single-product .price {
  font-size:   24px;
  color:       var(--ira-primary);
  font-weight: 700;
  margin-bottom: 20px;
}

/* SKU & category meta */
.single-product .product_meta {
  font-size:     13px;
  color:         var(--ira-text-light);
  border-top:    1px solid var(--ira-border);
  padding-top:   16px;
  margin-top:    24px;
}

/* Add to cart button — single */
.single-product .single_add_to_cart_button {
  background:     var(--ira-primary) !important;
  padding:        14px 40px !important;
  font-size:      14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.single-product .single_add_to_cart_button:hover {
  background: var(--ira-primary-dark) !important;
}

/* Quantity input */
.woocommerce .quantity input.qty {
  border:         1px solid var(--ira-border) !important;
  border-radius:  var(--ira-radius-sm) !important;
  text-align:     center;
  font-size:      16px;
  font-weight:    600;
  width:          70px;
  height:         48px;
}

/* Product tabs */
.woocommerce-tabs .wc-tab h2 {
  font-family: var(--ira-font-heading);
  font-size:   22px;
  color:       var(--ira-text-dark);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--ira-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background:    #fff;
  border:        none;
  border-bottom: 3px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  border-bottom-color: var(--ira-primary);
  background:          #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family:  var(--ira-font-body);
  font-size:    14px;
  font-weight:  600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:        var(--ira-text-medium);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ira-primary);
}

/* Star ratings */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
  color: var(--ira-secondary);
}

/* ══════════════════════════════════════════════════════════
   CART & CHECKOUT
   ══════════════════════════════════════════════════════════ */

/* Cart table */
.woocommerce table.shop_table {
  border:        1px solid var(--ira-border);
  border-radius: var(--ira-radius-md);
  overflow:      hidden;
}

.woocommerce table.shop_table th {
  background:    var(--ira-accent);
  font-family:   var(--ira-font-body);
  font-size:     13px;
  font-weight:   600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         var(--ira-text-dark);
  padding:       16px;
  border:        1px solid var(--ira-border);
}

.woocommerce table.shop_table td {
  padding:      16px;
  border:       1px solid var(--ira-border);
  color:        var(--ira-text-medium);
  vertical-align: middle;
}

.woocommerce-cart .cart-subtotal,
.woocommerce-cart .order-total {
  font-weight: 600;
  color:       var(--ira-text-dark);
}

.woocommerce-cart .order-total .amount {
  color:       var(--ira-primary);
  font-size:   20px;
}

/* Checkout button */
.woocommerce .checkout-button,
.woocommerce a.checkout-button {
  background:  var(--ira-primary) !important;
  padding:     14px 40px !important;
  font-size:   14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* Coupon field */
.woocommerce .coupon label {
  font-weight: 600;
  color:       var(--ira-text-dark);
}

/* ══════════════════════════════════════════════════════════
   ORDER TRACKING PAGE
   ══════════════════════════════════════════════════════════ */

.woocommerce-order-tracking form.track_order {
  background:    var(--ira-accent);
  padding:       32px;
  border-radius: var(--ira-radius-md);
  border:        1px solid var(--ira-border);
  max-width:     500px;
  margin:        0 auto;
}

/* ══════════════════════════════════════════════════════════
   NOTICES / ALERTS
   ══════════════════════════════════════════════════════════ */

.woocommerce-message {
  border-top-color: var(--ira-success) !important;
  background:       #EBF4EE !important;
}

.woocommerce-error {
  border-top-color: var(--ira-error) !important;
  background:       #FDEDEC !important;
}

.woocommerce-info {
  border-top-color: var(--ira-primary) !important;
  background:       var(--ira-primary-soft) !important;
}

/* ══════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════ */

.woocommerce-breadcrumb {
  font-size:  13px;
  color:      var(--ira-text-light);
  margin-bottom: 20px;
}

.woocommerce-breadcrumb a {
  color: var(--ira-secondary-dark);
}