/* =====================================================
   Sajhya Marketplace -- Storefront redesign
   Deliberately isolated from custom.css: every rule here is scoped
   under .store, and nothing on this page uses the old .mkt-* classes,
   so this file never has to fight the ~2000 lines of shared site CSS.
   Loaded only on marketplace.html via {% block extra_css %}.
   ===================================================== */

/* base.html always renders an empty Bootstrap .container.mt-3 above <main>
   for Django messages; with no message its margin still exposes custom.css's
   global purple body gradient as a sliver above this page's white header.
   The old hero's own gradient used to mask that seam -- this one needs it
   overridden explicitly. Safe to set unscoped since this file only loads
   on this page. */
html, body {
    background: #fff !important;
}

/* the actual source of the gap: base.html's empty Bootstrap
   .container.mt-3 wrapper for Django messages still carries its
   margin-top even with nothing inside it */
body > .container.mt-3:empty {
    margin: 0 !important;
}

.store {
    --store-primary: #2f5fdb;
    --store-primary-dark: #1f47b8;
    --store-primary-soft: #eaf0fe;
    --store-ink: #14181f;
    --store-muted: #6b7280;
    --store-border: #e7e9ee;
    --store-surface: #f6f7f9;
    --store-radius: 16px;

    background: #fff;
    color: var(--store-ink);
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.store * {
    box-sizing: border-box;
}

.store a {
    text-decoration: none;
    color: inherit;
}

.store img {
    max-width: 100%;
    display: block;
}

.store-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* ---------- Header ---------- */

.store-header {
    border-bottom: 1px solid var(--store-border);
    padding: 1.1rem 0;
}

.store-header-row {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.store-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--store-ink);
    flex-shrink: 0;
}

.store-logo img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.store-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    flex-shrink: 0;
}

.store-nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--store-muted);
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.store-nav a:hover {
    color: var(--store-ink);
}

.store-nav a.is-active {
    color: var(--store-ink);
    font-weight: 600;
    border-bottom-color: var(--store-primary);
}

.store-search {
    flex: 1;
    min-width: 0; /* flex items don't shrink below their content's intrinsic
        width by default -- without this the <input> forces the whole
        header row to overflow instead of wrapping/shrinking on narrow
        screens */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--store-surface);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.65rem 1.1rem;
    max-width: 380px;
    margin-left: auto;
}

.store-search:focus-within {
    border-color: var(--store-primary);
    background: #fff;
}

.store-search svg {
    width: 18px;
    height: 18px;
    color: var(--store-muted);
    flex-shrink: 0;
}

.store-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.92rem;
    font-family: inherit;
    width: 100%;
    color: var(--store-ink);
}

.store-search input::placeholder {
    color: #9aa0ab;
}

.store-header-icons {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-shrink: 0;
}

.store-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--store-ink);
    transition: background 0.15s ease;
}

.store-icon-btn:hover {
    background: var(--store-surface);
}

.store-icon-btn svg {
    width: 21px;
    height: 21px;
}

.store-icon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--store-primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ---------- Category strip ---------- */

.store-categories {
    padding: 2rem 0 0.5rem;
}

.store-cat-row {
    display: flex;
    gap: 1.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
}

.store-cat-row::-webkit-scrollbar {
    display: none;
}

.store-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    flex: 0 0 auto;
    width: 92px;
    text-align: center;
}

.store-cat-circle {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--store-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 1.9rem;
    border: 1px solid var(--store-border);
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.store-cat-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-cat:hover .store-cat-circle {
    border-color: var(--store-primary);
    transform: translateY(-2px);
}

.store-cat.is-active .store-cat-circle {
    border-color: var(--store-primary);
    background: var(--store-primary-soft);
}

.store-cat span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--store-ink);
    line-height: 1.25;
}

/* ---------- Section header ---------- */

.store-section {
    padding: 3rem 0;
}

.store-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.store-section-head h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--store-ink);
}

.store-section-head .store-sub {
    font-size: 0.88rem;
    color: var(--store-muted);
    font-weight: 400;
    margin-left: 0.6rem;
}

