/* ============================================================
   TOP END LIQUOR — Storefront Page Styles
   ============================================================ */

/* ================ HOMEPAGE ================ */

/* ---- Hero Carousel ---- */
.hero-carousel {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-2xl);
    box-shadow: var(--shadow-md);
}

.hero-slides {
    position: relative;
    height: 420px;
}

/* Inactive slides were hidden with opacity alone. An opacity-0 element is
   still in the tab order, so keyboard users tabbed from the header into two
   or three invisible "Shop now" links before reaching the page — and those
   links are inside a container marked aria-hidden="true", which is an ARIA
   violation in itself. visibility:hidden removes them from the tab order and
   from the accessibility tree while still allowing the fade. */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out, visibility 0s linear 0s;
    z-index: 2;
}

.hero-slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.35) 50%,
        rgba(0, 0, 0, 0.15) 100%
    );
    display: flex;
    align-items: center;
    padding: var(--space-2xl) var(--space-3xl);
}

.hero-content {
    max-width: 520px;
    color: #ffffff;
}

.hero-logo {
    height: 90px;
    object-fit: contain;
    margin-bottom: var(--space-lg);
    filter: brightness(1.1);
}

.hero-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.hero-subtitle {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: var(--space-xl);
    opacity: 0.9;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary-green);
    /* White on #79C142 is 2.21:1 — see --on-primary. */
    color: var(--on-primary);
    font-weight: 700;
    padding: 0.8rem 2rem;
    min-height: 48px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    transition: all var(--transition-bounce);
    box-shadow: 0 4px 15px rgba(121, 193, 66, 0.4);
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(121, 193, 66, 0.5);
    color: var(--on-primary);
}

/* Hero Navigation */
.hero-nav {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.45);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
    position: relative;
}

/* The dots are 10px tall — they are the carousel's only position control,
   so they need a real hit area without becoming visually heavier. */
.hero-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.hero-dot.active {
    background: #ffffff;
    width: 28px;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* Was 40px — under the touch minimum on the tablet widths that still
       show the arrows. */
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.hero-arrow:hover {
    background: rgba(255, 255, 255, 0.35);
}

.hero-arrow.prev {
    left: var(--space-lg);
}

.hero-arrow.next {
    right: var(--space-lg);
}

/* ---- Categories Section ---- */
.categories-section {
    margin-bottom: var(--space-2xl);
}

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
    gap: var(--space-lg);
    text-align: center;
}

.cat-item {
    cursor: pointer;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.cat-icon-wrap {
    width: 68px;
    height: 68px;
    background-color: var(--bg-secondary);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.cat-item:hover .cat-icon-wrap,
.cat-item.active .cat-icon-wrap {
    border-color: var(--primary-green);
    background-color: var(--primary-green);
    box-shadow: 0 6px 16px rgba(121, 193, 66, 0.3);
    transform: translateY(-2px);
}

.cat-icon-wrap i {
    font-size: 1.5rem;
    color: var(--dark-green);
    transition: color var(--transition-fast);
}

.cat-item:hover .cat-icon-wrap i,
.cat-item.active .cat-icon-wrap i {
    color: var(--on-primary);
}

.cat-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
}

/* ---- Shop Layout (sidebar + products) ---- */
.shop-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

/* ---- Filter Sidebar ---- */
.filter-sidebar {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    height: fit-content;
    position: sticky;
    top: 80px;
}

.filter-sec {
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
    padding-bottom: var(--space-md);
}

.filter-sec:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.filter-sec-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-item a {
    font-size: 0.88rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    padding: 3px 0;
    transition: color var(--transition-fast);
}

.filter-item a:hover,
.filter-item.active a {
    color: var(--dark-green);
}

.filter-item a i {
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.filter-item a:hover i,
.filter-item.active a i {
    opacity: 1;
}

/* ---- Product Grid ---- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-lg);
}

/* The card had padding: 1rem AND an inner wrapper carrying another
   0.9rem/1rem in a style attribute, so the text block sat on ~2rem of
   padding while the image sat on 1rem — the image looked inset and the
   copy looked cramped against a card that was wider than it needed to be.
   Padding now belongs to one element. */
.product-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0 0.9rem 0.9rem;
}

.product-image-wrap {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    aspect-ratio: 1 / 1;
    width: 100%;
    margin-bottom: 0.85rem;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-base);
}

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

.product-image-wrap .placeholder-icon {
    font-size: 2.5rem;
    color: var(--primary-green);
    opacity: 0.5;
}

.product-badge {
    position: absolute;
    top: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 2;
}

.product-badge.featured {
    left: 8px;
    background-color: var(--primary-green);
    color: var(--on-primary);
}

.product-badge.sale {
    right: 8px;
    background-color: var(--accent-red);
    color: #ffffff;
}

.product-brand {
    font-size: 0.72rem;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 0.2rem;
}

.product-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.5rem;
    line-height: 1.3;
}

.product-specs {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
    display: flex;
    gap: 0.75rem;
    font-weight: 500;
}

.product-specs i {
    color: var(--dark-green);
    font-size: 0.7rem;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
    border-top: 1px solid var(--border-light);
    padding-top: 0.7rem;
}

