/* Craftlo Mobile UI Polish v0.3.2 — MOBILE ONLY */
@media (max-width: 767.98px) {
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    /* =========================================================
       HOMEPAGE HERO — exact requested element is the slide.
       The active slide itself fills 100% of the slider height.
       No radius on slide/picture/image. Slider bottom padding = 0.
       ========================================================= */
    .cl-mobile-hero-slider {
        padding-bottom: 0 !important;
    }

    .cl-mobile-hero-slide,
    .cl-mobile-hero-slide.is-active {
        height: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
    }

    .cl-mobile-hero-slide .cl-mobile-hero-picture,
    .cl-mobile-hero-slide.is-active .cl-mobile-hero-picture,
    .cl-mobile-hero-picture,
    picture.cl-mobile-hero-picture {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        overflow: hidden !important;
    }

    .cl-mobile-hero-slide .cl-mobile-hero-picture img,
    .cl-mobile-hero-slide.is-active .cl-mobile-hero-picture img,
    .cl-mobile-hero-picture img,
    picture.cl-mobile-hero-picture > img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        object-fit: cover !important;
    }

    .cl-mobile-hero-dots,
    .clm-mobile-hero-pagination-host {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Full width only; do not calculate or hard-code hero height. */
    .clm-mobile-hero-fullbleed {
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-bottom: 0 !important;
        border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
    }

    /* =========================================================
       MOBILE HEADER CART
       ========================================================= */
    .clm-mobile-header-shell { position: relative !important; }

    .cl-mobile-header-cart,
    .clm-mobile-header-cart-visible {
        box-sizing: border-box !important;
        position: absolute !important;
        top: 50% !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #0b1830 !important;
        background: #fff !important;
        border: 1px solid rgba(11,24,48,.16) !important;
        border-radius: 13px !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 30 !important;
    }

    .cl-mobile-header-cart > a,
    .cl-mobile-header-cart > button,
    .clm-mobile-header-cart-visible > a,
    .clm-mobile-header-cart-visible > button {
        display: grid !important;
        place-items: center !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .cl-mobile-header-cart svg,
    .cl-mobile-header-cart svg *,
    .clm-mobile-header-cart-visible svg,
    .clm-mobile-header-cart-visible svg * {
        color: #0b1830 !important;
        stroke: #0b1830 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html[data-theme="dark"] .cl-mobile-header-cart,
    body.dark .cl-mobile-header-cart,
    body.cl-dark .cl-mobile-header-cart,
    body.theme-dark .cl-mobile-header-cart {
        color: #fff !important;
        background: rgba(255,255,255,.09) !important;
        border-color: rgba(255,255,255,.2) !important;
    }

    html[data-theme="dark"] .cl-mobile-header-cart svg,
    html[data-theme="dark"] .cl-mobile-header-cart svg *,
    body.dark .cl-mobile-header-cart svg,
    body.dark .cl-mobile-header-cart svg *,
    body.cl-dark .cl-mobile-header-cart svg,
    body.cl-dark .cl-mobile-header-cart svg *,
    body.theme-dark .cl-mobile-header-cart svg,
    body.theme-dark .cl-mobile-header-cart svg * {
        color: #fff !important;
        stroke: #fff !important;
    }

    /* =========================================================
       CREATOR PROFILE — preserve content, remove cover/tint only.
       No display:contents and no display:none on .cstore-hero itself.
       ========================================================= */
    body.clm-creator-profile-page .cstore-hero {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 0 !important;
        box-shadow: none !important;
    }

    body.clm-creator-profile-page .cstore-hero::before,
    body.clm-creator-profile-page .cstore-hero::after {
        content: none !important;
        display: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.clm-creator-profile-page .clm-mobile-hide-cover-media {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* Clear the large translucent blue/grey page tint without hiding
       the content or a possible sheet/modal container. */
    body.clm-creator-profile-page .clm-clear-page-tint,
    body.clm-creator-profile-page .clm-clear-page-tint::before,
    body.clm-creator-profile-page .clm-clear-page-tint::after {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        opacity: 1 !important;
    }

    /* Known overlay/backdrop naming patterns, creator page only. */
    body.clm-creator-profile-page .cstore-hero-overlay,
    body.clm-creator-profile-page .cstore-profile-overlay,
    body.clm-creator-profile-page .cstore-overlay,
    body.clm-creator-profile-page .cstore-backdrop,
    body.clm-creator-profile-page .cstore-modal-backdrop {
        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }

    /* Creator profile card geometry: compact and aligned, mobile only. */
    body.clm-creator-profile-page .clm-creator-card {
        box-sizing: border-box !important;
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
        margin: 0 8px 14px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        box-shadow: none !important;
    }

    /* Center three tabs and keep icon + label consistent. */
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 0 !important;
        text-align: center !important;
    }

    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > a,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > button,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > * {
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 8px 6px !important;
        text-align: center !important;
    }

    body.clm-creator-profile-page .clm-tab-icon {
        display: grid !important;
        place-items: center !important;
        width: 18px !important;
        height: 18px !important;
        margin: 0 auto !important;
        line-height: 1 !important;
    }

    body.clm-creator-profile-page .clm-tab-icon svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    /* Back button = icon only, compact and not overlapping profile card. */
    body.clm-creator-profile-page .cl-mobile-back-button.clm-mobile-back-icon {
        box-sizing: border-box !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
        display: grid !important;
        place-items: center !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 8px 10px 8px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
        line-height: 1 !important;
        overflow: hidden !important;
        z-index: 5 !important;
    }

    body.clm-creator-profile-page .cl-mobile-back-button.clm-mobile-back-icon svg {
        display: block !important;
        width: 20px !important;
        height: 20px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 2 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    /* Last seen must be readable on the copper profile surface. */
    body.clm-creator-profile-page .clm-last-seen {
        color: rgba(255,255,255,.96) !important;
        opacity: 1 !important;
        text-shadow: none !important;
    }

    /* Bottom nav clearance. */
    body.clm-homepage-mobile main,
    body.clm-homepage-mobile .site-main,
    body.clm-homepage-mobile #primary {
        padding-bottom: 92px !important;
    }
}

/* =============================================================
   v0.3.4 — CREATOR PROFILE CLEANUP, MOBILE ONLY
   ============================================================= */
@media (max-width: 767.98px) {
    /* Keep the creator identity block compact and aligned. */
    body.clm-creator-profile-page .clm-creator-card {
        width: calc(100% - 4px) !important;
        max-width: calc(100% - 4px) !important;
        margin: 0 2px 14px !important;
        border-radius: 0 0 20px 20px !important;
    }

    body.clm-creator-profile-page .clm-creator-avatar {
        width: 76px !important;
        height: 76px !important;
        min-width: 76px !important;
        min-height: 76px !important;
        max-width: 76px !important;
        max-height: 76px !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

    body.clm-creator-profile-page .clm-creator-follow {
        min-width: 88px !important;
        min-height: 38px !important;
        height: 38px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
    }

    /* ---------------------------------------------------------
       Featured product: hide the original scattered children and
       render one clean hierarchy built by mobile-fixes.js.
       --------------------------------------------------------- */
    body.clm-creator-profile-page .cstore-mobile-featured-overlay {
        box-sizing: border-box !important;
        position: absolute !important;
        inset: auto 0 0 0 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, rgba(7,13,26,0) 0%, rgba(7,13,26,.28) 22%, rgba(7,13,26,.90) 100%) !important;
        z-index: 4 !important;
    }

    body.clm-creator-profile-page .cstore-mobile-featured-overlay > .clm-featured-original {
        display: none !important;
    }

    body.clm-creator-profile-page .cstore-mobile-featured-overlay .clm-featured-clean {
        box-sizing: border-box !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 20px 14px 13px !important;
        color: #fff !important;
        text-align: left !important;
    }

    body.clm-creator-profile-page .clm-featured-clean * {
        box-sizing: border-box !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    body.clm-creator-profile-page .clm-featured-clean__badge {
        display: inline-flex !important;
        align-items: center !important;
        width: auto !important;
        min-height: 22px !important;
        margin: 0 0 2px !important;
        padding: 4px 8px !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.16) !important;
        color: #fff !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: .02em !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
    }

    body.clm-creator-profile-page .clm-featured-clean__title {
        display: -webkit-box !important;
        width: 100% !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        letter-spacing: -.01em !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    body.clm-creator-profile-page .clm-featured-clean__meta {
        width: 100% !important;
        margin: 1px 0 0 !important;
        color: rgba(255,255,255,.82) !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body.clm-creator-profile-page .clm-featured-clean__bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 7px 0 0 !important;
    }

    body.clm-creator-profile-page .clm-featured-clean__price {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    body.clm-creator-profile-page .clm-featured-clean__cta {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 94px !important;
        min-height: 32px !important;
        height: 32px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #8b5cf6 !important;
        color: #fff !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        box-shadow: 0 4px 12px rgba(52,30,112,.22) !important;
    }

    /* ---------------------------------------------------------
       All Products: the former wide first product stays in the
       catalogue, but becomes a normal card inside the 2-col grid.
       No card is removed and no empty reserved row remains.
       --------------------------------------------------------- */
    body.clm-creator-profile-page .clm-hide-leading-wide-product-card {
        display: block !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: initial !important;
        border: initial !important;
        overflow: visible !important;
    }

    body.clm-creator-profile-page .clm-two-column-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        gap: 10px !important;
        align-items: stretch !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 10px !important;
        padding-top: 0 !important;
    }

    body.clm-creator-profile-page .clm-two-column-product-grid > * {
        min-width: 0 !important;
        max-width: 100% !important;
        grid-column: auto !important;
        grid-row: auto !important;
    }

    body.clm-creator-profile-page .clm-product-card-normalized {
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        grid-column: auto !important;
        grid-row: auto !important;
        transform: none !important;
    }

    body.clm-creator-profile-page .clm-product-card-normalized .clm-normalized-main-image,
    body.clm-creator-profile-page .clm-product-card-normalized .clm-normalized-main-image img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1.52 / 1 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }

    /* Remove leftover empty wrappers created only for the previous
       full-width first-card treatment. */
    body.clm-creator-profile-page .clm-empty-product-shell {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
}


/* =============================================================
   v0.3.5 — CREATOR PROFILE MOBILE CLEANUP
   Exact requests:
   - remove cstore-mobile-featured-card on mobile
   - follow button shares the top action row with back icon
   - improve active creator tab treatment
   - keep the existing two-column catalogue untouched
   ============================================================= */
@media (max-width: 767.98px) {
    /* The large featured card is intentionally removed on mobile. */
    body.clm-creator-profile-page .cstore-mobile-featured-card {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    /* No synthetic "first product" normalization in v0.3.5. */

    /* Back on the left, Follow on the right, same horizontal row. */
    body.clm-creator-profile-page .clm-profile-top-actions {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 7px 8px !important;
        background: transparent !important;
        position: relative !important;
        z-index: 20 !important;
    }

    body.clm-creator-profile-page .clm-profile-top-actions .cl-mobile-back-button.clm-mobile-back-icon {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        box-shadow: 0 2px 10px rgba(15,23,42,.08) !important;
    }

    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow {
        box-sizing: border-box !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 92px !important;
        max-width: 132px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        z-index: 1 !important;
    }

    /* Give the identity block the full width now that Follow is outside it. */
    body.clm-creator-profile-page .clm-creator-card {
        margin-top: 0 !important;
    }

    /* Tabs: clean equal-width segmented control. */
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs {
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        width: calc(100% - 16px) !important;
        margin: 8px auto 10px !important;
        padding: 5px !important;
        border-radius: 15px !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        overflow: visible !important;
    }

    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > a,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > button,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > [role="tab"] {
        box-sizing: border-box !important;
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;
        background: transparent !important;
        color: rgba(255,255,255,.76) !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > a::before,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > button::before,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > [role="tab"]::before,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > a::after,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > button::after,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > [role="tab"]::after {
        display: none !important;
        content: none !important;
    }

    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs .clm-tab-icon {
        flex: 0 0 17px !important;
        width: 17px !important;
        height: 17px !important;
        margin: 0 !important;
    }

    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs .clm-tab-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > .clm-tab-active,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > .active,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > .is-active,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > [aria-selected="true"],
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > [aria-current="page"] {
        background: #fff !important;
        color: #c9502f !important;
        border-color: rgba(15,23,42,.06) !important;
        box-shadow: 0 3px 10px rgba(15,23,42,.10) !important;
        font-weight: 800 !important;
    }

    /* Ensure no purple underline / legacy active strip survives. */
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > .clm-tab-active *,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > .active *,
    body.clm-creator-profile-page .cstore-profile-tabs.clm-creator-tabs > .is-active * {
        color: inherit !important;
        border-color: transparent !important;
        text-decoration: none !important;
    }

    /* Keep the actual catalogue as the native two-column grid; remove the
       previous v0.3.4 class if it is still present from a cached DOM pass. */
    body.clm-creator-profile-page .clm-two-column-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
}


/* =============================================================
   v0.3.6 — HARD REMOVE MOBILE FEATURED CARD
   Unscoped from the JS-added body class on purpose. The card must
   never render on mobile, even before creator-page detection runs.
   ============================================================= */
@media (max-width: 767.98px) {
    html body .cstore-mobile-featured-card,
    html body [class~="cstore-mobile-featured-card"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
}


/* =============================================================
   v0.3.8 — HIDE THE SEPARATE FULL-WIDTH FIRST CATALOGUE CARD
   This is NOT .cstore-mobile-featured-card. JS identifies the
   standalone full-width product immediately below All Products.
   The node stays in the DOM so the next product does not become :first-child.
   ============================================================= */
@media (max-width: 767.98px) {
    html body.clm-creator-profile-page .clm-leading-wide-product-card-remove {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    html body.clm-creator-profile-page.clm-leading-wide-product-hidden .clm-empty-product-shell {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
}


/* =============================================================
   v0.3.9 — MOBILE CREATOR PAGINATION + JOURNAL + FOOTER CLEANUP
   ============================================================= */

/* Legacy footer is redundant whenever the newer clf-shell exists. */
body.clm-has-clf-shell .cl-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

@media (max-width: 767.98px) {
    /* ---------- exactly 10 visible products per client-side page ---------- */
    body.clm-creator-profile-page .clm-product-pagination-hidden {
        display: none !important;
    }

    body.clm-creator-profile-page .clm-mobile-product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.clm-creator-profile-page .clm-mobile-product-pagination {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 18px auto 8px !important;
        padding: 0 10px !important;
    }

    body.clm-creator-profile-page .clm-mobile-product-pagination button {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 12px !important;
        border: 1px solid rgba(148,163,184,.35) !important;
        border-radius: 11px !important;
        background: #fff !important;
        color: #10243a !important;
        box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
    }

    body.clm-creator-profile-page .clm-mobile-product-pagination button:disabled {
        opacity: .38 !important;
        pointer-events: none !important;
    }

    body.clm-creator-profile-page .clm-mobile-product-pagination__status {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 84px !important;
        height: 38px !important;
        padding: 0 10px !important;
        border-radius: 11px !important;
        background: rgba(139,92,246,.10) !important;
        color: #6d28d9 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        white-space: nowrap !important;
    }

    /* ---------- Journal mobile ---------- */
    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-heading {
        margin: 12px 14px 2px !important;
        font-size: 22px !important;
        line-height: 1.15 !important;
        font-weight: 850 !important;
        color: #10243a !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-subtitle {
        margin: 0 14px 14px !important;
        max-width: none !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card {
        box-sizing: border-box !important;
        display: block !important;
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin: 0 auto 14px !important;
        padding: 14px !important;
        border: 1px solid rgba(148,163,184,.28) !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: 0 4px 16px rgba(15,23,42,.055) !important;
        overflow: hidden !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-row {
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 52px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-avatar-wrap {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        overflow: hidden !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-avatar {
        display: block !important;
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        object-position: 50% 20% !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-meta {
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-meta * {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-name {
        display: block !important;
        margin: 0 0 3px !important;
        color: #10243a !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-time {
        display: block !important;
        margin: 0 !important;
        color: #94a3b8 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        font-weight: 600 !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card p {
        margin: 0 0 12px !important;
        color: #27384b !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-content-image-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 10px 0 0 !important;
        padding: 0 !important;
    }

    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-content-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 12px !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    /* Defensive reset for the broken desktop two-column journal author block. */
    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card [style*="grid-template-columns"],
    body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card [style*="width"] {
        max-width: 100% !important;
    }

    html[data-theme="dark"] body.clm-creator-profile-page .clm-mobile-product-pagination button,
    body.dark.clm-creator-profile-page .clm-mobile-product-pagination button,
    html[data-theme="dark"] body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card,
    body.dark.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: rgba(255,255,255,.12) !important;
    }

    html[data-theme="dark"] body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-heading,
    html[data-theme="dark"] body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-name,
    html[data-theme="dark"] body.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card p,
    body.dark.clm-creator-profile-page.clm-creator-journal-active .clm-journal-heading,
    body.dark.clm-creator-profile-page.clm-creator-journal-active .clm-journal-author-name,
    body.dark.clm-creator-profile-page.clm-creator-journal-active .clm-journal-card p {
        color: #f8fafc !important;
    }
}

/* =============================================================
   v0.4.4 — FOLLOW VISUAL RESTORE + PROFILE CARD PADDING
   Mobile only. Preserve Follow/Following native visual treatment
   even after the control is moved into the top action row.
   ============================================================= */
@media (max-width: 767.98px) {
    body.clm-creator-profile-page .cstore-profile-card {
        padding: 12px !important;
    }

    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow {
        color: var(--clm-follow-color, inherit) !important;
        background-color: var(--clm-follow-background-color, transparent) !important;
        background-image: var(--clm-follow-background-image, none) !important;
        border-color: var(--clm-follow-border-color, currentColor) !important;
        box-shadow: var(--clm-follow-box-shadow, none) !important;
        text-shadow: var(--clm-follow-text-shadow, none) !important;
        font-family: var(--clm-follow-font-family, inherit) !important;
        font-size: var(--clm-follow-font-size, inherit) !important;
        font-weight: var(--clm-follow-font-weight, inherit) !important;
        font-style: var(--clm-follow-font-style, normal) !important;
        letter-spacing: var(--clm-follow-letter-spacing, normal) !important;
        text-transform: var(--clm-follow-text-transform, none) !important;
    }
}

/* =============================================================
   v0.4.6 — FOLLOW/FOLLOWING VISUAL RESTORE
   The original Following control was translucent because it lived
   on the copper creator card. Once moved to the white top action row,
   that transparent treatment became visually white/invisible.
   Restore the original visual identity explicitly by state.
   ============================================================= */
@media (max-width: 767.98px) {
    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow {
        font-family: inherit !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        font-style: normal !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        line-height: 1 !important;
        color: #ffffff !important;
        text-shadow: none !important;
        border-radius: 999px !important;
        min-width: 96px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 18px !important;
        opacity: 1 !important;
        visibility: visible !important;
        -webkit-text-fill-color: #ffffff !important;
    }

    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow.clm-follow-is-follow,
    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow:not(.clm-follow-is-following) {
        background-color: #8f63ff !important;
        background-image: linear-gradient(135deg, #a66cff 0%, #7f59ff 100%) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        box-shadow: none !important;
    }

    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow.clm-follow-is-following {
        background-color: #c86f51 !important;
        background-image: none !important;
        border: 1px solid #de9479 !important;
        box-shadow: none !important;
    }

    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow:hover,
    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow:focus,
    body.clm-creator-profile-page .clm-profile-top-actions .clm-creator-follow:active {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        filter: none !important;
    }

    body.clm-creator-profile-page .cstore-profile-card {
        padding: 12px !important;
    }
}

/* =============================================================
   v0.5.1 — JOURNAL SAFETY, MOBILE ONLY
   Native Craftlo chat is intentionally untouched.
   ============================================================= */
@media (max-width: 767.98px) {
    /* Journal safety: only genuine media tagged by JS may become large.
       UI/reaction/comment icons are explicitly kept compact. */
    body.clm-creator-profile-page .clm-journal-card img:not(.clm-journal-content-image):not(.clm-journal-author-avatar),
    body.clm-creator-profile-page .cjournal-post img:not(.clm-journal-content-image):not(.clm-journal-author-avatar) {
        max-width: initial;
    }

    body.clm-creator-profile-page .cjournal-post img[alt*="comment" i],
    body.clm-creator-profile-page .cjournal-post img[alt*="chat" i],
    body.clm-creator-profile-page .cjournal-post img[alt*="like" i],
    body.clm-creator-profile-page .cjournal-post img[class*="comment" i],
    body.clm-creator-profile-page .cjournal-post img[class*="chat" i],
    body.clm-creator-profile-page .cjournal-post img[class*="like" i],
    body.clm-creator-profile-page .cjournal-post svg[class*="comment" i],
    body.clm-creator-profile-page .cjournal-post svg[class*="chat" i],
    body.clm-creator-profile-page .cjournal-post svg[class*="like" i] {
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        object-fit: contain !important;
        border-radius: 0 !important;
    }
}


/* v0.5.1 safety: never let creator tint cleanup neutralize Craftlo app sheets. */
@media (max-width: 767.98px) {
    body.clm-creator-profile-page .clm-clear-page-tint[style*="position: fixed"],
    body.clm-creator-profile-page [class*="chat" i].clm-clear-page-tint,
    body.clm-creator-profile-page [class*="sheet" i].clm-clear-page-tint,
    body.clm-creator-profile-page [class*="drawer" i].clm-clear-page-tint,
    body.clm-creator-profile-page [class*="message" i].clm-clear-page-tint {
        background: revert !important;
        background-color: revert !important;
        background-image: revert !important;
        backdrop-filter: revert !important;
        -webkit-backdrop-filter: revert !important;
        box-shadow: revert !important;
    }
}

/* =============================================================
   v0.5.2 — NATIVE CHAT AS MOBILE SLIDE-UP
   Only presentation/state of the existing Craftlo Chat root is changed.
   Conversation markup/data stays owned by Craftlo.
   ============================================================= */
@media (max-width: 767.98px) {
    .clm-chat-backdrop-v052 {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483500 !important;
        display: none !important;
        background: rgba(15, 23, 42, .46) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity .22s ease !important;
    }
    body.clm-chat-open-v052 .clm-chat-backdrop-v052 {
        display: block !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .clm-chat-sheet-v052 {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left)) !important;
        right: max(8px, env(safe-area-inset-right)) !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        z-index: 2147483600 !important;
        display: none !important;
        flex-direction: column !important;
        width: auto !important;
        max-width: 720px !important;
        height: min(74dvh, 720px) !important;
        max-height: calc(100dvh - 104px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(148,163,184,.28) !important;
        border-radius: 24px 24px 18px 18px !important;
        background: #fff !important;
        box-shadow: 0 -14px 46px rgba(15,23,42,.20) !important;
        opacity: 0 !important;
        transform: translateY(calc(100% + 100px)) !important;
        transition: transform .28s cubic-bezier(.22,.8,.26,1), opacity .2s ease !important;
        isolation: isolate !important;
    }
    body.clm-chat-open-v052 .clm-chat-sheet-v052 {
        display: flex !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .clm-chat-sheet-head-v052 {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 56px !important;
        min-height: 56px !important;
        padding: 0 58px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        background: #fff !important;
    }
    .clm-chat-sheet-handle-v052 {
        width: 54px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: #cbd5e1 !important;
    }
    .clm-chat-sheet-close-v052 {
        position: absolute !important;
        top: 9px !important;
        right: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid #dbe4ec !important;
        border-radius: 13px !important;
        background: #f8fafc !important;
        color: #475569 !important;
        font: 500 26px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
        box-shadow: none !important;
        cursor: pointer !important;
    }

    .clm-chat-native-host-v052 {
        position: relative !important;
        display: block !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #fff !important;
        box-shadow: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: auto !important;
    }
    .clm-chat-native-host-v052[hidden] { display: block !important; }

    body.clm-chat-open-v052 { overflow: hidden !important; }

    html[data-theme="dark"] .clm-chat-sheet-v052,
    html[data-theme="dark"] .clm-chat-sheet-head-v052,
    html[data-theme="dark"] .clm-chat-native-host-v052,
    body.dark .clm-chat-sheet-v052,
    body.dark .clm-chat-sheet-head-v052,
    body.dark .clm-chat-native-host-v052 {
        background: #111827 !important;
        color: #f8fafc !important;
        border-color: rgba(255,255,255,.10) !important;
    }
    html[data-theme="dark"] .clm-chat-sheet-close-v052,
    body.dark .clm-chat-sheet-close-v052 {
        background: #1f2937 !important;
        color: #e5e7eb !important;
        border-color: rgba(255,255,255,.12) !important;
    }
}


/* v0.2.147 — global Platform Chat bridge corrections. */
@media (max-width: 767.98px) {
    /* Mobile Chat is launched by the bottom navigation/product action.
       Keep the desktop FAB out of the mobile viewport. */
    .cdb-floating-chat > .cdb-fchat-launcher {
        display: none !important;
    }
    /* When the canonical Platform panel is moved into the Theme slide-up,
       preserve its flex layout so list/thread/composer remain functional. */
    .clm-chat-native-host-v052[data-floating-chat-panel] {
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
}