/* SMARKAFRICA Custom Styles */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Lato:wght@300;400;700&display=swap');

.capture-video {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid rgba(201,146,42,0.45);
    border-radius: 8px;
    background: #111;
}

.selfie-capture-frame {
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 1 / 1;
    margin-inline: auto;
    border-radius: 50%;
    overflow: hidden;
    background: #111;
    box-shadow: 0 0 0 1px rgba(201,146,42,0.4), 0 12px 28px rgba(0,0,0,0.28);
}

.selfie-video {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    border-radius: 50%;
    transform: scaleX(-1);
}

.selfie-guide {
    position: absolute;
    inset: 9%;
    border: 2px dashed rgba(245,208,122,0.9);
    border-radius: 50%;
    pointer-events: none;
}

:root {
    /* Brand Palette — Deep Forest + Gold */
    --primary:          #1a7a4a;
    --primary-dark:     #125c37;
    --primary-light:    #2da06a;
    --accent-gold:      #c9922a;
    --accent-gold-light:#e8b84b;
    --accent-gold-glow: #f5d07a;
    --bg-deep:          #0d1f16;
    --bg-mid:           #122b1e;
    --bg-surface:       #1a3a28;
    --bg-card:          #1f4530;
    --bg-card-hover:    #254d37;
    --text-primary:     #f0ede4;
    --text-secondary:   #b8c9b2;
    --text-muted:       #7a9882;
    --border-subtle:    rgba(201,146,42,0.18);
    --border-gold:      rgba(201,146,42,0.45);
    --card-shadow:      0 4px 20px rgba(0,0,0,0.35);
    --gold-glow:        0 0 18px rgba(201,146,42,0.3);
}

/* ─── Base ─────────────────────────────────────────── */
body {
    font-family: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-deep);
    background-image:
        radial-gradient(ellipse 80% 50% at 20% 10%, rgba(26,122,74,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(201,146,42,0.08) 0%, transparent 55%),
        repeating-linear-gradient(
            120deg,
            transparent,
            transparent 38px,
            rgba(255,255,255,0.013) 38px,
            rgba(255,255,255,0.013) 39px
        );
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--text-primary);
}

main {
    flex: 1;
}

/* ─── Navbar ────────────────────────────────────────── */
.navbar {
    background: rgba(13,31,22,0.95) !important;
    border-bottom: 1px solid var(--border-gold);
    backdrop-filter: blur(10px);
}

.navbar-brand {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    letter-spacing: 0;
    color: var(--text-primary) !important;
    display: flex;
    align-items: center;
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.site-logo {
    display: block;
    width: auto;
    height: 34px;
    max-width: 128px;
    object-fit: contain;
    object-position: left center;
}

.nav-link {
    color: var(--text-secondary) !important;
    transition: color 0.2s;
}
.nav-link:hover {
    color: var(--accent-gold-light) !important;
}

/* ─── Hero ──────────────────────────────────────────── */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-surface) 100%);
    border-bottom: 1px solid var(--border-gold);
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 40% 50%, rgba(201,146,42,0.07) 0%, transparent 55%),
                radial-gradient(circle at 80% 20%, rgba(26,122,74,0.12) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

.hero-section h1,
.hero-section h2 {
    color: var(--text-primary);
    font-family: 'Cinzel', serif;
}

.hero-section p {
    color: var(--text-secondary);
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}

/* ─── Cards general ──────────────────────────────────── */
.card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.card-title, .card-text, h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

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

/* ─── Product Cards ──────────────────────────────────── */
.product-card {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow), var(--gold-glow) !important;
    border-color: var(--border-gold) !important;
}

.product-card .card-img-top {
    transition: transform 0.3s;
}

.product-card:hover .card-img-top {
    transform: scale(1.04);
}

/* ─── Category Cards ─────────────────────────────────── */
.category-card {
    transition: all 0.22s;
    cursor: pointer;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
}

.category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--card-shadow), var(--gold-glow) !important;
    background: var(--primary) !important;
    border-color: var(--accent-gold) !important;
}

.category-card:hover .text-dark,
.category-card:hover h6 {
    color: var(--text-primary) !important;
}

.category-card:hover .text-warning {
    color: var(--accent-gold-light) !important;
}

/* ─── Cart Badge ─────────────────────────────────────── */
#cart-count {
    font-size: 0.7rem;
    background: var(--accent-gold) !important;
    color: #0d1f16 !important;
}

/* ─── Buttons ────────────────────────────────────────── */
.btn-warning,
.btn-gold {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    color: #0d1f16 !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: background 0.2s, box-shadow 0.2s;
}

.btn-warning:hover,
.btn-gold:hover {
    background: var(--accent-gold-light) !important;
    border-color: var(--accent-gold-light) !important;
    color: #0d1f16 !important;
    box-shadow: 0 0 14px rgba(201,146,42,0.45);
}

.btn-success,
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--text-primary) !important;
}

