:root {
    --plant-bg: #021210;
    --plant-bg-2: #06231d;
    --plant-card: #0f4b2e;
    --plant-card-2: #092c25;
    --plant-green: #155c38;
    --plant-green-soft: #1c7045;
    --plant-gold: #efc85b;
    --plant-gold-dark: #b99432;
    --plant-text: #ffffff;
    --plant-muted: rgba(255, 255, 255, 0.76);
    --plant-border: rgba(255, 255, 255, 0.12);
    --plant-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

html {
    font-size: 14px;
    scroll-behavior: smooth;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

* {
    box-sizing: border-box;
}

body.plant-body {
    margin: 0;
    min-height: 100vh;
    background: #000;
    color: var(--plant-text);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

    /*
  Put your JPG background here:
  wwwroot/img/plant-background.jpg

  The fixed image stays behind the page, while the dark overlays make it
  fade greener at the top and darker/black as the user scrolls downward.
*/
    body.plant-body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -3;
        background-image: url('/img/plant-background.jpg');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    body.plant-body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(2, 18, 16, 0.20) 0%, rgba(2, 18, 16, 0.68) 42%, rgba(0, 0, 0, 0.98) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.08) 52%, rgba(0, 0, 0, 0.52));
    }

.plant-main {
    position: relative;
    z-index: 1;
}

.btn:focus,
.btn:active:focus,
.form-control:focus {
    box-shadow: 0 0 0 0.18rem rgba(239, 200, 91, 0.28);
    border-color: var(--plant-gold);
}

.plant-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 1.3rem 3vw;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.46), rgba(0, 0, 0, 0));
}

.plant-nav-inner {
    max-width: 1480px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.plant-logo {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
}

    .plant-logo:hover {
        color: #fff;
    }

/*
  Replace this placeholder path with your real PNG file:
  wwwroot/img/plant-paradise-logo.png
*/
.plant-logo-img {
    display: block;
    width: clamp(220px, 18vw, 380px);
    height: auto;
    max-height: 130px;
    object-fit: contain;
}

.plant-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 2vw, 2.1rem);
    flex-wrap: wrap;
}

    .plant-menu a {
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    }

        .plant-menu a:hover {
            color: var(--plant-gold);
        }

.plant-hero {
    position: relative;
    min-height: 760px;
    display: flex;
    align-items: center;
    padding: 130px 8vw 90px;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(2, 18, 16, 0.62) 0%, rgba(2, 18, 16, 0.30) 50%, rgba(0, 0, 0, 0.58) 100%);
}

    .plant-hero::before,
    .plant-hero::after {
        content: "";
        position: absolute;
        border-radius: 999px 0 999px 0;
        opacity: 0.22;
        transform: rotate(-18deg);
        background: linear-gradient(120deg, rgba(117, 177, 77, 0.8), rgba(7, 53, 37, 0));
    }

    .plant-hero::before {
        width: 620px;
        height: 140px;
        right: -110px;
        top: 170px;
    }

    .plant-hero::after {
        width: 760px;
        height: 180px;
        right: 8vw;
        bottom: 60px;
    }

.plant-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.plant-kicker {
    margin: 0 0 1rem;
    color: var(--plant-gold);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.82rem;
    font-weight: 800;
}

.plant-hero h1,
.section-heading h2,
.shop-section-heading h2,
.plant-footer-cta h2 {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.04em;
}

.plant-hero h1 {
    margin: 0;
    font-size: clamp(4rem, 7vw, 7.6rem);
    line-height: 0.98;
    font-weight: 500;
}

.gold-stroke {
    width: min(420px, 70vw);
    height: 24px;
    margin: 2.2rem 0 1.6rem;
    background: linear-gradient(90deg, transparent, var(--plant-gold), transparent);
    border-radius: 50%;
    transform: rotate(-2deg);
}

.plant-hero-subtitle {
    font-size: clamp(1.15rem, 2vw, 1.55rem);
    font-weight: 700;
    margin: 0 0 2rem;
    color: #fff;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-gold,
.btn-outline-gold:hover {
    color: #061814;
    background: var(--plant-gold);
    border-color: var(--plant-gold);
    font-weight: 800;
    border-radius: 999px;
    padding: 0.72rem 1.65rem;
}

    .btn-gold:hover {
        color: #061814;
        background: #ffd96f;
        border-color: #ffd96f;
    }

.btn-ghost,
.btn-ghost-dark,
.btn-outline-gold {
    border-radius: 999px;
    padding: 0.72rem 1.65rem;
    font-weight: 800;
}

.btn-ghost {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}

    .btn-ghost:hover {
        color: #061814;
        background: #fff;
    }

.btn-ghost-dark {
    color: #fff;
    border: 1px solid var(--plant-border);
}

    .btn-ghost-dark:hover {
        color: #061814;
        background: #fff;
    }

.btn-outline-gold {
    color: var(--plant-gold);
    border: 1px solid var(--plant-gold);
    background: transparent;
}

.plant-intro {
    max-width: 1380px;
    margin: -60px auto 0;
    padding: 0 3vw 70px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 0;
    align-items: stretch;
    position: relative;
    z-index: 5;
}

.intro-card,
.intro-plant-card {
    min-height: 330px;
    background: var(--plant-card);
    box-shadow: var(--plant-shadow);
}

.intro-card {
    border-radius: 28px 0 0 28px;
    padding: clamp(2rem, 4vw, 3.5rem);
}

.rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--plant-gold);
    background: #fff;
    border-radius: 999px;
    padding: 0.48rem 1rem;
    margin-bottom: 1.3rem;
    font-weight: 800;
}

    .rating-pill strong {
        color: #061814;
    }

.intro-card p {
    color: #fff;
    max-width: 560px;
    font-weight: 600;
    line-height: 1.75;
}

.intro-stats {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--plant-border);
    display: flex;
    gap: 2.4rem;
}

    .intro-stats strong {
        display: block;
        color: var(--plant-gold);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 2.5rem;
        line-height: 1;
    }

    .intro-stats span {
        color: var(--plant-muted);
        font-weight: 700;
    }

.intro-plant-card {
    position: relative;
    border-radius: 0 28px 28px 0;
    overflow: hidden;
    background: radial-gradient(circle at 75% 80%, #7f8a49 0 190px, transparent 192px), #12512f;
}

.leaf {
    position: absolute;
    border-radius: 90% 0 90% 0;
    background: linear-gradient(135deg, #d7ead1 0 14%, #47784f 15% 42%, #e4f2df 43% 48%, #2d5e3f 49% 100%);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.18);
}

.leaf-one {
    width: 300px;
    height: 130px;
    right: 180px;
    top: 40px;
    transform: rotate(24deg);
}

.leaf-two {
    width: 360px;
    height: 150px;
    right: 60px;
    top: 95px;
    transform: rotate(-8deg);
}

.leaf-three {
    width: 270px;
    height: 115px;
    right: 250px;
    bottom: 36px;
    transform: rotate(-30deg);
}

.feature-chip {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 0.55rem 1rem;
    font-weight: 800;
}

    .feature-chip::before {
        content: "";
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 0 0 5px rgba(255,255,255,0.15);
    }

.chip-one {
    left: 90px;
    top: 125px;
}

.chip-two {
    right: 75px;
    top: 70px;
}

.chip-three {
    left: 175px;
    bottom: 60px;
}

.plant-services,
.plant-footer-cta {
    max-width: 1380px;
    margin: 0 auto;
    padding: 70px 3vw;
}

.shop-section {
    width: min(1760px, calc(100vw - 48px));
    max-width: none;
    margin: 0 auto;
    padding: clamp(110px, 10vh, 150px) clamp(1rem, 3vw, 4rem) 70px;
}

.section-heading,
.shop-section-heading {
    text-align: center;
    margin-bottom: 3rem;
}

    .section-heading h2,
    .shop-section-heading h2,
    .plant-footer-cta h2 {
        font-size: clamp(3rem, 5vw, 5rem);
        font-weight: 500;
        line-height: 1.05;
        margin: 0 0 1rem;
    }

    .section-heading p,
    .plant-footer-cta p {
        color: var(--plant-muted);
        font-weight: 600;
        margin: 0 auto;
        max-width: 760px;
    }

.service-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 1.5rem;
}

.service-card {
    min-height: 250px;
    padding: 2.4rem 1.7rem;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(145deg, #124f31, #062a24);
    border: 1px solid var(--plant-border);
    position: relative;
    overflow: hidden;
}

    .service-card::after {
        content: "";
        position: absolute;
        inset: auto -30px -85px -30px;
        height: 150px;
        background: rgba(7, 57, 37, 0.7);
        border-radius: 50% 50% 0 0;
    }

    .service-card span {
        display: block;
        position: relative;
        z-index: 1;
        color: var(--plant-gold);
        font-size: 3.4rem;
        line-height: 1;
        margin-bottom: 1.2rem;
    }

    .service-card h3,
    .service-card p {
        position: relative;
        z-index: 1;
    }

    .service-card h3 {
        margin: 0 0 0.8rem;
        font-size: 1.45rem;
    }

    .service-card p {
        color: var(--plant-muted);
        margin: 0;
    }

.shop-section {
    border: 1px solid var(--plant-border);
    background: linear-gradient(180deg, rgba(2, 18, 16, 0.68), rgba(0, 0, 0, 0.92));
    border-radius: 34px;
    min-height: calc(100vh - 24px);
}

.shop-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    text-align: left;
}

.admin-only-panel {
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--plant-border);
    border-radius: 999px;
    padding: 0.45rem 0.55rem 0.45rem 1.1rem;
    background: rgba(255,255,255,0.06);
}

    .admin-only-panel span {
        color: var(--plant-gold);
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.78rem;
    }

.shop-toolbar {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--plant-border);
    border-radius: 22px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.shop-search-form {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

    .shop-search-form .form-control {
        flex: 1 1 520px;
        min-width: min(520px, 100%);
        height: 50px;
        border: 0;
        border-radius: 999px;
        padding-left: 1.2rem;
    }

.shop-layout {
    display: grid;
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.category-panel {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 125px);
    overflow-y: auto;
    border-radius: 22px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--plant-border);
    padding: 0.7rem;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    color: var(--plant-muted);
    text-decoration: none;
    font-weight: 800;
}

    .category-item:hover,
    .category-item.active {
        background: var(--plant-green-soft);
        color: #fff;
    }

    .category-item b {
        min-width: 32px;
        text-align: center;
        border-radius: 999px;
        padding: 0.16rem 0.45rem;
        color: #061814;
        background: var(--plant-gold);
    }

.product-area {
    min-width: 0;
}

.shop-result-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--plant-muted);
}

    .shop-result-strip span {
        color: #fff;
        font-weight: 900;
        font-size: 1.25rem;
    }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 1.5rem;
}

.product-card {
    display: flex;
    flex-direction: column;
    min-height: 540px;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(145deg, #0f4b2e, #072b25);
    border: 1px solid var(--plant-border);
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}

.product-image-wrap {
    position: relative;
    min-height: 255px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 70% 70%, rgba(239, 200, 91, 0.18), transparent 38%), rgba(255,255,255,0.05);
    padding: 1.4rem;
}

.product-image {
    width: 100%;
    max-width: 240px;
    height: 210px;
    object-fit: contain;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,0.35));
}

.stock-pill {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border-radius: 999px;
    padding: 0.38rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 900;
}

    .stock-pill.in-stock {
        background: rgba(239, 200, 91, 0.95);
        color: #061814;
    }

    .stock-pill.out-stock {
        background: rgba(255,255,255,0.86);
        color: #8b1a1a;
    }

.product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
}

    .product-content h3 {
        min-height: 64px;
        margin: 0 0 0.9rem;
        font-size: clamp(1.25rem, 1.8vw, 1.75rem);
        font-weight: 900;
        line-height: 1.1;
    }

.product-price {
    color: var(--plant-gold);
    font-size: 1.65rem;
    font-weight: 900;
    margin: 0.3rem 0;
}

.product-meta {
    color: var(--plant-muted);
    line-height: 1.55;
}

    .product-meta strong {
        color: #fff;
    }

.qty-label {
    margin-top: 0.9rem;
    margin-bottom: 0.35rem;
    color: #fff;
    font-weight: 800;
}

.qty-input {
    width: 100%;
    max-width: 230px;
    height: 42px;
    text-align: center;
    border: 0;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

.btn-cart {
    color: #061814;
    background: #fff;
    border-color: #fff;
    border-radius: 999px;
    font-weight: 900;
    min-width: 145px;
}

    .btn-cart:hover {
        color: #061814;
        background: var(--plant-gold);
        border-color: var(--plant-gold);
    }

.image-upload-form {
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--plant-border);
}

.upload-label {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--plant-gold);
    font-weight: 900;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-control-sm {
    border-radius: 999px;
}

.alert {
    border: 0;
    border-radius: 18px;
    font-weight: 700;
}

.shop-empty-card {
    min-height: 260px;
    border: 1px solid var(--plant-border);
    border-radius: 26px;
    background: rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--plant-muted);
}

.plant-footer-cta {
    padding-top: 30px;
    padding-bottom: 100px;
}

    .plant-footer-cta h2 {
        max-width: 720px;
    }

    .plant-footer-cta p {
        margin: 0;
    }

@media (max-width: 1250px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }

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

    .intro-card {
        border-radius: 28px 28px 0 0;
    }

    .intro-plant-card {
        border-radius: 0 0 28px 28px;
    }
}

@media (max-width: 950px) {
    .plant-nav {
        position: absolute;
    }

    .plant-nav-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .plant-menu {
        justify-content: flex-start;
        gap: 1rem;
    }

    .plant-hero {
        padding-top: 220px;
    }

    .shop-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .category-panel {
        position: static;
        max-height: 340px;
    }
}

@media (max-width: 650px) {
    .plant-logo-img {
        width: 210px;
        max-height: 110px;
    }

    .plant-hero {
        min-height: 680px;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .shop-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .intro-stats {
        flex-direction: column;
        gap: 1.25rem;
    }

    .service-grid, .product-grid {
        grid-template-columns: 1fr;
    }

    .shop-search-form .form-control, .shop-search-form .btn {
        width: 100%;
    }

    .admin-only-panel {
        border-radius: 22px;
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }
}

.plant-logo-fallback {
    display: none;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3.4rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.05em;
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}

/* fixed shop shell, sticky header/search, internal item scrolling, paging UI */
:root {
    --scroll-dim: 0.36;
}

body.plant-body::after {
    background: linear-gradient(180deg, rgba(2, 18, 16, calc(var(--scroll-dim) - 0.16)) 0%, rgba(2, 18, 16, calc(var(--scroll-dim) + 0.14)) 38%, rgba(0, 0, 0, calc(var(--scroll-dim) + 0.44)) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.10) 52%, rgba(0, 0, 0, 0.58));
    transition: background 180ms linear;
}

.plant-nav {
    padding: clamp(1.1rem, 2vw, 2.2rem) clamp(1.2rem, 4vw, 4.5rem);
}

.plant-nav-inner {
    max-width: min(1840px, calc(100vw - 32px));
}

.plant-logo-img {
    width: clamp(330px, 27vw, 570px);
    max-height: 195px;
}

.plant-logo-fallback {
    font-size: clamp(2.7rem, 4.5vw, 5.1rem);
}

.plant-menu {
    gap: clamp(1.5rem, 3vw, 3.2rem);
}

    .plant-menu a {
        font-size: clamp(1.05rem, 1.25vw, 1.5rem);
        padding: 0.35rem 0;
    }

.shop-section {
    width: min(1860px, calc(100vw - 28px));
    height: calc(100vh - 24px);
    min-height: 720px;
    margin: 12px auto;
    padding: clamp(150px, 16vh, 215px) clamp(1.1rem, 3vw, 4.2rem) clamp(1rem, 2vh, 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shop-section-heading {
    flex: 0 0 auto;
    margin-bottom: clamp(1.2rem, 2vh, 2rem);
    position: relative;
    z-index: 8;
}

    .shop-section-heading h2 {
        font-size: clamp(4.5rem, 7.5vw, 7.5rem);
        line-height: 0.95;
        margin: 0;
    }

.admin-only-panel .btn,
.admin-only-panel span {
    font-size: clamp(0.9rem, 1vw, 1.2rem);
}

.shop-toolbar {
    flex: 0 0 auto;
    position: relative;
    z-index: 8;
    margin-bottom: clamp(1rem, 1.8vh, 1.5rem);
    backdrop-filter: blur(16px);
}

.shop-search-form .form-control {
    height: clamp(54px, 5vh, 70px);
    font-size: clamp(1rem, 1.05vw, 1.28rem);
    padding-left: 1.45rem;
}

.shop-search-form .btn {
    min-height: clamp(50px, 4.8vh, 64px);
    font-size: clamp(0.95rem, 1vw, 1.22rem);
    padding-left: clamp(1.4rem, 2vw, 2.3rem);
    padding-right: clamp(1.4rem, 2vw, 2.3rem);
}

.shop-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
}

.category-panel {
    position: relative;
    top: auto;
    max-height: none;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--plant-gold) rgba(255,255,255,0.06);
}

.category-item {
    font-size: clamp(0.95rem, 1vw, 1.18rem);
}

.product-area {
    min-height: 0;
    height: 100%;
    overflow-y: auto;
    padding-right: 0.4rem;
    scrollbar-width: thin;
    scrollbar-color: var(--plant-gold) rgba(255,255,255,0.06);
}

    .product-area::-webkit-scrollbar,
    .category-panel::-webkit-scrollbar {
        width: 10px;
    }

    .product-area::-webkit-scrollbar-track,
    .category-panel::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.06);
        border-radius: 999px;
    }

    .product-area::-webkit-scrollbar-thumb,
    .category-panel::-webkit-scrollbar-thumb {
        background: var(--plant-gold);
        border-radius: 999px;
    }

.shop-result-strip {
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 0.4rem 0 0.8rem;
    background: linear-gradient(180deg, rgba(2,18,16,0.96), rgba(2,18,16,0.72));
    backdrop-filter: blur(10px);
}

    .shop-result-strip span {
        font-size: clamp(1.3rem, 1.6vw, 1.95rem);
    }

.product-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    align-items: stretch;
}

.shop-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 0 0 1rem;
    padding: 0.75rem;
    border: 1px solid var(--plant-border);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
}

    .shop-pager[hidden] {
        display: none !important;
    }

.shop-pager-bottom {
    margin: 1.35rem 0 0;
}

.pager-status,
.pager-status-bottom {
    color: #fff;
    font-weight: 900;
    min-width: 120px;
    text-align: center;
}

.shop-pager .btn {
    padding: 0.55rem 1.25rem;
}

.product-card[hidden] {
    display: none !important;
}

@media (max-width: 1250px) {
    .plant-logo-img {
        width: clamp(260px, 34vw, 430px);
    }

    .shop-section {
        padding-top: clamp(145px, 15vh, 190px);
    }

    .shop-layout {
        grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    }
}

@media (max-width: 950px) {
    .plant-nav {
        position: fixed;
        background: rgba(0,0,0,0.42);
        backdrop-filter: blur(12px);
    }

    .plant-nav-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .plant-logo-img {
        width: clamp(240px, 58vw, 360px);
        max-height: 145px;
    }

    .plant-menu a {
        font-size: clamp(1rem, 3.4vw, 1.28rem);
    }

    .shop-section {
        height: calc(100vh - 12px);
        min-height: 680px;
        margin: 6px auto;
        padding-top: clamp(185px, 23vh, 250px);
    }

    .shop-section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

        .shop-section-heading h2 {
            font-size: clamp(3.6rem, 11vw, 5.4rem);
        }

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

    .category-panel {
        height: auto;
        max-height: 210px;
    }

    .product-area {
        height: auto;
    }
}

@media (max-width: 650px) {
    .shop-section {
        width: calc(100vw - 12px);
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .shop-toolbar {
        padding: 0.75rem;
    }

    .shop-search-form .form-control {
        min-width: 100%;
    }

    .shop-pager {
        border-radius: 22px;
        flex-wrap: wrap;
    }

    .pager-status, .pager-status-bottom {
        order: -1;
        width: 100%;
    }
}


/* long JPG background motion + larger responsive logo/header */
:root {
    --bg-y: 42%;
    --scroll-dim: 0.24;
}

body.plant-body::before {
    background-image: url('/img/plant-background.jpg');
    background-size: cover;
    background-position: center var(--bg-y);
    background-repeat: no-repeat;
    transition: background-position 160ms linear;
    will-change: background-position;
}

body.plant-body::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, calc(var(--scroll-dim) * 0.28)) 0%, rgba(2, 18, 16, calc(var(--scroll-dim) * 0.74)) 34%, rgba(0, 0, 0, calc(var(--scroll-dim) + 0.18)) 72%, rgba(0, 0, 0, calc(var(--scroll-dim) + 0.30)) 100%), linear-gradient(90deg, rgba(0, 0, 0, calc(var(--scroll-dim) + 0.10)) 0%, rgba(0, 0, 0, calc(var(--scroll-dim) * 0.22)) 46%, rgba(0, 0, 0, calc(var(--scroll-dim) + 0.16)) 100%);
    transition: background 160ms linear;
}

.plant-nav {
    padding: clamp(1.25rem, 2.35vw, 2.85rem) clamp(1.2rem, 4.6vw, 5.5rem);
}

.plant-logo-img {
    width: clamp(410px, 31vw, 720px);
    max-width: 46vw;
    max-height: clamp(105px, 10vw, 185px);
    object-fit: contain;
}

.plant-logo-fallback {
    font-size: clamp(3.4rem, 6vw, 7.1rem);
}

.plant-menu a {
    font-size: clamp(1.25rem, 1.55vw, 1.9rem);
    font-weight: 800;
}

.shop-section {
    padding-top: clamp(175px, 18vh, 255px);
}

.shop-section-heading h2 {
    font-size: clamp(5.3rem, 8.7vw, 9.2rem);
}

@media (max-width: 1250px) {
    .plant-logo-img {
        width: clamp(340px, 42vw, 560px);
        max-width: 54vw;
    }

    .shop-section-heading h2 {
        font-size: clamp(4.7rem, 9vw, 7.4rem);
    }
}

@media (max-width: 950px) {
    .plant-logo-img {
        width: clamp(280px, 68vw, 460px);
        max-width: 72vw;
        max-height: 155px;
    }

    .plant-menu a {
        font-size: clamp(1.12rem, 4vw, 1.55rem);
    }

    .shop-section {
        padding-top: clamp(205px, 24vh, 285px);
    }

    .shop-section-heading h2 {
        font-size: clamp(4rem, 12.2vw, 6.4rem);
    }
}

@media (max-width: 650px) {
    .plant-logo-img {
        width: min(82vw, 360px);
        max-width: 82vw;
        max-height: 125px;
    }

    .shop-section-heading h2 {
        font-size: clamp(3.2rem, 14vw, 4.9rem);
    }
}

.shop-cart-link {
    white-space: nowrap;
    align-self: center;
}

.add-cart-form {
    display: grid;
    gap: 0.55rem;
    width: 100%;
}

.cart-section {
    max-width: min(1600px, calc(100vw - 4vw));
}

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.5rem;
    align-items: start;
}

.cart-list {
    display: grid;
    gap: 1rem;
}

.cart-row,
.cart-summary {
    border: 1px solid rgba(238, 199, 86, 0.24);
    background: rgba(3, 31, 23, 0.78);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(16px);
}

.cart-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 150px 150px 120px;
    gap: 1rem;
    align-items: center;
    border-radius: 24px;
    padding: 1rem;
}

.cart-row-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    padding: 0.5rem;
}

.cart-row-main {
    display: grid;
    gap: 0.25rem;
}

    .cart-row-main h3 {
        color: #fff;
        font-size: clamp(1.05rem, 1vw + 0.8rem, 1.65rem);
        margin: 0;
        text-transform: uppercase;
    }

    .cart-row-main span,
    .cart-row-total span,
    .cart-qty-form label,
    .place-order-form label {
        color: rgba(255, 255, 255, 0.72);
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .cart-row-main strong,
    .cart-row-total strong,
    .cart-summary strong {
        color: #f2cf5b;
    }

.cart-qty-form {
    display: grid;
    gap: 0.45rem;
}

.cart-row-total {
    display: grid;
    gap: 0.25rem;
    text-align: right;
}

.cart-summary {
    position: sticky;
    top: 160px;
    display: grid;
    gap: 1rem;
    border-radius: 28px;
    padding: 1.35rem;
}

    .cart-summary h3 {
        color: #fff;
        margin: 0;
        font-size: clamp(1.3rem, 1.5vw, 2rem);
    }

    .cart-summary > div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        padding-bottom: 0.75rem;
    }

    .cart-summary span {
        color: rgba(255, 255, 255, 0.78);
    }

.place-order-form {
    display: grid;
    gap: 0.75rem;
}

    .place-order-form textarea {
        border-radius: 18px;
        resize: vertical;
    }

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

    .cart-summary {
        position: static;
    }

    .cart-row {
        grid-template-columns: 100px minmax(0, 1fr) 130px;
    }

    .cart-row-total,
    .cart-remove-form {
        grid-column: 2 / -1;
        text-align: left;
    }
}

@media (max-width: 720px) {
    .cart-row {
        grid-template-columns: 1fr;
    }

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

    .cart-row-total,
    .cart-remove-form {
        grid-column: auto;
    }
}

/* responsive mobile-first improvements — bigger logo, better phone layout */
:root {
    --shop-shell-width: min(1640px, calc(100vw - 40px));
}

.plant-nav {
    padding: clamp(0.85rem, 1.5vw, 1.5rem) clamp(1rem, 3vw, 3.5rem);
}

.plant-nav-inner {
    max-width: var(--shop-shell-width);
    gap: clamp(1rem, 2vw, 2.2rem);
}

/* LOGO — bigger at all sizes */
.plant-logo-img {
    width: clamp(260px, 20vw, 400px) !important;
    max-width: 38vw !important;
    max-height: clamp(90px, 8.5vw, 135px) !important;
    object-fit: contain;
}

.plant-logo-fallback {
    font-size: clamp(2.4rem, 3.8vw, 5rem) !important;
}

.plant-menu {
    gap: clamp(1rem, 2vw, 2.6rem);
}

    .plant-menu a {
        font-size: clamp(1rem, 1.05vw, 1.28rem) !important;
        line-height: 1.1;
    }

.shop-section {
    width: var(--shop-shell-width) !important;
    height: calc(100vh - 20px);
    min-height: 620px;
    margin: 10px auto;
    padding: clamp(120px, 13vh, 165px) clamp(0.9rem, 2.1vw, 2.8rem) clamp(0.75rem, 1.5vh, 1.35rem) !important;
    border-radius: clamp(20px, 2vw, 30px);
}

.shop-section-heading {
    margin-bottom: clamp(0.75rem, 1.25vh, 1.25rem) !important;
    gap: clamp(0.8rem, 1.5vw, 1.5rem);
}

    .shop-section-heading h2 {
        font-size: clamp(3.25rem, 5.4vw, 5.8rem) !important;
        line-height: 0.92;
    }

.admin-only-panel {
    padding: 0.34rem 0.42rem 0.34rem 0.85rem;
    gap: 0.7rem;
}

    .admin-only-panel .btn,
    .admin-only-panel span,
    .shop-cart-link {
        font-size: clamp(0.78rem, 0.82vw, 0.98rem) !important;
    }

.btn-gold,
.btn-ghost-dark,
.btn-outline-gold,
.btn-cart {
    padding: 0.55rem 1.25rem;
}

.shop-toolbar {
    margin-bottom: clamp(0.75rem, 1.25vh, 1.15rem) !important;
    padding: clamp(0.65rem, 1vw, 0.9rem);
    border-radius: 18px;
}

.shop-search-form {
    gap: 0.65rem;
}

    .shop-search-form .form-control {
        height: clamp(42px, 4.2vh, 54px) !important;
        font-size: clamp(0.86rem, 0.9vw, 1.02rem) !important;
        padding-left: 1.05rem;
    }

    .shop-search-form .btn {
        min-height: clamp(40px, 4vh, 52px) !important;
        font-size: clamp(0.82rem, 0.86vw, 1rem) !important;
        padding-left: clamp(1rem, 1.55vw, 1.7rem) !important;
        padding-right: clamp(1rem, 1.55vw, 1.7rem) !important;
    }

.shop-layout {
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr) !important;
    gap: clamp(0.85rem, 1.3vw, 1.35rem);
}

.category-panel {
    border-radius: 18px;
    padding: 0.55rem;
}

.category-item {
    font-size: clamp(0.82rem, 0.86vw, 1rem) !important;
    padding: 0.68rem 0.78rem;
    border-radius: 13px;
}

    .category-item b {
        min-width: 26px;
        padding: 0.08rem 0.36rem;
    }

.shop-result-strip {
    margin-bottom: 0.75rem;
    padding: 0.25rem 0 0.65rem;
}

    .shop-result-strip span {
        font-size: clamp(1.05rem, 1.22vw, 1.45rem) !important;
    }

    .shop-result-strip strong {
        font-size: clamp(0.8rem, 0.86vw, 1rem);
    }

/* --card-min is updated by JS on every resize/zoom so columns are truly fluid */
:root {
    --card-min: 220px;
}

.product-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) !important;
    gap: clamp(0.75rem, 1.1vw, 1.2rem);
    align-items: stretch;
}

.product-card {
    /* No fixed min-height — card grows to fit its content at any column width */
    min-height: 0 !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.product-image-wrap {
    /* Image area scales with card width */
    min-height: clamp(110px, 13vw, 210px) !important;
    padding: clamp(0.55rem, 0.75vw, 1rem);
    flex-shrink: 0;
}

.product-image {
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(95px, 11vw, 185px) !important;
    object-fit: contain;
}

.stock-pill {
    top: 0.6rem;
    right: 0.6rem;
    padding: 0.22rem 0.55rem;
    font-size: clamp(0.62rem, 0.68vw, 0.78rem);
}

.product-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(0.65rem, 0.9vw, 1.2rem);
}

    .product-content h3 {
        min-height: 0;
        font-size: clamp(0.8rem, 1.05vw, 1.25rem) !important;
        margin-bottom: 0.38rem;
        line-height: 1.2;
    }

.product-price {
    font-size: clamp(0.95rem, 1.1vw, 1.38rem) !important;
    margin: 0.14rem 0;
}

.product-meta,
.qty-label,
.upload-label {
    font-size: clamp(0.7rem, 0.7vw, 0.86rem);
}

.qty-input {
    max-width: 180px;
    width: 100%;
    height: clamp(30px, 2.6vw, 38px);
    margin-bottom: 0.5rem;
}

.btn-cart {
    min-width: 105px;
    font-size: clamp(0.74rem, 0.78vw, 0.94rem);
    padding: 0.42rem 0.95rem;
}

.image-upload-form {
    padding-top: 0.6rem;
    width: 100%;
    margin-top: auto;
}

.form-control-sm {
    font-size: 0.78rem;
    min-height: 31px;
}

.shop-pager {
    gap: 0.65rem;
    margin-bottom: 0.7rem;
    padding: 0.52rem;
}

    .shop-pager .btn {
        padding: 0.42rem 0.95rem;
        font-size: 0.86rem;
    }

.pager-status,
.pager-status-bottom {
    font-size: 0.9rem;
    min-width: 96px;
}

/* Checkout & payment page layouts */
.checkout-section,
.payment-section {
    height: auto !important;
    min-height: calc(100vh - 20px);
    overflow: visible !important;
}

.checkout-layout,
.payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 360px);
    gap: 1.5rem;
    align-items: start;
    padding-bottom: 2rem;
}

.checkout-card,
.payment-card {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(238, 199, 86, 0.24);
    background: rgba(3, 31, 23, 0.78);
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    backdrop-filter: blur(16px);
    border-radius: 28px;
    padding: clamp(1.2rem, 2.5vw, 2rem);
}

    .checkout-card label {
        color: rgba(255,255,255,0.72);
        font-weight: 700;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        display: block;
        margin-bottom: 0.3rem;
    }

    .checkout-card .form-control {
        background: rgba(255,255,255,0.08);
        border: 1px solid var(--plant-border);
        color: #fff;
        border-radius: 12px;
    }

.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.payment-safe-note {
    border: 1px solid var(--plant-border);
    border-radius: 16px;
    padding: 0.9rem 1.1rem;
    display: grid;
    gap: 0.3rem;
}

    .payment-safe-note strong {
        color: var(--plant-gold);
        font-size: 0.9rem;
    }

    .payment-safe-note span {
        color: var(--plant-muted);
        font-size: 0.82rem;
    }

    .payment-safe-note.large strong {
        font-size: 1rem;
    }

.checkout-summary {
    position: sticky;
    top: 120px;
}

.checkout-mini-list {
    display: grid;
    gap: 0.45rem;
    border-top: 1px solid var(--plant-border);
    padding-top: 0.75rem;
}

    .checkout-mini-list > div {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        color: var(--plant-muted);
        font-size: 0.88rem;
    }

    .checkout-mini-list strong {
        color: #fff;
    }

.payment-status-pill {
    display: inline-block;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-weight: 900;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(255,255,255,0.12);
    color: #fff;
}

    .payment-status-pill.paid {
        background: rgba(239,200,91,0.9);
        color: #061814;
    }

    .payment-status-pill.failed {
        background: rgba(200,60,60,0.8);
    }

    .payment-status-pill.cancelled {
        background: rgba(255,255,255,0.2);
    }

.payment-card h3 {
    color: var(--plant-gold);
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    margin: 0;
}

.payment-card p {
    color: var(--plant-muted);
    margin: 0;
}

.payment-result {
    border-radius: 14px;
    padding: 0.9rem 1.1rem;
    font-weight: 700;
}

    .payment-result.paid {
        background: rgba(21,92,56,0.5);
        color: #b7f0cc;
    }

    .payment-result.failed {
        background: rgba(120,20,20,0.5);
        color: #ffb3b3;
    }

    .payment-result.cancelled {
        background: rgba(80,80,80,0.3);
        color: var(--plant-muted);
    }

.payment-provider-placeholder {
    border: 1px dashed var(--plant-border);
    border-radius: 18px;
    padding: 1.2rem;
    text-align: center;
}

    .payment-provider-placeholder h4 {
        color: var(--plant-gold);
        margin: 0 0 0.5rem;
    }

    .payment-provider-placeholder p {
        color: var(--plant-muted);
        margin: 0.3rem 0 0;
        font-size: 0.88rem;
    }

.payment-actions {
    display: grid;
    gap: 0.65rem;
}

.shop-muted {
    color: var(--plant-muted);
    font-size: 0.9rem;
}

