/* =====================================================================
   NITMIBIO store styling for J2Commerce 6 on bella_free / Helix Ultimate
   File:    templates/bella_free/css/custom.css  (Helix loads it automatically)
   Version: 1.2 - 2026-10-06 (category dropdown on list pages)
   Scope:   Every rule starts with body.com-j2commerce, a class Helix adds
            only on J2Commerce pages. No J2Commerce or template files are edited.
   Remove this file to return to the stock J2Commerce look.
   ===================================================================== */

/* ---------- 1. Design tokens (same values as Member Home / Catalog Index) ---------- */
body.com-j2commerce {
  --nm-primary: #1e2409;
  --nm-primary-hover: #3a4514;
  --nm-primary-soft: #f3f4ee;
  --nm-ring: #9aa86a;
  --nm-text: #444;
  --nm-muted: #666;
  --nm-border: #e2e4dc;
  --nm-shadow: 0 2px 10px rgba(30, 36, 9, .06);
  --nm-shadow-hover: 0 12px 28px rgba(30, 36, 9, .12);
}
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) { color: var(--nm-text); }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) a:not(.btn) { color: var(--nm-primary); }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) a:not(.btn):hover { color: var(--nm-primary-hover); }

/* ---------- 2. Shared: headings, buttons, form fields, alerts ---------- */
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) h1,
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .j2commerce-category-title,
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .product-title {
  color: var(--nm-primary); font-weight: 700; line-height: 1.2;
  font-size: clamp(28px, 4vw, 38px);
}
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) h2,
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) h3 { color: var(--nm-primary); }

body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .btn-primary,
body.com-j2commerce .nm-fullcat-bar a {
  --bs-btn-bg: var(--nm-primary); --bs-btn-border-color: var(--nm-primary);
  --bs-btn-hover-bg: var(--nm-primary-hover); --bs-btn-hover-border-color: var(--nm-primary-hover);
  --bs-btn-active-bg: var(--nm-primary-hover); --bs-btn-active-border-color: var(--nm-primary-hover);
  --bs-btn-disabled-bg: var(--nm-primary); --bs-btn-disabled-border-color: var(--nm-primary);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
  border-radius: 4px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  transition: background-color .2s ease, border-color .2s ease;
}
body.com-j2commerce .nm-fullcat-bar a:hover { background: var(--nm-primary-hover) !important; }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .btn-outline-primary {
  --bs-btn-color: var(--nm-primary); --bs-btn-border-color: var(--nm-border);
  --bs-btn-hover-bg: var(--nm-primary-soft); --bs-btn-hover-color: var(--nm-primary); --bs-btn-hover-border-color: var(--nm-primary);
  --bs-btn-active-bg: var(--nm-primary); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--nm-primary);
  background: #fff; border-radius: 4px; font-weight: 600;
}
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .btn:focus-visible,
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) a:focus-visible,
body.com-j2commerce .nm-fullcat-bar a:focus-visible { outline: 3px solid var(--nm-ring); outline-offset: 2px; box-shadow: none; }

body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-control,
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-select {
  border-color: var(--nm-border); border-radius: 4px; color: var(--nm-text);
}
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-control:focus,
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-select:focus {
  border-color: var(--nm-primary); box-shadow: 0 0 0 3px rgba(154, 168, 106, .45);
}
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-check-input:checked { background-color: var(--nm-primary); border-color: var(--nm-primary); }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-check-input:focus { box-shadow: 0 0 0 3px rgba(154, 168, 106, .45); border-color: var(--nm-primary); }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .form-label { color: var(--nm-primary); font-weight: 600; }

body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .alert-info {
  /* !important needed: j2commerce.css sets these with !important */
  background-color: var(--nm-primary-soft) !important; border: 1px solid var(--nm-border);
  border-left: 4px solid var(--nm-primary); color: var(--nm-text) !important; border-radius: 6px;
  --bs-alert-color: var(--nm-text); --bs-alert-bg: var(--nm-primary-soft); --bs-alert-border-color: var(--nm-border);
}

/* Tabs (product page, account page) */
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .nav-tabs { border-bottom: 1px solid var(--nm-border) !important; gap: 4px; }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .nav-tabs .nav-link {
  color: var(--nm-muted); border: 0; border-bottom: 3px solid transparent; background: none;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 12px 18px;
}
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .nav-tabs .nav-link:hover { color: var(--nm-primary); }
body.com-j2commerce :is(.j2commerce, .j2commerce-myprofile) .nav-tabs .nav-link.active { color: var(--nm-primary); border-bottom-color: var(--nm-primary); background: none; }

/* ---------- 3. Product list (Full Catalog, Products, category pages) ---------- */
body.com-j2commerce .j2commerce-sortbar-filter { border-color: var(--nm-border) !important; }
body.com-j2commerce .j2commerce-product-search-input { height: 42px; }
body.com-j2commerce .j2commerce-sortbar-filter .btn { height: 42px; }
body.com-j2commerce .j2commerce-sortbar-filter .form-select { height: 42px; }

