/*
 * Adaptación progresiva del shell de Comunika para tablet y escritorio.
 * La experiencia móvil vive en mobile.css y permanece intacta hasta 767px.
 */

@media (min-width: 768px) {
    .mobile-app-shell {
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0;
        border: 0;
        box-shadow: none;
    }

    .mobile-topbar {
        grid-row: 1;
        grid-column: 1 / -1;
        padding-right: 28px;
        padding-left: 28px;
    }

    .mobile-main {
        grid-row: 2;
        grid-column: 2;
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        padding: 32px 28px 48px;
    }

    .mobile-bottom-nav {
        position: sticky;
        top: calc(66px + env(safe-area-inset-top));
        right: auto;
        bottom: auto;
        left: auto;
        display: flex;
        grid-row: 2;
        grid-column: 1;
        align-self: start;
        width: 100%;
        height: calc(100vh - 66px - env(safe-area-inset-top));
        height: calc(100dvh - 66px - env(safe-area-inset-top));
        padding: 16px 10px;
        border-top: 0;
        border-right: 1px solid var(--mobile-menu-border);
        flex-direction: column;
        gap: 8px;
        background: var(--mobile-menu-bg);
        box-shadow: 8px 0 28px rgba(21,36,66,.05);
        transform: none;
    }

    .mobile-nav-item {
        min-height: 62px;
        padding: 8px 4px;
        border-radius: 16px;
        flex: 0 0 auto;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus-visible {
        color: var(--mobile-menu-text);
        background: var(--mobile-menu-hover);
        outline: 0;
    }

    .mobile-nav-item.is-active,
    .mobile-nav-item.is-active-compact {
        color: var(--mobile-menu-text);
        background: var(--mobile-menu-active);
    }

    .mobile-market-toast {
        right: 24px;
        bottom: 24px;
        left: 112px;
    }

    .comunika-page--dashboard .mobile-welcome {
        max-width: 720px;
    }

    .comunika-page--dashboard .mobile-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comunika-page--dashboard .mobile-kpi--wide {
        grid-column: auto;
    }

    .comunika-page--dashboard .mobile-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comunika-page--market .mobile-page-heading,
    .comunika-page--tyre-search .mobile-page-heading,
    .comunika-page--product-results .mobile-page-heading {
        max-width: 760px;
    }

    .comunika-page--market .mobile-market-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comunika-page--market .mobile-empty-state {
        grid-column: 1 / -1;
    }

    .comunika-page--tyre-search .mobile-size-chips {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
        overflow-x: visible;
        flex-wrap: wrap;
    }

    .comunika-page--tyre-search .mobile-size-chip {
        min-width: 150px;
        flex: 0 1 180px;
    }

    .comunika-page--tyre-search .mobile-selector-card {
        display: grid;
        grid-template-columns: 160px minmax(0, 1fr);
        align-items: end;
        gap: 18px;
        max-width: 960px;
    }

    .comunika-page--tyre-search .mobile-measure-preview {
        align-self: center;
        margin-bottom: 0;
    }

    .comunika-page--tyre-search .mobile-primary-button {
        grid-column: 1 / -1;
        justify-self: end;
        width: auto;
        min-width: 240px;
        margin-top: 0;
    }

    .comunika-page--tyre-results .mobile-product-list,
    .comunika-page--product-results .mobile-product-results {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .comunika-page--tyre-results .mobile-product-list > .mobile-empty-state,
    .comunika-page--product-results .mobile-results-title,
    .comunika-page--product-results .mobile-loading-state,
    .comunika-page--product-results .mobile-product-results > .mobile-empty-state {
        grid-column: 1 / -1;
    }

    .comunika-page--product-results .mobile-catalog-search,
    .comunika-page--eco-search .mobile-search-card,
    .comunika-page--product-results .mobile-inline-feedback {
        max-width: 760px;
    }

    .mobile-login-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
        align-items: center;
        gap: 48px;
        width: min(calc(100% - 48px), 960px);
        min-height: 100vh;
        min-height: 100dvh;
        margin: 0 auto;
        padding: 40px 0;
    }

    .mobile-login-hero {
        padding: 0;
    }

    .mobile-login-brand {
        margin-bottom: 34px;
    }

    .mobile-login-card {
        padding: 30px 28px;
    }

    .mobile-login-shell--register {
        align-items: start;
    }

    .comunika-page--orders .mobile-page-heading,
    .comunika-page--purchase-lines .mobile-page-heading,
    .comunika-page--invoices .mobile-page-heading,
    .comunika-page--messages .mobile-page-heading,
    .comunika-page--promotions .mobile-page-heading,
    .comunika-page--objectives .mobile-page-heading {
        max-width: 760px;
    }

    .comunika-page--orders .mobile-purchases-search,
    .comunika-page--purchase-lines .mobile-purchases-search,
    .comunika-page--invoices .mobile-purchases-search,
    .comunika-page--messages .mobile-message-search {
        max-width: 760px;
    }

    .comunika-page--orders .mobile-order-filters {
        margin-right: 0;
        margin-left: 0;
        overflow-x: visible;
        flex-wrap: wrap;
    }

    .comunika-page--orders .mobile-order-list,
    .comunika-page--purchase-lines .mobile-purchase-lines,
    .comunika-page--invoices .mobile-invoice-list,
    .comunika-page--messages .mobile-message-list,
    .comunika-page--promotions .mobile-promo-list,
    .comunika-page--objectives .mobile-objective-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comunika-page--orders .mobile-order-list > .mobile-empty-state,
    .comunika-page--purchase-lines .mobile-purchase-lines > .mobile-empty-state,
    .comunika-page--invoices .mobile-invoice-list > .mobile-empty-state,
    .comunika-page--messages .mobile-message-list > .mobile-empty-state,
    .comunika-page--promotions .mobile-promo-list > .mobile-empty-state,
    .comunika-page--objectives .mobile-objective-list > .mobile-empty-state {
        grid-column: 1 / -1;
    }

    .comunika-page--purchases .mobile-purchase-chart {
        min-height: 340px;
    }

    .comunika-page--purchases #mobile-purchases-chart {
        min-height: 328px;
    }

    .comunika-page--more {
        max-width: 900px;
    }

    .comunika-page--more .mobile-menu-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .comunika-page--more .mobile-menu-row,
    .comunika-page--more .mobile-menu-row:last-child {
        min-height: 84px;
        border: 1px solid var(--mobile-border);
        border-radius: 17px;
        background: var(--mobile-card);
    }

    .comunika-page--account,
    .comunika-page--message-detail,
    .comunika-page--confirmation,
    .comunika-page--promotion-detail {
        max-width: 960px;
    }

    .comunika-page--account .mobile-account-identity {
        max-width: 760px;
    }

    .comunika-page--invoice-detail .mobile-invoice-lines,
    .comunika-page--order-detail .mobile-order-lines,
    .comunika-page--promotion-detail .mobile-promo-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comunika-page--cart .mobile-cart-item {
        grid-template-columns: 90px minmax(0, 1fr) auto;
        align-items: center;
    }

    .comunika-page--cart .mobile-cart-item-image {
        grid-row: auto;
        min-height: 112px;
    }

    .comunika-page--cart .mobile-cart-item-controls {
        grid-column: auto;
        align-items: flex-end;
        flex-direction: column;
    }

    .comunika-page--message-detail .mobile-message-detail header,
    .comunika-page--message-detail .mobile-message-body {
        padding-right: 32px;
        padding-left: 32px;
    }

    .comunika-page--promotion-detail .mobile-promo-detail-body {
        padding: 28px 30px;
    }
}

