/* ==========================================================================
   Carley Connection — Comprehensive Responsive Overhaul
   Mobile-first refinements for masterclass quality across all devices
   ========================================================================== */

/* ==========================================================================
   BREAKPOINT STRATEGY
   - <= 375px: Small mobile (iPhone SE)
   - <= 480px: Mobile
   - <= 768px: Large mobile / small tablet
   - <= 1024px: Tablet / small desktop
   - <= 1200px: Standard desktop
   - > 1200px: Large desktop
   ========================================================================== */

/* ==========================================================================
   FIX: Eliminate scroll-triggered white-space delay on hero/banner sections
   When scrolling fast, cc-animate's opacity:0 initial state can leave
   gaps before the IntersectionObserver fires. Make critical content
   visible immediately on these sections.
   ========================================================================== */

/* Tailor cards on homepage and hero-tier banners — instant visibility.
   NOTE: scoped away from .cc-tailors-section__grid so the mobile centered
   carousel can dim non-snapped cards without fighting these !importants. */
.cc-hero,
.cc-hero__bg,
.cc-hero__content,
.cc-hero__eyebrow,
.cc-hero__title,
.cc-hero__description,
.cc-hero__cta-group,
.cc-tailors-section__header {
    opacity: 1 !important;
    transform: none !important;
}

/* Tailor card initial visibility — outside the carousel only. Inside the
   carousel, the centered-auto-carousel JS manages is-snapped/dimmed state. */
.cc-tailor-card:not(.cc-tailors-section__grid .cc-tailor-card),
.cc-tailor-card:not(.cc-tailors-section__grid .cc-tailor-card) .cc-tailor-card__image,
.cc-tailor-card:not(.cc-tailors-section__grid .cc-tailor-card) .cc-tailor-card__body {
    opacity: 1;
    transform: none;
}

/* Show all images immediately on hero/tailor cards */
.cc-tailor-card img,
.cc-hero__bg,
.cc-spotlight__image img {
    opacity: 1 !important;
}

/* ==========================================================================
   SPOTLIGHT — mobile/tablet reductions
   ========================================================================== */
@media (max-width: 1024px) {
    .cc-spotlight {
        padding-top: clamp(3rem, 8vw, 5rem) !important;
        padding-bottom: clamp(3rem, 8vw, 5rem) !important;
    }
    .cc-spotlight__image img,
    .cc-spotlight__placeholder {
        height: auto !important;
        aspect-ratio: 4 / 5;
        max-height: 56vh;
    }
    .cc-spotlight__bid-card {
        bottom: -1rem !important;
        right: 0 !important;
        left: auto !important;
        padding: 20px 22px !important;
        min-width: 180px !important;
    }
    .cc-spotlight__bid-amount {
        font-size: 26px !important;
        line-height: 30px !important;
    }
}

