/* 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;
}

/* Feedback #17/#18: on mobile the clamp() above bottoms out at its 220px
   floor for every product card (24vw is smaller than 220px below ~917px
   wide), giving object-fit:cover very little room and cropping product
   photos in tight. Client confirmed 320px looks right (first tuned for
   L-Carnitine specifically, then asked to apply it to every card). */
@media (max-width: 780px) {
  .woo-product-item .wpi-image img {
    height: 320px !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;
  }
}

/* "Frequently Bought Together" widget (WPC/woo-bought-together plugin):
   every tile gets a .woobt-availability wrapper, but the plugin only ever
   fills it in for the "This item" tile ("In stock") — the other tiles'
   wrappers are always empty. That inconsistency reads as a leftover stock
   count display (client feedback #5 was to remove stock status from every
   product), so hide it everywhere in this widget rather than just on the
   one tile that happens to have content. */
.woobt-availability {
  display: none !important;
}

/* Feedback #8/#12: top-nav "About" and footer links (Shipping policy,
   Refunds & returns, Contact us, Terms & conditions, B2B & Bulk Orders) all
   render in the theme's purple "active/current-page" colour instead of
   their normal resting colour. Root cause: those footer links are all
   #anchor sections *within* the single /about/ page rather than separate
   pages, so they all share the same base URL — WordPress marks every one
   of them (plus "About us" itself) "current" at once whenever anyone is on
   /about/. Per client request, active should just match default, so the
   special current-page color/underline is removed for both menus rather
   than trying to special-case per-#anchor matching. */
.top-menu .current_page_item:not(.menu-btn) > .nav-link,
.top-menu .current_page_parent:not(.menu-btn) > .nav-link,
.offcanvas .current_page_item:not(.menu-btn) > .nav-link,
.offcanvas .current_page_parent:not(.menu-btn) > .nav-link {
  color: #fff !important;
  text-decoration: none !important;
}

.footer .current_page_item:not(.menu-btn) > .nav-link,
.footer .current_page_parent:not(.menu-btn) > .nav-link {
  color: rgba(217, 217, 217, 0.42) !important;
  text-decoration: none !important;
}

.footer .current_page_item:not(.menu-btn) > .nav-link:hover,
.footer .current_page_parent:not(.menu-btn) > .nav-link:hover {
  color: rgba(217, 217, 217, 1) !important;
}

/* Same fix, different selector: .footer .navbar-nav .nav-link.active is a
   separate rule (_sub-menu.scss) that also forces the purple active color,
   independent of the .current_page_item/.current_page_parent rules above. */
.footer .navbar-nav .nav-link.active {
  color: rgba(217, 217, 217, .42);
}

/* Feedback #11: "two-tone" text — headings/paragraphs sitewide with part
   of the sentence dimmed via a <mark> span (e.g. "Quality You Can Trust",
   opacity as low as 41-69% white) — failed readability against the dark
   background in most places. Client wants it removed entirely rather than
   tuned: one uniform, readable colour everywhere. These spans are
   inline-styled per block in each page/product's own content (not one
   shared class), so a global override here replaces editing dozens of
   individual content blocks across every page. `!important` on an author
   stylesheet rule still wins over a plain (non-important) inline style,
   which is what every one of these spans uses. `inherit` rather than a
   hardcoded colour so it always matches whatever the surrounding text
   colour already is, on any background. */
mark.has-inline-color {
  color: inherit !important;
}

/* Feedback #11 continued: a second, separate cause of the same "two-tone,
   hard to read" complaint. This one isn't <mark> spans — it's whole
   paragraphs/lines given the block editor's "Light text" colour swatch
   (theme.json palette slug "light-text", #ffffff91 — 57% opacity white),
   while sibling lines in the same card are left at full white. E.g. the
   Registered Address block: "Healand Research" and "United Kingdom" use
   this dim swatch while the address lines between them don't. Same fix as
   the <mark> rule above — neutralise it sitewide via `inherit` rather than
   hunting down every paragraph that picked this swatch across every page/
   product. Also lowering the swatch's own value in theme.json so picking
   "Light text" in the editor stops producing a dim result at the source,
   in case this override is ever removed later. */
.has-light-text-color {
  color: inherit !important;
}

/* Feedback #11, a third cause of the same complaint: paragraphs given a
   bare custom translucent white via the block editor's custom-colour
   picker (not the "Light text" palette swatch above), e.g.
   style="color:#ffffff69" or "#ffffff8f" — found across the homepage and
   several reusable blocks (Why Choose, Three dots, the "ADV" sections).
   These only carry the generic has-text-color/has-link-color marker
   classes, which also cover legitimate, fully-opaque custom colours
   elsewhere, so those classes aren't safe to override wholesale. Every
   instance found has color as the *only* declaration in its style
   attribute, so an attribute-starts-with selector reaches exactly these
   without risking a false match against something like a
   background-color:#ffffff... declaration on an unrelated element. */
