/* ==============================================
   E-COMMERCE PAGE — Intro / Hero
   ============================================== */

.ecom-intro {
    background-color: #0F3350;
    padding: 5rem 2rem;
    text-align: center;
}

.ecom-intro-inner {
    max-width: 52rem;
    width: 100%;
    margin: 0 auto;
}

.ecom-intro h1 {
    color: #E5E4E2;
}

.ecom-intro p {
    color: #ACB6BD;
    margin-top: 1.5rem;
}

.ecom-intro-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}

@media (min-width: 32rem) {
    .ecom-intro-cta {
        grid-template-columns: 1fr 1fr;
        max-width: 28rem;
    }
}

.ecom-intro-cta > .btn {
    display: flex;
    width: 100%;
}

/* ==============================================
   E-COMMERCE PAGE — Feature panel color fix
   (feature-col-title is a <p>; the broad
   .split-section--dark p rule would override
   its hardcoded #1A2530 without this scope)
   ============================================== */

.split-section--dark .feature-panel p {
    color: #1A2530;
}

/* ==============================================
   E-COMMERCE PAGE — B2B Portals float override
   (base.css breaks float at 48rem/768px which
   creates dead space on short-row content;
   extend float down to 580px with 22rem cap)
   ============================================== */

#b2b-portals .float-image--right {
    float: none;
    width: 100%;
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

@media (min-width: 36.25rem) {
    #b2b-portals .float-image--right {
        float: right;
        width: auto;
        max-width: 22rem;
        margin-left: 2.5rem;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

/* ==============================================
   E-COMMERCE PAGE — Feature panel typography
   (scoped to this page — adjust freely without
   affecting feature panels on other pages)
   ============================================== */

@media (max-width: 29.9375rem) {
    #headless-cms .feature-panel {
        max-width: 19rem;
        margin-left: auto;
        margin-right: auto;
    }
}

#product-config .feature-col-title,
#headless-cms .feature-col-title {
    font-size: 1.05rem;
    font-weight: 700;
}

#product-config .feature-item,
#headless-cms .feature-item {
    font-size: 1rem;
	color: #0F3350;
}

/* ==============================================
   E-COMMERCE PAGE — Compare Panel (#custom-stores)
   ============================================== */

#custom-stores .float-image--right {
    float: none;
    width: 100%;
    max-width: 25rem;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5rem;
}

@media (max-width: 26.5rem) {
    #custom-stores .float-image--right {
        max-width: 18rem;
    }
}

@media (min-width: 40.625rem) {
    #custom-stores .float-image--right {
        float: right;
        width: auto;
        max-width: clamp(24rem, 38vw, 30rem);
        margin-left: 2.5rem;
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

#custom-stores .compare-panel {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden;
    width: 100%;
    max-width: 25rem;
}

#custom-stores .compare-col {
    padding: 1.25rem;
}

#custom-stores .compare-col--bad {
    background-color: #f8eded;
    border-bottom: 0.0625rem solid #D3D3D3;
}

#custom-stores .compare-col--good {
    background-color: #edf5ed;
}

#custom-stores .compare-col-title {
    font-family: 'Barlow', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1A2530;
    margin-bottom: 0.75rem;
}

#custom-stores .compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

#custom-stores .compare-item {
    font-size: 0.9rem;
    color: #1A2530;
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.4;
}

#custom-stores .compare-item--bad::before {
    content: '\2717';
    position: absolute;
    left: 0;
    color: #a52a2a;
    font-weight: 700;
}

#custom-stores .compare-item--good::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #1a5228;
    font-weight: 700;
}

#custom-stores .compare-item--extra {
    color: #737F87;
    font-style: italic;
    font-size: 0.8125rem;
    padding-left: 0;
    margin-top: 0.25rem;
}

@media (min-width: 26.5625rem) {
    #custom-stores .compare-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    #custom-stores .compare-col--bad {
        border-bottom: none;
        border-right: 0.0625rem solid #D3D3D3;
    }
}