/*
 * ROZE BioHealth — Product Page Styles  v7.0.0
 * /wp-content/themes/supro-child/css/roze-product-page.css
 *
 * v7 changes vs v6:
 * 1. position:sticky moved from .roze-pdp-gallery-col (grid item)
 *    to .roze-pdp-gallery-sticky (inner wrapper).
 *    Fixes Chrome bug where sticky on a grid item displaces the column.
 *
 * 2. CSS Flexbox order on .summary.entry-summary
 *    Forces visual order: Title → Rating → Short Desc → everything else
 *    Works with the functions.php change (short desc moved to P4).
 *
 * 3. All #primary gallery specificity overrides retained.
 */


/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  --rp-cream: #F2EDE3;
  --rp-cream-d: #E8E0D2;
  --rp-cream-m: #EDE7DA;
  --rp-cream-dp: #DDD5C5;
  --rp-black: #0F0F0F;
  --rp-dark: #1A1A1A;
  --rp-mid: #6A6A62;
  --rp-light: #9A9A90;
  --rp-white: #FAFAF7;
  --rp-recia: "Recia", "Georgia", serif;
  --rp-satoshi: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --rp-gutter: 6%;
}


/* ══════════════════════════════════════
   PAGE & BODY
══════════════════════════════════════ */
body.single-product,
body.single-product #page,
body.single-product .site-content,
body.single-product #content,
body.single-product #primary,
body.single-product #main,
body.single-product .site-main {
  background: var(--rp-cream) !important;
  font-family: var(--rp-satoshi) !important;
  overflow: visible !important;
  /* UNLOCK STICKY */
}

/* Strip Bootstrap #primary col-md-12 padding */
body.single-product #primary,
body.single-product #primary[class*="col-"],
body.single-product #content,
body.single-product #main,
body.single-product .site-main {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

/* Strip outer Bootstrap site container */
body.single-product #content.site-content,
body.single-product .site-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Remove ALL Bootstrap and Supro container/column constraints */
body.single-product #content>.container,
body.single-product .site-content>.container,
body.single-product #content>div>.container,
body.single-product .site-content>div>.container,
body.single-product .site-content>.container>.row,
body.single-product #content>.container>.row,
body.single-product .site-content>div>.container>.row {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  /* UNLOCK STICKY */
}

/* Remove Bootstrap column offsets and widths for #primary */
body.single-product #primary,
body.single-product #primary.content-area,
body.single-product #primary[class*="col-"],
body.single-product .site-main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  left: 0 !important;
  right: 0 !important;
  float: none !important;
  padding: 0 !important;
}

/* Kill Supro's narrow summary constraint */
.single-product .summary.entry-summary,
.single-product div.product .summary,
.supro-product-summary {
  max-width: none !important;
  width: 100% !important;
}

body.single-product #secondary,
body.single-product .widget-area {
  display: none !important;
}

body.single-product .products-recently-viewed,
body.single-product .recently-viewed-products,
body.single-product [class*="recently-viewed"],
body.single-product [class*="recently_viewed"],
body.single-product .supro-products-recently-viewed {
  display: none !important;
}


/* ══════════════════════════════════════
   PRODUCT TOOLBAR — breadcrumb area
══════════════════════════════════════ */
body.single-product .product-toolbar {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-product .product-toolbar>.container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 var(--rp-gutter) !important;
}

/* Breadcrumb — full-width black bar */
body.single-product .woocommerce-breadcrumb,
body.single-product nav.woocommerce-breadcrumb {
  display: block !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  background: var(--rp-black) !important;
  padding: 13px var(--rp-gutter) !important;
  font-size: 12px !important;
  font-family: var(--rp-satoshi) !important;
  letter-spacing: .04em !important;
  box-sizing: border-box !important;
}

body.single-product .woocommerce-breadcrumb,
body.single-product .woocommerce-breadcrumb a {
  color: rgba(255, 255, 255, .62) !important;
}

body.single-product .woocommerce-breadcrumb a:hover {
  color: rgba(255, 255, 255, .9) !important;
}

body.single-product .woocommerce-breadcrumb .separator {
  color: rgba(255, 255, 255, .3) !important;
  margin: 0 6px !important;
}

/* Hide product prev/next nav */
body.single-product .nav-links,
body.single-product .woocommerce-product-navigation,
body.single-product .nav-previous,
body.single-product .nav-next {
  display: none !important;
}

/* ══════════════════════════════════════
   CATEGORY LABEL (Above Title)
══════════════════════════════════════ */
.roze-category-label {
  font-family: var(--rp-satoshi) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.15em !important;
  color: var(--rp-mid) !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
}

.roze-category-icon {
  margin-right: 6px !important;
  font-size: 14px !important;
}


/* ══════════════════════════════════════
   PRODUCT WRAPPER
══════════════════════════════════════ */
.roze-pdp {
  width: 100%;
  max-width: 100%;
  background: var(--rp-cream);
}

body.single-product div.product,
body.single-product .supro-single-product,
body.single-product .supro-single-product-detail {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}


/* ══════════════════════════════════════
   HERO GRID
══════════════════════════════════════ */
.roze-pdp-hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 48px 0 32px !important;
}


/* ══════════════════════════════════════
   GALLERY COLUMN
══════════════════════════════════════ */
.roze-pdp-gallery-col {
  width: 100% !important;
  background: transparent !important;
  padding: 0 var(--rp-gutter) 0 var(--rp-gutter) !important;
  max-width: 680px !important;
  margin-left: auto !important;
}

/* inner wrapper — sticky behaviour separated from grid placement */
.roze-pdp-gallery-sticky {
  position: sticky !important;
  top: 100px !important;
  width: 100% !important;
  background: transparent !important;
}

/* product-images-wrapper inside sticky wrapper */
.roze-pdp-gallery-col .product-images-wrapper {
  background: #ffffff !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  height: 540px !important;
}


/* ══════════════════════════════════════
   GALLERY IMAGE AREA
   #primary prefix beats Supro's class-
   based specificity (including the rule
   that constrains gallery to 50% width)
══════════════════════════════════════ */
#primary .product-images-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

#primary .roze-pdp-gallery-col .woocommerce-product-gallery,
#primary .roze-pdp-gallery-col div.images.woocommerce-product-gallery {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#primary .roze-pdp-gallery-col .woocommerce-product-gallery,
#primary .roze-pdp-gallery-col div.images.woocommerce-product-gallery,
#primary .roze-pdp-gallery-col .product-images-wrapper,
#primary .roze-pdp-gallery-col .flex-viewport,
#primary .roze-pdp-gallery-col .woocommerce-product-gallery__wrapper,
#primary .roze-pdp-gallery-col .woocommerce-product-gallery__image {
  background: transparent !important;
}

#primary .roze-pdp-gallery-col .woocommerce-product-gallery {
  padding: 0 !important;
  cursor: crosshair !important;
}

/* ══════════════════════════════════════
   INFO COLUMN (Right Side) ORDERING
══════════════════════════════════════ */
/* ══════════════════════════════════════
   HERO GRID & STICKY GALLERY
   ══════════════════════════════════════ */