.btn-success:hover,
.btn-primary:hover {
    background: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

.btn-outline-success,
.btn-outline-primary {
    color: var(--primary-light) !important;
    border-color: var(--primary-light) !important;
}

.btn-outline-success:hover,
.btn-outline-primary:hover {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
}

/* ─── Admin Cards ────────────────────────────────────── */
.card.border-start {
    border-radius: 0.5rem;
}

/* ─── Timeline for tracking ─────────────────────────── */
.timeline-track {
    position: relative;
    padding-left: 40px;
}

.timeline-track::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-gold);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.5rem;
}

.timeline-item .dot {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 2px solid var(--bg-deep);
    box-shadow: 0 0 8px rgba(201,146,42,0.6);
}

.timeline-item.pending .dot {
    background: var(--text-muted);
    box-shadow: none;
}

/* ─── Product description ────────────────────────────── */
.product-description {
    line-height: 1.85;
    color: var(--text-secondary);
}

/* ─── Flash messages ─────────────────────────────────── */
.alert {
    border-radius: 0.5rem;
    border: none;
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border-left: 3px solid var(--accent-gold) !important;
    border-radius: 0;
}

.alert-success {
    border-left-color: var(--primary-light) !important;
}

.alert-danger {
    border-left-color: #d9534f !important;
}

/* ─── Footer ─────────────────────────────────────────── */
footer {
    background: var(--bg-mid) !important;
    border-top: 1px solid var(--border-gold);
    color: var(--text-secondary) !important;
}

footer a {
    color: var(--text-muted) !important;
    transition: color 0.2s;
}

footer a:hover {
    color: var(--accent-gold-light) !important;
    text-decoration: underline !important;
}

/* ─── Forms ──────────────────────────────────────────── */
.form-control,
.form-select {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
}

.form-control:focus,
.form-select:focus {
    background: var(--bg-surface) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 0.2rem rgba(201,146,42,0.2) !important;
    color: var(--text-primary) !important;
}

.form-label {
    color: var(--text-secondary);
}

/* ─── Pagination ──────────────────────────────────────── */
.page-link {
    background: var(--bg-surface) !important;
    border-color: var(--border-subtle) !important;
    color: var(--accent-gold-light) !important;
}

.page-link:hover {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-gold) !important;
    color: var(--accent-gold-glow) !important;
}

.page-item.active .page-link {
    background: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    color: #0d1f16 !important;
}

/* ─── Loading spinner ─────────────────────────────────── */
.spinner-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(13,31,22,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.spinner-border {
    color: var(--accent-gold) !important;
}

/* ─── Tables ──────────────────────────────────────────── */
.table {
    color: var(--text-primary) !important;
}

.table th {
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent-gold-light) !important;
    border-color: var(--border-gold) !important;
    background: var(--bg-surface) !important;
}

.table td {
    border-color: var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

.table-hover tbody tr:hover td {
    background: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
}

/* ─── Badges ──────────────────────────────────────────── */
.badge {
    font-weight: 500;
}

.badge.bg-warning,
.badge.bg-gold {
    background: var(--accent-gold) !important;
    color: #0d1f16 !important;
}

.badge.bg-success {
    background: var(--primary) !important;
    color: var(--text-primary) !important;
}

.market-chart-wrap {
    position: relative;
    width: 100%;
    height: 430px;
}

.market-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.market-feed-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.market-feed-item:last-child {
    border-bottom: 0;
}

.trend-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    max-height: 520px;
    overflow: hidden;
    border-radius: 8px;
    background: #0d1f16;
}

.trend-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.72;
    display: block;
}

.trend-hero-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem;
    background: linear-gradient(0deg, rgba(13,31,22,0.94), rgba(13,31,22,0));
}

.platform-ad-pop {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: min(360px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    z-index: 1055;
    background: #ffffff;
    border: 1px solid var(--border-gold);
    border-radius: 8px;
    box-shadow: var(--card-shadow), var(--gold-glow);
    color: #17251d;
    animation: adPopIn 0.32s cubic-bezier(0.18, 0.9, 0.28, 1.18), adFlickerPop 2.1s ease-in-out 0.32s infinite;
}

.platform-ad-queue .platform-ad-pop[hidden] {
    display: none;
}

.hot-sale-pop {
    position: fixed;
    left: 50%;
    top: 6rem;
    transform: translateX(-50%);
    width: min(380px, calc(100vw - 2rem));
    z-index: 1060;
    overflow: hidden;
    background: #fffdf8;
    border: 2px solid #d83b24;
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(38, 28, 8, 0.22);
    color: #17251d;
    animation: hotSalePunch 0.42s ease-out;
}

.hot-sale-pop img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.platform-ad-pop img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.platform-ad-body {
    padding: 1rem;
}

.platform-ad-body h5,
.platform-ad-body p {
    color: #17251d;
}

.platform-ad-body .btn-gold {
    color: #17251d !important;
}

.platform-ad-close {
    position: absolute;
    top: 0.35rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    color: #17251d;
    border: 1px solid rgba(23,37,29,0.18);
    font-size: 1.4rem;
    line-height: 1;
}

@keyframes adFlickerPop {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
        border-color: var(--border-gold);
        box-shadow: var(--card-shadow), 0 0 0 rgba(216, 155, 29, 0);
    }
    10% {
        transform: translateY(-1px) scale(1.008);
        filter: brightness(1.06);
        border-color: rgba(216, 155, 29, 0.82);
        box-shadow: var(--card-shadow), 0 0 24px rgba(216, 155, 29, 0.32);
    }
    16% {
        transform: translateY(0) scale(1);
        filter: brightness(0.985);
        border-color: rgba(216, 155, 29, 0.55);
        box-shadow: var(--card-shadow), 0 0 10px rgba(216, 155, 29, 0.12);
    }
    24% {
        transform: translateY(-1px) scale(1.006);
        filter: brightness(1.04);
        border-color: rgba(216, 155, 29, 0.72);
        box-shadow: var(--card-shadow), 0 0 20px rgba(216, 155, 29, 0.22);
    }
    36% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
        border-color: var(--border-gold);
        box-shadow: var(--card-shadow), var(--gold-glow);
    }
}

