/* Plant Paradise alignment layer
   Loaded after site.css so these rules deliberately normalize the shop/admin UI
   to the public Plant Paradise website style. */
:root {
    --pp-bg: #001c17;
    --pp-bg-soft: #042b23;
    --pp-card: #06382d;
    --pp-card-light: #145c3d;
    --pp-green: #185f42;
    --pp-green-dark: #003328;
    --pp-gold: #e4bf57;
    --pp-gold-muted: #9f9447;
    --pp-text: #ffffff;
    --pp-text-muted: rgba(255,255,255,.76);
    --pp-border: rgba(228,191,87,.22);
    --pp-radius: 22px;
    --pp-shell: min(1450px, calc(100vw - 48px));
}

html {
    overflow-x: hidden;
}

body.plant-body {
    background: var(--pp-bg) !important;
    color: var(--pp-text);
    font-size: 14px;
}

    body.plant-body::after {
        background: linear-gradient(180deg, rgba(0, 24, 18, .18) 0%, rgba(0, 24, 18, .68) 34%, rgba(0, 12, 10, .96) 82%, rgba(0, 12, 10, 1) 100%), linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.08) 48%, rgba(0,0,0,.55)) !important;
    }

/*.skip-to-content {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 10000;
    padding: .6rem 1rem;
    border-radius: 999px;
    color: #061814;
    background: var(--pp-gold);
    transform: translateY(-150%);
    transition: transform .15s ease;
}
.skip-to-content:focus { transform: translateY(0); }*/

.plant-nav {
    padding: 18px clamp(18px, 4vw, 64px) !important;
    background: linear-gradient(180deg, rgba(0, 20, 15, .82), rgba(0, 20, 15, .34) 66%, transparent) !important;
    backdrop-filter: none;
}

.plant-nav-inner {
    max-width: 1660px !important;
    gap: clamp(14px, 1.7vw, 30px) !important;
}

.plant-logo {
    flex: 0 0 auto;
}

.plant-logo-img {
    width: clamp(190px, 14vw, 300px) !important;
    max-width: 28vw !important;
    max-height: 108px !important;
}

.plant-logo-fallback {
    display: none;
    color: #fff;
    font-weight: 900;
}

.plant-menu {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: clamp(.72rem, 1.2vw, 1.35rem) !important;
    flex-wrap: nowrap !important;
    min-width: 0;
}

    .plant-menu a,
    .plant-admin-menu-toggle {
        position: relative;
        color: #fff !important;
        font-size: clamp(.78rem, .76vw, .98rem) !important;
        font-weight: 700 !important;
        line-height: 1.1;
        text-decoration: none;
        white-space: nowrap;
        text-shadow: 0 2px 12px rgba(0,0,0,.65);
    }

        .plant-menu a::after,
        .plant-admin-menu-toggle::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -.42rem;
            height: 2px;
            background: var(--pp-gold);
            transform: scaleX(0);
            transform-origin: center;
            transition: transform .18s ease;
        }

        .plant-menu a:hover::after,
        .plant-menu a.active::after,
        .plant-admin-menu-toggle:hover::after {
            transform: scaleX(1);
        }

        .plant-menu a:hover,
        .plant-menu a.active,
        .plant-admin-menu-toggle:hover {
            color: var(--pp-gold) !important;
        }

.nav-cart-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.nav-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    margin-left: .25rem;
    padding: 0 .35rem;
    border-radius: 999px;
    color: #061814;
    background: var(--pp-gold);
    font-size: .72rem;
    font-weight: 900;
}

.plant-account-nav {
    gap: .5rem;
    flex: 0 0 auto;
}

.plant-account-label {
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--pp-text-muted);
    font-size: .82rem;
}

.btn-nav-account {
    padding: .42rem .8rem !important;
    font-size: .78rem !important;
}

.plant-admin-menu-toggle {
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    padding: .48rem .8rem;
}

.plant-admin-dropdown {
    border: 1px solid var(--pp-border) !important;
    border-radius: 18px !important;
    padding: .5rem !important;
    background: rgba(0, 34, 27, .96) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.45);
}

    .plant-admin-dropdown .dropdown-item {
        border-radius: 12px;
        color: #fff !important;
        font-weight: 700;
    }

        .plant-admin-dropdown .dropdown-item:hover {
            background: var(--pp-green);
            color: #fff !important;
        }

.mobile-menu-button {
    display: none;
    align-items: center;
    gap: .42rem;
    border: 1px solid var(--pp-border);
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 36, 29, .7);
    padding: .55rem .85rem;
    font-weight: 800;
}

    .mobile-menu-button span {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 99px;
        background: currentColor;
    }

    .mobile-menu-button b {
        font-size: .82rem;
    }

    .mobile-menu-button.is-open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 4px);
    }

    .mobile-menu-button.is-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.is-open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -4px);
    }

.plant-mobile-menu {
    width: min(520px, calc(100vw - 24px));
    margin: 10px auto 0;
    padding: .75rem;
    border: 1px solid var(--pp-border);
    border-radius: 22px;
    background: rgba(0, 31, 25, .96);
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

    .plant-mobile-menu a {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        padding: .78rem .9rem;
        border-radius: 14px;
        color: #fff;
        text-decoration: none;
        font-weight: 800;
    }

        .plant-mobile-menu a:hover {
            background: rgba(255,255,255,.08);
            color: var(--pp-gold);
        }

.plant-main {
    min-height: 72vh;
}

.shop-section {
    width: var(--pp-shell) !important;
    height: auto !important;
    min-height: calc(100vh - 220px) !important;
    margin: 0 auto 80px !important;
    padding: clamp(128px, 14vh, 170px) clamp(18px, 3vw, 44px) clamp(34px, 5vh, 70px) !important;
    border: 1px solid rgba(228,191,87,.14) !important;
    border-radius: clamp(24px, 2vw, 34px) !important;
    background: linear-gradient(180deg, rgba(0, 31, 25, .64), rgba(0, 14, 12, .94)) !important;
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
    overflow: visible !important;
}

.shop-section-heading {
    align-items: center !important;
    margin-bottom: clamp(1rem, 2vh, 1.8rem) !important;
}

    .shop-section-heading h2 {
        font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
        font-size: clamp(2.55rem, 4.4vw, 5rem) !important;
        font-weight: 400 !important;
        line-height: 1.05 !important;
        letter-spacing: -.045em !important;
        text-shadow: 0 3px 18px rgba(0,0,0,.5);
    }

.shop-muted {
    color: var(--pp-text-muted) !important;
}

.shop-page-logo,
.logo-left {
    max-height: 72px !important;
    width: auto !important;
}

.compact-logo-header {
    margin-bottom: .5rem !important;
}

.btn-gold,
.btn-outline-gold:hover,
.admin-command-link.active,
.status-pill.paid {
    color: #061814 !important;
    background: var(--pp-gold) !important;
    border-color: var(--pp-gold) !important;
}

.btn-outline-gold {
    color: var(--pp-gold) !important;
    border-color: rgba(228,191,87,.7) !important;
    background: transparent !important;
}

.btn-ghost-dark,
.btn-ghost {
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.04) !important;
}

.btn-gold,
.btn-outline-gold,
.btn-ghost-dark,
.btn-cart,
.admin-command-link,
.admin-tool-link {
    border-radius: 999px !important;
    font-weight: 800 !important;
}

    .btn-gold:hover {
        filter: brightness(1.06);
    }

.btn[disabled], .btn.disabled, a.disabled {
    pointer-events: none;
    opacity: .58;
}

.shop-toolbar,
.category-panel,
.cart-row,
.cart-summary,
.checkout-card,
.payment-card,
.admin-detail-card,
.admin-summary-card,
.photo-upload-accordion,
.signed-in-checkout-card,
.empty-cart-card,
.shop-empty-card,
.admin-note-card,
.admin-safe-panel {
    border: 1px solid rgba(228,191,87,.14) !important;
    background: rgba(0, 44, 35, .78) !important;
    box-shadow: 0 18px 55px rgba(0,0,0,.25) !important;
    backdrop-filter: blur(12px);
}

.product-card,
.service-card {
    background: linear-gradient(145deg, rgba(20, 92, 61, .95), rgba(0, 49, 40, .94)) !important;
    border: 1px solid rgba(228,191,87,.14) !important;
}

.product-image-wrap {
    background: radial-gradient(circle at 70% 70%, rgba(228,191,87,.13), transparent 38%), rgba(255,255,255,.055) !important;
}

.product-content h3 {
    font-size: clamp(1.05rem, 1.2vw, 1.4rem) !important;
    min-height: 0 !important;
}

.product-price {
    color: var(--pp-gold) !important;
    font-size: clamp(1.2rem, 1.35vw, 1.55rem) !important;
}

.stock-pill.in-stock {
    background: var(--pp-gold) !important;
    color: #061814 !important;
}

.shop-layout {
    align-items: stretch !important;
}

.product-area,
.admin-order-detail-scroll {
    min-height: 0;
}

.admin-order-detail-scroll {
    max-height: calc(100vh - 300px);
    overflow: auto;
    padding-right: .25rem;
}

.admin-orders-table-wrap,
.admin-order-table-wrap,
.admin-detail-lines-wrap {
    width: 100%;
    overflow: auto !important;
    border-radius: 20px;
    max-height: none !important;
}

.admin-orders-table,
.admin-order-table {
    min-width: 980px;
}

    .admin-orders-table thead th,
    .admin-order-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: rgba(0, 34, 27, .98);
    }

.payment-warning-row {
    outline: 1px solid rgba(228,191,87,.42);
    outline-offset: -1px;
}

.payment-warning-reason {
    display: block;
    color: var(--pp-gold);
    font-size: .78rem;
    margin-top: .25rem;
}

.inline-search-strip {
    position: relative;
    z-index: 4;
    flex-wrap: wrap;
    border: 1px solid rgba(228,191,87,.14);
    border-radius: 20px;
    background: rgba(0, 33, 27, .65);
    padding: .75rem;
}

.inline-search-box {
    min-width: min(420px, 100%);
    flex: 1 1 420px;
}

    .inline-search-box .form-control,
    .shop-search-form .form-control,
    .checkout-card .form-control,
    .payment-card .form-control,
    .form-control {
        color: #fff !important;
        border: 1px solid rgba(255,255,255,.55) !important;
        background: rgba(255,255,255,.095) !important;
    }

        .form-control::placeholder {
            color: rgba(255,255,255,.58) !important;
        }

select.form-control option {
    color: #061814;
}

.admin-command-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .55rem;
    border: 1px solid rgba(228,191,87,.14);
    border-radius: 22px;
    background: rgba(0, 28, 23, .58);
}

.admin-command-link {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .5rem .85rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.055);
    text-decoration: none;
}

    .admin-command-link:hover {
        color: #061814;
        background: #fff;
    }

.pp-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 22, 18, .74);
    backdrop-filter: blur(5px);
}

    .pp-loading-overlay.hidden {
        display: none !important;
    }

.pp-loading-card {
    display: grid;
    justify-items: center;
    gap: .75rem;
    min-width: 220px;
    padding: 1.35rem 1.6rem;
    border: 1px solid rgba(228,191,87,.22);
    border-radius: 24px;
    color: #fff;
    background: rgba(0, 40, 32, .92);
    box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

    .pp-loading-card span {
        color: var(--pp-text-muted);
        font-size: .9rem;
    }

.spinner,
.btn-spinner {
    display: inline-block;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,.25);
    border-top-color: var(--pp-gold);
    animation: pp-spin .72s linear infinite;
}

.spinner {
    width: 52px;
    height: 52px;
}

.btn-spinner {
    width: 1em;
    height: 1em;
    margin-right: .45rem;
    vertical-align: -.15em;
}

.is-loading-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}

@keyframes pp-spin {
    to {
        transform: rotate(360deg);
    }
}

.shop-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    padding: .85rem 1rem;
    border: 1px solid rgba(228,191,87,.26);
    border-radius: 16px;
    color: #fff;
    background: rgba(0, 45, 36, .96);
    box-shadow: 0 18px 55px rgba(0,0,0,.36);
    transition: opacity .18s ease, transform .18s ease;
}

    .shop-toast.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

.plant-site-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(228,191,87,.12);
    background: rgba(10, 67, 45, .92);
}

.plant-footer-inner {
    width: var(--pp-shell);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: clamp(1.2rem, 3vw, 3rem);
    padding: 2.2rem 0;
}

.plant-footer-brand img {
    width: min(220px, 100%);
    height: auto;
    margin-bottom: .7rem;
}

.plant-footer-brand span,
.plant-site-footer p {
    color: rgba(255,255,255,.82);
    margin: 0;
}

.plant-site-footer h3 {
    color: #fff;
    margin: 0 0 .75rem;
    font-size: 1rem;
}

.plant-site-footer a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin: .38rem 0;
}

    .plant-site-footer a:hover {
        color: var(--pp-gold);
    }

.plant-footer-bottom {
    padding: .75rem 1rem;
    text-align: center;
    color: #061814;
    background: var(--pp-gold);
    font-size: .85rem;
}

@media print {
    .plant-nav,
    .plant-site-footer,
    .pp-loading-overlay,
    .shop-heading-actions,
    .admin-command-strip {
        display: none !important;
    }

    .shop-section {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: #fff !important;
        color: #000 !important;
    }
}

@media (max-width: 1380px) {
    .plant-account-label {
        display: none;
    }

    .plant-menu {
        gap: .78rem !important;
    }

    .plant-logo-img {
        width: clamp(170px, 13vw, 245px) !important;
    }
}

@media (max-width: 1180px) {
    .plant-menu {
        display: none !important;
    }

    .mobile-menu-button {
        display: inline-flex;
    }

    .plant-nav-inner {
        justify-content: space-between;
    }

    .plant-account-nav {
        margin-left: auto;
    }

    .shop-section {
        padding-top: 122px !important;
    }
}

@media (max-width: 900px) {
    :root {
        --pp-shell: min(100vw - 20px, 720px);
    }

    .plant-nav {
        padding: 12px 10px !important;
    }

    .plant-logo-img {
        width: min(54vw, 230px) !important;
        max-width: 54vw !important;
        max-height: 78px !important;
    }

    .plant-account-nav {
        display: none !important;
    }

    .shop-section {
        margin-bottom: 32px !important;
        padding: 104px 12px 26px !important;
        border-radius: 22px !important;
    }

    .shop-section-heading,
    .stock-heading-row,
    .checkout-layout,
    .payment-layout,
    .cart-layout,
    .admin-order-detail-grid,
    .admin-order-summary-grid,
    .admin-summary-grid-5 {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .shop-heading-actions,
    .compact-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

        .shop-heading-actions .btn,
        .compact-actions .btn {
            flex: 1 1 160px;
        }

    .shop-layout {
        grid-template-columns: 1fr !important;
    }

    .category-panel {
        position: static !important;
        max-height: 260px !important;
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)) !important;
    }

    .cart-row {
        grid-template-columns: 1fr !important;
    }

    .cart-row-image {
        width: 100% !important;
        height: 180px !important;
    }

    .admin-order-detail-scroll {
        max-height: none !important;
        overflow: visible !important;
    }

    .plant-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    :root {
        --pp-shell: calc(100vw - 10px);
    }

    body.plant-body {
        font-size: 13px;
    }

    .mobile-menu-button b {
        display: none;
    }

    .shop-section-heading h2 {
        font-size: clamp(2.15rem, 11vw, 3.35rem) !important;
    }

    .shop-page-logo {
        max-height: 56px !important;
    }

    .product-grid {
        grid-template-columns: 1fr !important;
    }

    .inline-search-strip {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .plant-footer-inner {
        grid-template-columns: 1fr;
        padding: 1.4rem 0;
    }
}

/* ==========================================================
   RESPONSIVE REPAIR
   Fixes the fixed-height desktop/tablet shell that breaks when
   browser zoom, screen width, or admin controls change.
   ========================================================== */
html,
body.plant-body {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.plant-main {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
}

.shop-section,
.shop-stock-shell,
.checkout-scroll-shell,
.cart-scroll-shell,
.admin-orders-shell,
.photo-admin-shell {
    width: min(1360px, calc(100vw - clamp(16px, 5vw, 72px))) !important;
    max-width: 1360px !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: calc(100dvh - clamp(24px, 5vh, 56px)) !important;
    margin: clamp(12px, 3vh, 32px) auto clamp(26px, 5vh, 56px) !important;
    padding: clamp(12px, 1.8vw, 24px) !important;
    overflow: visible !important;
    display: block !important;
}

.shop-stock-display,
.shop-stock-display:not([hidden]),
.shop-stock-display > .shop-layout.right-category-layout,
.shop-stock-display .product-area,
.admin-order-detail-scroll,
.admin-orders-table-wrap,
.admin-order-table-wrap,
.admin-detail-lines-wrap {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

.admin-orders-table-wrap,
.admin-order-table-wrap,
.admin-detail-lines-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.shop-stock-display {
    display: block !important;
}

    .shop-stock-display > .shop-layout.right-category-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 280px) !important;
        gap: clamp(12px, 1.5vw, 20px) !important;
        align-items: start !important;
    }

.shop-section-heading.compact-heading,
.stock-heading-row,
body.shop-admin-mode .shop-section-heading.compact-heading {
    position: relative !important;
    top: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(260px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(10px, 1.6vw, 22px) !important;
    padding: clamp(10px, 1.4vw, 18px) !important;
    margin: 0 0 clamp(12px, 2vh, 20px) !important;
    border: 1px solid rgba(228,191,87,.12) !important;
    border-radius: clamp(16px, 1.5vw, 24px) !important;
    background: rgba(0, 42, 33, .82) !important;
    overflow: visible !important;
}

.stock-brand-left {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(10px, 1.4vw, 20px) !important;
}

    .shop-page-logo.logo-left,
    .stock-brand-left .shop-page-logo,
    body.shop-admin-mode .stock-brand-left .shop-page-logo.logo-left {
        flex: 0 0 auto !important;
        width: clamp(118px, 11vw, 178px) !important;
        max-width: 24vw !important;
        height: auto !important;
        max-height: clamp(54px, 7vw, 86px) !important;
        object-fit: contain !important;
    }

    .stock-brand-left h2,
    .shop-section-heading.compact-heading h2,
    body.shop-admin-mode .shop-section-heading.compact-heading h2 {
        font-size: clamp(2rem, 4vw, 3.8rem) !important;
        line-height: .98 !important;
        margin: 0 !important;
        letter-spacing: -.04em !important;
        overflow-wrap: anywhere;
    }

    .stock-brand-left .shop-muted,
    .shop-page-subtitle {
        display: block !important;
        max-width: 420px !important;
        font-size: clamp(.78rem, .9vw, .95rem) !important;
        line-height: 1.35 !important;
    }

.shop-heading-actions,
.local-shop-nav,
body.shop-admin-mode .local-shop-nav {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(6px, .8vw, 10px) !important;
    overflow: visible !important;
}

    .shop-heading-actions > *,
    .local-shop-nav > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .shop-heading-actions .btn,
    .shop-cart-link,
    .mode-switch-btn,
    .admin-tools-summary,
    body.shop-admin-mode .shop-heading-actions .btn,
    body.shop-admin-mode .shop-cart-link,
    body.shop-admin-mode .mode-switch-btn {
        min-height: 38px !important;
        padding: .48rem .78rem !important;
        font-size: clamp(.72rem, .78vw, .86rem) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

.customer-context-pill,
body.shop-admin-mode .customer-context-pill,
.shop-context-pill {
    max-width: min(260px, 100%) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-height: 38px !important;
}

.compact-mode-switch,
.shop-mode-switch {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    max-width: 100% !important;
}

.shop-admin-tools-menu {
    flex: 0 1 auto !important;
    max-width: 100% !important;
}

.admin-tools-menu-panel {
    right: 0 !important;
    left: auto !important;
    max-width: min(320px, calc(100vw - 32px)) !important;
}

.shop-toolbar {
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(10px, 1.2vw, 16px) !important;
    overflow: visible !important;
}

.shop-search-form,
.shop-stock-display > .shop-toolbar .shop-search-form {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto !important;
    gap: clamp(8px, 1vw, 12px) !important;
    align-items: center !important;
}

.inline-search-wrap,
.shop-inline-search {
    min-width: 0 !important;
    width: 100% !important;
}

.shop-search-form .form-control,
.shop-search-form input#search {
    min-width: 0 !important;
    width: 100% !important;
}

.shop-filter-hint {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}

.admin-safe-panel,
.admin-bulk-online-panel,
.admin-bulk-photo-panel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
}

    .admin-safe-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(160px, .9fr) minmax(220px, 1.3fr) auto !important;
        align-items: center !important;
        gap: clamp(8px, 1.2vw, 16px) !important;
        min-height: 52px !important;
        text-align: left !important;
    }

.admin-safe-panel-head .admin-collapsible-title,
.admin-safe-panel-head .admin-collapsible-hint {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
}

