/*! HYPE pdp.css — legacy-compat sheet for the LiverGuard PDP.
    Covers ONLY markup we do not control: the [hype_product_gallery] shortcode output,
    the [hype_reviews] widget + its modal shell, and the .lg-stk sticky buy bar.
    Copied from src/pdp/js/product-gallery.css + hype-reviews.css (the legacy sheets are
    NOT enqueued on the Lego page). !important is kept where the source had it.
    Layer hype-product is undeclared in components.css, so it sorts after every declared
    layer and these compat rules win over the component defaults. 2026-09-16 */
@layer hype-product {

/* ============================================================ [hype_product_gallery] */
/*! Product gallery — every number measured off production's rey-core PDP gallery.
 *
 *  desktop (630px column)   main 630x630, radius 26px, 20px gap,
 *                           thumbs 90x90, 20px gap, left-aligned in a 470px
 *                           track that is itself centred, no active marker
 *  mobile  (390px)          main 390x390, 12px gap,
 *                           thumbs 56x56 (54px image inside a 1px border),
 *                           8px gap, centred, active border #F7941D
 */

.hype-gallery {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* ---------------------------------------------------------------- main image */

.hype-gallery__main {
	position: relative;
	/* Square, so the column height never depends on which image is showing. */
	aspect-ratio: 1 / 1;
	border-radius: 26px;
	overflow: hidden;
}

.hype-gallery__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	cursor: zoom-in;
}

.hype-gallery__slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hype-gallery__slide img,.hype-gallery__thumb img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* -------------------------------------------------------------------- thumbs */

.hype-gallery__thumbs {
	display: flex;
	justify-content: center;
}

.hype-gallery__track {
	display: flex;
	gap: 20px;
	/* Production's swiper track: 470px wide, centred under the 630px image, with
	   the thumbs left-aligned inside it rather than centred. */
	width: 470px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.hype-gallery__track::-webkit-scrollbar {
	display: none;
}

.hype-gallery__thumb {
	flex: 0 0 auto;
	width: 90px;
	height: 90px;
	padding: 0;
	border: 0;
	/* Production computes 8.66667px — a third of the main image's 26px. */
	border-radius: calc(26px / 3);
	overflow: hidden;
	background: #f9fafb;
	cursor: pointer;
	appearance: none;
}



/* Production draws no active marker on desktop — the two states are identical. */

.hype-gallery__thumb:focus-visible {
	outline: 2px solid #f7941d;
	outline-offset: 2px;
}

/* -------------------------------------------------------------------- mobile */

@media (max-width: 767px) {
	.hype-gallery {
		gap: 12px;
	}

	.hype-gallery__track {
		width: auto;
		justify-content: center;
		gap: 8px;
	}

	/* Below 768 the thumbs carry a visible border, and the active one is orange —
	   the box stays 56px, so the image inside is 54px. */
	.hype-gallery__thumb {
		width: 56px;
		height: 56px;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-radius: 8px;
	}

	.hype-gallery__thumb.is-active {
		border-color: #f7941d;
	}
}

/* ------------------------------------------------------------------ lightbox */

.hype-gallery-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(11, 29, 46, 0.92);
	opacity: 0;
	transition: opacity 0.2s ease;
	cursor: zoom-out;
}

.hype-gallery-lightbox.is-open {
	opacity: 1;
}

.hype-gallery-lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 12px;
}

.hype-gallery-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

/* ------------------------------------------------------------ sticky column

   Production keeps the gallery in view while the buy column scrolls past it,
   using Elementor Pro's sticky motion effect — JS, so it did not survive the
   port and the gallery just scrolled away.

   Measured on prod at 1440: pinned at viewport y=160, and it stops when its
   column ends rather than following to the bottom of the page (column starts at
   doc y=150 and is 1387 tall against a 740 gallery, so it travels 647px and then
   parks). That is exactly what `position: sticky` inside the column does for
   free — the widget wrapper's parent IS the column, so no extra element.

   Keyed to the widget class, not the element id, so the Bulgarian product
   template gets it too. */
/* dropped: .lg-w-reycore-woo-pdp-gallery sticky — .pdp-hero__gallery owns it in Lego */

