/* ==========================================================================
   Carley Connection — Tailor Pages (Figma-exact)
   ========================================================================== */

/* ---------- Tailor Archive ---------- */
.cc-tailor-archive__header { margin-bottom: var(--space-4xl); }
.cc-tailor-archive__title { font-family: var(--font-heading); font-size: 72px; font-weight: 400; color: var(--color-accent); margin-bottom: var(--space-lg); }
.cc-tailor-archive__desc { font-size: 18px; font-weight: 300; color: var(--color-text-light); max-width: 65ch; line-height: 1.7; }
.cc-tailor-archive__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3xl) var(--space-2xl); }
.cc-tailor-archive__card { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.cc-tailor-archive__image { aspect-ratio: 3 / 4; overflow: hidden; display: block; }
.cc-tailor-archive__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 1s ease, transform 1s ease; }
.cc-tailor-archive__card:hover .cc-tailor-archive__image img { filter: grayscale(0%); transform: scale(1.03); }
.cc-tailor-archive__name { font-family: var(--font-heading); font-size: 28px; font-weight: 400; font-style: italic; margin-bottom: var(--space-sm); }
.cc-tailor-archive__name a { color: var(--color-accent); text-decoration: none; }
.cc-tailor-archive__spec { font-size: 10px; font-weight: 500; letter-spacing: 2px; color: #57a5b1; display: block; margin-bottom: var(--space-md); }
.cc-tailor-archive__bio { font-size: 14px; color: var(--color-text-light); line-height: 1.6; margin-bottom: var(--space-md); }
.cc-tailor-archive__link { font-size: 10px; font-weight: 500; letter-spacing: 1.5px; color: #203f43; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(32,63,67,0.2); padding-bottom: 6px; }

/* ==========================================================================
   SINGLE TAILOR PROFILE — Figma 24:404 exact replica
   ========================================================================== */

/* ---------- HERO — Full viewport, centered title ---------- */
.cc-tp-hero {
    position: relative;
    height: 100vh;
    max-height: 1024px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cc-tp-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    will-change: transform;
    /* No transition: the JS parallax sets transform directly on scroll.
       A transition here makes the bg lag behind the scroll position and
       reveals a white gap at the top when scrolling back up. */
}

.cc-tp-hero__gradient {
    position: absolute;
    inset: 0;
    /* Layered: a vertical gradient for overall depth, plus a centered radial
       darkening behind the title so it stays readable over light subjects
       (faces, sky, pale walls). */
    background:
        radial-gradient(ellipse 70% 55% at 50% 55%, rgba(26,28,27,0.55) 0%, rgba(26,28,27,0) 75%),
        linear-gradient(to bottom, rgba(26,28,27,0.15) 0%, rgba(26,28,27,0.35) 50%, rgba(26,28,27,0.7) 100%);
}

.cc-tp-hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 1024px;
    padding: 0 24px;
}

/* Artisan name eyebrow — the primary identifier on the hero. Sits above
   the marketing phrase. Gold italic serif for editorial gravity. */
.cc-tp-hero__name {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: 38px;
    font-weight: 400;
    color: var(--color-accent, #facb58);
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 20px;
    text-align: center;
    max-width: none;
    width: 100%;
}

.cc-tp-hero__title {
    font-family: var(--font-heading);
    font-size: 110px;
    font-weight: 400;
    color: #f9f9f7;
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 32px;
}

.cc-tp-hero__title em {
    font-style: italic;
    color: rgba(249, 249, 247, 0.8);
}

.cc-tp-hero__subtitle {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 200;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(249, 249, 247, 0.9);
    margin-bottom: 48px;
    text-align: center;
    max-width: none; /* Override global p { max-width: 65ch } */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 6px; /* Offset trailing letter-spacing for optical center */
}

.cc-tp-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 48px;
    background-color: #7a5900;
    color: white;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--transition-fast);
}

.cc-tp-hero__cta:hover {
    background-color: #946d00;
    color: white;
}

/* ---------- CHAPTER I — Split layout ---------- */
.cc-tp-chapter1 {
    display: flex;
    min-height: 1024px;
    background: #f9f9f7;
}

.cc-tp-chapter1__image {
    flex: 1;
    overflow: hidden;
}

