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