/* ============================================================================
   Peptide Portal — WooCommerce commerce screens (shop, PDP, cart, account).
   Checkout has its own file (checkout.css).

   Scope note: cart / checkout / account are PAGES, so the
   `woocommerce_before_main_content` wrapper never fires on them. Do not hang
   styles off a wrapper class that only exists on product archives.
   ============================================================================ */

.woocommerce-page .dp-main,
.woocommerce .dp-main { display: block; }

.dp-shop {
  width: 100%;
  max-width: var(--dp-maxw);
  margin-inline: auto;
  padding: var(--dp-s-12) var(--dp-gutter) 64px;
}

/* --- Notices -------------------------------------------------------------- */
.woocommerce-notices-wrapper { max-width: 720px; margin: var(--dp-s-9) auto 0; padding-inline: var(--dp-s-9); }
.woocommerce-error, .woocommerce-message, .woocommerce-info {
  list-style: none;
  margin: 0 0 var(--dp-s-7);
  padding: var(--dp-s-6) var(--dp-s-7);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface-alt);
  font-size: var(--dp-fs-base);
}
.woocommerce-error   { border-left: 3px solid var(--dp-alert); }
.woocommerce-message,
.woocommerce-info    { border-left: 3px solid var(--dpx-fg-blue, var(--dp-blue)); }
.woocommerce-error a, .woocommerce-message a, .woocommerce-info a { color: var(--dpx-fg-blue, var(--dp-blue)); font-weight: var(--dp-fw-medium); }

/* --- Buttons -------------------------------------------------------------- */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dp-s-3);
  padding: var(--dp-s-6) var(--dp-s-10);
  border: 0;
  border-radius: var(--dp-r-pill);
  background: var(--dp-blue);
  color: var(--dp-on-dark);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-semi);
  cursor: pointer;
  transition: filter .16s ease;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover { filter: brightness(1.06); color: var(--dp-on-dark); }
/* Never a blanket button:hover — that repaints custom controls black-on-black. */
.woocommerce .button:focus-visible { outline: 2px solid var(--dp-ink); outline-offset: 2px; }

.woocommerce .button--ghost,
.woocommerce a.button.wc-backward {
  background: var(--dp-surface-alt);
  color: var(--dp-ink);
}

/* --- Product archive ------------------------------------------------------ */
.woocommerce ul.products {
  list-style: none; margin: var(--dp-s-10) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dp-s-9);
}
.woocommerce ul.products li.product { margin: 0; }
.woocommerce ul.products li.product a img {
  width: 100%; height: 238px; object-fit: contain;
  border-radius: var(--dp-r-sm);
  background: var(--dp-surface-alt);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  margin-top: var(--dp-s-5);
  font-size: var(--dp-fs-h3); font-weight: var(--dp-fw-semi); color: var(--dp-ink);
}
.woocommerce ul.products li.product .price { display: block; margin-top: var(--dp-s-1); color: var(--dp-muted); font-size: var(--dp-fs-base); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* --- Single product (baseline until the DP PDP template lands) ------------ */
.woocommerce div.product { max-width: var(--dp-maxw); margin-inline: auto; padding: var(--dp-s-12) var(--dp-gutter) 64px; }
.woocommerce div.product .product_title { font-size: var(--dp-fs-display); font-weight: var(--dp-fw-semi); letter-spacing: -.02em; }
.woocommerce div.product .price { font-size: var(--dp-fs-h2); font-weight: var(--dp-fw-semi); color: var(--dp-ink); }
.woocommerce div.product .woocommerce-product-details__short-description { color: var(--dp-muted); }
.woocommerce div.product form.cart { margin-top: var(--dp-s-10); }
.woocommerce div.product form.cart .variations { width: 100%; border-collapse: collapse; }
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td { padding: var(--dp-s-3) 0; text-align: left; }
.woocommerce div.product form.cart .variations label { font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-medium); }
.woocommerce div.product form.cart select,
.woocommerce .quantity input[type="number"] {
  padding: var(--dp-s-5) var(--dp-s-7);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface);
  font: inherit; color: var(--dp-ink);
}

/* --- Cart ----------------------------------------------------------------- */
.woocommerce-cart .dp-main > .woocommerce,
.woocommerce-account .dp-main > .woocommerce {
  max-width: 980px; margin-inline: auto; padding: var(--dp-s-12) var(--dp-s-9) 64px;
}
.woocommerce table.shop_table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--dp-r-xs); overflow: hidden;
  background: var(--dp-surface-alt);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { padding: var(--dp-s-7); text-align: left; font-size: var(--dp-fs-base); }
