/* [PPS-FIXES-OCT2] customer pages: phone, tablet and desktop fixes from the Oct 2 screen-size check.
   Loaded from base_v2.html after every other stylesheet. Every rule is scoped to body.hv2 (the v2 customer
   chrome); the admin pages use their own base and never load this file. */

/* 1. Back-in-stock box on sold-out products: the email inputs had the browser's 2px side padding, so the
      placeholder touched the border. Scoped to #notify only: the shared "main input[type=...]" rule must stay
      as it is, or the product search box loses its 46px/116px padding. min-width: 0 lets the box shrink back to
      its old width, so the extra padding never pushes the "Email my link" button towards the card edge (360px). */
body.hv2 #notify input[type=email],
body.hv2 #notify input[type=tel] { padding-left: 12px; padding-right: 12px; min-width: 0; }
@media (max-width: 340px) {   /* 320px phones: the narrow "Already signed up" box keeps its whole placeholder */
  body.hv2 #notify input[type=email], body.hv2 #notify input[type=tel] { padding-left: 8px; padding-right: 8px; }
}

/* 2. Product description: the eyebrow and "Description" heading are left-aligned, the body was still centred
      (site.css margin: 0 auto), which showed as a 50-76px indent on single-column tablets (768/820). */
body.hv2 .product-description-body { margin-left: 0; margin-right: 0; }

/* 3. Category chips: 44px on every touch screen, landscape tablets (1024-1366px) included. A mouse keeps 36px. */
@media (pointer: coarse) {
  body.hv2 .cat-pill { min-height: 44px; }
}

/* 4. Links inside running text: home-v2.css gives every "p a" a 12px invisible tap margin above and below, so
      links on neighbouring lines took each other's taps. In-text links keep their side padding (same look, same
      line breaks) but no longer reach into the line above or below. Stand-alone links (.hv2-sec-link, review
      links) and the inline-styled button links (FAQ/About/Contact CTAs) keep their larger tap areas. The
      selector has the same weight as home-v2.css ".hv2 p a" (it wins by loading later), so every rule that
      deliberately sizes a particular link (for example the 44px "Forgot password?" link) still applies. */
body.hv2 :where(main p:not(.hv2-review-by), main dd) a:where(:not([style*="background"]):not(.hv2-sec-link)) { padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }

/* 5. Account > Partner program. Four stat cards only fit side by side once the main column is wide enough
      (1180px+ with the sidebar); below that they sit 2 x 2 instead of running off the right edge (801-1179px)
      or squeezing the last card (768px). Cards may shrink, and the figures scale down on small phones.
      The referral-link input may shrink too, so the Copy button stays inside its box at 360px. */
body.hv2 .account-main .partner-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1180px) {
  body.hv2 .account-main .partner-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body.hv2 .partner-card { min-width: 0; }
body.hv2 .partner-card-value { font-size: clamp(20px, 6vw, 30px); overflow-wrap: anywhere; }
body.hv2 .partner-linkbox-row input { min-width: 0; }

/* 6. Cart and account touch targets.
      - Remove: its 44px tap area started 4px inside the quantity "-" button above it; now it starts below it.
      - Product names: the "+" in NAD+ / "BPC-157 + TB-500" is wrapped in the .label-plus span in cart.html (the
        home page's readable cut, site-v2.css), so the names keep their width and no CSS is needed here.
      - On touch screens the code toggle, Reorder and Sign Out reach 44px (the toggle's padding is an inline
        style, hence !important on those two lines only). */
body.hv2 .cart-item-info .remove { margin-top: -6px; }
@media (pointer: coarse) {
  body.hv2 #cart-code > summary { padding-top: 12px !important; padding-bottom: 12px !important; min-height: 44px; box-sizing: border-box; }
  body.hv2 .order-card-actions .btn-reorder { display: inline-flex; align-items: center; min-height: 44px; }
  body.hv2 .account-header-row .btn-sm { min-height: 44px; }
}

/* 7. Wholesale page: three benefit cards in a two-column grid left an empty cell. A lone last card spans the
      row; on wide screens three cards sit three across. (With volume pricing on there are four: 2 x 2.) */
body.hv2 .wh-grid > .wh-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  body.hv2 .wh-grid:has(> .wh-card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.hv2 .wh-grid > .wh-card:nth-child(3):last-child { grid-column: auto; }
}

/* 8. Empty cart: cart.html reserves 80px under the footer for the phone checkout bar, which an empty cart does
      not have. Only the cart page without the bar; the product page keeps its own room for its Add bar. */
@media (max-width: 980px) {
  body.hv2:has(main .cart-page):not(:has(.cx-stickybar)) { padding-bottom: 0; }
}

/* 9. Calculator quick-reference table: "10 mg" broke onto two lines at 390/430. Values stay on one line
      (headers may still wrap); the wrapper already scrolls sideways if a phone is too narrow. */
body.hv2 .pcg td { white-space: nowrap; }
@media (max-width: 380px) {
  body.hv2 .pcg th, body.hv2 .pcg td { padding-left: 6px; padding-right: 6px; }   /* fits a 360px phone without scrolling */
}

/* 10. Account > order detail (Items table wider than a phone): the rules live in a <style> block inside
       templates/account/order_detail.html, so the page also looks right in the classic base.html layout,
       which does not load this file. */