body.single-product {
  --ng-product-ink: #11161f;
  --ng-product-muted: #677081;
  --ng-product-panel: #ffffff;
  --ng-product-soft: #f4f6f9;
  --ng-product-line: rgba(17, 22, 31, 0.12);
  --ng-product-line-strong: rgba(17, 22, 31, 0.2);
  --ng-product-accent: var(--ng-accent, #ff5a00);
  --ng-product-hot: #ff476f;
  --ng-product-shadow: 0 20px 48px rgba(16, 26, 44, 0.12);
}

body.single-product #Content {
  background: #ffffff;
  padding-top: 0;
}

body.single-product .ng-race-product {
  color: var(--ng-product-ink);
}

body.single-product .ng-race-product__stage {
  position: relative;
  isolation: isolate;
  padding: clamp(28px, 4vw, 64px) clamp(16px, 4vw, 48px) clamp(26px, 4vw, 56px);
  overflow: hidden;
}

body.single-product .ng-race-product__stage::before,
body.single-product .ng-race-product__stage::after {
  display: none;
}

body.single-product .ng-race-product__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.72fr);
  gap: clamp(18px, 2.4vw, 32px) clamp(28px, 4vw, 58px);
  width: min(1440px, 100%);
  margin: 0 auto;
  /* `align-items: stretch` lets the summary column drive the gallery's
   * height with no JS — the gallery's stage has `flex: 1 1 0; min-height: 0`
   * so it never dictates row height, and the summary's natural content
   * defines the track. CSS does the sync at first paint → no flash. */
  align-items: stretch;
}

body.single-product .ng-race-product__media {
  grid-column: 1;
  grid-row: 1;
}

body.single-product .ng-race-product__summary {
  grid-column: 2;
  grid-row: 1;
}

body.single-product .ng-race-product__meta-bar {
  grid-column: 1;
  grid-row: 2;
}

body.single-product .ng-race-product__media,
body.single-product .ng-race-product__summary,
body.single-product .ng-race-product__meta-bar {
  min-width: 0;
}

/* Make the media grid item a flex column so the shell inside actually fills
 * the height that `align-items: stretch` gives the cell. Without this the
 * shell stays at its content height (just the thumb rail) and the stage
 * collapses to zero. */
body.single-product .ng-race-product__media {
  display: flex;
  flex-direction: column;
}

body.single-product .ng-race-product__media-shell {
  flex: 1 1 auto;
}

body.single-product .ng-race-product__media-shell {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  padding: clamp(14px, 2vw, 24px);
  border: 1px solid var(--ng-product-line);
  background: var(--ng-product-panel);
  box-shadow: var(--ng-product-shadow);
  overflow: hidden;
  /* Shell flexes vertically so the gallery inside can stretch to match the
   * summary column's height when the grid row uses align-items: stretch. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

body.single-product .ng-race-product__media-shell::before {
  display: none;
}

/* Hide WooCommerce's default sale flash — we paint our own discount chip. */
body.single-product .ng-race-product__media-shell .onsale {
  display: none !important;
}

body.single-product .ng-race-product__discount {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  min-width: 76px;
  padding: 0 10px;
  border: 1px solid #f6b3c4;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ng-price-sale, var(--ng-product-hot));
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

/*
 * Clean replacement gallery (see woocommerce/single-product/product-image.php).
 *
 * Layout: a 1:1 square stage with N absolutely-positioned slides stacked in
 * the same slot. The active slide is shown via a single class toggle — no
 * FlexSlider, no transforms, no readiness gymnastics. Thumbs sit to the left
 * of the stage on desktop and below it on mobile.
 */
/* `float` and `width: 48%` are forced by WC's woocommerce-layout.css default
 * two-column layout (`.woocommerce div.product div.images { float: left;
 * width: 48% }`) — we keep the `images` class on the gallery for plugin
 * compatibility, so the override has to use `!important` to win.
 *
 * The gallery flex-grows so the stage fills the shell's vertical space, which
 * (combined with the grid's `align-items: stretch`) makes the gallery match
 * the summary column's height. */
body.single-product .ng-race-product__media-shell .ng-gallery {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  float: none !important;
  width: 100% !important;
  max-width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* The summary column drives the row height. The stage stretches to whatever
 * height is left in the shell after the thumb rail — no aspect-ratio (which
 * would force it to be taller than the summary), no explicit min-height
 * larger than a single thumb's worth of space (which would also push the row
 * taller than the summary). `flex: 1 1 0` means basis 0 so the stage starts
 * at zero and only grows to fill cells the grid has already stretched for
 * the summary. The image inside letterboxes via `object-fit: contain`. */
body.single-product .ng-race-product__media-shell .ng-gallery__stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  flex: 1 1 0;
  min-height: 0;
  background: #ffffff;
  overflow: hidden;
}

/* On mobile (single-column layout) there's no summary next to the gallery
 * to drive the height — restore the 4:5 portrait ratio so the stage has a
 * reasonable natural height. */
@media (max-width: 1100px) {
  body.single-product .ng-race-product__media-shell .ng-gallery__stage {
    flex: 0 0 auto;
    aspect-ratio: 4 / 5;
  }
}

body.single-product .ng-race-product__media-shell .ng-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  display: block;
}

