/* ============================================================
   1SAFETY EDUCATION SIDEBAR — CLEAN FINAL
   Isolated component. Desktop and mobile derive from the same markup.
   ============================================================ */

.edu-sidebar,
.edu-sidebar * { box-sizing: border-box; }
.edu-sidebar { width: 100%; min-width: 0; color: #15181c; }
.edu-sidebar__stack { display: flex; flex-direction: column; gap: 12px; }
.edu-shell__rail--desktop .edu-sidebar__stack { position: sticky; top: 82px; }

.edu-sidebar__card {
    overflow: hidden;
    border: 1px solid #dfe3e7;
    border-radius: 12px;
    background: #fff;
}
.edu-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 14px;
    border-bottom: 1px solid #edf0f2;
}
.edu-sidebar__head h3 {
    position: relative;
    margin: 0;
    padding-left: 10px;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 760;
}
.edu-sidebar__head h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: #ffd000;
}
.edu-sidebar__head > a { color: #747d87; font-size: 11px; font-weight: 650; text-decoration: none; }

/* Article */
.edu-sidebar__article-image {
    position: relative;
    display: block;
    width: calc(100% - 24px);
    aspect-ratio: 16 / 9;
    margin: 12px 12px 0;
    overflow: hidden;
    border-radius: 10px;
    background: #f2f4f6;
}
.edu-sidebar__article-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.edu-sidebar__article-image > span { display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:800; }
.edu-sidebar__article-image > b {
    position: absolute;
    left: 8px;
    bottom: 8px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: #34393f;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}
.edu-sidebar__article-body { padding: 10px 14px 13px; }
.edu-sidebar__article-title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #15181c;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 760;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.edu-sidebar__article-body > p {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 12px;
    color: #747d87;
    font-size: 11.5px;
    line-height: 1.42;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.edu-sidebar__article-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.edu-sidebar__meta { display:flex; align-items:center; gap:10px; min-width:0; color:#77818b; font-size:9.5px; white-space:nowrap; }
.edu-sidebar__date,
.edu-sidebar__views { display:inline-flex; align-items:center; gap:4px; }
.edu-sidebar__meta-icon {
    width:12px;
    height:12px;
    flex:0 0 12px;
    fill:none;
    stroke:#7a838d;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.edu-sidebar__article-cta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 12px;
    border-radius:9px;
    background:#ffd000;
    color:#111;
    font-size:11px;
    font-weight:760;
    text-decoration:none;
    white-space:nowrap;
}
.edu-sidebar__article-cta span { margin-left:6px; font-size:14px; }

/* App promo */
.edu-sidebar__app {
    position: relative;
    display: block;
    min-height: 150px;
    padding: 16px 108px 14px 16px;
    overflow: hidden;
    border: 1px solid #efd568;
    border-radius: 12px;
    background: linear-gradient(135deg,#fff8d6 0%,#ffe16c 100%);
    color: #171a1e;
    text-decoration: none;
}
.edu-sidebar__app-copy { position:relative; z-index:2; }
.edu-sidebar__app-copy > strong { display:block; margin-bottom:7px; font-size:14px; line-height:1.2; font-weight:780; }
.edu-sidebar__app-copy > span { color:#565e66; font-size:11.5px; line-height:1.35; }
.edu-sidebar__stores { display:flex; gap:6px; margin-top:13px; }
.edu-sidebar__stores i {
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:78px;
    height:32px;
    padding:4px 7px;
    border-radius:6px;
    background:#111;
    color:#fff;
    font-style:normal;
}
.edu-sidebar__stores small { margin-bottom:2px; color:#d8d8d8; font-size:6px; line-height:1; text-transform:uppercase; }
.edu-sidebar__stores b { font-size:9px; line-height:1; font-weight:650; }
.edu-sidebar__phone {
    position:absolute;
    right:16px;
    bottom:-12px;
    width:76px;
    height:138px;
    border:4px solid #111;
    border-radius:15px;
    background:linear-gradient(160deg,#26292d 0%,#050607 72%);
    box-shadow:0 8px 18px rgba(0,0,0,.18);
    transform:rotate(6deg);
}
.edu-sidebar__phone i {
    position:absolute; left:50%; top:47%; width:11px; height:18px;
    border-left:5px solid #ffd000; border-right:2px solid #ffd000;
    transform:translate(-50%,-50%) skewY(16deg);
}
.edu-sidebar__phone b { position:absolute; left:50%; top:61%; transform:translate(-50%,-50%); color:#fff; font-size:7px; font-weight:800; }

/* Products */
.edu-sidebar__product-list { padding: 6px 12px 8px; }
.edu-sidebar__product {
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 32px;
    align-items:center;
    gap:10px;
    min-height:86px;
    padding:7px 0;
}
.edu-sidebar__product + .edu-sidebar__product { border-top:1px solid #eef0f2; }
.edu-sidebar__product-image {
    display:flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    padding:4px;
    overflow:hidden;
    border-radius:9px;
    background:#f7f8f9;
}
.edu-sidebar__product-image img { width:100%; height:100%; object-fit:contain; }
.edu-sidebar__product-info { min-width:0; }
.edu-sidebar__product-title {
    display:-webkit-box;
    overflow:hidden;
    margin-bottom:7px;
    color:#2b3035;
    font-size:12px;
    line-height:1.25;
    font-weight:600;
    text-decoration:none;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.edu-sidebar__product-info strong { color:#111318; font-size:15px; line-height:1.15; font-weight:800; }
.edu-sidebar__fav {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    padding:5px;
    border:1px solid #e1e5e9;
    border-radius:8px;
    background:#fff;
    cursor:pointer;
}
.edu-sidebar__fav svg { width:18px; height:18px; fill:none; stroke:#171a1e; stroke-width:1.7; }
.edu-sidebar__empty { padding:16px 2px; color:#7b848d; font-size:12px; }

@media (max-width: 1024px) {
    .edu-sidebar__stack { gap:12px; }
    .edu-sidebar__head { min-height:44px; }
    .edu-sidebar__article-image { aspect-ratio:16 / 9; }
    .edu-sidebar__article-title { font-size:15px; -webkit-line-clamp:2; }
    .edu-sidebar__article-body > p { display:none; }
    .edu-sidebar__article-bottom { margin-top:10px; }
    .edu-sidebar__article-cta {
        width:30px !important;
        min-width:30px !important;
        min-height:30px !important;
        padding:0 !important;
        border-radius:8px;
        background:transparent !important;
        font-size:0 !important;
    }
    .edu-sidebar__article-cta span { margin:0 !important; font-size:22px !important; line-height:1; }

    .edu-sidebar__app { min-height:132px; padding:14px 94px 12px 14px; }
    .edu-sidebar__phone { right:14px; width:66px; height:122px; }
    .edu-sidebar__stores i { min-width:72px; height:31px; }

    .edu-sidebar__product-list {
        display:flex;
        gap:10px;
        padding:10px 12px 14px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        scrollbar-width:none;
    }
    .edu-sidebar__product-list::-webkit-scrollbar { display:none; }
    .edu-sidebar__product {
        position:relative;
        flex:0 0 calc(50% - 5px);
        width:calc(50% - 5px);
        max-width:none;
        min-width:0;
        display:block;
        min-height:0;
        padding:0;
        overflow:hidden;
        border:1px solid #e2e6e9 !important;
        border-radius:11px;
        background:#fff;
        scroll-snap-align:start;
    }
    .edu-sidebar__product + .edu-sidebar__product { border-top:1px solid #e2e6e9; }
    .edu-sidebar__product-image { width:100%; height:104px; padding:8px; border-radius:0; }
    .edu-sidebar__product-info { padding:9px 10px 11px; }
    .edu-sidebar__product-title { min-height:30px; margin-bottom:7px; }
    .edu-sidebar__product-info strong { font-size:14px; }
    .edu-sidebar__fav {
        position:absolute;
        right:8px;
        top:8px;
        width:28px;
        height:28px;
        background:rgba(255,255,255,.96);
    }
}