/* ---------- UTILITY ---------- */
.sb-ui .hidden { display: none !important; }

/* ---------- BASE ---------- */
.sb-ui.sb-care-guide-scope{
    --green:#4A6655; --bg:#F9F7F2; --text:#2C2C2C; --shadow:0 12px 32px rgba(0,0,0,0.09);
    font-family:"Lato",sans-serif; color:var(--text);
    
    /* UPDATED: MAX WIDTH 1400px */
    max-width:1400px; 
    
    margin:0 auto; padding:60px 20px 100px; line-height:1.85;
}
.sb-care-guide-scope h1, .sb-care-guide-scope h2, .sb-care-guide-scope h3{
    font-family:"Playfair Display",serif; color:var(--green); text-align:center;
}
.sb-care-guide-scope h1{font-size:2.6rem;margin-bottom:16px;letter-spacing:-0.5px;}
.sb-care-guide-scope h2{font-size:2rem;margin:80px 0 40px;}
/* UNIVERSAL CENTERED UL + LI (desktop + mobile) */
.sb-care-card ul {
    list-style: none;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    width: 100%;
}

.sb-care-card li {
    width: 100%;
    max-width: 260px;
}

/* ---------- SELECTOR CARDS ---------- */
.sb-care-selector{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:26px; max-width:680px; margin:40px auto 60px;
}
.sb-type-card{
    background:var(--bg); border-radius:18px; overflow:hidden;
    box-shadow:var(--shadow); height:240px; position:relative;
    cursor:pointer; transition:.3s;
}
.sb-type-card.active{outline:6px solid var(--green); outline-offset:-6px;}
.sb-type-card:hover{transform:translateY(-6px); box-shadow:0 20px 36px rgba(0,0,0,0.14);}
.sb-type-card img{
    width:100%;height:100%;object-fit:cover;object-position:bottom center;
}
.sb-type-card .overlay{
    position:absolute; bottom:0; width:100%;
    background:linear-gradient(transparent,rgba(0,0,0,0.65));
    padding:26px 12px 18px; color:#fff; text-align:center;
    font-family:"Playfair Display",serif; font-size:1.25rem;
}

/* ---------- CAPTION ---------- */
.sb-care-caption{
    background:var(--bg); padding:28px;
    border-radius:22px; box-shadow:var(--shadow);
    text-align:center; font-size:1.15rem;
    max-width:860px; margin:0 auto 40px;
}

/* ---------- HORIZONTAL STRIP WRAPPER ---------- */
.sb-steps-wrapper {
    position: relative;
    /* UPDATED: Allow wrapper to stretch closer to 1400px limit */
    max-width: 1300px;
    margin: 0 auto;
}

/* NAVIGATION ARROWS */
.sb-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    background: #fff; border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: none; color: var(--green);
    font-size: 24px; cursor: pointer; z-index: 10;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; opacity: 0; pointer-events: none; /* Hidden by default */
}
.sb-nav-arrow.visible { opacity: 1; pointer-events: auto; }
.sb-nav-arrow:hover { background: var(--green); color: #fff; }
.sb-prev { left: -10px; }
.sb-next { right: -10px; }


/* ---------- SCROLL CONTAINER ---------- */
.sb-care-steps {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 20px 10px 40px; 
    scrollbar-width: none; 
    scroll-behavior: smooth;
    
    /* Ensure it centers if fewer items, but left aligns if scrolling */
    margin: 0 auto;
    width: 100%;
}
.sb-care-steps::-webkit-scrollbar{display:none;}

/* ---------- INDIVIDUAL CARD ---------- */
.sb-care-card{
    flex: 0 0 300px; width: 300px; 
    height: 380px; 
    background: var(--bg); border-radius: 22px; box-shadow: var(--shadow);
    overflow: hidden; scroll-snap-align: center;
    display: flex; flex-direction: column; position: relative;
    transition: .25s;
}
.sb-care-card:hover{transform:translateY(-6px);}
.sb-care-card img{ width:100%; height:160px; object-fit:cover; border-radius:22px 22px 0 0; }
/* Fallback img */
.sb-care-card img:not([src]), .sb-care-card img[src=""] {
    content:url("/mnt/data/20e16670-3bda-4b26-bf29-60b64718d752.png");
}

.sb-care-card .body{
    padding:18px 22px; text-align:center;
    display:flex; flex-direction:column; justify-content:flex-start; flex-grow: 1;
}
.sb-care-card h3{font-size:1.35rem; margin:0 0 10px; line-height: 1.3;}
.sb-care-card p,.sb-care-card ul{font-size:1.03rem; margin:0 0 10px;}
.sb-care-card ul{padding-left:18px; text-align:left; display:inline-block;}

.sb-care-tip{
    background:rgba(74,102,85,0.08); border-left:5px solid var(--green);
    padding:12px 14px; border-radius:12px;
    font-size:.98rem; text-align:left; margin-top: auto; 
}

/* ---------- STEP BADGES ---------- */
.sb-step-badge{
    position:absolute; top:10px; left:10px;
    width:38px; height:38px; border-radius:50%;
    background:var(--green); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:"Playfair Display",serif; font-size:1.1rem;
    box-shadow:0 8px 18px rgba(0,0,0,0.12); z-index: 2;
}

/* ---------- FLOWER TIPS ---------- */
.sb-care-mini{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:28px; max-width:1000px; margin:60px auto 0;
}
.sb-care-mini .mini{
    background:var(--bg); padding:28px; border-radius:18px;
    box-shadow:var(--shadow); text-align:center;
}
.sb-care-mini strong{color:var(--green); font-size:1.25rem;}


/* ==========================================================
   MOBILE & TABLET SHRINKING
========================================================== */
@media (max-width: 768px) {
    /* Shrink Container & Fonts */
    .sb-ui.sb-care-guide-scope { padding: 30px 15px 60px; }
    .sb-care-guide-scope h1 { font-size: 1.8rem; margin-bottom: 10px; }
    .sb-care-guide-scope p { font-size: 1rem !important; line-height: 1.5; }
    .sb-care-guide-scope h2 { font-size: 1.6rem; margin: 50px 0 20px; }

    /* Shrink Selector Cards */
    .sb-care-selector { 
        grid-template-columns: 1fr 1fr; 
        gap: 12px; margin: 20px auto 40px; 
    }
    .sb-type-card { height: 160px; border-radius: 12px; }
    .sb-type-card .overlay { padding: 10px; font-size: 1rem; }

    /* Shrink & Adjust Scroll Cards */
    .sb-care-card {
        flex: 0 0 260px; width: 260px; /* Narrower */
        height: 340px; /* Shorter */
    }
    .sb-care-card img { height: 130px; }
    .sb-care-card h3 { font-size: 1.2rem; }
    .sb-care-card p, .sb-care-card ul { font-size: 0.95rem; }

    /* Adjust Arrows for touch screens */
    .sb-nav-arrow { width: 36px; height: 36px; font-size: 18px; background: rgba(255,255,255,0.95); }
    .sb-prev { left: 0; }
    .sb-next { right: 0; }

}


}