.product-price-group {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The card's add control was a 36px green circle containing a bare "+".
   Nothing on it said "bag", the disabled state was the same circle at 55%
   opacity, and it was under the touch minimum. It is now a labelled button
   that states what it does and what state the line is in. */
.product-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 0.9rem;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary-green);
    color: var(--on-primary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.product-add:hover {
    background: var(--primary-green-hover);
    transform: translateY(-1px);
}

.product-add[disabled] {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

/* Below 480 two cards share the row; the label would wrap, so the button
   collapses to a square and the visible label is dropped — the accessible
   name on the button still carries the product. */
@media (max-width: 480px) {
    .product-add { padding: 0 0.7rem; }
    .product-add .product-add-label { display: none; }
    .product-add[disabled] .product-add-label { display: inline; font-size: 0.72rem; }
}

/* ---- Featured Products Horizontal Scroll ---- */
.featured-scroll {
    display: flex;
    gap: var(--space-lg);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.featured-scroll::-webkit-scrollbar {
    height: 4px;
}

.featured-scroll > .card-premium {
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* ---- Trust / Why Choose Us Section ---- */
.trust-section {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

/* The homepage renders FOUR trust items into what was a hard 3-column grid,
   so the fourth ("A licensed local store") dropped onto its own row and sat
   alone against two empty cells — the most visible layout defect on the
   landing page. auto-fit lets the row size itself to the content it is
   actually given, here and on the About page which reuses the class. */
.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-xl);
}

.trust-item {
    text-align: center;
}

/* #79C142 on #e8f5e0 is 1.95:1 — the icons were very nearly invisible
   against their own tint. Dark green on the same family is 4.63:1. */
.trust-icon-box {
    width: 50px;
    height: 50px;
    background-color: var(--dark-green-light);
    border-radius: var(--radius-md);
    margin: 0 auto var(--space-md);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--dark-green);
    font-size: 1.2rem;
}

/* The About page reuses .trust-item but left-aligns it and its icon; that
   was being done with three style attributes per item. */
.trust-item.align-start { text-align: left; }
.trust-item.align-start .trust-icon-box { margin: 0 0 var(--space-md); }

.trust-item h4 {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}

.trust-item p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ---- Testimonial ---- */
.testimonial-sec {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.test-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
    max-width: 650px;
    margin: 0 auto;
}

.test-text {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    color: var(--text-main);
}

/* ---- Newsletter ---- */
.newsletter-sec {
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-hover));
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    /* White on the green gradient is 2.21:1 at the light end. This block is
       a whole panel of copy, not a single label. */
    color: var(--on-primary);
    margin-bottom: var(--space-xl);
}

.newsletter-form {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
    gap: 0.5rem;
}

.newsletter-input {
    flex: 1;
    background-color: #ffffff;
    color: var(--text-main);
    border-radius: var(--radius-md);
    padding: 0.7rem 1.15rem;
    font-size: 0.9rem;
    border: none;
}

/* ================ PRODUCT DETAIL ================ */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.product-detail-image {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.product-detail-image img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* ================ CART ================ */
.cart-item-card {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg);
    align-items: center;
}

.cart-item-image {
    width: 80px;
    height: 80px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Was 34px. These are the controls a customer taps most on the cart page
   and they sit 8px apart, so an inaccurate tap changed the wrong line. */
.qty-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: all var(--transition-fast);
}

.qty-btn:hover:not(:disabled) {
    background: var(--primary-green);
    color: var(--on-primary);
}

/* A disabled stepper previously looked identical to an enabled one, so
   "you already have the maximum" read as "the button is broken". */
.qty-btn:disabled {
    color: var(--text-light);
    cursor: not-allowed;
    opacity: 0.6;
}

.qty-value {
    min-width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ================ AUTH PAGES ================ */
.auth-container {
    max-width: 440px;
    margin: var(--space-2xl) auto;
}

.auth-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-sm);
}

.auth-logo {
    display: block;
    margin: 0 auto var(--space-lg);
    height: 90px;
    object-fit: contain;
}

.auth-title {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-xl);
}

/* ================ PROFILE ================ */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.profile-card {
    padding: var(--space-xl);
}

/* ================ TRACKING ================ */
.timeline {
    position: relative;
    padding-left: 2rem;
}

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

.timeline-item {
    position: relative;
    padding-bottom: var(--space-xl);
}

.timeline-dot {
    position: absolute;
    left: -2rem;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--border-muted);
    border: 3px solid var(--bg-primary);
}

.timeline-item.completed .timeline-dot {
    background: var(--primary-green);
}

.timeline-item.active .timeline-dot {
    background: var(--primary-green);
    box-shadow: 0 0 0 4px rgba(121, 193, 66, 0.2);
}

/* ================ INFO PAGES (about, contact, faq, policies) ================ */
.info-page {
    max-width: 800px;
    margin: 0 auto;
}

.info-page h1 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: var(--space-lg);
}

.info-page h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.info-page p {
    margin-bottom: var(--space-md);
    line-height: 1.7;
    color: var(--text-muted);
}

/* FAQ Accordion */
.faq-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    overflow: hidden;
    background: var(--bg-secondary);
}

.faq-question {
    padding: var(--space-md) var(--space-lg);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background var(--transition-fast);
}

.faq-question:hover {
    background: var(--bg-tertiary);
}

.faq-answer {
    padding: 0 var(--space-lg) var(--space-md);
    color: var(--text-muted);
    line-height: 1.7;
    font-size: 0.9rem;
}