.woocommerce table.shop_table thead th { font-weight: var(--dp-fw-semi); color: var(--dp-muted); font-size: var(--dp-fs-sm); }
.woocommerce table.shop_table tbody tr + tr { border-top: 1px solid var(--dp-hairline); }
.woocommerce table.shop_table img { width: 64px; height: auto; border-radius: var(--dp-r-3xs); }
.woocommerce .cart_totals { margin-top: var(--dp-s-10); }
.woocommerce .cart_totals h2 { font-size: var(--dp-fs-h2); font-weight: var(--dp-fw-semi); margin-bottom: var(--dp-s-5); }
.woocommerce .coupon { display: flex; gap: var(--dp-s-3); margin-bottom: var(--dp-s-7); }
.woocommerce .coupon input[type="text"] {
  flex: 1 1 auto;
  padding: var(--dp-s-6) var(--dp-s-7);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface); font: inherit;
}

/* --- Account -------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 var(--dp-s-10); padding: 0; display: flex; flex-wrap: wrap; gap: var(--dp-s-3); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-block; padding: var(--dp-s-4) var(--dp-s-7);
  border-radius: var(--dp-r-pill); background: var(--dp-surface-alt);
  font-size: var(--dp-fs-base); font-weight: var(--dp-fw-medium);
}
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--dp-blue); color: var(--dp-on-dark); }
.woocommerce form.login, .woocommerce form.register {
  padding: var(--dp-s-9); border-radius: var(--dp-r-xs); background: var(--dp-surface-alt);
}
.woocommerce form .form-row label { display: block; margin-bottom: var(--dp-s-1); font-size: var(--dp-fs-sm); font-weight: var(--dp-fw-medium); }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  width: 100%;
  padding: var(--dp-s-6) var(--dp-s-7);
  border: 1px solid var(--dp-hairline);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface); font: inherit; color: var(--dp-ink);
}

/* --- Responsive — DP's real breakpoints: 810 / 1200 -----------------------
   The SHOP LAYOUT's responsive rules do NOT live here. They sit immediately after the
   base .dp-shop__* rules further down, because those base rules are declared BELOW this
   block at the same specificity — anything about .dp-shop__layout or .dp-shop__grid
   written here loses on file order and does nothing. That is exactly what happened: the
   sidebar never collapsed on a phone and the page scrolled sideways for weeks. */
@media (max-width: 1199px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 809px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
  .woocommerce div.product { padding-inline: var(--dp-gutter); }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: var(--dp-s-5); }
  .woocommerce .coupon { flex-direction: column; }
}

/* --- Shop grid (reuses the rail card) ------------------------------------- */
.dp-shop__head { margin-bottom: var(--dp-s-10); }
.dp-shop__title { font-size: var(--dp-fs-display); font-weight: var(--dp-fw-semi); letter-spacing: -.02em; }
.dp-shop__sub { margin-top: var(--dp-s-2); color: var(--dp-muted); }
/* MEASURED: sidebar at x120 (~230 wide), grid starts x376, THREE columns of 299. */
.dp-shop__layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 26px; align-items: start; }
/* MEASURED on DP: position:sticky, top:88px — it pins under the fixed strip+header (74)
   with 14px of air and rides the whole grid. align-items:start above is required, or the
   grid stretches the column to full height and sticky has nothing to travel within. */
.dp-shop__side { position: sticky; top: 88px; }
.dp-shop__sidetitle { font-size: var(--dp-fs-h4); line-height: 24px; letter-spacing: -.6px; font-weight: var(--dp-fw-semi); padding-bottom: var(--dp-s-6); border-bottom: 1px solid var(--dp-hairline); }
.dp-shop__list { display: grid; gap: var(--dp-s-6); margin-top: var(--dp-s-7); }
/* Measured: 16/500 at -0.32 tracking, not the 14/400 body default. */
.dp-shop__list a { font-size: var(--dp-fs-lg); font-weight: var(--dp-fw-medium); line-height: 20.8px; letter-spacing: -.32px; color: var(--dp-ink-50); }
.dp-shop__list a:hover { color: var(--dpx-fg-blue, var(--dp-blue)); }

.dp-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 23px; }
.dp-shop__grid .dp-rcard { flex: none; width: auto; }

/* Grid card variant — 299x353, pill 125x44 r100 with a LEADING arrow ("Learn More"),
   against the rail card's 325x403 with a 144x38 r90 TRAILING chevron ("View Product"). */
