/*
 * Final database-theme compliance layer.
 *
 * This file is intentionally loaded after site.css, alignment.css, the dynamic
 * Branding/ThemeCss response and page-level styles.  The older stylesheets
 * contain the layout and visual craft; this layer only owns colour roles,
 * readable control content, icon treatment and rounded-edge containment.
 */

body.plant-body:not(.route-branding) {
    color: var(--theme-safe-page-text, var(--theme-safe-card-text, #111111)) !important;
}

/* Card-coloured surfaces. */
body.plant-body:not(.route-branding) :is(
    .product-card,
    .shop-product-card,
    .cart-panel,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .admin-order-card,
    .admin-detail-card,
    .admin-order-row,
    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .customer-order-card,
    .customer-order-details-card,
    .photo-edit-panel,
    .photo-picker-card,
    .photo-picker-modal,
    .manual-takeover-card,
    .delivery-settings-card,
    .delivery-pricing-example-card,
    .auth-card,
    .error-card,
    .faq-card
) {
    color: var(--theme-safe-card-text, var(--plant-text, #111111)) !important;
}

body.plant-body:not(.route-branding) :is(
    .product-card,
    .shop-product-card,
    .cart-panel,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .admin-order-card,
    .admin-detail-card,
    .admin-order-row,
    .customer-order-card,
    .customer-order-details-card,
    .photo-edit-panel,
    .photo-picker-card,
    .manual-takeover-card,
    .delivery-settings-card,
    .delivery-pricing-example-card,
    .auth-card,
    .error-card,
    .faq-card
) :is(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd) {
    color: inherit !important;
    text-shadow: none !important;
}

/* Secondary card/panel surfaces. */
body.plant-body:not(.route-branding) :is(
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .shop-pager,
    .shop-pager-bottom,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-safe-panel-body,
    .admin-bulk-online-panel,
    .admin-bulk-photo-panel,
    .admin-date-filter-panel,
    .online-sales-dashboard,
    .online-sales-summary-stack,
    .online-sales-status-row,
    .online-sales-totals-row,
    .inline-search-strip,
    .photo-upload-toolbar,
    .photo-upload-accordion,
    .auth-shell,
    .auth-panel-wrap,
    .delivery-distance-check-card,
    .delivery-distance-status,
    .checkout-address-confirm,
    .payment-safe-note,
    .alert
) {
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
}

body.plant-body:not(.route-branding) :is(
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .shop-pager,
    .shop-pager-bottom,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-safe-panel-body,
    .admin-bulk-online-panel,
    .admin-bulk-photo-panel,
    .admin-date-filter-panel,
    .inline-search-strip,
    .photo-upload-toolbar,
    .photo-upload-accordion,
    .auth-shell,
    .auth-panel-wrap,
    .delivery-distance-check-card,
    .delivery-distance-status,
    .checkout-address-confirm,
    .payment-safe-note,
    .alert
) :is(h1, h2, h3, h4, h5, h6, p, label, legend, dt, dd) {
    color: inherit !important;
    text-shadow: none !important;
}

/* Primary/heading surfaces need contrast against PrimaryColor, not CardColor. */
body.plant-body:not(.route-branding) :is(
    .plant-nav,
    .plant-nav-inner,
    .shop-section-heading,
    .compact-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .inner-heading,
    .auth-heading-row,
    .checkout-heading-row,
    .category-panel-head,
    .admin-safe-panel-head,
    .admin-online-list-head,
    .admin-online-list-foot
) {
    color: var(--theme-safe-primary-text, #ffffff) !important;
}

body.plant-body:not(.route-branding) :is(
    .shop-section-heading,
    .compact-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .inner-heading,
    .auth-heading-row,
    .checkout-heading-row,
    .category-panel-head,
    .admin-safe-panel-head,
    .admin-online-list-head,
    .admin-online-list-foot
) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--theme-safe-primary-heading, var(--theme-safe-primary-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(
    .plant-nav,
    .plant-nav-inner,
    .shop-section-heading,
    .compact-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .inner-heading,
    .auth-heading-row,
    .checkout-heading-row,
    .category-panel-head,
    .admin-safe-panel-head,
    .admin-online-list-head,
    .admin-online-list-foot
) :is(p, label, legend, small, .shop-muted, .small-muted, .shop-page-subtitle) {
    color: var(--theme-safe-primary-text, #ffffff) !important;
    text-shadow: none !important;
}

/* Ordinary labels and helper text follow their actual surface role. */
body.plant-body:not(.route-branding) .plant-main :is(
    label,
    legend,
    .form-label,
    .form-label-block,
    .upload-label,
    .single-photo-picker-label,
    .qty-label,
    .page-size-inline-label,
    .online-sales-page-size-label
) {
    color: var(--theme-safe-card-text, var(--plant-text, #111111)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(
    .shop-muted,
    .small-muted,
    .muted-cell,
    .pager-status,
    .pager-status-bottom,
    .category-picker-hint,
    .checkout-method-hint,
    .checkout-delivery-help,
    .checkout-note-counter,
    .payment-warning-reason,
    .admin-row-save-state,
    .photo-save-status,
    .cart-stock-note,
    .checkout-line-stock
) {
    color: var(--theme-safe-card-muted, var(--plant-muted, #666666)) !important;
    text-shadow: none !important;
}

/* Text links receive a contrast-safe version of the configured action colour. */
body.plant-body:not(.route-branding) .plant-main a:not(.btn):not(.shop-cart-link):not(.mode-switch-btn):not(.category-item):not(.admin-tool-link):not(.admin-command-link):not(.plant-floating-link):not(.photo-thumb-link):not(.shop-page-logo-link):not(.shop-developer-credit-link):not(.admin-no-photo-upload-link):not(.admin-photo-edit-btn) {
    color: var(--theme-safe-card-link, var(--theme-safe-card-text, #111111)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(
    .plant-nav,
    .shop-section-heading,
    .compact-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .inner-heading
) a:not(.btn):not(.shop-cart-link):not(.mode-switch-btn):not(.admin-tool-link):not(.admin-command-link) {
    color: var(--theme-safe-primary-link, var(--theme-safe-primary-text, #ffffff)) !important;
}

body.plant-body:not(.route-branding) :is(.text-danger, .required-mark, .field-validation-error, .validation-summary-errors) {
    color: var(--theme-safe-danger-text, #b42318) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(.text-success, .is-ok, .completed, .paid) {
    color: var(--theme-safe-success-text, var(--theme-safe-card-text, #111111)) !important;
}

body.plant-body:not(.route-branding) :is(.text-warning, .is-warning, .warning, .warn) {
    color: var(--theme-safe-warning-text, var(--theme-safe-card-text, #111111)) !important;
}

/*
 * One button contract.  Text, nested spans, text glyphs, SVGs and image icons
 * all derive from ButtonBackgroundColor + the contrast-safe ButtonFontColor.
 * Product-photo trigger buttons are deliberately excluded because their image
 * is content, not an icon.
 */
body.plant-body:not(.route-branding) :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .category-toggle-inline,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary,
    .auth-link-button,
    .available-toggle-btn,
    .plant-floating-link
) {
    background-color: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
    opacity: 1;
    background-clip: padding-box !important;
}

body.plant-body:not(.route-branding) :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .category-toggle-inline,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary,
    .auth-link-button,
    .available-toggle-btn,
    .plant-floating-link
) :is(span, strong, small, b, i) {
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary
) :is(svg, svg path, svg circle, svg rect, svg line, svg polyline, svg polygon) {
    color: inherit !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

body.plant-body:not(.route-branding) :is(
    .btn,
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary
)::before,
body.plant-body:not(.route-branding) :is(
    .btn,
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary
)::after {
    color: inherit;
    border-color: currentColor;
}

body.plant-body:not(.route-branding) .btn-cart-icon::after {
    background: var(--shop-button-bg, #111111) !important;
    border-color: var(--plant-gold, #f5f5f5) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary,
    .auth-link-button,
    .available-toggle-btn,
    .plant-floating-link
):hover,
body.plant-body:not(.route-branding) :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary,
    .auth-link-button,
    .available-toggle-btn,
    .plant-floating-link
):focus-visible {
    background-color: var(--shop-button-bg, #111111) !important;
    border-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    filter: brightness(1.08);
}

body.plant-body:not(.route-branding) :is(
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary
):disabled,
body.plant-body:not(.route-branding) :is(.btn, .pager-link, .mode-switch-btn, .admin-tool-link).disabled {
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    background-color: var(--shop-button-bg, #111111) !important;
    border-color: var(--shop-button-bg, #111111) !important;
    opacity: 0.58 !important;
    filter: saturate(0.45) !important;
}

body.plant-body:not(.route-branding) :is(
    .mode-switch-btn.active,
    .category-toggle-btn.active,
    .pager-link.active,
    .plant-menu a.active
) {
    background-color: var(--shop-button-bg, #111111) !important;
    border-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    box-shadow: inset 0 0 0 2px var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

/* Image icons are recoloured; content images and uploaded logos never are. */
body.plant-body:not(.route-branding) :is(
    .nav-cart-icon,
    .cart-plus-icon,
    .cart-plus-img,
    .admin-photo-edit-icon,
    .qty-trash-icon,
    .copy-value-btn img,
    button:not(.image-preview-trigger):not(.photo-thumb-link) img:not(.product-image):not(.photo-admin-thumb):not(.shop-page-logo):not(.plant-logo-img):not(.shop-developer-credit-logo),
    .btn img:not(.product-image):not(.photo-admin-thumb):not(.shop-page-logo):not(.plant-logo-img):not(.shop-developer-credit-logo)
) {
    filter: var(--theme-button-icon-filter, brightness(0) invert(1)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

body.plant-body:not(.route-branding) :is(
    .product-image,
    .photo-admin-thumb,
    .shop-page-logo,
    .plant-logo-img,
    .shop-developer-credit-logo,
    .image-preview-photo,
    .photo-viewer-image,
    .admin-list-image img
) {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

body.plant-body:not(.route-branding) .inline-search-icon {
    color: var(--theme-safe-card-muted, #666666) !important;
    filter: none !important;
    text-shadow: none !important;
}

/* Reverse cart count remains readable inside a themed Cart button. */
body.plant-body:not(.route-branding) .nav-cart-count {
    background: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    border-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    color: var(--shop-button-bg, #111111) !important;
    text-shadow: none !important;
}

/* Secondary-colour badges use their own contrast calculation. */
body.plant-body:not(.route-branding) :is(
    .badge,
    .admin-badge,
    .online-badge,
    .photo-badge,
    .user-badge,
    .role-pill,
    .category-count,
    .product-stock-chip,
    .stock-pill,
    .status-pill,
    .customer-status-pill,
    .order-status-badge,
    .payment-status-badge,
    .payment-status-pill,
    .delivery-distance-pill,
    .admin-payment-badge,
    .admin-view-pill,
    .online-state,
    .image-preview-gallery-status,
    .photo-state,
    .photo-count-pill,
    .selected-count-pill,
    .admin-selected-pill,
    .unsaved-badge,
    .unsaved-pill
) {
    background-color: var(--plant-gold, #f5f5f5) !important;
    background-image: none !important;
    border-color: var(--plant-gold, #f5f5f5) !important;
    color: var(--theme-safe-secondary-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(
    .badge,
    .admin-badge,
    .online-badge,
    .photo-badge,
    .user-badge,
    .role-pill,
    .category-count,
    .product-stock-chip,
    .stock-pill,
    .status-pill,
    .customer-status-pill,
    .order-status-badge,
    .payment-status-badge,
    .payment-status-pill,
    .delivery-distance-pill,
    .admin-payment-badge,
    .admin-view-pill,
    .online-state,
    .image-preview-gallery-status,
    .photo-state,
    .photo-count-pill,
    .selected-count-pill,
    .admin-selected-pill,
    .unsaved-badge,
    .unsaved-pill
) :is(span, strong, small, b, i) {
    color: inherit !important;
    text-shadow: none !important;
}

/* Inputs and their labels remain a readable pair regardless of the page. */
body.plant-body:not(.route-branding) :is(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .inline-search-box
) {
    background-color: rgba(var(--theme-card-rgb, 255, 255, 255), 0.92) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    caret-color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(input, textarea)::placeholder {
    color: var(--theme-safe-card-muted, #666666) !important;
    opacity: 0.8 !important;
}

body.plant-body:not(.route-branding) select option {
    background: var(--plant-card, #ffffff) !important;
    color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body:not(.route-branding) input[type="file"]::file-selector-button,
body.plant-body:not(.route-branding) input[type="file"]::-webkit-file-upload-button {
    background: var(--shop-button-bg, #111111) !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

body.plant-body:not(.route-branding) :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--shop-button-bg, #111111) !important;
}

/* Category/dropdown items are links until selected, then become themed buttons. */
body.plant-body:not(.route-branding) :is(.category-item, .dropdown-item) {
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) :is(.category-item.active, .category-item:hover, .dropdown-item:hover, .dropdown-item:focus) {
    background: var(--shop-button-bg, #111111) !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

/* Tables inherit the card contrast instead of Bootstrap's fixed light/dark text. */
body.plant-body:not(.route-branding) :is(table, thead, tbody, tfoot, tr, th, td) {
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.58) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

/* Keyboard focus stays visible with any configured colour combination. */
body.plant-body:not(.route-branding) :is(
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [role="button"]
):focus-visible {
    outline: 3px solid var(--plant-gold, #f5f5f5) !important;
    outline-offset: 3px !important;
}

/*
 * Rounded-border containment.  background-clip keeps decorative layers under
 * the curved border; inheriting the radius prevents first/last child panels
 * and overlays from drawing square corners over their parent.
 */
body.plant-body:not(.route-branding) :is(
    .plant-nav,
    .shop-section,
    .shop-page,
    .shop-admin-page,
    .shop-stock-shell,
    .shop-section-heading,
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .shop-pager,
    .shop-pager-bottom,
    .product-card,
    .product-image-wrap,
    .cart-panel,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-summary-card,
    .admin-detail-card,
    .admin-order-card,
    .customer-order-card,
    .photo-edit-panel,
    .photo-picker-card,
    .manual-takeover-card,
    .delivery-settings-card,
    .auth-card,
    .error-card,
    .alert,
    .shop-card-qty-panel,
    .shop-card-qty-stepper,
    .shop-mode-switch,
    .compact-mode-switch,
    .admin-tools-menu-panel,
    .dropdown-menu
) {
    background-clip: padding-box !important;
}

body.plant-body:not(.route-branding) :is(
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .product-card,
    .shop-product-card,
    .product-image-wrap,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-summary-card,
    .admin-detail-card,
    .admin-order-card,
    .customer-order-card,
    .photo-edit-panel,
    .photo-picker-card,
    .manual-takeover-card,
    .delivery-settings-card,
    .auth-card,
    .error-card,
    .alert,
    .shop-card-qty-stepper,
    .shop-mode-switch,
    .compact-mode-switch,
    .admin-tools-menu-panel,
    .dropdown-menu
) {
    overflow: hidden !important;
}

body.plant-body:not(.route-branding) :is(
    .shop-section,
    .shop-stock-shell,
    .shop-section-heading,
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .product-card,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-summary-card,
    .admin-detail-card,
    .admin-order-card,
    .customer-order-card,
    .photo-edit-panel,
    .delivery-settings-card,
    .auth-card,
    .error-card
)::before,
body.plant-body:not(.route-branding) :is(
    .shop-section,
    .shop-stock-shell,
    .shop-section-heading,
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .product-card,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-summary-card,
    .admin-detail-card,
    .admin-order-card,
    .customer-order-card,
    .photo-edit-panel,
    .delivery-settings-card,
    .auth-card,
    .error-card
)::after {
    border-radius: inherit;
}

body.plant-body:not(.route-branding) :is(.admin-safe-panel, .category-panel, .right-category-panel) > :first-child {
    border-start-start-radius: inherit !important;
    border-start-end-radius: inherit !important;
}

body.plant-body:not(.route-branding) :is(.admin-safe-panel, .category-panel, .right-category-panel) > :last-child {
    border-end-start-radius: inherit !important;
    border-end-end-radius: inherit !important;
}

body.plant-body:not(.route-branding) .admin-safe-panel.is-collapsed > .admin-safe-panel-head {
    border-radius: inherit !important;
}

/* Photo edit is a compact icon action link rather than a native button. */
body.plant-body:not(.route-branding) .admin-photo-edit-btn {
    background: var(--shop-button-bg, #111111) !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) .admin-photo-edit-btn :is(span, strong, small, b, i) {
    color: inherit !important;
}

body.plant-body:not(.route-branding) .admin-no-photo-upload-link {
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
}

body.plant-body:not(.route-branding) .admin-no-photo-upload-link small {
    color: var(--theme-safe-card-secondary-muted, var(--theme-safe-card-muted, #666666)) !important;
}

/* The image button is a surface; never apply the action-button colour to it. */
body.plant-body:not(.route-branding) button.image-preview-trigger.product-image-wrap,
body.plant-body:not(.route-branding) button.photo-thumb-link {
    background-color: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.82) !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.74) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    overflow: hidden !important;
}

/*
 * Branding editor safety.  The live miniature preview keeps its intentional
 * sample colours; the surrounding admin page follows the saved database theme
 * without falling back to the legacy green/gold palette.
 */
body.plant-body.route-branding {
    color: var(--theme-safe-page-text, #111111) !important;
}

body.plant-body.route-branding .branding-title :is(h1, p) {
    color: var(--theme-safe-page-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body.route-branding :is(.branding-panel, .asset-card) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-branding :is(.branding-panel, .asset-card) :is(h1, h2, h3, h4, p, label, legend, strong):not(.live-preview-browser *) {
    color: inherit !important;
    text-shadow: none !important;
}

body.plant-body.route-branding :is(.branding-panel-note, .branding-check, .asset-card small) {
    color: var(--theme-safe-card-muted, #666666) !important;
    text-shadow: none !important;
}

body.plant-body.route-branding :is(
    .branding-field input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
    .branding-field select,
    .branding-field textarea,
    .asset-card input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
    .asset-card select,
    .asset-card textarea
) {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.92) !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    caret-color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-branding :is(.branding-field input, .branding-field select):focus-visible {
    outline: 3px solid var(--plant-gold, #f5f5f5) !important;
    outline-offset: 2px !important;
}

body.plant-body.route-branding input[type="range"],
body.plant-body.route-branding input[type="checkbox"] {
    accent-color: var(--shop-button-bg, #111111) !important;
}

body.plant-body.route-branding .asset-preview {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.86) !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.72) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-branding .theme-card {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    text-align: left;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-branding .theme-card :is(strong, span) {
    color: inherit !important;
    text-shadow: none !important;
}

body.plant-body.route-branding :is(
    .btn,
    a.btn,
    button.btn,
    input[type="submit"],
    input[type="button"]
) {
    background: var(--shop-button-bg, #111111) !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body.route-branding :is(.btn, a.btn, button.btn) :is(span, strong, small, b, i) {
    color: inherit !important;
}

body.plant-body.route-branding :is(.btn, a.btn, button.btn, .theme-card):focus-visible {
    outline: 3px solid var(--plant-gold, #f5f5f5) !important;
    outline-offset: 3px !important;
}

body.plant-body.route-branding :is(.field-validation-error, .validation-summary-errors) {
    color: var(--theme-safe-danger-text, #b42318) !important;
}

/*
 * Specificity seal for the accumulated legacy stylesheet.  #main-content is
 * intentional: several historical selectors contain long :not() chains and
 * !important, so normal source order alone cannot reliably replace them.
 */
body.plant-body:not(.route-branding) #main-content :is(
    .product-card,
    .shop-product-card,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .admin-order-card,
    .admin-detail-card,
    .admin-order-row,
    .customer-order-card,
    .customer-order-details-card,
    .photo-edit-panel,
    .photo-picker-card,
    .manual-takeover-card,
    .delivery-settings-card,
    .delivery-pricing-example-card,
    .auth-card,
    .error-card,
    .faq-card
) :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, legend, dt, dd, li) {
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .shop-pager,
    .shop-pager-bottom,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-bulk-online-panel,
    .admin-bulk-photo-panel,
    .admin-date-filter-panel,
    .online-sales-dashboard,
    .inline-search-strip,
    .photo-upload-toolbar,
    .photo-upload-accordion,
    .auth-shell,
    .auth-panel-wrap,
    .delivery-distance-check-card,
    .delivery-distance-status,
    .checkout-address-confirm,
    .payment-safe-note,
    .alert
) :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, legend, dt, dd, li) {
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .shop-section-heading,
    .compact-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .inner-heading,
    .auth-heading-row,
    .checkout-heading-row,
    .category-panel-head,
    .admin-safe-panel-head,
    .admin-online-list-head,
    .admin-online-list-foot
) :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, legend, dt, dd, li) {
    color: var(--theme-safe-primary-text, #ffffff) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .shop-section-heading,
    .compact-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .inner-heading,
    .auth-heading-row,
    .checkout-heading-row
) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--theme-safe-primary-heading, var(--theme-safe-primary-text, #ffffff)) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .shop-muted,
    .small-muted,
    .muted-cell,
    .pager-status,
    .pager-status-bottom,
    .category-picker-hint,
    .checkout-method-hint,
    .checkout-delivery-help,
    .checkout-note-counter,
    .payment-warning-reason,
    .admin-row-save-state,
    .photo-save-status,
    .cart-stock-note,
    .checkout-line-stock
) {
    color: var(--theme-safe-card-muted, #666666) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .category-toggle-inline,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary,
    .auth-link-button,
    .available-toggle-btn,
    .plant-floating-link,
    .admin-photo-edit-btn,
    .product-photo-hint
) {
    background: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    button:not(.image-preview-trigger):not(.photo-thumb-link):not(.theme-card),
    a.btn,
    .shop-cart-link,
    .mode-switch-btn,
    .category-toggle-btn,
    .category-toggle-inline,
    .pager-link,
    .admin-tool-link,
    .admin-command-link,
    .admin-tools-summary,
    .auth-link-button,
    .available-toggle-btn,
    .plant-floating-link,
    .admin-photo-edit-btn,
    .product-photo-hint
) :is(span, strong, small, b, i) {
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .nav-cart-icon,
    .cart-plus-icon,
    .cart-plus-img,
    .admin-photo-edit-icon,
    .qty-trash-icon,
    .copy-value-btn img,
    button:not(.image-preview-trigger):not(.photo-thumb-link) img:not(.product-image):not(.photo-admin-thumb),
    .btn img:not(.product-image):not(.photo-admin-thumb)
) {
    filter: var(--theme-button-icon-filter, brightness(0) invert(1)) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

body.plant-body:not(.route-branding) #main-content .inline-search-icon {
    color: var(--theme-safe-card-muted, #666666) !important;
    filter: none !important;
}

body.plant-body:not(.route-branding) #main-content .nav-cart-count {
    background: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    border-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    color: var(--shop-button-bg, #111111) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .badge,
    .admin-badge,
    .online-badge,
    .photo-badge,
    .user-badge,
    .role-pill,
    .category-count,
    .product-stock-chip,
    .stock-pill,
    .status-pill,
    .customer-status-pill,
    .order-status-badge,
    .payment-status-badge,
    .payment-status-pill,
    .delivery-distance-pill,
    .admin-payment-badge,
    .admin-view-pill,
    .online-state,
    .image-preview-gallery-status,
    .photo-state,
    .photo-count-pill,
    .selected-count-pill,
    .admin-selected-pill,
    .unsaved-badge,
    .unsaved-pill
) {
    background: var(--plant-gold, #f5f5f5) !important;
    background-image: none !important;
    border-color: var(--plant-gold, #f5f5f5) !important;
    color: var(--theme-safe-secondary-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .badge,
    .admin-badge,
    .online-badge,
    .photo-badge,
    .user-badge,
    .role-pill,
    .category-count,
    .product-stock-chip,
    .stock-pill,
    .status-pill,
    .customer-status-pill,
    .order-status-badge,
    .payment-status-badge,
    .payment-status-pill,
    .delivery-distance-pill,
    .admin-payment-badge,
    .admin-view-pill,
    .online-state,
    .image-preview-gallery-status,
    .photo-state,
    .photo-count-pill,
    .selected-count-pill,
    .admin-selected-pill,
    .unsaved-badge,
    .unsaved-pill
) :is(span, strong, small, b, i) {
    color: inherit !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .inline-search-box
) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.92) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    caret-color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body:not(.route-branding) #main-content :is(input, textarea)::placeholder {
    color: var(--theme-safe-card-muted, #666666) !important;
    opacity: 0.8 !important;
}

body.plant-body:not(.route-branding) #main-content :is(.text-danger, .required-mark, .field-validation-error, .validation-summary-errors) {
    color: var(--theme-safe-danger-text, #b42318) !important;
}

/* The global header is outside #main-content, so seal its controls separately. */
body.plant-body:not(.route-branding) [data-site-header] :is(button, a.btn, .plant-admin-menu-toggle) {
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

body.plant-body:not(.route-branding) [data-site-header] :is(button, a.btn, .plant-admin-menu-toggle) :is(span, strong, small, b, i) {
    color: inherit !important;
}

@media (prefers-reduced-motion: reduce) {
    body.plant-body:not(.route-branding) *,
    body.plant-body:not(.route-branding) *::before,
    body.plant-body:not(.route-branding) *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ==========================================================
   Final client polish: cart clarity, unclipped admin controls,
   settings consistency, photo scrolling and legacy-green seals.
   ========================================================== */

/* The details element is only a positioning wrapper. It must never draw the
   square backing visible behind the rounded Admin Tools control. */
body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu),
body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu)[open],
body.plant-body [data-site-header] :is(.plant-admin-menu, .dropdown) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu) > .admin-tools-summary {
    border-radius: 999px !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

/* Cart count and product quantity remain readable even when a client selects
   equal or very similar theme colours. */
body.plant-body [data-site-header] .nav-cart-count,
body.plant-body:not(.route-branding) #main-content .nav-cart-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.35rem !important;
    min-height: 1.35rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    border: 1px solid var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    color: var(--shop-button-bg, #111111) !important;
    -webkit-text-fill-color: var(--shop-button-bg, #111111) !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content .product-card .shop-card-qty-panel .shop-card-qty-stepper .shop-card-qty-input {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    min-width: 2.4rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.98) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.94) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    caret-color: var(--theme-safe-card-text, #111111) !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-shadow: none !important;
}

/* The replacement Flaticon asset uses a transparent cut-out for its plus.
   Recolouring the solid icon cannot hide the plus, regardless of the theme. */
body.plant-body:not(.route-branding) #main-content .btn-cart .cart-plus-img {
    display: block !important;
    width: 1.55rem !important;
    height: 1.55rem !important;
    flex: 0 0 1.55rem !important;
    object-fit: contain !important;
    opacity: 1 !important;
}

body.plant-body:not(.route-branding) .shop-icon-attribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.45rem;
    margin: 0.65rem auto 0;
    padding: 0.25rem 0.75rem;
    color: var(--theme-safe-card-muted, #666666) !important;
    font-size: 0.64rem;
    line-height: 1.35;
    text-align: center;
}

body.plant-body:not(.route-branding) .shop-icon-attribution a {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

body.plant-body:not(.route-branding) .shop-icon-attribution a:hover,
body.plant-body:not(.route-branding) .shop-icon-attribution a:focus-visible {
    text-decoration: underline !important;
}

/* Let the page own vertical scrolling while retaining horizontal table access.
   This prevents the photo editor from trapping a mouse wheel at its boundary. */
body.plant-body.route-productphotos.route-index #main-content .product-photo-admin-shell,
body.plant-body.route-productphotos.route-index #main-content .photo-edit-panel,
body.plant-body.route-productphotos.route-index #main-content .inline-photo-edit-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
}

body.plant-body.route-productphotos.route-index #main-content :is(.photo-edit-panel, .inline-photo-edit-panel) .photo-order-form {
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
}

/* System Settings now uses the same outer card rhythm and section treatment as
   Delivery Settings without changing any field names or save behaviour. */
body.plant-body.route-shop.route-systemsettings #main-content .system-settings-section,
body.plant-body.route-branding #main-content .branding-settings-section {
    width: min(82rem, calc(100vw - clamp(1rem, 3vw, 3rem))) !important;
    max-width: min(82rem, calc(100vw - clamp(1rem, 3vw, 3rem))) !important;
    margin-inline: auto !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card,
body.plant-body.route-branding #main-content .branding-settings-form {
    width: 100% !important;
    max-width: 82rem !important;
    margin-inline: auto !important;
    padding: clamp(0.85rem, 1.6vw, 1.25rem) !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.5rem !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: var(--plant-shadow) !important;
    background-clip: padding-box !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-panel-card,
body.plant-body.route-branding #main-content .branding-settings-form .branding-panel {
    padding: clamp(0.85rem, 1.4vw, 1.15rem) !important;
    margin: 0 0 clamp(0.9rem, 1.4vw, 1.2rem) !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.74) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.76) !important;
    border-radius: 1rem !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-sub-card,
body.plant-body.route-branding #main-content .branding-settings-form .asset-card {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.86) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.76) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

body.plant-body.route-branding #main-content .branding-header,
body.plant-body.route-branding #main-content .branding-settings-form {
    color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body.route-branding #main-content .branding-header-actions,
body.plant-body.route-branding #main-content .branding-header-actions .admin-command-header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.65rem !important;
    flex-wrap: wrap !important;
}

/* Remove the final hardcoded green information/action surfaces. */
body.plant-body #main-content :is(.admin-note-card, .permission-help-card, .payment-safe-note, .permission-actions, .sticky-admin-actions, .admin-sticky-actions) {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

body.plant-body #main-content :is(.admin-note-card, .permission-help-card, .payment-safe-note, .permission-actions, .sticky-admin-actions, .admin-sticky-actions) :is(h1, h2, h3, h4, p, span, strong, small, label) {
    color: inherit !important;
    text-shadow: none !important;
}

body.plant-body .admin-sync-confirm-backdrop {
    background: rgba(var(--theme-page-rgb, 0, 0, 0), 0.72) !important;
}

body.plant-body .admin-sync-confirm-card {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.98) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.9) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    background-clip: padding-box !important;
}

body.plant-body .admin-sync-confirm-card :is(h3, p) {
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body .admin-sync-confirm-card .admin-sync-confirm-kicker {
    color: var(--theme-safe-card-secondary-link, var(--theme-safe-card-link, #111111)) !important;
}

/* Audit seal for legacy components that still declare the old green palette in
   site.css/alignment.css. Layout stays in those files; colour ownership lives
   here and follows the database theme. */
body.plant-body:not(.route-branding) #main-content :is(
    .image-preview-card,
    .image-preview-frame,
    .bulk-selected-box,
    .bulk-selected-preview,
    .admin-only-panel,
    .admin-online-row,
    .shop-empty-card,
    .admin-empty-card,
    .shop-loading-card,
    .user-edit-card,
    .tracking-step,
    .order-status-history-item,
    .order-status-history-card,
    .admin-status-update-card,
    .customer-tracking-card,
    .customer-order-panel,
    .customer-history-card,
    .checkout-gate-note,
    .signed-in-checkout-card,
    .checkout-form-section,
    .checkout-next-action-card,
    .admin-date-filter-summary-card,
    .customer-order-meta > div,
    .customer-order-detail-grid .compact-summary,
    .error-metadata-grid > div
) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.76) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    background-clip: padding-box !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .photo-picker-head,
    .photo-picker-tools,
    .photo-picker-foot,
    .photo-picker-table-wrap,
    .admin-collapsible-hint,
    .shop-pager-inline,
    .shop-pagination,
    .admin-order-pagination,
    .shop-page-size-form label,
    .available-filter-check,
    .show-online-filter-check,
    .permission-toggle,
    .admin-inline-check
) {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.76) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    background-clip: padding-box !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .image-preview-card,
    .image-preview-frame,
    .bulk-selected-box,
    .bulk-selected-preview,
    .admin-only-panel,
    .admin-online-row,
    .shop-empty-card,
    .admin-empty-card,
    .shop-loading-card,
    .user-edit-card,
    .tracking-step,
    .order-status-history-item,
    .order-status-history-card,
    .admin-status-update-card,
    .customer-tracking-card,
    .customer-order-panel,
    .customer-history-card,
    .checkout-gate-note,
    .signed-in-checkout-card,
    .checkout-form-section,
    .checkout-next-action-card,
    .admin-date-filter-summary-card,
    .photo-picker-head,
    .photo-picker-tools,
    .photo-picker-foot,
    .admin-collapsible-hint,
    .shop-page-size-form label,
    .available-filter-check,
    .show-online-filter-check,
    .permission-toggle,
    .admin-inline-check
) :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, legend, b) {
    color: inherit !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .photo-picker-table,
    .admin-orders-table,
    .admin-order-table,
    .admin-trn-orders-table,
    .admin-trn-detail-table,
    .customer-lines-table,
    .permission-table
) :is(table, thead, tbody, tr, td, th),
body.plant-body:not(.route-branding) #main-content :is(
    .photo-picker-table,
    .admin-orders-table,
    .admin-order-table,
    .admin-trn-orders-table,
    .admin-trn-detail-table,
    .customer-lines-table,
    .permission-table
) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.66) !important;
    color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .photo-picker-table,
    .admin-orders-table,
    .admin-order-table,
    .admin-trn-orders-table,
    .admin-trn-detail-table,
    .customer-lines-table,
    .permission-table
) thead th {
    background: rgba(var(--theme-primary-rgb, 17, 17, 17), 0.94) !important;
    color: var(--theme-safe-primary-text, #ffffff) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .product-meta,
    .product-price,
    .admin-list-main,
    .admin-list-stock,
    .admin-list-price,
    .admin-list-group,
    .cart-row-main,
    .cart-row-total,
    .delivery-example-lines,
    .delivery-example-total,
    .permission-na
) {
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) [data-site-header] :is(.plant-mobile-menu, .plant-admin-dropdown) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.98) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body:not(.route-branding) [data-site-header] :is(.plant-mobile-menu, .plant-admin-dropdown) :is(a, button, span) {
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) [data-site-header] :is(.plant-mobile-menu, .plant-admin-dropdown) :is(a:hover, a:focus-visible, a.active, button:hover, button:focus-visible) {
    background: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, #ffffff) !important;
}

body.plant-body:not(.route-branding) #main-content,
body.plant-body:not(.route-branding) #main-content * {
    scrollbar-color: var(--shop-button-bg, #111111) rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.78);
}

body.plant-body:not(.route-branding) #main-content *::-webkit-scrollbar-track {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.78) !important;
}

body.plant-body:not(.route-branding) #main-content *::-webkit-scrollbar-thumb {
    background: var(--shop-button-bg, #111111) !important;
    border: 2px solid rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.78) !important;
    border-radius: 999px !important;
}

body.plant-body ::selection {
    background: var(--plant-gold, #f5f5f5);
    color: var(--theme-safe-secondary-text, #111111);
}

@media (max-width: 65.625rem) {
    body.plant-body.route-branding #main-content .branding-header-actions,
    body.plant-body.route-branding #main-content .branding-header-actions .admin-command-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

/* Final static audit seal for legacy components that still contain the former
   green/gold literals in site.css or alignment.css.  Their layout remains in
   those files; only their colour roles are replaced here. */
body.plant-body:not(.route-branding) #main-content :is(
    .empty-cart-card,
    .delivery-address-panel,
    .delivery-address-head,
    .final-polish-card,
    .online-filter-card,
    .error-help-card
) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    background-clip: padding-box !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .empty-cart-card,
    .delivery-address-panel,
    .delivery-address-head,
    .final-polish-card,
    .online-filter-card,
    .error-help-card
) :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, legend) {
    color: inherit !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .delivery-map-prompt,
    .delivery-map-prompt.has-pin,
    .delivery-example-warning,
    .payment-warning-row
) {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.94) !important;
    background-image: none !important;
    border-color: var(--plant-gold, #f5f5f5) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .error-status-pill,
    .cart-state-pill,
    .photo-picker-count,
    .admin-online-state
) {
    background: var(--plant-gold, #f5f5f5) !important;
    background-image: none !important;
    border-color: var(--plant-gold, #f5f5f5) !important;
    color: var(--theme-safe-secondary-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body:not(.route-branding) #main-content .online-filter-card:is(:hover, :focus-visible, .is-active-filter) {
    border-color: var(--shop-button-bg, #111111) !important;
    box-shadow: 0 0 0 2px var(--shop-button-bg, #111111) !important;
}

body.plant-body:not(.route-branding) #main-content .admin-category-select,
body.plant-body:not(.route-branding) #main-content .admin-category-select:is(:hover, :focus) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.96) !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.86) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: none !important;
}

body.plant-body .pp-loading-overlay {
    background: rgba(var(--theme-page-rgb, 17, 17, 17), 0.74) !important;
}

body.plant-body .pp-loading-card,
body.plant-body .shop-toast {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.98) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.86) !important;
    color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body .pp-loading-card :is(strong, span),
body.plant-body .shop-toast :is(strong, span) {
    color: inherit !important;
    text-shadow: none !important;
}

body.plant-body .gold-loader {
    border-color: rgba(var(--theme-secondary-rgb, 245, 245, 245), 0.32) !important;
    border-top-color: var(--shop-button-bg, #111111) !important;
    border-right-color: var(--plant-gold, #f5f5f5) !important;
}

/* Delivery/System Settings must use the document scrollbar. Older card rules
   created clipped containers that swallowed mouse-wheel movement. */
body.plant-body.route-shop:is(.route-deliverysettings, .route-systemsettings) {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
}

body.plant-body.route-shop:is(.route-deliverysettings, .route-systemsettings) :is(
    .plant-main,
    .delivery-settings-section,
    .system-settings-section,
    .delivery-settings-card,
    .system-settings-card,
    .admin-settings-form,
    .admin-panel-card,
    .admin-sub-card
) {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
}

/* The late Added Qty repair in site.css carried a fixed olive panel. This
   higher-specificity rule retains its sizing but returns colour ownership to
   the client's saved theme. */
body.plant-body.route-shop.route-index:not(.route-branding) #main-content .product-card.is-in-cart .shop-card-qty-panel,
body.plant-body.route-shop.route-index:not(.route-branding) #main-content .shop-card-qty-panel {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.9) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content .product-card.is-in-cart .shop-card-qty-label,
body.plant-body.route-shop.route-index:not(.route-branding) #main-content .shop-card-qty-label {
    background: transparent !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content .product-card.is-in-cart .shop-card-qty-stepper,
body.plant-body.route-shop.route-index:not(.route-branding) #main-content .shop-card-qty-stepper {
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
}

/* Bulk Show Online / Bulk Photo Upload: theme both the large header and the
   small Show/Hide state pill. The state pill was the last visible green chip. */
body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.86) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head,
body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head:is(:hover, :focus-visible) {
    background: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    box-shadow: none !important;
    filter: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head :is(.admin-collapsible-title, .admin-collapsible-hint) {
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head [data-panel-state] {
    background: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    background-image: none !important;
    border: 1px solid var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    color: var(--shop-button-bg, #111111) !important;
    -webkit-text-fill-color: var(--shop-button-bg, #111111) !important;
    text-shadow: none !important;
}

/* Online Sales rounding pass. Major regions own one clean rounded edge while
   table rows remain square and readable inside their clipped outer wrapper. */
body.plant-body.route-shop.route-orders #main-content .online-sales-dashboard-layout {
    padding: clamp(0.65rem, 1.1vw, 0.9rem) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.5rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.72) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-orders #main-content .online-sales-filter-card {
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    border-radius: 1.25rem !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.94) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-orders #main-content .online-sales-summary-stack {
    padding: clamp(0.55rem, 0.9vw, 0.75rem) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.76) !important;
    border-radius: 1.25rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.84) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-orders #main-content .online-sales-summary-stack > :is(
    .online-sales-totals-row,
    .online-sales-status-row
) {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    overflow: visible !important;
}

body.plant-body.route-shop.route-orders #main-content .online-sales-dashboard .admin-summary-card {
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.05rem !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), 0.94) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-orders #main-content :is(
    .inline-search-strip,
    .shop-pagination.admin-order-pagination
) {
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.35rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-orders #main-content .admin-orders-table-wrap {
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    border-radius: 1.35rem !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    background-clip: padding-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

body.plant-body.route-shop.route-orders #main-content .admin-trn-orders-table {
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-clip: padding-box !important;
}

/* IQTech ownership mark is intentionally not client-themeable. These values,
   the logo path and the destination URL are product-owned and fixed in code. */
:root {
    --iqtech-developer-bg: #112b3a;
    --iqtech-developer-bg-hover: #193b4c;
    --iqtech-developer-border: #4fb8d1;
    --iqtech-developer-border-hover: #84d8ea;
    --iqtech-developer-text: #ffffff;
}

body.plant-body #main-content .shop-developer-credit,
body.plant-body #main-content .shop-developer-credit * {
    color: var(--iqtech-developer-text) !important;
    text-shadow: none !important;
}

body.plant-body #main-content .shop-developer-credit-link {
    background: var(--iqtech-developer-bg) !important;
    background-image: none !important;
    border-color: var(--iqtech-developer-border) !important;
    color: var(--iqtech-developer-text) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

body.plant-body #main-content .shop-developer-credit-link:hover,
body.plant-body #main-content .shop-developer-credit-link:focus-visible {
    background: var(--iqtech-developer-bg-hover) !important;
    border-color: var(--iqtech-developer-border-hover) !important;
    color: var(--iqtech-developer-text) !important;
}

body.plant-body #main-content .shop-developer-credit-logo,
body.plant-body.route-branding #main-content .live-preview-developer img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

/* ==========================================================
   Final requested colour, interaction and scrolling repairs.
   ========================================================== */

/* Admin shop filters and bulk controls: remove the old gold/green seals and
   let the client button/text palette own every visible state. */
body.plant-body.route-shop.route-index.shop-admin-mode #main-content .show-online-filter-check {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .show-online-filter-check span {
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head,
body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head:is(:hover, :focus, :focus-visible) {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.98) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.84) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
    filter: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head :is(.admin-collapsible-title, .admin-collapsible-hint) {
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-safe-panel.admin-bulk-online-panel,
    .admin-safe-panel.admin-bulk-photo-panel
) > .admin-safe-panel-head [data-panel-state] {
    background: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(
    .admin-category-select,
    .admin-category-select:is(:hover, :focus, :focus-visible)
) {
    background: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content .admin-category-select option {
    background: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

/* My Orders: neutral themed cards and borders replace the legacy green/gold
   treatment while keeping status/action controls distinct. */
body.plant-body.route-shop.route-myorders #main-content :is(
    .customer-orders-shell,
    .customer-order-list,
    .my-orders-search-form,
    .customer-order-pagination
) {
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-shop.route-myorders #main-content .customer-order-card {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.35rem !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

body.plant-body.route-shop.route-myorders #main-content .customer-order-card :is(h3, p, span, strong) {
    color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body.route-shop.route-myorders #main-content .customer-order-card .shop-muted {
    color: var(--theme-safe-card-muted, #666666) !important;
}

body.plant-body.route-shop.route-myorders #main-content .customer-order-meta > div {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.94) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    border-radius: 0.9rem !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-myorders #main-content .customer-order-meta > div :is(span, strong) {
    color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-shop.route-myorders #main-content .customer-order-card .customer-status-pill {
    background: var(--shop-button-bg, #111111) !important;
    border-color: var(--shop-button-bg, #111111) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

/* Customer order detail cards use the saved normal font colour throughout. */
body.plant-body.route-shop.route-myorderdetails #main-content :is(
    .customer-tracking-card,
    .customer-history-card,
    .customer-order-panel,
    .customer-order-panel .compact-summary,
    .customer-lines-wrap
) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-myorderdetails #main-content :is(
    .customer-order-panel,
    .customer-order-panel .compact-summary
) :is(h3, div, span, strong) {
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

body.plant-body.route-shop.route-myorderdetails #main-content .customer-order-panel .compact-summary > div {
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.82) !important;
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.6) !important;
    border-radius: 0.85rem !important;
}

/* Online Sales: neutral row separators and true phone/email links replace the
   highlighted copy-button appearance. */
body.plant-body.route-shop.route-orders #main-content .admin-trn-orders-table :is(tbody, tr, td) {
    border-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.62) !important;
}

body.plant-body.route-shop.route-orders #main-content .admin-trn-orders-table tbody tr {
    border-left-color: rgba(var(--theme-border-rgb, 210, 218, 230), 0.72) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-orders #main-content .order-contact-list {
    display: grid !important;
    gap: 0.22rem !important;
    justify-items: start !important;
}

body.plant-body.route-shop.route-orders #main-content .order-contact-link,
body.plant-body.route-shop.route-orders #main-content .order-contact-link:is(:visited, :hover, :focus-visible) {
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--theme-safe-card-link, var(--theme-safe-card-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-link, var(--theme-safe-card-text, #111111)) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: underline !important;
    text-underline-offset: 0.16em !important;
}

/* Delivery heading follows the page's normal text colour. */
body.plant-body.route-shop.route-deliverysettings #main-content .delivery-settings-section > .shop-section-heading :is(h1, h2, h3, span, p),
body.plant-body.route-shop.route-deliverysettings #main-content .delivery-settings-section > .shop-section-heading .shop-muted {
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    text-shadow: none !important;
}

/* Remove browser focus/tap rectangles around the rounded Admin Tools details
   control and retain rounded dropdown items in every state. */
body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu),
body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu):is(:focus, :focus-visible, :focus-within),
body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu)[open] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu) > .admin-tools-summary,
body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu) > .admin-tools-summary:is(:focus, :focus-visible, :active) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    border-radius: 999px !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body.plant-body :is(.shop-admin-tools-menu, .shared-admin-tools-menu) > .admin-tools-summary::selection {
    background: transparent !important;
}

body.plant-body .admin-tools-menu-panel .admin-tool-link {
    border-radius: 0.8rem !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
}

/* Add/Edit User: the document owns vertical scrolling even when the pointer is
   over the form, so the mouse wheel cannot be trapped by the card. */
body.plant-body.route-users.route-edit {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
}

body.plant-body.route-users.route-edit :is(
    .plant-main,
    .admin-edit-shell,
    .user-edit-card,
    .checkout-grid,
    .payment-safe-note
) {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-x pan-y !important;
}

/* ==========================================================
   2026-07-13 final storefront/admin corrections
   ========================================================== */

/* A theme-safe segmented switch replaces the old gold-outlined wrapper. */
body.plant-body.route-shop.route-index #main-content .shop-mode-switch {
    display: inline-grid !important;
    grid-template-columns: repeat(2, max-content) !important;
    align-items: center !important;
    gap: 0.2rem !important;
    padding: 0.22rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.94) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.9) !important;
    border-radius: 999px !important;
    box-shadow: inset 0 1px 3px rgba(17, 32, 51, 0.14) !important;
    backdrop-filter: blur(8px) !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-index #main-content .shop-mode-switch .mode-switch-btn,
body.plant-body.route-shop.route-index #main-content .shop-mode-switch .mode-switch-btn:not(.active),
body.plant-body.route-shop.route-index #main-content .shop-mode-switch .mode-switch-btn:not(.active):is(:hover, :focus-visible) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.55rem !important;
    padding: 0.55rem 0.9rem !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
    filter: none !important;
    transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease !important;
}

body.plant-body.route-shop.route-index #main-content .shop-mode-switch .mode-switch-btn.active,
body.plant-body.route-shop.route-index #main-content .shop-mode-switch .mode-switch-btn.active:is(:hover, :focus-visible) {
    background: var(--shop-button-bg, #0a197b) !important;
    background-image: none !important;
    border-color: var(--shop-button-bg, #0a197b) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    box-shadow: 0 2px 7px rgba(17, 32, 51, 0.24) !important;
    filter: none !important;
    transform: translateY(-1px) !important;
}

/* Admin Tools is now a normal button and panel. This avoids the square native
   disclosure background rendered by some browsers. */
body.plant-body .shop-admin-tools-menu > .admin-tools-summary {
    cursor: pointer !important;
    user-select: none !important;
}

body.plant-body .shop-admin-tools-menu.is-open > .admin-tools-summary::after {
    content: " ▴" !important;
}

body.plant-body .shop-admin-tools-menu > .admin-tools-menu-panel[hidden] {
    display: none !important;
}

body.plant-body .shop-admin-tools-menu.is-open > .admin-tools-menu-panel {
    display: grid !important;
}

/* Every category is a full themed button, not just the selected category. */
body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(.right-category-panel, .category-panel) .category-item,
body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(.right-category-panel, .category-panel) .category-item:is(:hover, :focus-visible, .active) {
    min-height: 2.65rem !important;
    padding: 0.55rem 0.7rem !important;
    background: var(--shop-button-bg, #0a197b) !important;
    background-image: none !important;
    border: 1px solid var(--shop-button-bg, #0a197b) !important;
    border-radius: 999px !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(.right-category-panel, .category-panel) .category-item :is(span, strong) {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    text-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(.right-category-panel, .category-panel) .category-item b {
    background: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    border: 0 !important;
    color: var(--shop-button-bg, #0a197b) !important;
    -webkit-text-fill-color: var(--shop-button-bg, #0a197b) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index:not(.route-branding) #main-content :is(.right-category-panel, .category-panel) .category-item:is(:hover, :focus-visible, .active) {
    filter: brightness(1.08) !important;
    box-shadow: inset 0 0 0 2px var(--theme-safe-button-text, #ffffff) !important;
}

/* Phone and email use the same secondary-colour status pill treatment as the
   Processing and Payment columns while staying clickable. */
body.plant-body.route-shop.route-orders #main-content .order-contact-link,
body.plant-body.route-shop.route-orders #main-content .order-contact-link:is(:visited, :hover, :focus-visible) {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 1.8rem !important;
    padding: 0.34rem 0.65rem !important;
    background: var(--plant-gold, #f5f5f5) !important;
    background-image: none !important;
    border: 1px solid var(--plant-gold, #f5f5f5) !important;
    border-radius: 999px !important;
    color: var(--theme-safe-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-secondary-text, #111111) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
}

/* Branding is the safety workspace: its shell always stays in a neutral
   Windows-style palette. Only the miniature shop preview reflects client
   branding choices. */
body.plant-body.route-branding {
    --plant-bg: #edf3f9;
    --plant-bg-2: #dfe8f2;
    --plant-card: #ffffff;
    --plant-card-2: #f3f6fa;
    --plant-green: #0f6cbd;
    --plant-green-soft: #1e78c5;
    --plant-gold: #d6e4f2;
    --plant-gold-dark: #b7c9dc;
    --plant-text: #172033;
    --plant-muted: #5c677a;
    --plant-border: #c7d2df;
    --theme-card-rgb: 255, 255, 255;
    --theme-card-secondary-rgb: 243, 246, 250;
    --theme-page-rgb: 237, 243, 249;
    --theme-border-rgb: 199, 210, 223;
    --theme-primary-rgb: 15, 108, 189;
    --theme-secondary-rgb: 214, 228, 242;
    --theme-panel-alpha: 0.98;
    --theme-safe-card-text: #172033;
    --theme-safe-card-muted: #5c677a;
    --theme-safe-card-secondary-text: #172033;
    --theme-safe-card-secondary-muted: #5c677a;
    --theme-safe-page-text: #172033;
    --theme-safe-primary-text: #ffffff;
    --theme-safe-primary-heading: #ffffff;
    --theme-safe-secondary-text: #172033;
    --theme-safe-button-text: #ffffff;
    --shop-button-bg: #0f6cbd;
    --shop-button-text: #ffffff;
    background: #edf3f9 !important;
    background-image: none !important;
    color: #172033 !important;
}

body.plant-body.route-branding::before {
    background: none !important;
    background-image: none !important;
}

body.plant-body.route-branding::after {
    background: linear-gradient(145deg, rgba(237, 243, 249, 0.98), rgba(223, 232, 242, 0.98)) !important;
}

body.plant-body.route-branding :is(.plant-nav, .branding-header) {
    background: linear-gradient(135deg, #123a63, #0f6cbd) !important;
    background-image: linear-gradient(135deg, #123a63, #0f6cbd) !important;
    border-color: #7fa9cf !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body.plant-body.route-branding #main-content .branding-header .branding-title :is(h1, p),
body.plant-body.route-branding .plant-nav :is(a, button, span, strong) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

body.plant-body.route-branding #main-content .branding-settings-form {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #c7d2df !important;
    color: #172033 !important;
    box-shadow: 0 12px 34px rgba(31, 58, 86, 0.12) !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .branding-panel {
    background: #f3f6fa !important;
    background-image: none !important;
    border-color: #c7d2df !important;
    color: #172033 !important;
    box-shadow: none !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .asset-card,
body.plant-body.route-branding #main-content .branding-settings-form .asset-preview,
body.plant-body.route-branding #main-content .branding-settings-form .theme-card {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #c7d2df !important;
    color: #172033 !important;
    box-shadow: none !important;
}

body.plant-body.route-branding #main-content .branding-settings-form :is(.branding-panel, .asset-card, .theme-card) :is(h1, h2, h3, h4, p, label, legend, strong, span, small):not(.live-preview-browser *),
body.plant-body.route-branding #main-content .branding-settings-form .branding-panel-note {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    text-shadow: none !important;
}

body.plant-body.route-branding #main-content .branding-settings-form :is(
    .branding-field input:not([type="color"]):not([type="range"]):not([type="checkbox"]),
    .branding-field select,
    .branding-field textarea,
    .asset-card input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
    .asset-card select,
    .asset-card textarea
) {
    background: #ffffff !important;
    border-color: #aebdcd !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

body.plant-body.route-branding #main-content :is(.btn-gold, .btn-primary, .btn-outline-gold, .shop-cart-link, .admin-tools-summary),
body.plant-body.route-branding #main-content :is(.btn-gold, .btn-primary, .btn-outline-gold, .shop-cart-link, .admin-tools-summary):is(:hover, :focus-visible, :active) {
    background: #0f6cbd !important;
    background-image: none !important;
    border-color: #0f6cbd !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: none !important;
}

body.plant-body.route-branding #main-content .admin-tools-menu-panel {
    background: #ffffff !important;
    border-color: #c7d2df !important;
    box-shadow: 0 12px 28px rgba(31, 58, 86, 0.18) !important;
}

body.plant-body.route-branding #main-content .admin-tools-menu-panel .admin-tool-link {
    background: #edf3f9 !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

body.plant-body.route-branding #main-content .admin-tools-menu-panel .admin-tool-link:is(:hover, :focus-visible) {
    background: #0f6cbd !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.plant-body.route-branding input[type="range"],
body.plant-body.route-branding input[type="checkbox"] {
    accent-color: #0f6cbd !important;
}

body.plant-body.route-branding #main-content :is(.branding-field input, .branding-field select):focus-visible {
    outline: 3px solid rgba(15, 108, 189, 0.35) !important;
    outline-offset: 2px !important;
}

/* Keep editor labels human-readable instead of exposing C# property names or
   inherited uppercase admin styling. */
body.plant-body.route-branding #main-content .branding-settings-form :is(.branding-field > label, .branding-check, .branding-check span) {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Saved header/logo sizing. These values are emitted by ThemeCss and are also
   mirrored by the unsaved browser preview. */
body.plant-body.route-shop.route-index #main-content .shop-storefront-heading {
    padding-block: clamp(0.75rem, var(--shop-header-padding-vw, 2vw), var(--shop-header-padding-max, 1.6rem)) !important;
}

body.plant-body.route-shop.route-index #main-content .shop-storefront-brand :is(.shop-page-logo-link, .shop-page-logo, .shop-page-logo-placeholder) {
    width: min(100%, clamp(7rem, var(--shop-logo-width-vw, 18vw), var(--shop-logo-width-max, 15rem))) !important;
    max-width: 100% !important;
}

body.plant-body.route-shop.route-index #main-content .shop-storefront-title h2 {
    font-size: clamp(2.1rem, var(--shop-header-title-vw, 4.2vw), var(--shop-header-title-max, 4.5rem)) !important;
}

body.plant-body.route-shop.route-index #main-content .shop-page-logo-placeholder {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 4.2rem !important;
    padding: 0.65rem 0.85rem !important;
    border: 1px dashed currentColor !important;
    border-radius: 0.8rem !important;
    color: var(--theme-safe-primary-text, #ffffff) !important;
    -webkit-text-fill-color: var(--theme-safe-primary-text, #ffffff) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

@media (max-width: 56rem) {
    body.plant-body.route-shop.route-index #main-content .shop-storefront-brand :is(.shop-page-logo-link, .shop-page-logo, .shop-page-logo-placeholder) {
        width: min(82vw, var(--shop-logo-mobile-width-max, 13.5rem)) !important;
        max-width: min(var(--shop-logo-mobile-width-vw, 52vw), 82vw) !important;
    }

    body.plant-body.route-shop.route-index #main-content .shop-storefront-title h2 {
        font-size: clamp(2rem, var(--shop-header-mobile-title-vw, 12vw), var(--shop-header-mobile-title-max, 4rem)) !important;
    }
}

/* The Branding page has a fixed Windows palette, but that palette must never
   leak into the simulated shop. Preview elements use exactly the same resolved
   contrast variables as the saved shop theme. */
body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser .live-preview-shop-header,
body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser .live-preview-shop-header :is(span, strong, small) {
    color: var(--live-header-text, var(--live-primary-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--live-header-text, var(--live-primary-text, #ffffff)) !important;
    text-shadow: none !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser .live-preview-title-wrap h3 {
    color: var(--live-header-text, var(--live-primary-heading, var(--live-primary-text, #ffffff))) !important;
    -webkit-text-fill-color: var(--live-header-text, var(--live-primary-heading, var(--live-primary-text, #ffffff))) !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser .live-preview-developer,
body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser .live-preview-developer span {
    color: var(--iqtech-developer-text, #ffffff) !important;
    -webkit-text-fill-color: var(--iqtech-developer-text, #ffffff) !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser :is(.live-preview-button, .live-preview-cart),
body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser :is(.live-preview-button, .live-preview-cart) :is(span, strong) {
    color: var(--live-button-text, #ffffff) !important;
    -webkit-text-fill-color: var(--live-button-text, #ffffff) !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .branding-panel .live-preview-browser .live-preview-card :is(h4, p) {
    color: var(--live-card-text, #111111) !important;
    -webkit-text-fill-color: var(--live-card-text, #111111) !important;
}

/* ==========================================================
   2026-07-13 final site-wide responsive sizing layer
   Loaded last so every customer and admin page shares the same
   tablet/phone behaviour without changing the desktop design.
   ========================================================== */

html,
body.plant-body {
    max-width: 100%;
    overflow-x: clip;
}

body.plant-body :is(.plant-main, #main-content),
body.plant-body #main-content :is(
    .shop-section,
    .shop-page,
    .shop-admin-page,
    .shop-stock-shell,
    .cart-section,
    .checkout-section,
    .payment-section,
    .admin-orders-shell,
    .admin-settings-shell,
    .product-photo-admin-shell,
    .user-admin-shell,
    .admin-edit-shell,
    .permission-editor-shell,
    .customer-orders-shell,
    .customer-order-detail-shell,
    .delivery-settings-section,
    .system-settings-section,
    .branding-settings-section,
    .auth-shell,
    .error-page-shell
) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
}

body.plant-body #main-content :is(
    .shop-section-heading,
    .shop-heading-actions,
    .admin-command-header-actions,
    .admin-inline-heading-actions,
    .inline-search-strip,
    .shop-result-strip,
    .shop-toolbar,
    .cart-row,
    .checkout-card,
    .payment-card,
    .customer-order-card,
    .admin-detail-card,
    .admin-panel-card,
    .admin-sub-card,
    .branding-panel,
    .asset-card,
    .theme-card
) {
    min-width: 0;
    max-width: 100%;
}

body.plant-body #main-content :is(p, span, strong, small, label, td, th, a) {
    overflow-wrap: anywhere;
}

body.plant-body #main-content :is(img, video, canvas) {
    max-width: 100%;
}

body.plant-body #main-content :is(
    .admin-order-table-wrap,
    .admin-orders-table-wrap,
    .shop-table-wrap,
    .audit-log-table-wrap,
    .customer-lines-wrap,
    .photo-picker-table-wrap,
    .responsive-table-scroll,
    .table-responsive
) {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 70rem) {
    body.plant-body #main-content :is(
        .branding-grid,
        .customer-order-detail-grid,
        .admin-order-detail-grid,
        .delivery-pricing-example-layout,
        .delivery-distance-layout
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body #main-content :is(
        .branding-preview-aside,
        .checkout-summary,
        .cart-summary,
        .payment-summary
    ) {
        position: static !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.plant-body #main-content :is(
        .admin-form-grid,
        .admin-two-column-grid,
        .email-settings-grid,
        .checkout-grid,
        .responsive-form-grid,
        .branding-form-grid,
        .permission-check-grid,
        .customer-order-meta,
        .delivery-example-inputs,
        .delivery-distance-result-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.plant-body #main-content :is(
        .shop-section-heading,
        .online-sales-heading,
        .admin-inline-page-heading,
        .checkout-heading-row,
        .auth-heading-row
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    body.plant-body #main-content :is(
        .shop-storefront-right,
        .online-sales-header-actions,
        .admin-inline-heading-actions,
        .branding-header-actions
    ) {
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }
}

@media (max-width: 48rem) {
    :root {
        --responsive-phone-gutter: clamp(0.42rem, 2.2vw, 0.72rem);
        --responsive-phone-gap: clamp(0.62rem, 2.6vw, 0.9rem);
    }

    body.plant-body {
        min-width: 0 !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    body.plant-body .plant-main {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        padding-inline: var(--responsive-phone-gutter) !important;
    }

    body.plant-body #main-content :is(
        .shop-section,
        .shop-page,
        .shop-admin-page,
        .shop-stock-shell,
        .cart-section,
        .checkout-section,
        .payment-section,
        .admin-orders-shell,
        .admin-settings-shell,
        .product-photo-admin-shell,
        .user-admin-shell,
        .admin-edit-shell,
        .permission-editor-shell,
        .customer-orders-shell,
        .customer-order-detail-shell,
        .delivery-settings-section,
        .system-settings-section,
        .branding-settings-section,
        .auth-shell,
        .error-page-shell
    ) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: auto !important;
        padding: clamp(0.62rem, 3vw, 0.95rem) !important;
        border-radius: clamp(0.95rem, 4vw, 1.35rem) !important;
    }

    body.plant-body #main-content :is(
        .shop-section-heading:not(.shop-storefront-heading),
        .shop-hero,
        .admin-hero,
        .online-sales-heading,
        .admin-inline-page-heading,
        .checkout-heading-row,
        .auth-heading-row,
        .branding-header
    ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--responsive-phone-gap) !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(0.78rem, 3.4vw, 1.05rem) !important;
        text-align: left !important;
    }

    body.plant-body #main-content :is(
        .admin-inline-page-heading,
        .online-sales-heading,
        .checkout-heading-row,
        .auth-heading-row
    ) :is(h1, h2) {
        max-width: 100% !important;
        font-size: clamp(1.65rem, 9vw, 2.55rem) !important;
        line-height: 1.02 !important;
        overflow-wrap: anywhere !important;
    }

    body.plant-body #main-content :is(
        .shop-heading-actions,
        .local-shop-nav,
        .admin-command-header-actions,
        .admin-inline-heading-actions,
        .online-sales-header-actions,
        .branding-header-actions,
        .payment-actions,
        .responsive-payment-actions,
        .customer-order-actions,
        .admin-responsive-actions,
        .admin-date-filter-actions,
        .delivery-distance-actions,
        .email-test-actions,
        .photo-order-actions,
        .permission-actions,
        .error-action-row,
        .shop-filter-actions
    ) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    body.plant-body #main-content :is(
        .shop-heading-actions,
        .local-shop-nav,
        .admin-command-header-actions,
        .admin-inline-heading-actions,
        .online-sales-header-actions,
        .branding-header-actions,
        .payment-actions,
        .responsive-payment-actions,
        .customer-order-actions,
        .admin-responsive-actions,
        .admin-date-filter-actions,
        .delivery-distance-actions,
        .email-test-actions,
        .photo-order-actions,
        .permission-actions,
        .error-action-row,
        .shop-filter-actions
    ) > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    body.plant-body #main-content :is(
        .shop-admin-tools-menu,
        .shared-admin-tools-menu,
        .shop-mode-switch,
        .customer-context-pill,
        .shop-context-pill,
        .inline-logout-form,
        .admin-header-logout-form,
        .admin-tool-logout-form,
        .admin-tool-sync-form
    ) {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-index #main-content .shop-mode-switch {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.plant-body #main-content :is(.shop-admin-tools-menu, .shared-admin-tools-menu) .admin-tools-menu-panel {
        inset-inline: 0 auto !important;
        width: min(100%, 22rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
    }

    body.plant-body #main-content :is(
        .cart-layout,
        .checkout-layout,
        .payment-layout,
        .cart-row,
        .responsive-cart-row,
        .customer-order-detail-grid,
        .admin-order-detail-grid,
        .online-sales-dashboard-layout,
        .online-sales-filter-status-row,
        .delivery-pricing-example-layout,
        .delivery-distance-layout,
        .branding-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--responsive-phone-gap) !important;
    }

    body.plant-body #main-content :is(
        .admin-form-grid,
        .admin-two-column-grid,
        .email-settings-grid,
        .checkout-grid,
        .responsive-form-grid,
        .branding-form-grid,
        .permission-check-grid,
        .customer-order-meta,
        .delivery-example-inputs,
        .delivery-distance-result-grid,
        .error-metadata-grid,
        .audit-log-filter-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--responsive-phone-gap) !important;
    }

    body.plant-body #main-content :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
        select,
        textarea
    ) {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 1rem !important;
    }

    body.plant-body #main-content :is(
        .btn,
        .shop-cart-link,
        .mode-switch-btn,
        .admin-tools-summary,
        .pager-link,
        .category-toggle-btn
    ):not(.shop-card-qty-btn):not(.cart-qty-btn):not(.image-preview-close):not(.image-preview-arrow) {
        box-sizing: border-box !important;
        min-height: 2.75rem !important;
        max-width: 100% !important;
        padding-inline: clamp(0.62rem, 3vw, 0.95rem) !important;
        white-space: normal !important;
        text-align: center !important;
    }

    body.plant-body #main-content :is(
        .inline-search-strip,
        .shop-search-form,
        .shop-result-strip,
        .photo-upload-mini-form,
        .admin-status-update-form,
        .admin-date-filter-fields,
        .customer-order-search-form,
        .my-orders-search-form
    ) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.55rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.plant-body #main-content :is(
        .shop-pager,
        .shop-pager-bottom,
        .shop-pagination,
        .client-shop-pager,
        .admin-pager,
        .admin-order-pagination,
        .customer-order-pagination
    ) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.plant-body #main-content :is(
        .admin-order-table-wrap,
        .admin-orders-table-wrap,
        .shop-table-wrap,
        .audit-log-table-wrap,
        .customer-lines-wrap,
        .photo-picker-table-wrap,
        .responsive-table-scroll,
        .table-responsive
    ) {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        padding-bottom: 0.3rem !important;
        scrollbar-width: thin !important;
    }

    body.plant-body.route-shop.route-orders #main-content .admin-orders-table-wrap {
        overflow-x: visible !important;
    }

    body.plant-body #main-content :is(.admin-order-table, .permission-table, .photo-picker-table, .customer-lines-table, .audit-log-table) {
        min-width: 42rem;
    }

    body.plant-body #main-content :is(
        .admin-sticky-actions,
        .sticky-admin-actions,
        .permission-actions
    ) {
        position: static !important;
        inset: auto !important;
        max-height: none !important;
    }

    body.plant-body #main-content :is(
        .manual-takeover-modal,
        .photo-picker-modal,
        .photo-barcode-picker-modal,
        .image-preview-card,
        .admin-sync-confirm-card
    ) {
        box-sizing: border-box !important;
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        overflow: auto !important;
    }

    body.plant-body #main-content :is(.delivery-distance-map, .delivery-distance-map-shell) {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 17rem !important;
    }

    body.plant-body #main-content :is(.branding-preview-aside, .branding-live-panel, .live-preview-windows-frame, .live-preview-browser) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body #main-content :is(.cart-row-main, .cart-row-total, .customer-order-main, .customer-order-meta, .compact-summary) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body #main-content :is(.cart-row-total, .cart-card-actions) {
        justify-self: stretch !important;
        text-align: left !important;
    }
}

@media (max-width: 30rem) {
    body.plant-body #main-content :is(
        .shop-heading-actions,
        .local-shop-nav,
        .admin-command-header-actions,
        .admin-inline-heading-actions,
        .online-sales-header-actions,
        .branding-header-actions,
        .payment-actions,
        .responsive-payment-actions,
        .customer-order-actions,
        .admin-responsive-actions,
        .admin-date-filter-actions,
        .delivery-distance-actions,
        .photo-order-actions,
        .permission-actions,
        .error-action-row,
        .shop-filter-actions
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body #main-content :is(
        .shop-section,
        .shop-page,
        .shop-admin-page,
        .shop-stock-shell,
        .cart-section,
        .checkout-section,
        .payment-section,
        .admin-orders-shell,
        .admin-settings-shell,
        .product-photo-admin-shell,
        .user-admin-shell,
        .admin-edit-shell,
        .permission-editor-shell,
        .customer-orders-shell,
        .customer-order-detail-shell,
        .delivery-settings-section,
        .system-settings-section,
        .branding-settings-section,
        .auth-shell,
        .error-page-shell
    ) {
        padding: 0.55rem !important;
        border-radius: 0.95rem !important;
    }

    body.plant-body #main-content :is(.shop-section-heading:not(.shop-storefront-heading), .admin-inline-page-heading, .online-sales-heading, .branding-header) {
        padding: 0.72rem !important;
        border-radius: 0.85rem !important;
    }

    body.plant-body #main-content :is(.shop-mode-switch, .shop-mode-switch .mode-switch-btn) {
        min-width: 0 !important;
    }

    body.plant-body #main-content :is(.cart-qty-stepper, .shop-card-qty-stepper) {
        max-width: 100% !important;
    }

    body.plant-body #main-content :is(.alert, .payment-safe-note, .admin-note-card, .checkout-gate-note) {
        padding: 0.72rem !important;
        font-size: 0.88rem !important;
    }
}

/* ==========================================================
   2026-07-14 shared Product Photos layout language

   Product Photos is the reference screen: one centred page shell, one clear
   heading card, consistent gaps, rounded contained panels and controls that
   stack instead of overflowing. The catalogue keeps its purpose-built hero,
   but every operational/customer page now follows the same layout practice.
   ========================================================== */

body.plant-body .plant-main {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: clamp(0.7rem, 1.7vw, 1.5rem) !important;
}

body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page) {
    box-sizing: border-box !important;
    width: min(100%, 112rem) !important;
    max-width: 112rem !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: clamp(0.75rem, 1.45vw, 1.35rem) !important;
    gap: clamp(0.7rem, 1.25vw, 1.05rem) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 199, 210, 223), 0.78) !important;
    border-radius: clamp(1.15rem, 2vw, 1.55rem) !important;
    background: rgba(var(--theme-card-secondary-rgb, 243, 246, 250), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #172033)) !important;
    box-shadow: 0 0.8rem 2.25rem rgba(23, 32, 51, 0.1) !important;
    background-clip: padding-box !important;
}

/* Authentication pages deliberately keep their compact centred form width. */
body.plant-body.route-account #main-content > section.auth-shell {
    width: min(100%, 52rem) !important;
    max-width: 52rem !important;
}

/* Shop/Admin Shop has a purpose-built company hero and grid. It keeps that
   identity while receiving the same radius, spacing and responsive safety. */
body.plant-body.route-shop.route-index #main-content > .shop-stock-shell {
    width: min(100%, 120rem) !important;
    max-width: 120rem !important;
}

body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading),
body.plant-body #main-content > .shop-page > .shop-page-header {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: clamp(5.6rem, 9vw, 8rem) !important;
    margin: 0 !important;
    padding: clamp(0.9rem, 1.8vw, 1.45rem) !important;
    gap: clamp(0.75rem, 1.4vw, 1.15rem) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 199, 210, 223), 0.82) !important;
    border-radius: 1.15rem !important;
    background: linear-gradient(
        135deg,
        rgba(var(--theme-primary-rgb, 15, 108, 189), var(--theme-panel-alpha, 0.96)),
        rgba(var(--theme-card-secondary-rgb, 243, 246, 250), 0.28)
    ) !important;
    color: var(--theme-safe-primary-text, #ffffff) !important;
    box-shadow: none !important;
    overflow: visible !important;
}

body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading) > :first-child,
body.plant-body #main-content > .shop-page > .shop-page-header > :first-child {
    min-width: 0 !important;
}

body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading) :is(h1, h2),
body.plant-body #main-content > .shop-page > .shop-page-header :is(h1, h2) {
    margin: 0 0 0.3rem !important;
    color: var(--theme-safe-primary-heading, var(--theme-safe-primary-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-primary-heading, var(--theme-safe-primary-text, #ffffff)) !important;
    font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading) :is(p, small, .shop-muted),
body.plant-body #main-content > .shop-page > .shop-page-header :is(p, small, .shop-muted) {
    color: var(--theme-safe-primary-text, #ffffff) !important;
    -webkit-text-fill-color: var(--theme-safe-primary-text, #ffffff) !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

/* Shared panels follow the same contained card treatment as the upload/search
   and photo table panels. This list covers the reusable page components rather
   than altering page-specific data layouts. */
body.plant-body #main-content :is(
    .inline-search-strip,
    .customer-order-search-form,
    .admin-date-filter-panel,
    .admin-summary-card,
    .admin-settings-card,
    .system-settings-card,
    .delivery-settings-card,
    .delivery-distance-check-card,
    .checkout-card,
    .payment-card,
    .cart-panel,
    .cart-summary,
    .customer-order-card,
    .customer-order-details-card,
    .admin-detail-card,
    .permission-table-wrap,
    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .photo-upload-toolbar,
    .photo-edit-panel,
    .branding-panel,
    .auth-panel-wrap,
    .auth-card,
    .error-help-card
) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-color: rgba(var(--theme-border-rgb, 199, 210, 223), 0.78) !important;
    border-radius: 1.05rem !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}

body.plant-body #main-content :is(
    .inline-search-strip,
    .customer-order-search-form,
    .admin-date-filter-panel,
    .admin-summary-card,
    .admin-settings-card,
    .system-settings-card,
    .delivery-settings-card,
    .delivery-distance-check-card,
    .permission-table-wrap,
    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .photo-upload-toolbar,
    .branding-panel,
    .auth-panel-wrap,
    .error-help-card
) {
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    color: var(--theme-safe-card-text, #172033) !important;
}

body.plant-body #main-content :is(input, select, textarea, .form-control, .form-select) {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-height: 2.65rem !important;
    border-width: 1px !important;
    border-radius: 0.82rem !important;
    box-shadow: none !important;
}

body.plant-body #main-content :is(.btn, button):not(.category-close):not(.image-preview-close):not(.photo-picker-close):not(.inline-clear-btn) {
    border-radius: 0.82rem !important;
}

body.plant-body #main-content :is(
    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .permission-table-wrap,
    .audit-log-table-wrap,
    .customer-lines-wrap,
    .photo-picker-table-wrap,
    .table-responsive
) {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-inline: contain !important;
}

body.plant-body #main-content :is(.admin-orders-table, .admin-order-table, .permission-table, table) {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

body.plant-body #main-content :is(.admin-orders-table, .admin-order-table, .permission-table, table) :is(th, td) {
    border-color: rgba(var(--theme-border-rgb, 199, 210, 223), 0.58) !important;
}

@media (max-width: 70rem) {
    body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading),
    body.plant-body #main-content > .shop-page > .shop-page-header {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading)
        :is(.shop-heading-actions, .admin-inline-heading-actions, .online-sales-header-actions),
    body.plant-body #main-content > .shop-page > .shop-page-header :is(.shop-heading-actions, .admin-inline-heading-actions) {
        width: 100% !important;
        justify-content: stretch !important;
    }
}

@media (max-width: 48rem) {
    body.plant-body .plant-main {
        padding: clamp(0.4rem, 2vw, 0.7rem) !important;
    }

    body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page) {
        width: 100% !important;
        max-width: 100% !important;
        padding: clamp(0.58rem, 2.8vw, 0.85rem) !important;
        border-radius: 1rem !important;
    }

    body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading),
    body.plant-body #main-content > .shop-page > .shop-page-header {
        min-height: 0 !important;
        padding: clamp(0.78rem, 3.4vw, 1rem) !important;
        border-radius: 0.9rem !important;
    }

    body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading):not(.shop-management-heading) :is(h1, h2),
    body.plant-body #main-content > .shop-page > .shop-page-header :is(h1, h2) {
        font-size: clamp(1.55rem, 8vw, 2.35rem) !important;
        overflow-wrap: anywhere !important;
    }

    body.plant-body #main-content :is(
        .inline-search-strip,
        .customer-order-search-form,
        .admin-date-filter-panel,
        .photo-upload-toolbar,
        .shop-heading-actions,
        .admin-inline-heading-actions,
        .online-sales-header-actions,
        .admin-command-header-actions
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    body.plant-body #main-content :is(
        .inline-search-strip,
        .customer-order-search-form,
        .photo-upload-toolbar,
        .admin-date-filter-panel,
        .admin-summary-card,
        .admin-settings-card,
        .system-settings-card,
        .delivery-settings-card,
        .checkout-card,
        .payment-card,
        .cart-panel,
        .cart-summary,
        .customer-order-card,
        .admin-detail-card,
        .permission-table-wrap,
        .branding-panel,
        .auth-panel-wrap,
        .auth-card
    ) {
        border-radius: 0.9rem !important;
    }
}

