/* CP Product Compare – neutral styles, typography and base palette inherited from active theme. */
.cpcompare{--cpc-ink:#171717;--cpc-stroke:rgba(24,24,24,.14);--cpc-surface:#f7f7f7;width:100%;font-family:inherit;color:inherit}
.cpcompare,.cpcompare *{box-sizing:border-box}
.cpcompare__heading{text-align:center;margin:0 0 30px}
.cpcompare__heading h2{font:inherit;font-size:clamp(24px,2.5vw,35px);line-height:1.18;font-weight:700;margin:0 0 8px;color:inherit}
.cpcompare__heading p{font:inherit;font-size:15px;color:inherit;opacity:.68;margin:0}
.cpcompare__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:22px}
.cpcompare__card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--cpc-stroke);border-radius:15px;background:#fff;overflow:hidden;transition:border-color .2s ease,transform .2s ease}
.cpcompare__card--featured{border:2px solid var(--cpc-ink);box-shadow:0 12px 36px rgba(0,0,0,.055)}
.cpcompare__photo{position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--cpc-surface)}
.cpcompare__picture{display:block;width:100%;height:100%;position:relative;overflow:hidden}
.cpcompare__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .3s ease,transform .6s ease;display:block}
.cpcompare__image--hover{opacity:0}
@media(hover:hover) and (pointer:fine){.cpcompare__picture:hover .cpcompare__image--hover{opacity:1}.cpcompare__picture:hover .cpcompare__image{transform:scale(1.025)}}
.cpcompare__label{position:absolute;z-index:2;top:15px;left:15px;border-radius:999px;background:var(--cpc-ink);color:#fff;font:inherit;font-size:10px;font-weight:700;letter-spacing:.055em;padding:7px 11px;line-height:1.1}
.cpcompare__image-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#777;font-size:13px}
.cpcompare__content{padding:22px 23px 23px;display:flex;flex-direction:column;flex:1;min-width:0}
.cpcompare__weight{font-size:12px;letter-spacing:.06em;font-weight:700;opacity:.65;margin-bottom:8px}
.cpcompare__content h3{font:inherit;font-size:clamp(18px,1.5vw,22px);font-weight:700;line-height:1.2;margin:0 0 10px;color:inherit}
.cpcompare__content h3 a{color:inherit;text-decoration:none}
.cpcompare__claim{font:inherit;font-size:14px;font-weight:600;line-height:1.5;margin:0 0 9px;color:inherit}
.cpcompare__description{font:inherit;font-size:13px;line-height:1.5;opacity:.66;margin:0 0 14px}
.cpcompare__bottom{margin-top:auto;border-top:1px solid var(--cpc-stroke);padding-top:18px}
.cpcompare__price{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin-bottom:17px;min-width:0}
.cpcompare__price-prefix{font-size:12px;opacity:.6}
.cpcompare__price strong{font-size:18px;line-height:1.3;font-weight:700;text-align:right}
.cpcompare__price del{opacity:.55;font-size:13px}
.cpcompare__price ins{text-decoration:none}
.cpcompare__button{display:flex;justify-content:center;align-items:center;gap:12px;width:100%;min-height:47px;border-radius:7px;background:var(--cpc-ink);color:#fff!important;text-decoration:none!important;font:inherit;font-weight:700;font-size:12px;letter-spacing:.025em;transition:opacity .2s ease}
.cpcompare__button:hover{opacity:.82;color:#fff}
.cpcompare__button span{font-size:17px;line-height:1}
.cpcompare__card:not(.cpcompare__card--featured) .cpcompare__button{background:#fff;color:var(--cpc-ink)!important;border:1px solid var(--cpc-ink)}
.cpcompare__card:not(.cpcompare__card--featured) .cpcompare__button:hover{background:var(--cpc-ink);color:#fff!important}
@media(max-width:900px){.cpcompare__grid{gap:12px}.cpcompare__content{padding:16px}.cpcompare__label{top:10px;left:10px}}
@media(max-width:680px){.cpcompare__heading{margin-bottom:18px}.cpcompare__grid{grid-template-columns:1fr;gap:16px}.cpcompare__card{max-width:520px;width:100%;margin:auto}.cpcompare__photo{aspect-ratio:5/4}.cpcompare__content{padding:18px 20px 20px}.cpcompare__price strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){.cpcompare__card,.cpcompare__image,.cpcompare__button{transition:none!important}}

/* RC2: consistent commercial information, using inherited site typography. */
.cpcompare__audience{font:inherit;font-size:13px;font-weight:600;line-height:1.4;margin:0 0 14px;color:inherit}
.cpcompare__price-range{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;font:inherit;font-size:14px;line-height:1.4}
.cpcompare__price-range strong{font-weight:750;font-size:clamp(16px,1.4vw,19px);white-space:nowrap;color:inherit}
.cpcompare__price-range .woocommerce-Price-amount{white-space:nowrap}
.cpcompare__price-note{font-size:12px;opacity:.65;margin-top:5px;margin-bottom:13px}
.cpcompare__price-fallback{font-size:17px;font-weight:700;margin-bottom:14px}
.cpcompare__admin-warning{font-size:11px;color:#9d4f16;margin-bottom:12px}
.cpcompare__colors{margin:0 0 15px;min-height:24px}
.cpcompare__swatches{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cpcompare__swatch{width:17px;height:17px;flex:none;background:var(--swatch);border:1px solid rgba(20,20,20,.22);border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.cpcompare__color-count{font-size:12px;opacity:.7;margin-left:4px}
.cpcompare__card--featured{box-shadow:none}
.cpcompare__image{transition:opacity .23s ease}
@media(hover:hover) and (pointer:fine){.cpcompare__picture:hover .cpcompare__image{transform:none}}
@media(max-width:680px){.cpcompare__price-range{justify-content:flex-start;gap:5px 13px}}

/* RC4 – commercial hierarchy inspired by the original store grid.
 * Scoped to CP Product Compare; inherited typography retained. */
.cpcompare{
  --cpc-accent:#4c80f5;
  --cpc-accent-dark:#3268d7;
  --cpc-featured-tint:#f5f7ff;
  --cpc-message:#e02224;
}
/* A clearer commercial rhythm without introducing extra visual clutter. */
.cpcompare .cpcompare__claim{color:var(--cpc-message);font-weight:700}
.cpcompare .cpcompare__audience{color:var(--cpc-accent-dark);font-weight:600}
.cpcompare .cpcompare__weight{color:#5b6679;opacity:1}
.cpcompare .cpcompare__price-range strong{font-weight:750}
.cpcompare .cpcompare__swatch{width:19px;height:19px}
.cpcompare .cpcompare__label{background:#181818;color:#fff}
/* The recommended centre card is subtly larger and softly blue-tinted. */
@media(min-width:901px){
  .cpcompare .cpcompare__card--featured{transform:translateY(-5px) scale(1.012);z-index:1}
}
.cpcompare .cpcompare__card--featured{
  background:var(--cpc-featured-tint);
  border:2px solid #9bb6ff;
  box-shadow:0 8px 24px rgba(68,106,177,.07);
}
.cpcompare .cpcompare__card--featured .cpcompare__content{background:var(--cpc-featured-tint)}
.cpcompare .cpcompare__card--featured .cpcompare__label{background:var(--cpc-accent-dark)}
/* Blue calls to action echo the established editorial grid, with a clear featured card. */
.cpcompare .cpcompare__card--featured .cpcompare__button{
  background:var(--cpc-accent);border:1px solid var(--cpc-accent);color:#fff!important;
}
.cpcompare .cpcompare__card--featured .cpcompare__button:hover{background:var(--cpc-accent-dark);border-color:var(--cpc-accent-dark);opacity:1}
.cpcompare .cpcompare__card:not(.cpcompare__card--featured) .cpcompare__button{
  background:#fff;color:#1d2940!important;border:1px solid #b5c1d6;
}
.cpcompare .cpcompare__card:not(.cpcompare__card--featured) .cpcompare__button:hover{
  background:var(--cpc-accent);border-color:var(--cpc-accent);color:#fff!important;opacity:1
}
/* Mobile stays one column: no zoom/offset, with the featured product still obvious. */
@media(max-width:900px){
  .cpcompare .cpcompare__card--featured{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .cpcompare .cpcompare__card--featured{transition:none}
}

/* RC6: separate independent grids inside one shortcode without changing the cards. */
.cpcompare-multi{display:flex;flex-direction:column;gap:clamp(48px,7vw,100px);width:100%;min-width:0}
.cpcompare-multi > .cpcompare{min-width:0}
@media(max-width:680px){.cpcompare-multi{gap:48px}}

/* RC7: two-category selector, identical product card CSS in both modes. */
.cpcompare-switch{width:100%;min-width:0}
.cpcompare-switch__tabs{display:flex;justify-content:center;gap:0;margin:0 auto 24px;max-width:460px;border-bottom:1px solid #d9dde4}
.cpcompare-switch__tab{appearance:none;-webkit-appearance:none;flex:1;min-height:50px;padding:12px 16px;border:0;border-bottom:3px solid transparent;border-radius:0;background:transparent!important;color:#686d77!important;box-shadow:none!important;font:inherit;font-size:14px;font-weight:700;letter-spacing:.035em;cursor:pointer;transition:color .2s,border-color .2s}
.cpcompare-switch__tab:hover{color:#222!important}
.cpcompare-switch__tab.is-active{color:#202329!important;border-bottom-color:#3268d7}
.cpcompare-switch__tab:focus-visible{outline:2px solid #3268d7;outline-offset:3px}
.cpcompare-switch__panel[hidden]{display:none!important}
@media(max-width:680px){.cpcompare-switch__tabs{margin-bottom:18px}.cpcompare-switch__tab{min-height:46px;font-size:12px;padding:10px 8px}}
@media(prefers-reduced-motion:reduce){.cpcompare-switch__tab{transition:none}}