/** Shopify CDN: Minification failed

Line 2557:2 Unexpected "="

**/
/* ==========================================================================
   narpine-pdp.css  -- PDP redesign to match mockup
   Scoped to body.pdp-v2 so the existing PDP template is untouched.
   Built 2026-07-24
   ========================================================================== */

body.pdp-v2 {
  --np-ink: #212121;
  --np-accent: #792525;
  --np-line: #e5e5e5;
  --np-panel: #fafafa;
  --np-muted: #6b655c;
  --np-body: #4a443c;
  --np-faint: #8a847a;
  --np-radius: 5px;
}

/* ---------- 1. BUY BOX SHELL ---------- */

body.pdp-v2 .product-block { margin: 0 0 18px; }
body.pdp-v2 .product-block:last-child { margin-bottom: 0; }

/* ---------- 2. TITLE + MATERIAL LINE ---------- */

body.pdp-v2 .product-title,
body.pdp-v2 h1.product-title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--np-ink);
  margin: 0 0 6px;
  line-height: 1.25;
}

/* ---------- 3. PRICE ---------- */

body.pdp-v2 .product-price,
body.pdp-v2 .price-area .price {
  font-size: 19px;
  font-weight: 600;
  color: var(--np-ink);
  letter-spacing: .01em;
}
body.pdp-v2 .price--compare,
body.pdp-v2 .compare-at {
  font-size: 14px;
  font-weight: 400;
  color: var(--np-faint);
  text-decoration: line-through;
  margin-left: 8px;
}

/* ---------- 4. DESCRIPTION ---------- */

body.pdp-v2 .product-block .rte,
body.pdp-v2 .product-description {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--np-body);
}

/* ---------- 5. FEATURE STRIP ---------- */

body.pdp-v2 .pdp_key_features { margin-bottom: 22px; }
body.pdp-v2 .pdp_key_features h2,
body.pdp-v2 .pdp_key_features .pdp_key_features_title { display: none; }

body.pdp-v2 .pdp_key_features_wrp,
body.pdp-v2 .pdp_key_features ul {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--np-panel);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.pdp-v2 .key_feature-item,
body.pdp-v2 .pdp_key_features li {
  flex: 1;
  padding: 13px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--np-ink);
  list-style: none;
  margin: 0;
}

body.pdp-v2 .key_feature-item + .key_feature-item,
body.pdp-v2 .pdp_key_features li + li {
  border-left: 1px solid var(--np-line);
}

body.pdp-v2 .key_feature-item::marker,
body.pdp-v2 .pdp_key_features li::marker { content: none; }

body.pdp-v2 .np-feat-icon {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

/* ---------- 5b. FEATURE STRIP FIXES (real markup) ---------- */

/* kill stray list markers / dashes inside cells */
body.pdp-v2 .pdp_key_features_wrp,
body.pdp-v2 .pdp_key_features_wrp * { list-style: none !important; }
body.pdp-v2 .pdp_key_features_wrp *::marker { content: "" !important; }
body.pdp-v2 .key_feature-item::before,
body.pdp-v2 .key_feature-item p::before { content: none !important; display: none !important; }
body.pdp-v2 .key_feature-item p { margin: 0; padding: 0; }
body.pdp-v2 .key_feature-item ul,
body.pdp-v2 .key_feature-item li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.pdp-v2 .key_feature-item {
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  min-height: 0;
}
body.pdp-v2 .np-feat-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--np-ink);
}

/* ==========================================================================
   OVERRIDES vs custom-jtpl.css
   That file uses 7-level chains like
     .index-product .form__wrapper .product__block .product__selectors
       .selector-wrapper--size .radio__buttons .radio__button label
   (0,7,1) and strips borders off size pills. We must outrank it, so these
   rules are intentionally long. body.pdp-v2 adds (0,1,1) on top.
   ========================================================================== */

/* ---- selectors container: stack, full width, tight ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors {
  display: block;
  width: 100%;
  margin-top: 0;
  row-gap: 0;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--fullwidth,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size {
  display: block;
  width: 100%;
  max-width: none;
  flex: none;
  margin: 0 0 18px;
  justify-content: flex-start;
}

/* ---- legend row: label left, size-guide right ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset {
  display: block;
  padding: 0;
  grid-template-columns: none;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__fieldset {
  display: block;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__fieldset legend.radio__legend.radio__legend--size {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px;
}

/* ---- SIZE PILLS ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button {
  display: inline-flex;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;   /* uniform: S/M/L no longer collapse into circles */
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--np-ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label:hover {
  border-color: var(--np-ink);
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input:checked ~ label {
  background: var(--np-ink);
  border-color: var(--np-ink);
  color: #fff;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input:disabled ~ label,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input.sold-out ~ label,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input.unavailable ~ label {
  color: var(--np-faint);
  background: var(--np-panel);
  border-color: var(--np-line);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---- SWATCHES ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset--swatches {
  --swatch-size: 30px;
  display: block;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset--swatches .radio__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button {
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-block;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input ~ label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  box-sizing: border-box;
  cursor: pointer;
  background: var(--swatch, var(--swatch-default));
  background-size: cover;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input:checked ~ label {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--np-ink);
}

/* ---- ATC: undo right-align + radius:0 from custom-jtpl ---- */
body.pdp-v2 .product__submit__buttons .product__submit__item button.btn {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 999px !important;
  font-size: 12.5px;
}

body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 14px 20px;
  background: var(--np-ink);
  border: 1px solid var(--np-ink);
  color: #fff;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn:hover {
  background: #000;
  border-color: #000;
}
body.pdp-v2 .product__submit__item button.btn .btn__text,
body.pdp-v2 .product__submit__item button.btn .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn .ct-product-price {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  margin: 0;
}
body.pdp-v2 .product__submit__item button.btn .ct-price-pdp {
  display: inline-flex; gap: 6px; align-items: center;
}

/* disabled -> white with grey text, NOT grey fill */
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn[disabled],
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn.np-disabled {
  background: #fff;
  border-color: var(--np-line);
  color: var(--np-muted);
  opacity: 1;
  cursor: not-allowed;
}
body.pdp-v2 .product__submit__item button.btn[disabled] .btn__text,
body.pdp-v2 .product__submit__item button.btn.np-disabled .btn__text { color: var(--np-muted); }
body.pdp-v2 .product__submit__item button.btn[disabled] .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn.np-disabled .ct-price-pdp { display: none; }

/* ---- kill the duplicate mobile ATC on desktop ---- */
@media screen and (min-width: 750px) {
  body.pdp-v2 .mobile_hero_button,
  body.pdp-v2 .hero__button.mobile_hero_button { display: none !important; }
  /* only the mobile *selector* blocks, never the variant galleries */
  body.pdp-v2 .selector-wrapper.pdp-mobile,
  body.pdp-v2 .mobile-hardcoded-sizes,
  body.pdp-v2 .mobile-inline-size-area { display: none !important; }
}

/* ---- bundle text ---- */
body.pdp-v2 .product__block--code p { margin: 0; }

/* ---- tighten vertical rhythm ---- */
body.pdp-v2 .product__block { margin-bottom: 0; }
body.pdp-v2 .product__block.block-padding { --block-padding-bottom: 14px; }

/* ==========================================================================
   13. TITLE / PRICE / BREADCRUMB  (mockup values, Open Sans per instruction)
   ========================================================================== */

/* breadcrumb */
body.pdp-v2 .np-breadcrumb {
  max-width: var(--np-max, 1280px);
  margin: 0 auto;
  padding: 16px 22px 4px;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--np-faint);
}
body.pdp-v2 .np-breadcrumb a { color: var(--np-faint); text-decoration: none; }
body.pdp-v2 .np-breadcrumb a:hover { color: var(--np-ink); }
body.pdp-v2 .np-breadcrumb__sep { margin: 0 8px; color: var(--np-faint); }
body.pdp-v2 .np-breadcrumb__current { color: var(--np-ink); }

/* title: mockup scale, theme font */
body.pdp-v2 .product__title,
body.pdp-v2 h1.product__title,
body.pdp-v2 .product__block--title h1,
body.pdp-v2 .product-title {
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--np-ink);
  margin: 0 0 10px;
}

/* price row */
body.pdp-v2 .product__block--price { margin-bottom: 20px; }
body.pdp-v2 .product__price,
body.pdp-v2 .product__price .price,
body.pdp-v2 [data-product-price] {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--np-ink);
}
body.pdp-v2 .product__price .price--compare,
body.pdp-v2 [data-compare-price] {
  font-size: 14px;
  font-weight: 400;
  color: var(--np-faint);
  text-decoration: line-through;
  margin-left: 8px;
}
body.pdp-v2 .np-tax-note {
  font-size: 12px;
  color: var(--np-faint);
  margin-left: 10px;
}

/* description */
body.pdp-v2 .product__block--description .rte,
body.pdp-v2 .product__description {
  font-size: 14px;
  line-height: 1.65;
  color: #544e46;
  max-width: 100%;
  margin: 0 0 22px;
}

/* ==========================================================================
   14. GALLERY  (thumbnails layout + ORGANIC COTTON badge)
   ========================================================================== */

body.pdp-v2 .product__images .product__slide,
body.pdp-v2 .product__photo { border-radius: 5px; overflow: hidden; }

body.pdp-v2 .product__thumbs .product__thumb__item img,
body.pdp-v2 .product-thumbs img {
  border-radius: 4px;
  border: 1px solid transparent;
}
body.pdp-v2 .product__thumbs .is-active img,
body.pdp-v2 .product-thumbs .is-active img { border-color: var(--np-ink); }

/* badge over the main image */
body.pdp-v2 .product__images { position: relative; }
body.pdp-v2 .np-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(246,244,239,.92);
  color: var(--np-ink);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 100px;
  pointer-events: none;
}

/* ==========================================================================
   15. GALLERY GRID FIX
   Theme's .product__wrapper--small .product__page is 37.5%/50% tuned for the
   stacked layout; with --thumbnails the gallery column overflows. Rebalance.
   ========================================================================== */

@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 22px;
  }

  /* undo the -50px nudge meant for the no-thumbs layout */
  body.pdp-v2 product-images.product__images.pdp-desk { transform: none !important; }
}

/* breadcrumb now lives inside wrapper__inner */
body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px 10px;
}

/* main image */
body.pdp-v2 .product__images .product__slide { padding-bottom: 0; }
body.pdp-v2 .product__images .product__photo {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #efece5;
}

/* thumb strip below main image */
body.pdp-v2 product-thumbs.product__thumbs {
  display: block;
  margin-top: 12px;
  width: 100%;
}
body.pdp-v2 .product__thumbs__holder {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  overflow: visible;
}
body.pdp-v2 .product__thumb {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: 68px;
}
body.pdp-v2 .product__thumb img,
body.pdp-v2 .product__thumb .image-wrapper {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
}
body.pdp-v2 .product__thumb.is-active img,
body.pdp-v2 .product__thumb[aria-current="true"] img,
body.pdp-v2 .product__thumb.is-active .image-wrapper { border-color: var(--np-ink); }

/* badge sits on the photo */
body.pdp-v2 .product__photo .np-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}

/* ==========================================================================
   16. HEADER CLEARANCE + ct-new-pdp OVERRIDES
   ct-custom.css sets .template-product header to position:absolute, so the
   section must pad past it. It also styles h1/.btn under .ct-new-pdp (0,2,0)
   which we override here.
   ========================================================================== */

body.pdp-v2 .ct-new-pdp h1.product__title {
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0 0 10px;
}

body.pdp-v2 .ct-new-pdp .np-under-title { margin-bottom: 18px; }

body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn {
  margin-top: 0;
  border: 1px solid var(--np-ink) !important;
  font-weight: 600;
  font-size: 12.5px;
}
body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn[disabled],
body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn.np-disabled {
  border-color: var(--np-line) !important;
}
body.pdp-v2 .ct-new-pdp .product__submit .btn.btn--secondary span,
body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn { color: #fff; }
body.pdp-v2 .index-product.ct-new-pdp .product__submit__item button.btn[disabled] span,
body.pdp-v2 .index-product.ct-new-pdp .product__submit__item button.btn.np-disabled span { color: var(--np-muted); }

body.pdp-v2 .ct-new-pdp .ct-product-price { color: #fff; }
body.pdp-v2 .ct-new-pdp .product__block.product__description { margin-top: 0; margin-bottom: 22px; }

/* ==========================================================================
   17. THUMBS: only the active variant's gallery
   Theme renders one <product-images> per colour; show the selected one only.
   ========================================================================== */

@media screen and (min-width: 750px) {
  body.pdp-v2 product-images.pdp-desk.main-all-images { display: none !important; }
}

body.pdp-v2 .product__thumbs__holder { max-height: none; }

/* header is position:absolute on .template-product; ensure full clearance */
@media screen and (min-width: 750px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 40px; }
}

/* ==========================================================================
   18. FIXES: breadcrumb clearance, ATC price, image ratio
   ========================================================================== */

/* breadcrumb must clear the absolutely-positioned header */
body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
  padding-top: 0;
  padding-bottom: 14px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 750px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 96px; }
}
@media screen and (max-width: 749px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 72px; }
}

/* ATC: show the price when enabled (only hide while disabled) */
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn .ct-price-pdp {
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
}
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn[disabled] .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn.np-disabled .ct-price-pdp {
  display: none !important;
}
body.pdp-v2 .ct-new-pdp .custom-quick-view-btn .ct-product-price { color: #fff !important; }

/* main image: mockup ratio, contained */
body.pdp-v2 .pdp-desk .product__slide .product__photo,
body.pdp-v2 .pdp-desk .product__photo .image-wrapper {
  aspect-ratio: 525 / 765;
}
body.pdp-v2 .pdp-desk .product__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* thumbs row */
body.pdp-v2 .product__thumbs__holder { gap: 9px; }
body.pdp-v2 .product__thumb { width: 68px; }

/* ==========================================================================
   19. ROUND FIXES: single gallery, thumb slider, labels back, dupe ATC,
       swatch underline, title metrics
   ========================================================================== */

/* ---- one gallery for all images; colour click moves the active slide
       instead of swapping whole galleries (kills the "reload" feel) ---- */
@media screen and (min-width: 750px) {
  body.pdp-v2 product-images.pdp-desk.selected-variant-img:not(.main-all-images) { display: none !important; }
  body.pdp-v2 product-images.pdp-desk.main-all-images { display: block !important; }
}

/* ---- thumbs: single-row horizontal slider ---- */
body.pdp-v2 .product__thumbs__holder {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--np-line) transparent;
}
body.pdp-v2 .product__thumbs__holder::-webkit-scrollbar { height: 5px; }
body.pdp-v2 .product__thumbs__holder::-webkit-scrollbar-thumb { background: var(--np-line); border-radius: 3px; }
body.pdp-v2 .product__thumb { flex: 0 0 68px; width: 68px; }

/* ---- duplicate ATC from the variant snippet ---- */
@media screen and (min-width: 750px) {
  body.pdp-v2 .np-dupe-atc { display: none !important; }
}

/* ---- COLOUR / SIZE labels (regression: rules were dropped in an earlier
       rewrite; theme hides them via .variant__labels--hide) ---- */
body.pdp-v2 .pdp-desk .radio__legend,
body.pdp-v2 .variant__labels--hide .radio__legend,
body.pdp-v2 .variant__labels--hide .radio__legend--size {
  display: flex !important;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px;
  padding: 0;
}
body.pdp-v2 .variant__labels--hide .radio__legend__option-name,
body.pdp-v2 .variant__labels--hide .select__label {
  position: static !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.pdp-v2 .radio__legend__label { display: inline-flex; }
body.pdp-v2 .radio__legend__option-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--np-muted);
}
body.pdp-v2 .radio__legend__value {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--np-ink);
}
body.pdp-v2 .radio__legend__link,
body.pdp-v2 .size_chart_link {
  font-size: 12px;
  color: var(--np-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- kill the underline bar under the selected swatch ---- */
body.pdp-v2 .radio__fieldset--swatches .swatch__button::after,
body.pdp-v2 .radio__fieldset--swatches .swatch__button::before,
body.pdp-v2 .radio__fieldset--swatches .swatch__button label::after,
body.pdp-v2 .radio__fieldset--swatches .swatch__button label::before,
body.pdp-v2 .radio__fieldset--swatches radio-swatch::after,
body.pdp-v2 .radio__fieldset--swatches radio-swatch::before {
  content: none !important;
  display: none !important;
}

/* ---- title: mockup metrics, Open Sans family per instruction ---- */
body.pdp-v2 .ct-new-pdp h1.product__title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
}

/* ==========================================================================
   20. ROUND FIXES: fieldset layout, gallery width, qty stepper,
       bundle + trust (mockup), disabled button, thumb active state
   ========================================================================== */

/* ---- fieldset: force block flow; swatch row horizontal, hard ---- */
body.pdp-v2 .pdp-desk fieldset,
body.pdp-v2 .pdp-desk .radio__fieldset,
body.pdp-v2 .pdp-desk .radio__fieldset--swatches {
  display: block !important;
  grid-template-columns: none !important;
  width: 100%;
  max-width: none;
  padding: 0;
}
body.pdp-v2 .pdp-desk .radio__legend {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px !important;
  padding: 0;
  position: static !important;
}
body.pdp-v2 .pdp-desk .radio__fieldset--swatches .radio__buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* ---- gallery: fill its column, align with header content ---- */
@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    max-width: none;
    padding: 0 var(--outer, 32px);
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    max-width: none;
    padding-left: var(--outer, 32px);
    padding-right: var(--outer, 32px);
  }
}
body.pdp-v2 product-images.pdp-desk.main-all-images {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  position: relative;
  display: block;
}
body.pdp-v2 .main-all-images .product__slides,
body.pdp-v2 .main-all-images .product__slide {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* badge pinned to the gallery, not a slide */
body.pdp-v2 product-images.main-all-images > .np-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}

/* thumb active state (JS keeps it in sync) */
body.pdp-v2 .product__thumb img { border: 1px solid transparent; border-radius: 4px; }
body.pdp-v2 .product__thumb.is-active img,
body.pdp-v2 .product__thumb[aria-current="true"] img { border-color: var(--np-ink); }