/* Tablet — 1250px */
@media (max-width: 1250px) {
    :root {
        --shop-shell-width: min(100vw - 24px, 1180px);
    }

    .plant-logo-img {
        width: clamp(230px, 28vw, 340px) !important;
        max-width: 42vw !important;
    }

    .shop-section {
        padding-top: clamp(110px, 13vh, 150px) !important;
    }

    .shop-section-heading h2 {
        font-size: clamp(2.9rem, 5.8vw, 4.8rem) !important;
    }

    .shop-layout {
        grid-template-columns: minmax(190px, 260px) minmax(0, 1fr) !important;
    }

    .checkout-layout,
    .payment-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }
}

/* Tablet portrait / large phone — 950px */
@media (max-width: 950px) {
    .plant-nav {
        padding: 0.75rem 1rem;
    }

    .plant-nav-inner {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between;
        gap: 0.75rem;
    }

    /* LOGO — comfortably sized on tablets */
    .plant-logo-img {
        width: clamp(180px, 40vw, 280px) !important;
        max-width: 48vw !important;
        max-height: 95px !important;
    }

    .plant-menu {
        gap: clamp(0.7rem, 2.4vw, 1.2rem);
        flex-wrap: nowrap;
    }

        .plant-menu a,
        .shop-cart-link {
            font-size: clamp(0.88rem, 2.6vw, 1.1rem) !important;
        }

    .shop-section {
        height: calc(100vh - 10px);
        min-height: 600px;
        margin: 5px auto;
        padding-top: clamp(105px, 13vh, 140px) !important;
    }

    .shop-section-heading {
        flex-direction: row !important;
        align-items: center !important;
    }

        .shop-section-heading h2 {
            font-size: clamp(2.5rem, 8vw, 4.1rem) !important;
        }

    .admin-only-panel {
        border-radius: 18px;
        padding: 0.35rem;
    }

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

    .category-panel {
        height: auto;
        max-height: 150px;
    }

    .product-area {
        height: auto;
    }

    .checkout-grid {
        grid-template-columns: 1fr;
    }
}

/* Phone — 650px */
@media (max-width: 650px) {
    :root {
        --shop-shell-width: calc(100vw - 10px);
    }

    /* Nav stacks vertically on small phones */
    .plant-nav-inner {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.55rem;
    }

    /* LOGO — fills most of the phone width, clearly visible */
    .plant-logo-img {
        width: min(75vw, 260px) !important;
        max-width: 78vw !important;
        max-height: 80px !important;
    }

    .plant-logo-fallback {
        font-size: clamp(1.9rem, 7.5vw, 2.8rem) !important;
    }

    .plant-menu {
        gap: 0.6rem;
        flex-wrap: wrap;
    }

        .plant-menu a,
        .shop-cart-link {
            font-size: clamp(0.88rem, 3.5vw, 1rem) !important;
        }

    .shop-section {
        border-radius: 16px;
        /* Extra top padding so content clears the stacked nav */
        padding: 145px 0.6rem 0.65rem !important;
        min-height: 560px;
    }

    .shop-section-heading {
        flex-direction: column !important;
        align-items: stretch !important;
    }

        .shop-section-heading h2 {
            font-size: clamp(2rem, 10.5vw, 3rem) !important;
        }

    .admin-only-panel {
        width: 100%;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
    }

        .admin-only-panel .btn,
        .admin-only-panel span {
            font-size: 0.72rem !important;
        }

    .shop-toolbar {
        padding: 0.55rem;
    }

    .shop-search-form .form-control,
    .shop-search-form .btn {
        width: 100%;
    }

    /* Two columns of product cards on phones if they fit */
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--card-min, 145px), 1fr)) !important;
    }

    .product-card {
        min-height: 0 !important;
    }

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

    .shop-pager {
        border-radius: 22px;
        flex-wrap: wrap;
    }

    .pager-status, .pager-status-bottom {
        order: -1;
        width: 100%;
    }

    .cart-section,
    .checkout-section,
    .payment-section {
        padding-left: 0.6rem !important;
        padding-right: 0.6rem !important;
    }
}

/* =========================================================
   SHOP RESPONSIVE UX OVERRIDE
   Purpose:
   - Make 100% browser zoom feel closer to previous 80% zoom
   - Remove oversized heading/logo/card sizing
   - Make shop usable on phones with normal page scrolling
   - Keep changes CSS-only so backend/controller code is untouched
   ========================================================= */

:root {
    --shop-shell-width: min(1540px, calc(100vw - 32px));
    --shop-radius: 22px;
    --shop-gap: 1rem;
    --card-min: 205px;
}

html {
    font-size: 14px !important;
}

body.plant-body {
    overflow-x: hidden;
}

.plant-nav {
    position: sticky !important;
    top: 0;
    z-index: 1000;
    padding: 0.65rem clamp(0.85rem, 2vw, 2rem) !important;
    background: rgba(0, 0, 0, 0.58) !important;
    backdrop-filter: blur(12px);
}

.plant-nav-inner {
    max-width: var(--shop-shell-width) !important;
    min-height: 58px;
    gap: 1rem !important;
}

.plant-logo-img {
    width: clamp(170px, 16vw, 280px) !important;
    max-width: 34vw !important;
    max-height: 72px !important;
}

.plant-menu {
    gap: clamp(0.75rem, 1.7vw, 1.6rem) !important;
}

    .plant-menu a {
        font-size: clamp(0.88rem, 0.85vw, 1rem) !important;
        padding: 0.35rem 0.1rem !important;
    }

.shop-section {
    width: var(--shop-shell-width) !important;
    height: auto !important;
    min-height: calc(100vh - 86px) !important;
    margin: 10px auto 24px !important;
    padding: clamp(1rem, 1.5vw, 1.6rem) !important;
    overflow: visible !important;
    border-radius: var(--shop-radius) !important;
}

.shop-section-heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.85rem !important;
}

    .shop-section-heading h2 {
        font-size: clamp(2.1rem, 3.8vw, 4.2rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.045em;
    }

.shop-muted {
    font-size: 0.82rem !important;
}

.shop-cart-link,
.admin-only-panel .btn,
.admin-only-panel span {
    font-size: 0.78rem !important;
}

.admin-only-panel {
    gap: 0.5rem !important;
    padding: 0.32rem 0.45rem 0.32rem 0.7rem !important;
}

.btn-gold,
.btn-ghost-dark,
.btn-outline-gold,
.btn-cart {
    padding: 0.48rem 1rem !important;
    font-size: 0.85rem !important;
    min-height: 38px;
}

.shop-toolbar {
    padding: 0.65rem !important;
    margin-bottom: 0.9rem !important;
    border-radius: 16px !important;
}

.shop-search-form {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto auto;
    gap: 0.55rem !important;
}

    .shop-search-form .form-control {
        min-width: 0 !important;
        height: 40px !important;
        font-size: 0.9rem !important;
        padding-left: 0.95rem !important;
    }

    .shop-search-form .btn {
        min-height: 40px !important;
        white-space: nowrap;
    }

.shop-layout {
    display: grid !important;
    grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) !important;
    gap: var(--shop-gap) !important;
    overflow: visible !important;
    min-height: 0 !important;
}

.category-panel {
    position: sticky !important;
    top: 86px !important;
    height: auto !important;
    max-height: calc(100vh - 110px) !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    padding: 0.45rem !important;
}

.category-item {
    font-size: 0.82rem !important;
    padding: 0.55rem 0.65rem !important;
    border-radius: 12px !important;
}

    .category-item b {
        min-width: 24px !important;
        font-size: 0.75rem !important;
    }

.product-area {
    height: auto !important;
    overflow: visible !important;
    padding-right: 0 !important;
}

.shop-result-strip {
    position: sticky !important;
    top: 76px !important;
    z-index: 20 !important;
    margin-bottom: 0.65rem !important;
    padding: 0.45rem 0.65rem !important;
    border: 1px solid var(--plant-border);
    border-radius: 999px;
    background: rgba(2, 18, 16, 0.82) !important;
    backdrop-filter: blur(10px);
}

    .shop-result-strip span {
        font-size: clamp(0.95rem, 1.1vw, 1.2rem) !important;
    }

    .shop-result-strip strong {
        font-size: 0.78rem !important;
    }

.product-grid {
    grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) !important;
    gap: 0.85rem !important;
}

.product-card {
    border-radius: 16px !important;
    min-height: 0 !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
}

.product-image-wrap {
    min-height: 145px !important;
    padding: 0.65rem !important;
}

.product-image {
    height: 125px !important;
    max-width: 180px !important;
}

.stock-pill {
    top: 0.5rem !important;
    right: 0.5rem !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.66rem !important;
}

.product-content {
    padding: 0.8rem !important;
}

    .product-content h3 {
        font-size: clamp(0.9rem, 1vw, 1.08rem) !important;
        line-height: 1.18 !important;
        margin-bottom: 0.35rem !important;
    }

.product-price {
    font-size: 1.1rem !important;
    margin: 0.12rem 0 !important;
}

.product-meta,
.qty-label,
.upload-label {
    font-size: 0.72rem !important;
}

.qty-label {
    margin-top: 0.45rem !important;
}

.qty-input {
    height: 34px !important;
    max-width: 140px !important;
    margin: 0 auto 0.45rem !important;
}

.add-cart-form {
    gap: 0.35rem !important;
}

.btn-cart {
    min-width: 108px !important;
}

.image-upload-form {
    padding-top: 0.55rem !important;
}

.form-control-sm {
    min-height: 30px !important;
    font-size: 0.76rem !important;
}

.shop-pager {
    padding: 0.45rem !important;
    margin-bottom: 0.65rem !important;
}

    .shop-pager .btn {
        padding: 0.35rem 0.8rem !important;
    }

.pager-status,
.pager-status-bottom {
    font-size: 0.82rem !important;
    min-width: 88px !important;
}

/* Cart / Checkout / Payment: normal document flow, not boxed overflow */
.cart-section,
.checkout-section,
.payment-section {
    height: auto !important;
    min-height: calc(100vh - 86px) !important;
    overflow: visible !important;
}

.cart-layout,
.checkout-layout,
.payment-layout {
    gap: 1rem !important;
}

.cart-summary,
.checkout-card,
.payment-card,
.cart-row {
    border-radius: 18px !important;
}

.cart-row {
    grid-template-columns: 92px minmax(0, 1fr) 118px 120px 96px !important;
    padding: 0.75rem !important;
    gap: 0.75rem !important;
}

.cart-row-image {
    width: 92px !important;
    height: 92px !important;
}

.cart-summary {
    top: 88px !important;
    padding: 1rem !important;
}

.checkout-card,
.payment-card {
    padding: 1rem !important;
}

/* Medium screens */
@media (max-width: 1100px) {
    :root {
        --shop-shell-width: calc(100vw - 20px);
        --card-min: 190px;
    }

    .plant-logo-img {
        width: clamp(150px, 22vw, 230px) !important;
        max-width: 40vw !important;
    }

    .shop-section-heading {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .admin-only-panel {
        grid-column: 1 / -1;
        justify-self: start;
    }

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

    .category-panel {
        position: static !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        display: flex !important;
        gap: 0.45rem !important;
        scrollbar-width: thin;
    }

    .category-item {
        flex: 0 0 auto;
        min-width: max-content;
    }

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

    .cart-summary,
    .checkout-summary {
        position: static !important;
    }

    .cart-row {
        grid-template-columns: 85px minmax(0, 1fr) 120px !important;
    }

    .cart-row-total,
    .cart-remove-form {
        grid-column: 2 / -1 !important;
        text-align: left !important;
    }
}

/* Phones */
@media (max-width: 700px) {
    :root {
        --shop-shell-width: calc(100vw - 8px);
        --card-min: 100%;
    }

    html {
        font-size: 13px !important;
    }

    .plant-nav {
        padding: 0.55rem 0.65rem !important;
    }

    .plant-nav-inner {
        min-height: 0;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.45rem !important;
    }

    .plant-logo {
        justify-content: center;
    }

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

    .plant-menu {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.4rem !important;
        width: 100%;
    }

        .plant-menu a {
            text-align: center;
            font-size: 0.78rem !important;
            padding: 0.42rem 0.35rem !important;
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 999px;
            background: rgba(255,255,255,0.06);
        }

    .shop-section {
        margin: 4px auto 16px !important;
        padding: 0.7rem !important;
        border-radius: 14px !important;
        min-height: auto !important;
    }

    .shop-section-heading {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        text-align: left !important;
        gap: 0.55rem !important;
    }

        .shop-section-heading h2 {
            font-size: clamp(1.85rem, 9vw, 2.65rem) !important;
            line-height: 1 !important;
        }

    .shop-cart-link {
        width: 100%;
        text-align: center;
    }

    .admin-only-panel {
        width: 100%;
        border-radius: 14px !important;
        display: grid !important;
        grid-template-columns: auto 1fr;
    }

        .admin-only-panel .btn {
            width: 100%;
        }

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

        .shop-search-form .form-control,
        .shop-search-form .btn {
            width: 100% !important;
        }

    .category-panel {
        padding: 0.4rem !important;
        border-radius: 14px !important;
    }

    .category-item {
        font-size: 0.78rem !important;
        padding: 0.48rem 0.58rem !important;
    }

    .shop-result-strip {
        position: static !important;
        border-radius: 14px !important;
        padding: 0.55rem 0.65rem !important;
    }

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

    .product-card {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr);
        align-items: stretch;
    }

    .product-image-wrap {
        min-height: 100% !important;
        height: auto !important;
        padding: 0.5rem !important;
    }

    .product-image {
        height: 96px !important;
        max-width: 96px !important;
    }

    .stock-pill {
        left: 0.45rem !important;
        right: auto !important;
        top: 0.45rem !important;
        font-size: 0.58rem !important;
    }

    .product-content {
        align-items: stretch !important;
        text-align: left !important;
        padding: 0.65rem !important;
    }

        .product-content h3 {
            font-size: 0.94rem !important;
        }

    .product-price {
        font-size: 1rem !important;
    }

    .product-meta.available {
        margin-bottom: 0.25rem;
    }

    .add-cart-form {
        grid-template-columns: 54px minmax(64px, 90px) minmax(0, 1fr);
        align-items: end;
        gap: 0.4rem !important;
    }

    .qty-label {
        margin: 0 0 0.42rem !important;
    }

    .qty-input {
        max-width: none !important;
        margin: 0 !important;
        height: 34px !important;
    }

    .btn-cart {
        width: 100%;
        min-width: 0 !important;
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .image-upload-form {
        grid-column: 1 / -1;
        margin-top: 0.55rem !important;
    }

    .shop-pager {
        border-radius: 14px !important;
    }

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

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

    .cart-row-total,
    .cart-remove-form {
        grid-column: auto !important;
    }

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

    .checkout-mini-list > div,
    .cart-summary > div {
        align-items: flex-start;
    }
}

/* Very narrow phones */
@media (max-width: 390px) {
    .product-card {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .product-image {
        height: 82px !important;
        max-width: 82px !important;
    }

    .add-cart-form {
        grid-template-columns: 1fr;
    }

    .qty-label {
        margin-bottom: 0 !important;
    }
}

/* shop shell rebuild - single scroll area, right hideable categories, compact mobile cards */
html,
body.plant-body {
    height: 100%;
    overflow: hidden !important;
}

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

.plant-main {
    height: 100dvh;
    overflow: hidden !important;
}

body.plant-body::before {
    background-position: center var(--bg-y, 42%) !important;
}

body.plant-body::after {
    background: linear-gradient(180deg, rgba(0,0,0,calc(var(--scroll-dim, 0.24) * 0.35)) 0%, rgba(2,18,16,calc(var(--scroll-dim, 0.24) * 0.80)) 35%, rgba(0,0,0,calc(var(--scroll-dim, 0.24) + 0.22)) 75%, rgba(0,0,0,calc(var(--scroll-dim, 0.24) + 0.36)) 100%), linear-gradient(90deg, rgba(0,0,0,calc(var(--scroll-dim, 0.24) + 0.12)), rgba(0,0,0,0.10) 48%, rgba(0,0,0,calc(var(--scroll-dim, 0.24) + 0.18))) !important;
}

.shop-section {
    width: min(1760px, calc(100vw - 18px)) !important;
    height: calc(100dvh - 18px) !important;
    min-height: 0 !important;
    margin: 9px auto !important;
    padding: clamp(0.55rem, 1vw, 1rem) clamp(0.65rem, 1.5vw, 1.4rem) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: clamp(16px, 2vw, 28px) !important;
}

.shop-page-brand {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 0.2rem;
    pointer-events: none;
}

.shop-page-logo {
    width: clamp(260px, 28vw, 560px);
    max-width: min(86vw, 560px);
    height: clamp(78px, 10vw, 150px);
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.42));
}

.shop-section-heading.compact-heading {
    flex: 0 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center !important;
    gap: 0.7rem !important;
    margin-bottom: 0.55rem !important;
    text-align: left !important;
}

    .shop-section-heading.compact-heading h2 {
        font-size: clamp(1.8rem, 3.6vw, 4.1rem) !important;
        line-height: 0.95 !important;
        margin: 0 !important;
    }

.shop-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.shop-section-heading .btn,
.shop-toolbar .btn,
.admin-only-panel .btn {
    padding: 0.55rem 1.05rem !important;
    font-size: 0.88rem !important;
}

.admin-only-panel {
    padding: 0.3rem 0.45rem 0.3rem 0.8rem !important;
    gap: 0.55rem !important;
}

.shop-toolbar {
    flex: 0 0 auto !important;
    margin-bottom: 0.65rem !important;
    padding: 0.65rem !important;
    border-radius: 16px !important;
}

.shop-search-form {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto auto;
    gap: 0.55rem !important;
    align-items: center !important;
}

    .shop-search-form .form-control {
        height: 42px !important;
        min-width: 0 !important;
        font-size: 0.95rem !important;
    }

.shop-layout.right-category-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) !important;
    gap: 0.75rem !important;
    overflow: hidden !important;
}

    .shop-layout.right-category-layout.categories-hidden {
        grid-template-columns: minmax(0, 1fr) 0 !important;
    }

        .shop-layout.right-category-layout.categories-hidden .right-category-panel {
            display: none !important;
        }

.product-area,
.cart-list,
.checkout-card {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--plant-gold) rgba(255,255,255,0.08);
}

.product-area {
    padding-right: 0.25rem !important;
}

.right-category-panel {
    position: relative !important;
    top: auto !important;
    height: 100% !important;
    max-height: none !important;
    overflow-y: auto !important;
    border-radius: 16px !important;
    padding: 0.55rem !important;
}

.category-panel-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.5rem 0.65rem;
    margin-bottom: 0.35rem;
    color: #fff;
    background: rgba(2,18,16,0.92);
    border-radius: 12px;
}

.category-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.category-item {
    padding: 0.62rem 0.7rem !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
}

.shop-result-strip {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    margin-bottom: 0.6rem !important;
    padding: 0.55rem 0.7rem !important;
    border: 1px solid var(--plant-border);
    border-radius: 14px !important;
    background: rgba(2,18,16,0.92) !important;
}

    .shop-result-strip span {
        font-size: clamp(1rem, 1.45vw, 1.45rem) !important;
    }

.product-grid.takealot-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 0.75rem !important;
    padding-bottom: 0.75rem;
}

.product-card {
    min-height: 0 !important;
    border-radius: 16px !important;
}

.product-image-wrap {
    min-height: 148px !important;
    padding: 0.8rem !important;
}

.product-image {
    height: 128px !important;
    max-width: 150px !important;
}

.stock-pill {
    top: 0.55rem !important;
    right: 0.55rem !important;
    padding: 0.25rem 0.55rem !important;
    font-size: 0.68rem !important;
}

.product-content {
    padding: 0.85rem !important;
}

    .product-content h3 {
        min-height: 0 !important;
        font-size: 1rem !important;
        line-height: 1.15 !important;
        margin-bottom: 0.45rem !important;
    }

.product-price {
    font-size: 1.15rem !important;
    margin: 0.15rem 0 !important;
}

.product-meta {
    font-size: 0.82rem !important;
    line-height: 1.3 !important;
}

.add-cart-form {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(52px, 72px) minmax(0, 1fr);
    gap: 0.45rem;
    align-items: end;
    margin-top: 0.45rem;
}

.qty-label {
    margin: 0 0 0.42rem !important;
    font-size: 0.76rem;
}

.qty-input {
    height: 34px !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

.btn-cart {
    min-width: 0 !important;
    width: 100%;
    padding: 0.4rem 0.55rem !important;
    font-size: 0.82rem !important;
}

.image-upload-form {
    display: none !important;
}

/* Cart: no page scroll; only cart list scrolls */
.cart-section .shop-section-heading.compact-heading,
.checkout-section .shop-section-heading.compact-heading {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.cart-layout,
.checkout-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 360px) !important;
    gap: 0.85rem !important;
    overflow: hidden !important;
}

.cart-list {
    padding-right: 0.3rem;
}

.cart-row {
    grid-template-columns: 92px minmax(0, 1fr) minmax(145px, auto) minmax(120px, auto) auto !important;
    gap: 0.75rem !important;
    padding: 0.75rem !important;
    border-radius: 16px !important;
}

.cart-row-image {
    width: 92px !important;
    height: 92px !important;
    border-radius: 14px !important;
}

.cart-row-main h3 {
    font-size: 1rem !important;
}

.cart-summary,
.checkout-summary {
    height: fit-content !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
}

.checkout-card {
    padding: 1rem !important;
    border-radius: 18px !important;
}

    .checkout-card select.form-control,
    .checkout-card select.form-control option {
        color: #061814 !important;
        background-color: #fff !important;
    }

    .checkout-card input.form-control,
    .checkout-card textarea.form-control {
        color: #061814 !important;
        background-color: #fff !important;
    }

.shop-muted {
    color: var(--plant-muted);
    font-weight: 700;
    font-size: 0.9rem;
}

@media (max-width: 1050px) {
    .shop-section-heading.compact-heading {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    .admin-only-panel {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: space-between;
    }

    .shop-layout.right-category-layout {
        grid-template-columns: minmax(0, 1fr) minmax(190px, 240px) !important;
    }

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

@media (max-width: 760px) {
    html,
    body.plant-body,
    .plant-main {
        height: 100dvh;
        overflow: hidden !important;
    }

    .shop-section {
        width: 100vw !important;
        height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        padding: 0.45rem !important;
    }

    .shop-page-logo {
        width: min(82vw, 340px) !important;
        height: 82px !important;
    }

    .shop-section-heading.compact-heading {
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
    }

        .shop-section-heading.compact-heading h2 {
            font-size: clamp(1.55rem, 7vw, 2.25rem) !important;
            text-align: center;
        }

    .shop-heading-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

        .shop-heading-actions .btn,
        .shop-cart-link {
            width: 100%;
            text-align: center;
        }

    .admin-only-panel {
        display: none !important;
    }

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

    .shop-toolbar {
        padding: 0.45rem !important;
    }

    .shop-search-form .form-control,
    .shop-search-form .btn {
        width: 100% !important;
        height: 38px !important;
    }

    .shop-layout.right-category-layout {
        position: relative;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .right-category-panel {
        position: absolute !important;
        inset: 0 0 0 auto !important;
        z-index: 20;
        width: min(82vw, 310px) !important;
        box-shadow: -16px 0 40px rgba(0,0,0,0.5);
        background: rgba(2,18,16,0.98) !important;
    }

    .shop-layout.right-category-layout.categories-hidden .right-category-panel {
        display: none !important;
    }

    .product-grid.takealot-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .product-card {
        display: grid !important;
        grid-template-columns: 96px minmax(0, 1fr) !important;
        min-height: 0 !important;
    }

    .product-image-wrap {
        min-height: 100% !important;
        height: auto !important;
        padding: 0.45rem !important;
    }

    .product-image {
        width: 82px !important;
        height: 82px !important;
        max-width: 82px !important;
    }

    .stock-pill {
        left: 0.35rem !important;
        right: auto !important;
        top: 0.35rem !important;
        font-size: 0.52rem !important;
        padding: 0.18rem 0.36rem !important;
    }

    .product-content {
        align-items: stretch !important;
        text-align: left !important;
        padding: 0.55rem !important;
    }

        .product-content h3 {
            font-size: 0.9rem !important;
            margin-bottom: 0.25rem !important;
        }

    .product-price {
        font-size: 0.98rem !important;
    }

    .product-meta {
        font-size: 0.72rem !important;
    }

    .add-cart-form {
        grid-template-columns: 34px 56px minmax(0, 1fr) !important;
        gap: 0.32rem !important;
    }

    .qty-input {
        height: 30px !important;
        font-size: 0.82rem !important;
    }

    .btn-cart {
        min-height: 30px !important;
        font-size: 0.75rem !important;
    }

    .cart-layout,
    .checkout-layout {
        grid-template-columns: 1fr !important;
        gap: 0.55rem !important;
    }

    .cart-summary,
    .checkout-summary {
        max-height: 35dvh !important;
    }

    .cart-list,
    .checkout-card {
        min-height: 0 !important;
    }

    .cart-row {
        grid-template-columns: 74px minmax(0, 1fr) !important;
        gap: 0.5rem !important;
        padding: 0.55rem !important;
    }

    .cart-row-image {
        width: 74px !important;
        height: 74px !important;
    }

    .cart-qty-form,
    .cart-row-total,
    .cart-remove-form {
        grid-column: 1 / -1 !important;
    }

    .cart-qty-form {
        display: grid;
        grid-template-columns: auto 68px 1fr;
        gap: 0.4rem;
        align-items: end;
    }
}

/* UX PATCH 2
   - visible pagination
   - cleaner no-image product box
   - available-only filter
   - category button moved under search bar
   - cart rows start at the top
   - cart remains after payment/order creation via service change
*/
.shop-result-strip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.65rem !important;
}

.shop-result-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    flex-wrap: wrap;
}

    .shop-result-title-wrap > span {
        margin-right: 0.15rem;
    }

.category-toggle-inline,
.available-toggle-btn {
    min-height: 34px !important;
    padding: 0.35rem 0.8rem !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
}

    .available-toggle-btn.btn-gold {
        box-shadow: 0 0 0 2px rgba(239, 200, 91, 0.25);
    }

.shop-pager,
.shop-pager-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.7rem !important;
    padding: 0.42rem 0.55rem !important;
    border: 1px solid rgba(239, 200, 91, 0.36) !important;
    border-radius: 999px !important;
    background: rgba(2, 18, 16, 0.86) !important;
    backdrop-filter: blur(10px);
}

.shop-pager-bottom {
    margin: 0.9rem auto 0.4rem !important;
}

    .shop-pager[hidden],
    .shop-pager-bottom[hidden] {
        display: none !important;
    }

    .shop-pager .btn,
    .shop-pager-bottom .btn {
        min-height: 32px !important;
        padding: 0.35rem 0.75rem !important;
        font-size: 0.78rem !important;
    }

        .shop-pager .btn:disabled,
        .shop-pager-bottom .btn:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }

.pager-status,
.pager-status-bottom {
    min-width: 92px !important;
    color: #fff !important;
    font-weight: 900 !important;
    text-align: center;
    font-size: 0.78rem !important;
}

.product-card[hidden] {
    display: none !important;
}

.product-image-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .product-image-wrap.has-placeholder-image {
        background: linear-gradient(180deg, rgba(8, 35, 26, 0.96), rgba(4, 24, 20, 0.96)) !important;
    }

.placeholder-product-image {
    width: 72% !important;
    height: 82px !important;
    max-width: 118px !important;
    padding: 0.55rem;
    border-radius: 14px;
    background: rgba(255,255,255,0.88);
    opacity: 0.9;
    filter: none !important;
}

.cart-list {
    align-content: start !important;
    justify-content: stretch !important;
    grid-auto-rows: max-content;
}

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

.cart-summary {
    align-self: start !important;
}

.payment-section .shop-section-heading:not(.compact-heading) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    margin-bottom: 0.85rem !important;
}

.payment-section .shop-section-heading h2 {
    font-size: clamp(1.8rem, 3.6vw, 4.1rem) !important;
    line-height: 0.95 !important;
    margin: 0 !important;
}

/* Make checkout selects readable in Firefox/Chrome while keeping the dark page shell. */
.checkout-card select.form-control,
.checkout-card select.form-control option,
.checkout-card input.form-control,
.checkout-card textarea.form-control {
    color: #061814 !important;
    background-color: #fff !important;
}

@media (max-width: 760px) {
    .shop-result-strip {
        align-items: stretch !important;
        flex-direction: column !important;
        border-radius: 12px !important;
    }

    .shop-result-title-wrap {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
    }

        .shop-result-title-wrap > span {
            grid-column: 1 / -1;
            text-align: center;
        }

    .category-toggle-inline,
    .available-toggle-btn {
        width: 100%;
        text-align: center;
        min-height: 32px !important;
        font-size: 0.72rem !important;
    }

    .shop-result-strip strong {
        text-align: center;
    }

    .shop-pager,
    .shop-pager-bottom {
        width: 100%;
        border-radius: 12px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .pager-status,
    .pager-status-bottom {
        grid-column: 1 / -1;
        order: -1;
        width: 100% !important;
    }

    .placeholder-product-image {
        height: 62px !important;
        max-width: 74px !important;
        padding: 0.35rem;
        border-radius: 10px;
    }

    .cart-list {
        align-content: start !important;
        max-height: none !important;
    }
}

/* =========================================================
   Shop UX fix 3: visible pagination, cleaner photo boxes,
   user/admin toggle, cart top alignment
   ========================================================= */
body.shop-user-mode .admin-only-panel,
body.shop-user-mode .image-upload-form {
    display: none !important;
}

body.shop-admin-mode .admin-only-panel,
body.shop-admin-mode .image-upload-form {
    display: grid !important;
}

.shop-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(239, 200, 91, 0.42);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px);
}

.mode-switch-btn {
    border: 0;
    border-radius: 999px;
    padding: 0.48rem 0.9rem;
    background: transparent;
    color: #fff;
    font-weight: 900;
    font-size: 0.78rem;
    text-transform: uppercase;
}

    .mode-switch-btn.active {
        background: var(--plant-gold);
        color: #061814;
    }

.shop-result-strip {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    margin-bottom: 0.75rem !important;
}

.shop-result-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.shop-result-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    flex-wrap: wrap !important;
}

.shop-pager-inline {
    margin: 0 !important;
    padding: 0.25rem !important;
    min-height: 38px;
    background: rgba(0, 0, 0, 0.24) !important;
    border-color: rgba(239, 200, 91, 0.36) !important;
}

    .shop-pager-inline .btn {
        padding: 0.28rem 0.7rem !important;
        font-size: 0.76rem !important;
    }

    .shop-pager-inline .pager-status {
        min-width: 84px !important;
        font-size: 0.76rem !important;
    }

.product-image-wrap {
    background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 16px !important;
    margin: 0.7rem 0.7rem 0 !important;
    min-height: 120px !important;
    padding: 0.55rem !important;
}

.product-image {
    height: 108px !important;
    max-width: 155px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.94) !important;
    padding: 0.35rem !important;
}

.product-image-placeholder {
    width: min(135px, 82%);
    height: 94px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.18rem;
    border: 1px dashed rgba(239, 200, 91, 0.52);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255,255,255,0.72);
    text-transform: uppercase;
}

    .product-image-placeholder .placeholder-icon {
        width: 32px;
        height: 32px;
        display: inline-grid;
        place-items: center;
        border-radius: 999px;
        border: 1px solid rgba(239, 200, 91, 0.52);
        color: var(--plant-gold);
        font-size: 1.25rem;
        line-height: 1;
        font-weight: 900;
    }

    .product-image-placeholder small {
        font-size: 0.62rem;
        font-weight: 900;
        letter-spacing: 0.05em;
    }

.cart-layout {
    align-items: start !important;
}

.cart-list {
    align-content: start !important;
    align-items: start !important;
    justify-items: stretch !important;
    min-height: 0 !important;
    padding-top: 0 !important;
}

.cart-row {
    align-self: start !important;
}

.cart-scroll-shell .cart-list {
    height: min(64vh, 670px) !important;
    overflow-y: auto !important;
    padding: 0.75rem !important;
    border: 1px solid rgba(238, 199, 86, 0.20) !important;
    border-radius: 22px !important;
    background: rgba(3, 31, 23, 0.54) !important;
}

@media (max-width: 900px) {
    .shop-result-strip {
        position: static !important;
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .shop-result-actions {
        justify-content: space-between;
    }

    .shop-pager-inline {
        width: 100%;
        justify-content: space-between !important;
    }

    .shop-heading-actions {
        width: 100%;
        justify-content: space-between !important;
    }
}

@media (max-width: 760px) {
    .product-image-wrap {
        width: 88px !important;
        min-height: 88px !important;
        height: 88px !important;
        margin: 0 !important;
        padding: 0.35rem !important;
        grid-row: 1 / span 2;
    }

    .product-image {
        width: 76px !important;
        height: 76px !important;
        max-width: 76px !important;
    }

    .product-image-placeholder {
        width: 76px;
        height: 76px;
    }

        .product-image-placeholder .placeholder-icon {
            width: 24px;
            height: 24px;
            font-size: 1rem;
        }

        .product-image-placeholder small {
            font-size: 0.52rem;
        }

    .stock-pill {
        top: -0.4rem !important;
        right: -0.35rem !important;
        font-size: 0.52rem !important;
        padding: 0.16rem 0.38rem !important;
    }

    .cart-scroll-shell .cart-list {
        height: min(58vh, 520px) !important;
        padding: 0.55rem !important;
    }
}

/* =========================================================
   Shop UX fix 4: counts, separated available filter,
   delivery address split, photo preview, logo/heading scale
   ========================================================= */
.shop-stock-shell,
.checkout-scroll-shell,
.cart-scroll-shell {
    padding-top: 0.7rem !important;
}

.stock-heading-row {
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    padding: 0.55rem 0.7rem !important;
    margin-bottom: 0.45rem !important;
}

.stock-brand-left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.9rem !important;
    min-width: 0;
}

    .shop-page-logo.logo-left,
    .stock-brand-left .shop-page-logo {
        width: clamp(105px, 10vw, 170px) !important;
        height: auto !important;
        margin: 0 !important;
        object-fit: contain !important;
        display: block !important;
    }

    .compact-heading h2,
    .stock-brand-left h2 {
        font-size: clamp(1.15rem, 2.1vw, 2rem) !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }

    .stock-brand-left .shop-muted {
        font-size: 0.8rem !important;
        max-width: 360px;
    }

.shop-toolbar {
    margin-bottom: 0.45rem !important;
}

.shop-search-form {
    align-items: center !important;
    gap: 0.45rem !important;
}

