/* I keep help content short on the page and let the user expand only the task they need. */
body.plant-body .page-help-link { display: flex; justify-content: flex-end; margin-bottom: .6rem; font-size: .9rem; }
body.plant-body .help-search { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem; align-items: end; margin: 1.25rem 0; }
body.plant-body .help-search label { grid-column: 1 / -1; }
body.plant-body .help-guide { border: 1px solid var(--ecommerce-border); border-radius: .6rem; margin: .75rem 0; background: var(--ecommerce-card); color: var(--ecommerce-card-text); }
body.plant-body .help-guide summary { padding: 1rem; cursor: pointer; min-height: 44px; }
body.plant-body .help-guide summary span { display: block; margin-top: .3rem; font-size: .9rem; }
body.plant-body .help-guide > div { padding: 0 1rem 1rem; }
body.plant-body .help-guide li { margin: .6rem 0; line-height: 1.6; }
body.plant-body .help-guide:target { outline: 2px solid var(--ecommerce-primary); outline-offset: 2px; }
@media (max-width: 760px) {
    /* I let the page scroll vertically while keeping wide data inside table containers. */
    body.plant-body.ecommerce-body #main-content.plant-main.plant-main { min-width: 0 !important; max-width: 100% !important; width: 100% !important; padding-inline: .75rem !important; box-sizing: border-box !important; }
    body.plant-body.ecommerce-body #main-content.plant-main > :is(.shop-section, .shop-page, .container, .branding-page) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; box-sizing: border-box !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.checkout-layout, .cart-layout, .payment-layout, .checkout-grid, .branding-grid, .branding-form-grid, .commerce-form-grid, .permission-check-grid, .settings-grid, .form-grid, .image-preview-product-layout) { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; gap: .85rem !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.checkout-layout, .cart-layout, .payment-layout, .checkout-grid, .branding-grid, .branding-form-grid, .commerce-form-grid, .permission-check-grid) > * { min-width: 0 !important; max-width: 100% !important; grid-column: auto !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.cart-summary, .checkout-summary, .payment-summary, .responsive-summary-card, .branding-preview) { position: static !important; width: 100% !important; min-width: 0 !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.shop-toolbar, .photo-upload-toolbar, .photo-picker-tools, .commerce-action-row, .responsive-action-row, .shop-heading-actions, .bulk-online-actions) { display: flex !important; flex-wrap: wrap !important; gap: .6rem !important; min-width: 0 !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.photo-picker-tools, .responsive-action-row, .shop-heading-actions) > :is(.btn, button, form) { flex: 0 1 auto !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.photo-picker-tools, .photo-upload-toolbar) :is(input, select) { min-width: 0 !important; max-width: 100% !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { font-size: 16px !important; min-width: 0 !important; max-width: 100% !important; }
    body.plant-body :is(button, .btn, summary) { min-height: 44px; white-space: normal; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; min-height: 20px !important; flex-shrink: 0; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(h1, h2, h3, p, label, .shop-muted, .alert) { overflow-wrap: anywhere; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.table-responsive, .auto-table-responsive, .admin-orders-table-wrap, .photo-picker-table-wrap, .customer-lines-wrap) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto !important; overscroll-behavior-x: contain; }
    /* I retain native table layout for complex grids and permission editors. */
    body.plant-body.ecommerce-body #main-content.plant-main table.mobile-scroll-table { display: table !important; width: max-content !important; min-width: 100% !important; }
    body.plant-body.ecommerce-body #main-content.plant-main table.mobile-scroll-table :is(th, td) { min-width: 6rem; }
    body.plant-body.ecommerce-body #main-content.plant-main .permission-check-grid label { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
    body.plant-body.ecommerce-body #main-content.plant-main .right-category-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .right-category-layout > :is(.product-area, .right-category-panel) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .right-category-panel { position: static !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; min-width: 0 !important; gap: .65rem !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .product-grid > * { min-width: 0 !important; max-width: 100% !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .product-grid :is(.product-card-title, .product-description) { overflow-wrap: anywhere !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.photo-picker-card, .image-preview-card), body.plant-body.ecommerce-body .admin-sync-confirm-card { width: calc(100vw - 1.5rem) !important; min-width: 0 !important; max-width: calc(100vw - 1.5rem) !important; max-height: calc(100dvh - 1.5rem) !important; overflow-y: auto !important; box-sizing: border-box !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .image-preview-frame { min-width: 0 !important; height: auto !important; max-height: 45dvh !important; }
    body.plant-body.ecommerce-body #main-content.plant-main .image-preview-frame img { max-height: 45dvh !important; max-width: 100% !important; object-fit: contain; }
    body.plant-body .help-search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body.plant-body .help-search :is(label, input) { grid-column: 1 / -1; }
    body.plant-body .admin-workspace-topbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
    body.plant-body .admin-workspace-topbar .admin-workspace-brand { grid-column: 1 / -1; grid-row: 1; }
    body.plant-body .admin-workspace-topbar > * { min-width: 0; max-width: 100%; }
    body.plant-body .admin-workspace-topbar .admin-profile { grid-column: auto; }
    body.plant-body .admin-workspace-topbar .admin-profile summary { min-height: 44px; }
    body.plant-body .plant-nav-inner { display: flex !important; flex-wrap: wrap !important; gap: .5rem !important; padding-inline: .75rem !important; }
    body.plant-body .plant-logo { flex: 1 1 100%; min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere; }
    body.plant-body .plant-mobile-menu { max-height: 75dvh !important; overflow-y: auto !important; }
}
@media (max-width: 380px) {
    body.plant-body.ecommerce-body #main-content.plant-main .product-grid { grid-template-columns: minmax(0, 1fr) !important; }
    body.plant-body.ecommerce-body #main-content.plant-main :is(.shop-heading-actions, .responsive-action-row) > :is(.btn, button, form) { flex-basis: 100% !important; width: 100% !important; }
}

/* I keep touch targets compact when mobile action groups stack vertically. */
@media (max-width: 760px) {
    body.plant-body.ecommerce-body #main-content.plant-main :is(.shop-heading-actions, .responsive-action-row, .permission-editor-shell) :is(.btn, button[type="submit"]) {
        flex: 0 1 auto !important; height: auto !important; min-height: 44px !important;
        padding-block: .65rem !important; font-size: 1rem !important; line-height: 1.35 !important;
        aspect-ratio: auto !important; align-self: stretch;
    }
}
body.plant-body #adminSidebar [hidden], body.plant-body .help-guide[hidden] { display: none !important; }
@media (max-width: 1000px) {
    body.admin-workspace .admin-workspace-topbar { position: sticky; top: 0; z-index: 1210; }
    body.admin-workspace.admin-sidebar-ready .admin-sidebar { padding-top: 9rem; }
}

/* I change only maintenance-card text so it remains legible on its existing light background. */
body.plant-body.ecommerce-body .storefront-unavailable-card :is(h1, p, .storefront-unavailable-kicker) {
    color: #202020 !important;
}