/* ---- qty stepper (JS-injected) + row with ATC ---- */
body.pdp-v2 .product__block--buttons .product__submit__item {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
body.pdp-v2 .np-qty {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  height: 52px;
  overflow: hidden;
}
body.pdp-v2 .np-qty button {
  width: 38px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  color: var(--np-ink);
  cursor: pointer;
}
body.pdp-v2 .np-qty input {
  width: 34px;
  height: 100%;
  border: 0;
  text-align: center;
  font-size: 14px;
  background: transparent;
  -moz-appearance: textfield;
  padding: 0;
}
body.pdp-v2 .np-qty input::-webkit-outer-spin-button,
body.pdp-v2 .np-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- disabled ATC: mockup tan ---- */
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn[disabled],
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn.np-disabled {
  background: #d9ccb8 !important;
  border-color: #d9ccb8 !important;
  color: #6d6558 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
body.pdp-v2 .product__submit__item button.btn[disabled] .btn__text,
body.pdp-v2 .product__submit__item button.btn.np-disabled .btn__text { color: #6d6558 !important; }

/* ---- bundle banner (mockup) ---- */
body.pdp-v2 .np-bundle {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f5eeeb;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--np-ink);
}
body.pdp-v2 .np-bundle__pill {
  flex: 0 0 auto;
  background: var(--np-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 100px;
}

/* ---- trust row + secure line (mockup) ---- */
body.pdp-v2 .np-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--np-line);
  border-bottom: 1px solid var(--np-line);
  padding: 12px 0;
  margin-top: 16px;
}
body.pdp-v2 .np-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--np-body);
}
body.pdp-v2 .np-trust svg,
body.pdp-v2 .np-secure svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--np-accent); }
body.pdp-v2 .np-secure {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid var(--np-line);
  font-size: 12.5px;
  color: var(--np-muted);
}
body.pdp-v2 .np-secure svg { color: var(--np-muted); }

/* ==========================================================================
   21. ROUND FIXES: column sizing/indent, control heights, size guide,
       accordion title, spacing pass
   ========================================================================== */

/* ---- gallery starts at the nav-item line, capped so the image column
       ends near where the buy box ends (mockup proportions) ---- */
@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    padding-left: clamp(48px, 6vw, 118px);
    padding-right: clamp(32px, 4vw, 72px);
    max-width: none;
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    max-width: none;
    padding-left: clamp(48px, 6vw, 118px);
    padding-right: clamp(32px, 4vw, 72px);
  }
}

/* ---- qty and ATC: identical 52px height ---- */
body.pdp-v2 .np-qty { height: 52px; }
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn {
  height: 52px !important;
  min-height: 0 !important;
  padding: 0 20px !important;
}

/* ---- size guide: icon + label, top-right of the SIZE row ---- */
body.pdp-v2 .pdp-desk .selector-wrapper--size { position: relative; }
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--np-accent);
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link::after { content: "Size guide"; }
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link img.ruler-image,
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link img {
  width: 16px !important;
  max-width: 16px !important;
  margin: 0 !important;
  display: block;
}

/* ---- accordion titles: mockup weight, sentence case ---- */
body.pdp-v2 .ct-new-pdp .product-accordion .accordion__title,
body.pdp-v2 .product__block .accordion__title,
body.pdp-v2 .accordion__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--np-ink);
  padding: 14px 0;
}

/* ---- spacing pass ---- */
body.pdp-v2 .ct-new-pdp h1.product__title { margin-bottom: 6px; }
body.pdp-v2 .ct-new-pdp .np-under-title { margin-bottom: 14px; }
body.pdp-v2 .product__block--price { margin-bottom: 16px; }
body.pdp-v2 .product__block--description .rte,
body.pdp-v2 .product__description { margin-bottom: 18px; }
body.pdp-v2 .pdp_key_features { margin-bottom: 18px; }
body.pdp-v2 .selector-wrapper.pdp-desk { margin: 0 0 16px !important; }
body.pdp-v2 .np-bundle { margin: 2px 0 0; }
body.pdp-v2 .np-trust { margin-top: 14px; margin-bottom: 0; }
body.pdp-v2 .product__block.block-padding { --block-padding-bottom: 14px; }

/* ==========================================================================
   22. RETARGETED FIXES (real markup this time)
   ========================================================================== */

/* ---- size guide: trigger lives inside the SIZE legend after the JS move ---- */
body.pdp-v2 .radio__legend product-modal.test-order {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
body.pdp-v2 .radio__legend .block__icon__container {
  margin: 0;
  padding: 0;
}
body.pdp-v2 .radio__legend .radio__legend__link.ruler-custom-cls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--np-accent);
  cursor: pointer;
  text-decoration: none;
}
body.pdp-v2 .radio__legend .radio__legend__link.ruler-custom-cls::after { content: "Size guide"; }
body.pdp-v2 .radio__legend .ruler-icon-cls {
  width: 16px !important;
  height: auto !important;
  display: block;
}

/* ---- Details & Care: real classes are .accordian_Images_block .queans h2.faq-box ---- */
body.pdp-v2 h2.faq-box {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--np-ink);
  margin: 0 !important;
  padding: 14px 0 !important;
}
body.pdp-v2 .accordian_Images_block .queans {
  border-bottom: 1px solid var(--np-line);
}
body.pdp-v2 .accordian_Images_block:first-of-type .queans {
  border-top: 0; /* trust row above already draws the line */
}

/* ---- balance: image column ends near the buy box bottom ---- */
@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  }
}

/* ---- breathing room around the qty/ATC row ---- */
body.pdp-v2 .product__block--buttons { margin-top: 6px; }
body.pdp-v2 .selector-wrapper--size.pdp-desk { margin-bottom: 18px !important; }

/* ==========================================================================
   23. SPACE USAGE, LEGEND INTEGRITY, SPACING SCALE
   ========================================================================== */

/* ---- text column fills its space: kill Broadcast's form width cap ---- */
body.pdp-v2 .product__content .form__width,
body.pdp-v2 .ct-new-pdp .product__content .form__width {
  max-width: 100% !important;
  width: 100% !important;
}

@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 84px);
    padding-right: clamp(48px, 6vw, 118px);
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    padding-right: clamp(48px, 6vw, 118px);
  }
}

/* ---- legends: labels never shrink or wrap; value pinned right ---- */
body.pdp-v2 .pdp-desk .radio__legend {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}
body.pdp-v2 .radio__legend__label,
body.pdp-v2 .radio__legend__option-name {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
body.pdp-v2 .radio__legend__value {
  flex: 0 1 auto;
  margin-left: auto !important;
  padding-left: 12px;
  white-space: nowrap;
  text-align: right;
}
body.pdp-v2 .radio__legend product-modal.test-order {
  flex: 0 0 auto;
  margin-left: 14px;
}
body.pdp-v2 .radio__legend .radio__legend__link.ruler-custom-cls,
body.pdp-v2 .radio__legend .ruler-custom-cls::after {
  white-space: nowrap;
}

/* ---- spacing scale: 22-24px between major groups ---- */
body.pdp-v2 .pdp_key_features { margin-bottom: 22px; }
body.pdp-v2 .product__block--description .rte,
body.pdp-v2 .product__description { margin-bottom: 20px; }
body.pdp-v2 .selector-wrapper.pdp-desk { margin: 0 0 22px !important; }
body.pdp-v2 .selector-wrapper--size.pdp-desk { margin-bottom: 24px !important; }
body.pdp-v2 .pdp-desk .radio__legend { margin-bottom: 10px !important; }
body.pdp-v2 .np-bundle { margin: 4px 0 0; }
body.pdp-v2 .product__block--buttons { margin-top: 14px; }
body.pdp-v2 .np-trust { margin-top: 18px; }

/* ==========================================================================
   24. COMPOSITION: image starts past the Impact nav text; buy box capped
       and anchored to a matching right edge; columns pushed apart.
   ========================================================================== */

@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, min(560px, 46%)) minmax(0, min(760px, 50%));
    justify-content: space-between;
    column-gap: clamp(40px, 4vw, 72px);
    padding-left: clamp(64px, 11.5vw, 224px);
    padding-right: clamp(64px, 11.5vw, 224px);
    max-width: 1800px;
    margin: 0 auto;
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    max-width: 1800px;
    margin: 0 auto;
    padding-left: clamp(64px, 11.5vw, 224px);
    padding-right: clamp(64px, 11.5vw, 224px);
  }
}

/* ==========================================================================
   25. SIZE-GUIDE POPUP LAYERING
   The panel/overlay carry low z-index; the sticky ATC dock (z20) and
   size-guide trigger (z2) floated above them. Lift the popup layers above
   all page content so everything greys out uniformly.
   ========================================================================== */

body.pdp-v2 .custom-popup-overlay {
  z-index: 300 !important;
}
body.pdp-v2 .main_popup-size-guide.product-modal,
body.pdp-v2 .main_popup-size-guide {
  z-index: 310 !important;
}
body.pdp-v2 product-modal dialog,
body.pdp-v2 dialog.product-modal {
  z-index: 310;
}

/* ==========================================================================
   26. DETAILS SECTION TITLE + FLOATING ATC BAR
   ========================================================================== */

body.pdp-v2 .pdp-grid_heading {
  text-align: center;
  margin: 0 0 34px;
}
body.pdp-v2 .pdp-grid_heading::before {
  content: "CLOSE UP";
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--np-faint);
  margin-bottom: 12px;
}
body.pdp-v2 .pdp-grid_heading h2 {
  font-family: inherit;
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 300;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--np-ink);
  margin: 0;
}

/* ---- floating bar ---- */
body.pdp-v2 .np-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--np-line);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
}
body.pdp-v2 .np-sticky-bar[hidden] { display: none; }
body.pdp-v2 .np-sticky-bar__in {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 10px clamp(24px, 4vw, 64px);
}
body.pdp-v2 .np-sticky-bar__thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 5px;
  background: #efece5;
  flex: 0 0 auto;
}
body.pdp-v2 .np-sticky-bar__info { min-width: 0; margin-right: auto; }
body.pdp-v2 .np-sticky-bar__title {
  font-size: 14px; font-weight: 600; color: var(--np-ink); line-height: 1.25;
}
body.pdp-v2 .np-sticky-bar__sub { font-size: 12px; color: var(--np-muted); }
body.pdp-v2 .np-sticky-bar__price {
  font-size: 15px; font-weight: 600; color: var(--np-ink); white-space: nowrap;
}
body.pdp-v2 .np-sticky-bar__btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--np-ink);
  border: 1px solid var(--np-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
body.pdp-v2 .np-sticky-bar__btn:hover { background: #000; }
body.pdp-v2 .np-sticky-bar__btn.np-disabled {
  background: #d9ccb8;
  border-color: #d9ccb8;
  color: #6d6558;
}
@media screen and (max-width: 749px) {
  body.pdp-v2 .np-sticky-bar__in { padding: 8px 14px; gap: 10px; }
  body.pdp-v2 .np-sticky-bar__price { display: none; }
}

/* ==========================================================================
   27. CROSS-SELL SECTION (mockup: title left, link right, gapped cards
       with title/price row)
   ========================================================================== */

body.pdp-v2 .custom-related-pro-sct .related__products {
  max-width: 1800px;
  margin: 0 auto;
  padding-left: clamp(64px, 11.5vw, 224px);
  padding-right: clamp(64px, 11.5vw, 224px);
}

/* heading row */
body.pdp-v2 .custom-related-pro-sct .tabs__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 26px;
}
body.pdp-v2 .custom-related-pro-sct .tabs { justify-content: flex-start !important; }
body.pdp-v2 .custom-related-pro-sct .tab-link,
body.pdp-v2 .custom-related-pro-sct h2.tab-link {
  font-size: clamp(20px, 3vw, 34px) !important;
  font-weight: 300 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--np-ink) !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.pdp-v2 .custom-related-pro-sct .tabs__arrow { display: none !important; }

/* discover -> plain top-right link */
body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover { margin: 0; flex: 0 0 auto; }
body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover .btn {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--np-ink) !important;
}
body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover .btn:hover { color: var(--np-accent) !important; }

/* cards */
body.pdp-v2 .custom-related-pro-sct .tab-content .grid-outer {
  grid-gap: 18px !important;
  column-gap: 18px !important;
  row-gap: 28px !important;
}
body.pdp-v2 .custom-related-pro-sct .product-item { text-align: left; }
body.pdp-v2 .custom-related-pro-sct .product-item__image,
body.pdp-v2 .custom-related-pro-sct .product-item .image-wrapper {
  border-radius: 5px;
  overflow: hidden;
}
body.pdp-v2 .custom-related-pro-sct .product-item__info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 11px;
}
body.pdp-v2 .custom-related-pro-sct .product-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--np-ink);
  margin: 0;
}
body.pdp-v2 .custom-related-pro-sct .product-item__price,
body.pdp-v2 .custom-related-pro-sct .product-item__price__holder {
  font-size: 13px;
  color: #7a746b;
  white-space: nowrap;
}

/* ==========================================================================
   28a. MADE RIGHT BAND (mockup)
   ========================================================================== */