@keyframes adPopIn {
    from { opacity: 0; transform: translateY(14px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes hotSalePunch {
    0% { opacity: 0; transform: translateX(-50%) scale(0.82); }
    60% { opacity: 1; transform: translateX(-50%) scale(1.04); }
    100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

.hot-sale-tag {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #d83b24;
    color: #fffaf0;
    font-size: 0.74rem;
    font-weight: 900;
}

/* Provenance seals: a tiny stack pinned to the bottom-left corner so the photo
   stays readable. `top` is deliberately left auto - pairing it with `bottom` on
   an auto-height absolute box stretches the pill down the whole image, which is
   what used to bury the product behind a giant "Verified Seller" slab. */
.authenticity-seal {
    position: absolute;
    left: 6px;
    bottom: 6px;
    top: auto;
    right: auto;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: calc(100% - 12px);
    padding: 2px 6px;
    border-radius: 999px;
    background: #0d6efd;
    color: #fffaf0;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.verified-seller-seal {
    background: #0f5e42;
}

/* When a product is both original and from a verified seller the two pills
   stack rather than sit on top of each other. */
.authenticity-seal:not(.verified-seller-seal) ~ .verified-seller-seal {
    bottom: 25px;
}

/* Trusted is the third pill that can land in the bottom-left corner. These
   sibling rules are deterministic because _badges.html always emits the seals in
   one order - Original, Verified, Trusted - so "how many seals precede me" is the
   same question as "how high do I sit". The two-predecessor rule is more specific,
   so it wins over the one-predecessor rule when both match. */
.trusted-seller-seal {
    background: #6b3fa0;
}

.authenticity-seal ~ .trusted-seller-seal {
    bottom: 25px;
}

.authenticity-seal ~ .authenticity-seal ~ .trusted-seller-seal {
    bottom: 44px;
}

/* The inline pill form of the Trusted badge, used beside the product title.
   Bootstrap has no purple contextual class, so the colour is set here to match the
   seal that sits on the photo. */
.trusted-pill {
    background: #6b3fa0;
    color: #fff;
}

/* The hot-deal thumbnail is ~108px square. A third pill there would cover the
   product, so Trusted is dropped on that strip only. */
.hot-deal-media .trusted-seller-seal {
    display: none;
}

/* The hot-deal strip thumbnail is only ~108px square, so trim the seals further
   and drop the stack to a single visible pill. */
.hot-deal-media .authenticity-seal {
    left: 4px;
    bottom: 4px;
    padding: 1px 5px;
    font-size: 0.5rem;
}

.hot-deal-media .authenticity-seal:not(.verified-seller-seal) ~ .verified-seller-seal {
    bottom: 20px;
}

/* Brand mark: top-left, small enough to sit over a corner without covering the
   subject of the photo. Sized in rem so it stays proportional on cards and on
   the larger product-page image. */
.brand-tag {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 16px);
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(17, 17, 17, 0.82);
    color: #f6d67a;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    backdrop-filter: blur(2px);
}

.brand-tag i {
    font-size: 0.62rem;
}

.brand-tag span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nudged down when a hot-sale tag already owns the top-left corner. */
.hot-sale-tag ~ .brand-tag,
.brand-tag.brand-tag-stacked {
    top: 42px;
}

.trend-card-image,
.market-news-image,
.product-main-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    display: block;
    background: var(--bg-mid);
}

.market-news-image {
    height: 220px;
    aspect-ratio: auto;
}

.product-main-image {
    max-height: 450px;
    border-radius: 8px;
}

.product-thumb img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ─── Dropdowns ───────────────────────────────────────── */
.dropdown-menu {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-gold) !important;
}

.dropdown-item {
    color: var(--text-secondary) !important;
}

.dropdown-item:hover {
    background: var(--bg-card-hover) !important;
    color: var(--accent-gold-light) !important;
}

/* ─── Section backgrounds ─────────────────────────────── */
.bg-light {
    background: var(--bg-surface) !important;
}

.bg-white {
    background: var(--bg-card) !important;
}

.bg-dark {
    background: var(--bg-deep) !important;
}

/* ─── Dividers / borders ──────────────────────────────── */
hr {
    border-color: var(--border-subtle);
    opacity: 1;
}

/* ─── Gold accent text utility ────────────────────────── */
.text-gold {
    color: var(--accent-gold-light) !important;
}

.text-warning {
    color: var(--accent-gold-light) !important;
}

.text-success {
    color: var(--primary-light) !important;
}

/* ─── Responsive tweaks ───────────────────────────────── */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2rem;
    }
    .product-card .card-title {
        font-size: 0.95rem;
    }
}

