/* ============================================================================
   REFINED PRODUCT DETAIL PAGE
   Layout from the approved mockup (.gen-pdp-refined.mjs), applied to real
   WooCommerce markup. Tokens mirror tiedye-overnight/_system/tiedye-system.css
   but are declared locally — the tie-dye system sheet is not deployed to the
   WordPress theme, and a PDP that depends on a file at the webroot would break
   the moment it moves.
   ========================================================================== */

.mrbs-pdp-wrap {
  --magenta: #E0218A;
  --orange: #F26522;
  --green: #7AC143;
  --blue: #0098D8;
  --violet: #8A2BE2;
  --primary: #E0218A;
  /* #B31169, not the brand magenta: white on #E0218A is 4.42:1 and fails.  */
  --primary-deep: #B31169;
  --ink: #1D1226;
  --muted: rgba(29, 18, 38, .62);
  --surface: #FBF3FA;
  --surface-deep: #F4E9F5;
  --card: #FFFFFF;
  --rainbow: linear-gradient(90deg, #E0218A, #F26522, #7AC143, #0098D8, #8A2BE2);
  --font-display: "Albert Sans", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --spring: cubic-bezier(.2, .9, .3, 1.2);
  --maxw: 1240px;

  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.7;
}

.mrbs-pdp-wrap *,
.mrbs-pdp-wrap *::before,
.mrbs-pdp-wrap *::after { box-sizing: border-box; }

.mrbs-pdp-wrap h1,
.mrbs-pdp-wrap h2,
.mrbs-pdp-wrap h3,
.mrbs-pdp-wrap h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--ink);
}

.mrbs-pdp-wrap img { max-width: 100%; display: block; }

/* ------------------------------- breadcrumb ------------------------------ */

.mrbs-pdp-wrap .crumb {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px clamp(16px, 3vw, 32px) 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.mrbs-pdp-wrap .crumb a { color: var(--muted); transition: color .16s ease; }
.mrbs-pdp-wrap .crumb a:hover,
.mrbs-pdp-wrap .crumb a:focus-visible { color: var(--primary-deep); }
.mrbs-pdp-wrap .crumb span { color: var(--ink); }

/* --------------------------------- grid ---------------------------------- */

.mrbs-pdp-wrap .pdp {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(20px, 3vw, 30px) clamp(16px, 3vw, 32px) clamp(30px, 4vw, 52px);
}

.mrbs-pdp-wrap .pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}

/* -------------------------------- gallery -------------------------------- */

.mrbs-pdp-wrap .gal-main {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(29, 18, 38, .07);
  box-shadow: 0 26px 50px -30px rgba(29, 18, 38, .4);
  position: relative;
}

.mrbs-pdp-wrap .gal-main img {
  width: 100%;
  aspect-ratio: 500 / 441;
  object-fit: cover;
}

.mrbs-pdp-wrap .thumbs { display: flex; gap: 11px; margin-top: 13px; flex-wrap: wrap; }

.mrbs-pdp-wrap .thumb {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 2px solid rgba(29, 18, 38, .10);
  cursor: pointer;
  padding: 0;
  transition: transform .16s var(--spring), border-color .18s ease, box-shadow .18s ease;
}

.mrbs-pdp-wrap .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mrbs-pdp-wrap .thumb:hover { transform: translateY(-2px); }
.mrbs-pdp-wrap .thumb.active { border-color: transparent; box-shadow: 0 0 0 2.5px var(--primary); }
.mrbs-pdp-wrap .thumb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* -------------------------------- buy box -------------------------------- */

.mrbs-pdp-wrap .buy .eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary-deep);
  margin-bottom: 12px;
}

.mrbs-pdp-wrap .buy h1 {
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.mrbs-pdp-wrap .stars-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 13px 0 2px;
  color: var(--orange);
  font-weight: 800;
}

.mrbs-pdp-wrap .stars-row small {
  color: var(--muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
}

.mrbs-pdp-wrap .price-lg {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--primary-deep);
  margin: 16px 0 2px;
}

.mrbs-pdp-wrap .price-lg del { color: var(--muted); font-weight: 700; font-size: 20px; margin-right: 8px; }
.mrbs-pdp-wrap .price-lg ins { text-decoration: none; }

.mrbs-pdp-wrap .buy-desc {
  margin: 16px 0 24px;
  color: var(--ink);
  max-width: 52ch;
  line-height: 1.7;
}

.mrbs-pdp-wrap .buy-desc p { margin: 0 0 10px; }

/* ------------------- variation form (real Woo markup) -------------------- */

.mrbs-pdp-wrap table.variations {
  width: 100%;
  border: 0;
  margin: 0 0 8px;
  background: none;
}

.mrbs-pdp-wrap table.variations,
.mrbs-pdp-wrap table.variations tbody,
.mrbs-pdp-wrap table.variations tr,
.mrbs-pdp-wrap table.variations th,
.mrbs-pdp-wrap table.variations td {
  display: block;
  border: 0;
  padding: 0;
  background: none;
}

.mrbs-pdp-wrap table.variations tr { margin-bottom: 22px; }

/* Salient colours bare <label> text white, which on this cream page renders
   the option labels invisible. Measured rgb(255,255,255) before this rule. */
.mrbs-pdp-wrap table.variations th.label label,
.mrbs-pdp-wrap .mrbs-opt-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink) !important;
  display: inline-block;
  margin: 0 0 11px;
}

.mrbs-pdp-wrap .mrbs-opt-value { color: var(--primary-deep) !important; margin-left: 2px; }

/* Only hidden once JS has painted a replacement. No JS, no class, native
   select stays usable — that is the whole no-JS fallback. */
.mrbs-pdp-wrap select.mrbs-painted { display: none !important; }