body.single-product .ng-race-product__media-shell .ng-gallery__slide:not(.is-active),
body.single-product .ng-race-product__media-shell .ng-gallery__slide[hidden] {
  display: none;
}

body.single-product .ng-race-product__media-shell .ng-gallery__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

/* `!important` is necessary because WC core's
 * `.woocommerce div.product div.images img` forces `height: auto` with
 * higher specificity, which leaves the img at its natural aspect ratio and
 * pushes it to the top-left of the (taller) stage instead of filling it. */
body.single-product .ng-race-product__media-shell .ng-gallery__image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* Thumbs sit below the stage as a horizontal scrollable rail (same on
 * desktop and mobile). Arrow buttons flank the rail and drive smooth
 * scroll — the JS hides each arrow when there's nothing more to scroll
 * in that direction (or no overflow at all). */
body.single-product .ng-race-product__media-shell .ng-gallery__thumbs {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  width: 100%;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb-list {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  /* Hide native scrollbar — the arrow buttons drive horizontal scroll. */
  scrollbar-width: none;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb-list::-webkit-scrollbar {
  display: none;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb-nav {
  appearance: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 72px;
  margin: 0 6px 0 0;
  padding: 0;
  border: 1px solid var(--ng-product-line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ng-product-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb-nav--next {
  margin: 0 0 0 6px;
}


body.single-product .ng-race-product__media-shell .ng-gallery__thumb-nav:hover:not(:disabled),
body.single-product .ng-race-product__media-shell .ng-gallery__thumb-nav:focus-visible:not(:disabled) {
  border-color: var(--ng-product-ink);
  outline: none;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb {
  appearance: none;
  flex: 0 0 72px;
  display: block;
  width: 72px;
  height: 72px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ng-product-line);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb:hover,
body.single-product .ng-race-product__media-shell .ng-gallery__thumb:focus-visible {
  border-color: var(--ng-product-ink);
  outline: none;
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb.is-active {
  border-color: var(--ng-product-ink);
  box-shadow: 0 0 0 1px var(--ng-product-ink);
}

body.single-product .ng-race-product__media-shell .ng-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 767px) {
  body.single-product .ng-race-product__media-shell .ng-gallery__thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
  }
  body.single-product .ng-race-product__media-shell .ng-gallery__thumb-nav {
    height: 64px;
  }
}

body.single-product .ng-race-product__meta-bar {
  padding: 14px 0;
  border-top: 1px solid var(--ng-product-line);
  border-bottom: 1px solid var(--ng-product-line);
}

body.single-product .ng-race-product__meta-bar .product_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  color: var(--ng-product-muted);
  font-size: 13px;
  line-height: 1.45;
}

body.single-product .ng-race-product__meta-bar .product_meta > span,
body.single-product .ng-race-product__meta-bar .product_meta .sku_wrapper {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: inherit;
  text-transform: none;
}

body.single-product .ng-race-product__meta-bar .product_meta a,
body.single-product .ng-race-product__meta-bar .product_meta .sku {
  color: var(--ng-product-ink);
  font-weight: 700;
}

body.single-product .ng-race-product__summary-inner {
  position: sticky;
  top: 106px;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--ng-product-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--ng-product-shadow);
}

@media (min-width: 1101px) {
  body.admin-bar.single-product .ng-race-product__summary-inner {
    top: 138px;
  }
}

body.single-product .ng-race-product__summary-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--ng-product-accent), var(--ng-product-hot), var(--ng-product-ink));
}

