/* PapaHair — product description layout (single product pages only).
   Brand tokens are the locked PapaHair palette; headings use Playfair Display, body keeps the theme font. */
.woocommerce-Tabs-panel--description {
  --pp-plum: #41295b; --pp-plum-deep: #2a1640; --pp-plum-mid: #6b3d8f; --pp-purple: #ae76c4;
  --pp-lav: #f3eeff; --pp-lav-mid: #e8dcf8; --pp-pink: #c44fd8; --pp-pink-pale: #fdf0ff;
  --pp-gold: #c9a96e; --pp-gold-pale: #fdf8ec; --pp-cream: #faf8f5; --pp-ink: #1a0d2e;
  --pp-body: #3d2459; --pp-muted: #7a5c95; --pp-line: rgba(174, 118, 196, .22); --pp-line-2: rgba(174, 118, 196, .36);
  --pp-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --pp-shadow: 0 24px 48px -28px rgba(65, 41, 91, .45);
}
.woocommerce-Tabs-panel--description .woostify-tab-scroll-content { max-height: none !important; overflow: visible !important; padding: 0 !important; }

/* ── Base ── */
.pph-desc { position: relative; color: var(--pp-body); font-size: 16px; line-height: 1.75; }
.pph-desc .pph-i { width: 1.15em; height: 1.15em; flex-shrink: 0; display: inline-block; vertical-align: middle; fill: currentColor; }
.pph-desc strong { color: var(--pp-ink); font-weight: 600; }
.pph-desc p, .pph-desc .pph-copy > div { margin: 0 0 14px; }
.pph-desc a { color: var(--pp-plum-mid); }
.pph-desc h2, .pph-desc h3, .pph-desc h4 { letter-spacing: 0 !important; text-transform: none !important; }

/* ── Sections ── */
.pph-desc .pph-sec { padding: 56px 0 8px; margin: 0 !important; }
.pph-desc .pph-sec .wp-block-group__inner-container { max-width: none !important; padding: 0 !important; }
/* Full-width blocks would stretch to the whole screen and spill out of the description. */
.pph-desc .alignfull, .pph-desc .alignwide { width: auto !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
.pph-desc .pph-sec .wp-block-columns { gap: 56px !important; align-items: flex-start !important; margin: 0 !important; }
.pph-desc .pph-copy { flex: 1 1 0 !important; min-width: 0; }
.pph-desc .pph-media { flex: 0 0 34% !important; max-width: 380px; position: sticky; top: 110px; display: grid; gap: 16px; }
.pph-desc .pph-media:empty { display: none; }
.pph-desc .pph-media figure, .pph-desc .pph-copy figure.wp-block-image { margin: 0 !important; }
.pph-desc .pph-media img, .pph-desc figure.wp-block-image img {
  width: 100%; height: auto; display: block; border-radius: 22px !important; box-shadow: var(--pp-shadow); background: var(--pp-lav);
}

/* ── Hero ── */
.pph-desc .pph-hero { margin: 8px 0 0 !important; padding: 48px !important; border-radius: 28px; background:
  radial-gradient(120% 90% at 100% 0%, rgba(250, 165, 255, .28), transparent 55%),
  linear-gradient(160deg, var(--pp-lav) 0%, var(--pp-pink-pale) 55%, #fff 100%); border: 1px solid var(--pp-line); }
.pph-desc .pph-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--pp-line-2); color: var(--pp-plum-mid); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pph-desc .pph-eyebrow .pph-i { color: var(--pp-pink); width: 14px; height: 14px; }
.pph-desc h2.pph-title, .pph-desc .pph-hero h2 { font-family: var(--pp-serif) !important; font-weight: 700 !important; font-size: clamp(28px, 3.4vw, 42px) !important;
  line-height: 1.15 !important; color: var(--pp-plum-deep) !important; margin: 0 0 18px !important; }
.pph-desc .pph-title strong { color: inherit; font-weight: inherit; }
.pph-desc .pph-quote { font-family: var(--pp-serif); font-style: italic; font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45;
  color: var(--pp-plum-mid); margin: 0 0 22px !important; padding: 4px 0 4px 20px; border-left: 3px solid var(--pp-gold); }
.pph-desc .pph-quote strong { color: inherit; font-weight: 500; }

/* ── At a glance + jump links ── */
.pph-desc .pph-kicker { margin: 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-muted); }
.pph-desc .pph-glance { margin: 28px 0 0; }
.pph-desc .pph-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 12px; }
.pph-desc .pph-chip { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--pp-line);
  box-shadow: 0 10px 24px -20px rgba(65, 41, 91, .5); }