.store-condition-section {
    background: var(--store-primary-soft);
    border-radius: var(--store-radius);
    padding: 1.75rem 2rem 2rem;
}

.store-condition-section .store-section-head .store-sub {
    display: block;
    margin-left: 0;
    margin-top: 0.2rem;
}

.store-condition-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    background: var(--store-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.store-view-all {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--store-primary);
}

.store-view-all:hover {
    text-decoration: underline;
}

/* ---------- Product grid ---------- */

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

.store-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.store-card:hover {
    box-shadow: 0 16px 32px rgba(20, 24, 31, 0.09);
    transform: translateY(-3px);
}

.store-card-img {
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.store-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.store-card-img .placeholder {
    font-size: 2.2rem;
    opacity: 0.35;
}

.store-card-body {
    padding: 0.9rem 1rem 1.1rem;
}

.store-card-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--store-ink);
    line-height: 1.3;
    margin: 0 0 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.1em;
}

.store-card-price {
    /* Distinct from the name above (was the same --store-ink as the
       title, so nothing on the card actually stood out) -- price gets
       the accent color so it's still the thing a shopper's eye catches
       first, without needing to be physically bigger text to do it. */
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--store-primary);
}

.store-empty {
    padding: 3rem 0;
    text-align: center;
    color: var(--store-muted);
}

.store-scroll-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    margin-top: 1.5rem;
}

.store-loading-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 3px solid var(--store-border);
    border-top-color: var(--store-primary);
    opacity: 0;
    animation: store-spin 0.7s linear infinite;
    transition: opacity 0.15s ease;
}

.store-scroll-sentinel.is-loading .store-loading-spinner {
    opacity: 1;
}

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

/* ---------- Trust badges ---------- */

.store-trust {
    border-top: 1px solid var(--store-border);
    padding: 2.75rem 0;
}

.store-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.store-trust-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.store-trust-item svg {
    width: 30px;
    height: 30px;
    color: var(--store-primary);
    flex-shrink: 0;
}

.store-trust-item strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--store-ink);
}

.store-trust-item span {
    font-size: 0.82rem;
    color: var(--store-muted);
}

/* ---------- Breadcrumb ---------- */

.store-breadcrumb {
    padding: 1.5rem 0 0;
    font-size: 0.85rem;
    color: var(--store-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.store-breadcrumb a {
    color: var(--store-muted);
}

.store-breadcrumb a:hover {
    color: var(--store-primary);
}

.store-breadcrumb span:last-child {
    color: var(--store-ink);
    font-weight: 600;
}

/* ---------- Product detail ---------- */

.store-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    padding: 2rem 0 1rem;
    align-items: start;
}

.store-detail-img {
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
}

.store-detail-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1.5rem;
}

.store-detail-img .placeholder {
    text-align: center;
    color: var(--store-muted);
}

.store-detail-img .placeholder span {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

.store-detail-cat {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--store-primary);
    background: var(--store-primary-soft);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.store-detail-title {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--store-ink);
    margin: 0 0 0.9rem;
}

.store-detail-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--store-ink);
    margin-bottom: 1rem;
}

.store-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1.5rem;
}

.store-stock.in-stock {
    background: #e8f7ef;
    color: #16794a;
}

.store-stock.out-stock {
    background: #fdeaea;
    color: #b3261e;
}

.store-detail-desc {
    border-top: 1px solid var(--store-border);
    padding-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.store-detail-desc h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--store-ink);
    margin-bottom: 0.5rem;
}

.store-detail-desc p {
    font-size: 0.92rem;
    color: var(--store-muted);
    line-height: 1.7;
}

.store-detail-actions {
    display: flex;
    gap: 0.9rem;
}

.store-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--store-primary);
    color: #fff;
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
}