/* ================ RESPONSIVE ================ */
@media (max-width: 1024px) {
    .hero-slides {
        height: 360px;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .trust-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

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

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

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

    .filter-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .filter-sec {
        border-bottom: none;
        border-right: 1px solid var(--border-light);
        padding-right: var(--space-md);
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .filter-sec:last-child {
        border-right: none;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .hero-slides {
        height: 320px;
    }

    .hero-overlay {
        padding: var(--space-xl);
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.3) 60%,
            rgba(0, 0, 0, 0.1) 100%
        );
        align-items: flex-end;
    }

    .hero-logo {
        height: 60px;
    }

    .hero-title {
        font-size: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.88rem;
        margin-bottom: var(--space-md);
    }

    .hero-arrow {
        display: none;
    }

    .cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }

    .filter-sidebar {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .filter-sec {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid var(--border-light);
        padding-bottom: var(--space-md);
        margin-bottom: var(--space-md);
    }

    .newsletter-form {
        flex-direction: column;
    }

    .test-card {
        padding: var(--space-lg);
    }

    .auth-card {
        padding: var(--space-lg);
    }

    .cart-item-card {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-slides {
        height: 280px;
    }

    .hero-title {
        font-size: 1.25rem;
    }

    .cat-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }

    .cat-icon-wrap {
        width: 56px;
        height: 56px;
    }

    .cat-icon-wrap i {
        font-size: 1.2rem;
    }

    .cat-name {
        font-size: 0.72rem;
    }

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

    .product-card {
        padding: 0.65rem;
    }

    .product-name {
        font-size: 0.82rem;
        height: auto;
        -webkit-line-clamp: 1;
    }

    .product-specs {
        font-size: 0.72rem;
        gap: 0.5rem;
    }
}

/* ---- Mobile Category Horizontal Scroll ---- */
@media (max-width: 600px) {
    .cat-grid {
        display: flex;
        overflow-x: auto;
        gap: var(--space-md);
        padding-bottom: var(--space-sm);
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .cat-grid::-webkit-scrollbar {
        display: none;
    }

    .cat-item {
        min-width: 76px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}

/* ================ PAGE SPECIFIC LAYOUTS & COMPONENT OVERRIDES ================ */

/* ---- Cart Page ---- */
.cart-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
}

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

.cart-card-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    height: fit-content;
}

.cart-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.75rem;
    color: var(--text-main);
}

.cart-item-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-light);
}

.cart-item-row:last-child {
    border-bottom: none;
}

.item-image {
    background-color: var(--bg-tertiary);
    width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-light);
}

.item-image i {
    font-size: 1.5rem;
    color: var(--primary-green);
    opacity: 0.75;
}

.item-details {
    flex: 1;
}

.item-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.25rem;
}

.item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.item-qty-selector {
    display: flex;
    align-items: center;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-full);
    padding: 2px;
}

.qty-display {
    width: 35px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
}

.item-subtotal {
    width: 100px;
    text-align: right;
    font-weight: 800;
    color: var(--text-main);
    font-size: 1.05rem;
}

/* Was a bare glyph with no box — roughly a 17px target. */
.item-delete {
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
    font-size: 1.05rem;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: none;
    border: none;
    flex-shrink: 0;
}

.item-delete:hover {
    color: var(--accent-red);
    background: var(--accent-red-light);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.summary-total-row {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    border-top: 1px solid var(--border-light);
    padding-top: 1.25rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-main);
}

/* ---- Checkout Page ---- */
.checkout-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
}

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

.checkout-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.checkout-section-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.id-verified-badge {
    background-color: rgba(121, 193, 66, 0.08);
    border: 1px solid var(--primary-green);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    /* #438a16 on this tint measured 3.80:1. */
    color: var(--dark-green);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.card-element-container {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}

/* ---- Profile Page ---- */
/* ---- My account tabs ------------------------------------------------
   One card per tab. The strip scrolls sideways on a phone rather than
   wrapping, so the tabs stay in one predictable row. */
.account-tabs {
    max-width: 880px;
}

.account-tablist {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-muted);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.account-tablist::-webkit-scrollbar {
    display: none;
}

.account-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.85rem 1.1rem;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.account-tab:hover {
    color: var(--text-main);
    background-color: var(--bg-tertiary);
}

.account-tab:focus-visible {
    outline: 3px solid var(--primary-green);
    outline-offset: -3px;
}

.account-tab[aria-selected="true"] {
    color: var(--text-main);
    border-bottom-color: var(--primary-green);
}

.account-tab[aria-selected="true"] .fa-solid {
    color: var(--tone-success-fg);
}

.account-tab-count {
    min-width: 1.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-full);
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.account-tab-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--tone-muted-fg);
    background-color: var(--tone-muted-bg);
}

.account-tab-dot.tone-success { background-color: var(--tone-success-fg); border-color: var(--tone-success-fg); }
.account-tab-dot.tone-warning { background-color: #f59f00; border-color: var(--tone-warning-fg); }
.account-tab-dot.tone-danger  { background-color: var(--tone-danger-fg); border-color: var(--tone-danger-fg); }

.account-panel:focus-visible {
    outline: 3px solid var(--primary-green-glow);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
}

.account-panel > .panel-card:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .account-tab {
        padding: 0.75rem 0.85rem;
        font-size: 0.9rem;
    }
}

.panel-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.panel-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.95rem;
}

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

.detail-label {
    color: var(--text-muted);
    font-weight: 600;
}