@media (max-width: 1280px) {
    .shop-section-heading.compact-heading,
    .stock-heading-row,
    body.shop-admin-mode .shop-section-heading.compact-heading {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .shop-heading-actions,
    .local-shop-nav,
    body.shop-admin-mode .local-shop-nav {
        justify-content: flex-start !important;
    }
}

@media (max-width: 980px) {
    .shop-section,
    .shop-stock-shell,
    .checkout-scroll-shell,
    .cart-scroll-shell,
    .admin-orders-shell,
    .photo-admin-shell {
        width: calc(100vw - 18px) !important;
        margin-top: 9px !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .shop-stock-display > .shop-layout.right-category-layout {
        grid-template-columns: 1fr !important;
    }

    .category-panel,
    .right-category-panel {
        position: static !important;
        max-height: none !important;
    }

    .shop-search-form,
    .shop-stock-display > .shop-toolbar .shop-search-form {
        grid-template-columns: 1fr 1fr !important;
    }

        .inline-search-wrap,
        .shop-inline-search,
        .shop-search-form .shop-filter-hint {
            grid-column: 1 / -1 !important;
        }

    .available-filter-check {
        width: 100% !important;
        justify-content: center !important;
    }

    .admin-safe-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head {
        grid-template-columns: 1fr auto !important;
    }

    .admin-safe-panel-head .admin-collapsible-hint {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 640px) {
    .shop-section-heading.compact-heading,
    .stock-heading-row,
    body.shop-admin-mode .shop-section-heading.compact-heading {
        padding: 10px !important;
    }

    .stock-brand-left {
        align-items: flex-start !important;
    }

        .shop-page-logo.logo-left,
        .stock-brand-left .shop-page-logo,
        body.shop-admin-mode .stock-brand-left .shop-page-logo.logo-left {
            width: clamp(88px, 28vw, 118px) !important;
            max-width: 30vw !important;
        }

        .stock-brand-left h2,
        .shop-section-heading.compact-heading h2,
        body.shop-admin-mode .shop-section-heading.compact-heading h2 {
            font-size: clamp(1.55rem, 9vw, 2.4rem) !important;
        }

        .stock-brand-left .shop-muted,
        .shop-page-subtitle {
            font-size: .78rem !important;
        }

    .shop-heading-actions,
    .local-shop-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

        .shop-heading-actions > *,
        .local-shop-nav > *,
        .shop-heading-actions .btn,
        .shop-cart-link,
        .shop-mode-switch,
        .shop-admin-tools-menu,
        .inline-logout-form,
        .inline-logout-form button,
        .customer-context-pill {
            width: 100% !important;
            max-width: 100% !important;
        }

    .shop-mode-switch {
        grid-column: 1 / -1 !important;
    }

        .shop-mode-switch .mode-switch-btn {
            flex: 1 1 0 !important;
            text-align: center !important;
        }

    .shop-admin-tools-menu {
        grid-column: 1 / -1 !important;
    }

    .shop-search-form,
    .shop-stock-display > .shop-toolbar .shop-search-form {
        grid-template-columns: 1fr !important;
    }

    .product-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-safe-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    .admin-safe-panel-head b {
        justify-self: start !important;
    }
}

/* One page scroll only. No product-area/background double scroll.
   Shop/manage header wraps instead of overflowing.
   Admin Tools dropdown stays above search/filter panels.
   Product/category layout adapts cleanly to desktop, tablet, phone and browser zoom.
   ========================================================= */

html,
body.plant-body {
    min-height: 100% !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.plant-body {
    display: block !important;
    background-color: #001c17 !important;
}

.plant-main {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
}

.plant-site-footer {
    position: relative !important;
    clear: both !important;
    z-index: 1 !important;
    margin-top: clamp(28px, 5vw, 72px) !important;
}


.shop-section,
.shop-stock-shell,
.checkout-scroll-shell,
.cart-scroll-shell,
.admin-orders-shell,
.photo-admin-shell {
    width: min(1500px, calc(100vw - clamp(18px, 4vw, 72px))) !important;
    max-width: 1500px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible !important;
    display: block !important;
}

.shop-stock-shell {
    margin-top: clamp(18px, 4vw, 54px) !important;
    margin-bottom: 0 !important;
    padding: clamp(12px, 1.6vw, 22px) !important;
}

.shop-stock-display,
.shop-stock-display:not([hidden]),
.shop-stock-display > .shop-layout.right-category-layout,
.shop-stock-display .product-area,
.shop-stock-display .right-category-panel,
.admin-online-list,
.product-grid,
.photo-admin-shell,
.admin-orders-shell,
.cart-scroll-shell,
.checkout-scroll-shell {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

    .shop-stock-display:not([hidden]) {
        display: block !important;
    }

    .shop-stock-display > .shop-layout.right-category-layout,
    .shop-layout.right-category-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(230px, 18vw, 310px) !important;
        gap: clamp(12px, 1.5vw, 22px) !important;
        align-items: start !important;
        width: 100% !important;
    }

.product-area {
    min-width: 0 !important;
    width: 100% !important;
    padding-right: 0 !important;
}


.shop-stock-display .shop-result-strip,
.shop-result-strip {
    position: relative !important;
    top: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.category-panel,
.right-category-panel,
.shop-stock-display .right-category-panel {
    position: sticky !important;
    top: 16px !important;
    align-self: start !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 2 !important;
}

.category-panel-list,
.category-item {
    max-height: none !important;
    overflow: visible !important;
}

.shop-section-heading.compact-heading,
.stock-heading-row,
body.shop-admin-mode .shop-section-heading.compact-heading {
    position: relative !important;
    top: auto !important;
    z-index: 5000 !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: minmax(300px, .85fr) minmax(360px, 1.15fr) !important;
    gap: clamp(10px, 1.4vw, 22px) !important;
    align-items: center !important;
    width: 100% !important;
}

.stock-brand-left {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(12px, 1.5vw, 24px) !important;
}

    .shop-page-logo.logo-left,
    .stock-brand-left .shop-page-logo,
    body.shop-admin-mode .stock-brand-left .shop-page-logo.logo-left {
        width: clamp(128px, 13vw, 210px) !important;
        max-width: 32vw !important;
        height: auto !important;
        max-height: 92px !important;
        object-fit: contain !important;
    }

    .stock-brand-left h2,
    .shop-section-heading.compact-heading h2,
    body.shop-admin-mode .shop-section-heading.compact-heading h2 {
        font-size: clamp(2rem, 4.3vw, 4.4rem) !important;
        line-height: .95 !important;
        margin: 0 !important;
        white-space: normal !important;
    }

.shop-heading-actions,
.local-shop-nav,
body.shop-admin-mode .local-shop-nav {
    position: relative !important;
    z-index: 6000 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

    .shop-heading-actions .btn,
    .shop-cart-link,
    .mode-switch-btn,
    .admin-tools-summary,
    .inline-logout-form button,
    .customer-context-pill,
    .shop-context-pill {
        min-height: 38px !important;
        padding: .48rem .82rem !important;
        font-size: clamp(.72rem, .82vw, .9rem) !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

.customer-context-pill,
.shop-context-pill {
    max-width: min(240px, 100%) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.compact-mode-switch,
.shop-mode-switch {
    display: inline-flex !important;
    flex: 0 1 auto !important;
    min-width: fit-content !important;
}

.shop-admin-tools-menu {
    position: relative !important;
    z-index: 7000 !important;
    overflow: visible !important;
}

.admin-tools-menu-panel,
.shop-section-heading.compact-heading .admin-tools-menu-panel {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9000 !important;
    min-width: 230px !important;
    max-width: min(340px, calc(100vw - 32px)) !important;
    overflow: visible !important;
}

.shop-toolbar,
.shop-stock-display > .shop-toolbar,
.shop-stock-display > .admin-bulk-online-panel,
.shop-stock-display > .admin-bulk-photo-panel {
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

.shop-toolbar {
    padding: clamp(10px, 1.2vw, 16px) !important;
}

.shop-search-form,
.shop-stock-display > .shop-toolbar .shop-search-form {
    display: grid !important;
    grid-template-columns: minmax(260px, 1fr) max-content max-content !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

    .inline-search-wrap,
    .shop-inline-search,
    .shop-search-form .form-control,
    .shop-search-form input#search {
        min-width: 0 !important;
        width: 100% !important;
    }

.shop-filter-hint {
    grid-column: 1 / -1 !important;
}

/* Product grid and cards: fit more naturally on desktop and zoomed screens. */
.product-grid,
.product-grid.takealot-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(clamp(180px, 15vw, 230px), 1fr)) !important;
    gap: clamp(12px, 1.25vw, 18px) !important;
    align-items: stretch !important;
    margin-bottom: 0 !important;
}

.product-card {
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(7, 63, 45, .96) !important;
    border-color: rgba(255,255,255,.16) !important;
}

.product-image-wrap {
    height: clamp(150px, 17vw, 205px) !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
}

.product-image,
.product-image-placeholder {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.product-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    color: #fff !important;
}

    .product-content h3,
    .product-meta,
    .product-meta strong,
    .product-price {
        color: #fff !important;
    }

    .product-content h3 {
        font-size: clamp(.92rem, 1vw, 1.08rem) !important;
        line-height: 1.12 !important;
        min-height: 0 !important;
    }

.product-meta {
    opacity: .82 !important;
}

.product-price {
    margin-top: auto !important;
    font-size: clamp(1.05rem, 1.3vw, 1.32rem) !important;
}

.add-cart-form {
    display: grid !important;
    grid-template-columns: minmax(72px, 96px) minmax(42px, 52px) !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 6px !important;
}

.qty-label {
    display: none !important;
}

.btn-cart-icon,
.btn-cart {
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-cart .cart-button-text,
    .btn-cart-icon .cart-button-text {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
    }

.shop-pager,
.shop-pager-bottom {
    margin-top: clamp(14px, 2vw, 24px) !important;
}

/* Admin/manage rows must use the same page scroll. */
.admin-online-list-form,
.admin-online-list,
.admin-online-row,
.admin-online-list-head,
.admin-online-list-foot {
    overflow: visible !important;
    max-height: none !important;
}

.admin-online-row {
    grid-template-columns: auto minmax(160px, 1fr) minmax(95px, .45fr) minmax(95px, .45fr) minmax(180px, .75fr) !important;
    gap: 10px !important;
}

/* Tablet / small desktop */
@media (max-width: 1180px) {
    .shop-section-heading.compact-heading,
    .stock-heading-row,
    body.shop-admin-mode .shop-section-heading.compact-heading {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }

    .shop-heading-actions,
    .local-shop-nav,
    body.shop-admin-mode .local-shop-nav {
        justify-content: flex-start !important;
    }

    .shop-stock-display > .shop-layout.right-category-layout,
    .shop-layout.right-category-layout {
        grid-template-columns: 1fr !important;
    }

    .category-panel,
    .right-category-panel,
    .shop-stock-display .right-category-panel {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
        width: 100% !important;
    }

    .product-grid,
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)) !important;
    }

    .admin-online-row {
        grid-template-columns: auto minmax(160px, 1fr) minmax(130px, .6fr) !important;
    }
}

@media (max-width: 820px) {
    .shop-section,
    .shop-stock-shell,
    .checkout-scroll-shell,
    .cart-scroll-shell,
    .admin-orders-shell,
    .photo-admin-shell {
        width: calc(100vw - 18px) !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .stock-brand-left {
        align-items: flex-start !important;
    }

    .shop-search-form,
    .shop-stock-display > .shop-toolbar .shop-search-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .inline-search-wrap,
    .shop-inline-search,
    .shop-filter-hint {
        grid-column: 1 / -1 !important;
    }

    .available-filter-check {
        width: 100% !important;
        justify-content: center !important;
    }

    .product-grid,
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) !important;
    }

    .product-image-wrap {
        height: 150px !important;
    }
}

@media (max-width: 560px) {
    .stock-brand-left {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        gap: 10px !important;
    }

        .shop-page-logo.logo-left,
        .stock-brand-left .shop-page-logo,
        body.shop-admin-mode .stock-brand-left .shop-page-logo.logo-left {
            width: clamp(88px, 28vw, 116px) !important;
            max-width: 32vw !important;
        }

        .stock-brand-left h2,
        .shop-section-heading.compact-heading h2,
        body.shop-admin-mode .shop-section-heading.compact-heading h2 {
            font-size: clamp(1.55rem, 9vw, 2.25rem) !important;
        }

    .shop-heading-actions,
    .local-shop-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

        .shop-heading-actions > *,
        .local-shop-nav > *,
        .shop-heading-actions .btn,
        .shop-cart-link,
        .shop-mode-switch,
        .shop-admin-tools-menu,
        .inline-logout-form,
        .inline-logout-form button,
        .customer-context-pill,
        .shop-context-pill {
            width: 100% !important;
            max-width: 100% !important;
        }

    .shop-mode-switch,
    .shop-admin-tools-menu,
    .customer-context-pill,
    .inline-logout-form {
        grid-column: 1 / -1 !important;
    }

        .shop-mode-switch .mode-switch-btn {
            flex: 1 1 0 !important;
            text-align: center !important;
        }

    .admin-tools-menu-panel,
    .shop-section-heading.compact-heading .admin-tools-menu-panel {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .shop-search-form,
    .shop-stock-display > .shop-toolbar .shop-search-form {
        grid-template-columns: 1fr !important;
    }

    .product-grid,
    .product-grid.takealot-grid {
        grid-template-columns: 1fr !important;
    }

    .product-image-wrap {
        height: 180px !important;
    }

    .admin-online-row {
        grid-template-columns: 1fr !important;
    }
}


:root {
    --plant-muted: rgba(255,255,255,.78) !important;
    --shop-muted: rgba(255,255,255,.78) !important;
}

body.plant-body,
body.plant-body .shop-section,
body.plant-body .shop-stock-shell,
body.plant-body .admin-orders-shell,
body.plant-body .photo-admin-shell {
    color: #fff !important;
}

    body.plant-body .form-control,
    body.plant-body input.form-control,
    body.plant-body textarea.form-control,
    body.plant-body select.form-control,
    body.plant-body .shop-search-form .form-control,
    body.plant-body .inline-search-box .form-control,
    body.plant-body .inline-search-wrap .form-control,
    body.plant-body .shop-inline-search .form-control {
        color: #fff !important;
        caret-color: #fff !important;
        background: rgba(255,255,255,.13) !important;
        border-color: rgba(255,255,255,.68) !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.06) !important;
    }

        body.plant-body .form-control::placeholder,
        body.plant-body input.form-control::placeholder,
        body.plant-body textarea.form-control::placeholder,
        body.plant-body .shop-search-form .form-control::placeholder,
        body.plant-body .inline-search-box .form-control::placeholder,
        body.plant-body .inline-search-wrap .form-control::placeholder,
        body.plant-body .shop-inline-search .form-control::placeholder {
            color: rgba(255,255,255,.64) !important;
            opacity: 1 !important;
        }

    body.plant-body .inline-search-icon {
        color: var(--pp-gold) !important;
        opacity: 1 !important;
    }

    body.plant-body .small-muted,
    body.plant-body .shop-muted,
    body.plant-body .product-meta,
    body.plant-body .admin-orders-table td span,
    body.plant-body .admin-order-table td small,
    body.plant-body .payment-safe-note span {
        color: rgba(255,255,255,.78) !important;
    }


    body.plant-body .product-card,
    body.plant-body .product-card *:not(input):not(button):not(select):not(option):not(.stock-pill):not(.btn):not(.btn-cart):not(.cart-button-text) {
        color: #fff !important;
    }

        body.plant-body .product-card .product-price,
        body.plant-body .product-card .product-price *,
        body.plant-body .cart-summary strong,
        body.plant-body .checkout-summary strong,
        body.plant-body .admin-summary-card strong,
        body.plant-body .admin-orders-table th,
        body.plant-body .admin-order-table th {
            color: var(--pp-gold) !important;
        }

        body.plant-body .product-card .product-meta,
        body.plant-body .product-card .product-meta * {
            color: rgba(255,255,255,.74) !important;
        }

        body.plant-body .qty-input,
        body.plant-body .product-card input[type="number"] {
            color: #061814 !important;
            background: #fff !important;
        }


    body.plant-body .shop-filter-hint {
        display: none !important;
    }


.cart-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
    align-items: start !important;
}

    .cart-layout .cart-list {
        max-height: min(68vh, 760px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-right: 8px !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin;
    }

    .cart-layout .cart-summary,
    .checkout-layout .checkout-summary {
        position: sticky !important;
        top: 18px !important;
    }


.checkout-mini-list,
[data-checkout-mini-list] {
    display: none !important;
}


.admin-orders-shell,
.photo-admin-shell,
.product-photo-admin-shell,
body.plant-body .admin-orders-shell,
body.plant-body .photo-admin-shell,
body.plant-body .product-photo-admin-shell {
    width: min(1720px, calc(100vw - clamp(14px, 3vw, 48px))) !important;
    max-width: 1720px !important;
}

.admin-orders-table-wrap,
.admin-order-table-wrap,
.photo-order-form,
.permission-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

.admin-orders-table,
.admin-order-table,
.admin-trn-orders-table,
.admin-trn-detail-table,
.product-photo-admin-shell .admin-order-table,
.users-table,
.permission-table-clean {
    width: 100% !important;
    min-width: 1180px !important;
    table-layout: auto !important;
}

    .admin-trn-orders-table th,
    .admin-trn-orders-table td {
        padding-left: clamp(10px, 1vw, 18px) !important;
        padding-right: clamp(10px, 1vw, 18px) !important;
    }

        .admin-trn-orders-table th:nth-child(1),
        .admin-trn-orders-table td:nth-child(1) {
            width: 18%;
        }

        .admin-trn-orders-table th:nth-child(2),
        .admin-trn-orders-table td:nth-child(2) {
            width: 13%;
        }

        .admin-trn-orders-table th:nth-child(3),
        .admin-trn-orders-table td:nth-child(3) {
            width: 13%;
        }

        .admin-trn-orders-table th:nth-child(5),
        .admin-trn-orders-table td:nth-child(5) {
            width: 10%;
        }

        .admin-trn-orders-table th.actions,
        .admin-trn-orders-table td.actions {
            width: 90px;
        }


#order-details .admin-order-detail-scroll,
#order-details [data-detail-scroll] {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

#order-details .admin-order-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    gap: clamp(12px, 1.2vw, 18px) !important;
    width: 100% !important;
}

#order-details .admin-detail-lines-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

#order-details .admin-trn-detail-table {
    width: 100% !important;
    min-width: 1050px !important;
}

    #order-details .admin-trn-detail-table th:nth-child(3),
    #order-details .admin-trn-detail-table td:nth-child(3) {
        width: 42% !important;
    }


.product-photo-admin-shell .inline-search-strip,
.admin-orders-shell .inline-search-strip,
.product-photo-admin-shell form.inline-search-strip,
.admin-orders-shell form.inline-search-strip {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(280px, 1fr) auto auto auto !important;
    gap: 10px !important;
    align-items: center !important;
}

.product-photo-admin-shell .inline-search-box,
.admin-orders-shell .inline-search-box {
    width: 100% !important;
    min-width: 0 !important;
}

.product-photo-admin-shell .photo-order-form .admin-order-table,
.product-photo-admin-shell .admin-order-table,
.admin-orders-shell .admin-order-table {
    width: 100% !important;
    min-width: 1080px !important;
}


.admin-orders-table-wrap::-webkit-scrollbar,
.admin-order-table-wrap::-webkit-scrollbar,
.cart-layout .cart-list::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.admin-orders-table-wrap::-webkit-scrollbar-thumb,
.admin-order-table-wrap::-webkit-scrollbar-thumb,
.cart-layout .cart-list::-webkit-scrollbar-thumb {
    background: rgba(228,191,87,.55);
    border-radius: 999px;
}

.admin-orders-table-wrap::-webkit-scrollbar-track,
.admin-order-table-wrap::-webkit-scrollbar-track,
.cart-layout .cart-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
    border-radius: 999px;
}

@media (max-width: 1180px) {
    #order-details .admin-order-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .product-photo-admin-shell .inline-search-strip,
    .admin-orders-shell .inline-search-strip,
    .product-photo-admin-shell form.inline-search-strip,
    .admin-orders-shell form.inline-search-strip {
        grid-template-columns: 1fr auto auto !important;
    }

    .product-photo-admin-shell .inline-search-box,
    .admin-orders-shell .inline-search-box {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 900px) {
    .cart-layout {
        grid-template-columns: 1fr !important;
    }

        .cart-layout .cart-list {
            max-height: min(62vh, 620px) !important;
        }

        .cart-layout .cart-summary,
        .checkout-layout .checkout-summary {
            position: relative !important;
            top: auto !important;
        }

    .admin-orders-table,
    .admin-order-table,
    .admin-trn-orders-table,
    .admin-trn-detail-table,
    .product-photo-admin-shell .admin-order-table,
    .permission-table-clean {
        min-width: 920px !important;
    }
}

@media (max-width: 640px) {
    #order-details .admin-order-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .product-photo-admin-shell .inline-search-strip,
    .admin-orders-shell .inline-search-strip,
    .product-photo-admin-shell form.inline-search-strip,
    .admin-orders-shell form.inline-search-strip {
        grid-template-columns: 1fr !important;
    }

    .product-photo-admin-shell .inline-search-box,
    .admin-orders-shell .inline-search-box,
    .product-photo-admin-shell .btn,
    .admin-orders-shell .btn,
    .product-photo-admin-shell .small-muted,
    .admin-orders-shell .small-muted {
        width: 100% !important;
    }
}

:root {
    --scroll-dim: .34;
}

body.plant-body::after {
    background: linear-gradient(180deg, rgba(0,0,0, calc(var(--scroll-dim, .34) * .48)) 0%, rgba(0,22,17, calc(var(--scroll-dim, .34) * .96)) 35%, rgba(0,0,0, calc(var(--scroll-dim, .34) + .24)) 72%, rgba(0,0,0, calc(var(--scroll-dim, .34) + .42)) 100%), linear-gradient(90deg, rgba(0,0,0, calc(var(--scroll-dim, .34) + .18)), rgba(0,0,0,.18) 48%, rgba(0,0,0, calc(var(--scroll-dim, .34) + .22))) !important;
}

/* Add-to-cart feedback: spinner only, no text overflow. */
.btn-cart.is-loading-button,
.btn-cart-icon.is-loading-button {
    width: 54px !important;
    min-width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .btn-cart.is-loading-button .btn-spinner,
    .btn-cart-icon.is-loading-button .btn-spinner {
        margin: 0 !important;
    }


.shop-toast {
    pointer-events: none;
}


.product-image-wrap,
.admin-list-image {
    background: rgba(244,250,246,.94) !important;
}

.product-image-wrap {
    padding: 0 !important;
}

    .product-image-wrap img,
    .product-image,
    .admin-list-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

.product-card .product-image-wrap {
    min-height: clamp(190px, 15vw, 260px) !important;
}


.stock-client-filtering .product-grid,
.stock-client-filtering .admin-online-list {
    opacity: .72;
    transition: opacity 120ms linear;
}

.stock-client-filtering .shop-result-strip::after {
    content: "Filtering...";
    margin-left: auto;
    color: var(--pp-gold);
    font-weight: 900;
    font-size: .85rem;
}

/* Admin/manage plant list: group field now sits next to Show Online. */
.admin-online-row {
    grid-template-columns: auto minmax(118px, .28fr) minmax(170px, .48fr) minmax(230px, 1fr) minmax(105px, .32fr) minmax(105px, .32fr) !important;
    align-items: center !important;
}

.admin-list-group {
    min-width: 160px !important;
}

    .admin-list-group input.form-control-sm {
        width: 100% !important;
    }

/* Admin pages should use the right-hand space on desktop. */
.admin-orders-shell,
.photo-admin-shell,
.product-photo-admin-shell,
body.plant-body .admin-orders-shell,
body.plant-body .photo-admin-shell,
body.plant-body .product-photo-admin-shell {
    width: min(1760px, calc(100vw - clamp(10px, 2vw, 44px))) !important;
    max-width: 1760px !important;
}

.admin-orders-table-wrap,
.admin-order-table-wrap,
.photo-order-form,
.permission-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
}

.admin-orders-table,
.admin-order-table,
.users-table,
.permission-table-clean {
    width: 100% !important;
}


.admin-command-strip {
    margin-bottom: clamp(12px, 1.6vw, 22px) !important;
    z-index: 20 !important;
}


.product-photo-admin-shell .photo-order-form .admin-order-table th,
.product-photo-admin-shell .photo-order-form .admin-order-table td {
    padding-left: clamp(12px, 1.2vw, 22px) !important;
    padding-right: clamp(12px, 1.2vw, 22px) !important;
}


.inline-search-box input,
.shop-inline-search input,
.inline-search-strip input,
.shop-search-form input[type="text"],
.shop-search-form .form-control {
    color: #ffffff !important;
    caret-color: var(--pp-gold) !important;
}

    .inline-search-box input::placeholder,
    .shop-inline-search input::placeholder,
    .inline-search-strip input::placeholder,
    .shop-search-form .form-control::placeholder {
        color: rgba(255,255,255,.68) !important;
        opacity: 1 !important;
    }


#order-details .admin-order-detail-scroll,
#order-details .admin-detail-lines-wrap {
    max-height: none !important;
    height: auto !important;
    overflow-y: visible !important;
}

@media (max-width: 980px) {
    .admin-online-row {
        grid-template-columns: 82px 1fr 1fr !important;
    }

    .admin-list-main,
    .admin-list-stock,
    .admin-list-price {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 680px) {
    .admin-online-row {
        grid-template-columns: 1fr !important;
    }

    .admin-list-group,
    .admin-display-check {
        width: 100% !important;
    }
}


.product-photo-admin-shell .photo-thumb-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

.product-photo-admin-shell .photo-admin-thumb {
    width: 78px !important;
    height: 78px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
}

.product-photo-admin-shell .image-preview-frame img,
.product-photo-admin-shell .image-preview-frame .photo-admin-thumb {
    max-width: 100% !important;
    max-height: 100% !important;
}


.plant-site-footer,
.plant-footer-inner,
.plant-footer-bottom {
    display: none !important;
}


.plant-mobile-menu a.active,
.plant-mobile-menu a[aria-current="page"] {
    background: rgba(228, 191, 87, .14);
    color: var(--pp-gold);
}

.mobile-account-label,
.mobile-menu-section-label {
    display: block;
    margin: .3rem .2rem .45rem;
    padding: .55rem .8rem;
    border-radius: 14px;
    color: rgba(255, 255, 255, .72);
    background: rgba(255, 255, 255, .045);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mobile-account-label {
    color: #fff;
    text-transform: none;
    letter-spacing: 0;
}

.plant-mobile-logout-form {
    margin: .35rem 0 0;
}

    .plant-mobile-logout-form button {
        width: 100%;
        padding: .78rem .9rem;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 14px;
        color: #fff;
        background: rgba(255, 255, 255, .055);
        font-weight: 900;
        text-align: left;
    }

        .plant-mobile-logout-form button:hover,
        .plant-mobile-logout-form button:focus-visible {
            color: var(--pp-gold);
            background: rgba(255, 255, 255, .09);
        }

.back-to-top-button {
    position: fixed;
    right: clamp(14px, 2vw, 28px);
    bottom: clamp(14px, 2vw, 28px);
    z-index: 18;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(228, 191, 87, .38);
    border-radius: 999px;
    color: #061814;
    background: var(--pp-gold);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .36);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

    .back-to-top-button.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    .back-to-top-button:hover,
    .back-to-top-button:focus-visible {
        background: #fff;
    }

.btn.is-loading-button,
button.is-loading-button {
    pointer-events: none;
    opacity: .78;
}

.btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: .45rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.16em;
    animation: ppButtonSpin .65s linear infinite;
}

@keyframes ppButtonSpin {
    to {
        transform: rotate(360deg);
    }
}

.final-polish-card {
    border: 1px solid rgba(228, 191, 87, .18);
    background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

#system-settings .admin-settings-form {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
}

#system-settings .admin-settings-form > .admin-panel-card {
    margin: 0;
}

#cart .cart-minimum-rule {
    margin: 0 0 clamp(1rem, 2vw, 1.4rem);
}

.polished-payment-actions {
    gap: .75rem;
}

    .polished-payment-actions form {
        width: 100%;
    }