.cc-tp-chapter1__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-tp-chapter1__text {
    flex: 1;
    background: #f4f4f2;
    padding: 96px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc-tp-chapter__label {
    font-family: var(--font-heading);
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    color: #7a5900;
    display: block;
    margin-bottom: 16px;
}

.cc-tp-chapter1__heading {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 400;
    color: #152a2d;
    line-height: 1;
    margin-bottom: 32px;
}

.cc-tp-chapter1__body {
    max-width: 512px;
    margin-bottom: 32px;
}

.cc-tp-chapter1__body p {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 200;
    color: #3f4848;
    line-height: 26px;
    margin-bottom: 24px;
}

.cc-tp-chapter1__link {
    padding-top: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cc-tp-chapter1__link a {
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 1.2px;
    color: #152a2d;
    text-decoration: none;
}

.cc-tp-chapter1__link svg {
    color: #152a2d;
}

/* ---------- CHAPTER II — Dark teal with centered image + overlay card ---------- */
.cc-tp-chapter2 {
    background: #152a2d;
    padding: 128px 96px;
    overflow: hidden;
}

.cc-tp-chapter2__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cc-tp-chapter2__media {
    position: relative;
    width: 544px;
    margin-bottom: 0;
}

.cc-tp-chapter2__image {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(26,28,27,0.06);
}

.cc-tp-chapter2__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-tp-chapter2__card {
    position: absolute;
    bottom: -64px;
    left: -80px;
    background: #f9f9f7;
    padding: 48px;
    max-width: 408px;
    box-shadow: 0 20px 40px rgba(26,28,27,0.06);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cc-tp-chapter2__card .cc-tp-chapter__label {
    font-size: 20px;
}

.cc-tp-chapter2__card-title {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 400;
    color: #1a1c1b;
    line-height: 40px;
}

.cc-tp-chapter2__card-text {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 200;
    color: #3f4848;
    line-height: 22.75px;
    margin: 0;
}

.cc-tp-chapter2__quote {
    align-self: flex-end;
    max-width: 480px;
    margin-top: 32px;
}

.cc-tp-chapter2__quote p {
    font-family: var(--font-heading);
    font-size: 30px;
    font-style: italic;
    font-weight: 400;
    color: rgba(232, 232, 230, 0.8);
    line-height: 48.75px;
    text-align: right;
    margin: 0;
}

/* ---------- VIDEO SECTION — "Atelier in Motion" ---------- */
.cc-tp-video {
    background: #f4f4f2;
    padding: 128px 96px;
}

.cc-tp-video__inner {
    max-width: 1152px;
    margin: 0 auto;
}

.cc-tp-video__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 64px;
}

.cc-tp-video__title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 400;
    color: #152a2d;
    text-align: center;
}

.cc-tp-video__divider {
    width: 96px;
    height: 1px;
    background: #7a5900;
}

.cc-tp-video__player {
    position: relative;
    background: #203f43;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    box-shadow: 0 20px 40px rgba(26,28,27,0.06);
    cursor: pointer;
}

.cc-tp-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: overlay;
    opacity: 0.4;
    z-index: 2;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-tp-video__overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.4s ease;
}

.cc-tp-video__play {
    position: relative;
    z-index: 4;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(249, 249, 247, 0.3);
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-tp-video__play:hover {
    background: rgba(249, 249, 247, 0.1);
    transform: scale(1.12);
    border-color: rgba(249, 249, 247, 0.6);
}

.cc-tp-video__play svg {
    margin-left: 3px;
    transition: transform 0.3s ease;
}

.cc-tp-video__play:hover svg {
    transform: scale(1.1);
}

/* Play button ring pulse on idle */
@keyframes cc-play-ring {
    0% { box-shadow: 0 0 0 0 rgba(249, 249, 247, 0.25); }
    70% { box-shadow: 0 0 0 24px rgba(249, 249, 247, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 249, 247, 0); }
}

.cc-tp-video__player:not(.is-playing):not(.is-paused) .cc-tp-video__play {
    animation: cc-play-ring 2.5s ease infinite;
}

/* Video progress bar */
.cc-tp-video__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cc-tp-video__player.is-playing .cc-tp-video__progress,
.cc-tp-video__player.is-paused .cc-tp-video__progress {
    opacity: 1;
}

.cc-tp-video__progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7a5900, #facb58);
    transition: width 0.25s linear;
}

/* ---- PLAYING STATE ---- */
.cc-tp-video__player.is-playing .cc-tp-video__poster {
    opacity: 0;
    pointer-events: none;
}