/* ==== gallery swipe + reachable thumbs (managed) ==== */
/* ============================================================
   Product gallery — swipe + reachable thumbs (2026-08-15)
   ------------------------------------------------------------
   Two functional gaps, both only visible once the gallery grew
   past a handful of images (the BG PDP now carries 10):

   1. The main image could not be swiped. Slides are stacked
      absolutely and crossfaded, so there was never anything for
      a finger to move — the only way to change image was to hit
      a 56px thumb. `touch-action: pan-y` below tells the browser
      we want the horizontal gesture (JS handles it) while
      vertical page scrolling stays native.

   2. The thumb track set `justify-content: center` on a flex row
      that also has `overflow-x: auto`. When such a row overflows,
      the spill goes out BOTH sides and the part that overflows
      past the start is unreachable — you cannot scroll back to
      it. 10 thumbs x 56px + 9 x 8px gap = 632px inside a ~358px
      rail, so roughly half the strip was unreachable.
      `width: fit-content` + `max-width: 100%` keeps the strip
      centred while it still fits, and lets it scroll normally
      once it does not. The parent `.hype-gallery__thumbs` is
      already `justify-content: center`, so it stays centred.
   ============================================================ */

/* --- main image: own the horizontal gesture, keep vertical native --- */
.hype-gallery__main {
  touch-action: pan-y;
}

/* A swipe must not fire the lightbox, and the image must not be
   drag-ghosted out of the page mid-gesture. */