.dp-rcard.dp-rcard--grid { height: 353px; padding: 17px 11px 0; }
/* Measured on the /products grid: brand ink at 50%, not a neutral black at 30%. */
.dp-rcard.dp-rcard--grid .dp-rcard__cas { color: var(--dpx-fg-a414676p5, rgba(46, 36, 30, .5)); }
/* The grid card is 50px shorter than the rail card, so the buy row sits tighter under the
   name and the button takes the grid pill's 44px height. Three classes deep so it beats
   the rail rule in home.css, which is (0,1,0) — file order alone would not be enough,
   since woo.css and home.css are both enqueued on /products. */
.dp-rcard.dp-rcard--grid .dp-rcard__buy { margin-top: 10px; gap: var(--dp-s-3); }
.dp-rcard.dp-rcard--grid .dp-rcard__add { height: 40px; padding: 0 var(--dp-s-6); }
/* Inherits the button font now; sizing it separately would break the shared baseline
   either side of the rule. */
/* Image box bleeds ~15px past each card edge (328 wide on a 299 card) and is 214 tall —
   measured. The card clips the overflow. */
/* MEASURED on DP: the image box BOTTOM is flush with the card bottom (top 139 + 214 = 353,
   the card height exactly). At 129 it stopped 10px short and the vial floated. Because the
   box is landscape and the art is portrait, object-fit:contain fills it vertically, so a
   flush box bottom puts the base of the vial on the card's bottom edge. */
.dp-rcard.dp-rcard--grid .dp-rcard__shot { top: 139px; height: 214px; left: -15px; right: -15px; }
.dp-shop__empty { color: var(--dp-muted); }

/* Catalogue header. MEASURED on DP: subtitle 20/500 at 24px leading in pure black at
   y156, search field at y208, first card row at y277. The main column starts at x376,
   so the header sits BESIDE the catalogue list, not above the whole layout. */
.dp-shop__head { margin-bottom: var(--dp-s-10); }
.dp-shop__title {
  margin: 0;
  font-size: 32px; font-weight: var(--dp-fw-semi);
  line-height: 36px; letter-spacing: -.9px;
  color: var(--dp-ink);
}
.dp-shop__sub {
  margin: var(--dp-s-2) 0 0;
  font-size: var(--dp-fs-md); font-weight: var(--dp-fw-medium);
  line-height: 20px; letter-spacing: -.05px;
  color: var(--dp-muted);
}
.dp-shop__search {
  position: relative;
  display: flex; align-items: center;
  margin-top: var(--dp-s-7);
}
.dp-shop__mag { position: absolute; left: 16px; color: var(--dp-ink-50); pointer-events: none; }
.dp-shop__q {
  width: 100%;
  padding: 13px var(--dp-s-7) 13px 42px;
  border: 1px solid var(--dp-hair-row);
  border-radius: var(--dp-r-3xs);
  background: var(--dp-surface);
  font: inherit; font-size: var(--dp-fs-lg);
  letter-spacing: -.28px; color: var(--dp-ink);
}
.dp-shop__q::placeholder { color: var(--dp-ink-50); }
.dp-shop__q:focus-visible { outline: 2px solid var(--dpx-fg-blue, var(--dp-blue)); outline-offset: -1px; border-color: transparent; }
.dp-shop__q::-webkit-search-decoration,
.dp-shop__q::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The catalogue FAQ is NOT the homepage FAQ: DP sets a 32px head here against the
   homepage's 24px, and runs the questions at 14/24 rather than 16/17.6. Scoped to the
   archive so the homepage and PDP keep their own treatments. */
/* The shop FAQ mirrors the homepage section exactly — no archive-specific type. */
.woocommerce-pagination ul { list-style: none; display: flex; gap: var(--dp-s-3); margin: var(--dp-s-10) 0 0; padding: 0; }
.woocommerce-pagination a, .woocommerce-pagination span {
  display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: var(--dp-s-4);
  border-radius: var(--dp-r-pill); background: var(--dp-surface-alt); font-weight: var(--dp-fw-medium);
}
.woocommerce-pagination .current { background: var(--dp-blue); color: var(--dp-on-dark); }
/* --- Shop responsive — THE ONE AUTHORITY ---------------------------------
   Must stay after every base .dp-shop__* / .dp-rcard--grid rule above; equal specificity
   means file order decides, and an override written earlier silently loses. */