.cc-tp-video__player.is-playing .cc-tp-video__overlay {
    opacity: 0;
    pointer-events: none;
}

.cc-tp-video__player.is-playing .cc-tp-video__play {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    animation: none;
}

/* ---- PAUSED STATE ---- */
.cc-tp-video__player.is-paused .cc-tp-video__play {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    animation: none;
}

.cc-tp-video__player.is-paused .cc-tp-video__poster {
    opacity: 0;
    pointer-events: none;
}

.cc-tp-video__player.is-paused .cc-tp-video__overlay {
    opacity: 1;
    pointer-events: none;
    background: rgba(32, 63, 67, 0.35);
}

/* Native video element */
.cc-tp-video__player video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* YouTube iframe container — hidden until playing */
.cc-tp-video__yt-wrap,
.cc-tp-video__yt-wrap iframe {
    position: absolute !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    border: none;
}

.cc-tp-video__yt-wrap {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-tp-video__player.is-playing .cc-tp-video__yt-wrap,
.cc-tp-video__player.is-paused .cc-tp-video__yt-wrap {
    opacity: 1;
}

/* Cursor states */
.cc-tp-video__player.is-playing { cursor: pointer; }
.cc-tp-video__player.is-paused { cursor: pointer; }

/* ---------- VISUAL NARRATIVE — Asymmetrical Grid (Figma 24:436) ---------- */
.cc-tp-visual {
    background: #f9f9f7;
    padding: 128px 96px;
}

.cc-tp-visual__grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: end;
}

.cc-tp-visual__left {
    grid-column: 1 / span 7;
}

.cc-tp-visual__hero-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 48px;
}

.cc-tp-visual__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s ease;
}

.cc-tp-visual__hero-image:hover img {
    transform: scale(1.03);
}

.cc-tp-visual__title {
    font-family: var(--font-heading);
    font-size: 30px;
    font-weight: 200;
    color: #152a2d;
    line-height: 36px;
    margin-bottom: 16px;
}

.cc-tp-visual__desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 200;
    color: #3f4848;
    line-height: 24px;
    max-width: 448px;
}

.cc-tp-visual__right {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.cc-tp-visual__detail-image {
    overflow: hidden;
    background: #e8e8e6;
}

.cc-tp-visual__detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0);
    transition: filter 1s ease, transform 1s ease;
}

.cc-tp-visual__detail-image:hover img {
    filter: saturate(1);
    transform: scale(1.02);
}

.cc-tp-visual__stat {
    border-left: 1px solid rgba(191, 200, 200, 0.3);
    padding: 48px;
    min-height: 248px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cc-tp-visual__stat-num {
    font-family: var(--font-heading);
    font-size: 60px;
    font-weight: 200;
    color: rgba(240, 191, 89, 0.4);
    line-height: 60px;
    display: block;
    margin-bottom: 16px;
}

.cc-tp-visual__stat-label {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #1a1c1b;
    display: block;
    margin-bottom: 8px;
}

.cc-tp-visual__stat-desc {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 200;
    color: #3f4848;
    line-height: 24px;
    margin: 0;
}

/* ---------- WOW FACTOR — Micro-interactions ---------- */

/* Quote word-by-word reveal */
.cc-quote-word {
    will-change: opacity, transform;
}

/* Gallery 3D tilt */
.cc-tp-gallery__item {
    will-change: transform;
    transform-style: preserve-3d;
}

/* Smooth magnetic return on video play button */
.cc-tp-video__play {
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.3s ease,
                border-color 0.3s ease;
}

/* ---------- EDITORIAL GALLERY — Dark teal masonry (Figma 24:839) ---------- */
.cc-tp-gallery {
    background: #203f43;
    padding: 160px 48px;
}

.cc-tp-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    max-width: 1280px;
    margin: 0 auto;
}

.cc-tp-gallery__col {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Stagger the columns for masonry feel */
.cc-tp-gallery__col--1 { padding-bottom: 30px; }
.cc-tp-gallery__col--2 { padding-top: 80px; padding-bottom: 210px; }
.cc-tp-gallery__col--3 { padding-top: 0; }
.cc-tp-gallery__col--4 { padding-top: 128px; padding-bottom: 262px; }

/* Image items */
.cc-tp-gallery__item {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
}

.cc-tp-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    filter: saturate(0);
    transition: opacity 0.8s ease, filter 0.8s ease, transform 1.2s ease;
}