.roze-pdp-hero {
  display: grid !important;
  grid-template-columns: 52% 48% !important;
  /* side by side */
  align-items: flex-start !important;
  max-width: 1280px !important;
  margin: 40px auto !important;
  background: transparent !important;
  width: 100% !important;
}

.roze-pdp-gallery-col {
  background: transparent !important;
  width: 100% !important;
}

.roze-pdp-gallery-sticky {
  position: sticky !important;
  top: 120px !important;
}

.roze-pdp-info-col {
  background: transparent !important;
  width: 100% !important;
}

/* Force transparency and remove Bootstrap constraints on info column */
.summary.entry-summary,
.single-product div.product .summary,
.supro-product-summary,
.supro-single-product-summary {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.summary.entry-summary .roze-category-label {
  order: 1 !important;
  margin-bottom: 10px !important;
}

.summary.entry-summary .product_title {
  order: 2 !important;
  margin-bottom: 15px !important;
}

.summary.entry-summary .woocommerce-product-rating {
  order: 3 !important;
  margin-bottom: 25px !important;
}

.summary.entry-summary .woocommerce-product-details__short-description {
  order: 4 !important;
  margin-bottom: 30px !important;
}

.summary.entry-summary form.cart {
  order: 5 !important;
}

.summary.entry-summary .roze-trust-pills {
  order: 6 !important;
  margin-top: 16px !important;
}

.summary.entry-summary .roze-guar-strip {
  order: 7 !important;
}

.summary.entry-summary .roze-accord {
  order: 8 !important;
}

.summary.entry-summary .product_meta {
  order: 9 !important;
}

.summary.entry-summary .yith-wcwl-add-to-wishlist {
  order: 10 !important;
}

#primary .roze-pdp-gallery-col .woocommerce-product-gallery__image a {
  display: block !important;
  overflow: hidden !important;
}

#primary .roze-pdp-gallery-col .woocommerce-product-gallery__image img {
  background: #ffffff !important;
  object-fit: contain !important;
  max-height: 420px !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Sale badge */
#primary .roze-pdp-gallery-col span.onsale,
body.single-product span.onsale {
  background: var(--rp-black) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--rp-satoshi) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 6px 13px !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  min-height: auto !important;
  line-height: 1.4 !important;
}

/* Hide Supro slider arrows */
.roze-pdp-gallery-col .product-gallery-control {
  display: none !important;
}

/* Thumbnails — 88px height matching mockup */
#primary .roze-pdp-gallery-col .flex-control-thumbs,
#primary .roze-pdp-gallery-col ol.flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-top: 10px !important;
  padding: 0 6% !important;
  list-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#primary .roze-pdp-gallery-col .flex-control-thumbs li {
  margin: 0 !important;
  padding: 0 !important;
}

#primary .roze-pdp-gallery-col .flex-control-thumbs li img {
  height: 88px !important;
  width: 100% !important;
  object-fit: contain !important;
  background: var(--rp-cream-m) !important;
  padding: 8px !important;
  border: 1.5px solid transparent !important;
  display: block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
}

#primary .roze-pdp-gallery-col .flex-control-thumbs li img.flex-active,
#primary .roze-pdp-gallery-col .flex-control-thumbs li img:hover {
  border-color: var(--rp-black) !important;
}


/* ══════════════════════════════════════
   INFO COLUMN
══════════════════════════════════════ */
.roze-pdp-info-col {
  background: var(--rp-cream);
  width: 100%;
}

.roze-pdp-info-col .summary.entry-summary {
  padding: 48px var(--rp-gutter) 64px 44px;
  background: var(--rp-cream);
  box-sizing: border-box;
}


/* ══════════════════════════════════════
   SUMMARY FLEX ORDERING
   Forces visual order:
     1. Product title
     2. Star rating
     3. Short description (tagline)
     4+ Everything else (subscription UI,
        trust pills, guarantee, accordions)
        — appears in their natural DOM order
══════════════════════════════════════ */
.roze-pdp-info-col .summary.entry-summary {
  display: flex !important;
  flex-direction: column !important;
}

/* All direct children default to order 10 */
.roze-pdp-info-col .summary.entry-summary>* {
  order: 10;
}

/* Title appears first */
.roze-pdp-info-col .summary h1.product_title,
.roze-pdp-info-col .summary .product_title {
  order: 1 !important;
}

/* Rating appears second */
.roze-pdp-info-col .summary .woocommerce-product-rating {
  order: 2 !important;
}

/* Short description appears third — ABOVE subscription UI */
.roze-pdp-info-col .summary .woocommerce-product-details__short-description {
  order: 3 !important;
  max-width: 100% !important;
  margin-bottom: 28px !important;
}


/* ══════════════════════════════════════
   SUMMARY TYPOGRAPHY
══════════════════════════════════════ */

/* Hide SKU */
body.single-product .sku_wrapper,
body.single-product .sku-wrapper {
  display: none !important;
}

/* Category / posted in */
.roze-pdp-info-col .posted_in {
  font-family: var(--rp-satoshi) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--rp-mid) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.roze-pdp-info-col .posted_in a {
  color: var(--rp-mid) !important;
  text-decoration: none !important;
}

/* Title */
.roze-pdp-info-col h1.product_title {
  font-family: var(--rp-recia) !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--rp-black) !important;
  margin-bottom: 6px !important;
  letter-spacing: -.01em !important;
}

/* Rating */
.roze-pdp-info-col .woocommerce-product-rating {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding-bottom: 20px !important;
  border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
}

.roze-pdp-info-col .star-rating {
  font-size: 14px !important;
  color: var(--rp-black) !important;
}

.roze-pdp-info-col .star-rating span::before,
.roze-pdp-info-col .star-rating::before {
  color: var(--rp-black) !important;
}

.roze-pdp-info-col .woocommerce-review-link {
  font-size: 13px !important;
  color: var(--rp-mid) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, .18) !important;
  padding-bottom: 1px !important;
  font-family: var(--rp-satoshi) !important;
}

/* Short description */
.roze-pdp-info-col .woocommerce-product-details__short-description,
.roze-pdp-info-col .woocommerce-product-details__short-description p {
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  color: var(--rp-mid) !important;
  line-height: 1.75 !important;
  margin-bottom: 0 !important;
}