.available-filter-check {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    min-height: 38px !important;
    padding: 0.25rem 0.7rem !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

    .available-filter-check input {
        width: 15px !important;
        height: 15px !important;
        accent-color: var(--plant-gold) !important;
    }

.available-toggle-btn {
    display: none !important;
}

.shop-result-strip {
    padding: 0.45rem 0.6rem !important;
    min-height: 42px !important;
}

.shop-result-title-wrap > span {
    font-size: 0.95rem !important;
}

.category-toggle-inline {
    min-height: 32px !important;
    padding: 0.28rem 0.7rem !important;
    font-size: 0.72rem !important;
}

.image-preview-trigger.product-image-wrap {
    appearance: none !important;
    -webkit-appearance: none !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    cursor: zoom-in !important;
    color: inherit !important;
    width: auto !important;
    display: grid !important;
    place-items: center !important;
    position: relative !important;
}

    .image-preview-trigger.product-image-wrap:hover {
        border-color: rgba(239, 200, 91, 0.65) !important;
        box-shadow: 0 0 0 2px rgba(239, 200, 91, 0.12) inset !important;
    }

.image-preview-modal[hidden] {
    display: none !important;
}

.image-preview-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: grid !important;
    place-items: center !important;
    padding: 1rem !important;
}

.image-preview-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.76) !important;
    backdrop-filter: blur(8px) !important;
}

.image-preview-card {
    position: relative !important;
    width: min(92vw, 860px) !important;
    max-height: 88vh !important;
    padding: 1rem !important;
    border: 1px solid rgba(239, 200, 91, 0.36) !important;
    border-radius: 22px !important;
    background: rgba(2, 29, 22, 0.98) !important;
    color: #fff !important;
    box-shadow: 0 20px 80px rgba(0,0,0,0.55) !important;
}

    .image-preview-card h3 {
        margin: 0 2.2rem 0.8rem 0 !important;
        font-size: 1rem !important;
        color: #fff !important;
    }

.image-preview-close {
    position: absolute !important;
    top: 0.7rem !important;
    right: 0.8rem !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(239, 200, 91, 0.45) !important;
    background: rgba(0,0,0,0.32) !important;
    color: #fff !important;
    font-size: 1.35rem !important;
    line-height: 1 !important;
}

.image-preview-frame {
    width: 100% !important;
    min-height: 320px !important;
    max-height: 74vh !important;
    display: grid !important;
    place-items: center !important;
    overflow: auto !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.06) !important;
}

    .image-preview-frame img {
        max-width: 100% !important;
        max-height: 72vh !important;
        object-fit: contain !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.96) !important;
    }

.image-preview-empty {
    color: rgba(255,255,255,0.74) !important;
    font-weight: 800 !important;
}

body.image-modal-open {
    overflow: hidden !important;
}

.delivery-address-panel {
    display: grid !important;
    gap: 0.65rem !important;
    padding: 0.85rem !important;
    border: 1px solid rgba(239, 200, 91, 0.24) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.055) !important;
}

    .delivery-address-panel[hidden] {
        display: none !important;
    }

.delivery-address-head {
    display: flex !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    color: #fff !important;
}

    .delivery-address-head span {
        color: rgba(255,255,255,0.72) !important;
        font-size: 0.78rem !important;
    }

.checkout-span-2 {
    grid-column: 1 / -1 !important;
}

.checkout-card select.form-control,
.checkout-card option,
.checkout-card input.form-control,
.checkout-card textarea.form-control {
    color: #111 !important;
    background-color: #fff !important;
}

.cart-layout {
    align-items: flex-start !important;
}

.cart-list {
    display: grid !important;
    align-content: start !important;
    place-content: start stretch !important;
    justify-content: stretch !important;
    align-items: start !important;
}

.cart-row:first-child {
    margin-top: 0 !important;
}

@media (max-width: 900px) {
    .stock-heading-row {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .stock-brand-left {
        width: 100% !important;
    }

    .shop-search-form {
        display: grid !important;
        grid-template-columns: 1fr auto auto !important;
    }

        .shop-search-form input#search {
            grid-column: 1 / -1 !important;
        }

    .available-filter-check {
        grid-column: 1 / -1 !important;
        width: fit-content !important;
    }
}

@media (max-width: 760px) {
    .stock-brand-left {
        gap: 0.55rem !important;
    }

        .shop-page-logo.logo-left,
        .stock-brand-left .shop-page-logo {
            width: 104px !important;
        }

        .compact-heading h2,
        .stock-brand-left h2 {
            font-size: 1.05rem !important;
        }

        .stock-brand-left .shop-muted {
            display: none !important;
        }

    .shop-heading-actions {
        gap: 0.4rem !important;
    }

    .mode-switch-btn {
        padding: 0.38rem 0.6rem !important;
        font-size: 0.68rem !important;
    }

    .shop-cart-link {
        padding: 0.45rem 0.7rem !important;
        font-size: 0.72rem !important;
    }

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

    .image-preview-frame {
        min-height: 260px !important;
    }
}

/* Admin paid orders */
.admin-orders-shell {
    max-width: 1500px;
}

.admin-orders-toolbar {
    margin-bottom: 14px;
}

.admin-order-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.admin-summary-card,
.admin-detail-card {
    border: 1px solid rgba(245, 207, 92, 0.28);
    background: rgba(0, 32, 22, 0.82);
    border-radius: 18px;
    padding: 16px;
    color: #fff;
}

    .admin-summary-card span,
    .admin-detail-card span {
        display: block;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .admin-summary-card strong {
        color: var(--shop-gold, #f5cf5c);
        font-size: 1.4rem;
    }

.admin-orders-table-wrap {
    border: 1px solid rgba(245, 207, 92, 0.24);
    background: rgba(0, 26, 18, 0.86);
    border-radius: 18px;
    overflow: auto;
    max-height: min(62vh, 680px);
}

.admin-orders-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    color: #fff;
}

    .admin-orders-table th,
    .admin-orders-table td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        vertical-align: top;
    }

    .admin-orders-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: rgba(0, 44, 30, 0.98);
        color: var(--shop-gold, #f5cf5c);
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .admin-orders-table td span {
        display: block;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.82rem;
        margin-top: 3px;
    }

    .admin-orders-table .num {
        text-align: right;
        white-space: nowrap;
    }

    .admin-orders-table .actions {
        text-align: right;
        white-space: nowrap;
    }

.admin-order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 14px;
    margin-bottom: 14px;
}

.admin-detail-card h3 {
    margin: 0 0 12px 0;
    color: #fff;
}

.admin-detail-card div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .admin-detail-card div:last-child {
        border-bottom: 0;
    }

.admin-detail-card strong {
    text-align: right;
    color: #fff;
}

.totals-card strong {
    color: var(--shop-gold, #f5cf5c);
}

.payment-status-pill.failed,
.payment-status-pill.cancelled {
    background: rgba(180, 48, 48, 0.22);
    color: #ffd7d7;
}

@media (max-width: 900px) {
    .admin-order-summary-grid,
    .admin-order-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-orders-table-wrap {
        max-height: 64vh;
    }
}

/* === Plant Paradise online-display/admin grouping fix === */
.shop-mode-switch a.mode-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.admin-bulk-photo-panel,
.admin-bulk-online-panel {
    margin: 0.35rem 0 0.65rem;
    padding: 0.55rem;
    border: 1px solid rgba(212, 175, 55, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
}

.bulk-photo-form,
.bulk-online-form {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.3fr) auto;
    gap: 0.55rem;
    align-items: center;
}

    .bulk-photo-form small,
    .bulk-online-form small {
        display: block;
        color: #5b5145;
        line-height: 1.25;
    }


.bulk-online-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

    .bulk-online-action-row .btn {
        min-height: 38px;
    }

.admin-view-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(50, 10, 107, 0.11);
    color: #320A6B;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.product-card.online-hidden {
    border-color: rgba(160, 120, 0, 0.34);
    background: rgba(255, 250, 235, 0.96);
}

.admin-online-state {
    margin-top: 0.25rem;
    padding: 0.22rem 0.45rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .admin-online-state.is-online {
        background: rgba(15, 130, 140, 0.12);
        color: #065084;
    }

    .admin-online-state.is-hidden {
        background: rgba(170, 105, 0, 0.14);
        color: #684100;
    }

.admin-online-form {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.14);
}

.online-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.45rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #2f2a24;
}

    .online-check input {
        width: 1rem;
        height: 1rem;
    }

.admin-online-form .form-control-sm,
.image-upload-form .form-control-sm,
.bulk-photo-form .form-control-sm {
    min-height: 34px;
    font-size: 0.78rem;
}

body.shop-user-mode .product-card.online-hidden {
    display: none;
}

@media (max-width: 900px) {
    .bulk-photo-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .admin-bulk-photo-panel {
        margin-left: 0;
        margin-right: 0;
    }

    .admin-online-form,
    .image-upload-form {
        padding-top: 0.45rem;
        margin-top: 0.45rem;
    }
}

/* === Fix7: admin online list + green item backgrounds === */
.product-card,
.product-card.online-visible,
.product-card.online-hidden {
    background: linear-gradient(145deg, rgba(6, 80, 56, 0.96), rgba(15, 130, 92, 0.92)) !important;
    border: 1px solid rgba(120, 185, 181, 0.42) !important;
    color: #ffffff !important;
}

    .product-card .product-content h3,
    .product-card .product-meta,
    .product-card .product-meta strong,
    .product-card .product-price,
    .product-card .qty-label,
    .product-card .upload-label {
        color: #ffffff !important;
    }

    .product-card .product-meta {
        opacity: 0.92;
    }

    .product-card .product-image-wrap {
        background: rgba(255, 255, 255, 0.92) !important;
    }

    .product-card.online-hidden {
        opacity: 0.88;
    }

.admin-online-list-form {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 0;
}

.admin-online-list-head,
.admin-online-list-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 130, 140, 0.18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

    .admin-online-list-head strong {
        display: block;
        color: #064234;
        font-size: 0.95rem;
    }

    .admin-online-list-head span {
        display: block;
        color: #3e514b;
        font-size: 0.78rem;
        font-weight: 700;
    }

.admin-save-all-btn {
    white-space: nowrap;
    color: #143322 !important;
}

.admin-online-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.admin-online-row {
    display: grid;
    grid-template-columns: 74px 138px minmax(220px, 1fr) 110px 110px minmax(170px, 240px);
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0.72rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.97), rgba(15, 130, 92, 0.94)) !important;
    border: 1px solid rgba(120, 185, 181, 0.45);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20);
    color: #ffffff;
}

    .admin-online-row.online-hidden {
        background: linear-gradient(135deg, rgba(6, 80, 56, 0.84), rgba(15, 130, 92, 0.78)) !important;
        opacity: 0.86;
    }

.admin-list-image {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0.25rem;
    cursor: zoom-in;
}

    .admin-list-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .admin-list-image span {
        color: #24453b;
        font-size: 0.68rem;
        font-weight: 900;
        text-transform: uppercase;
    }

.admin-display-check {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
}

    .admin-display-check input {
        width: 1.12rem;
        height: 1.12rem;
        accent-color: #78B9B5;
    }

.admin-list-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

    .admin-list-main strong {
        color: #ffffff;
        font-size: 0.9rem;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admin-list-main span,
    .admin-list-stock span,
    .admin-list-price span,
    .admin-list-group span {
        color: rgba(255, 255, 255, 0.82);
        font-size: 0.72rem;
        font-weight: 800;
    }

.admin-list-stock,
.admin-list-price,
.admin-list-group {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

    .admin-list-stock strong,
    .admin-list-price strong {
        color: #ffffff;
        font-size: 0.88rem;
    }

    .admin-list-stock.out-stock strong {
        color: #ffd8d8;
    }

    .admin-list-group input.form-control-sm {
        min-height: 34px !important;
        color: #10241e !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
    }

@media (max-width: 1050px) {
    .admin-online-row {
        grid-template-columns: 62px 126px minmax(180px, 1fr) 96px minmax(150px, 220px);
    }

    .admin-list-price {
        display: none;
    }
}

@media (max-width: 760px) {
    .admin-online-list-head,
    .admin-online-list-foot {
        position: sticky;
        top: 0;
        z-index: 5;
        flex-direction: column;
        align-items: stretch;
    }

    .admin-online-row {
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: start;
        gap: 0.5rem 0.65rem;
    }

    .admin-list-image {
        grid-row: span 4;
        width: 56px;
        height: 56px;
    }

    .admin-display-check,
    .admin-list-main,
    .admin-list-stock,
    .admin-list-group {
        grid-column: 2;
    }

        .admin-list-main strong {
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

    .admin-save-all-btn {
        width: 100%;
    }
}

/* Fix8: admin single-photo upload inside the compact product list. */
.admin-photo-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
}

.admin-single-photo-btn {
    width: 64px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #143322;
    font-size: 0.66rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid rgba(120, 185, 181, 0.55);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

    .admin-single-photo-btn:hover {
        background: #ffffff;
    }

    .admin-single-photo-btn input[type="file"] {
        display: none;
    }

@media (max-width: 760px) {
    .admin-photo-cell {
        grid-row: span 4;
        width: 58px;
    }

    .admin-list-image {
        grid-row: auto;
    }

    .admin-single-photo-btn {
        width: 56px;
        min-height: 22px;
        font-size: 0.58rem;
    }
}

/* Fix10: selected-barcode bulk photo upload, based on MultiStore bulk-select behaviour. */
.bulk-photo-form {
    grid-template-columns: minmax(240px, 1.1fr) minmax(160px, 0.7fr) minmax(220px, 1.1fr) auto;
}

.bulk-photo-selected-panel {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.42rem 0.55rem;
    border-radius: 12px;
    background: rgba(6, 80, 56, 0.08);
    border: 1px solid rgba(6, 80, 56, 0.16);
    color: #143322;
    font-size: 0.78rem;
    font-weight: 800;
}

.bulk-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-online-row {
    grid-template-columns: 72px 74px 138px minmax(220px, 1fr) 110px 110px minmax(170px, 240px);
}

.admin-photo-select {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.36rem;
    margin: 0;
    min-height: 34px;
    padding: 0.34rem 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #143322;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

    .admin-photo-select input {
        width: 1rem;
        height: 1rem;
        accent-color: #0F828C;
    }

.admin-online-row.photo-selected {
    outline: 3px solid rgba(120, 185, 181, 0.92);
    outline-offset: 2px;
}

@media (max-width: 1150px) {
    .admin-online-row {
        grid-template-columns: 64px 62px 126px minmax(180px, 1fr) 96px minmax(150px, 220px);
    }

    .admin-list-price {
        display: none;
    }
}

@media (max-width: 900px) {
    .bulk-photo-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .admin-online-row {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .admin-photo-select {
        grid-column: 2;
        justify-content: flex-start;
        width: fit-content;
        min-height: 30px;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }
}

/* Fix11: barcode-picker bulk photo upload and gold loading overlay. */
.bulk-photo-form {
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.2fr);
    align-items: start;
}

.bulk-photo-intro,
.bulk-photo-picker-summary,
.bulk-photo-upload-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.bulk-photo-intro {
    flex-direction: column;
    align-items: flex-start;
}

.bulk-selected-box {
    min-width: 84px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    border-radius: 999px;
    background: rgba(6, 80, 56, 0.95);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

    .bulk-selected-box strong {
        color: #f6d36b;
        font-size: 1rem;
    }

.bulk-selected-preview {
    grid-column: 1 / -1;
    min-height: 38px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    background: rgba(6, 80, 56, 0.07);
    color: #143322;
    font-size: 0.78rem;
    font-weight: 700;
}

    .bulk-selected-preview span,
    .bulk-selected-preview em {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0.16rem 0.45rem;
        border-radius: 999px;
        background: rgba(6, 80, 56, 0.92);
        color: #fff;
        font-style: normal;
    }

.bulk-photo-upload-row {
    grid-column: 1 / -1;
}

    .bulk-photo-upload-row .form-control {
        max-width: 420px;
    }

.admin-online-row {
    grid-template-columns: 74px 138px minmax(220px, 1fr) 110px 110px minmax(170px, 240px) !important;
}

.admin-photo-select {
    display: none !important;
}

.photo-picker-modal[hidden],
.shop-loading-overlay[hidden] {
    display: none !important;
}

.photo-picker-modal,
.shop-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.photo-picker-backdrop,
.image-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 14, 10, 0.72);
    backdrop-filter: blur(3px);
}

.photo-picker-card {
    position: relative;
    width: min(980px, calc(100vw - 1.2rem));
    max-height: min(760px, calc(100vh - 1.2rem));
    margin: 0.6rem auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: #f8f3e6;
    border: 1px solid rgba(212, 175, 55, 0.62);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45);
    color: #143322;
}

.photo-picker-head,
.photo-picker-tools,
.photo-picker-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.9rem;
    background: linear-gradient(135deg, #064f38, #0f825c);
    color: #fff;
}

.photo-picker-head {
    justify-content: space-between;
}

    .photo-picker-head h3 {
        margin: 0;
        font-size: 1.05rem;
        color: #f6d36b;
    }

    .photo-picker-head span {
        display: block;
        margin-top: 0.15rem;
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.78rem;
    }

.photo-picker-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 1.45rem;
    line-height: 1;
}

.photo-picker-tools {
    background: rgba(6, 80, 56, 0.96);
}

    .photo-picker-tools .form-control {
        flex: 1 1 300px;
        min-height: 38px;
    }

.photo-picker-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 250px);
    background: #fffaf0;
}

.photo-picker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

    .photo-picker-table th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 0.52rem 0.6rem;
        background: #d4af37;
        color: #143322;
        text-align: left;
        font-weight: 900;
    }

    .photo-picker-table td {
        padding: 0.5rem 0.6rem;
        border-bottom: 1px solid rgba(6, 80, 56, 0.10);
        color: #143322;
    }

    .photo-picker-table tbody tr {
        cursor: pointer;
        user-select: none;
    }

        .photo-picker-table tbody tr:hover td {
            background: rgba(15, 130, 92, 0.10);
        }

        .photo-picker-table tbody tr.is-selected td {
            background: #0f825c;
            color: #fff;
        }

.numeric-cell {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.muted-cell {
    color: #6d6253 !important;
    text-align: center;
    padding: 1rem !important;
}

.photo-state,
.online-state {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
}

    .photo-state.has,
    .online-state.yes {
        background: rgba(6, 80, 56, 0.14);
        color: #064f38;
    }

    .photo-state.none,
    .online-state.no {
        background: rgba(158, 115, 0, 0.16);
        color: #684100;
    }

tr.is-selected .photo-state,
tr.is-selected .online-state {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.photo-picker-foot {
    justify-content: space-between;
    background: #f8f3e6;
    color: #143322;
    border-top: 1px solid rgba(6, 80, 56, 0.12);
}

.photo-picker-count strong {
    color: #064f38;
    font-size: 1.05rem;
}

.shop-loading-overlay {
    display: grid;
    place-items: center;
    background: rgba(4, 14, 10, 0.55);
    backdrop-filter: blur(2px);
}

.shop-loading-card {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    padding: 1.2rem 1.4rem;
    border-radius: 22px;
    background: linear-gradient(135deg, #064f38, #0f825c);
    border: 1px solid rgba(246, 211, 107, 0.82);
    color: #fff;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.38);
}

    .shop-loading-card strong {
        color: #f6d36b;
        font-size: 1rem;
    }

    .shop-loading-card span {
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.78rem;
    }

.gold-loader {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 5px solid rgba(246, 211, 107, 0.25);
    border-top-color: #f6d36b;
    border-right-color: #d4af37;
    animation: gold-spin 0.85s linear infinite;
}

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

body.shop-is-loading {
    cursor: progress;
}

@media (max-width: 760px) {
    .bulk-photo-form,
    .bulk-photo-upload-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .bulk-photo-picker-summary {
        align-items: stretch;
    }

        .bulk-photo-picker-summary .btn,
        .bulk-photo-upload-row .btn,
        .bulk-photo-upload-row .form-control {
            width: 100%;
            max-width: none;
        }

    .photo-picker-card {
        width: calc(100vw - 0.5rem);
        max-height: calc(100vh - 0.5rem);
        margin: 0.25rem auto;
        border-radius: 16px;
    }

    .photo-picker-table {
        font-size: 0.74rem;
    }

        .photo-picker-table th,
        .photo-picker-table td {
            padding: 0.42rem;
        }

            .photo-picker-table th:nth-child(4),
            .photo-picker-table td:nth-child(4),
            .photo-picker-table th:nth-child(5),
            .photo-picker-table td:nth-child(5) {
                display: none;
            }

    .admin-online-row {
        grid-template-columns: 58px minmax(0, 1fr) !important;
    }
}

/* Fix13: make admin bulk action panels readable with green backgrounds. */
.admin-bulk-online-panel,
.admin-bulk-photo-panel {
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.98), rgba(15, 130, 92, 0.94)) !important;
    border: 1px solid rgba(120, 185, 181, 0.48) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
    color: #ffffff !important;
}

    .admin-bulk-online-panel strong,
    .admin-bulk-online-panel small,
    .admin-bulk-online-panel span,
    .admin-bulk-photo-panel strong,
    .admin-bulk-photo-panel small,
    .admin-bulk-photo-panel span {
        color: #ffffff !important;
    }

    .admin-bulk-online-panel small,
    .admin-bulk-photo-panel small {
        opacity: 0.92;
    }

    .admin-bulk-online-panel b,
    .admin-bulk-photo-panel b {
        color: #f6d36b !important;
    }

    .admin-bulk-online-panel .bulk-selected-preview,
    .admin-bulk-photo-panel .bulk-selected-preview {
        background: rgba(255, 255, 255, 0.14) !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        color: #ffffff !important;
    }

        .admin-bulk-online-panel .bulk-selected-preview span,
        .admin-bulk-online-panel .bulk-selected-preview em,
        .admin-bulk-photo-panel .bulk-selected-preview span,
        .admin-bulk-photo-panel .bulk-selected-preview em {
            background: rgba(255, 255, 255, 0.95) !important;
            color: #064234 !important;
        }

    .admin-bulk-online-panel .bulk-selected-box,
    .admin-bulk-photo-panel .bulk-selected-box {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #064234 !important;
    }

        .admin-bulk-online-panel .bulk-selected-box strong,
        .admin-bulk-photo-panel .bulk-selected-box strong {
            color: #064234 !important;
        }

    .admin-bulk-online-panel .btn-ghost-dark,
    .admin-bulk-photo-panel .btn-ghost-dark {
        background: rgba(255, 255, 255, 0.94) !important;
        color: #064234 !important;
        border-color: rgba(255, 255, 255, 0.55) !important;
    }

    .admin-bulk-online-panel .btn-outline-gold,
    .admin-bulk-photo-panel .btn-outline-gold {
        background: rgba(255, 255, 255, 0.10) !important;
        color: #f6d36b !important;
        border-color: rgba(246, 211, 107, 0.75) !important;
    }

    .admin-bulk-online-panel .form-control,
    .admin-bulk-photo-panel .form-control {
        background: rgba(255, 255, 255, 0.96) !important;
        color: #10241e !important;
        border-color: rgba(255, 255, 255, 0.5) !important;
    }

/* Fix14: consistent dark-green panels and olive buttons. 
   Keeps text readable when buttons change to yellow/gold on hover. */
:root {
    --plant-olive: #3f4a22;
    --plant-olive-2: #6f7f42;
    --plant-olive-dark: #2d3518;
    --plant-gold-readable: #f3cf5f;
    --plant-gold-text: #162414;
}

/* Green/dark-green section backgrounds instead of light grey/white. */
.shop-section,
.shop-stock-shell,
.shop-toolbar,
.shop-section-heading,
.shop-products-title,
.shop-category-panel,
.admin-online-list-head,
.admin-online-list-foot,
.admin-bulk-online-panel,
.admin-bulk-photo-panel,
.cart-panel,
.checkout-panel,
.payment-panel,
.admin-orders-toolbar,
.admin-summary-card,
.admin-detail-card,
.faq-section,
.faq-panel,
.faq-card,
.faq-wrapper,
.accordion,
.accordion-item {
    background: linear-gradient(135deg, rgba(3, 32, 25, 0.96), rgba(8, 67, 45, 0.92)) !important;
    border-color: rgba(120, 185, 181, 0.32) !important;
    color: #ffffff !important;
}

/* FAQ / accordion rows like the reference image: olive background, white text. */
.accordion-button,
.faq-question,
.faq-toggle,
.faq-item button,
.faq-item .btn,
.question-btn,
.question-row {
    background: var(--plant-olive) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    box-shadow: none !important;
}

    .accordion-button:not(.collapsed),
    .accordion-button:hover,
    .faq-question:hover,
    .faq-toggle:hover,
    .faq-item button:hover,
    .question-btn:hover,
    .question-row:hover {
        background: var(--plant-olive-2) !important;
        color: #ffffff !important;
    }

.accordion-body,
.faq-answer,
.faq-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Main button system: olive by default, gold on hover with dark text. */
.btn-gold,
.btn-outline-gold,
.btn-ghost,
.btn-ghost-dark,
.btn-cart,
.shop-pager .btn,
.shop-pager-bottom .btn,
.shop-pager-inline .btn,
.available-toggle-btn,
.mode-switch-btn,
.admin-only-panel .btn,
.shop-heading-actions .btn,
.shop-search-form .btn,
.bulk-photo-form .btn,
.bulk-photo-upload-row .btn,
.admin-bulk-online-panel .btn,
.admin-bulk-photo-panel .btn,
.admin-save-all-btn,
.photo-picker-card .btn,
.cart-panel .btn,
.checkout-panel .btn,
.payment-panel .btn,
a.btn,
button.btn {
    background: var(--plant-olive) !important;
    border: 1px solid rgba(246, 211, 107, 0.52) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}

    .btn-gold:hover,
    .btn-outline-gold:hover,
    .btn-ghost:hover,
    .btn-ghost-dark:hover,
    .btn-cart:hover,
    .shop-pager .btn:hover,
    .shop-pager-bottom .btn:hover,
    .shop-pager-inline .btn:hover,
    .available-toggle-btn:hover,
    .mode-switch-btn:hover,
    .admin-only-panel .btn:hover,
    .shop-heading-actions .btn:hover,
    .shop-search-form .btn:hover,
    .bulk-photo-form .btn:hover,
    .bulk-photo-upload-row .btn:hover,
    .admin-bulk-online-panel .btn:hover,
    .admin-bulk-photo-panel .btn:hover,
    .admin-save-all-btn:hover,
    .photo-picker-card .btn:hover,
    .cart-panel .btn:hover,
    .checkout-panel .btn:hover,
    .payment-panel .btn:hover,
    a.btn:hover,
    button.btn:hover {
        background: var(--plant-gold-readable) !important;
        border-color: var(--plant-gold-readable) !important;
        color: var(--plant-gold-text) !important;
    }

    /* Keep active/selected buttons readable. */
    .mode-switch-btn.active,
    .available-toggle-btn.btn-gold,
    .shop-pager .btn.active,
    .shop-pager-bottom .btn.active,
    .photo-picker-table tr.is-selected {
        background: var(--plant-olive-2) !important;
        color: #ffffff !important;
        border-color: rgba(246, 211, 107, 0.72) !important;
    }

/* Prevent yellow text on white/light controls inside admin blocks. */
.admin-bulk-online-panel,
.admin-bulk-photo-panel,
.admin-bulk-online-panel label,
.admin-bulk-photo-panel label,
.admin-bulk-online-panel small,
.admin-bulk-photo-panel small,
.admin-bulk-online-panel strong,
.admin-bulk-photo-panel strong {
    color: #ffffff !important;
}

    .admin-bulk-online-panel .form-control,
    .admin-bulk-photo-panel .form-control,
    .shop-search-form .form-control,
    .photo-picker-search input,
    select.form-control,
    input.form-control,
    textarea.form-control {
        background: rgba(255, 255, 255, 0.96) !important;
        color: #10241e !important;
        border-color: rgba(255, 255, 255, 0.40) !important;
    }

        .admin-bulk-online-panel .form-control::placeholder,
        .admin-bulk-photo-panel .form-control::placeholder,
        .shop-search-form .form-control::placeholder,
        .photo-picker-search input::placeholder {
            color: rgba(16, 36, 30, 0.68) !important;
        }

/* Fix15: button colour correction.
   Default buttons are solid white with dark-green/olive text.
   Hover/focus changes them to olive green with white text.
   Primary action buttons can still use gold where required. */
:root {
    --plant-button-white: #ffffff;
    --plant-button-olive: #64733a;
    --plant-button-olive-dark: #3f4a22;
    --plant-button-green-text: #073b2d;
    --plant-button-gold: #f3cf5f;
}

.admin-bulk-online-panel .btn,
.admin-bulk-photo-panel .btn,
.admin-only-panel .btn,
.shop-heading-actions .btn,
.shop-search-form .btn,
.bulk-photo-form .btn,
.bulk-photo-upload-row .btn,
.photo-picker-card .btn,
.shop-pager .btn,
.shop-pager-bottom .btn,
.shop-pager-inline .btn,
.available-toggle-btn,
.mode-switch-btn,
.btn-ghost,
.btn-ghost-dark,
.btn-outline-gold,
button.btn,
a.btn {
    background: var(--plant-button-white) !important;
    background-color: var(--plant-button-white) !important;
    color: var(--plant-button-green-text) !important;
    border: 1px solid rgba(243, 207, 95, 0.85) !important;
    box-shadow: none !important;
}

    .admin-bulk-online-panel .btn:hover,
    .admin-bulk-online-panel .btn:focus,
    .admin-bulk-photo-panel .btn:hover,
    .admin-bulk-photo-panel .btn:focus,
    .admin-only-panel .btn:hover,
    .admin-only-panel .btn:focus,
    .shop-heading-actions .btn:hover,
    .shop-heading-actions .btn:focus,
    .shop-search-form .btn:hover,
    .shop-search-form .btn:focus,
    .bulk-photo-form .btn:hover,
    .bulk-photo-form .btn:focus,
    .bulk-photo-upload-row .btn:hover,
    .bulk-photo-upload-row .btn:focus,
    .photo-picker-card .btn:hover,
    .photo-picker-card .btn:focus,
    .shop-pager .btn:hover,
    .shop-pager .btn:focus,
    .shop-pager-bottom .btn:hover,
    .shop-pager-bottom .btn:focus,
    .shop-pager-inline .btn:hover,
    .shop-pager-inline .btn:focus,
    .available-toggle-btn:hover,
    .available-toggle-btn:focus,
    .mode-switch-btn:hover,
    .mode-switch-btn:focus,
    .btn-ghost:hover,
    .btn-ghost:focus,
    .btn-ghost-dark:hover,
    .btn-ghost-dark:focus,
    .btn-outline-gold:hover,
    .btn-outline-gold:focus,
    button.btn:hover,
    button.btn:focus,
    a.btn:hover,
    a.btn:focus {
        background: var(--plant-button-olive) !important;
        background-color: var(--plant-button-olive) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
    }

/* Primary gold buttons stay gold, but hover into olive instead of turning white. */
.btn-gold,
.shop-search-form .btn-gold,
.admin-save-all-btn,
.cart-panel .btn-gold,
.checkout-panel .btn-gold,
.payment-panel .btn-gold {
    background: var(--plant-button-gold) !important;
    background-color: var(--plant-button-gold) !important;
    color: #10241e !important;
    border-color: var(--plant-button-gold) !important;
}

    .btn-gold:hover,
    .btn-gold:focus,
    .shop-search-form .btn-gold:hover,
    .shop-search-form .btn-gold:focus,
    .admin-save-all-btn:hover,
    .admin-save-all-btn:focus,
    .cart-panel .btn-gold:hover,
    .cart-panel .btn-gold:focus,
    .checkout-panel .btn-gold:hover,
    .checkout-panel .btn-gold:focus,
    .payment-panel .btn-gold:hover,
    .payment-panel .btn-gold:focus {
        background: var(--plant-button-olive) !important;
        background-color: var(--plant-button-olive) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.35) !important;
    }

/* Selected chip: solid olive, not hollow. */
.bulk-selected-count,
.selected-count-pill,
.admin-selected-pill,
.photo-picker-selected-count {
    background: var(--plant-button-olive) !important;
    background-color: var(--plant-button-olive) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* Fix16: no yellow hover states.
   Buttons are olive/dark-green by default and turn white on hover/focus. */
:root {
    --plant-btn-olive-final: #64733a;
    --plant-btn-olive-final-dark: #3f4a22;
    --plant-btn-white-final: #ffffff;
    --plant-btn-text-final: #073b2d;
}

.btn,
button.btn,
a.btn,
.btn-gold,
.btn-outline-gold,
.btn-ghost,
.btn-ghost-dark,
.btn-cart,
.available-toggle-btn,
.mode-switch-btn,
.admin-only-panel .btn,
.admin-bulk-online-panel .btn,
.admin-bulk-photo-panel .btn,
.shop-heading-actions .btn,
.shop-search-form .btn,
.bulk-photo-form .btn,
.bulk-photo-upload-row .btn,
.photo-picker-card .btn,
.shop-pager .btn,
.shop-pager-bottom .btn,
.shop-pager-inline .btn,
.cart-panel .btn,
.checkout-panel .btn,
.payment-panel .btn,
.admin-save-all-btn {
    background: var(--plant-btn-olive-final) !important;
    background-color: var(--plant-btn-olive-final) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: none !important;
}

    .btn:hover,
    .btn:focus,
    button.btn:hover,
    button.btn:focus,
    a.btn:hover,
    a.btn:focus,
    .btn-gold:hover,
    .btn-gold:focus,
    .btn-outline-gold:hover,
    .btn-outline-gold:focus,
    .btn-ghost:hover,
    .btn-ghost:focus,
    .btn-ghost-dark:hover,
    .btn-ghost-dark:focus,
    .btn-cart:hover,
    .btn-cart:focus,
    .available-toggle-btn:hover,
    .available-toggle-btn:focus,
    .mode-switch-btn:hover,
    .mode-switch-btn:focus,
    .admin-only-panel .btn:hover,
    .admin-only-panel .btn:focus,
    .admin-bulk-online-panel .btn:hover,
    .admin-bulk-online-panel .btn:focus,
    .admin-bulk-photo-panel .btn:hover,
    .admin-bulk-photo-panel .btn:focus,
    .shop-heading-actions .btn:hover,
    .shop-heading-actions .btn:focus,
    .shop-search-form .btn:hover,
    .shop-search-form .btn:focus,
    .bulk-photo-form .btn:hover,
    .bulk-photo-form .btn:focus,
    .bulk-photo-upload-row .btn:hover,
    .bulk-photo-upload-row .btn:focus,
    .photo-picker-card .btn:hover,
    .photo-picker-card .btn:focus,
    .shop-pager .btn:hover,
    .shop-pager .btn:focus,
    .shop-pager-bottom .btn:hover,
    .shop-pager-bottom .btn:focus,
    .shop-pager-inline .btn:hover,
    .shop-pager-inline .btn:focus,
    .cart-panel .btn:hover,
    .cart-panel .btn:focus,
    .checkout-panel .btn:hover,
    .checkout-panel .btn:focus,
    .payment-panel .btn:hover,
    .payment-panel .btn:focus,
    .admin-save-all-btn:hover,
    .admin-save-all-btn:focus {
        background: var(--plant-btn-white-final) !important;
        background-color: var(--plant-btn-white-final) !important;
        color: var(--plant-btn-text-final) !important;
        border-color: var(--plant-btn-white-final) !important;
    }

    /* Keep selected/active states olive, but still no yellow. */
    .mode-switch-btn.active,
    .available-toggle-btn.active,
    .available-toggle-btn.btn-gold,
    .shop-pager .btn.active,
    .shop-pager-bottom .btn.active,
    .shop-pager-inline .btn.active {
        background: var(--plant-btn-olive-final-dark) !important;
        background-color: var(--plant-btn-olive-final-dark) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.45) !important;
    }

        .mode-switch-btn.active:hover,
        .available-toggle-btn.active:hover,
        .available-toggle-btn.btn-gold:hover,
        .shop-pager .btn.active:hover,
        .shop-pager-bottom .btn.active:hover,
        .shop-pager-inline .btn.active:hover {
            background: var(--plant-btn-white-final) !important;
            background-color: var(--plant-btn-white-final) !important;
            color: var(--plant-btn-text-final) !important;
            border-color: var(--plant-btn-white-final) !important;
        }