.detail-value {
    font-weight: 700;
    color: var(--text-main);
}

.address-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.address-card.default {
    border-color: var(--primary-green);
}

.address-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--primary-green);
    color: var(--on-primary);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

/* ---- Tracking Page ---- */
.tracking-container {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 2.5rem;
}

@media (max-width: 992px) {
    .tracking-container {
        grid-template-columns: 1fr;
    }
}

.tracking-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.tracking-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.timeline-icon {
    position: absolute;
    left: -3rem;
    top: 0;
    width: 32px;
    height: 32px;
    background-color: var(--bg-primary);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.timeline-item.completed .timeline-icon {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: var(--on-primary);
    box-shadow: var(--shadow-green);
}

.timeline-item.active .timeline-icon {
    background-color: #ffffff;
    border-color: var(--primary-green);
    color: var(--dark-green);
    box-shadow: var(--shadow-green);
}

.timeline-content {
    display: flex;
    flex-direction: column;
}

.timeline-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* This is the CURRENT step of the delivery timeline — the one line on the
   tracking page the customer is looking for. It was 2.21:1. */
.timeline-item.active .timeline-item-title {
    color: var(--dark-green);
}

.timeline-item.completed .timeline-item-title {
    color: var(--text-main);
}

/* ---- Contact Page ---- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    margin: 2rem 0;
}

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

.contact-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    height: fit-content;
}

.sec-title {
    color: var(--text-main);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.info-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.info-icon {
    color: var(--dark-green);
    font-size: 1.2rem;
    margin-top: 0.25rem;
}

/* ---- Info Pages & Accordions ---- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.hero-title-main {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 2.5rem;
}

.faq-trigger {
    width: 100%;
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
}

.faq-trigger:hover {
    color: var(--dark-green);
}

.faq-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-muted);
}

/* ---- Legal / Policy Pages ---- */
.policy-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.policy-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 3rem;
    box-shadow: var(--shadow-sm);
}

.policy-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-main);
    text-transform: capitalize;
}

.policy-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 1rem;
}

.sec-header {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.sec-body {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* ---- Profile Page Badge & Table Styles ---- */
.id-status-badge {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* These three ID-status badges hand-mixed their own colors and drifted from
   the .pill tone ramp every other status in the app uses: #438a16 measured
   3.80:1 and #a37f1a 3.48:1 on their own tints. */
.badge-approved {
    background-color: var(--tone-success-bg);
    border: 1px solid var(--tone-success-br);
    color: var(--tone-success-fg);
}

.badge-pending {
    background-color: var(--tone-warning-bg);
    border: 1px solid var(--tone-warning-br);
    color: var(--tone-warning-fg);
}

.badge-missing {
    background-color: rgba(193, 39, 45, 0.08);
    border: 1px solid var(--accent-red);
    color: var(--accent-red);
}

.table-premium {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.table-premium th {
    color: var(--text-main);
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.table-premium td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
}

.dev-simulator-panel {
    background-color: rgba(193, 39, 45, 0.03);
    border: 1px dashed var(--accent-red);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 2rem;
}

.dev-sim-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--accent-red);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}

.btn-sim {
    padding: 0.5rem;
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition-base);
    color: var(--text-main);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.btn-sim:hover {
    background-color: var(--primary-green);
    color: var(--on-primary);
    border-color: var(--primary-green);
}

.map-placeholder {
    width: 100%;
    height: 250px;
    background-color: var(--bg-primary);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-md);
    margin-top: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--text-muted);
    gap: 0.5rem;
}

.faq-item {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faq-content {
    padding: 0 1.5rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    display: none;
    border-top: 1px solid var(--border-light);
    padding-top: 1rem;
}

.faq-item.active .faq-content {
    display: block;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
    color: var(--dark-green);
}

.faq-icon {
    transition: transform var(--transition-base);
    font-size: 0.9rem;
}

.policy-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 1.25rem;
}

.policy-list {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* An administrator-maintained policy, rendered from Markdown.
   CommonMark emits bare h2/p/ul/blockquote with no classes, so the same look
   as the old hand-classed templates is applied by element. A blockquote is how
   the legal disclaimer is written in Markdown, so it gets the disclaimer's
   treatment. */
.policy-body h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}
.policy-body h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}
.policy-body p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-main);
    margin-bottom: 1.25rem;
}
.policy-body ul,
.policy-body ol {
    margin-left: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.7;
}
.policy-body li { margin-bottom: 0.35rem; }
.policy-body a { color: var(--primary-green-hover); text-decoration: underline; }
.policy-body blockquote {
    background-color: var(--bg-primary);
    border-left: 4px solid var(--accent-red);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 2rem;
}
.policy-body blockquote p { font-size: 0.85rem; margin-bottom: 0; color: inherit; }
.policy-body hr { border: 0; border-top: 1px solid var(--border-muted); margin: 2rem 0; }

.legal-disclaimer {
    background-color: var(--bg-primary);
    border-left: 4px solid var(--accent-red);
    padding: 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}








/* ============================================================
   Storefront additions — product listing, facets, notifications,
   checkout (Stripe Elements), maintenance, brand browsing.
   ============================================================ */

/* ---- Listing shell: facets + results ---- */
.listing-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: start;
}

.facet-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    position: sticky;
    top: 90px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.facet-group { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); }
.facet-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.facet-title {
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.7rem;
}