body.pdp-v2 .video-with-text { background: #1c1a17; color: #f0ece3; }
body.pdp-v2 .video-with-text .wrapper--full-padded {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(64px, 11.5vw, 224px);
}
body.pdp-v2 .video-with-text_wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
body.pdp-v2 .video-with-text_content { flex: 1 1 320px; min-width: 280px; }
body.pdp-v2 .video-with-text_contentwrp::before {
  content: "The Narpine standard";
  display: block;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a89f92;
  margin-bottom: 16px;
}
body.pdp-v2 .video-with-text_contentwrp h3 {
  font-family: inherit;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 300;
  line-height: 1.12;
  color: #f0ece3;
  margin: 0 0 16px;
}
body.pdp-v2 .video-with-text_contentwrp h3 strong { font-weight: 300; }
body.pdp-v2 .video-with-text_rte,
body.pdp-v2 .video-with-text_rte p {
  font-size: 15px;
  line-height: 1.7;
  color: #d6cfc4;
  max-width: 44ch;
  margin: 0;
}
body.pdp-v2 .video-with-text_media {
  flex: 1 1 360px;
  min-width: 280px;
  border-radius: 5px;
  overflow: hidden;
}
body.pdp-v2 .video-with-text_media img,
body.pdp-v2 .video-with-text_media video {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   28b. REVIEWS - shell, summary, toolbar
   ========================================================================== */

body.pdp-v2 .np-reviews { background: #efece5; }
body.pdp-v2 .np-reviews__in {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(64px, 11.5vw, 224px);
}
body.pdp-v2 .np-rev-card {
  background: #fff;
  border: 1px solid #e2ddd3;
  border-radius: 6px;
  padding: clamp(20px, 3vw, 30px);
}
body.pdp-v2 .np-rev-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid #eee7dc;
}
body.pdp-v2 .np-rev-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
body.pdp-v2 .np-rev-score { text-align: center; }
body.pdp-v2 .np-rev-score__num { font-size: 40px; font-weight: 700; line-height: 1; color: #1c1a17; }
body.pdp-v2 .np-rev-stars { display: flex; gap: 1px; justify-content: center; margin-top: 5px; color: #f7b500; }
body.pdp-v2 .np-rev-stars svg.is-dim { color: #e5ded2; }
body.pdp-v2 .np-rev-count { font-size: 12px; color: #7a746b; margin-top: 6px; }
body.pdp-v2 .np-rev-dist { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
body.pdp-v2 .np-rev-dist__row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #7a746b; }
body.pdp-v2 .np-rev-dist__row svg { color: #f7b500; flex: 0 0 auto; }
body.pdp-v2 .np-rev-dist__label { width: 8px; }
body.pdp-v2 .np-rev-dist__bar { flex: 1; height: 9px; background: #efeae0; border-radius: 2px; overflow: hidden; }
body.pdp-v2 .np-rev-dist__bar > div { height: 100%; background: #f7b500; }
body.pdp-v2 .np-rev-dist__count { width: 26px; text-align: right; }
body.pdp-v2 .np-rev-write {
  background: #e07a3f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
body.pdp-v2 .np-rev-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0;
  font-size: 12.5px;
  color: #7a746b;
}
body.pdp-v2 .np-rev-sort { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; color: #1c1a17; }
body.pdp-v2 .np-rev-toolbar input {
  border: 1px solid #e2ddd3;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
  width: 150px;
  color: #1c1a17;
  background: #fff;
}

/* ==========================================================================
   28c. REVIEWS - items + footer
   ========================================================================== */

body.pdp-v2 .np-rev-item { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid #eee7dc; }
body.pdp-v2 .np-rev-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e07a3f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
body.pdp-v2 .np-rev-body { flex: 1; min-width: 0; }
body.pdp-v2 .np-rev-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
body.pdp-v2 .np-rev-name { font-size: 13.5px; font-weight: 700; color: #1c1a17; }
body.pdp-v2 .np-rev-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #2e8b57; font-weight: 600; }
body.pdp-v2 .np-rev-date { font-size: 11.5px; color: #9a9086; margin-left: auto; }
body.pdp-v2 .np-rev-body .np-rev-stars { justify-content: flex-start; margin: 7px 0 8px; }
body.pdp-v2 .np-rev-title { font-size: 13.5px; font-weight: 700; color: #1c1a17; margin-bottom: 4px; }
body.pdp-v2 .np-rev-text { font-size: 13.5px; line-height: 1.6; color: #544e46; margin: 0; }
body.pdp-v2 .np-rev-foot {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #eee7dc;
  font-size: 12px;
  color: #b0a89b;
}

/* ==========================================================================
   29a. MOBILE: one render path everywhere + stacked buy box
   Mockup has zero media queries (intrinsic stacking); the theme needs help
   because it ships duplicate desktop/mobile paths.
   ========================================================================== */

body.pdp-v2 product-images.pdp-mobile,
body.pdp-v2 .selector-wrapper.pdp-mobile,
body.pdp-v2 .mobile-inline-size-area,
body.pdp-v2 .mobile-hardcoded-sizes,
body.pdp-v2 .mobile_hero_button,
body.pdp-v2 .hero__button.mobile_hero_button { display: none !important; }

body.pdp-v2 product-images.pdp-desk.selected-variant-img:not(.main-all-images) { display: none !important; }
body.pdp-v2 product-images.pdp-desk.main-all-images { display: block !important; }

@media screen and (max-width: 749px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 64px; }
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    display: block;
    padding: 0 16px;
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb { padding: 0 16px 10px; }
  body.pdp-v2 product-images.pdp-desk.main-all-images { margin: 0 0 18px !important; }

  body.pdp-v2 .key_feature-item { padding: 10px 6px; gap: 6px; }
  body.pdp-v2 .np-feat-label { font-size: 10.5px; }
  body.pdp-v2 .np-feat-icon { width: 18px; height: 18px; }
  body.pdp-v2 .ct-new-pdp h1.product__title { font-size: 30px; }

  body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label {
    min-width: 42px;
    height: 36px;
    padding: 0 11px;
  }
}

/* ==========================================================================
   29b. MOBILE: below-fold sections
   ========================================================================== */

@media screen and (max-width: 749px) {
  body.pdp-v2 .custom-related-pro-sct .related__products { padding-left: 16px; padding-right: 16px; }
  body.pdp-v2 .custom-related-pro-sct .tabs__head { flex-wrap: wrap; margin-bottom: 18px; }

  body.pdp-v2 .video-with-text .wrapper--full-padded { padding: 36px 16px; }
  body.pdp-v2 .np-reviews__in { padding: 36px 16px; }

  body.pdp-v2 .np-rev-head { gap: 18px; }
  body.pdp-v2 .np-rev-summary { gap: 16px; }
  body.pdp-v2 .np-rev-dist { min-width: 150px; flex: 1 1 150px; }
  body.pdp-v2 .np-rev-date { margin-left: 0; width: 100%; }

  body.pdp-v2 .pdp-grid_heading { margin-bottom: 22px; }
  body.pdp-v2 .pdp-grid_heading h2 { font-size: 28px; }
}

/* ==========================================================================
   30. RUNTIME-VERIFIED FIXES: reveal desk selectors without jQuery,
       one qty control, trust row stacking on mobile
   ========================================================================== */

body.pdp-v2 .selector-wrapper.pdp-desk.custom-hide-on-loading,
body.pdp-v2 .product__block--buttons.custom-hide-on-loading {
  display: block !important;
}

/* np-qty is the quantity control everywhere; theme popout off */
body.pdp-v2 .product__block--buttons popout-select { display: none !important; }

@media screen and (max-width: 749px) {
  body.pdp-v2 .np-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  body.pdp-v2 .np-trust > span { white-space: nowrap; }
}

/* ==========================================================================
   31. Desk selector wrappers: visible at every width, unconditionally.
   (The mobile hider proved unlocatable across five stylesheet layers;
   this outranks it wherever it lives.)
   ========================================================================== */
body.pdp-v2 .selector-wrapper.pdp-desk { display: block !important; }

/* ==========================================================================
   32. The variant snippet embeds a duplicate order UI inside the size
   wrapper; s31's reveal exposed it. Bury it at every width.
   ========================================================================== */
body.pdp-v2 .product__selectors .product__block--buttons,
body.pdp-v2 .product__selectors .product__submit__buttons,
body.pdp-v2 .np-dupe-atc { display: none !important; }

/* ==========================================================================
   33. Mobile: kill the theme's slider peek gutter inside the gallery
   ========================================================================== */
@media screen and (max-width: 749px) {
  body.pdp-v2 .main-all-images .product__slides,
  body.pdp-v2 .main-all-images .product__slides__holder {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
  body.pdp-v2 .main-all-images .product__slide {
    margin-left: 0 !important;
    left: 0 !important;
  }
}

/* ==========================================================================
   34. ATC internals: kill the btn__added underline stub, unify text/price
   metrics so the label and amount sit on one line
   ========================================================================== */
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .btn__added { display: none !important; }
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .btn__text {
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .ct-price-pdp,
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .ct-price-pdp * {
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- header cart count: was 9.4px in a 17px dot — unreadable ---- */
.header__cart__status,
cart-count.header__cart__status {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Split-screen product layout: image flush to the left edge, details right.
   Mobile: image full-bleed edge to edge.
   ========================================================================== */

/* ---- desktop: 50/50, no page padding on the media side ---- */
@media (min-width: 990px) {
  body.pdp-v2 .product__page {
    grid-template-columns: 50% 50% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    align-items: start;
    column-gap: 0 !important;
  }
  body.pdp-v2 .product__page > .product__images,
  body.pdp-v2 .product__page > product-images {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  body.pdp-v2 .product__slides,
  body.pdp-v2 .product-single__photos {
    width: 100% !important;
    max-width: none !important;
  }
  body.pdp-v2 .product__photo,
  body.pdp-v2 .product__slide {
    width: 100% !important;
    border-radius: 0 !important;
  }
  body.pdp-v2 .product__photo img,
  body.pdp-v2 .product__slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
  /* details column: breathing room since the grid padding is gone */
  body.pdp-v2 .product__content {
    padding: 40px 8% 60px 6% !important;
    max-width: 640px;
  }
}

/* ---- mobile: full-bleed image, no 16px inset ---- */
@media (max-width: 989px) {
  body.pdp-v2 .product__page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr !important;
  }
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images,
  body.pdp-v2 .product__slides,
  body.pdp-v2 .product-single__photos {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.pdp-v2 .product__photo,
  body.pdp-v2 .product__slide { border-radius: 0 !important; }
  body.pdp-v2 .product__photo img,
  body.pdp-v2 .product__slide img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    object-fit: cover;
  }
  /* restore the page gutter for the text below the image */
  body.pdp-v2 .product__content { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- image flush to the header (breadcrumb removed) ---- */
body.pdp-v2 .index-product.section-padding.ct-new-pdp {
  --PT: 0px !important;
  padding-top: 0 !important;
}
body.pdp-v2 .product__wrapper,
body.pdp-v2 .product__wrapper__inner { padding-top: 0 !important; margin-top: 0 !important; }
body.pdp-v2 .np-breadcrumb, body.pdp-v2 .breadcrumbs { display: none !important; }
/* the theme header is position:absolute (87px, overlay) — the image passes
   under it by design, but text and the media badge must clear it. */
body.pdp-v2 .product__content {
  padding-top: calc(var(--np-header-h, 87px) + 24px) !important;
}
body.pdp-v2 .np-media-badge { top: calc(var(--np-header-h, 87px) + 16px) !important; }

@media (max-width: 989px) {
  body.pdp-v2 .np-media-badge { top: calc(var(--np-header-h, 64px) + 12px) !important; }
  body.pdp-v2 .product__content { padding-top: 48px !important; }
}

/* header cart count: theme sets transparent text; force it visible */
.header__cart__status,
cart-count.header__cart__status {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* ---- gallery: thumbnails off, dots + arrows on ---- */
body.pdp-v2 .product__thumbs,
body.pdp-v2 .product__thumbs__holder,
body.pdp-v2 .product__thumb { display: none !important; }

body.pdp-v2 .product__slides.np-gal { position: relative; }
body.pdp-v2 .product__images.np-gal-wrap { position: relative; }

body.pdp-v2 .np-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.86); color: #1c1a17;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  opacity: 0; transition: opacity .2s ease, background .15s ease;
}
body.pdp-v2 .product__slides.np-gal:hover .np-gal-arrow { opacity: 1; }
body.pdp-v2 .np-gal-arrow:hover { background: #fff; }
body.pdp-v2 .np-gal-arrow--prev { left: 18px; }
body.pdp-v2 .np-gal-arrow--next { right: 18px; }

body.pdp-v2 .np-gal-dots {
  position: absolute; left: 0; right: 0; bottom: 20px;
  z-index: 5; display: flex; justify-content: center; align-items: center; gap: 4px;
}
/* dashes, matching the live theme's slick-dots: 12x2 idle, 26x2 active */
body.pdp-v2 .np-gal-dot {
  width: 12px; height: 2px; padding: 0; border: 0; cursor: pointer;
  border-radius: 0;
  background: rgba(121,37,37,.35);
  transition: background .18s ease, width .18s ease;
}
body.pdp-v2 .np-gal-dot:hover { background: rgba(121,37,37,.6); }
body.pdp-v2 .np-gal-dot.is-active {
  background: #792525;
  width: 26px;
}

/* touch: arrows always visible, dots sit a little higher */
@media (hover: none) {
  body.pdp-v2 .np-gal-arrow { opacity: 1; width: 38px; height: 38px; }
  body.pdp-v2 .np-gal-arrow--prev { left: 10px; }
  body.pdp-v2 .np-gal-arrow--next { right: 10px; }
  body.pdp-v2 .np-gal-dots { bottom: 16px; }
}

/* the track is display:grid — force the controls out of grid flow and give
   them explicit box sizes so they can't collapse to 0x0 */
body.pdp-v2 .product__slides.np-gal > .np-gal-arrow,
body.pdp-v2 .product__slides.np-gal > .np-gal-dots {
  position: absolute !important;
  grid-area: 1 / 1 !important;
  align-self: center; justify-self: stretch;
}
body.pdp-v2 .np-gal-arrow {
  width: 44px !important; height: 44px !important;
  min-width: 44px; min-height: 44px;
  justify-self: start;
}
body.pdp-v2 .np-gal-arrow--next { justify-self: end; }
body.pdp-v2 .np-gal-dots {
  height: 14px !important; min-height: 14px;
  align-self: end; justify-self: center;
  width: auto !important; min-width: 60px;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  bottom: 20px !important; top: auto !important;
}
body.pdp-v2 .np-gal-dot { min-width: 12px; min-height: 2px; }
body.pdp-v2 .np-gal-arrow--prev { left: 18px !important; right: auto !important; }
body.pdp-v2 .np-gal-arrow--next { right: 18px !important; left: auto !important; }
body.pdp-v2 .np-gal-arrow { top: 50% !important; bottom: auto !important; }

/* ---- gallery arrows: restyle the THEME's buttons, show on hover ---- */
body.pdp-v2 .np-gal-arrow { display: none !important; }   /* our duplicates, if any linger */

body.pdp-v2 .product__images .slider__button {
  width: 44px !important; height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  color: #1c1a17 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  opacity: 0;
  transition: opacity .2s ease, background .15s ease;
  z-index: 6;
}
body.pdp-v2 .product__images .slider__button svg { width: 18px; height: 18px; }
body.pdp-v2 .product__images:hover .slider__button { opacity: 1; }
body.pdp-v2 .product__images .slider__button:hover { background: #fff !important; }
/* pull them fully inside the frame (theme parks prev at x:-20) */
/* theme applies translateX(-44px)/(+44px) to park the arrows outside the
   frame — cancel it and neutralise the -20px top margin */
body.pdp-v2 .product__images .slider__button--prev,
body.pdp-v2 .product__images .slider__button--next {
  transform: none !important;
  margin: 0 !important;
  top: 50% !important;
  translate: 0 -50% !important;
}
body.pdp-v2 .product__images .slider__button--prev { left: 18px !important; right: auto !important; }
body.pdp-v2 .product__images .slider__button--next { right: 18px !important; left: auto !important; }
/* the arrow layer must not swallow clicks on the image */
body.pdp-v2 .product__images .slider__arrows { pointer-events: none; }
body.pdp-v2 .product__images .slider__button { pointer-events: auto; }

/* touch: always visible */
@media (hover: none) {
  body.pdp-v2 .product__images .slider__button { opacity: 1; width: 38px !important; height: 38px !important; }
}

/* hide the theme's dash indicator — we use dots */
body.pdp-v2 .product__images .slider__dash,
body.pdp-v2 .product__images [class*="dash"] { display: none !important; }

/* ==========================================================================
   Typography: Times New Roman for titles, Open Sans for body
   ========================================================================== */
body.pdp-v2 {
  --np-serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --np-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* body / UI text */
body.pdp-v2,
body.pdp-v2 p,
body.pdp-v2 li,
body.pdp-v2 span,
body.pdp-v2 a,
body.pdp-v2 div,
body.pdp-v2 label,
body.pdp-v2 button,
body.pdp-v2 select,
body.pdp-v2 input,
body.pdp-v2 .product__description,
body.pdp-v2 .np-feat-label,
body.pdp-v2 .radio__button label,
body.pdp-v2 .swatch__button label,
body.pdp-v2 .product__price,
body.pdp-v2 .selector-wrapper__label,
body.pdp-v2 .np-band,
body.pdp-v2 .np-trust {
  font-family: var(--np-sans) !important;
}

/* titles */
/* headings — include descendants: the theme wraps title text in a <span>,
   which the generic body rule above would otherwise turn into Open Sans */
body.pdp-v2 h1, body.pdp-v2 h1 *,
body.pdp-v2 h2, body.pdp-v2 h2 *,
body.pdp-v2 h3, body.pdp-v2 h3 *,
body.pdp-v2 .product__title, body.pdp-v2 .product__title *,
body.pdp-v2 .np-sticky-bar__title, body.pdp-v2 .np-sticky-bar__title *,
body.pdp-v2 .grid__heading, body.pdp-v2 .grid__heading *,
body.pdp-v2 .section__title, body.pdp-v2 .section__title * {
  /* declare the stack literally rather than via var() — quoted family names
     inside a custom property resolve inconsistently across browsers */
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
  letter-spacing: .01em;
  font-weight: 400;
}

/* dashes are a mobile affordance only — desktop has hover arrows */
@media (min-width: 990px) {
  body.pdp-v2 .np-gal-dots { display: none !important; }
}

/* product name in full caps */
body.pdp-v2 .product__title,
body.pdp-v2 h1.product__title,
body.pdp-v2 .product__title * {
  text-transform: uppercase !important;
  letter-spacing: .03em;
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
}

/* ---- hide the "Select a colour" placeholder legend ---- */
body.pdp-v2 .selector-wrapper--fullwidth .radio__legend__value,
body.pdp-v2 .swatch__button + .radio__legend__value { }
body.pdp-v2 .radio__legend__value:where(:not(:empty)) { }
/* only hide when it is the placeholder text, keep the chosen value */
body.pdp-v2 .np-hide-legend { display: none !important; }

/* ---- size guide pill, last in the size row ---- */
body.pdp-v2 .np-size-guide-pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 66px; height: 46px; padding: 0 16px;
  margin-left: 4px;
  border: 1px solid var(--np-line); border-radius: 999px;
  background: #fff; color: var(--npct-ink, #1c1a17);
  font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 400;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
body.pdp-v2 .np-size-guide-pill:hover { border-color: #1c1a17; }
body.pdp-v2 .np-size-guide-pill svg { flex: 0 0 auto; }
/* the original size-guide link elsewhere is now redundant */
body.pdp-v2 .selector-wrapper--size .size-guide-link,
body.pdp-v2 .product__block .size-guide-btn:not(.np-size-guide-pill) { display: none !important; }

/* original size-guide trigger, replaced by the inline pill */
body.pdp-v2 .np-sg-original { display: none !important; }

/* keep the pill inline with the size labels */
body.pdp-v2 .selector-wrapper--size .np-size-guide-pill {
  vertical-align: middle;
  margin: 0 0 0 4px;
}

/* selected colour / size value on the right of each selector label — remove */
body.pdp-v2 .radio__legend__value,
body.pdp-v2 .selector-wrapper__value,
body.pdp-v2 .selector-wrapper--size .radio__legend__value,
body.pdp-v2 .selector-wrapper--fullwidth .radio__legend__value {
  display: none !important;
}

/* ==========================================================================
   Feature block — option D: tinted icon chip in a subtle card
   ========================================================================== */
body.pdp-v2 .pdp_key_features_wrp,
body.pdp-v2 .pdp_key_features ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  align-items: stretch;
}
body.pdp-v2 .key_feature-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 18px 12px !important;
  border: 1px solid #eee7dc !important;
  border-radius: 10px !important;
  background: #fff !important;
  min-height: 0 !important;
}
body.pdp-v2 .np-feat-chip {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 999px;
  background: #f5efe7;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 11px;
}
body.pdp-v2 .np-feat-icon { width: 19px; height: 19px; color: #1c1a17; }
body.pdp-v2 .np-feat-label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: #1c1a17;
}

@media (max-width: 767px) {
  body.pdp-v2 .pdp_key_features_wrp,
  body.pdp-v2 .pdp_key_features ul { gap: 8px; }
  body.pdp-v2 .key_feature-item { padding: 14px 8px !important; }
  body.pdp-v2 .np-feat-chip { width: 34px; height: 34px; flex-basis: 34px; margin-bottom: 9px; }
  body.pdp-v2 .np-feat-icon { width: 17px; height: 17px; }
  body.pdp-v2 .np-feat-label { font-size: 11.5px !important; }
}

/* ---- "You might also like": button below the cards, centered ---- */
body.pdp-v2 .custom-tab-sct_discover,
body.pdp-v2 .hero__button.custom-tab-sct_discover {
  position: static !important;
  float: none !important;
  display: flex !important;
  justify-content: center;
  width: 100%;
  margin: 34px 0 0 !important;
  top: auto !important; right: auto !important; left: auto !important;
  transform: none !important;
}
body.pdp-v2 .custom-tab-sct_discover .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 200px; height: 48px; padding: 0 32px;
  border: 1px solid #1c1a17 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1c1a17 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: none;
  transition: background .16s ease, color .16s ease;
}
body.pdp-v2 .custom-tab-sct_discover .btn:hover {
  background: #1c1a17 !important; color: #fff !important;
}

/* CTA once relocated below the grid */
body.pdp-v2 .np-related-cta {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 34px 0 0 !important;
  padding: 0 !important;
}

/* ---- View more: real outlined button (.btn--text strips border/padding) ---- */
body.pdp-v2 .np-related-cta a.btn,
body.pdp-v2 .np-related-cta a.btn--text,
body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text.btn--large.btn--secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  height: 50px !important;
  padding: 0 34px !important;
  border: 1px solid #1c1a17 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1c1a17 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background .16s ease, color .16s ease !important;
}
body.pdp-v2 .np-related-cta a.btn:hover,
body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text:hover {
  background: #1c1a17 !important;
  color: #fff !important;
}
/* the theme underlines .btn--text via a pseudo-element */
body.pdp-v2 .np-related-cta a.btn::before,
body.pdp-v2 .np-related-cta a.btn::after,
body.pdp-v2 .np-related-cta a.btn span::before,
body.pdp-v2 .np-related-cta a.btn span::after {
  display: none !important;
  content: none !important;
}
body.pdp-v2 .np-related-cta a.btn span {
  border: 0 !important;
  text-decoration: none !important;
  background: none !important;
}

/* ==========================================================================
   "The Narpine standard" (video-with-text)
   Stone tone sampled from the image backdrop; blends into the reviews
   section below instead of sitting in a dark box.
   ========================================================================== */
body.pdp-v2 .video-with-text {
  background: #dbd7cf !important;   /* matches the image's backdrop */
  color: #1c1a17 !important;
  padding-bottom: 0 !important;
}
body.pdp-v2 .video-with-text *,
body.pdp-v2 .video-with-text p,
body.pdp-v2 .video-with-text h2,
body.pdp-v2 .video-with-text h3 { color: #1c1a17 !important; }
body.pdp-v2 .video-with-text .video-with-text_eyebrow,
body.pdp-v2 .video-with-text .subheading,
body.pdp-v2 .video-with-text small { color: #6f675c !important; }

/* image sits flush, no frame */
body.pdp-v2 .video-with-text img,
body.pdp-v2 .video-with-text video {
  display: block; width: 100%; height: auto;
  border-radius: 0 !important; box-shadow: none !important;
}

/* seamless hand-off into the reviews section */
body.pdp-v2 #shopify-section-template--18168564777160__narpine_reviews,
body.pdp-v2 [id*="narpine_reviews"] {
  background: #dbd7cf !important;
}
body.pdp-v2 [id*="narpine_reviews"] > * { background: transparent !important; }

/* ---- MOBILE: image first (flush to top), text below ---- */
@media (max-width: 989px) {
  body.pdp-v2 .video-with-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.pdp-v2 .video-with-text .wrapper--full-padded {
    padding: 0 !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_wrp {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_media {
    order: 1 !important;
    position: relative;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 0;
    /* fixed portrait frame; the image covers it exactly — no gap, no overflow */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 389 / 519 !important;   /* the image's own ratio — no crop */
    overflow: hidden;
  }
  body.pdp-v2 .video-with-text_media img,
  body.pdp-v2 .video-with-text_media video {
    display: block;
    width: 100% !important; max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
  }
  /* fade the image's own backdrop into the stone field */
  body.pdp-v2 .video-with-text_media::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 110px; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(219,215,207,0) 0%,
      rgba(219,215,207,.55) 45%,
      rgba(219,215,207,.9) 78%,
      #dbd7cf 100%);
  }
  body.pdp-v2 .video-with-text_content {
    order: 2 !important;
    padding: 4px 20px 44px !important;
    margin: 0 !important;
    text-align: left;
  }
  /* eyebrow must read on stone */
  body.pdp-v2 .video-with-text_content .subheading,
  body.pdp-v2 .video-with-text_content small,
  body.pdp-v2 .video-with-text_content p:first-child {
    color: #6f675c !important;
    letter-spacing: .16em;
  }
}

/* ---- DESKTOP: same stone field, image and copy side by side ---- */
@media (min-width: 990px) {
  body.pdp-v2 .video-with-text_wrp {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr;   /* image slightly wider */
    align-items: center;
    gap: 64px;
    max-width: none !important;
  }
  /* the theme pins both children to 280px — let them fill their columns */
  body.pdp-v2 .video-with-text_wrp > * {
    width: 100% !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_media {
    width: 100% !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_media img,
  body.pdp-v2 .video-with-text_media video {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  body.pdp-v2 .video-with-text_content { padding: 0 6% 0 0 !important; }
  body.pdp-v2 .video-with-text { padding-top: 84px !important; padding-bottom: 84px !important; }
}

/* ---- "Made right" copy: readable on the stone field ---- */
/* body copy was rgb(111,103,92) on #dbd7cf = 3.88:1, below AA */
body.pdp-v2 .video-with-text_content p,
body.pdp-v2 .video-with-text_content .rte,
body.pdp-v2 .video-with-text_content .rte p {
  color: #3d3830 !important;          /* ~8.4:1 on #dbd7cf */
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
}
/* eyebrow: keep it quiet but legible */
body.pdp-v2 .video-with-text_content .subheading,
body.pdp-v2 .video-with-text_content small {
  color: #6b6252 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
}
/* heading should outrank the paragraph */
body.pdp-v2 .video-with-text_content h2,
body.pdp-v2 .video-with-text_content h3,
body.pdp-v2 .video-with-text_content .heading {
  color: #1c1a17 !important;
  font-family: "Cormorant Garamond", "Times New Roman", serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  margin: 6px 0 14px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
@media (min-width: 990px) {
  body.pdp-v2 .video-with-text_content h2,
  body.pdp-v2 .video-with-text_content h3,
  body.pdp-v2 .video-with-text_content .heading { font-size: 38px !important; }
  body.pdp-v2 .video-with-text_content p { font-size: 16px !important; }
}

/* the paragraph lives in .video-with-text_rte (not .rte) */
body.pdp-v2 .video-with-text_rte,
body.pdp-v2 .video-with-text_rte p,
body.pdp-v2 .video-with-text_contentwrp p {
  color: #3d3830 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}
@media (min-width: 990px) {
  body.pdp-v2 .video-with-text_rte p { font-size: 16px !important; }
}

/* ==========================================================================
   "You might also like" — mobile: title left, price right, tighter type
   ========================================================================== */
@media (max-width: 767px) {
  /* section heading */
  body.pdp-v2 .shopify-section .grid__heading,
  body.pdp-v2 .shopify-section .section__title,
  body.pdp-v2 .custom-tab-sct .grid__heading {
    font-size: 20px !important;
    line-height: 1.2;
  }

  /* the row holding title + price must actually span the card */
  body.pdp-v2 .product-item .product-link {
    display: flex !important;
    width: 100% !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px;
  }
  body.pdp-v2 .product-item .product-tag-desc {
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: left !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.pdp-v2 .product-item .product-item__price__holder {
    flex: 0 0 auto !important;
    margin-left: auto !important;      /* pushes the price to the right edge */
    text-align: right !important;
    justify-content: flex-end !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    white-space: nowrap;
  }
  body.pdp-v2 .product-item .product-item__price__holder * {
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }
  body.pdp-v2 .product-item .product-item__info { margin-top: 10px !important; }
}

/* the related heading is h2.tab-link (not .grid__heading) */
@media (max-width: 767px) {
  body.pdp-v2 .tabs .tab-link,
  body.pdp-v2 h2.tab-link,
  body.pdp-v2 .tabs__head h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* mobile heading size — must match .custom-related-pro-sct specificity */
@media (max-width: 767px) {
  body.pdp-v2 .custom-related-pro-sct .tab-link,
  body.pdp-v2 .custom-related-pro-sct h2.tab-link {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* ---- "THE NARPINE STANDARD" eyebrow ----
   It is a ::before pseudo-element on .video-with-text_contentwrp, not a DOM
   node — it was rgb(168,159,146) on the stone bg (~2.1:1, unreadable). */
body.pdp-v2 .video-with-text_contentwrp::before {
  color: #524a3c !important;   /* 6.0:1 on #dbd7cf */
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
}

/* ==========================================================================
   Fixes: badge position, size-guide pill height, view-more, made-right crop
   ========================================================================== */

/* 1 — "ORGANIC COTTON" tag to the bottom of the image */
body.pdp-v2 .np-media-badge {
  top: auto !important;
  bottom: 18px !important;
  left: 16px !important;
}
@media (max-width: 989px) {
  body.pdp-v2 .np-media-badge { bottom: 44px !important; left: 14px !important; }
}

/* 3 — size-guide pill: same height as size pills (longer is fine) */
@media (max-width: 989px) {
  body.pdp-v2 .np-size-guide-pill {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
  body.pdp-v2 .np-size-guide-pill svg { width: 13px; height: 13px; }
}

/* 4 — "View more" smaller on mobile + breathing room above it */
@media (max-width: 767px) {
  body.pdp-v2 .np-related-cta { margin-top: 26px !important; }
  body.pdp-v2 .np-related-cta a.btn,
  body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text.btn--large.btn--secondary {
    min-width: 150px !important;
    height: 40px !important;
    padding: 0 22px !important;
    font-size: 12px !important;
  }
}

/* 5 — "Made right": show more of the rope, shift the crop down */
@media (max-width: 989px) {
  /* show the whole garment: rope at the top AND the hem at the bottom.
     A cover-crop can only ever show part of a tall image, so contain it. */
  /* container takes the image's own 389x519 portrait ratio so nothing is
     cropped and nothing is letterboxed */
  body.pdp-v2 .video-with-text_media {
    aspect-ratio: 389 / 519 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.pdp-v2 .video-with-text_media img,
  body.pdp-v2 .video-with-text_media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}


body.pdp-v2 .product__images.np-gal-wrap > .np-gal-dots {
  position: absolute !important;
  left: 50% !important; right: auto !important;
  bottom: 18px !important; top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 6;
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important; min-width: 60px;
  height: 14px !important;
}

/* the media block is a flex item; flex stretching forced height:360px and
   overrode its aspect-ratio. Opt it out of flex sizing. */
@media (max-width: 989px) {
  body.pdp-v2 .video-with-text_wrp { align-items: flex-start !important; }
  body.pdp-v2 .video-with-text_media {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    height: auto !important;
    aspect-ratio: 389 / 519 !important;
  }
}

/* ==========================================================================
   Desktop: shorter hero image, tighter size pills
   ========================================================================== */
@media (min-width: 990px) {
  /* 8 — image was 1049px tall (taller than the viewport) and the details
     column ran out 66px early, leaving white space. Cap the media height
     and let the columns match. */
  body.pdp-v2 .product__page {
    align-items: stretch !important;
  }
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images { height: 100% !important; }
  /* image column stretches to match whatever the details column needs, so
     neither side leaves white space */
  body.pdp-v2 .product__slides {
    height: 100% !important;
    max-height: none !important;
  }
  body.pdp-v2 .product__slide,
  body.pdp-v2 .product__photo {
    height: 100% !important;
    max-height: none !important;
  }
  body.pdp-v2 .product__slides img,
  body.pdp-v2 .product__photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 22%;
  }
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images { align-self: stretch !important; }
  /* details column: keep it centred against the image rather than
     top-aligned with a gap underneath */
  body.pdp-v2 .product__content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 0 !important;
  }

  /* 9 — size pills and labels a step smaller */
  body.pdp-v2 .selector-wrapper--size.pdp-desk .radio__button label {
    min-width: 56px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  body.pdp-v2 .np-size-guide-pill {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
  body.pdp-v2 .np-size-guide-pill svg { width: 13px; height: 13px; }
  body.pdp-v2 .selector-wrapper__label,
  body.pdp-v2 .radio__legend,
  body.pdp-v2 .selector-wrapper--size .radio__legend {
    font-size: 11px !important;
    letter-spacing: .14em;
  }
  /* colour swatches proportionally smaller too */
  body.pdp-v2 .selector-wrapper--fullwidth.pdp-desk .swatch__button label {
    width: 32px !important; height: 32px !important;
  }
}

/* desktop: content column sized by its content, image matches it */
@media (min-width: 990px) {
  body.pdp-v2 .product__content {
    padding-top: calc(var(--np-header-h, 87px) + 20px) !important;
    padding-bottom: 32px !important;
  }
}

/* ==========================================================================
   Desktop hero: the source image is 524x765. Stretching it to a 720px
   column scaled it to 1049px tall, which set the grid row height and forced
   the details column to match (leaving slack under the content).
   Cap the row so the image drives a sane height.
   ========================================================================== */
@media (min-width: 990px) {
  /* THE ROW IS A FIXED HEIGHT. Image fills it, badge/arrows sit inside it,
     content column is exactly the same height and scrolls nothing. */
  body.pdp-v2 .product__page {
    align-items: start !important;
  }
  /* Cap the media so the 524x765 source is not scaled up to 1049px, which
     was inflating the grid row and leaving slack under the content.
     780px keeps the image close to the content height on a 900px viewport. */
  /* image fills its column exactly: the badge and arrows are anchored to the
     wrapper, so a shorter image left them orphaned in empty space below it. */
  /* sticky media column: stays in view while the details scroll past */
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden;
  }
  body.pdp-v2 .product__slides,
  body.pdp-v2 .product__slide,
  body.pdp-v2 .product__photo {
    height: 100% !important;
    max-height: 100% !important;
  }
  body.pdp-v2 .product__slides img,
  body.pdp-v2 .product__photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center 20%;
  }
  /* content no longer needs to be centred against an over-tall image */
  body.pdp-v2 .product__content {
    height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--np-header-h, 87px) + 48px) !important;
    padding-bottom: 72px !important;
    overflow: visible !important;
  }
}


* ==========================================================================
   narpine-pdp.css  -- PDP redesign to match mockup
   Scoped to body.pdp-v2 so the existing PDP template is untouched.
   Built 2026-07-24
   ========================================================================== */

body.pdp-v2 {
  --np-ink: #212121;
  --np-accent: #792525;
  --np-line: #e5e5e5;
  --np-panel: #fafafa;
  --np-muted: #6b655c;
  --np-body: #4a443c;
  --np-faint: #8a847a;
  --np-radius: 5px;
}

/* ---------- 1. BUY BOX SHELL ---------- */

body.pdp-v2 .product-block { margin: 0 0 18px; }
body.pdp-v2 .product-block:last-child { margin-bottom: 0; }

/* ---------- 2. TITLE + MATERIAL LINE ---------- */

body.pdp-v2 .product-title,
body.pdp-v2 h1.product-title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--np-ink);
  margin: 0 0 6px;
  line-height: 1.25;
}

/* ---------- 3. PRICE ---------- */

body.pdp-v2 .product-price,
body.pdp-v2 .price-area .price {
  font-size: 19px;
  font-weight: 600;
  color: var(--np-ink);
  letter-spacing: .01em;
}
body.pdp-v2 .price--compare,
body.pdp-v2 .compare-at {
  font-size: 14px;
  font-weight: 400;
  color: var(--np-faint);
  text-decoration: line-through;
  margin-left: 8px;
}

/* ---------- 4. DESCRIPTION ---------- */

body.pdp-v2 .product-block .rte,
body.pdp-v2 .product-description {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--np-body);
}

/* ---------- 5. FEATURE STRIP ---------- */

body.pdp-v2 .pdp_key_features { margin-bottom: 22px; }
body.pdp-v2 .pdp_key_features h2,
body.pdp-v2 .pdp_key_features .pdp_key_features_title { display: none; }

body.pdp-v2 .pdp_key_features_wrp,
body.pdp-v2 .pdp_key_features ul {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--np-panel);
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.pdp-v2 .key_feature-item,
body.pdp-v2 .pdp_key_features li {
  flex: 1;
  padding: 13px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--np-ink);
  list-style: none;
  margin: 0;
}

body.pdp-v2 .key_feature-item + .key_feature-item,
body.pdp-v2 .pdp_key_features li + li {
  border-left: 1px solid var(--np-line);
}

body.pdp-v2 .key_feature-item::marker,
body.pdp-v2 .pdp_key_features li::marker { content: none; }

body.pdp-v2 .np-feat-icon {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
}

/* ---------- 5b. FEATURE STRIP FIXES (real markup) ---------- */

/* kill stray list markers / dashes inside cells */
body.pdp-v2 .pdp_key_features_wrp,
body.pdp-v2 .pdp_key_features_wrp * { list-style: none !important; }
body.pdp-v2 .pdp_key_features_wrp *::marker { content: "" !important; }
body.pdp-v2 .key_feature-item::before,
body.pdp-v2 .key_feature-item p::before { content: none !important; display: none !important; }
body.pdp-v2 .key_feature-item p { margin: 0; padding: 0; }
body.pdp-v2 .key_feature-item ul,
body.pdp-v2 .key_feature-item li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.pdp-v2 .key_feature-item {
  justify-content: center;
  gap: 7px;
  padding: 13px 10px;
  min-height: 0;
}
body.pdp-v2 .np-feat-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--np-ink);
}

/* ==========================================================================
   OVERRIDES vs custom-jtpl.css
   That file uses 7-level chains like
     .index-product .form__wrapper .product__block .product__selectors
       .selector-wrapper--size .radio__buttons .radio__button label
   (0,7,1) and strips borders off size pills. We must outrank it, so these
   rules are intentionally long. body.pdp-v2 adds (0,1,1) on top.
   ========================================================================== */

/* ---- selectors container: stack, full width, tight ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors {
  display: block;
  width: 100%;
  margin-top: 0;
  row-gap: 0;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--fullwidth,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size {
  display: block;
  width: 100%;
  max-width: none;
  flex: none;
  margin: 0 0 18px;
  justify-content: flex-start;
}

/* ---- legend row: label left, size-guide right ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset {
  display: block;
  padding: 0;
  grid-template-columns: none;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__fieldset {
  display: block;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__fieldset legend.radio__legend.radio__legend--size {
  width: 100%;
  max-width: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px;
}

/* ---- SIZE PILLS ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin: 0;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button {
  display: inline-flex;
  margin: 0;
  padding: 0;
  min-width: 0;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;   /* uniform: S/M/L no longer collapse into circles */
  height: 46px;
  padding: 0 12px;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--np-ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label:hover {
  border-color: var(--np-ink);
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input:checked ~ label {
  background: var(--np-ink);
  border-color: var(--np-ink);
  color: #fff;
}

body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input:disabled ~ label,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input.sold-out ~ label,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button input.unavailable ~ label {
  color: var(--np-faint);
  background: var(--np-panel);
  border-color: var(--np-line);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ---- SWATCHES ---- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset--swatches {
  --swatch-size: 30px;
  display: block;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset--swatches .radio__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button {
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-block;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input ~ label {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.12);
  box-sizing: border-box;
  cursor: pointer;
  background: var(--swatch, var(--swatch-default));
  background-size: cover;
}
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input:checked ~ label {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--np-ink);
}

/* ---- ATC: undo right-align + radius:0 from custom-jtpl ---- */
body.pdp-v2 .product__submit__buttons .product__submit__item button.btn {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  border-radius: 999px !important;
  font-size: 12.5px;
}

body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 14px 20px;
  background: var(--np-ink);
  border: 1px solid var(--np-ink);
  color: #fff;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn:hover {
  background: #000;
  border-color: #000;
}
body.pdp-v2 .product__submit__item button.btn .btn__text,
body.pdp-v2 .product__submit__item button.btn .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn .ct-product-price {
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  margin: 0;
}
body.pdp-v2 .product__submit__item button.btn .ct-price-pdp {
  display: inline-flex; gap: 6px; align-items: center;
}

/* disabled -> white with grey text, NOT grey fill */
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn[disabled],
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn.np-disabled {
  background: #fff;
  border-color: var(--np-line);
  color: var(--np-muted);
  opacity: 1;
  cursor: not-allowed;
}
body.pdp-v2 .product__submit__item button.btn[disabled] .btn__text,
body.pdp-v2 .product__submit__item button.btn.np-disabled .btn__text { color: var(--np-muted); }
body.pdp-v2 .product__submit__item button.btn[disabled] .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn.np-disabled .ct-price-pdp { display: none; }

/* ---- kill the duplicate mobile ATC on desktop ---- */
@media screen and (min-width: 750px) {
  body.pdp-v2 .mobile_hero_button,
  body.pdp-v2 .hero__button.mobile_hero_button { display: none !important; }
  /* only the mobile *selector* blocks, never the variant galleries */
  body.pdp-v2 .selector-wrapper.pdp-mobile,
  body.pdp-v2 .mobile-hardcoded-sizes,
  body.pdp-v2 .mobile-inline-size-area { display: none !important; }
}

/* ---- bundle text ---- */
body.pdp-v2 .product__block--code p { margin: 0; }

/* ---- tighten vertical rhythm ---- */
body.pdp-v2 .product__block { margin-bottom: 0; }
body.pdp-v2 .product__block.block-padding { --block-padding-bottom: 14px; }

/* ==========================================================================
   13. TITLE / PRICE / BREADCRUMB  (mockup values, Open Sans per instruction)
   ========================================================================== */

/* breadcrumb */
body.pdp-v2 .np-breadcrumb {
  max-width: var(--np-max, 1280px);
  margin: 0 auto;
  padding: 16px 22px 4px;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--np-faint);
}
body.pdp-v2 .np-breadcrumb a { color: var(--np-faint); text-decoration: none; }
body.pdp-v2 .np-breadcrumb a:hover { color: var(--np-ink); }
body.pdp-v2 .np-breadcrumb__sep { margin: 0 8px; color: var(--np-faint); }
body.pdp-v2 .np-breadcrumb__current { color: var(--np-ink); }

/* title: mockup scale, theme font */
body.pdp-v2 .product__title,
body.pdp-v2 h1.product__title,
body.pdp-v2 .product__block--title h1,
body.pdp-v2 .product-title {
  font-family: inherit;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--np-ink);
  margin: 0 0 10px;
}

/* price row */
body.pdp-v2 .product__block--price { margin-bottom: 20px; }
body.pdp-v2 .product__price,
body.pdp-v2 .product__price .price,
body.pdp-v2 [data-product-price] {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--np-ink);
}
body.pdp-v2 .product__price .price--compare,
body.pdp-v2 [data-compare-price] {
  font-size: 14px;
  font-weight: 400;
  color: var(--np-faint);
  text-decoration: line-through;
  margin-left: 8px;
}
body.pdp-v2 .np-tax-note {
  font-size: 12px;
  color: var(--np-faint);
  margin-left: 10px;
}

/* description */
body.pdp-v2 .product__block--description .rte,
body.pdp-v2 .product__description {
  font-size: 14px;
  line-height: 1.65;
  color: #544e46;
  max-width: 100%;
  margin: 0 0 22px;
}

/* ==========================================================================
   14. GALLERY  (thumbnails layout + ORGANIC COTTON badge)
   ========================================================================== */

body.pdp-v2 .product__images .product__slide,
body.pdp-v2 .product__photo { border-radius: 5px; overflow: hidden; }

body.pdp-v2 .product__thumbs .product__thumb__item img,
body.pdp-v2 .product-thumbs img {
  border-radius: 4px;
  border: 1px solid transparent;
}
body.pdp-v2 .product__thumbs .is-active img,
body.pdp-v2 .product-thumbs .is-active img { border-color: var(--np-ink); }

/* badge over the main image */
body.pdp-v2 .product__images { position: relative; }
body.pdp-v2 .np-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(246,244,239,.92);
  color: var(--np-ink);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 100px;
  pointer-events: none;
}

/* ==========================================================================
   15. GALLERY GRID FIX
   Theme's .product__wrapper--small .product__page is 37.5%/50% tuned for the
   stacked layout; with --thumbnails the gallery column overflows. Rebalance.
   ========================================================================== */

@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 22px;
  }

  /* undo the -50px nudge meant for the no-thumbs layout */
  body.pdp-v2 product-images.product__images.pdp-desk { transform: none !important; }
}

/* breadcrumb now lives inside wrapper__inner */
body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 22px 10px;
}

/* main image */
body.pdp-v2 .product__images .product__slide { padding-bottom: 0; }
body.pdp-v2 .product__images .product__photo {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #efece5;
}

/* thumb strip below main image */
body.pdp-v2 product-thumbs.product__thumbs {
  display: block;
  margin-top: 12px;
  width: 100%;
}
body.pdp-v2 .product__thumbs__holder {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  overflow: visible;
}
body.pdp-v2 .product__thumb {
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  width: 68px;
}
body.pdp-v2 .product__thumb img,
body.pdp-v2 .product__thumb .image-wrapper {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
}
body.pdp-v2 .product__thumb.is-active img,
body.pdp-v2 .product__thumb[aria-current="true"] img,
body.pdp-v2 .product__thumb.is-active .image-wrapper { border-color: var(--np-ink); }

/* badge sits on the photo */
body.pdp-v2 .product__photo .np-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}

/* ==========================================================================
   16. HEADER CLEARANCE + ct-new-pdp OVERRIDES
   ct-custom.css sets .template-product header to position:absolute, so the
   section must pad past it. It also styles h1/.btn under .ct-new-pdp (0,2,0)
   which we override here.
   ========================================================================== */

body.pdp-v2 .ct-new-pdp h1.product__title {
  font-family: inherit;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 300;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0 0 10px;
}

body.pdp-v2 .ct-new-pdp .np-under-title { margin-bottom: 18px; }

body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn {
  margin-top: 0;
  border: 1px solid var(--np-ink) !important;
  font-weight: 600;
  font-size: 12.5px;
}
body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn[disabled],
body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn.np-disabled {
  border-color: var(--np-line) !important;
}
body.pdp-v2 .ct-new-pdp .product__submit .btn.btn--secondary span,
body.pdp-v2 .index-product.ct-new-pdp .product__submit__buttons .product__submit__item button.btn { color: #fff; }
body.pdp-v2 .index-product.ct-new-pdp .product__submit__item button.btn[disabled] span,
body.pdp-v2 .index-product.ct-new-pdp .product__submit__item button.btn.np-disabled span { color: var(--np-muted); }

body.pdp-v2 .ct-new-pdp .ct-product-price { color: #fff; }
body.pdp-v2 .ct-new-pdp .product__block.product__description { margin-top: 0; margin-bottom: 22px; }

/* ==========================================================================
   17. THUMBS: only the active variant's gallery
   Theme renders one <product-images> per colour; show the selected one only.
   ========================================================================== */

@media screen and (min-width: 750px) {
  body.pdp-v2 product-images.pdp-desk.main-all-images { display: none !important; }
}

body.pdp-v2 .product__thumbs__holder { max-height: none; }

/* header is position:absolute on .template-product; ensure full clearance */
@media screen and (min-width: 750px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 40px; }
}

/* ==========================================================================
   18. FIXES: breadcrumb clearance, ATC price, image ratio
   ========================================================================== */

/* breadcrumb must clear the absolutely-positioned header */
body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
  padding-top: 0;
  padding-bottom: 14px;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 750px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 96px; }
}
@media screen and (max-width: 749px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 72px; }
}

/* ATC: show the price when enabled (only hide while disabled) */
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn .ct-price-pdp {
  display: inline-flex !important;
  gap: 6px;
  align-items: center;
}
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn[disabled] .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn.np-disabled .ct-price-pdp {
  display: none !important;
}
body.pdp-v2 .ct-new-pdp .custom-quick-view-btn .ct-product-price { color: #fff !important; }

/* main image: mockup ratio, contained */
body.pdp-v2 .pdp-desk .product__slide .product__photo,
body.pdp-v2 .pdp-desk .product__photo .image-wrapper {
  aspect-ratio: 525 / 765;
}
body.pdp-v2 .pdp-desk .product__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* thumbs row */
body.pdp-v2 .product__thumbs__holder { gap: 9px; }
body.pdp-v2 .product__thumb { width: 68px; }

/* ==========================================================================
   19. ROUND FIXES: single gallery, thumb slider, labels back, dupe ATC,
       swatch underline, title metrics
   ========================================================================== */

/* ---- one gallery for all images; colour click moves the active slide
       instead of swapping whole galleries (kills the "reload" feel) ---- */
@media screen and (min-width: 750px) {
  body.pdp-v2 product-images.pdp-desk.selected-variant-img:not(.main-all-images) { display: none !important; }
  body.pdp-v2 product-images.pdp-desk.main-all-images { display: block !important; }
}

/* ---- thumbs: single-row horizontal slider ---- */
body.pdp-v2 .product__thumbs__holder {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--np-line) transparent;
}
body.pdp-v2 .product__thumbs__holder::-webkit-scrollbar { height: 5px; }
body.pdp-v2 .product__thumbs__holder::-webkit-scrollbar-thumb { background: var(--np-line); border-radius: 3px; }
body.pdp-v2 .product__thumb { flex: 0 0 68px; width: 68px; }

/* ---- duplicate ATC from the variant snippet ---- */
@media screen and (min-width: 750px) {
  body.pdp-v2 .np-dupe-atc { display: none !important; }
}

/* ---- COLOUR / SIZE labels (regression: rules were dropped in an earlier
       rewrite; theme hides them via .variant__labels--hide) ---- */
body.pdp-v2 .pdp-desk .radio__legend,
body.pdp-v2 .variant__labels--hide .radio__legend,
body.pdp-v2 .variant__labels--hide .radio__legend--size {
  display: flex !important;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px;
  padding: 0;
}
body.pdp-v2 .variant__labels--hide .radio__legend__option-name,
body.pdp-v2 .variant__labels--hide .select__label {
  position: static !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  overflow: visible !important;
}
body.pdp-v2 .radio__legend__label { display: inline-flex; }
body.pdp-v2 .radio__legend__option-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--np-muted);
}
body.pdp-v2 .radio__legend__value {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--np-ink);
}
body.pdp-v2 .radio__legend__link,
body.pdp-v2 .size_chart_link {
  font-size: 12px;
  color: var(--np-body);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- kill the underline bar under the selected swatch ---- */
body.pdp-v2 .radio__fieldset--swatches .swatch__button::after,
body.pdp-v2 .radio__fieldset--swatches .swatch__button::before,
body.pdp-v2 .radio__fieldset--swatches .swatch__button label::after,
body.pdp-v2 .radio__fieldset--swatches .swatch__button label::before,
body.pdp-v2 .radio__fieldset--swatches radio-swatch::after,
body.pdp-v2 .radio__fieldset--swatches radio-swatch::before {
  content: none !important;
  display: none !important;
}

/* ---- title: mockup metrics, Open Sans family per instruction ---- */
body.pdp-v2 .ct-new-pdp h1.product__title {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
}

/* ==========================================================================
   20. ROUND FIXES: fieldset layout, gallery width, qty stepper,
       bundle + trust (mockup), disabled button, thumb active state
   ========================================================================== */

/* ---- fieldset: force block flow; swatch row horizontal, hard ---- */
body.pdp-v2 .pdp-desk fieldset,
body.pdp-v2 .pdp-desk .radio__fieldset,
body.pdp-v2 .pdp-desk .radio__fieldset--swatches {
  display: block !important;
  grid-template-columns: none !important;
  width: 100%;
  max-width: none;
  padding: 0;
}
body.pdp-v2 .pdp-desk .radio__legend {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 9px !important;
  padding: 0;
  position: static !important;
}
body.pdp-v2 .pdp-desk .radio__fieldset--swatches .radio__buttons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}

/* ---- gallery: fill its column, align with header content ---- */
@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    max-width: none;
    padding: 0 var(--outer, 32px);
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 48px);
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    max-width: none;
    padding-left: var(--outer, 32px);
    padding-right: var(--outer, 32px);
  }
}
body.pdp-v2 product-images.pdp-desk.main-all-images {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  position: relative;
  display: block;
}
body.pdp-v2 .main-all-images .product__slides,
body.pdp-v2 .main-all-images .product__slide {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* badge pinned to the gallery, not a slide */
body.pdp-v2 product-images.main-all-images > .np-media-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
}

/* thumb active state (JS keeps it in sync) */
body.pdp-v2 .product__thumb img { border: 1px solid transparent; border-radius: 4px; }
body.pdp-v2 .product__thumb.is-active img,
body.pdp-v2 .product__thumb[aria-current="true"] img { border-color: var(--np-ink); }

/* ---- qty stepper (JS-injected) + row with ATC ---- */
body.pdp-v2 .product__block--buttons .product__submit__item {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
body.pdp-v2 .np-qty {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--np-line);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  height: 52px;
  overflow: hidden;
}
body.pdp-v2 .np-qty button {
  width: 38px;
  height: 100%;
  border: 0;
  background: transparent;
  font-size: 17px;
  line-height: 1;
  color: var(--np-ink);
  cursor: pointer;
}
body.pdp-v2 .np-qty input {
  width: 34px;
  height: 100%;
  border: 0;
  text-align: center;
  font-size: 14px;
  background: transparent;
  -moz-appearance: textfield;
  padding: 0;
}
body.pdp-v2 .np-qty input::-webkit-outer-spin-button,
body.pdp-v2 .np-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---- disabled ATC: mockup tan ---- */
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn[disabled],
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn.np-disabled {
  background: #d9ccb8 !important;
  border-color: #d9ccb8 !important;
  color: #6d6558 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
body.pdp-v2 .product__submit__item button.btn[disabled] .btn__text,
body.pdp-v2 .product__submit__item button.btn.np-disabled .btn__text { color: #6d6558 !important; }

/* ---- bundle banner (mockup) ---- */
body.pdp-v2 .np-bundle {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #f5eeeb;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--np-ink);
}
body.pdp-v2 .np-bundle__pill {
  flex: 0 0 auto;
  background: var(--np-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 100px;
}

/* ---- trust row + secure line (mockup) ---- */
body.pdp-v2 .np-trust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--np-line);
  border-bottom: 1px solid var(--np-line);
  padding: 12px 0;
  margin-top: 16px;
}
body.pdp-v2 .np-trust > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--np-body);
}
body.pdp-v2 .np-trust svg,
body.pdp-v2 .np-secure svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--np-accent); }
body.pdp-v2 .np-secure {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid var(--np-line);
  font-size: 12.5px;
  color: var(--np-muted);
}
body.pdp-v2 .np-secure svg { color: var(--np-muted); }

/* ==========================================================================
   21. ROUND FIXES: column sizing/indent, control heights, size guide,
       accordion title, spacing pass
   ========================================================================== */

/* ---- gallery starts at the nav-item line, capped so the image column
       ends near where the buy box ends (mockup proportions) ---- */
@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    padding-left: clamp(48px, 6vw, 118px);
    padding-right: clamp(32px, 4vw, 72px);
    max-width: none;
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    max-width: none;
    padding-left: clamp(48px, 6vw, 118px);
    padding-right: clamp(32px, 4vw, 72px);
  }
}

/* ---- qty and ATC: identical 52px height ---- */
body.pdp-v2 .np-qty { height: 52px; }
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn {
  height: 52px !important;
  min-height: 0 !important;
  padding: 0 20px !important;
}

/* ---- size guide: icon + label, top-right of the SIZE row ---- */
body.pdp-v2 .pdp-desk .selector-wrapper--size { position: relative; }
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--np-accent);
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
}
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link::after { content: "Size guide"; }
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link img.ruler-image,
body.pdp-v2 .pdp-desk .selector-wrapper--size .size_chart_link img {
  width: 16px !important;
  max-width: 16px !important;
  margin: 0 !important;
  display: block;
}

/* ---- accordion titles: mockup weight, sentence case ---- */
body.pdp-v2 .ct-new-pdp .product-accordion .accordion__title,
body.pdp-v2 .product__block .accordion__title,
body.pdp-v2 .accordion__title {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--np-ink);
  padding: 14px 0;
}

/* ---- spacing pass ---- */
body.pdp-v2 .ct-new-pdp h1.product__title { margin-bottom: 6px; }
body.pdp-v2 .ct-new-pdp .np-under-title { margin-bottom: 14px; }
body.pdp-v2 .product__block--price { margin-bottom: 16px; }
body.pdp-v2 .product__block--description .rte,
body.pdp-v2 .product__description { margin-bottom: 18px; }
body.pdp-v2 .pdp_key_features { margin-bottom: 18px; }
body.pdp-v2 .selector-wrapper.pdp-desk { margin: 0 0 16px !important; }
body.pdp-v2 .np-bundle { margin: 2px 0 0; }
body.pdp-v2 .np-trust { margin-top: 14px; margin-bottom: 0; }
body.pdp-v2 .product__block.block-padding { --block-padding-bottom: 14px; }

/* ==========================================================================
   22. RETARGETED FIXES (real markup this time)
   ========================================================================== */

/* ---- size guide: trigger lives inside the SIZE legend after the JS move ---- */
body.pdp-v2 .radio__legend product-modal.test-order {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
body.pdp-v2 .radio__legend .block__icon__container {
  margin: 0;
  padding: 0;
}
body.pdp-v2 .radio__legend .radio__legend__link.ruler-custom-cls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--np-accent);
  cursor: pointer;
  text-decoration: none;
}
body.pdp-v2 .radio__legend .radio__legend__link.ruler-custom-cls::after { content: "Size guide"; }
body.pdp-v2 .radio__legend .ruler-icon-cls {
  width: 16px !important;
  height: auto !important;
  display: block;
}