.error-help-card {
    align-items: flex-start;
    min-height: 220px;
    padding: clamp(1.1rem, 3vw, 2rem);
    text-align: left;
}

.error-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
}

    .error-action-row .btn {
        min-width: 150px;
    }

.form-control::placeholder,
textarea.form-control::placeholder {
    color: rgba(255, 255, 255, .56) !important;
}

.form-control:disabled,
.form-control[readonly] {
    opacity: .76;
    cursor: not-allowed;
}

.text-danger,
.field-validation-error,
.validation-summary-errors {
    color: #ffb8a8 !important;
    font-weight: 800;
}

    .validation-summary-errors ul {
        margin-bottom: 0;
        padding-left: 1.1rem;
    }

@media (max-width: 760px) {
    .back-to-top-button {
        width: 42px;
        height: 42px;
        right: 12px;
        bottom: 12px;
    }

    .plant-mobile-menu {
        max-height: calc(100vh - 104px);
        overflow: auto;
    }

    .error-action-row,
    .error-action-row .btn {
        width: 100%;
    }
}


.admin-bulk-online-panel .admin-safe-panel-head,
.admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 4px 12px !important;
    overflow: hidden !important;
    padding: 10px 14px !important;
}

.admin-bulk-online-panel .admin-collapsible-title,
.admin-safe-panel.admin-bulk-online-panel .admin-collapsible-title {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    font-size: clamp(0.78rem, 1vw, 0.95rem) !important;
    line-height: 1.15 !important;
}

.admin-bulk-online-panel .admin-collapsible-hint,
.admin-safe-panel.admin-bulk-online-panel .admin-collapsible-hint {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: clamp(0.62rem, 0.82vw, 0.78rem) !important;
    line-height: 1.15 !important;
}

.admin-bulk-online-panel .admin-safe-panel-head b,
.admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head b {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    align-self: center !important;
    justify-self: end !important;
    flex: 0 0 auto !important;
}

@media (max-width: 520px) {
    .admin-bulk-online-panel .admin-safe-panel-head,
    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head {
        grid-template-columns: minmax(0, 1fr) !important;
    }

        .admin-bulk-online-panel .admin-safe-panel-head b,
        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head b {
            grid-column: 1 !important;
            grid-row: 3 !important;
            justify-self: start !important;
            margin-top: 3px !important;
        }
}


.admin-category-picker {
    position: relative !important;
    width: 100% !important;
}

.admin-category-picker-button {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 34px !important;
    text-align: left !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #062d1f !important;
}

    .admin-category-picker-button:disabled {
        cursor: not-allowed !important;
        opacity: 0.72 !important;
    }

    .admin-category-picker-button span {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .admin-category-picker-button b {
        flex: 0 0 auto !important;
        font-size: 0.9rem !important;
        line-height: 1 !important;
    }

.admin-category-picker-menu {
    position: absolute !important;
    z-index: 80 !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 5px !important;
    border: 1px solid rgba(239, 200, 91, 0.7) !important;
    border-radius: 10px !important;
    background: #073b29 !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32) !important;
}

    .admin-category-picker-menu[hidden],
    .admin-category-new-input[hidden] {
        display: none !important;
    }

.admin-category-picker-option {
    display: block !important;
    width: 100% !important;
    padding: 8px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #ffffff !important;
    text-align: left !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    cursor: pointer !important;
}

    .admin-category-picker-option:hover,
    .admin-category-picker-option:focus {
        background: rgba(239, 200, 91, 0.95) !important;
        color: #061814 !important;
        outline: none !important;
    }

    .admin-category-picker-option.new-category-option {
        margin-top: 5px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
        color: #efc85b !important;
    }

        .admin-category-picker-option.new-category-option:hover,
        .admin-category-picker-option.new-category-option:focus {
            color: #061814 !important;
        }

.admin-category-new-input {
    margin-top: 6px !important;
    text-transform: uppercase !important;
}


.admin-category-select-picker {
    display: grid !important;
    gap: 6px !important;
    width: 100% !important;
}

.admin-category-select {
    width: 100% !important;
    min-height: 38px !important;
    padding: 0.48rem 2.35rem 0.48rem 0.75rem !important;
    border: 1px solid rgba(239, 200, 91, 0.72) !important;
    border-radius: 999px !important;
    background-color: rgba(7, 59, 41, 0.96) !important;
    color: #fff9df !important;
    font-weight: 900 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.18) !important;
    cursor: pointer !important;
    appearance: auto !important;
}

    .admin-category-select:hover,
    .admin-category-select:focus {
        border-color: rgba(239, 200, 91, 1) !important;
        background-color: rgba(5, 48, 34, 0.98) !important;
        color: #ffffff !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(239, 200, 91, 0.18), 0 10px 22px rgba(0, 0, 0, 0.2) !important;
    }

    .admin-category-select:disabled {
        cursor: not-allowed !important;
        opacity: 0.72 !important;
    }

    .admin-category-select option {
        background: #073b29 !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
    }

.admin-category-new-input {
    width: 100% !important;
    min-height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239, 200, 91, 0.75) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: #062d1f !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

    .admin-category-new-input:focus {
        border-color: rgba(239, 200, 91, 1) !important;
        box-shadow: 0 0 0 3px rgba(239, 200, 91, 0.2) !important;
    }

/* ==========================================================
   2026-07-08 fluid responsive baseline
   One responsive system for phone, tablet and desktop.
   ========================================================== */
:root {
    --pp-fluid-gutter: clamp(0.55rem, 2.4vw, 2rem);
    --pp-fluid-gap: clamp(0.65rem, 1.4vw, 1.25rem);
    --pp-fluid-radius: clamp(1rem, 2vw, 1.6rem);
    --pp-touch-size: clamp(2.65rem, 8vw, 3.15rem);
    --pp-card-max: 32rem;
    --pp-shell-max: 96rem;
    --pp-side-panel: clamp(14.5rem, 22vw, 20rem);
    --pp-stepper-btn: clamp(2.25rem, 8.5vw, 2.65rem);
}

html,
body.plant-body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

    body.plant-body * {
        min-width: 0;
    }

img,
svg,
video,
canvas {
    max-width: 100%;
}

.plant-main,
.shop-stock-display,
.product-area,
.cart-list,
.cart-summary,
.checkout-card,
.checkout-summary,
.payment-card,
.admin-orders-shell,
.photo-admin-shell,
.product-photo-admin-shell,
.customer-orders-shell {
    min-width: 0 !important;
    max-width: 100% !important;
}

.shop-section,
.shop-stock-shell,
.cart-section,
.checkout-section,
.payment-section,
.admin-orders-shell,
.photo-admin-shell,
.product-photo-admin-shell,
.customer-orders-shell,
.customer-order-details-shell {
    box-sizing: border-box !important;
    width: min(var(--pp-shell-max), calc(100vw - (var(--pp-fluid-gutter) * 2))) !important;
    max-width: calc(100vw - (var(--pp-fluid-gutter) * 2)) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-inline: auto !important;
    padding: clamp(0.75rem, 1.8vw, 1.4rem) !important;
    overflow: visible !important;
}

    .shop-stock-shell.shop-section,
    .shop-section.container-fluid {
        padding-inline: clamp(0.65rem, 1.8vw, 1.35rem) !important;
    }

.btn,
button,
input,
select,
textarea,
a.btn,
.shop-cart-link,
.mode-switch-btn,
.admin-tools-summary,
.admin-tool-link {
    max-width: 100% !important;
}

.btn,
button,
a.btn,
.shop-cart-link,
.mode-switch-btn,
.admin-tools-summary,
.admin-tool-link,
.inline-clear-btn,
.copy-value-btn {
    min-height: var(--pp-touch-size) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    text-align: center !important;
    line-height: 1.12 !important;
    white-space: normal !important;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100% !important;
    min-height: var(--pp-touch-size) !important;
    max-width: 100% !important;
}

/* Header/action areas */
.shop-section-heading,
.shop-section-heading.compact-heading,
.shop-storefront-heading,
.online-sales-heading,
.admin-inline-page-heading,
.shop-hero.admin-inline-page-heading {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: var(--pp-fluid-gap) !important;
    align-items: center !important;
    overflow: visible !important;
}

.shop-storefront-brand,
.online-sales-brand,
.stock-brand-left {
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.65rem, 1.6vw, 1.25rem) !important;
    flex-wrap: nowrap !important;
}

    .shop-storefront-brand .shop-page-logo-link,
    .shop-page-logo-link {
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }

    .shop-storefront-brand .shop-page-logo,
    .online-sales-brand .shop-page-logo,
    .stock-brand-left .shop-page-logo,
    .shop-page-logo.logo-left {
        width: clamp(6.8rem, 18vw, 14rem) !important;
        height: auto !important;
        max-height: clamp(3.7rem, 9vw, 5.6rem) !important;
        object-fit: contain !important;
    }

.shop-storefront-title,
.online-sales-heading .shop-storefront-title {
    min-width: 0 !important;
    max-width: 100% !important;
}

    .shop-storefront-title h1,
    .shop-storefront-title h2,
    .shop-section-heading h1,
    .shop-section-heading h2,
    .online-sales-heading h1,
    .online-sales-heading h2 {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

.shop-storefront-right,
.online-sales-header-actions,
.admin-inline-heading-actions {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.65rem !important;
}

    .shop-heading-actions,
    .local-shop-nav,
    .admin-command-header-actions,
    .online-sales-header-actions .admin-command-header-actions,
    .admin-inline-heading-actions .admin-command-header-actions,
    .admin-responsive-actions,
    .error-action-row,
    .polished-payment-actions,
    .customer-order-actions,
    .shop-result-actions,
    .shop-pager,
    .shop-pager-bottom,
    .shop-pager-inline {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: clamp(0.45rem, 1vw, 0.75rem) !important;
        overflow: visible !important;
    }

    .shop-storefront-right .shop-heading-actions,
    .local-shop-nav {
        width: auto !important;
    }

        .shop-heading-actions > *,
        .local-shop-nav > *,
        .admin-command-header-actions > *,
        .online-sales-header-actions .admin-command-header-actions > *,
        .admin-inline-heading-actions .admin-command-header-actions > * {
            flex: 0 1 auto !important;
            min-width: 0 !important;
            max-width: 100% !important;
        }

.shop-admin-tools-menu,
.shared-admin-tools-menu {
    position: relative !important;
    overflow: visible !important;
}

.admin-tools-menu-panel,
.shop-section-heading.compact-heading .admin-tools-menu-panel {
    max-width: min(24rem, calc(100vw - (var(--pp-fluid-gutter) * 2))) !important;
    overflow: visible !important;
}

.shop-search-form,
.shop-stock-display > .shop-toolbar .shop-search-form,
.inline-search-strip,
.product-photo-admin-shell .inline-search-strip,
.admin-orders-shell .inline-search-strip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(14rem, 1fr) repeat(auto-fit, minmax(8.5rem, max-content)) !important;
    gap: clamp(0.5rem, 1vw, 0.75rem) !important;
    align-items: center !important;
}

.inline-search-wrap,
.shop-inline-search,
.inline-search-box {
    min-width: 0 !important;
    width: 100% !important;
}

/* Main shop layout */
.shop-layout.right-category-layout,
.shop-stock-display > .shop-layout.right-category-layout {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--pp-side-panel) !important;
    gap: var(--pp-fluid-gap) !important;
    align-items: start !important;
    overflow: visible !important;
}

.product-grid,
.product-grid.takealot-grid,
body.shop-user-mode .product-grid,
body.shop-user-mode .product-grid.takealot-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(17rem, 24vw, 22rem)), 1fr)) !important;
    gap: var(--pp-fluid-gap) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

.product-card,
body.shop-user-mode .product-card,
body.shop-user-mode .product-card.online-visible,
body.shop-user-mode .product-card.online-hidden {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(0.75rem, 1.5vw, 1.15rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: clamp(0.55rem, 1.1vw, 0.85rem) !important;
    overflow: hidden !important;
}

    body.shop-user-mode .product-card .product-image-wrap,
    body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
    body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap {
        width: min(100%, clamp(12rem, 48vw, 16.5rem)) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 5 !important;
        margin-inline: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
    }

        body.shop-user-mode .product-card .product-image-wrap img,
        body.shop-user-mode .product-card .product-image-wrap img.product-image,
        body.shop-user-mode .product-card .product-image {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
            object-position: center center !important;
            display: block !important;
        }

    body.shop-user-mode .product-card .product-content,
    body.shop-user-mode .product-card .product-card-topline,
    body.shop-user-mode .product-card .product-meta,
    body.shop-user-mode .product-card .product-price-stock-row,
    body.shop-user-mode .product-card .add-cart-form,
    body.shop-user-mode .product-card .cart-card-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.shop-user-mode .product-card .product-content,
    body.shop-user-mode .product-card .product-card-topline,
    body.shop-user-mode .product-card .product-meta,
    body.shop-user-mode .product-card .product-price-stock-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    body.shop-user-mode .product-card .product-content {
        gap: clamp(0.35rem, 0.9vw, 0.65rem) !important;
    }

    body.shop-user-mode .product-card .product-price-stock-row {
        gap: 0.65rem !important;
    }

    body.shop-user-mode .product-card .product-stock-chip {
        width: auto !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    body.shop-user-mode .product-card .add-cart-form {
        display: block !important;
        margin-top: 0.35rem !important;
    }

    body.shop-user-mode .product-card .cart-card-actions,
    body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.7rem !important;
    }

    body.shop-user-mode .product-card .btn-cart,
    body.shop-user-mode .product-card .btn-cart-icon,
    body.shop-user-mode .product-card .btn-go-cart {
        width: min(100%, clamp(9.5rem, 55vw, 14.5rem)) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: var(--pp-touch-size) !important;
        margin-inline: auto !important;
    }

        body.shop-user-mode .product-card .btn-cart-icon .cart-button-text,
        body.shop-user-mode .product-card .btn-cart .cart-button-text {
            position: static !important;
            width: auto !important;
            height: auto !important;
            clip: auto !important;
            overflow: visible !important;
        }

    body.shop-user-mode .product-card.is-in-cart .btn-cart,
    body.shop-user-mode .product-card.is-in-cart .btn-cart-icon {
        display: none !important;
    }

    body.shop-user-mode .shop-card-qty-panel,
    body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel {
        box-sizing: border-box !important;
        width: min(100%, clamp(14rem, 70vw, 17rem)) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        padding: clamp(0.5rem, 1.4vw, 0.7rem) !important;
        margin-inline: auto !important;
        border-radius: clamp(1rem, 4vw, 1.35rem) !important;
        overflow: visible !important;
    }

body.shop-user-mode .shop-card-qty-label {
    width: 100% !important;
    text-align: center !important;
    line-height: 1.1 !important;
}

body.shop-user-mode .shop-card-qty-stepper,
body.shop-user-mode .product-card.is-in-cart .shop-card-qty-stepper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: var(--pp-stepper-btn) minmax(0, 1fr) var(--pp-stepper-btn) !important;
    gap: clamp(0.35rem, 1.4vw, 0.55rem) !important;
    align-items: center !important;
    justify-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

    body.shop-user-mode .shop-card-qty-stepper .shop-card-qty-btn,
    body.shop-user-mode .shop-card-qty-btn {
        width: var(--pp-stepper-btn) !important;
        min-width: 0 !important;
        height: var(--pp-stepper-btn) !important;
        min-height: var(--pp-stepper-btn) !important;
        padding: 0 !important;
        justify-self: center !important;
    }

    body.shop-user-mode .shop-card-qty-stepper .shop-card-qty-input,
    body.shop-user-mode .shop-card-qty-input {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--pp-stepper-btn) !important;
        min-height: var(--pp-stepper-btn) !important;
        padding-inline: 0.35rem !important;
        text-align: center !important;
        justify-self: stretch !important;
    }

/* Cart, checkout, payment, orders and admin grids */
.cart-layout,
.checkout-layout,
.payment-layout,
.customer-order-detail-grid,
.admin-order-detail-grid,
.admin-order-summary-grid,
.admin-summary-grid-5,
.online-sales-dashboard-layout,
.online-sales-filter-status-row {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    gap: var(--pp-fluid-gap) !important;
    align-items: start !important;
}

.cart-layout,
.checkout-layout,
.payment-layout {
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 20rem), 24rem) !important;
}

.cart-row,
.responsive-cart-row,
.customer-order-card,
.responsive-customer-order-card,
.admin-detail-card,
.checkout-card,
.payment-card,
.cart-summary,
.checkout-summary {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.admin-orders-table-wrap,
.admin-order-table-wrap,
.photo-order-form,
.permission-table-wrap,
.customer-lines-wrap,
.table-responsive,
.auto-table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Tablet */
@media (max-width: 70rem) {
    .shop-section-heading,
    .shop-section-heading.compact-heading,
    .shop-storefront-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .shop-hero.admin-inline-page-heading {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    .shop-storefront-right,
    .online-sales-header-actions,
    .admin-inline-heading-actions {
        width: 100% !important;
        align-items: stretch !important;
    }

        .shop-storefront-right .shop-heading-actions,
        .local-shop-nav,
        .admin-command-header-actions,
        .online-sales-header-actions .admin-command-header-actions,
        .admin-inline-heading-actions .admin-command-header-actions {
            width: 100% !important;
            justify-content: flex-start !important;
        }

    .shop-layout.right-category-layout,
    .shop-stock-display > .shop-layout.right-category-layout {
        grid-template-columns: 1fr !important;
    }

    .right-category-panel,
    .category-panel,
    .shop-stock-display .right-category-panel {
        position: relative !important;
        top: auto !important;
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 40dvh !important;
        overflow-y: auto !important;
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)) !important;
        gap: 0.45rem !important;
    }

    .category-panel-head {
        grid-column: 1 / -1 !important;
    }

    .cart-layout,
    .checkout-layout,
    .payment-layout,
    .online-sales-dashboard-layout,
    .online-sales-filter-status-row {
        grid-template-columns: 1fr !important;
    }
}

/* Phone */
@media (max-width: 46rem) {
    :root {
        --pp-fluid-gutter: clamp(0.35rem, 2vw, 0.65rem);
        --pp-fluid-gap: 0.65rem;
        --pp-touch-size: 2.8rem;
        --pp-stepper-btn: clamp(2.25rem, 11vw, 2.55rem);
    }

    .shop-section,
    .shop-stock-shell,
    .cart-section,
    .checkout-section,
    .payment-section,
    .admin-orders-shell,
    .photo-admin-shell,
    .product-photo-admin-shell,
    .customer-orders-shell,
    .customer-order-details-shell {
        width: calc(100vw - (var(--pp-fluid-gutter) * 2)) !important;
        max-width: calc(100vw - (var(--pp-fluid-gutter) * 2)) !important;
        padding: clamp(0.55rem, 2.8vw, 0.9rem) !important;
        border-radius: var(--pp-fluid-radius) !important;
    }

    .shop-storefront-brand,
    .online-sales-brand,
    .stock-brand-left {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
    }

        .shop-storefront-brand .shop-page-logo,
        .online-sales-brand .shop-page-logo,
        .stock-brand-left .shop-page-logo,
        .shop-page-logo.logo-left {
            width: clamp(5.8rem, 31vw, 8.8rem) !important;
            max-height: clamp(3.2rem, 14vw, 4.8rem) !important;
        }

    .shop-storefront-title h2,
    .shop-section-heading h2,
    .online-sales-heading h2 {
        font-size: clamp(1.75rem, 10vw, 3rem) !important;
        line-height: 0.98 !important;
    }

    .shop-storefront-title .shop-page-subtitle,
    .shop-page-subtitle {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    .shop-developer-credit,
    .shop-developer-credit-link {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .shop-developer-credit-logo {
        width: clamp(6.5rem, 38vw, 10rem) !important;
        max-height: 2.7rem !important;
    }

    .shop-heading-actions,
    .local-shop-nav,
    .admin-command-header-actions,
    .online-sales-header-actions .admin-command-header-actions,
    .admin-inline-heading-actions .admin-command-header-actions,
    .shop-result-actions,
    .admin-responsive-actions,
    .polished-payment-actions,
    .error-action-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

        .shop-heading-actions > *,
        .local-shop-nav > *,
        .admin-command-header-actions > *,
        .online-sales-header-actions .admin-command-header-actions > *,
        .admin-inline-heading-actions .admin-command-header-actions > *,
        .shop-result-actions > *,
        .admin-responsive-actions > *,
        .polished-payment-actions > *,
        .error-action-row > * {
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
        }

    .shop-mode-switch,
    .shop-admin-tools-menu,
    .shared-admin-tools-menu,
    .customer-context-pill,
    .shop-context-pill,
    .inline-logout-form,
    .shop-search-form .inline-search-wrap,
    .shop-inline-search,
    .inline-search-box,
    .shop-filter-hint {
        grid-column: 1 / -1 !important;
    }

    .shop-mode-switch {
        display: flex !important;
    }

        .shop-mode-switch .mode-switch-btn {
            flex: 1 1 0 !important;
        }

    .admin-tools-menu-panel,
    .shop-section-heading.compact-heading .admin-tools-menu-panel {
        left: 0 !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .shop-search-form,
    .shop-stock-display > .shop-toolbar .shop-search-form,
    .inline-search-strip,
    .product-photo-admin-shell .inline-search-strip,
    .admin-orders-shell .inline-search-strip {
        grid-template-columns: 1fr !important;
    }

    .product-grid,
    .product-grid.takealot-grid,
    body.shop-user-mode .product-grid,
    body.shop-user-mode .product-grid.takealot-grid {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
    }

    body.shop-user-mode .product-card,
    body.shop-user-mode .product-card.online-visible,
    body.shop-user-mode .product-card.online-hidden {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

        body.shop-user-mode .product-card .product-image-wrap,
        body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
        body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap {
            width: min(100%, clamp(11.5rem, 58vw, 15.5rem)) !important;
        }

    .shop-pager,
    .shop-pager-bottom,
    .shop-pager-inline,
    .customer-order-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        align-items: stretch !important;
    }

        .shop-pager .pager-status,
        .shop-pager-bottom .pager-status-bottom,
        .customer-order-actions .btn:last-child:nth-child(odd) {
            grid-column: 1 / -1 !important;
        }

    .cart-row,
    .responsive-cart-row {
        grid-template-columns: 1fr !important;
    }
}

/* ======================================================================
   Product Photos thumbnail skeletons
   ====================================================================== */

body.plant-body.route-productphotos.route-index .photo-thumb-frame {
    position: relative !important;
    isolation: isolate;
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    min-height: 78px !important;
    overflow: hidden !important;
    border: 1px solid rgba(228, 191, 87, 0.3) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.plant-body.route-productphotos.route-index .photo-thumb-frame::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(
            105deg,
            transparent 25%,
            rgba(255, 255, 255, 0.24) 43%,
            transparent 62%
        ),
        linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(228, 191, 87, 0.14));
    background-size: 220% 100%, 100% 100%;
    animation: product-photo-skeleton-shimmer 1.25s ease-in-out infinite;
    pointer-events: none;
}

body.plant-body.route-productphotos.route-index .photo-thumb-frame .photo-admin-thumb {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 160ms ease;
}

body.plant-body.route-productphotos.route-index .photo-thumb-frame.is-loaded::before {
    display: none;
    animation: none;
}

body.plant-body.route-productphotos.route-index .photo-thumb-frame.is-loaded .photo-admin-thumb {
    opacity: 1;
}

body.plant-body.route-productphotos.route-index .photo-thumb-frame.is-error::before {
    animation: none;
    background: rgba(255, 255, 255, 0.08);
}

body.plant-body.route-productphotos.route-index .photo-thumb-frame.is-error::after {
    content: "Image unavailable";
    position: absolute;
    z-index: 3;
    inset: 0.4rem;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    pointer-events: none;
}

@keyframes product-photo-skeleton-shimmer {
    0% {
        background-position: 140% 0, 0 0;
    }

    100% {
        background-position: -140% 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.plant-body.route-productphotos.route-index .photo-thumb-frame::before {
        animation: none;
    }
}

/* Very narrow phones */
@media (max-width: 24rem) {
    .shop-heading-actions,
    .local-shop-nav,
    .admin-command-header-actions,
    .online-sales-header-actions .admin-command-header-actions,
    .admin-inline-heading-actions .admin-command-header-actions,
    .shop-result-actions,
    .admin-responsive-actions,
    .polished-payment-actions,
    .error-action-row,
    .shop-pager,
    .shop-pager-bottom,
    .shop-pager-inline,
    .customer-order-actions {
        grid-template-columns: 1fr !important;
    }

    .shop-storefront-brand,
    .online-sales-brand,
    .stock-brand-left {
        grid-template-columns: 1fr !important;
        justify-items: start !important;
    }

    body.shop-user-mode .shop-card-qty-stepper,
    body.shop-user-mode .product-card.is-in-cart .shop-card-qty-stepper {
        grid-template-columns: var(--pp-stepper-btn) minmax(0, 1fr) var(--pp-stepper-btn) !important;
        gap: 0.35rem !important;
    }
}

/* ======================================================================
   2026-07-08 catalogue card layout pass
   Purpose: compact product cards with image-first layout on desktop/tablet
   and the same left-aligned compact structure on phones.
   ====================================================================== */

body.shop-user-mode .product-grid,
body.shop-user-mode .product-grid.takealot-grid,
.product-grid.takealot-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(15.5rem, 21vw, 18rem)), 1fr)) !important;
    gap: clamp(0.75rem, 1.35vw, 1.15rem) !important;
    align-items: stretch !important;
}