/* Fix17: buttons match the In Stock tag colour.
   Default = same gold/yellow as .stock-pill.in-stock.
   Hover/focus = white with dark green text. */
:root {
    --shop-instock-bg: rgba(239, 200, 91, 0.95);
    --shop-instock-text: #061814;
}

.btn-gold,
.btn-outline-gold,
.btn-ghost,
.btn-ghost-dark,
.btn-cart,
.shop-pager .btn,
.shop-pager-bottom .btn,
.shop-pager-inline .btn,
.available-toggle-btn,
.mode-switch-btn,
.admin-only-panel .btn,
.shop-heading-actions .btn,
.shop-search-form .btn,
.bulk-photo-form .btn,
.bulk-photo-upload-row .btn,
.admin-bulk-online-panel .btn,
.admin-bulk-photo-panel .btn,
.admin-save-all-btn,
.photo-picker-card .btn,
.cart-panel .btn,
.checkout-panel .btn,
.payment-panel .btn,
.admin-single-photo-btn,
a.btn,
button.btn {
    background: var(--shop-instock-bg) !important;
    border-color: var(--shop-instock-bg) !important;
    color: var(--shop-instock-text) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20) !important;
}

    .btn-gold:hover,
    .btn-outline-gold:hover,
    .btn-ghost:hover,
    .btn-ghost-dark:hover,
    .btn-cart:hover,
    .shop-pager .btn:hover,
    .shop-pager-bottom .btn:hover,
    .shop-pager-inline .btn:hover,
    .available-toggle-btn:hover,
    .mode-switch-btn:hover,
    .admin-only-panel .btn:hover,
    .shop-heading-actions .btn:hover,
    .shop-search-form .btn:hover,
    .bulk-photo-form .btn:hover,
    .bulk-photo-upload-row .btn:hover,
    .admin-bulk-online-panel .btn:hover,
    .admin-bulk-photo-panel .btn:hover,
    .admin-save-all-btn:hover,
    .photo-picker-card .btn:hover,
    .cart-panel .btn:hover,
    .checkout-panel .btn:hover,
    .payment-panel .btn:hover,
    .admin-single-photo-btn:hover,
    a.btn:hover,
    button.btn:hover,
    .btn-gold:focus,
    .btn-outline-gold:focus,
    .btn-ghost:focus,
    .btn-ghost-dark:focus,
    button.btn:focus,
    a.btn:focus {
        background: #ffffff !important;
        border-color: #ffffff !important;
        color: #061814 !important;
    }

    .mode-switch-btn.active,
    .available-toggle-btn.btn-gold,
    .shop-pager .btn.active,
    .shop-pager-bottom .btn.active {
        background: var(--shop-instock-bg) !important;
        border-color: var(--shop-instock-bg) !important;
        color: var(--shop-instock-text) !important;
    }

/* Fix18: make selected-count blocks match the selected Plant Group state. */
.bulk-selected-box,
.bulk-selected-count,
.selected-count-pill,
.admin-selected-pill,
.photo-picker-selected-count,
.photo-picker-count,
.admin-bulk-online-panel .bulk-selected-box,
.admin-bulk-photo-panel .bulk-selected-box {
    background: var(--plant-green-soft) !important;
    background-color: var(--plant-green-soft) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    box-shadow: none !important;
}

    .bulk-selected-box strong,
    .photo-picker-count strong,
    .bulk-selected-count strong,
    .selected-count-pill strong,
    .admin-selected-pill strong,
    .photo-picker-selected-count strong {
        color: var(--plant-gold) !important;
    }

    .admin-bulk-online-panel .bulk-selected-box:hover,
    .admin-bulk-photo-panel .bulk-selected-box:hover,
    .bulk-selected-box:hover,
    .bulk-selected-count:hover,
    .selected-count-pill:hover,
    .admin-selected-pill:hover,
    .photo-picker-selected-count:hover {
        background: var(--plant-green-soft) !important;
        background-color: var(--plant-green-soft) !important;
        color: #ffffff !important;
    }

    /* Fix19: make the selected-count number white and make the Store Display List header readable. */
    .admin-bulk-online-panel .bulk-selected-box strong[data-online-selected-count],
    .bulk-selected-box strong[data-online-selected-count],
    strong[data-online-selected-count] {
        color: #ffffff !important;
    }

.admin-online-list-head,
.admin-online-list-foot {
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.97), rgba(15, 130, 92, 0.94)) !important;
    border: 1px solid rgba(120, 185, 181, 0.45) !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20) !important;
    color: #ffffff !important;
}

    .admin-online-list-head strong,
    .admin-online-list-foot strong {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .admin-online-list-head span,
    .admin-online-list-foot span {
        color: rgba(255, 255, 255, 0.90) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
    }


/* Fix20 - stock must render only after all data/assets are ready */
.shop-stock-display[hidden] {
    display: none !important;
}

.shop-stock-shell.stock-loading-start {
    min-height: 72vh;
}

    .shop-stock-shell.stock-loading-start .shop-stock-display {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

.shop-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(6, 36, 23, 0.72);
    backdrop-filter: blur(3px);
}

    .shop-loading-overlay[hidden] {
        display: none !important;
    }

.shop-loading-card {
    min-width: min(320px, 92vw);
    border: 1px solid rgba(239, 200, 91, 0.65);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(18, 79, 48, 0.98), rgba(9, 45, 29, 0.98));
    color: #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
    padding: 1.35rem 1.5rem;
    text-align: center;
}

    .shop-loading-card strong {
        display: block;
        margin-top: 0.85rem;
        font-size: 1.05rem;
        color: #fff;
    }

    .shop-loading-card span {
        display: block;
        margin-top: 0.25rem;
        font-size: 0.88rem;
        color: rgba(255, 255, 255, 0.82);
    }

.gold-loader {
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border-radius: 50%;
    border: 5px solid rgba(239, 200, 91, 0.28);
    border-top-color: rgba(239, 200, 91, 1);
    border-right-color: rgba(239, 200, 91, 0.75);
    animation: plantGoldSpin 0.8s linear infinite;
}

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

/* Fix21 - restore the single internal stock scroll after delayed stock reveal.
   The delayed-render wrapper must be part of the flex layout; otherwise the
   section has overflow hidden but the product area has no usable height. */
.shop-stock-display {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    .shop-stock-display[hidden] {
        display: none !important;
    }

    .shop-stock-display > .shop-toolbar,
    .shop-stock-display > .admin-bulk-online-panel,
    .shop-stock-display > .admin-bulk-photo-panel,
    .shop-stock-display > .admin-online-list-head,
    .shop-stock-display > .admin-online-list-foot {
        flex: 0 0 auto !important;
    }

    .shop-stock-display > .shop-layout.right-category-layout {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .shop-stock-display .product-area {
        min-height: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

/* =========================================================
   Fix22 - hard reset the shop scroll stack.
   Goal: no page scroll, no stock rows disappearing behind toolbars/panels.
   ========================================================= */
.shop-stock-shell {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0.75rem !important;
}

    .stock-heading-row,
    .shop-stock-shell > .alert {
        flex: 0 0 auto !important;
    }

.shop-stock-display:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
}

.shop-stock-display > .shop-toolbar,
.shop-stock-display > .admin-bulk-online-panel,
.shop-stock-display > .admin-bulk-photo-panel {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 20 !important;
}

.shop-stock-display > .shop-layout.right-category-layout {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    display: grid !important;
    align-items: stretch !important;
}

.shop-stock-display .product-area {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    padding-right: 0.35rem !important;
    padding-bottom: 2rem !important;
    scroll-padding-top: 4.5rem !important;
    -webkit-overflow-scrolling: touch;
}

.shop-stock-display .shop-result-strip {
    position: sticky !important;
    top: 0 !important;
    z-index: 15 !important;
    background: linear-gradient(145deg, rgba(18, 79, 48, 0.98), rgba(8, 46, 30, 0.98)) !important;
    border: 1px solid rgba(239, 200, 91, 0.28) !important;
    border-radius: 16px !important;
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

.shop-stock-display .right-category-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    position: relative !important;
    z-index: 5 !important;
    -webkit-overflow-scrolling: touch;
}

.shop-stock-display .admin-online-list,
.shop-stock-display .product-grid {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 2rem !important;
}

@media (max-width: 900px) {
    .shop-stock-shell {
        height: 100dvh !important;
        max-height: 100dvh !important;
        padding: 0.45rem !important;
    }

    .shop-stock-display > .shop-layout.right-category-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.55rem !important;
    }

    .shop-stock-display .right-category-panel {
        flex: 0 0 auto !important;
        max-height: 34dvh !important;
    }

    .shop-stock-display .product-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
}

/* =========================================================
   Fix23 - collapsible admin bulk panels.
   ========================================================= */
.admin-collapsible-panel {
    display: block !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

    .admin-collapsible-panel > summary.admin-collapsible-summary {
        list-style: none !important;
        cursor: pointer !important;
        user-select: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.75rem !important;
        padding: 0.85rem 1rem !important;
        background: rgba(13, 78, 46, 0.96) !important;
        color: #fff !important;
        border-radius: 16px !important;
        border: 1px solid rgba(239, 200, 91, 0.32) !important;
    }

        .admin-collapsible-panel > summary.admin-collapsible-summary::-webkit-details-marker {
            display: none !important;
        }

        .admin-collapsible-panel > summary.admin-collapsible-summary::after {
            content: "Show";
            flex: 0 0 auto;
            padding: 0.28rem 0.65rem;
            border-radius: 999px;
            background: rgba(239, 200, 91, 0.95);
            color: #173f23;
            font-weight: 900;
            font-size: 0.74rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }

    .admin-collapsible-panel[open] > summary.admin-collapsible-summary::after {
        content: "Hide";
    }

.admin-collapsible-title {
    font-weight: 900 !important;
    font-size: 0.95rem !important;
    color: #fff !important;
    line-height: 1.1 !important;
}

.admin-collapsible-hint {
    margin-left: auto !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-align: right !important;
}

.admin-collapsible-body {
    padding-top: 0.75rem !important;
}

.admin-collapsible-panel:not([open]) {
    padding-bottom: 0 !important;
}

    .admin-collapsible-panel:not([open]) > form,
    .admin-collapsible-panel:not([open]) > .admin-collapsible-body {
        display: none !important;
    }

.collapsible-inner-note {
    margin-bottom: 0.65rem !important;
}

@media (max-width: 768px) {
    .admin-collapsible-panel > summary.admin-collapsible-summary {
        align-items: flex-start !important;
        flex-wrap: wrap !important;
    }

    .admin-collapsible-hint {
        order: 3;
        width: 100%;
        margin-left: 0 !important;
        text-align: left !important;
    }
}

/* Fix24: safer admin panel collapse - keep panel in normal layout, only hide body. */
.admin-safe-panel {
    background: rgba(27, 83, 54, 0.98) !important;
    border: 1px solid rgba(239, 200, 91, 0.35) !important;
    border-radius: 18px !important;
    color: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

    .admin-safe-panel + .admin-safe-panel {
        margin-top: 10px !important;
    }

.admin-safe-panel-head {
    width: 100% !important;
    border: 0 !important;
    background: rgba(18, 74, 45, 0.98) !important;
    color: #fff !important;
    display: grid !important;
    grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 12px 14px !important;
    text-align: left !important;
    cursor: pointer !important;
}

    .admin-safe-panel-head:hover,
    .admin-safe-panel-head:focus {
        background: rgba(239, 200, 91, 0.95) !important;
        color: #123923 !important;
        outline: none !important;
    }

        .admin-safe-panel-head:hover .admin-collapsible-hint,
        .admin-safe-panel-head:focus .admin-collapsible-hint {
            color: #123923 !important;
        }

    .admin-safe-panel-head b {
        justify-self: end !important;
        background: rgba(255, 255, 255, 0.95) !important;
        color: #123923 !important;
        border-radius: 999px !important;
        padding: 4px 11px !important;
        font-size: 0.78rem !important;
        line-height: 1.1 !important;
    }

.admin-safe-panel-body {
    padding: 12px 14px 14px !important;
}

.admin-safe-panel.is-collapsed .admin-safe-panel-body {
    display: none !important;
}

.show-online-filter-check {
    background: rgba(27, 83, 54, 0.95) !important;
    border-color: rgba(239, 200, 91, 0.55) !important;
    color: #fff !important;
}

    .show-online-filter-check span {
        color: #fff !important;
    }

@media (max-width: 720px) {
    .admin-safe-panel-head {
        grid-template-columns: 1fr auto !important;
        gap: 6px 10px !important;
    }

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


/* Fix25: collapse both bulk panels by default and make the collapsed header fill the whole panel. */
.admin-safe-panel.admin-bulk-online-panel,
.admin-safe-panel.admin-bulk-photo-panel {
    padding: 0 !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.97), rgba(15, 130, 92, 0.94)) !important;
    border: 1px solid rgba(239, 200, 91, 0.45) !important;
    border-radius: 16px !important;
}

.admin-safe-panel .admin-safe-panel-head {
    width: 100% !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.98), rgba(15, 130, 92, 0.96)) !important;
    color: #ffffff !important;
    display: grid !important;
    grid-template-columns: minmax(150px, max-content) 1fr auto !important;
    gap: 14px !important;
    align-items: center !important;
    text-align: left !important;
}

.admin-safe-panel.is-collapsed .admin-safe-panel-head {
    min-height: 54px !important;
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.98), rgba(15, 130, 92, 0.96)) !important;
}

.admin-safe-panel.is-open .admin-safe-panel-head {
    border-bottom: 1px solid rgba(239, 200, 91, 0.28) !important;
}

.admin-safe-panel .admin-safe-panel-body {
    padding: 14px 16px 16px !important;
}

.admin-safe-panel.is-collapsed .admin-safe-panel-body {
    display: none !important;
}

.admin-safe-panel .admin-collapsible-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.admin-safe-panel .admin-collapsible-hint {
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

.admin-safe-panel .admin-safe-panel-head b {
    background: #ffffff !important;
    color: #064430 !important;
    border-radius: 999px !important;
    padding: 7px 13px !important;
    min-width: 54px !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
}

.admin-safe-panel .admin-safe-panel-head:hover,
.admin-safe-panel .admin-safe-panel-head:focus {
    background: #ffffff !important;
    color: #064430 !important;
}

    .admin-safe-panel .admin-safe-panel-head:hover .admin-collapsible-title,
    .admin-safe-panel .admin-safe-panel-head:hover .admin-collapsible-hint,
    .admin-safe-panel .admin-safe-panel-head:focus .admin-collapsible-title,
    .admin-safe-panel .admin-safe-panel-head:focus .admin-collapsible-hint {
        color: #064430 !important;
    }

    .admin-safe-panel .admin-safe-panel-head:hover b,
    .admin-safe-panel .admin-safe-panel-head:focus b {
        background: rgba(6, 80, 56, 0.95) !important;
        color: #ffffff !important;
    }

@media (max-width: 700px) {
    .admin-safe-panel .admin-safe-panel-head {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    .admin-safe-panel .admin-collapsible-hint {
        grid-column: 1 / -1 !important;
        font-size: 0.72rem !important;
    }
}

/* Fix26: collapsible bulk-panel header hover should be gold/yellow, not white. */
.admin-safe-panel .admin-safe-panel-head:hover,
.admin-safe-panel .admin-safe-panel-head:focus {
    background: var(--shop-instock-bg, rgba(239, 200, 91, 0.95)) !important;
    background-color: var(--shop-instock-bg, rgba(239, 200, 91, 0.95)) !important;
    color: #061814 !important;
}

    .admin-safe-panel .admin-safe-panel-head:hover .admin-collapsible-title,
    .admin-safe-panel .admin-safe-panel-head:hover .admin-collapsible-hint,
    .admin-safe-panel .admin-safe-panel-head:focus .admin-collapsible-title,
    .admin-safe-panel .admin-safe-panel-head:focus .admin-collapsible-hint {
        color: #061814 !important;
    }

    .admin-safe-panel .admin-safe-panel-head:hover b,
    .admin-safe-panel .admin-safe-panel-head:focus b {
        background: rgba(6, 80, 56, 0.95) !important;
        background-color: rgba(6, 80, 56, 0.95) !important;
        color: #ffffff !important;
    }

/* Fix27: make Bulk Show Online and Bulk Photo Upload headers gold/yellow by default, with white hover. */
.admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head,
.admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head,
.admin-safe-panel.admin-bulk-online-panel.is-collapsed .admin-safe-panel-head,
.admin-safe-panel.admin-bulk-photo-panel.is-collapsed .admin-safe-panel-head,
.admin-safe-panel.admin-bulk-online-panel.is-open .admin-safe-panel-head,
.admin-safe-panel.admin-bulk-photo-panel.is-open .admin-safe-panel-head {
    background: var(--shop-instock-bg, rgba(239, 200, 91, 0.95)) !important;
    background-color: var(--shop-instock-bg, rgba(239, 200, 91, 0.95)) !important;
    color: #061814 !important;
}

    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head .admin-collapsible-title,
    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head .admin-collapsible-hint,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head .admin-collapsible-title,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head .admin-collapsible-hint {
        color: #061814 !important;
    }

    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head b,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head b {
        background: rgba(6, 80, 56, 0.95) !important;
        background-color: rgba(6, 80, 56, 0.95) !important;
        color: #ffffff !important;
    }

    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:hover,
    .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:focus,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:hover,
    .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:focus {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #064430 !important;
    }

        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:hover .admin-collapsible-title,
        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:hover .admin-collapsible-hint,
        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:focus .admin-collapsible-title,
        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:focus .admin-collapsible-hint,
        .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:hover .admin-collapsible-title,
        .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:hover .admin-collapsible-hint,
        .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:focus .admin-collapsible-title,
        .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:focus .admin-collapsible-hint {
            color: #064430 !important;
        }

        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:hover b,
        .admin-safe-panel.admin-bulk-online-panel .admin-safe-panel-head:focus b,
        .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:hover b,
        .admin-safe-panel.admin-bulk-photo-panel .admin-safe-panel-head:focus b {
            background: rgba(6, 80, 56, 0.95) !important;
            background-color: rgba(6, 80, 56, 0.95) !important;
            color: #ffffff !important;
        }

/* === TRN_AUDIT online order admin polish === */
.admin-orders-shell {
    width: min(1500px, calc(100vw - 28px));
    margin-left: auto;
    margin-right: auto;
}

.admin-order-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-summary-card,
.admin-detail-card,
.admin-orders-table-wrap {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

    .admin-summary-card strong {
        display: block;
        margin-top: 6px;
        line-height: 1.1;
    }

.admin-orders-table tbody tr {
    transition: background 0.16s ease, transform 0.16s ease;
}

    .admin-orders-table tbody tr:hover {
        background: rgba(245, 207, 92, 0.07);
    }

.admin-trn-orders-table th,
.admin-trn-orders-table td,
.admin-trn-detail-table th,
.admin-trn-detail-table td {
    font-size: 0.88rem;
}

    .admin-trn-orders-table td strong,
    .admin-trn-detail-table td strong {
        color: #fff;
    }

.admin-payment-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.78rem !important;
    font-weight: 700;
    white-space: nowrap;
}

    .admin-payment-badge.ok {
        background: rgba(61, 153, 112, 0.22);
        color: #c7ffe4 !important;
        border: 1px solid rgba(61, 153, 112, 0.38);
    }

    .admin-payment-badge.warn {
        background: rgba(245, 207, 92, 0.16);
        color: #ffe9a1 !important;
        border: 1px solid rgba(245, 207, 92, 0.36);
    }

.ok-text {
    color: #c7ffe4 !important;
}

.warn-text {
    color: #ffe9a1 !important;
}

.admin-empty-card {
    background: rgba(0, 32, 22, 0.82);
    border: 1px solid rgba(245, 207, 92, 0.24);
    color: #fff;
}

    .admin-empty-card p {
        color: rgba(255, 255, 255, 0.72);
    }

@media (max-width: 1100px) {
    .admin-order-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .admin-orders-shell {
        width: min(100%, calc(100vw - 16px));
    }

    .admin-order-summary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .admin-summary-card,
    .admin-detail-card {
        padding: 12px;
        border-radius: 14px;
    }

    .admin-orders-table th,
    .admin-orders-table td {
        padding: 10px;
    }
}

.admin-note-card {
    margin: 1rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--plant-border);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.34);
    box-shadow: var(--plant-shadow);
    display: grid;
    gap: 0.35rem;
}

    .admin-note-card strong {
        color: var(--plant-gold);
        text-transform: uppercase;
        font-size: 0.78rem;
        letter-spacing: 0.06em;
    }

    .admin-note-card span {
        color: var(--plant-text);
    }

/* Login / users extension */
.auth-shell .auth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.auth-card h3,
.user-edit-card h3 {
    margin-top: 0;
}

.shop-inline-logout {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0;
    color: var(--shop-muted, #6b7280);
    white-space: nowrap;
}

.permission-check-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: 1rem 0;
}

.user-edit-card {
    max-width: 980px;
}

@media (max-width: 900px) {
    .auth-shell .auth-grid {
        grid-template-columns: 1fr;
    }

    .shop-inline-logout {
        width: 100%;
        justify-content: space-between;
    }
}

.permission-table input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
}

.permission-actions {
    margin-top: 1rem;
    justify-content: flex-end;
}


/* Login page: default to login, create account opens only when requested */
.single-auth-shell .auth-panel-wrap {
    max-width: 560px;
    margin: 0 auto;
}

.single-auth-shell .auth-panel {
    width: 100%;
}

.auth-secondary-action {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--plant-border, rgba(255,255,255,.14));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    color: var(--shop-muted, #6b7280);
    font-size: .95rem;
}

.auth-link-button {
    border: 0;
    background: transparent;
    color: var(--plant-gold, #c9a24a);
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

    .auth-link-button:hover,
    .auth-link-button:focus {
        color: var(--plant-text, #ffffff);
    }

/* inline client-side search/filter controls */
.inline-search-strip {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
    margin: .85rem 0 1rem;
}

.inline-search-box {
    position: relative;
    flex: 1 1 320px;
    min-width: 220px;
}

    .inline-search-box .form-control {
        padding-left: 2.15rem;
        min-height: 38px;
    }

.inline-search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: .72;
    pointer-events: none;
}

.btn-inline-clear {
    min-height: 34px;
    padding: .35rem .75rem;
    font-size: .84rem;
    line-height: 1.1;
}

.small-muted {
    font-size: .84rem;
}

.btn-sm-table {
    padding: .32rem .62rem;
    font-size: .82rem;
    line-height: 1.1;
    min-height: 30px;
}

.table-action-cell {
    white-space: nowrap;
}

/* multiple product photo manager */
.product-photo-admin-shell .checkout-card.compact-card {
    padding: 1rem;
}

.photo-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

    .photo-admin-grid h3 {
        margin: 0 0 .65rem;
        font-size: 1.05rem;
    }

    .photo-admin-grid label {
        display: block;
        margin-top: .5rem;
        margin-bottom: .25rem;
        font-weight: 700;
    }

    .photo-admin-grid .btn {
        margin-top: .75rem;
    }

.photo-admin-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
}

.photo-thumb-link {
    display: inline-flex;
    align-items: center;
}

.photo-order-cell .form-control-sm {
    width: 84px;
    text-align: center;
}

.photo-order-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
}

@media (max-width: 760px) {
    .photo-admin-grid {
        grid-template-columns: 1fr;
    }

    .inline-search-strip {
        align-items: stretch;
    }

    .inline-search-box {
        flex-basis: 100%;
    }
}


/* product photo page scroll + readable filenames */
.product-photo-admin-shell {
    min-height: 0;
}

.photo-order-form {
    display: block;
    width: 100%;
    max-height: min(58vh, 620px);
    overflow: auto;
    border: 1px solid rgba(245, 207, 92, 0.24);
    border-radius: 18px;
    background: rgba(0, 26, 18, 0.82);
}

    .photo-order-form .admin-order-table {
        width: 100%;
        min-width: 860px;
        border-collapse: collapse;
        color: #ffffff;
    }

        .photo-order-form .admin-order-table th,
        .photo-order-form .admin-order-table td {
            padding: 0.65rem 0.75rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.10);
            vertical-align: middle;
        }

        .photo-order-form .admin-order-table th {
            position: sticky;
            top: 0;
            z-index: 3;
            background: rgba(0, 44, 30, 0.98);
            color: var(--shop-gold, #f5cf5c);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .photo-order-form .admin-order-table td:nth-child(2),
        .photo-order-form .admin-order-table td:nth-child(3),
        .photo-order-form .admin-order-table td:nth-child(5),
        .photo-order-form .admin-order-table td:nth-child(6) {
            white-space: nowrap;
        }

        .photo-order-form .admin-order-table td:nth-child(6) {
            max-width: 320px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    .photo-order-form .photo-order-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        background: rgba(0, 26, 18, 0.96);
        border-top: 1px solid rgba(245, 207, 92, 0.22);
        padding: 0.75rem;
        margin-top: 0;
    }

@media (max-width: 760px) {
    .photo-order-form {
        max-height: 62vh;
    }

        .photo-order-form .admin-order-table {
            min-width: 760px;
        }
}

/* photo admin grouped list + compact edit panel */
.selected-admin-row {
    outline: 1px solid rgba(245, 207, 92, 0.42);
    background: rgba(245, 207, 92, 0.08);
}

.photo-edit-panel {
    margin-top: 1rem;
    padding: 1rem;
}

.inner-heading {
    margin-bottom: 0.75rem;
}

.compact-photo-edit-form {
    max-height: min(46vh, 500px);
}

.photo-order-cell input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}


/* compact collapsible photo upload UI */
.photo-upload-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
}

.photo-upload-accordion {
    border: 1px solid rgba(245, 207, 92, 0.24);
    border-radius: 16px;
    background: rgba(0, 28, 19, 0.78);
    overflow: hidden;
}

    .photo-upload-accordion summary {
        min-height: 48px;
        padding: 0.7rem 0.95rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        cursor: pointer;
        list-style: none;
        font-weight: 800;
        color: #fff;
    }

        .photo-upload-accordion summary::-webkit-details-marker {
            display: none;
        }

        .photo-upload-accordion summary::after {
            content: "+";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 999px;
            background: var(--shop-gold, #f5cf5c);
            color: #001b12;
            font-weight: 900;
            flex: 0 0 auto;
        }

    .photo-upload-accordion[open] summary::after {
        content: "−";
    }

    .photo-upload-accordion summary small {
        color: rgba(255, 255, 255, 0.7);
        font-weight: 700;
        font-size: 0.78rem;
        margin-left: auto;
    }

.photo-upload-mini-form {
    display: grid;
    grid-template-columns: minmax(160px, 0.75fr) minmax(220px, 1.25fr) auto;
    gap: 0.65rem;
    align-items: end;
    padding: 0 0.95rem 0.95rem;
}

.bulk-upload-mini-form {
    grid-template-columns: 1fr auto;
}

.photo-upload-field label {
    display: block;
    margin: 0 0 0.22rem;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    color: rgba(255, 255, 255, 0.76);
}

.photo-upload-mini-form .form-control {
    min-height: 38px;
}

.btn-upload-compact {
    min-height: 38px;
    padding: 0.48rem 1rem;
    white-space: nowrap;
}

/* Override the earlier large-card photo upload layout if old classes remain cached. */
.product-photo-admin-shell .photo-admin-grid {
    display: none;
}

@media (max-width: 980px) {
    .photo-upload-toolbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .photo-upload-mini-form,
    .bulk-upload-mini-form {
        grid-template-columns: 1fr;
    }

    .photo-upload-accordion summary {
        align-items: flex-start;
        flex-direction: column;
    }

        .photo-upload-accordion summary::after {
            position: absolute;
            right: 0.95rem;
            top: 0.75rem;
        }

    .photo-upload-accordion {
        position: relative;
    }
}

/* Permission/gallery polish added for module-based shop admin work. */
.image-preview-gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .75rem 1rem 0;
}

    .image-preview-gallery-controls[hidden] {
        display: none !important;
    }

.permission-table .small-muted,
.table-action-cell .small-muted {
    opacity: .8;
    white-space: nowrap;
}

/* Round 1 permission/nav foundation */
.plant-account-nav {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-left: auto;
    flex-wrap: wrap;
}

.plant-account-label {
    font-size: .85rem;
    opacity: .86;
    white-space: nowrap;
}

.plant-logout-form {
    display: inline-flex;
    margin: 0;
}

.btn-nav-account {
    padding: .35rem .7rem;
    font-size: .82rem;
}

@media (max-width: 760px) {
    .plant-account-nav {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Round 2 navigation and screen separation cleanup */
.plant-menu {
    align-items: center;
}

.plant-admin-menu {
    position: relative;
}

.plant-admin-menu-toggle {
    border: 1px solid rgba(239, 200, 91, 0.42);
    background: rgba(0, 0, 0, 0.24);
    color: #fff;
    border-radius: 999px;
    padding: 0.42rem 0.85rem;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

    .plant-admin-menu-toggle:hover,
    .plant-admin-menu-toggle:focus {
        color: var(--plant-gold);
        border-color: var(--plant-gold);
        outline: none;
    }

.plant-admin-dropdown {
    background: rgba(5, 31, 24, 0.98);
    border: 1px solid rgba(239, 200, 91, 0.32);
    border-radius: 1rem;
    padding: 0.45rem;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.48);
    min-width: 230px;
}

    .plant-admin-dropdown .dropdown-item {
        color: #fff;
        border-radius: 0.75rem;
        font-weight: 700;
        padding: 0.62rem 0.78rem;
        text-shadow: none;
    }

        .plant-admin-dropdown .dropdown-item:hover,
        .plant-admin-dropdown .dropdown-item:focus {
            color: #111;
            background: var(--plant-gold);
        }

.nav-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.38rem;
    margin-left: 0.25rem;
    border-radius: 999px;
    background: var(--plant-gold);
    color: #111;
    font-size: 0.78rem;
    font-weight: 900;
    text-shadow: none;
}

.shop-context-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.shop-context-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(239, 200, 91, 0.34);
    border-radius: 999px;
    padding: 0.42rem 0.75rem;
    background: rgba(0, 0, 0, 0.22);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.customer-context-pill {
    border-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 760px) {
    .plant-admin-menu,
    .plant-admin-menu-toggle {
        width: 100%;
    }

    .plant-admin-menu-toggle {
        justify-content: center;
    }

    .plant-admin-dropdown {
        width: 100%;
        min-width: 100%;
    }
}

/* Round 3 customer UX cleanup */
.compact-actions {
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.shop-page-cart-action,
.shop-login-action {
    white-space: nowrap;
}

.inline-search-wrap {
    position: relative;
    flex: 1 1 320px;
    min-width: min(100%, 260px);
}

    .inline-search-wrap .form-control {
        padding-left: 2.2rem;
        padding-right: 2.1rem;
    }

.inline-search-icon {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(50, 10, 107, .62);
    font-weight: 800;
    pointer-events: none;
    z-index: 2;
}

.inline-clear-btn {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.55rem;
    height: 1.55rem;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 130, 140, .12);
    color: #065084;
    font-weight: 800;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 3;
}

    .inline-clear-btn:hover {
        background: rgba(15, 130, 140, .22);
    }

    .inline-clear-btn.is-empty {
        opacity: 0;
        pointer-events: none;
    }

.live-shop-search {
    align-items: center;
    gap: .7rem;
}

.checkout-gate-note,
.signed-in-checkout-card,
.checkout-form-section {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(120,185,181,.35);
    border-radius: 1rem;
    padding: .9rem 1rem;
    box-shadow: 0 10px 24px rgba(6,80,132,.08);
}

.checkout-gate-note {
    display: flex;
    gap: .65rem;
    align-items: center;
    margin-bottom: 1rem;
}

    .checkout-gate-note span {
        color: rgba(30,30,30,.68);
    }

.signed-in-checkout-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

    .signed-in-checkout-card > div {
        display: grid;
        gap: .15rem;
    }

    .signed-in-checkout-card small {
        color: rgba(30,30,30,.62);
    }

.checkout-form-section {
    margin-bottom: .9rem;
}

.checkout-form-section-title {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: baseline;
    margin-bottom: .65rem;
}

    .checkout-form-section-title span {
        font-size: .86rem;
        color: rgba(30,30,30,.62);
    }

.delivery-address-panel[hidden] {
    display: none !important;
}

.checkout-heading-row,
.auth-heading-row {
    gap: 1rem;
}

.disabled,
a.disabled {
    pointer-events: none;
    opacity: .5;
}

.shop-toast {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    background: rgba(6,80,132,.96);
    color: #fff;
    padding: .75rem 1rem;
    border-radius: 999px;
    box-shadow: 0 16px 32px rgba(0,0,0,.22);
    transform: translateY(12px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
}

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

@media (max-width: 760px) {
    .shop-heading-actions,
    .compact-actions,
    .signed-in-checkout-card,
    .checkout-gate-note,
    .checkout-form-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .live-shop-search {
        flex-direction: column;
        align-items: stretch;
    }

    .inline-search-wrap {
        flex-basis: auto;
        width: 100%;
    }
}

/* Round 4 admin UX cleanup */
.admin-summary-warning {
    border-color: rgba(220, 53, 69, .35) !important;
    background: rgba(220, 53, 69, .06) !important;
}

.admin-inline-check {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    color: rgba(30,30,30,.72);
    white-space: nowrap;
}

.copy-value-btn {
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px dotted rgba(6,80,132,.45);
}

    .copy-value-btn:hover,
    .copy-value-btn.copied {
        color: #065084;
        border-bottom-color: #065084;
    }

.muted-copy {
    color: rgba(30,30,30,.62);
}

.server-search-strip {
    align-items: center;
}

.btn-inline-search {
    min-height: 2.25rem;
}

.admin-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    padding: .75rem 0 0;
    color: rgba(30,30,30,.68);
    font-size: .9rem;
}

.unsaved-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: .35rem .65rem;
    background: rgba(255, 193, 7, .16);
    border: 1px solid rgba(255, 193, 7, .32);
    color: #7a5900;
    font-size: .82rem;
    font-weight: 700;
}

button:disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.permission-help-card {
    margin-bottom: .85rem;
}

.permission-table-clean td:first-child {
    min-width: 15rem;
}

    .permission-table-clean td:first-child small {
        display: block;
        margin-top: .15rem;
        color: rgba(30,30,30,.5);
        font-size: .78rem;
    }

.permission-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid rgba(120,185,181,.28);
    border-radius: 999px;
    padding: .35rem .6rem;
    background: rgba(255,255,255,.7);
    cursor: pointer;
    white-space: nowrap;
}

    .permission-toggle input {
        margin: 0;
    }

    .permission-toggle.danger-toggle {
        border-color: rgba(220, 53, 69, .25);
    }

.permission-na {
    color: rgba(30,30,30,.42);
    font-size: .82rem;
}

.sticky-admin-actions {
    position: sticky;
    bottom: .75rem;
    justify-content: flex-end;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(120,185,181,.24);
    border-radius: 1rem;
    padding: .65rem;
    margin-top: .8rem;
    box-shadow: 0 10px 28px rgba(6,80,132,.12);
    z-index: 20;
}

@media print {
    .shop-heading-actions,
    .inline-search-strip,
    .photo-upload-toolbar,
    .admin-pager,
    nav,
    header,
    footer,
    .btn {
        display: none !important;
    }

    .shop-section,
    .admin-orders-shell,
    .admin-orders-table-wrap,
    .checkout-card,
    .admin-detail-card {
        box-shadow: none !important;
        border-color: #ccc !important;
    }
}

@media (max-width: 760px) {
    .admin-pager,
    .server-search-strip {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-inline-check {
        justify-content: flex-start;
    }

    .sticky-admin-actions {
        position: static;
    }
}

/* final visible navigation + checkout/cart UX fixes. */
.plant-floating-actions {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
    max-width: min(880px, calc(100vw - 24px));
    pointer-events: auto;
}

.plant-floating-link,
.plant-floating-logout .plant-floating-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 34px;
    padding: 0.4rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(246, 211, 107, 0.55);
    background: rgba(6, 47, 34, 0.92);
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 900;
    font-size: 0.78rem;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
    backdrop-filter: blur(10px);
}

    .plant-floating-link:hover,
    .plant-floating-logout .plant-floating-link:hover {
        background: var(--plant-gold-readable, #efc85b);
        color: var(--plant-gold-text, #10241e) !important;
    }

    .plant-floating-link.admin-link {
        background: rgba(12, 82, 55, 0.92);
    }

    .plant-floating-link.account-link,
    .plant-floating-logout .plant-floating-link.account-link {
        background: rgba(239, 200, 91, 0.96);
        color: #10241e !important;
    }

.plant-floating-logout {
    margin: 0;
    padding: 0;
    display: inline-flex;
}

    .plant-floating-logout button {
        appearance: none;
        cursor: pointer;
    }

.nav-cart-count {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: inherit;
    font-size: 0.72rem;
}

.checkout-form-section,
.signed-in-checkout-card,
.checkout-section .payment-safe-note.large {
    background: linear-gradient(135deg, rgba(3, 49, 35, 0.94), rgba(9, 88, 57, 0.78)) !important;
    border: 1px solid rgba(120, 185, 181, 0.34) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.18);
}

    .checkout-form-section-title strong,
    .checkout-form-section-title span,
    .signed-in-checkout-card strong,
    .signed-in-checkout-card small,
    .signed-in-checkout-card .shop-muted {
        color: #ffffff !important;
    }

.checkout-card input.form-control,
.checkout-card textarea.form-control,
.checkout-card select.form-control {
    background: rgba(2, 29, 22, 0.72) !important;
    color: #ffffff !important;
    border: 1px solid rgba(120, 185, 181, 0.38) !important;
}

    .checkout-card input.form-control::placeholder,
    .checkout-card textarea.form-control::placeholder {
        color: rgba(255,255,255,0.58) !important;
    }

    .checkout-card select.form-control option {
        background: #063322 !important;
        color: #ffffff !important;
    }

    .checkout-card input.form-control:focus,
    .checkout-card textarea.form-control:focus,
    .checkout-card select.form-control:focus {
        border-color: rgba(239, 200, 91, 0.82) !important;
        box-shadow: 0 0 0 0.18rem rgba(239, 200, 91, 0.22) !important;
    }

.cart-section .shop-empty-card[hidden],
.cart-layout[hidden],
.alert[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    .plant-floating-actions {
        left: 8px;
        right: 8px;
        top: 8px;
        justify-content: center;
        max-width: none;
    }

    .plant-floating-link,
    .plant-floating-logout .plant-floating-link {
        min-height: 31px;
        padding: 0.34rem 0.54rem;
        font-size: 0.72rem;
    }
}


/* reverse duplicate-nav fix. Use page/local actions, not floating global buttons. */
.plant-floating-actions {
    display: none !important;
}

.local-shop-nav {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.inline-logout-form {
    margin: 0;
    display: inline-flex;
}

.admin-inline-link {
    min-width: auto;
}

@media (max-width: 820px) {
    .local-shop-nav {
        justify-content: flex-start;
    }

        .local-shop-nav .btn,
        .local-shop-nav .mode-switch-btn {
            min-height: 34px;
            padding: 0.38rem 0.65rem;
            font-size: 0.76rem;
        }
}

/* final shop/admin UX polish */
.shop-inline-search,
.inline-search-box {
    position: relative;
}

    .shop-inline-search .form-control,
    .inline-search-box .form-control {
        padding-left: 2.65rem !important;
    }

    .shop-inline-search .inline-search-icon,
    .inline-search-box .inline-search-icon {
        left: 1rem;
        width: 1.2rem;
        text-align: center;
        color: rgba(236, 200, 83, .95);
        opacity: 1;
    }

.shop-filter-hint {
    font-size: .78rem;
    opacity: .78;
    align-self: center;
    color: rgba(255,255,255,.82);
}

.btn-cart-icon {
    width: 3.05rem;
    min-width: 3.05rem;
    height: 3.05rem;
    padding: 0 !important;
    border-radius: 999px !important;
    display: inline-grid;
    place-items: center;
    position: relative;
    overflow: visible;
}

    .btn-cart-icon .cart-plus-icon {
        font-size: 1.18rem;
        line-height: 1;
    }

    .btn-cart-icon .cart-button-text {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .btn-cart-icon::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + .55rem);
        transform: translateX(-50%) translateY(.25rem);
        background: rgba(0, 44, 31, .96);
        border: 1px solid rgba(236, 200, 83, .45);
        color: #fff;
        padding: .35rem .6rem;
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 800;
        opacity: 0;
        pointer-events: none;
        white-space: nowrap;
        transition: opacity .15s ease, transform .15s ease;
        box-shadow: 0 10px 24px rgba(0,0,0,.25);
        z-index: 20;
    }

    .btn-cart-icon:hover::after,
    .btn-cart-icon:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .btn-cart-icon.is-added {
        filter: brightness(1.08);
    }

.qty-spinner-only {
    caret-color: transparent;
    user-select: none;
}

.payment-warning-filter.has-warnings {
    border-color: rgba(236, 200, 83, .75);
    color: #ffe58a;
    box-shadow: 0 0 0 1px rgba(236, 200, 83, .18) inset;
}

.product-photo-admin-shell .unsaved-pill,
.unsaved-pill,
[data-unsaved-badge] {
    background: rgba(236, 200, 83, .98) !important;
    color: #062d23 !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,.24);
}

.shop-pager,
.shop-pager-bottom {
    scroll-margin-top: 1rem;
}

/* Local cart/add-to-cart icons */
.cart-link-with-icon {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.nav-cart-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.18rem;
}

.btn-cart-icon .cart-plus-img {
    width: 1.55rem;
    height: 1.55rem;
    display: block;
    object-fit: contain;
}

.btn-cart-icon:disabled .cart-plus-img {
    opacity: .45;
    filter: grayscale(.3);
}

/* Admin view header declutter. Keep page-level navigation, but group admin links. */
.shop-admin-tools-menu {
    position: relative;
    display: inline-block;
}

    .shop-admin-tools-menu > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
    }

        .shop-admin-tools-menu > summary::-webkit-details-marker {
            display: none;
        }

.admin-tools-summary::after {
    content: " ▾";
    font-size: 0.8em;
}

.shop-admin-tools-menu[open] .admin-tools-summary::after {
    content: " ▴";
}

.admin-tools-menu-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 80;
    min-width: 220px;
    padding: 0.45rem;
    display: grid;
    gap: 0.35rem;
    border: 1px solid rgba(239, 200, 91, 0.45);
    border-radius: 18px;
    background: rgba(0, 43, 31, 0.98);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.38);
}

.admin-tool-link,
.admin-tool-button {
    display: block;
    width: 100%;
    padding: 0.62rem 0.85rem;
    border: 0;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    text-align: left;
    text-decoration: none;
    font-weight: 900;
    font-size: 0.85rem;
    text-transform: uppercase;
}

    .admin-tool-link:hover,
    .admin-tool-link:focus,
    .admin-tool-button:hover,
    .admin-tool-button:focus {
        background: var(--plant-gold);
        color: #061814;
    }

.admin-tool-sync-form {
    margin: 0;
}

body.shop-admin-mode .shop-section-heading.compact-heading {
    grid-template-columns: minmax(220px, 0.75fr) minmax(360px, 1fr);
}

body.shop-admin-mode .stock-brand-left {
    min-width: 0;
}

    body.shop-admin-mode .stock-brand-left .shop-page-logo.logo-left {
        width: clamp(120px, 10vw, 190px) !important;
        height: clamp(52px, 6vw, 86px) !important;
    }

body.shop-admin-mode .shop-section-heading.compact-heading h2 {
    font-size: clamp(1.75rem, 2.8vw, 3.2rem) !important;
}

body.shop-admin-mode .local-shop-nav {
    gap: 0.4rem;
}

body.shop-admin-mode .shop-heading-actions .btn,
body.shop-admin-mode .shop-cart-link,
body.shop-admin-mode .mode-switch-btn {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
}

body.shop-admin-mode .customer-context-pill {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.shop-admin-mode .compact-mode-switch .mode-switch-btn {
    min-width: 72px;
    text-align: center;
}

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

    .admin-tools-menu-panel {
        left: 0;
        right: auto;
    }
}


/* restore yellow page nav while keeping Admin Tools above search/filter area */
.shop-section-heading.compact-heading,
.stock-heading-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    overflow: visible !important;
}

    .shop-section-heading.compact-heading .shop-heading-actions,
    .local-shop-nav,
    .shop-admin-tools-menu {
        overflow: visible !important;
    }

    .shop-section-heading.compact-heading .shop-admin-tools-menu,
    .shop-admin-tools-menu {
        position: relative !important;
        z-index: 400 !important;
    }

    .shop-section-heading.compact-heading .admin-tools-menu-panel,
    .admin-tools-menu-panel {
        z-index: 9999 !important;
        top: calc(100% + .45rem) !important;
    }

.shop-stock-display > .shop-toolbar,
.shop-toolbar,
.stock-filter-panel,
.category-filter-card {
    position: relative;
    z-index: 20 !important;
}

@media (max-width: 980px) {
    .shop-section-heading.compact-heading,
    body.shop-admin-mode .shop-section-heading.compact-heading {
        position: relative !important;
    }
}

/* Online sales filter/details fixes */
.admin-filter-empty {
    margin-top: .85rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(245, 207, 92, .28);
    border-radius: 16px;
    background: rgba(0, 36, 25, .88);
    color: rgba(255,255,255,.86);
    font-weight: 800;
    text-align: center;
}

.payment-warning-filter.has-warnings {
    box-shadow: 0 0 0 2px rgba(245, 207, 92, .22);
}

#order-details.admin-orders-shell {
    max-height: calc(100vh - 18px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#order-details .shop-section-heading {
    flex: 0 0 auto;
}

.admin-order-detail-scroll {
    min-height: 0;
    overflow: auto;
    padding-right: .25rem;
    scrollbar-width: thin;
}

    .admin-order-detail-scroll .admin-orders-table-wrap {
        max-height: none;
        overflow: visible;
    }

.admin-trn-detail-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(0, 44, 30, .98);
}

@media (max-width: 900px) {
    #order-details.admin-orders-shell {
        max-height: none;
        overflow: visible;
    }

    .admin-order-detail-scroll {
        overflow: visible;
    }
}

/* ==========================================================
   ROUND 1 - Plant Paradise shared visual alignment
   Goal: make all shop/customer/admin pages feel like one site.
   This block intentionally lives at the end of site.css so it
   overrides the older page-specific rules without a risky refactor.
   ========================================================== */
:root {
    --pp-bg: #021310;
    --pp-bg-soft: rgba(2, 38, 28, 0.72);
    --pp-bg-panel: rgba(3, 45, 32, 0.68);
    --pp-green-deep: #03281d;
    --pp-green: #0f6b45;
    --pp-green-2: #167a52;
    --pp-gold: #e7c451;
    --pp-gold-2: #d5ad38;
    --pp-cream: #f7f2e4;
    --pp-card: rgba(247, 242, 228, 0.96);
    --pp-white: #ffffff;
    --pp-text-dark: #073224;
    --pp-muted-dark: #4e645c;
    --pp-border-light: rgba(255, 255, 255, 0.16);
    --pp-border-dark: rgba(7, 50, 36, 0.16);
    --pp-shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.28);
    --pp-radius-lg: 24px;
    --pp-radius-md: 16px;
    --pp-radius-pill: 999px;
    --plant-bg: var(--pp-bg);
    --plant-bg-2: var(--pp-green-deep);
    --plant-card: var(--pp-bg-panel);
    --plant-card-2: rgba(2, 28, 21, 0.72);
    --plant-green: var(--pp-green);
    --plant-green-soft: var(--pp-green-2);
    --plant-gold: var(--pp-gold);
    --plant-gold-dark: var(--pp-gold-2);
    --plant-text: var(--pp-white);
    --plant-muted: rgba(255, 255, 255, 0.76);
    --plant-border: var(--pp-border-light);
    --plant-shadow: var(--pp-shadow-soft);
}

body.plant-body {
    background: #000;
    color: var(--pp-white);
    font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

    body.plant-body::after {
        background: linear-gradient(180deg, rgba(0, 30, 20, 0.36) 0%, rgba(0, 22, 17, 0.74) 52%, rgba(0, 0, 0, 0.96) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.05) 52%, rgba(0, 0, 0, 0.46));
    }

/* Global navigation */
.plant-nav {
    padding: clamp(0.85rem, 1.3vw, 1.35rem) clamp(1rem, 3vw, 3.5rem) !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0));
}

.plant-logo-img {
    width: clamp(185px, 15vw, 290px) !important;
    max-width: 32vw !important;
    max-height: 104px !important;
}

.plant-menu {
    gap: clamp(0.85rem, 1.5vw, 1.7rem) !important;
}

    .plant-menu a,
    .plant-admin-menu-toggle {
        color: #fff !important;
        font-size: clamp(0.88rem, 0.92vw, 1rem) !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
    }

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

/* Main shell used by all shop/admin pages */
.shop-section {
    width: min(1560px, calc(100vw - 28px)) !important;
    min-height: calc(100vh - 28px) !important;
    height: auto !important;
    margin: 14px auto !important;
    padding: clamp(1.1rem, 2vw, 1.65rem) !important;
    border: 1px solid rgba(255, 255, 255, 0.17) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(3, 42, 31, 0.90), rgba(2, 24, 18, 0.76)), rgba(0, 0, 0, 0.10) !important;
    box-shadow: var(--pp-shadow-soft) !important;
    overflow: visible !important;
}

.shop-section-heading,
.shop-section-heading.compact-heading,
.stock-heading-row {
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: 0 0 1.1rem !important;
    padding: 0.35rem 0 0.9rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(180deg, rgba(3, 42, 31, 0.98), rgba(3, 42, 31, 0.88)) !important;
    overflow: visible !important;
}

    .shop-section-heading h2,
    .shop-section-heading.compact-heading h2,
    body.shop-admin-mode .shop-section-heading.compact-heading h2 {
        margin: 0 !important;
        color: #fff !important;
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: clamp(2.15rem, 4vw, 4.45rem) !important;
        font-weight: 500 !important;
        line-height: 0.96 !important;
        letter-spacing: -0.045em !important;
        text-shadow: 0 3px 18px rgba(0, 0, 0, 0.42);
    }

.shop-muted,
.shop-page-subtitle {
    color: rgba(255, 255, 255, 0.76) !important;
}

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

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

.shop-heading-actions,
.local-shop-nav,
.compact-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.55rem !important;
    overflow: visible !important;
}

/* Buttons and pills */
.btn,
.shop-cart-link,
.mode-switch-btn,
.plant-admin-menu-toggle {
    border-radius: var(--pp-radius-pill) !important;
}

    .btn-gold,
    .btn-cart,
    .mode-switch-btn.active,
    .btn-outline-gold:hover,
    .admin-tool-link:hover,
    .admin-tool-button:hover {
        background: var(--pp-gold) !important;
        border-color: var(--pp-gold) !important;
        color: #061814 !important;
        font-weight: 800 !important;
    }

.btn-outline-gold,
.btn-ghost-dark,
.shop-cart-link,
.mode-switch-btn,
.plant-admin-menu-toggle {
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

    .btn-outline-gold:hover,
    .btn-ghost-dark:hover,
    .shop-cart-link:hover,
    .mode-switch-btn:hover {
        border-color: var(--pp-gold) !important;
        color: #061814 !important;
    }

.shop-context-pill,
.customer-context-pill {
    max-width: 210px;
    padding: 0.56rem 0.85rem !important;
    border-radius: var(--pp-radius-pill) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: rgba(255, 255, 255, 0.90) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-cart-count,
.category-item b,
.right-category-count,
.stock-pill,
.online-badge {
    background: var(--pp-gold) !important;
    color: #061814 !important;
}

/* Admin dropdown - less dashboard-like */
.shop-admin-tools-menu,
.shop-section-heading.compact-heading .shop-admin-tools-menu {
    position: relative !important;
    z-index: 500 !important;
}

.admin-tools-menu-panel,
.shop-section-heading.compact-heading .admin-tools-menu-panel {
    z-index: 9999 !important;
    top: calc(100% + .5rem) !important;
    min-width: 210px !important;
    padding: 0.45rem !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 18px !important;
    background: rgba(5, 42, 31, 0.98) !important;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.38) !important;
}

.admin-tool-link,
.admin-tool-button {
    border-radius: 13px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
}

/* Search and filter strips */
.shop-toolbar,
.stock-filter-panel,
.category-filter-card,
.shop-result-strip {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 20px !important;
    background: rgba(5, 54, 38, 0.58) !important;
    box-shadow: none !important;
}

.shop-search-form .form-control,
.inline-search-wrap .form-control,
.form-control,
.form-select,
select.form-control,
textarea.form-control {
    border: 1px solid rgba(7, 50, 36, 0.14) !important;
    border-radius: var(--pp-radius-pill) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    color: var(--pp-text-dark) !important;
    box-shadow: none !important;
}

textarea.form-control {
    border-radius: var(--pp-radius-md) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--pp-gold) !important;
    box-shadow: 0 0 0 0.18rem rgba(231, 196, 81, 0.28) !important;
}

.available-filter-check {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: var(--pp-radius-pill) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

/* Product/customer cards */
.product-grid {
    gap: clamp(1rem, 1.4vw, 1.45rem) !important;
}

.product-card,
.product-card.online-visible,
.product-card.online-hidden {
    background: var(--pp-card) !important;
    color: var(--pp-text-dark) !important;
    border: 1px solid rgba(255, 255, 255, 0.36) !important;
    border-radius: 22px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20) !important;
    overflow: hidden !important;
}

    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26) !important;
    }

    .product-card .product-image-wrap,
    .product-image-wrap {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(239, 245, 238, 0.88)) !important;
        border-bottom: 1px solid rgba(7, 50, 36, 0.10) !important;
    }

.product-image {
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

.product-card .product-content,
.product-content {
    align-items: flex-start !important;
    text-align: left !important;
}

    .product-card .product-content h3,
    .product-content h3,
    .product-card .product-meta,
    .product-card .product-meta strong,
    .product-card .qty-label,
    .product-card .upload-label {
        color: var(--pp-text-dark) !important;
        text-shadow: none !important;
    }

    .product-card .product-content h3,
    .product-content h3 {
        width: 100% !important;
        font-size: clamp(0.95rem, 1vw, 1.16rem) !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        letter-spacing: -0.015em !important;
    }

.product-card .product-meta,
.product-meta {
    color: var(--pp-muted-dark) !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
}

.product-card .product-price,
.product-price {
    color: var(--pp-green) !important;
    font-size: clamp(1.16rem, 1.15vw, 1.36rem) !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.qty-row,
.product-actions,
.cart-action-row {
    width: 100% !important;
    justify-content: space-between !important;
}

.qty-input,
.product-card input[type="number"] {
    max-width: 86px !important;
    border-radius: var(--pp-radius-pill) !important;
}

/* Category panels */
.shop-layout.right-category-layout {
    grid-template-columns: minmax(0, 1fr) minmax(235px, 285px) !important;
    gap: 1rem !important;
}

.right-category-panel,
.category-panel {
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 22px !important;
    background: rgba(4, 48, 35, 0.54) !important;
    box-shadow: none !important;
}

.category-item,
.right-category-link {
    border-radius: 14px !important;
    color: #fff !important;
    background: transparent !important;
}

    .category-item:hover,
    .category-item.active,
    .right-category-link:hover,
    .right-category-link.active {
        background: rgba(255, 255, 255, 0.10) !important;
    }

/* Forms, tables, panels across admin/customer pages */
.checkout-card,
.cart-summary,
.cart-row,
.payment-card,
.admin-note-card,
.admin-order-table-wrap,
.signed-in-checkout-card,
.checkout-gate-note,
.shop-empty-card,
.auth-card,
.permission-help-card,
.bulk-photo-picker-card,
.photo-card,
.user-card {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 22px !important;
    background: rgba(5, 54, 38, 0.64) !important;
    color: #fff !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18) !important;
}

    .checkout-card label,
    .auth-card label,
    .cart-summary h3,
    .payment-card h3,
    .admin-note-card strong,
    .shop-empty-card strong {
        color: #fff !important;
    }

.admin-order-table {
    color: #fff !important;
}

    .admin-order-table thead th {
        background: rgba(255, 255, 255, 0.10) !important;
        color: #fff !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
    }

    .admin-order-table tbody td {
        border-color: rgba(255, 255, 255, 0.10) !important;
    }

    .admin-order-table tbody tr:hover {
        background: rgba(255, 255, 255, 0.06) !important;
    }

.alert {
    border-radius: 18px !important;
    border-width: 1px !important;
}

/* Keep admin tools functional above search/filter layers */
.shop-stock-display > .shop-toolbar,
.shop-toolbar,
.stock-filter-panel,
.category-filter-card {
    position: relative;
    z-index: 20 !important;
}

/* Mobile alignment */
@media (max-width: 980px) {
    .shop-section {
        width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
        padding: 0.9rem !important;
        border-radius: 20px !important;
    }

    .shop-section-heading,
    .shop-section-heading.compact-heading,
    .stock-heading-row {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding-bottom: 0.75rem !important;
    }

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

    .shop-heading-actions,
    .local-shop-nav,
    .compact-actions {
        width: 100% !important;
        justify-content: flex-start !important;
    }

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

    .right-category-panel {
        position: static !important;
        order: -1;
    }
}

@media (max-width: 640px) {
    .shop-page-logo,
    .stock-brand-left .shop-page-logo.logo-left {
        width: 112px !important;
        max-height: 58px !important;
    }

    .shop-section-heading h2,
    .shop-section-heading.compact-heading h2 {
        font-size: clamp(2rem, 13vw, 3rem) !important;
    }

    .shop-heading-actions .btn,
    .shop-cart-link,
    .mode-switch-btn {
        min-height: 40px !important;
        padding: 0.45rem 0.75rem !important;
        font-size: 0.78rem !important;
    }

    .product-card .product-content,
    .product-content {
        padding: 0.85rem !important;
    }
}


/* ==========================================================
   ROUND 3 - Admin page alignment
   Goal: make Orders, Product Photos, Users, and Permissions
   feel like the same Plant Paradise admin area without making
   the customer storefront look like a dashboard.
   ========================================================== */
.admin-command-strip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0 0 1rem;
    padding: 0.45rem;
    border: 1px solid rgba(231, 196, 81, 0.20);
    border-radius: 999px;
    background: rgba(2, 34, 25, 0.54);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.admin-command-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.48rem 0.88rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82) !important;
    text-decoration: none !important;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.06);
}

    .admin-command-link:hover,
    .admin-command-link:focus,
    .admin-command-link.active {
        color: #10241e !important;
        background: var(--pp-gold, #e7c451);
        border-color: rgba(255, 255, 255, 0.35);
    }

.admin-summary-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.admin-summary-card,
.admin-detail-card,
.admin-note-card,
.permission-help-card,
.photo-upload-accordion,
.user-edit-card {
    border-color: rgba(231, 196, 81, 0.22) !important;
    background: linear-gradient(135deg, rgba(3, 49, 35, 0.92), rgba(8, 83, 54, 0.68)) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important;
}

    .admin-summary-card strong,
    .totals-card strong {
        color: var(--pp-gold, #e7c451) !important;
    }

.admin-summary-warning {
    border-color: rgba(231, 196, 81, 0.55) !important;
    background: linear-gradient(135deg, rgba(83, 58, 4, 0.80), rgba(112, 75, 8, 0.50)) !important;
}

.inline-search-strip,
.server-search-strip {
    border: 1px solid rgba(231, 196, 81, 0.18) !important;
    border-radius: 22px !important;
    background: rgba(2, 34, 25, 0.54) !important;
    padding: 0.65rem !important;
}

.admin-inline-check {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    color: rgba(255, 255, 255, 0.86) !important;
    background: rgba(255, 255, 255, 0.06);
}

.admin-orders-table-wrap,
.admin-order-table-wrap {
    border-color: rgba(231, 196, 81, 0.20) !important;
    border-radius: 22px !important;
    background: rgba(2, 30, 22, 0.84) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.20) !important;
}

.admin-orders-table th,
.admin-order-table th {
    background: rgba(4, 48, 35, 0.98) !important;
    color: var(--pp-gold, #e7c451) !important;
}

.admin-orders-table td,
.admin-order-table td {
    color: #fff !important;
}

    .admin-orders-table td span,
    .admin-order-table td small,
    .permission-table-clean td:first-child small {
        color: rgba(255, 255, 255, 0.70) !important;
    }

.copy-value-btn,
.muted-copy {
    color: inherit !important;
    border-bottom-color: rgba(231, 196, 81, 0.48) !important;
}

    .copy-value-btn:hover,
    .copy-value-btn.copied {
        color: var(--pp-gold, #e7c451) !important;
        border-bottom-color: var(--pp-gold, #e7c451) !important;
    }

.admin-payment-badge.ok,
.status-pill.paid,
.status-pill.ok {
    background: rgba(120, 185, 181, 0.20) !important;
    color: #dffdf9 !important;
    border: 1px solid rgba(120, 185, 181, 0.34) !important;
}

.admin-payment-badge.warn,
.status-pill.failed,
.status-pill.cancelled {
    background: rgba(231, 196, 81, 0.18) !important;
    color: #fff0aa !important;
    border: 1px solid rgba(231, 196, 81, 0.36) !important;
}

.status-pill.pending {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.84) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.photo-upload-toolbar {
    margin-bottom: 1rem !important;
}

.photo-upload-accordion summary {
    color: #fff !important;
}

    .photo-upload-accordion summary small,
    .photo-upload-field label {
        color: rgba(255, 255, 255, 0.72) !important;
    }

.photo-admin-thumb {
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.22) !important;
}

.permission-toggle {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(231, 196, 81, 0.20) !important;
    color: #fff !important;
}

    .permission-toggle:hover {
        background: rgba(231, 196, 81, 0.14) !important;
    }

.permission-na {
    color: rgba(255, 255, 255, 0.44) !important;
}

.sticky-admin-actions {
    background: rgba(3, 49, 35, 0.94) !important;
    border-color: rgba(231, 196, 81, 0.24) !important;
}

.user-edit-card label,
.user-edit-card .shop-muted,
.user-edit-card .payment-safe-note.large strong,
.user-edit-card .payment-safe-note.large span {
    color: #fff !important;
}

.user-edit-card .available-filter-check {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(231, 196, 81, 0.20) !important;
}

.admin-filter-empty,
.admin-empty-card {
    border-color: rgba(231, 196, 81, 0.22) !important;
    background: rgba(2, 34, 25, 0.72) !important;
    color: #fff !important;
}

@media (max-width: 1180px) {
    .admin-summary-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 760px) {
    .admin-command-strip {
        border-radius: 22px;
        align-items: stretch;
    }

    .admin-command-link {
        flex: 1 1 calc(50% - 0.55rem);
        padding-inline: 0.55rem;
    }

    .admin-summary-grid-5,
    .admin-order-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .inline-search-strip,
    .server-search-strip {
        align-items: stretch !important;
        flex-direction: column !important;
    }
}

/* ==========================================================
   ROUND 4 - Modals, detail leftovers, warnings, and scrolling
   Goal: remove old-system leftovers from popups/detail screens and
   make long admin/customer detail areas scroll predictably.
   ========================================================== */
body.online-picker-open,
body.image-modal-open,
body.shop-is-loading {
    overflow: hidden !important;
}

.alert {
    border-radius: 18px !important;
    padding: 0.85rem 1rem !important;
    margin: 0 0 1rem !important;
    font-weight: 750 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.14) !important;
}

.alert-warning {
    border: 1px solid rgba(231, 196, 81, 0.42) !important;
    background: rgba(97, 70, 10, 0.52) !important;
    color: #fff1b8 !important;
}

.alert-danger {
    border: 1px solid rgba(255, 155, 155, 0.42) !important;
    background: rgba(94, 28, 28, 0.52) !important;
    color: #ffe1e1 !important;
}

.alert-success {
    border: 1px solid rgba(120, 185, 181, 0.38) !important;
    background: rgba(13, 88, 68, 0.52) !important;
    color: #ddfff8 !important;
}

.admin-detail-warning {
    display: flex !important;
    gap: 0.55rem !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
}

#order-details.admin-orders-shell {
    height: calc(100vh - 18px) !important;
    max-height: calc(100vh - 18px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#order-details .shop-section-heading,
#order-details .admin-command-strip,
#order-details .admin-detail-warning {
    flex: 0 0 auto !important;
}

.admin-order-detail-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    padding-right: 0.35rem !important;
    padding-bottom: 1.1rem !important;
    scrollbar-width: thin !important;
}

.admin-order-detail-grid {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
    align-items: stretch !important;
}

.admin-detail-card {
    min-width: 0 !important;
}

    .admin-detail-card div {
        align-items: flex-start !important;
    }

    .admin-detail-card strong {
        max-width: 60% !important;
        overflow-wrap: anywhere !important;
    }

.admin-detail-section-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    margin: 1rem 0 0.55rem !important;
}

    .admin-detail-section-head h3 {
        margin: 0 !important;
        color: #fff !important;
        font-size: 1.05rem !important;
    }

.admin-detail-lines-wrap {
    max-height: none !important;
    overflow: auto !important;
}

.admin-trn-detail-table {
    min-width: 920px !important;
}

    .admin-trn-detail-table thead th {
        top: 0 !important;
    }

.payment-warning-row {
    box-shadow: inset 4px 0 0 rgba(231, 196, 81, 0.72) !important;
}

    .payment-warning-row.filter-visible-row {
        background: rgba(231, 196, 81, 0.055) !important;
    }

.payment-warning-reason {
    display: block !important;
    margin-top: 0.35rem !important;
    color: #fff0aa !important;
    font-size: 0.74rem !important;
    font-weight: 800 !important;
}

.payment-warning-filter input {
    accent-color: var(--pp-gold, #e7c451) !important;
}

.admin-filter-empty {
    margin-bottom: 0.25rem !important;
}

.photo-picker-modal,
.image-preview-modal {
    padding: 1rem !important;
}

.photo-picker-backdrop,
.image-preview-backdrop {
    background: rgba(2, 14, 10, 0.78) !important;
    backdrop-filter: blur(7px) !important;
}

.photo-picker-card,
.image-preview-card {
    border-color: rgba(231, 196, 81, 0.36) !important;
    border-radius: 24px !important;
    box-shadow: 0 24px 90px rgba(0, 0, 0, 0.55) !important;
}

.photo-picker-card {
    width: min(1040px, calc(100vw - 1.4rem)) !important;
    max-height: calc(100vh - 1.4rem) !important;
    margin: auto !important;
    background: #f7f3e8 !important;
}

.photo-picker-head,
.photo-picker-tools,
.photo-picker-foot {
    background: linear-gradient(135deg, rgba(3, 49, 35, 0.98), rgba(8, 83, 54, 0.94)) !important;
}

.photo-picker-table-wrap {
    max-height: min(58vh, 540px) !important;
}

.photo-picker-table tr.is-selected td {
    background: rgba(231, 196, 81, 0.18) !important;
}

.photo-picker-table tbody tr {
    cursor: pointer !important;
}

.photo-picker-close,
.image-preview-close {
    cursor: pointer !important;
}

.image-preview-card {
    width: min(940px, calc(100vw - 1.4rem)) !important;
    max-height: calc(100vh - 1.4rem) !important;
    overflow: hidden !important;
}

.image-preview-frame {
    max-height: calc(100vh - 185px) !important;
}

.image-preview-gallery-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    margin-top: 0.75rem !important;
}

.needs-attention {
    animation: ppAttentionPulse 0.7s ease-in-out 2 !important;
    box-shadow: 0 0 0 3px rgba(231, 196, 81, 0.30) !important;
}

@keyframes ppAttentionPulse {
    0%, 100% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-2px);
    }

    70% {
        transform: translateY(1px);
    }
}

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