p[style^="color:#ffffff"],
span[style^="color:#ffffff"],
h1[style^="color:#ffffff"],
h2[style^="color:#ffffff"],
h3[style^="color:#ffffff"],
h4[style^="color:#ffffff"],
h5[style^="color:#ffffff"],
h6[style^="color:#ffffff"] {
  color: inherit !important;
}

/* Feedback #17 follow-up: the "Our Standard at Healand Research" vials
   photo (real <img> now, see the homepage content) needs to span true
   edge-to-edge viewport width, but it's nested inside this ACF section's
   Bootstrap .container (parts/blocks/inner-container/inner-container.php),
   which has its own max-width. WordPress's default .alignfull technique
   didn't break out of that nesting correctly here, so this is an explicit
   full-bleed rule instead: pull the element to 100vw regardless of how
   deep it sits in the container/row/col-12 structure. `.page-holder`
   (the page's outermost wrapper) has overflow:hidden but no horizontal
   padding, so this doesn't get clipped by it. */
.wpi-full-bleed {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

.wp-block-image.alignfull img,
.wp-block-image.alignwide img {
  height: auto;
  width: 100%;
  margin-top: 30px;
}

/* Feedback #19: About page hero banner ("Healand Research: Built on
   quality...") cut off/too zoomed on mobile — same root cause as the
   homepage hero fixed earlier this round: a wide (1200x630) banner image
   with background-size:cover, forced to scale up hugely to cover a
   narrow/tall mobile hero box, cropping most of its width. Same fix:
   `contain` on mobile only so the full image stays visible (letterboxed
   into the section's own dark background) instead of being cropped in
   tight. Desktop/tablet untouched. */
@media (max-width: 767px) {
  .wp-hip-block-bg-image.wpi-about-hero-bg {
    background-size: contain !important;
  }
}

/* Feedback #20: on mobile, banner/hero images and product/gallery photos
   should have straight (square) edges instead of rounded corners — this
   theme rounds most picture-bearing elements at 45px/16px/20px via a mix
   of CSS classes and, in a few places (e.g. homepage figures), per-corner
   inline styles. `border-radius: 0` as a shorthand resets all four
   longhand corner properties, so it overrides inline per-corner styles too
   without needing to target each one. Desktop/tablet keep their rounded
   corners — this is scoped to mobile only. */
@media (max-width: 767px) {

  /* Hero/banner background images (About, Home, FAQ, category archives, etc.) */
  .wp-hip-block-bg-image,
  .wp-hip-block-bg-video,

  /* Testimonial card photo */
  .testimonial-card figure,

  /* Shop/category product cards */
  .woo-product-item .wpi-inner,
  .woo-product-item .wpi-image,

  /* Single product page gallery */
  #wpgs-gallery .wcgs-carousel,
  .psg-main-swiper .swiper-slide,
  .psg-thumb-swiper .swiper-slide,

  /* Cart page item thumbnail */
  .hci-thumb,

  /* "Frequently Bought Together" thumbnails */
  .woobt-thumb,
  .woobt-thumb .woobt-img,
  .woobt-thumb img,

  /* Category overview cards */
  .wp-hip-block-product-category-card .product-category-card,

  /* Content images with a per-corner inline border-radius style
     (e.g. homepage figures) */
  img[style*="border-radius"],
  img[style*="border-top-left-radius"],
  img[style*="border-top-right-radius"],
  img[style*="border-bottom-left-radius"],
  img[style*="border-bottom-right-radius"] {
    border-radius: 0 !important;
  }
}

/* Feedback #21: hero/banner heading text ("Research Peptides You Can
   Trust", "Frequently Asked Questions", etc.) reads too large on mobile.
   The theme's own H1 sizing (dist/scss/partials/_typography.scss) shares
   one "mobile" value (46px) across the whole tablet-to-phone range below
   1200px — no further reduction for narrow phones. Scoped to h1 only, so
   h2-h6 and desktop are untouched. */
@media (max-width: 780px) {
  h1 {
    font-size: 2rem !important;
  }
}

/* Page hero banner image/tint box (About, Home, FAQ, category archives,
   etc. — every page using the .page-hero pattern): the theme deliberately
   insets this box by 24px on each side on all screen sizes (a "floating
   card" look for desktop, dist/scss/partials/_theme.scss), but on mobile
   that reads as unwanted black margins down both sides instead. This
   background image already sits outside the Bootstrap .container (a
   direct sibling of the text content, not nested inside it), so no
   viewport-width trick is needed — just reset it to the full width of its
   own already-full-width parent. */
@media (max-width: 767px) {
  .page-hero > .wp-hip-block-content > .wp-hip-block-bg-image,
  .page-hero > .wp-hip-block-content > .wp-hip-block-bg-video {
    width: 100% !important;
    left: 0 !important;
  }
}