/* ---- Details & Care: real classes are .accordian_Images_block .queans h2.faq-box ---- */
body.pdp-v2 h2.faq-box {
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--np-ink);
  margin: 0 !important;
  padding: 14px 0 !important;
}
body.pdp-v2 .accordian_Images_block .queans {
  border-bottom: 1px solid var(--np-line);
}
body.pdp-v2 .accordian_Images_block:first-of-type .queans {
  border-top: 0; /* trust row above already draws the line */
}

/* ---- balance: image column ends near the buy box bottom ---- */
@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  }
}

/* ---- breathing room around the qty/ATC row ---- */
body.pdp-v2 .product__block--buttons { margin-top: 6px; }
body.pdp-v2 .selector-wrapper--size.pdp-desk { margin-bottom: 18px !important; }

/* ==========================================================================
   23. SPACE USAGE, LEGEND INTEGRITY, SPACING SCALE
   ========================================================================== */

/* ---- text column fills its space: kill Broadcast's form width cap ---- */
body.pdp-v2 .product__content .form__width,
body.pdp-v2 .ct-new-pdp .product__content .form__width {
  max-width: 100% !important;
  width: 100% !important;
}

@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: clamp(40px, 4vw, 84px);
    padding-right: clamp(48px, 6vw, 118px);
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    padding-right: clamp(48px, 6vw, 118px);
  }
}