.cc-tp-gallery__item:hover img {
    opacity: 0.85;
    filter: saturate(0.4);
    transform: scale(1.04);
}

/* Height variants matching Figma */
.cc-tp-gallery__item--short { height: 320px; }
.cc-tp-gallery__item--tall { height: 500px; }
.cc-tp-gallery__item--hero { height: 600px; }
.cc-tp-gallery__item--medium { height: 400px; }
.cc-tp-gallery__item--medium-tall { height: 450px; }

/* ---------- PRODUCTS — "Curated Masterpieces" 4-col grid ---------- */
.cc-tp-products {
    background: #f0f0ee;
    padding: 128px 96px;
}

/* On the PDP, this section sits directly below the tailor card. Both used
   to share the same gray background, which made them bleed into a single
   gray slab with the tailor card's shadow extending into "nothing". Give
   the on-PDP variant a cream background instead so the gray tailor card
   pops cleanly and the shadow has somewhere to rest. */
body.single-product .cc-tp-products,
.cc-tp-products--on-pdp {
    background: #fffcfb;
    padding-top: 96px;
}

.cc-tp-products__inner {
    max-width: 1280px;
    margin: 0 auto;
}

.cc-tp-products__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 80px;
}

.cc-tp-products__eyebrow {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 4.8px;
    color: #7a5900;
    display: block;
    margin-bottom: 16px;
}

.cc-tp-products__title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 400;
    color: #152a2d;
}

.cc-tp-products__shopall {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 200;
    letter-spacing: 1.4px;
    color: #152a2d;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,54,54,0.2);
    padding-bottom: 9px;
}

.cc-tp-products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.cc-tp-products__image {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    margin-bottom: 24px;
}

.cc-tp-products__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}

.cc-tp-products__item:hover .cc-tp-products__image img {
    transform: scale(1.05);
}

.cc-tp-products__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 200;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    padding: 4px 12px;
    line-height: 15px;
}

.cc-tp-products__badge--auction {
    background: #facb58;
    color: #745400;
}

.cc-tp-products__badge--new {
    background: #152a2d;
    color: #f9f9f7;
}

.cc-tp-products__name {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 400;
    color: #1a1c1b;
    margin-bottom: 4px;
}

.cc-tp-products__material {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 200;
    color: #3f4848;
    margin-bottom: 16px;
}

.cc-tp-products__price {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 200;
    color: #152a2d;
}

/* ---------- Per-section animation variants ---------- */

/* All elements visible by default — no broken scroll-to-reveal */
[data-anim] {
    opacity: 1;
}

/* Chapter I image — parallax-like slow reveal */
.cc-tp-chapter1__image img {
    transition: transform 1.2s ease;
}

.cc-tp-chapter1[data-story-section].is-section-active .cc-tp-chapter1__image img {
    transform: scale(1.04);
}