/* ─── Print ───────────────────────────────────────────── */
@media print {
    body { background: #fff !important; color: #000 !important; }
    .navbar, footer, .btn { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; background: #fff !important; }
    .card-title, .card-text { color: #000 !important; }
}
.auth-hero-actions {
    margin-left: auto;
}

.star-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 0.15rem;
}

.star-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-rating span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    transition: color 0.15s, transform 0.15s;
}

.star-rating label:hover span,
.star-rating label:hover ~ label span,
.star-rating label:has(input:checked) span,
.star-rating label:has(input:checked) ~ label span {
    color: var(--accent-gold-light);
}

.star-rating span:hover {
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .auth-hero-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* Marketplace refresh: gold + charcoal storefront */
:root {
    --market-gold: #d89b1d;
    --market-gold-2: #f4c55a;
    --market-ink: #1d1a16;
    --market-charcoal: #2a241c;
    --market-green: #0f5e42;
    --market-paper: #fffaf0;
    --market-soft: #fff3d5;
    --market-line: rgba(86, 62, 21, 0.14);
    --market-shadow: 0 12px 32px rgba(38, 28, 8, 0.12);
}

body {
    background: #f7f1e4 !important;
    background-image: linear-gradient(180deg, #fffaf0 0%, #f7f1e4 46%, #f1eadc 100%) !important;
    color: var(--market-ink);
}

main {
    padding-top: 0 !important;
}

.navbar {
    background: var(--market-ink) !important;
    border-bottom: 3px solid var(--market-gold);
}

.navbar::after,
.hero-section::before,
.market-hero::before,
.market-hero::after {
    pointer-events: none;
}

.navbar-brand,
.nav-link {
    position: relative;
    z-index: 2;
}

.card,
.dropdown-menu {
    background: #fffdf8 !important;
    color: var(--market-ink) !important;
    border-color: var(--market-line) !important;
}

.card-title,
.card-text,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--market-ink);
}

.text-muted {
    color: #756b5e !important;
}

.bg-white,
.bg-light {
    background: #fffdf8 !important;
}

.btn-gold,
.btn-warning {
    background: linear-gradient(180deg, var(--market-gold-2), var(--market-gold)) !important;
    border-color: #bd7d0f !important;
    color: #221806 !important;
    font-weight: 800;
    box-shadow: 0 7px 18px rgba(216, 155, 29, 0.24);
}

.btn-gold:hover,
.btn-warning:hover {
    background: linear-gradient(180deg, #ffd876, #e4a627) !important;
    color: #221806 !important;
}

.btn-outline-gold {
    color: #5c3900 !important;
    border: 1px solid var(--market-gold) !important;
    background: rgba(255, 250, 240, 0.82) !important;
    font-weight: 800;
}

.btn-outline-gold:hover {
    background: var(--market-gold) !important;
    color: #221806 !important;
}

.btn-soft-dark {
    background: var(--market-charcoal) !important;
    border-color: var(--market-charcoal) !important;
    color: #fffaf0 !important;
    font-weight: 800;
}

.market-hero,
.shop-head {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(42, 36, 28, 0.92), rgba(86, 56, 13, 0.78)),
        linear-gradient(90deg, #2a241c, #d89b1d);
    color: #fffaf0;
    padding: 34px 0 30px;
    border-bottom: 1px solid rgba(216, 155, 29, 0.45);
}

.market-hero::before {
    content: '';
    position: absolute;
    inset: -30% -10% auto auto;
    width: 540px;
    height: 540px;
    background: radial-gradient(circle, rgba(244, 197, 90, 0.24), transparent 68%);
}

.market-hero .container,
.shop-head .container {
    position: relative;
    z-index: 1;
}

.market-topbar {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: flex-start;
}

.market-kicker {
    display: inline-flex;
    color: var(--market-gold-2);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 8px;
}

.market-topbar h1,
.shop-head h1 {
    max-width: 680px;
    margin: 0;
    color: #fffaf0;
    font-size: clamp(2rem, 5vw, 4.2rem);
    font-family: 'Lato', sans-serif;
    font-weight: 900;
}

.market-topbar p {
    max-width: 560px;
    margin: 12px 0 0;
    color: #f8e9c4;
    font-size: 1.05rem;
}

.auth-hero-actions,
.market-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.market-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    margin-top: 26px;
    max-width: 920px;
    border: 3px solid var(--market-gold);
    border-radius: 999px;
    overflow: hidden;
    background: #fffdf8;
    box-shadow: var(--market-shadow);
}

.market-search input {
    min-width: 0;
    border: 0;
    padding: 14px 20px;
    background: #fffdf8;
    color: var(--market-ink);
    outline: none;
}

.market-search button {
    border: 0;
    padding: 0 26px;
    background: var(--market-gold);
    color: #241806;
    font-weight: 900;
}

.image-inspo-search {
    display: grid;
    gap: 8px;
    max-width: 920px;
    margin-top: 14px;
    color: #fff5d6;
}

.image-inspo-search label {
    font-weight: 900;
}

.image-inspo-search div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.image-inspo-search input,
.image-inspo-search button {
    border-radius: 8px;
    border: 1px solid rgba(255, 250, 240, 0.55);
}

.image-inspo-search input {
    min-width: 0;
    padding: 10px;
    background: #fffdf8;
    color: var(--market-ink);
}

.image-inspo-search button {
    padding: 0 18px;
    background: #fffaf0;
    color: #5c3900;
    font-weight: 900;
}

.market-actions {
    margin-top: 18px;
}

.hot-deals-track {
    overflow: hidden;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    background: #fffdf8;
    box-shadow: var(--market-shadow);
}

.hot-deals-strip {
    display: flex;
    gap: 14px;
    width: max-content;
    padding: 14px;
    animation: hotDealSlide 34s linear infinite;
}

.hot-deals-track:hover .hot-deals-strip {
    animation-play-state: paused;
}

.hot-deal-card {
    display: grid;
    grid-template-columns: 108px 170px;
    gap: 10px;
    width: 292px;
    color: var(--market-ink);
    text-decoration: none;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    background: #fffaf0;
    overflow: hidden;
}

.hot-deal-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 108px;
    background: #f4ead8;
    color: #756b5e;
    font-weight: 800;
    overflow: hidden;
}