/* ---- legends: labels never shrink or wrap; value pinned right ---- */
body.pdp-v2 .pdp-desk .radio__legend {
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
}
body.pdp-v2 .radio__legend__label,
body.pdp-v2 .radio__legend__option-name {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
body.pdp-v2 .radio__legend__value {
  flex: 0 1 auto;
  margin-left: auto !important;
  padding-left: 12px;
  white-space: nowrap;
  text-align: right;
}
body.pdp-v2 .radio__legend product-modal.test-order {
  flex: 0 0 auto;
  margin-left: 14px;
}
body.pdp-v2 .radio__legend .radio__legend__link.ruler-custom-cls,
body.pdp-v2 .radio__legend .ruler-custom-cls::after {
  white-space: nowrap;
}

/* ---- spacing scale: 22-24px between major groups ---- */
body.pdp-v2 .pdp_key_features { margin-bottom: 22px; }
body.pdp-v2 .product__block--description .rte,
body.pdp-v2 .product__description { margin-bottom: 20px; }
body.pdp-v2 .selector-wrapper.pdp-desk { margin: 0 0 22px !important; }
body.pdp-v2 .selector-wrapper--size.pdp-desk { margin-bottom: 24px !important; }
body.pdp-v2 .pdp-desk .radio__legend { margin-bottom: 10px !important; }
body.pdp-v2 .np-bundle { margin: 4px 0 0; }
body.pdp-v2 .product__block--buttons { margin-top: 14px; }
body.pdp-v2 .np-trust { margin-top: 18px; }

/* ==========================================================================
   24. COMPOSITION: image starts past the Impact nav text; buy box capped
       and anchored to a matching right edge; columns pushed apart.
   ========================================================================== */

@media only screen and (min-width: 750px) {
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    grid-template-columns: minmax(0, min(560px, 46%)) minmax(0, min(760px, 50%));
    justify-content: space-between;
    column-gap: clamp(40px, 4vw, 72px);
    padding-left: clamp(64px, 11.5vw, 224px);
    padding-right: clamp(64px, 11.5vw, 224px);
    max-width: 1800px;
    margin: 0 auto;
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb {
    max-width: 1800px;
    margin: 0 auto;
    padding-left: clamp(64px, 11.5vw, 224px);
    padding-right: clamp(64px, 11.5vw, 224px);
  }
}

/* ==========================================================================
   25. SIZE-GUIDE POPUP LAYERING
   The panel/overlay carry low z-index; the sticky ATC dock (z20) and
   size-guide trigger (z2) floated above them. Lift the popup layers above
   all page content so everything greys out uniformly.
   ========================================================================== */

body.pdp-v2 .custom-popup-overlay {
  z-index: 300 !important;
}
body.pdp-v2 .main_popup-size-guide.product-modal,
body.pdp-v2 .main_popup-size-guide {
  z-index: 310 !important;
}
body.pdp-v2 product-modal dialog,
body.pdp-v2 dialog.product-modal {
  z-index: 310;
}

/* ==========================================================================
   26. DETAILS SECTION TITLE + FLOATING ATC BAR
   ========================================================================== */

body.pdp-v2 .pdp-grid_heading {
  text-align: center;
  margin: 0 0 34px;
}
body.pdp-v2 .pdp-grid_heading::before {
  content: "CLOSE UP";
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--np-faint);
  margin-bottom: 12px;
}
body.pdp-v2 .pdp-grid_heading h2 {
  font-family: inherit;
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 300;
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--np-ink);
  margin: 0;
}