/* Hero entrance keyframes */
@keyframes cc-hero-title-in {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes cc-hero-subtitle-in {
    0% { opacity: 0; transform: translateY(20px); letter-spacing: 12px; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: 6px; }
}

@keyframes cc-hero-cta-in {
    0% { opacity: 0; transform: translateY(15px); }
    100% { opacity: 1; transform: translateY(0); }
}

.cc-tp-hero .cc-tp-hero__title {
    animation: cc-hero-title-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both;
}

.cc-tp-hero .cc-tp-hero__subtitle {
    animation: cc-hero-subtitle-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.6s both;
}

.cc-tp-hero .cc-tp-hero__cta {
    animation: cc-hero-cta-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1s both;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .cc-tp-hero__title { font-size: 72px; }
    .cc-tp-hero__name { font-size: 30px; }
    .cc-tp-chapter1 { flex-direction: column; min-height: auto; }
    .cc-tp-chapter1__image { height: 50vh; }
    .cc-tp-chapter1__text { padding: 64px; }
    .cc-tp-chapter2 { padding: 96px 48px; }
    .cc-tp-chapter2__media { width: 100%; max-width: 500px; }
    .cc-tp-chapter2__card { position: relative; bottom: auto; left: auto; margin-top: -48px; }
    .cc-tp-video { padding: 96px 48px; }
    .cc-tp-visual { padding: 96px 48px; }
    .cc-tp-visual__grid { grid-template-columns: 1fr; gap: 64px; }
    .cc-tp-visual__left { grid-column: 1; }
    .cc-tp-visual__right { grid-column: 1; }
    .cc-tp-gallery { padding: 96px 32px; }
    .cc-tp-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    .cc-tp-gallery__col--1,
    .cc-tp-gallery__col--2,
    .cc-tp-gallery__col--3,
    .cc-tp-gallery__col--4 { padding: 0; }
    .cc-tp-gallery__item--short,
    .cc-tp-gallery__item--tall,
    .cc-tp-gallery__item--hero,
    .cc-tp-gallery__item--medium,
    .cc-tp-gallery__item--medium-tall { height: 300px; }
    .cc-tp-products { padding: 96px 48px; }
    .cc-tp-products__grid { grid-template-columns: repeat(2, 1fr); }
    .cc-tailor-archive__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .cc-tp-hero__title { font-size: 48px; letter-spacing: -1px; }
    .cc-tp-hero__name { font-size: 22px; margin-bottom: 14px; }
    .cc-tp-hero__subtitle { font-size: 14px; letter-spacing: 3px; }
    .cc-tp-chapter1__heading { font-size: 36px; }
    .cc-tp-chapter1__text { padding: 48px 24px; }
    .cc-tp-chapter2 { padding: 64px 24px; }
    .cc-tp-chapter2__card { padding: 32px; }
    .cc-tp-video { padding: 64px 24px; }
    .cc-tp-video__title { font-size: 32px; }
    .cc-tp-visual { padding: 64px 24px; }
    .cc-tp-visual__title { font-size: 24px; }
    .cc-tp-visual__stat { padding: 32px; min-height: auto; }
    .cc-tp-visual__stat-num { font-size: 40px; line-height: 40px; }
    .cc-tp-gallery { padding: 64px 16px; }
    .cc-tp-gallery__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .cc-tp-gallery__item--short,
    .cc-tp-gallery__item--tall,
    .cc-tp-gallery__item--hero,
    .cc-tp-gallery__item--medium,
    .cc-tp-gallery__item--medium-tall { height: 200px; }
    .cc-tp-products { padding: 64px 24px; }
    .cc-tp-products__grid { grid-template-columns: 1fr; }
    .cc-tp-products__header { flex-direction: column; gap: 24px; align-items: flex-start; }
    .cc-tailor-archive__card { grid-template-columns: 1fr; }
}

/* ==========================================================================
   PDP-ONLY: Curated Masterpieces condensed mobile carousel
   Only on single product pages (auction + regular). Tailor profile keeps its
   full-width stacked treatment because the tailor's own portfolio gets to
   breathe. Body class .single-product is added by WooCommerce automatically.
   ========================================================================== */
@media (max-width: 768px) {
    body.single-product .cc-tp-products { padding: 48px 0; }
    body.single-product .cc-tp-products__inner { padding: 0; }
    body.single-product .cc-tp-products__header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        margin: 0 24px 32px;
    }
    body.single-product .cc-tp-products__title { font-size: 32px; }
    body.single-product .cc-tp-products__eyebrow { font-size: 10px; letter-spacing: 3px; margin-bottom: 8px; }
    body.single-product .cc-tp-products__grid {
        display: flex;
        grid-template-columns: none;
        gap: 16px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-inline-start: 24px;
        padding: 4px 24px 4px;
        margin: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.single-product .cc-tp-products__grid::-webkit-scrollbar { display: none; }
    body.single-product .cc-tp-products__item {
        flex: 0 0 72%;
        max-width: 300px;
        scroll-snap-align: start;
    }
    body.single-product .cc-tp-products__image {
        aspect-ratio: 3 / 4;
        margin-bottom: 12px;
    }
    body.single-product .cc-tp-products__name { font-size: 16px; }
    body.single-product .cc-tp-products__material { font-size: 13px; margin-bottom: 6px; }
    body.single-product .cc-tp-products__price { font-size: 14px; }
    body.single-product .cc-tp-products__badge { font-size: 9px; padding: 3px 8px; top: 10px; right: 10px; }
}

/* Reduced motion — disable all creative animations */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
        animation: none !important;
    }
    .cc-tp-hero .cc-tp-hero__title,
    .cc-tp-hero .cc-tp-hero__subtitle,
    .cc-tp-hero .cc-tp-hero__cta {
        animation: none !important;
        opacity: 1;
    }
}