.store-btn-primary:hover {
    background: var(--store-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.store-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--store-ink);
    font-weight: 600;
    font-size: 0.98rem;
    padding: 0.9rem 1.8rem;
    border-radius: 999px;
    border: 1px solid var(--store-border);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.store-btn-outline:hover {
    border-color: var(--store-primary);
    background: var(--store-primary-soft);
    color: var(--store-primary);
}

.store-btn-full {
    width: 100%;
}

.store-out-of-stock-msg {
    color: var(--store-muted);
    font-size: 0.92rem;
}

/* ---------- Cart & Checkout ---------- */

.store-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    padding: 2rem 0 3rem;
    align-items: start;
}

.store-heading {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--store-ink);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.store-count-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--store-muted);
    background: var(--store-surface);
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
}

.store-cart-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.85rem;
}

.store-cart-icon-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: 10px;
    padding: 4px;
    flex-shrink: 0;
}

.store-cart-icon {
    width: 72px;
    height: 72px;
    font-size: 1.8rem;
    background: var(--store-surface);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.store-cart-item-info {
    flex: 1;
    min-width: 0;
}

.store-cart-item-name {
    font-weight: 700;
    color: var(--store-ink);
    margin-bottom: 2px;
}

.store-cart-item-meta {
    font-size: 0.8rem;
    color: var(--store-muted);
    margin-bottom: 2px;
}

.store-cart-item-price {
    font-size: 0.85rem;
    color: var(--store-primary);
    font-weight: 600;
}

.store-qty-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--store-surface);
    border-radius: 999px;
    padding: 0.3rem 0.5rem;
}

.store-qty-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #fff;
    font-size: 1rem;
    font-weight: 700;
    color: var(--store-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-qty-val {
    font-weight: 700;
    min-width: 1.2rem;
    text-align: center;
}

.store-cart-line-total {
    font-weight: 700;
    color: var(--store-ink);
    min-width: 90px;
    text-align: right;
}

.store-remove-btn {
    color: var(--store-muted);
    font-size: 1.1rem;
    padding: 0.3rem;
    flex-shrink: 0;
}

.store-remove-btn:hover {
    color: #b3261e;
}

.store-summary {
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    padding: 1.5rem;
    position: sticky;
    top: 1.5rem;
}

.store-summary-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--store-ink);
}

.store-summary-row, .store-summary-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--store-muted);
    margin-bottom: 0.75rem;
}

.store-qty-tag {
    color: var(--store-muted);
    font-size: 0.8rem;
}

.store-summary-divider {
    border-top: 1px solid var(--store-border);
    margin: 0.75rem 0;
}

.store-summary-total {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--store-ink);
}

.store-summary-total span:last-child {
    color: var(--store-primary);
}

.store-free-delivery {
    color: var(--store-primary) !important;
    font-weight: 600;
}

.store-checkout-note {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--store-border);
    font-size: 0.82rem;
    color: var(--store-muted);
    line-height: 1.6;
}

/* Checkout form */

.store-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.store-form-group {
    margin-bottom: 1.1rem;
}

.store-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--store-ink);
    margin-bottom: 0.4rem;
}

.store-required {
    color: #b3261e;
}

.store-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--store-border);
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: inherit;
    background: #fff;
    color: var(--store-ink);
}

.store-input:focus {
    outline: none;
    border-color: var(--store-primary);
}

.store-textarea {
    resize: vertical;
}

/* ---------- Order success ---------- */

.store-success {
    max-width: 560px;
    margin: 2.5rem auto;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    padding: 2.5rem 2rem;
    text-align: center;
}

.store-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #e8f7ef;
    color: #16794a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.store-success-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--store-ink);
    margin-bottom: 0.5rem;
}

.store-success-sub {
    font-size: 0.92rem;
    color: var(--store-muted);
    margin-bottom: 1.75rem;
}

.store-order-details {
    text-align: left;
    background: var(--store-surface);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.store-order-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.store-order-detail-row:last-child {
    border-bottom: none;
}

.store-detail-label {
    color: var(--store-muted);
}

.store-detail-val {
    color: var(--store-ink);
    font-weight: 600;
    text-align: right;
}

.store-order-num {
    color: var(--store-primary);
}

.store-status-badge {
    display: inline-block;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--store-primary-soft);
    color: var(--store-primary);
}

