/* ============================================================
   CONEX BOX USA — WooCommerce Styles (v3 Fixed)
   ============================================================ */

/* Notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error { padding: var(--space-md) var(--space-lg) !important; border-radius: var(--radius-md) !important; font-size: var(--fs-sm) !important; border-top: none !important; margin-bottom: var(--space-xl) !important; }
.woocommerce-message { background-color: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; color: #166534 !important; }
.woocommerce-message::before { color: #16a34a !important; }
.woocommerce-info { background-color: #eff6ff !important; border: 1px solid #bfdbfe !important; color: #1e40af !important; }
.woocommerce-error { background-color: #fef2f2 !important; border: 1px solid #fecaca !important; color: #991b1b !important; }
.woocommerce-message a.button,.woocommerce-info a.button { background-color: var(--cbx-orange) !important; color: var(--cbx-white) !important; border: none !important; border-radius: var(--radius-md) !important; font-size: var(--fs-xs) !important; font-weight: var(--fw-semibold) !important; padding: 6px 16px !important; }

/* Result count & ordering */
.woocommerce-result-count { font-size: var(--fs-sm); color: var(--cbx-gray-500); }
.woocommerce-ordering select { padding: 0.5rem 2rem 0.5rem 0.75rem; font-size: var(--fs-sm); border: 1px solid var(--cbx-gray-200); border-radius: var(--radius-md); background-color: var(--cbx-white); cursor: pointer; }
.woocommerce .woocommerce-ordering,.woocommerce .woocommerce-result-count { margin-bottom: var(--space-lg); }

/* Product Grid */
.woocommerce ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-xl); }
.woocommerce ul.products::before,.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: var(--cbx-white); border: 1px solid var(--cbx-gray-100); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--transition-base), box-shadow var(--transition-base); display: flex; flex-direction: column; }
.woocommerce ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.woocommerce ul.products li.product a img { margin: 0 !important; border-radius: 0; aspect-ratio: 1/1; object-fit: cover; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-sm) !important; font-weight: var(--fw-medium); color: var(--cbx-blue-dark); padding: var(--space-md) var(--space-md) var(--space-xs) !important; margin: 0; line-height: 1.4; }
.woocommerce ul.products li.product .woocommerce-product-details__short-description { padding: 0 var(--space-md); font-size: var(--fs-xs); color: var(--cbx-gray-500); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-xs); }
.woocommerce ul.products li.product .star-rating { margin: 0 var(--space-md) var(--space-xs); font-size: var(--fs-xs); }
.woocommerce ul.products li.product .price { padding: 0 var(--space-md) var(--space-sm); font-size: var(--fs-base) !important; color: var(--cbx-orange) !important; font-weight: var(--fw-semibold); }
.woocommerce ul.products li.product .price del { font-size: var(--fs-sm); color: var(--cbx-gray-400); font-weight: var(--fw-regular); }
.woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: var(--fw-semibold); }

/* Add to Cart button in loop — with inline SVG icon */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.added_to_cart {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  margin: auto var(--space-md) var(--space-md) var(--space-md) !important;
  padding: 0.5625rem 1rem !important;
  background-color: var(--cbx-blue) !important;
  color: var(--cbx-white) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background-color var(--transition-fast) !important;
  cursor: pointer;
  width: calc(100% - 2 * var(--space-md));
}
.woocommerce ul.products li.product .button:hover { background-color: var(--cbx-orange) !important; }
.woocommerce ul.products li.product a.added_to_cart { background-color: transparent !important; color: var(--cbx-orange) !important; border: 1px solid var(--cbx-orange) !important; margin-top: var(--space-xs) !important; }

/* Cart icon inside button */
.woocommerce ul.products li.product .button .cbx-cart-icon,
.woocommerce ul.products li.product .button svg.cbx-cart-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}

/* Sale badge */
.woocommerce span.onsale { background-color: var(--cbx-red) !important; color: var(--cbx-white); font-size: var(--fs-xs); font-weight: var(--fw-semibold); min-width: auto; min-height: auto; padding: 4px 12px; line-height: 1.4; border-radius: var(--radius-sm); top: var(--space-sm); left: var(--space-sm); right: auto; margin: 0; }

