/* Product-page curated reviews section. Ports the exact .testimonials-card
   markup/visual style from parts/blocks/testimonials-card/testimonials-card.scss
   (the homepage's block) under a new wrapper, since that file's rules are
   scoped to the ACF block-editor wrapper class (.wp-hip-block-testimonials-card)
   which isn't present when this markup is rendered directly on the single
   product page instead of through the block editor. */
.wpi-product-reviews {
  padding: 60px 0;
}

.wpi-product-reviews-heading {
  text-align: center;
  margin-bottom: 32px;
}

.wpi-product-reviews-single {
  max-width: 640px;
  margin: 0 auto;
}

.wpi-product-reviews-slider-outer {
  position: relative;
}

.wpi-product-reviews-slider {
  overflow: hidden;
}

.wpi-product-reviews .testimonials-card {
  border-radius: 45px;
  background: #171717;
  backdrop-filter: blur(5px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: 260px;
  gap: 20px;
  padding: 32px 28px;
}

.wpi-product-reviews .tc-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.wpi-product-reviews .tc-star {
  display: flex;
  color: #fff;
  transition: opacity 0.15s ease;
}

.wpi-product-reviews .tc-star--empty {
  opacity: 0.2;
}

.wpi-product-reviews .tc-content {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  flex: 1;
}

.wpi-product-reviews .tc-content p {
  margin: 0;
}

.wpi-product-reviews .tc-name {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}

.wpi-reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1c1c1e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wpi-reviews-arrow:hover {
  background: #7a5da7;
  border-color: #7a5da7;
}

.wpi-reviews-prev {
  left: -23px;
}

.wpi-reviews-next {
  right: -23px;
}

@media (max-width: 780px) {
  .wpi-reviews-arrow {
    display: none;
  }
}

/* "Frequently bought with your items" heading is now rendered by the theme,
   above the carousel (see inc/woocommerce.php). Safety net in case the old
   heading/paragraph row is still configured in the WPC Product Bundles
   product-data tab: hide it so it doesn't show up duplicated as a slide
   inside the carousel. Best fix is still removing that row in wp-admin. */
.woobt-item-text {
  display: none !important;
}

.bought-together-heading {
  margin-bottom: 32px;
}

/* Variation swatch pills (WPC Variation Swatches plugin, .wpcvs-* classes)
   on single product pages, e.g. "Select Strength: 5mg / 15mg": the theme
   only ever set the pill BACKGROUND color, never the text color, so it fell
   through to inherited white-on-white in some states, making the label
   invisible. Explicitly forcing white text for both states fixes it. */
.wpcvs-term,
.wpcvs-term .wpcvs-term-inner,
.wpcvs-term span {
  color: #fff !important;
}

/* Bundle line-item cards in the "Frequently bought together" section
   (WPC Product Bundles plugin, .woobt-* classes): .woobt-product had
   border-radius but no overflow:hidden, so thumbnail images poked past the
   rounded corners with their own square edges, same bug pattern as
   elsewhere on this site. Rounding the <img>/<a> directly too, since the
   overflow:hidden alone wasn't enough given this element's own padding/
   nesting (.woobt-thumb > a.woobt-img > img). */
.woobt-product {
  overflow: hidden !important;
}

.woobt-thumb,
.woobt-thumb .woobt-img,
.woobt-thumb img {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* "Please select a purchasable variation..." warning on single product
   pages: the plugin renders this on a white background, but the theme's
   global white text color made it invisible. Force dark text instead of
   touching the background, since the white box may be an intentional
   warning/alert style. */
.woobt-alert.woobt-text,
.woobt-alert.woobt-text strong {
  color: #1a1a1a !important;
}

/* Category archive page: "Explore X Products" heading above the product grid */
.archive-listing-heading {
  margin-bottom: 24px;
}

/* Product page main gallery image (.psg-main-swiper, the actual active
   gallery component): border-radius:45px was already set on the swiper
   slide, but no overflow:hidden, so the image's own square corners poked
   past the rounded boundary and it looked completely unrounded. */
.psg-main-swiper .swiper-slide {
  overflow: hidden !important;
}

/* Fix "split chars" heading animation breaking words mid-way (e.g.
   "Supplements" -> "Supple"/"ments"): group each word's char-spans into a
   nowrap wrapper so the browser can only break the line between words. See
   dist/js/modules/scrollAnimations.js for the matching JS-side fix. */
.anim-split-chars .anim-char-word {
  display: inline-block;
  white-space: nowrap;
}

/* Bullet dot on "Three dots" pattern columns ("Our Standard at Healand
   Peptides", "Precision by Design"): align to the vertical center of the
   h3's first line instead of a flat 24px offset that didn't match Figma. */
.left-top-line::before,
.left-top-line::after {
  top: 6px !important;
}

@media (max-width: 1200px) {
  .left-top-line::before,
  .left-top-line::after {
    top: 4px !important;
  }
}

/* Footer "GMP Manufactured | ..." trust-badges row: the <hr> above and
   below it exist in the markup already but were nearly invisible because
   Bootstrap's default hr opacity (0.25) was multiplying against this
   theme's own rgba(255,255,255,0.24) border color (~6% effective visibility
   combined). Restoring opacity:1 lets the intended color show properly. */
.footer hr {
  opacity: 1 !important;
}

/* Add breathing room around each "|"-separated item in that line, since it's
   plain text (not individual elements) so word-spacing is the only lever
   available without editing the field content itself. */
.footer-desc p {
  word-spacing: 6px;
}

/* Product card images: full width, responsive height */
.woo-product-item .wpi-image {
  padding: 0 !important;
  border-radius: 45px 45px 0 0 !important;
  overflow: hidden;
  min-height: 0 !important;
}

.woo-product-item .wpi-image img {
  width: 100% !important;
  height: clamp(220px, 24vw, 280px) !important;
  max-height: none !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
}

/* Live product search: input + button styling */
#searchform {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 30px;
  padding: 6px 6px 6px 18px;
}

#searchform .search-field {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  flex: 1;
  min-width: 200px;
}