.store-ordered-items {
    text-align: left;
    margin-bottom: 1.75rem;
}

.store-ordered-items h3 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--store-ink);
}

.store-ordered-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--store-muted);
    padding: 0.4rem 0;
}

.store-contact-note {
    font-size: 0.82rem;
    color: var(--store-muted);
    margin-top: 1.5rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 992px) {
    .store-wrap {
        padding: 0 1.75rem;
    }

    .store-nav {
        display: none;
    }

    .store-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .store-trust-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .store-detail {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .store-detail-img {
        /* was position:static -- dropped its containing-block context for
           absolutely-positioned children (the Rx badge), which then
           anchored to the nearest positioned ancestor instead and floated
           up over the header. relative keeps the sticky behavior off
           (mobile doesn't need it) without losing that context. */
        position: relative;
        max-width: 420px;
        margin: 0 auto;
    }

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

    .store-summary {
        position: static;
    }
}

@media (max-width: 560px) {
    .store-header-row {
        flex-wrap: wrap;
    }

    .store-search {
        order: 3;
        /* flex-basis (set to 0% by the base rule's `flex: 1`) wins over a
           plain `width` for sizing a flex item -- `width: 100%` alone never
           actually took effect, so the search bar was staying squeezed down
           to ~content-size next to the logo/icons instead of wrapping onto
           its own full-width row. flex-basis: 100% forces that wrap. */
        flex: 1 1 100%;
        max-width: none;
        margin-left: 0;
    }

    .store-header-icons {
        margin-left: auto;
    }

    .store-cat {
        width: 78px;
    }

    .store-cat-circle {
        width: 62px;
        height: 62px;
        font-size: 1.5rem;
    }

    .store-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.9rem;
    }

    .store-card-body {
        padding: 0.7rem 0.75rem 0.9rem;
    }

    .store-trust-row {
        grid-template-columns: 1fr;
    }

    .store-detail-title {
        font-size: 1.5rem;
    }

    .store-detail-price {
        font-size: 1.4rem;
    }

    .store-detail-actions {
        flex-direction: column;
    }

    .store-form-row {
        grid-template-columns: 1fr;
    }

    .store-cart-row {
        flex-wrap: wrap;
    }

    .store-cart-icon-img, .store-cart-icon {
        width: 56px;
        height: 56px;
    }

    .store-cart-item-info {
        width: calc(100% - 72px);
    }

    .store-qty-form {
        margin-left: 72px;
    }

    .store-cart-line-total {
        margin-left: auto;
        min-width: auto;
    }

    .store-success {
        margin: 1.5rem auto;
        padding: 2rem 1.25rem;
    }

    .store-order-detail-row {
        font-size: 0.85rem;
    }
}

/* ---------- Careers / Vacancies ----------
   Deliberately reuses .store-layout (2-col + 360px sticky sidebar) and
   .store-summary (sticky white card) for the vacancy detail + apply-form
   layout rather than defining parallel classes -- only genuinely new
   shapes (the vacancy list row and its meta/requirements bits) get their
   own rules below. */

.vacancy-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vacancy-card {
    display: block;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    padding: 1.5rem 1.75rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.vacancy-card:hover {
    border-color: var(--store-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.vacancy-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--store-ink);
    margin-bottom: 0.3rem;
}

.vacancy-org {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--store-primary);
    margin-bottom: 1rem;
}

.vacancy-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vacancy-tag {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--store-muted);
    background: var(--store-surface);
    border: 1px solid var(--store-border);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
}

.vacancy-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--store-border);
}

.vacancy-closing {
    font-size: 0.8rem;
    color: var(--store-muted);
}

.vacancy-apply-cta {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--store-primary);
    white-space: nowrap;
}

@media (max-width: 560px) {
    /* plain colored text read as non-interactive on mobile -- an actual
       filled pill makes it obviously tappable */
    .vacancy-apply-cta {
        background: var(--store-primary);
        color: #fff;
        padding: 0.55rem 1.05rem;
        border-radius: 999px;
        font-size: 0.82rem;
    }
}