body.com-j2commerce .j2commerce-product-item {
  background: #fff; border: 1px solid var(--nm-border); border-top: 4px solid var(--nm-primary);
  border-radius: 6px; padding: 16px; box-shadow: var(--nm-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
body.com-j2commerce .j2commerce-product-item:hover { transform: translateY(-4px); box-shadow: var(--nm-shadow-hover); }
body.com-j2commerce .j2commerce-product-item .j2commerce-product-image img { border: 0 !important; border-radius: 4px; }
body.com-j2commerce .j2commerce-product-item .j2commerce-price-sku-container { margin-bottom: 14px !important; }
body.com-j2commerce .j2commerce-product-item .sku-label,
body.com-j2commerce .product-sku .sku-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nm-muted);
}
body.com-j2commerce .j2commerce-product-item .sku-value { color: var(--nm-primary); }
body.com-j2commerce .j2commerce-product-item .j2commerce-cart-button { padding: 10px 16px; }
body.com-j2commerce .j2commerce-product-item .j2commerce-product-title { margin: 0 0 8px; font-size: 17px !important; font-weight: 700; line-height: 1.3; }
body.com-j2commerce .j2commerce-product-item .j2commerce-product-title a { color: var(--nm-primary) !important; }
body.com-j2commerce .j2commerce-product-item .j2commerce-product-title a:hover { text-decoration: underline !important; }
body.com-j2commerce .j2commerce-product-item .j2commerce-product-price { color: var(--nm-primary); font-weight: 700; }

/* Category dropdown (built by js/custom.js). Buttons are hidden only once the dropdown exists. */
body.com-j2commerce.nm-catselect-ready .j2commerce-subcategory-nav { display: none; }
body.com-j2commerce .nm-cat-select { width: auto; min-width: 180px; height: 42px; }

/* ---------- 4. Single product page ---------- */
body.com-j2commerce .j2commerce-single-product .product-gallery-main {
  border: 1px solid var(--nm-border); border-radius: 6px; overflow: hidden; background: #fff;
}
body.com-j2commerce .j2commerce-single-product .product-thumb { border-radius: 4px; }
body.com-j2commerce .j2commerce-single-product .j2commerce-product-price { color: var(--nm-primary); font-weight: 700 !important; }
body.com-j2commerce .j2commerce-single-product .product-sdesc { line-height: 1.6; }
body.com-j2commerce .j2commerce-single-product .count-input {
  border: 1px solid var(--nm-border) !important; border-radius: 4px;
}
body.com-j2commerce .j2commerce-single-product .count-input .btn { color: var(--nm-primary); }
body.com-j2commerce .j2commerce-single-product .product-add-to-cart-group .j2commerce-cart-button { padding: 12px 20px; }
body.com-j2commerce .j2commerce-single-product .product-ldesc { line-height: 1.6; }
body.com-j2commerce .j2commerce-single-product .product-ldesc h2,
body.com-j2commerce .j2commerce-single-product .product-ldesc h3,
body.com-j2commerce .j2commerce-single-product .product-ldesc h4 { font-size: 20px; font-weight: 700; margin-top: 28px; }
body.com-j2commerce .j2commerce-single-product .product-ldesc > p:first-child {
  background: var(--nm-primary-soft); border-left: 4px solid var(--nm-primary);
  border-radius: 6px; padding: 14px 18px; font-size: 14px;
}

/* ---------- 5. Cart ---------- */
body.com-j2commerce .j2commerce-cart .table-responsive {
  background: #fff; border: 1px solid var(--nm-border); border-top: 4px solid var(--nm-primary);
  border-radius: 6px; box-shadow: var(--nm-shadow);
}
body.com-j2commerce .j2commerce-cart-table { margin: 0; }
body.com-j2commerce .j2commerce-cart-table thead th {
  background: var(--nm-primary-soft); color: var(--nm-primary); padding: 14px 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--nm-border);
}
body.com-j2commerce .j2commerce-cart-table tbody td { padding-left: 18px; padding-right: 18px; border-bottom: 1px solid var(--nm-border); }
body.com-j2commerce .j2commerce-cart-table tbody tr:last-child td { border-bottom: 0; }
body.com-j2commerce .j2commerce-cart-table .cart-product-name { color: var(--nm-primary); font-weight: 700; }
body.com-j2commerce .j2commerce-cart-table .line-total-value { color: var(--nm-primary); }
body.com-j2commerce .j2commerce-qty-controls .input-group { border-color: var(--nm-border) !important; border-radius: 4px; overflow: hidden; }
body.com-j2commerce .j2commerce-qty-controls .btn { color: var(--nm-primary); }

