/* Layout only. Cart, order, pricing and language behavior stay in their existing handlers. */
.client-mobile-bar { display: none; }
.client-table-scroll-hint { display: none; }
:root {
    --client-visible-top: max(var(--client-activity-height, 0px), var(--client-viewport-top, 0px));
    --client-visible-height: calc(var(--client-viewport-height, 100dvh) - max(0px, calc(var(--client-activity-height, 0px) - var(--client-viewport-top, 0px))));
}
.client-main, .client-main .shell, .design-card, .design-body { min-width: 0; }
body #drawer { height: 100vh; height: var(--client-visible-height); top: var(--client-visible-top); }
body .drawer-head { flex-shrink: 0; }
body .cart-list, body .drawer-foot, body .client-order-modal-body, body .client-chat-messages {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.client-mobile-count { min-width: 20px; padding: 2px 5px; border-radius: 20px; background: #f2dfb5; color: #674d19; font-size: 11px; font-weight: 800; }
.client-mobile-bar a, .client-mobile-bar button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media screen and (max-width: 1200px) {
    .client-app-layout { display: block; }
    body .client-sidebar {
        position: sticky; top: var(--client-activity-height, 0px); z-index: 35; width: 100%; height: auto;
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px;
        max-height: 85vh; max-height: 85dvh; overflow-y: auto; overflow-x: hidden;
        padding: max(8px, env(safe-area-inset-top)) 12px 8px;
        border-right: 0; border-bottom: 1px solid #dbe8f4;
        box-shadow: 0 6px 20px #264f7c0d;
    }
    body .client-sidebar-brand, body .client-sidebar-spacer, body .client-sidebar-showcase { display: none; }
    .client-mobile-bar { display: flex; min-width: 0; gap: 6px; align-items: center; }
    .client-mobile-brand { min-width: 0; flex: 1; color: #17365f; font-family: Georgia, serif; font-size: 18px; line-height: 1.1; text-decoration: none; }
    .client-mobile-toggle, .client-mobile-cart {
        position: relative; flex: 0 0 auto; min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        padding: 8px; border: 1px solid #d5e4f3; border-radius: 12px;
        color: #0758c7; background: #fff; font: inherit; text-decoration: none; cursor: pointer;
    }
    .client-mobile-toggle svg, .client-mobile-cart svg { width: 22px; height: 22px; flex: 0 0 auto; }
    .client-mobile-cart .client-mobile-count { position: absolute; right: -3px; top: -4px; }
    body .client-sidebar .portal-language-switch { margin: 0; padding: 0; align-self: center; flex-wrap: nowrap; }
    .client-sidebar .portal-language-switch label { display: none; }
    body .client-sidebar .portal-language-switch select { width: 100px; min-width: 0; min-height: 44px; font-size: 16px; padding: 6px; }
    body .client-sidebar-nav {
        grid-column: 1 / -1; min-width: 0; padding: 10px 0 2px;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
    }
    html.client-mobile-ready .client-sidebar:not(.is-nav-open) .client-sidebar-nav { display: none; }
    body .client-nav-item { min-width: 0; min-height: 46px; padding: 10px 12px; white-space: normal; }
    body .client-nav-item.active::before { left: 0; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
    .client-main .shell { width: 100%; padding: 16px; }
    /* Keep saved compact-card preferences from shrinking touch inputs or causing iOS zoom. */
    body .client-main input, body .client-main select, body .client-main textarea { font-size: 16px !important; }
    body .grid .design-card .qty-stepper, body .cart-qty { height: 46px; grid-template-columns: 44px 48px 44px; }
    body .grid .design-card .qty-stepper input, body .cart-qty input { width: 48px; }
    body .grid .design-card .qty-stepper button, body .grid .design-card .qty-stepper input,
    body .cart-qty button, body .cart-qty input, body .client-chat-close { min-height: 44px; }
    body .client-chat-close { min-width: 44px; }
    .hero { margin-top: 0; }
    body .grid.size-large, body .grid.size-medium, body .grid.size-small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-actions { flex-wrap: wrap; }
    body .card-actions .cart-toggle { min-width: 80px; }
    .design-name, .design-comment, .cart-name, .client-order-title, .client-order-meta { overflow-wrap: anywhere; }
    body #clientChatPanel { bottom: calc(78px + var(--client-keyboard-bottom, 0px)); max-height: calc(var(--client-visible-height) - 96px); }
    .items-wrap { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
    .client-order-modal-head, .client-order-tabs { flex-shrink: 0; }
    body .advanced-filters { display: block; }
    body .advanced-filters .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 600px) {
    body .client-sidebar { padding-left: 8px; padding-right: 8px; }
    .client-mobile-brand { font-size: 16px; }
    .client-mobile-toggle span { display: none; }
    body .client-sidebar .portal-language-switch select { width: 88px; }
    .client-main .shell { padding: 10px; }
    body .hero { margin-top: 0; padding: 18px 16px; }
    .hero h1 { font-size: 26px; line-height: 1.15; }
    .hero p { font-size: 14px; line-height: 1.5; }
    body .grid.size-large, body .grid.size-medium, body .grid.size-small { grid-template-columns: minmax(0, 1fr); }
    body .design-card .design-body { padding: 16px; }
    body .design-card .image-wrap { aspect-ratio: 4 / 3; }
    body .design-card .card-actions { display: flex; gap: 10px; align-items: center; }
    body .grid .design-card .qty-stepper { width: auto; height: 46px; grid-template-columns: 44px 52px 44px; flex: 0 0 auto; }
    body .grid .design-card .qty-stepper input { width: 52px; }
    body .grid .design-card .qty-stepper button, body .grid .design-card .qty-stepper input,
    body .design-card .cart-toggle, body .design-card .preview-btn { min-height: 44px; }
    body .design-card .preview-btn { min-width: 44px; }
    body .design-card .cart-toggle { flex: 1 1 92px; }
    .select-box { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
    .select-box input { width: 20px !important; height: 20px !important; }
    body .filters { grid-template-columns: minmax(0, 1fr); }
    body .filter-actions { grid-column: auto; flex-wrap: wrap; }
    .catalog-head, .catalog-actions { gap: 12px; }
    .selection { flex-wrap: wrap; gap: 8px; }
    body input:not([type=checkbox]):not([type=radio]), body select, body textarea { font-size: 16px; }
    body select, body input:not([type=checkbox]):not([type=radio]):not([type=hidden]), body .btn,
    body .page-link, body .close-btn, body .client-initials-add, body .client-initials-remove,
    body .stone-color-row input, body .stone-colors-save { min-height: 44px; }
    body .client-initials-row { grid-template-columns: minmax(0, 1fr) 74px 44px; }
    body .drawer { width: 100%; max-width: 100%; }
    body .drawer-head { min-height: 68px; padding: 12px 14px; }
    body .drawer-foot { padding: 12px 14px max(12px, env(safe-area-inset-bottom)); max-height: 55%; }
    body .cart-list { padding: 12px; }
    body .cart-item { grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 8px; }
    body .cart-thumb { width: 56px; height: 56px; }
    body .remove-btn { width: 44px; height: 44px; }
    body .cart-quantity-row { flex-wrap: wrap; gap: 8px; }
    body .cart-qty { height: 46px; grid-template-columns: 44px 48px 44px; }
    body .cart-qty input { width: 48px; }
    body .cart-qty button, body .cart-qty input { min-height: 44px; }
    body .cart-actions { gap: 8px; }
    body .cart-actions button { min-height: 48px; font-size: 14px; padding: 10px 8px; }
    body .cart-group-head { flex-wrap: wrap; gap: 4px; }
    body .client-order-modal { top: var(--client-visible-top); bottom: auto; height: var(--client-visible-height); padding: 8px; }
    body .client-order-dialog { width: 100%; max-height: 100%; border-radius: 16px; }
    body .client-order-modal-head { padding: 14px; }
    body .client-order-modal-body { padding: 12px; }
    body .client-order-modal-topline, body .client-order-meta { flex-wrap: wrap; gap: 8px; }
    body .client-order-tabs { gap: 16px; padding: 0 12px; }
    body .client-order-tab { min-height: 46px; white-space: nowrap; }
    body .advanced-filters { display: block; }
    body .advanced-filters .filters { grid-template-columns: minmax(0, 1fr); }
    .order-summary-row > *, .order-product > *, .order-state > * { min-width: 0; }
    body .details-summary { grid-template-columns: minmax(0, 1fr); }
    .items-wrap { border-radius: 8px; }
    .client-table-scroll-hint { display: block; margin: 0; padding: 10px 12px; color: #607590; font-size: 12px; border-bottom: 1px solid #dfeaf4; }
    body #clientChatPanel { right: 8px; bottom: calc(78px + var(--client-keyboard-bottom, 0px)); width: calc(100% - 16px); height: calc(var(--client-visible-height) - 96px); }
    body #previewModal { top: var(--client-visible-top); bottom: auto; height: var(--client-visible-height); }
    body .preview-card img { max-height: calc(var(--client-visible-height) - 32px); }
    body .client-chat-button { bottom: max(14px, env(safe-area-inset-bottom)); }
    body .client-chat-message { overflow-wrap: anywhere; }
    body .client-chat-input { min-height: 44px; }
    .portal-language-float { top: max(8px, env(safe-area-inset-top)); right: 8px; }
}

@media screen and (max-width: 1200px) and (max-height: 500px) {
    body .drawer-head { min-height: 58px; padding: 8px 12px; }
    body .drawer-foot { max-height: 58%; }
    body .client-order-modal-head { padding: 10px 14px; }
}