@media (max-width: 1199px) {
  .dp-shop__layout { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
  /* minmax(0, 1fr), never a bare 1fr: a grid track's default min-width is auto, so a card
     whose content will not shrink below its own min-content pushes the track wider than
     the container and the whole page scrolls sideways. */
  .dp-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  /* The catalogue list is GONE on a phone, not merely moved below the grid.
     34 products two-up is ~1400px of tail — a screen and a half of nothing but repeated
     product names, after the grid has already shown every one of them as a card. It earns
     its place at desktop widths, where it is a sticky column costing no vertical space at
     all; on a phone it is the same links a second time, and it is the last thing between
     the shopper and the footer. display:none takes it out of the a11y tree too, which is
     right here: the grid above is not a summary of these links, it IS them. */
  .dp-shop__side { display: none; }
  .dp-shop__layout { grid-template-columns: minmax(0, 1fr); gap: var(--dp-s-9); }
  .dp-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dp-s-3); }

  /* The card stops being a fixed 353px box. Two cards across a phone leaves ~165px, where
     a name wraps to three lines and a fixed-height card drives the text straight through
     the photo. In flow the card grows to fit its own text, and because the photo is the
     last child of a flex column its bottom is still flush with the card edge — which is
     the property the fixed geometry existed to guarantee. */
  .dp-rcard.dp-rcard--grid {
    height: auto;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    padding: var(--dp-s-6) var(--dp-s-4) 0;
  }
  .dp-rcard.dp-rcard--grid .dp-rcard__cas { font-size: var(--dp-fs-sm); line-height: 18px; letter-spacing: -.3px; }
  .dp-rcard.dp-rcard--grid .dp-rcard__name { margin-top: var(--dp-s-1); font-size: var(--dp-fs-h4); line-height: 22px; letter-spacing: -.5px; }
  /* Stacked, because price + pill side by side needs ~200px and there are only ~145. */
  .dp-rcard.dp-rcard--grid .dp-rcard__buy { flex-direction: column; gap: var(--dp-s-2); margin-top: var(--dp-s-3); }
  /* No size of its own any more. The price used to be a standalone element beside the
     button and was sized up to 18px to read as the card price; now it sits INSIDE the
     button and must share its type, or the two halves either side of the rule disagree.
     Left in place it beat the button font and forced the label to ellipse to "Add To …". */
  .dp-rcard.dp-rcard--grid .dp-rcard__add { width: 100%; height: 38px; padding: 0 var(--dp-s-4); }
  /* margin-top:auto is what pins the vial to the bottom edge. Grid rows stretch every card to
     the tallest in the row, so a card whose name fits on one line gets the leftover height —
     and in a flex column that space lands AFTER the last child, leaving the photo floating
     22px above the card bottom while its row-mate looked correct. Pushing the free space
     ABOVE the photo instead keeps the vial base on the edge whatever the text does. */
  .dp-rcard.dp-rcard--grid .dp-rcard__shot {
    position: static;
    left: auto; right: auto; top: auto;
    margin: auto -10px 0;
    height: 160px;
    flex: 0 0 160px;
  }
}

/* Search result summary on the shop head. */
.dp-shop__clear {
  margin-left: var(--dp-s-4);
  font-size: var(--dp-fs-base);
  font-weight: var(--dp-fw-medium);
  color: var(--dpx-fg-blue, var(--dp-blue));
}
.dp-shop__clear:hover { text-decoration: underline; }
.dp-rcard[hidden] { display: none; }

/* --- Grid card CTA on a phone -------------------------------------------
   ONE LINE, at every width. This was briefly stacked to make it fit, which turned the pill
   into a 61px slab that dominated the card — the button ended up louder than the product.

   It fits on one line by MEASUREMENT rather than by shrinking until it looked right. The
   two-up card is 173px wide with 153px inside its padding; at 12px the label is 65.7px and
   the widest minimum price in the catalogue ("$179.00") is 44.4px, so 8px of button padding
   either side plus a 1px rule with 9px of air each side totals ~145px and leaves ~8px spare.

   MUST stay inside this media query: written unqualified, an earlier version of this block
   applied at 1440 too and drove the button 7px into the photo, whose bottom is flush to the
   card edge by design. */
@media (max-width: 809px) {
  .dp-rcard.dp-rcard--grid .dp-rcard__add {
    height: 40px;
    padding: 0 var(--dp-s-3);
    font-size: var(--dp-fs-sm);
    letter-spacing: -.2px;
  }
  .dp-rcard.dp-rcard--grid .dp-rcard__rule { margin-inline: 9px; }
  /* If a price ever outgrows the budget above, the LABEL gives way rather than the button
     bursting out of the card — a clipped word is recoverable, a broken grid is not. */
  .dp-rcard.dp-rcard--grid .dp-rcard__addLbl {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .dp-rcard.dp-rcard--grid .dp-rcard__amt { flex: 0 0 auto; }
}