.pph-desc .pph-chip .pph-i { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--pp-lav); color: var(--pp-plum-mid); }
.pph-desc .pph-chip span { display: flex; flex-direction: column; line-height: 1.3; font-weight: 600; color: var(--pp-ink); font-size: 14.5px; }
.pph-desc .pph-chip em { font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-muted); margin-bottom: 2px; }
.pph-desc .pph-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; padding: 14px 0; border-top: 1px solid var(--pp-line); border-bottom: 1px solid var(--pp-line); }
.pph-desc .pph-toc .pph-kicker { margin-right: 6px !important; white-space: nowrap; flex-shrink: 0; }
.pph-desc .pph-toc a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--pp-line-2); background: #fff; color: var(--pp-plum) !important;
  font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none !important; transition: background .2s, color .2s, border-color .2s; }
.pph-desc .pph-toc a:hover, .pph-desc .pph-toc a:focus-visible { background: var(--pp-plum); border-color: var(--pp-plum); color: #fff !important; }

/* ── Section headings ── */
.pph-desc h3.pph-h { display: flex !important; align-items: center; gap: 14px; font-family: var(--pp-serif) !important; font-weight: 700 !important;
  font-size: clamp(22px, 2.2vw, 28px) !important; line-height: 1.25 !important; color: var(--pp-plum-deep) !important; margin: 40px 0 18px !important; scroll-margin-top: 110px; }
.pph-desc .pph-copy > h3.pph-h:first-child { margin-top: 0 !important; }
.pph-desc .pph-h-badge { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--pp-plum), var(--pp-pink)); color: #fff; box-shadow: 0 10px 20px -12px rgba(196, 79, 216, .9); }
.pph-desc .pph-h-badge .pph-i { width: 20px; height: 20px; }
.pph-desc h4 { font-family: var(--pp-serif) !important; font-size: 19px !important; font-weight: 600 !important; color: var(--pp-plum) !important; margin: 22px 0 10px !important; }
.pph-desc .pph-label { margin: 18px 0 8px !important; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted); }

/* ── Spec cards ── */
.pph-desc .pph-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0 18px; }
.pph-desc .pph-spec { display: flex; flex-direction: column; gap: 3px; margin: 0 !important; padding: 14px 16px; border-radius: 14px; background: var(--pp-cream); border: 1px solid var(--pp-line); }
.pph-desc .pph-spec:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pph-desc .pph-spec-k { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--pp-muted); line-height: 1.3; }
.pph-desc .pph-spec-v { color: var(--pp-ink); font-size: 15px; line-height: 1.55; }
.pph-desc .pph-spec-v strong { font-weight: 600; }

/* ── Lists ── */
.pph-desc ul.pph-list, .pph-desc ol.pph-list { list-style: none !important; margin: 4px 0 20px !important; padding: 0 !important; display: grid; gap: 10px; }
.pph-desc ul.pph-list > li, .pph-desc ol.pph-list > li { position: relative; margin: 0 !important; padding-left: 32px; }
.pph-desc ul.pph-list > li::before { content: ""; position: absolute; left: 0; top: .28em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pp-pink-pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c44fd8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
  border: 1px solid rgba(196, 79, 216, .25); }