body.shop-user-mode .product-card,
body.shop-user-mode .product-card.online-visible,
body.shop-user-mode .product-card.online-hidden {
    width: 100% !important;
    height: 100% !important;
    min-height: clamp(32rem, 42vw, 36.75rem) !important;
    padding: clamp(0.65rem, 1.05vw, 0.9rem) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: clamp(0.6rem, 1vw, 0.8rem) !important;
    text-align: left !important;
    overflow: hidden !important;
}

    body.shop-user-mode .product-card .product-image-wrap,
    body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
    body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1.16 !important;
        margin: 0 auto !important;
        border-radius: clamp(0.75rem, 1.5vw, 1rem) !important;
        align-self: start !important;
    }

        body.shop-user-mode .product-card .product-image-wrap img,
        body.shop-user-mode .product-card .product-image-wrap img.product-image,
        body.shop-user-mode .product-card .product-image {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
        }

    body.shop-user-mode .product-card .stock-pill {
        top: clamp(0.3rem, 0.7vw, 0.45rem) !important;
        right: clamp(0.3rem, 0.7vw, 0.45rem) !important;
        font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
        padding: 0.22rem 0.5rem !important;
        line-height: 1 !important;
    }

    body.shop-user-mode .product-card .product-photo-hint {
        right: clamp(0.35rem, 0.8vw, 0.5rem) !important;
        bottom: clamp(0.35rem, 0.8vw, 0.5rem) !important;
        font-size: clamp(0.62rem, 0.72vw, 0.7rem) !important;
        line-height: 1 !important;
        padding: 0.22rem 0.5rem !important;
    }

    body.shop-user-mode .product-card .product-content {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto !important;
        align-content: stretch !important;
        align-items: start !important;
        justify-items: stretch !important;
        gap: clamp(0.34rem, 0.7vw, 0.48rem) !important;
        text-align: left !important;
    }

    body.shop-user-mode .product-card .product-card-topline {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.65rem !important;
        text-align: left !important;
        text-transform: uppercase !important;
        font-size: clamp(0.63rem, 0.72vw, 0.72rem) !important;
        line-height: 1.1 !important;
        letter-spacing: 0.01em !important;
    }

        body.shop-user-mode .product-card .product-card-topline span,
        body.shop-user-mode .product-card .product-card-topline strong {
            min-width: 0 !important;
            line-height: inherit !important;
        }

        body.shop-user-mode .product-card .product-card-topline strong {
            text-align: right !important;
            overflow-wrap: anywhere !important;
        }

    body.shop-user-mode .product-card .product-meta {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        font-size: clamp(0.72rem, 0.86vw, 0.82rem) !important;
        line-height: 1.22 !important;
        margin: 0 !important;
        overflow-wrap: anywhere !important;
    }

        body.shop-user-mode .product-card .product-meta strong {
            display: inline !important;
            margin-left: 0.15rem !important;
            line-height: inherit !important;
            overflow-wrap: anywhere !important;
        }

    body.shop-user-mode .product-card h3 {
        width: 100% !important;
        margin: 0.05rem 0 0.08rem !important;
        text-align: left !important;
        font-size: clamp(1rem, 1.22vw, 1.18rem) !important;
        line-height: 1.03 !important;
        min-height: 2.08em !important;
        overflow-wrap: anywhere !important;
    }

    body.shop-user-mode .product-card .product-price-stock-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        justify-content: stretch !important;
        gap: clamp(0.45rem, 0.9vw, 0.75rem) !important;
        margin-top: auto !important;
        text-align: left !important;
    }

    body.shop-user-mode .product-card .product-price {
        width: auto !important;
        min-width: 0 !important;
        text-align: left !important;
        font-size: clamp(1.2rem, 1.55vw, 1.5rem) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    body.shop-user-mode .product-card .product-stock-chip {
        width: auto !important;
        min-width: 0 !important;
        max-width: 9.5rem !important;
        margin: 0 !important;
        display: grid !important;
        justify-items: end !important;
        text-align: right !important;
        line-height: 1.05 !important;
    }

        body.shop-user-mode .product-card .product-stock-chip span,
        body.shop-user-mode .product-card .product-stock-chip strong {
            line-height: inherit !important;
        }

    body.shop-user-mode .product-card .add-cart-form {
        width: 100% !important;
        margin-top: clamp(0.35rem, 0.8vw, 0.55rem) !important;
        align-self: end !important;
    }

    body.shop-user-mode .product-card .cart-card-actions,
    body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: clamp(0.45rem, 0.9vw, 0.65rem) !important;
    }

    body.shop-user-mode .product-card .btn-cart,
    body.shop-user-mode .product-card .btn-cart-icon {
        width: clamp(2.55rem, 3.2vw, 2.9rem) !important;
        height: clamp(2.55rem, 3.2vw, 2.9rem) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

        body.shop-user-mode .product-card .btn-cart-icon .cart-button-text,
        body.shop-user-mode .product-card .btn-cart .cart-button-text {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

    body.shop-user-mode .product-card .cart-plus-icon,
    body.shop-user-mode .product-card .cart-plus-img {
        width: clamp(1.2rem, 1.55vw, 1.45rem) !important;
        height: clamp(1.2rem, 1.55vw, 1.45rem) !important;
    }

    body.shop-user-mode .product-card .btn-go-cart {
        width: auto !important;
        min-width: clamp(8.5rem, 45%, 11.5rem) !important;
        max-width: 100% !important;
        min-height: clamp(2.45rem, 3vw, 2.8rem) !important;
        padding-inline: clamp(0.9rem, 2vw, 1.25rem) !important;
        margin: 0 !important;
    }

    body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel,
    body.shop-user-mode .shop-card-qty-panel {
        width: min(100%, clamp(12.25rem, 70%, 15rem)) !important;
        margin: 0 !important;
        padding: clamp(0.42rem, 0.9vw, 0.58rem) !important;
        gap: 0.32rem !important;
        align-items: stretch !important;
    }

body.shop-user-mode .shop-card-qty-label {
    text-align: center !important;
    font-size: clamp(0.66rem, 0.78vw, 0.74rem) !important;
    line-height: 1 !important;
}

body.shop-user-mode .shop-card-qty-stepper,
body.shop-user-mode .product-card.is-in-cart .shop-card-qty-stepper {
    grid-template-columns: clamp(2.15rem, 3vw, 2.5rem) minmax(3.5rem, 1fr) clamp(2.15rem, 3vw, 2.5rem) !important;
    gap: clamp(0.35rem, 0.8vw, 0.5rem) !important;
}

    body.shop-user-mode .shop-card-qty-stepper .shop-card-qty-btn,
    body.shop-user-mode .shop-card-qty-btn,
    body.shop-user-mode .shop-card-qty-stepper .shop-card-qty-input,
    body.shop-user-mode .shop-card-qty-input {
        height: clamp(2.15rem, 3vw, 2.5rem) !important;
        min-height: clamp(2.15rem, 3vw, 2.5rem) !important;
    }

    body.shop-user-mode .shop-card-qty-stepper .shop-card-qty-btn,
    body.shop-user-mode .shop-card-qty-btn {
        width: clamp(2.15rem, 3vw, 2.5rem) !important;
    }

    body.shop-user-mode .shop-card-qty-stepper .shop-card-qty-input,
    body.shop-user-mode .shop-card-qty-input {
        min-width: 0 !important;
        font-size: clamp(0.95rem, 1.2vw, 1.05rem) !important;
    }

@media (max-width: 70rem) {
    body.shop-user-mode .product-grid,
    body.shop-user-mode .product-grid.takealot-grid,
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(14.5rem, 31vw, 18rem)), 1fr)) !important;
    }
}

@media (max-width: 46rem) {
    body.shop-user-mode .product-grid,
    body.shop-user-mode .product-grid.takealot-grid,
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(15rem, 92vw, 20rem)), 1fr)) !important;
        gap: clamp(0.65rem, 3vw, 0.95rem) !important;
    }

    body.shop-user-mode .product-card,
    body.shop-user-mode .product-card.online-visible,
    body.shop-user-mode .product-card.online-hidden {
        min-height: 0 !important;
        padding: clamp(0.7rem, 3vw, 0.95rem) !important;
        gap: clamp(0.55rem, 2.4vw, 0.8rem) !important;
    }

        body.shop-user-mode .product-card .product-image-wrap,
        body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
        body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap {
            width: min(100%, clamp(14rem, 74vw, 17.5rem)) !important;
            aspect-ratio: 1 / 1.12 !important;
            justify-self: center !important;
        }

        body.shop-user-mode .product-card .product-content {
            gap: clamp(0.34rem, 1.7vw, 0.5rem) !important;
        }

        body.shop-user-mode .product-card h3 {
            min-height: 0 !important;
            font-size: clamp(1.02rem, 4.9vw, 1.25rem) !important;
            line-height: 1.05 !important;
        }

        body.shop-user-mode .product-card .product-card-topline,
        body.shop-user-mode .product-card .product-meta {
            font-size: clamp(0.7rem, 3.2vw, 0.82rem) !important;
        }

        body.shop-user-mode .product-card .product-price-stock-row {
            grid-template-columns: minmax(0, 1fr) auto !important;
        }

        body.shop-user-mode .product-card .product-price {
            font-size: clamp(1.18rem, 5.8vw, 1.5rem) !important;
        }

        body.shop-user-mode .product-card .cart-card-actions,
        body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
            align-items: center !important;
        }

        body.shop-user-mode .product-card .btn-cart,
        body.shop-user-mode .product-card .btn-cart-icon {
            width: clamp(2.55rem, 12vw, 2.95rem) !important;
            height: clamp(2.55rem, 12vw, 2.95rem) !important;
        }

        body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel,
        body.shop-user-mode .shop-card-qty-panel {
            width: min(100%, 15.25rem) !important;
        }
}

@media (max-width: 24rem) {
    body.shop-user-mode .product-card .product-price-stock-row {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }

    body.shop-user-mode .product-card .product-stock-chip {
        justify-items: start !important;
        text-align: left !important;
    }

    body.shop-user-mode .product-card .cart-card-actions,
    body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.shop-user-mode .product-card .btn-cart,
    body.shop-user-mode .product-card .btn-cart-icon {
        align-self: flex-start !important;
    }

    body.shop-user-mode .product-card .btn-go-cart,
    body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel,
    body.shop-user-mode .shop-card-qty-panel {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Keep product details naturally compact while still pinning price/actions near the card bottom. */
body.shop-user-mode .product-card .product-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

body.shop-user-mode .product-card .product-price-stock-row {
    margin-top: auto !important;
}

/* ======================================================================
   2026-07-08 fluid catalogue card override
   Purpose: keep shop cards in a top-image catalogue layout, allow the grid
   to reflow naturally when browser zoom/viewport changes, and keep phones
   stacked with the image above the details.
   ====================================================================== */

body.shop-user-mode .product-grid,
body.shop-user-mode .product-grid.takealot-grid,
.product-grid.takealot-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(15rem, 22vw, 18rem)), 1fr)) !important;
    gap: clamp(0.75rem, 1.35vw, 1.15rem) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

body.shop-user-mode .product-card,
body.shop-user-mode .product-card.online-visible,
body.shop-user-mode .product-card.online-hidden {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: clamp(31rem, 41vw, 36rem) !important;
    padding: clamp(0.65rem, 1.05vw, 0.9rem) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: clamp(0.55rem, 1vw, 0.8rem) !important;
    text-align: left !important;
    overflow: hidden !important;
}

    body.shop-user-mode .product-card .product-image-wrap,
    body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
    body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1.12 !important;
        margin: 0 auto !important;
        align-self: start !important;
        justify-self: stretch !important;
        border-radius: clamp(0.75rem, 1.5vw, 1rem) !important;
        overflow: hidden !important;
    }

        body.shop-user-mode .product-card .product-image-wrap img,
        body.shop-user-mode .product-card .product-image-wrap img.product-image,
        body.shop-user-mode .product-card .product-image {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: cover !important;
            object-position: center center !important;
            display: block !important;
        }

    body.shop-user-mode .product-card .product-content {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: clamp(0.32rem, 0.68vw, 0.48rem) !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body.shop-user-mode .product-card .product-card-topline {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 0.65rem !important;
        text-align: left !important;
        line-height: 1.1 !important;
    }

        body.shop-user-mode .product-card .product-card-topline strong {
            text-align: right !important;
        }

    body.shop-user-mode .product-card .product-meta {
        width: 100% !important;
        display: block !important;
        text-align: left !important;
        line-height: 1.22 !important;
        margin: 0 !important;
    }

        body.shop-user-mode .product-card .product-meta strong {
            display: inline !important;
            margin-left: 0.15rem !important;
        }

    body.shop-user-mode .product-card h3 {
        width: 100% !important;
        margin: 0.04rem 0 0.08rem !important;
        text-align: left !important;
        line-height: 1.04 !important;
        min-height: 0 !important;
    }

    body.shop-user-mode .product-card .product-price-stock-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        justify-content: stretch !important;
        gap: clamp(0.45rem, 0.9vw, 0.75rem) !important;
        margin-top: auto !important;
        text-align: left !important;
    }

    body.shop-user-mode .product-card .product-price {
        text-align: left !important;
        white-space: nowrap !important;
    }

    body.shop-user-mode .product-card .product-stock-chip {
        width: auto !important;
        max-width: 9.5rem !important;
        margin: 0 !important;
        display: grid !important;
        justify-items: end !important;
        text-align: right !important;
    }

    body.shop-user-mode .product-card .add-cart-form {
        width: 100% !important;
        margin-top: clamp(0.35rem, 0.8vw, 0.55rem) !important;
    }

    body.shop-user-mode .product-card .cart-card-actions,
    body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: clamp(0.45rem, 0.9vw, 0.65rem) !important;
    }

    body.shop-user-mode .product-card .btn-cart,
    body.shop-user-mode .product-card .btn-cart-icon {
        flex: 0 0 auto !important;
        width: clamp(2.55rem, 3.2vw, 2.9rem) !important;
        height: clamp(2.55rem, 3.2vw, 2.9rem) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 999px !important;
    }

    body.shop-user-mode .product-card .btn-go-cart {
        flex: 1 1 clamp(8.5rem, 45%, 11.5rem) !important;
        width: auto !important;
        min-width: clamp(8.5rem, 45%, 11.5rem) !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel,
    body.shop-user-mode .shop-card-qty-panel {
        flex: 1 1 clamp(12rem, 70%, 15rem) !important;
        width: min(100%, clamp(12rem, 70%, 15rem)) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

@media (max-width: 70rem) {
    body.shop-user-mode .product-grid,
    body.shop-user-mode .product-grid.takealot-grid,
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(14.5rem, 31vw, 18rem)), 1fr)) !important;
    }
}

@media (max-width: 46rem) {
    body.shop-user-mode .product-grid,
    body.shop-user-mode .product-grid.takealot-grid,
    .product-grid.takealot-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(0.65rem, 3vw, 0.95rem) !important;
    }

    body.shop-user-mode .product-card,
    body.shop-user-mode .product-card.online-visible,
    body.shop-user-mode .product-card.online-hidden {
        max-width: min(100%, 23rem) !important;
        min-height: 0 !important;
        margin-inline: auto !important;
        padding: clamp(0.7rem, 3vw, 0.95rem) !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
    }

        body.shop-user-mode .product-card .product-image-wrap,
        body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
        body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap {
            width: min(100%, clamp(13.75rem, 76vw, 17.5rem)) !important;
            aspect-ratio: 1 / 1.12 !important;
            justify-self: center !important;
        }

        body.shop-user-mode .product-card .product-price-stock-row {
            grid-template-columns: minmax(0, 1fr) auto !important;
        }

        body.shop-user-mode .product-card .cart-card-actions,
        body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
            justify-content: flex-start !important;
        }
}

@media (max-width: 24rem) {
    body.shop-user-mode .product-card .product-price-stock-row {
        grid-template-columns: 1fr !important;
    }

    body.shop-user-mode .product-card .product-stock-chip {
        justify-items: start !important;
        text-align: left !important;
    }

    body.shop-user-mode .product-card .cart-card-actions,
    body.shop-user-mode .product-card.is-in-cart .cart-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.shop-user-mode .product-card .btn-cart,
    body.shop-user-mode .product-card .btn-cart-icon {
        align-self: flex-start !important;
    }

    body.shop-user-mode .product-card .btn-go-cart,
    body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel,
    body.shop-user-mode .shop-card-qty-panel {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ======================================================================
   2026-07-08 responsive hardening pass
   Goal: one fluid layout system for phone, tablet, desktop and browser zoom.
   This block is intentionally last so it neutralises older fixed desktop rules.
   ====================================================================== */
:root {
    --pp-rh-gutter: clamp(0.55rem, 2.2vw, 1.75rem);
    --pp-rh-gap: clamp(0.65rem, 1.45vw, 1.15rem);
    --pp-rh-radius: clamp(1rem, 2vw, 1.5rem);
    --pp-rh-touch: clamp(2.55rem, 7vw, 2.95rem);
    --pp-rh-header-space: clamp(6.9rem, 9.5vw, 9.4rem);
    --pp-rh-card-min: clamp(15rem, 21vw, 18.25rem);
}

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

body.plant-body *,
body.plant-body *::before,
body.plant-body *::after {
    box-sizing: border-box;
}

body.plant-body img,
body.plant-body svg,
body.plant-body video,
body.plant-body canvas {
    max-width: 100% !important;
}

body.plant-body :where(h1, h2, h3, h4, h5, h6, p, span, strong, small, label, td, th, a, button, input, select, textarea) {
    overflow-wrap: anywhere;
}

.plant-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Fixed site header safe area. Keep content below the nav on all screens. */
.shop-section,
.shop-stock-shell,
.cart-section,
.checkout-section,
.payment-section,
.admin-orders-shell,
.product-photo-admin-shell,
.photo-admin-shell,
.user-admin-shell,
.admin-settings-shell,
.delivery-settings-section,
.customer-orders-shell,
.customer-order-details-shell,
.auth-shell,
.error-page-shell {
    width: min(96rem, calc(100vw - (var(--pp-rh-gutter) * 2))) !important;
    max-width: calc(100vw - (var(--pp-rh-gutter) * 2)) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-inline: auto !important;
    margin-bottom: clamp(1.4rem, 3vw, 3.8rem) !important;
    padding: var(--pp-rh-header-space) var(--pp-rh-gutter) clamp(1rem, 2.5vw, 2.4rem) !important;
    overflow: visible !important;
}

/* The shop page already has an internal heading; keep it compact after the header clearance. */
.route-shop.route-index .shop-stock-shell {
    padding-top: clamp(6.5rem, 8.5vw, 8.4rem) !important;
}

/* Header/menu must not cause sideways scrolling at zoom levels. */
.plant-nav,
.plant-nav-inner,
.plant-menu,
.plant-account-nav,
.plant-mobile-menu {
    max-width: 100% !important;
    min-width: 0 !important;
}

.plant-nav-inner {
    width: min(100%, 104rem) !important;
}

.plant-menu,
.plant-account-nav,
.shop-heading-actions,
.local-shop-nav,
.admin-inline-heading-actions,
.online-sales-header-actions,
.admin-command-header-actions,
.responsive-action-row,
.compact-actions,
.payment-actions,
.responsive-payment-actions,
.customer-order-actions,
.shop-result-actions,
.shop-pager,
.shop-pager-inline,
.shop-pager-bottom,
.photo-picker-tools,
.photo-picker-foot,
.delivery-distance-actions,
.checkout-address-confirm-actions,
.bulk-photo-picker-summary,
.bulk-online-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: clamp(0.45rem, 1vw, 0.75rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.shop-heading-actions,
.local-shop-nav,
.admin-inline-heading-actions,
.online-sales-header-actions,
.admin-command-header-actions,
.responsive-action-row,
.compact-actions,
.payment-actions,
.responsive-payment-actions,
.customer-order-actions,
.shop-result-actions,
.shop-pager,
.shop-pager-inline,
.shop-pager-bottom {
    justify-content: flex-start !important;
}

:where(.btn, button, a.btn, .shop-cart-link, .mode-switch-btn, .admin-tool-link, .admin-tools-summary, .pager-link, .copy-value-btn, .inline-clear-btn) {
    min-height: var(--pp-rh-touch) !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.12 !important;
    text-align: center !important;
    touch-action: manipulation;
}

:where(.form-control, .form-select, input, select, textarea) {
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Shared form grids. */
.checkout-grid,
.responsive-form-grid,
.admin-form-grid,
.admin-two-column-grid,
.email-settings-grid,
.delivery-settings-grid,
.system-settings-grid,
.photo-admin-grid,
.auth-grid,
.error-metadata-grid,
.admin-summary-grid,
.admin-summary-grid-5,
.admin-order-summary-grid,
.admin-order-detail-grid,
.customer-order-detail-grid,
.online-sales-dashboard-layout,
.online-sales-filter-status-row,
.delivery-pricing-example-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important;
    gap: var(--pp-rh-gap) !important;
    align-items: start !important;
}

.admin-form-grid-wide,
.checkout-wide-field,
.delivery-pricing-example-card,
.payment-safe-note.large,
.settings-validation-summary {
    grid-column: 1 / -1 !important;
}

.checkout-card,
.payment-card,
.cart-summary,
.checkout-summary,
.admin-panel-card,
.admin-sub-card,
.admin-detail-card,
.admin-summary-card,
.customer-order-card,
.responsive-customer-order-card,
.empty-cart-card,
.shop-empty-card,
.auth-card,
.delivery-settings-card,
.signed-in-checkout-card,
.delivery-distance-check-card,
.photo-picker-card,
.admin-safe-panel,
.online-filter-card,
.online-total-card {
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: var(--pp-rh-radius) !important;
    overflow-wrap: anywhere !important;
}

.cart-layout,
.checkout-layout,
.payment-layout,
.responsive-cart-layout,
.responsive-checkout-layout,
.responsive-payment-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(min(100%, 19rem), 24rem) !important;
    gap: var(--pp-rh-gap) !important;
    align-items: start !important;
}

/* Product catalogue: photo always on top, cards reflow naturally with zoom/viewport. */
.product-grid,
.product-grid.takealot-grid,
body.shop-user-mode .product-grid,
body.shop-user-mode .product-grid.takealot-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pp-rh-card-min)), 1fr)) !important;
    gap: var(--pp-rh-gap) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
}

.product-card,
body.shop-user-mode .product-card,
body.shop-user-mode .product-card.online-visible,
body.shop-user-mode .product-card.online-hidden {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: clamp(30rem, 38vw, 35rem) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    gap: clamp(0.55rem, 1vw, 0.78rem) !important;
    padding: clamp(0.65rem, 1.05vw, 0.9rem) !important;
    text-align: left !important;
    overflow: hidden !important;
}

body.shop-user-mode .product-card .product-image-wrap,
body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap,
.product-card .product-image-wrap,
.product-card .image-preview-trigger.product-image-wrap {
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1.08 !important;
    margin: 0 !important;
    justify-self: stretch !important;
    align-self: start !important;
    overflow: hidden !important;
}

body.shop-user-mode .product-card .product-image,
body.shop-user-mode .product-card .product-image-wrap img,
.product-card .product-image,
.product-card .product-image-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

body.shop-user-mode .product-card .product-content,
.product-card .product-content {
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: clamp(0.3rem, 0.65vw, 0.48rem) !important;
    text-align: left !important;
}

body.shop-user-mode .product-card .product-card-topline,
.product-card .product-card-topline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.55rem !important;
    font-size: clamp(0.62rem, 0.75vw, 0.72rem) !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
}

body.shop-user-mode .product-card .product-card-topline strong,
.product-card .product-card-topline strong {
    text-align: right !important;
}

body.shop-user-mode .product-card h3,
.product-card h3 {
    margin: 0.05rem 0 !important;
    min-height: 0 !important;
    font-size: clamp(1rem, 1.15vw, 1.18rem) !important;
    line-height: 1.04 !important;
    text-align: left !important;
}

