/* RSL — Product Listing common styles */

.rsl-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.rsl-section { padding: 60px 0; }
.rsl-section-title { font-size: 2rem; margin-bottom: 10px; color: var(--rsl-text, #1a1a1a); }
.rsl-text { font-size: 0.92rem; color: var(--rsl-muted, #555); margin-bottom: 32px; }

/* Hero */
.rsl-listing-hero { padding: 26px 0 18px; background: var(--rsl-hero-bg, #f7f7f7); }
.rsl-kicker { display: inline-block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rsl-accent, #2a7); margin-bottom: 12px; }
.rsl-title { font-size: 1.85rem; line-height: 1.2; margin-bottom: 10px; color: var(--rsl-text, #1a1a1a); }
.rsl-lead { font-size: 0.92rem; color: var(--rsl-muted, #555); margin-bottom: 24px; max-width: 720px; }
.rsl-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Buttons */
.rsl-btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; transition: opacity 0.2s; }
.rsl-btn-primary { background: var(--rsl-accent, #2a7); color: #fff; }
.rsl-btn-secondary { background: transparent; color: var(--rsl-accent, #2a7); border: 1px solid var(--rsl-accent, #2a7); }
.rsl-btn:hover { opacity: 0.85; }

/* Group title */
.rsl-group-title { font-size: 1.4rem; margin: 32px 0 16px; color: var(--rsl-accent, #2a7); }

/* Products grid */
.rsl-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.rsl-product-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rsl-product-media {
    aspect-ratio: 4/3;
    background: #f0f0f0;
    display: flex;
    align-items: start;
    justify-content: center;
    overflow: hidden;
}

.rsl-product-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rsl-product-placeholder {
    color: #999;
    padding: 16px;
    text-align: center;
}

.rsl-product-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.rsl-product-body h3 {
    font-size: 1.2rem;
    margin: 0;
}

.rsl-product-body p {
    color: #666;
    margin: 0 0 16px;
    flex: 1;
}

.rsl-product-body .rsl-btn {
    align-self: flex-start;
}

/* Guide */
.rsl-guide-list { padding-left: 20px; }
.rsl-guide-list li { margin-bottom: 12px; }

/* Why */
.rsl-why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
}

.rsl-why-item h3 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--rsl-accent, #2a7);
}

/* CTA */
.rsl-cta-inner { text-align: center; }
.rsl-cta { background: var(--rsl-hero-bg, #f7f7f7); }

/* =========================================================
   HERO — 2 columns layout
========================================================= */

.rsl-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
    align-items: start;
}

.rsl-hero-left {
    max-width: 720px;
}

.rsl-hero-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rsl-benefit-card {
    background: #fff;
    border: 1px solid #dbe3ea;
    border-radius: 22px;
    padding: 10px 18px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.rsl-benefit-card h3 {
    margin: 0 0 8px;
    font-size: 0.92rem;
    color: var(--rsl-text, #1a1a1a);
}

.rsl-benefit-card p {
    margin: 0;
    color: var(--rsl-muted, #555);
    line-height: 1.6;
}

/* Responsive */

@media (max-width: 992px) {

    .rsl-hero-grid {
        grid-template-columns: 1fr;
    }

    .rsl-hero-right {
        margin-top: 10px;
    }

    .rsl-title {
        font-size: 2rem;
    }
}

@media (max-width: 640px) {

    .rsl-listing-hero {
        padding: 60px 0;
    }

    .rsl-title {
        font-size: 1.7rem;
    }

    .rsl-benefit-card {
        padding: 18px 20px;
    }

    .rsl-hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* =========================================================
   HERO compact tuning
========================================================= */

.rsl-benefit-card {
    min-height: auto;
}

.rsl-benefit-card h3 {
    line-height: 1.2;
    margin-bottom: 4px;
}

.rsl-benefit-card p {
    font-size: 0.88rem;
    line-height: 1.35;
}

.rsl-lead {
    max-width: 620px;
    margin-bottom: 18px;
}

.rsl-hero-actions {
    gap: 10px;
}

.rsl-btn {
    padding: 10px 22px;
}

@media (min-width: 993px) {

    .rsl-hero-right {
        padding-top: 2px;
    }

    .rsl-benefit-card {
        border-radius: 18px;
    }
}

/* =========================================================
   Center hero buttons
========================================================= */

.rsl-hero-actions {
    display: flex;
    justify-content: center !important;
    align-items: center;
    width: 100%;
    margin-top: 18px;
}

/* =========================================================
   Center hero kicker
========================================================= */

.rsl-kicker {
    display: block;
    width: 100%;
    text-align: center !important;
}

/* =========================================================
   Benefit cards centered text
========================================================= */

.rsl-benefit-card {
    text-align: center;
}