@media (max-width: 760px) {
    #order-details.admin-orders-shell {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .admin-order-detail-scroll {
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .admin-order-detail-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-detail-card strong {
        max-width: 100% !important;
        text-align: left !important;
    }

    .admin-detail-card div {
        display: grid !important;
        gap: 0.22rem !important;
    }

    .photo-picker-modal,
    .image-preview-modal {
        padding: 0.45rem !important;
    }

    .photo-picker-card,
    .image-preview-card {
        width: calc(100vw - 0.9rem) !important;
        max-height: calc(100vh - 0.9rem) !important;
        border-radius: 18px !important;
    }

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

        .photo-picker-tools .btn {
            flex: 1 1 auto !important;
        }

    .photo-picker-table {
        min-width: 720px !important;
    }

    .image-preview-frame {
        min-height: 240px !important;
        max-height: calc(100vh - 170px) !important;
    }
}

@media print {
    .plant-navbar,
    .shop-heading-actions,
    .admin-command-strip,
    .inline-search-strip,
    .server-search-strip,
    .photo-picker-modal,
    .image-preview-modal,
    .shop-loading-overlay {
        display: none !important;
    }
}

/* ==========================================================
   ROUND 5 - Mobile, zoom, and density pass
   Goal: keep the shop, cart, checkout, payment, admin, and detail
   pages usable at phone/tablet widths and at 100%-125% browser zoom.
   ========================================================== */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

*,
*::before,
*::after {
    min-width: 0;
}

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

.plant-main,
.shop-section,
.admin-orders-shell,
.photo-admin-shell,
.user-admin-shell,
.permission-admin-shell {
    width: min(100%, 1480px) !important;
    max-width: calc(100vw - 1.25rem) !important;
    margin-inline: auto !important;
}

.shop-section {
    padding-inline: clamp(0.65rem, 1.6vw, 1.25rem) !important;
}

.plant-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1040 !important;
}

.plant-nav-inner {
    width: min(100%, 1480px) !important;
    max-width: calc(100vw - 1rem) !important;
    gap: clamp(0.45rem, 1vw, 1rem) !important;
}

.plant-logo-img,
.shop-page-logo {
    max-height: clamp(42px, 7vw, 76px) !important;
    object-fit: contain !important;
}

.plant-menu,
.plant-account-nav,
.shop-heading-actions,
.compact-actions,
.shop-result-actions,
.admin-online-list-head,
.admin-online-list-foot,
.photo-upload-toolbar,
.inline-search-strip,
.server-search-strip {
    min-width: 0 !important;
}

    .btn,
    .form-control,
    .form-select,
    .plant-menu a,
    .plant-admin-menu-toggle,
    .admin-command-link,
    .category-item {
        min-height: 42px !important;
    }

.form-control,
.form-select,
textarea.form-control {
    font-size: max(16px, 0.95rem) !important;
}

.shop-section-heading,
.compact-heading,
.checkout-heading-row,
.stock-heading-row {
    gap: clamp(0.65rem, 1.4vw, 1.15rem) !important;
}

    .shop-section-heading h1,
    .shop-section-heading h2 {
        font-size: clamp(1.65rem, 3.6vw, 3rem) !important;
        line-height: 1.04 !important;
    }

.shop-muted,
.small-muted,
.product-meta,
.payment-safe-note,
.category-panel small {
    overflow-wrap: anywhere !important;
}

.product-grid,
.takealot-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)) !important;
    gap: clamp(0.75rem, 1.4vw, 1.25rem) !important;
}

.product-card {
    min-height: 0 !important;
}

.product-image-wrap {
    aspect-ratio: 4 / 3 !important;
    min-height: 150px !important;
    max-height: 245px !important;
}

.product-content {
    padding: clamp(0.72rem, 1.4vw, 1rem) !important;
    gap: 0.55rem !important;
}

.product-title,
.cart-row-title,
.checkout-mini-name {
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
}

.add-cart-form {
    display: grid !important;
    grid-template-columns: auto minmax(64px, 82px) minmax(118px, 1fr) !important;
    gap: 0.5rem !important;
    align-items: center !important;
}

.qty-input,
.qty-spinner-only {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
}

.btn-cart,
.btn-cart-icon {
    justify-content: center !important;
    white-space: nowrap !important;
}

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

.cart-list,
.checkout-card,
.cart-summary,
.checkout-summary,
.payment-card,
.admin-card,
.admin-detail-card,
.photo-admin-card,
.user-edit-card,
.permission-card {
    min-width: 0 !important;
}

.cart-row {
    grid-template-columns: 88px minmax(0, 1fr) minmax(156px, auto) minmax(90px, auto) auto !important;
    gap: 0.75rem !important;
}

.cart-row-image {
    width: 88px !important;
    height: 88px !important;
}

.checkout-grid,
.payment-grid,
.admin-order-detail-grid,
.user-edit-grid,
.permission-grid,
.photo-admin-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)) !important;
}

.admin-command-strip {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    flex-wrap: nowrap !important;
}

.admin-command-link {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.admin-online-row {
    grid-template-columns: 84px minmax(0, 1fr) minmax(72px, auto) minmax(92px, auto) minmax(150px, 220px) !important;
    gap: 0.75rem !important;
}

.admin-photo-cell,
.admin-list-main,
.admin-list-stock,
.admin-list-price,
.admin-list-group {
    min-width: 0 !important;
}

.admin-list-image,
.photo-admin-thumb {
    width: 76px !important;
    height: 76px !important;
}

.table-responsive,
.admin-orders-table-wrap,
.admin-detail-lines-wrap,
.photo-picker-table-wrap,
.permission-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
}

.admin-orders-table,
.admin-order-table,
.admin-trn-detail-table,
.permission-table-clean,
.photo-picker-table {
    width: max-content !important;
    min-width: min(100%, 760px) !important;
}

@media (max-width: 1280px) {
    .plant-nav-inner {
        flex-wrap: wrap !important;
        justify-content: center !important;
        padding-block: 0.55rem !important;
    }

    .plant-logo {
        flex: 0 1 auto !important;
    }

    .plant-menu {
        order: 3 !important;
        width: 100% !important;
        justify-content: center !important;
        overflow-x: auto !important;
        padding-bottom: 0.1rem !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .plant-account-nav {
        flex: 0 1 auto !important;
    }

    .right-category-layout {
        grid-template-columns: minmax(0, 1fr) minmax(210px, 260px) !important;
        gap: 0.85rem !important;
    }

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

    .admin-online-row {
        grid-template-columns: 78px minmax(0, 1fr) minmax(72px, auto) minmax(90px, auto) !important;
    }

    .admin-list-group {
        grid-column: 2 / -1 !important;
    }
}

@media (max-width: 980px) {
    .shop-section,
    .admin-orders-shell,
    .photo-admin-shell,
    .user-admin-shell,
    .permission-admin-shell {
        max-width: calc(100vw - 0.75rem) !important;
        padding-inline: 0.55rem !important;
    }

    .shop-section-heading,
    .compact-heading,
    .checkout-heading-row,
    .stock-heading-row,
    .admin-online-list-head,
    .admin-online-list-foot,
    .photo-upload-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .shop-heading-actions,
    .compact-actions,
    .shop-result-actions {
        width: 100% !important;
        justify-content: stretch !important;
    }

        .shop-heading-actions .btn,
        .compact-actions .btn,
        .shop-result-actions .btn {
            flex: 1 1 auto !important;
        }

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

    .right-category-panel {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        order: -1 !important;
    }

    .right-category-layout.categories-hidden .right-category-panel {
        display: none !important;
    }

    .category-list,
    .category-panel-list {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)) !important;
        gap: 0.45rem !important;
    }

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

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

    .cart-summary,
    .checkout-summary {
        position: static !important;
        top: auto !important;
        order: -1 !important;
    }

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

    .cart-row-image {
        width: 76px !important;
        height: 76px !important;
        grid-row: span 3 !important;
    }

    .cart-qty-form,
    .cart-row-total,
    .cart-row .btn[data-remove-local-cart] {
        grid-column: 2 / -1 !important;
        justify-self: stretch !important;
    }

    .cart-qty-form {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
    }

    .admin-online-row {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .admin-photo-cell {
        grid-row: span 4 !important;
    }

    .admin-list-stock,
    .admin-list-price,
    .admin-list-group,
    .admin-display-check {
        grid-column: 2 / -1 !important;
    }

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

@media (max-width: 680px) {
    body {
        font-size: 0.95rem !important;
    }

    .plant-nav-inner {
        max-width: calc(100vw - 0.5rem) !important;
        gap: 0.4rem !important;
    }

    .plant-logo {
        width: 100% !important;
        justify-content: center !important;
    }

    .plant-logo-img {
        max-height: 54px !important;
    }

    .plant-account-nav {
        width: 100% !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        flex-wrap: wrap !important;
    }

    .plant-account-label {
        max-width: 100% !important;
        text-align: center !important;
        overflow-wrap: anywhere !important;
    }

    .plant-menu {
        justify-content: flex-start !important;
        gap: 0.35rem !important;
    }

        .plant-menu a,
        .plant-admin-menu-toggle,
        .btn-nav-account {
            padding: 0.52rem 0.7rem !important;
            font-size: 0.86rem !important;
            white-space: nowrap !important;
        }

    .shop-section {
        border-radius: 20px !important;
    }

    .shop-section-heading h1,
    .shop-section-heading h2 {
        font-size: clamp(1.45rem, 9vw, 2.1rem) !important;
    }

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

    .shop-result-strip {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    .shop-result-title-wrap,
    .shop-result-actions,
    .shop-pager,
    .shop-pager-bottom {
        width: 100% !important;
    }

    .shop-pager,
    .shop-pager-bottom {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 0.4rem !important;
    }

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

    .product-card {
        display: grid !important;
        grid-template-columns: 112px minmax(0, 1fr) !important;
        min-height: 0 !important;
    }

    .product-image-wrap {
        height: 100% !important;
        min-height: 150px !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        border-radius: 18px 0 0 18px !important;
    }

    .stock-pill {
        top: 0.45rem !important;
        left: 0.45rem !important;
        right: auto !important;
        font-size: 0.68rem !important;
        padding: 0.24rem 0.42rem !important;
    }

    .product-content {
        padding: 0.72rem !important;
    }

    .product-title {
        font-size: 0.98rem !important;
        line-height: 1.18 !important;
    }

    .product-price {
        font-size: 1.08rem !important;
    }

    .add-cart-form {
        grid-template-columns: 1fr 72px !important;
    }

        .add-cart-form .qty-label {
            grid-column: 1 / 2 !important;
            align-self: center !important;
        }

        .add-cart-form .qty-input {
            grid-column: 2 / 3 !important;
        }

        .add-cart-form .btn-cart {
            grid-column: 1 / -1 !important;
            width: 100% !important;
        }

    .cart-button-text {
        display: inline !important;
    }

    .cart-row {
        grid-template-columns: 68px minmax(0, 1fr) !important;
        padding: 0.7rem !important;
    }

    .cart-row-image {
        width: 68px !important;
        height: 68px !important;
    }

    .checkout-card,
    .cart-summary,
    .checkout-summary,
    .payment-card,
    .admin-card,
    .photo-admin-card,
    .user-edit-card,
    .permission-card,
    .admin-detail-card {
        border-radius: 18px !important;
        padding: 0.85rem !important;
    }

    .checkout-form-section,
    .payment-safe-note.large,
    .signed-in-checkout-card {
        padding: 0.75rem !important;
        border-radius: 16px !important;
    }

    .admin-command-strip {
        padding: 0.45rem !important;
        gap: 0.4rem !important;
    }

    .admin-command-link {
        padding: 0.55rem 0.7rem !important;
        font-size: 0.82rem !important;
    }

    .admin-online-row {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        padding: 0.7rem !important;
    }

    .admin-list-image,
    .photo-admin-thumb {
        width: 60px !important;
        height: 60px !important;
    }

    .photo-picker-card,
    .image-preview-card {
        width: calc(100vw - 0.55rem) !important;
        max-height: calc(100dvh - 0.55rem) !important;
    }

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

@media (max-width: 420px) {
    .shop-section,
    .admin-orders-shell,
    .photo-admin-shell,
    .user-admin-shell,
    .permission-admin-shell {
        max-width: calc(100vw - 0.35rem) !important;
        padding-inline: 0.35rem !important;
    }

    .product-card {
        grid-template-columns: 96px minmax(0, 1fr) !important;
    }

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

    .product-content {
        padding: 0.62rem !important;
        gap: 0.45rem !important;
    }

    .product-meta.available,
    .product-meta {
        font-size: 0.76rem !important;
    }

    .btn,
    .form-control,
    .form-select {
        min-height: 40px !important;
    }

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

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

    .cart-qty-form,
    .cart-row-total,
    .cart-row .btn[data-remove-local-cart] {
        grid-column: 1 / -1 !important;
    }

    .shop-pager,
    .shop-pager-bottom {
        grid-template-columns: 1fr !important;
    }

    .pager-status,
    .pager-status-bottom {
        text-align: center !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .plant-menu a:hover,
    .category-item:hover,
    .admin-command-link:hover,
    .product-card:hover {
        transform: none !important;
    }
}

/* Round 6 final polish: spacing, visual balance, and remaining storefront/admin consistency */
:root {
    --pp-polish-cream: #fbf7ea;
    --pp-polish-cream-2: #f4ead3;
    --pp-polish-ink: #123326;
    --pp-polish-soft-line: rgba(18, 51, 38, 0.12);
}

.shop-section,
.admin-orders-shell,
.photo-admin-shell,
.user-admin-shell,
.permission-admin-shell {
    isolation: isolate;
}

.shop-section-heading,
.auth-heading-row,
.stock-heading-row,
.admin-page-heading,
.photo-admin-heading,
.user-admin-heading,
.permission-heading-row {
    gap: clamp(0.85rem, 2vw, 1.5rem) !important;
    align-items: center !important;
}

    .shop-section-heading h1,
    .shop-section-heading h2,
    .admin-page-heading h1,
    .admin-page-heading h2,
    .photo-admin-heading h1,
    .user-admin-heading h1,
    .permission-heading-row h1,
    .auth-heading-row h2 {
        letter-spacing: 0.01em !important;
        line-height: 1.04 !important;
        margin-bottom: 0.15rem !important;
    }

    .shop-muted,
    .shop-page-subtitle,
    .admin-page-heading .shop-muted,
    .photo-admin-heading .shop-muted,
    .user-admin-heading .shop-muted,
    .permission-heading-row .shop-muted {
        line-height: 1.45 !important;
    }

.shop-heading-actions,
.compact-actions,
.local-shop-nav {
    gap: 0.55rem !important;
}

.btn,
.mode-switch-btn,
.admin-command-link,
.category-item,
.admin-tool-link,
.auth-link-button {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.btn-gold,
.btn-outline-gold,
.btn-ghost-dark,
.mode-switch-btn,
.admin-command-link {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-gold {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

    .btn-gold:hover,
    .btn-outline-gold:hover,
    .admin-command-link:hover,
    .mode-switch-btn:hover,
    .category-item:hover {
        filter: brightness(1.02) !important;
    }

.form-control,
.form-select,
textarea.form-control {
    border-radius: 16px !important;
    box-shadow: none !important;
}

    .form-control:focus,
    .form-select:focus,
    textarea.form-control:focus,
    .btn:focus-visible,
    .mode-switch-btn:focus-visible,
    .category-item:focus-visible,
    .admin-command-link:focus-visible,
    .admin-tool-link:focus-visible,
    .auth-link-button:focus-visible {
        outline: 3px solid rgba(245, 207, 92, 0.42) !important;
        outline-offset: 2px !important;
        box-shadow: 0 0 0 4px rgba(0, 40, 28, 0.35) !important;
    }

.product-grid,
.takealot-grid {
    align-items: stretch !important;
}

.product-card {
    height: 100% !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

    .product-card:hover {
        border-color: rgba(245, 207, 92, 0.38) !important;
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22) !important;
    }

.product-image-wrap img,
.cart-row-image img,
.admin-list-image img,
.photo-admin-thumb img {
    transition: transform .22s ease !important;
}

.product-card:hover .product-image-wrap img {
    transform: scale(1.035) !important;
}

.product-content {
    display: flex !important;
    flex-direction: column !important;
}

.product-title {
    min-height: 2.35em !important;
    overflow-wrap: anywhere !important;
}

.product-description,
.product-meta,
.product-meta.available,
.cart-row-meta,
.order-note-text {
    line-height: 1.42 !important;
}

.product-price-row,
.product-footer,
.add-cart-form {
    margin-top: auto !important;
}

.stock-pill,
.payment-status-badge,
.order-status-badge,
.admin-badge,
.user-badge,
.photo-badge {
    border-radius: 999px !important;
    font-weight: 800 !important;
    letter-spacing: 0.025em !important;
}

.shop-result-strip,
.shop-toolbar,
.category-strip,
.admin-command-strip,
.admin-filter-strip,
.inline-search-strip,
.photo-filter-strip {
    backdrop-filter: blur(10px) !important;
}

.category-item.active,
.mode-switch-btn.active,
.admin-command-link.active {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

.cart-row,
.checkout-card,
.cart-summary,
.checkout-summary,
.payment-card,
.auth-card,
.admin-card,
.photo-admin-card,
.user-edit-card,
.permission-card,
.admin-detail-card {
    border-color: rgba(245, 207, 92, 0.18) !important;
}

    .cart-row:hover,
    .admin-card:hover,
    .photo-admin-card:hover,
    .user-edit-card:hover,
    .permission-card:hover {
        border-color: rgba(245, 207, 92, 0.32) !important;
    }

.auth-panel-wrap {
    align-items: start !important;
}

.auth-card h3,
.checkout-card h3,
.payment-card h3,
.cart-summary h3,
.checkout-summary h3,
.admin-card h3,
.photo-admin-card h3,
.user-edit-card h3,
.permission-card h3,
.admin-detail-card h3 {
    margin-top: 0 !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.15 !important;
}

.checkout-gate-note,
.payment-safe-note,
.signed-in-checkout-card,
.alert {
    border-radius: 18px !important;
}

.alert {
    border-width: 1px !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16) !important;
}

.admin-orders-table,
.admin-order-table,
.admin-trn-detail-table,
.permission-table-clean,
.photo-picker-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

    .admin-orders-table th:first-child,
    .admin-order-table th:first-child,
    .admin-trn-detail-table th:first-child,
    .permission-table-clean th:first-child,
    .photo-picker-table th:first-child {
        border-top-left-radius: 14px !important;
    }

    .admin-orders-table th:last-child,
    .admin-order-table th:last-child,
    .admin-trn-detail-table th:last-child,
    .permission-table-clean th:last-child,
    .photo-picker-table th:last-child {
        border-top-right-radius: 14px !important;
    }

    .admin-orders-table td,
    .admin-order-table td,
    .admin-trn-detail-table td,
    .permission-table-clean td,
    .photo-picker-table td {
        line-height: 1.35 !important;
    }

.admin-online-row,
.photo-admin-row,
.user-admin-row {
    transition: background-color .16s ease, border-color .16s ease !important;
}

    .admin-online-row:hover,
    .photo-admin-row:hover,
    .user-admin-row:hover {
        background: rgba(245, 207, 92, 0.06) !important;
        border-color: rgba(245, 207, 92, 0.28) !important;
    }

.empty-state,
.no-results-card,
.shop-empty-state,
.admin-empty-state {
    border-radius: 22px !important;
    border: 1px dashed rgba(245, 207, 92, 0.34) !important;
    background: rgba(0, 34, 24, 0.58) !important;
    color: rgba(255, 255, 255, 0.86) !important;
}

.admin-tools-menu-panel {
    border-radius: 18px !important;
    padding: 0.45rem !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.34) !important;
}

.admin-tool-link,
.admin-tool-button {
    min-height: 38px !important;
}

.photo-picker-card,
.image-preview-card,
.pp-modal-card,
.custom-modal-card {
    border-radius: 24px !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.48) !important;
}

    .photo-picker-card .admin-order-table,
    .image-preview-card img {
        border-radius: 16px !important;
    }

@media (min-width: 980px) {
    .shop-section,
    .admin-orders-shell,
    .photo-admin-shell,
    .user-admin-shell,
    .permission-admin-shell {
        padding-top: clamp(1.25rem, 2vw, 2rem) !important;
        padding-bottom: clamp(1.5rem, 2vw, 2.25rem) !important;
    }

    .product-grid,
    .takealot-grid {
        gap: clamp(1rem, 1.4vw, 1.35rem) !important;
    }

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

@media (max-width: 900px) {
    .shop-section-heading,
    .auth-heading-row,
    .stock-heading-row,
    .admin-page-heading,
    .photo-admin-heading,
    .user-admin-heading,
    .permission-heading-row {
        align-items: stretch !important;
    }

    .shop-heading-actions,
    .compact-actions,
    .local-shop-nav {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        padding-bottom: 0.2rem !important;
        scrollbar-width: thin !important;
    }

        .shop-heading-actions > *,
        .compact-actions > *,
        .local-shop-nav > * {
            flex: 0 0 auto !important;
        }
}

@media (max-width: 560px) {
    .shop-section-heading h1,
    .shop-section-heading h2,
    .admin-page-heading h1,
    .admin-page-heading h2,
    .photo-admin-heading h1,
    .user-admin-heading h1,
    .permission-heading-row h1,
    .auth-heading-row h2 {
        font-size: clamp(1.35rem, 8vw, 1.85rem) !important;
    }

    .shop-page-subtitle,
    .shop-muted {
        font-size: 0.86rem !important;
    }

    .product-title {
        min-height: 0 !important;
    }

    .product-card:hover .product-image-wrap img {
        transform: none !important;
    }

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

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


/* Dirk requested shop/admin polish - targeted overrides */
.product-image-wrap,
.admin-list-image,
.photo-thumb-link,
.photo-admin-thumb {
    overflow: hidden !important;
}

.product-image-wrap {
    position: relative !important;
    align-self: stretch !important;
}

    .product-image-wrap img.product-image,
    .product-image-wrap > img,
    .admin-list-image img,
    .photo-admin-thumb {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
    }

.product-image-placeholder {
    width: 100% !important;
    height: 100% !important;
}

#order-details .admin-order-detail-scroll {
    max-height: calc(100dvh - 210px) !important;
    overflow: auto !important;
}

#order-details .admin-detail-lines-wrap {
    max-height: clamp(340px, 52dvh, 720px) !important;
    overflow: auto !important;
}

#order-details .admin-trn-detail-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
}

.photo-inline-edit-row > td {
    padding: 0 !important;
    background: rgba(0, 22, 16, 0.56) !important;
}

.inline-photo-edit-panel {
    margin: 0.55rem !important;
    border-radius: 14px !important;
}

.inline-photo-loading {
    padding: 1rem;
    color: #fff;
    font-weight: 800;
}

.user-admin-shell .admin-order-table-wrap,
.permission-editor-shell .admin-order-table-wrap {
    border-radius: 8px !important;
}

.user-admin-shell .admin-order-table th:first-child,
.permission-editor-shell .admin-order-table th:first-child,
.user-admin-shell .admin-order-table th:last-child,
.permission-editor-shell .admin-order-table th:last-child,
.user-admin-shell .permission-table-clean th:first-child,
.permission-editor-shell .permission-table-clean th:first-child,
.user-admin-shell .permission-table-clean th:last-child,
.permission-editor-shell .permission-table-clean th:last-child {
    border-radius: 6px 6px 0 0 !important;
}

.user-admin-shell .status-pill,
.user-admin-shell .user-badge {
    border-radius: 999px !important;
}

.permission-editor-shell .permission-table-clean td:first-child small {
    display: none !important;
}

.permission-editor-shell .permission-toggle input[type=checkbox],
.permission-editor-shell .permission-table input[type=checkbox] {
    accent-color: var(--pp-gold, #e7c451) !important;
}

.permission-editor-shell .permission-toggle {
    border-radius: 10px !important;
}

@media (max-width: 900px) {
    #order-details .admin-order-detail-scroll {
        max-height: none !important;
    }

    #order-details .admin-detail-lines-wrap {
        max-height: 62dvh !important;
    }
}

/*checkout defaults */
.checkout-address-confirm {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(176, 137, 59, 0.45);
    border-radius: 12px;
    background: rgba(255, 250, 238, 0.94);
    box-shadow: 0 10px 26px rgba(18, 50, 38, 0.09);
}

    .checkout-address-confirm strong,
    .checkout-address-confirm span {
        display: block;
    }

    .checkout-address-confirm span {
        color: #345348;
        margin-top: 0.25rem;
    }

.checkout-address-confirm-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.checkout-wide-field {
    grid-column: 1 / -1;
}

.checkout-note-counter {
    margin-top: 0.35rem;
    text-align: right;
    font-size: 0.82rem;
    color: #5f6f68;
}

@media (max-width: 720px) {
    .checkout-address-confirm {
        align-items: stretch;
        flex-direction: column;
    }

    .checkout-address-confirm-actions {
        justify-content: stretch;
    }

        .checkout-address-confirm-actions .btn {
            flex: 1 1 100%;
        }
}

/*customer order tracking */
.customer-order-list {
    display: grid;
    gap: 1rem;
}

.customer-order-card,
.customer-tracking-card,
.customer-order-panel {
    border: 1px solid rgba(15, 130, 140, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 34px rgba(12, 50, 42, 0.10);
}

.customer-order-card {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

.customer-order-main h3 {
    margin: 0.35rem 0 0.15rem;
    color: #123226;
}

.customer-order-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

    .customer-order-meta div,
    .customer-order-detail-grid .compact-summary div {
        padding: 0.65rem;
        border-radius: 10px;
        background: rgba(120, 185, 181, 0.12);
    }

    .customer-order-meta span,
    .customer-order-detail-grid .compact-summary span {
        display: block;
        font-size: 0.78rem;
        color: #5b716a;
    }

    .customer-order-meta strong,
    .customer-order-detail-grid .compact-summary strong {
        display: block;
        color: #123226;
    }

.customer-order-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.customer-status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #123226;
    background: rgba(231, 196, 81, 0.32);
    border: 1px solid rgba(176, 137, 59, 0.3);
}

    .customer-status-pill.awaiting-payment,
    .customer-status-pill.payment-failed {
        background: rgba(255, 225, 150, 0.55);
    }

    .customer-status-pill.being-processed,
    .customer-status-pill.out-for-delivery {
        background: rgba(120, 185, 181, 0.28);
    }

    .customer-status-pill.completed,
    .customer-status-pill.ready-for-collection {
        background: rgba(28, 139, 82, 0.16);
    }

    .customer-status-pill.cancelled {
        background: rgba(175, 63, 63, 0.13);
    }

.customer-tracking-card {
    padding: 1rem;
    margin-bottom: 1rem;
}

.customer-tracking-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.tracking-step {
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(230, 235, 231, 0.72);
    border: 1px solid rgba(18, 50, 38, 0.08);
}

    .tracking-step.active {
        background: rgba(120, 185, 181, 0.18);
        border-color: rgba(15, 130, 140, 0.25);
    }

    .tracking-step strong,
    .tracking-step span {
        display: block;
    }

    .tracking-step span {
        margin-top: 0.2rem;
        color: #5b716a;
        font-size: 0.82rem;
    }

.customer-order-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.customer-lines-wrap {
    max-height: 60dvh;
    overflow: auto;
}

.customer-lines-table td,
.customer-lines-table th {
    white-space: nowrap;
}

    .customer-lines-table td:nth-child(2) {
        white-space: normal;
        min-width: 240px;
    }

@media (max-width: 900px) {
    .customer-order-card,
    .customer-order-detail-grid,
    .customer-tracking-steps {
        grid-template-columns: 1fr;
    }

    .customer-order-meta {
        grid-template-columns: 1fr;
    }

    .customer-order-actions {
        justify-content: stretch;
    }

        .customer-order-actions .btn {
            flex: 1 1 100%;
        }
}

/*: order status tracking */
.admin-status-update-card,
.order-status-history-card {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

    .admin-status-update-card h3,
    .order-status-history-card h3 {
        margin: 0 0 0.35rem;
    }

.admin-status-update-form {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    margin-top: 0.85rem;
}

.order-status-history-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.order-status-history-item {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: rgba(15,130,140,0.08);
    border: 1px solid rgba(15,130,140,0.16);
}

    .order-status-history-item span,
    .order-status-history-item small {
        color: rgba(6,32,26,0.68);
        font-size: 0.84rem;
    }

    .order-status-history-item strong {
        color: #06201a;
    }

    .order-status-history-item p {
        margin: 0.15rem 0 0;
        color: rgba(6,32,26,0.82);
    }

.customer-history-card {
    margin-bottom: 1rem;
}

.customer-status-pill.order-received {
    background: rgba(15,130,140,0.12);
    color: #064b50;
}

.customer-status-pill.being-processed {
    background: rgba(120,185,181,0.22);
    color: #064b50;
}

.customer-status-pill.ready-for-collection,
.customer-status-pill.out-for-delivery {
    background: rgba(255,196,64,0.24);
    color: #5e4300;
}

.customer-status-pill.completed {
    background: rgba(21,128,61,0.14);
    color: #166534;
}

.customer-status-pill.cancelled,
.customer-status-pill.payment-failed {
    background: rgba(185,28,28,0.12);
    color: #991b1b;
}

@media (max-width: 760px) {
    .admin-status-update-form {
        grid-template-columns: 1fr;
    }
}

/*delivery settings */
.delivery-settings-section {
    max-width: 1100px;
    margin-inline: auto;
}

.delivery-settings-card {
    max-width: 900px;
}

.delivery-enabled-check {
    justify-content: flex-start;
    gap: .65rem;
    margin-bottom: 1rem;
}

.checkout-fee-row {
    border-top: 1px solid rgba(50, 10, 107, .16);
    padding-top: .45rem;
    margin-top: .35rem;
}

/* =========================================================
   Fix28: responsive Bootstrap-safe page flow + contrast pass
   - restore normal page scrolling on pages without inner scroll areas
   - prevent white text on white/light info cards
   - make tables and large detail areas responsive on phone/PC
   ========================================================= */
:root {
    --pp-dark-panel: rgba(3, 38, 28, 0.94);
    --pp-dark-panel-2: rgba(7, 68, 45, 0.90);
    --pp-dark-border: rgba(120, 185, 181, 0.34);
    --pp-readable-text: #ffffff;
    --pp-readable-muted: rgba(255, 255, 255, 0.78);
    --pp-control-bg: #ffffff;
    --pp-control-text: #10241e;
}

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

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

body.image-modal-open {
    overflow: hidden !important;
}

.shop-section {
    width: min(1760px, calc(100vw - 18px)) !important;
    min-height: calc(100dvh - 18px) !important;
    height: auto !important;
    margin: 9px auto !important;
    overflow: visible !important;
}

.shop-stock-shell,
.shop-stock-display,
.shop-layout,
.shop-layout.right-category-layout,
.product-area,
.cart-layout,
.checkout-layout,
.payment-layout,
.admin-orders-shell,
.product-photo-admin-shell,
.auth-shell,
.single-auth-shell,
.delivery-settings-section {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.product-area,
.cart-list,
.checkout-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.cart-scroll-shell .cart-list,
.admin-orders-table-wrap,
.photo-order-form,
.customer-lines-wrap,
.photo-picker-table-wrap,
.product-lines-scroll,
.admin-online-list-scroll,
.table-scroll,
.table-responsive {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.cart-scroll-shell .cart-list {
    max-height: min(66dvh, 680px) !important;
}

.admin-orders-table-wrap,
.photo-order-form,
.customer-lines-wrap {
    max-height: min(70dvh, 760px) !important;
}

/* Any Bootstrap/basic table inside the dark shell must not inherit unreadable colours. */
.plant-body table,
.plant-body .table,
.plant-body .table > :not(caption) > * > *,
.admin-orders-table,
.admin-orders-table th,
.admin-orders-table td,
.admin-trn-orders-table,
.admin-trn-orders-table th,
.admin-trn-orders-table td,
.admin-trn-detail-table,
.admin-trn-detail-table th,
.admin-trn-detail-table td,
.customer-lines-table,
.customer-lines-table th,
.customer-lines-table td,
.permission-table,
.permission-table th,
.permission-table td {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

    .plant-body .table thead th,
    .plant-body table thead th,
    .admin-orders-table th,
    .admin-trn-orders-table th,
    .admin-trn-detail-table th,
    .customer-lines-table th,
    .permission-table th {
        background: rgba(2, 44, 31, 0.98) !important;
        color: #f3cf5f !important;
    }

    .plant-body .table tbody tr,
    .plant-body table tbody tr {
        background: rgba(3, 38, 28, 0.64) !important;
    }

        .plant-body .table tbody tr:hover,
        .plant-body table tbody tr:hover {
            background: rgba(15, 130, 92, 0.26) !important;
        }

/* Darken information cards that were previously white/light with inherited white text. */
.admin-status-update-card,
.order-status-history-card,
.customer-tracking-card,
.customer-history-card,
.customer-order-card,
.customer-order-summary,
.customer-order-detail-card,
.tracking-step,
.admin-note-card,
.permission-help-card,
.user-edit-card,
.auth-card,
.checkout-card,
.checkout-summary,
.cart-summary,
.payment-card,
.delivery-settings-card,
.signed-in-checkout-card,
.payment-safe-note,
.shop-empty-card,
.admin-empty-card {
    background: linear-gradient(135deg, var(--pp-dark-panel), var(--pp-dark-panel-2)) !important;
    border: 1px solid var(--pp-dark-border) !important;
    color: var(--pp-readable-text) !important;
}

    .admin-status-update-card *,
    .order-status-history-card *,
    .customer-tracking-card *,
    .customer-history-card *,
    .customer-order-card *,
    .customer-order-summary *,
    .customer-order-detail-card *,
    .tracking-step *,
    .admin-note-card *,
    .permission-help-card *,
    .user-edit-card *,
    .auth-card *,
    .checkout-summary *,
    .cart-summary *,
    .payment-card *,
    .delivery-settings-card *,
    .signed-in-checkout-card *,
    .payment-safe-note *,
    .shop-empty-card *,
    .admin-empty-card * {
        color: inherit;
    }

    .admin-status-update-card span,
    .admin-status-update-card small,
    .order-status-history-card span,
    .order-status-history-card small,
    .order-status-history-item span,
    .order-status-history-item small,
    .order-status-history-item p,
    .customer-tracking-card span,
    .customer-tracking-card small,
    .tracking-step span,
    .customer-order-meta,
    .customer-order-card small,
    .checkout-summary span,
    .cart-summary span,
    .payment-card small,
    .shop-muted,
    .small-muted {
        color: var(--pp-readable-muted) !important;
    }

    .order-status-history-item,
    .tracking-step.active {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(120, 185, 181, 0.30) !important;
    }

.customer-status-pill,
.admin-payment-badge,
.payment-status-pill,
.status-pill,
.role-pill {
    color: #10241e !important;
    background: rgba(239, 200, 91, 0.92) !important;
    border-color: rgba(239, 200, 91, 0.55) !important;
}

/* Form controls stay light and readable, even inside dark cards. */
.plant-body input.form-control,
.plant-body textarea.form-control,
.plant-body select.form-control,
.plant-body .form-select,
.plant-body .form-control-sm,
.plant-body input[type="text"],
.plant-body input[type="email"],
.plant-body input[type="password"],
.plant-body input[type="number"],
.plant-body textarea,
.plant-body select {
    background-color: var(--pp-control-bg) !important;
    color: var(--pp-control-text) !important;
    border-color: rgba(120, 185, 181, 0.42) !important;
}

    .plant-body input::placeholder,
    .plant-body textarea::placeholder {
        color: rgba(16, 36, 30, 0.58) !important;
    }

.plant-body label,
.plant-body .form-label,
.checkout-card label,
.auth-card label,
.user-edit-card label,
.delivery-settings-card label {
    color: #ffffff !important;
}

/* Product photos must be clipped by the frame, never overlap text. */
.product-image-wrap,
.image-preview-trigger.product-image-wrap,
.cart-row-image,
.admin-list-image,
.photo-admin-thumb,
.photo-thumb-link {
    overflow: hidden !important;
}

    .product-image,
    .product-image-wrap img,
    .cart-row-image img,
    .admin-list-image img,
    .photo-admin-thumb {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

/* Bootstrap-like responsive behaviour for custom grids. */
.auth-shell .auth-grid,
.photo-admin-grid,
.admin-order-summary-grid,
.admin-order-detail-grid,
.customer-order-detail-grid,
.cart-layout,
.checkout-layout,
.admin-status-update-form,
.photo-upload-mini-form,
.bulk-photo-form,
.bulk-online-form {
    max-width: 100% !important;
}

@media (max-width: 992px) {
    .shop-section {
        width: min(100%, calc(100vw - 12px)) !important;
        margin: 6px auto !important;
        padding: 0.6rem !important;
    }

    .shop-layout.right-category-layout,
    .cart-layout,
    .checkout-layout,
    .admin-order-summary-grid,
    .admin-order-detail-grid,
    .customer-order-detail-grid,
    .auth-shell .auth-grid,
    .photo-admin-grid {
        grid-template-columns: 1fr !important;
    }

    .right-category-panel {
        position: static !important;
        width: 100% !important;
        max-height: 45dvh !important;
        overflow-y: auto !important;
    }

    .shop-layout.right-category-layout.categories-hidden .right-category-panel {
        display: none !important;
    }

    .admin-orders-table,
    .admin-trn-orders-table,
    .admin-trn-detail-table,
    .customer-lines-table,
    .photo-order-form .admin-order-table,
    .permission-table {
        min-width: 760px !important;
    }
}

@media (max-width: 768px) {
    html,
    body.plant-body,
    .plant-main {
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important;
    }

    .shop-section {
        width: 100% !important;
        min-height: 100dvh !important;
        height: auto !important;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 0.5rem !important;
    }

    .shop-heading-actions,
    .local-shop-nav,
    .shop-result-actions,
    .admin-status-update-form,
    .photo-upload-mini-form,
    .bulk-photo-form,
    .bulk-online-form,
    .bulk-photo-upload-row,
    .bulk-photo-picker-summary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
        width: 100% !important;
    }

        .shop-heading-actions .btn,
        .local-shop-nav .btn,
        .local-shop-nav a,
        .shop-result-actions .btn,
        .admin-status-update-form .btn,
        .bulk-photo-form .btn,
        .bulk-online-form .btn,
        .bulk-photo-upload-row .btn,
        .bulk-photo-picker-summary .btn {
            width: 100% !important;
            justify-content: center !important;
            text-align: center !important;
        }

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

    .product-card {
        grid-template-columns: 92px minmax(0, 1fr) !important;
        width: 100% !important;
    }

    .product-image-wrap {
        width: 92px !important;
        height: 92px !important;
        min-height: 92px !important;
    }

    .product-image {
        width: 78px !important;
        height: 78px !important;
    }

    .cart-scroll-shell .cart-list,
    .admin-orders-table-wrap,
    .photo-order-form,
    .customer-lines-wrap {
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .admin-tools-menu-panel {
        position: fixed !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
    }
}


.stacked-auth-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}

.auth-inline-link {
    display: inline-flex;
    justify-content: center;
    text-decoration: underline;
}

.admin-payment-badge.danger {
    background: rgba(210, 74, 74, 0.22);
    color: #ffd0d0 !important;
    border: 1px solid rgba(210, 74, 74, 0.42);
}

.admin-payment-badge.muted {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.admin-trn-orders-table td span + span {
    margin-top: 3px;
}

/* drag/drop photo ordering */
.photo-sort-table tbody[data-photo-sort-list] tr[data-photo-sort-row] {
    transition: background-color 0.15s ease, outline-color 0.15s ease, opacity 0.15s ease;
}

    .photo-sort-table tbody[data-photo-sort-list] tr[data-photo-sort-row][draggable="true"] {
        cursor: grab;
    }

    .photo-sort-table tbody[data-photo-sort-list] tr[data-photo-sort-row].is-dragging {
        opacity: 0.58;
        outline: 2px dashed rgba(245, 207, 92, 0.75);
        background: rgba(245, 207, 92, 0.14) !important;
    }

.photo-drag-cell {
    width: 64px;
    text-align: center;
    white-space: nowrap;
}

.photo-drag-handle {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(245, 207, 92, 0.55);
    background: rgba(245, 207, 92, 0.16);
    color: #f5cf5c;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
    cursor: grab;
}

    .photo-drag-handle:active {
        cursor: grabbing;
    }

    .photo-drag-handle:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.photo-order-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.4rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(120, 185, 181, 0.18);
    border: 1px solid rgba(120, 185, 181, 0.35);
    color: #ffffff;
    font-weight: 800;
}

.photo-order-cell {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .photo-drag-cell {
        width: 54px;
    }

    .photo-drag-handle {
        width: 34px;
        height: 34px;
    }
}

/* Product photo upload limit indicators */
.status-pill.warning {
    background: rgba(226, 180, 74, 0.18);
    border-color: rgba(226, 180, 74, 0.55);
    color: #f4d77e;
}

/* Password reset / activation link grouping */
.auth-link-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    align-items: center;
}

.narrow-auth-wrap {
    max-width: 560px;
    margin-inline: auto;
}

@media (max-width: 575.98px) {
    .auth-link-row {
        flex-direction: column;
        gap: .35rem;
    }
}


/* Stabilisation: when Categories is collapsed, release the side-column space
   and allow the product cards/photos to use the full shop width. */
.shop-layout.right-category-layout.categories-hidden {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

    .shop-layout.right-category-layout.categories-hidden .right-category-panel {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
    }

    .shop-layout.right-category-layout.categories-hidden .product-area {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 100% !important;
        padding-right: 0 !important;
    }

    .shop-layout.right-category-layout.categories-hidden .product-grid.takealot-grid {
        width: 100% !important;
        grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)) !important;
    }

    .shop-layout.right-category-layout.categories-hidden .product-image-wrap {
        min-height: 180px !important;
    }

    .shop-layout.right-category-layout.categories-hidden .product-image {
        width: 100% !important;
        max-width: 210px !important;
        height: 160px !important;
        object-fit: contain !important;
    }

@media (max-width: 575.98px) {
    .shop-layout.right-category-layout.categories-hidden .product-grid.takealot-grid {
        grid-template-columns: 1fr !important;
    }

    .shop-layout.right-category-layout.categories-hidden .product-image-wrap {
        min-height: 210px !important;
    }

    .shop-layout.right-category-layout.categories-hidden .product-image {
        max-width: 100% !important;
        height: 190px !important;
    }
}


/* Targeted barcode picker cleanup: responsive modal sizing for both bulk-online and photo-upload pickers */
.photo-picker-modal {
    display: grid !important;
    place-items: center !important;
    padding: clamp(0.45rem, 2vw, 1rem) !important;
}

.photo-picker-card {
    width: min(1080px, calc(100vw - clamp(0.8rem, 3vw, 2rem))) !important;
    max-height: min(820px, calc(100dvh - clamp(0.8rem, 3vw, 2rem))) !important;
    margin: 0 !important;
}

.photo-barcode-picker-modal .photo-picker-card {
    width: min(920px, calc(100vw - clamp(0.8rem, 3vw, 2rem))) !important;
}

.photo-picker-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
}

.photo-barcode-picker-modal .photo-picker-tools {
    grid-template-columns: minmax(0, 1fr) auto !important;
}

.photo-picker-tools .form-control {
    min-width: 0 !important;
    width: 100% !important;
}

.photo-picker-table-wrap {
    width: 100% !important;
    max-height: min(60dvh, 560px) !important;
    overflow: auto !important;
}

.photo-picker-table {
    min-width: 640px !important;
}

.photo-barcode-picker-modal .photo-picker-table {
    min-width: 560px !important;
}

.single-photo-picker-field {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) auto !important;
    align-items: end !important;
    gap: 0.55rem !important;
}

    .single-photo-picker-field label {
        grid-column: 1 / -1 !important;
    }

    .single-photo-picker-field .form-control[readonly] {
        cursor: pointer !important;
        background: rgba(255,255,255,0.92) !important;
    }

@media (max-width: 720px) {
    .photo-picker-tools,
    .photo-barcode-picker-modal .photo-picker-tools {
        grid-template-columns: 1fr !important;
    }

        .photo-picker-tools .btn,
        .photo-picker-foot .btn {
            width: 100% !important;
        }

    .single-photo-picker-field {
        grid-template-columns: 1fr !important;
    }

    .photo-picker-table {
        min-width: 540px !important;
    }
}

/* Product photo viewer: fixed-size frame with side arrows so photos do not resize the modal. */
.image-preview-card {
    width: min(760px, calc(100vw - 1.25rem)) !important;
    max-height: calc(100vh - 1.5rem) !important;
}

.image-preview-frame {
    position: relative !important;
    width: 100% !important;
    height: clamp(340px, 58vh, 560px) !important;
    max-height: calc(100vh - 150px) !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

    .image-preview-frame img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,0.96) !important;
    }

.image-preview-gallery-overlay {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .image-preview-gallery-overlay[hidden] {
        display: none !important;
    }

.image-preview-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 46px !important;
    height: 62px !important;
    border: 1px solid rgba(231, 196, 81, 0.55) !important;
    border-radius: 999px !important;
    background: rgba(2, 29, 22, 0.78) !important;
    color: #fff !important;
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.32) !important;
    z-index: 2 !important;
}

    .image-preview-arrow:hover:not(:disabled) {
        background: rgba(231, 196, 81, 0.92) !important;
        color: #051b12 !important;
    }

    .image-preview-arrow:disabled {
        opacity: 0.28 !important;
        cursor: default !important;
    }

.image-preview-arrow-prev {
    left: 0.75rem !important;
}

.image-preview-arrow-next {
    right: 0.75rem !important;
}

.image-preview-gallery-status {
    position: absolute !important;
    left: 50% !important;
    bottom: 0.75rem !important;
    transform: translateX(-50%) !important;
    min-width: 92px !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 999px !important;
    background: rgba(2, 29, 22, 0.78) !important;
    color: #fff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    text-align: center !important;
    pointer-events: none !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
}

@media (max-width: 640px) {
    .image-preview-card {
        width: calc(100vw - 0.75rem) !important;
        padding: 0.65rem !important;
    }

    .image-preview-frame {
        height: clamp(280px, 58vh, 440px) !important;
        max-height: calc(100vh - 128px) !important;
    }

    .image-preview-arrow {
        width: 38px !important;
        height: 52px !important;
        font-size: 1.8rem !important;
    }

    .image-preview-arrow-prev {
        left: 0.35rem !important;
    }

    .image-preview-arrow-next {
        right: 0.35rem !important;
    }
}


/* Stabilisation: product photo modal should scale every photo to fit the same frame.
   Small photos may upscale to fill available space; large photos shrink without cropping. */
.image-preview-card {
    width: min(880px, calc(100vw - 1rem)) !important;
    max-height: calc(100dvh - 1rem) !important;
    overflow: hidden !important;
}

.image-preview-frame {
    width: 100% !important;
    height: clamp(320px, 68dvh, 640px) !important;
    max-height: calc(100dvh - 130px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

    .image-preview-frame > img[data-image-modal-img],
    .image-preview-frame img[data-image-modal-img] {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        flex: 0 0 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 14px !important;
    }

        .image-preview-frame > img[data-image-modal-img][hidden] {
            display: none !important;
        }

.image-preview-gallery-overlay {
    z-index: 5 !important;
}

.image-preview-arrow,
.image-preview-gallery-status {
    z-index: 6 !important;
}

/* Stabilisation: server paging should stay visible and responsive. */
.shop-pager,
.shop-pager-bottom,
.shop-pager-inline {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

    .shop-pager[hidden],
    .shop-pager-bottom[hidden],
    .shop-pager-inline[hidden] {
        display: none !important;
    }

    .shop-pager .btn.disabled,
    .shop-pager-bottom .btn.disabled,
    .shop-pager-inline .btn.disabled,
    .shop-pager .btn[aria-disabled="True"],
    .shop-pager-bottom .btn[aria-disabled="True"],
    .shop-pager-inline .btn[aria-disabled="True"] {
        pointer-events: none !important;
        opacity: 0.48 !important;
    }

@media (max-width: 640px) {
    .image-preview-card {
        width: calc(100vw - 0.5rem) !important;
        padding: 0.55rem !important;
    }

    .image-preview-frame {
        height: clamp(260px, 62dvh, 480px) !important;
        max-height: calc(100dvh - 116px) !important;
    }

    .shop-pager,
    .shop-pager-bottom,
    .shop-pager-inline {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.45rem !important;
    }

        .shop-pager .btn,
        .shop-pager-bottom .btn,
        .shop-pager-inline .btn {
            width: 100% !important;
        }
}

/* Fine tune: keep gallery arrows visually centred in the photo frame.
   The button is set slightly above mathematical centre because the modal status badge
   and chevron glyph baseline make 50% look visually low. */
.image-preview-frame {
    position: relative !important;
}

    .image-preview-frame .image-preview-gallery-overlay {
        position: absolute !important;
        inset: 0 !important;
    }

    .image-preview-frame .image-preview-arrow {
        top: 46% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding: 0 0 0.18rem 0 !important;
    }

    .image-preview-frame .image-preview-arrow-prev {
        left: 0.85rem !important;
    }

    .image-preview-frame .image-preview-arrow-next {
        right: 0.85rem !important;
    }

@media (max-width: 640px) {
    .image-preview-frame .image-preview-arrow-prev {
        left: 0.45rem !important;
    }

    .image-preview-frame .image-preview-arrow-next {
        right: 0.45rem !important;
    }
}


/* Final tune: smaller round photo viewer arrow buttons. */
.image-preview-frame .image-preview-arrow,
.image-preview-arrow {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    font-size: 1.45rem !important;
    border-width: 1px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.24) !important;
    padding: 0 0 0.08rem 0 !important;
}

.image-preview-frame .image-preview-arrow-prev {
    left: 0.55rem !important;
}

.image-preview-frame .image-preview-arrow-next {
    right: 0.55rem !important;
}

@media (max-width: 640px) {
    .image-preview-frame .image-preview-arrow,
    .image-preview-arrow {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        aspect-ratio: 1 / 1 !important;
        border-radius: 50% !important;
        font-size: 1.18rem !important;
    }

    .image-preview-frame .image-preview-arrow-prev {
        left: 0.3rem !important;
    }

    .image-preview-frame .image-preview-arrow-next {
        right: 0.3rem !important;
    }
}

/* Product Photos round 3: single-button barcode picker, paging, and dirty-save UX */
.product-photo-admin-shell .server-search-strip {
    align-items: center;
}

.page-size-inline-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255,255,255,0.78);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

.page-size-inline-select {
    min-width: 92px;
    min-height: 38px;
    border-radius: 999px;
    border-color: rgba(245,207,92,0.35);
    background-color: rgba(255,255,255,0.94);
    color: #06251a;
    font-weight: 800;
}

.single-photo-picker-field {
    grid-template-columns: minmax(180px, 1fr) !important;
}

.single-photo-picker-button {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.single-photo-picker-label {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.photo-order-actions {
    flex-wrap: wrap;
}

.admin-pager {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    .product-photo-admin-shell .server-search-strip {
        align-items: stretch;
    }

    .page-size-inline-label,
    .page-size-inline-select,
    .single-photo-picker-button {
        width: 100%;
    }

    .admin-pager {
        width: 100%;
        justify-content: center;
    }
}

/*cleanup: online sales calendar, barcode picker readability and photo count colour */
.admin-order-summary-with-filter {
    align-items: stretch;
}

.admin-date-filter-summary-card {
    background: linear-gradient(135deg, rgba(20, 72, 45, 0.96), rgba(8, 40, 28, 0.98));
    border: 1px solid rgba(226, 180, 74, 0.55);
    border-radius: 18px;
    padding: 0.95rem;
    box-shadow: 0 14px 28px rgba(0,0,0,0.2);
    color: #fff;
    display: grid;
    gap: 0.75rem;
    min-width: min(100%, 320px);
}

.admin-date-filter-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255,255,255,0.82);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .admin-date-filter-title strong {
        color: #e2b44a;
        font-size: 0.9rem;
        text-transform: none;
        letter-spacing: 0;
    }

.admin-date-filter-summary-card .admin-date-filter-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.admin-date-filter-summary-card label {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-date-input-group {
    flex-wrap: nowrap;
}

.admin-report-date,
.flatpickr-alt-input.admin-report-date,
.admin-date-filter-summary-card .flatpickr-alt-input {
    background: rgba(255,255,255,0.96) !important;
    border: 1px solid rgba(226, 180, 74, 0.65) !important;
    color: #143f2b !important;
    font-weight: 700;
    min-height: 38px;
}

.admin-date-filter-summary-card .js-clear-order-date {
    border-color: rgba(226, 180, 74, 0.75) !important;
    color: #e2b44a !important;
    background: rgba(255,255,255,0.08) !important;
}

.admin-date-filter-summary-card .admin-date-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.flatpickr-calendar {
    border: 1px solid rgba(226, 180, 74, 0.55) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.24) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover {
    background: #174b33 !important;
    border-color: #174b33 !important;
    color: #fff !important;
}

.flatpickr-day.today {
    border-color: #e2b44a !important;
}

.photo-count-pill,
.photo-picker-table .photo-count-cell,
.photo-picker-table .photo-state.has {
    background: rgba(226, 180, 74, 0.22) !important;
    border: 1px solid rgba(226, 180, 74, 0.68) !important;
    color: #ffd76a !important;
    font-weight: 800;
}

.photo-picker-card {
    color: #f8f3df !important;
    background: linear-gradient(145deg, rgba(18, 62, 42, 0.98), rgba(9, 38, 28, 0.99)) !important;
}

.photo-picker-head span,
.photo-picker-count,
.photo-picker-table td,
.photo-picker-table .muted-cell {
    color: rgba(255,255,255,0.88) !important;
}

.photo-picker-table th {
    background: rgba(226, 180, 74, 0.18) !important;
    color: #ffe6a0 !important;
    border-bottom: 1px solid rgba(226, 180, 74, 0.45) !important;
}

.photo-picker-table tbody tr:hover td,
.photo-picker-table tbody tr.is-selected td {
    background: rgba(226, 180, 74, 0.16) !important;
    color: #fff !important;
}

.photo-picker-table-wrap {
    background: rgba(255,255,255,0.045) !important;
    border: 1px solid rgba(226, 180, 74, 0.22) !important;
    border-radius: 14px;
}

@media (min-width: 1400px) {
    .photo-picker-card {
        width: min(1180px, calc(100vw - 3rem)) !important;
    }
}

@media (max-width: 767.98px) {
    .admin-date-filter-summary-card .admin-date-filter-fields {
        grid-template-columns: 1fr;
    }

    .admin-date-filter-summary-card .admin-date-filter-actions {
        justify-content: stretch;
    }

        .admin-date-filter-summary-card .admin-date-filter-actions .btn {
            flex: 1 1 130px;
        }
}

/*: no-photo admin upload entry point */
.admin-no-photo-upload-link {
    text-decoration: none !important;
    cursor: pointer;
    flex-direction: column;
    gap: 0.15rem;
    background: rgba(255, 248, 226, 0.96) !important;
    border: 1px dashed rgba(198, 169, 79, 0.75) !important;
}

    .admin-no-photo-upload-link:hover,
    .admin-no-photo-upload-link:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
        outline: 2px solid rgba(198, 169, 79, 0.95);
        outline-offset: 2px;
    }

    .admin-no-photo-upload-link small {
        color: #6f5a19;
        font-size: 0.62rem;
        font-weight: 800;
        text-transform: uppercase;
        line-height: 1;
    }


/* Stabilise public-shop cart state:
   - Add button is only visible when the exact product is not in the browser cart.
   - Go to cart is only visible when the exact product is already in the browser cart.
   These rules also protect against Bootstrap/button CSS overriding the hidden attribute. */
.product-card [data-go-cart-link][hidden],
.product-card [data-local-add-cart-button][hidden] {
    display: none !important;
}

.product-card:not(.is-in-cart) [data-go-cart-link] {
    display: none !important;
}

.product-card.is-in-cart [data-local-add-cart-button] {
    display: none !important;
}

.product-card.is-in-cart .cart-card-actions {
    justify-content: flex-start;
}

.product-card.is-in-cart .cart-state-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    color: #061814;
    background: var(--plant-gold);
    border-color: rgba(255,255,255,0.22);
    font-weight: 900;
}

/*Manage Shop header/pager and barcode picker cleanup. */
.shop-result-strip {
    align-items: center !important;
}

.shop-result-actions {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.6rem !important;
}

    .shop-result-actions > strong,
    .shop-result-actions > .admin-view-pill {
        white-space: nowrap !important;
    }

.shop-pager-inline {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    border-radius: 999px !important;
    padding: 0.22rem 0.32rem !important;
}

    .shop-pager-inline .btn {
        border-radius: 999px !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .shop-pager-inline .pager-status {
        min-width: auto !important;
        white-space: nowrap !important;
        padding-inline: 0.45rem !important;
    }

.admin-bulk-online-panel .btn,
.photo-picker-card .btn,
.bulk-online-action-row .btn,
.bulk-photo-picker-summary .btn {
    border-radius: 999px !important;
}

.photo-picker-card {
    width: min(1180px, calc(100vw - 1rem)) !important;
    max-height: min(820px, calc(100vh - 1rem)) !important;
    background: linear-gradient(180deg, rgba(5, 55, 39, 0.98), rgba(4, 38, 29, 0.98)) !important;
    color: #ffffff !important;
}

.photo-picker-head,
.photo-picker-tools,
.photo-picker-foot {
    background: linear-gradient(135deg, rgba(6, 80, 56, 0.98), rgba(15, 130, 92, 0.92)) !important;
    color: #ffffff !important;
}

.photo-picker-table-wrap {
    flex: 1 1 auto !important;
    min-height: 240px !important;
    max-height: none !important;
    overflow: auto !important;
    background: rgba(5, 42, 31, 0.96) !important;
    border-top: 1px solid rgba(239, 200, 91, 0.2) !important;
    border-bottom: 1px solid rgba(239, 200, 91, 0.2) !important;
}

.photo-picker-table {
    width: 100% !important;
    min-width: 680px !important;
    table-layout: auto !important;
}

    .photo-picker-table th {
        background: #062f24 !important;
        color: #f6d36b !important;
        border-bottom: 1px solid rgba(239, 200, 91, 0.35) !important;
    }

    .photo-picker-table td {
        background: rgba(255, 255, 255, 0.08) !important;
        color: #f8fff8 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    }

    .photo-picker-table tbody tr:hover td {
        background: rgba(239, 200, 91, 0.18) !important;
        color: #ffffff !important;
    }

    .photo-picker-table tbody tr.is-selected td {
        background: rgba(239, 200, 91, 0.32) !important;
        color: #ffffff !important;
    }

.photo-picker-foot {
    justify-content: space-between !important;
    border-top: 1px solid rgba(239, 200, 91, 0.24) !important;
}

.photo-picker-count strong {
    color: #f6d36b !important;
}

.online-state.no,
.online-state.yes {
    border: 1px solid rgba(239, 200, 91, 0.22) !important;
}

@media (max-width: 980px) {
    .shop-result-strip {
        flex-wrap: wrap !important;
    }

    .shop-result-actions {
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .shop-pager-inline {
        order: 3 !important;
    }
}

@media (max-width: 640px) {
    .shop-result-actions {
        gap: 0.45rem !important;
    }

    .shop-pager-inline {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .photo-picker-card {
        width: calc(100vw - 0.4rem) !important;
        max-height: calc(100vh - 0.4rem) !important;
        margin: 0.2rem auto !important;
        border-radius: 15px !important;
    }

    .photo-picker-tools {
        align-items: stretch !important;
    }

        .photo-picker-tools .form-control,
        .photo-picker-tools .btn {
            flex: 1 1 100% !important;
            width: 100% !important;
        }

    .photo-picker-table {
        min-width: 560px !important;
        font-size: 0.78rem !important;
    }
}

/*: My Orders readability hardening */
.customer-orders-shell,
.customer-order-detail-shell,
.customer-orders-shell .shop-section-heading,
.customer-order-detail-shell .shop-section-heading,
.customer-orders-shell .shop-section-heading h2,
.customer-order-detail-shell .shop-section-heading h2 {
    color: #ffffff !important;
}

    .customer-orders-shell .shop-muted,
    .customer-order-detail-shell .shop-muted {
        color: rgba(255, 255, 255, 0.82) !important;
    }

    .customer-order-card,
    .customer-tracking-card,
    .customer-history-card,
    .customer-order-panel,
    .customer-order-detail-shell .payment-card,
    .customer-order-detail-shell .cart-summary,
    .customer-order-detail-shell .checkout-summary {
        background: linear-gradient(135deg, rgba(3, 58, 42, 0.96), rgba(4, 42, 32, 0.98)) !important;
        border-color: rgba(239, 200, 91, 0.34) !important;
        color: #ffffff !important;
    }

        .customer-order-card h3,
        .customer-order-card strong,
        .customer-order-panel h3,
        .customer-order-panel strong,
        .customer-tracking-card strong,
        .customer-history-card h3,
        .customer-history-card strong,
        .customer-order-detail-shell .payment-card h3,
        .customer-order-detail-shell .payment-card strong,
        .customer-order-detail-shell .cart-summary strong,
        .customer-order-detail-shell .checkout-summary strong,
        .customer-lines-table td,
        .customer-lines-table td strong {
            color: #ffffff !important;
        }

.customer-order-meta div,
.customer-order-detail-grid .compact-summary div,
.tracking-step,
.order-status-history-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

    .customer-order-meta span,
    .customer-order-detail-grid .compact-summary span,
    .tracking-step span,
    .order-status-history-item span,
    .order-status-history-item p {
        color: rgba(255, 255, 255, 0.78) !important;
    }

.customer-lines-table th {
    color: #f3cf5f !important;
}

.customer-lines-table tbody tr:hover td {
    background: rgba(239, 200, 91, 0.08) !important;
}

/*: final responsive pass for shop/cart/manage/my-orders touched areas. */
.responsive-flow-section {
    width: min(100%, 100%);
    overflow-wrap: anywhere;
}

.shop-section-heading.responsive-page-heading,
.compact-heading.responsive-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.responsive-action-row,
.shop-heading-actions.responsive-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

    .responsive-action-row .btn,
    .shop-heading-actions.responsive-action-row .btn {
        white-space: nowrap;
    }

/* Shop grid should use large screens without creating narrow cards. */
.product-area {
    min-width: 0;
}

.product-grid.takealot-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)) !important;
    align-items: stretch;
}

.product-card {
    min-width: 0;
    max-width: 100%;
}

    .product-card .shop-product-title,
    .product-card h3,
    .product-card p,
    .product-card span,
    .product-card strong {
        overflow-wrap: anywhere;
    }

@media (min-width: 1500px) {
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fill, minmax(285px, 1fr)) !important;
    }
}

@media (min-width: 1900px) {
    .product-grid.takealot-grid {
        grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)) !important;
    }
}

