/* Banner — full-bleed (rendered outside <main>, so it spans the viewport). */
.business-banner {
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #1a1a1a;
    position: relative;
}

.business-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlaid store name + rating on a gradient scrim (hero variant). */
.business-banner--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.25) 48%, transparent 80%),
                linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 42%);
}
.banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.banner-overlay-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1.5rem 1.8rem;
}
.banner-store-name {
    color: #fff;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 0.55rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.35);
    text-wrap: balance;
}
.banner-store-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.9);
    font-size: 0.98rem;
}
.banner-rating { color: #fff; font-weight: 700; }
.banner-rating-count { font-weight: 400; opacity: 0.8; }
.banner-dot { opacity: 0.45; }
.banner-tagline { color: rgba(255,255,255,0.88); }

/* Row above the store name: "Verified" chip + city (mock's "store-eyebrow"). */
.store-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.banner-city {
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.store-city {
    color: var(--text-muted, #6b7280);
    font-size: 0.85rem;
    font-weight: 600;
}

/* "Verified" chip — every storefront is admin-approved before it goes live. */
.banner-badge,
.store-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
}
.banner-badge {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.35);
}
.store-badge {
    color: var(--primary-hover, #8a4227);
    background: var(--primary-soft, #f3e4db);
}
.store-header-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin: 0 0 0.5rem;
}
.store-header-meta .store-rating { margin: 0; }

/* Store header */
.store-header {
    margin-bottom: 2rem;
    padding: 0;
}

.store-name {
    font-size: 1.8rem;
    margin: 0 0 0.6rem;
}

.store-rating {
    font-size: 1rem;
    color: #f59e0b;
    margin: 0 0 0.5rem;
}

.store-rating-count {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.product-rating {
    font-size: 0.78rem;
    color: #f59e0b;
}

.store-desc {
    font-size: 0.95rem;
    color: #444;
    line-height: 1.65;
    max-width: 640px;
    margin: 0;
}

/* Storefront column — narrower than the 1200px content width so product
   images sit at a comfortable size with breathing room on either side. */
.storefront-inner { max-width: 820px; margin: 0 auto; }

/* Featured product hero */
.featured-section { margin-bottom: 2.6rem; }
.featured-eyebrow {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: 0.85rem;
}
.featured-card {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06);
}
.featured-media {
    display: block;
    position: relative;
    min-height: 300px;
    background: var(--divider);
}
.featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-media--empty { display: block; width: 100%; height: 100%; background: var(--divider); }
.featured-body {
    padding: 2.1rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.featured-name {
    font-size: 1.7rem;
    font-weight: 750;
    color: var(--text);
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-decoration: none;
    text-wrap: balance;
    margin-bottom: 0.6rem;
}
.featured-name:hover { color: var(--primary); }
.featured-rating {
    font-size: 0.9rem;
    color: #f59e0b;
    font-weight: 600;
    margin-bottom: 0.9rem;
}
.featured-rating span { color: var(--text-muted); font-weight: 400; }
.featured-desc {
    font-size: 0.98rem;
    color: var(--text-soft);
    line-height: 1.6;
    margin-bottom: 1.3rem;
    max-width: 46ch;
}
.featured-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}
.featured-stock {
    font-size: 0.85rem;
    color: #1e7e34;
    font-weight: 600;
    margin-bottom: 1.3rem;
}
.featured-stock--out { color: var(--error-fg); }
.featured-cta {
    margin-top: auto;
    display: inline-block;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    font-size: 0.98rem;
    padding: 0.8rem 1.8rem;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.featured-cta:hover { background: var(--primary-hover); }

/* Products */
.products-section {
    padding: 0;
}

.products-section h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
}

/* Product grid — max 2 across. When the count is odd, the last card has no
   partner on its row, so it spans the full width of the two above it. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.product-grid .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 900px) {
    .featured-card { grid-template-columns: 1fr; }
    .featured-media { min-height: 260px; }
    .banner-store-name { font-size: 2rem; }
}

@media (max-width: 560px) {
    .business-banner { height: 220px; }
    /* Narrow viewport — one across; drop the full-width-last-card rule. */
    .product-grid { grid-template-columns: 1fr; }
    .product-grid .product-card:last-child:nth-child(odd) { grid-column: auto; }
    .featured-body { padding: 1.5rem 1.4rem; }
    .banner-store-name { font-size: 1.6rem; }
    .banner-overlay-inner { padding-bottom: 1.3rem; }
}

.product-card {
    position: relative;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e5e5e5;
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.15s;
}

/* "Sale" corner badge, overlaid on the product photo when a sale is live. */
.sale-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 3;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sale, #d64545);
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.featured-media .sale-badge { top: 0.9rem; left: 0.9rem; font-size: 0.8rem; }

.product-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.product-photo {
    width: 100%;
    height: auto; /* beats the img height="400" attribute so aspect-ratio applies */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.product-photo--empty {
    background: var(--divider);
}

.product-body {
    padding: 0.75rem 1rem 1rem;
}

.product-name {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.product-desc {
    font-size: 0.82rem;
    color: #666;
    line-height: 1.45;
    margin-bottom: 0.5rem;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.5rem;
}

.product-price {
    font-size: 1rem;
    font-weight: 700;
    color: #111;
}

.product-stock {
    font-size: 0.78rem;
    color: var(--text-muted);
}