/**
 * Baseline layout for the public storefront (`[keystone_vendor_storefront]`)
 * and vendor directory (`[keystone_vendor_directory]`) shortcodes.
 *
 * Deliberately minimal: structure/spacing only, not a full design system —
 * the active theme still supplies fonts, body colors, and its own page
 * chrome. Added after confirming on a real live site that the theme
 * provides zero default styling for these classes (unlike WooCommerce's own
 * `.products`/`.product`, which most themes DO style) — without this file
 * the product grid rendered as one unstyled column, full-width images.
 */

.ks-mp-storefront-products,
.ks-mp-directory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 24px;
    margin: 24px 0;
    padding: 0;
    list-style: none;
}

/* On a wide-enough screen, use the fixed column count each shortcode's
   `columns` attribute set as the `--ks-mp-cols` custom property (default 5)
   instead of the responsive auto-fill above — an explicit, predictable grid
   is what was actually asked for on desktop, but forcing 5 columns of
   >=200px each on a narrow screen would overflow, so this stays auto-fill
   (responsive) under each breakpoint regardless. The directory grid has no
   sidebar competing for width, so its breakpoint is lower than the
   storefront's own product grid, which shares its row with
   `.ks-mp-storefront-sidebar` (see below) and needs more total page width
   before 5 real columns actually fit. */
@media (min-width: 1024px) {
    .ks-mp-directory-grid {
        grid-template-columns: repeat(var(--ks-mp-cols, auto-fill), minmax(200px, 1fr));
    }
}

@media (min-width: 1240px) {
    .ks-mp-storefront-products {
        grid-template-columns: repeat(var(--ks-mp-cols, auto-fill), minmax(180px, 1fr));
    }
}

.ks-mp-product-card,
.ks-mp-vendor-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    padding: 12px;
    background: #fff;
}

.ks-mp-product-card img,
.ks-mp-vendor-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 8px;
}

.ks-mp-product-card h4,
.ks-mp-vendor-card h3 {
    font-size: 1em;
    margin: 0 0 6px;
    line-height: 1.3;
}

.ks-mp-product-card h4 a,
.ks-mp-vendor-card h3 a {
    text-decoration: none;
    color: inherit;
}

.ks-mp-product-card p {
    margin: 0 0 8px;
}

.ks-mp-add-to-cart {
    display: inline-block;
    margin-top: auto;
    padding: 8px 14px;
    background: #1d1d1d;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
}

.ks-mp-add-to-cart:hover {
    opacity: 0.85;
}

/* Full-bleed hero — breaks out of the theme's own (usually centered, fixed-
   width) content column so the header genuinely spans the page, regardless
   of which theme is active. Falls back to a plain dark background when no
   banner is set; the overlay keeps white text readable over any photo. */
.ks-mp-storefront-hero {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background-color: #232f3e;
    background-size: cover;
    background-position: center;
    /* Ano's follow-up feedback (2026-09-14): the band read too small — the
       original had no explicit height at all (content-sized only), so this
       min-height plus the ~50% larger padding/logo below are together how
       "50% bigger" is expressed on a hero that previously had no fixed size
       to scale from. */
    min-height: 220px;
    display: flex;
    align-items: center;
}

.ks-mp-storefront-hero-overlay {
    background: rgba(15, 20, 28, 0.55);
    padding: 54px 36px;
    width: 100%;
}

.ks-mp-storefront-hero-inner {
    max-width: 1440px; /* matches .ks-mp-storefront-body's new width */
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ks-mp-storefront-logo {
    height: 126px;
    width: 126px;
    object-fit: cover;
    border-radius: 8px;
    background: #fff;
    padding: 4px;
    flex: 0 0 auto;
}

.ks-mp-storefront-hero-text h1 {
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.ks-mp-storefront-meta {
    margin: 6px 0 0;
    color: #fff;
    opacity: 0.9;
    font-size: 0.95em;
}

.ks-mp-storefront-meta a {
    color: inherit;
}

.ks-mp-storefront-body {
    /* Widened from 1100px (2026-09-14) — the new sidebar needs the extra
       room for a real 5-column product grid to fit next to it. */
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px 24px 0;
}

.ks-mp-storefront-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}

.ks-mp-storefront-sidebar {
    flex: 1 1 220px;
    max-width: 260px;
}

.ks-mp-storefront-main {
    flex: 3 1 600px;
    min-width: 0;
}

.ks-mp-storefront-search {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.ks-mp-storefront-search input[type="text"] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ks-mp-storefront-categories h4 {
    margin: 0 0 8px;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #666;
}

.ks-mp-storefront-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ks-mp-storefront-categories li {
    margin: 0 0 4px;
}

.ks-mp-storefront-categories a {
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}

.ks-mp-storefront-categories li.is-active a {
    background: #f0f0f0;
    font-weight: 600;
}

.ks-mp-storefront-categories a:hover {
    background: #f7f7f7;
}

.ks-mp-cat-count {
    color: #888;
    font-size: 0.9em;
}

.ks-mp-storefront-terms {
    font-size: 0.9em;
    margin-top: 16px;
}

.ks-mp-storefront-pager,
.ks-mp-directory-pager {
    margin: 24px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ks-mp-storefront-pager a,
.ks-mp-storefront-pager span,
.ks-mp-directory-pager a,
.ks-mp-directory-pager span {
    display: inline-block;
    min-width: 32px;
    padding: 4px 8px;
    text-align: center;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
}

.ks-mp-storefront-pager span,
.ks-mp-directory-pager span {
    background: #f0f0f0;
    font-weight: 600;
}

.ks-mp-directory-search {
    margin-bottom: 20px;
    display: flex;
    gap: 8px;
}

.ks-mp-directory-search input[type="text"] {
    flex: 1;
    max-width: 320px;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}