.hype-gallery__slide img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* --- thumb track: centred when it fits, scrollable when it doesn't --- */
.hype-gallery__track {
  width: fit-content;
  max-width: 100%;
  justify-content: flex-start;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.hype-gallery__thumb {
  scroll-snap-align: center;
}

@media (max-width: 767px) {
  /* Overrides the original mobile rule, which centred an overflowing
     track and made the ends unreachable. */
  .hype-gallery__track {
    width: fit-content;
    max-width: 100%;
    justify-content: flex-start;
    /* A sliver of padding so the first and last thumb never sit flush
       against the rail edge mid-scroll. */
    padding-inline: 2px;
  }

  /* Active thumb needs to read clearly while the strip scrolls under it. */
  .hype-gallery__thumb.is-active {
    border-color: #f7941d;
    box-shadow: 0 0 0 1px #f7941d;
  }
}

/* --- swipe affordance: position counter ---------------------------
   With a crossfade there is no visual hint that more images exist, and
   the thumb strip is now scrollable rather than showing all of them at
   once. A small counter makes the set size explicit. */
.hype-gallery__count {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(11, 29, 46, 0.62);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

@media (prefers-reduced-motion: reduce) {
  .hype-gallery__track {
    scroll-behavior: auto;
  }
}

/* --- lightbox navigation (2026-08-15, second pass) -----------------
   The first pass had swipe code but no `touch-action`, so the browser
   claimed the gesture for panning and cancelled the pointer stream
   before pointerup fired — the swipe silently did nothing. And on a
   phone there is no keyboard, so arrow keys were not a real control.
   The overlay now owns the gesture and carries visible controls. */
.hype-gallery-lightbox {
  touch-action: none;
}

.hype-gallery-lightbox__img {
  transition: transform .18s ease;
  will-change: transform;
}
.hype-gallery-lightbox__img.is-dragging {
  transition: none;
}

.hype-gallery-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
  transition: background .18s ease, opacity .18s ease;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hype-gallery-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.hype-gallery-lightbox__nav.is-prev { left: 14px; }
.hype-gallery-lightbox__nav.is-next { right: 14px; }
.hype-gallery-lightbox__nav[disabled] { opacity: .22; cursor: default; }
.hype-gallery-lightbox__nav span { pointer-events: none; margin-top: -4px; }

.hype-gallery-lightbox__count {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 7px 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-family: var(--font-display, inherit);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

@media (max-width: 767px) {
  /* Thumb-reachable on a phone: sit the arrows low, beside the counter,
     rather than mid-screen where they cover the image. */
  .hype-gallery-lightbox__nav {
    top: auto;
    /* Clear of the fixed bottom nav bar, which sits under the overlay and
       would otherwise read as if the arrows belonged to it. */
    bottom: 88px;
    transform: none;
    width: 48px;
    height: 48px;
    font-size: 30px;
  }
  .hype-gallery-lightbox__nav.is-prev { left: 18px; }
  .hype-gallery-lightbox__nav.is-next { right: 18px; }
  .hype-gallery-lightbox__count { bottom: 100px; }
  .hype-gallery-lightbox__close { top: 12px; right: 12px; }
}

/* ==== end gallery swipe ==== */

/* <<< GALLERY NAV + THUMB WRAP -- 2026-08-16 >>> */
/* The track was a fixed 470px strip with a hidden scrollbar. With 8 images the
   last three sat outside it: invisible, no scroll affordance, and because they
   never entered the viewport their loading=lazy thumbnails stayed on the grey
   placeholder. Let the strip wrap instead so every thumb is on screen. */
.hype-gallery__track{width:auto;max-width:100%;flex-wrap:wrap;justify-content:center;row-gap:12px;overflow-x:visible}
@media (max-width:767px){.hype-gallery__track{row-gap:8px}}
/* Desktop prev/next. Mobile already has the swipe gesture, so they stay hidden
   there. Positioned inside .hype-gallery__main, which is position:relative. */
.hype-gallery__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 2px 10px rgba(11,29,46,.18);cursor:pointer;display:none;place-items:center;
  transition:background .15s ease,box-shadow .15s ease}
@media (min-width:768px){.hype-gallery__nav{display:grid}}
.hype-gallery__nav:hover{background:#fff;box-shadow:0 4px 14px rgba(11,29,46,.24)}
.hype-gallery__nav:focus-visible{outline:2px solid #f7941d;outline-offset:2px}
.hype-gallery__nav--prev{left:14px}
.hype-gallery__nav--next{right:14px}
.hype-gallery__nav span{display:block;width:11px;height:11px;border-top:2px solid #0B1D2E;border-right:2px solid #0B1D2E}
.hype-gallery__nav--prev span{transform:rotate(-135deg);margin-left:4px}
.hype-gallery__nav--next span{transform:rotate(45deg);margin-right:4px}

/* ============================================================ [hype_reviews] + review modal */
/* =============================================================================
   HYPE Reviews — scoped to .hype-reviews
   Design tokens: HYPE Design System v3.2.0
   ============================================================================= */

.hype-reviews {
	font-family: 'Inter', -apple-system, sans-serif;
	color: #4a4a5a;
	padding-top: clamp(48px, 5.6vw, 80px);
	padding-bottom: clamp(48px, 5.6vw, 80px);
}

/* ── Rating overview ───────────────────────────────────────────────────────── */

.hr-overview {
	display: flex;
	gap: clamp(24px, 4vw, 48px);
	align-items: flex-start;
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
	padding: clamp(20px, 2.5vw, 32px);
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.hr-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 100px;
}

.hr-score__num {
	font-family:Manrope,"Manrope Fallback", -apple-system, sans-serif;
	font-size: 54px;
	font-weight: 700;
	line-height: 1;
	background: linear-gradient(135deg, #0B1D2E, #2A8BB5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hr-score__stars {
	display: flex;
	gap: 3px;
}

.hr-score-star {
	font-size: 20px;
	line-height: 1;
}

.hr-score-star.hr-star--on,.hr-star.hr-star--on,.hr-star-btn[aria-pressed="true"]{ color: #A55C06; }
.hr-score-star.hr-star--off,.hr-star.hr-star--off{ color: rgba(0,0,0,.15); }

.hr-score__count {
	font-size: 13px;
	color: #6a6a7a;
	text-align: center;
}

/* Histogram */

.hr-histogram {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

.hr-histo-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	border-radius: 6px;
	padding: 4px 6px;
	margin: -4px -6px;
	border: none;
	background: transparent;
	width: calc(100% + 12px);
	transition: background .18s ease;
	text-align: left;
}

.hr-histo-row:hover {
	background: rgba(59,181,232,.07);
}

.hr-histo-row[aria-pressed="true"] {
	background: rgba(59,181,232,.12);
}

.hr-histo-row[aria-pressed="true"] .hr-histo-fill {
	background: linear-gradient(135deg, #F7941D, #F15A24);
}

.hr-histo-row[aria-pressed="true"] .hr-histo-label,
.hr-histo-row[aria-pressed="true"] .hr-histo-count {
	color: #16779B;
	font-weight: 700;
}

.hr-histo-label {
	width: 14px;
	text-align: right;
	font-weight: 500;
	color: #0B1D2E;
	flex-shrink: 0;
}

.hr-histo-star {
	font-size: 12px;
	color: #A55C06;
	flex-shrink: 0;
}

.hr-histo-track {
	flex: 1;
	height: 8px;
	background: rgba(0,0,0,.06);
	border-radius: 50px;
	overflow: hidden;
}

.hr-histo-fill {
	height: 100%;
	background: linear-gradient(135deg, #3BB5E8, #2A8BB5);
	border-radius: 50px;
	transition: width .5s ease;
}

.hr-histo-count {
	width: 28px;
	text-align: right;
	font-size: 12px;
	color: #6a6a7a;
	flex-shrink: 0;
}

/* ── Sort bar ──────────────────────────────────────────────────────────────── */

.hr-sort {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.hr-sort__label {
	font-size: 14px;
	font-weight: 600;
	color: #0B1D2E;
	white-space: nowrap;
}

.hr-sort__pills {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.hr-pill {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 16px;
	border-radius: 50px;
	border: 1.5px solid rgba(0,0,0,.12);
	background: transparent;
	font: 500 13px/1 'Inter', sans-serif;
	color: #4a4a5a;
	cursor: pointer;
	transition: border-color .2s, background .2s, color .2s;
}

.hr-pill:hover {
	border-color: #0B1D2E;
	color: #0B1D2E;
}

.hr-pill--active {
	background: #0B1D2E;
	border-color: #0B1D2E;
	color: #fff;
}

.hr-pill--active:hover {
	background: #122B42;
	border-color: #122B42;
}

/* ── Reviews grid ─────────────────────────────────────────────────────────── */

.hr-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(16px, 2vw, 24px);
	margin-bottom: 24px;
	transition: opacity .25s ease;
}

.hr-grid[data-loading="true"] {
	opacity: .5;
	pointer-events: none;
}

/* ── Review card ───────────────────────────────────────────────────────────── */

.hr-card {
	background: #fff;
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
	padding: clamp(20px, 2.5vw, 28px);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow .25s ease, transform .25s ease;
}

.hr-card:hover {
	box-shadow: 0 8px 32px rgba(0,0,0,.10);
	transform: translateY(-2px);
}

/* Card header: stars + date */

.hr-card__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.hr-card__stars {
	display: flex;
	gap: 2px;
}

.hr-star {
	font-size: 16px;
	line-height: 1;
}




.hr-card__date {
	font-size: 12px;
	color: #6a6a7a;
	white-space: nowrap;
	padding-top: 2px;
}

/* Card meta: avatar + name */

.hr-card__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hr-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, #3BB5E8, #2A8BB5);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 15px/1 'Inter', sans-serif;
	color: #fff;
	flex-shrink: 0;
}

.hr-reviewer {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hr-reviewer__name {
	font-size: 14px;
	font-weight: 700;
	color: #0B1D2E;
	line-height: 1.2;
}

.hr-verified {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #1a7a42;
	background: #e8f9ef;
	border-radius: 50px;
	padding: 2px 8px;
	width: fit-content;
	line-height: 1.5;
}

/* Card body */

.hr-card__title {
	font-size: 15px;
	font-weight: 700;
	color: #0B1D2E;
	line-height: 1.35;
}

.hr-card__text {
	font-size: 14px;
	color: #4a4a5a;
	line-height: 1.65;
}

.hr-card__text p { margin: 0 0 .5em; }
.hr-card__text p:last-child { margin-bottom: 0; }

/* ── Load more ──────────────────────────────────────────────────────────────── */

.hr-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.hr-more-wrap[hidden],.hr-form-err[hidden]{ display: none; }

.hr-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 32px;
	border-radius: 50px;
	border: 2px solid rgba(0,0,0,.15);
	background: transparent;
	font: 700 15px/1 'Inter', sans-serif;
	color: #0B1D2E;
	cursor: pointer;
	letter-spacing: .3px;
	transition: border-color .2s, background .2s, color .2s;
}

.hr-more-btn:hover {
	border-color: #0B1D2E;
	background: #0B1D2E;
	color: #fff;
}

.hr-more-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.hr-empty {
	color: #6a6a7a;
	font-size: 15px;
	padding: 32px 0;
	text-align: center;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.hr-grid,.hr-form-row{
		grid-template-columns: 1fr;
	}

	.hr-overview {
		flex-direction: column;
		gap: 20px;
	}

	.hr-score {
		flex-direction: row;
		align-items: center;
		gap: 16px;
		min-width: unset;
	}

	.hr-score__stars,
	.hr-score__count {
		align-self: center;
	}

	.hr-histogram {
		width: 100%;
		min-width: unset;
	}

	.hr-sort {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	

	.hr-form-submit {
		width: 100%;
		align-self: stretch;
	}
}

/* ── Review form ───────────────────────────────────────────────────────── */

.hr-form-section {
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid rgba(0,0,0,.08);
}

.hr-form-heading {
	font-family:Manrope,"Manrope Fallback", -apple-system, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #0B1D2E;
	margin-bottom: 20px;
	margin-top: 0;
}

.hr-form-authed {
	font-size: 13px;
	color: #6a6a7a;
	margin-bottom: 16px;
}
.hr-form-authed a { color: #16779B; text-decoration: none; }
.hr-form-authed a:hover { text-decoration: underline; }

.hr-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 640px;
}

.hr-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.hr-form-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hr-form-field label {
	font-size: 14px;
	font-weight: 600;
	color: #0B1D2E;
}

.hr-form-field input[type="text"],
.hr-form-field input[type="email"] {
	height: 48px;
	padding: 0 14px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 12px;
	font: 400 15px/1 'Inter', sans-serif;
	color: #1a1a2e;
	background: #fff;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
}

.hr-form-field textarea {
	padding: 12px 14px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 12px;
	font: 400 15px/1.6 'Inter', sans-serif;
	color: #1a1a2e;
	background: #fff;
	outline: none;
	resize: vertical;
	transition: border-color .2s, box-shadow .2s;
	width: 100%;
}

.hr-form-field input:focus,
.hr-form-field textarea:focus {
	border-color: #3BB5E8;
	box-shadow: 0 0 0 3px rgba(59,181,232,.15);
}

.hr-star-picker {
	display: flex;
	gap: 4px;
}

.hr-star-btn {
	font-size: 30px;
	line-height: 1;
	background: none;
	border: none;
	padding: 2px 1px;
	cursor: pointer;
	color: rgba(0,0,0,.18);
	transition: color .12s, transform .12s;
}

.hr-star-btn:hover,
.hr-star-btn.hr-star-preview {
	color: #A55C06;
	transform: scale(1.18);
}



.hr-req {
	color: #B7390C;
	margin-left: 2px;
}

.hr-form-err {
	font-size: 12px;
	color: #E03030;
}



.hr-form-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	align-self: flex-start !important;
	width: auto !important;
	max-width: none !important;
	height: 52px;
	padding: 0 36px !important;
	border-radius: 50px !important;
	border: none !important;
	background: linear-gradient(135deg, #F7941D, #F15A24) !important;
	font: 700 16px/1 Manrope, sans-serif !important;
	color: #fff !important;
	cursor: pointer;
	letter-spacing: .3px;
	transition: opacity .2s, transform .2s, box-shadow .2s;
	box-shadow: 0 4px 16px rgba(247,148,29,.35);
}

.hr-form-submit:hover {
	opacity: .92;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(247,148,29,.45);
}

.hr-form-submit:active {
	transform: translateY(0);
}

.hr-form-notice {
	font-size: 14px;
	color: #4a4a5a;
	background: #f9f3eb;
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 24px;
}
.hr-form-notice a { color: #16779B; }


/* ── Reviews modal (replaces Elementor Pro's off-canvas shell) ─────────── */

.lg-reviews-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(10px, 2vw, 32px);
}

.lg-reviews-modal.is-open { display: flex; }

.lg-reviews-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
}

.lg-reviews-modal__main {
	position: relative;
	width: min(1160px, 100%);
	max-height: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	box-shadow: 0 24px 80px rgba(0, 0, 0, .35);
}

.lg-reviews-modal__content {
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 clamp(16px, 3vw, 40px);
}

.lg-reviews-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #0B1D2E;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
	transition: background .2s;
}

.lg-reviews-modal__close:hover { background: #F15A24; }

body.lg-reviews-open { overflow: hidden; }
/* ---- gallery chrome the LIVE page gets from theme.css (component-fixes layer), de-scoped
   from its body.wp-child-theme-* / .single-product prefixes so the Lego page keeps the look. ---- */
.hype-gallery__main { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.hype-gallery__slide img { padding: 16px; background: #fff; object-fit: contain; }
.hype-gallery__thumbs { display: block; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding-bottom: 6px; }
.hype-gallery__thumbs::-webkit-scrollbar { display: none; }
.hype-gallery__track { flex-wrap: nowrap; gap: 8px; }
.hype-gallery { gap: 12px; }
.hype-gallery__thumb { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 6px; border: 2px solid transparent; }
/* prod runs 48px thumbs on phones */
@media (max-width: 767px) { .hype-gallery__thumb { flex: 0 0 48px; width: 48px; height: 48px; } .hype-gallery__track { padding: 0 2px; } }
.hype-gallery__thumb.is-active { border-color: var(--blue-text); }

/* ---- sticky mobile buy bar (product-bg.js toggles .is-visible / body.lg-stk-active).
   Kept from the template's inline <style>; the markup itself is not emitted on prod today. ---- */
.lg-stk { display: none; }
@media (max-width: 1023px) {
  .lg-stk.is-visible { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: #fff; border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -4px 24px rgba(0,0,0,.08); padding: 10px; gap: 8px; }
  .lg-stk a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 12px; border-radius: 50px; font: 700 14px 'Inter', sans-serif; text-decoration: none; letter-spacing: .3px; min-height: 48px; }
  .lg-stk-call { background: #fff; border: 2px solid #0B1D2E; color: #0B1D2E; }
  .lg-stk-call:active { background: #0B1D2E; color: #fff; }
  .lg-stk-buy { background: linear-gradient(135deg,#F7941D,#F15A24); color: #fff; border: 2px solid transparent; box-shadow: 0 4px 12px rgba(247,148,29,.3); }
  .lg-stk svg { width: 18px; height: 18px; flex-shrink: 0; }
  body.lg-stk-active { padding-bottom: 80px; }
}

}

/* ---- unlayered (must outrank unlayered third-party CSS) ---- */
.ugc-swiper { overflow: hidden; }

/* ============================================================ pdp2 legacy-compat
   Markup we do not author, on the three pdp2 pages:
     • WooCommerce add-to-cart-form / product-price blocks + [hype_sale_flash]  (mixer)
     • the [metabolic_reset_buy_form] order box (#mr-orderbox)                  (collagen + metabolic)
   Rules copied from src/pdp2/pair-mixer.css + collagen-solo.css + 17630.css,
   rescoped to the Lego wrappers. !important only where the source had it. 2026-09-17 */
@layer hype-product {

  /* ---- add-to-cart form: quantity + button on one row ---- */
  .woo-buy form.cart { display: flex; align-items: center; gap: 12px; margin: 0; }
  .woo-buy .quantity { flex: 0 0 auto; }
  .pdp2 .woo-buy .quantity input.qty {
    width: 64px; height: 56px; text-align: center;
    font-size: 16px; font-weight: 700; border: 1px solid var(--line);
  }
  .woo-buy .stock { display: none; }

  /* ---- price: WooCommerce renders block classes here, not the classic .price ---- */
  .woo-buy .price,
  .woo-buy__price { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
  .woo-buy .price del,
  .woo-buy .wc-block-components-product-price del,
  .woo-buy .wc-block-components-product-price__regular {
    color: var(--ink-3); font-size: 16px; text-decoration: line-through; opacity: 1;
  }
  .woo-buy .price ins,
  .woo-buy .wc-block-components-product-price ins { text-decoration: none; }
  .woo-buy .price ins .amount,
  .woo-buy .price > .amount,
  .woo-buy .wc-block-components-product-price ins,
  .woo-buy .wc-block-components-product-price__value {
    text-decoration: none; font-family: var(--font-display);
    font-size: 22px; font-weight: 800; color: #CF2929;
  }
  /* the site's own red percentage chip, same component the shop archive uses */
  .woo-buy .wc-block-components-product-sale-badge {
    background: #CF2929; color: #fff; border: 0; border-radius: 6px;
    padding: 4px 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  }
  /* the shared PDP pins .onsale over the gallery; in this layout it sits by the price */
  .woo-buy__price .onsale {
    inset: auto !important; bottom: auto !important; transform: none !important;
  }

  /* ---- gallery column: the shared PDP rules height-lock it to the LiverGuard gallery ---- */
  .gallery-col,
  .gallery-col .lg-wc,
  .gallery-col .lg-w-reycore-woo-pdp-gallery {
    height: auto; min-height: 0; max-height: none; overflow: visible;
  }

  /* ---- [metabolic_reset_buy_form] order box: it ships its own CSS, these are the
          same two corrections the source pages made ---- */
  .buy-split__form .mr-orderbox { width: 100%; max-width: none; margin: 0; }
  .buy-split__form #mr-orderbox .mr-cta button { width: 100%; }
  .buy-split__form #mr-orderbox .mr-cta .mr-add {
    background: #fff !important; background-image: none !important; color: var(--ink) !important;
    border: 1px solid var(--line-input) !important; border-radius: 6px !important;
    font: 700 15px/1.35 var(--font-display) !important; padding: 12px !important;
    min-height: 48px !important; box-shadow: none !important;
  }
  .buy-split__form #mr-orderbox .mr-cta .mr-add:hover {
    background: var(--tint) !important; border-color: var(--blue-text) !important; color: var(--ink) !important;
  }
}

/* ============================================================ MIXER gallery (round 4)
   Production's mixer gallery is a white rounded card with a 20px gap and a
   left-aligned thumb strip; the LiverGuard PDP keeps the cover-cropped 26px
   version above, so these are scoped to the mixer template only. */
@layer hype-product {
  .pdp2 .hype-gallery { gap: 20px; border-radius: 8px; background: #fff; }
  .pdp2 .hype-gallery__main { border-radius: 8px; background: #fff; }
  .pdp2 .hype-gallery__slide img { object-fit: contain; }
  .pdp2 .hype-gallery__thumbs { justify-content: flex-start; }
  .pdp2 .hype-gallery__track { width: fit-content; max-width: 100%; justify-content: flex-start; }
  @media (max-width: 767px) {
    .pdp2 .hype-gallery { gap: 12px; }
    .pdp2 .hype-gallery__thumbs { justify-content: center; }
  }
}

/* ------------------------------------------------------------ mixer: unlayered tail
   The Woo sale badge, the WooPayments express buttons and the quantity field are styled
   by unlayered sheets, which outrank every cascade layer. These few rules therefore sit
   outside a layer on purpose — still class-only, still no !important. */
.pdp2 .woo-buy .onsale,
.pdp2 .woo-buy__price .onsale {
  position: static; inset: auto; order: 3; margin: 0; padding: 4px 8px;
  border-radius: 4px; background: #17313D; color: #fff; text-align: center;
  font: 600 12px/1.3 var(--font-display, Manrope, Arial, sans-serif);
  letter-spacing: 0; text-transform: none; width: auto; height: auto; min-width: 0;
}
.pdp2 .woo-buy .wc-block-components-product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.pdp2 .woo-buy__price del { order: 1; font-size: 16px; color: #687786; text-decoration: line-through; }
.pdp2 .woo-buy__price ins { order: 2; text-decoration: none; }
.pdp2 .woo-buy .wcpay-express-checkout-wrapper,
.pdp2 .woo-buy .wc-block-components-express-payment,
.pdp2 .woo-buy .wc-stripe-product-checkout-container { display: none; }
.pdp2 .woo-buy .quantity input.qty {
  width: 76px; height: 56px; padding: 0 10px; border: 1px solid #BDD4DF;
  border-radius: 6px; font-size: 16px; text-align: center;
}

/* WooCommerce ships an UNLAYERED `.woocommerce img{height:auto}`, which outranks every
   cascade layer — so the collagen PDP's capped images need unlayered rules too. */
.bio--stacked .bio__memb img { height: 64px; width: auto; }
.pdp2 .quote__portrait img { height: 150px; }
@media (min-width: 900px) { .pdp2 .quote__portrait img { height: 190px; } }