/* ============================================================
   SINGLE PRODUCT
   ============================================================ */
.woocommerce div.product { margin-bottom: var(--space-3xl); }
.woocommerce div.product div.images { border: 1px solid var(--cbx-gray-100); border-radius: var(--radius-lg); overflow: hidden; background: var(--cbx-gray-50); }
.woocommerce div.product div.images .flex-control-thumbs { padding: var(--space-sm); display: flex; gap: var(--space-sm); }
.woocommerce div.product div.summary { padding-left: var(--space-xl); }
.woocommerce div.product .product_title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); color: var(--cbx-blue-dark); margin-bottom: var(--space-md); }
.woocommerce div.product p.price,.woocommerce div.product span.price { font-size: var(--fs-2xl) !important; color: var(--cbx-orange) !important; font-weight: var(--fw-semibold); margin-bottom: var(--space-lg); }
.woocommerce div.product p.price del,.woocommerce div.product span.price del { font-size: var(--fs-lg); color: var(--cbx-gray-400); }
.woocommerce div.product .woocommerce-product-details__short-description { margin-bottom: var(--space-lg); font-size: var(--fs-md); line-height: 1.7; color: var(--cbx-gray-600); }
.woocommerce div.product .woocommerce-product-details__short-description p { margin-bottom: var(--space-sm); }
.woocommerce .star-rating { color: var(--cbx-orange) !important; }
.woocommerce div.product .woocommerce-product-rating { margin-bottom: var(--space-lg); display: flex; align-items: center; gap: var(--space-sm); }

/* Quantity & Add to Cart */
.woocommerce div.product form.cart { margin-bottom: var(--space-xl); display: flex; align-items: stretch; gap: var(--space-md); flex-wrap: wrap; }
.woocommerce .quantity { display: inline-flex; align-items: center; border: 1px solid var(--cbx-gray-200); border-radius: var(--radius-md); overflow: hidden; }
.woocommerce .quantity .qty { width: 60px; text-align: center; border: none; padding: 0.625rem; font-size: var(--fs-base); font-weight: var(--fw-medium); -moz-appearance: textfield; background: var(--cbx-white); }
.woocommerce .quantity .qty::-webkit-inner-spin-button,.woocommerce .quantity .qty::-webkit-outer-spin-button { -webkit-appearance: none; }
.woocommerce div.product form.cart .button,.woocommerce div.product .single_add_to_cart_button { flex: 1; min-width: 200px; background-color: var(--cbx-orange) !important; color: var(--cbx-white) !important; border: none !important; border-radius: var(--radius-md) !important; padding: 0.75rem 2rem !important; font-size: var(--fs-sm) !important; font-weight: var(--fw-semibold) !important; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; transition: all var(--transition-base) !important; }
.woocommerce div.product form.cart .button:hover { background-color: var(--cbx-orange-dark) !important; transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* Product Meta & Tabs */
.woocommerce div.product .product_meta { padding-top: var(--space-lg); border-top: 1px solid var(--cbx-gray-100); font-size: var(--fs-sm); color: var(--cbx-gray-500); }
.woocommerce div.product .product_meta > span { display: block; margin-bottom: var(--space-xs); }
.woocommerce div.product .product_meta a { color: var(--cbx-blue); }
.woocommerce div.product .product_meta a:hover { color: var(--cbx-orange); }
.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-3xl); }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0 !important; margin: 0 0 var(--space-xl) !important; border-bottom: 2px solid var(--cbx-gray-100); display: flex; gap: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before,.woocommerce div.product .woocommerce-tabs ul.tabs::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: var(--space-md) var(--space-lg); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--cbx-gray-500); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--cbx-blue-dark); border-bottom-color: var(--cbx-orange); }
.woocommerce div.product .woocommerce-tabs .panel { margin: 0; font-size: var(--fs-md); line-height: 1.7; color: var(--cbx-gray-600); }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: var(--fs-xl); margin-bottom: var(--space-lg); }
.woocommerce div.product .related.products { margin-top: var(--space-3xl); padding-top: var(--space-2xl); border-top: 1px solid var(--cbx-gray-100); }
.woocommerce div.product .related.products > h2 { font-size: var(--fs-xl); margin-bottom: var(--space-xl); }