.facet-list { display: flex; flex-direction: column; gap: 0.15rem; }

.facet-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    color: var(--text-muted);
    font-weight: 500;
}

.facet-list a:hover { background: var(--dark-green-light); color: var(--dark-green); }
.facet-list a.active { background: var(--primary-green); color: var(--on-primary); font-weight: 700; }
.facet-list a .facet-count { font-size: 0.72rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.facet-list .facet-child { padding-left: 1.5rem; font-size: 0.82rem; }

.facet-price { display: flex; align-items: center; gap: 0.5rem; }
.facet-price .form-input { padding: 0.5rem 0.6rem; font-size: 0.85rem; }

.listing-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.listing-count { font-size: 0.87rem; color: var(--text-muted); }
.listing-count strong { color: var(--text-main); }

.active-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: var(--space-md); }
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--dark-green-light);
    color: var(--dark-green);
    border: 1px solid var(--tone-success-br);
    border-radius: var(--radius-full);
    padding: 0.22rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 600;
}
.filter-chip a { color: inherit; font-weight: 800; line-height: 1; }

.facet-toggle { display: none; }

/* ---- Brand grid ---- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-md); }
.brand-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all var(--transition-base);
    display: block;
}
.brand-tile:hover { border-color: var(--primary-green); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.brand-tile img { height: 54px; width: auto; margin: 0 auto 0.75rem; object-fit: contain; }
.brand-tile .brand-initial {
    width: 54px; height: 54px; margin: 0 auto 0.75rem; border-radius: 50%;
    background: var(--dark-green-light); color: var(--dark-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; font-weight: 800;
}
.brand-tile .brand-name { font-weight: 700; font-size: 0.9rem; color: var(--text-main); }
.brand-tile .brand-count { font-size: 0.76rem; color: var(--text-muted); }

/* ---- Category tiles ---- */
/*
    Flex rather than grid, so a row that does not divide evenly centers its
    remainder instead of stranding it against the left edge. There are seven
    root categories, so on most desktop widths the last row holds one or two
    tiles; as a grid those sat in the first two auto-fill tracks with a wide
    gap of nothing beside them, which read as a layout fault rather than a
    short row. `flex: 1 1 190px` keeps the same tile floor auto-fill had.
*/
.cat-tile-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.cat-tile-grid > .cat-tile { flex: 1 1 190px; max-width: 280px; }
.cat-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    transition: all var(--transition-base);
}
.cat-tile:hover { border-color: var(--primary-green); box-shadow: var(--shadow-md); }
.cat-tile .cat-tile-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.cat-tile .cat-tile-icon {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    background: var(--dark-green-light); color: var(--dark-green);
    display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0;
}
.cat-tile .cat-tile-name { font-weight: 800; font-size: 0.95rem; color: var(--text-main); }
.cat-tile .cat-tile-count { font-size: 0.75rem; color: var(--text-muted); }
.cat-tile .cat-sub-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cat-tile .cat-sub-list a {
    font-size: 0.76rem; color: var(--text-muted);
    background: var(--bg-tertiary); border-radius: var(--radius-full); padding: 0.15rem 0.6rem;
}
.cat-tile .cat-sub-list a:hover { background: var(--primary-green); color: var(--on-primary); }

/* ---- Offers strip ---- */
/* The gift tag on an order line. Mirrors .pill-gift in panel.css, which the
   storefront does not load. */
.pill-gift {
    display: inline-block;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: var(--primary-green-light);
    color: #2f5d11;
    border: 1px solid rgba(121, 193, 66, 0.45);
}

/* ---- Free-item promotions -------------------------------------------------
   A gift is not a marked-down product, so it does not use a product card. The
   card carries the condition, the gift and the window, in that order, because
   that is the order a customer needs them in. */
.gift-offers .section-title i { color: var(--primary-green-hover); margin-right: 0.4rem; }

.gift-offer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.gift-offer-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-muted);
    border-left: 4px solid var(--primary-green);
    border-radius: var(--radius-lg);
}

.gift-offer-mark {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--primary-green-light);
    /* #3f7a17 on #e8f5e0 is 4.7:1 — the glyph is decorative but the colour
       still has to read as the brand green rather than wash out. */
    color: #3f7a17;
}

.gift-offer-body { min-width: 0; }
.gift-offer-name { font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--text-muted); margin: 0 0 0.2rem; }
.gift-offer-what { font-size: 1.02rem; font-weight: 800; margin: 0 0 0.45rem; }
.gift-offer-what a { color: inherit; text-decoration: underline; }

.gift-offer-terms { list-style: none; margin: 0; padding: 0; }
.gift-offer-terms li {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding-left: 1rem;
    position: relative;
}
.gift-offer-terms li::before {
    content: '\2022';
    position: absolute;
    left: 0.25rem;
    color: var(--primary-green-hover);
}

/* The basket's two gift states. Earned reads as a result, the nudge as an
   invitation, so they are deliberately not the same colour. */
.gift-earned, .gift-nudge {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    font-size: 0.85rem;
    line-height: 1.45;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    margin: 0 0 0.75rem;
}
.gift-earned {
    background: var(--primary-green-light);
    color: #2f5d11;
    border: 1px solid rgba(121, 193, 66, 0.4);
}
.gift-nudge {
    background: var(--bg-tertiary);
    color: var(--text-main);
    border: 1px dashed var(--border-muted);
}
.gift-earned i, .gift-nudge i { margin-top: 0.15rem; }

