/* Concise affiliate disclosures; normal flow keeps every CTA clickable. */
.hh-product-detail .hh-pd-ad-disclosure,
.hh-product-detail .hh-pd-purchase__ad-label{margin:10px 0 14px;color:#086d6b;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.hh-product-detail .hh-pd-ad-disclosure{padding:8px 12px;border-left:3px solid #0a9a98;background:#f0faf9;border-radius:4px}
.hh-product-detail .hh-pd-ad-disclosure a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hh-product-detail .hh-pd-purchase__ad-label{font-weight:600}
/* Hair Hub Product Detail Framework Phase 1 */
.hh-product-detail{--hh-teal:#0a9a98;--hh-teal-dark:#087d7b;--hh-gold:#d5a019;--hh-border:#dfe7e8;--hh-text:#13262c;--hh-muted:#6d7b80;max-width:1180px;margin:0 auto;color:var(--hh-text);font-size:15px;line-height:1.75}.hh-product-detail *{box-sizing:border-box}.hh-pd-hero,.hh-pd-panel{background:#fff;border:1px solid var(--hh-border);border-radius:20px;box-shadow:0 8px 24px rgba(20,58,64,.045)}.hh-pd-hero{display:grid;grid-template-columns:minmax(320px,42%) 1fr;overflow:hidden;margin-bottom:18px}.hh-pd-hero__media{position:relative;min-height:470px;background:linear-gradient(145deg,#f7faf7,#eef7f7);display:flex;align-items:center;justify-content:center;padding:28px}.hh-pd-hero__image{width:100%;height:100%;max-height:470px;object-fit:contain}.hh-pd-hero__placeholder{width:72%;aspect-ratio:1/1}.hh-pd-rank{position:absolute;left:18px;top:0;z-index:2;width:96px;padding:10px 8px 14px;text-align:center;background:rgba(255,255,255,.96);border:1px solid #e3cf8c;border-top:0;border-radius:0 0 16px 16px;box-shadow:0 7px 18px rgba(75,60,20,.08)}.hh-pd-rank__crown{display:block;line-height:1}.hh-pd-rank strong{font-size:48px;color:#9b7209;line-height:1}.hh-pd-rank>span:not(.hh-pd-rank__crown){font-weight:700;color:#9b7209}.hh-pd-rank small{display:block;margin-top:8px;padding:4px 5px;border-radius:999px;background:#f7f0d9;color:#7a5d12;font-size:10px;line-height:1.3}.hh-pd-rank--2{border-color:#cbd4d7}.hh-pd-rank--2 strong,.hh-pd-rank--2>span:not(.hh-pd-rank__crown){color:#68777d}.hh-pd-rank--3{border-color:#d8ad94}.hh-pd-rank--3 strong,.hh-pd-rank--3>span:not(.hh-pd-rank__crown){color:#a75b32}.hh-pd-hero__body{padding:48px 44px}.hh-pd-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 8px;color:#9f7513;font-weight:700}.hh-pd-title{margin:0 0 5px;font-size:clamp(28px,3vw,42px);line-height:1.25;letter-spacing:.01em}.hh-pd-brand{margin:0 0 18px;color:#53646a;font-size:17px}.hh-pd-rating-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 14px;color:#56666b}.hh-pd-rating-row strong{color:#b98200;font-size:24px}.hh-pd-stars{font-size:25px}.hh-pd-rating-separator{color:#c6d0d2}.hh-pd-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.hh-label--teal{background:#e9f7f6!important;color:#087c79!important}.hh-pd-description{max-width:720px;margin:0 0 26px;color:#34494f}.hh-pd-actions{display:grid;grid-template-columns:minmax(280px,1.8fr) 1fr 1fr;gap:12px;align-items:stretch}.hh-pd-primary{display:flex!important;justify-content:center;gap:10px;background:linear-gradient(135deg,var(--hh-teal),#0ab1ae)!important;color:#fff!important;border:0!important;min-height:58px;font-weight:800!important;box-shadow:0 10px 20px rgba(10,154,152,.18)}.hh-pd-primary:hover{background:linear-gradient(135deg,var(--hh-teal-dark),var(--hh-teal))!important;transform:translateY(-1px)}.hh-pd-secondary{appearance:none;border:1px solid var(--hh-teal);background:#fff;color:#087c79;border-radius:14px;min-height:58px;padding:10px 14px;font-weight:700;cursor:pointer;transition:.2s}.hh-pd-secondary:hover,.hh-pd-secondary.is-active{background:#eaf8f7}.hh-pd-secondary span:first-child{font-size:20px;margin-right:5px}.hh-pd-editor-note{margin:12px 0 0;padding:9px 12px;background:#fff8df;border-radius:9px;color:#725b19;font-size:12px}.hh-pd-grid{display:grid;gap:18px;margin:18px 0}.hh-pd-grid--three{grid-template-columns:1fr 1.15fr 1fr}.hh-pd-grid--lower{grid-template-columns:1fr 1.3fr}.hh-pd-grid--lower>section:only-child{grid-column:1/-1}.hh-pd-panel{padding:22px}.hh-pd-panel h2{display:flex;align-items:center;gap:8px;margin:0 0 18px;font-size:18px}.hh-pd-panel h2>span{color:var(--hh-gold)}.hh-pd-rating-summary__body{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}.hh-pd-rating-big strong{display:block;color:var(--hh-teal-dark);font-size:42px;line-height:1}.hh-pd-rating-big>span{color:#567075}.hh-pd-rating-big .hh-rating-stars{display:block;margin:8px 0;font-size:20px}.hh-pd-rating-big small{color:var(--hh-muted)}.hh-pd-bars{display:grid;gap:7px}.hh-pd-bar{display:grid;grid-template-columns:38px 1fr 48px;align-items:center;gap:8px;font-size:12px}.hh-pd-bar i{height:8px;background:#edf1f2;border-radius:20px;overflow:hidden}.hh-pd-bar b{display:block;height:100%;background:var(--hh-teal);border-radius:20px}.hh-pd-bar em{font-style:normal;text-align:right}.hh-pd-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}.hh-pd-specs>div{display:grid;grid-template-columns:84px 1fr;background:#fafcfc;border:1px solid #edf1f1;border-radius:10px;overflow:hidden}.hh-pd-specs dt,.hh-pd-specs dd{margin:0;padding:10px}.hh-pd-specs dt{background:#f0f6f6;color:#267b79;font-weight:700;font-size:12px}.hh-pd-specs dd{font-size:13px}.hh-pd-review-box{display:grid;grid-template-columns:78px 1fr;gap:8px;padding:12px;border-radius:12px;margin-bottom:10px}.hh-pd-review-box strong{font-size:13px}.hh-pd-review-box ul{margin:0;padding-left:18px;font-size:13px}.hh-pd-review-box--good{background:#fff0f0;color:#9c3d3d}.hh-pd-review-box--concern{background:#eef6ff;color:#346899}.hh-pd-empty{color:var(--hh-muted)}.hh-pd-ranking__body{display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center}.hh-pd-ranking__badge{min-height:150px;border:1px solid #ead392;border-radius:18px;background:linear-gradient(145deg,#fffdf5,#fff);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;text-align:center;padding:14px}.hh-pd-ranking__badge img{width:100%;object-fit:contain}.hh-pd-ranking__badge strong{font-size:52px;color:#9b7209;line-height:1}.hh-pd-ranking__badge>span{color:#9b7209;font-weight:700}.hh-pd-ranking__badge small{display:block;width:100%;margin-top:7px;color:#7b671f}.hh-pd-ranking__note{color:var(--hh-muted);font-size:12px}.hh-pd-recommended__items{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.hh-pd-recommended__items>div{text-align:center}.hh-pd-feature-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 9px;border:1px solid #b9dfdd;border-radius:50%;background:#f4fbfa;color:var(--hh-teal-dark);font-size:20px;font-weight:800}.hh-pd-recommended__items p{margin:0;font-size:13px}.hh-pd-related{margin-top:18px}.hh-pd-related__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.hh-pd-related article a{display:block;height:100%;padding:10px;color:inherit;text-decoration:none;border-radius:14px;transition:.2s}.hh-pd-related article a:hover{background:#f7fbfb}.hh-pd-related__media{aspect-ratio:1/1;border-radius:12px;background:#f5f8f8;overflow:hidden;margin-bottom:8px}.hh-pd-related__media img{width:100%;height:100%;object-fit:contain}.hh-pd-related small{color:var(--hh-muted)}.hh-pd-related h3{font-size:13px;line-height:1.45;margin:3px 0}.hh-pd-related__rating{margin:0;color:#a97800}.hh-pd-disclaimer{margin:18px 0;padding:18px 20px;border:1px solid #eee5d5;border-radius:14px;background:#fffaf1;color:#645c4f}.hh-pd-disclaimer strong{display:block;margin-bottom:4px}.hh-pd-disclaimer p{margin:0;font-size:12px}.hh-product-detail+.hh-product-reviews{margin-top:26px}
@media(max-width:900px){.hh-pd-hero{grid-template-columns:1fr}.hh-pd-hero__media{min-height:360px}.hh-pd-hero__body{padding:30px 24px}.hh-pd-actions{grid-template-columns:1fr 1fr}.hh-pd-primary{grid-column:1/-1}.hh-pd-grid--three,.hh-pd-grid--lower{grid-template-columns:1fr}.hh-pd-recommended__items,.hh-pd-related__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hh-product-detail{font-size:14px}.hh-pd-hero,.hh-pd-panel{border-radius:14px}.hh-pd-hero__media{min-height:300px;padding:18px}.hh-pd-rank{left:10px;width:76px}.hh-pd-rank strong{font-size:32px}.hh-pd-hero__body{padding:24px 18px}.hh-pd-title{font-size:27px}.hh-pd-actions{grid-template-columns:1fr}.hh-pd-primary{grid-column:auto}.hh-pd-grid--three,.hh-pd-grid--lower{gap:12px;margin:12px 0}.hh-pd-panel{padding:18px}.hh-pd-rating-summary__body{grid-template-columns:1fr}.hh-pd-specs{grid-template-columns:1fr}.hh-pd-ranking__body{grid-template-columns:110px 1fr;gap:15px}.hh-pd-ranking__badge{min-height:120px}.hh-pd-ranking__badge strong{font-size:48px}.hh-pd-recommended__items{grid-template-columns:1fr 1fr}.hh-pd-related__grid{grid-template-columns:1fr 1fr}}

/* Product Detail Framework Phase 1.1 — approved UI polish. */
.hh-product-detail{width:100%;max-width:1180px}
.hh-pd-hero{grid-template-columns:minmax(300px,42%) minmax(0,58%);align-items:stretch}
.hh-pd-hero__body{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:clamp(26px,4vw,48px)}
.hh-pd-title{margin:.25rem 0 .35rem;font-size:clamp(1.7rem,3vw,2.55rem);line-height:1.3;letter-spacing:.01em}
.hh-pd-brand{margin:0 0 .85rem;color:#53666b;font-size:1rem}
.hh-pd-rating-row{min-height:32px}
.hh-pd-description{max-width:46rem}
.hh-pd-actions{margin-top:1.4rem;display:grid;grid-template-columns:minmax(260px,1.7fr) minmax(150px,.8fr) minmax(150px,.8fr);gap:.75rem;align-items:stretch}
.hh-pd-primary,.hh-pd-secondary{min-height:54px;border-radius:14px}
.hh-pd-primary{background:linear-gradient(135deg,#0a9a98,#087d7b)!important;box-shadow:0 7px 16px rgba(8,125,123,.22)}
.hh-pd-primary:hover,.hh-pd-primary:focus-visible{background:linear-gradient(135deg,#087d7b,#066c6a)!important}
.hh-pd-editor-note{grid-column:1/-1}
.hh-pd-hero__placeholder{max-width:310px;max-height:310px;border-radius:18px}
.hh-pd-panel h2 img,.hh-pd-eyebrow img,.hh-pd-rank__crown img{object-fit:contain}
.hh-pd-eyebrow img{width:30px;height:auto}
.hh-pd-grid--three{align-items:stretch}
.hh-pd-grid--three>.hh-pd-panel{height:100%}
.hh-pd-empty{color:#7a898d}
.hh-pd-related__grid article{min-width:0}
@media(max-width:900px){.hh-pd-actions{grid-template-columns:1fr 1fr}.hh-pd-primary{grid-column:1/-1}}
@media(max-width:720px){.hh-pd-hero{grid-template-columns:1fr}.hh-pd-hero__media{min-height:330px}.hh-pd-hero__body{padding:24px 20px}.hh-pd-actions{grid-template-columns:1fr}.hh-pd-primary{grid-column:auto}.hh-pd-title{font-size:1.75rem}}


/* Product Detail Phase 4 Step 3 — Product Hero Integration.
 * Generic block-theme cleanup only. SWELL-specific selectors are isolated in
 * product-detail-swell-compat.css and load only while SWELL is active.
 */
.hh-product-detail-page .wp-block-post-title{display:none!important}
.hh-product-detail-page .wp-block-post-title + .wp-block-group.has-small-font-size{display:none!important}
/* Product Detail Bottom Cleanup: hide Twenty Twenty-Five related-post query block only on hh_product. */
.hh-product-detail-page main > .wp-block-group:has(.wp-block-heading.has-small-font-size + .wp-block-query){display:none!important}
.hh-pd-hero{border-color:#d8e7e7;box-shadow:0 12px 34px rgba(20,58,64,.065)}
.hh-pd-kicker{margin:0 0 9px;color:#0a8885;font-size:12px;font-weight:800;letter-spacing:.16em}
.hh-pd-taxonomy-links{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 10px}
.hh-pd-taxonomy-links a,.hh-pd-taxonomy-links span{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid #cde4e3;border-radius:999px;background:#f3fbfa;color:#087c79;font-size:12px;font-weight:700;line-height:1.25;text-decoration:none}
.hh-pd-taxonomy-links a{transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.hh-pd-taxonomy-links a:hover,.hh-pd-taxonomy-links a:focus-visible{transform:translateY(-1px);border-color:#79c8c5;background:#e9f7f6;color:#066c6a}
.hh-pd-primary--internal{text-decoration:none!important}
#hh-pd-summary{scroll-margin-top:90px}
@media(max-width:720px){
  .hh-pd-kicker{font-size:11px}
  .hh-pd-taxonomy-links{margin-bottom:9px}
  .hh-pd-taxonomy-links a,.hh-pd-taxonomy-links span{font-size:11px}
  .hh-pd-rating-row{gap:8px}
}
@media(prefers-reduced-motion:reduce){.hh-pd-taxonomy-links a{transition:none}.hh-pd-taxonomy-links a:hover,.hh-pd-taxonomy-links a:focus-visible{transform:none}}

/* Product Detail Bottom Cleanup Rev.3
 * Twenty Twenty-Five: remove theme-owned post blocks after Hair Hub entry content
 * only on hh_product singular pages.
 */
.hh-product-detail-page .entry-content ~ .wp-block-group{display:none!important}
.hh-product-detail-page main > .wp-block-group.alignwide.has-global-padding{display:none!important}
.hh-product-detail-page main > .wp-block-group.alignfull.has-global-padding{padding-bottom:0!important}
.hh-product-detail-page .entry-content{margin-bottom:0!important}

/* LocalWP: adjust only the outer media padding when validated originals exist. */
@media (min-width:901px){
  .hh-product-detail[data-product-id] .hh-pd-hero__media:has(> .hh-pd-rakuten[data-hh-rakuten]){padding-left:20px;padding-right:20px}
}
@media (max-width:560px){
  .hh-product-detail[data-product-id] .hh-pd-hero__media:has(> .hh-pd-rakuten[data-hh-rakuten]){padding-left:2px;padding-right:2px}
}
/* LocalWP: reserve a container, never resize the affiliate image. */
.hh-product-detail[data-product-id] .hh-pd-rakuten{position:relative;width:100%;min-width:0}
.hh-product-detail[data-product-id] .hh-pd-rakuten__selected{display:flex;justify-content:center;align-items:flex-start}
.hh-product-detail[data-product-id] .hh-pd-rakuten__selected.is-loading{position:absolute;top:0;left:0;width:100%;visibility:hidden}
.hh-product-detail[data-product-id] .hh-pd-rakuten [hidden]{display:none!important}
.hh-product-detail[data-product-id] .hh-pd-rakuten[data-hh-rakuten] > .hh-pd-rakuten__fallback > .hh-pd-hero__placeholder{margin-inline:auto}

/* Related product cards keep the affiliate image link separate from the detail link. */
.hh-pd-related article > .hh-pd-related__media{height:auto;padding:0}
.hh-pd-related article > .hh-pd-related__detail-link{display:block;height:auto;padding:10px;color:inherit;text-decoration:none;border-radius:14px;transition:.2s}
.hh-pd-related article > .hh-pd-related__detail-link:hover,
.hh-pd-related article > .hh-pd-related__detail-link:focus-visible{background:#f7fbfb}
.hh-pd-related article .hh-card-rakuten__link{padding:0;border-radius:0;transition:none;background:transparent}
.hh-pd-related article .hh-card-rakuten__link:hover{background:transparent}

/* Product Detail UI Polish — Hero Polish Rev.1 (2026-08-10)
 * Scope: hh_product Hero only. Existing Product Detail / Review / Bottom Cleanup logic is preserved.
 */
.hh-pd-hero{
  grid-template-columns:minmax(300px,40%) minmax(0,60%);
}
.hh-pd-hero__media{
  min-height:420px;
  padding:24px;
}
.hh-pd-hero__image{
  max-height:420px;
}
.hh-pd-hero__placeholder{
  width:min(72%,280px);
  max-width:280px;
  max-height:280px;
}
.hh-pd-hero__body{
  padding:48px 48px;
}
.hh-pd-title{
  max-width:20em;
  margin:.3rem 0 .45rem;
  font-size:clamp(1.85rem,2.65vw,2.45rem);
  line-height:1.28;
  overflow-wrap:anywhere;
  word-break:auto-phrase;
}
.hh-pd-rating-row{
  gap:10px;
  margin:10px 0 12px;
}
.hh-pd-stars{font-size:23px}
.hh-pd-rating-row strong{font-size:22px}
.hh-pd-description{margin-bottom:20px}
.hh-pd-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  margin-top:1.15rem;
}
.hh-pd-primary{
  grid-column:1/-1;
  min-height:56px;
}
.hh-pd-secondary{
  min-width:0;
  min-height:50px;
  padding:9px 12px;
  line-height:1.35;
}
.hh-pd-secondary span:last-child{overflow-wrap:anywhere}

@media(max-width:900px){
  .hh-pd-hero__media{min-height:310px;padding:20px}
  .hh-pd-hero__image{max-height:310px}
  .hh-pd-hero__placeholder{width:min(68%,250px);max-width:250px;max-height:250px}
  .hh-pd-hero__body{padding:28px 24px}
  .hh-pd-title{max-width:none}
  .hh-pd-actions{grid-template-columns:1fr 1fr}
  .hh-pd-primary{grid-column:1/-1}
}

@media(max-width:560px){
  .hh-pd-hero__media{min-height:245px;padding:16px}
  .hh-pd-hero__image{max-height:245px}
  .hh-pd-hero__placeholder{width:min(66%,210px);max-width:210px;max-height:210px}
  .hh-pd-hero__body{padding:20px 16px 22px}
  .hh-pd-kicker{margin-bottom:7px}
  .hh-pd-taxonomy-links{gap:6px;margin-bottom:8px}
  .hh-pd-taxonomy-links a,.hh-pd-taxonomy-links span{min-height:26px;padding:3px 8px;font-size:10.5px}
  .hh-pd-title{margin:.25rem 0 .35rem;font-size:1.58rem;line-height:1.32}
  .hh-pd-rating-row{gap:7px;margin:8px 0 10px;font-size:12.5px}
  .hh-pd-stars{font-size:21px}
  .hh-pd-rating-row strong{font-size:20px}
  .hh-pd-rating-separator{margin:0 1px}
  .hh-pd-description{margin-bottom:16px}
  .hh-pd-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-top:1rem}
  .hh-pd-primary{grid-column:1/-1;min-height:54px}
  .hh-pd-secondary{min-height:48px;padding:8px 7px;font-size:12px}
  .hh-pd-secondary span:first-child{font-size:17px;margin-right:3px}
}

@media(max-width:360px){
  .hh-pd-actions{grid-template-columns:1fr}
  .hh-pd-primary{grid-column:auto}
}

/* Hero Polish Rev.1 Fix — responsive restore + Hair Hub color system (2026-08-10) */
@media(max-width:900px){
  .hh-pd-hero{grid-template-columns:1fr!important}
}
@media(max-width:560px){
  .hh-pd-hero{grid-template-columns:minmax(0,1fr)!important}
  .hh-pd-hero__media,.hh-pd-hero__body{min-width:0;width:100%}
  .hh-pd-title{max-width:100%;overflow-wrap:anywhere;word-break:normal}
  .hh-pd-rating-row{max-width:100%}
  .hh-pd-actions{grid-template-columns:1fr!important}
  .hh-pd-primary{grid-column:auto!important}
  .hh-pd-secondary{width:100%}
}
/* Hair Hub Color System: Positive=teal, Caution=orange, Info=blue, Rating=gold. */
.hh-pd-review-box--good{background:#eefafa;color:#176e6b;border-left:4px solid #17a6a2}
.hh-pd-review-box--concern{background:#fff6ec;color:#9a5a1d;border-left:4px solid #e79a43}

/* Product Detail Mobile Polish Rev.2 — header spacing + review overview (2026-08-11)
 * Scope: hh_product singular only. Removes Twenty Twenty-Five's now-empty title-area spacing
 * after the native title/meta blocks are hidden, and improves review overview readability on mobile.
 */
.hh-product-detail-page main#wp--skip-link--target{
  margin-top:28px!important;
}
.hh-product-detail-page main#wp--skip-link--target > .wp-block-group.alignfull.has-global-padding:first-child{
  padding-top:0!important;
}
@media(max-width:900px){
  .hh-product-detail-page main#wp--skip-link--target{margin-top:18px!important}
}
@media(max-width:560px){
  .hh-product-detail-page main#wp--skip-link--target{margin-top:12px!important}
  .hh-product-detail-page main#wp--skip-link--target > .wp-block-group.alignfull.has-global-padding:first-child{padding-top:0!important}
  .hh-pd-review-box{
    grid-template-columns:1fr;
    gap:4px;
    padding:12px 14px;
  }
  .hh-pd-review-box strong{font-size:12.5px;line-height:1.45}
  .hh-pd-review-box ul{margin:0;padding-left:19px;font-size:13px;line-height:1.7}
  .hh-pd-review-box li{overflow-wrap:anywhere;word-break:normal}
}

/* Product Detail Mobile Review Overview Gap Fix — 2026-08-11
 * Removes the unintended blank space between the overview label and its list.
 * Scope: mobile review overview only; list item line breaks are preserved.
 */
@media(max-width:560px){
  .hh-pd-review-box{
    display:block;
  }
  .hh-pd-review-box strong{
    display:block;
    margin:0 0 2px;
  }
  .hh-pd-review-box ul{
    margin:0!important;
    padding-left:19px;
  }
}

/* Product Detail Review Overview Desktop Width Fix — 2026-08-11
 * The overview panel is already one column of the 3-column desktop grid.
 * Keep each review box internally stacked so list text can use the full card width.
 */
.hh-pd-review-box{
  display:block;
}
.hh-pd-review-box strong{
  display:block;
  margin:0 0 4px;
}
.hh-pd-review-box ul{
  margin:0;
}

/* Product Detail Recommended Points Mobile 1-Column Fix — 2026-08-11
 * Keep desktop/tablet layouts unchanged. On phone widths, stack recommendation
 * items vertically so each label can use the full card width without awkward wrapping.
 */
@media(max-width:560px){
  .hh-pd-recommended__items{
    grid-template-columns:1fr;
    gap:16px;
  }
  .hh-pd-recommended__items>div{
    min-width:0;
  }
  .hh-pd-recommended__items p{
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }
}

/* Hair Hub Price & Purchase Component v1.0 — STRUCTURE CLEANUP REV.2
 * Single authoritative layout definition.
 * Desktop: 2 columns / Tablet: 2 columns / Mobile: 1 column.
 * Keeps the adopted compact card heights and centered internal alignment.
 */
.hh-pd-purchase{
  margin:18px 0;
  padding:22px;
  border:1px solid var(--hh-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 24px rgba(20,58,64,.045);
}
.hh-pd-purchase__head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.hh-pd-purchase__head-copy{min-width:0;flex:1 1 auto}
.hh-pd-purchase__cart{
  display:grid;
  place-items:center;
  flex:0 0 52px;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#e9f7f6;
  color:var(--hh-teal-dark);
  font-size:23px;
  line-height:1;
}
.hh-pd-purchase__head h2{
  margin:0 0 3px;
  color:var(--hh-text);
  font-size:21px;
  line-height:1.3;
}
.hh-pd-purchase__price-label{
  margin:0 0 1px;
  color:#41565c;
  font-size:12px;
  line-height:1.4;
}
.hh-pd-purchase__price{
  margin:0;
  color:var(--hh-teal);
  font-size:clamp(28px,3.6vw,38px);
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
}

.hh-pd-purchase__links{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:18px;
  padding-top:18px;
  border-top:1px dashed #cdd9db;
  align-items:stretch!important;
}

/* Rev.2 safety: WordPress/SWELL must not let auto-inserted BR nodes become grid items. */
.hh-pd-purchase__links>br,
.hh-pd-purchase__link>br{
  display:none!important;
}

.hh-pd-purchase__link{
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr) 22px!important;
  align-items:center!important;
  column-gap:14px!important;
  width:100%!important;
  height:76px!important;
  min-height:76px!important;
  max-height:76px!important;
  aspect-ratio:auto!important;
  padding:8px 14px!important;
  margin:0!important;
  border:1px solid var(--hh-teal)!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--hh-teal-dark)!important;
  text-decoration:none!important;
  overflow:hidden!important;
  writing-mode:horizontal-tb!important;
}
.hh-pd-purchase__link:hover,
.hh-pd-purchase__link:focus-visible{
  transform:translateY(-2px);
  border-color:var(--hh-teal-dark)!important;
  background:#fbfefe!important;
  box-shadow:0 8px 18px rgba(8,125,123,.12);
}

.hh-pd-purchase__brand-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  min-height:56px!important;
  margin:0!important;
  align-self:center!important;
  justify-self:start!important;
  overflow:visible!important;
}
.hh-pd-purchase__brand-icon>span{
  display:block!important;
  margin:0!important;
  font-size:34px!important;
  font-weight:900!important;
  line-height:1!important;
  writing-mode:horizontal-tb!important;
}
.hh-pd-purchase__brand-icon img{
  display:block!important;
  width:44px!important;
  height:44px!important;
  max-width:44px!important;
  margin:0 auto!important;
  object-fit:contain!important;
}
.hh-pd-purchase__link--amazon .hh-pd-purchase__brand-icon>span{color:#111827!important}
.hh-pd-purchase__link--rakuten .hh-pd-purchase__brand-icon>span{color:#bf0000!important}
.hh-pd-purchase__link--yahoo .hh-pd-purchase__brand-icon>span{color:#e60012!important;font-size:27px!important}

.hh-pd-purchase__copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.hh-pd-purchase__copy strong,
.hh-pd-purchase__copy small{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  clear:none!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  writing-mode:horizontal-tb!important;
}
.hh-pd-purchase__copy strong{
  display:block!important;
  margin-top:0!important;
  margin-bottom:4px!important;
  padding:0!important;
  color:var(--hh-teal-dark)!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hh-pd-purchase__copy small{
  display:block!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:0!important;
  color:#3f5055!important;
  font-size:11px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.hh-pd-purchase__external{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:end!important;
  align-self:center!important;
  width:22px!important;
  height:22px!important;
  margin:0!important;
  color:var(--hh-teal)!important;
  font-size:21px!important;
  font-weight:800!important;
  line-height:1!important;
  writing-mode:horizontal-tb!important;
}

.hh-pd-purchase__notice{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:16px 0 0;
  padding:10px 13px;
  border-radius:10px;
  background:#edf9fc;
  color:#354b52;
  font-size:11px;
  line-height:1.5;
}
.hh-pd-purchase__notice>span{
  flex:0 0 auto;
  color:var(--hh-teal);
  font-size:15px;
}

/* Tablet keeps 2 columns. */
@media(max-width:1199px) and (min-width:768px){
  .hh-pd-purchase{padding:20px}
  .hh-pd-purchase__links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .hh-pd-purchase__link{
    grid-template-columns:50px minmax(0,1fr) 20px!important;
    height:72px!important;
    min-height:72px!important;
    max-height:72px!important;
    column-gap:10px!important;
    padding:7px 12px!important;
  }
  .hh-pd-purchase__brand-icon{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
  }
  .hh-pd-purchase__brand-icon>span{font-size:31px!important}
  .hh-pd-purchase__link--yahoo .hh-pd-purchase__brand-icon>span{font-size:24px!important}
  .hh-pd-purchase__brand-icon img{width:48px!important;height:48px!important;max-width:48px!important}
  .hh-pd-purchase__copy strong{font-size:14px!important}
  .hh-pd-purchase__copy small{font-size:10px!important}
}

/* Mobile: one compact horizontal card, 8px gaps. */
@media(max-width:767px){
  .hh-pd-purchase{
    margin:12px 0;
    padding:16px;
    border-radius:14px;
  }
  .hh-pd-purchase__head{gap:10px}
  .hh-pd-purchase__cart{
    flex-basis:44px;
    width:44px;
    height:44px;
    font-size:20px;
  }
  .hh-pd-purchase__head h2{font-size:18px}
  .hh-pd-purchase__price-label{font-size:10px}
  .hh-pd-purchase__price{font-size:28px}

  .hh-pd-purchase__links{
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:14px;
    padding-top:14px;
  }
  .hh-pd-purchase__link{
    grid-template-columns:42px minmax(0,1fr) 18px!important;
    height:64px!important;
    min-height:64px!important;
    max-height:64px!important;
    column-gap:9px!important;
    padding:6px 10px!important;
    border-radius:10px!important;
  }
  .hh-pd-purchase__brand-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
  }
  .hh-pd-purchase__brand-icon>span{font-size:27px!important}
  .hh-pd-purchase__link--yahoo .hh-pd-purchase__brand-icon>span{font-size:21px!important}
  .hh-pd-purchase__brand-icon img{width:44px!important;height:44px!important;max-width:44px!important}
  .hh-pd-purchase__copy strong{font-size:13px!important}
  .hh-pd-purchase__copy small{font-size:9px!important}
  .hh-pd-purchase__external{
    width:18px!important;
    height:18px!important;
    font-size:18px!important;
  }
  .hh-pd-purchase__notice{
    margin-top:12px;
    padding:9px 10px;
    font-size:9px;
  }
}
@media(max-width:360px){
  .hh-pd-purchase{padding:13px}
  /* 320px price nowrap fix: keep the adopted one-line price label without affecting >=361px. */
  .hh-pd-purchase__price{
    font-size:24px;
    letter-spacing:0;
    white-space:nowrap;
  }
  .hh-pd-purchase__link{
    grid-template-columns:44px minmax(0,1fr) 16px!important;
    height:60px!important;
    min-height:60px!important;
    max-height:60px!important;
    column-gap:7px!important;
    padding:6px 8px!important;
  }
  .hh-pd-purchase__brand-icon{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
  }
  .hh-pd-purchase__brand-icon>span{font-size:24px!important}
  .hh-pd-purchase__link--yahoo .hh-pd-purchase__brand-icon>span{font-size:19px!important}
  .hh-pd-purchase__brand-icon img{width:32px!important;height:32px!important;max-width:32px!important}
  .hh-pd-purchase__copy strong{font-size:12px!important}
  .hh-pd-purchase__copy small{font-size:8.5px!important}
}
@media(prefers-reduced-motion:reduce){
  .hh-pd-purchase__link{transition:none}
}


/* Product Detail Summary Responsive Fix v1.0 — 2026-08-12
 * Scope: Evaluation Summary / Basic Information / Review Overview only.
 * Desktop >=1200px: keep adopted 3-column summary layout.
 * Tablet 768-1199px: stack the three summary panels; keep specs in 2 columns.
 * Mobile <=767px: stack panels and specs into 1 column for readable values.
 */
#hh-pd-summary.hh-pd-grid--three > .hh-pd-panel,
#hh-pd-summary .hh-pd-specs > div,
#hh-pd-summary .hh-pd-specs dd{
  min-width:0;
}

#hh-pd-summary .hh-pd-specs dd{
  overflow-wrap:anywhere;
  word-break:normal;
}

@media (max-width:1199px){
  #hh-pd-summary.hh-pd-grid--three{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px;
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel{
    width:100%;
    height:auto!important;
  }
  #hh-pd-summary .hh-pd-specs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  #hh-pd-summary .hh-pd-specs > div{
    grid-template-columns:110px minmax(0,1fr);
  }
  #hh-pd-summary .hh-pd-specs dt,
  #hh-pd-summary .hh-pd-specs dd{
    padding:11px 12px;
  }
}

@media (max-width:767px){
  #hh-pd-summary.hh-pd-grid--three{
    gap:12px;
    margin:12px 0;
  }
  #hh-pd-summary .hh-pd-specs{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px;
  }
  #hh-pd-summary .hh-pd-specs > div{
    grid-template-columns:96px minmax(0,1fr);
  }
  #hh-pd-summary .hh-pd-specs dt{
    font-size:12px;
  }
  #hh-pd-summary .hh-pd-specs dd{
    font-size:13px;
    line-height:1.6;
  }
}

@media (max-width:360px){
  #hh-pd-summary .hh-pd-specs > div{
    grid-template-columns:88px minmax(0,1fr);
  }
  #hh-pd-summary .hh-pd-specs dt,
  #hh-pd-summary .hh-pd-specs dd{
    padding:10px;
  }
}

/* Product Detail Summary Responsive Fix v1.1 — 2026-08-12
 * Desktop-only refinement.
 * Give Basic Information slightly more room while preserving the adopted
 * three-column composition. Tablet/mobile behavior from v1.0 is unchanged.
 */
@media (min-width:1200px){
  #hh-pd-summary.hh-pd-grid--three{
    grid-template-columns:minmax(0,1fr) minmax(0,1.18fr) minmax(0,1fr);
    gap:16px;
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel:nth-child(2){
    padding-left:20px;
    padding-right:20px;
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel:nth-child(2) .hh-pd-specs > div{
    grid-template-columns:72px minmax(0,1fr);
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel:nth-child(2) .hh-pd-specs dt{
    padding-left:9px;
    padding-right:9px;
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel:nth-child(2) .hh-pd-specs dd{
    padding-left:10px;
    padding-right:10px;
    overflow-wrap:break-word;
  }
}

/* Product Detail Recommendation Points v1.0 — 2026-08-12
 * Compact recommendation cards.
 * Desktop/tablet: 2 columns. Mobile <=767px: 1 column.
 * Reuses the existing semantic HTML and crown icon.
 */
.hh-pd-recommended{
  padding:20px 22px;
}
.hh-pd-recommended h2{
  margin-bottom:14px;
}
.hh-pd-recommended__items{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.hh-pd-recommended__items>div{
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-width:0;
  min-height:66px;
  padding:9px 14px;
  border:1px solid #d8eceb;
  border-radius:12px;
  background:#fbfefe;
}
.hh-pd-recommended .hh-pd-feature-icon{
  width:46px;
  height:46px;
  margin:0;
  border-color:#acd9d7;
  background:#f1fbfa;
  font-size:18px;
  line-height:1;
}
.hh-pd-recommended__items p{
  margin:0;
  min-width:0;
  font-size:13px;
  line-height:1.55;
  color:#31474d;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Disclaimer: keep it secondary and easier to scan on wide screens. */
.hh-pd-disclaimer{
  padding:15px 20px;
}
.hh-pd-disclaimer p{
  max-width:980px;
  line-height:1.7;
}

@media(max-width:767px){
  .hh-pd-recommended{
    padding:16px;
  }
  .hh-pd-recommended h2{
    margin-bottom:12px;
  }
  .hh-pd-recommended__items{
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .hh-pd-recommended__items>div{
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    min-height:58px;
    padding:8px 11px;
    text-align:left;
  }
  .hh-pd-recommended .hh-pd-feature-icon{
    width:48px;
    height:48px;
    font-size:16px;
  }
  .hh-pd-recommended__items p{
    font-size:13px;
    line-height:1.5;
  }
  .hh-pd-disclaimer{
    margin:12px 0 16px;
    padding:13px 15px;
  }
  .hh-pd-disclaimer p{
    font-size:11px;
    line-height:1.75;
  }
}

@media(max-width:360px){
  .hh-pd-recommended{
    padding:14px;
  }
  .hh-pd-recommended__items>div{
    grid-template-columns:38px minmax(0,1fr);
    gap:9px;
    min-height:56px;
    padding:8px 10px;
  }
  .hh-pd-recommended .hh-pd-feature-icon{
    width:38px;
    height:38px;
  }
}

/* Hair Hub section marker color roles — 2026-08-13
 * Rating star remains gold. Informational dots use Hair Hub turquoise.
 */
#hh-pd-summary > .hh-pd-panel:nth-child(1) > h2 > span{
  color:var(--hh-gold) !important;
}
#hh-pd-summary > .hh-pd-panel:nth-child(2) > h2 > span,
#hh-pd-summary > .hh-pd-panel:nth-child(3) > h2 > span{
  color:var(--hh-teal) !important;
}

/* Product Detail Polish v1.0 — 2026-08-28
 * Adopted scope only:
 * - manufacturer replaces HAIR HUB PRODUCT and links to archive filter
 * - original Hair Hub purchase icons
 * - centered CTA copy without external/chevron symbols
 * - line-cart icon for Price Check
 * - desktop Basic Information wrapping refinement
 */
.hh-pd-maker{margin:0 0 8px;font-weight:700;letter-spacing:.12em}
.hh-pd-maker a,.hh-pd-maker span{color:var(--hh-teal-dark);text-decoration:none}
.hh-pd-maker a{border-bottom:1px solid transparent;transition:border-color .18s ease,color .18s ease}
.hh-pd-maker a:hover,.hh-pd-maker a:focus-visible{color:var(--hh-teal);border-bottom-color:currentColor}

.hh-pd-purchase__cart img{display:block;width:30px;height:30px;object-fit:contain}
.hh-pd-purchase__link{
  grid-template-columns:56px minmax(0,max-content)!important;
  justify-content:center!important;
  column-gap:18px!important;
}
.hh-pd-purchase__brand-icon{justify-self:center!important}
.hh-pd-purchase__copy{
  flex:0 1 auto!important;
  width:auto!important;
  max-width:100%!important;
  align-items:center!important;
  text-align:center!important;
}
.hh-pd-purchase__copy strong{
  width:auto!important;
  max-width:100%!important;
  font-size:16px!important;
  line-height:1.25!important;
  text-align:center!important;
}
.hh-pd-purchase__copy small{
  width:auto!important;
  max-width:100%!important;
  font-size:11px!important;
  line-height:1.25!important;
  text-align:center!important;
}
.hh-pd-purchase__brand-icon img{width:48px!important;height:48px!important;max-width:48px!important}

@media (min-width:1200px){
  #hh-pd-summary.hh-pd-grid--three{
    grid-template-columns:minmax(0,.96fr) minmax(0,1.30fr) minmax(0,.96fr);
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel:nth-child(2) .hh-pd-specs > div{
    grid-template-columns:64px minmax(0,1fr);
  }
  #hh-pd-summary.hh-pd-grid--three > .hh-pd-panel:nth-child(2) .hh-pd-specs dd{
    overflow-wrap:normal;
    word-break:normal;
  }
}

@media(max-width:1199px) and (min-width:768px){
  .hh-pd-purchase__link{
    grid-template-columns:50px minmax(0,max-content)!important;
    column-gap:14px!important;
  }
  .hh-pd-purchase__brand-icon img{width:42px!important;height:42px!important;max-width:42px!important}
  .hh-pd-purchase__copy strong{font-size:15px!important}
}

@media(max-width:767px){
  .hh-pd-purchase__cart img{width:26px;height:26px}
  .hh-pd-purchase__link{
    grid-template-columns:42px minmax(0,max-content)!important;
    justify-content:center!important;
    column-gap:12px!important;
  }
  .hh-pd-purchase__brand-icon img{width:38px!important;height:38px!important;max-width:38px!important}
  .hh-pd-purchase__copy strong{font-size:14px!important}
  .hh-pd-purchase__copy small{font-size:9.5px!important}
}

@media(max-width:360px){
  .hh-pd-purchase__link{
    grid-template-columns:44px minmax(0,max-content)!important;
    column-gap:9px!important;
  }
  .hh-pd-purchase__brand-icon img{width:34px!important;height:34px!important;max-width:34px!important}
  .hh-pd-purchase__copy strong{font-size:12.5px!important}
  .hh-pd-purchase__copy small{font-size:8.5px!important}
}


/* Hair Hub 2026-08-29: Product Detail common UI minimal fix.
 * PC basic-info values were wrapping unnaturally because six specs were split
 * into two narrow columns inside the center panel. Keep mobile behavior intact
 * and use one readable column on desktop/tablet widths.
 */
@media (min-width: 561px) {
  .hh-pd-specs {
    grid-template-columns: 1fr;
  }

  .hh-pd-specs > div {
    grid-template-columns: 88px minmax(0, 1fr);
  }

  .hh-pd-specs dd {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}

/* Hair Hub 2026-08-29: Price-check icon display size only.
 * Design Lock SVG artwork is unchanged.
 * Desktop/tablet: 48px / Mobile: 44px.
 */
.hh-pd-purchase__cart img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  object-fit: contain !important;
  position: relative !important;
  top: -2px !important;
}

@media (max-width: 767px) {
  .hh-pd-purchase__cart img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
  }
}

/* Hair Hub 2026-08-30: Mobile purchase CTA alignment
 * Scope: mobile only.
 * Purpose: keep purchase-site icon columns aligned vertically across CTA cards.
 * No SVG/PHP/desktop layout changes.
 */
@media (max-width:767px){
  .hh-pd-purchase__link{
    grid-template-columns:44px minmax(0,1fr)!important;
    justify-content:stretch!important;
    column-gap:12px!important;
  }

  .hh-pd-purchase__brand-icon{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    justify-self:center!important;
    align-self:center!important;
  }

  .hh-pd-purchase__copy{
    width:100%!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  .hh-pd-purchase__copy strong,
  .hh-pd-purchase__copy small{
    width:100%!important;
    text-align:center!important;
  }
}

@media (max-width:360px){
  .hh-pd-purchase__link{
    grid-template-columns:40px minmax(0,1fr)!important;
    column-gap:9px!important;
  }

  .hh-pd-purchase__brand-icon{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
}

/* Hair Hub 2026-08-30: Adopted hero taxonomy link UI
 * Display: brand + category only (PHP controls items).
 * Manufacturer data remains stored and is still available in Basic Information.
 * Series data remains stored; only the hero link is hidden.
 */
.hh-pd-taxonomy-links{
  gap:10px!important;
  margin:0 0 16px!important;
}

.hh-pd-taxonomy-links a,
.hh-pd-taxonomy-links span{
  min-height:34px!important;
  padding:6px 14px!important;
  border:1.5px solid #14B8A6!important;
  border-radius:10px!important;
  background:#fff!important;
  color:#087c79!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1.2!important;
  text-decoration:none!important;
}

.hh-pd-taxonomy-links a{
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease!important;
}

.hh-pd-taxonomy-links a:hover,
.hh-pd-taxonomy-links a:focus-visible{
  background:#14B8A6!important;
  border-color:#14B8A6!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 4px 10px rgba(20,184,166,.16)!important;
}

@media(max-width:560px){
  .hh-pd-taxonomy-links{
    gap:8px!important;
    margin-bottom:14px!important;
  }

  .hh-pd-taxonomy-links a,
  .hh-pd-taxonomy-links span{
    min-height:32px!important;
    padding:5px 12px!important;
    font-size:11px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hh-pd-taxonomy-links a{
    transition:none!important;
  }

  .hh-pd-taxonomy-links a:hover,
  .hh-pd-taxonomy-links a:focus-visible{
    transform:none!important;
  }
}

/* Hair Hub 2026-08-30: Adopted hero action UI
 * - Official-site CTA uses the adopted globe + cursor SVG.
 * - Visual level matches the adopted outlined brand/category link UI.
 * - Favorite / compare retain their existing behavior.
 */
.hh-pd-actions{
  gap:10px!important;
}

.hh-pd-primary,
.hh-pd-secondary{
  border:1.5px solid #14B8A6!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#087c79!important;
  box-shadow:none!important;
}

.hh-pd-primary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:58px!important;
  padding:8px 18px!important;
  font-weight:800!important;
  text-decoration:none!important;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease!important;
}

.hh-pd-primary--official .hh-pd-primary__icon{
  display:block!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  object-fit:contain!important;
}

.hh-pd-primary:hover,
.hh-pd-primary:focus-visible,
.hh-pd-secondary:hover,
.hh-pd-secondary:focus-visible,
.hh-pd-secondary.is-active{
  background:#eefafa!important;
  border-color:#0a9a98!important;
  color:#066c6a!important;
  transform:translateY(-1px)!important;
  box-shadow:0 5px 12px rgba(20,184,166,.12)!important;
}

.hh-pd-secondary{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:52px!important;
  padding:9px 12px!important;
  font-weight:700!important;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease!important;
}

@media(max-width:560px){
  .hh-pd-actions{
    gap:8px!important;
  }

  .hh-pd-primary{
    min-height:56px!important;
    gap:9px!important;
    padding:7px 14px!important;
  }

  .hh-pd-primary--official .hh-pd-primary__icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
  }

  .hh-pd-secondary{
    min-height:50px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .hh-pd-primary,
  .hh-pd-secondary{
    transition:none!important;
  }

  .hh-pd-primary:hover,
  .hh-pd-primary:focus-visible,
  .hh-pd-secondary:hover,
  .hh-pd-secondary:focus-visible,
  .hh-pd-secondary.is-active{
    transform:none!important;
  }
}

/* Hair Hub 2026-08-30: Unified turquoise hover states
 * Scope:
 * - Brand/category hero links
 * - Official-site primary CTA
 * - Favorite / compare secondary actions
 * - Official-site SVG turns white on hover/focus
 * Design Lock SVG source file itself is unchanged.
 */

/* Brand / category links */
.hh-pd-taxonomy-links a:hover,
.hh-pd-taxonomy-links a:focus-visible{
  background:#14B8A6!important;
  border-color:#14B8A6!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 4px 10px rgba(20,184,166,.16)!important;
}

/* Official / favorite / compare buttons */
.hh-pd-primary:hover,
.hh-pd-primary:focus-visible,
.hh-pd-secondary:hover,
.hh-pd-secondary:focus-visible,
.hh-pd-secondary.is-active{
  background:#14B8A6!important;
  border-color:#14B8A6!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 5px 12px rgba(20,184,166,.18)!important;
}

/* Keep text/icons inside the buttons white on interactive state */
.hh-pd-primary:hover *,
.hh-pd-primary:focus-visible *,
.hh-pd-secondary:hover *,
.hh-pd-secondary:focus-visible *,
.hh-pd-secondary.is-active *{
  color:#fff!important;
}

/* Adopted official-site SVG is loaded via <img>.
 * Keep source SVG unchanged and render it white only on hover/focus.
 */
.hh-pd-primary--official:hover .hh-pd-primary__icon,
.hh-pd-primary--official:focus-visible .hh-pd-primary__icon{
  filter:brightness(0) invert(1)!important;
}

/* Smooth visual response without affecting reduced-motion users */
.hh-pd-primary__icon{
  transition:filter .18s ease!important;
}

@media(prefers-reduced-motion:reduce){
  .hh-pd-primary__icon{
    transition:none!important;
  }
}

/* Hair Hub 2026-08-30: Purchase CTA unified hover
 * Adopted interaction:
 * normal = white background + turquoise border/text/icon
 * hover/focus = turquoise background + white text/icon
 * SVG source files remain unchanged.
 */
.hh-pd-purchase__link:hover,
.hh-pd-purchase__link:focus-visible{
  background:#14B8A6!important;
  border-color:#14B8A6!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 5px 12px rgba(20,184,166,.18)!important;
}

.hh-pd-purchase__link:hover .hh-pd-purchase__copy strong,
.hh-pd-purchase__link:hover .hh-pd-purchase__copy small,
.hh-pd-purchase__link:focus-visible .hh-pd-purchase__copy strong,
.hh-pd-purchase__link:focus-visible .hh-pd-purchase__copy small{
  color:#fff!important;
}

.hh-pd-purchase__link:hover .hh-pd-purchase__brand-icon,
.hh-pd-purchase__link:focus-visible .hh-pd-purchase__brand-icon{
  filter:brightness(0) invert(1)!important;
}

.hh-pd-purchase__brand-icon{
  transition:filter .18s ease!important;
}

@media(prefers-reduced-motion:reduce){
  .hh-pd-purchase__brand-icon{
    transition:none!important;
  }
}

@media (max-width: 560px) {
  .hh-product-detail .hh-pd-title {
    line-break: strict;
    overflow-wrap: normal;
  }
}
.hh-pd-reference-price{margin:0 0 20px;color:var(--hh-teal-dark);font-weight:700;line-height:1.5}