/* ── WooCommerce overrides — Just Peptides theme ───────────────────────── */

/* Reset WC default wrappers */
.woocommerce-page .jp-woo-wrap,
.woocommerce .jp-woo-wrap { width: 100%; }

/* ── Notices ────────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-radius: var(--radius-sm);
  padding: 16px 20px 16px 52px;
  margin-bottom: 24px;
  font-size: .9375rem;
  list-style: none;
}
.woocommerce-message { background: #dcfce7; color: #166534; border-left: 4px solid var(--clr-success); }
.woocommerce-info    { background: var(--clr-primary-light); color: var(--clr-primary-dark); border-left: 4px solid var(--clr-primary); }
.woocommerce-error   { background: #fee2e2; color: #991b1b; border-left: 4px solid var(--clr-danger); }

/* ── Shop grid ──────────────────────────────────────────────────────────── */
.woocommerce ul.products,
.woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  float: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  background: var(--clr-bg) !important;
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  transition: box-shadow var(--transition), transform var(--transition) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
  box-shadow: var(--shadow-lg) !important;
  transform: translateY(-4px) !important;
}

/* Product image */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
.woocommerce ul.products li.product a img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 16px !important;
  background: var(--clr-bg-soft) !important;
  transition: transform .4s ease !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.05) !important; }

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--clr-navy) !important;
  padding: 14px 18px 6px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Price */
.woocommerce ul.products li.product .price {
  padding: 0 18px 14px !important;
  font-weight: 700 !important;
  color: var(--clr-primary) !important;
  font-size: .9375rem !important;
  margin: 0 !important;
  display: block !important;
}
.woocommerce ul.products li.product .price del { color: var(--clr-muted) !important; font-weight: 400 !important; }

/* Button */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  display: block !important;
  margin: auto 18px 18px !important;
  padding: 10px 18px !important;
  background: var(--clr-primary) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
  font-size: .875rem !important;
  text-align: center !important;
  border: none !important;
  transition: background var(--transition) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;
  float: none !important;
  line-height: 1.4 !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--clr-primary-dark) !important; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 48px 0 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--clr-border);
  font-size: .9375rem;
  color: var(--clr-navy);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--clr-primary-light); border-color: var(--clr-primary); color: var(--clr-primary); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.woocommerce .woocommerce-breadcrumb {
  display: none; /* we use our own jp-breadcrumbs() output */
}

/* ── Single product ─────────────────────────────────────────────────────── */
.woocommerce div.product div.images { margin-bottom: 0; }
.woocommerce div.product div.images img { border-radius: var(--radius-md); border: 1px solid var(--clr-border); }

.woocommerce div.product .price {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--clr-navy) !important;
}
.woocommerce div.product .price del { font-size: 1.25rem !important; color: var(--clr-muted) !important; }

.woocommerce div.product form.cart .quantity input {
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 1rem;
  width: 80px;
  text-align: center;
}

.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background: var(--clr-primary) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 36px !important;
  border: none !important;
  transition: background var(--transition) !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background: var(--clr-primary-dark) !important;
}

/* Sold-out single button */
.woocommerce div.product form.cart .single_add_to_cart_button.disabled,
.woocommerce div.product form.cart .single_add_to_cart_button[disabled] {
  background: var(--clr-border) !important;
  color: var(--clr-sold-out) !important;
  cursor: not-allowed !important;
}

/* ── Stock status ────────────────────────────────────────────────────────── */
.woocommerce div.product p.stock {
  font-size: .875rem !important;
  font-weight: 700 !important;
  padding: 6px 14px !important;
  border-radius: 10px !important;
  display: inline-block !important;
}
.woocommerce div.product p.in-stock  { background: #dcfce7 !important; color: var(--clr-success) !important; }
.woocommerce div.product p.out-of-stock { background: #f1f5f9 !important; color: var(--clr-sold-out) !important; }

/* ── Product tabs ────────────────────────────────────────────────────────── */
.woocommerce div.product .woocommerce-tabs { display: none; } /* replaced by custom accordions */

/* ── Cart page ───────────────────────────────────────────────────────────── */
/* === CART STYLING DISABLED 2026-06-11 — rebuilding incrementally, see notes ===
.woocommerce-cart table.cart {
  width: 100%;
  border-collapse: collapse;
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
  padding: 16px;
  border-bottom: 1px solid var(--clr-border);
  font-size: .9375rem;
}
.woocommerce-cart table.cart th { font-weight: 700; color: var(--clr-navy); }
.woocommerce-cart .cart_totals {
  background: var(--clr-bg-soft);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  padding: 28px;
}
=== END CART STYLING DISABLED === */

/* ── Checkout — single column layout ─────────────────────────────────────── */
.woocommerce-checkout .woocommerce {
  max-width: 1000px;
  margin: 0 auto;
}
.woocommerce-checkout #customer_details,
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}
.woocommerce form .form-row label { font-weight: 600; color: var(--clr-navy-mid); font-size: .875rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  border: 1px solid var(--clr-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 16px !important;
  font-size: .9375rem !important;
  transition: border-color var(--transition) !important;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus { border-color: var(--clr-primary) !important; }

/* ── Account ─────────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  color: var(--clr-navy-mid);
  transition: background var(--transition), color var(--transition);
}
.woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-MyAccount-navigation ul li.is-active a {
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
}

/* ── Sale badge ──────────────────────────────────────────────────────────── */
.woocommerce span.onsale {
  background: var(--clr-danger) !important;
  border-radius: 10px !important;
  font-size: .6875rem !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  min-width: unset !important;
  min-height: unset !important;
  line-height: 1 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .woocommerce ul.products { grid-template-columns: 1fr; } }
.woocommerce ul.products li.product .star-rating { display: none !important; }
.woocommerce ul.products::before,
.woocommerce-page ul.products::before { display: none !important; }