/* ---- floating bar ---- */
body.pdp-v2 .np-sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: rgba(255,255,255,.97);
  border-top: 1px solid var(--np-line);
  backdrop-filter: saturate(1.2) blur(6px);
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
}
body.pdp-v2 .np-sticky-bar[hidden] { display: none; }
body.pdp-v2 .np-sticky-bar__in {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 10px clamp(24px, 4vw, 64px);
}
body.pdp-v2 .np-sticky-bar__thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 5px;
  background: #efece5;
  flex: 0 0 auto;
}
body.pdp-v2 .np-sticky-bar__info { min-width: 0; margin-right: auto; }
body.pdp-v2 .np-sticky-bar__title {
  font-size: 14px; font-weight: 600; color: var(--np-ink); line-height: 1.25;
}
body.pdp-v2 .np-sticky-bar__sub { font-size: 12px; color: var(--np-muted); }
body.pdp-v2 .np-sticky-bar__price {
  font-size: 15px; font-weight: 600; color: var(--np-ink); white-space: nowrap;
}
body.pdp-v2 .np-sticky-bar__btn {
  height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--np-ink);
  border: 1px solid var(--np-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease;
}
body.pdp-v2 .np-sticky-bar__btn:hover { background: #000; }
body.pdp-v2 .np-sticky-bar__btn.np-disabled {
  background: #d9ccb8;
  border-color: #d9ccb8;
  color: #6d6558;
}
@media screen and (max-width: 749px) {
  body.pdp-v2 .np-sticky-bar__in { padding: 8px 14px; gap: 10px; }
  body.pdp-v2 .np-sticky-bar__price { display: none; }
}

/* ==========================================================================
   27. CROSS-SELL SECTION (mockup: title left, link right, gapped cards
       with title/price row)
   ========================================================================== */

body.pdp-v2 .custom-related-pro-sct .related__products {
  max-width: 1800px;
  margin: 0 auto;
  padding-left: clamp(64px, 11.5vw, 224px);
  padding-right: clamp(64px, 11.5vw, 224px);
}

/* heading row */
body.pdp-v2 .custom-related-pro-sct .tabs__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 26px;
}
body.pdp-v2 .custom-related-pro-sct .tabs { justify-content: flex-start !important; }
body.pdp-v2 .custom-related-pro-sct .tab-link,
body.pdp-v2 .custom-related-pro-sct h2.tab-link {
  font-size: clamp(20px, 3vw, 34px) !important;
  font-weight: 300 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  color: var(--np-ink) !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.pdp-v2 .custom-related-pro-sct .tabs__arrow { display: none !important; }

/* discover -> plain top-right link */
body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover { margin: 0; flex: 0 0 auto; }
body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover .btn {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--np-ink) !important;
}
body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover .btn:hover { color: var(--np-accent) !important; }

/* cards */
body.pdp-v2 .custom-related-pro-sct .tab-content .grid-outer {
  grid-gap: 18px !important;
  column-gap: 18px !important;
  row-gap: 28px !important;
}
body.pdp-v2 .custom-related-pro-sct .product-item { text-align: left; }
body.pdp-v2 .custom-related-pro-sct .product-item__image,
body.pdp-v2 .custom-related-pro-sct .product-item .image-wrapper {
  border-radius: 5px;
  overflow: hidden;
}
body.pdp-v2 .custom-related-pro-sct .product-item__info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 11px;
}
body.pdp-v2 .custom-related-pro-sct .product-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--np-ink);
  margin: 0;
}
body.pdp-v2 .custom-related-pro-sct .product-item__price,
body.pdp-v2 .custom-related-pro-sct .product-item__price__holder {
  font-size: 13px;
  color: #7a746b;
  white-space: nowrap;
}

/* ==========================================================================
   28a. MADE RIGHT BAND (mockup)
   ========================================================================== */