body.shop-user-mode .product-card .product-meta,
.product-card .product-meta {
    margin: 0 !important;
    display: block !important;
    font-size: clamp(0.72rem, 0.86vw, 0.82rem) !important;
    line-height: 1.23 !important;
    text-align: left !important;
}

body.shop-user-mode .product-card .product-meta strong,
.product-card .product-meta strong {
    display: inline !important;
    margin-left: 0.15rem !important;
}

body.shop-user-mode .product-card .product-price-stock-row,
.product-card .product-price-stock-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0.65rem !important;
    align-items: end !important;
    margin-top: auto !important;
}

body.shop-user-mode .product-card .product-price,
.product-card .product-price {
    font-size: clamp(1.15rem, 1.5vw, 1.48rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: left !important;
}

body.shop-user-mode .product-card .product-stock-chip,
.product-card .product-stock-chip {
    justify-items: end !important;
    text-align: right !important;
    max-width: min(9.5rem, 42vw) !important;
}

body.shop-user-mode .product-card .cart-card-actions,
body.shop-user-mode .product-card.is-in-cart .cart-card-actions,
.product-card .cart-card-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.55rem !important;
}

body.shop-user-mode .product-card .btn-cart,
body.shop-user-mode .product-card .btn-cart-icon,
.product-card .btn-cart,
.product-card .btn-cart-icon {
    flex: 0 0 auto !important;
    width: clamp(2.55rem, 3.1vw, 2.9rem) !important;
    height: clamp(2.55rem, 3.1vw, 2.9rem) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    border-radius: 999px !important;
}

body.shop-user-mode .product-card .btn-go-cart,
.product-card .btn-go-cart {
    flex: 1 1 8.5rem !important;
    width: auto !important;
    min-width: min(100%, 8.5rem) !important;
    max-width: 100% !important;
}