body.single-product .ng-race-product__eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

body.single-product .ng-race-product__eyebrow span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  background: var(--ng-product-ink);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: skewX(-10deg);
}

body.single-product .ng-race-product__summary .product_title {
  margin: 0 0 16px;
  color: var(--ng-product-ink);
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: 0.94;
  font-weight: 900;
  text-transform: uppercase;
}

body.single-product .ng-race-product__summary .woocommerce-product-rating {
  margin: 0 0 18px;
  color: #f4a23a;
  text-shadow: none;
}

body.single-product .ng-race-product__summary .woocommerce-product-rating .star-rating {
  color: #f4a23a;
  filter: none;
}

body.single-product .ng-race-product__summary .woocommerce-product-rating .star-rating::before {
  color: rgba(17, 22, 31, 0.18);
  text-shadow: none;
}

body.single-product .ng-race-product__summary .woocommerce-product-rating .star-rating span::before {
  color: #f4a23a;
  text-shadow: none;
}

body.single-product .ng-race-product__summary .woocommerce-product-rating .woocommerce-review-link {
  color: var(--ng-product-muted);
  text-decoration: none;
  box-shadow: none;
}

body.single-product .ng-race-product__summary .woocommerce-product-rating .woocommerce-review-link:hover,
body.single-product .ng-race-product__summary .woocommerce-product-rating .woocommerce-review-link:focus-visible {
  color: var(--ng-product-ink);
  text-decoration: underline;
  box-shadow: none;
}

/*
 * Stick to the body font's already-loaded weight so the price doesn't FOUT
 * (the italic 900 used to swap in late once the matching webfont arrived).
 */
body.single-product .ng-race-product__summary .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--ng-product-ink);
  font-family: inherit;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
}

body.single-product .ng-race-product__summary .price del {
  color: rgba(17, 22, 31, 0.46);
  font-size: 0.6em;
  font-weight: 600;
}

body.single-product .ng-race-product__summary .price ins {
  color: var(--ng-product-hot);
  text-decoration: none;
  font-weight: 700;
}

body.single-product .ng-race-product__summary .woocommerce-product-details__short-description {
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 3px solid var(--ng-product-accent);
  color: var(--ng-product-muted);
  font-size: 16px;
  line-height: 1.65;
}

body.single-product .ng-race-product__summary form.cart {
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr) 50px;
  gap: 12px;
  align-items: stretch;
  margin: 24px 0;
  padding: 14px 16px 16px;
  border: 1px solid var(--ng-product-line);
  background: var(--ng-product-soft);
}

/* WC injects the "no matching variations" message as
 *   <div role="alert"><p class="wc-no-matching-variations woocommerce-info">…</p></div>
 * inside the variation wrapper. With `.single_variation_wrap { display: contents }`,
 * the `<div role="alert">` becomes the grid child — that's the element we have to
 * span across all three columns, not the inner <p>. */
body.single-product .ng-race-product__summary form.cart [role="alert"] {
  grid-column: 1 / -1;
}