body.pdp-v2 .video-with-text { background: #1c1a17; color: #f0ece3; }
body.pdp-v2 .video-with-text .wrapper--full-padded {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(64px, 11.5vw, 224px);
}
body.pdp-v2 .video-with-text_wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
body.pdp-v2 .video-with-text_content { flex: 1 1 320px; min-width: 280px; }
body.pdp-v2 .video-with-text_contentwrp::before {
  content: "The Narpine standard";
  display: block;
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #a89f92;
  margin-bottom: 16px;
}
body.pdp-v2 .video-with-text_contentwrp h3 {
  font-family: inherit;
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight: 300;
  line-height: 1.12;
  color: #f0ece3;
  margin: 0 0 16px;
}
body.pdp-v2 .video-with-text_contentwrp h3 strong { font-weight: 300; }
body.pdp-v2 .video-with-text_rte,
body.pdp-v2 .video-with-text_rte p {
  font-size: 15px;
  line-height: 1.7;
  color: #d6cfc4;
  max-width: 44ch;
  margin: 0;
}
body.pdp-v2 .video-with-text_media {
  flex: 1 1 360px;
  min-width: 280px;
  border-radius: 5px;
  overflow: hidden;
}
body.pdp-v2 .video-with-text_media img,
body.pdp-v2 .video-with-text_media video {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ==========================================================================
   28b. REVIEWS - shell, summary, toolbar
   ========================================================================== */

body.pdp-v2 .np-reviews { background: #efece5; }
body.pdp-v2 .np-reviews__in {
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(64px, 11.5vw, 224px);
}
body.pdp-v2 .np-rev-card {
  background: #fff;
  border: 1px solid #e2ddd3;
  border-radius: 6px;
  padding: clamp(20px, 3vw, 30px);
}
body.pdp-v2 .np-rev-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 22px;
  border-bottom: 1px solid #eee7dc;
}
body.pdp-v2 .np-rev-summary { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
body.pdp-v2 .np-rev-score { text-align: center; }
body.pdp-v2 .np-rev-score__num { font-size: 40px; font-weight: 700; line-height: 1; color: #1c1a17; }
body.pdp-v2 .np-rev-stars { display: flex; gap: 1px; justify-content: center; margin-top: 5px; color: #f7b500; }
body.pdp-v2 .np-rev-stars svg.is-dim { color: #e5ded2; }
body.pdp-v2 .np-rev-count { font-size: 12px; color: #7a746b; margin-top: 6px; }
body.pdp-v2 .np-rev-dist { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
body.pdp-v2 .np-rev-dist__row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #7a746b; }
body.pdp-v2 .np-rev-dist__row svg { color: #f7b500; flex: 0 0 auto; }
body.pdp-v2 .np-rev-dist__label { width: 8px; }
body.pdp-v2 .np-rev-dist__bar { flex: 1; height: 9px; background: #efeae0; border-radius: 2px; overflow: hidden; }
body.pdp-v2 .np-rev-dist__bar > div { height: 100%; background: #f7b500; }
body.pdp-v2 .np-rev-dist__count { width: 26px; text-align: right; }
body.pdp-v2 .np-rev-write {
  background: #e07a3f;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
body.pdp-v2 .np-rev-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0;
  font-size: 12.5px;
  color: #7a746b;
}
body.pdp-v2 .np-rev-sort { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; color: #1c1a17; }
body.pdp-v2 .np-rev-toolbar input {
  border: 1px solid #e2ddd3;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 12px;
  width: 150px;
  color: #1c1a17;
  background: #fff;
}

/* ==========================================================================
   28c. REVIEWS - items + footer
   ========================================================================== */

body.pdp-v2 .np-rev-item { display: flex; gap: 14px; padding: 20px 0; border-top: 1px solid #eee7dc; }
body.pdp-v2 .np-rev-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e07a3f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}
body.pdp-v2 .np-rev-body { flex: 1; min-width: 0; }
body.pdp-v2 .np-rev-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
body.pdp-v2 .np-rev-name { font-size: 13.5px; font-weight: 700; color: #1c1a17; }
body.pdp-v2 .np-rev-verified { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #2e8b57; font-weight: 600; }
body.pdp-v2 .np-rev-date { font-size: 11.5px; color: #9a9086; margin-left: auto; }
body.pdp-v2 .np-rev-body .np-rev-stars { justify-content: flex-start; margin: 7px 0 8px; }
body.pdp-v2 .np-rev-title { font-size: 13.5px; font-weight: 700; color: #1c1a17; margin-bottom: 4px; }
body.pdp-v2 .np-rev-text { font-size: 13.5px; line-height: 1.6; color: #544e46; margin: 0; }
body.pdp-v2 .np-rev-foot {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #eee7dc;
  font-size: 12px;
  color: #b0a89b;
}

/* ==========================================================================
   29a. MOBILE: one render path everywhere + stacked buy box
   Mockup has zero media queries (intrinsic stacking); the theme needs help
   because it ships duplicate desktop/mobile paths.
   ========================================================================== */

body.pdp-v2 product-images.pdp-mobile,
body.pdp-v2 .selector-wrapper.pdp-mobile,
body.pdp-v2 .mobile-inline-size-area,
body.pdp-v2 .mobile-hardcoded-sizes,
body.pdp-v2 .mobile_hero_button,
body.pdp-v2 .hero__button.mobile_hero_button { display: none !important; }

body.pdp-v2 product-images.pdp-desk.selected-variant-img:not(.main-all-images) { display: none !important; }
body.pdp-v2 product-images.pdp-desk.main-all-images { display: block !important; }

@media screen and (max-width: 749px) {
  body.pdp-v2 .index-product.ct-new-pdp { padding-top: 64px; }
  body.pdp-v2 .product__wrapper--small .product__page,
  body.pdp-v2 .product__wrapper--thumbnails .product__page {
    display: block;
    padding: 0 16px;
  }
  body.pdp-v2 .product__wrapper__inner > .np-breadcrumb { padding: 0 16px 10px; }
  body.pdp-v2 product-images.pdp-desk.main-all-images { margin: 0 0 18px !important; }

  body.pdp-v2 .key_feature-item { padding: 10px 6px; gap: 6px; }
  body.pdp-v2 .np-feat-label { font-size: 10.5px; }
  body.pdp-v2 .np-feat-icon { width: 18px; height: 18px; }
  body.pdp-v2 .ct-new-pdp h1.product__title { font-size: 30px; }

  body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label {
    min-width: 42px;
    height: 36px;
    padding: 0 11px;
  }
}

/* ==========================================================================
   29b. MOBILE: below-fold sections
   ========================================================================== */

@media screen and (max-width: 749px) {
  body.pdp-v2 .custom-related-pro-sct .related__products { padding-left: 16px; padding-right: 16px; }
  body.pdp-v2 .custom-related-pro-sct .tabs__head { flex-wrap: wrap; margin-bottom: 18px; }

  body.pdp-v2 .video-with-text .wrapper--full-padded { padding: 36px 16px; }
  body.pdp-v2 .np-reviews__in { padding: 36px 16px; }

  body.pdp-v2 .np-rev-head { gap: 18px; }
  body.pdp-v2 .np-rev-summary { gap: 16px; }
  body.pdp-v2 .np-rev-dist { min-width: 150px; flex: 1 1 150px; }
  body.pdp-v2 .np-rev-date { margin-left: 0; width: 100%; }

  body.pdp-v2 .pdp-grid_heading { margin-bottom: 22px; }
  body.pdp-v2 .pdp-grid_heading h2 { font-size: 28px; }
}

/* ==========================================================================
   30. RUNTIME-VERIFIED FIXES: reveal desk selectors without jQuery,
       one qty control, trust row stacking on mobile
   ========================================================================== */

body.pdp-v2 .selector-wrapper.pdp-desk.custom-hide-on-loading,
body.pdp-v2 .product__block--buttons.custom-hide-on-loading {
  display: block !important;
}

/* np-qty is the quantity control everywhere; theme popout off */
body.pdp-v2 .product__block--buttons popout-select { display: none !important; }

@media screen and (max-width: 749px) {
  body.pdp-v2 .np-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
  body.pdp-v2 .np-trust > span { white-space: nowrap; }
}

/* ==========================================================================
   31. Desk selector wrappers: visible at every width, unconditionally.
   (The mobile hider proved unlocatable across five stylesheet layers;
   this outranks it wherever it lives.)
   ========================================================================== */
body.pdp-v2 .selector-wrapper.pdp-desk { display: block !important; }

/* ==========================================================================
   32. The variant snippet embeds a duplicate order UI inside the size
   wrapper; s31's reveal exposed it. Bury it at every width.
   ========================================================================== */
body.pdp-v2 .product__selectors .product__block--buttons,
body.pdp-v2 .product__selectors .product__submit__buttons,
body.pdp-v2 .np-dupe-atc { display: none !important; }

/* ==========================================================================
   33. Mobile: kill the theme's slider peek gutter inside the gallery
   ========================================================================== */
@media screen and (max-width: 749px) {
  body.pdp-v2 .main-all-images .product__slides,
  body.pdp-v2 .main-all-images .product__slides__holder {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
  }
  body.pdp-v2 .main-all-images .product__slide {
    margin-left: 0 !important;
    left: 0 !important;
  }
}

/* ==========================================================================
   34. ATC internals: kill the btn__added underline stub, unify text/price
   metrics so the label and amount sit on one line
   ========================================================================== */
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .btn__added { display: none !important; }
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .btn__text {
  padding: 0 !important;
  height: auto !important;
  line-height: 1 !important;
}
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .ct-price-pdp,
body.pdp-v2 .product__block--buttons button.custom-quick-view-btn .ct-price-pdp * {
  font-size: 12.5px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- header cart count: was 9.4px in a 17px dot — unreadable ---- */
.header__cart__status,
cart-count.header__cart__status {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Split-screen product layout: image flush to the left edge, details right.
   Mobile: image full-bleed edge to edge.
   ========================================================================== */

/* ---- desktop: 50/50, no page padding on the media side ---- */
@media (min-width: 990px) {
  body.pdp-v2 .product__page {
    grid-template-columns: 50% 50% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    align-items: start;
    column-gap: 0 !important;
  }
  body.pdp-v2 .product__page > .product__images,
  body.pdp-v2 .product__page > product-images {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
  body.pdp-v2 .product__slides,
  body.pdp-v2 .product-single__photos {
    width: 100% !important;
    max-width: none !important;
  }
  body.pdp-v2 .product__photo,
  body.pdp-v2 .product__slide {
    width: 100% !important;
    border-radius: 0 !important;
  }
  body.pdp-v2 .product__photo img,
  body.pdp-v2 .product__slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
  }
  /* details column: breathing room since the grid padding is gone */
  body.pdp-v2 .product__content {
    padding: 40px 8% 60px 6% !important;
    max-width: 640px;
  }
}

/* ---- mobile: full-bleed image, no 16px inset ---- */
@media (max-width: 989px) {
  body.pdp-v2 .product__page {
    padding-left: 0 !important;
    padding-right: 0 !important;
    grid-template-columns: 1fr !important;
  }
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images,
  body.pdp-v2 .product__slides,
  body.pdp-v2 .product-single__photos {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.pdp-v2 .product__photo,
  body.pdp-v2 .product__slide { border-radius: 0 !important; }
  body.pdp-v2 .product__photo img,
  body.pdp-v2 .product__slide img {
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    object-fit: cover;
  }
  /* restore the page gutter for the text below the image */
  body.pdp-v2 .product__content { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- image flush to the header (breadcrumb removed) ---- */
body.pdp-v2 .index-product.section-padding.ct-new-pdp {
  --PT: 0px !important;
  padding-top: 0 !important;
}
body.pdp-v2 .product__wrapper,
body.pdp-v2 .product__wrapper__inner { padding-top: 0 !important; margin-top: 0 !important; }
body.pdp-v2 .np-breadcrumb, body.pdp-v2 .breadcrumbs { display: none !important; }
/* the theme header is position:absolute (87px, overlay) — the image passes
   under it by design, but text and the media badge must clear it. */
body.pdp-v2 .product__content {
  padding-top: calc(var(--np-header-h, 87px) + 24px) !important;
}
body.pdp-v2 .np-media-badge { top: calc(var(--np-header-h, 87px) + 16px) !important; }

@media (max-width: 989px) {
  body.pdp-v2 .np-media-badge { top: calc(var(--np-header-h, 64px) + 12px) !important; }
  body.pdp-v2 .product__content { padding-top: 48px !important; }
}

/* header cart count: theme sets transparent text; force it visible */
.header__cart__status,
cart-count.header__cart__status {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-indent: 0 !important;
  overflow: visible !important;
}

/* ---- gallery: thumbnails off, dots + arrows on ---- */
body.pdp-v2 .product__thumbs,
body.pdp-v2 .product__thumbs__holder,
body.pdp-v2 .product__thumb { display: none !important; }

body.pdp-v2 .product__slides.np-gal { position: relative; }
body.pdp-v2 .product__images.np-gal-wrap { position: relative; }

body.pdp-v2 .np-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.86); color: #1c1a17;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  opacity: 0; transition: opacity .2s ease, background .15s ease;
}
body.pdp-v2 .product__slides.np-gal:hover .np-gal-arrow { opacity: 1; }
body.pdp-v2 .np-gal-arrow:hover { background: #fff; }
body.pdp-v2 .np-gal-arrow--prev { left: 18px; }
body.pdp-v2 .np-gal-arrow--next { right: 18px; }

body.pdp-v2 .np-gal-dots {
  position: absolute; left: 0; right: 0; bottom: 20px;
  z-index: 5; display: flex; justify-content: center; align-items: center; gap: 4px;
}
/* dashes, matching the live theme's slick-dots: 12x2 idle, 26x2 active */
body.pdp-v2 .np-gal-dot {
  width: 12px; height: 2px; padding: 0; border: 0; cursor: pointer;
  border-radius: 0;
  background: rgba(121,37,37,.35);
  transition: background .18s ease, width .18s ease;
}
body.pdp-v2 .np-gal-dot:hover { background: rgba(121,37,37,.6); }
body.pdp-v2 .np-gal-dot.is-active {
  background: #792525;
  width: 26px;
}

/* touch: arrows always visible, dots sit a little higher */
@media (hover: none) {
  body.pdp-v2 .np-gal-arrow { opacity: 1; width: 38px; height: 38px; }
  body.pdp-v2 .np-gal-arrow--prev { left: 10px; }
  body.pdp-v2 .np-gal-arrow--next { right: 10px; }
  body.pdp-v2 .np-gal-dots { bottom: 16px; }
}

/* the track is display:grid — force the controls out of grid flow and give
   them explicit box sizes so they can't collapse to 0x0 */
body.pdp-v2 .product__slides.np-gal > .np-gal-arrow,
body.pdp-v2 .product__slides.np-gal > .np-gal-dots {
  position: absolute !important;
  grid-area: 1 / 1 !important;
  align-self: center; justify-self: stretch;
}
body.pdp-v2 .np-gal-arrow {
  width: 44px !important; height: 44px !important;
  min-width: 44px; min-height: 44px;
  justify-self: start;
}
body.pdp-v2 .np-gal-arrow--next { justify-self: end; }
body.pdp-v2 .np-gal-dots {
  height: 14px !important; min-height: 14px;
  align-self: end; justify-self: center;
  width: auto !important; min-width: 60px;
  left: 50% !important; right: auto !important;
  transform: translateX(-50%);
  bottom: 20px !important; top: auto !important;
}
body.pdp-v2 .np-gal-dot { min-width: 12px; min-height: 2px; }
body.pdp-v2 .np-gal-arrow--prev { left: 18px !important; right: auto !important; }
body.pdp-v2 .np-gal-arrow--next { right: 18px !important; left: auto !important; }
body.pdp-v2 .np-gal-arrow { top: 50% !important; bottom: auto !important; }

/* ---- gallery arrows: restyle the THEME's buttons, show on hover ---- */
body.pdp-v2 .np-gal-arrow { display: none !important; }   /* our duplicates, if any linger */

body.pdp-v2 .product__images .slider__button {
  width: 44px !important; height: 44px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.9) !important;
  color: #1c1a17 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  opacity: 0;
  transition: opacity .2s ease, background .15s ease;
  z-index: 6;
}
body.pdp-v2 .product__images .slider__button svg { width: 18px; height: 18px; }
body.pdp-v2 .product__images:hover .slider__button { opacity: 1; }
body.pdp-v2 .product__images .slider__button:hover { background: #fff !important; }
/* pull them fully inside the frame (theme parks prev at x:-20) */
/* theme applies translateX(-44px)/(+44px) to park the arrows outside the
   frame — cancel it and neutralise the -20px top margin */
body.pdp-v2 .product__images .slider__button--prev,
body.pdp-v2 .product__images .slider__button--next {
  transform: none !important;
  margin: 0 !important;
  top: 50% !important;
  translate: 0 -50% !important;
}
body.pdp-v2 .product__images .slider__button--prev { left: 18px !important; right: auto !important; }
body.pdp-v2 .product__images .slider__button--next { right: 18px !important; left: auto !important; }
/* the arrow layer must not swallow clicks on the image */
body.pdp-v2 .product__images .slider__arrows { pointer-events: none; }
body.pdp-v2 .product__images .slider__button { pointer-events: auto; }

/* touch: always visible */
@media (hover: none) {
  body.pdp-v2 .product__images .slider__button { opacity: 1; width: 38px !important; height: 38px !important; }
}

/* hide the theme's dash indicator — we use dots */
body.pdp-v2 .product__images .slider__dash,
body.pdp-v2 .product__images [class*="dash"] { display: none !important; }

/* ==========================================================================
   Typography: Times New Roman for titles, Open Sans for body
   ========================================================================== */
body.pdp-v2 {
  --np-serif: "Cormorant Garamond", "Times New Roman", Times, serif;
  --np-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* body / UI text */
body.pdp-v2,
body.pdp-v2 p,
body.pdp-v2 li,
body.pdp-v2 span,
body.pdp-v2 a,
body.pdp-v2 div,
body.pdp-v2 label,
body.pdp-v2 button,
body.pdp-v2 select,
body.pdp-v2 input,
body.pdp-v2 .product__description,
body.pdp-v2 .np-feat-label,
body.pdp-v2 .radio__button label,
body.pdp-v2 .swatch__button label,
body.pdp-v2 .product__price,
body.pdp-v2 .selector-wrapper__label,
body.pdp-v2 .np-band,
body.pdp-v2 .np-trust {
  font-family: var(--np-sans) !important;
}

/* titles */
/* headings — include descendants: the theme wraps title text in a <span>,
   which the generic body rule above would otherwise turn into Open Sans */
body.pdp-v2 h1, body.pdp-v2 h1 *,
body.pdp-v2 h2, body.pdp-v2 h2 *,
body.pdp-v2 h3, body.pdp-v2 h3 *,
body.pdp-v2 .product__title, body.pdp-v2 .product__title *,
body.pdp-v2 .np-sticky-bar__title, body.pdp-v2 .np-sticky-bar__title *,
body.pdp-v2 .grid__heading, body.pdp-v2 .grid__heading *,
body.pdp-v2 .section__title, body.pdp-v2 .section__title * {
  /* declare the stack literally rather than via var() — quoted family names
     inside a custom property resolve inconsistently across browsers */
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
  letter-spacing: .01em;
  font-weight: 400;
}

/* dashes are a mobile affordance only — desktop has hover arrows */
@media (min-width: 990px) {
  body.pdp-v2 .np-gal-dots { display: none !important; }
}

/* product name in full caps */
body.pdp-v2 .product__title,
body.pdp-v2 h1.product__title,
body.pdp-v2 .product__title * {
  text-transform: uppercase !important;
  letter-spacing: .03em;
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
}

/* ---- hide the "Select a colour" placeholder legend ---- */
body.pdp-v2 .selector-wrapper--fullwidth .radio__legend__value,
body.pdp-v2 .swatch__button + .radio__legend__value { }
body.pdp-v2 .radio__legend__value:where(:not(:empty)) { }
/* only hide when it is the placeholder text, keep the chosen value */
body.pdp-v2 .np-hide-legend { display: none !important; }

/* ---- size guide pill, last in the size row ---- */
body.pdp-v2 .np-size-guide-pill {
  display: inline-flex; align-items: center; gap: 7px;
  min-width: 66px; height: 46px; padding: 0 16px;
  margin-left: 4px;
  border: 1px solid var(--np-line); border-radius: 999px;
  background: #fff; color: var(--npct-ink, #1c1a17);
  font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: 400;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
body.pdp-v2 .np-size-guide-pill:hover { border-color: #1c1a17; }
body.pdp-v2 .np-size-guide-pill svg { flex: 0 0 auto; }
/* the original size-guide link elsewhere is now redundant */
body.pdp-v2 .selector-wrapper--size .size-guide-link,
body.pdp-v2 .product__block .size-guide-btn:not(.np-size-guide-pill) { display: none !important; }

/* original size-guide trigger, replaced by the inline pill */
body.pdp-v2 .np-sg-original { display: none !important; }

/* keep the pill inline with the size labels */
body.pdp-v2 .selector-wrapper--size .np-size-guide-pill {
  vertical-align: middle;
  margin: 0 0 0 4px;
}

/* selected colour / size value on the right of each selector label — remove */
body.pdp-v2 .radio__legend__value,
body.pdp-v2 .selector-wrapper__value,
body.pdp-v2 .selector-wrapper--size .radio__legend__value,
body.pdp-v2 .selector-wrapper--fullwidth .radio__legend__value {
  display: none !important;
}

/* ==========================================================================
   Feature block — option D: tinted icon chip in a subtle card
   ========================================================================== */
body.pdp-v2 .pdp_key_features_wrp,
body.pdp-v2 .pdp_key_features ul {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  align-items: stretch;
}
body.pdp-v2 .key_feature-item {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 18px 12px !important;
  border: 1px solid #eee7dc !important;
  border-radius: 10px !important;
  background: #fff !important;
  min-height: 0 !important;
}
body.pdp-v2 .np-feat-chip {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 999px;
  background: #f5efe7;
  display: flex; align-items: center; justify-content: center;
  margin: 0 0 11px;
}
body.pdp-v2 .np-feat-icon { width: 19px; height: 19px; color: #1c1a17; }
body.pdp-v2 .np-feat-label {
  font-family: "Open Sans", sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.35;
  color: #1c1a17;
}

@media (max-width: 767px) {
  body.pdp-v2 .pdp_key_features_wrp,
  body.pdp-v2 .pdp_key_features ul { gap: 8px; }
  body.pdp-v2 .key_feature-item { padding: 14px 8px !important; }
  body.pdp-v2 .np-feat-chip { width: 34px; height: 34px; flex-basis: 34px; margin-bottom: 9px; }
  body.pdp-v2 .np-feat-icon { width: 17px; height: 17px; }
  body.pdp-v2 .np-feat-label { font-size: 11.5px !important; }
}

/* ---- "You might also like": button below the cards, centered ---- */
body.pdp-v2 .custom-tab-sct_discover,
body.pdp-v2 .hero__button.custom-tab-sct_discover {
  position: static !important;
  float: none !important;
  display: flex !important;
  justify-content: center;
  width: 100%;
  margin: 34px 0 0 !important;
  top: auto !important; right: auto !important; left: auto !important;
  transform: none !important;
}
body.pdp-v2 .custom-tab-sct_discover .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 200px; height: 48px; padding: 0 32px;
  border: 1px solid #1c1a17 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1c1a17 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: none;
  transition: background .16s ease, color .16s ease;
}
body.pdp-v2 .custom-tab-sct_discover .btn:hover {
  background: #1c1a17 !important; color: #fff !important;
}

/* CTA once relocated below the grid */
body.pdp-v2 .np-related-cta {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 34px 0 0 !important;
  padding: 0 !important;
}

/* ---- View more: real outlined button (.btn--text strips border/padding) ---- */
body.pdp-v2 .np-related-cta a.btn,
body.pdp-v2 .np-related-cta a.btn--text,
body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text.btn--large.btn--secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  height: 50px !important;
  padding: 0 34px !important;
  border: 1px solid #1c1a17 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #1c1a17 !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: background .16s ease, color .16s ease !important;
}
body.pdp-v2 .np-related-cta a.btn:hover,
body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text:hover {
  background: #1c1a17 !important;
  color: #fff !important;
}
/* the theme underlines .btn--text via a pseudo-element */
body.pdp-v2 .np-related-cta a.btn::before,
body.pdp-v2 .np-related-cta a.btn::after,
body.pdp-v2 .np-related-cta a.btn span::before,
body.pdp-v2 .np-related-cta a.btn span::after {
  display: none !important;
  content: none !important;
}
body.pdp-v2 .np-related-cta a.btn span {
  border: 0 !important;
  text-decoration: none !important;
  background: none !important;
}

/* ==========================================================================
   "The Narpine standard" (video-with-text)
   Stone tone sampled from the image backdrop; blends into the reviews
   section below instead of sitting in a dark box.
   ========================================================================== */
body.pdp-v2 .video-with-text {
  background: #dbd7cf !important;   /* matches the image's backdrop */
  color: #1c1a17 !important;
  padding-bottom: 0 !important;
}
body.pdp-v2 .video-with-text *,
body.pdp-v2 .video-with-text p,
body.pdp-v2 .video-with-text h2,
body.pdp-v2 .video-with-text h3 { color: #1c1a17 !important; }
body.pdp-v2 .video-with-text .video-with-text_eyebrow,
body.pdp-v2 .video-with-text .subheading,
body.pdp-v2 .video-with-text small { color: #6f675c !important; }

/* image sits flush, no frame */
body.pdp-v2 .video-with-text img,
body.pdp-v2 .video-with-text video {
  display: block; width: 100%; height: auto;
  border-radius: 0 !important; box-shadow: none !important;
}

/* seamless hand-off into the reviews section */
body.pdp-v2 #shopify-section-template--18168564777160__narpine_reviews,
body.pdp-v2 [id*="narpine_reviews"] {
  background: #dbd7cf !important;
}
body.pdp-v2 [id*="narpine_reviews"] > * { background: transparent !important; }

/* ---- MOBILE: image first (flush to top), text below ---- */
@media (max-width: 989px) {
  body.pdp-v2 .video-with-text {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.pdp-v2 .video-with-text .wrapper--full-padded {
    padding: 0 !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_wrp {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_media {
    order: 1 !important;
    position: relative;
    width: 100% !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    line-height: 0;
    /* fixed portrait frame; the image covers it exactly — no gap, no overflow */
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 389 / 519 !important;   /* the image's own ratio — no crop */
    overflow: hidden;
  }
  body.pdp-v2 .video-with-text_media img,
  body.pdp-v2 .video-with-text_media video {
    display: block;
    width: 100% !important; max-width: none !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
  }
  /* fade the image's own backdrop into the stone field */
  body.pdp-v2 .video-with-text_media::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px;
    height: 110px; pointer-events: none;
    background: linear-gradient(to bottom,
      rgba(219,215,207,0) 0%,
      rgba(219,215,207,.55) 45%,
      rgba(219,215,207,.9) 78%,
      #dbd7cf 100%);
  }
  body.pdp-v2 .video-with-text_content {
    order: 2 !important;
    padding: 4px 20px 44px !important;
    margin: 0 !important;
    text-align: left;
  }
  /* eyebrow must read on stone */
  body.pdp-v2 .video-with-text_content .subheading,
  body.pdp-v2 .video-with-text_content small,
  body.pdp-v2 .video-with-text_content p:first-child {
    color: #6f675c !important;
    letter-spacing: .16em;
  }
}

/* ---- DESKTOP: same stone field, image and copy side by side ---- */
@media (min-width: 990px) {
  body.pdp-v2 .video-with-text_wrp {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr;   /* image slightly wider */
    align-items: center;
    gap: 64px;
    max-width: none !important;
  }
  /* the theme pins both children to 280px — let them fill their columns */
  body.pdp-v2 .video-with-text_wrp > * {
    width: 100% !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_media {
    width: 100% !important;
    max-width: none !important;
  }
  body.pdp-v2 .video-with-text_media img,
  body.pdp-v2 .video-with-text_media video {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  body.pdp-v2 .video-with-text_content { padding: 0 6% 0 0 !important; }
  body.pdp-v2 .video-with-text { padding-top: 84px !important; padding-bottom: 84px !important; }
}

/* ---- "Made right" copy: readable on the stone field ---- */
/* body copy was rgb(111,103,92) on #dbd7cf = 3.88:1, below AA */
body.pdp-v2 .video-with-text_content p,
body.pdp-v2 .video-with-text_content .rte,
body.pdp-v2 .video-with-text_content .rte p {
  color: #3d3830 !important;          /* ~8.4:1 on #dbd7cf */
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
  letter-spacing: 0 !important;
}
/* eyebrow: keep it quiet but legible */
body.pdp-v2 .video-with-text_content .subheading,
body.pdp-v2 .video-with-text_content small {
  color: #6b6252 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
}
/* heading should outrank the paragraph */
body.pdp-v2 .video-with-text_content h2,
body.pdp-v2 .video-with-text_content h3,
body.pdp-v2 .video-with-text_content .heading {
  color: #1c1a17 !important;
  font-family: "Cormorant Garamond", "Times New Roman", serif !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  margin: 6px 0 14px !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
@media (min-width: 990px) {
  body.pdp-v2 .video-with-text_content h2,
  body.pdp-v2 .video-with-text_content h3,
  body.pdp-v2 .video-with-text_content .heading { font-size: 38px !important; }
  body.pdp-v2 .video-with-text_content p { font-size: 16px !important; }
}

/* the paragraph lives in .video-with-text_rte (not .rte) */
body.pdp-v2 .video-with-text_rte,
body.pdp-v2 .video-with-text_rte p,
body.pdp-v2 .video-with-text_contentwrp p {
  color: #3d3830 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}
@media (min-width: 990px) {
  body.pdp-v2 .video-with-text_rte p { font-size: 16px !important; }
}

/* ==========================================================================
   "You might also like" — mobile: title left, price right, tighter type
   ========================================================================== */
@media (max-width: 767px) {
  /* section heading */
  body.pdp-v2 .shopify-section .grid__heading,
  body.pdp-v2 .shopify-section .section__title,
  body.pdp-v2 .custom-tab-sct .grid__heading {
    font-size: 20px !important;
    line-height: 1.2;
  }

  /* the row holding title + price must actually span the card */
  body.pdp-v2 .product-item .product-link {
    display: flex !important;
    width: 100% !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 10px;
  }
  body.pdp-v2 .product-item .product-tag-desc {
    flex: 1 1 auto !important;
    min-width: 0;
    text-align: left !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.pdp-v2 .product-item .product-item__price__holder {
    flex: 0 0 auto !important;
    margin-left: auto !important;      /* pushes the price to the right edge */
    text-align: right !important;
    justify-content: flex-end !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    white-space: nowrap;
  }
  body.pdp-v2 .product-item .product-item__price__holder * {
    font-size: 12.5px !important;
    font-weight: 400 !important;
  }
  body.pdp-v2 .product-item .product-item__info { margin-top: 10px !important; }
}

/* the related heading is h2.tab-link (not .grid__heading) */
@media (max-width: 767px) {
  body.pdp-v2 .tabs .tab-link,
  body.pdp-v2 h2.tab-link,
  body.pdp-v2 .tabs__head h2 {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* mobile heading size — must match .custom-related-pro-sct specificity */
@media (max-width: 767px) {
  body.pdp-v2 .custom-related-pro-sct .tab-link,
  body.pdp-v2 .custom-related-pro-sct h2.tab-link {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
}

/* ---- "THE NARPINE STANDARD" eyebrow ----
   It is a ::before pseudo-element on .video-with-text_contentwrp, not a DOM
   node — it was rgb(168,159,146) on the stone bg (~2.1:1, unreadable). */
body.pdp-v2 .video-with-text_contentwrp::before {
  color: #524a3c !important;   /* 6.0:1 on #dbd7cf */
  opacity: 1 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .2em !important;
}

/* ==========================================================================
   Fixes: badge position, size-guide pill height, view-more, made-right crop
   ========================================================================== */

/* 1 — "ORGANIC COTTON" tag to the bottom of the image */
body.pdp-v2 .np-media-badge {
  top: auto !important;
  bottom: 18px !important;
  left: 16px !important;
}
@media (max-width: 989px) {
  body.pdp-v2 .np-media-badge { bottom: 44px !important; left: 14px !important; }
}

/* 3 — size-guide pill: same height as size pills (longer is fine) */
@media (max-width: 989px) {
  body.pdp-v2 .np-size-guide-pill {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
  body.pdp-v2 .np-size-guide-pill svg { width: 13px; height: 13px; }
}

/* 4 — "View more" smaller on mobile + breathing room above it */
@media (max-width: 767px) {
  body.pdp-v2 .np-related-cta { margin-top: 26px !important; }
  body.pdp-v2 .np-related-cta a.btn,
  body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text.btn--large.btn--secondary {
    min-width: 150px !important;
    height: 40px !important;
    padding: 0 22px !important;
    font-size: 12px !important;
  }
}

/* 5 — "Made right": show more of the rope, shift the crop down */
@media (max-width: 989px) {
  /* show the whole garment: rope at the top AND the hem at the bottom.
     A cover-crop can only ever show part of a tall image, so contain it. */
  /* container takes the image's own 389x519 portrait ratio so nothing is
     cropped and nothing is letterboxed */
  body.pdp-v2 .video-with-text_media {
    aspect-ratio: 389 / 519 !important;
    height: auto !important;
    min-height: 0 !important;
  }
  body.pdp-v2 .video-with-text_media img,
  body.pdp-v2 .video-with-text_media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}
@media (max-width: 767px) {
}

/* dashes live on .product__images (the non-scrolling wrapper) */
body.pdp-v2 .product__images.np-gal-wrap { position: relative; }
body.pdp-v2 .product__images.np-gal-wrap > .np-gal-dots {
  position: absolute !important;
  left: 50% !important; right: auto !important;
  bottom: 18px !important; top: auto !important;
  transform: translateX(-50%) !important;
  z-index: 6;
  display: flex !important;
  align-items: center;
  gap: 4px;
  width: auto !important; min-width: 60px;
  height: 14px !important;
}

/* the media block is a flex item; flex stretching forced height:360px and
   overrode its aspect-ratio. Opt it out of flex sizing. */
@media (max-width: 989px) {
  body.pdp-v2 .video-with-text_wrp { align-items: flex-start !important; }
  body.pdp-v2 .video-with-text_media {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    height: auto !important;
    aspect-ratio: 389 / 519 !important;
  }
}

/* ==========================================================================
   Desktop: shorter hero image, tighter size pills
   ========================================================================== */
@media (min-width: 990px) {
  /* 8 — image was 1049px tall (taller than the viewport) and the details
     column ran out 66px early, leaving white space. Cap the media height
     and let the columns match. */
  body.pdp-v2 .product__page {
    align-items: stretch !important;
  }
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images { height: 100% !important; }
  /* image column stretches to match whatever the details column needs, so
     neither side leaves white space */
  body.pdp-v2 .product__slides {
    height: 100% !important;
    max-height: none !important;
  }
  body.pdp-v2 .product__slide,
  body.pdp-v2 .product__photo {
    height: 100% !important;
    max-height: none !important;
  }
  body.pdp-v2 .product__slides img,
  body.pdp-v2 .product__photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 22%;
  }
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images { align-self: stretch !important; }
  /* details column: keep it centred against the image rather than
     top-aligned with a gap underneath */
  body.pdp-v2 .product__content {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 0 !important;
  }

  /* 9 — size pills and labels a step smaller */
  body.pdp-v2 .selector-wrapper--size.pdp-desk .radio__button label {
    min-width: 56px !important;
    height: 38px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  body.pdp-v2 .np-size-guide-pill {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
  }
  body.pdp-v2 .np-size-guide-pill svg { width: 13px; height: 13px; }
  body.pdp-v2 .selector-wrapper__label,
  body.pdp-v2 .radio__legend,
  body.pdp-v2 .selector-wrapper--size .radio__legend {
    font-size: 11px !important;
    letter-spacing: .14em;
  }
  /* colour swatches proportionally smaller too */
  body.pdp-v2 .selector-wrapper--fullwidth.pdp-desk .swatch__button label {
    width: 32px !important; height: 32px !important;
  }
}

/* desktop: content column sized by its content, image matches it */
@media (min-width: 990px) {
  body.pdp-v2 .product__content {
    padding-top: calc(var(--np-header-h, 87px) + 20px) !important;
    padding-bottom: 32px !important;
  }
}

/* ==========================================================================
   Desktop hero: the source image is 524x765. Stretching it to a 720px
   column scaled it to 1049px tall, which set the grid row height and forced
   the details column to match (leaving slack under the content).
   Cap the row so the image drives a sane height.
   ========================================================================== */
@media (min-width: 990px) {
  /* THE ROW IS A FIXED HEIGHT. Image fills it, badge/arrows sit inside it,
     content column is exactly the same height and scrolls nothing. */
  body.pdp-v2 .product__page {
    align-items: start !important;
  }
  /* Cap the media so the 524x765 source is not scaled up to 1049px, which
     was inflating the grid row and leaving slack under the content.
     780px keeps the image close to the content height on a 900px viewport. */
  /* image fills its column exactly: the badge and arrows are anchored to the
     wrapper, so a shorter image left them orphaned in empty space below it. */
  /* sticky media column: stays in view while the details scroll past */
  body.pdp-v2 .product__images,
  body.pdp-v2 product-images {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden;
  }
  body.pdp-v2 .product__slides,
  body.pdp-v2 .product__slide,
  body.pdp-v2 .product__photo {
    height: 100% !important;
    max-height: 100% !important;
  }
  body.pdp-v2 .product__slides img,
  body.pdp-v2 .product__photo img {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center 20%;
  }
  /* content no longer needs to be centred against an over-tall image */
  body.pdp-v2 .product__content {
    height: auto !important;
    max-height: none !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--np-header-h, 87px) + 48px) !important;
    padding-bottom: 72px !important;
    overflow: visible !important;
  }
}


/* sticky media: every layer must fit the sticky box, otherwise the image is
   taller than its container and simply scrolls past */
@media (min-width: 990px) {
  body.pdp-v2 .product__images .product__slides,
  body.pdp-v2 .product__images .product__slide,
  body.pdp-v2 .product__images .product__photo,
  body.pdp-v2 .product__images figure,
  body.pdp-v2 .product__images .image-wrapper,
  body.pdp-v2 .product__images img {
    height: calc(100vh - var(--np-header-h, 87px) - 24px) !important;
    max-height: calc(100vh - var(--np-header-h, 87px) - 24px) !important;
    min-height: 0 !important;
  }
  body.pdp-v2 .product__images img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }
}

/* ==========================================================================
   Desktop: image pinned full-height under the header (as before),
   only the right column scrolls.
   ========================================================================== */
@media (min-width: 990px) {
  body.pdp-v2 .product__page { align-items: start !important; }

  body.pdp-v2 .product__images,
  body.pdp-v2 product-images {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: 780px !important;
    max-height: 780px !important;
    overflow: hidden !important;
  }
  body.pdp-v2 .product__images .product__slides,
  body.pdp-v2 .product__images .product__slide,
  body.pdp-v2 .product__images .product__photo,
  body.pdp-v2 .product__images figure,
  body.pdp-v2 .product__images .image-wrapper,
  body.pdp-v2 .product__images img {
    height: 780px !important;
    max-height: 780px !important;
    min-height: 0 !important;
  }
  body.pdp-v2 .product__images img {
    width: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;
  }

  /* right column keeps its own margin and scrolls naturally */
  body.pdp-v2 .product__content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    justify-content: flex-start !important;
    padding-top: calc(var(--np-header-h, 87px) + 48px) !important;
    padding-bottom: 24px !important;
  }
  /* no dead space under the last block (Details & care) */
  body.pdp-v2 .product__content > *:last-child,
  body.pdp-v2 .form__wrapper > *:last-child { margin-bottom: 0 !important; }
  body.pdp-v2 .product__block:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; }
}

/* review photo (optional per review) */
body.pdp-v2 .np-rev-photo { margin-top: 10px; }
body.pdp-v2 .np-rev-photo img {
  width: 92px; height: 92px;
  object-fit: cover; border-radius: 8px;
  border: 1px solid var(--np-line);
  display: block;
}
@media (max-width: 767px) {
  body.pdp-v2 .np-rev-photo img { width: 76px; height: 76px; }
}

/* ---- price row: current price, struck compare-at, and % off on one line ---- */
body.pdp-v2 .product__price {
  display: flex !important;
  align-items: center;      /* baseline mis-aligns across sizes */
  flex-wrap: wrap;
  gap: 12px;
  line-height: 1;
}
body.pdp-v2 .product__price [data-product-price] {
  font-size: 26px; font-weight: 600; color: var(--np-ink, #1c1a17);
  order: 1;
  line-height: 1;
  display: inline-flex; align-items: center;
}
body.pdp-v2 .product__price--sale { color: #1c1a17 !important; }
body.pdp-v2 .product__price--strike {
  order: 2;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #9a9086 !important;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  line-height: 1;
  display: inline-flex; align-items: center;
  margin: 0 !important; padding: 0 !important;
  position: relative; top: 1px;   /* optical centre against the 26px price */
}
body.pdp-v2 .np-save-badge {
  order: 3;
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; padding: 0 10px;
  line-height: 1;
  align-self: center;
  border-radius: 999px;
  background: #792525; color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  white-space: nowrap;
}
body.pdp-v2 .np-save-badge[hidden] { display: none !important; }
@media (max-width: 767px) {
  body.pdp-v2 .product__price [data-product-price] { font-size: 22px; }
  body.pdp-v2 .product__price--strike { font-size: 14px !important; }
  body.pdp-v2 .np-save-badge { height: 22px; font-size: 11px; padding: 0 9px; }
}

/* the price wrapper collapsed to 0x0 on mobile when made flex — give the
   row and its parent explicit width so it lays out at every breakpoint */
body.pdp-v2 .product__price__wrap {
  display: block !important;
  width: 100% !important;
}
body.pdp-v2 .product__price {
  width: 100% !important;
  min-width: 0;
  min-height: 30px;
}
body.pdp-v2 .product__price [data-product-price],
body.pdp-v2 .product__price--strike,
body.pdp-v2 .np-save-badge { flex: 0 0 auto; }


/* ==========================================================================
   Pack switcher — separate products, linked (True Classic pattern)
   ========================================================================== */
body.pdp-v2 .np-packs { margin: 0 0 22px; }
body.pdp-v2 .np-packs__label {
  font-family: "Open Sans", sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #6f675c; margin-bottom: 10px;
}
body.pdp-v2 .np-packs__row { display: flex; gap: 10px; flex-wrap: wrap; }
body.pdp-v2 .np-pack {
  position: relative;
  flex: 1 1 0; min-width: 130px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 14px 12px 12px;
  border: 1px solid #e5e5e5; border-radius: 10px;
  background: #fff; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
body.pdp-v2 .np-pack:hover { border-color: #1c1a17; }
body.pdp-v2 .np-pack.is-current {
  border-color: #1c1a17; border-width: 1.5px;
  background: #faf8f5;
}
body.pdp-v2 .np-pack__name {
  font-family: "Open Sans", sans-serif;
  font-size: 13.5px; font-weight: 600; color: #1c1a17;
}
body.pdp-v2 .np-pack__price {
  font-family: "Open Sans", sans-serif;
  font-size: 12.5px; font-weight: 400; color: #6f675c;
}
body.pdp-v2 .np-pack__flag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: #792525; color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 767px) {
  body.pdp-v2 .np-pack { min-width: 0; padding: 12px 8px 10px; }
  body.pdp-v2 .np-pack__name { font-size: 12.5px; }
  body.pdp-v2 .np-pack__price { font-size: 11.5px; }
}

/* ---- combo cross-link button ---- */
body.pdp-v2 .np-combo-link {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin: 0 0 20px;
  border: 1px solid #e0d9cd; border-radius: 10px;
  background: #faf8f5; text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
body.pdp-v2 .np-combo-link:hover { border-color: #1c1a17; background: #f5f1ea; }
body.pdp-v2 .np-combo-link__main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
body.pdp-v2 .np-combo-link__title {
  font-family: "Open Sans", sans-serif; font-size: 13.5px; font-weight: 600; color: #1c1a17;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.pdp-v2 .np-combo-link__meta {
  font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 400; color: #6f675c;
}
body.pdp-v2 .np-combo-link__save {
  flex: 0 0 auto;
  background: #792525; color: #fff; border-radius: 999px;
  font-family: "Open Sans", sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; white-space: nowrap;
}
body.pdp-v2 .np-combo-link__arrow { flex: 0 0 auto; color: #1c1a17; }
@media (max-width: 767px) {
  body.pdp-v2 .np-combo-link { padding: 12px 14px; margin-bottom: 16px; }
  body.pdp-v2 .np-combo-link__title { font-size: 12.5px; }
}

/* ---- size guide on mobile ----
   .product-modal__content collapsed to 0 height inside a full-height popup,
   so the chart had nowhere to render and appeared cropped. Give the stack
   real height and let the content scroll. */
@media (max-width: 989px) {
  body.pdp-v2 .main_popup-size-guide {
    display: flex !important;
    flex-direction: column;
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  body.pdp-v2 .main_popup-size-guide .product-modal__outer {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex; flex-direction: column;
  }
  body.pdp-v2 .main_popup-size-guide .product-modal__content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 32px;
  }
}

/* ---- size guide chart: horizontal scroll on mobile (26 Aug 2026) ----
   The 9-size table needs ~571px. Inside the modal the content box is ~358px
   on a 390px phone, and .product-modal__content is overflow-x:hidden, so the
   last columns (6XL) were clipped AND unreachable — no swipe could reach them.
   Android squeaked in only because its text metrics are marginally narrower.

   Fix: give .custom-popup-size-chart its own horizontal scroller.
   table width:max-content + min-width:100% means the table takes exactly the
   space it needs — so phones where it already fits get NO scrollbar, and only
   the ones that overflow become scrollable. The layered gradients are the
   standard CSS scroll-shadow: the edge shadows appear only when there is
   more content in that direction, so the affordance is self-hiding. */
@media (max-width: 989px) {
  body.pdp-v2 .main_popup-size-guide .custom-popup-size-chart {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 36px 100% no-repeat local,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 36px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) left center / 13px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) right center / 13px 100% no-repeat scroll;
  }
  body.pdp-v2 .main_popup-size-guide .custom-popup-size-chart table {
    width: max-content !important;
    min-width: 100%;
  }
  body.pdp-v2 .main_popup-size-guide .custom-popup-size-chart table th,
  body.pdp-v2 .main_popup-size-guide .custom-popup-size-chart table td {
    white-space: nowrap;
  }
}

/* ---- size guide modal height + sticky-bar overlap (26 Aug 2026) ----
   The earlier mobile rule used ONLY `height:100dvh` / `max-height:100dvh`.
   dvh units are iOS Safari 15.4+; on older iOS both declarations are invalid
   and dropped, leaving the panel with no height at all — so it rendered as a
   short band with the page's sticky ATC row visible underneath it. Android
   Chrome supports dvh, which is why it looked correct there.

   Declaration order below is deliberate: each browser keeps the LAST value it
   can parse. Old iOS stops at -webkit-fill-available, modern browsers reach
   dvh. Do not reorder these. */
@media (max-width: 989px) {
  body.pdp-v2 .main_popup-size-guide {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
    max-height: none !important;
  }
  body.pdp-v2 .custom-popup-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    height: 100vh !important;
    height: -webkit-fill-available !important;
    height: 100dvh !important;
  }
  /* the sticky ATC bar sits in its own stacking context (z-index 90); keep it
     out of the way entirely while any popup is open rather than relying on the
     z-index race, which is what appeared to fail on the client's device. */
  body.pdp-v2.popup-body .np-sticky-bar {
    display: none !important;
  }
}