.pph-desc ol.pph-list { counter-reset: pph; }
.pph-desc ol.pph-list > li { counter-increment: pph; }
.pph-desc ol.pph-list > li::before { content: counter(pph); position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: var(--pp-plum-mid); line-height: 1; }
.pph-desc .pph-box { padding: 20px 22px !important; border-radius: 18px; background: var(--pp-gold-pale); border: 1px solid rgba(201, 169, 110, .35); }
.pph-desc ul.pph-box > li::before { background-color: #fff; }
.pph-desc ul.pph-tags { list-style: none !important; display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 22px !important; padding: 0 !important; }
.pph-desc ul.pph-tags > li { margin: 0 !important; padding: 9px 16px; border-radius: 999px; background: var(--pp-lav); border: 1px solid var(--pp-line); color: var(--pp-plum);
  font-size: 14px; font-weight: 500; line-height: 1.35; }

/* ── Feature cards ── */
.pph-desc .pph-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 6px 0 22px; }
.pph-desc .pph-feat { display: flex; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--pp-line);
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.pph-desc .pph-feat:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pph-desc .pph-feat:hover { border-color: var(--pp-line-2); box-shadow: 0 16px 32px -24px rgba(65, 41, 91, .6); transform: translateY(-2px); }
.pph-desc .pph-feat > .pph-i { color: var(--pp-pink); width: 22px; height: 22px; margin-top: 2px; }
.pph-desc .pph-feat strong { display: block; color: var(--pp-ink); font-size: 15.5px; line-height: 1.35; margin-bottom: 3px; }
.pph-desc .pph-feat span { display: block; font-size: 14.5px; line-height: 1.6; color: var(--pp-body); }

/* ── Care cards ── */
.pph-desc .pph-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 8px 0 22px; }
.pph-desc .pph-card { padding: 20px 22px 8px; border-radius: 18px; background: #fff; border: 1px solid var(--pp-line); box-shadow: 0 14px 30px -26px rgba(65, 41, 91, .55); }
.pph-desc .pph-card.is-single { padding: 0; background: none; border: 0; box-shadow: none; }
.pph-desc .pph-card-h { display: flex !important; align-items: center; gap: 10px; margin: 0 0 12px !important; font-size: 18px !important; }
.pph-desc .pph-card-h .pph-i { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--pp-lav); color: var(--pp-plum-mid); }
.pph-desc .pph-card ul.pph-list { gap: 8px; font-size: 15px; line-height: 1.6; }

/* ── Tables (size chart) ── */
.pph-desc .wp-block-table { margin: 8px 0 22px !important; overflow-x: auto; border-radius: 16px; border: 1px solid var(--pp-line-2); }
.pph-desc table { width: 100%; border-collapse: collapse; margin: 0 !important; font-size: 15px; background: #fff; border: 0 !important; }
.pph-desc th { background: var(--pp-plum) !important; color: #fff !important; text-align: left; font-weight: 600; padding: 14px 16px !important; border: 0 !important; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.pph-desc td { padding: 13px 16px !important; border: 0 !important; border-top: 1px solid var(--pp-line) !important; vertical-align: top; }
.pph-desc tr:nth-child(even) td { background: var(--pp-lav); }
.pph-desc td:first-child { font-weight: 600; color: var(--pp-ink); }
.pph-desc th *, .pph-desc td > div { margin: 0 !important; color: inherit !important; }

/* ── Closing CTA ── */
.pph-desc .pph-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 56px 0 8px; padding: 36px 40px; border-radius: 26px; color: #fff;
  background: radial-gradient(90% 140% at 100% 0%, rgba(250, 165, 255, .35), transparent 60%), linear-gradient(135deg, var(--pp-plum-deep), var(--pp-plum) 45%, var(--pp-pink)); }
.pph-desc .pph-cta-k { margin: 0 0 6px !important; font-family: var(--pp-serif); font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; color: #fff; }
.pph-desc .pph-cta-t { margin: 0 !important; color: rgba(255, 255, 255, .85); font-size: 15.5px; }
.pph-desc .pph-cta-b { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.pph-desc .pph-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 22px; border-radius: 999px; font-weight: 600; font-size: 15px;
  line-height: 1.2; text-decoration: none !important; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.pph-desc .pph-btn:hover { transform: translateY(-2px); }
.pph-desc .pph-btn-light { background: #fff; color: var(--pp-plum) !important; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .5); }
.pph-desc .pph-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff !important; border: 1px solid rgba(255, 255, 255, .55); }
.pph-desc .pph-btn-ghost:hover { background: rgba(255, 255, 255, .22); }

/* ── Read more ── */
.pph-desc.is-collapsed { overflow: hidden; }
.pph-desc.is-collapsed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%); }
.woocommerce-Tabs-panel--description .pph-more { display: flex; align-items: center; gap: 10px; margin: 8px auto 12px; padding: 15px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--pp-plum), var(--pp-pink)); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2;
  box-shadow: 0 16px 30px -16px rgba(196, 79, 216, .9); transition: transform .2s, box-shadow .2s; }