/* ============================================================
   CART PAGE
   ============================================================ */
.woocommerce-cart .woocommerce { padding: var(--space-2xl) 0; }
.woocommerce table.shop_table { border: 1px solid var(--cbx-gray-100) !important; border-radius: var(--radius-lg) !important; overflow: hidden; border-collapse: separate !important; }
.woocommerce table.shop_table th { background-color: var(--cbx-gray-50); font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cbx-gray-600); padding: var(--space-md) var(--space-lg) !important; border: none !important; }
.woocommerce table.shop_table td { padding: var(--space-md) var(--space-lg) !important; border-top: 1px solid var(--cbx-gray-50) !important; font-size: var(--fs-sm); vertical-align: middle; }
.woocommerce table.shop_table td.product-thumbnail img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.woocommerce table.shop_table td.product-name a { font-weight: var(--fw-medium); color: var(--cbx-blue-dark); }
.woocommerce a.remove { color: var(--cbx-red) !important; }
.woocommerce a.remove:hover { background: var(--cbx-red) !important; color: var(--cbx-white) !important; }
.woocommerce .cart_totals { border: 1px solid var(--cbx-gray-100); border-radius: var(--radius-lg); padding: var(--space-xl); background: var(--cbx-gray-50); }

/* WooCommerce Buttons */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,.woocommerce a.button { background-color: var(--cbx-blue) !important; color: var(--cbx-white) !important; border: none !important; border-radius: var(--radius-md) !important; padding: 0.625rem 1.5rem !important; font-size: var(--fs-sm) !important; font-weight: var(--fw-semibold) !important; text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer; }
.woocommerce .button:hover,.woocommerce button.button:hover { background-color: var(--cbx-blue-dark) !important; }
.woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce a.button.alt,.woocommerce #respond input#submit { background-color: var(--cbx-orange) !important; color: var(--cbx-white) !important; }
.woocommerce .button.alt:hover,.woocommerce button.button.alt:hover { background-color: var(--cbx-orange-dark) !important; }

/* ============================================================
   CHECKOUT
   ============================================================ */
.woocommerce-checkout .woocommerce { padding: var(--space-2xl) 0; }
.woocommerce form .form-row label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--cbx-gray-700); }
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce form .form-row select { width: 100%; padding: 0.625rem 1rem; font-size: var(--fs-sm); border: 1px solid var(--cbx-gray-200); border-radius: var(--radius-md); }
.woocommerce form .form-row input.input-text:focus { border-color: var(--cbx-orange); box-shadow: 0 0 0 3px rgba(232,123,53,0.1); outline: none; }
.woocommerce-checkout #payment { background: var(--cbx-gray-50) !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--cbx-gray-100); padding: var(--space-lg) !important; }
.woocommerce #payment #place_order { width: 100%; padding: 0.875rem !important; font-size: var(--fs-base) !important; }

/* ============================================================
   MY ACCOUNT
   ============================================================ */
