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


/* ==========================================================================
   PDP REVISION — client feedback, 06 Sep 2026
   Appended as one block so it can be reverted by deleting from this marker
   down. Everything is scoped to body.pdp-v2.

   1. Simple ATC        — no price in button, no qty stepper, full-width
   2. Mobile gutters    — 31px each side -> 12px
   3. Mobile selectors  — smaller size/colour type
   4. Boxy              — every rounded shape squared off
   5. Combo card        — styles for the rebuilt np-pack-switcher
   ========================================================================== */

/* -- 1 ------------------------------------------------- SIMPLE ATC ------ */

/* Price lived INSIDE the add-to-cart button (.ct-price-pdp). The price is
   already stated above the fold, so repeating it in the button was noise. */
body.pdp-v2 .product__submit__item button.btn .ct-price-pdp,
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn .ct-price-pdp,
body.pdp-v2 .ct-new-pdp .custom-quick-view-btn .ct-price-pdp {
  display: none !important;
}

/* Quantity stepper removed. The markup keeps its input (value 1) so the form
   still posts a quantity — we hide the control, we do not delete the field. */
body.pdp-v2 .product__block--buttons .quantity-selector,
body.pdp-v2 .product__block--buttons quantity-counter,
body.pdp-v2 .product__block--buttons .select-popout,
body.pdp-v2 .np-qty {
  display: none !important;
}

/* With the stepper gone the button takes the whole row. --inline was the
   flex row that used to sit qty and button side by side. */
body.pdp-v2 .product__submit__buttons,
body.pdp-v2 .product__submit__buttons--inline {
  display: block !important;
}
body.pdp-v2 .product__submit__buttons .product__submit__item,
body.pdp-v2 .product__submit__buttons .product__submit__item--inline {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
body.pdp-v2 .product__submit__buttons .product__submit__item button.btn {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* -- 2 -------------------------------------------- MOBILE GUTTERS ------- */

/* The copy column was inset twice: .product__content (16px) plus .form__width
   (15px) = 31px each side, leaving only 313px of usable width on a 375px
   phone. Zero the inner one and trim the outer to 12px -> 351px usable. */
@media screen and (max-width: 749px) {
  body.pdp-v2 .product__content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.pdp-v2 .form__width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* -- 3 ------------------------------------------ MOBILE SELECTORS ------- */

@media screen and (max-width: 749px) {
  /* "SIZE" / "COLOUR" legends */
  body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__legend,
  body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper--size .radio__fieldset legend.radio__legend.radio__legend--size {
    font-size: 10.5px !important;
    letter-spacing: .12em;
  }

  /* size pills: smaller type + tighter box */
  body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label {
    font-size: 11.5px !important;
    min-width: 38px !important;
    height: 32px !important;
    padding: 0 9px !important;
  }
  body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons {
    gap: 6px !important;
  }

  /* colour swatches */
  body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input ~ label {
    width: 26px !important;
    height: 26px !important;
  }
  body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper .radio__fieldset--swatches .radio__buttons {
    gap: 9px !important;
  }

  /* the small "Sizing" link in the size legend */
  body.pdp-v2 .np-size-guide-pill { font-size: 10.5px !important; }
}

/* -- 4 ------------------------------------------------------ BOXY ------- */

/* Every rounded shape in the PDP squared off. Deliberately NOT squared:
   .np-rev-avatar (a face crop — a square avatar reads as a broken image)
   and scrollbar thumbs. Say the word and those go too. */
body.pdp-v2 { --np-radius: 0px; }

body.pdp-v2 .pdp_key_features ul,
body.pdp-v2 .key_feature-item,
body.pdp-v2 .np-feat-chip,
body.pdp-v2 .product__photo,
body.pdp-v2 .product__images .product__photo,
body.pdp-v2 .product-thumbs img,
body.pdp-v2 .product__thumb img,
body.pdp-v2 .product__thumb .image-wrapper,
body.pdp-v2 .np-media-badge,
body.pdp-v2 .np-qty,
body.pdp-v2 .np-bundle,
body.pdp-v2 .np-bundle__pill,
body.pdp-v2 .np-sticky-bar__thumb,
body.pdp-v2 .np-sticky-bar__btn,
body.pdp-v2 .np-size-guide-pill,
body.pdp-v2 .np-gal-arrow,
body.pdp-v2 .product__images .slider__button,
body.pdp-v2 .custom-related-pro-sct .product-item .image-wrapper,
body.pdp-v2 .video-with-text_media,
body.pdp-v2 .np-rev-card,
body.pdp-v2 .np-rev-write,
body.pdp-v2 .np-rev-toolbar input,
body.pdp-v2 .np-rev-dist__bar,
body.pdp-v2 .custom-tab-sct_discover .btn,
body.pdp-v2 .custom-tab-sct_discover a.btn.btn--text.btn--large.btn--secondary,
body.pdp-v2 .product__submit__buttons .product__submit__item button.btn,
body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn,
body.pdp-v2 .form__wrapper .product__block .product__selectors .selector-wrapper.selector-wrapper--size .radio__buttons .radio__button label,
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input ~ label {
  border-radius: 0 !important;
}

/* -- 5 ------------------------------------------------ COMBO CARD ------- */

body.pdp-v2 .np-combo-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0 0 18px;
  border: 1px solid var(--np-line);
  border-radius: 0;
  background: #fff;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .18s ease, background .18s ease;
}
body.pdp-v2 .np-combo-card:hover {
  border-color: var(--np-ink);
  background: #fcfbf9;
}

/* --- the two garment shots: this is what stops it reading as an alert --- */
body.pdp-v2 .np-combo-card__media {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 10px 8px 8px;
  background: var(--np-panel);
  border-right: 1px solid var(--np-line);
}
body.pdp-v2 .np-combo-card__shot {
  display: block;
  width: 46px;
  height: 58px;
  overflow: hidden;
  background: #fff;
}
body.pdp-v2 .np-combo-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.pdp-v2 .np-combo-card__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  font-size: 12px;
  line-height: 1;
  color: var(--np-faint);
  font-weight: 400;
}

/* --- copy --- */
body.pdp-v2 .np-combo-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 10px 14px;
}
body.pdp-v2 .np-combo-card__eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--np-muted);
  line-height: 1;
}
body.pdp-v2 .np-combo-card__savetext {
  color: var(--np-accent);
  letter-spacing: .12em;
}
body.pdp-v2 .np-combo-card__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--np-ink);
  /* two lines then ellipsis — the old build truncated mid-word on one line,
     which is part of why it looked like a system message */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.pdp-v2 .np-combo-card__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.2;
}
body.pdp-v2 .np-combo-card__now { color: var(--np-ink); font-weight: 600; }
body.pdp-v2 .np-combo-card__was { color: var(--np-faint); font-weight: 400; }
body.pdp-v2 .np-combo-card__cta {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--np-ink);
  border-bottom: 1px solid var(--np-ink);
  padding-bottom: 1px;
  line-height: 1.1;
}

@media screen and (max-width: 749px) {
  body.pdp-v2 .np-combo-card { margin-bottom: 14px; }
  body.pdp-v2 .np-combo-card__media { padding: 7px 8px; }
  body.pdp-v2 .np-combo-card__shot { width: 40px; height: 50px; }
  body.pdp-v2 .np-combo-card__body { padding: 9px 11px; gap: 2px; }
  body.pdp-v2 .np-combo-card__title { font-size: 12.5px; }
  body.pdp-v2 .np-combo-card__prices { font-size: 12px; gap: 6px; }
  body.pdp-v2 .np-combo-card__cta { font-size: 10px; }
}

/* legacy np-combo-link styles are dead once the snippet is swapped, but the
   markup may persist in a cached render — keep it from flashing as an alert */
body.pdp-v2 .np-combo-link { border-radius: 0 !important; }

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


/* ==========================================================================
   PDP TYPOGRAPHY — one display font, one text font. 06 Sep 2026
   Client: "too many fonts ... only title of product" should be the serif.

   CAUSE: the v2 build (line ~1897) put Cormorant Garamond on EVERY h1/h2/h3
   plus .product__title, .np-sticky-bar__title, .grid__heading and
   .section__title. The theme's own --FONT-STACK-HEADING is already
   "Open Sans" — the serif was ours, applied on top with !important, so
   section headings, accordion headers and size-guide subheads all diverged
   from the body text.

   RULE FROM HERE: Cormorant Garamond appears exactly once on the page — the
   product title. Everything else is Open Sans.

   These rules sit at the end of the file so they outrank the earlier
   !important declarations (same specificity, later wins).
   ========================================================================== */

/* -- 1. everything 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 h4, body.pdp-v2 h4 *,
body.pdp-v2 h5, body.pdp-v2 h5 *,
body.pdp-v2 h6, body.pdp-v2 h6 *,
body.pdp-v2 .grid__heading, body.pdp-v2 .grid__heading *,
body.pdp-v2 .section__title, body.pdp-v2 .section__title *,
body.pdp-v2 .tab-link, body.pdp-v2 .tab-link *,
body.pdp-v2 .faq-box, body.pdp-v2 .faq-box *,
body.pdp-v2 .np-sticky-bar__title, body.pdp-v2 .np-sticky-bar__title *,
body.pdp-v2 .pdp_key_features h2,
body.pdp-v2 .pdp-grid_heading h2,
body.pdp-v2 .video-with-text_content h2,
body.pdp-v2 .video-with-text_content h3,
body.pdp-v2 .video-with-text_content .heading,
body.pdp-v2 .product-modal-size-guide-heading h3,
body.pdp-v2 .product-modal__content h2,
body.pdp-v2 .product-modal__content h3 {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
}

/* Cormorant sits at a smaller optical size than Open Sans, so the large
   display headings need the theme's lighter heading weight (300) or they
   read as noticeably heavier than the serif they replaced. */
body.pdp-v2 .pdp-grid_heading h2,
body.pdp-v2 .video-with-text_content h2,
body.pdp-v2 .video-with-text_content h3,
body.pdp-v2 .tab-link,
body.pdp-v2 .grid__heading,
body.pdp-v2 .section__title {
  font-weight: 300 !important;
  letter-spacing: 0 !important;
}

/* the small in-form headings — "Key Features", "Details & Care",
   "Garment Measurement" — match the selector legends around them */