.woocommerce-Tabs-panel--description .pph-more:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(196, 79, 216, 1); }
.woocommerce-Tabs-panel--description .pph-more .pph-i { width: 18px; height: 18px; transition: transform .2s; }
.woocommerce-Tabs-panel--description .pph-more[aria-expanded="true"] .pph-i { transform: rotate(180deg); }
.pph-desc :focus-visible, .woocommerce-Tabs-panel--description .pph-more:focus-visible { outline: 2px solid var(--pp-pink); outline-offset: 3px; }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .pph-desc .pph-sec .wp-block-columns { gap: 36px !important; }
  .pph-desc .pph-feats, .pph-desc .pph-specs { grid-template-columns: 1fr !important; }
  .pph-desc .pph-cta { flex-direction: column !important; align-items: flex-start !important; }
}

/* ── Phone ── */
@media (max-width: 781px) {
  .pph-desc { font-size: 15px !important; }
  .pph-desc .pph-hero { padding: 28px 20px !important; border-radius: 22px !important; }
  .pph-desc .pph-sec { padding-top: 40px !important; }
  .pph-desc .pph-sec .wp-block-columns { flex-direction: column !important; gap: 22px !important; }
  .pph-desc .pph-copy, .pph-desc .pph-media { flex-basis: 100% !important; width: 100% !important; max-width: none !important; position: static !important; }
  .pph-desc .pph-media { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
  .pph-desc .pph-media img { border-radius: 18px !important; }
  .pph-desc .pph-hero .pph-media { order: -1 !important; }
  .pph-desc .pph-hero .pph-media img { max-height: 420px !important; object-fit: cover !important; object-position: top !important; }
  .pph-desc .pph-chips { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .pph-desc .pph-chip { padding: 12px !important; gap: 10px !important; }
  .pph-desc .pph-chip .pph-i { width: 32px !important; height: 32px !important; padding: 7px !important; }
  .pph-desc .pph-toc { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .pph-desc .pph-toc::-webkit-scrollbar { display: none !important; }
  .pph-desc .pph-toc a { white-space: nowrap !important; flex-shrink: 0 !important; }
  .pph-desc h3.pph-h { gap: 12px !important; }
  .pph-desc .pph-h-badge { width: 38px !important; height: 38px !important; border-radius: 12px !important; }
  .pph-desc .pph-cards { grid-template-columns: 1fr !important; }
  .pph-desc table { font-size: 14px !important; white-space: nowrap !important; }
  .pph-desc .pph-cta { padding: 28px 22px !important; border-radius: 22px !important; }
  .pph-desc .pph-cta-b, .pph-desc .pph-btn { width: 100% !important; }

}