#searchform .search-field::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

#searchform .search-field::-webkit-search-cancel-button {
  cursor: pointer;
}

#searchform .search-submit {
  background: #7a5da7;
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

#searchform .search-submit:hover {
  background: #5d4681;
}

.top-menu.search-open .menu-search-holder {
  overflow: visible !important;
}

/* Live search dropdown — position is set by JS (position: fixed), not CSS,
   so it always escapes clipping from the offcanvas/menu panel it sits in */
.wpi-search-results {
  display: none;
  flex-direction: column !important;
  background: #1c1c1e;
  border-radius: 16px;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 9999;
}

.wpi-search-results.is-open {
  display: flex;
  flex-direction: column !important;
}

.wpi-search-result {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.wpi-search-result:last-child {
  border-bottom: none;
}

.wpi-search-result:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wpi-search-result-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.wpi-search-result-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.wpi-search-empty {
  padding: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.wpi-search-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
}

.wpi-search-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #7a5da7;
  border-radius: 50%;
  animation: wpi-search-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes wpi-search-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Age verification checkbox at checkout */
.wpi-age-verification {
  margin: 16px 0;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.wpi-age-verification label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.wpi-age-verification input[type='checkbox'] {
  width: 18px;
  height: 18px;
  accent-color: #7a5da7;
  cursor: pointer;
}

/* Certificate of Analysis archive */
.wpi-coa-page {
  padding: 60px 15px 80px;
}

.wpi-coa-header {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  padding: 48px 24px;
  border-radius: 32px;
  background: radial-gradient(circle at 30% 20%, rgba(122, 93, 167, 0.25), transparent 60%),
    rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.wpi-coa-title {
  color: #fff;
  font-size: 40px;
  margin-bottom: 12px;
}

.wpi-coa-subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 24px;
}

.wpi-coa-browse-btn {
  display: inline-block;
  background: #7a5da7;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  border-radius: 24px;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.wpi-coa-browse-btn:hover {
  background: #5d4681;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* Search + category + sub-category filter bar — one row on desktop,
   wrapping/stacking on narrower screens */
.wpi-coa-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.wpi-coa-search-wrap {
  flex: 1 1 240px;
  min-width: 0;
}

.wpi-coa-search {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: 10px 18px;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.wpi-coa-search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.wpi-coa-search::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Shared dropdown look for both the category dropdown and the per-category
   product dropdowns — only the product dropdown matching the active
   category is displayed at a time, toggled by dist/js/modules/coaFilter.js */
.wpi-coa-category-dropdown,
.wpi-coa-subcategories {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  max-width: 220px;
}

@media (min-width: 600px) {
  .wpi-coa-category-dropdown,
  .wpi-coa-subcategories {
    width: auto;
  }
}

.wpi-coa-cat-toggle,
.wpi-coa-subcat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.wpi-coa-cat-toggle:hover,
.wpi-coa-subcat-toggle:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.wpi-coa-dropdown-arrow {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.wpi-coa-cat-toggle[aria-expanded='true'] .wpi-coa-dropdown-arrow,
.wpi-coa-subcat-toggle[aria-expanded='true'] .wpi-coa-dropdown-arrow {
  transform: rotate(180deg);
}

.wpi-coa-cat-panel,
.wpi-coa-subcat-panel {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: #1c1c1e;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  padding: 8px;
}

.wpi-coa-cat-panel.is-open,
.wpi-coa-subcat-panel.is-open {
  display: block;
}

.wpi-coa-cat-option,
.wpi-coa-subcat-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  cursor: pointer;
}

.wpi-coa-cat-option {
  background: transparent;
  border: none;
  text-align: left;
}

.wpi-coa-cat-option:hover,
.wpi-coa-subcat-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wpi-coa-cat-option.is-active {
  background: rgba(122, 93, 167, 0.25);
  color: #b79fe0;
}

.wpi-coa-subcat-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #7a5da7;
  cursor: pointer;
  flex-shrink: 0;
}

.wpi-coa-count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  margin: 0 0 24px;
}

.wpi-coa-no-results {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 40px 0;
}

.wpi-coa-count-number {
  color: #b79fe0;
  font-weight: 700;
}

.wpi-coa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .wpi-coa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wpi-coa-grid {
    grid-template-columns: 1fr;
  }
}

.wpi-coa-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 20px;
}

