/* ========= Optional: Prevent inner columns from stacking ========= */
.no-stack-table .vc_row-inner {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; /* allows horizontal scroll if screen is too small */
}
.no-stack-table .vc_column-inner {
  min-width: 200px; /* adjust to suit your layout */
  flex: 1;
  padding: 10px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .no-stack-table .vc_column-inner { flex: 1 0 auto; }
}

/* ========= Base Section Layout ========= */
.product-feature { background:#F6F7F6; padding:96px 0; }
.pf-visual { position:relative; min-height:420px; }
.pf-bottle img {
  max-width:360px; width:100%; display:block; margin:0 auto;
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.14));
}

/* ========= Swatches ========= */
.pf-swatch {
  position:absolute; left:7%; width:72px; border-radius:10px;
  background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.08); padding:6px; z-index:3;
}
.pf-swatch-1 { top:40%; transform:translate(-40%,-50%); }
.pf-swatch-2 { top:62%; transform:translate(-40%,-50%); }

/* ========= Typography ========= */
.pf-title { font-size:clamp(28px,3.2vw,40px); line-height:1.2; margin-bottom:10px; }
.pf-sub { opacity:.8; max-width:520px; margin-bottom:22px; }
.pf-meta { opacity:.7; margin:10px 0 14px; }

/* ========= Tabs ========= */
.pf-tabs .vc_tta-tabs-list,
.pf-tabs .wpb_tabs_nav { border:0; margin:0 0 14px; padding:0; }
.pf-tabs .vc_tta-tabs-list .vc_tta-tab { margin-right:22px; }
.pf-tabs .vc_tta-tabs-list .vc_tta-tab a,
.pf-tabs .wpb_tabs_nav li a {
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 0; border-bottom:1px solid transparent; color:inherit;
}
.pf-tabs .vc_tta-tabs-list .vc_active a,
.pf-tabs .wpb_tabs_nav .ui-tabs-active a { border-bottom-color: currentColor; }
.pf-tabs .vc_tta-panel { padding:0; }