/* Cart layout: keep summary usable and rows readable on phones/tablets. */
.responsive-cart-layout,
.cart-layout.responsive-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: start;
}

.responsive-cart-list,
.cart-list.responsive-cart-list {
    min-width: 0;
}

.responsive-cart-row,
.cart-row.responsive-cart-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
}

    .responsive-cart-row .cart-row-main {
        min-width: 0;
    }

        .responsive-cart-row .cart-row-main h3,
        .responsive-cart-row .cart-row-main span {
            overflow-wrap: anywhere;
        }

.responsive-qty-form,
.cart-qty-form.responsive-qty-form {
    min-width: 108px;
}

.responsive-summary-card,
.cart-summary.responsive-summary-card {
    min-width: 0;
}

@media (max-width: 980px) {
    .responsive-cart-layout,
    .cart-layout.responsive-cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary.responsive-summary-card {
        position: static !important;
        width: 100%;
    }
}

@media (max-width: 640px) {
    .responsive-cart-row,
    .cart-row.responsive-cart-row {
        grid-template-columns: 74px minmax(0, 1fr);
        align-items: start;
    }

        .responsive-cart-row .cart-row-image {
            width: 74px;
            height: 74px;
            object-fit: contain;
        }

    .responsive-qty-form,
    .cart-qty-form.responsive-qty-form {
        grid-column: 1 / -1;
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(90px, 1fr) auto;
        align-items: center;
        gap: 0.5rem;
    }
}