.hot-deal-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hot-deal-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding-right: 10px;
}

.hot-deal-copy strong {
    color: var(--market-ink);
    line-height: 1.2;
}

.hot-deal-copy small {
    margin-top: 7px;
    color: #a46400;
    font-weight: 900;
}

@keyframes hotDealSlide {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.marketplace-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 18px;
    margin-top: -18px;
    position: relative;
    z-index: 2;
}

.market-category-rail,
.market-promo,
.feedback-strip,
.market-stat,
.shop-filter-panel,
.results-toolbar,
.empty-market {
    background: #fffdf8;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    box-shadow: var(--market-shadow);
}

.market-category-rail,
.shop-filter-panel {
    padding: 16px;
}

.market-category-rail h2,
.shop-filter-panel h2 {
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--market-charcoal);
    margin-bottom: 12px;
}

.market-category-link,
.filter-link {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #4b4031;
    text-decoration: none;
    padding: 9px 10px;
    border-radius: 6px;
    font-weight: 700;
}

.market-category-link:hover,
.filter-link:hover,
.market-category-link.active,
.filter-link.active {
    background: var(--market-soft);
    color: #6a4300;
}

.market-promo {
    padding: 28px;
    min-height: 210px;
    background:
        linear-gradient(135deg, rgba(255, 253, 248, 0.95), rgba(255, 243, 213, 0.92)),
        linear-gradient(120deg, transparent 0%, rgba(216, 155, 29, 0.25) 100%);
}

.promo-label {
    display: inline-flex;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--market-ink);
    color: var(--market-gold-2);
    font-weight: 900;
    margin-bottom: 12px;
}

.market-promo h2 {
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    max-width: 720px;
    font-weight: 900;
}

.market-promo p {
    max-width: 620px;
    color: #6f6254;
}

.feedback-strip {
    padding: 18px;
}

.feedback-strip form {
    display: grid;
    grid-template-columns: 1.2fr auto auto minmax(180px, 1fr) auto;
    gap: 16px;
    align-items: end;
}

.feedback-strip h2 {
    font-size: 1.2rem;
    font-weight: 900;
    margin: 0;
}

.feedback-strip p {
    margin: 3px 0 0;
    color: #756b5e;
}

.star-rating span {
    color: #b8ad9c;
}

.star-rating label:hover span,
.star-rating label:hover ~ label span,
.star-rating label:has(input:checked) span,
.star-rating label:has(input:checked) ~ label span {
    color: var(--market-gold) !important;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 24px 0 14px;
}

.section-heading span,
.results-toolbar span {
    color: #8b681b;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.section-heading h2,
.results-toolbar h2 {
    margin: 0;
    font-weight: 900;
}

.image-match-note {
    margin: 4px 0 0;
    color: #756b5e;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

.image-match-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px;
    background: #fffdf8;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    box-shadow: var(--market-shadow);
}

.image-match-preview img {
    width: 74px;
    height: 74px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--market-line);
}

.image-match-preview strong,
.image-match-preview span {
    display: block;
}

.image-match-preview strong {
    color: var(--market-charcoal);
}

.image-match-preview span {
    color: #756b5e;
}

.section-heading a {
    color: #6a4300;
    font-weight: 900;
}

.market-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.market-product-card {
    background: #fffdf8;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(38, 28, 8, 0.08);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}

.market-product-card:hover {
    transform: translateY(-3px);
    border-color: rgba(216, 155, 29, 0.55);
    box-shadow: var(--market-shadow);
}

.product-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    background: #f4ead8;
    color: #7b705f;
    text-decoration: none;
    overflow: hidden;
}

.product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.22s;
}

.market-product-card:hover .product-media img {
    transform: scale(1.04);
}

.deal-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1d1a16;
    color: var(--market-gold-2);
    padding: 5px 8px;
    border-radius: 5px;
    font-size: 0.8rem;
}