.offers-strip {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-red-hover));
    color: #fff;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.offers-strip h3 { font-size: 1.05rem; font-weight: 800; margin: 0; }
.offers-strip p { font-size: 0.85rem; opacity: 0.92; margin: 0; }
.offers-strip .btn-premium { background: #fff; color: var(--accent-red); box-shadow: none; }
.offers-strip .btn-premium:hover { color: var(--accent-red-hover); box-shadow: 0 4px 14px rgba(0,0,0,0.18); }

/* ---- Cart warnings ---- */
.cart-warning-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-md); }
.line-warning {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.76rem; font-weight: 600; color: var(--tone-warning-fg);
    background: var(--tone-warning-bg); border: 1px solid var(--tone-warning-br);
    border-radius: var(--radius-sm); padding: 0.15rem 0.5rem; margin-top: 0.35rem;
}
.line-warning.danger { color: var(--tone-danger-fg); background: var(--tone-danger-bg); border-color: var(--tone-danger-br); }

/* ---- Checkout: Stripe Elements ---- */
.stripe-element {
    border: 1px solid var(--border-muted);
    border-radius: var(--radius-md);
    padding: 0.85rem 0.9rem;
    background: #fff;
    min-height: 46px;
    transition: border-color var(--transition-fast);
}
.stripe-element.StripeElement--focus { border-color: var(--primary-green); box-shadow: var(--focus-ring); }
.stripe-element.StripeElement--invalid { border-color: var(--accent-red); }

.payment-error {
    display: none;
    margin-top: 0.6rem;
    font-size: 0.83rem;
    color: var(--accent-red);
    font-weight: 600;
}
.payment-error.show { display: block; }

.secure-note {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.76rem; color: var(--text-muted); margin-top: 0.75rem;
}

.address-option {
    display: flex; gap: 0.75rem; align-items: flex-start;
    border: 1px solid var(--border-muted); border-radius: var(--radius-md);
    padding: 0.85rem 1rem; cursor: pointer; transition: all var(--transition-fast);
    margin-bottom: 0.6rem;
}
.address-option:hover { border-color: var(--primary-green); }
.address-option.selected { border-color: var(--primary-green); background: var(--dark-green-light); }
.address-option input { margin-top: 0.25rem; accent-color: var(--primary-green); width: 17px; height: 17px; flex-shrink: 0; }
.address-option .addr-label { font-weight: 700; font-size: 0.88rem; }
.address-option .addr-text { font-size: 0.83rem; color: var(--text-muted); }

.totals-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; font-size: 0.9rem; }
.totals-row.total { border-top: 1px solid var(--border-muted); margin-top: 0.5rem; padding-top: 0.8rem; font-size: 1.05rem; font-weight: 800; }
.totals-row .totals-label { color: var(--text-muted); }
.totals-row.discount .totals-value { color: var(--accent-red); }

/* ---- Notification center ---- */
.notif-item {
    display: flex; gap: 0.9rem; align-items: flex-start;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light);
}
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--dark-green-light); }
.notif-icon {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-tertiary); color: var(--text-muted); font-size: 0.85rem;
}
.notif-item.unread .notif-icon { background: var(--primary-green); color: var(--on-primary); }
.notif-title { font-weight: 700; font-size: 0.9rem; color: var(--text-main); }
.notif-body { font-size: 0.85rem; color: var(--text-muted); }
.notif-time { font-size: 0.74rem; color: var(--text-light); margin-top: 0.2rem; }

.nav-badge {
    position: absolute; top: -4px; right: -8px;
    background: var(--accent-red); color: #fff;
    font-size: 0.62rem; font-weight: 800; line-height: 1;
    padding: 3px 5px; border-radius: var(--radius-full); min-width: 16px; text-align: center;
}
.nav-icon-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--text-main); }
.nav-icon-link:hover { background: var(--dark-green-light); color: var(--dark-green); }

/* ---- Maintenance page ---- */
.maintenance-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; background: var(--bg-primary); text-align: center;
}
.maintenance-card {
    background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); padding: 2.5rem 2rem; max-width: 520px; width: 100%;
}
.maintenance-card img { height: 60px; margin: 0 auto 1.5rem; object-fit: contain; }
.maintenance-card h1 { font-size: 1.5rem; font-weight: 800; color: var(--text-main); margin-bottom: 0.75rem; }
.maintenance-card p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; }

/* ---- Order history rows ---- */
.order-row {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1rem 0; border-bottom: 1px solid var(--border-light);
}
.order-row:last-child { border-bottom: none; }
.order-row .order-no { font-weight: 800; font-size: 0.92rem; color: var(--text-main); }
.order-row .order-meta { font-size: 0.79rem; color: var(--text-muted); }
.order-row .order-right { text-align: right; display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; }

/* ---- Product gallery ---- */
.gallery-main {
    border: 1px solid var(--border-light); border-radius: var(--radius-lg);
    background: #fff; overflow: hidden; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 0.75rem; flex-wrap: wrap; }
.gallery-thumb {
    width: 64px; height: 64px; border: 1px solid var(--border-muted); border-radius: var(--radius-sm);
    padding: 4px; background: #fff; cursor: pointer; overflow: hidden;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb.active { border-color: var(--primary-green); box-shadow: var(--focus-ring); }

.stock-line { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 700; }
.stock-line.in { color: var(--dark-green); }
.stock-line.low { color: #8a5b00; }
.stock-line.out { color: var(--accent-red); }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .listing-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-lg); }
}

