/**
 * Product-page configurator band — EFKA theme.
 *
 * Loaded as a plain stylesheet from the theme's catalog_product_view.xml, deliberately NOT
 * through the Tailwind source: this is a handful of rules for one band, and routing them
 * through the theme's Tailwind build would make every future tweak need an npm run.
 *
 * The band exists to say "this is where you configure your frame" — before this it was an
 * unannounced strip of white cards that looked exactly like the Description section below it,
 * so nothing told the customer they had moved from reading about the product to specifying it.
 */

/* ── The band ──────────────────────────────────────────────────────────────── */

.efka-configurator-band {
    /* The gap the customer sees above the configurator when the page scrolls to it. Used by
       scroll-margin-top for any browser-driven scroll (anchor links, focus), and mirrored by
       the band's own scroll offset in JS. */
    scroll-margin-top: 5rem;
    margin: 0 0 1.5rem;
}

/* The cart-edit arrival, where the band is rendered ABOVE the gallery instead of below it
   (theme product-detail-page.phtml) so the configuration the customer came back for is the
   first thing on the page. It then sits directly under the breadcrumbs, which the normal
   position never does, so it needs the top margin the section above would otherwise have
   given it. */
.efka-configurator-band-lead {
    margin-top: 1rem;
}

/* A tinted, bordered slab that reads as one region distinct from the white section cards
   above and below it. Deliberately restrained — the steps inside carry their own cards, and
   two competing frames would be noisy. */
.efka-configurator-band-inner {
    background: #f7f8f9;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1.5rem;
}

@media (min-width: 768px) {
    .efka-configurator-band-inner {
        padding: 1.75rem 2rem 2rem;
    }
}

/* ── The band's heading ────────────────────────────────────────────────────── */

.efka-configurator-band-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1.25rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid #e3e5e8;
}

.efka-configurator-band-header svg {
    flex: 0 0 auto;
    color: #1f7a75;
}

.efka-configurator-band-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1c1c1c;
}

.efka-configurator-band-hint {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: #6b7280;
}

@media (max-width: 639px) {
    .efka-configurator-band-title {
        font-size: 1.125rem;
    }
}