.price-drop-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 58px;
    min-height: 38px;
    padding: 5px 8px 5px 12px;
    background: #f3262d;
    color: #fff;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%);
    font-size: 0.58rem;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    z-index: 3;
}

.price-drop-tag::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
}

.price-drop-tag small {
    display: block;
    color: #ffe2da;
    text-decoration: line-through;
}

.product-copy {
    padding: 12px;
}

.product-title {
    display: block;
    color: var(--market-ink);
    text-decoration: none;
    font-weight: 800;
    min-height: 42px;
}

.product-title:hover {
    color: #8b5a00;
}

.product-copy p {
    color: #756b5e;
    min-height: 38px;
    margin: 7px 0;
    font-size: 0.86rem;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 8px;
}

.product-price span {
    color: #a46400;
    font-size: 1.2rem;
    font-weight: 900;
}

.product-price small {
    color: #9c9286;
    text-decoration: line-through;
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.product-meta span {
    background: var(--market-soft);
    color: #684200;
    padding: 4px 7px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.74rem;
}

/* Small pin showing where the item physically is. Muted on purpose so it
   reads as provenance rather than competing with price and category. */
.product-meta span.product-pin {
    background: #fdecec;
    color: #a52834;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-meta span.product-pin i {
    margin-right: 4px;
}

.image-match-score {
    display: grid;
    gap: 2px;
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    background: #f7edd8;
    color: #5c3900;
}

.image-match-score span {
    font-weight: 900;
}

.image-match-score small {
    color: #756b5e;
}

.product-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.product-actions form {
    margin: 0;
}

.product-actions .btn {
    width: 100%;
}

.market-stat {
    padding: 20px;
}

.market-stat h2 {
    font-weight: 900;
    color: #9b6100;
}

.market-stat p {
    margin: 0;
    color: #756b5e;
}

.shop-head {
    padding: 28px 0;
}

.shop-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.shop-filter-panel {
    align-self: start;
    position: sticky;
    top: 82px;
}

.results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.results-toolbar form {
    min-width: 210px;
}

.shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.empty-market {
    text-align: center;
    padding: 42px;
}

.page-link {
    background: #fffdf8 !important;
    color: #7a4b00 !important;
    border-color: var(--market-line) !important;
}

.page-item.active .page-link {
    background: var(--market-gold) !important;
    border-color: var(--market-gold) !important;
    color: #241806 !important;
}

.admin-scroll-dropdown {
    max-height: min(72vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Nav drawer ----------
   #navbarNav is a Bootstrap responsive offcanvas (offcanvas-lg). Two jobs here:

   At >=992px Bootstrap stops treating it as a drawer, but .offcanvas-body stays a
   block element - so the two nav groups would stack vertically and me-auto would
   have nothing to push against. These rules restore the row layout that
   .navbar-collapse used to supply.

   Below 992px it is a real side sheet: fixed width, its own scroll, and the long
   admin menu forced inline so it scrolls with the drawer instead of opening a
   floating menu taller than the phone. */
@media (min-width: 992px) {
    .navbar .offcanvas-body {
        display: flex;
        align-items: center;
        flex-grow: 1;
        padding: 0;
        overflow: visible;
    }
}

@media (max-width: 991.98px) {
    #navbarNav.offcanvas-lg {
        width: 300px;
        max-width: 85vw;
    }
    #navbarNav .offcanvas-body {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    /* Static, not absolute: an absolutely positioned 30-item admin menu escapes
       the drawer and covers the page. Inline, it becomes a scrollable section. */
    #navbarNav .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0.25rem;
        border: 0;
        background-color: rgba(255, 255, 255, 0.06);
    }
    #navbarNav .navbar-nav {
        width: 100%;
        align-items: stretch !important;
    }
    #navbarNav .nav-link {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .admin-scroll-dropdown {
        max-height: 55vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---------- Service catalogue chips ----------
   Nineteen categories. Wrapped, they are five rows of buttons that push every
   listing below the fold on a phone; so they scroll sideways instead, and only
   below the tablet breakpoint - on a wide screen there is room to wrap and a
   horizontal scroller you cannot see the end of is worse. */
.service-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 767.98px) {
    .service-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 0.5rem;
        /* Bleed to the edges so the row visibly continues past the screen rather
           than looking like it simply ends at the container padding. */
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .service-chips > .btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }
    .service-chips::-webkit-scrollbar {
        height: 4px;
    }
    .service-chips::-webkit-scrollbar-thumb {
        background: rgba(201, 154, 43, 0.65);
        border-radius: 999px;
    }
}

.raffle-card {
    background: var(--bg-card);
    border: 1px solid var(--border-gold) !important;
    transition: transform 0.2s, box-shadow 0.2s;
}
.raffle-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gold-glow), var(--card-shadow);
}
.raffle-card .progress {
    background: rgba(0,0,0,0.3);
}

.admin-scroll-dropdown::-webkit-scrollbar {
    width: 8px;
}

.admin-scroll-dropdown::-webkit-scrollbar-thumb {
    background: rgba(201, 154, 43, 0.65);
    border-radius: 999px;
}