/* ========= Purchase Options ========= */
.pf-purchase { margin-top:14px; }
.pf-choice { display:flex; align-items:center; padding:12px 0; }
.pf-choice label { display:flex; align-items:center; width:100%; gap:12px; cursor:pointer; }
.pf-choice-left { flex:1; min-width:0; }
.pf-choice-title { display:block; font-weight:800; font-size:20px; color:#1a1a1a; }
.pf-choice-sub { display:block; font-size:14px; color:#6b6b6b; margin-top:2px; }
.pf-choice-price { font-weight:800; font-size:20px; white-space:nowrap; color:#1a1a1a; }
.pf-strike { color:#9aa0a6; text-decoration:line-through; margin-right:6px; }
.pf-divider { border:0; border-top:1px solid #e5e5e5; margin:10px 0 8px; }
.pf-primary-btn {
  display:block; width:100%; text-align:center; text-decoration:none;
  background:#1a1a1a; color:#fff; font-weight:800; font-size:18px;
  padding:18px 24px; border-radius:999px; margin-top:14px;
}
.pf-note { font-size:12px; color:#6b6b6b; margin-top:8px; }

/* ========= Custom Radio Buttons ========= */
.pf-choice input[type="radio"] {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:22px; height:22px; border-radius:50%;
  border:3px solid #1a1a1a; position:relative; flex:0 0 22px; background:#fff;
}
.pf-choice input[type="radio"]:checked::after {
  content:""; position:absolute; inset:50% auto auto 50%;
  width:10px; height:10px; border-radius:50%;
  transform:translate(-50%,-50%); background:#1a1a1a;
}

/* ========= Responsive Tweaks ========= */
@media (max-width:991px) {
  .pf-swatch { display:none !important; }
  .pf-bottle img { max-width:300px; }
  .pf-copy { margin-top:28px; }
}
@media (max-width:480px) {
  .pf-choice-title, .pf-choice-price { font-size:18px; }
}

/* --- Gallery layout inside .pf-visual --- */
.pf-gallery { position: relative; }
.pf-main img {
  width: 100%; height: auto; display:block;
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.14));
}

/* Stacked thumb cards to the left */
.pf-thumbs {
  position:absolute; left:-68px; top:18%;
  display:flex; flex-direction:column; gap:22px; z-index:3;
}
.pf-thumb { display:block; padding:6px; border-radius:10px; background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.08); border:2px solid transparent; }
.pf-thumb img { display:block; width:64px; height:64px; object-fit:cover; border-radius:8px; }
.pf-thumb.is-active { border-color:#111; }
@media (max-width: 991px){ .pf-thumbs { display:none; } }

/* =======================================================
   EXACT MATCH TO SECOND IMAGE — comparison layout (.cmp)
   (table UI only)
   ======================================================= */
.cmp {
  --bg:#FFFBF8; --panel:#ffffff; --muted:#6c6c6c; --ink:#111;
  --div:#e9e1db; --ok:#24b36b; --no:#ff4f4f; --radius:18px;
  padding:40px 16px; background:var(--bg);
}
.cmp * { box-sizing:border-box; }

.cmp__title{
  text-align:center; font-weight:800; line-height:1.1; margin:0 0 22px;
  font-size:clamp(28px,5.2vw,56px);
}

/* 3 columns: wide left + two fixed cards */
.cmp__grid{
  max-width:1080px; margin:0 auto;
  display:grid; gap:24px;
  grid-template-columns:minmax(0,1fr) 280px 280px; /* left / DoctorDerm / Traditional */
}

/* LEFT COLUMN (text with horizontal rules) */
.cmp__left{
  background:var(--panel); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--div);
}
.cmp__head{
  background:#f7f7f7; font-weight:700; padding:14px 16px;
  border-bottom:1px solid var(--div);
}
.cmp__row{ border-bottom:1px solid var(--div); }
.cmp__row:last-child{ border-bottom:0; }
.cmp__feature{ padding:0 16px; }
.cmp__feature strong{
  display:block; font-weight:800; margin:0 0 6px; color:var(--ink);
  font-size:18px;
}
.cmp__feature span{
  display:block; color:var(--muted); line-height:1.45; font-size:15px;
}

/* RIGHT CARDS */
.cmp__card{
  display:grid;
  grid-template-rows:auto repeat(6, auto); /* header + 6 rows */
  background:var(--panel); border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--div);
}
.cmp__card-head{
  background:#f7f7f7; border-bottom:1px solid var(--div);
  text-align:center; font-weight:700; padding:14px 12px;
  white-space:nowrap; /* don't break DoctorDerm / Traditional Rx */
}
.cmp__cell{
  padding:16px 12px; border-bottom:1px solid var(--div);
  justify-content:center; text-align:center; /* center values in right columns */
}
.cmp__card .cmp__cell:last-child{ border-bottom:0; }
.center{ text-align:center; }

/* Row alignment & rhythm */
.cmp__left .cmp__row,
.cmp__card .cmp__cell{
  min-height:64px; display:flex; align-items:center;
}

/* Simple ✓ / ✕ icons */
.ico{
  display:inline-block; width:auto; height:auto; line-height:1;
  border:0; font-size:22px; margin:0 auto;
}
.ico--check{ color:var(--ok); }
.ico--x{ color:var(--no); }
.ico--check::before{ content:"✓"; font-weight:700; }
.ico--x::before{ content:"✕"; font-weight:700; }
.ico--check::after, .ico--x::after{ content:none !important; }

/* “Included” as plain text (no pill) */
.pill{
  background:transparent !important;
  color:inherit !important;
  padding:0 !important;
  border-radius:0 !important;
  min-height:0 !important;
  display:inline;
  font-weight:700;               /* change to 400 if you prefer regular */
  box-shadow:none !important;
}

/* Keep long values on one line if desired */
.cmp__cell strong{ white-space:nowrap; }

/* Narrow screens: keep card widths and allow gentle horizontal scroll */
@media (max-width:900px){
  .cmp__grid{
    grid-auto-flow:column;
    grid-template-columns:minmax(580px,1fr) 280px 280px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .cmp__title{ font-size:42px; }
}
.button--added::before { content: "✓ "; }
/* HARD OVERRIDE: stop vertical text inside the purchase block */
.pf-purchase,
.pf-purchase *{
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Keep layout sane on mobile */
.pf-purchase .pf-choice label{
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  width:100%;
}
.pf-purchase .pf-choice-left{ flex:1 1 auto; min-width:0; }
.pf-purchase .pf-choice-price{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:480px){
  .pf-purchase .pf-choice-price{ white-space:normal; text-align:right; }
}

/* If a theme utility rotates text, neutralize it here just in this block */
.pf-purchase [class*="vertical"],        /* common theme classes */
.pf-purchase [style*="transform: rotate"]{
  transform:none !important;
}
/* NUCLEAR FIX — beat any vertical text rule just inside the left column */
.pf-purchase .pf-choice .pf-choice-left,
.pf-purchase .pf-choice .pf-choice-left *,
.pf-purchase .pf-choice label .pf-choice-left,
.pf-purchase .pf-choice label .pf-choice-left *{
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  transform: none !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* Flex layout guard rails */
.pf-purchase .pf-choice label{
  display:flex !important;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  width:100%;
}
.pf-purchase .pf-choice-left{ flex:1 1 auto; min-width:0; max-width:100%; }
.pf-purchase .pf-choice-price{ flex:0 0 auto; white-space:nowrap; }
@media (max-width:480px){
  .pf-purchase .pf-choice-price{ white-space:normal; text-align:right; }
}

/* If anything is targeted by attribute/class utilities, neutralize them here */
.pf-purchase [style*="writing-mode"],
.pf-purchase [class*="vertical"]{
  writing-mode: horizontal-tb !important;
  -webkit-writing-mode: horizontal-tb !important;
  transform:none !important;
}
/* Mobile layout for purchase options: put price on its own row */
@media (max-width: 600px){
  .pf-purchase .pf-choice label{
    display:flex !important;
    flex-wrap:wrap;                /* allow a second row */
    align-items:flex-start;
    gap:12px;
  }

  /* left column (title + sub) stays on the first row */
  .pf-purchase .pf-choice-left{
    flex:1 1 calc(100% - 38px);    /* share the row with the radio */
    min-width:0;
  }

  /* price goes to the next line and can wrap */
  .pf-purchase .pf-choice-price{
    order:3;                       /* move below */
    flex:1 1 100%;                 /* allow shrinking/wrapping */
    white-space:normal;            /* wrap text */
    text-align:left;               /* or right if you prefer */
    margin-left:38px;              /* lines up under the text (radio is ~22px + gap) */
  }
}
/* Mobile layout: radio + title on row 1, price under the title */
@media (max-width: 600px){
  .pf-purchase .pf-choice label{
    display:grid !important;
    grid-template-columns: 26px 1fr;   /* radio | text */
    column-gap:12px;
    row-gap:8px;
    align-items:start;
  }
  .pf-purchase .pf-choice input[type="radio"]{
    grid-column:1;
    grid-row:1;                         /* sit next to the title */
    align-self:start;
  }
  .pf-purchase .pf-choice-left{
    grid-column:2;
    grid-row:1;
    min-width:0;
  }
  .pf-purchase .pf-choice-price{
    grid-column:2;                      /* align under the title */
    grid-row:2;
    white-space:normal;
    text-align:left;
    margin:0;                           /* remove any previous margin-left */
    order:0;                            /* neutralize earlier order rules */
    flex:unset;                         /* neutralize earlier flex rules */
  }
}
.pf-purchase .pf-choice-left,
.pf-purchase .pf-choice-left *{
  writing-mode:horizontal-tb !important;
  -webkit-writing-mode:horizontal-tb !important;
  text-orientation:mixed !important;
  transform:none !important;
}
/* Parent column wraps both items */
.overlay-card { position: relative; display: inline-block; }

/* Make sure the image fills and sits below the icon */
.overlay-card .wpb_single_image img { display:block; width:100%; height:auto; }

/* Position & style the icon bubble */
.overlay-card__icon {
  position: absolute;
  right: 20px;              /* move where you want */
  bottom: 20px;
  z-index: 5;
}
.overlay-card__icon .vc_icon_element-inner {
  width: 56px; height: 56px;          /* circle size */
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  display: flex; align-items:center; justify-content:center;
  transition: transform .15s ease, opacity .15s ease;
}
.overlay-card:hover .overlay-card__icon .vc_icon_element-inner { transform: scale(1.05); }

/* (optional) only show on hover */
@media (hover:hover) {
  .overlay-card__icon { opacity: 0; }
  .overlay-card:hover .overlay-card__icon { opacity: 1; }
}

/* mobile nudge */
@media (max-width: 480px){
  .overlay-card__icon { right: 12px; bottom: 12px; }
}
/* Stop WPBakery wrappers from clipping the slider & text */
.wpb_row, .vc_row, .wpb_column, .vc_column_container, .vc_column-inner {
  overflow: visible !important;
}

/* iOS/Safari trailing-glyph clipping fix: give text a 2px breathing room
   and force a new paint layer so the last character isn't trimmed */
.ba-scu .ba-name,
.ba-scu .ba-quote {
  padding-right: 2px;
  outline: 1px solid transparent;   /* creates a separate paint box */
  -webkit-transform: translateZ(0);  /* avoid GPU clipping bug */
  will-change: transform;
}