.vacancy-requirements {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vacancy-requirements li {
    font-size: 0.92rem;
    color: var(--store-muted);
    line-height: 1.6;
    padding-left: 1.3rem;
    position: relative;
}

.vacancy-requirements li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--store-primary);
    font-weight: 700;
}

/* ---------- Pharmacy ----------
   Everything else on Pharmacy's pages reuses the plain .store-* vocabulary
   above (same grid/card/detail/cart/checkout classes as Marketplace) --
   these are the only pharmacy-specific additions: the prescription-required
   badge and note. */

.store-rx-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background: #fef3c7;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.store-rx-note {
    font-size: 0.85rem;
    color: #b45309;
    background: #fef3c7;
    border-radius: 10px;
    padding: 0.6rem 0.9rem;
    margin: 0.75rem 0;
}

/* ---------- Lab Tests ----------
   No product photos here (tests/panels aren't physical goods) -- cards are
   plain text, and the detail pages drop .store-detail's image column
   entirely in favor of a single readable content column.

   Multi-select happens with plain checkboxes directly on this grid (like
   exercise_app's "Prescribe Selected Exercises" picker) rather than a
   product-style cart -- .store-lab-selectable/-check below turn a card into
   a checkbox target while .store-lab-card-link keeps its title/body
   clickable through to the detail page for more info. */

.store-lab-panel-desc {
    font-size: 0.85rem;
    color: var(--store-muted);
    line-height: 1.5;
    margin: 0.4rem 0 0.9rem;
}

.store-lab-selectable {
    position: relative;
}

/* Combined selector, not just .store-lab-selectable alone -- .store-lab-card's
   own `padding` shorthand (defined further down) resets padding-left too,
   and since both selectors are equally specific, source order alone would
   decide the winner. Matching .store-lab-card.store-lab-selectable here
   keeps this override correct regardless of where either rule sits. */
.store-lab-card.store-lab-selectable {
    padding-left: 2.75rem;
}

.store-lab-check {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    cursor: pointer;
}

.store-lab-check input {
    position: absolute;
    opacity: 0;
    width: 1.3rem;
    height: 1.3rem;
    margin: 0;
    cursor: pointer;
}

.store-lab-check span {
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    border: 1.5px solid var(--store-border);
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.store-lab-check span::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.store-lab-check input:checked + span {
    background: var(--store-primary);
    border-color: var(--store-primary);
}

.store-lab-check input:checked + span::after {
    opacity: 1;
}

.store-lab-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.vacancy-card.store-lab-selectable {
    padding-top: 1.5rem;
    padding-left: 3.25rem;
}

.vacancy-card.store-lab-selectable .store-lab-check {
    top: 1.5rem;
    left: 1.75rem;
}

.store-lab-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.store-lab-card {
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    padding: 1.1rem 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.store-lab-card:has(input:checked),
.vacancy-card.store-lab-selectable:has(input:checked) {
    border-color: var(--store-primary);
    box-shadow: 0 8px 24px rgba(47, 95, 219, 0.1);
}

.store-lab-card:hover {
    border-color: var(--store-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.store-lab-card-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--store-ink);
    margin-bottom: 0.3rem;
    line-height: 1.35;
}

.store-lab-card-meta {
    font-size: 0.75rem;
    color: var(--store-muted);
    margin-bottom: 0.7rem;
}

.store-lab-card-price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--store-ink);
}

.store-lab-single-col {
    max-width: 640px;
    padding: 2rem 0 3rem;
}

.store-lab-selected-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.store-lab-selected-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--store-ink);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--store-border);
}

.store-lab-sticky-bar {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--store-ink);
    color: #fff;
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
}

.store-lab-sticky-bar.is-visible {
    display: flex;
}

.store-lab-sticky-cta {
    background: var(--store-primary);
    color: #fff;
    border: none;
    font-family: inherit;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
}