/* Salient wraps product selects in .fancy-select-wrap and Select2 renders its
   own combobox inside it. Once we have painted swatches, that combobox is a
   duplicate control, so the whole wrapper goes. */
.mrbs-pdp-wrap .mrbs-painted-wrap { display: none !important; }

.mrbs-pdp-wrap table.variations select {
  max-width: 100%;
  padding: 12px 14px;
  border: 2px solid rgba(29, 18, 38, .14);
  border-radius: 12px;
  background: #fff;
  font-family: var(--font-body);
  color: var(--ink);
}

.mrbs-pdp-wrap .mrbs-opts { display: flex; flex-wrap: wrap; gap: 11px; }

.mrbs-pdp-wrap .mrbs-swatch {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(29, 18, 38, .55);
  cursor: pointer;
  padding: 0;
  transition: transform .16s var(--spring), box-shadow .18s ease;
}

.mrbs-pdp-wrap .mrbs-swatch:hover { transform: translateY(-2px); }
.mrbs-pdp-wrap .mrbs-swatch:active { transform: translateY(0); }
.mrbs-pdp-wrap .mrbs-swatch.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink);
}
.mrbs-pdp-wrap .mrbs-swatch:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.mrbs-pdp-wrap .mrbs-pill {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 10px 17px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  border: 2px solid rgba(29, 18, 38, .14);
  cursor: pointer;
  transition: transform .16s var(--spring), border-color .18s ease, background-color .18s ease, color .18s ease;
}

.mrbs-pdp-wrap .mrbs-pill:hover { transform: translateY(-2px); border-color: var(--ink); }
.mrbs-pdp-wrap .mrbs-pill:active { transform: translateY(0); }
.mrbs-pdp-wrap .mrbs-pill.is-selected { border-color: transparent; background: var(--primary-deep); color: #fff; }
.mrbs-pdp-wrap .mrbs-pill:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Complex colour options need their names visible. A bare dot would make
   "Blue Bag with Black Logo" indistinguishable from the other blue bags. */
.mrbs-pdp-wrap .mrbs-color-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.25;
}

.mrbs-pdp-wrap .mrbs-color-dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(29, 18, 38, .2);
  border-radius: 999px;
}

.mrbs-pdp-wrap .mrbs-color-pill.is-selected .mrbs-color-dot {
  border-color: rgba(255, 255, 255, .75);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .2);
}

/* Visual products need visual choices. These compact cards still drive the
   native Woo select, but remove the code-to-gallery cross-reference burden.
   Redesigned 2026-08-18 (Luis: the first pass read as shapeless white blobs on
   staging). Two causes fixed together: (1) Salient's GLOBAL button styling
   (pill border-radius, its own padding/line-height) outranked the old rules —
   every shape-critical property is now html-body-specificity and !important;
   (2) the design itself now speaks the tie-dye system language: hard-offset
   ink shadow like the nav pill, photo tile edge-to-edge, label inside the
   card, selected = brand magenta ring + corner check badge. */
.mrbs-pdp-wrap .mrbs-image-opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  width: 100%;
  gap: 12px;
}

html body .mrbs-pdp-wrap button.mrbs-image-option {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: 6px 6px 8px !important;
  border: 2.5px solid rgba(29, 18, 38, .8) !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  line-height: 1.25 !important;
  box-shadow: 0 3px 0 rgba(29, 18, 38, .82);
  cursor: pointer;
  transition: transform .16s var(--spring), border-color .18s ease, box-shadow .18s ease;
}

.mrbs-pdp-wrap .mrbs-image-frame {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 9px;
  background: var(--surface);
}

.mrbs-pdp-wrap .mrbs-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mrbs-pdp-wrap .mrbs-image-frame--empty {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--muted);
}

.mrbs-pdp-wrap .mrbs-image-label {
  display: -webkit-box;
  min-height: 2.5em;
  margin-top: 7px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

html body .mrbs-pdp-wrap button.mrbs-image-option:hover {
  transform: translateY(-2px);
  border-color: var(--ink) !important;
  box-shadow: 0 5px 0 rgba(29, 18, 38, .82);
}
html body .mrbs-pdp-wrap button.mrbs-image-option:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(29, 18, 38, .82); }
html body .mrbs-pdp-wrap button.mrbs-image-option:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
html body .mrbs-pdp-wrap button.mrbs-image-option.is-selected {
  border-color: var(--primary) !important;
  box-shadow: 0 3px 0 var(--primary-deep);
}
.mrbs-pdp-wrap .mrbs-image-option.is-selected::after {
  content: "\2713";
  position: absolute;
  top: -9px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 0 var(--primary-deep);
}

.mrbs-pdp-wrap .mrbs-image-opts:not(.is-expanded) .mrbs-image-option:nth-child(n+13):not(.is-selected) { display: none; }

.mrbs-pdp-wrap .mrbs-image-toggle {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary-deep);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mrbs-pdp-wrap .mrbs-image-toggle:hover { color: var(--ink); }
.mrbs-pdp-wrap .mrbs-image-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Unavailable is legible, not invisible — the customer needs to see that the
   combination exists but is not buyable in this pairing. */
.mrbs-pdp-wrap .mrbs-pill.is-unavailable,
.mrbs-pdp-wrap .mrbs-swatch.is-unavailable,
.mrbs-pdp-wrap .mrbs-image-option.is-unavailable {
  opacity: .34;
  cursor: not-allowed;
  position: relative;
}

.mrbs-pdp-wrap .mrbs-pill.is-unavailable:hover,
.mrbs-pdp-wrap .mrbs-swatch.is-unavailable:hover,
.mrbs-pdp-wrap .mrbs-image-option.is-unavailable:hover { transform: none; }

.mrbs-pdp-wrap .mrbs-swatch.is-unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to top left, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%);
}