/* Price */
.roze-pdp-info-col p.price,
.roze-pdp-info-col span.price {
  font-family: var(--rp-recia) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  color: var(--rp-black) !important;
  line-height: 1 !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

.roze-pdp-info-col p.price del,
.roze-pdp-info-col span.price del {
  font-size: 20px !important;
  color: var(--rp-light) !important;
}

.roze-pdp-info-col p.price ins,
.roze-pdp-info-col span.price ins {
  text-decoration: none !important;
}

/* ATC */
.roze-pdp-info-col .single_add_to_cart_button,
.roze-pdp-info-col button.single_add_to_cart_button {
  background: var(--rp-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--rp-satoshi) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 17px 24px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: opacity .2s !important;
  cursor: pointer !important;
}

.roze-pdp-info-col .single_add_to_cart_button:hover {
  opacity: .85 !important;
}

/* Quantity */
.roze-pdp-info-col .quantity {
  display: flex !important;
  align-items: center !important;
  border: 1px solid rgba(0, 0, 0, .1) !important;
  background: #fff !important;
  height: 52px !important;
  width: 130px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.roze-pdp-info-col .quantity input.qty {
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  color: var(--rp-dark) !important;
  width: 40px !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield;
}

.roze-pdp-info-col .quantity .decrease,
.roze-pdp-info-col .quantity .increase {
  flex: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  font-size: 20px !important;
  color: var(--rp-dark) !important;
  transition: background 0.2s !important;
}

/* Force text content if icons fail */
.roze-pdp-info-col .quantity .decrease::before {
  content: "-" !important;
}

.roze-pdp-info-col .quantity .increase::before {
  content: "+" !important;
}

/* Meta */
.roze-pdp-info-col .product_meta {
  font-size: 12px !important;
  color: var(--rp-mid) !important;
  font-family: var(--rp-satoshi) !important;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
}

.roze-pdp-info-col .product_meta a {
  color: var(--rp-mid) !important;
  text-decoration: none !important;
}


/* ══════════════════════════════════════
   TRUST PILLS
══════════════════════════════════════ */
.roze-trust-pills {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.roze-tp {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(0, 0, 0, .09);
  padding: 6px 11px;
  font-size: 11px;
  color: var(--rp-dark);
  font-family: var(--rp-satoshi);
  transition: border-color .2s;
  cursor: default;
}

.roze-tp ion-icon {
  font-size: 12px;
}

.roze-tp:hover {
  border-color: rgba(0, 0, 0, .22);
}


/* ══════════════════════════════════════
   GUARANTEE STRIP
══════════════════════════════════════ */
.roze-guar-strip {
  display: flex;
  gap: 0;
  margin-top: 16px;
  background: var(--rp-cream-m);
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.roze-gs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 14px 16px;
  border-right: 1px solid rgba(0, 0, 0, .06);
}

.roze-gs:last-child {
  border-right: none;
}

.roze-gs-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.roze-gs-icon ion-icon {
  font-size: 13px;
  color: var(--rp-dark);
}

.roze-gs strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--rp-black);
  font-family: var(--rp-satoshi);
}

.roze-gs span {
  font-size: 10px;
  color: var(--rp-mid);
  font-family: var(--rp-satoshi);
  display: block;
  margin-top: 1px;
}


/* ══════════════════════════════════════
   PRODUCT ACCORDIONS
══════════════════════════════════════ */
.roze-accord {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}

.roze-acc-item {
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.roze-acc-hd {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--rp-dark);
  letter-spacing: .04em;
  font-family: var(--rp-satoshi);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.roze-acc-hd ion-icon {
  font-size: 16px;
  color: var(--rp-mid);
  transition: transform .3s var(--rp-ease);
  flex-shrink: 0;
}

.roze-acc-hd.open ion-icon {
  transform: rotate(45deg);
}

.roze-acc-body {
  font-size: 13px;
  color: var(--rp-mid);
  line-height: 1.75;
  padding-bottom: 14px;
  display: none;
  font-family: var(--rp-satoshi);
}

.roze-acc-body.open {
  display: block;
}

.roze-acc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}

.roze-acc-tags span {
  font-size: 11px;
  border: 1px solid rgba(0, 0, 0, .1);
  padding: 4px 10px;
  color: var(--rp-mid);
  font-family: var(--rp-satoshi);
}


/* ══════════════════════════════════════
   WOOCOMMERCE TABS
══════════════════════════════════════ */
body.single-product .woocommerce-tabs {
  background: var(--rp-cream) !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-product .woocommerce-tabs ul.tabs {
  background: var(--rp-white) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
  padding: 0 var(--rp-gutter) !important;
  margin: 0 !important;
  display: flex !important;
  list-style: none !important;
  overflow-x: auto !important;
}

body.single-product .woocommerce-tabs ul.tabs::before,
body.single-product .woocommerce-tabs ul.tabs::after {
  display: none !important;
}

body.single-product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.single-product .woocommerce-tabs ul.tabs li a {
  font-family: var(--rp-satoshi) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--rp-mid) !important;
  padding: 16px 24px !important;
  display: block !important;
  border-bottom: 2px solid transparent !important;
  transition: all .2s !important;
  white-space: nowrap !important;
}

body.single-product .woocommerce-tabs ul.tabs li.active a,
body.single-product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--rp-black) !important;
  border-bottom-color: var(--rp-black) !important;
  background: transparent !important;
}

body.single-product .woocommerce-tabs .panel {
  background: var(--rp-white) !important;
  padding: 44px var(--rp-gutter) !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

body.single-product .woocommerce-tabs .panel h2 {
  font-family: var(--rp-recia) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  color: var(--rp-black) !important;
  margin-bottom: 20px !important;
}

body.single-product .woocommerce-tabs .panel p,
body.single-product .woocommerce-tabs .panel li {
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  color: var(--rp-mid) !important;
  line-height: 1.8 !important;
}


/* ══════════════════════════════════════
   TICKER
══════════════════════════════════════ */
.roze-pp-ticker {
  background: var(--rp-black);
  padding: 12px 0;
  overflow: hidden;
  width: 100%;
}

.roze-pp-ticker-track {
  display: flex;
  width: max-content;
  animation: roze-ticker 28s linear infinite;
}

.roze-pp-ticker-track:hover {
  animation-play-state: paused;
}

@keyframes roze-ticker {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.roze-pp-ticker-set {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.roze-pp-ticker-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
}

.roze-pp-ticker-item span {
  font-family: var(--rp-satoshi);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .52);
}

.roze-pp-ticker-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  flex-shrink: 0;
}


/* ══════════════════════════════════════
   BRAND SECTIONS
══════════════════════════════════════ */
.roze-pp-section {
  width: 100%;
  padding: 80px var(--rp-gutter);
  box-sizing: border-box;
}

.roze-pp-section-inner {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.roze-pp-sec-lbl {
  font-family: var(--rp-satoshi);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rp-mid);
  margin-bottom: 12px;
  display: block;
}

.roze-pp-sec-lbl.lt {
  color: rgba(255, 255, 255, .3);
}

.roze-pp-h2 {
  font-family: var(--rp-recia);
  font-size: 44px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--rp-black);
  margin-bottom: 0;
}

.roze-pp-h2.lt {
  color: #fff;
}

.roze-pp-h2 em {
  font-style: italic;
}

/* Benefits */
.roze-pp-benefits {
  background: var(--rp-dark);
}

.roze-pp-benefits-hd {
  text-align: center;
  margin-bottom: 52px;
}

.roze-pp-benefits-hd p {
  font-size: 14px;
  color: rgba(255, 255, 255, .3);
  margin-top: 8px;
  letter-spacing: .04em;
  font-family: var(--rp-satoshi);
}

.roze-pp-ben-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .05);
}

.roze-pp-bc {
  background: var(--rp-dark);
  padding: 44px 36px;
  transition: background .25s;
  position: relative;
  overflow: hidden;
}

.roze-pp-bc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: rgba(255, 255, 255, .1);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--rp-ease);
}

.roze-pp-bc:hover {
  background: #1e1e1e;
}

.roze-pp-bc:hover::after {
  transform: scaleX(1);
}

.roze-pp-bc-ic {
  margin-bottom: 20px;
}