body.single-product .ng-race-product__summary form.cart .wc-no-matching-variations,
body.single-product .ng-race-product__summary form.cart .woocommerce-info {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ng-product-line);
  background: #ffffff;
  color: var(--ng-product-ink);
  font-size: 14px;
  line-height: 1.45;
}

body.single-product .ng-race-product__summary form.cart.grouped_form {
  display: flex;
  flex-wrap: wrap;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr .ng-mfn-vr-options li a {
  border-radius: 14px;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr__heading {
  align-items: center;
  justify-content: flex-start;
  gap: 8px 16px;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr__stock {
  display: inline-flex;
  align-items: center;
  flex-basis: 100%;
  max-width: 100%;
  min-height: 1.25em;
  margin-left: 0;
  color: var(--ng-product-muted);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  white-space: normal;
  overflow-wrap: anywhere;
  visibility: hidden;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr__stock.is-visible {
  visibility: visible;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr__stock.is-in-stock {
  color: #177245;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr__stock.is-out-of-stock {
  color: var(--ng-product-hot);
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr .ng-mfn-vr-options--images li a,
body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr .ng-mfn-vr-options--sizes li a {
  border-radius: 14px;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr .ng-mfn-vr-options--images {
  flex-wrap: wrap;
  max-width: 100%;
  gap: 10px;
  overflow: visible;
  padding-bottom: 0;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr .ng-mfn-vr-options--sizes {
  gap: 10px;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper .ng-mfn-vr .ng-mfn-vr-options--sizes li a {
  margin-left: 0;
}

body.single-product .ng-race-product__summary .single_variation_wrap {
  display: contents;
}

/* WC's variation JS calls `$singleVariation.slideDown(200)` on every
 * found_variation, which inline-styles `display: block` and animates the
 * element's height from 0 to its natural content height. We hide the
 * children (price / availability) via the rules below, but a non-empty
 * description still gave it real height — visible as a 200ms grow that
 * cascaded into the gallery via grid `align-items: stretch`. Forcing
 * `display: contents !important` makes the element boxless so the inline
 * `display: block` and `height` from jQuery's animation have nothing to
 * paint. */
body.single-product .ng-race-product__summary .single_variation {
  display: contents !important;
}

body.single-product .ng-race-product__summary .woocommerce-variation {
  display: none;
}

body.single-product .ng-race-product__summary .woocommerce-variation-price {
  display: none;
}

body.single-product .ng-race-product__summary .woocommerce-variation-add-to-cart {
  display: contents;
}

body.single-product .ng-race-product__summary .mfn-variations-wrapper {
  grid-column: 1 / -1;
  grid-row: 1;
  margin: 0;
}

body.single-product .ng-race-product__summary table.variations {
  display: none;
}

body.single-product .ng-race-product__summary .reset_variations_alert {
  grid-column: 1 / -1;
  grid-row: 1;
}

body.single-product .ng-race-product__summary .ng-race-product__size-swatches {
  display: flex;
}

body.single-product .ng-race-product__summary .ng-race-product__size-swatches .ng-mfn-vr-options--sizes {
  display: none;
}

/* The size dropdown already displays the selected value, so the legacy
 * "selected" span next to the label would just repeat it. Color groups still
 * need it because the swatches are images. */
body.single-product .ng-race-product__summary .ng-mfn-vr--size .ng-mfn-vr__selected {
  display: none;
}

body.single-product .ng-race-product__summary .ng-race-product__size-swatches select.ng-race-product__size-select {
  position: relative;
  z-index: 2;
  align-self: stretch;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0 44px 0 16px;
  border: 1px solid var(--ng-product-line-strong);
  border-radius: 0;
  background-color: #ffffff;
  color: var(--ng-product-ink);
  box-shadow: none;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  cursor: pointer;
}

body.single-product .ng-race-product__summary .ng-race-product__size-swatches select.ng-race-product__size-select:focus {
  border-color: rgba(17, 22, 31, 0.34);
  box-shadow: 0 0 0 4px rgba(23, 114, 69, 0.14);
}

body.single-product .mfn-variations-wrapper .mfn-reset-variations,
body.single-product .ng-race-product__summary .reset_variations {
  display: none !important;
}

body.single-product .ng-race-product__summary .woocommerce-variation-availability {
  display: none;
}

body.single-product .ng-race-product__summary .quantity {
  grid-column: 1;
  grid-row: 3;
  width: 122px;
  min-width: 122px;
  min-height: 50px;
  margin: 0 !important;
}

body.single-product .ng-race-product__summary .quantity input.qty {
  min-height: 50px;
  padding: 10px 36px !important;
  border: 1px solid var(--ng-product-line-strong);
  border-radius: 0;
  background: #ffffff;
  color: var(--ng-product-ink);
  box-shadow: none;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

body.single-product .ng-race-product__summary .quantity input.qty:focus {
  border-color: rgba(17, 22, 31, 0.22);
  box-shadow: 0 0 0 4px rgba(255, 79, 120, 0.12);
}

body.single-product .ng-race-product__summary .quantity a.quantity-change {
  top: 5px;
  width: 28px;
  height: calc(100% - 10px);
  color: var(--ng-product-ink);
  font-size: 17px;
}

body.single-product .ng-race-product__summary .quantity a.quantity-change:hover {
  background: rgba(17, 22, 31, 0.03);
}

body.single-product .ng-race-product__summary .quantity a.quantity-change.minus {
  left: 6px;
}

body.single-product .ng-race-product__summary .quantity a.quantity-change.plus {
  right: 6px;
}

body.single-product .ng-race-product__summary .quantity a.quantity-change i {
  pointer-events: none;
}

/* Drop WC's loading spinner on the single-product add-to-cart button — both
 * the `opacity: .25 + padding-right` dimming and the spinning ::after icon. */
body.single-product .ng-race-product__summary .single_add_to_cart_button.loading {
  opacity: 1;
  padding-right: 28px !important;
}

body.single-product .ng-race-product__summary .single_add_to_cart_button.loading::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.single-product .ng-race-product__summary .single_add_to_cart_button {
  grid-column: 1 / -1;
  grid-row: 2;
  flex: 0 0 100%;
  width: 100%;
  min-height: 54px;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #177245 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.single-product .ng-race-product__summary .single_add_to_cart_button::before,
body.single-product .ng-race-product__summary .single_add_to_cart_button::after,
body.single-product .ng-race-product__summary .single_add_to_cart_button:hover::before,
body.single-product .ng-race-product__summary .single_add_to_cart_button:hover::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  transform: none !important;
  transition: none !important;
}

body.single-product .ng-race-product__summary .single_add_to_cart_button:hover,
body.single-product .ng-race-product__summary .single_add_to_cart_button:focus,
body.single-product .ng-race-product__summary .single_add_to_cart_button:focus-visible {
  background: #105a35 !important;
  color: #ffffff !important;
  box-shadow: none;
  transform: translateY(-1px);
}

body.single-product .ng-race-product__summary .single_add_to_cart_button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -7px;
}

body.single-product .ng-race-product__summary .ng-race-product__size-swatches select.ng-race-product__size-select:focus-visible,
body.single-product .ng-race-product__summary .quantity input.qty:focus-visible,
body.single-product .ng-race-product__summary .cart .mfn-wish-button:focus-visible {
  outline: 2px solid var(--ng-product-ink);
  outline-offset: 2px;
}

body.single-product .ng-race-product__summary .quantity a.quantity-change:focus-visible {
  outline: 2px solid var(--ng-product-ink);
  outline-offset: -2px;
}

body.single-product .ng-race-product__summary .cart .mfn-wish-button {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  min-height: 50px;
  margin: 0;
  border: 1px solid var(--ng-product-line-strong);
  border-radius: 0;
  background: #ffffff;
  color: var(--ng-product-ink);
}

body.single-product .ng-race-product__summary form.cart:not(.variations_form):not(.grouped_form) .quantity,
body.single-product .ng-race-product__summary form.cart:not(.variations_form):not(.grouped_form) .mfn-wish-button {
  grid-row: 1;
}

body.single-product .ng-race-product__summary .cart .mfn-wish-button svg {
  width: 25px;
  height: 25px;
}

body.single-product .ng-race-product__summary .cart .mfn-wish-button .path {
  stroke: var(--ng-product-ink);
  stroke-width: 1.8px;
}

body.single-product .ng-race-product__summary .cart .mfn-wish-button:hover,
body.single-product .ng-race-product__summary .cart .mfn-wish-button:focus-visible {
  border-color: rgba(17, 22, 31, 0.34);
  box-shadow: 0 0 0 4px rgba(255, 79, 120, 0.12);
}

body.single-product .ng-race-product__details,
body.single-product .ng-race-product__recommendations {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
}

body.single-product .ng-race-product__details {
  padding: clamp(10px, 2vw, 24px) 0 clamp(28px, 5vw, 68px);
}

body.single-product .ng-race-product__sections {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.6vw, 20px);
}

body.single-product .ng-race-product__section {
  border: 1px solid var(--ng-product-line);
  background: #ffffff;
}

body.single-product .ng-race-product__section-header {
  margin: 0;
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 32px) 0;
  background: transparent;
  border-bottom: 0;
}

body.single-product .ng-race-product__section-title {
  position: relative;
  margin: 0;
  padding-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ng-product-ink);
}

body.single-product .ng-race-product__section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--ng-product-accent);
}

body.single-product .ng-race-product__section-title span {
  display: inline;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transform: none;
  min-height: 0;
}

body.single-product .ng-race-product__section-body {
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.8vw, 32px);
  color: var(--ng-product-ink);
  font-size: 15px;
  line-height: 1.65;
}

body.single-product .ng-race-product__section-body p {
  margin: 0 0 1em;
}

body.single-product .ng-race-product__section-body p:last-child,
body.single-product .ng-race-product__section-body > *:last-child {
  margin-bottom: 0;
}

body.single-product .ng-race-product__section-body table.shop_attributes {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0;
  font-size: 14px;
}

body.single-product .ng-race-product__section-body table.shop_attributes th,
body.single-product .ng-race-product__section-body table.shop_attributes td {
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--ng-product-line);
  background: transparent;
  text-align: left;
  vertical-align: top;
}

body.single-product .ng-race-product__section-body table.shop_attributes tr:last-child th,
body.single-product .ng-race-product__section-body table.shop_attributes tr:last-child td {
  border-bottom: 0;
}

body.single-product .ng-race-product__section-body table.shop_attributes th {
  width: 36%;
  color: var(--ng-product-muted);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  font-style: normal;
  padding-right: 16px;
}

body.single-product .ng-race-product__section-body table.shop_attributes td {
  color: var(--ng-product-ink);
  font-weight: 500;
}

body.single-product .ng-race-product__section-body table.shop_attributes td p {
  margin: 0;
}

/*
 * Reviews list — replace the stock WP comment styling with a clean card per
 * review: avatar tile on the left, author + date + stars stacked on the
 * right, review body underneath. Quiet borders, no marker bullets.
 */
body.single-product .ng-race-product__section--reviews #comments .woocommerce-Reviews-title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ng-product-muted);
}

body.single-product .ng-race-product__section--reviews #comments .woocommerce-Reviews-title span {
  color: var(--ng-product-ink);
}