.mrbs-pdp-wrap .mrbs-variation-hint {
  flex: 1 0 100%;
  margin: 0 0 10px;
  color: var(--primary-deep);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}

.mrbs-pdp-wrap .mrbs-variation-hint[hidden] { display: none !important; }

.mrbs-pdp-wrap .reset_variations {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--primary-deep);
  text-decoration: underline;
}

.mrbs-pdp-wrap .woocommerce-variation-price { margin-bottom: 14px; }
.mrbs-pdp-wrap.mrbs-variation-enhanced .woocommerce-variation-price { display: none; }
.mrbs-pdp-wrap .woocommerce-variation-price .price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--primary-deep); }
.mrbs-pdp-wrap .woocommerce-variation-availability .stock { font-weight: 700; }
.mrbs-pdp-wrap .woocommerce-variation-availability .out-of-stock { color: #B00020; }

/* --------------------------- qty + add to cart --------------------------- */

.mrbs-pdp-wrap form.cart,
.mrbs-pdp-wrap .woocommerce-variation-add-to-cart {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 20px;
}

/* The variations form is a column (options stack above the cart row); only the
   inner add-to-cart row is a flex row. */
.mrbs-pdp-wrap form.variations_form.cart { display: block; }

.mrbs-pdp-wrap .quantity {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  margin: 0;
}

/* Covers both our injected <button> and Salient's own input.minus / input.plus,
   whichever ended up in the box. */
.mrbs-pdp-wrap .mrbs-qty-btn,
.mrbs-pdp-wrap .quantity input.minus,
.mrbs-pdp-wrap .quantity input.plus {
  width: 46px;
  height: 54px;
  border: 0;
  border-radius: 0;
  background: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  transition: background .16s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mrbs-pdp-wrap .mrbs-qty-btn:hover,
.mrbs-pdp-wrap .quantity input.minus:hover,
.mrbs-pdp-wrap .quantity input.plus:hover { background: var(--surface); }

.mrbs-pdp-wrap .mrbs-qty-btn:focus-visible,
.mrbs-pdp-wrap .quantity input.minus:focus-visible,
.mrbs-pdp-wrap .quantity input.plus:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

.mrbs-pdp-wrap .quantity input.qty {
  width: 54px;
  height: 54px;
  border: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  padding: 0;
  -moz-appearance: textfield;
}

.mrbs-pdp-wrap .quantity input.qty::-webkit-outer-spin-button,
.mrbs-pdp-wrap .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Salient paints this button its own theme brown from a higher-specificity
   rule, so the brand colour has to be stated at least as loudly. */
.mrbs-pdp-wrap .buy button.single_add_to_cart_button,
.mrbs-pdp-wrap button.single_add_to_cart_button {
  flex: 1 1 200px;
  min-height: 54px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background-color: var(--primary-deep) !important;
  background-image: none !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .16s var(--spring), background-color .18s ease;
}

.mrbs-pdp-wrap button.single_add_to_cart_button:hover { transform: translateY(-2px); background-color: #8E0D53 !important; }
.mrbs-pdp-wrap button.single_add_to_cart_button:active { transform: translateY(0); }
.mrbs-pdp-wrap button.single_add_to_cart_button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.mrbs-pdp-wrap button.single_add_to_cart_button.disabled,
.mrbs-pdp-wrap button.single_add_to_cart_button:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.mrbs-pdp-wrap .stock.out-of-stock { color: #B00020; font-weight: 700; }

/* ------------------------------ pickup note ------------------------------ */

.mrbs-pdp-wrap .pickup-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid rgba(29, 18, 38, .08);
  border-radius: 16px;
  padding: 18px 20px;
  margin-top: 6px;
}

.mrbs-pdp-wrap .pickup-note .pin { font-size: 20px; line-height: 1.2; }
.mrbs-pdp-wrap .pickup-note h4 { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.mrbs-pdp-wrap .pickup-note p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ------------------------- you might also like --------------------------- */

.mrbs-pdp-wrap .rel {
  background: var(--win-bg, var(--surface-deep));
  margin-top: clamp(30px, 4vw, 56px);
}

.mrbs-pdp-wrap .rel .section { padding: clamp(44px, 6vw, 76px) 0; }
.mrbs-pdp-wrap .rel .container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

.mrbs-pdp-wrap .sec-head { margin-bottom: 28px; }

.mrbs-pdp-wrap .sec-head h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: var(--win-fg, var(--ink));
}

.mrbs-pdp-wrap .sec-head .bar {
  width: 96px;
  height: 5px;
  border-radius: 3px;
  background: var(--rainbow);
  margin-top: 12px;
}

/* min() against the real card count, so one upsell fills its own column
   instead of sitting in a quarter-width sliver beside three empty tracks. */
.mrbs-pdp-wrap .rel .products {
  display: grid;
  grid-template-columns: repeat(min(var(--rel-count, 4), 4), minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  max-width: calc(var(--rel-count, 4) * 320px);
}

.mrbs-pdp-wrap .mrbs-rel-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(29, 18, 38, .08);
  box-shadow: 0 18px 34px -26px rgba(29, 18, 38, .5);
  display: flex;
  flex-direction: column;
}

/* Explicit, because an ancestor .on-dark sets color:#fff and these cards are
   white — that cascade is what made product names invisible in the mockups. */
.mrbs-pdp-wrap .mrbs-rel-card,
.mrbs-pdp-wrap .mrbs-rel-card h3,
.mrbs-pdp-wrap .mrbs-rel-card h3 a { color: var(--ink); }

/* <a> is inline by default, so aspect-ratio and overflow are both no-ops on it. */
.mrbs-pdp-wrap .mrbs-rel-card a.ph {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
}

.mrbs-pdp-wrap .mrbs-rel-card a.ph img { width: 100%; height: 100%; object-fit: cover; }

.mrbs-pdp-wrap .mrbs-rel-card .body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mrbs-pdp-wrap .mrbs-rel-card h3 { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.mrbs-pdp-wrap .mrbs-rel-card .price { font-family: var(--font-display); font-weight: 800; color: var(--primary-deep); font-size: 15px; }
.mrbs-pdp-wrap .mrbs-rel-card .price del { color: var(--muted); font-weight: 700; }
.mrbs-pdp-wrap .mrbs-rel-card .price ins { text-decoration: none; }

.mrbs-pdp-wrap .mrbs-rel-card .button {
  margin-top: auto;
  display: inline-block;
  text-align: center;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--win-atc, var(--ink));
  color: var(--win-atc-fg, #fff);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform .16s var(--spring), opacity .18s ease;
}

.mrbs-pdp-wrap .mrbs-rel-card .button:hover { transform: translateY(-2px); }
.mrbs-pdp-wrap .mrbs-rel-card .button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.mrbs-pdp-wrap .mrbs-rel-card .added_to_cart { font-size: 12px; font-weight: 700; color: var(--primary-deep); text-decoration: underline; }

/* ---------------------- window palettes (task 8) -------------------------
   The 8/13 call left this open: green is out, blue and purple are fine, lilac
   is subtle, varied was liked but unsettled. ?win=<key> flips between them.
   ------------------------------------------------------------------------ */

.mrbs-win-lilac .mrbs-pdp-wrap .rel { --win-bg: #F4E9F5; --win-fg: #1D1226; --win-atc: #1D1226; --win-atc-fg: #FFFFFF; }
.mrbs-win-green .mrbs-pdp-wrap .rel { --win-bg: #7AC143; --win-fg: #1D1226; --win-atc: #1D1226; --win-atc-fg: #FFFFFF; }
.mrbs-win-blue  .mrbs-pdp-wrap .rel { --win-bg: #0098D8; --win-fg: #1D1226; --win-atc: #1D1226; --win-atc-fg: #FFFFFF; }
.mrbs-win-grape .mrbs-pdp-wrap .rel { --win-bg: #6E22B5; --win-fg: #FFFFFF; --win-atc: #FFFFFF; --win-atc-fg: #1D1226; }

/* Varied: one card border per brand colour, on the subtle lilac ground. */
.mrbs-win-varied .mrbs-pdp-wrap .rel { --win-bg: #F4E9F5; --win-fg: #1D1226; --win-atc: #1D1226; --win-atc-fg: #FFFFFF; }
.mrbs-win-varied .mrbs-pdp-wrap .mrbs-rel-card:nth-child(1) { border: 3px solid #E0218A; }
.mrbs-win-varied .mrbs-pdp-wrap .mrbs-rel-card:nth-child(2) { border: 3px solid #F26522; }
.mrbs-win-varied .mrbs-pdp-wrap .mrbs-rel-card:nth-child(3) { border: 3px solid #0098D8; }
.mrbs-win-varied .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4) { border: 3px solid #8A2BE2; }

/* ------------------------------ responsive ------------------------------- */

@media (max-width: 1024px) {
  .mrbs-pdp-wrap .rel .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .mrbs-pdp-wrap .pdp-grid { grid-template-columns: minmax(0, 1fr); }
  .mrbs-pdp-wrap .crumb { padding-top: 24px; }
}

@media (max-width: 520px) {
  .mrbs-pdp-wrap .rel .products { grid-template-columns: minmax(0, 1fr); }
  .mrbs-pdp-wrap .thumb { width: 64px; height: 64px; }
  .mrbs-pdp-wrap button.single_add_to_cart_button { flex: 1 1 100%; }
  .mrbs-pdp-wrap .mrbs-image-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .mrbs-pdp-wrap * { transition: none !important; }
}

/* ------------------- launch-sweep fixes (2026-08-25) --------------------- */

/* Variation descriptions inherited white text from an old dark-design rule and
   were invisible on the cream body. Hardcoded ink per the no-CSS-var rule. */
.mrbs-pdp-wrap .woocommerce-variation-description,
.mrbs-pdp-wrap .woocommerce-variation-description p { color: #250D09; }

/* Sold-individually: Woo hides the qty input; never show an empty stepper. */
.mrbs-pdp-wrap form.cart .quantity.hidden { display: none !important; }

/* Gift-card (and any other) form labels rendered white-on-cream — Salient
   colours bare labels white, and it wins without !important (same fight as
   the variations-table rule above). */
.mrbs-pdp-wrap form.cart label,
html body .mrbs-pdp-wrap .woocommerce_gc_giftcard_form label,
html body .mrbs-pdp-wrap .woocommerce_gc_giftcard_form .wc_gc_field label {
  color: #250D09 !important;
}

/* Very light colour dots (white, ivory) vanished against white pills. */
.mrbs-pdp-wrap .mrbs-color-dot { border-color: rgba(29, 18, 38, .38); }

/* Kept native selects (Baja, Pasties): Select2 is detached by JS; make sure
   the native control keeps its caret and the Salient wrapper draws nothing. */
.mrbs-pdp-wrap table.variations select { appearance: auto; -webkit-appearance: menulist; }
.mrbs-pdp-wrap table.variations .fancy-select-wrap {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.mrbs-pdp-wrap table.variations .fancy-select-wrap::before,
.mrbs-pdp-wrap table.variations .fancy-select-wrap::after { display: none !important; }
.mrbs-pdp-wrap table.variations .select2-container { display: none !important; }

/* ==================== tie-dye launch skin (2026-08-25) ====================
   Ports pdp-refined-sunset-v3.html (the approved "varied v2" windows) onto
   the real PDP. Everything is gated on body.mrbs-tiedye — the class the
   mrbs_tiedye_launch option adds — so with the flag off this whole block is
   inert and the cream design above is untouched.

   Cascade note: the chrome sheet (mrbs-tiedye-launch.css, priority 1)
   whitens p/li/td/span/h1-h6 inside .container-wrap at specificity (0,3,2).
   Every ink re-assert below is written at >= (0,3,2); this sheet enqueues
   after the chrome, so ties resolve our way.
   ========================================================================== */

/* Salient's breadcrumb floats on the sky: white-ish trail, white current. */
body.mrbs-tiedye .container-wrap .woocommerce-breadcrumb,
body.mrbs-tiedye .container-wrap .woocommerce-breadcrumb a { color: rgba(255, 255, 255, .6); }
body.mrbs-tiedye .container-wrap .woocommerce-breadcrumb a:hover,
body.mrbs-tiedye .container-wrap .woocommerce-breadcrumb a:focus-visible { color: #fff; }
body.mrbs-tiedye .container-wrap .woocommerce-breadcrumb span { color: #fff; }

/* The product section is the white "pop window" floating on the sky. */
body.mrbs-tiedye .mrbs-pdp-wrap .pdp {
  width: min(100% - 24px, var(--maxw));
  margin: clamp(10px, 1.5vw, 20px) auto clamp(34px, 4vw, 60px);
  padding: clamp(20px, 3vw, 38px);
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 46px 90px -44px rgba(0, 0, 0, .72), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Dark ink back inside the white window (the chrome blanket whitened it). */
body.mrbs-tiedye .mrbs-pdp-wrap .pdp h1,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp h2,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp h3,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp h4,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp p,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp li,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp td,
body.mrbs-tiedye .mrbs-pdp-wrap .pdp span { color: var(--ink); }

/* Re-asserts over the blanket above (later + more classes). */
body.mrbs-tiedye .mrbs-pdp-wrap .pdp .pickup-note p { color: var(--muted); }
body.mrbs-tiedye .mrbs-pdp-wrap .pdp .mrbs-variation-hint { color: var(--primary-deep); }
body.mrbs-tiedye .mrbs-pdp-wrap .pdp .stock.out-of-stock { color: #B00020; }

/* Rainbow underline under the title, rainbow bar along the gallery bottom. */
body.mrbs-tiedye .mrbs-pdp-wrap .buy h1 {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}
body.mrbs-tiedye .mrbs-pdp-wrap .buy h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 150px;
  height: 5px;
  border-radius: 999px;
  background: var(--rainbow);
}
body.mrbs-tiedye .mrbs-pdp-wrap .gal-main {
  border-color: rgba(29, 18, 38, .1);
  box-shadow: none;
}
body.mrbs-tiedye .mrbs-pdp-wrap .gal-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--rainbow);
}

/* Locked button token: brand magenta #E0218A, white text (standing accepted
   4.42:1 exception — do NOT "fix" back to #B31169 as the resting colour). */
body.mrbs-tiedye .mrbs-pdp-wrap button.single_add_to_cart_button { background-color: #E0218A !important; }
body.mrbs-tiedye .mrbs-pdp-wrap button.single_add_to_cart_button:hover { background-color: #B31169 !important; }

/* ------------- You Might Also Like: varied windows on the sky ------------ */

body.mrbs-tiedye .mrbs-pdp-wrap .rel { background: transparent; }

body.mrbs-tiedye .mrbs-pdp-wrap .sec-head { text-align: center; }
body.mrbs-tiedye .mrbs-pdp-wrap .sec-head h2 {
  color: #fff;
  font-size: clamp(26px, 3.2vw, 40px);
}
body.mrbs-tiedye .mrbs-pdp-wrap .sec-head .bar { width: 120px; margin: 14px auto 0; }
body.mrbs-tiedye .mrbs-pdp-wrap .rel .products { margin: 0 auto; }

/* Each card is a coloured window, cycling the approved varied-v2 palette.
   All four grounds are light, so ink stays dark everywhere. */
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card {
  border: 0;
  background: var(--w-bg, #7AC143);
  box-shadow: 0 38px 74px -40px rgba(0, 0, 0, .72);
}
/* border: 0 repeated here because the .mrbs-win-varied per-card border rules
   carry an :nth-child of their own — (0,4,0) — and outrank the reset above. */
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+1) { --w-bg: #7AC143; border: 0; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+2) { --w-bg: #0098D8; border: 0; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+3) { --w-bg: #C9A6F2; border: 0; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+4) { --w-bg: #FFF5E1; border: 0; }

body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card h3,
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card h3 a,
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card p,
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card span { color: var(--ink); }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .added_to_cart { color: var(--ink); }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card a.ph { background: #fff; }

/* Dark-ink ATC pill with white text, per the mockup's --w-atc tokens. */
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button {
  background: var(--ink);
  color: #fff;
}

/* ------- details + BYOP cta-band (pdp mockup parity, 8/26) ------- */
.mrbs-pdp-wrap { --green-deep: #55942A; }
/* legacy custom-related carousel (single-product.php) is superseded by the
   refined "You Might Also Like" section rendering the same custom IDs */
.customRelated, .span_12.dark:has(> .woocommerce > .customRelated) { display: none !important; }
.mrbs-pdp-wrap /* detail / features */
.detail-sec {background:var(--detail-bg,var(--surface))}
.mrbs-pdp-wrap .detail-grid {max-width:var(--maxw);margin:0 auto;padding:clamp(46px,6vw,76px) clamp(16px,3vw,32px);display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,4vw,56px);align-items:start}
.mrbs-pdp-wrap .detail-grid h2 {font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;color:var(--ink);margin-bottom:18px;position:relative;display:inline-block;padding-bottom:14px}
.mrbs-pdp-wrap .detail-grid h2::after {content:"";position:absolute;left:0;bottom:0;width:72px;height:4px;border-radius:999px;background:var(--rainbow)}
.mrbs-pdp-wrap .detail-grid p {color:var(--ink);margin-bottom:14px;max-width:60ch;line-height:1.75}
.mrbs-pdp-wrap .feat-list {list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.mrbs-pdp-wrap .feat-list li {display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink);font-weight:600}
.mrbs-pdp-wrap .feat-list .tick {flex:0 0 auto;width:24px;height:24px;border-radius:999px;background:var(--green-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.mrbs-pdp-wrap .spec-card {background:#fff;border-radius:18px;padding:24px 26px;box-shadow:0 18px 40px -26px rgba(29,18,38,.4);border:1px solid rgba(29,18,38,.05)}
.mrbs-pdp-wrap .spec-card h3 {font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-deep);margin-bottom:16px}
.mrbs-pdp-wrap .spec-card dl {margin:0;display:grid;grid-template-columns:auto 1fr;gap:12px 16px}
.mrbs-pdp-wrap .spec-card dt {font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.mrbs-pdp-wrap .spec-card dd {margin:0;font-weight:700;font-size:14px;color:var(--ink);text-align:right}
@media(max-width:860px) {
.mrbs-pdp-wrap .detail-grid {grid-template-columns:1fr}
}
.mrbs-pdp-wrap /* generalised from the spotlight buy-card — a light panel floating on stars */
  .pop-window {position:relative;border-radius:26px;padding:clamp(20px,3vw,38px);
    background:var(--w-bg);color:var(--w-fg);
    box-shadow:0 46px 90px -44px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06)}
.mrbs-pdp-wrap .pop-window--top {background:#fff;color:var(--ink)}
.mrbs-pdp-wrap .pop-window h1, .mrbs-pdp-wrap .pop-window h2, .mrbs-pdp-wrap .pop-window h3, .mrbs-pdp-wrap .pop-window h4, .mrbs-pdp-wrap .pop-window p, .mrbs-pdp-wrap .pop-window dt, .mrbs-pdp-wrap .pop-window dd, .mrbs-pdp-wrap .pop-window li {color:inherit}
.mrbs-pdp-wrap .win .detail-sec {background:transparent}
.mrbs-pdp-wrap .win .detail-grid--win {align-items:center}
.mrbs-pdp-wrap /* Brendan 01:12 — Details box centred against the bullets */
  .win .spec-card {box-shadow:0 46px 90px -44px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06);border:0}
.mrbs-pdp-wrap .win .feat-list .tick {background:var(--w-tick,var(--green-deep));color:var(--w-tick-fg,#fff)}
.mrbs-pdp-wrap /* the CTA banner is NOT a window — hard line above it makes the break explicit */
  .win .cta-band {border-top:6px solid transparent;border-image:var(--rainbow) 1}
.mrbs-pdp-wrap /* ---- re-ink the top window ----------------------------------------------
     The starfield family inherits midnight's CSS, .mrbs-pdp-wrap which paints the whole buy
     panel white because there it sits directly on the navy. Inside a light
     window that is white-on-white: the h1, .mrbs-pdp-wrap price, .mrbs-pdp-wrap description, .mrbs-pdp-wrap option labels, .mrbs-pdp-wrap quantity stepper and pickup note all vanished. Caught by screenshot, .mrbs-pdp-wrap not
     by any assertion. Selectors here are one class deeper than midnight's so
     they win on specificity regardless of source order. */
  .win .pop-window--top .buy .eyebrow {color:var(--primary-deep);opacity:1}
.mrbs-pdp-wrap .win .pop-window--top .buy h1 {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .stars-row small {color:var(--muted)}
.mrbs-pdp-wrap .win .pop-window--top .price-lg {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .price-lg .from {color:var(--muted)}
.mrbs-pdp-wrap .win .pop-window--top .buy-desc {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .opt-label {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .opt-label b {color:var(--ink);opacity:1}
.mrbs-pdp-wrap .win .pop-window--top .swatch {border-color:rgba(29,18,38,.28)}
.mrbs-pdp-wrap .win .pop-window--top .swatch[aria-pressed="true"] {border-color:var(--ink);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .size-pill {background:#fff;color:var(--ink);border-color:rgba(29,18,38,.28)}
.mrbs-pdp-wrap .win .pop-window--top .size-pill:hover {border-color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .qty {border-color:var(--ink);background:#fff}
.mrbs-pdp-wrap .win .pop-window--top .qty button {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .qty button:hover {background:rgba(29,18,38,.08)}
.mrbs-pdp-wrap .win .pop-window--top .qty span {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .pickup-note {background:var(--surface);border-color:rgba(29,18,38,.1)}
.mrbs-pdp-wrap .win .pop-window--top .pickup-note h4 {color:var(--ink)}
.mrbs-pdp-wrap .win .pop-window--top .pickup-note p {color:var(--muted)}
.mrbs-pdp-wrap .win .pop-window--top .gal-main {border-color:rgba(29,18,38,.1);box-shadow:none}
.mrbs-pdp-wrap .win .pop-window--top .thumb {border-color:rgba(29,18,38,.18);background:#fff}
.mrbs-pdp-wrap /* The Details aside is a window too — midnight styles it as a translucent
     dark card, .mrbs-pdp-wrap which ignored the chosen palette entirely. */
  .win .pop-window--specs {background:var(--w-bg);color:var(--w-fg)}
.mrbs-pdp-wrap .win .pop-window--specs h3, .mrbs-pdp-wrap .win .pop-window--specs dd {color:var(--w-fg)}
.mrbs-pdp-wrap .win .pop-window--specs dt {color:var(--w-fg);opacity:.72}
.mrbs-pdp-wrap .win .pop-window--why h2, .mrbs-pdp-wrap .win .pop-window--why p, .mrbs-pdp-wrap .win .pop-window--why li {color:var(--w-fg)}
.mrbs-pdp-wrap .detail-sec {background:transparent}
.mrbs-pdp-wrap .detail-grid h2 {color:#fff}
.mrbs-pdp-wrap .detail-grid p {color:rgba(255,255,255,.84)}
.mrbs-pdp-wrap .feat-list li {color:#fff}
.mrbs-pdp-wrap .spec-card {background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);box-shadow:none}
.mrbs-pdp-wrap .spec-card h3 {color:#fff}
.mrbs-pdp-wrap .spec-card dt {color:rgba(255,255,255,.62)}
.mrbs-pdp-wrap .spec-card dd {color:#fff}
/* ws6: the live port wraps spec-card in a .pop-window whose "color:inherit"
   list rule (0,2,2) beats the three white-ink rules above (0,2,1), leaving
   dark ink on the translucent card over magenta. Restate one class deeper. */
.mrbs-pdp-wrap .pop-window .spec-card h3 {color:#fff !important}
.mrbs-pdp-wrap .pop-window .spec-card dt {color:rgba(255,255,255,.62) !important}
.mrbs-pdp-wrap .pop-window .spec-card dd {color:#fff !important}
.mrbs-pdp-wrap .pop-window--why {--w-bg:#0098D8}
.mrbs-pdp-wrap .pop-window--specs {--w-bg:#C9A6F2}
.mrbs-pdp-wrap .cta-band {background:none !important}
.mrbs-pdp-wrap /* generated by .ink-pass.mjs — ink per band, .mrbs-pdp-wrap measured against the locked ramp */
.cta-band:not(#_), .mrbs-pdp-wrap .cta-band:not(#_) p, .mrbs-pdp-wrap .cta-band:not(#_) li, .mrbs-pdp-wrap .cta-band:not(#_) td, .mrbs-pdp-wrap .cta-band:not(#_) span, .mrbs-pdp-wrap .cta-band:not(#_) a, .mrbs-pdp-wrap .cta-band:not(#_) .wpb_text_column, .mrbs-pdp-wrap .cta-band:not(#_) .col {color:#FFFFFF !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
.mrbs-pdp-wrap .cta-band:not(#_) h1, .mrbs-pdp-wrap .cta-band:not(#_) h2, .mrbs-pdp-wrap .cta-band:not(#_) h3, .mrbs-pdp-wrap .cta-band:not(#_) h4, .mrbs-pdp-wrap .cta-band:not(#_) h5, .mrbs-pdp-wrap .cta-band:not(#_) h6 {color:#FFFFFF !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
.mrbs-pdp-wrap .cta-band:not(#_) .wpb_text_column a, .mrbs-pdp-wrap .cta-band:not(#_) a:hover {color:#FFFFFF !important;text-decoration-color:#FFFFFF}
.mrbs-pdp-wrap .cta-band:not(#_) .nectar-button, .mrbs-pdp-wrap .cta-band:not(#_) .nectar-button *, .mrbs-pdp-wrap .cta-band:not(#_) button, .mrbs-pdp-wrap .cta-band:not(#_) button * {color:#fff !important;text-shadow:none !important}
.mrbs-pdp-wrap .cta-band:not(#_) > a:nth-child(3), .mrbs-pdp-wrap .cta-band:not(#_) > a:nth-child(3) * {color:#1D1226 !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
.mrbs-pdp-wrap .detail-sec:not(#_), .mrbs-pdp-wrap .detail-sec:not(#_) p, .mrbs-pdp-wrap .detail-sec:not(#_) li, .mrbs-pdp-wrap .detail-sec:not(#_) td, .mrbs-pdp-wrap .detail-sec:not(#_) span, .mrbs-pdp-wrap .detail-sec:not(#_) a, .mrbs-pdp-wrap .detail-sec:not(#_) .wpb_text_column, .mrbs-pdp-wrap .detail-sec:not(#_) .col {color:#FFF5E1 !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
.mrbs-pdp-wrap .detail-sec:not(#_) h1, .mrbs-pdp-wrap .detail-sec:not(#_) h2, .mrbs-pdp-wrap .detail-sec:not(#_) h3, .mrbs-pdp-wrap .detail-sec:not(#_) h4, .mrbs-pdp-wrap .detail-sec:not(#_) h5, .mrbs-pdp-wrap .detail-sec:not(#_) h6 {color:#FFFFFF !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
.mrbs-pdp-wrap .detail-sec:not(#_) .wpb_text_column a, .mrbs-pdp-wrap .detail-sec:not(#_) a:hover {color:#FFFFFF !important;text-decoration-color:#FFFFFF}
.mrbs-pdp-wrap .detail-sec:not(#_) .nectar-button, .mrbs-pdp-wrap .detail-sec:not(#_) .nectar-button *, .mrbs-pdp-wrap .detail-sec:not(#_) button, .mrbs-pdp-wrap .detail-sec:not(#_) button * {color:#fff !important;text-shadow:none !important}
.mrbs-pdp-wrap .detail-sec:not(#_) > div:nth-child(1) > div:nth-child(1), .mrbs-pdp-wrap .detail-sec:not(#_) > div:nth-child(1) > div:nth-child(1) * {color:#1D1226 !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
/* ws6 2026-08-26: this band was measured while the spec-card was still WHITE;
   the starfield variant later made it translucent over the magenta ramp, so
   the baked #1D1226 became dark-on-dark. White ink per the mockup's dark
   variant (spec-card h3/dd #fff, dt at .62). */
.mrbs-pdp-wrap .detail-sec:not(#_) > div:nth-child(1) > aside:nth-child(2), .mrbs-pdp-wrap .detail-sec:not(#_) > div:nth-child(1) > aside:nth-child(2) * {color:#FFFFFF !important;text-shadow:none !important;-webkit-text-fill-color:currentColor !important}
.mrbs-pdp-wrap .detail-sec:not(#_) > div:nth-child(1) > aside:nth-child(2) dt {color:rgba(255,255,255,.62) !important}

/* base detail/cta-band/btn--light rules from pdp-mockups/_system/tiedye-system.css (8/26) */
.mrbs-pdp-wrap .btn--light {background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(0,0,0,.15);border:2px solid var(--ink)}
.mrbs-pdp-wrap .btn--light:hover {background:var(--surface);filter:none}
.mrbs-pdp-wrap /* ============================ BOTTOM CTA BAND ========================== */
.cta-band {background:var(--cta-dark);color:#fff;text-align:center;padding:clamp(48px,7vw,90px) 24px}
.mrbs-pdp-wrap .cta-band h2 {font-size:clamp(28px,4.4vw,52px);font-weight:800;color:#fff}
.mrbs-pdp-wrap .cta-band p {max-width:52ch;margin:14px auto 26px;color:rgba(255,255,255,.9)}
.mrbs-pdp-wrap .cta-band .btn--light {box-shadow:0 8px 24px rgba(255,255,255,.3)}
.mrbs-pdp-wrap { --cta-dark: linear-gradient(120deg,#D904B5,#6503A6); }
.mrbs-pdp-wrap .cta-band .btn { display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:16px; padding:15px 34px; border-radius:999px; text-decoration:none; transition:transform .2s ease; }
.mrbs-pdp-wrap .cta-band .btn:hover { filter:brightness(.92); transform:translateY(-2px); }

/* ==================== Luis 8/26 PM batch (PDP) ==================== */
/* You Might Also Like: colour moves to the BORDER — white card bodies
   (was: solid colour plates). The nth-child cycle still supplies --w-bg. */
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card[class] {
  background: #fff !important;
  border: 3px solid var(--w-bg, #7AC143) !important;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .6);
}
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button {
  font-size: 12.5px !important;
  background: var(--ink) !important;
  color: #fff !important;
}
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button * { color: #fff !important; font-size: inherit !important; }
/* sale price: no underline, $ visible */
.mrbs-pdp-wrap .price ins { text-decoration: none !important; }
.mrbs-pdp-wrap .price .woocommerce-Price-currencySymbol { color: inherit !important; }
/* BYOP band: clear space from the content above */
.mrbs-pdp-wrap .cta-band { margin-top: clamp(48px, 7vw, 96px) !important; }


/* ==================== Luis 9/16 dress-rehearsal batch (PDP) ==================== */
/* (8)(9) Phones: gallery thumbnails and the title block sit on the card's centre
   line. Desktop keeps the approved two-column, left-aligned buy box. */
@media (max-width: 860px) {
  body.mrbs-tiedye .mrbs-pdp-wrap .thumbs { justify-content: center; }
  body.mrbs-tiedye .mrbs-pdp-wrap .buy .eyebrow,
  body.mrbs-tiedye .mrbs-pdp-wrap .buy .price-lg,
  body.mrbs-tiedye .mrbs-pdp-wrap .buy .stars-row { text-align: center; justify-content: center; }
  body.mrbs-tiedye .mrbs-pdp-wrap .buy h1 { display: block; text-align: center; }
  body.mrbs-tiedye .mrbs-pdp-wrap .buy h1::after { left: 50%; transform: translateX(-50%); }
}

/* (10)(11) "You Might Also Like" cards = the Best Sellers card, exactly: centred
   15.5px title with a two-line floor, centred price, the cycling colour pill with
   the cart glyph (not Salient's bag icon on an ink bar), 5-colour border cycle.
   Supersedes the 8/26 PM ink button. The grid centres itself at any width. */
body.mrbs-tiedye .mrbs-pdp-wrap .rel .products { margin-left: auto !important; margin-right: auto !important; justify-content: center; max-width: 100%; }
/* Fewer than four recommendations: the cards centre as a group, not left-packed
   in a four-column grid (two cards sat 281px left of centre at 1280). */
@media (min-width: 521px) {
  body.mrbs-tiedye .mrbs-pdp-wrap .rel .products { display: flex !important; flex-wrap: wrap; justify-content: center; }
  body.mrbs-tiedye .mrbs-pdp-wrap .rel .products > .mrbs-rel-card { flex: 0 1 calc((100% - 3 * var(--rel-gap, 24px)) / 4); min-width: 220px; }
}
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card a.ph { aspect-ratio: 500 / 441; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .body { padding: 16px 18px 20px; text-align: center; align-items: center; gap: 0; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card h3 { font-size: 15.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0; min-height: 2.4em; width: 100%; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .price { font-size: 16px; margin-top: auto; padding-top: 8px; min-height: 38px; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(5n+1) { --w-bg: #E0218A; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(5n+2) { --w-bg: #F26522; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(5n+3) { --w-bg: #7AC143; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(5n+4) { --w-bg: #0098D8; }
body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(5n+5) { --w-bg: #8A2BE2; }
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button {
  --atc: #09A603;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  width: auto;
  margin-top: 12px;
  padding: 10px 22px !important;
  font-size: 12px !important;
  letter-spacing: .08em;
  background: var(--atc) !important;
  -webkit-text-stroke: 0.4px rgba(0, 0, 0, .35);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--atc) 32%, transparent);
}
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+2) .button { --atc: #0098D8; }
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+3) .button { --atc: #6503A6; }
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card:nth-child(4n+4) .button { --atc: #D904B5; }
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button:hover { filter: brightness(.92); }
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button i { display: none !important; }
html body.mrbs-tiedye .mrbs-pdp-wrap .mrbs-rel-card .button::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h-2l-1 2v2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2h-11.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.94-2zm0 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h-2l-1 2v2h2l3.6 7.59-1.35 2.44c-.16.28-.25.61-.25.97 0 1.1.9 2 2 2h12v-2h-11.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1h-14.31l-.94-2zm0 15c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}