@media (max-width: 900px) {
    .listing-layout { grid-template-columns: 1fr; }
    .facet-panel { position: static; max-height: none; display: none; }
    .facet-panel.open { display: block; }
    .facet-toggle { display: inline-flex; }
}

@media (max-width: 768px) {
    .cat-tile-grid > .cat-tile { flex-basis: 150px; }
    .brand-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .offers-strip { padding: 1rem; }
    .order-row .order-right { align-items: flex-start; text-align: left; }
    .gallery-main img { padding: 1rem; }
}

@media (max-width: 480px) {
    /* Two up, and the basis has to beat the gap or three would squeeze in. */
    .cat-tile-grid > .cat-tile { flex: 1 1 calc(50% - var(--space-md)); max-width: none; }
    .brand-grid { grid-template-columns: 1fr 1fr; }
    .listing-toolbar { flex-direction: column; align-items: stretch; }
    .maintenance-card { padding: 1.75rem 1.25rem; }
}

/* ============================================================
   Consistency and responsive pass — UX audit
   ============================================================ */

/* ---- One boxed-section treatment ---------------------------
   The storefront had SIX independent definitions of "a white box with a
   border and a shadow", each with its own padding:

     .cart-card-panel  2rem      .checkout-card  2rem
     .tracking-card    2rem      .panel-card     2rem
     .contact-card     2.5rem    .policy-card    3rem

   plus .panel from the shared component set at 1.25rem. Put two of them
   side by side — the cart list beside the cart summary, or the checkout
   form beside its summary — and the internal rhythm visibly disagreed.
   The class names are kept so no blade has to change; they now resolve to
   one treatment, aligned with .panel.

   Padding steps down at 768 and again at 480: 2rem of padding inside a
   0.85rem page gutter left roughly 250px of usable width on a 360px
   phone. */
.cart-card-panel,
.checkout-card,
.tracking-card,
.panel-card,
.contact-card,
.policy-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.5rem;
}

.checkout-card,
.tracking-card,
.panel-card {
    margin-bottom: var(--space-lg);
}

.cart-card-panel { height: fit-content; }

@media (max-width: 768px) {
    .cart-card-panel,
    .checkout-card,
    .tracking-card,
    .panel-card,
    .contact-card,
    .policy-card { padding: 1.15rem; }
}

@media (max-width: 480px) {
    .cart-card-panel,
    .checkout-card,
    .tracking-card,
    .panel-card,
    .contact-card,
    .policy-card { padding: 0.9rem; }
}

/* ---- One heading scale -------------------------------------
   The same semantic level — a section heading inside a card — rendered at
   five different sizes depending on which bespoke card class wrapped it:
   .cart-title 1.5rem, .sec-title 1.4rem, .tracking-title 1.3rem,
   .checkout-section-title 1.2rem, .panel-title 1.2rem, .panel-head h2
   0.98rem. On the cart page the card heading (1.5rem) was nearly the size
   of the page's own h1 (1.65rem), so nothing distinguished the page title
   from a section of it at a glance.

   Page h1 stays at .text-2xl (1.65rem). Card headings are now 1.1rem,
   which sits cleanly between the h1 and 0.95rem body copy. */
.cart-title,
.checkout-section-title,
.tracking-title,
.panel-title,
.sec-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.1px;
}

.tracking-title { justify-content: space-between; }

/* Icons in a card heading sit beside a word that already says the same
   thing; keep them from competing with it. */
.cart-title i,
.checkout-section-title i,
.tracking-title i,
.panel-title i,
.sec-title i {
    color: var(--dark-green);
    font-size: 0.92em;
}

/* ---- Cart line rows on a phone -----------------------------
   .cart-item-row was a non-wrapping flex row holding an 80px image, the
   details column, the quantity stepper, a fixed 100px subtotal and a
   delete button, separated by 1.5rem gaps. Its minimum content width is
   around 420px. A 360px phone has roughly 250px inside the card, so the
   row overflowed horizontally on every cart with an item in it — the
   worst responsive defect in the funnel. The existing mobile rule targets
   .cart-item-card, a different class that this page never uses.

   Below 600 the row becomes a two-column grid: image beside details on
   the top line, then the stepper, the subtotal and the remove control on
   their own line where they have room to be 44px. */
@media (max-width: 600px) {
    .cart-item-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        grid-template-areas:
            "image details"
            "qty   total";
        gap: 0.75rem 0.9rem;
        align-items: center;
        padding: 1rem 0;
    }

    .cart-item-row .item-image { grid-area: image; width: 64px; height: 64px; }
    .cart-item-row .item-details { grid-area: details; }
    .cart-item-row .item-qty-selector { grid-area: qty; justify-self: start; }

    .cart-item-row .item-subtotal {
        grid-area: total;
        justify-self: end;
        width: auto;
    }

    /* The destructive control sits at the far end of its own line rather
       than immediately beside the "+" stepper. */
    .cart-item-row .item-delete {
        grid-area: qty;
        justify-self: end;
    }
}

/* .item-name is an anchor, so its margin-bottom was silently dropped —
   inline boxes ignore vertical margin. The product title and the meta
   line under it were touching. */
.item-name {
    display: block;
    margin-bottom: 0.2rem;
}