@media (max-width: 640px) {
    .cc-spotlight__image img,
    .cc-spotlight__placeholder {
        aspect-ratio: 4 / 5;
        max-height: 70vh;
    }
    .cc-spotlight__bid-card {
        bottom: -0.75rem !important;
        right: 0.75rem !important;
    }
    .cc-spotlight__title {
        font-size: clamp(28px, 7vw, 40px) !important;
    }
    .cc-spotlight__desc {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   FLUID TYPOGRAPHY — scales smoothly across all viewports
   ========================================================================== */
:root {
    --fluid-h1: clamp(2.25rem, 6vw + 1rem, 8rem);
    --fluid-h2: clamp(2rem, 4vw + 1rem, 6rem);
    --fluid-h3: clamp(1.5rem, 3vw + 1rem, 3rem);
    --fluid-body: clamp(0.9375rem, 0.5vw + 0.75rem, 1.125rem);
}

/* Smooth scrolling for the entire site */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Prevent horizontal scroll on mobile */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ==========================================================================
   AUCTION HERO — Full responsive overhaul
   ========================================================================== */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
    .cc-auction-pdp__layout {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }

    .cc-auction-pdp__gallery {
        height: 60vh;
        min-height: 480px;
    }

    .cc-auction-pdp__main-image {
        height: 100%;
    }

    .cc-auction-pdp__info {
        padding: 48px 32px !important;
    }

    .cc-auction-pdp__title {
        font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -2px !important;
    }

    .cc-auction-pdp__live-badge,
    .cc-auction-pdp__ended-badge,
    .cc-auction-pdp__upcoming-badge {
        top: 24px !important;
        right: 24px !important;
        padding: 12px 18px !important;
    }

    .cc-auction-pdp__thumbs {
        bottom: 24px !important;
        left: 24px !important;
    }

    .cc-auction-pdp__thumb {
        width: 64px !important;
        height: 80px !important;
    }
}

/* Mobile: <= 768px */
@media (max-width: 768px) {
    .cc-auction-pdp__gallery {
        height: 50vh;
        min-height: 380px;
    }

    .cc-auction-pdp__info {
        padding: 32px 20px !important;
        gap: 20px !important;
    }

    .cc-auction-pdp__title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        line-height: 1.05 !important;
    }

    .cc-auction-pdp__desc {
        font-size: 15px !important;
    }

    .cc-auction-pdp__bid-card {
        padding: 24px !important;
    }

    .cc-auction-pdp__bid-amount {
        font-size: 36px !important;
    }

    .cc-auction-pdp__live-badge,
    .cc-auction-pdp__ended-badge,
    .cc-auction-pdp__upcoming-badge {
        top: 16px !important;
        right: 16px !important;
        padding: 10px 14px !important;
        font-size: 11px;
    }

    .cc-auction-pdp__live-timer-value {
        font-size: 16px !important;
    }

    .cc-auction-pdp__ended-final {
        font-size: 16px !important;
        padding-left: 12px !important;
    }

    .cc-auction-pdp__thumbs {
        gap: 8px !important;
        right: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .cc-auction-pdp__thumbs::-webkit-scrollbar { display: none; }

    .cc-auction-pdp__thumb {
        width: 48px !important;
        height: 60px !important;
        flex: 0 0 auto;
    }

    .cc-auction-pdp__bid-input-row {
        flex-wrap: wrap;
    }

    .cc-auction-pdp__bid-input {
        font-size: 20px !important;
    }
}

/* Small mobile: <= 480px */
@media (max-width: 480px) {
    .cc-auction-pdp__gallery {
        height: 60vh;
        min-height: 320px;
    }

    .cc-auction-pdp__info {
        padding: 24px 16px !important;
    }

    .cc-auction-pdp__title {
        font-size: clamp(1.75rem, 11vw, 2.5rem) !important;
        letter-spacing: -1px !important;
    }

    .cc-auction-pdp__bid-card {
        padding: 20px !important;
    }
}

/* ==========================================================================
   PRODUCT HERO (single-regular)
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-pdp__layout {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
        padding: 0 32px !important;
    }

    .cc-pdp__main-image {
        max-height: 70vh;
        box-shadow: 20px 20px 0 0 rgba(32, 63, 67, 0.05) !important;
    }

    .cc-pdp__title {
        font-size: clamp(2.5rem, 7vw, 5rem) !important;
        line-height: 1.05 !important;
    }

    .cc-pdp__info {
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .cc-pdp {
        padding-top: 80px !important;
    }

    .cc-pdp__layout {
        gap: 32px !important;
        padding: 0 16px !important;
    }

    .cc-pdp__main-image {
        max-height: 60vh;
        box-shadow: none !important;
    }

    .cc-pdp__thumbs-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    .cc-pdp__thumb-item--right {
        margin-top: 0 !important;
    }

    .cc-pdp__thumb-item--left,
    .cc-pdp__thumb-item--right {
        height: 200px !important;
    }

    .cc-pdp__title {
        font-size: clamp(2rem, 9vw, 3rem) !important;
        letter-spacing: -1px !important;
    }

    .cc-pdp__price {
        font-size: 24px !important;
    }

    .cc-pdp__price-row {
        flex-wrap: wrap;
        gap: 12px !important;
    }

    .cc-pdp__header {
        padding-left: 24px !important;
        padding-top: 4px !important;
    }

    .cc-pdp__field-grid {
        grid-template-columns: 1fr !important;
    }

    .cc-pdp__actions {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .cc-pdp__add-btn,
    .cc-pdp__buy-btn {
        padding: 18px !important;
        font-size: 11px !important;
        letter-spacing: 3px !important;
    }

    .cc-pdp__qty-delivery {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px !important;
    }

    .cc-pdp__delivery {
        font-size: 11px !important;
    }

    .cc-pdp__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cc-pdp__tabs::-webkit-scrollbar {
        display: none;
    }

    .cc-pdp__tab {
        white-space: nowrap;
        padding: 14px 20px !important;
    }
}

@media (max-width: 480px) {
    .cc-pdp__title {
        font-size: clamp(1.75rem, 11vw, 2.5rem) !important;
    }

    .cc-pdp__main-image {
        max-height: 50vh;
    }

    .cc-pdp__thumb-item--left,
    .cc-pdp__thumb-item--right {
        height: 160px !important;
    }
}

/* ==========================================================================
   TAILOR HERO — Fix text overlap with portrait
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-tp-hero__title {
        font-size: clamp(3rem, 8vw, 5rem) !important;
        letter-spacing: -1.5px !important;
        line-height: 1 !important;
    }

    .cc-tp-hero__subtitle {
        font-size: 16px !important;
        letter-spacing: 4px !important;
    }

    .cc-tp-hero__cta {
        padding: 16px 36px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 768px) {
    .cc-tp-hero__title {
        font-size: clamp(2.25rem, 11vw, 3.5rem) !important;
        letter-spacing: -1px !important;
        padding: 0 16px !important;
    }

    .cc-tp-hero__subtitle {
        font-size: 12px !important;
        letter-spacing: 3px !important;
        padding: 0 24px !important;
    }

    .cc-tp-hero__content {
        padding: 0 16px !important;
    }
}

/* ==========================================================================
   CHAPTER II — Fix card overlap on tablet
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-tp-chapter2 {
        padding: 64px 32px !important;
    }

    .cc-tp-chapter2__media {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    .cc-tp-chapter2__card {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        margin: -64px auto 0 !important;
        max-width: 90% !important;
        padding: 32px !important;
    }

    .cc-tp-chapter2__quote {
        align-self: center !important;
        max-width: 600px !important;
        margin: 48px auto 0 !important;
        text-align: center !important;
    }

    .cc-tp-chapter2__quote p {
        text-align: center !important;
        font-size: 24px !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 768px) {
    .cc-tp-chapter2 {
        padding: 48px 16px !important;
    }

    .cc-tp-chapter2__card {
        padding: 24px !important;
        max-width: 95% !important;
    }

    .cc-tp-chapter2__card-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .cc-tp-chapter2__quote p {
        font-size: 20px !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================================================
   CHAPTER I — Better mobile stack
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-tp-chapter1__image {
        height: 50vh !important;
        min-height: 320px !important;
    }

    .cc-tp-chapter1__text {
        padding: 48px 32px !important;
    }

    .cc-tp-chapter1__heading {
        font-size: clamp(2rem, 5vw, 3.5rem) !important;
        line-height: 1.05 !important;
    }
}

@media (max-width: 768px) {
    .cc-tp-chapter1__image {
        height: 40vh !important;
        min-height: 280px !important;
    }

    .cc-tp-chapter1__text {
        padding: 40px 20px !important;
    }

    .cc-tp-chapter1__heading {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }

    .cc-tp-chapter1__body p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ==========================================================================
   CURATED MASTERPIECES — Fix grid on tablet
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-tp-products,
    .cc-tp-products--on-pdp {
        padding: 64px 32px !important;
    }

    .cc-tp-products .cc-tp-products__grid,
    .cc-tp-products--on-pdp .cc-tp-products__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
    }

    .cc-tp-products__title {
        font-size: clamp(2rem, 4vw, 3rem) !important;
    }
}

@media (max-width: 768px) {
    .cc-tp-products,
    .cc-tp-products--on-pdp {
        padding: 48px 16px 64px !important;
    }

    .cc-tp-products__header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 32px !important;
    }

    .cc-tp-products .cc-tp-products__grid,
    .cc-tp-products--on-pdp .cc-tp-products__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    .cc-tp-products__name {
        font-size: 16px !important;
    }

    .cc-tp-products__material {
        font-size: 12px !important;
    }

    .cc-tp-products__price {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .cc-tp-products .cc-tp-products__grid,
    .cc-tp-products--on-pdp .cc-tp-products__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* ==========================================================================
   STORY BLOCKS — Universal responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-quote-block {
        padding: 80px 32px !important;
    }

    .cc-quote-block__text p {
        font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
        line-height: 1.4 !important;
    }

    .cc-stats-row {
        padding: 64px 32px !important;
    }

    .cc-editorial-split,
    .cc-text-and-image {
        padding: 64px 32px !important;
    }

    .cc-video-block {
        padding: 64px 32px !important;
    }

    .cc-video-block__heading {
        font-size: clamp(2rem, 4vw, 3rem) !important;
    }
}

@media (max-width: 768px) {
    .cc-quote-block {
        padding: 56px 20px !important;
    }

    .cc-quote-block__mark {
        font-size: 80px !important;
    }

    .cc-quote-block__text p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    .cc-stats-row {
        padding: 48px 20px !important;
    }

    .cc-stats-row__items {
        flex-direction: column !important;
        gap: 32px !important;
    }

    .cc-stats-row__value {
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }

    .cc-editorial-split__inner,
    .cc-text-and-image .cc-editorial-split__inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .cc-editorial-split__heading {
        font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    }

    .cc-video-block {
        padding: 48px 16px !important;
    }

    .cc-video-block__heading {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
    }

    .cc-video-block__player {
        aspect-ratio: 4 / 3;
    }

    .cc-video-block__play {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ==========================================================================
   STORY BLOCK SPACING — Smaller gaps on mobile
   ========================================================================== */

@media (max-width: 768px) {
    .cc-story-block--spacing-both { margin-top: 32px !important; margin-bottom: 32px !important; }
    .cc-story-block--spacing-top { margin-top: 32px !important; }
    .cc-story-block--spacing-bottom { margin-bottom: 32px !important; }
}

/* ==========================================================================
   TAILOR PROFILE CARD (on product pages)
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-pdp-tailor {
        padding: 48px 32px !important;
        margin: 48px auto 0 !important;
    }

    .cc-pdp-tailor__card {
        flex-direction: column !important;
    }

    .cc-pdp-tailor__portrait {
        width: 100% !important;
        height: 320px !important;
    }

    .cc-pdp-tailor__content {
        padding: 32px !important;
    }
}

@media (max-width: 768px) {
    .cc-pdp-tailor {
        padding: 32px 16px !important;
    }

    .cc-pdp-tailor__portrait {
        height: 240px !important;
    }

    .cc-pdp-tailor__content {
        padding: 24px !important;
        gap: 16px !important;
    }

    .cc-pdp-tailor__name {
        font-size: 28px !important;
    }

    .cc-pdp-tailor__quote p {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   VISUAL NARRATIVE — Mobile improvements
   ========================================================================== */

@media (max-width: 768px) {
    .cc-tp-visual__hero-image {
        margin-bottom: 32px !important;
    }

    .cc-tp-visual__detail-image {
        aspect-ratio: 4 / 5;
    }

    .cc-tp-visual__title {
        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .cc-tp-visual__desc {
        font-size: 15px !important;
    }

    .cc-tp-visual__stat-num {
        font-size: 56px !important;
    }
}

/* ==========================================================================
   EDITORIAL GALLERY (Tailor)
   ========================================================================== */

@media (max-width: 480px) {
    .cc-tp-gallery {
        padding: 48px 12px !important;
    }

    .cc-tp-gallery__grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .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: 240px !important;
    }
}

/* ==========================================================================
   VIDEO SECTION (Tailor "Atelier in Motion")
   ========================================================================== */

@media (max-width: 768px) {
    .cc-tp-video {
        padding: 48px 16px !important;
    }

    .cc-tp-video__title {
        font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
    }

    .cc-tp-video__player {
        aspect-ratio: 16 / 10;
    }

    .cc-tp-video__play {
        width: 72px !important;
        height: 72px !important;
    }
}

/* ==========================================================================
   IMAGE OPTIMIZATION — Better object-fit, lazy loading defaults
   ========================================================================== */

img {
    max-width: 100%;
    height: auto;
    -webkit-touch-callout: none;
}

/* Prevent images from breaking layouts */
.cc-tp-hero__bg,
.cc-pdp__main-image img,
.cc-auction-pdp__main-image img {
    will-change: transform;
}

/* ==========================================================================
   TOUCH TARGETS — Min 44x44px for accessibility
   ========================================================================== */

@media (max-width: 768px) {
    button,
    .cc-pdp__qty-btn,
    .cc-auction-pdp__bid-step,
    .cc-pdp__swatch,
    .cc-pdp__size-btn,
    .cc-pdp__length-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .cc-pdp__swatch-dot {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ==========================================================================
   HORIZONTAL OVERFLOW PREVENTION
   ========================================================================== */

section,
.cc-storytelling,
.cc-story-block {
    max-width: 100vw;
    overflow-x: clip;
}

/* ==========================================================================
   IMPROVED SCROLL BEHAVIOR
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
    /* Touch devices — disable hover effects that don't make sense */
    .cc-tp-products__item:hover .cc-tp-products__image img,
    .cc-pdp-curation__item:hover .cc-pdp-curation__image img {
        transform: none;
    }
}

/* ==========================================================================
   FOOTER — Properly centered on mobile (every element)
   ========================================================================== */

@media (max-width: 768px) {
    .cc-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }

    .cc-footer__brand,
    .cc-footer__col,
    .cc-footer__newsletter {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .cc-footer__logo,
    .cc-footer__logo-text {
        text-align: center !important;
    }

    .cc-footer__tagline {
        text-align: center !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    .cc-footer__heading {
        text-align: center !important;
    }

    .cc-footer__links {
        text-align: center !important;
        list-style: none !important;
        padding: 0 !important;
    }

    .cc-footer__links li {
        text-align: center !important;
    }

    .cc-footer__links a {
        text-align: center !important;
    }

    .cc-footer__newsletter-form {
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   ORIGINS / LOCATIONS SLIDER — Mobile swipeable with snap points
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-origins__grid-wrap {
        position: relative;
        padding: 0 !important;
    }

    /* Carousel: one card visible at a time, centered, snap to one */
    .cc-origins__grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always; /* Force one-card-at-a-time snapping */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Equal padding on both sides centers the active card */
        padding: 4px 12% 16px !important;
        scroll-padding-inline: 12%;
    }

    .cc-origins__grid::-webkit-scrollbar {
        display: none;
    }

    .cc-origins__card,
    .cc-origins__card--1,
    .cc-origins__card--2,
    .cc-origins__card--3,
    .cc-origins__card--4,
    .cc-origins__card--5,
    .cc-origins__card--6 {
        flex: 0 0 76% !important;
        max-width: 320px !important;
        /* Left-aligned carousel (2026-07-17): first card lines up with the
           section heading's gutter; swiping snaps each card to that edge. */
        scroll-snap-align: start !important;
        margin: 0 !important;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .cc-origins__nav {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .cc-origins__nav--prev,
    .cc-origins__nav--next {
        display: flex !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 16px rgba(32, 63, 67, 0.18);
        border-radius: 50%;
        border: none;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        color: #203f43;
    }

    .cc-origins__nav--prev {
        left: 12px !important;
    }

    .cc-origins__nav--next {
        right: 12px !important;
    }

    .cc-origins__nav--disabled {
        opacity: 0.4 !important;
        pointer-events: none;
    }
}

@media (max-width: 768px) {
    .cc-origins__grid {
        /* Grid already sits inside the padded .cc-container — zero extra
           padding so the first card aligns exactly with the heading gutter. */
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-padding-inline: 0;
    }

    .cc-origins__card {
        flex: 0 0 72% !important;
    }
}

@media (max-width: 480px) {
    .cc-origins__grid {
        /* Grid already sits inside the padded .cc-container — zero extra
           padding so the first card aligns exactly with the heading gutter. */
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-padding-inline: 0;
    }

    .cc-origins__card {
        flex: 0 0 80% !important;
    }
}

/* On mobile: side cards keep full image visibility, only hide their text labels */
@media (max-width: 1024px) {
    .cc-origins__card {
        position: relative;
    }

    /* Hide text labels on side cards — they're in scroll periphery */
    .cc-origins__card .cc-origins__label,
    .cc-origins__card .cc-origins__name,
    .cc-origins__card .cc-origins__desc {
        opacity: 0;
        transition: opacity 0.35s ease;
        pointer-events: none;
    }

    /* Centered card shows its label */
    .cc-origins__card.is-snapped .cc-origins__label,
    .cc-origins__card.is-snapped .cc-origins__name,
    .cc-origins__card.is-snapped .cc-origins__desc {
        opacity: 1;
        pointer-events: auto;
    }

    /* Side cards keep full image — no dimming. Also reset the cc-animate
       translateY(30px) since we're forcing opacity:1 and would otherwise
       leave the cards shifted 30px below their natural position. */
    .cc-origins__card,
    .cc-origins__card:not(.is-snapped) {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   ACTIVE BIDDING — Mobile swipeable slider
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-active-bidding__grid-wrap {
        position: relative;
    }

    .cc-active-bidding__grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 16px 24px !important;
        scroll-padding-inline: 16px;
        margin-left: -16px !important;
        margin-right: -16px !important;
    }

    .cc-active-bidding__grid::-webkit-scrollbar {
        display: none;
    }

    .cc-active-bidding__grid .cc-auction-card {
        flex: 0 0 82% !important;
        max-width: 360px !important;
        scroll-snap-align: center !important;
        margin: 0 !important;
    }

    /* Center the lone card when there is only one auction (no slider needed) */
    .cc-active-bidding__grid:not(:has(.cc-auction-card + .cc-auction-card)) {
        justify-content: center !important;
    }

    /* Hide nav arrows when there is nothing to scroll (single card etc.) */
    .cc-active-bidding__grid-wrap.is-no-overflow .cc-active-bidding__nav {
        display: none !important;
    }

    .cc-active-bidding__nav {
        display: flex !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 5;
        width: 44px !important;
        height: 44px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow: 0 4px 16px rgba(32, 63, 67, 0.18);
        border-radius: 50%;
        border: none !important;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        color: #203f43 !important;
    }

    .cc-active-bidding__nav--prev { left: 12px !important; }
    .cc-active-bidding__nav--next { right: 12px !important; }

    .cc-active-bidding__nav--disabled {
        opacity: 0.4 !important;
        pointer-events: none;
    }
}

@media (max-width: 480px) {
    .cc-active-bidding__grid .cc-auction-card {
        flex: 0 0 86% !important;
    }
}

/* ==========================================================================
   FEATURED TAILORS — Mobile swipeable slider
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-tailors-section__grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        scroll-snap-stop: always;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 16px 24px !important;
        scroll-padding-inline: 16px;
        margin-left: -16px !important;
        margin-right: -16px !important;
    }
    .cc-tailors-section__grid::-webkit-scrollbar { display: none; }
    .cc-tailors-section__grid .cc-tailor-card {
        flex: 0 0 76% !important;
        max-width: 340px !important;
        scroll-snap-align: center !important;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    /* Non-snapped cards are dimmed, scaled down and text-only hidden — only
       the centered card gets full presence. Matches the Locations carousel.
       !important used defensively against the hero-section visibility
       overrides above which apply globally. */
    .cc-tailors-section__grid .cc-tailor-card:not(.is-snapped) {
        opacity: 0.38 !important;
        transform: scale(0.92) !important;
    }
    .cc-tailors-section__grid .cc-tailor-card:not(.is-snapped) .cc-tailor-card__body {
        opacity: 0 !important;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    .cc-tailors-section__grid .cc-tailor-card.is-snapped {
        opacity: 1 !important;
        transform: scale(1) !important;
    }
    .cc-tailors-section__grid .cc-tailor-card.is-snapped .cc-tailor-card__body {
        opacity: 1 !important;
        transition: opacity 0.4s ease 0.1s;
    }

    /* Top & bottom padding on the grid so scale(0.92) scaling isn't clipped,
       and generous scroll padding so snap center aligns cleanly with viewport. */
    .cc-tailors-section__grid {
        padding-top: 16px !important;
        padding-bottom: 32px !important;
        scroll-padding-inline: 50% !important;
    }
}

/* Respect reduced-motion users — no auto-slide animation */
@media (prefers-reduced-motion: reduce) {
    .cc-tailors-section__grid .cc-tailor-card,
    .cc-tailors-section__grid .cc-tailor-card__body {
        transition: none !important;
    }
}

/* ==========================================================================
   SEASONAL EDIT — Mobile swipeable slider
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-seasonal__grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 14px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 16px 24px !important;
        scroll-padding-inline: 16px;
        margin-left: -16px !important;
        margin-right: -16px !important;
    }
    .cc-seasonal__grid::-webkit-scrollbar { display: none; }
    .cc-seasonal__grid .cc-product-card {
        flex: 0 0 65% !important;
        max-width: 280px !important;
        scroll-snap-align: start !important;
    }
}

/* ==========================================================================
   UPCOMING AUCTIONS — Mobile swipeable slider with dot indicators
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-upcoming__grid {
        display: flex !important;
        flex-direction: row !important;
        gap: 16px !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 16px 24px !important;
        scroll-padding: 16px;
        margin-left: -16px !important;
        margin-right: -16px !important;
    }

    .cc-upcoming__grid::-webkit-scrollbar {
        display: none;
    }

    .cc-upcoming__card {
        flex: 0 0 85% !important;
        max-width: 360px !important;
        scroll-snap-align: start;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    .cc-upcoming__card {
        flex: 0 0 88% !important;
    }
}

/* ==========================================================================
   SLIDER THUMBNAIL DOTS — Circles showing actual images
   ========================================================================== */

.cc-mobile-slider-dots {
    display: none;
    justify-content: center;
    gap: 12px;
    margin: 24px auto 0;
    padding: 8px 16px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.cc-mobile-slider-dots::-webkit-scrollbar {
    display: none;
}

.cc-mobile-slider-dots__dot {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(32, 63, 67, 0.15);
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    padding: 0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    filter: grayscale(60%) brightness(0.85);
    opacity: 0.65;
}

.cc-mobile-slider-dots__dot:active {
    transform: scale(0.92);
}

/* Active state — scale up, full color, glow ring */
.cc-mobile-slider-dots__dot.is-active {
    width: 52px;
    height: 52px;
    border-color: #facb58;
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    box-shadow: 0 0 0 4px rgba(250, 203, 88, 0.18),
                0 6px 16px rgba(32, 63, 67, 0.25);
    transform: translateY(-2px);
}

/* Animated ring around active dot */
.cc-mobile-slider-dots__dot.is-active::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(250, 203, 88, 0.5);
    animation: cc-dot-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes cc-dot-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.08); opacity: 0; }
}

@media (max-width: 1024px) {
    .cc-mobile-slider-dots {
        display: flex;
    }

    /* Dark teal sections — adapt colors */
    .cc-section--bg-dark .cc-mobile-slider-dots__dot,
    .cc-upcoming .cc-mobile-slider-dots__dot {
        background-color: rgba(250, 203, 88, 0.15);
    }

    .cc-section--bg-dark .cc-mobile-slider-dots__dot.is-active,
    .cc-upcoming .cc-mobile-slider-dots__dot.is-active {
        border-color: #facb58;
        box-shadow: 0 0 0 4px rgba(250, 203, 88, 0.25),
                    0 6px 16px rgba(0, 0, 0, 0.3);
    }
}

/* For sliders without thumbnail images (fallback) */
.cc-mobile-slider-dots__dot:not([style*="background-image"]) {
    background: rgba(32, 63, 67, 0.25);
}

.cc-mobile-slider-dots__dot.is-active:not([style*="background-image"]) {
    background: #203f43;
}

/* ==========================================================================
   MOBILE SHEET (Menu) — Bottom slide-up panel
   ========================================================================== */

.cc-mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
    visibility: hidden;
}

.cc-mobile-sheet[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}

.cc-mobile-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 63, 67, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-mobile-sheet[aria-hidden="false"] .cc-mobile-sheet__backdrop {
    opacity: 1;
}

.cc-mobile-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, #fbfaf6 0%, #f5f3ec 100%);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    padding: 10px 22px calc(96px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -28px 70px rgba(32, 63, 67, 0.28);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.cc-mobile-sheet[aria-hidden="false"] .cc-mobile-sheet__panel {
    transform: translateY(0);
}

.cc-mobile-sheet__handle {
    width: 44px;
    height: 4px;
    background: #cdc6b6;
    border-radius: 2px;
    margin: 0 auto 14px;
    opacity: 0.7;
}

/* Account row — top section.
   Logged-out: stacks vertically (greet on top, two pill CTAs below) so nothing truncates.
   Logged-in: horizontal row (greet on left, "My Atelier" on right). */
.cc-mobile-sheet__account {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(32, 63, 67, 0.08);
    border-radius: 14px;
    margin-bottom: 22px;
    box-shadow: 0 2px 12px rgba(32, 63, 67, 0.04);
}

/* When the row contains a single CTA (logged-in), put it on the right. */
.cc-mobile-sheet__account:has(> .cc-mobile-sheet__account-cta:only-of-type) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.cc-mobile-sheet__account-greet {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cc-mobile-sheet__account-eyebrow {
    font-family: var(--font-body, sans-serif);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #707978;
}

.cc-mobile-sheet__account-name {
    font-family: var(--font-heading, serif);
    font-size: 18px;
    font-style: italic;
    font-weight: 400;
    color: #203f43;
    line-height: 1.25;
    /* No truncation — let it wrap if needed */
}

.cc-mobile-sheet__account-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cc-mobile-sheet__account-actions .cc-mobile-sheet__account-cta {
    flex: 1;
    justify-content: center;
}

.cc-mobile-sheet__account-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.cc-mobile-sheet__account-cta--primary,
.cc-mobile-sheet__account-cta:not(.cc-mobile-sheet__account-cta--ghost) {
    background: #203f43;
    color: #fff;
}

.cc-mobile-sheet__account-cta--primary:active,
.cc-mobile-sheet__account-cta:not(.cc-mobile-sheet__account-cta--ghost):active {
    background: #152a2d;
    transform: scale(0.97);
}

.cc-mobile-sheet__account-cta--ghost {
    background: transparent;
    color: #203f43;
    border: 1px solid rgba(32, 63, 67, 0.25);
}

.cc-mobile-sheet__account-cta--ghost:active {
    background: rgba(32, 63, 67, 0.06);
}

/* Section eyebrow */
.cc-mobile-sheet__eyebrow {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #946514;
    margin: 0 4px 8px;
}

/* Editorial nav list */
.cc-mobile-sheet__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 24px;
    padding: 0;
}

.cc-mobile-sheet__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 4px;
    color: #203f43;
    text-decoration: none;
    border-bottom: 1px solid rgba(32, 63, 67, 0.08);
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.cc-mobile-sheet__nav-link:last-child {
    border-bottom: none;
}

.cc-mobile-sheet__nav-link:active {
    transform: translateX(4px);
}

.cc-mobile-sheet__nav-link-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cc-mobile-sheet__nav-link-text em {
    font-family: var(--font-heading, serif);
    font-size: 22px;
    font-weight: 400;
    font-style: italic;
    color: #203f43;
    line-height: 1.15;
    letter-spacing: -0.3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cc-mobile-sheet__nav-link-text small {
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.4px;
    color: #707978;
    line-height: 1.4;
}

.cc-mobile-sheet__nav-link svg {
    color: rgba(32, 63, 67, 0.35);
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.cc-mobile-sheet__nav-link:active svg {
    transform: translateX(4px);
    color: #203f43;
}

/* Live pulse dot — clean small badge with halo, sits inline with title */
.cc-mobile-sheet__live-dot {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ba1a1a;
    margin-left: 4px;
    flex-shrink: 0;
    transform: translateY(-1px);
}

.cc-mobile-sheet__live-dot::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(186, 26, 26, 0.4);
    animation: cc-sheet-pulse 1.6s ease-out infinite;
    z-index: -1;
}

@keyframes cc-sheet-pulse {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2);   opacity: 0;   }
}