body.pdp-v2 .pdp_key_features h2,
body.pdp-v2 .faq-box,
body.pdp-v2 .product-modal-size-guide-heading h3 {
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

/* -- 2. the one exception: the product title ---------------------------- */
/* Higher specificity than the sweep above AND declared after it, so this is
   the only place the serif survives. */
body.pdp-v2 h1.product__title,
body.pdp-v2 h1.product__title span,
body.pdp-v2 .product__title__wrapper h1.product__title,
body.pdp-v2 .product__title__wrapper h1.product__title * {
  font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .03em !important;
}


/* ==========================================================================
   PDP FEATURE ICONS — drop the tinted chip, scale the mark up. 07 Sep 2026

   The icons sat inside a 38px #f5efe7 rounded tile. With the boxy pass that
   tile became a hard beige square, which fought the retraced line marks —
   they are drawn as open line art and want air, not a container.

   So: the tile goes, and the mark itself takes over the space it was using.
   19px -> 28px desktop, 17px -> 24px mobile. Net footprint is smaller than
   the old tile, so the chip row does not grow.
   ========================================================================== */

body.pdp-v2 .np-feat-chip {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  margin: 0 0 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.pdp-v2 .np-feat-icon {
  width: 28px !important;
  height: 28px !important;
  color: var(--np-ink) !important;
}

@media (max-width: 767px) {
  body.pdp-v2 .np-feat-chip { margin: 0 0 9px !important; }
  body.pdp-v2 .np-feat-icon { width: 24px !important; height: 24px !important; }
}


/* ==========================================================================
   MOBILE PDP — client design pass. 15 Sep 2026

   Everything below is scoped to (max-width: 767px), so desktop is untouched.
   It sits at the end of the file on purpose: this stylesheet is append-only
   and several earlier blocks use !important, so later-and-equal wins.

   NOTE ON MARKUP. The theme ships parallel .pdp-desk / .pdp-mobile blocks for
   the colour and size selectors and the add-to-cart. At every width we
   actually render, the .pdp-mobile set is display:none and the .pdp-desk set
   is what shows - verified in the browser, not assumed. So these rules target
   the .pdp-desk elements. Do not "fix" that by switching the markup without
   re-checking which set is live.
   ========================================================================== */

@media (max-width: 767px) {

  body.pdp-v2 {
    --np-stack: 22px;   /* the one vertical rhythm value */
    --np-edge: 18px;    /* side gutter */
  }

  /* ---- 1. the tag on the image is a rectangle ------------------------- */
  body.pdp-v2 .np-media-badge {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f6f4ef !important;
    padding: 7px 13px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
  }

  /* ---- 9. close the gap between the gallery and the title ------------- */
  body.pdp-v2 .product__content { padding-top: 0 !important; }
  body.pdp-v2 .form__wrapper--modern { padding-top: 16px !important; }
  body.pdp-v2 .product__images--mobile-slider { margin-bottom: 0 !important; }

  /* ---- 10 + 2. one rhythm for every block, title and price on one row --
     The grid exists only to pull the price up beside the title: they are
     separate section blocks in the template, so there is no shared parent
     to flex. Everything else spans both columns and stacks normally. */
  body.pdp-v2 .form__width {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    row-gap: 0;
    column-gap: 12px;
    padding-left: var(--np-edge) !important;
    padding-right: var(--np-edge) !important;
  }

  body.pdp-v2 .form__width > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  /* the theme's hidden inputs sit first; pin them so they cannot claim
     the title's row */
  body.pdp-v2 .form__width > input { grid-row: 1; }

  body.pdp-v2 .form__width > .product__head {
    grid-column: 1;
    grid-row: 2;
  }
  body.pdp-v2 .form__width > .product__block:has(.product__price) {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    white-space: nowrap;
  }

  /* equal top space on every block that actually renders */
  body.pdp-v2 .form__width > .product__block,
  body.pdp-v2 .form__width > .pdp_key_features,
  body.pdp-v2 .form__width > .np-mix,
  body.pdp-v2 .form__width > .np-bundle,
  body.pdp-v2 .form__width > .accordian_Images_block {
    margin-top: var(--np-stack) !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* title, price and subtitle read as one unit, so they are the exception */
  body.pdp-v2 .form__width > .product__head,
  body.pdp-v2 .form__width > .product__block:has(.product__price) {
    margin-top: 0 !important;
  }
  body.pdp-v2 .form__width > .product__custom-code:has(.np-under-title) {
    margin-top: 7px !important;
  }

  /* an empty custom-code block still occupies a grid row and would add a
     gap; the cleared offer block is one of these */
  body.pdp-v2 .form__width > .product__custom-code:not(:has(*)) {
    display: none !important;
  }

  /* ---- 2. title and price, per the reference ------------------------- */
  body.pdp-v2 h1.product__title {
    font-size: 27px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: .02em !important;
  }
  body.pdp-v2 .product__title__wrapper { padding-right: 0 !important; }

  body.pdp-v2 .product__price {
    font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
    font-size: 21px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
  }

  /* ---- 3. subheading -------------------------------------------------- */
  body.pdp-v2 .np-under-title {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12.5px !important;
  }
  body.pdp-v2 .np-top-pick {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f2efea;
    border-radius: 999px;          /* the one pill on the page, per the ref */
    padding: 3px 10px 3px 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1c1a17;
    white-space: nowrap;
  }
  body.pdp-v2 .np-top-pick svg { width: 9px; height: 9px; flex: 0 0 auto; }

  /* ---- 4. feature icons, no box -------------------------------------- */
  body.pdp-v2 .pdp_key_features > h2 { display: none !important; }
  body.pdp-v2 .pdp_key_features_wrp {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px !important;
    border: 0 !important;
  }
  body.pdp-v2 .key_feature-item {
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    padding: 0 !important;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.pdp-v2 .np-feat-label {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    font-weight: 400 !important;
  }

  /* ---- 5. colour swatches are round ---------------------------------- */
  body.pdp-v2 .radio__fieldset--swatches .swatch__button,
  body.pdp-v2 .radio__fieldset--swatches label,
  body.pdp-v2 .radio__fieldset--swatches .swatch {
    border-radius: 50% !important;
    overflow: hidden;
  }
  body.pdp-v2 .radio__fieldset--swatches label {
    width: 26px !important;
    height: 26px !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.10);
  }
  body.pdp-v2 .radio__fieldset--swatches input:checked + label,
  body.pdp-v2 .radio__fieldset--swatches label.is-active {
    box-shadow: 0 0 0 1px #fff, 0 0 0 2px #1c1a17;
  }

  /* section labels - COLOUR / SIZE */
  body.pdp-v2 .selector-wrapper .radio__legend,
  body.pdp-v2 .selector-wrapper legend {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #6b655c !important;
    margin-bottom: 10px !important;
  }

  /* ---- 6. size: plain text, box on the selected one only ------------- */
  body.pdp-v2 .selector-wrapper--size .radio__fieldset {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px !important;
  }
  body.pdp-v2 .selector-wrapper--size .radio__button label,
  body.pdp-v2 .selector-wrapper--size label:not(.radio__legend) {
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    min-width: 34px;
    padding: 5px 7px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: center;
    line-height: 1.2 !important;
  }
  body.pdp-v2 .selector-wrapper--size input:checked + label,
  body.pdp-v2 .selector-wrapper--size label.is-active {
    border-color: #792525 !important;
    background: none !important;
    color: #1c1a17 !important;
  }

  /* ---- 7. Mix and Match ---------------------------------------------- */
  body.pdp-v2 .np-mix {
    display: block;
    background: #f7f5f1;
    padding: 15px 16px 14px;
    text-decoration: none;
    color: #1c1a17;
  }
  body.pdp-v2 .np-mix__head {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #792525;
    margin-bottom: 11px;
  }
  body.pdp-v2 .np-mix__tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 26px;
    margin-bottom: 11px;
  }
  body.pdp-v2 .np-mix__tier {
    font-size: 13px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  body.pdp-v2 .np-mix__cta {
    display: block;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #8b8578;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* the cart-drawer row keeps its own look; only square it off */
  body.pdp-v2 .np-bundle { border-radius: 0 !important; }

  /* ---- 8. add to cart: restricted height ----------------------------- */
  body.pdp-v2 .product__submit__buttons .btn,
  body.pdp-v2 .product__submit__buttons button,
  body.pdp-v2 [name="add"] {
    height: 46px !important;
    min-height: 0 !important;
    padding: 0 18px !important;
    border-radius: 0 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 1. 15 Sep 2026

   1. The subheading was landing ABOVE the title. Pinning only the hidden
      inputs to row 1 did not hold, so the subheading auto-placed into the
      free row 1. Fix: pin all three title-group blocks explicitly to rows
      1 and 2. Everything else auto-places, finds both rows full, and flows
      on from row 3 in source order - no dependency on child ordering.
   2. The price kept the theme's sans bold; the text sits in a child node,
      so the family has to be set on the descendants too.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  body.pdp-v2 .form__width > .product__head {
    grid-column: 1;
    grid-row: 1;
  }
  body.pdp-v2 .form__width > .product__block:has(.product__price) {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: baseline;
    white-space: nowrap;
  }
  body.pdp-v2 .form__width > .product__custom-code:has(.np-under-title) {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 8px !important;
  }

  /* price: serif, regular weight, matched to the title's optical size */
  body.pdp-v2 .product__price,
  body.pdp-v2 .product__price *,
  body.pdp-v2 [data-product-price],
  body.pdp-v2 [data-product-price] * {
    font-family: "Cormorant Garamond", "Times New Roman", Times, serif !important;
    font-weight: 400 !important;
    font-size: 23px !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  /* the description follows the title group, so it carries the rhythm gap
     from the subheading rather than from the title baseline */
  body.pdp-v2 .form__width > .product__description {
    margin-top: var(--np-stack) !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 2. 15 Sep 2026
   Polish after looking at the rendered page:
   1. The size-guide control was still a rounded-rect pill sitting in the
      size row. In the reference it is a small round icon button at the end
      of the row, so it reads as a tool rather than another size option.
   2. The Mix and Match link wrapped to two lines and the underline broke
      across them. Tightened so it holds one line at 375px.
   3. One feature label ran to four lines while its neighbours ran to one,
      which made the row look broken. Balanced.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* ---- 1. size guide becomes a round icon button ---------------------- */
  body.pdp-v2 .np-size-guide-pill {
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #e8ddd0 !important;
    color: #1c1a17 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 6px;
  }
  body.pdp-v2 .np-size-guide-pill span { display: none !important; }
  body.pdp-v2 .np-size-guide-pill svg {
    width: 13px !important;
    height: 13px !important;
    margin: 0 !important;
  }

  /* ---- 2. Mix and Match link holds one line -------------------------- */
  body.pdp-v2 .np-mix__cta {
    font-size: 9.5px;
    letter-spacing: .05em;
    line-height: 1.4;
  }
  body.pdp-v2 .np-mix { padding: 14px 15px 13px; }
  body.pdp-v2 .np-mix__head { margin-bottom: 9px; }
  body.pdp-v2 .np-mix__tiers { margin-bottom: 9px; }

  /* ---- 3. even feature labels ---------------------------------------- */
  body.pdp-v2 .np-feat-label {
    font-size: 10.5px !important;
    line-height: 1.32 !important;
    text-wrap: balance;
  }
  body.pdp-v2 .pdp_key_features_wrp { align-items: start; }
  body.pdp-v2 .key_feature-item { justify-content: flex-start; }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 3. 15 Sep 2026

   Three rules from the earlier "boxy" pass out-specify the ones above.
   Being later in the file does not help: at equal importance the more
   specific selector wins regardless of order, and those rules carry both
   !important and a longer selector chain. So these are re-declared with a
   chain long enough to beat them.

   If you ever rewrite this stylesheet, delete the boxy-pass swatch rule
   instead of stacking another override on it.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* colour swatches: round (the boxy pass squared every swatch) */
  body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches .swatch__button,
  body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches radio-swatch,
  body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches label {
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  /* add to cart: hold the restricted height */
  body.pdp-v2 .product__page .product__block--buttons .product__submit__buttons .btn,
  body.pdp-v2 .product__page .product__block--buttons .product__submit__buttons button,
  body.pdp-v2 .product__page .product__submit .product__submit__buttons .btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    line-height: 1 !important;
    padding: 0 18px !important;
  }

  /* size guide: a true circle, not a 30x36 oval */
  body.pdp-v2 .product__page .selector-wrapper--size .np-size-guide-pill,
  body.pdp-v2 .product__page .radio__fieldset .np-size-guide-pill {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 4. 15 Sep 2026

   The rule that kept the swatches square is, exactly:

     body.pdp-v2 .form__wrapper .product__block .product__selectors
     .radio__fieldset--swatches .swatch__button input ~ label
       { border-radius: 0 !important; }

   from the boxy pass. It uses a sibling combinator and scores higher than
   anything reasonable written against the label alone, so every shorter
   override lost. Re-declared here with the identical selector: equal
   specificity, equal importance, later in the file - so this one wins,
   and only inside the mobile media query.

   Desktop swatches stay square. The client asked for round swatches in the
   mobile feedback only; if they want it everywhere, move this out of the
   media query and delete the boxy-pass rule rather than keeping both.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input ~ label {
    border-radius: 50% !important;
    overflow: hidden !important;
  }
}


/* --------------------------------------------------------------------------
   MIX AND MATCH - base styles, all widths. 15 Sep 2026

   The panel is rendered by snippets/np-offer.liquid, which is Liquid and so
   has no breakpoint: it replaces the old offer rows on desktop as well as
   mobile. Its styling was written inside the mobile media query, which left
   it as an unstyled link above 767px. These are the base styles; the mobile
   block above only tightens the type.
   -------------------------------------------------------------------------- */

body.pdp-v2 .np-mix {
  display: block;
  background: #f7f5f1;
  padding: 16px 18px 15px;
  text-decoration: none;
  color: #1c1a17;
  border-radius: 0;
}
body.pdp-v2 .np-mix:hover { background: #f2efe9; }

body.pdp-v2 .np-mix__head {
  display: block;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #792525;
  margin-bottom: 11px;
}
body.pdp-v2 .np-mix__tiers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
  margin-bottom: 11px;
}
body.pdp-v2 .np-mix__tier {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.pdp-v2 .np-mix__cta {
  display: block;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8b8578;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.pdp-v2 .np-mix:hover .np-mix__cta { color: #6b655c; }


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 5. 15 Sep 2026  (client review round 2)

   1. TYPOGRAPHY RULE RESTORED. The price had been set in Cormorant. The
      standing rule is: the product TITLE is the only serif on the page,
      everything else is Open Sans. Reverted.
   2. Feature icons were too small at 24px.
   3. Size-guide control: square, keeping its background.
   4. Mix and Match had lost its vertical padding - the "equal top space"
      rule above lists .np-mix among the blocks it zeroes padding on, which
      flattened the panel to 0px 18px. Padding restored at higher
      specificity and the rhythm kept on margin only.
   5. The beige secondary button colour is out.
   -------------------------------------------------------------------------- */

/* ---- 1. the title is the only serif ---------------------------------- */
body.pdp-v2 .product__price,
body.pdp-v2 .product__price *,
body.pdp-v2 [data-product-price],
body.pdp-v2 [data-product-price] * {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
}

@media (max-width: 767px) {

  body.pdp-v2 .product__price,
  body.pdp-v2 .product__price *,
  body.pdp-v2 [data-product-price],
  body.pdp-v2 [data-product-price] * {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
  }

  /* ---- 2. larger feature icons --------------------------------------- */
  body.pdp-v2 .np-feat-icon {
    width: 40px !important;
    height: 40px !important;
  }
  body.pdp-v2 .np-feat-chip {
    margin: 0 0 12px !important;
    height: auto !important;
  }
  body.pdp-v2 .pdp_key_features_wrp { gap: 12px !important; }

  /* ---- 3. size guide: square, same background ------------------------ */
  body.pdp-v2 .product__page .selector-wrapper--size .np-size-guide-pill,
  body.pdp-v2 .product__page .radio__fieldset .np-size-guide-pill,
  body.pdp-v2 .np-size-guide-pill {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    border-radius: 0 !important;
    background: #e8ddd0 !important;
  }

  /* ---- 4. Mix and Match spacing -------------------------------------- */
  body.pdp-v2 .form__width > .np-mix {
    padding: 15px 16px 14px !important;
    margin-top: var(--np-stack) !important;
    margin-bottom: 0 !important;
  }
  body.pdp-v2 .np-mix__head { margin: 0 0 10px !important; }
  body.pdp-v2 .np-mix__tiers { margin: 0 0 10px !important; gap: 6px 24px !important; }
  body.pdp-v2 .np-mix__cta { margin: 0 !important; }
}

/* ---- 4b. same padding protection at every width ---------------------- */
body.pdp-v2 .form__width > .np-mix {
  padding: 16px 18px 15px;
}

/* ---- 5. drop the beige secondary button ------------------------------ */
body.pdp-v2 .product__page .product__submit__buttons .btn--secondary,
body.pdp-v2 .product__page .product__submit__buttons button.btn--secondary {
  background: #211f1c !important;
  border-color: #211f1c !important;
  color: #ffffff !important;
}
body.pdp-v2 .product__page .product__submit__buttons .btn[disabled],
body.pdp-v2 .product__page .product__submit__buttons button[disabled] {
  background: #b9b3aa !important;
  border-color: #b9b3aa !important;
  color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 6. 15 Sep 2026

   The selected-size box appeared when a shopper clicked, but not on the
   default selection set at load. The markup is
   span.radio__button > input + label, so the winning rule needs the
   .radio__button class in the chain - without it the earlier
   "border: 1px solid transparent" rule on the plain label out-scores the
   :checked rule.
   -------------------------------------------------------------------------- */

body.pdp-v2 .selector-wrapper--size .radio__button input:checked + label,
body.pdp-v2 .selector-wrapper--size .radio__button input:checked ~ label {
  border: 1px solid #792525 !important;
  color: #1c1a17 !important;
  background: none !important;
}

@media (max-width: 767px) {
  body.pdp-v2 .selector-wrapper--size .radio__button input:checked + label,
  body.pdp-v2 .selector-wrapper--size .radio__button input:checked ~ label {
    border: 1px solid #792525 !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 7. 15 Sep 2026

   Third attempt at the selected-size box. The sibling form
   (input:checked + label) matches - verified with Element.matches() in the
   page - yet the computed border-color stayed transparent, so something in
   the cascade is still beating it.

   Switching to :has() on the wrapper instead: it targets the label through
   its parent rather than through sibling order, and scores higher than the
   base rule that paints every size label's border transparent.
   -------------------------------------------------------------------------- */

body.pdp-v2 .selector-wrapper--size .radio__button:has(input:checked) label,
body.pdp-v2 .selector-wrapper--size .radio__buttons .radio__button:has(input:checked) label {
  border: 1px solid #792525 !important;
  border-color: #792525 !important;
  color: #1c1a17 !important;
  background: none !important;
}


/* --------------------------------------------------------------------------
   Selected size box, driven by a class instead of :checked. 15 Sep 2026
   See npMirrorChecked in narpine-pdp-2.js for why.
   -------------------------------------------------------------------------- */

body.pdp-v2 .selector-wrapper--size .radio__button label.np-sel {
  border: 1px solid #792525 !important;
  border-color: #792525 !important;
  color: #1c1a17 !important;
  background: none !important;
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 8. 15 Sep 2026  (client review round 3)

   SPACING, MEASURED RATHER THAN GUESSED.
     gallery bottom -> title top   = 34px
     subheading bottom -> desc top = 36px
   Numerically close, but they do not read the same, and the client is right
   that they do not. Two reasons:

   a) The wrapper added 16px of its own padding on top of the 18px the
      gallery already leaves, so the first gap was never on the 22px rhythm.
   b) A 14px paragraph on a 23.1px line-height carries ~4.5px of half-leading
      above its first line. The box gap is 22px; the gap you SEE is ~26.5px.
      Every block that opens with body copy has this; blocks that open with a
      heading or a control do not.

   So: one rhythm value, and a second, smaller value for blocks that open
   with body text, chosen so both land on the same optical gap.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  body.pdp-v2 {
    --np-stack: 22px;        /* blocks opening with a heading or control */
    --np-stack-text: 17px;   /* blocks opening with body copy (22 - leading) */
  }

  /* a) gallery -> title. The gallery already leaves 18px, so the wrapper
        only needs the remainder to make 22px total. */
  body.pdp-v2 .form__wrapper--modern { padding-top: 4px !important; }

  /* b) blocks that open with a paragraph get the leading-compensated value */
  body.pdp-v2 .form__width > .product__description,
  body.pdp-v2 .form__width > .product__custom-code:not(:has(.np-under-title)) {
    margin-top: var(--np-stack-text) !important;
  }

  /* the title group keeps its own tighter internal spacing */
  body.pdp-v2 .form__width > .product__custom-code:has(.np-under-title) {
    margin-top: 8px !important;
  }

  /* ---- add to cart: slimmer still, per the reference ------------------ */
  body.pdp-v2 .product__page .product__block--buttons .product__submit__buttons .btn,
  body.pdp-v2 .product__page .product__block--buttons .product__submit__buttons button,
  body.pdp-v2 .product__page .product__submit .product__submit__buttons .btn,
  body.pdp-v2 .product__submit__buttons .btn,
  body.pdp-v2 [name="add"] {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    line-height: 1 !important;
    padding: 0 16px !important;
    font-size: 11.5px !important;
    letter-spacing: .16em !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - correction pass 9. 15 Sep 2026

   After pass 8 every gap measured 22px except subheading -> description,
   which measured 31px. The margin was right; the BLOCK was wrong. The
   subheading's custom-code block runs 33px tall around 19px of text, so it
   carries ~14px of dead space under the words and the next block's margin
   starts from there instead of from the text.

   Collapsing the block onto its own content is the fix. Measure from the
   text, not from the wrapper.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  body.pdp-v2 .form__width > .product__custom-code:has(.np-under-title) {
    padding: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;      /* kills the wrapper's own text node leading */
  }
  body.pdp-v2 .np-under-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 12.5px !important; /* restore, the wrapper was zeroed above */
    line-height: 1.5 !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - spacing to match the client reference. 15 Sep 2026

   The flat 22px rhythm was right for the upper half but the reference does
   not use one value all the way down. Measured off the supplied crop:

     label -> its own controls          ~9px    (tight pair)
     control group -> next label        ~24px
     size row -> Mix and Match panel    ~32px   (the panel gets more air)
     inside the panel, row to row       ~18px
     panel -> stock line                ~24px
     stock line <-> button              ~15px   (tight pair)

   So: 24px between sections, 9px inside a label/control pair, 15px where two
   things are meant to read as one unit, and extra room around the panel.
   The upper half (gallery, title, description, features) keeps the 22px
   rhythm already signed off.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* ---- label -> its controls: a tight pair ---------------------------- */
  body.pdp-v2 .selector-wrapper .radio__legend,
  body.pdp-v2 .selector-wrapper legend {
    margin-bottom: 9px !important;
  }

  /* ---- colour group -> size label ------------------------------------ */
  body.pdp-v2 .product__selectors .selector-wrapper--size {
    margin-top: 24px !important;
  }

  /* ---- size row -> Mix and Match: the panel gets more air ------------- */
  body.pdp-v2 .form__width > .np-mix {
    margin-top: 32px !important;
    padding: 13px 16px 14px !important;
  }

  /* ---- inside the panel ---------------------------------------------- */
  body.pdp-v2 .np-mix__head  { margin: 0 0 18px !important; }
  body.pdp-v2 .np-mix__tiers { margin: 0 0 18px !important; gap: 6px 28px !important; }
  body.pdp-v2 .np-mix__cta   { margin: 0 !important; }

  /* ---- panel -> button, and the stock line tight to it ---------------- */
  body.pdp-v2 .form__width > .product__block--buttons {
    margin-top: 24px !important;
  }
  body.pdp-v2 .form__width > .product__custom-code:not(:has(.np-under-title)) {
    margin-top: 15px !important;
  }

  /* ---- and the accordion back out to a section gap -------------------- */
  body.pdp-v2 .form__width > .accordian_Images_block {
    margin-top: 24px !important;
  }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - spacing pass 2. 15 Sep 2026

   After the first pass the three seams in the selector area still measured
   long, for the same reason the subheading did: the wrappers are taller than
   their content, so each margin starts from dead space rather than from the
   last thing you can see.

     swatches -> SIZE label   39px  (wanted 24)  -> 15px of wrapper overhang
     SIZE label -> size row   15px  (wanted  9)  ->  6px
     size row -> Mix panel    56px  (wanted 32)  -> 24px

   Collapsing the fieldsets and the form holder onto their content, so the
   gaps below are the gaps you actually get.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  /* the selector wrappers, their fieldsets and the holder all carry trailing
     space; none of it is doing any work at mobile width */
  body.pdp-v2 .product__selectors .selector-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  body.pdp-v2 .product__selectors fieldset,
  body.pdp-v2 .product__selectors .radio__fieldset {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  body.pdp-v2 .product__selectors .radio__buttons {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  body.pdp-v2 .form__width > .product__form__holder,
  body.pdp-v2 .product__form__outer {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* with the overhang gone, these are the real gaps */
  body.pdp-v2 .product__selectors .selector-wrapper--size { margin-top: 24px !important; }
  body.pdp-v2 .selector-wrapper .radio__legend,
  body.pdp-v2 .selector-wrapper legend { margin-bottom: 9px !important; }
  body.pdp-v2 .form__width > .np-mix { margin-top: 32px !important; }
}


/* --------------------------------------------------------------------------
   MOBILE PDP - spacing pass 3. 15 Sep 2026

   Everything now measures to the reference except SIZE label -> size row,
   which came out at 15px against COLOUR's 9px on the identical rule. The
   size legend's row is taller than the colour one (it carries the size-guide
   affordance), so the same margin-bottom yields a bigger visible gap.
   Trimmed so the two label/control pairs read the same.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .selector-wrapper--size .radio__legend,
  body.pdp-v2 .selector-wrapper--size legend {
    margin-bottom: 3px !important;
  }
}


/* ==========================================================================
   PDP TYPOGRAPHY - one weight system. 15 Sep 2026  (client review round 4)

   Audited what was actually on the page. FOUR weights were in play:

     300  description, offer tier, "The details", "You might also like",
          "View more", "Made right.", the stock line
     400  subheading, feature labels, size options
     600  COLOUR / SIZE legends, media badge, price, "Details & Care",
          "Garment Measurement", "Add to cart"
     700  "Top pick", "Mix and Match"

   That is what the client is reacting to. Replaced with two:

     400  everything
     600  small uppercase letterspaced labels only - they are set at 9-12px
          and genuinely need the weight to hold - plus the ADD TO CART label

   Done as a sweep followed by named exceptions, the same shape as the
   font-family rule earlier in this file. If you add a component, it inherits
   400 automatically and you have to opt in to 600 on purpose.

   The product title keeps Cormorant at 400 - it is distinguished by size and
   family, not by weight.
   ========================================================================== */

body.pdp-v2 main.main-content,
body.pdp-v2 main.main-content *:not(script):not(style) {
  font-weight: 400 !important;
}

/* the only things that stay heavier: small caps labels and the CTA */
body.pdp-v2 .np-media-badge,
body.pdp-v2 .np-top-pick,
body.pdp-v2 .np-mix__head,
body.pdp-v2 .selector-wrapper .radio__legend,
body.pdp-v2 .selector-wrapper .radio__legend *,
body.pdp-v2 .selector-wrapper legend,
body.pdp-v2 .product__submit__buttons .btn__text,
body.pdp-v2 [name="add"] .btn__text {
  font-weight: 600 !important;
}


/* ==========================================================================
   SECTION HEADINGS - small caps, per the reference. 15 Sep 2026

   "The details" was 28px centred with a CLOSE UP eyebrow above it, and
   "You might also like" was 20px centred. The reference has both as quiet
   left-aligned small caps that label the section rather than announce it.
   ========================================================================== */

body.pdp-v2 .pdp-grid_heading h2,
body.pdp-v2 .grid__heading-actions .tab-link,
body.pdp-v2 .grid__heading-actions h2.tab-link {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
  text-align: left !important;
  margin: 0 !important;
}

body.pdp-v2 .pdp-grid_heading,
body.pdp-v2 .grid__heading-actions,
body.pdp-v2 .grid__heading-actions .tabs {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* the CLOSE UP eyebrow - drop it whether it is an element or generated */
body.pdp-v2 .pdp-grid_heading::before,
body.pdp-v2 .pdp-grid_heading::after,
body.pdp-v2 .pdp-grid_heading h2::before {
  content: none !important;
  display: none !important;
}
body.pdp-v2 .pdp-grid_heading > *:not(h2) {
  display: none !important;
}


/* ==========================================================================
   VIEW MORE - same restricted height as the main button. 15 Sep 2026
   ========================================================================== */

body.pdp-v2 .np-related-cta .btn,
body.pdp-v2 .custom-tab-sct_discover .btn,
body.pdp-v2 .np-related-cta a.btn--large {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 22px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}
body.pdp-v2 .np-related-cta,
body.pdp-v2 .custom-tab-sct_discover {
  height: auto !important;
}


/* ==========================================================================
   DETAILS & CARE - not bold. 15 Sep 2026
   ========================================================================== */

body.pdp-v2 .faq-box,
body.pdp-v2 h2.faq-box {
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
}


/* ==========================================================================
   PDP TYPOGRAPHY - correction. 15 Sep 2026

   Two faults in the sweep above:

   1. The sweep selector
        body.pdp-v2 main.main-content *:not(script):not(style)
      scores (0,2,4). The exceptions under it were written as
        body.pdp-v2 .np-media-badge
      which scores (0,2,1) - LOWER - so the sweep beat its own exceptions and
      the caps labels came out at 400. Re-declared with main.main-content in
      the chain so they outscore it.

   2. The size guide is a modal that lives outside main.main-content, so the
      sweep never reached it: "Garment Measurement", the table headers and
      the intro line were still at 600. Swept too.

   3. "View more" kept the theme's 600. It is a button label, not a caps
      micro-label, so it belongs at 400.
   ========================================================================== */

/* extend the sweep to the modals that sit outside main */
body.pdp-v2 product-modal,
body.pdp-v2 product-modal *:not(script):not(style),
body.pdp-v2 .product-modal,
body.pdp-v2 .product-modal *:not(script):not(style),
body.pdp-v2 .product-modal__content,
body.pdp-v2 .product-modal__content *:not(script):not(style) {
  font-weight: 400 !important;
}

/* the exceptions, now specific enough to win */
body.pdp-v2 main.main-content .np-media-badge,
body.pdp-v2 main.main-content .np-top-pick,
body.pdp-v2 main.main-content .np-mix__head,
body.pdp-v2 main.main-content .selector-wrapper .radio__legend,
body.pdp-v2 main.main-content .selector-wrapper .radio__legend *,
body.pdp-v2 main.main-content .selector-wrapper legend,
body.pdp-v2 main.main-content .product__submit__buttons .btn__text,
body.pdp-v2 main.main-content [name="add"] .btn__text {
  font-weight: 600 !important;
}

/* "View more" is a button label, not a caps micro-label */
body.pdp-v2 main.main-content .np-related-cta .btn,
body.pdp-v2 main.main-content .np-related-cta .btn span,
body.pdp-v2 main.main-content .custom-tab-sct_discover .btn,
body.pdp-v2 main.main-content .custom-tab-sct_discover .btn span {
  font-weight: 400 !important;
}


/* ==========================================================================
   PDP TYPOGRAPHY - correction 2. 15 Sep 2026

   Three leftovers, all the same cause: an earlier typography block in this
   file sets font-weight 600 on .faq-box and .product-modal-size-guide-heading
   h3, and the theme sets it on .btn. Those selectors out-scored the sweep and
   its exceptions, so:

     "Details & Care"        stayed 14px next to a 12px "THE DETAILS"
     "View more"             stayed 600
     size-guide modal text   stayed 600 (it is outside main, so the sweep
                             never reached it either)

   Matched here with longer chains. "Details & Care" now takes exactly the
   same treatment as "THE DETAILS" - they are both section labels and should
   read as a pair.
   ========================================================================== */

/* ---- Details & Care == The details --------------------------------- */
body.pdp-v2 .queans h2.faq-box,
body.pdp-v2 .accordian_Images_block h2.faq-box,
body.pdp-v2 main.main-content h2.faq-box {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
}

/* ---- View more: a button label, 400 -------------------------------- */
body.pdp-v2 main.main-content .np-related-cta a.btn,
body.pdp-v2 main.main-content .np-related-cta a.btn span,
body.pdp-v2 main.main-content .custom-tab-sct_discover a.btn,
body.pdp-v2 main.main-content .custom-tab-sct_discover a.btn span,
body.pdp-v2 .np-related-cta a.btn.btn--secondary span {
  font-weight: 400 !important;
}

/* ---- size-guide modal: sits outside main, sweep it explicitly ------- */
body.pdp-v2 .product-modal__content .product-modal-size-guide-heading h3,
body.pdp-v2 .product-modal__content h2,
body.pdp-v2 .product-modal__content h3,
body.pdp-v2 .product-modal__content p,
body.pdp-v2 .product-modal__content th,
body.pdp-v2 .product-modal__content td,
body.pdp-v2 .product-modal__content span,
body.pdp-v2 product-modal .product-modal__content *:not(script):not(style) {
  font-weight: 400 !important;
}


/* ==========================================================================
   PDP TYPOGRAPHY - correction 3. 15 Sep 2026

   My own bug. The 600 exception was written as

     ... .selector-wrapper .radio__legend *

   to catch the small caps label inside the legend. But the size-guide
   <product-modal> is a CHILD OF THAT LEGEND in this theme - dialog, table,
   intro copy and all - so the wildcard was setting the whole modal to 600.

   Narrowed to the legend's own label element, and the modal is put back to
   400 explicitly so it cannot be caught by this again.
   ========================================================================== */

/* the legend's label only - not everything the legend happens to contain */
body.pdp-v2 main.main-content .selector-wrapper .radio__legend .radio__legend__option-name,
body.pdp-v2 main.main-content .selector-wrapper .radio__legend__option-name,
body.pdp-v2 main.main-content .selector-wrapper .radio__legend__value {
  font-weight: 600 !important;
}

/* and the modal that lives inside the legend goes back to the body weight */
body.pdp-v2 main.main-content .radio__legend product-modal,
body.pdp-v2 main.main-content .radio__legend product-modal *:not(script):not(style),
body.pdp-v2 main.main-content dialog.product-modal,
body.pdp-v2 main.main-content dialog.product-modal *:not(script):not(style) {
  font-weight: 400 !important;
}


/* --------------------------------------------------------------------------
   Stock block: symmetrical rules. 15 Sep 2026

   The stock block draws a hairline above and below itself. The gap above the
   first line (button -> block) was 15px but the gap below the second line
   (block -> Details & Care) was 24px, so the pair looked lopsided. Matched.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .form__width > .accordian_Images_block {
    margin-top: 15px !important;
  }
}


/* --------------------------------------------------------------------------
   Section labels: equal air above and below. 15 Sep 2026

   Measured:
     THE DETAILS          10px above the label, 22px below
     YOU MIGHT ALSO LIKE  11px above, 26px below

   A label that names the section below it should sit with the same air on
   both sides, otherwise it reads as belonging to whatever is above. Both
   equalised to 18px.
   -------------------------------------------------------------------------- */

body.pdp-v2 .pdp-grid_heading {
  padding-top: 8px !important;    /* 10 already inherited = 18 */
  margin-bottom: 18px !important;
}

body.pdp-v2 .grid__heading-actions {
  padding-top: 7px !important;    /* 11 already inherited = 18 */
  margin-bottom: 0 !important;
}
body.pdp-v2 .grid__heading-actions .tabs,
body.pdp-v2 .grid__heading-actions .tab-link {
  margin-bottom: 0 !important;
}
body.pdp-v2 .grid__heading + grid-slider,
body.pdp-v2 .grid__heading ~ grid-slider,
body.pdp-v2 .grid__heading-actions ~ grid-slider {
  margin-top: 18px !important;
}


/* --------------------------------------------------------------------------
   Size-guide modal weight - beating my own earlier rule. 15 Sep 2026

   The 600 exception
     body.pdp-v2 main.main-content .selector-wrapper .radio__legend *
   scores (0,4,2). The correction I wrote against it scored (0,3,5), and
   classes are compared before elements, so the wildcard kept winning and the
   whole size-guide modal stayed bold. Same class count plus more elements
   here, so this one lands.
   -------------------------------------------------------------------------- */

body.pdp-v2 main.main-content .selector-wrapper .radio__legend product-modal,
body.pdp-v2 main.main-content .selector-wrapper .radio__legend product-modal *:not(script):not(style),
body.pdp-v2 main.main-content .selector-wrapper .radio__legend dialog *:not(script):not(style) {
  font-weight: 400 !important;
}


/* --------------------------------------------------------------------------
   Details & Care - every instance. 15 Sep 2026

   There are two h2.faq-box in the DOM. The first was picking up the section
   label treatment; a second one was still 14px / 300. Covering the element
   itself rather than relying on a particular ancestor.
   -------------------------------------------------------------------------- */

body.pdp-v2 h2.faq-box,
body.pdp-v2 .faq-box,
body.pdp-v2 main.main-content h2.faq-box,
body.pdp-v2 main.main-content .queans h2.faq-box,
body.pdp-v2 main.main-content .accordian_Images_block h2.faq-box {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
}


/* --------------------------------------------------------------------------
   YOU MIGHT ALSO LIKE - close the gap below to match the 18px above.
   The heading sits inside .tabs-wrapper.related__products; the slack is on
   the heading wrapper, not on the slider, which is why setting a margin on
   grid-slider did nothing.
   -------------------------------------------------------------------------- */

body.pdp-v2 .related__products .grid__heading,
body.pdp-v2 .related__wrapper .grid__heading {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
body.pdp-v2 .related__products .tab-content,
body.pdp-v2 .related__wrapper .tab-content {
  margin-top: 18px !important;
  padding-top: 0 !important;
}
body.pdp-v2 .tabs-wrapper.related__products {
  padding-top: 0 !important;
}


/* --------------------------------------------------------------------------
   YOU MIGHT ALSO LIKE - final numbers. 15 Sep 2026

   Zeroing the tabs-wrapper padding took the gap ABOVE from 18 to 12, so the
   13px here restores it. The 25px BELOW turned out to be 8px of padding on
   .grid__heading-actions plus the 18px margin I had put on .tab-content -
   which is why setting that margin appeared to do nothing. Dropping the
   wrapper padding leaves the 18.
   -------------------------------------------------------------------------- */

body.pdp-v2 .grid__heading-actions {
  padding-top: 13px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   View more - shorter than the primary CTA. 15 Sep 2026

   It had been matched to Add to cart at 38px, which gave a secondary link
   the same weight as the main action. Dropped to 32px so the hierarchy
   reads: Add to cart is the button on this page, View more is a way out of
   it. The wrapper's 34px top margin comes down with it.
   -------------------------------------------------------------------------- */

body.pdp-v2 .np-related-cta .btn,
body.pdp-v2 .custom-tab-sct_discover .btn,
body.pdp-v2 .np-related-cta a.btn--large,
body.pdp-v2 main.main-content .np-related-cta a.btn,
body.pdp-v2 main.main-content .custom-tab-sct_discover a.btn {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 20px !important;
  line-height: 1 !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

body.pdp-v2 .np-related-cta,
body.pdp-v2 .custom-tab-sct_discover {
  height: 32px !important;
  margin-top: 24px !important;
}


/* --------------------------------------------------------------------------
   View more - even air above and below. 15 Sep 2026

   Measured against the slick dots rather than the slider's box, which is
   what I had been doing wrong:

     slick-dots bottom -> button top   9px
     button bottom -> next section    11px

   Two pixels, but it is a visible lean when the block below is a solid
   colour field. Bottom brought down to match the top.
   -------------------------------------------------------------------------- */

body.pdp-v2 .related__wrapper,
body.pdp-v2 .tabs-wrapper.related__products,
body.pdp-v2 .related__products .tab-content {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

body.pdp-v2 .np-related-cta,
body.pdp-v2 .custom-tab-sct_discover {
  margin-bottom: 9px !important;
}


/* --------------------------------------------------------------------------
   View more - bottom gap, take 2. 15 Sep 2026

   The margin-bottom on .np-related-cta collapsed through its parent, so it
   added nothing and the gap fell to 1px. Padding on the section wrapper
   cannot collapse, so the 8px goes there: 1 + 8 = 9, matching the 9px above.
   -------------------------------------------------------------------------- */

body.pdp-v2 .np-related-cta,
body.pdp-v2 .custom-tab-sct_discover {
  margin-bottom: 0 !important;
}

body.pdp-v2 .related__wrapper {
  padding-bottom: 8px !important;
}


/* --------------------------------------------------------------------------
   View more - the real fault. 15 Sep 2026

   The button is 32px. The <span> inside it measured FORTY pixels tall:
   line-height 24px plus 8px of its own padding top and bottom. So the label
   overflowed the border by 4px at each end - which is why it read as sitting
   on the section below, and why every gap I measured looked even while the
   thing still looked wrong. The box was fine; the content was escaping it.

   It is also why the label stayed 12px sentence-case: every rule I wrote was
   aimed at .btn, and the span carries its own font-size, line-height and
   padding, none of which .btn passes down.

   Styling the span itself, which is what should have happened from the start.
   -------------------------------------------------------------------------- */

body.pdp-v2 .np-related-cta a.btn span,
body.pdp-v2 .np-related-cta .btn span,
body.pdp-v2 .custom-tab-sct_discover a.btn span,
body.pdp-v2 .custom-tab-sct_discover .btn span,
body.pdp-v2 main.main-content .np-related-cta a.btn span,
body.pdp-v2 main.main-content .custom-tab-sct_discover a.btn span {
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  height: auto !important;
  min-height: 0 !important;
  border: 0 !important;
}

/* and make sure the button itself centres what is now a correctly sized
   label, rather than relying on the span's leading to do it */
body.pdp-v2 .np-related-cta a.btn,
body.pdp-v2 .custom-tab-sct_discover a.btn,
body.pdp-v2 main.main-content .np-related-cta a.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}


/* --------------------------------------------------------------------------
   Side gutter - one source, not two. 15 Sep 2026

   The copy was sitting 30px in from the edge while the gallery runs
   full-bleed. Cause: .product__content already carried a 12px gutter and I
   added another 18px on .form__width without checking, so they stacked.

   Gutter is now declared once, on .product__content, at 16px. .form__width
   contributes nothing. If it needs changing later, change it in one place.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  body.pdp-v2 { --np-edge: 16px; }

  body.pdp-v2 .product__content {
    padding-left: var(--np-edge) !important;
    padding-right: var(--np-edge) !important;
  }

  body.pdp-v2 .form__width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ==========================================================================
   TOP PICK badge - base styles, all widths. 15 Sep 2026

   THE SAME MISTAKE I MADE WITH .np-mix, AND I EVEN LEFT A NOTE ABOUT IT.

   .np-top-pick is markup added by the subheading block, so Liquid renders it
   at every width. All of its styling sat inside @media (max-width: 767px),
   which meant that above 767px the inline SVG had no width or height and
   expanded to fill its container - it measured 544 x 544 on a 1280 desktop.
   That is the giant star.

   RULE FOR THIS FILE: if a component is rendered by Liquid, its base styles
   go OUTSIDE the media query. The media query is only for adjusting a
   component that already looks right at every width.
   ========================================================================== */

body.pdp-v2 .np-under-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

body.pdp-v2 .np-top-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f2efea;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1c1a17;
  white-space: nowrap;
  line-height: 1;
  flex: 0 0 auto;
  width: auto;
  max-width: max-content;
}

/* the size has to be pinned on the SVG itself - it has a viewBox and no
   intrinsic dimensions, so without this it takes the width of its parent */
body.pdp-v2 .np-top-pick svg {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  max-width: 9px !important;
  min-height: 9px !important;
  max-height: 9px !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
}


/* ==========================================================================
   DESKTOP RESTORE for the section labels. 15 Sep 2026

   The client asked for smaller section labels off a MOBILE screenshot, and I
   wrote those rules outside the media query - so they applied at every width
   and shrank the desktop headings from 40px to 12px, uppercased them and
   pulled them left. That is what broke THE DETAILS and YOU MIGHT ALSO LIKE
   on desktop.

   Measured off the LIVE theme (narpine.com, preview cookie cleared, 1280px):

     .pdp-grid_heading h2            40px, weight 300, centred
     .grid__heading-actions .tab-link 34px, weight 300, left
     h2.faq-box                      15px, weight 600, left
     View more                       13px, weight 600

   Restored to those sizes and alignments here. The one thing NOT restored is
   weight: the client asked to cut the number of weights on the PDP, so these
   stay at 400 rather than going back to 300/600. That is the "keep it within
   our weight" part.

   The 12px uppercase treatment remains, correctly scoped to mobile, in the
   blocks above.
   ========================================================================== */

@media (min-width: 768px) {

  /* ---- THE DETAILS ---------------------------------------------------- */
  body.pdp-v2 .pdp-grid_heading {
    text-align: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }
  body.pdp-v2 .pdp-grid_heading h2,
  body.pdp-v2 main.main-content .pdp-grid_heading h2 {
    font-size: 40px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: center !important;
    font-weight: 400 !important;
  }

  /* ---- YOU MIGHT ALSO LIKE -------------------------------------------- */
  body.pdp-v2 .grid__heading-actions {
    text-align: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }
  body.pdp-v2 .grid__heading-actions .tab-link,
  body.pdp-v2 .grid__heading-actions h2.tab-link,
  body.pdp-v2 main.main-content .grid__heading-actions .tab-link {
    font-size: 34px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
    text-align: left !important;
    font-weight: 400 !important;
  }

  /* ---- DETAILS & CARE -------------------------------------------------- */
  body.pdp-v2 h2.faq-box,
  body.pdp-v2 .faq-box,
  body.pdp-v2 main.main-content h2.faq-box,
  body.pdp-v2 main.main-content .queans h2.faq-box,
  body.pdp-v2 main.main-content .accordian_Images_block h2.faq-box {
    font-size: 15px !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-weight: 400 !important;
  }

  /* ---- VIEW MORE: the theme's own desktop button ----------------------- */
  body.pdp-v2 .np-related-cta a.btn,
  body.pdp-v2 .custom-tab-sct_discover a.btn,
  body.pdp-v2 main.main-content .np-related-cta a.btn {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 14px 28px !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.2 !important;
  }
  body.pdp-v2 .np-related-cta a.btn span,
  body.pdp-v2 .custom-tab-sct_discover a.btn span,
  body.pdp-v2 main.main-content .np-related-cta a.btn span {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    font-weight: 400 !important;
  }
  body.pdp-v2 .np-related-cta,
  body.pdp-v2 .custom-tab-sct_discover {
    height: auto !important;
  }
}


/* --------------------------------------------------------------------------
   View more - weight. 15 Sep 2026
   The desktop block set font-weight on the inner span but not on the <a>
   itself, so the anchor stayed at the theme's 600. Both now.
   -------------------------------------------------------------------------- */

body.pdp-v2 .np-related-cta a.btn,
body.pdp-v2 .custom-tab-sct_discover a.btn,
body.pdp-v2 main.main-content .np-related-cta a.btn,
body.pdp-v2 main.main-content .custom-tab-sct_discover a.btn {
  font-weight: 400 !important;
}


/* ==========================================================================
   Bring three mobile decisions to desktop. 15 Sep 2026

   1. FEATURE ICONS - no box. On desktop .key_feature-item still had a 0.8px
      border, a white fill and 18px/12px padding (175 x 116). The marks are
      open line art and want air, not a container - same reasoning as mobile.
   2. COLOUR SWATCHES - round at every width. The boxy-pass rule that forces
      border-radius 0 uses a sibling combinator and scores 63, so it needs to
      be matched selector-for-selector; mobile already does this inside its
      media query, this is the same rule unscoped.
   3. SIZE vs SIZING heights. Desktop already had both at 38px. Mobile did
      not: the size options came out ~26px against a 30px size-guide button.
      Both pinned to 30px there.
   ========================================================================== */

/* ---- 1. feature icons, no box, all widths ---------------------------- */
body.pdp-v2 .pdp_key_features_wrp {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  border: 0 !important;
  align-items: start;
}
body.pdp-v2 .key_feature-item {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 0 !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* ---- 2. round swatches, all widths ----------------------------------- */
body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input ~ label {
  border-radius: 50% !important;
  overflow: hidden !important;
}
body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches .swatch__button,
body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches label {
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* ---- 3. size options match the size-guide button height -------------- */
@media (max-width: 767px) {
  body.pdp-v2 .selector-wrapper--size .radio__button label,
  body.pdp-v2 .selector-wrapper--size label:not(.radio__legend) {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
}


/* --------------------------------------------------------------------------
   Two misses from the last pass. 15 Sep 2026

   1. Mobile size labels came out 32px against a 30px size-guide button: the
      label is content-box, so the 0.8px border was being added on top of the
      30px I set. border-box makes 30 mean 30.
   2. View more stayed at weight 600 - the anchor carries four classes
      (btn btn--text btn--large btn--secondary) and the theme's rule out-scored
      the short selector I used. Matched on the full class list.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .selector-wrapper--size .radio__button label,
  body.pdp-v2 .selector-wrapper--size label:not(.radio__legend) {
    box-sizing: border-box !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
  }
}

body.pdp-v2 a.btn.btn--text.btn--large.btn--secondary,
body.pdp-v2 a.btn.btn--text.btn--large.btn--secondary span,
body.pdp-v2 .np-related-cta a.btn.btn--secondary,
body.pdp-v2 .np-related-cta a.btn.btn--secondary span,
body.pdp-v2 main.main-content .np-related-cta a.btn.btn--text.btn--secondary,
body.pdp-v2 main.main-content .np-related-cta a.btn.btn--text.btn--secondary span {
  font-weight: 400 !important;
}


/* --------------------------------------------------------------------------
   Gallery image clipped on mobile. 15 Sep 2026

   The white strip down the right of the product image.

   .product__photo carries overflow:hidden and an --aspect-ratio box. There
   is already a rule that gives it a full-width box:

     body.pdp-v2 .product__photo { width: 100% !important }

   but it sits inside @media (min-width: 990px). Below that the photo fell
   back to 358.35px inside a 375px slide, while the <img> itself was correctly
   375.2px - so the last ~17px of every image was being clipped by its own
   parent. Desktop never showed it because desktop is above the breakpoint.

   The width is correct at every size, so it is declared unscoped here.
   -------------------------------------------------------------------------- */

body.pdp-v2 .product__photo,
body.pdp-v2 .product__slide .product__photo,
body.pdp-v2 .product__images .product__photo {
  width: 100% !important;
  max-width: 100% !important;
}

body.pdp-v2 .product__photo .image-wrapper,
body.pdp-v2 .product__photo figure,
body.pdp-v2 .product__slide figure.image-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}


/* --------------------------------------------------------------------------
   View more - give it room. 15 Sep 2026

   Both gaps were matched at 9px, which made them even but left the button
   pinched between the dots and the colour field below. Opened to the page's
   section rhythm (22px) on both sides, so it still reads as balanced but
   sits in its own space.

   Scoped to mobile: desktop takes its spacing from the theme, and I have
   already broken desktop twice this session with unscoped rules.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .np-related-cta,
  body.pdp-v2 .custom-tab-sct_discover {
    margin-top: 37px !important;   /* dots carry ~15px of their own box */
    margin-bottom: 0 !important;
  }
  body.pdp-v2 .related__wrapper {
    padding-bottom: 21px !important;
  }
}


/* --------------------------------------------------------------------------
   View more - top gap. 15 Sep 2026

   margin-top on .np-related-cta collapses through its parent, exactly like
   the margin-bottom did earlier, so raising it from 24 to 37 changed nothing
   and the gap stayed at 9px. Padding does not collapse - but the wrapper had
   a fixed 32px height, so that has to go back to auto for the padding to
   have anywhere to live.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .np-related-cta,
  body.pdp-v2 .custom-tab-sct_discover {
    height: auto !important;
    padding-top: 13px !important;   /* 9 already there = 22 */
    margin-top: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   View more - the LINE, at last. 15 Sep 2026

   The line the button sits on is a border-bottom on
   .tabs-wrapper.related__products. An earlier rule of mine set
   padding-bottom: 0 on that wrapper, which pulled its border up to the
   button's edge: button bottom 2821.2, border 2822. They were touching.

   Every gap I reported as "22px below" was measured to the next SECTION,
   which is past the border - so the number was right and meaningless. The
   border is what the eye reads as the bottom of the block, and that is what
   the spacing has to be measured against.

   Padding restored so the border sits a full section gap below the button.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .tabs-wrapper.related__products {
    padding-bottom: 22px !important;
  }
}


/* --------------------------------------------------------------------------
   Details & Care - dead space when open. 15 Sep 2026

   The open panel carries an .accoridan_images div for optional accordion
   imagery. On this product it is EMPTY - zero height - but it still has
   15px margin top and bottom, so opening the panel bought 30px of nothing
   before the first line of copy.

   Collapsed when it has no image, and the panel's own padding tightened.
   -------------------------------------------------------------------------- */

body.pdp-v2 .faqpanel .accoridan_images {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
body.pdp-v2 .faqpanel .accoridan_images:not(:has(img)) {
  display: none !important;
}
body.pdp-v2 .faqpanel {
  padding-top: 2px !important;
  padding-bottom: 14px !important;
}
body.pdp-v2 .faqpanel .accordian_faq-rte {
  margin-top: 0 !important;
}


/* --------------------------------------------------------------------------
   YOU MIGHT ALSO LIKE - the 25px seam, finally measured. 15 Sep 2026

   I guessed at this three times and missed. Enumerating every box between
   the heading text and the first product image shows the gap is not one
   value, it is four stacked:

     heading text bottom              2058.9
     .grid__heading-actions bottom    2063.9   +5.0  inline box below the text
     ... to where the margin starts            +3.0  wrapper structure
     .tab-content margin-top                  +18.0  mine
     .product-item__bg is absolute             -1.0  sits 1px above tab-content
                                              -----
     image top                        2083.9   25.0

   Only the 18px is mine to set, and the other 7px are structural, so the
   margin comes down to 11 to land the visible gap on 18 - matching the 18px
   above the label.

   Mobile-scoped: desktop keeps 18px here and has not been complained about.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .related__products .tab-content,
  body.pdp-v2 .related__wrapper .tab-content {
    margin-top: 11px !important;
  }
}


/* --------------------------------------------------------------------------
   YOU MIGHT ALSO LIKE - 25px seam, closed. 15 Sep 2026

   Measured breakdown, heading text bottom (2046.1) to image top (2071.1):

      +5   .grid__heading-actions box extends below the text
     +10   structural gap before .tab-content's margin box begins
     +11   .tab-content margin-top  <- the only value I control
      -1   .product-item__bg is absolute, 1px above .tab-content
     ----
      25

   So 4px on the margin lands the visible gap on 18, matching the 18px above
   the label.

   I deliberately did NOT chase the structural 10px by zeroing wrapper
   padding. That is exactly what caused the View more button to end up
   touching the section's border-bottom earlier today - these wrappers carry
   borders, and flattening them moves lines, not just space.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .related__products .tab-content,
  body.pdp-v2 .related__wrapper .tab-content {
    margin-top: 4px !important;
  }
}


/* --------------------------------------------------------------------------
   YOU MIGHT ALSO LIKE - 25px seam. THE ACTUAL CAUSE. 15 Sep 2026

   Adjacent-sibling margin collapse. .tabs-wrapper.related__products has
   exactly two children:

     .tabs__head     margin-bottom: 18px
     .tab-content    margin-top:     4px   (mine)

   Adjacent siblings collapse to the LARGER of the two margins, so 18 won
   every time and every value I set on .tab-content - 18, then 11, then 4 -
   was discarded. The computed style read back correctly, which is why it
   looked like it had applied. It had; it just had no effect.

   The lever is .tabs__head's margin-bottom, not .tab-content's margin-top.

   Verified breakdown, heading text bottom to image top:
      +5  .grid__heading-actions box below the text
      +3  .tabs__head extends below that
     +11  .tabs__head margin-bottom (was 18)
      -1  .product-item__bg is absolute, 1px above .tab-content
     ----
      18
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  body.pdp-v2 .tabs-wrapper.related__products .tabs__head,
  body.pdp-v2 .related__wrapper .tabs__head {
    margin-bottom: 11px !important;
  }
  /* zeroed so the collapse cannot be confusing again - this one never had
     any effect anyway */
  body.pdp-v2 .related__products .tab-content,
  body.pdp-v2 .related__wrapper .tab-content {
    margin-top: 0 !important;
  }
}


/* ==========================================================================
   First-order promo card on the PDP — snippets/np-welcome.liquid
   20 Sep 2026
   ==========================================================================
   The same card the cart drawer and cart page show, so the offer reads
   identically wherever the shopper meets it. Solid accent because it is the
   primary offer; the .np-bundle / .np-mix panel below it stays soft pink so
   the two do not compete for the same attention.

   Metrics match .np-bundle (6px radius, 12px/14px padding) so this sits in
   the existing PDP rhythm rather than introducing a third card shape.

   APPENDED AT THE END OF THE FILE ON PURPOSE. This stylesheet contains two
   near-identical copies of several sections (see .np-bundle at ~line 861 and
   again at ~3410); inserting next to the first copy would have been silently
   overridden by the second. Anything added here is last in the cascade.

   Base styles sit OUTSIDE any media query, deliberately: an earlier rule in
   this file was written inside the mobile query only and rendered a 544x544
   SVG on desktop. If Liquid renders it, style it unconditionally.
   ========================================================================== */

body.pdp-v2 .np-welcome {
  /* cream panel + dashed border: the original promo card's colours. Briefly
     solid accent on 20 Sep 2026, reverted on request. Keep it this way. */
  background: #fbf7f0;
  border: 1px dashed #cfc0a8;
  color: var(--np-ink);
  border-radius: 6px;
  padding: 12px 14px;
  /* 32px above is the section gap the offer panel used to own - the card now
     starts the offer group, so it inherits that rhythm. Measured on the live
     DOM: without it the card butted straight against the size selector (0px)
     while leaving 42px below, which read as the card belonging to Mix and
     Match rather than introducing it.
     The parent is a grid with row-gap 0, so these margins do not collapse -
     what is declared here is what renders. */
  margin: 32px 0 10px;
}
/* The offer panel carries its own 32px section gap. Zero it when it directly
   follows the card so the pair reads as one group: 32 above, 10 between.
   Two class selectors beat the single-class rule that sets the 32px, so no
   !important is needed. */
/* The offer panel sets margin-top: 32px !important via
   `body.pdp-v2 .form__width > .np-mix` inside the mobile query, so a plain
   rule here loses. Matched with the same parent (one more class than theirs)
   and !important, and declared last in the file, so this wins at both widths.
   Verified on the rendered page rather than assumed: before this, the pair
   measured 32px above / 42px below. */
body.pdp-v2 .form__width > .np-welcome + .np-mix,
body.pdp-v2 .form__width > .np-welcome + .np-bundle,
body.pdp-v2 .np-welcome + .np-mix,
body.pdp-v2 .np-welcome + .np-bundle {
  margin-top: 0 !important;
}
body.pdp-v2 .np-welcome__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
body.pdp-v2 .np-welcome__title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--np-ink);
}
body.pdp-v2 .np-welcome__code {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid #cfc0a8;
  color: var(--np-ink);
  white-space: nowrap;
}
body.pdp-v2 .np-welcome__note {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--np-muted);
}


/* =====================================================================
   PDP MOBILE - client review, 24 Sep 2026 (demo theme only)
   ---------------------------------------------------------------------
   1. Type: two variations only under the title/price.
        BODY  = Open Sans 11px / 400
        LABEL = Open Sans 11px / 600 (caps labels, button text, card title)
      Title (Cormorant) and price are left as they are.
   2. Feature icons: the row read as skewed right because the short
      first label and the long third one made the group's margins
      35px left / 0px right. Items now size to their content and are
      spaced evenly, so the group has equal margins on both sides.
   3. Size-guide button -> circle.
   4. Mix & Match -> background #f8f9f9, no underline on the CTA line.
   5. Add to cart -> light grey with black text, solid black on tap/hover.
   6. Stock / shipping / returns -> one line, no icons, above Add to cart.
   7. "View more" (related products) -> light grey filled button, no border.
   All scoped to mobile; desktop is untouched.
   ===================================================================== */
@media (max-width: 767px) {

  /* ---- 1. BODY variation: 11px / 400 ---- */
  body.pdp-v2 .product__content .np-under-title,
  body.pdp-v2 .product__content .np-under-title *:not(.np-top-pick),
  body.pdp-v2 .product__content .product__description,
  body.pdp-v2 .product__content .product__description *,
  body.pdp-v2 .product__content .np-feat-label,
  body.pdp-v2 .product__content .option-title,
  body.pdp-v2 .product__content .np-welcome__note,
  body.pdp-v2 .product__content .np-mix *:not(.np-mix__head),
  body.pdp-v2 .product__content .np-trust,
  body.pdp-v2 .product__content .np-trust *,
  body.pdp-v2 .accordian_Images_block .faq-box ~ *,
  body.pdp-v2 .accordian_Images_block .faq-box ~ * * {
    font-size: 11px !important;
    font-weight: 400 !important;
  }
  body.pdp-v2 .product__content .product__description,
  body.pdp-v2 .product__content .product__description p {
    line-height: 1.7 !important;
  }

  /* ---- 1. LABEL variation: 11px / 600 ---- */
  body.pdp-v2 .product__content .radio__legend__option-name,
  body.pdp-v2 .product__content .np-top-pick,
  body.pdp-v2 .product__content .np-welcome__title,
  body.pdp-v2 .product__content .np-welcome__code,
  body.pdp-v2 .product__content .np-mix__head,
  body.pdp-v2 .product__submit__item button.btn .btn__text,
  body.pdp-v2 .product__submit__item button.btn .btn__added,
  body.pdp-v2 .product__submit__item button.btn .ct-price-pdp,
  body.pdp-v2 .product__submit__item button.btn .ct-product-price,
  body.pdp-v2 .accordian_Images_block .faq-box,
  body.pdp-v2 main.main-content .accordian_Images_block .queans h2.faq-box,
  body.pdp-v2 .accordian_Images_block .faq-box * {
    font-size: 11px !important;
    font-weight: 600 !important;
  }

  /* ---- 2. Feature icons: group centred as a whole ---- */
  body.pdp-v2 .pdp_key_features .pdp_key_features_wrp {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: flex-start;
    gap: 8px;
  }
  body.pdp-v2 .pdp_key_features .key_feature-item {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 104px;
  }
  body.pdp-v2 .pdp_key_features .np-feat-label {
    text-align: center;
    text-wrap: balance;
  }

  /* ---- 3. Size-guide button: circle ---- */
  /* an older mobile rule squared it at (0,4,1); this outranks it */
  body.pdp-v2 .product__page .np-size-guide-pill.np-size-guide-pill.np-size-guide-pill,
  body.pdp-v2 .product__content .np-size-guide-pill {
    border-radius: 50% !important;
    overflow: hidden;
  }

  /* ---- 4. Mix & Match ---- */
  body.pdp-v2 .product__content a.np-mix {
    background: #f8f9f9 !important;
  }
  body.pdp-v2 .product__content .np-mix,
  body.pdp-v2 .product__content .np-mix * {
    text-decoration: none !important;
  }

  /* ---- 5. Add to cart: the site's charcoal, #212121 ----
     Client, 24 Sep: the ATC should be the site's shade of black. Every
     colour scheme in settings_data sets btn_primary_bg = #212121; the old
     PDP rule painted it #211f1c, a warm brown-black that matched nothing
     else on the site. First pass used light grey; replaced same day. */
  body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn:not([disabled]):not(.np-disabled) {
    background: #212121 !important;
    border-color: #212121 !important;
    color: #fff !important;
    transition: background-color .2s ease, border-color .2s ease;
  }
  body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn:not([disabled]):not(.np-disabled) :is(.btn__text, .btn__added, .ct-price-pdp, .ct-product-price) {
    color: #fff !important;
  }
  body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn:not([disabled]):not(.np-disabled):is(:hover, :active, :focus-visible) {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
  }
  body.pdp-v2 .product__submit__item button.btn.custom-quick-view-btn:not([disabled]):not(.np-disabled):is(:hover, :active, :focus-visible) :is(.btn__text, .btn__added, .ct-price-pdp, .ct-product-price) {
    color: #fff !important;
  }

  /* ---- 6. Stock line: one line, no icons, above Add to cart ---- */
  body.pdp-v2 .product__content .form__width > .product__block--buttons { order: 2; }
  body.pdp-v2 .product__content .form__width > .product__block--buttons ~ * { order: 3; }
  body.pdp-v2 .product__content .form__width > .product__custom-code:has(.np-trust) {
    order: 1;
    padding-top: 0 !important;
    padding-bottom: 12px !important;
  }
  body.pdp-v2 .product__content .np-trust {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--np-muted, #5a5858);
    line-height: 1.6;
    white-space: normal;
  }
  body.pdp-v2 .product__content .np-trust svg { display: none !important; }
  body.pdp-v2 .product__content .np-trust > span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.pdp-v2 .product__content .np-trust > span + span::before {
    content: "\00a0\00b7\00a0";
  }
  body.pdp-v2 .product__content .np-trust strong { text-transform: uppercase; letter-spacing: .06em; }

  /* ---- 7. View more (related products) ---- */
  body.pdp-v2 [id*="__related"] a.btn.btn--secondary,
  body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover a.btn.btn--secondary.btn--large.text-center,
  body.pdp-v2 .np-related-cta a.btn.btn--secondary.btn--large.text-center {
    background: #efefef !important;
    background-color: #efefef !important;
    border: 0 !important;
    outline: 0 !important;
    color: #000 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    transition: none !important;
    /* client, 24 Sep: shorter - 32px -> 24px, matching the reference's slim bar */
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* client, 24 Sep: no border and NO hover change - every state = rest state */
  body.pdp-v2 [id*="__related"] a.btn.btn--secondary:is(:hover, :active, :focus, :focus-visible, :visited),
  body.pdp-v2 .custom-related-pro-sct .custom-tab-sct_discover a.btn.btn--secondary.btn--large.text-center:is(:hover, :active, :focus, :focus-visible, :visited),
  body.pdp-v2 .np-related-cta a.btn.btn--secondary.btn--large.text-center:is(:hover, :active, :focus, :focus-visible, :visited) {
    background: #efefef !important;
    background-color: #efefef !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    color: #000 !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.pdp-v2 [id*="__related"] a.btn.btn--secondary *,
  body.pdp-v2 [id*="__related"] a.btn.btn--secondary:hover * {
    color: #000 !important;
    text-decoration: none !important;
  }
  body.pdp-v2 [id*="__related"] a.btn.btn--secondary::before,
  body.pdp-v2 [id*="__related"] a.btn.btn--secondary::after { display: none !important; }

  /* =================== client feedback round 2 - 1 Oct 2026 =================== */

  /* ---- 8. Colour swatch: visible selected ring, same maroon 1px as the size box ----
     The ring was there all along (0 0 0 3px charcoal) but each swatch sits in a
     26x26 <radio-swatch> with overflow:hidden, which clipped it to nothing. */
  /* three older !important rules clip it at up to (0,6,1); this is (0,7,2) */
  body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches radio-swatch.swatch__button,
  body.pdp-v2 .product__content .radio__fieldset--swatches .swatch__button {
    overflow: visible !important;
  }
  body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input:checked ~ label {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #792525 !important;
  }

  /* ---- 9. Mix & Match: background runs edge to edge; text stays on the 16px gutter ---- */
  body.pdp-v2 .product__content a.np-mix {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  /* ---- 10. DETAILS & CARE: identical to the "THE DETAILS" heading below it ----
     Client, 1 Oct (2nd pass): still bolder than THE DETAILS. Measured that
     heading: Open Sans 12px / 400, .14em, #212121, uppercase - match it exactly.
     (First pass matched COLOR/SIZE at 600, which is why it still read heavier.) */
  body.pdp-v2 main.main-content .accordian_Images_block .queans h2.faq-box,
  body.pdp-v2 main.main-content .accordian_Images_block .queans h2.faq-box *,
  body.pdp-v2 .accordian_Images_block .faq-box,
  body.pdp-v2 .accordian_Images_block .faq-box * {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #212121 !important;
    letter-spacing: .14em !important;
    line-height: 1.3 !important;
  }
}

/* ---- DESKTOP: colour swatch selected ring (client approved, 1 Oct 2026) ----
   Same bug as mobile item 8: each 32x32 <radio-swatch> has overflow:hidden
   (an older rule at (0,6,1) !important), which clipped the ring to nothing.
   Same fix and same look as mobile: white gap + 1px maroon, matching the
   selected size box. */
@media (min-width: 768px) {
  body.pdp-v2 .product__page .product__form__holder .product__selectors .radio__fieldset--swatches radio-swatch.swatch__button,
  body.pdp-v2 .product__content .radio__fieldset--swatches .swatch__button {
    overflow: visible !important;
  }
  body.pdp-v2 .form__wrapper .product__block .product__selectors .radio__fieldset--swatches .swatch__button input:checked ~ label {
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #792525 !important;
  }
}

/* ==========================================================================
   03 Nov 2026 (BigBoost, VJ) - desktop gallery: anchor the photo to the TOP.
   The gallery is a fixed 780px-tall box, half the screen wide, with
   object-fit: cover. On wide screens the photo is scaled up and the old
   "center 20%" cropped ~120px off its top (at 1920px), so the model's hair
   touched the announcement bar. The photos already carry 5-9% headroom; top
   anchoring shows it instead of cropping it (no added band). Extra crop goes
   to the bottom of the photo. Later in the file + same selector, so it wins.
   ========================================================================== */
@media (min-width: 990px) {
  body.pdp-v2 .product__images img,
  body.pdp-v2 .product__slides img,
  body.pdp-v2 .product__photo img {
    object-position: center top !important;
  }
}