@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-size: 15px;
        line-height: 1.65;
    }

    img,
    video,
    canvas,
    iframe {
        max-width: 100%;
    }

    .container,
    .container-fluid,
    main.container,
    .news-shell,
    .innovation-shell,
    .projects-page,
    .products-page,
    .detail-page,
    .cms-detail-page,
    .mixfree-company-page {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    .section-header,
    .products-page .section-header,
    .projects-page .section-header,
    .innovation-page .section-header,
    .news-page .section-header,
    .stores-page .section-header,
    .news-header {
        margin-bottom: 22px !important;
        padding: 0 0 16px !important;
        text-align: left !important;
    }

    .section-header h1,
    .section-header h2,
    .page-title,
    .home-section-title,
    .news-header h1,
    .cms-detail-hero-content h1 {
        font-size: clamp(1.55rem, 9vw, 2.35rem) !important;
        line-height: 1.14 !important;
        letter-spacing: 0.02em !important;
        overflow-wrap: anywhere;
    }

    .section-header p,
    .page-header-content p,
    .cms-detail-hero-content p,
    .news-header p {
        max-width: 100% !important;
        font-size: 0.95rem !important;
        line-height: 1.72 !important;
    }

    .btn,
    button,
    input,
    textarea,
    select {
        min-height: 44px;
    }

    .page-header,
    .policy-hero,
    .cms-detail-hero {
        min-height: auto !important;
        padding: 104px 0 40px !important;
        margin-bottom: 28px !important;
    }

    .cms-detail-hero-content {
        min-height: auto !important;
        padding: 28px 18px !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .cms-detail-layout,
    .cms-detail-nav,
    .project-meta,
    .image-splice,
    .mixfree-company-hero,
    .mixfree-company-grid,
    .mixfree-company-brand-grid,
    .mixfree-company-metrics,
    .mixfree-company-mini-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cms-detail-card,
    .request-form,
    .product-card,
    .news-card,
    .news-featured,
    .news-feed-card,
    .project-card,
    .mixfree-company-card,
    .mixfree-company-hero-card {
        border-radius: 10px !important;
    }

    .cms-detail-card,
    .cms-detail-content,
    .cms-detail-content .ub-html,
    .project-content,
    .project-content .ub-html,
    .policy-body {
        width: 100% !important;
        max-width: 100% !important;
        padding: 18px !important;
        overflow-wrap: anywhere;
    }

    .cms-detail-content img,
    .project-content img,
    .ub-html img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .footer-grid,
    .footer-bottom {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .footer-logo,
    .footer-text,
    .footer-title,
    .footer-links,
    .footer-contact-list {
        text-align: left !important;
    }
}

@media (max-width: 768px) {
    .mfh-home {
        --home-screen-min-height: auto !important;
    }

    .mfh-home > section,
    .mfh-home > section:not(.parallax-section) {
        min-height: auto !important;
        height: auto !important;
    }

    .hero-banner,
    .hero-banner__stage,
    .hero-banner__window {
        min-height: 100svh !important;
        height: 100svh !important;
    }

    .hero-banner__window {
        border-radius: 0 !important;
        width: 100% !important;
    }

    .banner-copy {
        width: calc(100% - 32px) !important;
        left: 16px !important;
        right: 16px !important;
        top: auto !important;
        bottom: 96px !important;
        transform: none !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .hero-title {
        font-size: clamp(2rem, 14vw, 4rem) !important;
        line-height: 0.98 !important;
        letter-spacing: 0.04em !important;
    }

    .banner-desc {
        max-width: 30rem !important;
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }

    .about-redesign-section,
    .series-section,
    .craftsmanship-section {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
    }

    .about-inner-wrap,
    .about-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .about-img-wrap,
    .about-main-img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-body {
        max-height: none !important;
        overflow: visible !important;
    }

    .about-stat-divider {
        display: none !important;
    }

    .series-cards {
        height: auto !important;
        min-height: 360px;
        padding: 14px 0 22px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        filter: none !important;
    }

    .series-card {
        flex: 0 0 min(72vw, 260px) !important;
        height: 330px !important;
        margin-left: 0 !important;
        transform: none !important;
        scroll-snap-align: start;
    }

    .series-card__inner,
    .series-card__glow {
        clip-path: none !important;
        border-radius: 18px !important;
    }

    .series-card__image {
        width: 100% !important;
        left: 0 !important;
    }

    .series-card__title {
        font-size: 1rem !important;
        letter-spacing: 0.12em !important;
        text-transform: none !important;
    }

    .compare-stage {
        height: auto !important;
        min-height: 660px !important;
        overflow: visible !important;
    }

    .compare-grid {
        position: static !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        height: auto !important;
    }

    .compare-layer {
        width: 100% !important;
        flex-basis: auto !important;
        height: 260px !important;
        margin: 0 !important;
    }

    .compare-copy,
    .compare-copy--title,
    .compare-copy--desc {
        position: static !important;
        width: 100% !important;
        min-height: auto !important;
        margin-top: 14px !important;
        padding: 18px !important;
        text-align: left !important;
        transform: none !important;
    }

    .parallax-section,
    .sticky-container {
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
    }

    .reveal-mask {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }

    .collection-section-header,
    .mfh-home > section:last-child .carousel {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .carousel {
        min-height: auto !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .carousel-card {
        min-width: min(55vw, 200px) !important;
        transform: none !important;
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    .products-page {
        padding-top: 104px !important;
    }

    .filter-layout {
        display: block !important;
    }

    .collections-toolbar,
    .collections-toolbar-left,
    .collections-toolbar-right {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    .collections-search-wrap,
    .collections-search-input,
    .filter-dialog-trigger {
        width: 100% !important;
        max-width: 100% !important;
    }

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

    .product-card-img-wrapper {
        aspect-ratio: 3 / 4 !important;
    }

    .product-card-body {
        padding: 12px !important;
    }

    .product-card h3 {
        font-size: 0.82rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.04em !important;
    }

    .product-card .p-meta,
    .product-card .p-summary {
        display: none !important;
    }

    .sidebar-filter-panel {
        width: 100% !important;
        max-width: 100% !important;
        height: min(86svh, 720px) !important;
        right: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .sidebar-filter-body {
        max-height: calc(86svh - 132px) !important;
        overflow-y: auto !important;
    }

    .filter-group-body,
    .category-tree {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 520px) {
    .products-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .detail-page {
        min-height: auto !important;
        padding-top: 88px !important;
    }

    .top-container,
    .gallery-wrapper,
    .info-section,
    .slider-container,
    .slider-track {
        width: 100% !important;
        max-width: 100% !important;
    }

    .top-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        height: auto !important;
        min-height: auto !important;
    }

    .gallery-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        height: auto !important;
    }

    .thumb-vertical {
        order: 2;
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        overflow-x: auto !important;
        width: 100% !important;
        height: auto !important;
        padding: 4px 0 !important;
    }

    .thumb-item {
        flex: 0 0 68px !important;
        width: 68px !important;
        height: 84px !important;
    }

    .main-display-container {
        order: 1;
        height: min(68svh, 520px) !important;
        min-height: 360px !important;
        width: 100% !important;
    }

    .main-img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .info-section {
        padding: 18px 0 0 !important;
    }

    .attribute-grid,
    .action-bar {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .settings-popup,
    .palette-popup {
        left: auto !important;
        right: 12px !important;
        max-width: calc(100vw - 32px) !important;
    }

    .slider-section {
        padding: 28px 0 !important;
    }
}

@media (max-width: 768px) {
    .news-page,
    .innovation-page,
    .projects-page {
        padding-top: 104px !important;
    }

    .news-mosaic,
    .news-mosaic-row,
    .news-content,
    .news-feed,
    .news-feed-row,
    .innovation-grid,
    .projects-track,
    .projects-preview {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .news-timeline {
        display: none !important;
    }

    .news-featured,
    .news-feed-card,
    .innovation-card,
    .project-slide {
        width: 100% !important;
        min-width: 0 !important;
    }

    .news-featured-media,
    .news-feed-media,
    .innovation-card-media,
    .project-slide-media {
        aspect-ratio: 4 / 3 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .news-featured-title {
        font-size: clamp(1.15rem, 6vw, 1.6rem) !important;
        line-height: 1.28 !important;
        max-width: 100% !important;
    }

    .news-feed-title,
    .innovation-card-title,
    .project-copy h1 {
        font-size: clamp(1.25rem, 7vw, 2rem) !important;
        line-height: 1.18 !important;
    }

    .news-feed-body {
        padding: 14px !important;
    }

    .news-feed-meta {
        margin-top: 10px !important;
        padding-top: 10px !important;
    }

    .news-featured:not(:has(img[src])) .news-featured-media,
    .news-feed-card:not(:has(img[src])) .news-feed-media {
        display: none !important;
    }

    .news-featured:not(:has(img[src])) .news-featured-content {
        min-height: auto !important;
        padding: 18px 14px !important;
    }

    .news-featured:not(:has(img[src])) .news-featured-title,
    .news-featured:not(:has(img[src])) .news-featured-meta {
        color: #111 !important;
    }

    .news-featured:not(:has(img[src]))::after {
        display: none !important;
    }

    .news-featured:not(:has(img[src])) {
        background: #f5f5f0 !important;
    }

    .news-feed-card:not(:has(img[src])) {
        background: #f5f5f0 !important;
    }

    .news-feed-card:not(:has(img[src])) .news-feed-title,
    .news-feed-card:not(:has(img[src])) .news-feed-meta {
        color: #222 !important;
    }

    .news-featured-media img,
    .news-feed-media img {
        opacity: 1 !important;
        transition: none !important;
    }

    .news-featured-media {
        background: #1a1a1a !important;
    }

    .news-feed-media {
        background: #e8e8e8 !important;
    }

    .projects-carousel,
    .project-slide,
    .project-slide-content {
        height: auto !important;
        min-height: auto !important;
    }

    .project-slide-content {
        position: static !important;
        padding: 18px !important;
        color: var(--vi-primary, #4B4B4E) !important;
        background: rgba(255, 255, 255, 0.9) !important;
    }

    .projects-preview {
        position: static !important;
        margin-top: 16px !important;
    }

    .project-hero {
        min-height: 58svh !important;
        padding: 104px 0 44px !important;
    }

    .hero-title-box h1 {
        font-size: clamp(2rem, 12vw, 3.2rem) !important;
        line-height: 1.04 !important;
    }

    .image-splice {
        grid-template-columns: 1fr !important;
    }
}

/* ===== Mobile touch & readability polish ===== */
@media (max-width: 768px) {
    .footer-links a,
    .footer-contact-list a,
    .footer-legal a {
        display: block !important;
        padding: 10px 0 !important;
        min-height: 44px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    .footer-legal {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .footer-bottom small,
    .footer-copy {
        font-size: 0.78rem !important;
        line-height: 1.6 !important;
    }

    .project-hero .hero-title-box .btn,
    .cases-hero .btn,
    .policy-hero .btn {
        position: relative !important;
        margin-top: 16px !important;
        transform: none !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
    }

    .policy-body {
        font-size: 0.92rem !important;
        line-height: 1.8 !important;
    }

    .policy-body p,
    .policy-body li {
        margin-bottom: 12px !important;
    }

    .lang-switch a,
    .lang-toggle,
    [class*="lang"] a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 8px 10px !important;
    }

    .banner-controls__dots {
        gap: 10px !important;
    }

    .banner-dot {
        width: 14px !important;
        height: 14px !important;
        min-height: 0 !important;
        border-radius: 50% !important;
        padding: 0 !important;
        background: rgba(255,255,255,0.55) !important;
        border: none !important;
    }

    .banner-dot.is-active {
        width: 14px !important;
        background: rgba(255,255,255,0.9) !important;
    }

    .carousel-card a,
    .series-card a,
    .product-card a {
        display: block !important;
        position: relative !important;
    }

    .collection-preview__button {
        min-height: 44px !important;
        padding: 0 18px !important;
    }

    .product-card-img-wrapper [class*="arrow"],
    .product-card-img-wrapper button,
    .carousel [class*="arrow"],
    .carousel button[class*="nav"] {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    img[src=""],
    img:not([src]) {
        display: none !important;
    }

    .carousel-card img {
        background: #f0eeec !important;
        border-radius: 6px !important;
    }

    .carousel-card h3,
    .carousel-card p {
        background: linear-gradient(to top, rgba(255,255,255,0.75), rgba(255,255,255,0.45)) !important;
        padding: 4px 8px !important;
        border-radius: 3px !important;
        display: inline-block !important;
    }

    .product-card-img-wrapper img {
        background: #f0eeec !important;
    }
}

/* ===== Mobile navigation polish ===== */
@media (max-width: 768px) {
    .lang-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        color: #333 !important;
        touch-action: manipulation !important;
    }

    .nav-links {
        background: #fff !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10) !important;
    }

    .nav-links > li > a {
        min-height: 44px !important;
        color: #111 !important;
    }

    .mobile-overlay.is-visible {
        background: rgba(0, 0, 0, 0.45) !important;
    }

    .mobile-overlay {
        top: 60px !important;
    }

    .nav-content {
        padding-left: 10px !important;
        padding-right: 10px !important;
        gap: 4px !important;
    }

    .nav-actions {
        gap: 2px !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .logo img {
        width: 118px !important;
    }
}

/* ===== Projects/Cases page mobile fixes ===== */
@media (max-width: 768px) {
    /* Allow carousel to grow with content instead of being viewport-clipped */
    .projects-carousel {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Stack all project slides vertically instead of absolute-position carousel */
    .projects-track {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* Fix: override inline position:absolute so slides flow in the grid */
    .project-slide {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        transition: none !important;
    }

    /* Show ALL slides on mobile (no carousel hiding) */
    .project-slide[aria-hidden="true"] {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Fix: image container must be in normal document flow */
    .project-slide-media {
        position: relative !important;
        inset: auto !important;
        aspect-ratio: 4 / 3 !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Near-remove the dark gradient overlay since text sits below on a white bg */
    .project-slide-media::after {
        background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0) 70%) !important;
    }

    /* Content block: solid white background for clean readability */
    .project-slide-content {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        min-height: auto !important;
        height: auto !important;
        padding: 24px 18px 28px !important;
        gap: 12px !important;
        background: #fff !important;
        color: #222 !important;
    }

    /* Full-width copy block */
    .project-copy {
        max-width: 100% !important;
    }

    /* Kicker / category pill */
    .project-kicker {
        font-size: 0.7rem !important;
        letter-spacing: 0.16em !important;
    }

    /* Title: compact line-height, mobile-friendly size, dark for white bg */
    .project-copy h1,
    .project-copy h2 {
        color: #111 !important;
        font-size: clamp(1.35rem, 5.6vw, 1.9rem) !important;
        line-height: 1.14 !important;
        letter-spacing: 0.03em !important;
        margin: 8px 0 10px !important;
        text-transform: uppercase !important;
    }

    /* Description text */
    .project-copy p {
        max-width: 100% !important;
        color: #555 !important;
        font-size: 0.9rem !important;
        line-height: 1.72 !important;
    }

    /* LEARN MORE button: prominent, proper touch target (>= 46px) */
    .project-copy .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 46px !important;
        min-width: 150px !important;
        padding: 0 30px !important;
        margin-top: 18px !important;
        background: #111 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        white-space: nowrap !important;
    }

    /* Thumbnail preview strip: horizontal scroll at the bottom */
    .projects-preview {
        position: relative !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        margin-top: 0 !important;
        background: #f8f8f6 !important;
        border-top: 1px solid rgba(0,0,0,0.06) !important;
        -webkit-overflow-scrolling: touch !important;
        grid-template-columns: none !important;
    }

    /* Individual thumbnail items: compact but tappable */
    .projects-preview-item {
        flex: 0 0 100px !important;
        grid-template-rows: 64px auto !important;
        min-height: 92px !important;
        border-color: rgba(0,0,0,0.12) !important;
        background: rgba(0,0,0,0.025) !important;
    }

    .projects-preview-item span {
        color: #444 !important;
        padding: 6px 9px !important;
        font-size: 0.66rem !important;
        line-height: 1.3 !important;
    }

    .projects-preview-item.is-active {
        border-color: var(--accent, #b8860b) !important;
        transform: none !important;
    }
}

/* ===== Extra-narrow mobile (< 380px) ===== */
@media (max-width: 380px) {
    .project-copy h1,
    .project-copy h2 {
        font-size: 1.2rem !important;
    }

    .project-copy p {
        font-size: 0.84rem !important;
    }

    .project-slide-content {
        padding: 18px 14px 22px !important;
    }

    .projects-preview-item {
        flex: 0 0 86px !important;
        grid-template-rows: 56px auto !important;
        min-height: 80px !important;
    }
}

/* ===== News detail page mobile typography ===== */
@media (max-width: 768px) {
    /* Match news listing page top clearance */
    .cms-detail-page {
        padding-top: 88px !important;
    }

    /* Compact hero — reduce vertical footprint */
    .cms-detail-hero {
        padding: 0 0 20px !important;
        margin-bottom: 16px !important;
        min-height: auto !important;
        border-radius: 8px !important;
    }

    .cms-detail-hero.is-no-cover {
        min-height: auto !important;
        padding: 0 0 20px !important;
    }

    .cms-detail-hero-content {
        padding: 20px 16px !important;
    }

    /* Hero heading — tighter but readable */
    .cms-detail-hero-content h1 {
        font-size: clamp(1.25rem, 6vw, 1.7rem) !important;
        line-height: 1.22 !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 6px !important;
    }

    .cms-detail-hero-content p {
        font-size: 0.88rem !important;
        line-height: 1.6 !important;
    }

    /* Breadcrumb — compact */
    .cms-detail-breadcrumb {
        font-size: 0.72rem !important;
        margin: 10px 0 16px !important;
        color: #999 !important;
    }

    /* Content card — outer padding only, remove inner double-padding */
    .cms-detail-card {
        padding: 16px !important;
    }

    .cms-detail-content {
        padding: 0 !important;
    }

    /* === Body typography — 15px / 1.75, matches news listing proportions === */
    .cms-detail-content,
    .cms-detail-content.ub-html {
        font-size: 15px !important;
        line-height: 1.75 !important;
        color: #333 !important;
    }

    .cms-detail-content p {
        margin-bottom: 14px !important;
    }

    .cms-detail-content li {
        margin-bottom: 6px !important;
    }

    /* Content headings — proportional to body text, match news listing scale */
    .cms-detail-content h2 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        margin: 26px 0 12px !important;
        color: #222 !important;
    }

    .cms-detail-content h3 {
        font-size: 1.1rem !important;
        line-height: 1.4 !important;
        margin: 22px 0 10px !important;
        color: #222 !important;
    }

    .cms-detail-content h4 {
        font-size: 1rem !important;
        line-height: 1.45 !important;
        margin: 18px 0 8px !important;
        color: #333 !important;
    }

    .cms-detail-content h5,
    .cms-detail-content h6 {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        margin: 14px 0 6px !important;
        color: #333 !important;
    }

    /* Images within content */
    .cms-detail-content img {
        max-width: 100% !important;
        height: auto !important;
        margin: 12px 0 !important;
    }

    /* Meta bar — compact */
    .cms-detail-meta {
        font-size: 0.75rem !important;
        margin-bottom: 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        color: #999 !important;
    }

    /* Navigation items */
    .cms-detail-nav {
        margin-top: 18px !important;
        gap: 10px !important;
    }

    .cms-detail-nav-item {
        padding: 12px 14px !important;
        border-radius: 6px !important;
    }

    .cms-detail-nav-item .label {
        font-size: 0.7rem !important;
    }

    .cms-detail-nav-item .value {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Empty state nav */
    .cms-detail-nav-empty {
        padding: 14px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        font-size: 0.85rem !important;
    }

    /* Sidebar — match listing sidebar styling */
    .cms-detail-side-title {
        font-size: 0.82rem !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 8px !important;
    }

    .cms-detail-side-list a {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        padding: 10px 0 !important;
    }
}

/* ===== Homepage bottom sections — mobile: kill 3D carousel + parallax JS scroll effects =====
     JS (home.js) sets inline styles every frame/scroll event.
     CSS !important overrides inline styles (non-!important) from JS.                   */
@media (max-width: 768px) {
    /* ── Carousel: remove desktop 3D perspective ── */
    .carousel {
        perspective: none !important;
        overflow-y: hidden !important;
    }

    /* ── Carousel cards: kill JS-driven filter / zIndex / 3D origin ── */
    .carousel-card {
        transform-style: flat !important;
        transform-origin: center center !important;
        filter: none !important;
        z-index: auto !important;
        transition: none !important;
        width: min(78vw, 280px) !important;
    }

    /* ── nth-child fan cascade: explicit override (specificity-safe) ── */
    .carousel-card:nth-child(n) {
        transform: none !important;
        transform-origin: center center !important;
    }

    /* ── Carousel wrapper spacing (tighten desktop gaps) ── */
    .mfh-home > section:last-child {
        min-height: auto !important;
        padding-bottom: 48px !important;
    }

    .mfh-home > section:last-child .carousel-container {
        margin-top: 0 !important;
    }

    .mfh-home > section:last-child .carousel-track-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .mfh-home > section:last-child .carousel {
        gap: 10px !important;
        min-height: auto !important;
        justify-content: flex-start !important;
        align-items: center !important;
    }

    /* ── Hide the desktop magnifying-lens preview ── */
    .collection-section-header {
        padding-top: 40px !important;
    }

    .collection-preview {
        display: none !important;
    }

    /* ── Parallax: collapse scroll-driven reveal into static image + overlay ── */
    .parallax-section {
        min-height: 380px !important;
    }

    .reveal-mask {
        display: none !important;
        clip-path: none !important;
        opacity: 0 !important;
    }

    .brand-image {
        transform: none !important;
    }

    .content-layer {
        opacity: 1 !important;
        transform: translate3d(-50%, -50%, 0) !important;
    }

    .content-layer h2 {
        font-size: clamp(1.4rem, 7vw, 2.2rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
    }

    .content-layer p {
        font-size: 0.92rem !important;
        line-height: 1.6 !important;
    }
}