.item-name:hover { color: var(--dark-green); }

/* The summary is the column a customer glances back at while editing
   quantities; on a tall cart it scrolled out of sight entirely. */
@media (min-width: 993px) {
    .cart-container > aside.cart-card-panel,
    .checkout-layout > aside {
        position: sticky;
        top: 88px;
    }
}

/* ---- Classes replacing style attributes --------------------
   Each of these existed only as an inline style attribute in a blade. */
.gallery-placeholder { font-size: 5rem; color: var(--border-muted); }
.qty-field { width: 3.75rem; text-align: center; }
.prewrap { white-space: pre-line; }
.sort-select { width: auto; min-width: 9rem; }
.summary-line { flex-wrap: nowrap; }
.divider.tight { margin: 1rem 0; }
.auth-card-wide { max-width: 560px; }
.policy-list-plain { margin-left: 1.5rem; margin-bottom: 1.25rem; font-size: 0.95rem; line-height: 1.7; list-style: disc; }
.about-card { padding: var(--space-2xl); margin-bottom: var(--space-xl); }
.text-center-block { text-align: center; }

/* ---- Product listing -------------------------------------- */
/* Filtering is a full page navigation, so the count line is what confirms
   the filter did anything. It should read as a result, not as chrome. */
.listing-count strong { font-size: 1.05rem; }

@media (max-width: 900px) {
    .facet-panel.open {
        margin-bottom: var(--space-lg);
        box-shadow: var(--shadow-md);
    }
}

/* ---- Guest hand-off --------------------------------------- */
.guest-note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

/* ---- Checkout step numbering -------------------------------
   Four unlabelled cards in a column gave no sense of sequence or of how
   much was left to do. A number in the heading answers both. */
.checkout-layout { counter-reset: checkout-step; }

.checkout-step { counter-increment: checkout-step; }

.checkout-step .checkout-section-title::before {
    content: counter(checkout-step);
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-green);
    color: var(--on-primary);
    font-size: 0.82rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Order history rows ----------------------------------- */
.order-row { align-items: center; }
.order-row .order-no { display: inline-block; margin-bottom: 0.15rem; }
.order-row .order-no:hover { color: var(--dark-green); }

/* ---- Product gallery --------------------------------------
   .gallery-thumb.active used --focus-ring, so the selected thumbnail and
   the keyboard-focused thumbnail were indistinguishable. Selection is now
   a solid ring; focus keeps the shared outline from base.css. */
.gallery-thumb.active {
    border-color: var(--dark-green);
    border-width: 2px;
    box-shadow: none;
}

/* ---- Timeline ---------------------------------------------
   The current step was signalled by color alone. A ring gives it a
   second channel. */
.timeline-item.active .timeline-icon {
    box-shadow: 0 0 0 4px var(--dark-green-light);
}

@media (max-width: 480px) {
    .timeline { padding-left: 1.6rem; }
    .timeline-icon { left: -2.6rem; width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------------------
   Store closed banner
   ---------------------------------------------------------------------------
   Sits directly under the header on every page. Amber rather than red: the
   shop is not broken and nothing has gone wrong, it is shut — red is reserved
   for errors and for maintenance mode, and spending it here would blunt it.
   --------------------------------------------------------------------------- */
.store-closed-banner {
    background: #FFF8E6;
    border-bottom: 1px solid #F0D9A0;
    color: #4A3A12;
}

.store-closed-inner {
    max-width: var(--max-width, 1280px);
    margin: 0 auto;
    padding: 0.85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    align-items: center;
    justify-content: space-between;
}

.store-closed-lead {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    min-width: 0;
}

.store-closed-lead > i {
    font-size: 1.15rem;
    line-height: 1.5;
    flex: none;
    color: #B07A12;
}

.store-closed-lead strong {
    display: block;
    font-size: 0.95rem;
}

.store-closed-lead p {
    margin: 0.15rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.store-closed-hours {
    font-size: 0.85rem;
    flex: none;
}

.store-closed-hours summary {
    cursor: pointer;
    font-weight: 600;
    padding: 0.25rem 0;
}

.store-closed-hours ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    min-width: 15rem;
}

.store-closed-hours li {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.15rem 0;
}

.store-closed-hours li.is-today {
    font-weight: 700;
}

.store-closed-tz {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    opacity: 0.75;
}

/* A phone has no room for the banner and the hours side by side. */
@media (max-width: 640px) {
    .store-closed-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .store-closed-hours ul {
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------------
   "Get the app" block on the sign-in page
   --------------------------------------------------------------------------- */
.app-download-block {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-light, #E9ECEF);
}

.app-download-lead {
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted, #6C757D);
    text-align: center;
}

.app-download-lead i {
    margin-right: 0.35rem;
}

.app-download-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.65rem;
}

.app-download-button {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--border-muted, #DEE2E6);
    border-radius: 10px;
    background: #fff;
    color: var(--text-main, #212529);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-download-button:hover,
.app-download-button:focus-visible {
    border-color: var(--green-dark, #3F7A17);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.app-download-button > i {
    font-size: 1.4rem;
    flex: none;
}

.app-download-button strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
}

.app-download-button small {
    display: block;
    font-size: 0.74rem;
    color: var(--text-muted, #6C757D);
}

.app-download-note {
    margin: 0.75rem 0 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-muted, #6C757D);
    text-align: center;
}