/** Shopify CDN: Minification failed
Line 400:0 All "@import" rules must come first
**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */
/* CSS from section stylesheet tags */
/* START_SECTION:ck-pdp-fastfacts-v2 (INDEX:38) */
.ck-ff2 {
--ck-cream: #faf7f2;
--ck-charcoal: #1a1814;
--ck-mid: #6b6660;
--ck-rule: #d8d2c7;
background: var(--ck-ff2-bg, var(--ck-cream));
padding: var(--ck-ff2-pt, 56px) 0 var(--ck-ff2-pb, 56px);
margin-top: var(--ck-ff2-mt, 0);
margin-bottom: var(--ck-ff2-mb, 0);
font-family: var(--font-body-family, 'Inter', system-ui, sans-serif);
color: var(--ck-charcoal);
}
.ck-ff2__inner {
max-width: var(--theme-max-width, 1640px);
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 72px);
box-sizing: border-box;
}
.ck-ff2--full_bleed {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
border-top: 0px #CCC solid;
border-bottom: 2px dashed #CCC;
}
.ck-ff2__title {
font-family: var(--font-heading-family, 'Playfair Display', Georgia, serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -0.005em;
text-align: center;
margin: 0 0 36px;
color: var(--ck-charcoal);
}
.ck-ff2__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(var(--ck-ff2-cols, 5), 1fr);
}
.ck-ff2__cell {
padding: 40px 50px 48px;
text-align: left;
min-width: 0;
}
.ck-ff2__cell:first-child {
border-left: none;
padding-left: 0;
}
.ck-ff2__cell:last-child { padding-right: 0; }
.ck-ff2__icon {
display: block;
width: 58px;
height: 58px;
margin-bottom: 26px;
color: var(--ck-charcoal);
opacity: 0.9;
}
.ck-ff2__icon svg,
.ck-ff2__icon img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
stroke-width: 1.25;
}
.ck-ff2__eyebrow {
font-size: 15px;
letter-spacing: -0.025em;
text-transform: uppercase;
color: #767676;
margin-bottom: 14px;
}
.ck-ff2__heading {
font-family: var(--font-heading-family, 'Playfair Display', Georgia, serif);
font-weight: 500;
font-size: clamp(20px, 2vw, 20px);
line-height: 1.12;
letter-spacing: 0;
color: var(--ck-charcoal);
margin-bottom: 12px;
}
.ck-ff2__heading em { font-style: italic; }
.ck-ff2__heading p { margin: 0; }
.ck-ff2__desc {
font-size: 14px;
line-height: 1.45;
color: var(--ck-mid);
max-width: 24ch;
font-weight: 200;
}
@media (max-width: 1023px) {
.ck-ff2__grid {
grid-template-columns: repeat(3, 1fr);
border-top: none;
}
.ck-ff2__cell {
padding: 30px 22px 26px;
}
.ck-ff2__cell:first-child { padding-left: 22px; }
.ck-ff2__cell:last-child { padding-right: 22px; }
}
@media (max-width: 600px) {
.ck-ff2__grid { grid-template-columns: repeat(2, 1fr); }
.ck-ff2__cell { padding: 26px 16px 24px; }
.ck-ff2__cell:first-child { padding-left: 16px; }
.ck-ff2__icon { width: 46px; height: 46px; margin-bottom: 18px; }
.ck-ff2__heading { font-size: 20px; }
}
/* END_SECTION:ck-pdp-fastfacts-v2 */
/* START_SECTION:ck-pdp-fulfilment-band (INDEX:40) */
.ck-pdp-fulfilment {
--ck-cream: #faf7f2;
--ck-charcoal: #1a1a1a;
--ck-mid: #6b6660;
--ck-rule: #d8d2c7;
--ck-chamfer: 14px;
--ck-gutter: clamp(20px, 6vw, 96px);
position: relative;
padding: var(--ck-pad-t, 96px) 0 var(--ck-pad-b, 80px);
background: #F8F8F8 !important;
font-family: var(--font-body-family, 'Inter', system-ui, sans-serif);
color: var(--ck-charcoal);
}
.ck-pdp-fulfilment__inner {
position: relative;
max-width: 1640px;
margin: 0 auto;
padding: 0 var(--ck-gutter);
}
.ck-pdp-fulfilment__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 48px;
}
.ck-pdp-fulfilment__eyebrow {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ck-mid);
margin-bottom: 18px;
}
.ck-pdp-fulfilment__headline {
font-family: var(--font-heading-family, 'Playfair', Georgia, serif);
font-weight: 400;
font-size: clamp(30px, 4.4vw, 60px);
line-height: 1.04;
max-width: 28ch;
letter-spacing: -0.005em;
margin: 0;
color: var(--ck-charcoal);
}
.ck-pdp-fulfilment__headline em { font-style: italic; }
.ck-pdp-fulfilment__lede {
font-family: var(--font-heading-family, 'Playfair', Georgia, serif);
font-style: italic;
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.55;
color: var(--ck-mid);
max-width: 36ch;
margin: 0 0 6px;
text-align: right;
}
.ck-pdp-fulfilment__lede p { margin: 0; }
.ck-pdp-fulfilment__stage {
position: relative;
width: 100%;
aspect-ratio: var(--ck-stage-aspect, 5 / 2);
max-height: var(--ck-stage-max-h, 56vh);
overflow: hidden;
background: #1f1c18;
clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--ck-chamfer)), calc(100% - var(--ck-chamfer)) 100%, 0 100%);
}
.ck-pdp-fulfilment--full_bleed .ck-pdp-fulfilment__stage {
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
}
.ck-pdp-fulfilment__slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 600ms ease-in-out;
pointer-events: none;
}
.ck-pdp-fulfilment__slide.is-active {
opacity: 1;
pointer-events: auto;
}
.ck-pdp-fulfilment__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ck-pdp-fulfilment__slide--type {
background: linear-gradient(135deg, #2a241f 0%, #1a1612 60%, #0e0c0a 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--ck-cream);
padding: 80px var(--ck-gutter);
text-align: center;
}
.ck-pdp-fulfilment__slide--type-mark {
font-family: var(--font-heading-family, 'Playfair', Georgia, serif);
font-style: italic;
font-size: clamp(40px, 7vw, 96px);
line-height: 1;
font-weight: 400;
margin-bottom: 24px;
letter-spacing: -0.02em;
opacity: 0.94;
}
.ck-pdp-fulfilment__slide--type-mark p { margin: 0; }
.ck-pdp-fulfilment__slide--type-sub {
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.6);
max-width: 38ch;
line-height: 1.6;
}
.ck-pdp-fulfilment__overlay {
position: absolute;
left: 0;
bottom: 0;
width: min(440px, 78%);
padding: 28px 34px 30px;
background: var(--ck-cream);
z-index: 3;
clip-path: polygon(0 0, calc(100% - var(--ck-chamfer)) 0, 100% var(--ck-chamfer), 100% 100%, 0 100%);
}
.ck-pdp-fulfilment--full_bleed .ck-pdp-fulfilment__overlay {
left: max(var(--ck-gutter), calc((100vw - 1640px) / 2));
}
.ck-pdp-fulfilment__overlay-eyebrow {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ck-mid);
margin-bottom: 10px;
}
.ck-pdp-fulfilment__overlay-line {
font-family: var(--font-heading-family, 'Playfair', Georgia, serif);
font-size: 20px;
line-height: 1.3;
font-weight: 400;
}
.ck-pdp-fulfilment__overlay-line em { font-style: italic; }
.ck-pdp-fulfilment__overlay-line p { margin: 0; }
.ck-pdp-fulfilment__controls {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 64px;
border-top: 1px solid var(--ck-rule);
}
.ck-pdp-fulfilment__control {
position: relative;
padding: 32px 50px 4px 50px;
border-right: 1px solid var(--ck-rule);
border-top: none;
border-bottom: none;
border-left: none;
background: transparent;
text-align: left;
font: inherit;
color: var(--ck-charcoal);
cursor: pointer;
opacity: 0.55;
transition: opacity 280ms ease;
}
.ck-pdp-fulfilment__control:first-child { padding-left: 0; }
.ck-pdp-fulfilment__control:last-child {
border-right: none;
padding-right: 0;
}
.ck-pdp-fulfilment__control.is-active { opacity: 1; }
.ck-pdp-fulfilment__control:hover { opacity: 0.85; }
.ck-pdp-fulfilment__control.is-active:hover { opacity: 1; }
.ck-pdp-fulfilment__control-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ck-mid);
margin-bottom: 14px;
}
.ck-pdp-fulfilment__control-value {
font-family: var(--font-heading-family, 'Playfair', Georgia, serif);
font-size: 26px;
line-height: 1.15;
font-weight: 400;
margin-bottom: 8px;
color: var(--ck-charcoal);
}
.ck-pdp-fulfilment__control-value em { font-style: italic; }
.ck-pdp-fulfilment__control-value p { margin: 0; }
.ck-pdp-fulfilment__control-sub {
font-size: 12.5px;
color: var(--ck-mid);
line-height: 1.45;
max-width: 28ch;
margin-bottom: 22px;
}
.ck-pdp-fulfilment__control-timer {
position: relative;
height: 2px;
background: var(--ck-rule);
width: 100%;
margin-top: 4px;
overflow: hidden;
}
.ck-pdp-fulfilment__control-timer::after {
content: "";
position: absolute;
inset: 0 100% 0 0;
background: var(--ck-charcoal);
}
.ck-pdp-fulfilment__control.is-active .ck-pdp-fulfilment__control-timer::after {
animation: ck-fulfilment-fill var(--ck-slide-duration, 7s) linear forwards;
}
.ck-pdp-fulfilment.is-paused .ck-pdp-fulfilment__control.is-active .ck-pdp-fulfilment__control-timer::after {
animation-play-state: paused;
}
@keyframes ck-fulfilment-fill {
from { inset: 0 100% 0 0; }
to { inset: 0 0 0 0; }
}
@media (max-width: 768px) {
.ck-pdp-fulfilment { padding: 64px 0 56px; }
.ck-pdp-fulfilment__head {
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 32px;
}
.ck-pdp-fulfilment__lede { text-align: left; }
.ck-pdp-fulfilment__stage { aspect-ratio: 4 / 5; }
.ck-pdp-fulfilment__overlay {
width: 88%;
padding: 20px 22px 22px;
}
.ck-pdp-fulfilment__overlay-line { font-size: 16px; }
.ck-pdp-fulfilment__controls {
grid-template-columns: 1fr 1fr;
margin-top: 36px;
}
.ck-pdp-fulfilment__control {
padding: 22px 20px 18px 20px;
border-right: 1px solid var(--ck-rule);
border-bottom: 1px solid var(--ck-rule);
}
.ck-pdp-fulfilment__control:nth-child(2n+1) { padding-left: 0; }
.ck-pdp-fulfilment__control:nth-child(2n) { border-right: none; padding-right: 0; }
.ck-pdp-fulfilment__control:nth-last-child(-n+2) { border-bottom: none; }
.ck-pdp-fulfilment__control-value { font-size: 20px; }
.ck-pdp-fulfilment__slide--type-mark { font-size: clamp(36px, 11vw, 56px); }
}
@media (prefers-reduced-motion: reduce) {
.ck-pdp-fulfilment__slide { transition: none; }
.ck-pdp-fulfilment__control.is-active .ck-pdp-fulfilment__control-timer::after {
animation: none;
inset: 0 0 0 0;
}
}
/* Butt this band against the footer: the footer group carries margin-top:140px that
leaves a white gap below the band. Remove it only when this band is on the page. */
.main-content:has(.ck-pdp-fulfilment) + .shopify-section-group-footer-group {
margin-top: 0;
}
/* END_SECTION:ck-pdp-fulfilment-band */
/* START_SECTION:ck-pdp-reviews (INDEX:41) */
@import url('https://fonts.googleapis.com/css2?family=Playfair:wght@400;500;600&display=swap');
.ck-pdp-reviews {
--ck-review-bg: #f0f0f0;
--ck-review-accent: #111;
--ck-review-muted: rgba(0, 0, 0, 0.55);
--ck-review-border: rgba(0, 0, 0, 0.08);
--ck-review-card-bg: #ffffff;
--ck-review-tint: rgba(230, 1, 135, 0.04);
margin: 0;
font-family: inherit;
color: var(--ck-review-accent);
}
.ck-pdp-reviews__title-lockup {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 0 20px;
margin: 0 0 80px;
}
@media (min-width: 768px) {
.ck-pdp-reviews__title-lockup { gap: 22px; margin-bottom: 125px; }
}
.ck-pdp-reviews__heading {
text-align: center;
font-family: var(--font-heading-family, Georgia, serif);
font-size: clamp(24px, 3vw, 34px);
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ck-review-heading, #111);
margin: 0;
text-transform: capitalize;
}
@media (min-width: 768px) {
.ck-pdp-reviews__heading { font-size: clamp(28px, 3vw, 38px); }
}
.ck-pdp-reviews__heading-text {
position: relative;
display: inline-block;
}
/* ─── Heading IN dark cover band (28 Apr night, white-on-black reverse) ─── */
.ck-pdp-reviews__title-lockup--in-cover {
margin: 0 auto 48px;
padding-top: 16px;
position: relative;
z-index: 2;
}
.ck-pdp-reviews__title-lockup--in-cover .ck-pdp-reviews__heading {
color: #fafaf7;
}
@media (min-width: 768px) {
.ck-pdp-reviews__title-lockup--in-cover {
margin-bottom: 56px;
padding-top: 24px;
}
}
/* ─── Cover-Story polaroid-stacked layout (3.0 redesign 28 Apr v3) ─── */
/* Net-a-Porter "Cover Story" register: dark band, two card pairs side-by-side.
Each pair = tall image-frame + shorter white content-card overlapping the image's
right edge. Subtle scroll parallax via animation-timeline:view() — image and
content-card move at different rates as the band scrolls through the viewport. */
.ck-pdp-reviews__cover {
position: relative;
background: #1a1a1a;
color: #fafaf7;
margin: 0 calc(50% - 50vw) 56px;
padding: 88px 0 96px;
isolation: isolate;
view-timeline-name: --ck-cover-band;
view-timeline-axis: block;
}
.ck-pdp-reviews__cover-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1480px;
margin: 0 auto;
padding: 0 40px;
}
.ck-pdp-reviews__cover-card {
position: relative;
display: grid;
grid-template-columns: minmax(180px, 0.85fr) 1fr;
align-items: center;
min-height: 460px;
}
.ck-pdp-reviews__cover-image-frame {
position: relative;
z-index: 2;
grid-column: 1;
grid-row: 1;
margin: 0;
height: 460px;
overflow: hidden;
background: #efece8;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ck-pdp-reviews__cover-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ck-pdp-reviews__cover-card:hover .ck-pdp-reviews__cover-img {
transform: scale(1.04);
}
.ck-pdp-reviews__cover-card--cutout .ck-pdp-reviews__cover-image-frame {
background: transparent;
box-shadow: none;
overflow: visible;
height: 460px;
align-self: center;
display: flex;
align-items: flex-end;
justify-content: flex-end;
z-index: 6;
}
.ck-pdp-reviews__cover-card--quote .ck-pdp-reviews__cover-image-frame {
height: 400px;
align-self: center;
}
/* --- Single-image fix (23 Jun): no genuine 2nd image -> text-forward quote,
no duplicated product shot. Quote sits on the dark band as a pull-quote. --- */
.ck-pdp-reviews__cover-inner--textonly {
grid-template-columns: minmax(560px, 620px) 1fr;
}
.ck-pdp-reviews__cover-card--quote.ck-pdp-reviews__cover-card--quote-textonly {
grid-template-columns: 1fr;
}
.ck-pdp-reviews__cover-card--quote-textonly .ck-pdp-reviews__cover-image-frame--quote {
display: none;
}
.ck-pdp-reviews__cover-card--quote-textonly .ck-pdp-reviews__cover-content-card--quote {
grid-column: 1;
grid-row: 1;
background: transparent;
box-shadow: none;
color: #fafaf7;
margin-left: 0;
min-height: 0;
max-width: 1040px;
justify-content: center;
padding: 0 0 0 80px;
}
.ck-pdp-reviews__cover-card--quote-textonly .ck-pdp-reviews__cover-eyebrow {
color: rgba(250, 250, 247, 0.55);
}
.ck-pdp-reviews__cover-card--quote-textonly .ck-pdp-reviews__cover-quote {
color: #fafaf7;
font-size: clamp(22px, 2.2vw, 22px); line-height: 2; font-weight: 100 !important;
display: block;
-webkit-line-clamp: none;
overflow: visible;
}
.ck-pdp-reviews__cover-card--quote-textonly .ck-pdp-reviews__cover-attribution {
color: rgba(250, 250, 247, 0.6);
}
/* text-only seal: with no 2nd card there is no centre seam, so stamp it on the product-card corner */
@media (min-width: 901px) {
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__stylist-badge--cover {
left: 44% !important;
top: 27% !important;
}
}
.ck-pdp-reviews__cover-card--quote {
grid-template-columns: 1fr 1fr;
align-items: center;
min-height: 420px;
}
.ck-pdp-reviews__cover-img--cutout {
width: auto;
height: auto;
max-width: 90%;
max-height: 100%;
object-fit: contain;
transform: translateX(28%) translateY(6%) rotate(-16deg);
transform-origin: 50% 100%;
image-rendering: -webkit-optimize-contrast;
}
.ck-pdp-reviews__cover-card--cutout .ck-pdp-reviews__cover-content-card {
margin-left: -100px;
padding-left: 120px;
z-index: 3;
}
.ck-pdp-reviews__cover-card--cutout:hover .ck-pdp-reviews__cover-img--cutout {
transform: translateX(28%) translateY(6%) rotate(-16deg) scale(1.03);
}
/* === Single-image layout (24 Jun): white product card LEFT + wide take RIGHT.
With a cutout, the product is cut out + angled over the card BOTTOM-LEFT corner, bursting over the top. === */
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-card--product {
grid-template-columns: 1fr; position: relative; align-self: center; align-items: center;
}
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-content-card--product {
position: relative; z-index: 1; grid-column: 1; grid-row: 1;
background: #fafaf7; color: #1a1a1a; box-shadow: 0 16px 40px rgba(0,0,0,0.34);
box-sizing: border-box; margin-left: 0; width: 540px; max-width: 100%; min-height: 300px;
padding: 32px 30px; justify-content: center; align-items: stretch; text-align: left;
}
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-content-card--product .ck-pdp-reviews__cover-eyebrow { color: rgba(26,26,26,0.5); }
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-content-card--product .ck-pdp-reviews__cover-title { color: #1a1a1a; }
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-content-card--product .ck-pdp-reviews__cover-price { color: rgba(26,26,26,0.85); }
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-cta { margin-top: 18px; }
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-cta .button,
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-cta .quick-add-to-cart {
width: 100%; background: #1a1a1a; color: #fafaf7; border: 1px solid #1a1a1a;
}
/* not yet cut out -> white card only, no product image */
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-card--product:not(.ck-pdp-reviews__cover-card--cutout) .ck-pdp-reviews__cover-image-frame { display: none; }
/* cutout present -> product cut out, angled, over the card bottom-left corner */
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-card--cutout .ck-pdp-reviews__cover-content-card--product {
margin-left: 100px; padding-left: 180px; padding-right: 130px;
}
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-card--cutout .ck-pdp-reviews__cover-image-frame {
position: absolute; left: 0; bottom: -6px; width: auto; height: auto;
background: transparent; box-shadow: none; overflow: visible; display: block; z-index: 3;
}
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-img--cutout {
width: auto; height: auto; max-width: 300px; max-height: 440px;
transform: rotate(-13deg) !important; transform-origin: bottom left;
filter: drop-shadow(0 30px 42px rgba(0,0,0,0.6));
}
.ck-pdp-reviews__cover-content-card {
position: relative;
z-index: 3;
grid-column: 2;
grid-row: 1;
align-self: center;
background: #fafaf7;
color: #1a1a1a;
padding: 36px 30px 32px;
margin-left: -56px;
min-height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
}
.ck-pdp-reviews__cover-eyebrow {
margin: 0 0 12px;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.5);
}
.ck-pdp-reviews__cover-title {
margin: 0 0 8px;
font-family: var(--font-heading-family, Georgia, serif);
font-size: clamp(20px, 1.7vw, 24px);
font-weight: 400;
line-height: 1.18;
letter-spacing: -0.01em;
color: #1a1a1a;
}
.ck-pdp-reviews__cover-price {
margin: 0 0 14px;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 15px;
font-weight: 500;
color: rgba(26, 26, 26, 0.85);
}
.ck-pdp-reviews__cover-rating {
display: flex;
align-items: center;
gap: 10px;
}
.ck-pdp-reviews__cover-rating-text {
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 12px;
color: rgba(26, 26, 26, 0.7);
}
.ck-pdp-reviews__cover-cta {
margin-top: 20px;
}
.ck-pdp-reviews__cover-cta .quick-add-to-cart,
.ck-pdp-reviews__cover-cta .button {
width: 100%;
}
.ck-pdp-reviews__cover-cta .button {
background: #1a1a1a;
color: #fafaf7;
border: 1px solid #1a1a1a;
border-radius: 0;
padding: 14px 22px;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.ck-pdp-reviews__cover-cta .button:hover {
background: var(--ck-sale-color, #DE93AC);
border-color: var(--ck-sale-color, #DE93AC);
color: #1a1a1a;
}
.ck-pdp-reviews__cover-quote {
margin: 0 0 14px;
font-family: var(--font-heading-family, Georgia, serif);
font-size: clamp(17px, 1.5vw, 21px);
font-style: italic;
font-weight: 400;
line-height: 1.3;
letter-spacing: -0.005em;
color: #1a1a1a;
quotes: '\201C' '\201D';
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ck-pdp-reviews__cover-quote::before { content: open-quote; margin-right: 0.05em; }
.ck-pdp-reviews__cover-quote::after { content: close-quote; margin-left: 0.05em; }
.ck-pdp-reviews__cover-attribution {
margin: 0;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(26, 26, 26, 0.55);
}
/* Stylist Approved badge — wax seal upgrade (29 Apr).
Was: flat blush sticker. Now: radial-gradient wax body, irregular impressed edge
via SVG turbulence/displacement, top-left highlight + bottom-right inset shadow,
debossed inner ring, letterpress text. Stays in blush family via highlight; body
deepens through rose-mauve to oxblood at the rim for depth. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-8deg);
width: 165px;
height: 165px;
z-index: 6;
margin: 0;
background: transparent;
color: #F4D6DC;
box-shadow: none;
pointer-events: auto;
filter: drop-shadow(0 16px 26px rgba(45, 12, 22, 0.50)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
}
/* Wax body — flat impression. Low-contrast tonal wash, no sphere highlight,
just a faint edge-darken for the slight rim where wax pools at the stamp boundary. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 0;
background: radial-gradient(ellipse at 38% 36%,
#8E3D52 0%,
#7A2E3F 55%,
#5C1F2C 100%);
box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.28);
filter: url(#ck-wax-seal-edge);
z-index: 0;
}
/* Inner debossed ring — overrides base ::before-as-ring. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover::after {
content: '';
position: absolute;
inset: 14px;
border-radius: 50%;
border: 1px solid rgba(255, 220, 230, 0.16);
box-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.45),
0 1px 0 rgba(255, 220, 230, 0.10);
pointer-events: none;
z-index: 2;
}
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover .ck-pdp-reviews__stylist-badge-inner {
position: relative;
z-index: 3;
}
/* Cover variant uses curved rotating ring text + centre tick — hide the inline. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover .ck-pdp-reviews__stylist-badge-inner {
display: none;
}
/* Curved ring text — full circumference, static (text length matches the ring). */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-textring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
/* White tick — static, centred. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-tick {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4;
pointer-events: none;
filter: drop-shadow(0 1px 0 rgba(20, 0, 8, 0.45));
}
@media (prefers-reduced-motion: reduce) {
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-textring { animation: none; }
}
/* Legacy line styles kept for postmark/non-cover variants only. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover .ck-pdp-reviews__stylist-badge-line {
font-size: 11px;
letter-spacing: 0.14em;
color: #F4D6DC;
text-shadow:
0 -1px 0 rgba(20, 0, 8, 0.70),
0 1px 0 rgba(255, 215, 225, 0.18),
0 0 6px rgba(0, 0, 0, 0.15);
}
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover .ck-pdp-reviews__stylist-badge-line--strong {
font-size: 13px;
margin-top: 3px;
font-weight: 700;
letter-spacing: 0.12em;
color: #F8E1E6;
text-shadow:
0 -1px 0 rgba(20, 0, 8, 0.85),
0 1px 0 rgba(255, 220, 230, 0.20),
0 0 8px rgba(0, 0, 0, 0.18);
}
/* Hover (post-entrance): pulse up + tilt further off-axis. */
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover {
transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1),
filter 280ms ease;
}
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover:hover {
transform: translate(-50%, -50%) rotate(-14deg) scale(1.06);
filter: drop-shadow(0 22px 34px rgba(45, 12, 22, 0.55)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}
/* Dripping wax — 3 drips ooze from under the seal's bottom edge. Each drip sits
at z:-1 within the badge stacking context, so its top is hidden under ::before
(the wax body) and only the portion below the circle's rim is visible. Same
radial gradient + same turbulence filter as the body for material continuity. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drips {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
}
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip {
position: absolute;
border-radius: 50%;
background: linear-gradient(180deg,
#7A2E3F 0%,
#6A2535 60%,
#4F1A28 100%);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
filter: url(#ck-wax-seal-edge);
transform-origin: top center;
transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Drip cluster sits at the seal's bottom-centre (35-65% range), where the
circle rim is at the box bottom, so visible portion reads as a drip tail
not a lateral leg. Bottom corners pinched via border-radius for taper. */
/* Drip 1 — left of centre, short, slight left tilt. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip--1 {
top: 86%;
left: 36%;
width: 22px;
height: 36px;
border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
transform: rotate(-4deg);
}
/* Drip 2 — centre, longest, plumb. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip--2 {
top: 90%;
left: 48%;
margin-left: -10px;
width: 20px;
height: 50px;
border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
transform: rotate(1deg);
}
/* Drip 3 — right of centre, mid length. */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip--3 {
top: 84%;
left: 56%;
width: 18px;
height: 38px;
border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
transform: rotate(5deg);
}
/* Hover: drips elongate slightly — suggestion of heat. */
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover:hover .ck-pdp-reviews__stylist-badge-drip--1 { transform: rotate(-5deg) scaleY(1.10); }
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover:hover .ck-pdp-reviews__stylist-badge-drip--2 { transform: rotate(1deg) scaleY(1.14); }
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover:hover .ck-pdp-reviews__stylist-badge-drip--3 { transform: rotate(4deg) scaleY(1.10); }
@media (max-width: 900px) {
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip--1 { width: 13px; height: 20px; top: 86%; left: 36%; }
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip--2 { width: 12px; height: 28px; top: 90%; margin-left: -6px; }
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip--3 { width: 11px; height: 22px; top: 84%; left: 56%; }
}
@media (prefers-reduced-motion: reduce) {
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge-drip { transition: none; }
}
/* ─── 3.0 Broadcast cover-story motion package (28 Apr night) ───
JS-driven scroll parallax (rAF) + IntersectionObserver entrance triggers.
Five elements at different wavelengths + per-text micro-parallax + per-element
entrance animations. Badge fires LAST when section reaches 70% visibility.
Chrome/Safari/Firefox compatible. Reduced-motion fallback drops all transforms. */
.ck-pdp-reviews__cover-image-frame,
.ck-pdp-reviews__cover-content-card {
will-change: transform;
}
.ck-pdp-reviews__cover-img[data-kb] {
transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
transform: scale(1.06);
transform-origin: center;
}
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-img[data-kb] {
transform: scale(1.0);
}
/* Hover layered on top of Ken Burns rest state. */
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-card:hover .ck-pdp-reviews__cover-img[data-kb] {
transform: scale(1.04);
}
/* Per-element entrance (broadcast graphic reveals, staggered by transition-delay).
Bigger swoop (60px) + longer duration for TV-cut feel. */
[data-reveal] {
opacity: 0;
transform: translateY(60px);
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ck-pdp-reviews__cover.is-revealed [data-reveal] {
opacity: 1;
transform: translateY(0);
}
.ck-pdp-reviews__cover.is-revealed [data-reveal="eyebrow"] { transition-delay: 80ms; }
.ck-pdp-reviews__cover.is-revealed [data-reveal="title"] { transition-delay: 180ms; }
.ck-pdp-reviews__cover.is-revealed [data-reveal="price"] { transition-delay: 320ms; }
.ck-pdp-reviews__cover.is-revealed [data-reveal="rating"] { transition-delay: 440ms; }
.ck-pdp-reviews__cover.is-revealed [data-reveal="quote"] { transition-delay: 260ms; }
.ck-pdp-reviews__cover.is-revealed [data-reveal="attribution"] { transition-delay: 480ms; }
/* Title broadcast reveal — slight letter-spacing tighten on land. */
.ck-pdp-reviews__cover-title[data-reveal] {
letter-spacing: 0.04em;
transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
letter-spacing 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-title[data-reveal] {
letter-spacing: -0.01em;
}
/* Price thump-in — scale overshoot. */
.ck-pdp-reviews__cover-price[data-reveal] {
transform-origin: left center;
transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-price[data-reveal] {
transform: translateY(0) scale(1);
}
.ck-pdp-reviews__cover .ck-pdp-reviews__cover-price[data-reveal] {
transform: translateY(60px) scale(0.9);
}
/* Stars fill animates from 0 to its computed pct on entrance. */
.ck-pdp-reviews__stars-fill[data-stars-fill] {
transition: width 1100ms cubic-bezier(0.22, 1, 0.36, 1) 600ms;
}
/* ─── Stylist badge: postmark thump entrance (default — repeat-visit register) ─── */
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover {
opacity: 0;
transform: translate(-50%, -50%) rotate(-22deg) scale(0.55);
transition: opacity 220ms ease-out,
transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover {
opacity: 1;
transform: translate(-50%, -50%) rotate(-8deg) scale(1);
}
/* ─── First-visit keepy-upy: drop from top, hit, bounce, settle.
Gated by sessionStorage in JS (set ck-bounce-eligible class only on first
section view per session). BBFC keepy-upy lineage. ─── */
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover.ck-bounce-eligible {
animation: ck-stylist-keepyupy 1500ms cubic-bezier(0.55, 0.05, 0.45, 1) both;
transition: none;
}
@keyframes ck-stylist-keepyupy {
0% { transform: translate(-50%, calc(-50% - 720px)) rotate(-30deg) scale(0.95); opacity: 0; }
8% { opacity: 1; }
/* drop and first impact (gravity feel) */
50% { transform: translate(-50%, -50%) rotate(-18deg) scale(1.10); animation-timing-function: cubic-bezier(0.34, 0.04, 0.64, 1); }
/* bounce up */
62% { transform: translate(-50%, calc(-50% - 36px)) rotate(2deg) scale(0.96); animation-timing-function: cubic-bezier(0.55, 0.05, 0.45, 1); }
/* land 2 */
74% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.05); animation-timing-function: cubic-bezier(0.34, 0.04, 0.64, 1); }
/* small bounce */
84% { transform: translate(-50%, calc(-50% - 12px)) rotate(-4deg) scale(1.0); animation-timing-function: cubic-bezier(0.55, 0.05, 0.45, 1); }
/* tiny settle wobble */
92% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.02); }
100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.0); }
}
/* ─── Cover mast: title-left + share-right top rail (29 Apr) ─── */
.ck-pdp-reviews__cover-mast {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
max-width: 1620px;
margin: 0 auto 48px;
padding: 24px 40px 0;
z-index: 5;
}
.ck-pdp-reviews__heading--cover {
margin: 0;
color: #fafaf7;
text-align: left;
font-style: normal;
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-weight: 400;
font-size: clamp(36px, 4.4vw, 56px);
line-height: 1;
letter-spacing: -0.005em;
}
.ck-pdp-reviews__cover-mast .ck-pdp-share { position: relative; top: auto; right: auto; }
.ck-pdp-reviews__cover-mast .ck-pdp-share__trigger {
background: transparent;
border-color: rgba(250, 250, 247, 0.45);
color: #fafaf7;
}
.ck-pdp-reviews__cover-mast .ck-pdp-share__trigger:hover {
background: #fafaf7;
color: #1a1a1a;
border-color: #fafaf7;
}
.ck-pdp-reviews__cover-mast .ck-pdp-share__trigger:hover svg path { stroke: #1a1a1a; }
@media (max-width: 768px) {
.ck-pdp-reviews__cover-mast {
margin-bottom: 32px;
padding: 16px 20px 0;
}
}
/* ─── Cover rail: editorial spine cluster + magazine date stamp.
Anchored to BOTTOM of cover band so its bottom breathing-room mirrors
the top breathing-room above the heading (88px cover-pad + 24px mast-pad). ─── */
.ck-pdp-reviews__cover-rating-rail {
position: absolute;
left: max(40px, calc(50% - 770px));
bottom: 112px;
z-index: 4;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 32px;
color: #fafaf7;
font-feature-settings: 'onum';
pointer-events: none;
}
/* Avant-garde stack: REVIEWS sits high, then a 50px hairline drops down from
beneath it, then 50px of breathing room, then the date. Spine, line, date
all share the same vertical axis (heading's left-edge X). */
.ck-pdp-reviews__cover-rating-rail__spine-cluster {
display: flex;
flex-direction: row;
align-items: center;
align-self: flex-start;
/* Centre the spine column on the same axis as the line + date (heading-left X). */
margin-left: 13px;
transform: translateX(-50%);
}
.ck-pdp-reviews__cover-rating-rail__spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 26px;
font-weight: 500;
letter-spacing: 0.42em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.78);
line-height: 1;
}
.ck-pdp-reviews__cover-rating-rail__date {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
align-self: flex-start;
/* Centre the date stamp on the spine's left-edge axis (which is the heading's left-edge axis). */
margin-left: 13px;
transform: translateX(-50%);
}
.ck-pdp-reviews__cover-rating-rail__line {
display: block;
width: 1px;
height: 50px;
background: rgba(250, 250, 247, 0.45);
transform-origin: center;
margin-bottom: 50px; /* 50px gap between line bottom and "29" top */
}
.ck-pdp-reviews__cover-rating-rail__date-day {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-size: 56px;
font-weight: 500;
line-height: 0.82;
letter-spacing: -0.02em;
color: rgba(250, 250, 247, 0.55);
}
.ck-pdp-reviews__cover-rating-rail__date-mon {
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(250, 250, 247, 0.55);
margin-top: 6px;
}
.ck-pdp-reviews__cover-rating-rail__date-yr {
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.32em;
color: rgba(250, 250, 247, 0.4);
margin-top: 2px;
}
@media (max-width: 1100px) {
.ck-pdp-reviews__cover-rating-rail { left: 28px; gap: 28px; }
.ck-pdp-reviews__cover-rating-rail__date-day { font-size: 44px; }
}
@media (max-width: 900px) {
.ck-pdp-reviews__cover-rating-rail { display: none; }
}
/* Article-level card animation removed — children (content cards, image frames,
cutout, seal) animate independently in the IO stagger block below for the
still-life "thrown up" feel. */
.ck-pdp-reviews__cover-card { opacity: 1; transform: none; }
/* ─── Choreography:
Heading "The Verdict" + spine "REVIEWS" → scroll-tied (slow scrub)
Everything else → time-based stagger, fires
once when section enters,
floats up gently from below
like it's been thrown in.
No fade. Short throw distances (≤180px) so motion feels gentle, not zoomy.
Section's overflow:hidden masks the offscreen positions. ─── */
.ck-pdp-reviews__cover { overflow: hidden; }
/* IO baseline — initial off-screen position for every animated piece. */
.ck-pdp-reviews__heading--cover { transform: translateY(180px); }
.ck-pdp-reviews__cover-rating-rail__spine { transform: translateY(180px) rotate(180deg); }
.ck-pdp-reviews__cover-mast .ck-pdp-share { transform: translateY(140px); }
.ck-pdp-reviews__cover-img--cutout { transform: translateX(28%) translateY(calc(6% + 180px)) rotate(-16deg); }
.ck-pdp-reviews__cover-content-card--product { transform: translateY(180px); }
.ck-pdp-reviews__cover-image-frame--quote { transform: translateY(180px); }
.ck-pdp-reviews__cover-content-card--quote { transform: translateY(180px); }
.ck-pdp-reviews__cover-rating-rail__line { transform: scaleY(0); transform-origin: bottom; }
.ck-pdp-reviews__cover-rating-rail__date-day { transform: translateY(140px); }
.ck-pdp-reviews__cover-rating-rail__date-mon { transform: translateY(120px); }
.ck-pdp-reviews__cover-rating-rail__date-yr { transform: translateY(100px); }
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover { transform: translate(-50%, calc(-50% + 200px)) rotate(-8deg); }
/* IO transitions — gentle overshoot ease, deep stagger so things appear one at a time.
Initial 750ms delay across the board so by the time you scroll into the section,
the cards aren't already risen — you actually see them lift. */
.ck-pdp-reviews__heading--cover { transition: transform 1200ms cubic-bezier(0.34, 1.4, 0.5, 1) 750ms; }
.ck-pdp-reviews__cover-rating-rail__spine { transition: transform 1300ms cubic-bezier(0.34, 1.4, 0.5, 1) 890ms; }
.ck-pdp-reviews__cover-mast .ck-pdp-share { transition: transform 1100ms cubic-bezier(0.34, 1.4, 0.5, 1) 1030ms; }
.ck-pdp-reviews__cover-img--cutout { transition: transform 1400ms cubic-bezier(0.34, 1.5, 0.5, 1) 1170ms; }
.ck-pdp-reviews__cover-content-card--product { transition: transform 1200ms cubic-bezier(0.34, 1.5, 0.5, 1) 1390ms; }
.ck-pdp-reviews__cover-image-frame--quote { transition: transform 1300ms cubic-bezier(0.34, 1.5, 0.5, 1) 1610ms; }
.ck-pdp-reviews__cover-content-card--quote { transition: transform 1200ms cubic-bezier(0.34, 1.5, 0.5, 1) 1830ms; }
.ck-pdp-reviews__cover-rating-rail__line { transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) 1990ms; }
.ck-pdp-reviews__cover-rating-rail__date-day { transition: transform 1100ms cubic-bezier(0.34, 1.4, 0.5, 1) 2090ms; }
.ck-pdp-reviews__cover-rating-rail__date-mon { transition: transform 1000ms cubic-bezier(0.34, 1.4, 0.5, 1) 2230ms; }
.ck-pdp-reviews__cover-rating-rail__date-yr { transition: transform 1000ms cubic-bezier(0.34, 1.4, 0.5, 1) 2350ms; }
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover { transition: transform 1300ms cubic-bezier(0.34, 1.5, 0.5, 1) 2530ms; }
/* IO settled state — every element returns to its rest position. */
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__heading--cover,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-mast .ck-pdp-share,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-content-card--product,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-image-frame--quote,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-content-card--quote,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-rating-rail__date-day,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-rating-rail__date-mon,
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-rating-rail__date-yr {
transform: translateY(0);
}
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-rating-rail__spine {
transform: translateY(0) rotate(180deg);
}
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-img--cutout {
transform: translateX(28%) translateY(6%) rotate(-16deg);
}
.ck-pdp-reviews__cover.is-revealed .ck-pdp-reviews__cover-rating-rail__line {
transform: scaleY(1);
}
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover {
transform: translate(-50%, -50%) rotate(-8deg);
}
/* ─── Scroll-tied: ONLY heading + spine. Slow scrub so they feel like they
move with you, not at you. Everything else uses the time-based IO
stagger above. Chromium 115+ / Edge 115+ / Firefox 110+ behind flag.
Safari & older browsers get the IO fallback (also gentle, just not
tied to scroll position). ─── */
@supports (animation-timeline: view()) {
@keyframes ck-scroll-cutoutfig { from { transform: translateY(-42px); } to { transform: translateY(58px); } }
@keyframes ck-scroll-quotecard { from { transform: translateY(54px); } to { transform: translateY(-48px); } }
.ck-pdp-reviews__cover-inner--textonly .ck-pdp-reviews__cover-card--product .ck-pdp-reviews__cover-image-frame {
animation: ck-scroll-cutoutfig linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
transition: none; will-change: transform;
}
.ck-pdp-reviews__cover-card--quote-textonly .ck-pdp-reviews__cover-content-card--quote {
animation: ck-scroll-quotecard linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
transition: none; will-change: transform;
}
@keyframes ck-scroll-heading {
0% { transform: translateY(200px); }
48% { transform: translateY(0); }
72% { transform: translateY(0); }
100% { transform: translateY(-150px); }
}
@keyframes ck-scroll-spine {
0% { transform: translateY(240px) rotate(180deg); }
48% { transform: translateY(0) rotate(180deg); }
72% { transform: translateY(0) rotate(180deg); }
100% { transform: translateY(-185px) rotate(180deg); }
}
.ck-pdp-reviews__heading--cover {
animation: ck-scroll-heading linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
transition: none;
will-change: transform;
}
.ck-pdp-reviews__cover-rating-rail__spine {
animation: ck-scroll-spine linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
transition: none;
will-change: transform;
}
}
/* Reduced-motion: drop all transforms, show static. */
@media (prefers-reduced-motion: reduce) {
.ck-pdp-reviews__cover-img[data-kb],
[data-reveal],
.ck-pdp-reviews__stars-fill[data-stars-fill],
.ck-pdp-reviews__cover-card,
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover {
transform: none !important;
opacity: 1 !important;
transition: none !important;
}
.ck-pdp-reviews__cover-rating-rail {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover {
transform: translate(-50%, -50%) rotate(-10deg) !important;
}
}
@media (max-width: 900px) {
.ck-pdp-reviews__cover { padding: 56px 0 64px; margin-bottom: 40px; }
.ck-pdp-reviews__cover-inner {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 24px;
}
.ck-pdp-reviews__cover-card--quote { order: 1; }
.ck-pdp-reviews__cover-card--product { order: 3; }
.ck-pdp-reviews__cover-card {
grid-template-columns: minmax(140px, 0.7fr) 1fr;
min-height: 360px;
}
.ck-pdp-reviews__cover-image-frame { height: 360px; }
.ck-pdp-reviews__cover-content-card {
padding: 24px 20px;
margin-left: -32px;
min-height: 220px;
}
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover {
position: relative;
order: 2;
top: auto;
left: auto;
width: 120px;
height: 120px;
margin: 0 auto;
transform: translateY(180px) rotate(-8deg);
}
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover {
transform: translateY(0) rotate(-8deg);
}
.ck-pdp-reviews__cover.is-fully-revealed .ck-pdp-reviews__stylist-badge--cover:hover {
transform: translateY(0) rotate(-14deg) scale(1.06);
}
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover .ck-pdp-reviews__stylist-badge-line { font-size: 10px; }
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover .ck-pdp-reviews__stylist-badge-line--strong { font-size: 11px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.ck-pdp-reviews__cover .ck-pdp-reviews__stylist-badge--cover {
transform: rotate(-10deg) !important;
}
}
.ck-pdp-reviews__heading-text .ck-pdp-reviews__stylist-badge--postmark {
position: absolute;
top: -34px;
right: -58px;
left: auto;
bottom: auto;
width: 72px;
height: 72px;
transform: rotate(-10deg);
margin: 0;
z-index: 2;
}
@media (max-width: 768px) {
.ck-pdp-reviews__heading-text .ck-pdp-reviews__stylist-badge--postmark {
width: 58px;
height: 58px;
top: -24px;
right: -42px;
}
.ck-pdp-reviews__heading-text .ck-pdp-reviews__stylist-badge--postmark .ck-pdp-reviews__stylist-badge-line { font-size: 8px; }
.ck-pdp-reviews__heading-text .ck-pdp-reviews__stylist-badge--postmark .ck-pdp-reviews__stylist-badge-line--strong { font-size: 9px; }
}
.ck-pdp-reviews__shell {
background: transparent;
padding: 0 0 96px;
}
@media (max-width: 768px) {
.ck-pdp-reviews__shell { padding: 0 0 64px; }
}
.ck-pdp-reviews--count-zero .ck-pdp-reviews__shell { padding: 0 0 32px; }
@media (max-width: 768px) {
.ck-pdp-reviews--count-zero .ck-pdp-reviews__shell { padding: 0 0 24px; }
}
.ck-pdp-reviews__zero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 16px 0;
}
.ck-pdp-reviews__zero-msg {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 18px;
color: rgba(0, 0, 0, 0.7);
margin: 0;
}
@media (max-width: 640px) {
.ck-pdp-reviews__zero {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.ck-pdp-reviews__zero-msg { font-size: 16px; }
}
.ck-pdp-reviews__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--gutter-container, 24px);
}
/* Bands below cover-story — explicit 1200px centered to match cover-story above.
Cover band still breaks out full-bleed via its own negative margin. */
.ck-pdp-reviews__summary,
.ck-pdp-reviews__grid-wrap {
max-width: 1120px;
margin-left: auto;
margin-right: auto;
}
/* ─── Band 1: Stacked summary — Salonshop Summary (AI) on top, then ratings band.
Single-column layout per 28 Apr v3.2 brief. AI summary centred with readable
max-width; ratings band full 1120px width. ─── */
.ck-pdp-reviews__summary--stacked {
display: flex;
flex-direction: column;
gap: 64px;
padding-bottom: 40px;
padding-top: 16px;
}
.ck-pdp-reviews__summary-ai {
max-width: 880px;
margin: 0 auto;
text-align: center;
padding: 0 16px;
position: relative;
}
.ck-pdp-reviews__summary-ai .ck-pdp-reviews__ai-label {
margin-bottom: 22px;
font-size: 12px;
letter-spacing: 0.22em;
}
.ck-pdp-reviews__summary-ai .ck-pdp-reviews__ai-body {
font-size: clamp(22px, 1.85vw, 30px);
line-height: 1.42;
font-family: var(--font-heading-family, Georgia, serif);
font-weight: 400;
color: #1a1a1a;
}
/* Choice-style editorial divider under Salonshop Summary — hairline with
centred fleuron mark, tasteful narrow width. */
.ck-pdp-reviews__summary-ai::after {
content: '';
display: block;
width: 64%;
max-width: 520px;
height: 1px;
margin: 40px auto 0;
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 18%, rgba(0,0,0,0.22) 82%, rgba(0,0,0,0) 100%);
}
/* Equal-width left/right columns flanking a dead-centre divider so the
fleuron sits exactly on the page mid-line. Each block is centred within
its own column so the bars and the rating-CTA read as balanced units. */
.ck-pdp-reviews__summary-ratings {
display: grid;
grid-template-columns: 1fr auto 1fr;
column-gap: 56px;
align-items: center;
max-width: 1120px;
margin: 0 auto;
width: 100%;
}
.ck-pdp-reviews__summary-ratings > .ck-pdp-reviews__bars {
width: 100%;
max-width: 460px;
justify-self: start;
}
.ck-pdp-reviews__summary-ratings > .ck-pdp-reviews__summary-middle {
width: 100%;
max-width: 460px;
justify-self: end;
}
/* Parisian fleuron divider — hairline + ❦ Aldus leaf glyph in serif italic.
Editorial register, dead-centred between equal columns. */
.ck-pdp-reviews__summary-fleuron {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 240px;
color: rgba(20, 18, 14, 0.7);
}
.ck-pdp-reviews__summary-fleuron::before,
.ck-pdp-reviews__summary-fleuron::after {
content: '';
position: absolute;
left: 50%;
width: 1px;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.32) 30%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0) 100%);
transform: translateX(-50%);
}
.ck-pdp-reviews__summary-fleuron::before {
top: 0;
bottom: calc(50% + 24px);
}
.ck-pdp-reviews__summary-fleuron::after {
top: calc(50% + 24px);
bottom: 0;
}
.ck-pdp-reviews__summary-fleuron-mark {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(20, 18, 14, 0.7);
background: #f0f0ee;
padding: 6px;
line-height: 0;
}
/* SS Salon Shop monogram — Chanel-style interlock. First S mirrored, each
S counter-rotated 45° (90° spread between them), small gap separation. */
.ck-pdp-reviews__monogram-tilt {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 30px;
line-height: 1;
color: rgba(20, 18, 14, 0.82);
padding: 12px 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.ck-pdp-reviews__monogram-s {
display: inline-block;
transform: rotate(-45deg);
}
.ck-pdp-reviews__monogram-s--mirror {
transform: scaleX(-1) rotate(-45deg);
color: rgba(20, 18, 14, 0.3);
}
/* Trust strip — Judge.me verification authority signal under ratings band. */
.ck-pdp-reviews__trust-strip {
margin-top: 28px;
text-align: center;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(20, 18, 14, 0.55);
}
.ck-pdp-reviews__trust-seal {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-top: 1px solid rgba(20, 18, 14, 0.12);
border-bottom: 1px solid rgba(20, 18, 14, 0.12);
}
.ck-pdp-reviews__trust-seal svg {
color: rgba(15, 95, 58, 0.85);
flex-shrink: 0;
}
.ck-pdp-reviews__trust-text {
line-height: 1;
}
.ck-pdp-reviews__trust-jdgm {
font-weight: 600;
color: rgba(20, 18, 14, 0.78);
}
@media (max-width: 768px) {
.ck-pdp-reviews__summary--stacked { gap: 40px; }
.ck-pdp-reviews__summary-ratings {
grid-template-columns: 1fr;
row-gap: 24px;
max-width: 480px;
}
/* On mobile, divider becomes a horizontal hairline + centred fleuron. */
.ck-pdp-reviews__summary-fleuron {
width: 100%;
height: 22px;
}
.ck-pdp-reviews__summary-fleuron::before,
.ck-pdp-reviews__summary-fleuron::after {
top: 50%;
bottom: auto;
width: auto;
height: 1px;
left: auto;
right: auto;
transform: translateY(-50%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 30%, rgba(0,0,0,0.22) 70%, rgba(0,0,0,0) 100%);
}
.ck-pdp-reviews__summary-fleuron::before { left: 0; right: calc(50% + 18px); }
.ck-pdp-reviews__summary-fleuron::after { left: calc(50% + 18px); right: 0; }
.ck-pdp-reviews__summary-fleuron-mark { font-size: 22px; }
}
.ck-pdp-reviews__summary-middle {
display: flex;
flex-direction: column;
gap: 10px;
}
@media (max-width: 768px) {
.ck-pdp-reviews__summary-middle { align-items: center; text-align: center; }
.ck-pdp-reviews__write-cta { align-self: center; }
}
.ck-pdp-reviews__rating-inline {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
column-gap: 10px;
row-gap: 4px;
}
.ck-pdp-reviews__avg-out-of {
font-size: 13px;
color: var(--ck-review-muted);
}
.ck-pdp-reviews__count-line {
font-size: 13px;
color: var(--ck-review-muted);
margin: 0;
letter-spacing: 0.01em;
}
.ck-pdp-reviews__stars {
position: relative;
display: inline-block;
width: calc(var(--ck-star-size, 18px) * 5 + 8px);
height: var(--ck-star-size, 18px);
}
.ck-pdp-reviews__stars-track,
.ck-pdp-reviews__stars-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: var(--ck-star-size, 18px) var(--ck-star-size, 18px);
mask-size: var(--ck-star-size, 18px) var(--ck-star-size, 18px);
-webkit-mask-repeat: space;
mask-repeat: space;
}
.ck-pdp-reviews__stars-track { right: 0; background: rgba(0, 0, 0, 0.15); }
.ck-pdp-reviews__stars-fill { background: #000; }
.ck-pdp-reviews__avg-number {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-size: 48px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
color: #000;
}
.ck-pdp-reviews__count-line {
font-size: 13px;
color: var(--ck-review-muted);
margin: 0 0 20px;
letter-spacing: 0.01em;
}
.ck-pdp-reviews__write-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 11px 22px;
background: transparent;
color: #000;
border: 1px solid #000;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
transition: background 180ms ease, color 180ms ease;
}
.ck-pdp-reviews__write-cta:hover { background: #000; color: #fff; }
.ck-pdp-reviews__ai-label {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ck-review-muted);
margin: 0 0 33px;
}
.ck-pdp-reviews__ai-label-sep {
margin: 0 6px;
color: rgba(0, 0, 0, 0.3);
font-weight: 400;
}
.ck-pdp-reviews__ai-label-product {
color: rgba(0, 0, 0, 0.7);
font-weight: 500;
}
/* ─── Stylist Approved badge — postmark seal floating in the column gap ─── */
.ck-pdp-reviews__summary-right { position: relative; padding-left: 110px; }
.ck-pdp-reviews__stylist-badge {
position: absolute;
top: -32px;
left: -52px;
right: auto;
width: 100px;
height: 100px;
border-radius: 50%;
background: #1a1a1a;
color: #fafaf7;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-8deg);
font-family: 'Inter', -apple-system, system-ui, sans-serif;
text-transform: uppercase;
text-align: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
z-index: 3;
pointer-events: none;
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ck-pdp-reviews__stylist-badge::before {
content: '';
position: absolute;
inset: 6px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
}
.ck-pdp-reviews__stylist-badge-inner {
display: flex;
flex-direction: column;
line-height: 1.05;
letter-spacing: 0.06em;
}
.ck-pdp-reviews__stylist-badge-line {
font-size: 11px;
font-weight: 400;
}
.ck-pdp-reviews__stylist-badge-line--strong {
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
margin-top: 2px;
}
@media (max-width: 768px) {
.ck-pdp-reviews__summary-right { padding-left: 0; }
.ck-pdp-reviews__stylist-badge {
width: 78px;
height: 78px;
top: -22px;
left: -8px;
right: auto;
}
.ck-pdp-reviews__stylist-badge-line { font-size: 9px; }
.ck-pdp-reviews__stylist-badge-line--strong { font-size: 11px; }
}
.ck-pdp-reviews__ai-body {
position: relative;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-style: normal;
font-weight: 400;
font-size: clamp(18px, 2.4vw, 28px);
line-height: 1.45;
color: rgba(0, 0, 0, 0.82);
margin: 0;
padding-top: 0.4em;
max-width: 48ch;
}
.ck-pdp-reviews__ai-body::before {
content: '\201C';
position: absolute;
top: -0.35em;
left: -0.55em;
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-style: italic;
font-weight: 500;
font-size: 4.5em;
line-height: 1;
color: rgba(0, 0, 0, 0.18);
pointer-events: none;
user-select: none;
}
@media (max-width: 768px) {
.ck-pdp-reviews__ai-body { max-width: none; padding-left: 0.3em; }
.ck-pdp-reviews__ai-body::before { font-size: 3.5em; left: -0.3em; }
}
.ck-pdp-reviews__ai-placeholder { opacity: 0.55; }
.ck-pdp-reviews__empty {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 17px;
color: var(--ck-review-muted);
margin: 0;
max-width: 50ch;
}
/* ─── Editorial lede — AI summary above-right of featured cards ─── */
.ck-pdp-reviews__lede {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin: 32px 0 16px;
align-items: end;
}
@media (max-width: 768px) {
.ck-pdp-reviews__lede { grid-template-columns: 1fr; margin: 24px 0 8px; }
.ck-pdp-reviews__lede-slot { display: none; }
}
.ck-pdp-reviews__lede-slot { min-height: 1px; }
.ck-pdp-reviews__lede-body { padding-bottom: 4px; }
/* ─── Band 2: Featured (2 editorial picks side-by-side) ─── */
.ck-pdp-reviews__featured {
margin: 40px 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 768px) {
.ck-pdp-reviews__featured { grid-template-columns: 1fr; }
}
.ck-pdp-reviews__featured-loading {
padding: 40px 0;
color: var(--ck-review-muted);
font-size: 13px;
width: 100%;
text-align: center;
grid-column: 1 / -1;
}
.ck-pdp-reviews__featured-card {
background: var(--ck-review-card-bg);
border: 0;
border-radius: 28px;
padding: 56px 40px 48px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
transform: rotate(var(--ck-card-tilt, 0deg));
animation: ck-card-bob 9s ease-in-out infinite;
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 280ms ease;
will-change: transform;
}
.ck-pdp-reviews__featured-card:hover {
animation-play-state: paused;
transform: rotate(0deg) translateY(-4px) scale(1.02);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.06);
}
/* Asymmetric card pair: card 1 tilts left + sits lower; card 2 tilts right + sits higher */
.ck-pdp-reviews__featured-card:nth-child(1) {
--ck-card-tilt: -1.4deg;
min-height: 240px;
margin-top: 8px;
animation-delay: 0ms;
}
.ck-pdp-reviews__featured-card:nth-child(2) {
--ck-card-tilt: 1.6deg;
min-height: 210px;
background: #faf6ee;
animation-delay: -3500ms;
}
.ck-pdp-reviews__featured-card::before {
content: "\201C";
position: absolute;
top: 8px;
left: 24px;
font-family: Georgia, serif;
font-size: 96px;
line-height: 1;
color: rgba(0, 0, 0, 0.10);
pointer-events: none;
}
/* Speech-bubble tail */
.ck-pdp-reviews__featured-card::after {
content: '';
position: absolute;
bottom: -12px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 14px solid var(--ck-review-card-bg);
filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.06));
}
.ck-pdp-reviews__featured-card:nth-child(1)::after { left: 38px; }
.ck-pdp-reviews__featured-card:nth-child(2)::after { right: 38px; border-top-color: #faf6ee; }
@keyframes ck-card-bob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
@media (prefers-reduced-motion: reduce) {
.ck-pdp-reviews__featured-card { animation: none; }
}
.ck-pdp-reviews__featured-card__stars {
position: relative;
display: inline-block;
width: calc(14px * 5 + 4px);
height: 14px;
}
.ck-pdp-reviews__featured-card__stars-track,
.ck-pdp-reviews__featured-card__stars-fill {
position: absolute;
top: 0; bottom: 0; left: 0;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 14px 14px;
mask-size: 14px 14px;
-webkit-mask-repeat: space;
mask-repeat: space;
}
.ck-pdp-reviews__featured-card__stars-track { right: 0; background: rgba(0, 0, 0, 0.15); }
.ck-pdp-reviews__featured-card__stars-fill { background: #000; }
.ck-pdp-reviews__featured-card__pullquote {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-weight: 300;
font-size: 28px;
line-height: 1.35;
color: #000;
margin: 0;
letter-spacing: -0.01em;
max-width: 32ch;
}
@media (max-width: 768px) {
.ck-pdp-reviews__featured-card__pullquote { font-size: 22px; }
}
/* ─── Speech-bubble chorus: narrow editorial bubbles, multi-phrase per review ─── */
.ck-pdp-reviews__featured.ck-pdp-reviews__featured--chorus {
display: flex;
flex-wrap: wrap;
gap: 16px;
grid-template-columns: none;
align-items: flex-start;
justify-content: flex-start;
padding: 24px 0 8px;
}
.ck-pdp-reviews__featured--sparse { justify-content: flex-start; }
.ck-pdp-reviews__chorus-bubble {
background: #ffffff;
border-radius: 20px;
padding: 16px 22px 20px;
position: relative;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
transform: rotate(var(--ck-bubble-tilt, 0deg));
animation: ck-bubble-bob 7s ease-in-out infinite;
transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 220ms ease;
cursor: default;
will-change: transform;
text-align: left;
}
.ck-pdp-reviews__chorus-bubble:hover {
animation-play-state: paused;
transform: rotate(0deg) scale(1.04);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
z-index: 2;
}
.ck-pdp-reviews__chorus-item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ck-pdp-reviews__chorus-item--sm { max-width: 200px; }
.ck-pdp-reviews__chorus-item--md { max-width: 260px; }
.ck-pdp-reviews__chorus-item--lg { max-width: 320px; }
.ck-pdp-reviews__chorus-bubble--sm { max-width: 200px; }
.ck-pdp-reviews__chorus-bubble--md { max-width: 260px; }
.ck-pdp-reviews__chorus-bubble--lg { max-width: 320px; }
/* Speech-bubble tail */
.ck-pdp-reviews__chorus-bubble::after {
content: '';
position: absolute;
bottom: -9px;
left: 32px;
width: 0;
height: 0;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-top: 11px solid #ffffff;
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.04));
}
/* Subtle bubble bg variation for chorus visual rhythm */
.ck-pdp-reviews__chorus-bubble:nth-child(3n),
.ck-pdp-reviews__chorus-item:nth-child(3n) .ck-pdp-reviews__chorus-bubble { background: #faf6ee; }
.ck-pdp-reviews__chorus-bubble:nth-child(3n)::after,
.ck-pdp-reviews__chorus-item:nth-child(3n) .ck-pdp-reviews__chorus-bubble::after { border-top-color: #faf6ee; }
.ck-pdp-reviews__chorus-bubble:nth-child(5n),
.ck-pdp-reviews__chorus-item:nth-child(5n) .ck-pdp-reviews__chorus-bubble { background: #ebe4d6; }
.ck-pdp-reviews__chorus-bubble:nth-child(5n)::after,
.ck-pdp-reviews__chorus-item:nth-child(5n) .ck-pdp-reviews__chorus-bubble::after { border-top-color: #ebe4d6; }
.ck-pdp-reviews__chorus-quote {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 1.45;
color: #1a1a1a;
margin: 0;
}
.ck-pdp-reviews__chorus-bubble--sm .ck-pdp-reviews__chorus-quote { font-size: 14px; }
.ck-pdp-reviews__chorus-bubble--lg .ck-pdp-reviews__chorus-quote { font-size: 19px; }
/* Incentive bubble — editorial CTA mixed into the chorus */
.ck-pdp-reviews__chorus-bubble--incentive {
max-width: 240px;
background: #1a1a1a;
color: #fafaf7;
cursor: pointer;
border: 0;
font-family: inherit;
text-align: left;
display: block;
}
.ck-pdp-reviews__chorus-bubble--incentive::after { border-top-color: #1a1a1a; }
.ck-pdp-reviews__incentive-eyebrow {
display: block;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 8px;
}
.ck-pdp-reviews__incentive-quote {
display: block;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-style: normal;
font-size: 15px;
line-height: 1.4;
color: #fafaf7;
margin-bottom: 12px;
}
.ck-pdp-reviews__incentive-cta {
display: inline-block;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fafaf7;
padding-bottom: 2px;
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
transition: border-color 180ms ease, transform 180ms ease;
}
.ck-pdp-reviews__chorus-bubble--incentive:hover .ck-pdp-reviews__incentive-cta {
border-bottom-color: #fafaf7;
transform: translateX(2px);
}
.ck-pdp-reviews__chorus-author {
display: block;
margin-top: 20px;
padding-left: 38px;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.55);
font-weight: 500;
}
@keyframes ck-bubble-bob {
0%, 100% { translate: 0 0; }
50% { translate: 0 -4px; }
}
@media (prefers-reduced-motion: reduce) {
.ck-pdp-reviews__chorus-bubble { animation: none; }
}
@media (max-width: 768px) {
.ck-pdp-reviews__featured.ck-pdp-reviews__featured--chorus { gap: 12px; padding: 16px 0 4px; }
.ck-pdp-reviews__chorus-bubble--lg { max-width: 100%; }
.ck-pdp-reviews__chorus-quote { font-size: 16px; }
.ck-pdp-reviews__chorus-bubble--lg .ck-pdp-reviews__chorus-quote { font-size: 18px; }
}
.ck-pdp-reviews__featured-card__body {
font-size: 14px;
line-height: 1.55;
color: rgba(0,0,0,0.72);
margin: 0;
font-weight: 300;
flex: 1;
}
.ck-pdp-reviews__featured-card__meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 12px;
color: var(--ck-review-muted);
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--ck-review-border);
}
.ck-pdp-reviews__featured-card__author { font-weight: 500; color: #000; font-size: 13px; }
.ck-pdp-reviews__featured-card__verified {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.65);
}
.ck-pdp-reviews__featured-card__verified::before {
content: "\2713";
font-weight: 700;
}
.ck-pdp-reviews__featured-card__photo {
aspect-ratio: 4 / 3;
background: #eee center/cover no-repeat;
margin: -32px -36px 0;
}
/* Legacy Cinema CSS retained below in case any fallback needs it */
.ck-pdp-reviews__cinema {
margin: 40px 0;
overflow: hidden;
position: relative;
}
.ck-pdp-reviews__cinema-viewport {
overflow: hidden;
width: 100%;
}
.ck-pdp-reviews__cinema-track {
display: flex;
gap: 24px;
align-items: stretch;
will-change: transform;
padding: 4px 0;
}
.ck-pdp-reviews--drift .ck-pdp-reviews__cinema-track {
animation: ck-cinema-drift 48s linear infinite;
}
.ck-pdp-reviews__cinema:hover .ck-pdp-reviews__cinema-track,
.ck-pdp-reviews__cinema-track:focus-within {
animation-play-state: paused;
}
@keyframes ck-cinema-drift {
from { transform: translateX(0); }
to { transform: translateX(calc(-1 * var(--ck-drift-distance, 50%))); }
}
@media (prefers-reduced-motion: reduce) {
.ck-pdp-reviews--drift .ck-pdp-reviews__cinema-track {
animation: none;
}
.ck-pdp-reviews__cinema-viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.ck-pdp-reviews__cinema-card { scroll-snap-align: start; }
}
@media (max-width: 768px) {
.ck-pdp-reviews--drift .ck-pdp-reviews__cinema-track {
animation: none;
}
.ck-pdp-reviews__cinema-viewport {
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.ck-pdp-reviews__cinema-card { scroll-snap-align: start; }
}
.ck-pdp-reviews__cinema-card {
flex: 0 0 auto;
width: 280px;
min-height: 300px;
background: var(--ck-review-card-bg);
border: 1px solid var(--ck-review-border);
padding: 24px 22px 22px;
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
cursor: pointer;
transition: transform 260ms ease, box-shadow 260ms ease;
}
.ck-pdp-reviews__cinema-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}
.ck-pdp-reviews__cinema-card::before {
content: "\201C";
position: absolute;
top: 4px;
left: 16px;
font-family: Georgia, serif;
font-size: 64px;
line-height: 1;
color: var(--ck-review-tint);
color: rgba(230, 1, 135, 0.22);
pointer-events: none;
}
.ck-pdp-reviews__cinema-card--has-photo {
padding-top: 0;
}
.ck-pdp-reviews__cinema-card__photo {
width: calc(100% + 44px);
margin: 0 -22px 12px;
aspect-ratio: 4 / 3;
background: #eee center/cover no-repeat;
}
.ck-pdp-reviews__cinema-card__stars {
position: relative;
display: inline-block;
width: calc(13px * 5 + 4px);
height: 13px;
}
.ck-pdp-reviews__cinema-card__stars-track,
.ck-pdp-reviews__cinema-card__stars-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 13px 13px;
mask-size: 13px 13px;
-webkit-mask-repeat: space;
mask-repeat: space;
}
.ck-pdp-reviews__cinema-card__stars-track { right: 0; background: rgba(0, 0, 0, 0.15); }
.ck-pdp-reviews__cinema-card__stars-fill { background: #000; }
.ck-pdp-reviews__cinema-card__pullquote {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-weight: 400;
font-size: 18px;
line-height: 1.35;
color: #000;
margin: 0;
letter-spacing: -0.005em;
flex: 1;
}
.ck-pdp-reviews__cinema-card__body {
font-size: 13px;
line-height: 1.5;
color: var(--ck-review-muted);
margin: 0;
font-weight: 300;
}
.ck-pdp-reviews__cinema-card__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--ck-review-muted);
margin-top: auto;
}
.ck-pdp-reviews__cinema-card__author { font-weight: 500; color: #000; }
.ck-pdp-reviews__cinema-card__verified {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.65);
}
.ck-pdp-reviews__cinema-card__verified::before {
content: "\2713";
font-weight: 700;
}
.ck-pdp-reviews__cinema-loading {
padding: 40px 0;
color: var(--ck-review-muted);
font-size: 13px;
width: 100%;
text-align: center;
}
/* ─── Bars (now in summary band left column) ─── */
.ck-pdp-reviews__bars {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 428px;
margin: 4px 0 0;
}
.ck-pdp-reviews__bars-placeholder { min-height: 1px; }
.ck-pdp-reviews__bar-row {
display: grid;
grid-template-columns: 46px 1fr 40px;
align-items: center;
gap: 15px;
font-size: 15px;
color: var(--ck-review-muted);
}
.ck-pdp-reviews__bar-label {
display: inline-flex;
align-items: center;
gap: 2px;
color: #000;
font-weight: 500;
}
.ck-pdp-reviews__bar-star-glyph { color: #000; font-size: 14px; }
.ck-pdp-reviews__bar-track {
position: relative;
height: 8px;
background: rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.ck-pdp-reviews__bar-fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
background: #000;
transition: width 600ms ease;
}
.ck-pdp-reviews__bar-count {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ─── Band 4: All reviews grid ─── */
.ck-pdp-reviews__grid-wrap { margin-top: 48px; }
.ck-pdp-reviews__grid-heading {
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-weight: 400;
font-size: 22px;
margin: 0;
letter-spacing: -0.005em;
}
.ck-pdp-reviews__grid-tools {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
padding-bottom: 16px;
border-bottom: 1px solid var(--ck-review-border);
}
.ck-pdp-reviews__grid-controls {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.ck-pdp-reviews__grid-search input {
padding: 10px 14px;
border: 1px solid var(--ck-review-border);
font-size: 13px;
background: #fff;
font-family: inherit;
min-width: 220px;
color: #000;
}
.ck-pdp-reviews__grid-sort select,
.ck-pdp-reviews .ck-pdp-reviews__grid-sort select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
padding: 10px 36px 10px 14px !important;
border: 1px solid var(--ck-review-border) !important;
font-size: 13px !important;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 14px center !important;
background-size: 10px 6px !important;
font-family: inherit !important;
cursor: pointer !important;
color: #000 !important;
text-transform: none !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
box-shadow: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
}
.ck-pdp-reviews__grid-details { margin: 0; }
.ck-pdp-reviews__grid-toggle {
cursor: pointer;
font-size: 13px;
padding: 12px 0;
border-top: 1px solid var(--ck-review-border);
border-bottom: 1px solid var(--ck-review-border);
list-style: none;
text-align: center;
margin: 24px 0 0;
}
.ck-pdp-reviews__grid-toggle::-webkit-details-marker { display: none; }
.ck-pdp-reviews__grid-toggle::after {
content: " ↓";
margin-left: 4px;
}
.ck-pdp-reviews__grid-details[open] .ck-pdp-reviews__grid-toggle::after { content: " ↑"; }
.ck-pdp-reviews__grid {
display: flex;
flex-direction: column;
margin-top: 8px;
}
.ck-pdp-reviews__grid-card {
display: grid;
grid-template-columns: 200px 1fr;
gap: 72px;
padding: 48px 0;
border-bottom: 1px solid var(--ck-review-border);
align-items: start;
}
.ck-pdp-reviews__grid-card:first-child { padding-top: 32px; }
.ck-pdp-reviews__grid-card:last-child { border-bottom: 0; }
@media (max-width: 900px) {
.ck-pdp-reviews__grid-card {
grid-template-columns: 160px 1fr;
gap: 40px;
padding: 36px 0;
}
}
@media (max-width: 640px) {
.ck-pdp-reviews__grid-card {
grid-template-columns: 1fr;
gap: 16px;
padding: 28px 0;
}
}
.ck-pdp-reviews__grid-card__meta {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
color: var(--ck-review-muted);
line-height: 1.5;
}
@media (max-width: 640px) {
.ck-pdp-reviews__grid-card__meta {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
}
.ck-pdp-reviews__grid-card__author {
color: #000;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.01em;
}
.ck-pdp-reviews__grid-card__location {
font-size: 12px;
color: var(--ck-review-muted);
font-weight: 400;
}
.ck-pdp-reviews__grid-card__verified {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.6);
font-weight: 500;
margin-top: 6px;
}
.ck-pdp-reviews__grid-card__verified svg {
color: rgba(0, 0, 0, 0.6);
flex: 0 0 auto;
}
.ck-pdp-reviews__grid-card__content {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 720px;
}
.ck-pdp-reviews__grid-card__stars-row {
display: flex;
align-items: center;
gap: 8px;
}
.ck-pdp-reviews__grid-card__rating-value {
font-size: 12px;
color: var(--ck-review-muted);
}
.ck-pdp-reviews h4.ck-pdp-reviews__grid-card__title,
.ck-pdp-reviews__grid-card__title {
font-family: 'Playfair', Georgia, 'Times New Roman', serif !important;
font-size: 22px;
font-weight: 400;
margin: 0;
color: #000 !important;
letter-spacing: -0.01em;
line-height: 1.25;
text-transform: none;
}
.ck-pdp-reviews__grid-card__body {
font-size: 15px;
line-height: 1.7;
font-weight: 300;
color: rgba(0, 0, 0, 0.78);
margin: 0;
}
.ck-pdp-reviews__grid-card__date,
.ck-pdp-reviews__grid-card__date-relative,
.ck-pdp-reviews__grid-card__source {
font-size: 12px;
color: var(--ck-review-muted);
font-weight: 400;
}
.ck-pdp-reviews__grid-card__date-relative {
font-weight: 500;
color: rgba(0, 0, 0, 0.65);
}
.ck-pdp-reviews__grid-card__photos {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.ck-pdp-reviews__grid-card__photos .ck-pdp-reviews__grid-card__photo {
margin: 0;
width: 140px;
aspect-ratio: 1 / 1;
max-width: none;
border-radius: 2px;
}
.ck-pdp-reviews__grid-card__reply {
margin-top: 12px;
padding: 14px 16px;
background: rgba(0, 0, 0, 0.03);
border-left: 2px solid rgba(0, 0, 0, 0.15);
}
.ck-pdp-reviews__grid-card__reply-label {
display: block;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ck-review-muted);
font-weight: 600;
margin-bottom: 6px;
}
.ck-pdp-reviews__grid-card__reply-body {
font-size: 14px;
line-height: 1.6;
color: rgba(0, 0, 0, 0.75);
margin: 0;
font-weight: 300;
font-style: italic;
}
.ck-pdp-reviews__grid-card__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 12px;
color: var(--ck-review-muted);
}
.ck-pdp-reviews__grid-card__footer-dot { color: rgba(0,0,0,0.3); }
.ck-pdp-reviews__grid-card__helpful {
font-size: 12px;
color: var(--ck-review-muted);
}
.ck-pdp-reviews__grid-card__photo {
margin-top: 12px;
aspect-ratio: 4 / 3;
background: #f2f2f2 center/cover no-repeat;
max-width: 240px;
cursor: zoom-in;
transition: opacity 200ms ease, transform 200ms ease;
}
.ck-pdp-reviews__grid-card__photo:hover { opacity: 0.88; transform: translateY(-1px); }
.ck-pdp-reviews__grid-card__photo:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
/* ─── Review photo lightbox ─── */
.ck-pdp-reviews__lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.94);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 56px 64px;
cursor: zoom-out;
animation: ck-modal-fade 200ms ease-out;
}
.ck-pdp-reviews__lightbox.is-open { display: flex; }
.ck-pdp-reviews__lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
user-select: none;
cursor: default;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.ck-pdp-reviews__lightbox-close {
position: absolute;
top: 18px;
right: 22px;
width: 44px;
height: 44px;
background: transparent;
border: 0;
color: rgba(255, 255, 255, 0.85);
font-size: 32px;
line-height: 1;
cursor: pointer;
padding: 0;
}
.ck-pdp-reviews__lightbox-close:hover { color: #fff; }
.ck-pdp-reviews__lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border: 0;
border-radius: 50%;
color: #fff;
font-size: 22px;
cursor: pointer;
line-height: 1;
}
.ck-pdp-reviews__lightbox-nav:hover { background: rgba(255, 255, 255, 0.18); }
.ck-pdp-reviews__lightbox-nav--prev { left: 24px; }
.ck-pdp-reviews__lightbox-nav--next { right: 24px; }
.ck-pdp-reviews__lightbox-counter {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.55);
font-size: 11px;
letter-spacing: 0.12em;
}
@media (max-width: 640px) {
.ck-pdp-reviews__lightbox { padding: 24px 12px; }
.ck-pdp-reviews__lightbox-nav { width: 40px; height: 40px; }
.ck-pdp-reviews__lightbox-nav--prev { left: 8px; }
.ck-pdp-reviews__lightbox-nav--next { right: 8px; }
}
.ck-pdp-reviews__grid-more {
display: block;
margin: 32px auto 0;
padding: 12px 28px;
background: transparent;
border: 1px solid #000;
color: #000;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
font-family: inherit;
}
.ck-pdp-reviews__grid-more:hover { background: #000; color: #fff; }
/* Our local hidden data-source mount (off-screen but real dimensions so Judge.me will bind to it) */
.ck-pdp-reviews__jdgm-source {
position: absolute !important;
left: -10000px !important;
top: 0 !important;
width: 800px !important;
height: auto !important;
pointer-events: none !important;
opacity: 0 !important;
}
/* Hide the theme-level Judge.me widget sections so our section is the only visible reviews surface */
#shopify-section-17766525920d1510fb,
[id$="__judge_me_reviews_review_widget"],
.jdgm-widget-actions-wrapper > .jdgm-carousel,
body:not(.js-ck-reviews-ready) .ck-pdp-reviews__cinema-loading { /* keep loading state visible until bind */ }
/* Hide the native Judge.me apps section wherever it is — match by trailing section id */
[id^="shopify-section"][id$="__17766525920d1510fb"] {
display: none !important;
}
/* ─── Write-review modal — editorial rewrite of Judge.me's form ─── */
.ck-pdp-reviews__modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(20, 20, 20, 0.6);
z-index: 99998;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: ck-modal-fade 240ms ease-out;
}
.jdgm-form-wrapper.ck-pdp-reviews__modal {
display: none;
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 99999 !important;
width: min(1200px, 94vw) !important;
max-height: 94vh !important;
overflow-y: auto !important;
background: #fff !important;
padding: 30px 72px 28px !important;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
border-radius: 0 !important;
animation: ck-modal-pop 300ms cubic-bezier(0.16, 1, 0.3, 1);
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
font-family: inherit !important;
color: #000 !important;
}
@media (max-width: 640px) {
.jdgm-form-wrapper.ck-pdp-reviews__modal {
padding: 48px 28px 36px !important;
width: 96vw !important;
max-height: 92vh !important;
}
}
.ck-pdp-reviews__modal-close {
position: absolute;
top: 16px;
right: 20px;
width: 36px;
height: 36px;
background: transparent;
border: 0;
font-size: 24px;
line-height: 1;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
font-family: inherit;
padding: 0;
transition: color 160ms ease;
z-index: 2;
}
.ck-pdp-reviews__modal-close:hover { color: #000; }
/* Prepend editorial heading via pseudo-element since we're injecting into their form */
.jdgm-form-wrapper.ck-pdp-reviews__modal::before {
content: "Write a review";
display: block;
font-family: 'Playfair', Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.01em;
color: #000;
margin: 0 0 4px;
}
/* Subtitle pseudo removed — "Write a review" heading is self-explanatory,
and the trailing pseudo was rendering below submit (inline style:display:block
from Judge.me's JS defeats flex-order tricks). */
.jdgm-form-wrapper.ck-pdp-reviews__modal::after { content: none !important; display: none !important; }
/* Override every Judge.me form element to match our editorial system */
.ck-pdp-reviews__modal .jdgm-form,
.ck-pdp-reviews__modal form {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
font-family: inherit !important;
color: #000 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.ck-pdp-reviews__modal label,
.ck-pdp-reviews__modal .jdgm-form__label,
.ck-pdp-reviews__modal [class*="jdgm-form__"] > strong,
.ck-pdp-reviews__modal .jdgm-rev-widg__form-label {
display: block !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
color: rgba(0, 0, 0, 0.55) !important;
margin: 0 0 8px !important;
font-family: inherit !important;
}
.ck-pdp-reviews__modal input[type="text"],
.ck-pdp-reviews__modal input[type="email"],
.ck-pdp-reviews__modal textarea,
.ck-pdp-reviews__modal select {
width: 100% !important;
padding: 12px 14px !important;
border: 1px solid rgba(0, 0, 0, 0.15) !important;
border-radius: 0 !important;
background: #fff !important;
font-family: inherit !important;
font-size: 14px !important;
line-height: 1.5 !important;
color: #000 !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 160ms ease !important;
font-weight: 300 !important;
}
.ck-pdp-reviews__modal input[type="text"]:focus,
.ck-pdp-reviews__modal input[type="email"]:focus,
.ck-pdp-reviews__modal textarea:focus,
.ck-pdp-reviews__modal select:focus {
border-color: #000 !important;
outline: 0 !important;
box-shadow: 0 0 0 1px #000 !important;
}
.ck-pdp-reviews__modal textarea {
min-height: 140px !important;
resize: vertical !important;
font-family: inherit !important;
}
.ck-pdp-reviews__modal ::placeholder { color: rgba(0, 0, 0, 0.35) !important; font-weight: 300 !important; }
/* Black stars — override Judge.me's pink */
.ck-pdp-reviews__modal .jdgm-star,
.ck-pdp-reviews__modal .jdgm-form__rating .jdgm-star,
.ck-pdp-reviews__modal [class*="jdgm-star"] {
color: #000 !important;
font-size: 28px !important;
cursor: pointer !important;
transition: transform 120ms ease !important;
}
.ck-pdp-reviews__modal .jdgm-star:hover,
.ck-pdp-reviews__modal [class*="jdgm-star"]:hover {
transform: scale(1.08) !important;
}
.ck-pdp-reviews__modal .jdgm-star--on::before,
.ck-pdp-reviews__modal .jdgm-star.jdgm--on::before {
color: #000 !important;
}
.ck-pdp-reviews__modal .jdgm-star--off::before,
.ck-pdp-reviews__modal .jdgm-star.jdgm--off::before {
color: rgba(0, 0, 0, 0.18) !important;
}
/* Hide the "(displayed publicly like John S.)" parenthetical — too noisy.
Judge.me wraps it in .jdgm-form__reviewer-name-format-container. Keep the
default name-format value (last_initial = "John S.") server-side. */
.ck-pdp-reviews__modal .jdgm-form__reviewer-name-format-container {
display: none !important;
}
/* Picture/Video upload zone — dashed minimal */
.ck-pdp-reviews__modal .jdgm-form__pictures,
.ck-pdp-reviews__modal [class*="jdgm-form__media"],
.ck-pdp-reviews__modal [class*="jdgm-upload"] {
border: 1px dashed rgba(0, 0, 0, 0.2) !important;
background: rgba(0, 0, 0, 0.015) !important;
padding: 20px !important;
border-radius: 0 !important;
min-height: 100px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
cursor: pointer !important;
transition: border-color 160ms ease, background 160ms ease !important;
}
.ck-pdp-reviews__modal .jdgm-form__pictures:hover,
.ck-pdp-reviews__modal [class*="jdgm-form__media"]:hover,
.ck-pdp-reviews__modal [class*="jdgm-upload"]:hover {
border-color: rgba(0, 0, 0, 0.45) !important;
background: rgba(0, 0, 0, 0.025) !important;
}
.ck-pdp-reviews__modal .jdgm-form__pictures img,
.ck-pdp-reviews__modal [class*="jdgm-upload"] svg {
width: 28px !important;
height: 28px !important;
opacity: 0.4 !important;
}
/* Submit button — black, uppercase, matches our Write Review CTA */
.ck-pdp-reviews__modal input[type="submit"],
.ck-pdp-reviews__modal button[type="submit"],
.ck-pdp-reviews__modal .jdgm-submit-rev,
.ck-pdp-reviews__modal [class*="jdgm-submit"] {
padding: 14px 32px !important;
background: #000 !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 12px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
font-weight: 500 !important;
cursor: pointer !important;
font-family: inherit !important;
transition: background 180ms ease !important;
align-self: flex-start !important;
margin-top: 4px !important;
}
.ck-pdp-reviews__modal input[type="submit"]:hover,
.ck-pdp-reviews__modal button[type="submit"]:hover,
.ck-pdp-reviews__modal .jdgm-submit-rev:hover,
.ck-pdp-reviews__modal [class*="jdgm-submit"]:hover {
background: #333 !important;
}
/* Strip any wrapper padding/backgrounds Judge.me adds */
.ck-pdp-reviews__modal .jdgm-form__fields,
.ck-pdp-reviews__modal .jdgm-form__row,
.ck-pdp-reviews__modal .jdgm-form__group,
.ck-pdp-reviews__modal [class*="jdgm-form__"] {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Error states */
.ck-pdp-reviews__modal .jdgm-form__error,
.ck-pdp-reviews__modal [class*="error"] {
color: #c00 !important;
font-size: 12px !important;
margin-top: 4px !important;
}
/* ─── Desktop condensation — fit the form without vertical scrolling ───
Scoped to min-width:641px so mobile keeps its existing comfortable sizing.
Two-column grid, full-width items span both columns, name+email share a row. */
@media (min-width: 641px) {
.ck-pdp-reviews__modal .jdgm-form,
.ck-pdp-reviews__modal form {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 6px 20px !important;
align-items: start !important;
grid-auto-rows: min-content !important;
flex-direction: unset !important;
}
/* Default: every direct child spans both columns */
.ck-pdp-reviews__modal .jdgm-form > *,
.ck-pdp-reviews__modal form > * {
grid-column: 1 / -1;
}
/* Name + email share a row — target containers via the input's name attr
so it works regardless of Judge.me's class naming. */
.ck-pdp-reviews__modal .jdgm-form > *:has(input[name*="reviewer_name"]),
.ck-pdp-reviews__modal form > *:has(input[name*="reviewer_name"]),
.ck-pdp-reviews__modal .jdgm-form__reviewer-name-input-container,
.ck-pdp-reviews__modal .jdgm-form__author,
.ck-pdp-reviews__modal [class*="reviewer-name"] {
grid-column: 1 / 2 !important;
}
.ck-pdp-reviews__modal .jdgm-form > *:has(input[name*="reviewer_email"]),
.ck-pdp-reviews__modal form > *:has(input[name*="reviewer_email"]),
.ck-pdp-reviews__modal .jdgm-form__reviewer-email-input-container,
.ck-pdp-reviews__modal .jdgm-form__email,
.ck-pdp-reviews__modal [class*="reviewer-email"] {
grid-column: 2 / 3 !important;
}
.ck-pdp-reviews__modal label,
.ck-pdp-reviews__modal .jdgm-form__label,
.ck-pdp-reviews__modal [class*="jdgm-form__"] > strong,
.ck-pdp-reviews__modal .jdgm-rev-widg__form-label {
margin: 0 0 3px !important;
font-size: 10px !important;
}
.ck-pdp-reviews__modal input[type="text"],
.ck-pdp-reviews__modal input[type="email"],
.ck-pdp-reviews__modal select {
padding: 9px 12px !important;
}
.ck-pdp-reviews__modal textarea {
min-height: 56px !important;
padding: 9px 12px !important;
}
/* Judge.me data-use notice (anonymous div before submit) — shrink */
.ck-pdp-reviews__modal .jdgm-form > div:not([class]),
.ck-pdp-reviews__modal form > div:not([class]) {
font-size: 10px !important;
line-height: 1.4 !important;
color: rgba(0, 0, 0, 0.45) !important;
margin: 2px 0 0 !important;
padding: 0 !important;
}
.ck-pdp-reviews__modal .jdgm-star,
.ck-pdp-reviews__modal .jdgm-form__rating .jdgm-star,
.ck-pdp-reviews__modal [class*="jdgm-star"] {
font-size: 20px !important;
}
/* Picture fieldset contains BOTH picture + video file upload as siblings.
Judge.me forces each internal container to ~536px tall. Flatten them
to compact tiles side-by-side; fieldset spans full width. */
.ck-pdp-reviews__modal .jdgm-picture-fieldset {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
min-height: 0 !important;
max-height: none !important;
height: auto !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
align-self: start !important;
grid-column: 1 / -1 !important;
}
.ck-pdp-reviews__modal .jdgm-picture-fieldset__container,
.ck-pdp-reviews__modal .jdgm-video-fieldset__container,
.ck-pdp-reviews__modal .jdgm-media-fieldset__container {
flex: 1 1 0 !important;
height: 64px !important;
max-height: 64px !important;
min-height: 64px !important;
overflow: hidden !important;
border: 1px dashed rgba(0, 0, 0, 0.2) !important;
background: rgba(0, 0, 0, 0.015) !important;
padding: 0 !important;
display: flex !important;
align-items: stretch !important;
}
.ck-pdp-reviews__modal .jdgm-picture-fieldset__box,
.ck-pdp-reviews__modal .jdgm-video-fieldset__box,
.ck-pdp-reviews__modal [class*="fieldset__box"] {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
max-height: 100% !important;
cursor: pointer !important;
margin: 0 !important;
padding: 0 !important;
}
.ck-pdp-reviews__modal .jdgm-picture-fieldset__box-wrapper,
.ck-pdp-reviews__modal .jdgm-video-fieldset__box-wrapper,
.ck-pdp-reviews__modal [class*="fieldset__box-wrapper"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
}
.ck-pdp-reviews__modal .jdgm-photocamera-icon,
.ck-pdp-reviews__modal [class*="photocamera-icon"],
.ck-pdp-reviews__modal [class*="video-icon"],
.ck-pdp-reviews__modal [class*="fieldset__icon"] {
width: 22px !important;
height: 22px !important;
max-height: 22px !important;
flex: 0 0 22px !important;
}
.ck-pdp-reviews__modal .jdgm-picture-fieldset-title {
font-size: 10px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: rgba(0, 0, 0, 0.55) !important;
margin: 0 !important;
padding: 0 !important;
align-self: end !important;
grid-column: 1 / -1 !important;
}
/* YouTube URL field → full width below media row */
.ck-pdp-reviews__modal .jdgm-form__yt-video-fieldset {
grid-column: 1 / -1 !important;
align-self: start !important;
}
.ck-pdp-reviews__modal input[type="submit"],
.ck-pdp-reviews__modal button[type="submit"],
.ck-pdp-reviews__modal .jdgm-submit-rev,
.ck-pdp-reviews__modal [class*="jdgm-submit"] {
padding: 11px 26px !important;
margin-top: 0 !important;
justify-self: start !important;
}
}
@keyframes ck-modal-fade {
from { opacity: 0; } to { opacity: 1; }
}
@keyframes ck-modal-pop {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.98); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Floor heading keeps exact sentence-case ("From the Salon Shop floor"); Verdict stays capitalized */
.ck-pdp-reviews__heading--cover.ck-pdp-reviews__heading--floor { text-transform: none; }
.ck-pdp-reviews__cover-buyform { width: 100%; margin: 0; }
.ck-pdp-reviews__cover-buy {
width: 100%;
background: #1a1a1a;
color: #fafaf7;
border: 1px solid #1a1a1a;
border-radius: 0;
padding: 14px 22px;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.ck-pdp-reviews__cover-buy:hover { background: var(--ck-sale-color, #DE93AC); border-color: var(--ck-sale-color, #DE93AC); color: #1a1a1a; }
.ck-pdp-reviews__cover-buy[disabled] { opacity: 0.5; cursor: default; }
/* Floor-mode CTA: "Be the first to review" in the quote card */
.ck-pdp-reviews__cover-floor-cta {
margin-top: 18px;
align-self: flex-start;
background: #1a1a1a;
color: #fafaf7;
border: 1px solid #1a1a1a;
border-radius: 0;
padding: 12px 22px;
font-family: 'Inter', -apple-system, system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background 220ms ease, color 220ms ease, border-color 220ms ease;
}
.ck-pdp-reviews__cover-floor-cta:hover {
background: var(--ck-sale-color, #DE93AC);
border-color: var(--ck-sale-color, #DE93AC);
color: #1a1a1a;
}
/* END_SECTION:ck-pdp-reviews */
/* START_SECTION:main-product (INDEX:97) */
.ck-pdp-tagline { margin: 0.55em 0 0.45em 0; }
/* +15px breathing room between tagline/description link and the price */
.product-text .ck-pdp-tagline + .main-product-price,
.product-text .ck-pdp-tagline ~ .main-product-price { margin-top: 30px !important; }
.ck-pdp-tagline__quote {
margin: 0;
font-family: Inter, system-ui, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 1em;
line-height: 1.5;
letter-spacing: 0;
color: rgba(0, 0, 0, 0.82);
}
/* tighten the gap between Afterpay block and the variant picker (was 60px, target 30px) */
.product-text .main-product-price + .sidebar-widget { margin-top: 30px !important; }
.ck-pdp-tagline__more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: calc(0.45em + 10px);
font-size: 12.5px;
letter-spacing: 0.02em;
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
font-family: inherit;
font-style: normal;
}
.ck-pdp-tagline__more:hover {
color: #000;
text-decoration: underline;
text-underline-offset: 3px;
}
.ck-pdp-tagline__chev { transition: transform 220ms ease; }
.ck-pdp-tagline__more:hover .ck-pdp-tagline__chev { transform: translateY(1px); }
.ck-pdp-tagline__more[aria-expanded="true"] .ck-pdp-tagline__chev { transform: rotate(180deg); }
.ck-pdp-tagline__more[aria-expanded="true"]:hover .ck-pdp-tagline__chev { transform: rotate(180deg) translateY(-1px); }
/* Lighter description body weight — applies to theme toggle-tab + ck-pdp-description editorial accordion */
.toggle__content.rte,
.ck-pdp-desc__accordion-body.rte,
.product__description .rte {
font-weight: 400;
line-height: 165%;
color: #7e7e7e;
}
/* ck-pdp-rating — editorial Hair-House black stars */
.ck-pdp-rating {
display: inline-flex;
align-items: center;
gap: 6px;
color: #000;
text-decoration: none;
line-height: 1;
font-size: 13px;
letter-spacing: 0.01em;
}
a.ck-pdp-rating:hover .ck-pdp-rating__value,
a.ck-pdp-rating:hover .ck-pdp-rating__count {
text-decoration: underline;
text-underline-offset: 2px;
}
.ck-pdp-rating__stars {
position: relative;
display: inline-block;
width: calc(var(--ck-star-size, 13px) * 5 + 8px);
height: var(--ck-star-size, 13px);
flex: 0 0 auto;
}
.ck-pdp-rating__track,
.ck-pdp-rating__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: var(--ck-star-size, 13px) var(--ck-star-size, 13px);
mask-size: var(--ck-star-size, 13px) var(--ck-star-size, 13px);
-webkit-mask-repeat: space;
mask-repeat: space;
-webkit-mask-position: left center;
mask-position: left center;
}
.ck-pdp-rating__track { right: 0; background: rgba(0, 0, 0, 0.15); }
.ck-pdp-rating__fill { background: #000; width: 0; }
.ck-pdp-rating__value { font-weight: 500; color: #000; }
.ck-pdp-rating__count { color: rgba(0, 0, 0, 0.55); }
.ck-pdp-rating--empty { color: rgba(0, 0, 0, 0.45); font-size: 12px; }
/* END_SECTION:main-product */