/**
 * Storefront theme — aligns shop + auth with grocery marketplace design.
 * Loaded after template Bootstrap / style.css.
 */
:root {
    --sf-green: #1b4332;
    --sf-green-mid: #2d6a4f;
    --sf-green-light: #40916c;
    --sf-green-soft: #52b788;
    --sf-cream: #f8f9f5;
    --sf-accent: #d8f3dc;
    --sf-border: rgba(45, 106, 79, 0.12);
}

/* --- Home / discovery --- */
.grocery-hero-carousel .carousel-item {
    min-height: 320px;
}
@media (min-width: 992px) {
    .grocery-hero-carousel .carousel-item {
        min-height: 380px;
    }
}
.grocery-hero-slide {
    background: linear-gradient(135deg, var(--sf-green) 0%, var(--sf-green-mid) 45%, var(--sf-green-light) 100%);
}
.grocery-hero-slide.alt {
    background: linear-gradient(135deg, #14532d 0%, #166534 50%, var(--sf-green-mid) 100%);
}
.grocery-hero-slide.alt2 {
    background: linear-gradient(135deg, #0f3d2e 0%, var(--sf-green) 55%, var(--sf-green-soft) 100%);
}
.grocery-trust-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sf-cream);
    color: var(--sf-green-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.grocery-category-pill {
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid var(--sf-border);
    background: #fff;
}
.grocery-category-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(27, 67, 50, 0.12);
}
.grocery-modal-accent {
    background: linear-gradient(90deg, var(--sf-green-mid), var(--sf-green-light));
}
.grocery-deal-box {
    background: linear-gradient(135deg, #fff 0%, var(--sf-cream) 100%);
    border: 1px solid rgba(45, 106, 79, 0.15);
    border-radius: 12px;
}
.grocery-countdown .display-6 {
    font-size: 1.75rem;
}
.grocery-cta-banner {
    background: linear-gradient(90deg, var(--sf-green) 0%, var(--sf-green-light) 100%);
    border-radius: 12px;
}
.grocery-product-card .grocery-product-img-wrap {
    border-radius: 0.375rem 0.375rem 0 0;
    overflow: hidden;
}
.nav-pills .nav-link.grocery-discover-link {
    color: var(--sf-green-mid);
    border-radius: 999px;
}
.nav-pills .nav-link.grocery-discover-link.active {
    background: var(--sf-green-mid);
    color: #fff;
}

/* --- Auth (guest layout) --- */
.grocery-auth-page .grocery-auth-visual {
    position: relative;
    border-radius: 10px;
    height: calc(100vh - 40px);
    background-image: linear-gradient(135deg, rgba(27, 67, 50, 0.92) 0%, rgba(45, 106, 79, 0.88) 100%),
        url("../template/assets/img/authentication/login-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.grocery-auth-page .grocery-auth-visual-inner {
    position: relative;
    z-index: 1;
}
.grocery-auth-page .auth-form-card .form-control:focus {
    border-color: var(--sf-green-light);
    box-shadow: 0 0 0 0.2rem rgba(64, 145, 108, 0.2);
}
.grocery-auth-page .auth-head-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--sf-cream);
    color: var(--sf-green-mid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* --- Shop inner pages (catalog, product, cart) --- */
.sf-page-eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sf-green-mid);
    font-weight: 600;
}
.sf-card-soft {
    border: 1px solid var(--sf-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(27, 67, 50, 0.06);
}
.grocery-catalog-toolbar {
    border-radius: 12px;
    border: 1px solid var(--sf-border);
    background: linear-gradient(180deg, #fff 0%, var(--sf-cream) 100%);
}
.grocery-pdp-gallery {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--sf-border);
    background: var(--sf-cream);
}
.grocery-pdp-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--sf-green-mid);
}
.grocery-offer-row {
    border: 1px solid var(--sf-border);
    border-radius: 10px;
    padding: 1rem;
    background: #fff;
    transition: box-shadow 0.15s ease;
}
.grocery-offer-row:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(27, 67, 50, 0.08);
}
.grocery-breadcrumb .breadcrumb-item a {
    color: var(--sf-green-mid);
    text-decoration: none;
}
.grocery-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}
.sf-cart-card {
    border-radius: 12px;
    border: 1px solid var(--sf-border);
}
.sf-cart-card thead th {
    background: var(--sf-cream) !important;
    color: var(--sf-green);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}