/* Request popup -- #request is the plain in-page section above by default
   (no JS needed to reach or submit it). This class, toggled by "Review &
   Request", promotes that same section into a full-screen overlay instead
   of scrolling down to it -- an ID selector so it wins over .store-section/
   .store-summary's own rules regardless of source order. */
#request.store-lab-modal-open {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    padding: 3rem 1rem;
    overflow-y: auto;
}

#request.store-lab-modal-open .store-summary {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.store-lab-modal-close {
    display: none;
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: var(--store-border);
    color: var(--store-muted);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
}

#request.store-lab-modal-open .store-lab-modal-close {
    display: block;
}

.store-lab-modal-close:hover {
    color: var(--store-ink);
}

body.store-lab-modal-lock {
    overflow: hidden;
}

@media (max-width: 992px) {
    .store-lab-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .store-lab-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .store-lab-sticky-bar {
        padding: 0.8rem 1.25rem;
        font-size: 0.82rem;
    }

    #request.store-lab-modal-open {
        padding: 1.25rem 0.75rem;
    }
}

.store-lab-savings {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #047857;
    background: #ecfdf5;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.store-lab-savings-inline {
    display: inline-block;
    margin-left: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #047857;
    vertical-align: middle;
}

.store-lab-meta {
    border-top: 1px solid var(--store-border);
    padding-top: 1.25rem;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.store-lab-meta div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.88rem;
}

.store-lab-meta strong {
    color: var(--store-ink);
    flex-shrink: 0;
}

.store-lab-meta span {
    color: var(--store-muted);
    text-align: right;
}

.store-lab-category {
    margin-bottom: 2rem;
}

.store-lab-category-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--store-ink);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--store-border);
}

/* ---------- Donate ---------- */

.store-donate-hero {
    background: linear-gradient(135deg, #dc2255 0%, #c2740b 100%);
    padding: 3.5rem 0;
    color: #fff;
    text-align: center;
}

.store-donate-hero-inner {
    max-width: 720px;
}

.store-donate-hero h1 {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.store-donate-hero p {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.95;
    margin-bottom: 1.75rem;
}

/* Qualified with the parent, not just .store-donate-hero-cta alone -- .store
   a { color: inherit } (in the base header/nav rules) is a class+type
   selector, more specific than a single class, and would otherwise win and
   inherit the hero's own white text color regardless of source order. */
.store-donate-hero .store-donate-hero-cta {
    display: inline-block;
    background: #fff;
    color: #dc2255;
    font-weight: 700;
    padding: 0.85rem 2rem;
    font-size: 1rem;
}

.store-donate-hero .store-donate-hero-cta:hover {
    background: #fff0f4;
}

.store-donate-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.store-donate-card {
    position: relative;
    display: block;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--store-border);
    border-radius: var(--store-radius);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.store-donate-card input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.store-donate-card:hover {
    border-color: var(--store-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.store-donate-card:has(input:checked) {
    border-color: #dc2255;
    box-shadow: 0 8px 24px rgba(220, 34, 85, 0.15);
}

.store-donate-card-img {
    height: 130px;
    background: var(--store-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.store-donate-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-donate-card-placeholder {
    font-size: 2.5rem;
    opacity: 0.35;
}

.store-donate-check {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--store-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.store-donate-check::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.store-donate-card input:checked ~ .store-donate-check {
    background: #dc2255;
    border-color: #dc2255;
}

.store-donate-card input:checked ~ .store-donate-check::after {
    opacity: 1;
}

.store-donate-card-body {
    padding: 0.9rem 1rem 1.1rem;
}

.store-donate-card-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--store-ink);
    margin-bottom: 0.25rem;
}

.store-donate-card-desc {
    font-size: 0.78rem;
    color: var(--store-muted);
    line-height: 1.4;
}

@media (max-width: 992px) {
    .store-donate-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 560px) {
    .store-donate-hero {
        padding: 2.5rem 0;
    }

    .store-donate-hero h1 {
        font-size: 1.5rem;
    }

    .store-donate-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

.store-lab-line-price {
    float: right;
    color: var(--store-ink);
    font-weight: 600;
}