.roze-pp-bc-ic ion-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, .42);
  transition: color .3s, transform .4s var(--rp-ease);
}

.roze-pp-bc:hover .roze-pp-bc-ic ion-icon {
  color: rgba(255, 255, 255, .72);
  transform: translateY(-4px);
}

.roze-pp-bc h4 {
  font-family: var(--rp-recia);
  font-size: 22px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 10px;
}

.roze-pp-bc p {
  font-size: 13px;
  color: rgba(255, 255, 255, .38);
  line-height: 1.75;
  font-family: var(--rp-satoshi);
}

.roze-pp-bc p strong {
  color: rgba(255, 255, 255, .72);
  font-weight: 600;
}

/* NII */
.roze-pp-nii {
  background: var(--rp-black);
}

.roze-pp-nii-hd {
  text-align: center;
  margin-bottom: 48px;
}

.roze-pp-nii-hd p {
  font-size: 14px;
  color: rgba(255, 255, 255, .36);
  max-width: 520px;
  margin: 12px auto 0;
  line-height: 1.75;
  font-family: var(--rp-satoshi);
}

.roze-pp-nii-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
}

.roze-pp-ni {
  background: #151515;
  padding: 34px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: background .2s;
}

.roze-pp-ni:hover {
  background: #1c1c1c;
}

.roze-pp-ni ion-icon {
  font-size: 22px;
  color: rgba(255, 255, 255, .18);
  margin-bottom: 14px;
  transition: color .3s, transform .4s var(--rp-ease);
}

.roze-pp-ni:hover ion-icon {
  color: rgba(255, 255, 255, .52);
  transform: scale(1.12);
}

.roze-pp-ni-nm {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .96);
  display: block;
  margin-bottom: 5px;
  letter-spacing: .03em;
  font-family: var(--rp-satoshi);
}

.roze-pp-ni-nt {
  font-size: 11px;
  color: rgba(242, 237, 227, .72);
  letter-spacing: .05em;
  line-height: 1.4;
  font-family: var(--rp-satoshi);
}

/* Authority */
.roze-pp-auth {
  background: var(--rp-white);
}

.roze-pp-auth-inner {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: center;
}

.roze-pp-auth-img {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: var(--rp-white);
}

.roze-pp-auth-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  mix-blend-mode: multiply;
}

.roze-pp-auth-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--rp-black);
  padding: 12px 16px;
}

.roze-pp-auth-bar p {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  margin-bottom: 2px;
  font-family: var(--rp-satoshi);
}

.roze-pp-auth-bar h5 {
  font-family: var(--rp-satoshi);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 1px;
}

.roze-pp-auth-bar small {
  font-size: 11px;
  color: rgba(255, 255, 255, .38);
  font-family: var(--rp-satoshi);
}

.roze-pp-auth-quote {
  font-family: var(--rp-recia);
  font-size: 19px;
  font-style: italic;
  color: var(--rp-black);
  line-height: 1.55;
  margin: 14px 0 18px;
  padding-left: 18px;
  border-left: 2px solid var(--rp-black);
}

.roze-pp-auth-body {
  font-size: 14px;
  color: var(--rp-mid);
  line-height: 1.8;
  margin-bottom: 22px;
  font-family: var(--rp-satoshi);
}

.roze-pp-auth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: 20px;
}

.roze-pp-as {
  background: var(--rp-cream);
  padding: 20px 14px;
  text-align: center;
  transition: background .2s;
}

.roze-pp-as:hover {
  background: var(--rp-cream-m);
}

.roze-pp-as-n {
  font-family: var(--rp-recia);
  font-size: 34px;
  color: var(--rp-black);
  line-height: 1;
  margin-bottom: 5px;
}

.roze-pp-as-l {
  font-size: 11px;
  color: var(--rp-mid);
  letter-spacing: .06em;
  line-height: 1.4;
  font-family: var(--rp-satoshi);
}

.roze-pp-cert-strip {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.roze-pp-cert {
  border: 1px solid rgba(0, 0, 0, .13);
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: .07em;
  color: var(--rp-mid);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all .2s;
  font-family: var(--rp-satoshi);
}

.roze-pp-cert:hover {
  border-color: var(--rp-black);
  color: var(--rp-black);
}

.roze-pp-cert ion-icon {
  font-size: 12px;
}

/* FAQ */
.roze-pp-faq {
  background: var(--rp-white);
}

.roze-pp-faq-hd {
  text-align: center;
  margin-bottom: 48px;
}

.roze-pp-faq-hd p {
  font-size: 14px;
  color: var(--rp-mid);
  margin: 12px auto 0;
  max-width: 480px;
  line-height: 1.75;
  font-family: var(--rp-satoshi);
}

.roze-pp-faq-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.roze-pp-faq-item {
  border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.roze-pp-faq-item:first-child {
  border-top: 1px solid rgba(0, 0, 0, .07);
}

.roze-pp-faq-hdr {
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--rp-dark);
  font-family: var(--rp-satoshi);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  gap: 16px;
}

.roze-pp-faq-hdr ion-icon {
  font-size: 16px;
  color: var(--rp-mid);
  transition: transform .3s var(--rp-ease);
  flex-shrink: 0;
}

.roze-pp-faq-hdr.open ion-icon {
  transform: rotate(45deg);
}

.roze-pp-faq-body {
  font-size: 14px;
  color: var(--rp-mid);
  line-height: 1.8;
  padding-bottom: 16px;
  display: none;
  font-family: var(--rp-satoshi);
}

.roze-pp-faq-body.open {
  display: block;
}

/* Testimonials */
.roze-pp-testi {
  background: var(--rp-cream-m);
}

.roze-pp-testi-hd {
  text-align: center;
  margin-bottom: 48px;
}

.roze-pp-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.roze-pp-tc {
  background: var(--rp-cream);
  padding: 36px 28px;
  transition: background .25s, transform .35s var(--rp-ease);
}

.roze-pp-tc:hover {
  background: var(--rp-white);
  transform: translateY(-4px);
}

.roze-pp-tc-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
}

.roze-pp-star {
  width: 10px;
  height: 10px;
  background: var(--rp-dark);
  flex-shrink: 0;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.roze-pp-tc-txt {
  font-family: var(--rp-recia);
  font-size: 16px;
  font-style: italic;
  color: var(--rp-dark);
  line-height: 1.6;
  margin-bottom: 20px;
}

.roze-pp-tc-auth {
  font-size: 12px;
  font-weight: 500;
  color: var(--rp-mid);
  letter-spacing: .06em;
  display: block;
  font-family: var(--rp-satoshi);
}

.roze-pp-tc-role {
  font-size: 11px;
  color: var(--rp-light);
  font-style: italic;
  display: block;
  margin-top: 3px;
  font-family: var(--rp-satoshi);
}

.roze-pp-testi-ft {
  text-align: center;
  margin-top: 44px;
}

.roze-pp-review-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(0, 0, 0, .18);
  padding: 13px 28px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rp-black);
  transition: all .2s;
  font-family: var(--rp-satoshi);
  text-decoration: none;
}

.roze-pp-review-btn:hover {
  background: var(--rp-black);
  color: #fff;
  border-color: var(--rp-black);
}