.wpi-coa-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.wpi-coa-icon {
  display: flex;
  flex-shrink: 0;
}

.wpi-coa-card-name {
  flex: 1;
  min-width: 0;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wpi-coa-verified-badge {
  background: #7a5da7;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}

.wpi-coa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.wpi-coa-row-label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}

.wpi-coa-row-value {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.wpi-coa-category {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 10px;
  border-radius: 12px;
}

/* Multiple certificate files per product card */
.wpi-coa-files {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.wpi-coa-file-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #7a5da7;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.wpi-coa-file-link:hover {
  background: #5d4681;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.wpi-coa-file-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 10px;
  flex-shrink: 0;
}

.wpi-coa-empty {
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  padding: 60px 0;
}

/* Subtle product-page link to the certificate archive */
.wpi-coa-product-link {
  margin-top: 10px;
}

.wpi-coa-product-link a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  text-decoration: underline;
}

.wpi-coa-product-link a:hover {
  color: #b79fe0;
}

/* Single product breadcrumb (Home / Category / Product Name).
   Wrapped in .container by inc/woocommerce.php; this just styles the trail. */
.woocommerce-breadcrumb {
  padding: 20px 0;
  font-size: 14px;
  color: #9a9a9a;
}

.woocommerce-breadcrumb a {
  color: #9a9a9a;
  text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
  color: #7A5DA7;
  text-decoration: underline;
}

/* Compact page-title heading (no background hero behind it — plain text-only
   pages like Privacy Policy). .page-hero's own padding (dist/scss/partials/
   _theme.scss) assumes a full background image filling that space; without
   one it just reads as dead black space, worse on short mobile viewports. */
.wpi-compact-hero>.wp-hip-block-content {
  padding: 40px 24px 16px !important;
}

@media (max-width: 767px) {
  .wpi-compact-hero>.wp-hip-block-content {
    padding: 24px 20px 8px !important;
  }
}

/* Hide the ivole/CusRev plugin's own review consent checkbox. Checkout no
   longer asks for review consent at all — every completed order gets a
   Trustpilot invite email automatically (see inc/woocommerce.php). */
.cr-customer-consent {
  display: none !important;
}

/* "Why Choose Healand Peptides" trust section on single product pages.
   Cards reuse the theme's existing .icon-box glassmorphism style. */
.wpi-why-choose {
  padding: 80px 0;
}

.wpi-why-choose .icon-box img {
  display: block;
  width: 58px !important;
  height: 58px !important;
  margin: 0 0 16px auto;
}

.wpi-why-choose .icon-box h3 {
  margin-bottom: 8px;
}

.wpi-why-choose .icon-box p {
  margin: 0;
  color: #ffffff69;
}

/* Hero section (.page-hero) top/bottom padding, site-wide — slightly
   reduced from the default 12.8125rem top / 7.4375rem bottom
   (dist/scss/partials/_theme.scss:12). Left/right padding left untouched. */
.page-hero > .wp-hip-block-content,
.page-hero .acf-block-preview > div > .wp-hip-block-content {
  padding: 11rem 2.9375rem 6rem !important;
}

/* Mobile hero padding — value confirmed via DevTools by the client. */
@media (max-width: 767px) {
  .page-hero > .wp-hip-block-content,
  .page-hero .acf-block-preview > div > .wp-hip-block-content {
    padding: 6rem 1.9375rem 4rem !important;
  }
}

/* Cart page: .woocommerce-cart-form (product list, 60% width, float:left)
   and .cart-collaterals (totals card, 38% width, float:right) have NO
   responsive handling anywhere in the theme — confirmed in both
   dist/scss/partials/_woocommerce.scss:2026-2046 and compiled main.min.css.
   They stay side-by-side at every viewport, squeezing everything inside
   (product cards, coupon row, totals, checkout button, Amazon Pay button)
   into two ~190px/~130px columns on mobile. Same breakpoint as the
   checkout fix below for a consistent stacking point. */
@media (max-width: 780px) {
  .woocommerce-cart-form,
  .cart-collaterals {
    width: 100% !important;
    float: none !important;
  }

  /* Cart item card — keep desktop's 24px padding, just soften the 45px
     border-radius for a narrow screen. Confirmed by the client via DevTools. */
  .hip-cart-item {
    border-radius: 16px !important;
  }

  /* Totals card — same, plus margin-top now that it stacks below the cart
     form on mobile (width:100%/float:none above), so the two don't touch. */
  .cart-collaterals {
    border-radius: 16px !important;
    margin-top: 18px;
    padding: 16px !important;
  }

  /* Coupon input + "Apply coupon"/"Update cart" buttons rely entirely on
     flex-wrap with no actual stacking rule — clean that up so it reads as
     an intentional stacked layout instead of an accidental wrap. */
  .hip-cart-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hip-cart-actions .coupon {
    margin-right: 0;
    flex-direction: column;
    align-items: stretch;
  }

  .hip-cart-actions .coupon input.input-text {
    width: 100%;
  }

  /* Whatever the Amazon Pay plugin renders inside .wc-proceed-to-checkout
     has no matching theme selector at all (it's plugin markup, not theme
     markup) — constrain it generically by container so it can't render
     narrower/wider than the checkout button above it. */
  .wc-proceed-to-checkout > * {
    width: 100% !important;
  }
}

/* Checkout page: #customer_details (billing/shipping, 60% width) and
   .your-order-holder (order review, 38% width) are floated side by side
   with NO responsive handling anywhere in the theme at all — confirmed in
   both dist/scss/partials/_woocommerce.scss:2475-2477/2668-2670 and the
   compiled main.min.css. They stay side-by-side at every viewport width,
   forcing every label/input to wrap character-by-character on mobile. */
@media (max-width: 780px) {
  #customer_details,
  .your-order-holder {
    width: 100% !important;
    float: none !important;
  }

  /* Paired fields (First/Last name etc.) inside billing have no theme
     override either, so they independently fall back to WooCommerce core's
     ~47% float pairing — stack those too, or they'd still squeeze even
     after the outer fix above. */
  #customer_details .form-row-first,
  #customer_details .form-row-last {
    width: 100% !important;
    float: none !important;
  }

  /* Billing/shipping/additional-fields card: same values as desktop except
     padding and border-radius, tightened for a narrow screen — confirmed
     by the client via DevTools. */
  #customer_details .woocommerce-additional-fields,
  #customer_details .woocommerce-billing-fields,
  #customer_details .woocommerce-shipping-fields:has(div) {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }

  /* Order-notes textarea has no dedicated mobile styling — confirmed by
     the client via DevTools. */
  #customer_details .col-1 textarea,
  #customer_details .col-2 textarea {
    min-height: 7.5rem;
    height: 3.5rem;
    padding: 1rem;
    border: 1px solid #2d2d2d;
    border-radius: 12px;
    background: #000 !important;
    backdrop-filter: blur(5px);
    color: #fff !important;
  }

  /* Order review card — keep the width:100%/float:none stacking fix above,
     just tighten padding/border-radius to match the billing card. */
  .your-order-holder {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }
}