/* Featured editorial card */
.cc-mobile-sheet__featured {
    position: relative;
    display: block;
    margin: 8px 0 24px;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: #203f43;
    text-decoration: none;
    color: #fff;
    transition: transform 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.cc-mobile-sheet__featured:active {
    transform: scale(0.98);
}

.cc-mobile-sheet__featured img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 0.6s ease;
}

.cc-mobile-sheet__featured::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(16, 31, 34, 0) 28%, rgba(16, 31, 34, 0.55) 55%, rgba(16, 31, 34, 0.92) 100%);
    z-index: 1;
}

.cc-mobile-sheet__featured-body {
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.cc-mobile-sheet__featured-eyebrow {
    font-family: var(--font-body, sans-serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #facb58;
    margin-bottom: 2px;
}

.cc-mobile-sheet__featured-title {
    font-family: var(--font-heading, serif);
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    margin: 0;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.3px;
}

.cc-mobile-sheet__featured-loc {
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 500;
}

/* Search */
.cc-mobile-sheet__search {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

.cc-mobile-sheet__search form {
    display: flex;
    gap: 0;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 0 4px 0 14px;
    border: 1px solid rgba(32, 63, 67, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cc-mobile-sheet__search form:focus-within {
    border-color: #203f43;
    box-shadow: 0 0 0 3px rgba(32, 63, 67, 0.08);
}

.cc-mobile-sheet__search-icon {
    color: rgba(32, 63, 67, 0.5);
    flex-shrink: 0;
}

.cc-mobile-sheet__search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 12px;
    font-family: var(--font-body, sans-serif);
    font-size: 14px;
    color: #203f43;
    outline: none;
    min-width: 0;
}

.cc-mobile-sheet__search-input::placeholder {
    color: rgba(32, 63, 67, 0.42);
    font-style: italic;
}

.cc-mobile-sheet__search-btn {
    height: 36px;
    padding: 0 16px;
    border: none;
    background: #203f43;
    color: #fff;
    border-radius: 8px;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.cc-mobile-sheet__search-btn:active {
    background: #152a2d;
}

/* Quick links footer */
.cc-mobile-sheet__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 4px;
    margin: 22px 0 0;
    padding: 18px 0 0;
    list-style: none;
    border-top: 1px solid rgba(32, 63, 67, 0.08);
    justify-content: center;
}

.cc-mobile-sheet__quick li {
    display: inline-flex;
    align-items: center;
}

.cc-mobile-sheet__quick li::after {
    content: '·';
    color: rgba(32, 63, 67, 0.3);
    margin: 0 6px;
}

.cc-mobile-sheet__quick li:last-child::after {
    display: none;
}

.cc-mobile-sheet__quick a {
    color: #203f43;
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.cc-mobile-sheet__quick a:active {
    color: #946514;
}

/* Lock body scroll when sheet is open */
body.has-mobile-sheet-open {
    overflow: hidden;
}

/* ==========================================================================
   SHOP PAGE MOBILE — Filter/Sort drawer (Mr Porter / Net-a-Porter pattern)
   ========================================================================== */

/* Mobile filter/sort toolbar — sticky just under header */
.cc-shop-mobile-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(32, 63, 67, 0.08);
    padding: 12px 16px;
    align-items: center;
    gap: 16px;
}

.cc-shop-mobile-bar__btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #203f43;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease;
    position: relative;
}

.cc-shop-mobile-bar__btn:active {
    opacity: 0.6;
}

.cc-shop-mobile-bar__count {
    background: #facb58;
    color: #203f43;
    border-radius: 10px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-shop-mobile-bar__divider {
    width: 1px;
    height: 24px;
    background: rgba(32, 63, 67, 0.15);
}

@media (max-width: 1024px) {
    .cc-shop-mobile-bar {
        display: flex;
    }

    /* Hide sidebar by default on mobile — opens as drawer */
    .cc-shop__sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 88% !important;
        max-width: 360px !important;
        z-index: 1000;
        background: #f9f9f7;
        padding: 24px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: 0 0 60px rgba(32, 63, 67, 0.2);
    }

    .cc-shop__sidebar.is-open {
        transform: translateX(0);
    }

    .cc-shop__sidebar-close {
        position: absolute;
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(32, 63, 67, 0.08);
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #203f43;
        z-index: 2;
    }

    .cc-shop__sidebar-heading {
        font-family: var(--font-heading, serif);
        font-size: 28px;
        font-weight: 400;
        color: #203f43;
        margin: 0 0 24px;
        padding-right: 50px;
    }

    .cc-shop__filters {
        display: flex !important;
        flex-direction: column !important;
        gap: 32px !important;
    }

    .cc-filter-group {
        margin: 0 !important;
        min-width: 0 !important;
        flex-shrink: 1 !important;
        border-bottom: 1px solid rgba(32, 63, 67, 0.06);
        padding-bottom: 24px;
    }

    .cc-filter-group:last-child {
        border-bottom: none;
    }

    /* Drawer backdrop */
    .cc-shop__drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(32, 63, 67, 0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    body.has-shop-drawer-open .cc-shop__drawer-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    body.has-shop-drawer-open {
        overflow: hidden;
    }

    /* Hide default toolbar (count + sort dropdown) on mobile */
    .cc-shop__toolbar {
        display: none !important;
    }

    /* Force grid to 2 cols */
    .cc-shop__layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 24px 16px !important;
    }

    .cc-shop__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    .cc-shop__grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* Hide drawer backdrop on desktop */
@media (min-width: 1025px) {
    .cc-shop__drawer-backdrop,
    .cc-shop__sidebar-close {
        display: none !important;
    }
}

/* ==========================================================================
   AUCTION SIGN-IN PROMPT — shown to guests instead of broken bid form
   ========================================================================== */

.cc-auction-pdp__signin-prompt {
    background: #f9f9f7;
    border: 1px solid rgba(32, 63, 67, 0.08);
    border-left: 4px solid #facb58;
    padding: 28px 24px;
    text-align: center;
    margin-top: 16px;
    border-radius: 2px;
}

.cc-auction-pdp__signin-icon {
    color: #203f43;
    margin-bottom: 12px;
    opacity: 0.6;
    display: inline-flex;
}

.cc-auction-pdp__signin-title {
    font-family: var(--font-heading, serif);
    font-size: 20px;
    font-weight: 400;
    color: #203f43;
    margin: 0 0 8px;
    line-height: 1.3;
}

.cc-auction-pdp__signin-text {
    font-family: var(--font-body, sans-serif);
    font-size: 13px;
    color: rgba(32, 63, 67, 0.65);
    line-height: 1.55;
    margin: 0 auto 20px;
    max-width: 320px;
}

.cc-auction-pdp__signin-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.cc-auction-pdp__signin-actions .cc-auction-pdp__bid-btn {
    width: 100%;
    max-width: 280px;
}

.cc-auction-pdp__signin-link {
    color: #203f43;
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: opacity 0.2s ease;
}

.cc-auction-pdp__signin-link:hover { opacity: 0.7; color: #203f43; }

/* Improved error message with optional CTA link */
.cc-auction-pdp__bid-msg--error {
    background: rgba(192, 57, 43, 0.06);
    border-left: 3px solid #C0392B;
    padding: 12px 14px;
    border-radius: 2px;
    color: #8B2820;
    font-size: 13px;
    line-height: 1.5;
    margin-top: 12px;
}

.cc-auction-pdp__bid-msg--success {
    background: rgba(39, 174, 96, 0.06);
    border-left: 3px solid #27AE60;
    padding: 12px 14px;
    border-radius: 2px;
    color: #1F6F3F;
    font-size: 13px;
    margin-top: 12px;
}

.cc-auction-pdp__bid-msg-cta {
    display: inline-block;
    margin-left: 8px;
    color: #203f43;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.cc-auction-pdp__bid-msg-cta:hover { color: #152a2d; }

/* ==========================================================================
   SHOP SORT SHEET — Bottom sheet with sort options (mobile)
   ========================================================================== */

.cc-sort-sheet {
    position: fixed;
    inset: 0;
    z-index: 1001;
    pointer-events: none;
    visibility: hidden;
}

.cc-sort-sheet[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}

.cc-sort-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 63, 67, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cc-sort-sheet[aria-hidden="false"] .cc-sort-sheet__backdrop {
    opacity: 1;
}

.cc-sort-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f9f9f7;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 12px 24px calc(80px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -20px 60px rgba(32, 63, 67, 0.25);
    max-height: 70vh;
    overflow-y: auto;
}

.cc-sort-sheet[aria-hidden="false"] .cc-sort-sheet__panel {
    transform: translateY(0);
}

.cc-sort-sheet__handle {
    width: 40px;
    height: 4px;
    background: #d0ccc0;
    border-radius: 2px;
    margin: 0 auto 16px;
}

.cc-sort-sheet__title {
    font-family: var(--font-heading, serif);
    font-size: 22px;
    font-weight: 400;
    color: #203f43;
    margin: 0 0 16px;
    font-style: italic;
}

.cc-sort-sheet__options {
    display: flex;
    flex-direction: column;
}

.cc-sort-sheet__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 4px;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(32, 63, 67, 0.06);
    color: #203f43;
    font-family: var(--font-body, sans-serif);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: padding-left 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.cc-sort-sheet__option:last-child {
    border-bottom: none;
}

.cc-sort-sheet__option:active {
    padding-left: 8px;
}

.cc-sort-sheet__option.is-selected {
    color: #152a2d;
    font-weight: 600;
}

.cc-sort-sheet__option svg {
    color: #203f43;
    flex-shrink: 0;
}

body.has-sort-sheet-open {
    overflow: hidden;
}

/* Hide the original WC sort dropdown on mobile (sheet replaces it) */
@media (max-width: 1024px) {
    .woocommerce-ordering,
    .cc-shop__sort {
        display: none !important;
    }
}

/* ==========================================================================
   MY ACCOUNT — Login/Register page (was completely broken on mobile)
   ========================================================================== */

.cc-login {
    padding: 64px 24px;
    background: #f9f9f7;
    min-height: 60vh;
}

.cc-login__header {
    text-align: center;
    margin-bottom: 48px;
}

.cc-login__title {
    font-family: var(--font-heading, serif);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 400;
    color: #203f43;
    margin: 0;
    line-height: 1.1;
}

.cc-login__title em {
    font-style: italic;
}

/* Default: 2 columns side-by-side on desktop */
.cc-login__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 1024px;
    margin: 0 auto;
}

.cc-login__col {
    background: #fff;
    padding: 40px;
    border: 1px solid rgba(32, 63, 67, 0.08);
    border-radius: 4px;
}

.cc-login__col-title {
    font-family: var(--font-heading, serif);
    font-size: 28px;
    font-weight: 400;
    color: #203f43;
    margin: 0 0 24px;
    letter-spacing: -0.5px;
}

.cc-login__col-title em {
    font-style: italic;
}

.cc-login__field {
    margin-bottom: 20px;
}

.cc-login__label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #5A5A5A;
    margin-bottom: 8px;
}

.cc-login__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(32, 63, 67, 0.15);
    border-radius: 4px;
    font-family: var(--font-body, sans-serif);
    font-size: 14px;
    color: #203f43;
    background: #f9f9f7;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cc-login__input:focus {
    outline: none;
    border-color: #203f43;
    background: #fff;
}

.cc-login__col .button,
.cc-login__col [type="submit"] {
    width: 100%;
    padding: 14px 24px;
    background: #203f43;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s ease;
}

.cc-login__col .button:hover,
.cc-login__col [type="submit"]:hover {
    background: #152a2d;
}

.cc-login__col .lost_password,
.cc-login__col .lost_password a {
    color: #203f43;
    font-size: 13px;
    text-decoration: none;
    margin-top: 16px;
    display: block;
}

/* Remember-me checkbox */
.cc-login__col .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    font-size: 13px;
    color: #5A5A5A;
}

/* Mobile/tablet: stack columns */
@media (max-width: 1024px) {
    .cc-login {
        padding: 48px 16px;
    }

    .cc-login__layout {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .cc-login__col {
        padding: 32px 24px;
    }

    .cc-login__header {
        margin-bottom: 32px;
    }
}

@media (max-width: 480px) {
    .cc-login {
        padding: 32px 12px;
    }

    .cc-login__col {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   MY ACCOUNT — Logged-in dashboard (sidebar + content)
   ========================================================================== */

.woocommerce-account .woocommerce {
    max-width: 1200px;
    margin: 48px auto;
    padding: 0 24px;
}

.woocommerce-MyAccount-navigation {
    margin-bottom: 24px;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-MyAccount-content {
    background: #fff;
    padding: 32px;
    border-radius: 4px;
    border: 1px solid rgba(32, 63, 67, 0.08);
}

@media (min-width: 1025px) {
    .woocommerce-account .woocommerce {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 48px;
    }
}

@media (max-width: 1024px) {
    .woocommerce-account .woocommerce {
        margin: 32px auto;
        padding: 0 16px;
    }

    .woocommerce-MyAccount-navigation {
        background: #fff;
        border-radius: 4px;
        border: 1px solid rgba(32, 63, 67, 0.08);
        padding: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .woocommerce-MyAccount-navigation ul {
        display: flex;
        gap: 4px;
        white-space: nowrap;
    }

    .woocommerce-MyAccount-navigation ul li a {
        padding: 10px 14px;
        background: rgba(32, 63, 67, 0.05);
        border-radius: 4px;
        text-decoration: none;
        color: #203f43;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        display: inline-block;
    }

    .woocommerce-MyAccount-navigation ul li.is-active a,
    .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a {
        background: #203f43;
        color: #fff;
    }

    .woocommerce-MyAccount-content {
        padding: 24px 20px;
    }
}

/* ==========================================================================
   MOBILE TOP NAV — minimal chrome only.
   The bottom navbar owns Shop / Auctions / Cart / Account; the top nav on
   mobile keeps a hamburger (opens the mobile sheet), the logo, and Search.
   Cart, Account, and the Auctions pill are hidden on mobile because they
   live in the bottom tab bar.
   Tablets/iPad (≥768) still get the desktop horizontal nav.
   ========================================================================== */

@media (max-width: 767.98px) {
    .cc-mobile-menu,
    .cc-nav,
    .cc-header__nav {
        display: none !important;
    }

    /* Hamburger is the primary menu entry on mobile — show it in the header */
    .cc-header__menu-toggle {
        display: flex !important;
    }

    /* Header items that also exist in the bottom tab bar — hide them on mobile
       so we aren't duplicating nav in both bars */
    .cc-header__auctions-cta,
    .cc-header__actions .cc-header__action-btn[aria-label*="account" i],
    .cc-header__actions .cc-header__cart {
        display: none !important;
    }

    .cc-header__inner {
        justify-content: space-between !important;
    }
}

/* ==========================================================================
   SMART HEADER — Hide on scroll down, show on scroll up (mobile/tablet)
   ========================================================================== */

@media (max-width: 1024px) {
    .cc-header {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.3s ease,
                    box-shadow 0.3s ease;
        background: rgba(250, 249, 247, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    /* When scrolled down past hero — add subtle shadow */
    .cc-header.is-scrolled {
        box-shadow: 0 1px 0 rgba(32, 63, 67, 0.06);
    }

    /* Hidden state — slide up out of view */
    .cc-header.is-hidden {
        transform: translateY(-100%);
    }

    /* Hero sections have their own full-viewport background — no padding needed
       For other pages, the header overlays the top */
}

/* ==========================================================================
   MOBILE BOTTOM NAVBAR — App-style persistent nav (5 tabs)
   Hidden on desktop, always visible on mobile/tablet.
   ========================================================================== */

.cc-bottomnav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(250, 249, 247, 0.96);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-top: 1px solid rgba(32, 63, 67, 0.08);
    padding: 8px 4px max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -2px 16px rgba(32, 63, 67, 0.06);
}

.cc-bottomnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px;
    background: none;
    border: none;
    text-decoration: none;
    color: rgba(32, 63, 67, 0.55);
    font-family: var(--font-body, sans-serif);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    min-height: 56px;
}

.cc-bottomnav__item:active {
    transform: scale(0.92);
}

.cc-bottomnav__item:hover,
.cc-bottomnav__item.is-active {
    color: #203f43;
}

.cc-bottomnav__item svg {
    width: 22px;
    height: 22px;
    color: currentColor;
    transition: transform 0.2s ease;
}

.cc-bottomnav__item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: #203f43;
    border-radius: 0 0 3px 3px;
}

/* Cart badge */
.cc-bottomnav__cart-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-bottomnav__badge {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #facb58;
    color: #203f43;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Auctions tab — live pulse indicator only shows when live auctions exist */
.cc-bottomnav__auctions-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cc-bottomnav__item--auctions.is-live .cc-bottomnav__auctions-wrap svg {
    color: #203f43;
}

.cc-bottomnav__live-dot {
    position: absolute;
    top: -1px;
    right: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E24A3E;
    border: 1.5px solid rgba(250, 249, 247, 0.96);
    z-index: 2;
}

.cc-bottomnav__live-pulse {
    position: absolute;
    top: -3px;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #E24A3E;
    z-index: 1;
    animation: cc-bottomnav-pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes cc-bottomnav-pulse {
    0%   { transform: scale(0.7); opacity: 0.6; }
    70%  { transform: scale(2.1); opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cc-bottomnav__live-pulse {
        animation: none;
    }
}

.cc-bottomnav__item--auctions:hover .cc-bottomnav__auctions-wrap svg,
.cc-bottomnav__item--auctions.is-active .cc-bottomnav__auctions-wrap svg {
    transform: scale(1.08);
}

/* Show on mobile only (<768) — tablets use the desktop header nav */
@media (max-width: 767.98px) {
    .cc-bottomnav {
        display: flex;
        transform: translateY(110%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease-out;
    }

    .cc-bottomnav.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    /* Pad body so the last content isn't hidden under the fixed navbar while it's showing */
    body.has-bottomnav-visible {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }

    body.has-bottomnav-visible .cc-footer {
        padding-bottom: 32px;
    }
}

/* ==========================================================================
   MOBILE BOTTOM SHEET — Slides up with nav + cart preview
   ========================================================================== */

.cc-mobile-sheet {
    position: fixed;
    inset: 0;
    z-index: 998;
    pointer-events: none;
    visibility: hidden;
}

.cc-mobile-sheet[aria-hidden="false"] {
    pointer-events: auto;
    visibility: visible;
}

.cc-mobile-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 63, 67, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.cc-mobile-sheet[aria-hidden="false"] .cc-mobile-sheet__backdrop {
    opacity: 1;
}

.cc-mobile-sheet__panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 16px 24px 100px;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -20px 60px rgba(32, 63, 67, 0.25);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cc-mobile-sheet[aria-hidden="false"] .cc-mobile-sheet__panel {
    transform: translateY(0);
}

.cc-mobile-sheet__handle {
    width: 48px;
    height: 4px;
    background: #e0ddd5;
    border-radius: 2px;
    margin: 0 auto 20px;
}

/* Cart preview block */
.cc-mobile-sheet__cart {
    background: #fffcfb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.cc-mobile-sheet__cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cc-mobile-sheet__cart-label {
    display: block;
    font-family: var(--font-body, sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #5A5A5A;
    margin-bottom: 4px;
}

.cc-mobile-sheet__cart-total {
    display: block;
    font-family: var(--font-heading, serif);
    font-size: 22px;
    font-weight: 400;
    color: #203f43;
    line-height: 1.2;
}

.cc-mobile-sheet__cart-total .woocommerce-Price-amount {
    color: #203f43;
}

.cc-mobile-sheet__checkout-btn {
    background: #203f43;
    color: #fff;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.cc-mobile-sheet__checkout-btn:hover,
.cc-mobile-sheet__checkout-btn:active {
    background: #152a2d;
    color: #fff;
}

.cc-mobile-sheet__view-cart {
    display: block;
    text-align: center;
    color: #203f43;
    font-family: var(--font-body, sans-serif);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-decoration: none;
    padding: 8px;
    border-top: 1px solid rgba(32, 63, 67, 0.08);
    transition: opacity 0.2s ease;
}

.cc-mobile-sheet__view-cart:active {
    opacity: 0.6;
}

.cc-mobile-sheet__empty {
    text-align: center;
    padding: 24px 0;
    color: #8A8A8A;
}

.cc-mobile-sheet__empty svg {
    color: rgba(32, 63, 67, 0.2);
    margin-bottom: 8px;
}

.cc-mobile-sheet__empty p {
    font-family: var(--font-body, sans-serif);
    font-size: 14px;
    margin: 0;
}

/* Navigation links */
.cc-mobile-sheet__nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cc-mobile-sheet__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    color: #203f43;
    text-decoration: none;
    font-family: var(--font-heading, serif);
    font-size: 22px;
    font-weight: 400;
    border-bottom: 1px solid rgba(32, 63, 67, 0.06);
    transition: padding-left 0.2s ease, color 0.2s ease;
}

.cc-mobile-sheet__nav-link:last-child {
    border-bottom: none;
}

.cc-mobile-sheet__nav-link:active {
    padding-left: 12px;
    color: #152a2d;
}

.cc-mobile-sheet__nav-link svg {
    color: rgba(32, 63, 67, 0.3);
    transition: transform 0.2s ease, color 0.2s ease;
}

.cc-mobile-sheet__nav-link:active svg {
    transform: translateX(4px);
    color: #203f43;
}

/* Lock body scroll when sheet is open */
body.has-mobile-sheet-open {
    overflow: hidden;
}

/* Hide regular mini-cart on mobile (we use the sheet instead) */
@media (max-width: 1024px) {
    body.has-mini-cart-open .cc-mobile-utility {
        opacity: 0;
        pointer-events: none;
    }
}

/* ==========================================================================
   HEADER — Mobile menu spacing
   ========================================================================== */

@media (max-width: 768px) {
    .cc-header {
        padding: 0 16px !important;
    }

    .cc-header__inner {
        height: 64px !important;
    }
}

/* ==========================================================================
   Mobile gutter alignment (2026-07-17, client): on phones every section's
   content column starts at the standard container gutter (20px), instead of
   the assorted 16/24/32/48px offsets that accumulated per-section. Placed at
   the END of the file so it wins the cascade.
   ========================================================================== */
@media (max-width: 768px) {
    /* Hero: the gold-bar eyebrow block starts at the gutter */
    .cc-hero__content { padding-inline: var(--container-padding, 20px); }

    /* Regular product page: layout at gutter; compact the gold-bar inset */
    .cc-pdp__layout { padding: 0 var(--container-padding, 20px) !important; }
    .cc-pdp__header { padding-left: 16px !important; }

    /* Auction product page info column */
    .cc-auction-pdp__info { padding-left: var(--container-padding, 20px) !important; padding-right: var(--container-padding, 20px) !important; }

    /* Curated Masterpieces — tailor pages (stacked layout) */
    .cc-tp-products,
    .cc-tp-products--on-pdp { padding-left: var(--container-padding, 20px) !important; padding-right: var(--container-padding, 20px) !important; }

    /* Curated Masterpieces — product pages (carousel layout): section flush,
       header + cards aligned to the gutter */
    body.single-product .cc-tp-products { padding-left: 0 !important; padding-right: 0 !important; }
    body.single-product .cc-tp-products__header { margin: 0 var(--container-padding, 20px) 32px !important; }
    body.single-product .cc-tp-products__grid {
        padding: 4px var(--container-padding, 20px) !important;
        scroll-padding-inline-start: var(--container-padding, 20px) !important;
    }
}

/* Tailor atelier gallery — tablet fix (2026-07-18): between 481-1024px there
   was no rule, so the desktop fixed-height masonry squeezed into ragged
   columns with holes. Uniform 2-col tiles in that range. */
@media (min-width: 481px) and (max-width: 1024px) {
    .cc-tp-gallery { padding: 64px var(--container-padding, 20px) !important; }
    .cc-tp-gallery__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
    /* The grid's children are 4 masonry column-wrappers with stagger paddings;
       flatten them so every image flows directly into the 2-col grid (no holes). */
    .cc-tp-gallery__col { display: contents; }
    .cc-tp-gallery__item,
    .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: auto !important;
        aspect-ratio: 4 / 3;
    }
}