body.single-product .ng-race-product__section--reviews #comments .woocommerce-noreviews {
  margin: 0;
  padding: 22px;
  border: 1px dashed var(--ng-product-line-strong);
  background: var(--ng-product-soft);
  color: var(--ng-product-muted);
  font-size: 14px;
  text-align: center;
}

body.single-product .ng-race-product__section--reviews ol.commentlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--ng-product-line);
  background: #ffffff;
  list-style: none;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment::before {
  display: none;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .comment_container {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-items: start;
  border: 0;
  padding: 0;
  background: transparent;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment img.avatar {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ng-product-soft);
  position: static;
  box-shadow: none;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .comment-text {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .star-rating {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0;
  color: #f4a23a;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .star-rating::before {
  color: rgba(17, 22, 31, 0.18);
  text-shadow: none;
}

/* BeTheme's generated `static.css` sets `.woocommerce .star-rating span { color: #0089F7 }`
 * (the theme primary) which the ::before pseudo would otherwise inherit — paint
 * the filled stars gold to match the rating colors elsewhere. */
body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .star-rating span {
  color: #f4a23a !important;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .star-rating span::before {
  color: #f4a23a !important;
  text-shadow: none;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment p.meta {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ng-product-muted);
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment p.meta strong.woocommerce-review__author {
  color: var(--ng-product-ink);
  font-weight: 700;
  font-style: normal;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment p.meta .woocommerce-review__dash {
  margin: 0 6px;
  opacity: 0.5;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment p.meta .woocommerce-review__published-date {
  font-style: normal;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .description {
  color: var(--ng-product-ink);
  font-size: 14px;
  line-height: 1.65;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .description p {
  margin: 0 0 0.6em;
}

body.single-product .ng-race-product__section--reviews ol.commentlist li.comment .description p:last-child {
  margin-bottom: 0;
}

body.single-product .ng-race-product__section--reviews .woocommerce-pagination {
  margin: 18px 0 0;
}

body.single-product .ng-race-product__section--reviews .woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}

body.single-product .ng-race-product__section--reviews .woocommerce-pagination ul li {
  margin: 0;
  border: 0;
  background: transparent;
}

body.single-product .ng-race-product__section--reviews .woocommerce-pagination ul li a,
body.single-product .ng-race-product__section--reviews .woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--ng-product-line);
  background: #ffffff;
  color: var(--ng-product-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

body.single-product .ng-race-product__section--reviews .woocommerce-pagination ul li span.current {
  border-color: var(--ng-product-ink);
  background: var(--ng-product-ink);
  color: #ffffff;
}

body.single-product .ng-race-product__section--reviews .woocommerce-pagination ul li a:hover {
  border-color: var(--ng-product-ink);
}

/* Reviews: existing comments on the left, review form panelled on the right. */
body.single-product .ng-race-product__section--reviews .ng-race-product__section-body #reviews {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: clamp(20px, 2.6vw, 36px);
  align-items: start;
}

body.single-product .ng-race-product__section--reviews .ng-race-product__section-body #comments {
  grid-column: 1;
  margin: 0;
}

body.single-product .ng-race-product__section--reviews .ng-race-product__section-body #review_form_wrapper {
  grid-column: 2;
  margin: 0;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--ng-product-line);
  background: var(--ng-product-soft);
  position: sticky;
  top: 120px;
}

body.admin-bar.single-product .ng-race-product__section--reviews .ng-race-product__section-body #review_form_wrapper {
  top: 152px;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-reply-title {
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ng-product-ink);
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form {
  margin: 0;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form > p {
  margin: 0 0 12px;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 14px;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ng-product-ink);
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating p.stars a {
  color: rgba(17, 22, 31, 0.25);
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating p.stars a::before {
  color: inherit;
  text-shadow: none;
}

/* On hover, light up the hovered star and all its preceding siblings.
 * CSS has no "previous sibling" combinator, so we go through the chain in
 * reverse: paint every star gold, then grey out anything AFTER the hovered
 * one. Same trick for the selected state — paint everything gold under
 * `.selected`, then knock out the trailing siblings after `.active`. */
body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating p.stars:hover a,
body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating p.stars.selected a {
  color: #f4a23a;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating p.stars:hover a:hover ~ a,
body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form-rating p.stars.selected a.active ~ a {
  color: rgba(17, 22, 31, 0.25);
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form input[type="text"],
body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form input[type="email"],
body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ng-product-line-strong);
  border-radius: 0;
  background: #ffffff;
  font-size: 14px;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .comment-form textarea {
  min-height: 110px;
  resize: vertical;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .form-submit {
  margin: 4px 0 0;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .form-submit input[type="submit"] {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 0;
  background: var(--ng-product-ink);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

body.single-product .ng-race-product__section--reviews #review_form_wrapper .form-submit input[type="submit"]:hover,
body.single-product .ng-race-product__section--reviews #review_form_wrapper .form-submit input[type="submit"]:focus-visible {
  background: var(--ng-product-accent);
}

@media (max-width: 800px) {
  body.single-product .ng-race-product__section--reviews .ng-race-product__section-body #reviews {
    grid-template-columns: 1fr;
  }

  body.single-product .ng-race-product__section--reviews .ng-race-product__section-body #review_form_wrapper {
    position: static;
    grid-column: 1;
  }
}

body.single-product .ng-race-product__recommendations {
  padding-bottom: clamp(40px, 6vw, 82px);
}

body.single-product .ng-race-product__recommendations .related,
body.single-product .ng-race-product__recommendations .upsells {
  margin-top: clamp(30px, 4vw, 56px);
}

body.single-product .ng-race-product__recommendations h2 {
  color: var(--ng-product-ink);
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  body.single-product .ng-race-product__grid {
    grid-template-columns: 1fr;
  }

  body.single-product .ng-race-product__media,
  body.single-product .ng-race-product__summary,
  body.single-product .ng-race-product__meta-bar {
    grid-column: 1;
    grid-row: auto;
  }

  body.single-product .ng-race-product__summary-inner {
    position: relative;
    top: auto;
  }
}

@media (max-width: 767px) {
  body.single-product .ng-race-product__stage {
    padding-left: 12px;
    padding-right: 12px;
  }

  body.single-product .ng-race-product__stage::before {
    display: none;
  }

  body.single-product .ng-race-product__media-shell,
  body.single-product .ng-race-product__summary-inner {
    padding: 16px;
  }

  body.single-product .ng-race-product__summary .product_title {
    font-size: clamp(30px, 10vw, 42px);
  }

  body.single-product .ng-race-product__summary .single_variation_wrap,
  body.single-product .ng-race-product__summary .woocommerce-variation-add-to-cart {
    display: contents;
  }

  body.single-product .ng-race-product__summary .single_add_to_cart_button {
    width: 100%;
    max-width: none;
  }

  body.single-product .ng-race-product__details,
  body.single-product .ng-race-product__recommendations {
    width: calc(100% - 24px);
  }

  body.single-product .ng-race-product__section-header {
    padding: 18px 18px 0;
  }

  body.single-product .ng-race-product__section-body {
    padding: 14px 18px 22px;
  }
}


/* Lightbox popup overlay — opens when the user clicks the main gallery image. */
body .ng-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 10, 14, 0.92);
  cursor: zoom-out;
}

body .ng-lightbox.is-open {
  display: flex;
}

body .ng-lightbox__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: default;
  user-select: none;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

body .ng-lightbox__close {
  position: absolute;
  top: clamp(12px, 1.6vw, 20px);
  right: clamp(12px, 1.6vw, 20px);
  appearance: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

body .ng-lightbox__close:hover,
body .ng-lightbox__close:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

body .ng-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

body .ng-lightbox__nav:hover:not(:disabled),
body .ng-lightbox__nav:focus-visible:not(:disabled) {
  background: rgba(255, 255, 255, 0.22);
  outline: none;
}

body .ng-lightbox__nav:disabled {
  opacity: 0.3;
  cursor: default;
}

body .ng-lightbox__nav--prev {
  left: clamp(12px, 2vw, 32px);
}

body .ng-lightbox__nav--next {
  right: clamp(12px, 2vw, 32px);
}

body.ng-lightbox-open {
  overflow: hidden;
}