/* Checkout page, mobile only: client wants the order summary
   (.your-order-holder) shown first, above billing/shipping details
   (#customer_details), instead of DOM order. Both are direct children of
   <form class="checkout woocommerce-checkout"> (confirmed structure), so
   flexbox + order reorders them visually without touching the template. */
@media (max-width: 780px) {
  form.checkout.woocommerce-checkout {
    display: flex;
    flex-direction: column;
  }

  .your-order-holder {
    order: -1;
    margin-top: 0 !important;
    margin-bottom: 24px;
  }
}

/* My Account > Orders table on mobile. WooCommerce core's own responsive-
   table CSS hides the Order-Number <th scope="row"> entirely on mobile
   (`.shop_table_responsive tbody th{display:none}`) and its ":before"
   data-title label mechanism only targets <td>, never <th> — so both the
   order number AND its "Order:" label vanish, which is why rows jump
   straight to "Date:". Restore both. Also: the "Actions" cell's "View"
   button sits cramped next to the floated "Actions:" label instead of on
   its own line, since the theme's global button style forces
   display:inline-flex!important. */
@media (max-width: 780px) {
  .woocommerce-orders-table__cell-order-number {
    display: block !important;
    text-align: right !important;
  }

  .woocommerce-orders-table__cell-order-number::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
  }

  /* Orders with several available actions (Pay/View/Cancel) render as
     multiple stacked buttons — flexbox on the cell itself gives consistent
     spacing between the ::before "Actions:" label and every button (float
     is ignored on flex items, so the label becomes a normal stacked item
     too), instead of the old margin-top-per-button approach which left the
     buttons looking glued together. */
  .woocommerce-orders-table__cell-order-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: left !important;
  }

  /* display:block (not the theme's default inline-flex) is needed so the
     button can take width:100% — but that also drops the centering that
     inline-flex + justify-content/align-items was providing, so restore it
     with display:flex instead (still block-level, still centers content). */
  .woocommerce-orders-table__cell-order-actions a.button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    margin: 0 !important;
  }
}