.roze-pp-review-btn ion-icon {
  font-size: 13px;
}

/* Related */
.roze-pp-related {
  background: var(--rp-cream);
}

.roze-pp-related-hd {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 36px;
}

.roze-pp-view-all {
  font-size: 12px;
  color: var(--rp-dark);
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  padding-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: border-color .2s;
  text-decoration: none;
  font-family: var(--rp-satoshi);
}

.roze-pp-view-all:hover {
  border-color: var(--rp-black);
  color: var(--rp-black);
}

.roze-pp-view-all ion-icon {
  font-size: 13px;
}

.roze-pp-rel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.roze-pp-rc {
  background: var(--rp-cream-m);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--rp-ease);
  text-decoration: none;
}

.roze-pp-rc:hover {
  transform: translateY(-4px);
}

.roze-pp-rc-img {
  height: 220px;
  overflow: hidden;
  background: var(--rp-cream-d);
  flex-shrink: 0;
}

.roze-pp-rc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--rp-ease);
}

.roze-pp-rc:hover .roze-pp-rc-img img {
  transform: scale(1.05);
}

.roze-pp-rc-badge {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--rp-black);
  color: #fff;
  font-size: 10px;
  letter-spacing: .1em;
  padding: 4px 9px;
  text-transform: uppercase;
  z-index: 2;
  font-family: var(--rp-satoshi);
}

.roze-pp-rc-info {
  padding: 16px 14px 18px;
}

.roze-pp-rc-nm {
  font-family: var(--rp-recia);
  font-size: 16px;
  font-weight: 400;
  color: var(--rp-black);
  margin-bottom: 6px;
  line-height: 1.3;
}

.roze-pp-rc-sub {
  font-size: 12px;
  color: var(--rp-mid);
  margin-top: 4px;
  font-family: var(--rp-satoshi);
}

.roze-pp-rc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, .06);
}

.roze-pp-rc-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--rp-black);
  font-family: var(--rp-satoshi);
}

.roze-pp-rc-btn {
  background: var(--rp-black);
  color: #fff;
  padding: 8px 13px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: opacity .2s;
  text-decoration: none;
  font-family: var(--rp-satoshi);
  display: inline-block;
}

.roze-pp-rc-btn:hover {
  opacity: .8;
}


/* ══════════════════════════════════════
   STICKY BUY BAR
══════════════════════════════════════ */
#roze-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--rp-white);
  border-top: 1px solid rgba(0, 0, 0, .09);
  padding: 12px var(--rp-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 800;
  transform: translateY(100%);
  transition: transform .5s var(--rp-ease);
  gap: 16px;
}

#roze-sticky-bar.visible {
  transform: translateY(0);
}

.rsb-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.rsb-thumb {
  width: 44px;
  height: 44px;
  background: var(--rp-cream-d);
  flex-shrink: 0;
  overflow: hidden;
}

.rsb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.rsb-nm {
  font-family: var(--rp-recia);
  font-size: 16px;
  color: var(--rp-black);
}

.rsb-detail {
  font-size: 12px;
  color: var(--rp-mid);
  margin-top: 2px;
  font-family: var(--rp-satoshi);
}

.rsb-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rsb-btn {
  background: var(--rp-black);
  color: #fff;
  padding: 11px 28px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: opacity .2s;
  border: none;
  font-family: var(--rp-satoshi);
  display: flex;
  align-items: center;
  gap: 6px;
}

.rsb-btn:hover {
  opacity: .84;
}

.rsb-btn ion-icon {
  font-size: 14px;
}

.rsb-close {
  font-size: 22px;
  cursor: pointer;
  color: var(--rp-mid);
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 4px;
  transition: color .2s;
}

.rsb-close:hover {
  color: var(--rp-black);
}


/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width:1024px) {
  .roze-pdp-hero {
    grid-template-columns: 1fr !important;
  }

  .roze-pdp-gallery-sticky {
    position: static !important;
  }

  .roze-pdp-gallery-col .woocommerce-product-gallery,
  .roze-pdp-gallery-col div.images {
    padding: 32px var(--rp-gutter) !important;
  }

  .roze-pdp-info-col .summary.entry-summary {
    padding: 32px var(--rp-gutter);
  }

  .roze-pp-auth-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .roze-pp-auth-img {
    height: 360px;
  }

  .roze-pp-nii-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .roze-pp-ben-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .roze-pp-testi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .roze-pp-rel-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .roze-pp-auth-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .roze-pp-h2 {
    font-size: 34px;
  }
}

@media (max-width:768px) {
  .roze-pdp-info-col h1.product_title {
    font-size: 32px !important;
  }

  .roze-pp-section {
    padding: 56px var(--rp-gutter);
  }

  .roze-pp-nii-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .roze-pp-ben-grid {
    grid-template-columns: 1fr;
  }

  .roze-pp-testi-grid {
    grid-template-columns: 1fr;
  }

  .roze-pp-rel-grid {
    grid-template-columns: 1fr 1fr;
  }

  .roze-pp-h2 {
    font-size: 28px;
  }

  .roze-guar-strip {
    flex-direction: column;
  }

  .roze-gs {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
  }

  .roze-gs:last-child {
    border-bottom: none;
  }

  #roze-sticky-bar {
    padding: 10px 16px;
  }

  .rsb-detail {
    display: none;
  }
}

@media (max-width:480px) {
  .roze-pp-nii-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .roze-pp-auth-stats {
    grid-template-columns: 1fr 1fr;
  }

  .roze-pp-rel-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ROZE BIOHEALTH — v7 PATCH
   APPEND TO THE VERY END of roze-product-page.css
   Do NOT replace the existing file — these rules ADD on top.
═══════════════════════════════════════════════════════════════ */


/* ── FIX 1: CHROME STICKY GRID BUG ──────────────────────────
   Chrome misplaces position:sticky grid items — moves the gallery
   to the RIGHT column. Fix: remove sticky from the grid item
   (.roze-pdp-gallery-col) and move it to an inner wrapper div
   (.roze-pdp-gallery-sticky). Chrome handles sticky correctly on
   non-grid elements. Edge/Firefox were already fine.
─────────────────────────────────────────────────────────────── */

/* Grid item: layout ONLY — no sticky */
.roze-pdp-gallery-col {
  position: static !important;
  align-self: auto !important;
  top: auto !important;
  background: #ffffff !important;
  width: 100% !important;
  min-height: 0 !important;
  /* let content determine height */
}

/* Gallery column: STICKY per mockup parity */
.roze-pdp-gallery-sticky {
  position: sticky !important;
  top: 100px !important;
  width: 100% !important;
  background: #ffffff !important;
  z-index: 5 !important;
}

/* Ensure the left column stretches to full height of the info column */
.roze-pdp-gallery-col {
  position: static !important;
  align-self: stretch !important;
  height: auto !important;
  min-height: 100% !important;
}

#primary .roze-pdp-gallery-col {
  position: static !important;
  align-self: stretch !important;
  min-height: 100% !important;
}

/* ID-level override to ensure stickiness works */
#primary .roze-pdp-gallery-sticky {
  position: sticky !important;
  top: 120px !important;
  width: 100% !important;
  background: #ffffff !important;
  z-index: 99 !important;
  display: block !important;
}