.support-chat-log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 12px;
    background: #f8f6ef;
    border: 1px solid var(--market-line);
    border-radius: 8px;
}

.support-bubble {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 8px;
    line-height: 1.35;
}

.support-bubble.bot {
    align-self: flex-start;
    background: #ffffff;
    border: 1px solid var(--market-line);
}

.support-bubble.user {
    align-self: flex-end;
    background: #1f4530;
    color: #fffdf8;
}

.scanner-card {
    position: relative;
    overflow: hidden;
}

.scanner-video {
    width: 100%;
    min-height: 320px;
    max-height: 62vh;
    object-fit: cover;
    background: #141414;
    border-radius: 8px;
}

.scanner-frame {
    position: absolute;
    inset: 96px 32px auto;
    height: 140px;
    border: 3px solid rgba(201, 154, 43, 0.9);
    border-radius: 8px;
    pointer-events: none;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.18);
}

.pos-terminal {
    border: 1px solid var(--market-line);
    border-radius: 8px;
    padding: 12px;
    background: #fffdf8;
}

.pos-pairing-box {
    border: 1px dashed rgba(201, 154, 43, 0.8);
    border-radius: 8px;
    padding: 12px;
    background: #fffaf0;
}

.pairing-code-card {
    min-width: 260px;
    padding: 8px;
    border: 1px solid var(--market-line);
    border-radius: 8px;
    background: #fff;
}

.pairing-qr {
    display: block;
    width: 220px;
    height: 220px;
    margin: 0 auto 6px;
}

.pos-wired-box {
    border: 1px solid rgba(31, 69, 48, 0.28);
    border-radius: 8px;
    padding: 12px;
    background: #f7fbf8;
}

.barcode-label-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}

.barcode-label {
    min-height: 150px;
    border: 1px solid #111;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    background: #fff;
    color: #111;
    break-inside: avoid;
}

.label-name {
    font-size: 0.92rem;
    min-height: 38px;
}

.label-price {
    font-size: 0.86rem;
    margin-bottom: 4px;
}

.label-barcode {
    width: 100%;
    height: 70px;
}

@media print {
    .navbar,
    .footer,
    footer,
    .no-print,
    .alert,
    script {
        display: none !important;
    }

    main {
        padding: 0 !important;
    }

    .barcode-label-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .barcode-label {
        border-radius: 0;
        box-shadow: none;
    }
}

@media (max-width: 992px) {
    .market-category-rail,
    .shop-filter-panel {
        position: static;
    }

    /* Both rails become narrow side columns rather than full-width blocks that
       push the products a screen-height down. */
    .marketplace-shell {
        grid-template-columns: minmax(0, 1fr) 112px;
        align-items: start;
    }

    .shop-layout {
        grid-template-columns: 132px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        margin-top: 14px;
    }

    .market-category-rail,
    .shop-filter-panel {
        max-height: 260px;
        overflow-y: auto;
        padding: 10px;
    }

    .market-category-rail h2,
    .shop-filter-panel h2 {
        font-size: 0.72rem;
        margin-bottom: 8px;
    }

    .market-category-link,
    .filter-link {
        font-size: 0.74rem;
        line-height: 1.15;
        padding: 7px 6px;
        gap: 5px;
    }

    .feedback-strip form {
        grid-template-columns: 1fr 1fr;
    }

    .feedback-text {
        grid-column: 1 / -1;
    }
}

/* Tablets, 768px to 991.98px.

   This band had no rules of its own: the phone block stops at 640px and the
   desktop layout starts at 992px, so an iPad in portrait inherited the ~992px
   rules and then let the auto-fill grids decide the column count on their own.
   That is where the inconsistency showed - .shop-grid (minmax 210px) fitted two
   columns at 768px and three by ~830px, while .market-product-grid (minmax 190px)
   fitted three the whole way, so the same card was a different size on the home
   page than in the shop. Pinned to three across for both, which is what the
   available width actually supports once the rail is subtracted.

   Placed after the max-width: 992px block on purpose: both match in this band and
   equal specificity means the later rule wins, which is how the rail widths below
   override the narrower ones set there. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .market-product-grid,
    .shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    /* A 190px-tall photo on a card roughly 195px wide reads as a square block.
       Shorter keeps the card proportioned and lifts the price into view. */
    .product-media {
        height: 165px;
    }

    /* The 992px block squeezes both rails to a phone width. A tablet has room for
       the full label, so the category names stop wrapping mid-word. */
    .shop-layout {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .marketplace-shell {
        grid-template-columns: minmax(0, 1fr) 140px;
    }

    .market-category-rail,
    .shop-filter-panel {
        max-height: 320px;
    }

    .market-category-link,
    .filter-link {
        font-size: 0.78rem;
        padding: 8px 8px;
    }

    /* product.html stacks into one column below 992px, so the main photo spans the
       full container: 4/3 of ~720px is 540px tall, and the existing 450px cap still
       leaves nothing but image on screen. Capped lower so the price, stock line and
       Add to Cart sit above the fold on a portrait tablet. */
    .product-main-image {
        max-height: 340px;
    }
}