.woocommerce-account .woocommerce { padding: var(--space-2xl) 0; }
.woocommerce-account .woocommerce-MyAccount-navigation { width: 220px; float: left; margin-right: var(--space-2xl); }
.woocommerce-account .woocommerce-MyAccount-navigation ul { background: var(--cbx-white); border: 1px solid var(--cbx-gray-100); border-radius: var(--radius-lg); overflow: hidden; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li { border-bottom: 1px solid var(--cbx-gray-50); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation ul li a { display: block; padding: 0.75rem var(--space-lg); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--cbx-gray-600); }
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a { color: var(--cbx-orange); background-color: var(--cbx-gray-50); border-left: 3px solid var(--cbx-orange); }
.woocommerce form.login,.woocommerce form.register { border: 1px solid var(--cbx-gray-100) !important; border-radius: var(--radius-lg) !important; padding: var(--space-xl) !important; }

/* ============================================================
   SHOP WITH SIDEBAR
   ============================================================ */
.cbx-shop-layout { display: grid; grid-template-columns: var(--sidebar-width) 1fr; gap: var(--space-2xl); align-items: start; }
.cbx-shop-layout .cbx-sidebar { order: -1; }

/* ============================================================
   MINI CART SIDEBAR — Proper styling
   ============================================================ */
.cbx-mini-cart__body .woocommerce-mini-cart { list-style: none !important; padding: 0 !important; margin: 0 !important; }

.cbx-mini-cart__body .woocommerce-mini-cart-item {
  display: grid !important;
  grid-template-columns: 60px 1fr 24px;
  gap: 10px;
  align-items: start;
  padding: var(--space-md) 0 !important;
  border-bottom: 1px solid var(--cbx-gray-100) !important;
  list-style: none !important;
}

/* Product image in mini cart */
.cbx-mini-cart__body .woocommerce-mini-cart-item img,
.cbx-mini-cart__body .woocommerce-mini-cart-item a > img,
.cbx-mini-cart__body .woocommerce-mini-cart-item > a img {
  width: 60px !important;
  height: 60px !important;
  max-width: 60px !important;
  object-fit: cover !important;
  border-radius: var(--radius-sm) !important;
  grid-row: 1 / 3;
  grid-column: 1;
}

/* Product name link */
.cbx-mini-cart__body .woocommerce-mini-cart-item > a:not(.remove) {
  grid-column: 2;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--cbx-blue-dark) !important;
  line-height: 1.35 !important;
  display: block !important;
  text-decoration: none !important;
}

/* Quantity x price */
.cbx-mini-cart__body .woocommerce-mini-cart-item .quantity {
  grid-column: 2;
  font-size: var(--fs-xs) !important;
  color: var(--cbx-gray-500) !important;
  margin-top: 2px;
}

.cbx-mini-cart__body .woocommerce-mini-cart-item .quantity .amount {
  color: var(--cbx-orange) !important;
  font-weight: var(--fw-semibold) !important;
}

/* Remove button */
.cbx-mini-cart__body .woocommerce-mini-cart-item a.remove {
  grid-column: 3;
  grid-row: 1;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--cbx-gray-400) !important;
  background: var(--cbx-gray-50) !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cbx-mini-cart__body .woocommerce-mini-cart-item a.remove:hover {
  background: var(--cbx-red) !important;
  color: var(--cbx-white) !important;
}

/* Total row */
.cbx-mini-cart__body .woocommerce-mini-cart__total {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: var(--space-md) 0 !important;
  margin-top: var(--space-sm) !important;
  border-top: 2px solid var(--cbx-gray-100) !important;
  font-size: var(--fs-base) !important;
  font-weight: var(--fw-semibold) !important;
  color: var(--cbx-blue-dark) !important;
}

.cbx-mini-cart__body .woocommerce-mini-cart__total .amount {
  color: var(--cbx-orange) !important;
  font-size: var(--fs-lg) !important;
}

/* Hide the default WooCommerce buttons inside mini cart (we have our own in footer) */
.cbx-mini-cart__body .woocommerce-mini-cart__buttons,
.cbx-mini-cart__body p.woocommerce-mini-cart__buttons {
  display: none !important;
}

/* Empty cart message */
.cbx-mini-cart__body .woocommerce-mini-cart__empty-message {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--cbx-gray-400);
  font-size: var(--fs-sm);
}

/* Widget sidebar styling */
.widget_product_categories ul li { padding: var(--space-xs) 0; }
.widget_product_categories ul.children { margin-left: var(--space-md); margin-top: var(--space-xs); }
.widget_product_categories ul li a { font-size: var(--fs-sm); color: var(--cbx-gray-600); }
.widget_product_categories ul li a:hover { color: var(--cbx-orange); }