/* Admin Shop category picker: compact, neutral and readable against both
   light and dark customer themes. It remains a normal select, but no longer
   inherits the large primary-button treatment. */
body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-select,
body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-select:is(:hover, :focus, :focus-visible) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 2.2rem !important;
    height: 2.2rem !important;
    padding: 0.3rem 2rem 0.3rem 0.68rem !important;
    border: 1px solid #9aabc0 !important;
    border-radius: 0.72rem !important;
    background-color: #f3f6fa !important;
    background-image: none !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    color-scheme: light !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-select:is(:hover, :focus-visible) {
    border-color: #2878bd !important;
    background-color: #e8f2fb !important;
    outline: 3px solid rgba(40, 120, 189, 0.2) !important;
    outline-offset: 1px !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-select option {
    background: #f3f6fa !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    font-size: 0.86rem !important;
    font-weight: 650 !important;
    text-transform: none !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-list-group:has(.admin-category-select) > span {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-picker-hint {
    margin-top: 0.28rem !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

@media (max-width: 48rem) {
    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-select,
    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-select:is(:hover, :focus, :focus-visible) {
        min-height: 2.1rem !important;
        height: 2.1rem !important;
        padding-block: 0.25rem !important;
        font-size: 0.8rem !important;
    }
}

/* Saved Admin Shop category ordering. Categories use the same drag/reorder
   idea as product photos, with up/down controls retained for touch devices. */
body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-order-panel {
    margin: 0 0 0.85rem !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .admin-category-order-panel > .admin-safe-panel-head :is(.admin-collapsible-title, .admin-collapsible-hint) {
    color: var(--theme-safe-card-text, var(--plant-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, var(--plant-text, #111111)) !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-form {
    display: grid !important;
    gap: 0.8rem !important;
    min-width: 0 !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-list {
    display: grid !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-height: min(55dvh, 32rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0.15rem 0.35rem 0.15rem 0.05rem !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row {
    display: grid !important;
    grid-template-columns: 2.35rem 2rem minmax(0, 1fr) auto auto !important;
    gap: 0.6rem !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.48rem 0.58rem !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    border-radius: 0.82rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
    box-shadow: none !important;
    cursor: grab !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row.is-dragging {
    opacity: 0.52 !important;
    cursor: grabbing !important;
    outline: 2px dashed var(--shop-button-bg, #2878bd) !important;
    outline-offset: 2px !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row :is(strong, small, span) {
    min-width: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row > strong {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row > small {
    font-size: 0.75rem !important;
    opacity: 0.76 !important;
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(.category-order-drag, .category-order-move-actions button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.15rem !important;
    min-width: 2.15rem !important;
    height: 2.15rem !important;
    min-height: 2.15rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--shop-button-bg, #2878bd) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-move-actions {
    display: inline-grid !important;
    grid-template-columns: repeat(2, 2.15rem) !important;
    gap: 0.3rem !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-move-actions button:disabled {
    opacity: 0.38 !important;
    cursor: default !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.8rem !important;
    height: 1.8rem !important;
    border-radius: 50% !important;
    background: rgba(var(--theme-border-rgb, 210, 218, 230), 0.62) !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.55rem !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-status {
    flex: 1 1 12rem !important;
    font-size: 0.8rem !important;
}

@media (max-width: 48rem) {
    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row {
        grid-template-columns: 2.25rem 1.85rem minmax(0, 1fr) auto !important;
        gap: 0.45rem !important;
        padding: 0.45rem !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-row > small {
        grid-column: 3 / 4 !important;
        white-space: normal !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-move-actions {
        grid-column: 4 !important;
        grid-row: 1 / span 2 !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode #main-content .category-order-actions > * {
        width: 100% !important;
    }
}

/* Branding image wells stay neutral and slightly off-white so transparent or
   all-white logos, banners and placeholders remain visible while editing. */
body.plant-body.route-branding #main-content .branding-settings-form .asset-preview {
    background: #f7f4ec !important;
    background-image:
        linear-gradient(45deg, rgba(199, 210, 223, 0.2) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(199, 210, 223, 0.2) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(199, 210, 223, 0.2) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(199, 210, 223, 0.2) 75%) !important;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0 !important;
    background-size: 12px 12px !important;
    border: 1px solid #c7d2df !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .asset-preview img {
    background: transparent !important;
}

/* ==========================================================
   2026-07-13 admin headers, photo upload and user UI polish
   ========================================================== */

/* Every page-level heading follows the System Settings heading card. The
   customer/admin catalogue header is intentionally excluded. */
body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(0.75rem, 1.5vw, 1.15rem) !important;
    margin: 0 0 clamp(0.8rem, 1.5vw, 1.15rem) !important;
    padding: clamp(0.85rem, 1.6vw, 1.15rem) clamp(0.9rem, 1.8vw, 1.3rem) !important;
    background: linear-gradient(
        135deg,
        rgba(var(--theme-primary-rgb, 17, 17, 17), var(--theme-panel-alpha, 0.96)),
        rgba(var(--theme-secondary-rgb, 245, 247, 251), 0.22)
    ) !important;
    background-color: rgba(var(--theme-primary-rgb, 17, 17, 17), var(--theme-panel-alpha, 0.96)) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.4rem !important;
    color: var(--theme-safe-primary-text, #ffffff) !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    overflow: visible !important;
}

body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading) > :first-child {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading) :is(h1, h2) {
    margin: 0 0 0.3rem !important;
    color: var(--theme-safe-primary-heading, var(--theme-safe-primary-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-primary-heading, var(--theme-safe-primary-text, #ffffff)) !important;
    font-size: clamp(1.9rem, 3.5vw, 3rem) !important;
    line-height: 1 !important;
    text-shadow: none !important;
}

body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading) :is(.shop-muted, p, span) {
    color: var(--theme-safe-primary-text, #ffffff) !important;
    -webkit-text-fill-color: var(--theme-safe-primary-text, #ffffff) !important;
    line-height: 1.35 !important;
    text-shadow: none !important;
}

body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
    > .shop-section-heading:not(.shop-storefront-heading) :is(.shop-heading-actions, .admin-inline-heading-actions, .online-sales-header-actions) {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* The photo upload accordions now sit inside one genuinely rounded form card,
   and each closed/open accordion clips cleanly to its own radius. */
body.plant-body.route-productphotos.route-index #main-content .photo-upload-toolbar {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: clamp(0.55rem, 1.2vw, 0.8rem) !important;
    padding: clamp(0.55rem, 1.2vw, 0.75rem) !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.8) !important;
    border-radius: 1.45rem !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    overflow: clip !important;
}

body.plant-body.route-productphotos.route-index #main-content .photo-upload-accordion {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.82) !important;
    border-radius: 1.05rem !important;
    box-shadow: none !important;
    background-clip: padding-box !important;
    overflow: clip !important;
}

body.plant-body.route-productphotos.route-index #main-content .photo-upload-accordion > summary {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 1rem !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

body.plant-body.route-productphotos.route-index #main-content .photo-upload-accordion[open] > summary {
    border-radius: 1rem 1rem 0 0 !important;
}

body.plant-body.route-productphotos.route-index #main-content .photo-upload-mini-form {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(0.7rem, 1.3vw, 0.95rem) !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
    border-radius: 0 0 1rem 1rem !important;
    background-clip: padding-box !important;
    overflow: hidden !important;
}

/* Users search uses one rounded outer card and a fully rounded search field. */
body.plant-body.route-users.route-index #main-content .users-search-strip {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(0.55rem, 1.2vw, 0.72rem) !important;
    background-clip: padding-box !important;
    border-radius: 1.4rem !important;
    overflow: hidden !important;
}

body.plant-body.route-users.route-index #main-content .users-search-strip .inline-search-box {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}

body.plant-body.route-users.route-index #main-content .users-search-strip .inline-search-box .form-control {
    border-radius: 999px !important;
    background-clip: padding-box !important;
}

body.plant-body.route-users.route-index #main-content .users-search-strip .btn-inline-clear {
    border-radius: 999px !important;
}

/* Permission controls are an evenly spaced matrix on desktop and become
   labelled action tiles on phones. */
body.plant-body.route-usermodules.route-edit #main-content .permission-editor-shell .admin-order-table-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(0.45rem, 1vw, 0.65rem) !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1.25rem !important;
    background-clip: padding-box !important;
    overflow-x: auto !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean {
    width: 100% !important;
    min-width: 52rem !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 0.42rem !important;
    table-layout: fixed !important;
    background: transparent !important;
    background-image: none !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean thead th {
    position: static !important;
    padding: 0.65rem 0.7rem !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean thead th:first-child {
    width: 36% !important;
    text-align: left !important;
    border-radius: 0.85rem 0 0 0.85rem !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean thead th:not(:first-child) {
    width: 16% !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean thead th:last-child {
    border-radius: 0 0.85rem 0.85rem 0 !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody tr {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td {
    padding: 0.55rem 0.65rem !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border-top: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
    border-bottom: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:first-child {
    border-left: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
    border-radius: 0.85rem 0 0 0.85rem !important;
    text-align: left !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:last-child {
    border-right: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
    border-radius: 0 0.85rem 0.85rem 0 !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-toggle,
body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-na {
    box-sizing: border-box !important;
    width: min(100%, 7.25rem) !important;
    min-width: 0 !important;
    min-height: 2.55rem !important;
    margin-inline: auto !important;
    padding: 0.48rem 0.62rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.42rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.9) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 0.75rem !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    text-align: center !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-toggle:has(input:checked) {
    background: var(--shop-button-bg, var(--plant-green, #111111)) !important;
    border-color: var(--shop-button-bg, var(--plant-green, #111111)) !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-toggle :is(input, span) {
    flex: 0 0 auto !important;
    margin: 0 !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-toggle input[type="checkbox"] {
    width: 1.1rem !important;
    min-width: 1.1rem !important;
    height: 1.1rem !important;
    min-height: 1.1rem !important;
    accent-color: currentColor !important;
}

body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-na {
    opacity: 0.68 !important;
    font-weight: 700 !important;
}

@media (max-width: 70rem) {
    body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading) {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading) :is(.shop-heading-actions, .admin-inline-heading-actions, .online-sales-header-actions) {
        width: 100% !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 48rem) {
    body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading) {
        padding: clamp(0.78rem, 3.4vw, 1rem) !important;
        border-radius: 1.05rem !important;
    }

    body.plant-body #main-content :is(section.shop-section, section.shop-page, section.branding-page)
        > .shop-section-heading:not(.shop-storefront-heading) :is(h1, h2) {
        font-size: clamp(1.65rem, 9vw, 2.45rem) !important;
    }

    body.plant-body.route-productphotos.route-index #main-content .photo-upload-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        border-radius: 1.1rem !important;
    }

    body.plant-body.route-productphotos.route-index #main-content .photo-upload-accordion,
    body.plant-body.route-productphotos.route-index #main-content .photo-upload-accordion > summary {
        border-radius: 0.9rem !important;
    }

    body.plant-body.route-productphotos.route-index #main-content .photo-upload-accordion[open] > summary {
        border-radius: 0.9rem 0.9rem 0 0 !important;
    }

    body.plant-body.route-productphotos.route-index #main-content .photo-upload-mini-form {
        border-radius: 0 0 0.9rem 0.9rem !important;
    }

    body.plant-body.route-users.route-index #main-content .users-search-strip {
        border-radius: 1.05rem !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-editor-shell .admin-order-table-wrap {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-spacing: 0 !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean thead {
        display: none !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        width: 100% !important;
        padding: 0.65rem !important;
        background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
        border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.72) !important;
        border-radius: 1rem !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td,
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:first-child,
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:last-child {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.38rem !important;
        align-items: stretch !important;
        padding: 0.55rem !important;
        background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.86) !important;
        border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.68) !important;
        border-radius: 0.8rem !important;
        text-align: left !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:first-child {
        grid-column: 1 / -1 !important;
        background: var(--shop-button-bg, var(--plant-green, #111111)) !important;
        color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
        -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:nth-child(n + 2)::before {
        display: block !important;
        color: var(--theme-safe-card-secondary-muted, var(--theme-safe-card-secondary-text, #111111)) !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.04em !important;
        line-height: 1 !important;
        text-transform: uppercase !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:nth-child(2)::before { content: "View" !important; }
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:nth-child(3)::before { content: "Add" !important; }
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:nth-child(4)::before { content: "Edit" !important; }
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:nth-child(5)::before { content: "Delete" !important; }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-toggle,
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean .permission-na {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 30rem) {
    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody tr {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-usermodules.route-edit #main-content .permission-table-clean tbody td:first-child {
        grid-column: auto !important;
    }
}

/* Keep the branding editor header on the fixed Windows-clean palette after
   the shared System Settings header geometry has been applied. */
body.plant-body.route-branding #main-content > section.branding-settings-section
    > .branding-header.shop-section-heading {
    background: linear-gradient(135deg, #123a63, #0f6cbd) !important;
    background-color: #0f6cbd !important;
    border-color: #7fa9cf !important;
    color: #ffffff !important;
}

body.plant-body.route-branding #main-content > section.branding-settings-section
    > .branding-header.shop-section-heading :is(h1, h2, p, span) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .logo-theme-generator {
    background: #edf3f9 !important;
    border-color: #c7d2df !important;
    color: #172033 !important;
}

body.plant-body.route-branding #main-content .branding-settings-form .logo-theme-status {
    background: #ffffff !important;
    border-color: #aebdcd !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

/* ==========================================================
   2026-07-13 zoom-safe catalogue and account login
   ========================================================== */

/* Use fewer, wider cards when zooming out or using an ultra-wide screen. This
   prevents the grid from creating extra columns whose contents cannot fit. */
body.plant-body.route-shop.route-index #main-content .product-grid,
body.plant-body.route-shop.route-index #main-content .product-grid.takealot-grid {
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, clamp(17.5rem, 18vw, 21rem)), 1fr)
    ) !important;
}

body.plant-body.route-shop.route-index #main-content .product-card {
    container-name: shop-product-card;
    container-type: inline-size;
}

body.plant-body.route-shop.route-index #main-content .product-card .product-price-stock-row {
    min-width: 0 !important;
    isolation: isolate;
}

body.plant-body.route-shop.route-index #main-content .product-card .product-price,
body.plant-body.route-shop.route-index #main-content .product-card .product-stock-chip {
    position: static !important;
    inset: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* The decision is based on the card itself, not the viewport. It therefore
   also works when Categories is closed, at non-standard zoom levels, and in
   responsive split-screen windows. */
@container shop-product-card (max-width: 18.25rem) {
    body.plant-body.route-shop.route-index #main-content .product-card .product-price-stock-row {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "stock"
            "price" !important;
        align-items: start !important;
        gap: 0.45rem !important;
    }

    body.plant-body.route-shop.route-index #main-content .product-card .product-stock-chip {
        grid-area: stock !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: start !important;
        justify-items: start !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    body.plant-body.route-shop.route-index #main-content .product-card .product-price {
        grid-area: price !important;
        width: 100% !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }
}

body.plant-body.route-shop.route-index #main-content .product-card
    .product-price-stock-row.is-price-stock-stacked {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
        "stock"
        "price" !important;
    align-items: start !important;
    gap: 0.45rem !important;
}

body.plant-body.route-shop.route-index #main-content .product-card
    .product-price-stock-row.is-price-stock-stacked .product-stock-chip {
    grid-area: stock !important;
    width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    justify-self: start !important;
    justify-items: start !important;
    align-items: flex-start !important;
    text-align: left !important;
}

body.plant-body.route-shop.route-index #main-content .product-card
    .product-price-stock-row.is-price-stock-stacked .product-price {
    grid-area: price !important;
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

@media (max-width: 48rem) {
    body.plant-body.route-shop.route-index #main-content .product-grid,
    body.plant-body.route-shop.route-index #main-content .product-grid.takealot-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (min-width: 120rem) {
    body.plant-body #main-content :is(
        .shop-section,
        .shop-page,
        .shop-admin-page,
        .shop-stock-shell,
        .cart-section,
        .checkout-section,
        .payment-section,
        .admin-orders-shell,
        .admin-settings-shell,
        .product-photo-admin-shell,
        .user-admin-shell,
        .admin-edit-shell,
        .permission-editor-shell,
        .customer-orders-shell,
        .customer-order-detail-shell,
        .delivery-settings-section,
        .system-settings-section,
        .auth-shell
    ) {
        width: min(120rem, calc(100vw - 3rem)) !important;
        max-width: calc(100vw - 3rem) !important;
    }
}

/* Login/register page: one fluid, readable card which keeps its hierarchy at
   phone sizes, split screen, browser zoom and wide desktop sizes. */
body.plant-body.route-account.route-login #main-content .login-context-note,
body.plant-body.route-account.route-login #main-content .login-auth-panel-wrap {
    box-sizing: border-box !important;
    width: min(100%, 52rem) !important;
    max-width: 52rem !important;
    margin-inline: auto !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-panel-wrap {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    justify-items: center !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card {
    box-sizing: border-box !important;
    width: min(100%, 44rem) !important;
    max-width: 44rem !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.85rem, 1.8vw, 1.15rem) !important;
    padding: clamp(1rem, 2.5vw, 1.65rem) !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.86) !important;
    border-radius: clamp(1rem, 2.5vw, 1.55rem) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: 0 18px 42px rgba(12, 25, 45, 0.16) !important;
    overflow: hidden !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-card-heading {
    display: grid !important;
    gap: 0.3rem !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-card-kicker {
    color: var(--theme-safe-card-muted, #666666) !important;
    -webkit-text-fill-color: var(--theme-safe-card-muted, #666666) !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.075em !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-card-heading h3 {
    margin: 0 !important;
    color: var(--theme-safe-card-heading, var(--theme-safe-card-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-heading, var(--theme-safe-card-text, #111111)) !important;
    font-size: clamp(1.65rem, 4vw, 2.25rem) !important;
    line-height: 1 !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-card-heading p {
    margin: 0 !important;
    color: var(--theme-safe-card-muted, #666666) !important;
    -webkit-text-fill-color: var(--theme-safe-card-muted, #666666) !important;
    line-height: 1.45 !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-field-group {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.38rem !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-field-group label {
    margin: 0 !important;
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-field-group .form-control {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3rem !important;
    padding: 0.72rem 0.9rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.9) !important;
    border-radius: 0.95rem !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
    caret-color: var(--theme-safe-card-secondary-text, #111111) !important;
    font-size: 1rem !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-primary-submit {
    width: 100% !important;
    min-height: 3rem !important;
    border-radius: 999px !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-secondary-action {
    width: 100% !important;
    margin-top: 0.15rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    color: var(--theme-safe-card-muted, #666666) !important;
    -webkit-text-fill-color: var(--theme-safe-card-muted, #666666) !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-account-switch {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.6rem !important;
    text-align: center !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-switch-button {
    width: auto !important;
    min-width: min(100%, 10rem) !important;
    margin: 0 !important;
}

body.plant-body.route-account.route-login #main-content .login-auth-card .auth-text-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 2.5rem !important;
    padding: 0.35rem 0.55rem !important;
    color: var(--theme-safe-card-link, var(--shop-button-bg, var(--plant-green, #111111))) !important;
    -webkit-text-fill-color: var(--theme-safe-card-link, var(--shop-button-bg, var(--plant-green, #111111))) !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    text-underline-offset: 0.2em !important;
}

@media (max-width: 36rem) {
    body.plant-body.route-account.route-login #main-content .login-auth-card {
        padding: 0.9rem !important;
        border-radius: 1rem !important;
    }

    body.plant-body.route-account.route-login #main-content .login-auth-card .checkout-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-account.route-login #main-content .login-auth-card .auth-account-switch {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    body.plant-body.route-account.route-login #main-content .login-auth-card .auth-switch-button {
        width: 100% !important;
    }
}

/* ==========================================================
   2026-07-14 true zoom reflow, configurable grid and item popup
   ========================================================== */

/* Keep the storefront tied to the actual available page width. Avoid a fixed
   maximum which can leave a blank strip when Firefox is zoomed far out. */
body.plant-body.route-shop.route-index #main-content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

body.plant-body.route-shop.route-index #main-content .shop-stock-shell {
    box-sizing: border-box !important;
    width: calc(100% - clamp(0.75rem, 2vw, 2.5rem)) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-inline: auto !important;
}

/* These minimums intentionally use rem rather than vw. A rem becomes smaller
   on screen as browser zoom decreases, so more cards genuinely fit per row. */
body.plant-body.route-shop.route-index #main-content .shop-grid-small {
    --shop-product-grid-min: 12.25rem;
}

body.plant-body.route-shop.route-index #main-content .shop-grid-medium {
    --shop-product-grid-min: 15.5rem;
}

body.plant-body.route-shop.route-index #main-content .shop-grid-large {
    --shop-product-grid-min: 19.25rem;
}

body.plant-body.route-shop.route-index #main-content .product-grid,
body.plant-body.route-shop.route-index #main-content .product-grid.takealot-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, var(--shop-product-grid-min, 15.5rem)), 1fr)
    ) !important;
    gap: clamp(0.55rem, 1vw, 1rem) !important;
}

body.plant-body.route-shop.route-index #main-content .product-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    grid-template-rows: auto auto !important;
    gap: 0.65rem !important;
    padding: clamp(0.55rem, 0.9vw, 0.85rem) !important;
}

body.plant-body.route-shop.route-index #main-content .product-card button.product-image-wrap,
body.plant-body.route-shop.route-index #main-content .product-card .product-image-wrap {
    appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: clamp(0.8rem, 1.4vw, 1.2rem) !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-index #main-content .product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

body.plant-body.route-shop.route-index #main-content .product-card .product-content {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0.45rem !important;
}

body.plant-body.route-shop.route-index #main-content .product-card h3 {
    font-size: 1.05rem !important;
    line-height: 1.18 !important;
}

body.plant-body.route-shop.route-index #main-content .product-card .product-meta,
body.plant-body.route-shop.route-index #main-content .product-card .product-card-topline {
    font-size: 0.75rem !important;
}

body.plant-body.route-shop.route-index #main-content .product-card .product-price {
    font-size: 1.25rem !important;
}

body.plant-body.route-shop.route-index #main-content .product-card .add-cart-form,
body.plant-body.route-shop.route-index #main-content .product-card .cart-card-actions {
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Image-focused cards retain the four requested pieces only: photo, name,
   price and stock. The remaining information and cart action live in the
   image popup below. */
body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card :is(
    .product-card-topline,
    .product-meta,
    .add-cart-form
) {
    display: none !important;
}

body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card .product-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-content: start !important;
    gap: 0.55rem !important;
}

body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card h3 {
    display: -webkit-box !important;
    min-height: 2.48em !important;
    margin: 0 !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card .product-price-stock-row {
    margin-top: 0 !important;
}

/* Search, category and image-close X controls must remain circles even when
   inherited button padding changes at mobile breakpoints. */
body.plant-body.route-shop.route-index #main-content :is(
    .inline-clear-btn,
    .category-close,
    .image-preview-close
) {
    box-sizing: border-box !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 2.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    max-width: 2.5rem !important;
    max-height: 2.5rem !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    line-height: 1 !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-card {
    box-sizing: border-box !important;
    width: min(72rem, calc(100vw - 1.5rem)) !important;
    max-width: min(72rem, calc(100vw - 1.5rem)) !important;
    max-height: calc(100dvh - 1.5rem) !important;
    overflow: auto !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-product-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 0.75fr) !important;
    gap: clamp(0.75rem, 1.6vw, 1.25rem) !important;
    align-items: start !important;
    min-width: 0 !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-product-layout > * {
    min-width: 0 !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-product-details {
    display: grid !important;
    gap: 0.85rem !important;
    padding: clamp(0.8rem, 1.5vw, 1.15rem) !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.78) !important;
    border-radius: 1rem !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-product-details[hidden] {
    display: none !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-price-stock {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-price-stock strong {
    color: var(--theme-safe-card-secondary-heading, var(--theme-safe-card-secondary-text, #111111)) !important;
    font-size: 1.45rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-price-stock span {
    padding: 0.38rem 0.65rem !important;
    border-radius: 999px !important;
    background: var(--shop-instock-bg, rgba(var(--theme-secondary-rgb, 230, 235, 242), 0.95)) !important;
    color: var(--theme-safe-secondary-text, #111111) !important;
    font-weight: 850 !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-detail-list {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-detail-list > div {
    display: grid !important;
    grid-template-columns: minmax(6.5rem, 0.55fr) minmax(0, 1fr) !important;
    gap: 0.65rem !important;
    padding: 0.58rem 0 !important;
    border-bottom: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.58) !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-detail-list > div[hidden] {
    display: none !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-detail-list :is(dt, dd) {
    min-width: 0 !important;
    margin: 0 !important;
    overflow-wrap: anywhere !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-detail-list dt {
    color: var(--theme-safe-card-secondary-muted, #666666) !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-additional-info {
    display: grid !important;
    gap: 0.35rem !important;
    padding-top: 0.25rem !important;
    border-top: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.72) !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-additional-info[hidden] {
    display: none !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-additional-info h4 {
    margin: 0.35rem 0 0 !important;
    color: var(--theme-safe-card-secondary-heading, var(--theme-safe-card-secondary-text, #111111)) !important;
    font-size: 1rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-additional-list > div:last-child {
    border-bottom: 0 !important;
}

.product-info-settings-shell .product-info-field-list {
    display: grid;
    gap: 0.7rem;
}

.product-info-settings-shell .product-info-field-row {
    display: grid;
    grid-template-columns: minmax(9rem, 0.7fr) minmax(14rem, 2fr) minmax(7rem, 0.55fr) minmax(11rem, 1fr);
    gap: 0.75rem;
    align-items: end;
    padding: 0.85rem;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.75);
    border-radius: var(--theme-corner-radius, 0.85rem);
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.72);
}

.product-info-settings-shell .product-info-field-source {
    display: grid;
    gap: 0.25rem;
    align-self: center;
}

.product-info-settings-shell .product-info-field-source code {
    overflow-wrap: anywhere;
}

.product-info-settings-shell .compact-info-panel {
    margin-block: 1rem 0.75rem;
}

.product-info-settings-shell .demo-product-info-editor {
    margin-top: 1rem;
}

.product-info-settings-shell .inline-search-form {
    display: flex;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.product-info-settings-shell .inline-search-form label {
    flex: 1 1 20rem;
}

@media (max-width: 64rem) {
    .product-info-settings-shell .product-info-field-row {
        grid-template-columns: minmax(8rem, 0.65fr) minmax(12rem, 1.6fr) minmax(7rem, 0.55fr);
    }

    .product-info-settings-shell .product-info-field-row .check-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 44rem) {
    .product-info-settings-shell .product-info-field-row,
    .product-info-settings-shell .inline-search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

body.plant-body.route-shop.route-index #main-content .image-preview-cart-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.55rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-cart-actions :is(.image-preview-add-cart, .image-preview-go-cart) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 2.8rem !important;
    border-radius: 999px !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-cart-state {
    min-height: 1.2rem !important;
    color: var(--theme-safe-card-secondary-muted, #666666) !important;
    font-weight: 750 !important;
    text-align: center !important;
}

@media (max-width: 48rem) {
    body.plant-body.route-shop.route-index #main-content .shop-stock-shell {
        width: calc(100% - 0.5rem) !important;
    }

    body.plant-body.route-shop.route-index #main-content .product-grid,
    body.plant-body.route-shop.route-index #main-content .product-grid.takealot-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: center !important;
    }

    body.plant-body.route-shop.route-index #main-content .product-card {
        width: min(100%, 28rem) !important;
        max-width: 28rem !important;
        margin-inline: auto !important;
    }

    body.plant-body.route-shop.route-index #main-content .product-card button.product-image-wrap,
    body.plant-body.route-shop.route-index #main-content .product-card .product-image-wrap {
        width: min(100%, 22rem) !important;
        justify-self: center !important;
    }

    body.plant-body.route-shop.route-index #main-content .image-preview-card {
        width: calc(100vw - 0.75rem) !important;
        max-width: calc(100vw - 0.75rem) !important;
        max-height: calc(100dvh - 0.75rem) !important;
        padding: 0.75rem !important;
    }

    body.plant-body.route-shop.route-index #main-content .image-preview-product-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-index #main-content .image-preview-frame {
        max-height: 48dvh !important;
    }

    body.plant-body.route-shop.route-index #main-content .image-preview-detail-list > div {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.18rem !important;
    }
}

@media (max-width: 30rem) and (orientation: portrait) {
    body.plant-body.route-shop.route-index #main-content .product-card {
        padding: 0.55rem !important;
    }

    body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card button.product-image-wrap,
    body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card .product-image-wrap {
        aspect-ratio: 4 / 3 !important;
    }

    body.plant-body.route-shop.route-index #main-content .image-preview-price-stock {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Hidden account panels and popup states must beat the responsive display
   declarations above. Only the selected Login/Register panel may be visible. */
body.plant-body.route-account.route-login #main-content .login-auth-card[aria-hidden="true"],
body.plant-body.route-shop.route-index #main-content :is(
    .image-preview-add-cart,
    .image-preview-qty-panel,
    .image-preview-go-cart
)[hidden] {
    display: none !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-qty-panel {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: stretch !important;
    gap: 0.45rem !important;
    padding: 0.55rem !important;
    border-radius: 1rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-qty-panel .shop-card-qty-label {
    width: 100% !important;
    text-align: center !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-qty-panel .shop-card-qty-stepper {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-qty-panel :is(
    .shop-card-qty-btn,
    .image-preview-qty-input
) {
    box-sizing: border-box !important;
    min-height: 2.35rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-qty-panel .shop-card-qty-btn {
    width: 2.35rem !important;
    height: 2.35rem !important;
    min-width: 2.35rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-qty-panel .image-preview-qty-input {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.45rem !important;
    border-radius: 999px !important;
    text-align: center !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-add-cart {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

body.plant-body.route-shop.route-index #main-content .image-preview-add-cart .cart-plus-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    object-fit: contain !important;
}

/* The background is a viewport layer, not a page-width layer. These explicit
   dimensions make it recalculate with both browser zoom and mobile viewport
   changes while still respecting the saved size and position settings. */
body.plant-body::before {
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100% !important;
    background-size: var(--theme-background-size, cover) !important;
    background-position: var(--theme-background-position, center) !important;
    background-attachment: var(--theme-background-attachment, fixed) !important;
    background-origin: border-box !important;
    transform: none !important;
    z-index: -2 !important;
}

html,
body.plant-body {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    background-color: var(--plant-bg, #ffffff) !important;
}

body.plant-body {
    position: relative !important;
    isolation: isolate !important;
}

body.plant-body::after {
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100% !important;
    transform: none !important;
    z-index: -1 !important;
}

/* Keep the dark account wrapper close to the form instead of leaving a large,
   empty block around it. Login and password recovery share this same frame. */
body.plant-body.route-account #main-content .login-auth-panel-wrap {
    box-sizing: border-box !important;
    width: min(100%, 46rem) !important;
    max-width: 46rem !important;
    margin-inline: auto !important;
    padding: clamp(0.45rem, 1.5vw, 0.9rem) !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.42) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.72) !important;
    border-radius: clamp(1.1rem, 2.4vw, 1.65rem) !important;
    box-shadow: 0 20px 45px rgba(12, 25, 45, 0.16) !important;
}

body.plant-body.route-account #main-content .login-auth-panel-wrap .login-auth-card {
    width: 100% !important;
    max-width: none !important;
}

/* Account switches and links use one text-action pattern: no pill, no filled
   highlight, a visible underline, and a colour change on hover/focus. */
body.plant-body.route-account #main-content .login-auth-card :is(.auth-switch-button, .auth-text-link) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0.22rem 0.3rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--theme-auth-link, #00529b) !important;
    -webkit-text-fill-color: var(--theme-auth-link, #00529b) !important;
    box-shadow: none !important;
    filter: none !important;
    text-decoration: underline !important;
    text-underline-offset: 0.2em !important;
    transition: color 150ms ease, text-decoration-thickness 150ms ease !important;
}

body.plant-body.route-account #main-content .login-auth-card :is(.auth-switch-button, .auth-text-link):is(:hover, :focus-visible, :active) {
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    text-decoration-thickness: 0.16em !important;
}

/* Forgot Password reuses the Login card hierarchy rather than falling back to
   the older generic account form. */
body.plant-body.route-account.route-forgotpassword #main-content .login-context-note {
    box-sizing: border-box !important;
    width: min(100%, 52rem) !important;
    max-width: 52rem !important;
    margin-inline: auto !important;
}

body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card {
    box-sizing: border-box !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(0.85rem, 1.8vw, 1.15rem) !important;
    padding: clamp(1rem, 2.5vw, 1.65rem) !important;
    background: rgba(var(--theme-card-rgb, 255, 255, 255), var(--theme-panel-alpha, 0.96)) !important;
    background-image: none !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.86) !important;
    border-radius: clamp(1rem, 2.5vw, 1.55rem) !important;
    color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: 0 18px 42px rgba(12, 25, 45, 0.16) !important;
    overflow: hidden !important;
}

body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card :is(.auth-card-heading, .auth-field-group) {
    min-width: 0 !important;
    display: grid !important;
    gap: 0.38rem !important;
}

body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .auth-card-heading h3,
body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .auth-card-heading p,
body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .auth-field-group label {
    margin: 0 !important;
}

body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .auth-card-kicker,
body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .auth-field-group label {
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .form-control {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 3rem !important;
    border-radius: 0.95rem !important;
}

body.plant-body.route-account.route-forgotpassword #main-content .login-auth-card .auth-primary-submit {
    width: 100% !important;
    min-height: 3rem !important;
    border-radius: 999px !important;
}

/* PayFast Sandbox and Live must always remain inside the settings card. */
body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card :is(.admin-panel-card, .admin-form-grid, .admin-two-column-grid, .admin-sub-card, label) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)) !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-two-column-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-sub-card {
    overflow: hidden !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card :is(input, select, textarea, .form-control) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-inline-check input {
    width: auto !important;
    flex: 0 0 auto !important;
}

@media (max-width: 64rem) {
    body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-two-column-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Account form typography follows the saved client theme. The page header is
   deliberately excluded so it keeps the established header treatment. */
body.plant-body.route-account #main-content .login-context-note,
body.plant-body.route-account #main-content .login-context-note * {
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
}

body.plant-body.route-account #main-content .login-auth-card {
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body.route-account #main-content .login-auth-card .auth-card-heading h3 {
    color: var(--theme-safe-card-heading, var(--theme-safe-card-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-heading, var(--theme-safe-card-text, #111111)) !important;
}

body.plant-body.route-account #main-content .login-auth-card :is(
    .auth-card-kicker,
    .auth-field-group label,
    .auth-account-switch > span
) {
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
}

body.plant-body.route-account #main-content .login-auth-card :is(
    .auth-card-heading p,
    .auth-card-heading .shop-muted,
    .auth-secondary-action
) {
    color: var(--theme-safe-card-muted, #666666) !important;
    -webkit-text-fill-color: var(--theme-safe-card-muted, #666666) !important;
}

body.plant-body.route-account #main-content .login-auth-card :is(input, .form-control) {
    color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
    caret-color: var(--theme-safe-card-secondary-text, var(--theme-safe-card-text, #111111)) !important;
}

body.plant-body.route-account #main-content .login-auth-card :is(input, .form-control)::placeholder {
    color: var(--theme-safe-card-secondary-muted, var(--theme-safe-card-muted, #666666)) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-muted, var(--theme-safe-card-muted, #666666)) !important;
    opacity: 0.82 !important;
}

body.plant-body.route-account #main-content .login-auth-card .auth-primary-submit {
    color: var(--shop-button-text, var(--theme-safe-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--shop-button-text, var(--theme-safe-button-text, #ffffff)) !important;
}

/* Button elements used as account links must render exactly like the Forgot
   Password anchor, including in native browser button appearance modes. */
body.plant-body.route-account #main-content .login-auth-card button.auth-switch-button,
body.plant-body.route-account #main-content .login-auth-card button.auth-switch-button:is(:hover, :focus, :active) {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Login and Create Account now use the same anchor component as the correct
   Forgot/Reset Password card. Explicit link and visited states prevent legacy
   button or browser-history rules from changing their appearance. */
body.plant-body.route-account #main-content .login-auth-card :is(
    a.auth-text-link,
    a.auth-switch-button
),
body.plant-body.route-account #main-content .login-auth-card :is(
    a.auth-text-link,
    a.auth-switch-button
):visited {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--theme-auth-link, #00529b) !important;
    -webkit-text-fill-color: var(--theme-auth-link, #00529b) !important;
    box-shadow: none !important;
    filter: none !important;
    font: inherit !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-decoration: underline !important;
    text-underline-offset: 0.18em !important;
}

body.plant-body.route-account #main-content .login-auth-card :is(
    a.auth-text-link,
    a.auth-switch-button
):is(:hover, :focus-visible, :active) {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--theme-safe-card-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-text, #111111) !important;
    box-shadow: none !important;
    text-decoration-thickness: 0.14em !important;
}

/* Image-only catalogue cards are one large detail trigger. This also restores
   interaction for the legacy no-photo placeholder, whose older rule disabled
   pointer events completely. */
body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card.image-only-clickable {
    cursor: pointer !important;
}

body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card.image-only-clickable:focus-visible {
    outline: 3px solid var(--theme-auth-link, var(--shop-button-bg, #00529b)) !important;
    outline-offset: 3px !important;
}

body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card .product-image-wrap.no-photo-static {
    cursor: pointer !important;
    pointer-events: auto !important;
}

body.plant-body.route-shop.route-index #main-content .shop-view-image-only .product-card .product-image-wrap.no-photo-static .product-photo-hint {
    display: inline-flex !important;
}

/* ==========================================================
   Bootstrap-aligned mobile safety layer
   Bootstrap is loaded by _Layout; these rules bridge its responsive
   utilities with the site's custom grid, header and cart components.
   ========================================================== */
@media (max-width: 48rem) {
    body.plant-body #main-content {
        font-size: clamp(0.92rem, 3.8vw, 1rem) !important;
    }

    body.plant-body #main-content :is(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, a) {
        max-width: 100% !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    body.plant-body #main-content :is(h1, h2, h3) {
        line-height: 1.08 !important;
        text-wrap: balance;
    }

    body.plant-body #main-content :is(.btn, button:not(.inline-clear-btn):not(.category-close):not(.image-preview-close)) {
        max-width: 100% !important;
        white-space: normal !important;
    }

    /* Do not let wide admin actions squeeze the Branding title into a
       one-character column. The title and actions get full rows on phones. */
    body.plant-body.route-branding #main-content .branding-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        justify-items: stretch !important;
        width: 100% !important;
    }

    body.plant-body.route-branding #main-content .branding-header .branding-title {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    body.plant-body.route-branding #main-content .branding-header .branding-title h1 {
        width: 100% !important;
        margin-inline: auto !important;
        font-size: clamp(1.8rem, 9vw, 2.65rem) !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    body.plant-body.route-branding #main-content .branding-header .branding-title p {
        width: min(100%, 40rem) !important;
        margin: 0.45rem auto 0 !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    /* Company identity is deliberately centred on portrait phones, including
       the logo placeholder, saved logo, company name and slogan. */
    body.plant-body.route-shop.route-index #main-content .shop-storefront-heading,
    body.plant-body.route-shop.route-index #main-content .shop-storefront-brand,
    body.plant-body.route-shop.route-index #main-content .shop-storefront-title {
        justify-items: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.plant-body.route-shop.route-index #main-content .shop-storefront-brand,
    body.plant-body.route-shop.route-index #main-content .shop-storefront-title {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-index #main-content .shop-storefront-title :is(h1, h2, .shop-page-subtitle),
    body.plant-body.route-shop.route-index #main-content .shop-storefront-brand .shop-page-logo-link {
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.plant-body.route-shop.route-index #main-content .shop-storefront-title h2 {
        font-size: clamp(2rem, 12vw, 3.5rem) !important;
        white-space: normal !important;
        word-break: normal !important;
    }

    body.plant-body.route-shop.route-cart #main-content :is(.shop-logo-header, .shop-page-logo-link) {
        justify-content: center !important;
        text-align: center !important;
    }

    body.plant-body.route-shop.route-cart #main-content .shop-section-heading > :first-child {
        text-align: center !important;
    }

    /* The cart list is the mobile scroll area. Removing the historic 340px
       row cap prevents the final Remove button from being clipped on a
       single, information-heavy cart item. */
    body.plant-body.route-shop.route-cart #main-content .cart-list.responsive-cart-list {
        display: grid !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: min(72dvh, 44rem) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        padding: 0.2rem 0.35rem 1.25rem 0.1rem !important;
        scroll-padding-block: 0.75rem 5rem !important;
        scrollbar-gutter: stable !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
    }

    body.plant-body.route-shop.route-cart #main-content .cart-row.responsive-cart-row {
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        align-content: start !important;
        padding-bottom: 1rem !important;
    }

    body.plant-body.route-shop.route-cart #main-content .cart-row.responsive-cart-row .cart-remove-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 2.75rem !important;
        margin-top: 0.35rem !important;
        visibility: visible !important;
    }
}

@media (max-width: 30rem) {
    body.plant-body.route-branding #main-content .branding-header-actions,
    body.plant-body.route-branding #main-content .branding-header-actions .admin-command-header-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-cart #main-content .cart-list.responsive-cart-list {
        max-height: 68dvh !important;
        padding-right: 0.2rem !important;
    }
}

/* Final shared-shell enforcement. This remains last so later feature-specific
   fixes cannot accidentally restore a different page width or square panel. */
body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page) {
    display: grid !important;
    box-sizing: border-box !important;
    width: min(100%, 112rem) !important;
    max-width: 112rem !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    gap: clamp(0.7rem, 1.25vw, 1.05rem) !important;
    border-radius: clamp(1.15rem, 2vw, 1.55rem) !important;
    background-clip: padding-box !important;
}

body.plant-body.route-account #main-content > section.auth-shell {
    width: min(100%, 52rem) !important;
    max-width: 52rem !important;
}

body.plant-body.route-shop.route-index #main-content > .shop-stock-shell {
    width: min(100%, 120rem) !important;
    max-width: 120rem !important;
}

body.plant-body #main-content :is(
    .inline-search-strip,
    .customer-order-search-form,
    .admin-date-filter-panel,
    .admin-settings-card,
    .system-settings-card,
    .delivery-settings-card,
    .checkout-card,
    .payment-card,
    .cart-panel,
    .cart-summary,
    .customer-order-card,
    .admin-detail-card,
    .permission-table-wrap,
    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .photo-upload-toolbar,
    .photo-edit-panel,
    .branding-panel,
    .auth-panel-wrap,
    .auth-card,
    .error-help-card
) {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-color: rgba(var(--theme-border-rgb, 199, 210, 223), 0.78) !important;
    border-radius: 1.05rem !important;
    background-clip: padding-box !important;
    box-shadow: none !important;
}

@media (max-width: 48rem) {
    body.plant-body #main-content > :is(section.shop-section, section.shop-page, section.branding-page) {
        width: 100% !important;
        max-width: 100% !important;
        gap: clamp(0.58rem, 2.8vw, 0.85rem) !important;
        border-radius: 1rem !important;
    }

    body.plant-body #main-content :is(
        .inline-search-strip,
        .customer-order-search-form,
        .admin-date-filter-panel,
        .photo-upload-toolbar,
        .shop-heading-actions,
        .admin-inline-heading-actions,
        .online-sales-header-actions,
        .admin-command-header-actions
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }
}

/* Corner roundness must remain the final visual authority after every legacy
   compatibility rule above. The Branding editor itself stays on its fixed,
   safe Windows palette; its browser preview uses the matching --live values. */
body.plant-body:not(.route-branding) #main-content > :is(section.shop-section, section.shop-page),
body.plant-body:not(.route-branding) #main-content :is(
    .shop-section-heading,
    .shop-page-header,
    .shop-hero-header,
    .shop-storefront-heading,
    .shop-management-heading,
    .admin-inline-page-heading,
    .online-sales-heading,
    .auth-heading-row,
    .checkout-heading-row
) {
    border-radius: var(--theme-radius-shell, 25px) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .product-card,
    .shop-product-card,
    .cart-row,
    .cart-summary,
    .checkout-card,
    .checkout-summary,
    .payment-card,
    .admin-order-card,
    .admin-detail-card,
    .admin-summary-card,
    .customer-order-card,
    .customer-order-details-card,
    .photo-edit-panel,
    .photo-picker-card,
    .photo-picker-modal,
    .manual-takeover-card,
    .delivery-settings-card,
    .delivery-pricing-example-card,
    .auth-card,
    .error-card,
    .faq-card,
    .image-preview-modal
) {
    border-radius: var(--theme-radius-card, 22px) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    .shop-toolbar,
    .shop-result-strip,
    .shop-tip,
    .shop-pager,
    .shop-pager-bottom,
    .category-panel,
    .right-category-panel,
    .admin-safe-panel,
    .admin-safe-panel-body,
    .admin-bulk-online-panel,
    .admin-bulk-photo-panel,
    .admin-date-filter-panel,
    .online-sales-dashboard,
    .inline-search-strip,
    .photo-upload-toolbar,
    .photo-upload-accordion,
    .auth-shell,
    .auth-panel-wrap,
    .delivery-distance-check-card,
    .checkout-address-confirm,
    .payment-safe-note,
    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .permission-table-wrap,
    .alert
) {
    border-radius: var(--theme-radius-panel, 17px) !important;
}

body.plant-body:not(.route-branding) #main-content :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .product-image-wrap,
    .shop-product-image,
    .photo-admin-thumb,
    .shop-page-logo-placeholder
) {
    border-radius: var(--theme-radius-control, 13px) !important;
}

body.plant-body:not(.route-branding) :is(
    .btn,
    button:not(.category-close):not(.image-preview-close):not(.photo-picker-close):not(.inline-clear-btn),
    .shop-cart-link,
    .mode-switch-btn,
    .category-item,
    .status-pill,
    .admin-payment-badge,
    .customer-status-pill,
    .nav-cart-count,
    .category-count,
    .stock-badge,
    .product-stock-badge
) {
    border-radius: var(--theme-radius-pill, 48px) !important;
}

body.plant-body:not(.route-branding) :is(
    .category-close,
    .image-preview-close,
    .photo-picker-close,
    .inline-clear-btn,
    .shop-card-qty-btn,
    .cart-qty-btn,
    .photo-drag-handle,
    .back-to-top-button
) {
    border-radius: var(--theme-radius-icon, 50%) !important;
}

/* Admin Shop: Bulk Show Online and Category Display Order are sibling tools.
   Give both the same collapsible header, state control and responsive behaviour. */
body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.85rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.86) !important;
    border-radius: var(--theme-radius-panel, 17px) !important;
    background: rgba(var(--theme-card-secondary-rgb, 245, 247, 251), 0.96) !important;
    background-image: none !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) > .admin-safe-panel-head,
body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) > .admin-safe-panel-head:is(:hover, :focus, :focus-visible) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 4.6rem !important;
    margin: 0 !important;
    padding: 0.8rem 1rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    gap: 0.22rem 0.9rem !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    text-align: left !important;
    box-shadow: none !important;
    filter: none !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) > .admin-safe-panel-head:focus-visible {
    outline: 2px solid var(--shop-button-bg, #111111) !important;
    outline-offset: -4px !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) > .admin-safe-panel-head .admin-collapsible-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
    font-size: clamp(0.82rem, 1vw, 0.96rem) !important;
    line-height: 1.15 !important;
    text-align: left !important;
    overflow-wrap: break-word !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) > .admin-safe-panel-head .admin-collapsible-hint {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    color: var(--theme-safe-card-secondary-text, #111111) !important;
    -webkit-text-fill-color: var(--theme-safe-card-secondary-text, #111111) !important;
    opacity: 0.82 !important;
    font-size: clamp(0.68rem, 0.86vw, 0.8rem) !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
) > .admin-safe-panel-head [data-panel-state] {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    min-width: 4.3rem !important;
    min-height: 2.25rem !important;
    padding: 0.48rem 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: var(--theme-radius-pill, 48px) !important;
    background: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
    .admin-bulk-online-panel,
    .admin-category-order-panel
).is-open > .admin-safe-panel-head {
    border-bottom: 1px solid rgba(var(--theme-border-rgb, 210, 218, 230), 0.72) !important;
}

@media (max-width: 32.5rem) {
    body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
        .admin-bulk-online-panel,
        .admin-category-order-panel
    ) > .admin-safe-panel-head,
    body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
        .admin-bulk-online-panel,
        .admin-category-order-panel
    ) > .admin-safe-panel-head:is(:hover, :focus, :focus-visible) {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode #main-content :is(
        .admin-bulk-online-panel,
        .admin-category-order-panel
    ) > .admin-safe-panel-head [data-panel-state] {
        grid-column: 1 !important;
        grid-row: 3 !important;
        justify-self: start !important;
        margin-top: 0.3rem !important;
    }
}

/* Public Shop desktop result bar: keep the view switcher, pager and item count
   on one shared baseline. Existing responsive rules take over below 56rem. */
@media (min-width: 56.001rem) {
    body.plant-body.route-shop.route-index #main-content .client-shop-result-strip {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        grid-template-rows: auto !important;
        align-items: center !important;
        gap: clamp(0.65rem, 1.5vw, 1.2rem) !important;
    }

    body.plant-body.route-shop.route-index #main-content .client-shop-result-strip > .shop-result-title-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
    }

    body.plant-body.route-shop.route-index #main-content .client-shop-result-strip > .shop-result-actions {
        display: contents !important;
    }

    body.plant-body.route-shop.route-index #main-content .client-shop-result-strip .shop-pager-inline {
        grid-column: 2 !important;
        grid-row: 1 !important;
        order: initial !important;
        justify-self: center !important;
        align-self: center !important;
        margin: 0 !important;
    }

    body.plant-body.route-shop.route-index #main-content .client-shop-result-strip .shop-result-actions > strong {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}

/* System Settings checkbox rows keep the original page layout, but use the
   same dependable colour pairing as normal buttons. */
body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-inline-check {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.75rem !important;
    margin: 0.4rem 0 !important;
    padding: 0.65rem 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.65rem !important;
    border: 1px solid var(--shop-button-bg, #111111) !important;
    border-radius: var(--theme-radius-control, 13px) !important;
    background: var(--shop-button-bg, #111111) !important;
    background-image: none !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-transform: none !important;
    box-shadow: none !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-inline-check input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 1.15rem !important;
    min-width: 1.15rem !important;
    height: 1.15rem !important;
    margin: 0 !important;
    accent-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
}

body.plant-body.route-shop.route-systemsettings #main-content .system-settings-card .admin-inline-check span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    -webkit-text-fill-color: var(--theme-safe-button-text, var(--shop-button-text, #ffffff)) !important;
    font: inherit !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    box-shadow: none !important;
}

/* Gold managed carousel: application-owned and independent of the removed
   legacy footer. The duplicated Razor sequence creates a seamless CSS loop. */
.managed-shop-carousel {
    width: 100%;
    max-width: 100%;
    margin: 1.25rem 0 0;
    overflow: hidden;
    border: 1px solid rgba(var(--theme-border-rgb), 0.72);
    border-radius: var(--shop-corner-radius, 16px);
    background: rgba(var(--theme-card-rgb), var(--theme-panel-alpha));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.managed-shop-carousel-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    padding: 1rem 0;
    animation: managed-shop-carousel-loop 28s linear infinite;
    will-change: transform;
}

.managed-shop-carousel-set {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    padding-left: 1rem;
}

.managed-shop-carousel-item {
    flex: 0 0 clamp(190px, 24vw, 340px);
    height: clamp(125px, 16vw, 220px);
    overflow: hidden;
    border: 1px solid rgba(var(--theme-border-rgb), 0.55);
    border-radius: calc(var(--shop-corner-radius, 16px) * 0.8);
    background: rgba(var(--theme-card-secondary-rgb), 0.9);
}

.managed-shop-carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.managed-shop-carousel:hover .managed-shop-carousel-track,
.managed-shop-carousel:focus-within .managed-shop-carousel-track {
    animation-play-state: paused;
}

@keyframes managed-shop-carousel-loop {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (max-width: 600px) {
    .managed-shop-carousel-track {
        padding: 0.65rem 0;
        animation-duration: 22s;
    }

    .managed-shop-carousel-set {
        gap: 0.65rem;
        padding-left: 0.65rem;
    }

    .managed-shop-carousel-item {
        flex-basis: min(72vw, 250px);
        height: min(47vw, 165px);
    }

}

@media (prefers-reduced-motion: reduce) {
    .managed-shop-carousel {
        overflow-x: auto;
    }

    .managed-shop-carousel-track {
        animation: none;
    }
}