/* Manage Shop header and pager should be compact but wrap cleanly. */
.shop-result-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.shop-result-title-wrap {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.shop-result-actions {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
    flex-wrap: wrap !important;
}

    .shop-result-actions > strong,
    .shop-result-actions > .admin-view-pill {
        white-space: nowrap;
    }

.shop-pager-inline {
    flex: 0 0 auto !important;
    max-width: 100% !important;
}

@media (max-width: 720px) {
    .shop-result-title-wrap,
    .shop-result-actions,
    .shop-pager-inline {
        width: 100%;
        justify-content: flex-start !important;
    }

    .shop-pager-inline {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        gap: 0.4rem !important;
    }

        .shop-pager-inline .btn:first-child {
            justify-self: start;
        }

        .shop-pager-inline .btn:last-child {
            justify-self: end;
        }

        .shop-pager-inline .pager-status {
            justify-self: center;
        }
}

@media (max-width: 480px) {
    .shop-pager-inline {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

        .shop-pager-inline .btn,
        .shop-pager-inline .pager-status {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
}

/* Barcode picker modals: viewport-fit with readable scrolling. */
.photo-picker-modal,
.photo-barcode-picker-modal,
[data-online-picker-modal] {
    align-items: center;
    justify-content: center;
    padding: clamp(0.35rem, 1.8vw, 1.1rem) !important;
}

    .photo-picker-card,
    .photo-barcode-picker-modal .photo-picker-card,
    [data-online-picker-modal] .photo-picker-card {
        width: min(1220px, calc(100vw - 1rem)) !important;
        max-height: min(860px, calc(100vh - 1rem)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

.photo-picker-tools {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

    .photo-picker-tools .form-control {
        flex: 1 1 360px;
        min-width: min(280px, 100%);
    }

.photo-picker-table-wrap {
    flex: 1 1 auto !important;
    min-height: 220px !important;
    overflow: auto !important;
}

.photo-picker-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .photo-picker-modal,
    .photo-barcode-picker-modal,
    [data-online-picker-modal] {
        align-items: stretch;
        padding: 0.25rem !important;
    }

        .photo-picker-card,
        .photo-barcode-picker-modal .photo-picker-card,
        [data-online-picker-modal] .photo-picker-card {
            width: calc(100vw - 0.5rem) !important;
            max-height: calc(100vh - 0.5rem) !important;
        }

    .photo-picker-foot .btn,
    .photo-picker-tools .btn {
        width: 100%;
    }
}

/* My Orders final responsive/readability pass. */
.responsive-customer-order-list,
.customer-order-list.responsive-customer-order-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.responsive-customer-order-card,
.customer-order-card.responsive-customer-order-card {
    min-width: 0;
}

.customer-order-main,
.customer-order-meta,
.customer-order-actions {
    min-width: 0;
}

    .customer-order-main h3,
    .customer-order-main p,
    .customer-order-meta strong,
    .customer-order-meta span {
        overflow-wrap: anywhere;
    }

.responsive-order-detail-grid,
.customer-order-detail-grid.responsive-order-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.responsive-tracking-steps,
.customer-tracking-steps.responsive-tracking-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.responsive-table-scroll,
.admin-orders-table-wrap.responsive-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px) {
    .responsive-order-detail-grid,
    .customer-order-detail-grid.responsive-order-detail-grid,
    .responsive-tracking-steps,
    .customer-tracking-steps.responsive-tracking-steps {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .responsive-customer-order-list,
    .customer-order-list.responsive-customer-order-list {
        grid-template-columns: 1fr;
    }

    .responsive-action-row,
    .shop-heading-actions.responsive-action-row,
    .customer-order-actions.responsive-action-row {
        width: 100%;
        justify-content: stretch;
    }

        .responsive-action-row .btn,
        .shop-heading-actions.responsive-action-row .btn,
        .customer-order-actions.responsive-action-row .btn {
            flex: 1 1 100%;
            width: 100%;
        }
}


/* ==========================================================
   STABILISATION - Order pages must scroll and cards must not squeeze text
   ========================================================== */

/* Customer My Orders: do not use the older 3-column internal card layout on cards. */
.customer-order-list.responsive-customer-order-list,
.responsive-customer-order-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
    gap: 1rem !important;
    align-items: stretch !important;
}

.customer-order-card.responsive-customer-order-card,
.responsive-customer-order-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

    .customer-order-card.responsive-customer-order-card .customer-order-main,
    .customer-order-card.responsive-customer-order-card .customer-order-meta,
    .customer-order-card.responsive-customer-order-card .customer-order-actions {
        width: 100% !important;
        min-width: 0 !important;
    }

    .customer-order-card.responsive-customer-order-card .customer-status-pill {
        align-self: flex-start !important;
        width: auto !important;
        max-width: 100% !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .customer-order-card.responsive-customer-order-card h3,
    .customer-order-card.responsive-customer-order-card p,
    .customer-order-card.responsive-customer-order-card strong,
    .customer-order-card.responsive-customer-order-card span {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    .customer-order-card.responsive-customer-order-card h3 {
        white-space: normal !important;
        letter-spacing: normal !important;
        line-height: 1.15 !important;
    }

    .customer-order-card.responsive-customer-order-card .customer-order-meta {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(110px, 1fr)) !important;
        gap: .65rem !important;
        margin-top: auto !important;
    }

    .customer-order-card.responsive-customer-order-card .customer-order-actions {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
    }

@media (max-width: 760px) {
    .customer-order-list.responsive-customer-order-list,
    .responsive-customer-order-list {
        grid-template-columns: 1fr !important;
    }

    .customer-order-card.responsive-customer-order-card .customer-order-meta {
        grid-template-columns: 1fr !important;
    }
}

/* Customer and admin order details: page should scroll vertically; wide content scrolls horizontally. */
#my-orders,
#my-order-details,
#orders,
#order-details {
    min-width: 0 !important;
    overflow: visible !important;
}

    #order-details.admin-orders-shell {
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        display: block !important;
    }

.admin-order-detail-scroll {
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: .35rem !important;
}

.admin-order-detail-grid {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
    align-items: stretch !important;
}

.admin-detail-card {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

    .admin-detail-card div {
        align-items: flex-start !important;
    }

    .admin-detail-card strong {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

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

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

/* Keep My Order Details panels readable instead of squeezing content into tiny columns. */
.customer-order-detail-grid.responsive-order-detail-grid,
.responsive-order-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
}

.customer-tracking-steps.responsive-tracking-steps,
.responsive-tracking-steps {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}

.customer-order-panel,
.customer-tracking-card,
.order-status-history-card {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 600px) {
    .customer-order-detail-grid.responsive-order-detail-grid,
    .responsive-order-detail-grid,
    .customer-tracking-steps.responsive-tracking-steps,
    .responsive-tracking-steps {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================
   MY ORDERS - horizontal row layout on desktop
   ========================================================== */
@media (min-width: 900px) {
    .customer-order-list.responsive-customer-order-list,
    .responsive-customer-order-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .customer-order-card.responsive-customer-order-card,
    .responsive-customer-order-card {
        display: grid !important;
        grid-template-columns: minmax(280px, 1.25fr) minmax(360px, 1fr) auto !important;
        align-items: center !important;
        gap: 1rem !important;
        min-height: 126px !important;
        padding: 1rem !important;
    }

        .customer-order-card.responsive-customer-order-card .customer-order-main {
            display: grid !important;
            grid-template-columns: auto minmax(0, 1fr) !important;
            grid-template-areas:
                "status number"
                "status date" !important;
            align-items: center !important;
            column-gap: 0.85rem !important;
            row-gap: 0.2rem !important;
            width: 100% !important;
        }

        .customer-order-card.responsive-customer-order-card .customer-status-pill {
            grid-area: status !important;
            white-space: nowrap !important;
            align-self: center !important;
            writing-mode: horizontal-tb !important;
            text-orientation: mixed !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        .customer-order-card.responsive-customer-order-card h3 {
            grid-area: number !important;
            margin: 0 !important;
            font-size: clamp(1.35rem, 1.75vw, 2rem) !important;
            line-height: 1.05 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        .customer-order-card.responsive-customer-order-card .customer-order-main p {
            grid-area: date !important;
            margin: 0 !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        .customer-order-card.responsive-customer-order-card .customer-order-meta {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(95px, 1fr)) !important;
            gap: 0.55rem !important;
            margin: 0 !important;
            width: 100% !important;
        }

            .customer-order-card.responsive-customer-order-card .customer-order-meta div {
                min-height: 58px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
            }

            .customer-order-card.responsive-customer-order-card .customer-order-meta span,
            .customer-order-card.responsive-customer-order-card .customer-order-meta strong {
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
                word-break: normal !important;
                overflow-wrap: normal !important;
            }

        .customer-order-card.responsive-customer-order-card .customer-order-actions {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            flex-wrap: nowrap !important;
            gap: 0.55rem !important;
            min-width: max-content !important;
        }

            .customer-order-card.responsive-customer-order-card .customer-order-actions .btn {
                white-space: nowrap !important;
            }
}

@media (max-width: 899.98px) {
    .customer-order-card.responsive-customer-order-card,
    .responsive-customer-order-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

/*user-facing cleanup: quieter in-cart quantity control on public shop cards. */
.product-card .quiet-cart-state,
.product-card.is-in-cart .quiet-cart-state,
.product-card.is-in-cart .cart-state-pill {
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    color: rgba(246, 255, 246, 0.82) !important;
}

.product-card [data-cart-qty-panel][hidden] {
    display: none !important;
}

.shop-card-qty-panel {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    padding: 0.28rem 0.45rem;
    border: 1px solid rgba(198, 169, 79, 0.45);
    border-radius: 999px;
    background: rgba(3, 43, 31, 0.56);
    color: rgba(246, 255, 246, 0.86);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.shop-card-qty-label {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(246, 255, 246, 0.78);
}

.shop-card-qty-input {
    width: 4.4rem;
    min-width: 4.4rem;
    height: 2.15rem;
    border: 1px solid rgba(198, 169, 79, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #06251c;
    font-weight: 900;
    text-align: center;
    outline: none;
    padding: 0 0.45rem;
}

    .shop-card-qty-input:focus {
        border-color: var(--plant-gold);
        box-shadow: 0 0 0 3px rgba(198, 169, 79, 0.22);
    }

.product-card.is-in-cart .cart-card-actions {
    align-items: center;
    gap: 0.55rem;
}

.product-card.is-in-cart .btn-go-cart {
    min-height: 42px;
    padding-inline: 1rem;
}

.checkout-gate-note,
.checkout-gate-note * {
    color: rgba(246, 255, 246, 0.94) !important;
}

@media (max-width: 575px) {
    .product-card.is-in-cart .cart-card-actions {
        width: 100%;
        justify-content: space-between;
    }

    .shop-card-qty-panel {
        flex: 1 1 auto;
        justify-content: space-between;
    }

    .shop-card-qty-input {
        width: 4rem;
        min-width: 4rem;
    }
}

/* Delivery distance test */
.delivery-distance-section {
    width: min(1180px, calc(100% - 32px));
    margin-inline: auto;
}

.delivery-distance-layout {
    align-items: flex-start;
}

.delivery-distance-card textarea {
    min-height: 130px;
    resize: vertical;
}

.delivery-distance-summary strong {
    text-align: right;
}

.delivery-distance-result-card {
    margin-top: 1.25rem;
}

.delivery-distance-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

    .delivery-distance-result-grid > div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 1rem;
        border: 1px solid rgba(111, 78, 55, 0.18);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
    }

    .delivery-distance-result-grid span {
        color: var(--shop-muted, #6d6d6d);
    }

    .delivery-distance-result-grid strong {
        text-align: right;
    }

.delivery-distance-check-card {
    margin-top: 1.2rem;
    padding: 1rem;
    border: 1px solid rgba(239, 200, 91, 0.28);
    border-radius: 22px;
    background: rgba(0, 0, 0, 0.18);
}

.delivery-distance-check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

    .delivery-distance-check-head > div {
        display: grid;
        gap: 0.2rem;
    }

    .delivery-distance-check-head strong {
        color: #fff;
    }

    .delivery-distance-check-head span,
    .delivery-distance-map-note,
    .delivery-distance-unavailable {
        color: var(--plant-muted);
        font-size: 0.92rem;
    }

.delivery-distance-status {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--plant-border);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

    .delivery-distance-status.allowed {
        border-color: rgba(96, 211, 148, 0.62);
        background: rgba(42, 128, 82, 0.22);
    }

    .delivery-distance-status.blocked,
    .delivery-distance-status.failed {
        border-color: rgba(255, 126, 126, 0.62);
        background: rgba(128, 42, 42, 0.24);
    }

    .delivery-distance-status.warning,
    .delivery-distance-status.checking {
        border-color: rgba(239, 200, 91, 0.62);
        background: rgba(239, 200, 91, 0.13);
    }

.delivery-distance-status-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.delivery-distance-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.18rem 0.62rem;
    background: rgba(239, 200, 91, 0.16);
    border: 1px solid rgba(239, 200, 91, 0.45);
    color: var(--plant-gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.delivery-distance-status-grid {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr;
    gap: 0.35rem 0.9rem;
    margin-top: 0.75rem;
}

    .delivery-distance-status-grid span {
        color: var(--plant-muted);
    }

.delivery-distance-map-shell {
    margin-top: 1rem;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.22);
}

.delivery-distance-map {
    min-height: 320px;
    height: 36vh;
    max-height: 480px;
    width: 100%;
    background: rgba(0, 0, 0, 0.22);
}

.delivery-distance-map-note {
    padding: 0.75rem 1rem;
}

.delivery-distance-unavailable {
    margin-top: 0.75rem;
}

.leaflet-container {
    color: #1f2933;
}

@media (max-width: 640px) {
    .delivery-distance-check-head {
        align-items: stretch;
    }

        .delivery-distance-check-head .btn {
            width: 100%;
        }

    .delivery-distance-map {
        min-height: 260px;
        height: 42vh;
    }
}

.delivery-distance-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.delivery-distance-address-preview {
    margin-top: 0.55rem;
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

@media (max-width: 640px) {
    .delivery-distance-actions {
        width: 100%;
        justify-content: stretch;
    }

        .delivery-distance-actions .btn {
            flex: 1 1 100%;
        }
}

.delivery-location-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.delivery-location-choice {
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.055);
}

    .delivery-location-choice strong {
        color: #fff;
        font-size: 0.95rem;
    }

    .delivery-location-choice span {
        color: var(--plant-muted);
        font-size: 0.88rem;
    }

.delivery-distance-map-shell {
    position: relative;
}

.delivery-map-prompt {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 450;
    max-width: min(360px, calc(100% - 2rem));
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(239, 200, 91, 0.45);
    background: rgba(0, 46, 31, 0.88);
    color: var(--plant-gold);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

    .delivery-map-prompt.has-pin {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.18);
        background: rgba(0, 46, 31, 0.78);
    }

.delivery-distance-map .leaflet-container,
.delivery-distance-map.leaflet-container {
    cursor: crosshair;
}

@media (max-width: 640px) {
    .delivery-location-choice-grid {
        grid-template-columns: 1fr;
    }

    .delivery-map-prompt {
        left: 0.75rem;
        top: 0.75rem;
        font-size: 0.76rem;
        border-radius: 16px;
    }
}

.checkout-method-hint,
.checkout-delivery-help,
.delivery-selected-point,
.delivery-distance-next-step {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-top: 0.8rem;
    padding: 0.75rem 0.85rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.88);
}

.checkout-method-hint {
    margin-top: 0.9rem;
}

    .checkout-method-hint strong,
    .checkout-delivery-help strong,
    .delivery-selected-point strong {
        min-width: 8rem;
        color: #ffffff;
    }

    .checkout-method-hint span,
    .checkout-delivery-help span,
    .delivery-selected-point span,
    .delivery-distance-next-step {
        color: var(--plant-muted);
        font-size: 0.9rem;
    }

    .checkout-method-hint.is-delivery {
        border-color: rgba(239, 200, 91, 0.34);
        background: rgba(239, 200, 91, 0.11);
    }

.checkout-delivery-help {
    margin-bottom: 0.85rem;
    border-color: rgba(120, 185, 181, 0.26);
}

.delivery-selected-point {
    justify-content: space-between;
    flex-wrap: wrap;
    border-color: rgba(96, 211, 148, 0.38);
    background: rgba(42, 128, 82, 0.16);
}

.delivery-distance-next-step {
    margin-top: 0.65rem;
    font-weight: 700;
}

.checkout-next-action-card {
    border-color: rgba(239, 200, 91, 0.34) !important;
}

    .checkout-next-action-card.is-ok {
        border-color: rgba(96, 211, 148, 0.48) !important;
    }

    .checkout-next-action-card.is-warning {
        border-color: rgba(239, 200, 91, 0.58) !important;
    }

    .checkout-next-action-card.is-blocked {
        border-color: rgba(255, 126, 126, 0.62) !important;
    }

.checkout-card [data-checkout-submit] {
    min-height: 3.15rem;
    font-size: 1rem;
    letter-spacing: 0.015em;
}

@media (max-width: 760px) {
    .checkout-method-hint,
    .checkout-delivery-help,
    .delivery-selected-point {
        display: grid;
        gap: 0.25rem;
    }

        .checkout-method-hint strong,
        .checkout-delivery-help strong,
        .delivery-selected-point strong {
            min-width: 0;
        }
}

/* ==========================================================
   ROUND 2 - Cart and product card UX polish
   Scope: customer-facing shop/cart only. No DB-dependent logic.
   ========================================================== */
.cart-stock-note {
    display: inline-flex;
    margin-top: 0.25rem;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

    .cart-stock-note.stock-low {
        color: #ffe6a8;
    }

.cart-remove-btn {
    white-space: nowrap;
}

.product-ux-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(231, 196, 81, 0.20);
    border-radius: 18px;
    background: rgba(3, 44, 32, 0.54);
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.86rem;
}

    .product-ux-note strong {
        color: var(--pp-gold, #e7c451);
    }

.product-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    margin-bottom: 0.35rem;
    color: var(--pp-muted-dark);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

    .product-card-topline strong {
        max-width: 60%;
        overflow: hidden;
        color: var(--pp-green);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.product-photo-hint {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.28rem 0.56rem;
    border-radius: 999px;
    background: rgba(5, 54, 38, 0.84);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.product-image-wrap:hover .product-photo-hint,
.product-image-wrap:focus-visible .product-photo-hint {
    opacity: 1;
    transform: translateY(0);
}

.product-price-stock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin-top: auto;
}

.product-stock-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    min-width: 5.3rem;
    padding: 0.34rem 0.55rem;
    border-radius: 14px;
    background: rgba(7, 50, 36, 0.08);
    color: var(--pp-muted-dark);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

    .product-stock-chip strong {
        color: var(--pp-green);
        font-size: 0.9rem;
        line-height: 1.1;
    }

    .product-stock-chip.out-stock,
    .product-stock-chip.out-stock strong {
        color: #8f3b2f;
    }

.shop-card-qty-panel {
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.product-card.is-in-cart .cart-card-actions {
    align-items: center;
}

.product-card.is-in-cart .quiet-cart-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.45rem;
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    background: rgba(7, 50, 36, 0.08);
    color: var(--pp-green);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (max-width: 760px) {

    .responsive-cart-row.cart-row {
        grid-template-columns: 74px minmax(0, 1fr);
        align-items: start;
    }

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

    .responsive-cart-row .cart-qty-form {
        align-items: flex-start;
    }

    .product-ux-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-price-stock-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-stock-chip {
        align-items: flex-start;
        width: 100%;
    }

    .product-photo-hint {
        opacity: 1;
        transform: none;
    }

    .shop-card-qty-panel,
    .btn-go-cart {
        width: 100%;
    }
}



/* QTY stepper fix - keep +/- buttons, hide native number arrows. */
.cart-qty-stepper,
.shop-card-qty-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.22rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
}

.cart-qty-btn,
.shop-card-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.05rem;
    height: 2.05rem;
    border: 0;
    border-radius: 999px;
    background: var(--pp-gold, #e7c451);
    color: #10241e;
    font-weight: 900;
    line-height: 1;
}

    .cart-qty-btn:disabled,
    .shop-card-qty-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.cart-qty-stepper .qty-input,
.shop-card-qty-stepper .shop-card-qty-input {
    width: 4.15rem !important;
    min-height: 2.05rem !important;
    padding-inline: 0.45rem !important;
    text-align: center !important;
    border-radius: 999px !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.cart-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.cart-qty-stepper input[type="number"]::-webkit-inner-spin-button,
.shop-card-qty-stepper input[type="number"]::-webkit-outer-spin-button,
.shop-card-qty-stepper input[type="number"]::-webkit-inner-spin-button,
.qty-spinner-only::-webkit-outer-spin-button,
.qty-spinner-only::-webkit-inner-spin-button,
.shop-card-qty-input::-webkit-outer-spin-button,
.shop-card-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.qty-spinner-only,
.shop-card-qty-input {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

@media (max-width: 760px) {
    .cart-qty-stepper {
        width: 100%;
        justify-content: space-between;
    }

    .shop-card-qty-panel,
    .shop-card-qty-stepper,
    .btn-go-cart {
        width: 100%;
    }

    .shop-card-qty-stepper {
        justify-content: space-between;
    }
}


/* Checkout/user/admin improvement polish */
.product-stock-chip {
    min-width: 6.25rem !important;
    padding: 0.45rem 0.7rem !important;
    font-size: 0.76rem !important;
    font-weight: 900 !important;
}

    .product-stock-chip strong {
        font-size: 1.15rem !important;
        font-weight: 950 !important;
    }

.admin-list-stock strong {
    font-size: 1.05rem !important;
    font-weight: 950 !important;
}

.cart-stock-note {
    gap: 0.35rem !important;
    align-items: center !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
}

    .cart-stock-note strong {
        font-size: 1rem !important;
        color: var(--pp-gold, #e7c451) !important;
    }

.checkout-line-stock {
    display: block;
    margin-top: 0.15rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

    .checkout-line-stock strong {
        color: var(--pp-gold, #e7c451);
    }

.checkout-summary-payment-btn {
    margin-top: 0.9rem;
}

.admin-safe-panel,
.admin-safe-panel .admin-safe-panel-head,
.admin-safe-panel .admin-safe-panel-body,
.right-category-panel {
    transition: max-height 0.42s ease, opacity 0.42s ease, transform 0.42s ease, background 0.28s ease, border-color 0.28s ease !important;
}

    .admin-safe-panel.is-open .admin-safe-panel-body {
        opacity: 1;
        transform: translateY(0);
    }

.online-filter-card {
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

    .online-filter-card:hover,
    .online-filter-card:focus-visible,
    .online-filter-card.is-active-filter {
        transform: translateY(-1px);
        border-color: rgba(239, 200, 91, 0.72) !important;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    }

/* safer slow collapse override for admin safe panels */
.admin-safe-panel .admin-safe-panel-body {
    display: block !important;
    overflow: hidden !important;
    max-height: 1600px;
    opacity: 1;
}

.admin-safe-panel.is-collapsed .admin-safe-panel-body {
    display: block !important;
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

.category-picker-hint {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    line-height: 1.2;
}

/* keep Bulk Show Online inside the left product/list container, not spanning over the category sidebar. */
.product-area > .admin-bulk-online-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 0.85rem 0 !important;
}

    .product-area > .admin-bulk-online-panel .admin-safe-panel-head {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

@media (max-width: 900px) {
    .product-area > .admin-bulk-online-panel .admin-safe-panel-head {
        grid-template-columns: 1fr auto !important;
        gap: 8px !important;
    }

    .product-area > .admin-bulk-online-panel .admin-collapsible-hint {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }
}

/* category removal, product weight, and clearer delivery settings. */
.product-weight-meta strong,
.cart-row-main span:nth-child(n),
.checkout-line-stock strong {
    font-weight: 900;
}

.product-weight-meta {
    border-color: rgba(231, 196, 81, 0.34) !important;
    background: rgba(231, 196, 81, 0.08) !important;
}

.admin-category-select option[value="__remove_category__"] {
    font-weight: 800;
}

.delivery-toggle-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

    .delivery-toggle-row .delivery-enabled-check {
        flex: 1 1 240px;
        margin: 0;
    }

.fee-line-explainer {
    margin-bottom: 1rem;
    align-items: flex-start;
}

.delivery-settings-card small.shop-muted {
    display: block;
    margin-top: 0.28rem;
    line-height: 1.35;
}

.shared-admin-tools-menu {
    display: inline-block;
}

.shop-heading-actions .shared-admin-tools-menu {
    margin: 0;
}

@media (max-width: 760px) {
    .delivery-toggle-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .shared-admin-tools-menu,
    .shared-admin-tools-menu > summary {
        width: 100%;
    }
}


/* Client/admin shop pagination refinement */
.shop-page-size-form {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

    .shop-page-size-form label {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0;
        color: #f3ead1;
        font-weight: 700;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .shop-page-size-form select {
        min-width: 76px;
        padding: 0.35rem 0.55rem;
        border-radius: 999px;
    }

.client-shop-pager {
    flex-wrap: wrap;
    gap: 0.45rem;
}

    .client-shop-pager .btn.active,
    .client-shop-pager .btn[aria-current="page"] {
        background: rgba(245, 205, 92, 0.22);
        border-color: rgba(245, 205, 92, 0.85);
        color: #fff7d6;
        pointer-events: none;
    }

@media (max-width: 768px) {
    .shop-page-size-form {
        width: 100%;
        justify-content: flex-start;
    }

    .client-shop-pager {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Fix: no-photo client cards are static placeholders, not zoom triggers. */
.product-image-wrap.no-photo-static {
    cursor: default !important;
    pointer-events: none;
}

    .product-image-wrap.no-photo-static .product-photo-hint {
        display: none !important;
    }

/* Fix: keep the client/admin per-page picker readable and stop it overlapping the item count. */
.shop-result-actions {
    row-gap: 0.55rem !important;
}

.shop-page-size-form {
    flex: 0 0 auto !important;
}

    .shop-page-size-form label {
        min-height: 38px !important;
        padding: 0.25rem 0.28rem 0.25rem 0.7rem !important;
        border: 1px solid rgba(245, 205, 92, 0.28) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.07) !important;
    }

        .shop-page-size-form label > span {
            display: inline-block !important;
            line-height: 1 !important;
        }

    .shop-page-size-form .shop-page-size-select,
    .shop-page-size-form select.form-control {
        width: 72px !important;
        min-width: 72px !important;
        height: 32px !important;
        padding: 0.22rem 1.55rem 0.22rem 0.65rem !important;
        border-radius: 999px !important;
        background-color: #ffffff !important;
        color: #10241e !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;
    }

        .shop-page-size-form .shop-page-size-select option,
        .shop-page-size-form select.form-control option {
            background: #ffffff !important;
            color: #10241e !important;
        }

@media (max-width: 560px) {
    .shop-result-actions > strong {
        width: 100% !important;
    }

    .shop-page-size-form {
        width: auto !important;
    }
}

.inline-admin-action-form {
    display: inline-flex;
    margin-left: 0.35rem;
    vertical-align: middle;
}

.admin-remove-order-card {
    border-color: rgba(176, 42, 55, 0.35);
}

.audit-log-filter-panel {
    margin-bottom: 1rem;
}

.audit-log-filter-grid {
    grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr));
}

.audit-log-summary-card {
    margin-bottom: 1rem;
}

.audit-log-table-wrap {
    max-height: none;
}

.audit-log-table td small {
    display: block;
    color: rgba(255,255,255,0.72);
    margin-top: 0.15rem;
}

.audit-log-details {
    margin-top: 0.35rem;
}

    .audit-log-details summary {
        cursor: pointer;
        color: var(--shop-gold, #c8a35e);
        font-size: 0.85rem;
    }

    .audit-log-details pre {
        white-space: pre-wrap;
        max-width: 520px;
        max-height: 240px;
        overflow: auto;
        margin: 0.5rem 0 0;
        padding: 0.75rem;
        border-radius: 0.75rem;
        background: rgba(0,0,0,0.22);
        color: rgba(255,255,255,0.88);
        font-size: 0.78rem;
    }

.nowrap {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .audit-log-filter-grid {
        grid-template-columns: 1fr;
    }
}

.admin-manual-takeover-card,
.manual-takeover-summary {
    border-color: rgba(176, 42, 55, 0.35);
}

    .manual-takeover-summary span {
        display: block;
        margin-top: 0.2rem;
    }

.manual-takeover-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.62);
}

    .manual-takeover-modal-backdrop[hidden] {
        display: none !important;
    }

.manual-takeover-modal {
    width: min(620px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    border-radius: 1.25rem;
    border: 1px solid rgba(255,255,255,0.14);
    background: #1d261c;
    box-shadow: 0 24px 80px rgba(0,0,0,0.42);
    padding: 1.25rem;
}

.manual-takeover-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

    .manual-takeover-head h3 {
        margin: 0;
    }

.manual-modal-close {
    border: 0;
    border-radius: 999px;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 1.35rem;
}

.form-label-block {
    display: block;
    margin-top: 1rem;
}

    .form-label-block span {
        display: block;
        margin-bottom: 0.35rem;
        font-weight: 700;
    }

.required-mark {
    color: #ffb4b4;
}

.manual-takeover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.2rem;
}

.admin-order-pagination {
    margin-top: 1rem;
}

.admin-order-page-size-fields {
    margin-top: 0.75rem;
}

.admin-tool-logout-form {
    margin: 0;
}

.admin-tool-logout-button {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
}


/* Standard admin tools header */
.admin-tools-header {
    margin-bottom: 1rem;
}

.admin-command-link-back {
    margin-left: auto;
}

@media (max-width: 760px) {
    .admin-command-link-back {
        margin-left: 0;
    }
}

/* ==========================================================
   2026-07-02 responsive hardening + better error pages
   Final override block. Keep this at the end of site.css.
   ========================================================== */

.skip-to-content {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 3000;
    transform: translateY(-160%);
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: var(--plant-gold, #efc85b);
    color: #061814;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 14px 38px rgba(0,0,0,0.35);
}

.skip-to-content:focus {
    transform: translateY(0);
}

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

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

button,
input,
select,
textarea {
    font: inherit;
}

.pp-touch-target {
    touch-action: manipulation;
}

.plant-main {
    min-width: 0;
}

.plant-nav {
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.plant-nav-inner {
    min-width: 0;
}

.plant-logo,
.plant-menu,
.plant-account-nav,
.shop-heading-actions,
.admin-command-strip,
.product-area,
.cart-layout,
.checkout-layout,
.payment-layout,
.admin-orders-shell,
.product-photo-admin-shell,
.user-admin-shell,
.admin-settings-shell,
.delivery-settings-section {
    min-width: 0;
}

.mobile-menu-button {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgba(239, 200, 91, 0.45);
    border-radius: 999px;
    background: rgba(0,0,0,0.36);
    color: #fff;
    font-weight: 900;
}

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

.mobile-menu-button b {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plant-mobile-menu {
    width: min(1180px, calc(100vw - 24px));
    margin: 0.55rem auto 0;
    padding: 0.65rem;
    border: 1px solid rgba(239, 200, 91, 0.25);
    border-radius: 1.1rem;
    background: rgba(3, 25, 20, 0.98);
    box-shadow: 0 18px 50px rgba(0,0,0,0.38);
}

.plant-mobile-menu[hidden] {
    display: none !important;
}

.plant-mobile-menu a,
.plant-mobile-menu button,
.mobile-account-label,
.mobile-menu-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    padding: 0.65rem 0.8rem;
    border: 0;
    border-radius: 0.85rem;
    background: transparent;
    color: #fff;
    text-decoration: none;
    font-weight: 850;
    text-align: left;
}

.plant-mobile-menu a:hover,
.plant-mobile-menu a:focus,
.plant-mobile-menu button:hover,
.plant-mobile-menu button:focus,
.plant-mobile-menu a.active {
    color: #061814;
    background: var(--plant-gold, #efc85b);
    outline: none;
}

.mobile-account-label,
.mobile-menu-section-label {
    min-height: auto;
    color: rgba(255,255,255,0.72);
    background: rgba(255,255,255,0.06);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.shop-section {
    max-width: 100%;
}

.shop-section-heading,
.responsive-page-heading,
.checkout-heading-row,
.stock-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.shop-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.shop-section-heading h2,
.shop-section-heading.compact-heading h2 {
    overflow-wrap: anywhere;
}

.shop-alert,
.alert,
.validation-summary-errors,
.text-danger {
    overflow-wrap: anywhere;
}

.form-control,
.form-select,
.btn,
button,
select,
input,
textarea {
    max-width: 100%;
}

.checkout-layout,
.cart-layout,
.payment-layout,
.admin-order-detail-grid,
.admin-order-summary-grid,
.customer-order-detail-grid,
.photo-admin-grid,
.auth-grid,
.admin-settings-grid,
.delivery-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 992px) {
    .checkout-layout,
    .cart-layout,
    .payment-layout {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    }
}

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

.mobile-scroll-table {
    min-width: 760px;
}

.error-page-shell {
    max-width: 1240px;
}

.error-help-card {
    max-width: 100%;
    overflow: hidden;
}

.error-status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    margin-bottom: 0.65rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(239, 200, 91, 0.14);
    color: var(--plant-gold, #efc85b);
    border: 1px solid rgba(239, 200, 91, 0.35);
    font-weight: 900;
}

.error-reference-line code,
.error-stacktrace code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.error-action-row,
.error-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.error-metadata-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.7rem;
    margin: 1rem 0;
}

.error-metadata-grid > div {
    min-width: 0;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.9rem;
    background: rgba(255,255,255,0.06);
}

.error-metadata-grid span {
    display: block;
    margin-bottom: 0.25rem;
    color: rgba(255,255,255,0.66);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.error-metadata-grid strong {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 0.9rem;
}

.error-stacktrace-details {
    margin-top: 1rem;
}

.error-stacktrace-details summary {
    cursor: pointer;
    color: var(--plant-gold, #efc85b);
    font-weight: 900;
}

.error-stacktrace {
    max-height: 52vh;
    overflow: auto;
    margin-top: 0.75rem;
    padding: 1rem;
    border-radius: 1rem;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.9);
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 1180px) {
    .plant-nav {
        padding: 0.65rem 0.85rem !important;
        background: rgba(1, 16, 13, 0.90) !important;
    }

    .plant-nav-inner {
        display: grid !important;
        grid-template-columns: auto auto;
        align-items: center;
        gap: 0.7rem;
        width: 100%;
        max-width: 100% !important;
    }

    .plant-logo-img {
        width: min(52vw, 260px) !important;
        max-width: 52vw !important;
        max-height: 82px !important;
    }

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

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

    body.mobile-menu-open {
        overflow: hidden;
    }

    .plant-mobile-menu:not([hidden]) {
        display: grid;
        gap: 0.35rem;
        max-height: calc(100dvh - 105px);
        overflow-y: auto;
    }

    .shop-section {
        width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 6.8rem 0.85rem 1rem !important;
        border-radius: 0 !important;
    }

    .shop-section-heading,
    .responsive-page-heading,
    .checkout-heading-row,
    .stock-heading-row {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        margin-bottom: 1rem !important;
    }

    .shop-section-heading h2,
    .shop-section-heading.compact-heading h2 {
        font-size: clamp(2.25rem, 10vw, 4.2rem) !important;
        line-height: 1 !important;
    }

    .shop-heading-actions {
        justify-content: flex-start !important;
        width: 100%;
    }

    .shop-heading-actions > *,
    .shop-heading-actions .btn,
    .shop-heading-actions form,
    .shop-heading-actions details,
    .shop-heading-actions summary {
        flex: 1 1 150px;
    }

    .admin-command-strip.admin-tools-header {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
        border-radius: 1rem !important;
        padding: 0.5rem !important;
    }

    .admin-command-link,
    .admin-command-link-back {
        margin-left: 0 !important;
        width: 100%;
        min-height: 42px;
        text-align: center;
    }

    .shop-layout.right-category-layout,
    .shop-layout,
    .cart-layout,
    .checkout-layout,
    .payment-layout,
    .admin-order-summary-grid,
    .admin-order-detail-grid,
    .customer-order-detail-grid,
    .auth-shell .auth-grid,
    .photo-admin-grid,
    .system-settings-grid,
    .delivery-settings-grid {
        grid-template-columns: 1fr !important;
    }

    .right-category-panel,
    .category-panel {
        position: static !important;
        width: 100% !important;
        max-height: 42dvh !important;
        overflow-y: auto !important;
    }

    .shop-toolbar,
    .shop-search-form,
    .admin-filter-form,
    .orders-filter-form,
    .delivery-settings-form,
    .system-settings-form,
    .bulk-online-form,
    .photo-upload-mini-form,
    .bulk-photo-form {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 760px) {
    .plant-logo-img {
        width: min(58vw, 220px) !important;
        max-height: 70px !important;
    }

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

    .shop-section {
        padding-top: 6rem !important;
    }

    .shop-muted,
    .small-muted,
    .checkout-line-stock,
    .cart-stock-note {
        line-height: 1.35;
    }

    .btn,
    .plant-body button,
    .plant-body input[type="submit"] {
        min-height: 42px;
    }

    .shop-heading-actions > *,
    .shop-heading-actions .btn,
    .error-action-row .btn,
    .error-action-row a,
    .admin-status-update-form .btn,
    .delivery-toggle-row .delivery-enabled-check,
    .checkout-summary-payment-btn,
    .payment-layout .btn {
        width: 100% !important;
    }

    .shop-search-form,
    .admin-filter-form,
    .orders-filter-form,
    .delivery-address-actions,
    .checkout-actions,
    .payment-actions,
    .manual-takeover-actions,
    .error-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0.6rem !important;
    }

    .shop-search-form .form-control,
    .shop-search-form .btn,
    .admin-filter-form .form-control,
    .admin-filter-form .btn,
    .orders-filter-form .form-control,
    .orders-filter-form .btn,
    .delivery-address-actions .btn,
    .checkout-actions .btn,
    .payment-actions .btn {
        width: 100% !important;
    }

    .product-grid,
    .product-grid.takealot-grid,
    .service-grid,
    .admin-summary-grid,
    .admin-summary-grid-5,
    .order-card-grid,
    .customer-order-grid {
        grid-template-columns: 1fr !important;
    }

    .product-card,
    .cart-row,
    .admin-online-card,
    .customer-order-card,
    .payment-card,
    .checkout-card,
    .delivery-settings-card,
    .admin-detail-card,
    .admin-summary-card,
    .empty-cart-card,
    .auth-card {
        border-radius: 1rem !important;
    }

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

    .cart-row-image,
    .responsive-cart-row .cart-row-image {
        width: 72px !important;
        height: 72px !important;
    }

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

    .cart-summary,
    .checkout-summary,
    .payment-summary {
        position: static !important;
        width: 100% !important;
    }

    .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.65rem !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        border-radius: 0.95rem !important;
        background: rgba(255,255,255,0.06) !important;
    }

    .mobile-card-table td {
        min-height: 34px !important;
        padding: 0.45rem 0 !important;
        border: 0 !important;
        color: #fff !important;
        overflow-wrap: anywhere;
    }

    .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.72rem;
        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: 720px !important;
    }

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

    .error-stacktrace {
        max-height: 46dvh;
        font-size: 0.76rem;
    }
}

@media (max-width: 420px) {
    .plant-nav {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .plant-logo-img {
        width: min(56vw, 190px) !important;
        max-height: 62px !important;
    }

    .mobile-menu-button {
        min-width: 44px;
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .shop-section {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
    }

    .shop-section-heading h2,
    .shop-section-heading.compact-heading h2 {
        font-size: clamp(2rem, 13vw, 3.2rem) !important;
    }
}

.mobile-menu-bars {
    display: inline-flex !important;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}

.mobile-menu-bars span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-menu-button > span:not(.mobile-menu-bars) {
    display: none;
}