/* ── FIX 2: SHORT DESCRIPTION VISUAL POSITION ───────────────
   functions.php fires the short description at P4 (before WC
   title at P5) so it renders early in the DOM. CSS flex-order
   then places it visually as the 3rd element (after title P1
   and rating P2), matching the mockup layout exactly.

   All other summary children default to order:10 and appear
   in their DOM order — which is subscription UI → trust pills
   → guarantee strip → accordions (correct per mockup).
─────────────────────────────────────────────────────────────── */

/* Make summary a flex column so order property works */
.roze-pdp-info-col .summary.entry-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* All direct children default to order:10 (appear after 1,2,3) */
.roze-pdp-info-col .summary.entry-summary>* {
  order: 10;
}

/* Product title — visual position 1 */
.roze-pdp-info-col .summary h1.product_title,
.roze-pdp-info-col .summary .product_title {
  order: 1 !important;
  margin-bottom: 2px !important;
  /* REDUCED SPACE */
}

/* Star rating row — visual position 2 */
.roze-pdp-info-col .summary .woocommerce-product-rating {
  order: 2 !important;
  margin-bottom: 4px !important;
  /* REDUCED SPACE */
}

/* Short description / tagline — visual position 3 */
/* Short description / tagline — visual position 3 */
.roze-pdp-info-col .summary .woocommerce-product-details__short-description {
  order: 3 !important;
  max-width: 100% !important;
  margin: 0 0 10px 0 !important;
  /* REDUCED TOP SPACE */
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  color: var(--rp-mid) !important;
  line-height: 1.6 !important;
}

.roze-pdp-info-col .summary .woocommerce-product-details__short-description p {
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  color: var(--rp-mid) !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* header-summary (Supro wrapper that may contain title) also order:1 */
.roze-pdp-info-col .summary .header-summary {
  order: 1 !important;
}


/* ── FIX 3: GALLERY INNER ELEMENTS (ID-level) ───────────────
   Ensure all gallery sub-elements fill the sticky wrapper
─────────────────────────────────────────────────────────────── */

#primary .roze-pdp-gallery-sticky .product-images-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  background: #ffffff !important;
}

#primary .roze-pdp-gallery-sticky .woocommerce-product-gallery,
#primary .roze-pdp-gallery-sticky div.images.woocommerce-product-gallery {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 10% !important;
  /* Forces even whitespace around image per mockup */
  background: #ffffff !important;
  box-sizing: border-box !important;
  min-height: 500px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Bestseller Badge */
.bestseller-badge {
  position: absolute !important;
  top: 40px !important;
  left: 40px !important;
  background: #000 !important;
  color: #fff !important;
  padding: 4px 12px !important;
  font-family: var(--rp-satoshi) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  z-index: 10 !important;
}

#primary .roze-pdp-gallery-sticky .flex-viewport,
#primary .roze-pdp-gallery-sticky .woocommerce-product-gallery__wrapper,
#primary .roze-pdp-gallery-sticky .woocommerce-product-gallery__image {
  background: #ffffff !important;
}

#primary .roze-pdp-gallery-sticky .woocommerce-product-gallery__image img {
  background: #ffffff !important;
  object-fit: contain !important;
  max-height: 420px !important;
  width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Thumbnails Horizontal Bottom */
#primary .roze-pdp-gallery-sticky .flex-control-thumbs,
#primary .roze-pdp-gallery-sticky ol.flex-control-thumbs {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 30px !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#primary .roze-pdp-gallery-sticky .flex-control-thumbs li {
  margin: 0 !important;
  padding: 0 !important;
}

#primary .roze-pdp-gallery-sticky .flex-control-thumbs li img {
  height: 70px !important;
  width: 70px !important;
  object-fit: contain !important;
  background: #F2EDE3 !important;
  /* Cream background per mockup */
  padding: 6px !important;
  border: 1px solid transparent !important;
  display: block !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all .2s !important;
}

#primary .roze-pdp-gallery-sticky .flex-control-thumbs li img.flex-active,
#primary .roze-pdp-gallery-sticky .flex-control-thumbs li img:hover {
  border-color: #000 !important;
  background: #E8E0D2 !important;
  /* Slightly darker cream for active */
}

/* Hide Supro slider arrows */
#primary .roze-pdp-gallery-sticky .product-gallery-control {
  display: none !important;
}


/* ── FIX 4: SKU + MISC CLEAN-UP ──────────────────────────── */

/* Hide SKU — not in mockup */
body.single-product .sku_wrapper,
body.single-product .sku-wrapper {
  display: none !important;
  order: 99 !important;
}

/* Ensure info padding is consistent */
/* Right column: NATURAL scrolling per mockup */
#primary .roze-pdp-info-col .summary.entry-summary {
  position: relative !important;
  top: 0 !important;
  padding: 10px var(--rp-gutter) 20px 44px !important;
  box-sizing: border-box !important;
}

/* Parent Grid: MUST be stretch to give the sticky element room to move */
.roze-pdp-hero-grid {
  display: flex !important;
  align-items: stretch !important;
  width: 100% !important;
}


/* ═══════════════════════════════════════════════════════════════
   ROZE — v8 PATCH  (append to existing CSS)
   Fixes: gallery void, subscription UI match, dropdown colors
═══════════════════════════════════════════════════════════════ */

/* FIX A: Gallery column transparent — eliminates white void */
.roze-pdp-gallery-col,
#primary .roze-pdp-gallery-col {
  background: transparent !important;
}

.roze-pdp-gallery-sticky,
#primary .roze-pdp-gallery-sticky {
  background: transparent !important;
}

#primary .roze-pdp-gallery-sticky .product-images-wrapper {
  background: transparent !important;
}

#primary .roze-pdp-gallery-sticky .woocommerce-product-gallery,
#primary .roze-pdp-gallery-sticky div.images.woocommerce-product-gallery {
  background: #ffffff !important;
}

/* FIX B: Right info column — transparent to show beige body */
.roze-pdp-info-col,
#primary .roze-pdp-info-col {
  background: transparent !important;
}

.roze-pdp-info-col .summary.entry-summary {
  background: transparent !important;
}

/* ── SUBSCRIPTION UI CARD (.product-options-wrapper = .sub-ui) ── */
body.single-product .product-options-wrapper {
  border: 1px solid rgba(0, 0, 0, .1) !important;
  background: #ffffff !important;
  /* This stays white */
  margin: 0 0 16px !important;
}

/* ── TABS (.purchase-type-tabs = .sub-tabs) ── */
body.single-product .purchase-type-tabs {
  display: flex !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

body.single-product .purchase-tab {
  flex: 1 !important;
  width: 50% !important;
  padding: 18px 24px !important;
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--rp-mid) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  border: none !important;
  background: #fff !important;
  text-align: left !important;
  line-height: 1.2 !important;
  transition: all .2s !important;
  box-sizing: border-box !important;
}

body.single-product .purchase-tab small {
  font-size: 11px !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  font-weight: 400 !important;
  color: var(--rp-light) !important;
  display: block !important;
  line-height: 1.3 !important;
}

body.single-product .purchase-tab.active {
  background: var(--rp-black) !important;
  color: #ffffff !important;
}