@media (min-width: 1024px) {
    .mobile-app-shell {
        grid-template-columns: 224px minmax(0, 1fr);
    }

    .mobile-topbar {
        padding-right: 36px;
        padding-left: 36px;
    }

    .mobile-main {
        max-width: 1180px;
        padding: 38px 36px 56px;
    }

    .mobile-bottom-nav {
        padding: 22px 14px;
        overflow-y: auto;
        gap: 6px;
    }

    .mobile-nav-item {
        min-height: 52px;
        padding: 0 16px;
        border-radius: 14px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        font-size: 13px;
    }

    .mobile-nav-item--desktop {
        display: flex;
    }

    .mobile-nav-item--more {
        display: none;
    }

    .mobile-nav-item.is-active-compact {
        color: var(--mobile-menu-text);
        background: transparent;
    }

    .mobile-nav-item svg {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
    }

    .mobile-market-toast {
        left: 248px;
    }

    .comunika-page--dashboard {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
        column-gap: 20px;
        align-content: start;
    }

    .comunika-page--dashboard .mobile-welcome,
    .comunika-page--dashboard .mobile-kpi-grid,
    .comunika-page--dashboard .mobile-dashboard-recent,
    .comunika-page--dashboard:not(.has-dashboard-goals) .mobile-dashboard-quick {
        grid-column: 1 / -1;
    }

    .comunika-page--dashboard.has-dashboard-goals .mobile-dashboard-quick {
        grid-row: 3;
        grid-column: 1;
    }

    .comunika-page--dashboard .mobile-dashboard-goals {
        grid-row: 3;
        grid-column: 2;
    }

    .comunika-page--dashboard .mobile-dashboard-recent {
        grid-row: 4;
    }

    .comunika-page--dashboard .mobile-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comunika-page--market .mobile-market-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comunika-page--tyre-search .mobile-selector-card {
        grid-template-columns: 140px minmax(300px, 1fr) minmax(190px, 220px);
        gap: 16px;
    }

    .comunika-page--tyre-search .mobile-primary-button {
        grid-column: auto;
        width: 100%;
        min-width: 0;
    }

    .comunika-page--tyre-results .mobile-product-list,
    .comunika-page--product-results .mobile-product-results {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        align-items: stretch;
    }

    .comunika-page--tyre-results .mobile-product-card,
    .comunika-page--product-results .mobile-product-card--catalog {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 176px minmax(0, 1fr);
        gap: 16px;
        height: 100%;
        padding: 16px;
    }

    .comunika-page--tyre-results .mobile-product-image,
    .comunika-page--product-results .mobile-product-image {
        width: 100%;
        height: 176px;
        min-height: 176px;
        padding: 14px;
        border: 1px solid var(--mobile-border);
        background: #f7f9fc;
    }

    .comunika-page--tyre-results .mobile-product-image img,
    .comunika-page--product-results .mobile-product-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .comunika-page--product-results .mobile-product-image {
        position: relative;
    }

    .comunika-page--product-results .mobile-product-image img {
        position: absolute;
        inset: 14px;
        width: calc(100% - 28px);
        height: calc(100% - 28px);
        object-fit: contain;
    }

    .comunika-page--tyre-results .mobile-product-info,
    .comunika-page--product-results .mobile-product-info {
        display: flex;
        min-height: 0;
        flex-direction: column;
    }

    .comunika-page--tyre-results .mobile-product-info h2,
    .comunika-page--product-results .mobile-product-info h2 {
        min-height: 2.6em;
    }

    .comunika-page--tyre-results .mobile-product-size,
    .comunika-page--product-results .mobile-product-size {
        min-height: 18px;
    }

    .comunika-page--tyre-results .mobile-tyre-quantity {
        margin-top: auto;
        padding-top: 16px;
    }

    .comunika-page--product-results .mobile-product-actions {
        margin-top: auto;
        padding-top: 16px;
    }

    .mobile-login-shell {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 72px;
        width: min(calc(100% - 80px), 1120px);
    }

    .mobile-login-card {
        padding: 34px 32px;
    }

    .comunika-page--purchases {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(300px, .75fr);
        column-gap: 20px;
        align-content: start;
    }

    .comunika-page--purchases .mobile-purchases-toolbar,
    .comunika-page--purchases .mobile-kpi-grid,
    .comunika-page--purchases .mobile-purchases-recent {
        grid-column: 1 / -1;
    }

    .comunika-page--purchases .mobile-purchases-evolution {
        grid-column: 1;
    }

    .comunika-page--purchases .mobile-purchases-distribution {
        grid-column: 2;
    }

    .comunika-page--purchases .mobile-purchase-chart,
    .comunika-page--purchases #mobile-purchases-chart {
        min-height: 390px;
    }

    .comunika-page--account {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
        column-gap: 20px;
        align-content: start;
        max-width: 1100px;
    }

    .comunika-page--account > .mobile-back-link,
    .comunika-page--account > .mobile-page-heading,
    .comunika-page--account > .mobile-account-identity {
        grid-column: 1 / -1;
    }

    .comunika-page--account .mobile-account-details {
        grid-row: span 2;
        grid-column: 1;
    }

    .comunika-page--account .mobile-account-users {
        grid-column: 1;
    }

    .comunika-page--account .mobile-account-help,
    .comunika-page--account .mobile-account-install,
    .comunika-page--account .mobile-account-notifications,
    .comunika-page--account .mobile-account-security {
        grid-column: 2;
    }

    .comunika-page--invoice-detail {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
        column-gap: 20px;
        align-content: start;
    }

    .comunika-page--invoice-detail > .mobile-back-link,
    .comunika-page--invoice-detail > .mobile-invoice-content {
        grid-column: 1 / -1;
    }

    .comunika-page--invoice-detail > .mobile-invoice-detail-hero,
    .comunika-page--invoice-detail > .mobile-pdf-button {
        grid-column: 1;
    }

    .comunika-page--invoice-detail > .mobile-invoice-information,
    .comunika-page--invoice-detail > .mobile-invoice-summary-detail {
        grid-column: 2;
    }

    .comunika-page--order-detail {
        display: grid;
        grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr);
        column-gap: 20px;
        align-content: start;
    }

    .comunika-page--order-detail > .mobile-back-link,
    .comunika-page--order-detail > .mobile-order-detail-hero,
    .comunika-page--order-detail > .mobile-order-alert,
    .comunika-page--order-detail > .mobile-order-progress,
    .comunika-page--order-detail > .mobile-order-products,
    .comunika-page--order-detail > .mobile-order-comments {
        grid-column: 1 / -1;
    }

    .comunika-page--order-detail > .mobile-order-information {
        grid-column: 1;
    }

    .comunika-page--order-detail > .mobile-order-media {
        grid-column: 2;
    }

    .comunika-page--promotion-detail .mobile-promo-action-card,
    .comunika-page--confirmation .mobile-confirmation-card {
        max-width: 720px;
        margin-right: auto;
        margin-left: auto;
    }

    .comunika-page--message-detail .mobile-message-detail,
    .comunika-page--message-detail .mobile-message-attachments {
        max-width: 900px;
        margin-right: auto;
        margin-left: auto;
    }

    .comunika-page--objectives .mobile-rappel-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .mobile-app-shell {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .mobile-main {
        max-width: 1920px;
        padding-right: clamp(44px, 3vw, 64px);
        padding-left: clamp(44px, 3vw, 64px);
    }

    .mobile-market-toast {
        left: 264px;
    }

    .comunika-page--dashboard .mobile-quick-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comunika-page--tyre-results .mobile-product-list,
    .comunika-page--product-results .mobile-product-results {
        grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    }

    .comunika-page--tyre-results .mobile-product-card,
    .comunika-page--product-results .mobile-product-card--catalog {
        grid-template-rows: 190px minmax(0, 1fr);
    }

    .comunika-page--tyre-results .mobile-product-image,
    .comunika-page--product-results .mobile-product-image {
        height: 190px;
        min-height: 190px;
    }

    .comunika-page--orders .mobile-order-list,
    .comunika-page--purchase-lines .mobile-purchase-lines,
    .comunika-page--invoices .mobile-invoice-list,
    .comunika-page--messages .mobile-message-list,
    .comunika-page--promotions .mobile-promo-list,
    .comunika-page--objectives .mobile-objective-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .comunika-page--cart .mobile-cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        align-items: start;
        gap: 20px;
    }

    .comunika-page--cart .mobile-cart-summary {
        position: sticky;
        top: 104px;
        margin-top: 0;
    }

    .comunika-page--cart .mobile-cart-layout > .mobile-empty-state {
        grid-column: 1 / -1;
    }

    .comunika-page--orders .mobile-order-list,
    .comunika-page--purchase-lines .mobile-purchase-lines,
    .comunika-page--invoices .mobile-invoice-list,
    .comunika-page--messages .mobile-message-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        overflow: hidden;
        border: 1px solid var(--mobile-border);
        border-radius: 18px;
        background: var(--mobile-card);
        box-shadow: 0 8px 26px rgba(21,36,66,.045);
    }

    .comunika-page--orders .mobile-purchases-search,
    .comunika-page--purchase-lines .mobile-purchases-search,
    .comunika-page--invoices .mobile-purchases-search,
    .comunika-page--messages .mobile-message-search {
        max-width: none;
    }

    .comunika-page--objectives .mobile-objective-list,
    .comunika-page--objectives .mobile-rappel-list,
    .comunika-page--promotions .mobile-promo-list {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .mobile-desktop-list-head {
        display: grid;
        align-items: center;
        gap: 10px;
        min-height: 40px;
        padding: 0 14px;
        color: var(--mobile-muted);
        border-bottom: 1px solid var(--mobile-border);
        background: #f6f8fb;
        font-size: 11px;
        font-weight: 850;
        letter-spacing: .045em;
        text-transform: uppercase;
    }

    .mobile-order-list-head,
    .comunika-page--orders .mobile-order-card {
        grid-template-columns: 116px 132px minmax(220px, 1fr) 120px 118px;
    }

    .comunika-page--orders .mobile-order-card {
        display: grid;
        align-items: center;
        gap: 10px;
        min-height: 62px;
        padding: 10px 14px;
        border: 0;
        border-bottom: 1px solid var(--mobile-border);
        border-radius: 0;
        box-shadow: none;
    }

    .comunika-page--orders .mobile-order-top,
    .comunika-page--orders .mobile-order-bottom {
        display: contents;
    }

    .comunika-page--orders .mobile-order-card h2 {
        overflow: hidden;
        margin: 0;
        font-size: 13px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comunika-page--orders .mobile-order-card .mobile-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: start;
        min-height: 30px;
        padding: 7px 11px;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.2;
        white-space: nowrap;
    }

    .comunika-page--orders .mobile-order-top > span,
    .comunika-page--orders .mobile-order-bottom {
        font-size: 12px;
    }

    .comunika-page--orders .mobile-order-bottom strong {
        font-size: 13px;
        text-align: right;
    }

    .mobile-order-list-head > span:last-child {
        text-align: right;
    }

    .mobile-purchase-lines-head,
    .comunika-page--purchase-lines .mobile-purchase-line-card {
        grid-template-columns: 78px 112px minmax(170px, 1.7fr) minmax(145px, 1.15fr) repeat(4, minmax(64px, .55fr));
    }

    .comunika-page--purchase-lines .mobile-purchase-line-card {
        display: grid;
        align-items: center;
        gap: 10px;
        min-height: 66px;
        padding: 9px 14px;
        border: 0;
        border-bottom: 1px solid var(--mobile-border);
        border-radius: 0;
        box-shadow: none;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-head,
    .comunika-page--purchase-lines .mobile-purchase-line-values {
        display: contents;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-product,
    .comunika-page--purchase-lines .mobile-purchase-line-tags,
    .comunika-page--purchase-lines .mobile-purchase-line-values > div {
        min-width: 0;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-product h2 {
        overflow: hidden;
        margin: 0 0 3px;
        font-size: 13px;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-product p {
        overflow: hidden;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-tags {
        display: grid;
        gap: 3px;
        margin: 0;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-tags span {
        overflow: hidden;
        padding: 0;
        background: transparent;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-values > div {
        text-align: right;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-values > div > span {
        display: none;
    }

    .comunika-page--purchase-lines .mobile-purchase-line-values > div > strong {
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-purchase-lines-head > span:nth-child(n+5) {
        text-align: right;
    }

    .mobile-invoice-list-head,
    .comunika-page--invoices .mobile-invoice-card {
        grid-template-columns: minmax(145px, 1.15fr) 130px 115px 130px 110px 20px;
    }

    .comunika-page--invoices .mobile-invoice-card {
        align-items: center;
        gap: 10px;
        min-height: 62px;
        padding: 9px 14px;
        border: 0;
        border-bottom: 1px solid var(--mobile-border);
        border-radius: 0;
        box-shadow: none;
    }

    .comunika-page--invoices .mobile-invoice-icon {
        display: none;
    }

    .comunika-page--invoices .mobile-invoice-info,
    .comunika-page--invoices .mobile-invoice-info > div,
    .comunika-page--invoices .mobile-invoice-info > p {
        display: contents;
    }

    .comunika-page--invoices .mobile-invoice-info > div > strong,
    .comunika-page--invoices .mobile-invoice-info > b {
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comunika-page--invoices .mobile-invoice-info > p > span {
        color: var(--mobile-muted);
        font-size: 12px;
    }

    .comunika-page--invoices .mobile-invoice-info p span + span::before {
        content: none;
    }

    .comunika-page--invoices .mobile-invoice-due-label {
        display: none;
    }

    .comunika-page--invoices .mobile-invoice-due.is-empty {
        display: block;
    }

    .comunika-page--invoices .mobile-invoice-info > b,
    .mobile-invoice-list-head > span:nth-last-child(2) {
        text-align: right;
    }

    .mobile-message-list-head,
    .comunika-page--messages .mobile-message-card {
        grid-template-columns: 64px minmax(180px, .9fr) minmax(240px, 1.5fr) 125px 20px;
    }

    .comunika-page--messages .mobile-message-card {
        align-items: center;
        gap: 10px;
        min-height: 68px;
        padding: 10px 14px;
        border: 0;
        border-bottom: 1px solid var(--mobile-border);
        border-radius: 0;
        box-shadow: none;
    }

    .comunika-page--messages .mobile-message-card.is-unread {
        border-color: var(--mobile-border);
    }

    .comunika-page--messages .mobile-message-icon {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 12px;
    }

    .comunika-page--messages .mobile-message-main {
        display: contents;
    }

    .comunika-page--messages .mobile-message-title {
        min-width: 0;
    }

    .comunika-page--messages .mobile-message-main h2,
    .comunika-page--messages .mobile-message-main p {
        overflow: hidden;
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .comunika-page--messages .mobile-message-main p {
        display: block;
        color: var(--mobile-muted);
    }

    .comunika-page--messages .mobile-message-main time {
        font-size: 12px;
    }

    .comunika-page--orders .mobile-order-card:last-child,
    .comunika-page--purchase-lines .mobile-purchase-line-card:last-child,
    .comunika-page--invoices .mobile-invoice-card:last-child,
    .comunika-page--messages .mobile-message-card:last-child {
        border-bottom: 0;
    }

    .comunika-page--orders .mobile-order-card:hover,
    .comunika-page--orders .mobile-order-card:focus-visible,
    .comunika-page--invoices .mobile-invoice-card:hover,
    .comunika-page--invoices .mobile-invoice-card:focus-visible,
    .comunika-page--messages .mobile-message-card:hover,
    .comunika-page--messages .mobile-message-card:focus-visible {
        background: color-mix(in srgb, var(--mobile-primary-light) 34%, white);
        outline: 0;
    }
}

@media (min-width: 1440px) {
    .comunika-page--dashboard .mobile-welcome,
    .comunika-page--market .mobile-page-heading,
    .comunika-page--tyre-search .mobile-page-heading,
    .comunika-page--product-results .mobile-page-heading,
    .comunika-page--orders .mobile-page-heading,
    .comunika-page--purchase-lines .mobile-page-heading,
    .comunika-page--invoices .mobile-page-heading,
    .comunika-page--messages .mobile-page-heading,
    .comunika-page--promotions .mobile-page-heading,
    .comunika-page--objectives .mobile-page-heading {
        max-width: 1040px;
    }

    .comunika-page--product-results .mobile-catalog-search,
    .comunika-page--eco-search .mobile-search-card,
    .comunika-page--product-results .mobile-inline-feedback {
        max-width: 1100px;
    }

    .comunika-page--market .mobile-market-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .mobile-service-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .mobile-service-heading > div { max-width: 680px; }
    .mobile-service-form { padding: 24px; }
    .mobile-service-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mobile-service-form-grid .mobile-field--wide { grid-column: 1 / -1; }
    .mobile-service-form > .mobile-primary-button { width: auto; min-width: 210px; }
}

@media (min-width: 1024px) {
    .comunika-page--support,
    .comunika-page--appointments,
    .comunika-page--service-form,
    .comunika-page--support-detail,
    .comunika-page--appointment-detail { max-width: 1180px; }
    .mobile-service-list { gap: 0; overflow: hidden; border: 1px solid var(--mobile-border); border-radius: 20px; background: var(--mobile-card); box-shadow: 0 8px 26px rgba(21,36,66,.05); }
    .mobile-service-list-head { display: grid; grid-template-columns: 105px 180px minmax(220px, 1fr) 110px 120px; gap: 14px; padding: 12px 16px; color: var(--mobile-muted); background: #f5f7fa; font-size: 11px; font-weight: 850; text-transform: uppercase; }
    .mobile-service-list-head--appointments { grid-template-columns: 175px 220px minmax(280px, 1fr); }
    .mobile-service-row { grid-template-columns: 105px 180px minmax(220px, 1fr) 110px 120px 15px; align-items: center; gap: 14px; min-height: 70px; padding: 11px 16px; border: 0; border-bottom: 1px solid var(--mobile-border); border-radius: 0; box-shadow: none; }
    .mobile-service-row:last-child { border-bottom: 0; }
    .mobile-service-row:hover, .mobile-service-row:focus-visible { background: color-mix(in srgb, var(--mobile-primary-light) 34%, white); outline: 0; }
    .mobile-service-row > div:nth-child(2), .mobile-service-row__description { grid-column: auto; }
    .mobile-service-row small { display: none; }
    .mobile-service-row__arrow { position: static; transform: none; }
    .mobile-service-row--appointment { grid-template-columns: 175px 220px minmax(280px, 1fr) 15px; }
    .mobile-service-detail-layout { grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr); align-items: start; }
    .mobile-service-detail-card, .mobile-support-conversation { padding: 24px; }
}