/* Same Orders table Actions cell on larger screens: the Pay/View/Cancel
   buttons are plain adjacent <a> tags with no whitespace between them in
   the markup, so they render touching each other with zero gap. */
@media (min-width: 781px) {
  .woocommerce-orders-table__cell-order-actions a.button {
    margin-right: 8px;
  }
}

/* FAQ page accordion has no side padding at all, so its cards touch the
   viewport edges on mobile. Add a small gutter on mobile only. */
@media (max-width: 767px) {
  .wp-hip-block-content-accordion {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Header mini-cart dropdown (.wc-mini-cart__dropdown) on mobile. right:0
   was tried here to counter the theme's own right:-50px offset
   (dist/scss/partials/_woocommerce.scss:811-814) but broke the layout in
   practice — reverted per client feedback, keeping only left:auto. */
@media (max-width: 576px) {
  .wc-mini-cart__dropdown {
    left: auto !important;
  }
}

/* WPLoyalty reward/points message banner (e.g. "earn points" / "discount on
   a future purchase" on cart and checkout) has no consistent styling of its
   own — confirmed by the client via DevTools, applied on mobile. */
@media (max-width: 780px) {
  .wlr-message-info {
    margin: 5px 0 12px;
    padding: 5px 28px;
    border: 1px solid #9CC21D;
    border-radius: 6px;
    color: #9CC21D;
    background-color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
}

/* Header logo (.navbar-brand img) is capped at 15.125rem (242px) site-wide
   with no mobile-specific reduction. Shrink it on mobile only — value
   confirmed by the client via DevTools. */
@media (max-width: 767px) {
  .top-menu .navbar-brand img {
    -webkit-transition: all .25s ease-in-out 0s;
    transition: all .25s ease-in-out 0s;
    max-width: 9.125rem !important;
  }
}

/* Footer social icons (.menu-icon, e.g. Instagram) have no width/height set
   anywhere — the <img> is rendered with no size attributes at all
   (inc/menus.php:94) and no CSS constrains it either, so on mobile, where
   its container is a full-width stacked column, it balloons up to fill
   that width instead of staying icon-sized. Pin it down on mobile only. */
@media (max-width: 767px) {
  .footer .menu-icon {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Footer logo has no max-width set anywhere, so it scales to fill its full
   flex column — on mobile that means it renders almost edge-to-edge.
   Cap it to a sensible size on mobile only. */
@media (max-width: 767px) {
  .footer-logo-holder img {
    max-width: 220px !important;
    width: 220px !important;
  }
}

/* "The Standard Behind Every Healand Peptide" video-modal poster image
   (wide-holder variant) — its 1150/435 aspect-ratio is a wide banner crop
   tuned for desktop. On a narrow mobile viewport that same ratio forces a
   very short box, cropping the photo. Use a landscape ratio close to the
   image's own (5504x3072 native) on mobile instead. Scoped to .wide-holder
   only — the regular 599/528 video-modal ratio used elsewhere is untouched.
   NOTE: .wide-holder is a class on a *child* div of .wp-hip-block-video-modal,
   not the same element — must be a descendant selector (space), not chained
   directly onto .wp-hip-block-video-modal, or it never matches anything. */
@media (max-width: 780px) {
  .wp-hip-block-video-modal .wide-holder .video-outer-wrapper {
    aspect-ratio: 400 / 230 !important;
  }
}

/* Homepage "Quality You Can Trust" section background image. Desktop uses a
   fixed "auto 750px" background-size (set via the ACF background field,
   see inc/components/component-background-image.php) — on a narrow mobile
   viewport that fixed height reads as an extreme, cropped zoom. Shrink it. */
@media (max-width: 767px) {
  .wp-hip-block-bg-image.wpi-quality-trust-bg {
    background-size: auto 320px !important;
  }
}

/* Payment methods box on Add Payment Method, Cart, and Checkout pages. */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
  background: rgba(129, 110, 153, .14);
  border-radius: 16px;
  margin-top: 18px;
}

/* Amazon Pay "Have an Amazon account?" express box (checkout + cart). It
   inherits the generic .woocommerce-info notice styling — a single no-wrap
   flex row with an 80px left gutter meant for a one-line text notice, not a
   fixed-size button widget plus trailing text. That's what squeezes/overlaps
   it on narrow screens. Re-laid out here; content stays left-aligned and the
   "Have an Amazon account?" text is pulled before the button via flex order
   (the button div is the only real element we can target — the text itself
   is a bare text node with no wrapper). The microtext's color fix lives in
   JS (inc/woocommerce.php) since it renders inside a closed-off shadow root
   that this stylesheet can't reach. */
.wc-amazon-checkout-message.wc-amazon-payments-advanced-info,
.woocommerce-info.wc-amazon-payments-advanced-info {
  padding: 14px 20px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

.woocommerce-info.wc-amazon-payments-advanced-info [id^="pay_with_amazon"] {
  order: 2 !important;
  margin-left: 0 !important;
}

/* The WooCommerce-icon-font "info" glyph renders as an odd filled box here
   instead of the intended icon — not meaningful next to a payment button
   anyway, so drop it rather than fight the icon font. */
.woocommerce-info.wc-amazon-payments-advanced-info::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 780px) {
  .wc-amazon-checkout-message.wc-amazon-payments-advanced-info,
  .woocommerce-info.wc-amazon-payments-advanced-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* Homepage "Purity/Heavy metal/Endotoxins tested" icon-box row. The
   paragraph + icon are stacked (title on top, icon below-right) by design
   at every width via .wp-block-image.alignright — fine on desktop where the
   card is wide, but on mobile it just wastes vertical height. Client wants
   icon and text on one line on mobile. */
@media (max-width: 767px) {
  .icon-box > .wp-hip-block-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px;
  }

  .icon-box > .wp-hip-block-content p {
    margin: 0 !important;
  }

  .icon-box > .wp-hip-block-content .wp-block-image.alignright {
    width: auto !important;
    flex-shrink: 0;
    margin: 0 !important;
  }
}

/* Homepage "Quality You Can Trust" mission column: on desktop the column is
   flex-direction:column (button, spacer, then text, in source order) with
   the button right-justified — reasonable when it's the top item in a
   narrow column. On mobile that column flips to flex-column-reverse (text
   on top, button last), but the button keeps its desktop right-justify,
   so it floats away from the left-aligned text above it instead of lining
   up with it. Left-align it on mobile only; desktop is untouched. */
@media (max-width: 767px) {
  .wpi-mission-buttons {
    justify-content: flex-start !important;
  }
}

/* Homepage top hero ("Research Peptides You Can Trust", above the fold):
   its .mobile-columns-reverse class switches the 3 columns (button / empty
   spacer / text) to flex-direction:column-reverse on mobile, but WordPress
   core's own column-block CSS *also* forces flex-wrap:wrap + each column to
   flex-basis:100% at this same breakpoint — a rule written assuming
   flex-direction stays row (its "100%" stacks columns into full-width
   rows). With direction now column, flex-basis:100% instead asks each
   column for 100% of the container's HEIGHT (the main axis rotates too),
   and the container's own align-items:flex-end (inherited from
   are-vertically-aligned-bottom, meant for bottom-aligning a row) becomes a
   cross-axis rule that shoves each column to the right instead — hence the
   "Explore Products" button floating off to the side on mobile. Pin the
   sizing/alignment back to sane values for this specific instance only;
   .mobile-columns-reverse is reused elsewhere and isn't safe to change
   globally. */
@media (max-width: 780px) {
  .wpi-home-hero-cols {
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .wpi-home-hero-cols > .wp-block-column {
    flex-basis: auto !important;
    width: 100% !important;
  }
}

/* Homepage top hero background image (1376x768 landscape). On mobile the
   hero's content (heading + paragraph + button) stacks tall in a narrow
   viewport, so the container ends up far taller/narrower than the image's
   own aspect ratio. background-size:cover then has to scale the image way
   up to cover that shape, cropping most of its width — reading as an
   extreme zoom. Switch to `contain` on mobile only so the full image is
   always visible (letterboxed into the section's own dark
   background/gradient) instead of being cropped in tight. */
@media (max-width: 767px) {
  .wp-hip-block-bg-image.wpi-home-hero-bg {
    background-size: contain !important;
  }
}