body.single-product .purchase-tab.active small {
  color: rgba(255, 255, 255, .52) !important;
}

/* ── PACK CARDS CONTAINER ── */
body.single-product .variation-cards-container {
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
  background: transparent !important;
}

/* ── INDIVIDUAL PACK CARD ── */
body.single-product .variation-card {
  border: 1.5px solid rgba(0, 0, 0, .1) !important;
  padding: 14px 12px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all .22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background: var(--rp-cream) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

/* Legacy Selector Styles Removed - Managed by subscription-ui.php inline styles */
body.single-product .variation-card.selected,
body.single-product .variation-card.active {
  border-color: var(--rp-black) !important;
  background: #ffffff !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1) !important;
}

body.single-product .variation-card-image {
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}

body.single-product .variation-card-image img {
  height: 44px !important;
  width: auto !important;
  object-fit: contain !important;
}

body.single-product .variation-card-title,
body.single-product .variation-card h4 {
  font-family: var(--rp-satoshi) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--rp-black) !important;
  margin: 0 0 8px !important;
  line-height: 1.3 !important;
}

/* Subscription prices: visible by default (subscribe is default tab)
   NOTE: No !important here — jQuery .show()/.hide() must be able to override these */
body.single-product .variation-card .price-display.subscription-price {
  display: block;
}

body.single-product .variation-card .price-display.onetime-price {
  display: none;
}

/* Price amounts inside cards */
body.single-product .variation-card .price-display .price-amount {
  font-family: var(--rp-recia) !important;
  font-size: 18px !important;
  color: var(--rp-black) !important;
  font-weight: 400 !important;
  display: block !important;
  line-height: 1.2 !important;
}

body.single-product .variation-card .price-amount .woocommerce-Price-amount,
body.single-product .variation-card .price-amount bdi {
  font-family: var(--rp-recia) !important;
  font-size: 18px !important;
}

body.single-product .variation-card .original-price,
body.single-product .variation-card del {
  font-size: 11px !important;
  color: var(--rp-light) !important;
  text-decoration: line-through !important;
  margin-right: 4px !important;
  display: inline !important;
  font-family: var(--rp-satoshi) !important;
}

body.single-product .variation-card del .woocommerce-Price-amount {
  font-size: 11px !important;
}

body.single-product .variation-card .pack-badge {
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: var(--rp-black) !important;
  color: #ffffff !important;
  padding: 3px 8px !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  border-radius: 0 !important;
  font-family: var(--rp-satoshi) !important;
  font-weight: 500 !important;
}

/* Legacy Selector Styles Removed */

body.single-product .rbh-combination-selector-wrapper .form-row,
body.single-product .subscription-frequency-wrapper .form-row {
  display: block !important;
  width: 100% !important;
  margin-bottom: 15px !important;
  padding: 0 !important;
}

body.single-product .roze-sub-opt-lbl,
body.single-product .rbh-combination-selector-wrapper label,
body.single-product .subscription-frequency-wrapper label {
  font-family: var(--rp-satoshi) !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #6A6A62 !important;
  font-weight: 500 !important;
  margin: 0 0 10px 0 !important;
  display: block !important;
  text-align: left !important;
}

/* ── SELECTS — cream bg, square corners — override inline styles ── */
body.single-product .roze-sub-select,
body.single-product #pack_combination,
body.single-product #subscription-frequency {
  flex: 1 !important;
  width: auto !important;
  background-color: var(--rp-cream) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236A6A62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px !important;
  border: 1px solid rgba(0, 0, 0, .14) !important;
  border-radius: 0 !important;
  padding: 11px 40px 11px 14px !important;
  font-family: var(--rp-satoshi) !important;
  font-size: 14px !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

body.single-product .roze-sub-select:focus,
body.single-product #pack_combination:focus,
body.single-product #subscription-frequency:focus {
  outline: none !important;
  border-color: var(--rp-black) !important;
  box-shadow: none !important;
}

/* ── MAIN PRICE DISPLAY AREA ── */
body.single-product .custom-price-display,
body.single-product #custom-price-display {
  padding: 20px !important;
  margin: 0 !important;
  min-height: auto !important;
  font-size: unset !important;
  font-weight: unset !important;
  color: unset !important;
}

/* Price info rows — jQuery controls show/hide when switching tabs.
   Only show subscription-price-info by default (subscribe tab is default).
   No !important so jQuery .show()/.hide() works correctly. */
body.single-product .custom-price-display .subscription-price-info,
body.single-product .custom-price-display .onetime-price-info {
  align-items: baseline !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  flex-wrap: wrap !important;
}

body.single-product .custom-price-display .subscription-price-info {
  display: flex;
}

body.single-product .custom-price-display .onetime-price-info {
  display: none;
}

body.single-product .custom-price-display #subscription-price-display,
body.single-product .custom-price-display #onetime-price-display,
body.single-product .custom-price-display .price-amount {
  font-family: var(--rp-recia) !important;
  font-size: 38px !important;
  color: var(--rp-black) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

body.single-product .custom-price-display .original-price,
body.single-product .custom-price-display #subscription-original-price {
  font-size: 18px !important;
  color: var(--rp-light) !important;
  text-decoration: line-through !important;
  font-weight: 400 !important;
  font-family: var(--rp-satoshi) !important;
}

body.single-product .custom-price-display .discount-info,
body.single-product .custom-price-display #discount-badge,
body.single-product #discount-badge {
  font-family: var(--rp-satoshi) !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: var(--rp-cream-dp) !important;
  color: var(--rp-dark) !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  border-radius: 0 !important;
  display: inline-block !important;
}

/* Hide empty WC variation div that shows as a yellow box between dropdowns */
body.single-product .woocommerce-variation.single_variation {
  display: none !important;
}


/* ── HIDE NON-MOCKUP ELEMENTS ── */
body.single-product .product_meta {
  display: none !important;
}

/* ── SKU ── */
body.single-product .sku_wrapper,
body.single-product .sku-wrapper {
  display: none !important;
}

/* Buy Now hidden in inline styles */

body.single-product .product_meta {
  display: none !important;
}

/* ══════════════════════════════════════
   DESCRIPTION TABS
══════════════════════════════════════ */
.roze-desc-tabs-section,
.roze-pp-ticker,
.roze-benefits-sec,
.roze-nii-sec,
.roze-authority-sec,
.roze-pp-faq-sec,
.roze-pp-testi-sec,
.roze-related-sec {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.roze-pp-ticker {
  position: relative !important;
  z-index: 50 !important;
  /* Higher than sticky gallery to prevent overlap */
  background: #000 !important;
}

.roze-desc-tabs-section {
  background: var(--rp-white);
  padding: 60px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.roze-desc-tabs-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--rp-gutter);
}

.roze-desc-tabs-nav {
  display: flex;
  gap: 40px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.roze-tab-btn {
  background: transparent;
  border: none;
  font-family: var(--rp-satoshi);
  font-size: 16px;
  font-weight: 500;
  color: var(--rp-light);
  padding: 0 0 16px 0;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.roze-tab-btn:hover {
  color: var(--rp-dark);
}

.roze-tab-btn.active {
  color: var(--rp-black);
}

.roze-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--rp-black);
}

