/* ==========================================================================
   SHOP / PRODUCT GRID
   ========================================================================== */
.pdm-shop-main { padding-block: 1rem 4rem; }

ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.75rem !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* WooCommerce adds an invisible ::before/::after "clearfix" pair to
   ul.products (content:" "; display:table;) to clear floats in its
   old float-based grid. Harmless in normal flow — but once this element
   is display:grid, EVERY generated box (including ::before/::after)
   becomes a real grid cell. That silently eats the first product slot
   (::before) and adds a stray empty one at the end (::after) on every
   product grid across the site. Grid doesn't need float-clearing at
   all, so just switch it off here. */
ul.products::before,
ul.products::after {
  content: none !important;
  display: none !important;
}

/* WooCommerce's own default stylesheet gives li.product a float, a
   percentage width (e.g. 22%), and a right margin for its old-school
   column layout. Those rules load alongside ours and, left in place,
   shrink every card down to a sliver inside its grid cell. Reset them
   explicitly so the grid-template-columns above is what actually
   controls card width. */
ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  background: var(--pdm-card);
  border: 1px solid var(--pdm-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
ul.products li.product:hover {
  box-shadow: 0 16px 32px -18px rgba(18,39,31,0.28);
  transform: translateY(-2px);
  border-color: var(--pdm-teal-light);
}

/* Image block: the <img> itself is forced into a square via aspect-ratio
   below. IMPORTANT: this wrapping <a> also contains the title and price
   (that's WooCommerce's default markup — image, title, and price all sit
   inside the same link; only the button sits outside it). So this <a>
   must stay a normal block, NOT capped to a square with overflow hidden —
   doing that clips the title/price right out of view underneath the image. */
ul.products li.product a.woocommerce-loop-product__link {
  display: block;
  width: 100%;
  background: var(--pdm-paper);
}
ul.products li.product a.woocommerce-loop-product__link img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  transition: transform .3s ease;
}
ul.products li.product:hover a.woocommerce-loop-product__link img { transform: scale(1.04); }

/* Text + CTA area gets its own padding, separate from the image */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .pdm-product-meta,
ul.products li.product .price,
ul.products li.product .button {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}

ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  margin-top: 0.9rem;
  margin-bottom: 0.25rem;
  color: var(--pdm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.pdm-product-meta { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--pdm-ink-soft); margin-bottom: 0.5rem; }
.pdm-generic { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdm-pack { flex-shrink: 0; }

ul.products li.product .price {
  display: block;
  font-family: var(--font-mono);
  color: var(--pdm-green-dark);
  font-weight: 600;
  font-size: 1.05rem;
}
ul.products li.product .price del { color: var(--pdm-ink-soft); opacity: 0.6; font-weight: 400; font-size: 0.85em; }
ul.products li.product .price ins { text-decoration: none; }

.badge.rx { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; }

ul.products li.product .button {
  display: block;
  text-align: center;
  margin-top: 0.85rem;
  margin-bottom: 1.1rem;
  background: var(--pdm-green);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.65em 1em;
  font-weight: 700;
  font-size: 0.85rem;
}
ul.products li.product .button:hover { background: var(--pdm-green-dark); color: #fff; }

/* ==========================================================================
   SINGLE PRODUCT
   ========================================================================== */
.single-product .summary .price { font-family: var(--font-mono); font-size: 1.4rem; color: var(--pdm-green-dark); }
.wholesale-price { color: var(--pdm-teal-dark); }

.single-product .summary .single_add_to_cart_button {
  width: 100%;
  text-align: center;
  padding: 1em 1.5em;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: var(--pdm-green);
  color: #fff;
  margin-top: 1rem;
}
.single-product .summary .single_add_to_cart_button:hover { background: var(--pdm-green-dark); }

/* ==========================================================================
   CART / CHECKOUT
   ========================================================================== */
.woocommerce-cart table.cart, .woocommerce-checkout table.shop_table {
  border: 1px solid var(--pdm-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce #payment #place_order, .woocommerce a.button.checkout {
  background: var(--pdm-green);
  border-radius: 999px;
}
.woocommerce #payment #place_order:hover, .woocommerce a.button.checkout:hover { background: var(--pdm-green-dark); }

/* ==========================================================================
   ACCOUNT / TRADE RIBBON
   ========================================================================== */
body.pdm-wholesale-account .pdm-topbar { background: var(--pdm-teal-dark); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 640px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ==========================================================================
   COMPARE PAGE
   ========================================================================== */
.pdm-compare-head { margin: 1.5rem 0 1.75rem; }
.pdm-compare-head p { color: var(--pdm-ink-soft); margin-top: 0.35rem; }

.pdm-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--pdm-line);
  border-radius: var(--radius-md);
  margin-bottom: 3rem;
}
.pdm-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 560px;
}
.pdm-compare-table thead th {
  text-align: left;
  background: var(--pdm-mint);
  color: var(--pdm-green-dark);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--pdm-line);
}
.pdm-compare-table td {
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--pdm-line);
  vertical-align: middle;
}
.pdm-compare-table tbody tr:last-child td { border-bottom: none; }
.pdm-compare-table tbody tr:hover { background: var(--pdm-paper); }

.pdm-compare-name a { font-weight: 700; color: var(--pdm-ink); }
.pdm-compare-name a:hover { color: var(--pdm-green-dark); }
.pdm-compare-muted { color: var(--pdm-ink-soft); }

.pdm-compare-table tr.is-best-price { background: var(--pdm-mint); }
.pdm-compare-table tr.is-best-price td { border-bottom-color: var(--pdm-teal-light); }
.pdm-compare-best-badge {
  display: inline-block;
  margin-left: 0.6rem;
  background: var(--pdm-green);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  vertical-align: middle;
}