/* Coupon box */
body.com-j2commerce .cart-estimator-discount-block .accordion-item {
  border: 1px solid var(--nm-border); border-radius: 6px; overflow: hidden; box-shadow: var(--nm-shadow);
}
body.com-j2commerce .cart-estimator-discount-block .accordion-button {
  background: var(--nm-primary-soft); color: var(--nm-primary); font-weight: 600; box-shadow: none;
}
body.com-j2commerce .cart-estimator-discount-block .accordion-button:focus-visible { outline: 3px solid var(--nm-ring); outline-offset: -3px; }

/* Totals */
body.com-j2commerce .cart-totals-block h2,
body.com-j2commerce .cart-totals-block h3 { font-size: 24px; font-weight: 700; }
body.com-j2commerce .cart-totals-block .table-bordered { border-color: var(--nm-border); }
body.com-j2commerce .cart-totals-block .table-bordered > :not(caption) > * > * { border-color: var(--nm-border); padding: 12px 16px; }
body.com-j2commerce .cart-totals-block tr:last-child > * { background: var(--nm-primary-soft); color: var(--nm-primary); font-weight: 700; }
body.com-j2commerce .cart-checkout-button .btn { padding: 14px 20px; }

/* ---------- 6. Checkout ---------- */
body.com-j2commerce.view-checkout .j2commerce .checkout-heading {
  background: var(--nm-primary-soft) !important; border: 1px solid var(--nm-border) !important;
  border-left: 4px solid var(--nm-primary) !important; border-radius: 6px;
}
body.com-j2commerce.view-checkout .j2commerce .checkout-heading__title,
body.com-j2commerce.view-checkout .j2commerce .checkout-heading h2 { color: var(--nm-primary); font-size: 18px; font-weight: 700; }
body.com-j2commerce.view-checkout .j2commerce .checkout-content { padding-left: 4px; padding-right: 4px; }
body.com-j2commerce .j2commerce-checkout-sidecart .bg-light {
  background-color: #fff !important; border: 1px solid var(--nm-border) !important; border-top: 4px solid var(--nm-primary) !important;
  border-radius: 6px !important; box-shadow: var(--nm-shadow);
}
body.com-j2commerce .j2commerce-checkout-sidecart .list-group-item { background: transparent; border-color: var(--nm-border); }
body.com-j2commerce .j2commerce-checkout-sidecart .border-top { border-color: var(--nm-border) !important; }
body.com-j2commerce .j2commerce-checkout-sidecart .badge.bg-secondary { background: var(--nm-primary) !important; }
body.com-j2commerce .j2commerce-sidecart-grandtotal { color: var(--nm-primary); }
body.com-j2commerce.view-checkout .j2commerce .btn-light { background: var(--nm-primary-soft); border: 1px solid var(--nm-border); color: var(--nm-primary); }

/* ---------- 7. Account: orders and address book ---------- */
body.com-j2commerce .j2commerce-myprofile .card {
  border: 1px solid var(--nm-border); border-top: 4px solid var(--nm-primary); border-radius: 6px; box-shadow: var(--nm-shadow);
}
body.com-j2commerce .j2commerce-myprofile .card-header { background: var(--nm-primary-soft); color: var(--nm-primary); font-weight: 600; }
body.com-j2commerce .j2commerce-myprofile .nav-tabs .nav-link .fa-solid { color: inherit; }
body.com-j2commerce .j2commerce-myprofile table thead th {
  background: var(--nm-primary-soft); color: var(--nm-primary);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- 8. Phones ---------- */
@media (max-width: 767px) {
  body.com-j2commerce .j2commerce-product-item { padding: 14px; }
  body.com-j2commerce .j2commerce-cart-table thead th,
  body.com-j2commerce .j2commerce-cart-table tbody td { padding-left: 8px; padding-right: 8px; }
  body.com-j2commerce .j2commerce-cart-table thead th { font-size: 11px; letter-spacing: .06em; }
  body.com-j2commerce .j2commerce-cart-table .cart-thumb-image { display: none; }
  body.com-j2commerce .j2commerce-cart-table .j2commerce-cart-item-details .me-3 { margin-right: 0 !important; }
  body.com-j2commerce .j2commerce-qty-controls .input-group { flex-wrap: nowrap; }
  body.com-j2commerce .j2commerce-qty-controls .j2commerce-qty-input { width: 36px; min-width: 36px; padding: 0; text-align: center; }
  body.com-j2commerce .j2commerce-cart-table .cart-product-name { font-size: 15px; }
  body.com-j2commerce .j2commerce-cart-table thead th[style] { width: auto !important; }
  body.com-j2commerce .j2commerce-sortbar-filter { flex-direction: column; align-items: stretch !important; gap: 12px; }
  body.com-j2commerce .j2commerce-sortbar-filter-right { flex-wrap: wrap; }
  body.com-j2commerce .nm-cat-select, body.com-j2commerce #j2commerce-sortby { flex: 1 1 140px; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.com-j2commerce .j2commerce-product-item,
  body.com-j2commerce .j2commerce-product-item:hover { transition: none; transform: none; }
}