body.shop-user-mode .product-card.is-in-cart .shop-card-qty-panel,
body.shop-user-mode .shop-card-qty-panel,
.product-card .shop-card-qty-panel {
    flex: 1 1 12rem !important;
    width: min(100%, 14.5rem) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.shop-user-mode .shop-card-qty-stepper,
.product-card .shop-card-qty-stepper {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: clamp(2.25rem, 8vw, 2.55rem) minmax(0, 1fr) clamp(2.25rem, 8vw, 2.55rem) !important;
    gap: 0.4rem !important;
}

body.shop-user-mode .shop-card-qty-input,
.product-card .shop-card-qty-input {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

/* Cart rows should be card-like, not a cramped table. */
.cart-row,
.responsive-cart-row {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: clamp(4.5rem, 11vw, 6.5rem) minmax(0, 1fr) auto !important;
    gap: clamp(0.65rem, 1.5vw, 1rem) !important;
    align-items: center !important;
}

.cart-row-image {
    width: clamp(4.5rem, 11vw, 6.5rem) !important;
    height: clamp(4.5rem, 11vw, 6.5rem) !important;
    object-fit: cover !important;
    border-radius: 0.9rem !important;
}

.cart-qty-form,
.responsive-qty-form {
    min-width: min(100%, 12rem) !important;
}

.cart-qty-stepper {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 2.65rem minmax(0, 1fr) 2.65rem !important;
    gap: 0.45rem !important;
}

.cart-qty-stepper .qty-input {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

/* Tables: admin stays scrollable; customer/simple tables become cards on phones. */
.admin-orders-table-wrap,
.admin-order-table-wrap,
.photo-order-form,
.photo-picker-table-wrap,
.auto-table-responsive,
.table-responsive,
.responsive-table-scroll,
.admin-order-detail-scroll {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.admin-orders-table,
.admin-order-table,
.photo-picker-table,
.shop-table {
    max-width: none !important;
}

/* Modals and pickers. */
.photo-picker-modal,
.photo-picker-backdrop {
    width: 100vw !important;
    max-width: 100vw !important;
}

.photo-picker-card {
    width: min(60rem, calc(100vw - 1rem)) !important;
    max-height: min(90dvh, 54rem) !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.photo-picker-table-wrap {
    min-height: 0 !important;
    max-height: 100% !important;
}

.delivery-distance-map-shell,
.delivery-distance-map {
    width: 100% !important;
    max-width: 100% !important;
    min-height: clamp(14rem, 38vh, 24rem) !important;
    max-height: 48dvh !important;
}

/* Tablet and below. */
@media (max-width: 70rem) {
    :root {
        --pp-rh-header-space: clamp(5.8rem, 14vw, 7.4rem);
        --pp-rh-card-min: clamp(14.5rem, 42vw, 18rem);
    }

    .plant-nav {
        padding: clamp(0.5rem, 1.8vw, 0.85rem) var(--pp-rh-gutter) !important;
        background: rgba(1, 16, 13, 0.92) !important;
    }

    .plant-nav-inner {
        display: grid !important;
        grid-template-columns: minmax(0, auto) auto !important;
        gap: 0.65rem !important;
    }

    .plant-menu,
    .plant-account-nav {
        display: none !important;
    }

    .mobile-menu-button {
        display: inline-flex !important;
        justify-self: end !important;
    }

    .shop-section-heading,
    .shop-section-heading.compact-heading,
    .shop-storefront-heading,
    .online-sales-heading,
    .admin-inline-page-heading,
    .checkout-heading-row,
    .responsive-page-heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        gap: var(--pp-rh-gap) !important;
    }

    .shop-storefront-right,
    .online-sales-header-actions,
    .admin-inline-heading-actions {
        width: 100% !important;
        align-items: stretch !important;
    }

    .shop-layout.right-category-layout,
    .shop-layout,
    .right-category-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: var(--pp-rh-gap) !important;
    }

    .right-category-panel,
    .category-panel {
        order: -1 !important;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(42dvh, 22rem) !important;
        overflow-y: auto !important;
    }

    .cart-layout,
    .checkout-layout,
    .payment-layout,
    .responsive-cart-layout,
    .responsive-checkout-layout,
    .responsive-payment-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Phones. */
@media (max-width: 46rem) {
    :root {
        --pp-rh-gutter: clamp(0.45rem, 2.6vw, 0.75rem);
        --pp-rh-gap: 0.65rem;
        --pp-rh-header-space: clamp(5.25rem, 18vw, 6.35rem);
        --pp-rh-card-min: 100%;
    }

    .shop-section,
    .shop-stock-shell,
    .cart-section,
    .checkout-section,
    .payment-section,
    .admin-orders-shell,
    .product-photo-admin-shell,
    .photo-admin-shell,
    .user-admin-shell,
    .admin-settings-shell,
    .delivery-settings-section,
    .customer-orders-shell,
    .customer-order-details-shell,
    .auth-shell,
    .error-page-shell {
        width: calc(100vw - (var(--pp-rh-gutter) * 2)) !important;
        max-width: calc(100vw - (var(--pp-rh-gutter) * 2)) !important;
        padding: var(--pp-rh-header-space) var(--pp-rh-gutter) 1rem !important;
        border-radius: clamp(0.9rem, 4vw, 1.2rem) !important;
        margin-bottom: 1rem !important;
    }

    .route-shop.route-index .shop-stock-shell {
        padding-top: var(--pp-rh-header-space) !important;
    }

    .plant-logo-img {
        width: min(58vw, 13rem) !important;
        max-width: 58vw !important;
        max-height: 4.5rem !important;
    }

    .plant-mobile-menu:not([hidden]) {
        width: calc(100vw - (var(--pp-rh-gutter) * 2)) !important;
        max-height: calc(100dvh - 5.4rem) !important;
        overflow-y: auto !important;
    }

    .shop-storefront-brand,
    .online-sales-brand,
    .stock-brand-left {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.65rem !important;
    }

    .shop-storefront-title h1,
    .shop-storefront-title h2,
    .shop-section-heading h1,
    .shop-section-heading h2,
    .online-sales-heading h1,
    .online-sales-heading h2 {
        font-size: clamp(1.7rem, 9vw, 2.65rem) !important;
        line-height: 1 !important;
    }

    .shop-heading-actions,
    .local-shop-nav,
    .admin-inline-heading-actions,
    .online-sales-header-actions,
    .admin-command-header-actions,
    .responsive-action-row,
    .compact-actions,
    .payment-actions,
    .responsive-payment-actions,
    .customer-order-actions,
    .shop-result-actions,
    .photo-picker-tools,
    .photo-picker-foot,
    .delivery-distance-actions,
    .checkout-address-confirm-actions,
    .bulk-photo-picker-summary,
    .bulk-online-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
    }

    .shop-mode-switch {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }

    .shop-admin-tools-menu,
    .shared-admin-tools-menu,
    .inline-logout-form,
    .shop-context-pill,
    .customer-context-pill,
    .shop-developer-credit,
    .shop-developer-credit-link {
        width: 100% !important;
    }

    .admin-tools-menu-panel,
    .shop-section-heading.compact-heading .admin-tools-menu-panel {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .shop-search-form,
    .shop-stock-display > .shop-toolbar .shop-search-form,
    .inline-search-strip,
    .admin-orders-shell .inline-search-strip,
    .product-photo-admin-shell .inline-search-strip,
    .admin-filter-form,
    .orders-filter-form {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 0.6rem !important;
    }

    .product-grid,
    .product-grid.takealot-grid,
    body.shop-user-mode .product-grid,
    body.shop-user-mode .product-grid.takealot-grid {
        grid-template-columns: 1fr !important;
    }

    .product-card,
    body.shop-user-mode .product-card,
    body.shop-user-mode .product-card.online-visible,
    body.shop-user-mode .product-card.online-hidden {
        max-width: min(100%, 23.5rem) !important;
        min-height: 0 !important;
        height: auto !important;
        margin-inline: auto !important;
    }

    body.shop-user-mode .product-card .product-image-wrap,
    body.shop-user-mode .product-card .product-image-wrap.no-photo-static,
    body.shop-user-mode .product-card .image-preview-trigger.product-image-wrap,
    .product-card .product-image-wrap,
    .product-card .image-preview-trigger.product-image-wrap {
        width: min(100%, 17.5rem) !important;
        justify-self: center !important;
        aspect-ratio: 1 / 1.1 !important;
    }

    body.shop-user-mode .product-card .product-price-stock-row,
    .product-card .product-price-stock-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .cart-row,
    .responsive-cart-row {
        grid-template-columns: 4.75rem minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .cart-row-image {
        width: 4.75rem !important;
        height: 4.75rem !important;
    }

    .cart-qty-form,
    .responsive-qty-form,
    .cart-row-total,
    .cart-remove-btn {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .photo-picker-card {
        width: calc(100vw - 0.75rem) !important;
        max-height: calc(100dvh - 0.75rem) !important;
        border-radius: 1rem !important;
    }

    .photo-picker-head,
    .photo-picker-tools,
    .photo-picker-foot {
        padding-inline: 0.65rem !important;
    }

    .delivery-distance-map-shell,
    .delivery-distance-map {
        min-height: clamp(12rem, 36vh, 17rem) !important;
        max-height: 40dvh !important;
    }

    .mobile-card-table,
    .mobile-card-table.admin-orders-table,
    .mobile-card-table.admin-order-table,
    .customer-lines-table.mobile-card-table,
    .shop-table.mobile-card-table {
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 0.75rem !important;
    }

    .mobile-card-table thead {
        display: none !important;
    }

    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block !important;
        width: 100% !important;
    }

    .mobile-card-table tr {
        padding: 0.7rem !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-radius: 0.95rem !important;
        background: rgba(255,255,255,0.055) !important;
    }

    .mobile-card-table td {
        min-height: 2rem !important;
        padding: 0.38rem 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    .mobile-card-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.15rem;
        color: rgba(255,255,255,0.62);
        font-size: 0.7rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .mobile-card-table td:not([data-label])::before,
    .mobile-card-table td[data-label=""]::before {
        display: none;
    }

    .mobile-scroll-table {
        min-width: min(48rem, 210vw) !important;
    }
}

@media (max-width: 24rem) {
    body.shop-user-mode .product-card .product-price-stock-row,
    .product-card .product-price-stock-row {
        grid-template-columns: 1fr !important;
    }

    body.shop-user-mode .product-card .product-stock-chip,
    .product-card .product-stock-chip {
        justify-items: start !important;
        text-align: left !important;
    }

    body.shop-user-mode .product-card .cart-card-actions,
    body.shop-user-mode .product-card.is-in-cart .cart-card-actions,
    .product-card .cart-card-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    body.shop-user-mode .product-card .btn-cart,
    body.shop-user-mode .product-card .btn-cart-icon,
    .product-card .btn-cart,
    .product-card .btn-cart-icon,
    body.shop-user-mode .product-card .btn-go-cart,
    .product-card .btn-go-cart,
    body.shop-user-mode .shop-card-qty-panel,
    .product-card .shop-card-qty-panel {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ======================================================================
   2026-07-08 header density + non-wrapping product code fix
   Fixes: excessive blank space above page heading, clipped header logos,
   and barcode/product code wrapping between digits on narrow catalogue cards.
   ====================================================================== */
body.plant-body .plant-nav,
body.plant-body .plant-nav-inner,
body.plant-body .plant-logo,
body.plant-body .shop-storefront-heading,
body.plant-body .shop-storefront-brand,
body.plant-body .shop-page-logo-link {
    overflow: visible !important;
}

body.plant-body .plant-nav {
    padding-block: clamp(0.45rem, 0.9vw, 0.85rem) !important;
}

body.plant-body .plant-nav-inner {
    min-height: clamp(3.35rem, 5vw, 4.75rem) !important;
    align-items: center !important;
}

body.plant-body .plant-logo,
body.plant-body .shop-page-logo-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    line-height: 0 !important;
    min-width: 0 !important;
}

body.plant-body .plant-logo-img {
    width: clamp(9.75rem, 14vw, 16.5rem) !important;
    max-width: min(34vw, 16.5rem) !important;
    max-height: clamp(3.35rem, 5.4vw, 5.3rem) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

body.plant-body .shop-storefront-brand .shop-page-logo,
body.plant-body .online-sales-brand .shop-page-logo,
body.plant-body .stock-brand-left .shop-page-logo,
body.plant-body .shop-page-logo.logo-left {
    width: clamp(7.4rem, 14vw, 13.5rem) !important;
    max-width: min(32vw, 13.5rem) !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* The global site nav is sticky and already occupies space, so the page shell
   does not need a second large header clearance inside the card. */
body.plant-body .shop-section,
body.plant-body .shop-stock-shell,
body.plant-body .cart-section,
body.plant-body .checkout-section,
body.plant-body .payment-section,
body.plant-body .admin-orders-shell,
body.plant-body .product-photo-admin-shell,
body.plant-body .photo-admin-shell,
body.plant-body .user-admin-shell,
body.plant-body .admin-settings-shell,
body.plant-body .delivery-settings-section,
body.plant-body .customer-orders-shell,
body.plant-body .customer-order-details-shell,
body.plant-body .auth-shell,
body.plant-body .error-page-shell {
    padding-top: clamp(0.9rem, 1.8vw, 1.6rem) !important;
}

body.route-shop.route-index .shop-stock-shell {
    padding-top: clamp(0.75rem, 1.5vw, 1.35rem) !important;
}

body.plant-body .shop-section-heading,
body.plant-body .shop-section-heading.compact-heading,
body.plant-body .shop-storefront-heading,
body.plant-body .online-sales-heading,
body.plant-body .admin-inline-page-heading,
body.plant-body .shop-hero.admin-inline-page-heading {
    margin-top: 0 !important;
    margin-bottom: clamp(0.75rem, 1.45vw, 1.25rem) !important;
}

body.plant-body .shop-storefront-title h1,
body.plant-body .shop-storefront-title h2,
body.plant-body .shop-section-heading h1,
body.plant-body .shop-section-heading h2,
body.plant-body .online-sales-heading h1,
body.plant-body .online-sales-heading h2 {
    line-height: 0.98 !important;
}

body.shop-user-mode .product-card .product-card-topline,
body.shop-user-mode .product-card .product-card-topline *,
body.plant-body .product-card .product-card-topline,
body.plant-body .product-card .product-card-topline * {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.shop-user-mode .product-card .product-card-topline,
body.plant-body .product-card .product-card-topline {
    grid-template-columns: auto minmax(max-content, 1fr) !important;
    column-gap: clamp(0.45rem, 1vw, 0.75rem) !important;
}

body.shop-user-mode .product-card .product-card-topline strong,
body.plant-body .product-card .product-card-topline strong {
    justify-self: end !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

@media (max-width: 46rem) {
    body.plant-body .plant-nav {
        padding-block: 0.45rem !important;
    }

    body.plant-body .plant-logo-img {
        width: min(52vw, 12rem) !important;
        max-width: 52vw !important;
        max-height: 3.85rem !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo,
    body.plant-body .online-sales-brand .shop-page-logo,
    body.plant-body .stock-brand-left .shop-page-logo,
    body.plant-body .shop-page-logo.logo-left {
        width: min(46vw, 10.75rem) !important;
        max-width: 46vw !important;
    }

    body.plant-body .shop-section,
    body.plant-body .shop-stock-shell,
    body.plant-body .cart-section,
    body.plant-body .checkout-section,
    body.plant-body .payment-section,
    body.plant-body .admin-orders-shell,
    body.plant-body .product-photo-admin-shell,
    body.plant-body .photo-admin-shell,
    body.plant-body .user-admin-shell,
    body.plant-body .admin-settings-shell,
    body.plant-body .delivery-settings-section,
    body.plant-body .customer-orders-shell,
    body.plant-body .customer-order-details-shell,
    body.plant-body .auth-shell,
    body.plant-body .error-page-shell,
    body.route-shop.route-index .shop-stock-shell {
        padding-top: 0.75rem !important;
    }

    body.shop-user-mode .product-card .product-card-topline,
    body.plant-body .product-card .product-card-topline {
        grid-template-columns: auto minmax(0, max-content) !important;
    }
}

/* ======================================================================
   2026-07-08 product barcode inline fix
   The catalogue barcode row must not reserve a wide empty middle column.
   Keep the label and barcode value together so the value cannot be pushed
   outside the product card and shortened by overflow rules.
   ====================================================================== */
body.shop-user-mode .product-card .product-card-topline,
body.plant-body .product-card .product-card-topline,
.product-card .product-card-topline {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: clamp(0.45rem, 0.85vw, 0.7rem) !important;
    overflow: visible !important;
    text-align: left !important;
}

body.shop-user-mode .product-card .product-card-topline span,
body.plant-body .product-card .product-card-topline span,
.product-card .product-card-topline span {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body.shop-user-mode .product-card .product-card-topline strong,
body.plant-body .product-card .product-card-topline strong,
.product-card .product-card-topline strong {
    flex: 0 1 auto !important;
    min-width: max-content !important;
    max-width: 100% !important;
    justify-self: auto !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    font-variant-numeric: tabular-nums !important;
}

/* ======================================================================
   2026-07-08 mobile storefront header stacking fix
   Keep the Plant Paradise logo above the Online Shop title on narrow screens
   so the title cannot overlap or clip the logo.
   ====================================================================== */
@media (max-width: 56rem) {
    body.plant-body .shop-storefront-heading {
        grid-template-columns: 1fr !important;
        justify-items: center !important;
        align-items: center !important;
        gap: clamp(0.85rem, 3vw, 1.25rem) !important;
        padding-block: clamp(1rem, 3.5vw, 1.65rem) !important;
        overflow: visible !important;
    }

    body.plant-body .shop-storefront-brand {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: clamp(0.55rem, 2.25vw, 0.95rem) !important;
        text-align: center !important;
        overflow: visible !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo-link {
        width: auto !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        justify-content: center !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo,
    body.plant-body .shop-page-logo.logo-left {
        width: clamp(9.25rem, 52vw, 13.5rem) !important;
        max-width: min(82vw, 13.5rem) !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    body.plant-body .shop-storefront-title,
    body.plant-body .online-sales-heading .shop-storefront-title {
        width: 100% !important;
        max-width: min(100%, 34rem) !important;
        text-align: center !important;
        overflow: visible !important;
    }

    body.plant-body .shop-storefront-title h1,
    body.plant-body .shop-storefront-title h2 {
        margin: 0 !important;
        font-size: clamp(2.45rem, 12vw, 4rem) !important;
        line-height: 0.92 !important;
        text-align: center !important;
        overflow: visible !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    body.plant-body .shop-storefront-title p,
    body.plant-body .shop-storefront-title .shop-muted,
    body.plant-body .shop-storefront-title .small-muted {
        max-width: min(100%, 28rem) !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.plant-body .shop-storefront-right {
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ======================================================================
   2026-07-08 final storefront header grid fix
   Goal: stop the Plant Paradise logo, Online Shop title and action buttons
   from competing for the same horizontal line. The brand is now a clean
   stack, and the right side wraps in controlled rows.
   ====================================================================== */
body.plant-body .shop-storefront-heading {
    display: grid !important;
    grid-template-columns: minmax(14rem, clamp(17rem, 27vw, 27rem)) minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: clamp(1rem, 2.2vw, 2rem) !important;
    padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.65rem) !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-brand,
body.plant-body .online-sales-brand,
body.plant-body .stock-brand-left {
    grid-area: brand !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: clamp(0.45rem, 1vw, 0.8rem) !important;
    text-align: left !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-brand .shop-page-logo-link,
body.plant-body .shop-page-logo-link {
    width: min(100%, clamp(11rem, 18vw, 15rem)) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto !important;
    line-height: 0 !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-brand .shop-page-logo,
body.plant-body .online-sales-brand .shop-page-logo,
body.plant-body .stock-brand-left .shop-page-logo,
body.plant-body .shop-page-logo.logo-left {
    width: min(100%, clamp(10.5rem, 18vw, 15rem)) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
}

body.plant-body .shop-storefront-title,
body.plant-body .online-sales-heading .shop-storefront-title {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: block !important;
    text-align: left !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-title h1,
body.plant-body .shop-storefront-title h2,
body.plant-body .shop-section-heading .shop-storefront-title h1,
body.plant-body .shop-section-heading .shop-storefront-title h2 {
    margin: 0 !important;
    max-width: 100% !important;
    font-size: clamp(2.55rem, 4.2vw, 4.5rem) !important;
    line-height: 0.9 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: left !important;
}

body.plant-body .shop-storefront-title .shop-page-subtitle,
body.plant-body .shop-storefront-title .shop-muted,
body.plant-body .shop-storefront-title .small-muted {
    display: block !important;
    max-width: min(100%, 22rem) !important;
    margin-top: clamp(0.35rem, 0.75vw, 0.55rem) !important;
    text-align: left !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.plant-body .shop-storefront-right,
body.plant-body .online-sales-header-actions,
body.plant-body .admin-inline-heading-actions {
    grid-area: actions !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: clamp(0.7rem, 1.2vw, 0.95rem) !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-right .shop-developer-credit,
body.plant-body .shop-storefront-right .shop-developer-credit-link {
    width: auto !important;
    max-width: min(100%, 22rem) !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-right .shop-heading-actions,
body.plant-body .shop-storefront-right .local-shop-nav,
body.plant-body .online-sales-header-actions .shop-heading-actions,
body.plant-body .online-sales-header-actions .admin-command-header-actions {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: clamp(0.5rem, 0.9vw, 0.8rem) !important;
    overflow: visible !important;
}

body.plant-body .shop-storefront-right .shop-heading-actions > *,
body.plant-body .shop-storefront-right .local-shop-nav > * {
    flex: 0 1 auto !important;
    max-width: 100% !important;
}

body.plant-body .shop-storefront-right .shop-cart-link,
body.plant-body .shop-storefront-right .mode-switch-btn,
body.plant-body .shop-storefront-right .admin-tools-summary,
body.plant-body .shop-storefront-right .customer-context-pill {
    min-width: 0 !important;
    white-space: nowrap !important;
}

@media (max-width: 86rem) {
    body.plant-body .shop-storefront-heading {
        grid-template-columns: minmax(13rem, 22rem) minmax(0, 1fr) !important;
        gap: clamp(0.85rem, 1.8vw, 1.4rem) !important;
    }

    body.plant-body .shop-storefront-title h1,
    body.plant-body .shop-storefront-title h2,
    body.plant-body .shop-section-heading .shop-storefront-title h1,
    body.plant-body .shop-section-heading .shop-storefront-title h2 {
        font-size: clamp(2.35rem, 4.4vw, 4rem) !important;
    }
}

@media (max-width: 68rem) {
    body.plant-body .shop-storefront-heading {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "brand"
            "actions" !important;
        justify-items: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    body.plant-body .shop-storefront-brand,
    body.plant-body .online-sales-brand,
    body.plant-body .stock-brand-left {
        align-items: center !important;
        text-align: center !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo-link,
    body.plant-body .shop-page-logo-link {
        justify-content: center !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo,
    body.plant-body .online-sales-brand .shop-page-logo,
    body.plant-body .stock-brand-left .shop-page-logo,
    body.plant-body .shop-page-logo.logo-left {
        object-position: center !important;
    }

    body.plant-body .shop-storefront-title,
    body.plant-body .online-sales-heading .shop-storefront-title,
    body.plant-body .shop-storefront-title h1,
    body.plant-body .shop-storefront-title h2,
    body.plant-body .shop-storefront-title .shop-page-subtitle,
    body.plant-body .shop-storefront-title .shop-muted,
    body.plant-body .shop-storefront-title .small-muted {
        text-align: center !important;
        margin-inline: auto !important;
    }

    body.plant-body .shop-storefront-right,
    body.plant-body .online-sales-header-actions,
    body.plant-body .admin-inline-heading-actions {
        align-items: center !important;
    }

    body.plant-body .shop-storefront-right .shop-developer-credit,
    body.plant-body .shop-storefront-right .shop-developer-credit-link {
        justify-content: center !important;
    }

    body.plant-body .shop-storefront-right .shop-heading-actions,
    body.plant-body .shop-storefront-right .local-shop-nav,
    body.plant-body .online-sales-header-actions .shop-heading-actions,
    body.plant-body .online-sales-header-actions .admin-command-header-actions {
        justify-content: center !important;
    }
}

@media (max-width: 46rem) {
    body.plant-body .shop-storefront-heading {
        padding: clamp(0.85rem, 3.2vw, 1.15rem) !important;
        gap: clamp(0.7rem, 3vw, 1rem) !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo-link,
    body.plant-body .shop-page-logo-link {
        width: min(74vw, 13rem) !important;
    }

    body.plant-body .shop-storefront-brand .shop-page-logo,
    body.plant-body .online-sales-brand .shop-page-logo,
    body.plant-body .stock-brand-left .shop-page-logo,
    body.plant-body .shop-page-logo.logo-left {
        width: min(74vw, 13rem) !important;
    }

    body.plant-body .shop-storefront-title h1,
    body.plant-body .shop-storefront-title h2,
    body.plant-body .shop-section-heading .shop-storefront-title h1,
    body.plant-body .shop-section-heading .shop-storefront-title h2 {
        font-size: clamp(2.15rem, 13vw, 3.55rem) !important;
        line-height: 0.92 !important;
    }

    body.plant-body .shop-storefront-title .shop-page-subtitle,
    body.plant-body .shop-storefront-title .shop-muted,
    body.plant-body .shop-storefront-title .small-muted {
        max-width: min(100%, 18rem) !important;
        font-size: clamp(0.8rem, 3.4vw, 0.92rem) !important;
    }

    body.plant-body .shop-storefront-right .shop-heading-actions,
    body.plant-body .shop-storefront-right .local-shop-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    body.plant-body .shop-storefront-right .shop-heading-actions > *,
    body.plant-body .shop-storefront-right .local-shop-nav > *,
    body.plant-body .shop-storefront-right .inline-logout-form > button,
    body.plant-body .shop-storefront-right .shop-admin-tools-menu > summary {
        width: 100% !important;
    }

    body.plant-body .shop-storefront-right .shop-context-pill,
    body.plant-body .shop-storefront-right .customer-context-pill,
    body.plant-body .shop-storefront-right .shop-mode-switch,
    body.plant-body .shop-storefront-right .shop-admin-tools-menu {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 24rem) {
    body.plant-body .shop-storefront-right .shop-heading-actions,
    body.plant-body .shop-storefront-right .local-shop-nav {
        grid-template-columns: 1fr !important;
    }
}

/* -------------------------------------------------------------------------
   Page-only repair pass: Online Sales, Delivery Settings, Add/Edit User.
   These overrides intentionally stay scoped to the affected routes so the
   shop catalogue/header/card behaviour is not changed again.
------------------------------------------------------------------------- */

/* Online Sales: keep the admin order table readable on desktop and stop
   narrow columns from breaking headings/values into single letters. */
body.plant-body.route-shop.route-orders .admin-orders-shell {
    width: min(106rem, calc(100vw - clamp(1rem, 2vw, 2.5rem))) !important;
    max-width: min(106rem, calc(100vw - clamp(1rem, 2vw, 2.5rem))) !important;
}

body.plant-body.route-shop.route-orders .admin-orders-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    border-radius: 1.15rem !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table {
    width: 100% !important;
    min-width: 86rem !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table th,
body.plant-body.route-shop.route-orders .admin-trn-orders-table td {
    vertical-align: top !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.28 !important;
    padding: clamp(0.8rem, 0.9vw, 1rem) clamp(0.75rem, 0.9vw, 1rem) !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table thead th {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: 0.035em !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td > span,
body.plant-body.route-shop.route-orders .admin-trn-orders-table td > strong {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(1),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(1) { width: 15rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(2),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(2) { width: 12rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(3),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(3) { width: 13rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(4),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(4) { width: 14rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(5),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(5) { width: 9rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(6),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(6) { width: 18rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(7),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(7) { width: 8.5rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(8),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(8) { width: 10rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(9),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(9) { width: 10rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(10),
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(10) { width: 8rem !important; }

body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(7) span,
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(8),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(9) {
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table .copy-value-btn,
body.plant-body.route-shop.route-orders .admin-trn-orders-table .muted-copy {
    display: inline !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
    justify-content: flex-start !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions,
body.plant-body.route-shop.route-orders .admin-trn-orders-table th.actions {
    text-align: center !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
    white-space: normal !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions .btn,
body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions button {
    width: 100% !important;
    min-height: 2.75rem !important;
    white-space: nowrap !important;
}

@media (max-width: 56rem) {
    body.plant-body.route-shop.route-orders .admin-trn-orders-table {
        min-width: 76rem !important;
    }
}

/* Delivery Settings: keep the settings form balanced on PC; stack only when
   there is not enough width. */
body.plant-body.route-shop.route-deliverysettings .delivery-settings-section {
    width: min(82rem, calc(100vw - clamp(1rem, 3vw, 3rem))) !important;
    max-width: min(82rem, calc(100vw - clamp(1rem, 3vw, 3rem))) !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-settings-card {
    width: 100% !important;
    max-width: 82rem !important;
    margin-inline: auto !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-settings-card .checkout-grid,
body.plant-body.route-shop.route-deliverysettings .delivery-settings-card .responsive-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
    align-items: start !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-pricing-example-layout {
    display: grid !important;
    grid-template-columns: minmax(20rem, 0.95fr) minmax(25rem, 1.15fr) !important;
    gap: clamp(1rem, 1.6vw, 1.5rem) !important;
    align-items: start !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-pricing-settings-panel,
body.plant-body.route-shop.route-deliverysettings .delivery-pricing-example-card {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-pricing-settings-panel .checkout-grid,
body.plant-body.route-shop.route-deliverysettings .delivery-pricing-settings-panel .responsive-form-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-pricing-example-card {
    grid-column: auto !important;
    width: 100% !important;
    align-self: stretch !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-example-inputs {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)) !important;
    gap: clamp(0.75rem, 1.2vw, 1rem) !important;
}

body.plant-body.route-shop.route-deliverysettings .delivery-toggle-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: clamp(0.7rem, 1.2vw, 1rem) !important;
}

@media (max-width: 62rem) {
    body.plant-body.route-shop.route-deliverysettings .delivery-pricing-example-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Add/Edit User: stop the form from stretching over the full desktop width. */
body.plant-body.route-users.route-edit .admin-edit-shell {
    width: min(78rem, calc(100vw - clamp(1rem, 3vw, 3rem))) !important;
    max-width: min(78rem, calc(100vw - clamp(1rem, 3vw, 3rem))) !important;
}

body.plant-body.route-users.route-edit .admin-edit-shell .admin-inline-page-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: clamp(1rem, 2vw, 1.6rem) !important;
}

body.plant-body.route-users.route-edit .admin-edit-shell .admin-inline-heading-actions {
    justify-content: flex-end !important;
    align-items: center !important;
}

body.plant-body.route-users.route-edit .user-edit-card {
    width: min(100%, 58rem) !important;
    max-width: 58rem !important;
    margin: clamp(1rem, 2vw, 1.5rem) auto 0 !important;
    padding: clamp(1rem, 2vw, 1.65rem) !important;
}

body.plant-body.route-users.route-edit .user-edit-card .checkout-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(0.9rem, 1.5vw, 1.25rem) !important;
}

body.plant-body.route-users.route-edit .user-edit-card .checkout-grid > div:nth-child(5) {
    grid-column: 1 / -1 !important;
    width: min(100%, 30rem) !important;
}

body.plant-body.route-users.route-edit .user-edit-card .permission-check-grid {
    width: fit-content !important;
    max-width: 100% !important;
    margin-top: clamp(0.9rem, 1.5vw, 1.25rem) !important;
}

body.plant-body.route-users.route-edit .user-edit-card .payment-safe-note.large {
    margin-top: clamp(0.9rem, 1.6vw, 1.4rem) !important;
}

body.plant-body.route-users.route-edit .user-edit-card > button[type="submit"] {
    width: min(100%, 18rem) !important;
    display: flex !important;
    margin: clamp(1rem, 1.8vw, 1.5rem) auto 0 !important;
}

@media (max-width: 58rem) {
    body.plant-body.route-users.route-edit .admin-edit-shell .admin-inline-page-heading {
        grid-template-columns: 1fr !important;
    }

    body.plant-body.route-users.route-edit .admin-edit-shell .admin-inline-heading-actions {
        justify-content: flex-start !important;
    }

    body.plant-body.route-users.route-edit .user-edit-card .checkout-grid {
        grid-template-columns: 1fr !important;
    }

    body.plant-body.route-users.route-edit .user-edit-card .checkout-grid > div:nth-child(5) {
        grid-column: auto !important;
        width: 100% !important;
    }
}

/* ======================================================================
   2026-07-08 targeted mobile corrections for Online Sales + Product Photos
   Scope is intentionally narrow so the shop/product card work is not touched.
   ====================================================================== */

@media (max-width: 46rem) {
    /* Shared admin phone shell: use the screen width without creating side overflow. */
    body.plant-body.route-shop.route-orders .admin-orders-shell,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell {
        width: calc(100vw - 0.75rem) !important;
        max-width: calc(100vw - 0.75rem) !important;
        margin-inline: auto !important;
        padding: clamp(0.65rem, 2.6vw, 0.95rem) !important;
        overflow: visible !important;
    }

    /* Mobile admin tools should keep the Plant Paradise button style. */
    body.plant-body.route-shop.route-orders .admin-tools-summary,
    body.plant-body.route-productphotos.route-index .admin-tools-summary,
    body.plant-body.route-shop.route-index .admin-tools-summary {
        background: var(--pp-gold) !important;
        border-color: var(--pp-gold) !important;
        color: #061814 !important;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .18) !important;
    }

    /* Online Sales: on phones the TRN/AUDIT table becomes clean cards, not a squeezed wide table. */
    body.plant-body.route-shop.route-orders .admin-orders-table-wrap {
        overflow-x: visible !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-scroll-table,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-card-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        table-layout: auto !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table thead {
        display: none !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table tbody {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(0.75rem, 3vw, 1rem) !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table tr {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(0.5rem, 2vw, 0.72rem) !important;
        padding: clamp(0.85rem, 3.2vw, 1.05rem) !important;
        border: 1px solid rgba(228, 191, 87, .28) !important;
        border-left: 0.35rem solid rgba(228, 191, 87, .84) !important;
        border-radius: clamp(1rem, 4vw, 1.35rem) !important;
        background: rgba(0, 54, 39, .88) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
        overflow: hidden !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
        line-height: 1.25 !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td::before {
        content: attr(data-label) !important;
        display: block !important;
        margin: 0 0 0.18rem !important;
        color: var(--pp-gold) !important;
        font-size: 0.66rem !important;
        font-weight: 900 !important;
        letter-spacing: 0.055em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td > *,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td strong,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td span,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td button,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td a {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td strong {
        display: block !important;
        color: #fff !important;
        line-height: 1.2 !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td span {
        display: block !important;
        margin-top: 0.12rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table .copy-value-btn {
        width: auto !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: #fff !important;
        text-align: left !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table .admin-payment-badge {
        width: fit-content !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.num,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
        text-align: left !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions .btn,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions button,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions form {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Product Photos: stop the phone heading/actions from looking like a broken desktop layout. */
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: clamp(0.85rem, 3vw, 1.15rem) !important;
        align-items: stretch !important;
        padding: clamp(1rem, 3.2vw, 1.25rem) !important;
        text-align: left !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading h2 {
        margin: 0 0 0.45rem !important;
        font-size: clamp(2.15rem, 12vw, 3.35rem) !important;
        line-height: 0.95 !important;
        overflow-wrap: normal !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading .shop-muted {
        display: block !important;
        width: min(100%, 23rem) !important;
        max-width: 100% !important;
        font-size: clamp(0.88rem, 3.8vw, 1rem) !important;
        line-height: 1.35 !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-inline-heading-actions,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .shared-admin-tools-menu,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-header-logout-form {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions > *,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions .btn,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions button,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions a,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions summary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body.route-productphotos.route-index .photo-upload-accordion summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    body.plant-body.route-productphotos.route-index .photo-upload-accordion summary small {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        text-align: left !important;
        line-height: 1.3 !important;
    }

    body.plant-body.route-productphotos.route-index .server-search-strip .page-size-inline-label {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.25rem !important;
        align-items: stretch !important;
    }
}

@media (max-width: 24rem) {
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-inline-heading-actions,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-command-header-actions {
        grid-template-columns: 1fr !important;
    }
}

/* ======================================================================
   2026-07-08 narrow follow-up: Online Sales desktop density + admin mobile
   Scope: Online Sales, Admin Manage bulk panel, Product Photos/admin headers.
   ====================================================================== */

/* Online Sales on desktop: keep the table readable, but stop it stretching
   columns across the full ultra-wide shell. */
body.plant-body.route-shop.route-orders .admin-orders-shell {
    width: min(1480px, calc(100vw - clamp(14px, 2vw, 44px))) !important;
    max-width: 1480px !important;
}

body.plant-body.route-shop.route-orders .admin-orders-table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 0.25rem !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table,
body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-scroll-table,
body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-card-table {
    width: max-content !important;
    min-width: 1320px !important;
    max-width: none !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table th,
body.plant-body.route-shop.route-orders .admin-trn-orders-table td {
    padding: 1rem 0.8rem !important;
    vertical-align: top !important;
    line-height: 1.32 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table th {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(1),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(1) { width: 10.5rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(2),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(2) { width: 8.5rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(3),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(3) { width: 11rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(4),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(4) { width: 13rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(5),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(5) { width: 7.5rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(6),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(6) { width: 15rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(7),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(7) { width: 7rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(8),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(8) { width: 8rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(9),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(9) { width: 8.5rem !important; }
body.plant-body.route-shop.route-orders .admin-trn-orders-table th:nth-child(10),
body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(10) { width: 7.5rem !important; }

body.plant-body.route-shop.route-orders .admin-trn-orders-table .admin-payment-badge {
    max-width: 100% !important;
    white-space: normal !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
    display: table-cell !important;
    text-align: center !important;
}

body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions .btn,
body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 6.5rem !important;
    margin-inline: auto !important;
}

/* Admin Manage mobile: the Bulk Show Online accordion must behave like a full-width block,
   not as a squeezed side/tab element. */
@media (max-width: 46rem) {
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel,
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-safe-panel.admin-bulk-online-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 0.75rem !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        overflow: hidden !important;
        position: relative !important;
        inset: auto !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel .admin-safe-panel-head,
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head {
        width: 100% !important;
        min-height: 3.1rem !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-rows: auto !important;
        gap: 0.45rem !important;
        align-items: center !important;
        padding: 0.8rem 0.95rem !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        overflow: hidden !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel .admin-collapsible-title {
        grid-column: 1 !important;
        grid-row: 1 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        line-height: 1.15 !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel .admin-collapsible-hint {
        display: none !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel .admin-safe-panel-head b,
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head b {
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        width: auto !important;
        min-width: 4.25rem !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-online-form,
    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-photo-picker-summary,
    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-online-action-row {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-selected-box,
    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-selected-preview {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-wrap: break-word !important;
    }
}

/* Mobile admin page headings: title first, buttons underneath.  This applies only
   to admin/workspace screens, not the customer shop catalogue. */
@media (max-width: 46rem) {
    body.plant-body.route-productphotos.route-index .admin-inline-page-heading,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading,
    body.plant-body.route-users .admin-inline-page-heading,
    body.plant-body.route-usermodules .admin-inline-page-heading,
    body.plant-body.route-shop.route-orders .online-sales-heading,
    body.plant-body.route-shop.route-index.shop-admin-mode .shop-section-heading.compact-heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
        align-items: stretch !important;
        text-align: left !important;
        padding: clamp(0.95rem, 3vw, 1.2rem) !important;
    }

    body.plant-body.route-productphotos.route-index .admin-inline-heading-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-heading-actions,
    body.plant-body.route-shop.route-systemsettings .admin-inline-heading-actions,
    body.plant-body.route-users .admin-inline-heading-actions,
    body.plant-body.route-usermodules .admin-inline-heading-actions,
    body.plant-body.route-shop.route-orders .online-sales-header-actions,
    body.plant-body.route-shop.route-index.shop-admin-mode .shop-heading-actions {
        width: 100% !important;
        max-width: 100% !important;
        align-items: stretch !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions,
    body.plant-body.route-users .admin-command-header-actions,
    body.plant-body.route-usermodules .admin-command-header-actions,
    body.plant-body.route-shop.route-orders .admin-command-header-actions,
    body.plant-body.route-shop.route-index.shop-admin-mode .local-shop-nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions > *,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions > *,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions > *,
    body.plant-body.route-users .admin-command-header-actions > *,
    body.plant-body.route-usermodules .admin-command-header-actions > *,
    body.plant-body.route-shop.route-orders .admin-command-header-actions > *,
    body.plant-body.route-shop.route-index.shop-admin-mode .local-shop-nav > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body.route-productphotos.route-index .shared-admin-tools-menu,
    body.plant-body.route-shop.route-deliverysettings .shared-admin-tools-menu,
    body.plant-body.route-shop.route-systemsettings .shared-admin-tools-menu,
    body.plant-body.route-users .shared-admin-tools-menu,
    body.plant-body.route-usermodules .shared-admin-tools-menu,
    body.plant-body.route-shop.route-orders .shared-admin-tools-menu,
    body.plant-body.route-shop.route-index.shop-admin-mode .shop-admin-tools-menu {
        grid-column: 1 / -1 !important;
    }
}

/* Product Photos mobile: keep edit as an intentional full-width section, not a cramped table/tab. */
@media (max-width: 46rem) {
    body.plant-body.route-productphotos.route-index .photo-edit-panel,
    body.plant-body.route-productphotos.route-index .inline-photo-edit-panel {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
        padding: 0.85rem !important;
        overflow: visible !important;
    }

    body.plant-body.route-productphotos.route-index .photo-edit-panel .inner-heading,
    body.plant-body.route-productphotos.route-index .inline-photo-edit-panel .inner-heading {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
        text-align: left !important;
    }

    body.plant-body.route-productphotos.route-index .photo-edit-panel .shop-heading-actions,
    body.plant-body.route-productphotos.route-index .inline-photo-edit-panel .shop-heading-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}

/* Restore the phone Online Sales card layout after the compact desktop table rules above. */
@media (max-width: 46rem) {
    body.plant-body.route-shop.route-orders .admin-orders-shell {
        width: calc(100vw - 0.75rem) !important;
        max-width: calc(100vw - 0.75rem) !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-scroll-table,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-card-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        display: block !important;
        table-layout: auto !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table th,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td {
        width: 100% !important;
        padding: 0 !important;
        white-space: normal !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions .btn,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions button,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions form {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Shop pager final: centre customer catalogue pagination on the public shop. */
body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager .btn {
    flex: 0 0 auto !important;
}

@media (max-width: 46rem) {
    body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.45rem !important;
    }
}

/* ======================================================================
   2026-07-15 final fluid-layout guard
   Keeps the existing Plant Paradise design while allowing its current
   components to respond to their available space, browser zoom and viewport.
   ====================================================================== */

/* Author-level display rules must never override functional hidden states. */
body.plant-body [hidden] {
    display: none !important;
}

:root {
    --pp-final-gutter: clamp(0.45rem, 2.15vw, 1.75rem);
    --pp-final-gap: clamp(0.6rem, 1.35vw, 1.15rem);
    --pp-final-control: clamp(2.65rem, 5.5vw, 3rem);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.plant-body .plant-main,
body.plant-body .shop-stock-display,
body.plant-body .product-area,
body.plant-body .cart-list,
body.plant-body .checkout-card,
body.plant-body .payment-card,
body.plant-body .admin-panel-card,
body.plant-body .admin-sub-card {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.plant-body :where(.shop-section, .shop-stock-shell, .cart-section, .checkout-section, .payment-section, .admin-orders-shell, .product-photo-admin-shell, .user-admin-shell, .admin-settings-shell, .delivery-settings-section, .customer-orders-shell, .customer-order-details-shell, .auth-shell, .error-page-shell) {
    width: min(100% - (var(--pp-final-gutter) * 2), 96rem) !important;
    max-width: calc(100vw - (var(--pp-final-gutter) * 2)) !important;
    margin-inline: auto !important;
}

body.plant-body :where(.table-responsive, .auto-table-responsive, .admin-orders-table-wrap, .admin-order-table-wrap, .photo-order-form, .photo-picker-table-wrap, .customer-lines-wrap, .responsive-table-scroll) {
    max-width: 100% !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body.plant-body :where(input, select, textarea, button, .btn, summary) {
    max-width: 100%;
}

body.plant-body :where(.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
    min-width: 0 !important;
}

/* The authenticated mobile header has logo, logout and menu controls. */
@media (max-width: 73.75rem) {
    body.plant-body .plant-nav-inner {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        align-items: center !important;
        column-gap: clamp(0.35rem, 1.5vw, 0.75rem) !important;
    }

    body.plant-body .plant-logo-img {
        width: clamp(8.5rem, 38vw, 15rem) !important;
        max-width: 100% !important;
        height: auto !important;
    }

    body.plant-body .mobile-header-logout-form,
    body.plant-body .mobile-menu-button {
        min-width: 0 !important;
        justify-self: end !important;
    }
}

@media (max-width: 25rem) {
    body.plant-body .plant-nav-inner {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
    }

    body.plant-body .plant-logo-img {
        width: clamp(7.3rem, 37vw, 9.25rem) !important;
    }

    body.plant-body .mobile-header-logout-button,
    body.plant-body .mobile-menu-button {
        padding-inline: 0.55rem !important;
        font-size: 0.75rem !important;
    }
}

/* Auto-fit lets cards and settings use extra space without fixed device widths. */
body.plant-body :where(.product-grid, .product-grid.takealot-grid) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(15rem, 20vw, 19rem)), 1fr)) !important;
}

body.plant-body :where(.checkout-grid, .responsive-form-grid, .admin-form-grid, .admin-two-column-grid, .email-settings-grid, .system-settings-grid, .photo-admin-grid, .permission-check-grid, .delivery-example-inputs) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(13.5rem, 23vw, 18rem)), 1fr)) !important;
}

body.plant-body :where(.shop-heading-actions, .local-shop-nav, .admin-command-header-actions, .admin-inline-heading-actions, .online-sales-header-actions, .responsive-action-row, .payment-actions, .customer-order-actions, .shop-result-actions, .client-shop-pager) {
    row-gap: var(--pp-final-gap) !important;
}

/* Component queries react to the actual page-card width, including zoom. */
@supports (container-type: inline-size) {
    body.plant-body .shop-stock-display {
        container: pp-catalogue / inline-size;
    }

    body.plant-body :where(.cart-section, .checkout-section, .payment-section) {
        container: pp-transaction / inline-size;
    }

    body.plant-body .delivery-settings-section {
        container: pp-delivery / inline-size;
    }

    body.plant-body.route-users.route-edit .admin-edit-shell {
        container: pp-user-edit / inline-size;
    }

    @container pp-catalogue (min-width: 64rem) {
        .shop-layout.right-category-layout,
        .shop-stock-display > .shop-layout.right-category-layout {
            grid-template-columns: minmax(0, 1fr) clamp(14rem, 19cqi, 19rem) !important;
            align-items: start !important;
        }

        .right-category-panel,
        .category-panel,
        .shop-stock-display .right-category-panel {
            position: sticky !important;
            top: clamp(5.5rem, 8vw, 7.5rem) !important;
            order: initial !important;
            width: 100% !important;
            max-height: calc(100dvh - clamp(7rem, 12vw, 10rem)) !important;
            overflow-y: auto !important;
        }
    }

    @container pp-catalogue (max-width: 63.999rem) {
        .shop-layout.right-category-layout,
        .shop-stock-display > .shop-layout.right-category-layout {
            grid-template-columns: 1fr !important;
        }

        .right-category-panel,
        .category-panel,
        .shop-stock-display .right-category-panel {
            position: relative !important;
            top: auto !important;
            order: -1 !important;
            width: 100% !important;
            max-height: min(40dvh, 22rem) !important;
            overflow-y: auto !important;
        }
    }

    @container pp-transaction (min-width: 54rem) {
        .cart-layout,
        .checkout-layout,
        .payment-layout,
        .responsive-cart-layout,
        .responsive-checkout-layout,
        .responsive-payment-layout {
            grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem) !important;
            align-items: start !important;
        }
    }

    @container pp-transaction (max-width: 53.999rem) {
        .cart-layout,
        .checkout-layout,
        .payment-layout,
        .responsive-cart-layout,
        .responsive-checkout-layout,
        .responsive-payment-layout {
            grid-template-columns: 1fr !important;
        }
    }

    @container pp-delivery (min-width: 55rem) {
        .delivery-pricing-example-layout {
            grid-template-columns: minmax(18rem, 0.95fr) minmax(22rem, 1.15fr) !important;
        }
    }

    @container pp-delivery (max-width: 54.999rem) {
        .delivery-pricing-example-layout {
            grid-template-columns: 1fr !important;
        }
    }

    @container pp-user-edit (min-width: 44rem) {
        .user-edit-card .checkout-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @container pp-user-edit (max-width: 43.999rem) {
        .user-edit-card .checkout-grid {
            grid-template-columns: 1fr !important;
        }
    }
}

@media (max-width: 46rem) {
    body.plant-body :where(.shop-section, .shop-stock-shell, .cart-section, .checkout-section, .payment-section, .admin-orders-shell, .product-photo-admin-shell, .user-admin-shell, .admin-settings-shell, .delivery-settings-section, .customer-orders-shell, .customer-order-details-shell, .auth-shell, .error-page-shell) {
        width: calc(100vw - (var(--pp-final-gutter) * 2)) !important;
        max-width: calc(100vw - (var(--pp-final-gutter) * 2)) !important;
        padding-inline: clamp(0.55rem, 3vw, 0.95rem) !important;
    }

    body.plant-body .client-shop-pager .btn {
        flex: 0 0 auto !important;
    }
}

/* Compact catalogue pagination at every viewport and browser zoom level. */
body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager,
body.plant-body.route-shop.route-index.shop-user-mode .shop-pager.client-shop-pager,
body.plant-body.route-shop.route-index.shop-user-mode .shop-pager-bottom.client-shop-pager,
body.plant-body.route-shop.route-index.shop-user-mode .shop-pager-inline.client-shop-pager {
    width: fit-content !important;
    max-width: 100% !important;
    margin: clamp(0.75rem, 1.5vw, 1.25rem) auto 0 !important;
    padding: clamp(0.35rem, 0.75vw, 0.55rem) !important;
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.35rem, 0.7vw, 0.55rem) !important;
    position: relative !important;
    overflow: visible !important;
}

body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(2.75rem, 3.2vw, 3.35rem) !important;
    max-width: min(100%, 9rem) !important;
    min-height: clamp(2.45rem, 3vw, 2.8rem) !important;
    margin: 0 !important;
    padding: 0.55rem clamp(0.75rem, 1.25vw, 1rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
}

@media (max-width: 30rem) {
    body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager {
        width: 100% !important;
    }

    body.plant-body.route-shop.route-index.shop-user-mode .client-shop-pager .btn {
        min-width: 2.75rem !important;
        min-height: 2.55rem !important;
        padding-inline: 0.7rem !important;
    }
}

/* ======================================================================
   2026-07-20 final responsive review
   Fix the real phone layouts shown by admin users without changing the
   desktop storefront.  These rules intentionally sit last in the file so
   older compatibility rules cannot squeeze the same components again.
   ====================================================================== */

@media (max-width: 46rem) {
    /* Shared admin headings: title first, then a stable two-column action area. */
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading,
    body.plant-body.route-shop.route-orderdetails #order-details > .admin-inline-page-heading,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading,
    body.plant-body.route-auditlogs .admin-inline-page-heading,
    body.plant-body.route-shop.route-orders .online-sales-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 0.85rem !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 1rem !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-orderdetails #order-details > .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading > div:first-child,
    body.plant-body.route-auditlogs .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-orders .online-sales-heading > .online-sales-brand {
        display: block !important;
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        text-align: center !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading h2,
    body.plant-body.route-shop.route-orderdetails #order-details > .admin-inline-page-heading h2,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading h2,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading h2,
    body.plant-body.route-auditlogs .admin-inline-page-heading h1,
    body.plant-body.route-shop.route-orders .online-sales-heading h2 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 0.45rem !important;
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading .shop-muted,
    body.plant-body.route-shop.route-orderdetails #order-details > .admin-inline-page-heading .shop-muted,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading .shop-muted,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading .shop-muted,
    body.plant-body.route-auditlogs .admin-inline-page-heading .shop-muted,
    body.plant-body.route-shop.route-orders .online-sales-heading .shop-page-subtitle {
        display: block !important;
        width: min(100%, 34rem) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        font-size: clamp(0.82rem, 3.4vw, 0.96rem) !important;
        line-height: 1.4 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.plant-body.route-productphotos.route-index .admin-inline-heading-actions,
    body.plant-body.route-shop.route-orderdetails .admin-inline-heading-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-heading-actions,
    body.plant-body.route-shop.route-systemsettings .admin-inline-heading-actions,
    body.plant-body.route-auditlogs .admin-inline-heading-actions,
    body.plant-body.route-shop.route-orders .online-sales-header-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0.55rem !important;
        margin: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions,
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions,
    body.plant-body.route-auditlogs .admin-command-header-actions,
    body.plant-body.route-shop.route-orders .admin-command-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0.55rem !important;
        overflow: visible !important;
    }

    body.plant-body :where(
            .route-productphotos.route-index,
            .route-shop.route-orderdetails,
            .route-shop.route-deliverysettings,
            .route-shop.route-systemsettings,
            .route-auditlogs,
            .route-shop.route-orders
        ) .admin-command-header-actions > *,
    body.plant-body :where(
            .route-productphotos.route-index,
            .route-shop.route-orderdetails,
            .route-shop.route-deliverysettings,
            .route-shop.route-systemsettings,
            .route-auditlogs,
            .route-shop.route-orders
        ) .admin-command-header-actions :where(.btn, button, a, summary) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 3rem !important;
        margin: 0 !important;
        padding: 0.65rem 0.45rem !important;
        font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-align: center !important;
    }

    body.plant-body :where(
            .route-productphotos.route-index,
            .route-shop.route-orderdetails,
            .route-shop.route-deliverysettings,
            .route-shop.route-systemsettings,
            .route-auditlogs,
            .route-shop.route-orders
        ) .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form) {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-shop.route-orderdetails .admin-inline-heading-actions > .shop-cart-link {
        grid-column: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 3rem !important;
        margin: 0 !important;
    }

    /* Keep an opened Admin Tools menu inside the phone viewport. */
    body.plant-body .admin-inline-page-heading .shared-admin-tools-menu,
    body.plant-body.route-shop.route-orders .online-sales-heading .shared-admin-tools-menu {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.plant-body .admin-inline-page-heading .admin-tools-menu-panel,
    body.plant-body.route-shop.route-orders .online-sales-heading .admin-tools-menu-panel {
        position: absolute !important;
        inset: calc(100% + 0.35rem) 0 auto 0 !important;
        z-index: 1200 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60dvh !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.plant-body .admin-inline-page-heading .admin-tools-menu-panel .admin-tool-link,
    body.plant-body.route-shop.route-orders .online-sales-heading .admin-tools-menu-panel .admin-tool-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Manage Shop: allocate explicit areas so product text can use the full card. */
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row {
        display: grid !important;
        grid-template-columns: 6.5rem minmax(0, 1fr) !important;
        grid-template-areas:
            "check check"
            "photo group"
            "main main"
            "stock price" !important;
        align-items: start !important;
        gap: 0.8rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.9rem !important;
        overflow: hidden !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-photo-cell {
        grid-area: photo !important;
        width: 6.5rem !important;
        min-width: 0 !important;
        max-width: 6.5rem !important;
        margin: 0 !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-image {
        width: 6.5rem !important;
        height: 6.5rem !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-display-check {
        grid-area: check !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-group {
        grid-area: group !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-main {
        grid-area: main !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-stock {
        grid-area: stock !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-price {
        grid-area: price !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row :where(
            .admin-display-check,
            .admin-list-group,
            .admin-list-main,
            .admin-list-stock,
            .admin-list-price
        ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-main {
        padding-top: 0.1rem !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-main :where(strong, span),
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .category-picker-hint {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-list-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-list-head .admin-save-all-btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .shop-pager {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .shop-pager :where(.pager-status, .pager-status-bottom) {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .shop-pager .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 2.8rem !important;
        padding: 0.6rem !important;
    }

    /* Online Sales dashboard: compact date controls and useful two-column KPIs. */
    body.plant-body.route-shop.route-orders .online-sales-dashboard-layout,
    body.plant-body.route-shop.route-orders .online-sales-summary-stack {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.75rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body.route-shop.route-orders .admin-date-input-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 2.85rem !important;
        gap: 0.45rem !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body.route-shop.route-orders .admin-date-input-group .js-clear-order-date {
        width: 2.85rem !important;
        min-width: 2.85rem !important;
        max-width: 2.85rem !important;
        height: 2.85rem !important;
        min-height: 2.85rem !important;
        padding: 0 !important;
        border-radius: 999px !important;
        font-size: 1.05rem !important;
    }

    body.plant-body.route-shop.route-orders .online-sales-totals-row,
    body.plant-body.route-shop.route-orders .online-sales-status-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.65rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body.route-shop.route-orders .online-sales-status-row > :last-child {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-shop.route-orders .online-sales-dashboard .admin-summary-card {
        min-width: 0 !important;
        min-height: 4.6rem !important;
        padding: 0.75rem !important;
    }

    body.plant-body.route-shop.route-orders .online-sales-dashboard .admin-summary-card span {
        font-size: 0.72rem !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }

    body.plant-body.route-shop.route-orders .online-sales-dashboard .admin-summary-card strong {
        font-size: clamp(1.15rem, 5.2vw, 1.55rem) !important;
        line-height: 1.12 !important;
        overflow-wrap: break-word !important;
    }

    body.plant-body.route-shop.route-orders .inline-search-strip {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.plant-body.route-shop.route-orders .inline-search-strip .inline-search-box,
    body.plant-body.route-shop.route-orders .inline-search-strip .small-muted {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-shop.route-orders .inline-search-strip :where(
            .inline-search-box,
            .btn-inline-clear,
            .payment-warning-filter,
            .small-muted
        ) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.plant-body.route-shop.route-orders .admin-order-pagination {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-orders .admin-order-pagination .pager-status {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0.35rem !important;
        text-align: center !important;
    }

    body.plant-body.route-shop.route-orders .admin-order-pagination .pager-link {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 2.75rem !important;
        padding: 0.6rem 0.4rem !important;
    }

    /* Online Sales records: two-column information tiles instead of one tall stack. */
    body.plant-body.route-shop.route-orders .admin-trn-orders-table tbody {
        gap: 0.75rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table tr {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
        padding: 0.7rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(n) {
        display: block !important;
        grid-column: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;
        padding: 0.52rem !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 0.8rem !important;
        background: rgba(0, 25, 19, 0.2) !important;
        overflow: hidden !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(1),
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(4),
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(6),
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(10) {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td::before {
        margin-bottom: 0.28rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
        padding: 0.52rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions::before {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions > *,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions :where(.btn, button, form) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions > :only-child {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 25rem) {
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row {
        grid-template-columns: 5.75rem minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-photo-cell,
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-image {
        width: 5.75rem !important;
        max-width: 5.75rem !important;
    }

    body.plant-body.route-shop.route-orders .online-sales-dashboard .admin-summary-card {
        padding: 0.65rem !important;
    }
}

/* Desktop catalogue: keep categories beside the products. Phones and tablets
   retain the horizontal, touch-scrollable category rail above. */
@media (min-width: 64rem) {
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(13.5rem, 17vw, 17rem) !important;
        align-items: start !important;
        column-gap: clamp(0.9rem, 1.5vw, 1.35rem) !important;
        row-gap: 0.9rem !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .shop-result-strip {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel {
        position: sticky !important;
        top: 1rem !important;
        grid-column: 2 !important;
        grid-row: 2 / span 8 !important;
        width: 100% !important;
        max-height: calc(100vh - 2rem) !important;
        margin: 0 !important;
        padding: 0.65rem !important;
        overflow: hidden !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-panel-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 0 0.55rem !important;
        color: #fff !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-slider-shell {
        display: block !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-slider-control {
        display: none !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-slider-track {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        max-height: calc(100vh - 6.5rem) !important;
        padding: 0.1rem 0.05rem 0.35rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-item {
        width: 100% !important;
        max-width: none !important;
        justify-content: space-between !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > :where(.shop-ux-note, .product-grid, .shop-empty-card, .shop-pager-bottom) {
        grid-column: 1 !important;
        min-width: 0 !important;
    }
}

/* Final responsive QA fixes: predictable cart placement, one checkout action,
   and readable admin table cards at tablet/phone widths. */
.cart-row,
.responsive-cart-row {
    grid-template-columns: clamp(4.5rem, 11vw, 6.5rem) minmax(0, 1fr) minmax(10rem, 12rem) !important;
    grid-template-areas:
        "image details quantity"
        "image total remove" !important;
}

.cart-row-image { grid-area: image !important; }
.cart-row-main { grid-area: details !important; min-width: 0 !important; }
.cart-qty-form,
.responsive-qty-form { grid-area: quantity !important; }
.cart-row-total { grid-area: total !important; min-width: 0 !important; }
.cart-remove-btn { grid-area: remove !important; width: 100% !important; }

@media (max-width: 53.999rem) {
    .checkout-summary-payment-btn {
        display: none !important;
    }
}

@media (max-width: 50rem) {
    .cart-row,
    .responsive-cart-row {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        grid-template-areas:
            "image details"
            "quantity quantity"
            "total total"
            "remove remove" !important;
        align-items: start !important;
    }

    .cart-row-image {
        width: 72px !important;
        height: 72px !important;
    }

    .cart-qty-form,
    .responsive-qty-form,
    .cart-row-total,
    .cart-remove-btn {
        width: 100% !important;
    }

    .delivery-distance-map-shell,
    .delivery-distance-map {
        min-height: 12rem !important;
        height: 12rem !important;
        max-height: 12rem !important;
    }

    .admin-orders-table-wrap,
    .admin-order-table-wrap,
    .shop-table-wrap,
    .photo-order-form {
        overflow-x: visible !important;
        border-radius: 18px !important;
    }

    .admin-orders-table,
    .admin-trn-orders-table,
    .admin-order-table,
    .shop-table,
    .permission-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .admin-orders-table thead,
    .admin-trn-orders-table thead,
    .admin-order-table thead,
    .shop-table thead,
    .permission-table thead {
        display: none !important;
    }

    .admin-orders-table tbody,
    .admin-trn-orders-table tbody,
    .admin-order-table tbody,
    .shop-table tbody,
    .permission-table tbody {
        display: grid !important;
        gap: 0.7rem !important;
        width: 100% !important;
    }

    .admin-orders-table tr,
    .admin-trn-orders-table tr,
    .admin-order-table tr,
    .shop-table tr,
    .permission-table tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.45rem !important;
        width: 100% !important;
        padding: 0.75rem !important;
        overflow: hidden !important;
        border: 1px solid rgba(239, 200, 91, 0.22) !important;
        border-radius: 18px !important;
        background: rgba(0, 43, 31, 0.82) !important;
    }

    .admin-orders-table td,
    .admin-trn-orders-table td,
    .admin-order-table td,
    .shop-table td,
    .permission-table td {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.35rem 0 !important;
        border: 0 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    .admin-orders-table td[data-label]::before,
    .admin-trn-orders-table td[data-label]::before,
    .admin-order-table td[data-label]::before,
    .shop-table td[data-label]::before,
    .permission-table td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 min(42%, 11rem);
        color: var(--pp-gold) !important;
        font-weight: 800;
        text-align: left;
    }

    .admin-orders-table td > *,
    .admin-trn-orders-table td > *,
    .admin-order-table td > *,
    .shop-table td > *,
    .permission-table td > * {
        max-width: 100%;
    }

    .admin-orders-table td.actions,
    .admin-trn-orders-table td.actions,
    .admin-order-table td.table-action-cell,
    .admin-order-table td.text-end,
    .shop-table td:last-child {
        align-items: stretch !important;
        flex-wrap: wrap !important;
    }

    .admin-orders-table td[colspan],
    .admin-trn-orders-table td[colspan],
    .admin-order-table td[colspan],
    .shop-table td[colspan],
    .permission-table td[colspan] {
        display: block !important;
        text-align: left !important;
    }
}

/* ======================================================================
   2026-07-15 customer catalogue controls
   Horizontal categories plus a compact result/pagination toolbar.
   The Manage Shop category rail and pager keep their existing layout.
   ====================================================================== */

/* Slider controls are customer-only; the admin category links remain direct. */
body.plant-body.route-shop.route-index .category-slider-control {
    display: none;
}

body.plant-body.route-shop.route-index .shop-layout.customer-category-layout,
body.plant-body.route-shop.route-index .shop-stock-display > .shop-layout.customer-category-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
}

body.plant-body.route-shop.route-index .customer-category-layout > .product-area {
    width: 100% !important;
    min-width: 0 !important;
}

/* Active category, page controls and item count share one balanced bar. */
body.plant-body.route-shop.route-index .shop-customer-result-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: clamp(0.55rem, 1.25vw, 1rem) !important;
    padding: clamp(0.55rem, 1vw, 0.72rem) !important;
    border: 1px solid rgba(228, 191, 87, 0.32) !important;
    border-radius: clamp(0.9rem, 1.5vw, 1.2rem) !important;
    background: linear-gradient(135deg, rgba(7, 62, 45, 0.97), rgba(2, 42, 32, 0.97)) !important;
    box-shadow: 0 0.65rem 1.7rem rgba(0, 0, 0, 0.2) !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-result-title-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(0.35rem, 0.75vw, 0.55rem) !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-active-category {
    min-width: 0 !important;
    max-width: min(15rem, 30vw) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: clamp(0.82rem, 1vw, 0.98rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .category-toggle-inline {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: clamp(2.35rem, 3vw, 2.65rem) !important;
    padding: 0.5rem clamp(0.75rem, 1.25vw, 1rem) !important;
    border-color: var(--pp-gold) !important;
    border-radius: 999px !important;
    color: #071d17 !important;
    background: var(--pp-gold) !important;
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.16) !important;
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .category-toggle-inline:hover,
body.plant-body.route-shop.route-index .shop-customer-result-strip .category-toggle-inline:focus-visible {
    color: #071d17 !important;
    background: #f0cf6c !important;
    transform: translateY(-1px);
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-result-actions {
    display: contents !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-item-count {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    min-height: clamp(2.35rem, 3vw, 2.65rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem clamp(0.7rem, 1.15vw, 0.95rem) !important;
    border: 1px solid rgba(228, 191, 87, 0.2) !important;
    border-radius: 0.8rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(0, 20, 15, 0.38) !important;
    font-size: clamp(0.76rem, 0.9vw, 0.9rem) !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-pager-inline.client-shop-pager {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    align-self: center !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: clamp(0.28rem, 0.55vw, 0.42rem) !important;
    flex-flow: row nowrap !important;
    gap: clamp(0.28rem, 0.55vw, 0.48rem) !important;
    overflow: hidden !important;
    border-color: rgba(228, 191, 87, 0.4) !important;
    background: rgba(0, 22, 17, 0.5) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(2.5rem, 3vw, 2.9rem) !important;
    min-height: clamp(2.25rem, 2.7vw, 2.55rem) !important;
    margin: 0 !important;
    padding: 0.45rem clamp(0.65rem, 1vw, 0.85rem) !important;
    border-color: var(--pp-gold) !important;
    border-radius: 999px !important;
    color: #071d17 !important;
    background: var(--pp-gold) !important;
    font-size: clamp(0.7rem, 0.76vw, 0.8rem) !important;
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn:hover,
body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn:focus-visible {
    border-color: var(--pp-gold) !important;
    color: #071d17 !important;
    background: #f0cf6c !important;
    transform: translateY(-1px);
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn.active,
body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn[aria-current="page"] {
    border-color: var(--pp-gold) !important;
    color: #071d17 !important;
    background: #f0cf6c !important;
    box-shadow: inset 0 0 0 2px rgba(7, 29, 23, 0.3), 0 0.35rem 0.9rem rgba(0, 0, 0, 0.16) !important;
}

body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn.disabled,
body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn[aria-disabled="True"],
body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn[aria-disabled="true"] {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Public categories appear as one touch-scrollable row beneath the toolbar. */
body.plant-body.route-shop.route-index .customer-category-layout .category-slider-panel,
body.plant-body.route-shop.route-index .shop-stock-display .customer-category-layout .category-slider-panel {
    position: relative !important;
    top: auto !important;
    z-index: 4 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 0 clamp(0.65rem, 1.2vw, 0.9rem) !important;
    padding: clamp(0.38rem, 0.7vw, 0.55rem) !important;
    display: block !important;
    overflow: hidden !important;
    border: 1px solid rgba(228, 191, 87, 0.25) !important;
    border-radius: clamp(0.85rem, 1.4vw, 1.1rem) !important;
    background: rgba(1, 39, 29, 0.92) !important;
    box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.15) !important;
}

body.plant-body.route-shop.route-index .customer-category-layout.categories-hidden .category-slider-panel,
body.plant-body.route-shop.route-index .shop-stock-display .customer-category-layout.categories-hidden .category-slider-panel {
    display: none !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-panel-head {
    display: none !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-shell {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(0.3rem, 0.65vw, 0.5rem) !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-track {
    min-width: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(0.35rem, 0.75vw, 0.6rem) !important;
    padding: 0.1rem 0.05rem 0.25rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-behavior: smooth;
    scroll-snap-type: inline proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(228, 191, 87, 0.72) rgba(255, 255, 255, 0.06);
    -webkit-overflow-scrolling: touch;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-track:focus-visible {
    outline: 2px solid rgba(228, 191, 87, 0.88) !important;
    outline-offset: 2px !important;
    border-radius: 0.75rem;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-track::-webkit-scrollbar {
    height: 0.32rem;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-track::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-track::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(228, 191, 87, 0.72);
}

body.plant-body.route-shop.route-index .category-slider-panel .category-item,
body.plant-body.route-shop.route-index .right-category-panel.category-slider-panel .category-item {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    width: auto !important;
    min-width: max-content !important;
    max-width: min(16rem, 72vw) !important;
    min-height: clamp(2.45rem, 3.2vw, 2.85rem) !important;
    margin: 0 !important;
    padding: 0.48rem clamp(0.7rem, 1.2vw, 0.95rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    overflow: visible !important;
    border: 1px solid rgba(228, 191, 87, 0.18) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-item span {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 12rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-item b {
    flex: 0 0 auto !important;
    min-width: 1.55rem !important;
    height: 1.55rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-inline: 0.35rem !important;
    border-radius: 999px !important;
    color: #071d17 !important;
    background: rgba(228, 191, 87, 0.92) !important;
    font-size: 0.7rem !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-item:hover,
body.plant-body.route-shop.route-index .category-slider-panel .category-item:focus-visible {
    border-color: rgba(228, 191, 87, 0.72) !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateY(-1px);
}

body.plant-body.route-shop.route-index .category-slider-panel .category-item.active {
    border-color: var(--pp-gold) !important;
    color: #071d17 !important;
    background: var(--pp-gold) !important;
    box-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.16) !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-item.active b {
    color: #fff !important;
    background: rgba(1, 39, 29, 0.88) !important;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-control {
    flex: 0 0 auto !important;
    width: clamp(2.35rem, 3vw, 2.7rem) !important;
    min-width: clamp(2.35rem, 3vw, 2.7rem) !important;
    height: clamp(2.35rem, 3vw, 2.7rem) !important;
    min-height: clamp(2.35rem, 3vw, 2.7rem) !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(228, 191, 87, 0.48) !important;
    border-radius: 999px !important;
    color: #071d17 !important;
    background: var(--pp-gold) !important;
    font-family: system-ui, sans-serif !important;
    font-size: clamp(1.35rem, 2vw, 1.65rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.16) !important;
    cursor: pointer;
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-control:hover,
body.plant-body.route-shop.route-index .category-slider-panel .category-slider-control:focus-visible {
    background: #f0cf6c !important;
    transform: translateY(-1px);
}

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-control:disabled {
    opacity: 0.34 !important;
    cursor: default !important;
    transform: none !important;
}

/* Smaller containers use the same idea over two tidy rows. */
@media (max-width: 50rem) {
    body.plant-body.route-shop.route-index .shop-customer-result-strip {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-result-title-wrap {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-item-count {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-pager-inline.client-shop-pager {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        margin-inline: auto !important;
    }
}

@media (max-width: 42rem) {
    body.plant-body.route-shop.route-index .shop-customer-result-strip {
        gap: 0.5rem !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-active-category {
        max-width: min(10rem, 32vw) !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-pager-inline.client-shop-pager {
        width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        justify-content: flex-start !important;
        flex-flow: row nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(228, 191, 87, 0.7) transparent;
        -webkit-overflow-scrolling: touch;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .client-shop-pager .btn {
        min-width: 2.55rem !important;
        min-height: 2.45rem !important;
        padding-inline: 0.7rem !important;
    }
}

@media (max-width: 30rem) {
    body.plant-body.route-shop.route-index .shop-customer-result-strip {
        padding: 0.5rem !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-result-title-wrap {
        gap: 0.3rem !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-active-category {
        max-width: min(7rem, 27vw) !important;
        font-size: 0.78rem !important;
    }

    body.plant-body.route-shop.route-index .shop-customer-result-strip .category-toggle-inline,
    body.plant-body.route-shop.route-index .shop-customer-result-strip .shop-item-count {
        min-height: 2.3rem !important;
        padding-inline: 0.65rem !important;
        font-size: 0.7rem !important;
    }

    body.plant-body.route-shop.route-index .category-slider-panel .category-slider-shell {
        grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem !important;
        gap: 0.28rem !important;
    }

body.plant-body.route-shop.route-index .category-slider-panel .category-slider-control {
        width: 2.35rem !important;
        min-width: 2.35rem !important;
        height: 2.35rem !important;
        min-height: 2.35rem !important;
    }
}

/* On desktop the same category links become a sticky side panel. */
@media (min-width: 64rem) {
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) clamp(13.5rem, 17vw, 17rem) !important;
        align-items: start !important;
        column-gap: clamp(0.9rem, 1.5vw, 1.35rem) !important;
        row-gap: 0.9rem !important;
    }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .shop-result-strip { grid-column: 1 / -1 !important; }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel {
        position: sticky !important; top: 1rem !important; grid-column: 2 !important; grid-row: 2 / span 8 !important;
        width: 100% !important; max-height: calc(100vh - 2rem) !important; margin: 0 !important; padding: 0.65rem !important; overflow: hidden !important;
    }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-panel-head {
        display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 0 0.55rem !important; color: #fff !important;
    }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-slider-shell { display: block !important; }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-slider-control { display: none !important; }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-slider-track {
        display: flex !important; flex-direction: column !important; align-items: stretch !important; max-height: calc(100vh - 6.5rem) !important;
        padding: 0.1rem 0.05rem 0.35rem !important; overflow-x: hidden !important; overflow-y: auto !important;
    }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > .category-slider-panel .category-item {
        width: 100% !important; max-width: none !important; justify-content: space-between !important;
    }
    body.plant-body.route-shop.route-index .customer-category-layout > .product-area > :where(.shop-ux-note, .product-grid, .shop-empty-card, .shop-pager-bottom) {
        grid-column: 1 !important; min-width: 0 !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout.categories-hidden > .product-area {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-index .customer-category-layout.categories-hidden > .product-area > :where(.shop-ux-note, .product-grid, .shop-empty-card, .shop-pager-bottom) {
        grid-column: 1 / -1 !important;
    }
}

/* Pager state clarity: available links are gold; only unavailable links are grey. */
body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link):not(.disabled):not([aria-disabled="true"]):not([aria-disabled="True"]) {
    opacity: 1 !important;
    color: #071d17 !important;
    border-color: var(--pp-gold) !important;
    background: var(--pp-gold) !important;
}

body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link):not(.disabled):not([aria-disabled="true"]):not([aria-disabled="True"]):hover,
body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link):not(.disabled):not([aria-disabled="true"]):not([aria-disabled="True"]):focus-visible,
body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link).active,
body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link)[aria-current="page"] {
    opacity: 1 !important;
    color: #071d17 !important;
    border-color: #f0cf6c !important;
    background: #f0cf6c !important;
    box-shadow: inset 0 0 0 2px rgba(7, 29, 23, 0.3), 0 0.3rem 0.8rem rgba(0, 0, 0, 0.16) !important;
}

body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link).disabled,
body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link)[aria-disabled="true"],
body.plant-body :where(.shop-pager, .shop-pagination, .admin-pager)
    :where(a.btn, a.pager-link)[aria-disabled="True"] {
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* Final phone/tablet corrections after live responsive review. */
@media (max-width: 50rem) {
    /* Order Details used desktop-only minimum widths that overrode the card layout. */
    body.plant-body.route-shop.route-orderdetails #order-details .admin-order-detail-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-orderdetails #order-details .admin-trn-detail-table,
    body.plant-body.route-shop.route-orderdetails #order-details .admin-trn-detail-table tbody,
    body.plant-body.route-shop.route-orderdetails #order-details .admin-trn-detail-table tr {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-orderdetails #order-details .admin-trn-detail-table td,
    body.plant-body.route-shop.route-orderdetails #order-details .admin-trn-detail-table td:nth-child(3) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-orderdetails #order-details .admin-detail-card div {
        display: grid !important;
        grid-template-columns: minmax(7.5rem, 0.8fr) minmax(0, 1.2fr) !important;
        align-items: start !important;
        gap: 0.65rem !important;
    }

    body.plant-body.route-shop.route-orderdetails #order-details .admin-detail-card strong,
    body.plant-body.route-shop.route-orderdetails #order-details .admin-detail-card .copy-value-btn {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: right !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.plant-body.route-shop.route-orderdetails #order-details .admin-status-update-card,
    body.plant-body.route-shop.route-orderdetails #order-details .admin-status-update-form {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 0.65rem !important;
    }

    /* Product Photos desktop table widths were stretching the mobile page. */
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .admin-order-table,
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell .photo-sort-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (max-width: 46rem) {
    /* Centre customer checkout heading without changing the form alignment. */
    body.plant-body.route-shop.route-checkout .checkout-heading-row,
    body.plant-body.route-shop.route-checkout .checkout-heading-row > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    body.plant-body.route-shop.route-checkout .checkout-heading-row h2,
    body.plant-body.route-shop.route-checkout .checkout-heading-row .shop-muted {
        display: block !important;
        width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    /* Keep all admin phone headings readable and centred above their actions. */
    body.plant-body.route-productphotos.route-index .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading > div:first-child,
    body.plant-body.route-shop.route-orderdetails .admin-inline-page-heading > div:first-child,
    body.plant-body.route-auditlogs .admin-inline-page-heading > div:first-child {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: none !important;
        text-align: center !important;
    }

    body.plant-body.route-productphotos.route-index .admin-inline-page-heading :where(h1, h2, p, .shop-muted),
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading :where(h1, h2, p, .shop-muted),
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading :where(h1, h2, p, .shop-muted),
    body.plant-body.route-shop.route-orderdetails .admin-inline-page-heading :where(h1, h2, p, .shop-muted),
    body.plant-body.route-auditlogs .admin-inline-page-heading :where(h1, h2, p, .shop-muted) {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    body.plant-body.route-productphotos.route-index .admin-inline-page-heading h2,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading h2,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading h2,
    body.plant-body.route-shop.route-orderdetails .admin-inline-page-heading h2,
    body.plant-body.route-auditlogs .admin-inline-page-heading h1 {
        font-size: clamp(1.8rem, 9vw, 2.65rem) !important;
        line-height: 1.05 !important;
    }

    body.plant-body.route-productphotos.route-index .admin-inline-heading-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-heading-actions,
    body.plant-body.route-shop.route-systemsettings .admin-inline-heading-actions,
    body.plant-body.route-shop.route-orderdetails .admin-inline-heading-actions,
    body.plant-body.route-auditlogs .admin-inline-heading-actions,
    body.plant-body.route-productphotos.route-index .admin-command-header-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions,
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions,
    body.plant-body.route-auditlogs .admin-command-header-actions {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions,
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions,
    body.plant-body.route-auditlogs .admin-command-header-actions {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)) !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
    }

    body.plant-body :where(.admin-command-header-actions, .admin-inline-heading-actions)
        :where(.btn, button, a, summary) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 2.75rem !important;
        padding: 0.62rem 0.58rem !important;
        font-size: clamp(0.74rem, 3vw, 0.88rem) !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        text-align: center !important;
    }
}

@media (max-width: 30rem) {
    body.plant-body.route-shop.route-orderdetails #order-details .admin-detail-card div {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.plant-body.route-shop.route-orderdetails #order-details .admin-detail-card strong,
    body.plant-body.route-shop.route-orderdetails #order-details .admin-detail-card .copy-value-btn {
        text-align: left !important;
    }
}

/* Cascade lock for the reviewed admin-phone layouts. */
@media (max-width: 46rem) {
    body.plant-body.route-productphotos.route-index .product-photo-admin-shell > .admin-inline-page-heading,
    body.plant-body.route-shop.route-orderdetails #order-details > .admin-inline-page-heading,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading,
    body.plant-body.route-auditlogs .admin-inline-page-heading,
    body.plant-body.route-shop.route-orders .online-sales-heading {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions,
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions,
    body.plant-body.route-auditlogs .admin-command-header-actions,
    body.plant-body.route-shop.route-orders .admin-command-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0.55rem !important;
        overflow: visible !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions > *,
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions > *,
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions > *,
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions > *,
    body.plant-body.route-auditlogs .admin-command-header-actions > *,
    body.plant-body.route-shop.route-orders .admin-command-header-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form),
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form),
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form),
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form),
    body.plant-body.route-auditlogs .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form),
    body.plant-body.route-shop.route-orders .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form) {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-productphotos.route-index .admin-command-header-actions :where(.btn, button, a, summary),
    body.plant-body.route-shop.route-orderdetails .admin-command-header-actions :where(.btn, button, a, summary),
    body.plant-body.route-shop.route-deliverysettings .admin-command-header-actions :where(.btn, button, a, summary),
    body.plant-body.route-shop.route-systemsettings .admin-command-header-actions :where(.btn, button, a, summary),
    body.plant-body.route-auditlogs .admin-command-header-actions :where(.btn, button, a, summary),
    body.plant-body.route-shop.route-orders .admin-command-header-actions :where(.btn, button, a, summary) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 3rem !important;
        padding: 0.65rem 0.45rem !important;
        font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
        text-align: center !important;
    }

    body.plant-body.route-productphotos.route-index .admin-inline-page-heading .admin-tools-menu-panel,
    body.plant-body.route-shop.route-orderdetails .admin-inline-page-heading .admin-tools-menu-panel,
    body.plant-body.route-shop.route-deliverysettings .admin-inline-page-heading .admin-tools-menu-panel,
    body.plant-body.route-shop.route-systemsettings .admin-inline-page-heading .admin-tools-menu-panel,
    body.plant-body.route-auditlogs .admin-inline-page-heading .admin-tools-menu-panel,
    body.plant-body.route-shop.route-orders .online-sales-heading .admin-tools-menu-panel {
        position: absolute !important;
        inset: calc(100% + 0.35rem) 0 auto 0 !important;
        z-index: 1200 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60dvh !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row {
        display: grid !important;
        grid-template-columns: 6.5rem minmax(0, 1fr) !important;
        grid-template-areas:
            "check check"
            "photo group"
            "main main"
            "stock price" !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-photo-cell { grid-area: photo !important; }
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-display-check { grid-area: check !important; }
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-group { grid-area: group !important; }
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-main { grid-area: main !important; }
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-stock { grid-area: stock !important; }
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-online-row .admin-list-price { grid-area: price !important; }

    body.plant-body.route-shop.route-orders .online-sales-totals-row,
    body.plant-body.route-shop.route-orders .online-sales-status-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table tr {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(1),
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(4),
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(6),
    body.plant-body.route-shop.route-orders .admin-trn-orders-table td:nth-child(10) {
        grid-column: 1 / -1 !important;
    }
}

/* Product Photos owns its header layout.  Do not let the shared admin heading
   rules reduce the copy/actions to their min-content width on phones. */
body.plant-body.route-productphotos.route-index .product-photos-page-heading {
    display: grid !important;
    grid-template-columns: minmax(18rem, 1fr) auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: clamp(0.85rem, 1.5vw, 1.25rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy h2 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 0 0.45rem !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy .shop-muted {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 60rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions,
body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
    overflow: visible !important;
}

body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions > * {
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

@media (max-width: 46rem) {
    body.plant-body.route-productphotos.route-index .product-photos-page-heading {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 0.9rem !important;
        padding: 1rem !important;
        text-align: center !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy,
    body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy h2,
    body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy .shop-muted,
    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy h2 {
        font-size: clamp(2.15rem, 11vw, 2.9rem) !important;
        line-height: 1 !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-copy .shop-muted {
        font-size: clamp(0.84rem, 3.5vw, 0.96rem) !important;
        line-height: 1.42 !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0.55rem !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form) {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-command-header-actions :where(.btn, button, a, summary) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 3rem !important;
        padding: 0.65rem 0.5rem !important;
        font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
        line-height: 1.18 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .shared-admin-tools-menu {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.plant-body.route-productphotos.route-index .product-photos-page-heading-actions .admin-tools-menu-panel {
        position: absolute !important;
        inset: calc(100% + 0.35rem) 0 auto 0 !important;
        z-index: 1200 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60dvh !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* Users list owns its header layout for the same reason as Product Photos:
   the shared heading rules are too broad for this action-heavy page. */
body.plant-body.route-users.route-index .users-page-heading {
    display: grid !important;
    grid-template-columns: minmax(18rem, 1fr) auto !important;
    align-items: center !important;
    justify-items: stretch !important;
    gap: clamp(0.85rem, 1.5vw, 1.25rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body.plant-body.route-users.route-index .users-page-heading-copy {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.plant-body.route-users.route-index .users-page-heading-copy h2,
body.plant-body.route-users.route-index .users-page-heading-copy .shop-muted {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

body.plant-body.route-users.route-index .users-page-heading-copy h2 {
    margin: 0 0 0.45rem !important;
}

body.plant-body.route-users.route-index .users-page-heading-copy .shop-muted {
    max-width: 60rem !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

body.plant-body.route-users.route-index .users-page-heading-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
}

body.plant-body.route-users.route-index .users-page-heading-actions .admin-command-header-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.permission-readonly-fieldset {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.permission-readonly-fieldset[disabled] {
    opacity: 0.78;
}

.permission-readonly-fieldset[disabled] a {
    opacity: 1;
    pointer-events: auto;
}

.permission-readonly-note {
    margin-bottom: 1rem !important;
}

body.plant-body.route-usermodules.route-edit .permissions-page-heading {
    display: grid !important;
    grid-template-columns: minmax(18rem, 1fr) auto !important;
    align-items: center !important;
    gap: clamp(0.85rem, 1.5vw, 1.25rem) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
}

body.plant-body.route-usermodules.route-edit .permissions-page-heading-copy,
body.plant-body.route-usermodules.route-edit .permissions-page-heading-copy :where(h2, .shop-muted),
body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

body.plant-body.route-usermodules.route-edit .permissions-page-heading-copy h2 {
    margin-bottom: 0.45rem !important;
}

body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
    overflow: visible !important;
}

@media (max-width: 46rem) {
    body.plant-body.route-usermodules.route-edit .permissions-page-heading {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 0.9rem !important;
        padding: 1rem !important;
        text-align: center !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-copy,
    body.plant-body.route-usermodules.route-edit .permissions-page-heading-copy :where(h2, .shop-muted),
    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-copy h2 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
        line-height: 1 !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 0.55rem !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions .admin-command-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0.55rem !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions .admin-command-header-actions > *,
    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions > .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form) {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions :where(.btn, button, a, summary) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 3rem !important;
        padding: 0.65rem 0.5rem !important;
        font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
        line-height: 1.18 !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions .shared-admin-tools-menu {
        position: relative !important;
        overflow: visible !important;
    }

    body.plant-body.route-usermodules.route-edit .permissions-page-heading-actions .admin-tools-menu-panel {
        position: absolute !important;
        inset: calc(100% + 0.35rem) 0 auto 0 !important;
        z-index: 1200 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

@media (max-width: 46rem) {
    body.plant-body.route-users.route-index .users-page-heading {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        gap: 0.9rem !important;
        padding: 1rem !important;
        text-align: center !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-copy,
    body.plant-body.route-users.route-index .users-page-heading-copy h2,
    body.plant-body.route-users.route-index .users-page-heading-copy .shop-muted,
    body.plant-body.route-users.route-index .users-page-heading-actions {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        text-align: center !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-copy h2 {
        font-size: clamp(2.15rem, 11vw, 2.9rem) !important;
        line-height: 1 !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-copy .shop-muted {
        font-size: clamp(0.84rem, 3.5vw, 0.96rem) !important;
        line-height: 1.42 !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        gap: 0.55rem !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions .admin-command-header-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        gap: 0.55rem !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions .admin-command-header-actions > *,
    body.plant-body.route-users.route-index .users-page-heading-actions > .btn {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions .admin-command-header-actions > :where(.shared-admin-tools-menu, .admin-header-logout-form) {
        grid-column: 1 / -1 !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions :where(.btn, button, a, summary) {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 3rem !important;
        padding: 0.65rem 0.5rem !important;
        font-size: clamp(0.72rem, 3vw, 0.86rem) !important;
        line-height: 1.18 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions .shared-admin-tools-menu {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    body.plant-body.route-users.route-index .users-page-heading-actions .admin-tools-menu-panel {
        position: absolute !important;
        inset: calc(100% + 0.35rem) 0 auto 0 !important;
        z-index: 1200 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: 60dvh !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    /* Portrait Users cards: keep labels close to their values instead of
       pushing the value to the far edge of the phone. */
    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0.55rem !important;
        text-align: left !important;
    }

    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td[data-label]::before {
        flex: 0 0 6.75rem !important;
        width: 6.75rem !important;
        max-width: 6.75rem !important;
        text-align: left !important;
    }

    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td > * {
        min-width: 0 !important;
        margin-inline: 0 !important;
        text-align: left !important;
        overflow-wrap: anywhere !important;
    }

    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td.table-action-cell {
        align-items: center !important;
        justify-content: flex-start !important;
    }
}

@media (max-width: 24rem) {
    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td[data-label]::before {
        flex-basis: 5.8rem !important;
        width: 5.8rem !important;
        max-width: 5.8rem !important;
    }
}

/* ======================================================================
   2026-07-21 final responsive audit fixes
   ====================================================================== */

/* Online Sales: make the desktop table consume the wrapper exactly and keep
   the action controls together. This removes the empty strip beside Action. */
@media (min-width: 46.001rem) {
    body.plant-body.route-shop.route-orders .admin-orders-table-wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-scroll-table,
    body.plant-body.route-shop.route-orders .admin-trn-orders-table.mobile-card-table {
        width: 100% !important;
        min-width: 88rem !important;
        max-width: none !important;
        table-layout: fixed !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(1) { width: 11% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(2) { width: 9% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(3) { width: 10% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(4) { width: 13% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(5) { width: 7% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(6) { width: 16% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(7) { width: 7% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(8) { width: 8% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(9) { width: 8% !important; }
    body.plant-body.route-shop.route-orders .admin-trn-orders-table :is(th, td):nth-child(10) { width: 11% !important; }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions {
        padding-inline: 0.65rem !important;
    }
}

body.plant-body.route-shop.route-orders .admin-order-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.plant-body.route-shop.route-orders .admin-order-actions > *,
body.plant-body.route-shop.route-orders .admin-order-actions :where(form, .btn, button) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Manage Shop desktop controls: use the available width rather than leaving
   a large empty area to the left of the bulk actions. */
@media (min-width: 60rem) {
    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel {
        overflow: hidden !important;
        border-color: rgba(228, 191, 87, 0.42) !important;
        background: linear-gradient(145deg, rgba(6, 103, 72, 0.96), rgba(3, 69, 50, 0.98)) !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .admin-bulk-online-panel .admin-safe-panel-head {
        min-height: 3.75rem !important;
        padding: 0.8rem 1rem !important;
        color: #fff !important;
        background: linear-gradient(135deg, rgba(10, 119, 82, 0.98), rgba(5, 80, 58, 0.98)) !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-online-form {
        display: grid !important;
        grid-template-columns: minmax(18rem, 1fr) auto !important;
        grid-template-areas:
            "picker picker"
            "preview actions" !important;
        align-items: center !important;
        gap: 0.8rem 1rem !important;
        width: 100% !important;
        padding: 1rem !important;
        background: rgba(0, 42, 31, 0.22) !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-photo-picker-summary {
        grid-area: picker !important;
        display: grid !important;
        grid-template-columns: max-content max-content max-content !important;
        justify-content: start !important;
        align-items: center !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-selected-preview {
        grid-area: preview !important;
        min-height: 2.8rem !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.7rem 0.85rem !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-online-action-row {
        grid-area: actions !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(9rem, 1fr)) !important;
        justify-content: end !important;
        gap: 0.65rem !important;
        width: auto !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-photo-picker-summary .btn,
    body.plant-body.route-shop.route-index.shop-admin-mode .bulk-online-action-row .btn {
        min-height: 2.8rem !important;
        padding: 0.65rem 1rem !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .shop-admin-result-strip {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 0.8rem 1rem !important;
        padding: 0.75rem !important;
    }

    body.plant-body.route-shop.route-index.shop-admin-mode .shop-admin-result-strip .shop-result-actions {
        justify-content: flex-end !important;
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Give both the public and admin category areas a clearly green surface. */
body.plant-body.route-shop.route-index :where(.category-panel, .right-category-panel, .category-slider-panel) {
    border-color: rgba(228, 191, 87, 0.38) !important;
    background-color: #08734d !important;
    background-image: linear-gradient(180deg, #0a7c54 0%, #066342 100%) !important;
    box-shadow: 0 0.65rem 1.65rem rgba(0, 0, 0, 0.2) !important;
}

/* Keep the Bulk Show Online heading readable against its green header. */
body.plant-body.route-shop.route-index.shop-admin-mode
    .admin-bulk-online-panel .admin-safe-panel-head {
    background-color: #08734d !important;
    background-image: linear-gradient(135deg, #0a7c54 0%, #066342 100%) !important;
}

body.plant-body.route-shop.route-index.shop-admin-mode
    .admin-bulk-online-panel .admin-safe-panel-head .admin-collapsible-title,
body.plant-body.route-shop.route-index.shop-admin-mode
    .admin-bulk-online-panel .admin-safe-panel-head .admin-collapsible-hint,
body.plant-body.route-shop.route-index.shop-admin-mode
    .admin-bulk-online-panel .admin-safe-panel-head b {
    color: #fff !important;
}

/* Users phone cards: actions stay compact instead of stretching edge-to-edge. */
@media (max-width: 46rem) {
    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td.table-action-cell {
        display: inline-flex !important;
        width: fit-content !important;
        max-width: 100% !important;
        justify-self: start !important;
        align-self: start !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.45rem !important;
        padding: 0.25rem 0 !important;
    }

    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td.table-action-cell::before {
        content: none !important;
        display: none !important;
    }

    body.plant-body.route-users.route-index .user-admin-shell .admin-order-table td.table-action-cell > :where(.btn, a.btn, button) {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 5.5rem !important;
        max-width: 100% !important;
        min-height: 2.55rem !important;
        padding: 0.55rem 0.8rem !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions .admin-order-actions {
        grid-column: 1 / -1 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.plant-body.route-shop.route-orders .admin-trn-orders-table td.actions .admin-order-actions > :first-child:last-child {
        grid-column: 1 / -1 !important;
    }
}