.roze-tab-pane {
  display: none;
}

.roze-tab-pane.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.roze-tab-pane-inner {
  display: flex;
  gap: 60px;
}

.roze-tab-col-left {
  flex: 1;
}

.roze-tab-col-left h2 {
  font-family: var(--rp-recia);
  font-size: 32px;
  margin-bottom: 24px;
  color: var(--rp-black);
}

.roze-tab-col-left p {
  font-family: var(--rp-satoshi);
  font-size: 16px;
  line-height: 1.6;
  color: var(--rp-mid);
}

.roze-tab-col-right {
  flex: 0 0 350px;
}

.roze-tab-col-right h3 {
  font-family: var(--rp-satoshi);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--rp-black);
}

.roze-product-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.roze-product-details-list li {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: var(--rp-satoshi);
  font-size: 15px;
}

.roze-product-details-list li strong {
  font-weight: 500;
  color: var(--rp-mid);
}

.roze-product-details-list li span {
  color: var(--rp-black);
  font-weight: 500;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 991px) {
  /* ── TABLET & MOBILE VERTICAL STACK ── */

  /* Force PDP Hero to Stack Vertically on Tablets & Mobile */
  html body.single-product .roze-pdp-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 20px 0 32px 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.single-product .roze-pdp-gallery-col {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
  }

  html body.single-product .roze-pdp-gallery-sticky {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }

  html body.single-product .roze-pdp-gallery-col .product-images-wrapper {
    height: auto !important;
  }

  /* 1) Force Container to Column */
  html body.single-product .variation-cards-container,
  html body.single-product .rbh-combination-selector-wrapper .variation-selector {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    overflow: visible !important;
  }

  /* 2) Force Full-Width Cards & Left Alignment */
  html body.single-product .variation-card {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* FORCES EVERYTHING TO LEFT */
    padding: 20px !important;
    height: auto !important;
    min-height: 140px !important;
    text-align: left !important;
    position: relative !important;
    background: var(--rp-cream) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
  }

  html body.single-product .variation-card.active {
    border: 2px solid var(--rp-black) !important;
    background: var(--rp-white) !important;
  }

  /* 3) Title (Top Left) */
  html body.single-product .variation-card .variation-card-title,
  html body.single-product .variation-card h4 {
    font-size: 16px !important;
    margin: 0 0 10px 0 !important;
    text-align: left !important;
    width: 100% !important;
    font-weight: 700 !important;
    display: block !important;
  }

  /* 4) Badge (Top Right) */
  html body.single-product .variation-card .pack-badge,
  html body.single-product .variation-card .variation-badge {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    font-size: 10px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--rp-black) !important;
    color: var(--rp-white) !important;
    z-index: 5 !important;
  }

  /* 5) Image (CENTERED within the left-aligned card) */
  html body.single-product .variation-card .variation-card-image,
  html body.single-product .variation-card .variation-image {
    margin: 0 auto 15px auto !important;
    /* AUTO MARGINS CENTER IT */
    width: 60px !important;
    display: block !important;
  }

  /* 6) Price (Left Aligned) */
  html body.single-product .variation-card .price-display,
  html body.single-product .variation-card .variation-price {
    font-size: 24px !important;
    margin: 0 !important;
    text-align: left !important;
    width: 100% !important;
    line-height: 1.2 !important;
    /* display: block !important; — Removed to fix double price issue */
  }

  /* 7) Savings Info (Below Price, Left Aligned) */
  html body.single-product .variation-card .price-display-inner,
  html body.single-product .variation-card .variation-price-info {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 5px !important;
    width: 100% !important;
  }

  html body.single-product .variation-card .original-price,
  html body.single-product .variation-card del {
    font-size: 13px !important;
    margin: 0 !important;
    color: var(--rp-light) !important;
    text-decoration: line-through !important;
    display: inline-block !important;
  }

  html body.single-product .variation-card .discount-badge {
    font-size: 13px !important;
    background: transparent !important;
    color: var(--rp-light) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  html body.single-product .variation-card .discount-badge::before {
    content: "• " !important;
  }

  /* Disable Sticky Components */
  html body.single-product #roze-sticky-bar,
  html body.single-product .supro-sticky-atc,
  html body.single-product .sticky-atc-bar {
    display: none !important;
  }

  /* Ensure main ATC is NOT fixed and respects container boundaries */
  html body.single-product .summary.entry-summary,
  #primary .roze-pdp-info-col .summary.entry-summary {
    padding: 20px 20px 32px 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html body.single-product form.cart {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  html body.single-product .single-button-wrapper {
    width: 100% !important;
    margin: 0 0 20px 0 !important;
  }

  html body.single-product form.cart button.single_add_to_cart_button {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    margin: 0 !important;
  }

  /* Description Tabs Responsiveness */
  html body.single-product .roze-desc-tabs-nav {
    overflow-x: auto;
    white-space: nowrap;
    gap: 20px;
    padding-bottom: 10px;
  }

  html body.single-product .roze-tab-pane-inner {
    flex-direction: column;
    gap: 40px;
  }
}

/* ── TOP ANNOUNCEMENT BAR — MOCKUP PARITY (Black/White) ── */
.ann-bar {
  background: #0F0F0F !important;
  padding: 8px var(--rp-gutter) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.ann-bar span {
  font-family: var(--rp-satoshi) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(250, 250, 247, 0.85) !important;
  /* Light white per request */
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ann-bar ion-icon {
  font-size: 14px !important;
  color: #FAFAF7 !important;
}

.ann-sep {
  width: 1px !important;
  height: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 991px) {
  .ann-bar {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .ann-sep {
    display: none !important;
  }
}

/* ================================================================
   ROZE — SOCIAL PROOF STRIP (Loved by 2,000+ Families)
   ================================================================ */
.roze-social-proof {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;

  padding: 16px 20px !important;
  /*border: 1px solid rgba(0,0,0,0.04) !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  background: var(--rp-cream-d, #E8E2DB) !important; */
  box-sizing: border-box !important;
  width: 100% !important;
}

.roze-sp-avatars {
  display: flex !important;
  align-items: center !important;
}

.roze-sp-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--rp-satoshi) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 2px solid var(--rp-cream-d, #E8E2DB) !important;
  margin-left: -8px !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

.roze-sp-avatar:first-child {
  margin-left: 0 !important;
}

/* Custom Avatar Palette to match high-fidelity mockup */
.avatar-sa {
  background: #E5E0DA !important;
  color: #0F0F0F !important;
}

.avatar-lm {
  background: #C68B7A !important;
  color: #FFFFFF !important;
}

.avatar-md {
  background: #1A3020 !important;
  color: #FFFFFF !important;
}

.avatar-more {
  background: #0F1A12 !important;
  color: #DFD2BE !important;
  font-size: 10px !important;
}

.roze-sp-text {
  display: flex !important;
  flex-direction: column !important;
}

.roze-sp-title {
  font-family: var(--rp-satoshi) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--rp-black, #0F0F0F) !important;
  line-height: 1.25 !important;
}

.roze-sp-subtitle {
  font-family: var(--rp-satoshi) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #8C847C !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-top: 3px !important;
}