@media (max-width: 640px) {
    .market-topbar,
    .results-toolbar {
        display: block;
    }

    .auth-hero-actions,
    .market-actions {
        margin-top: 14px;
    }

    .market-search {
        grid-template-columns: 1fr;
        border-radius: 8px;
    }

    .market-search button {
        padding: 12px;
    }

    .marketplace-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 92px;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .market-promo {
        min-height: 0;
        padding: 14px;
    }

    .market-promo h2 {
        font-size: 1.1rem;
    }

    .market-promo p {
        font-size: 0.82rem;
    }

    .market-category-rail {
        max-height: 220px;
        padding: 8px 6px;
    }

    /* Shop keeps its category rail on the left, squeezed to a thumb-width strip
       so the grid beside it still fits two products across. */
    .shop-layout {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 8px;
    }

    .shop-filter-panel {
        max-height: 320px;
        padding: 8px 5px;
    }

    .shop-filter-panel hr {
        margin: 8px 0;
    }

    .market-category-link,
    .filter-link {
        font-size: 0.68rem;
        padding: 6px 4px;
    }

    .market-category-link i {
        display: none;
    }

    /* Two products across on a phone instead of one image per row. */
    .market-product-grid,
    .shop-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .product-media {
        height: 132px;
    }

    .product-copy {
        padding: 8px;
    }

    .product-title {
        font-size: 0.82rem;
        min-height: 34px;
    }

    /* Blurb and location pills are the first things to go at this width - the
       photo, name, and price are what a shopper scans. */
    .product-copy p,
    .product-meta {
        display: none;
    }

    .product-price span {
        font-size: 0.95rem;
    }

    .product-price small {
        font-size: 0.7rem;
    }

    /* Stacked, not side by side: two buttons across a half-width card leaves
       each one too narrow to read. */
    .product-actions {
        grid-template-columns: 1fr;
        margin-top: 8px;
        gap: 6px;
    }

    .product-actions .btn {
        padding: 6px 4px;
        font-size: 0.74rem;
    }

    .image-inspo-search div {
        grid-template-columns: 1fr;
    }

    .image-inspo-search button {
        padding: 12px;
    }

    /* Feedback block: both star rows sit side by side on one line and the stars
       shrink, so the panel stops eating half the phone screen. */
    .feedback-strip {
        padding: 12px;
    }

    .feedback-strip form {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        align-items: start;
    }

    .feedback-strip form > div:first-of-type,
    .feedback-text {
        grid-column: 1 / -1;
    }

    .feedback-strip h2 {
        font-size: 1rem;
    }

    .feedback-strip p {
        display: none;
    }

    .feedback-strip .form-label {
        margin-bottom: 2px;
        font-size: 0.72rem;
    }

    .feedback-strip .star-rating span {
        width: 1.62rem;
        height: 1.62rem;
        font-size: 1.35rem;
    }

    .feedback-strip textarea.form-control {
        font-size: 0.85rem;
    }

    .feedback-strip .btn {
        grid-column: 1 / -1;
    }

    .hot-deal-card {
        grid-template-columns: 92px 150px;
        width: 256px;
    }

    .hot-deal-media {
        height: 92px;
    }

    .site-logo {
        height: 30px;
        max-width: 112px;
    }
}

/* ─── Button feedback ────────────────────────────────────
   Restrained on purpose: a 1px press, a 1px hover lift, and nothing that
   bounces, scales or springs. Only `transform` is animated - it is composited
   off the main thread, so unlike animating width, height, top or margin it
   cannot force a layout pass on every frame on a mid-range phone.

   The shorthand below re-lists background, border-color, box-shadow and color
   because this rule sits after the individual .btn-gold / .btn-primary rules
   and `transition` is a shorthand: it replaces theirs wholesale rather than
   adding to it, so naming them here is what preserves the hover fades those
   rules were written for. */
.btn {
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, color 0.18s ease,
                transform 0.12s ease;
}

/* Guarded to devices that can actually hover. A phone has no hover state to
   leave: the lift gets applied on tap and then stays applied, so the button sits
   raised until something else is touched - which reads as a stuck button rather
   than as feedback. The colour and shadow transitions above are left unguarded
   because they are driven by :active and :focus, which phones do have. */
@media (hover: hover) and (pointer: fine) {
    .btn:hover {
        transform: translateY(-1px);
    }
}

.btn:active {
    /* Settles just below the resting position, and faster than the hover, so a
       tap reads as a press instead of as the hover state flickering. */
    transform: translateY(1px);
    transition-duration: 0.06s;
}

/* A disabled button must not move under the finger - appearing to respond is
   exactly the wrong feedback when the press does nothing. */
.btn:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {
    transform: none;
}

/* Honour a stated preference for less motion.
   Scoped to buttons rather than the global `*, *::before, *::after` reset that
   is usually recommended here. The broader version is the fuller fix, but it
   would also flatten the transitions Bootstrap's offcanvas, collapse and
   carousel drive off transitionend, and that includes the navigation drawer -
   so it is not something to ship without having run it. */
@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: background 0.18s ease, border-color 0.18s ease,
                    box-shadow 0.18s ease, color 0.18s ease;
    }

    .btn:hover,
    .btn:active {
        transform: none;
    }
}