/* =========================================================
   SAFE PRODUCT BRAND CONSOLE
========================================================= */

.safe-brand-console{
    width:100%;
    padding:28px 0;
    overflow:hidden;
    background:#fff;
    position:relative;
}


/* =========================================================
   SECTION HEADER
========================================================= */

.safe-section-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
    padding:0 24px;
}

.safe-section-heading-wrap{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.safe-section-title{
    font-size:28px;
    font-weight:700;
    color:#1d2939;
    margin:0;
    line-height:1.2;
}

.safe-section-subtitle{
    font-size:15px;
    color:#667085;
    margin:0;
    line-height:1.5;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.safe-view-all-btn{
    border:none;
    background:#f3f4f6;
    color:#344054;
    font-size:14px;
    font-weight:600;
    padding:12px 18px;
    border-radius:14px;
    cursor:pointer;
    transition:all .25s ease;
}

.safe-view-all-btn:hover{
    background:#f97316;
    color:#fff;
}


/* =========================================================
   BRAND STRIP WRAPPER
========================================================= */

.safe-brand-strip-wrap{
    width:100%;
    overflow:hidden;
    position:relative;
}


/* =========================================================
   MOVING STRIP
========================================================= */

.safe-brand-strip{
    display:flex;
    align-items:center;
    gap:18px;
    width:max-content;

    animation:safeBrandFlow 28s linear infinite;
}

.safe-brand-strip:hover{
    animation-play-state:paused;
}


/* =========================================================
   BRAND CARD
========================================================= */

.safe-brand-logo-card{
    min-width:170px;
    height:110px;

    background:#fff;

    border:1px solid #eaecf0;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    transition:all .28s ease;

    box-shadow:
    0 2px 10px rgba(0,0,0,0.04);

    padding:18px;
}

.safe-brand-logo-card:hover{

    transform:translateY(-6px) scale(1.04);

    box-shadow:
    0 10px 30px rgba(249,115,22,0.14);

    border-color:#f97316;
}


.safe-brand-logo-card img{
    max-width:100%;
    max-height:58px;
    object-fit:contain;
    transition:all .3s ease;
}

.safe-brand-logo-card:hover img{
    transform:scale(1.08);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes safeBrandFlow{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .safe-brand-console{
        padding:22px 0;
    }

    .safe-section-header{
        padding:0 14px;
        margin-bottom:18px;
    }

    .safe-section-title{
        font-size:22px;
    }

    .safe-section-subtitle{
        font-size:13px;
    }

    .safe-view-all-btn{
        padding:10px 14px;
        font-size:13px;
        border-radius:12px;
    }

    .safe-brand-strip{
        gap:12px;
    }

    .safe-brand-logo-card{

        min-width:130px;
        height:88px;

        border-radius:18px;

        padding:14px;
    }

    .safe-brand-logo-card img{
        max-height:42px;
    }

}


/* =========================================================
   BRAND GRID
========================================================= */

.safe-brand-list-view{

    padding:
        0 18px 24px;

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:16px;

    overflow-y:auto;
}


/* =========================================================
   BRAND CARD
========================================================= */

.safe-brand-list-card{

    background:#fff;

    border:
        1px solid #e2e8f0;

    border-radius:22px;

    padding:18px;

    cursor:pointer;

    transition:all .25s ease;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:14px;

    min-height:170px;

    text-align:center;
}

.safe-brand-list-card:hover{

    transform:
        translateY(-4px);

    border-color:#f97316;

    box-shadow:
        0 12px 28px rgba(15,23,42,0.08);
}


/* =========================================================
   BRAND IMAGE
========================================================= */

.safe-brand-card-image-wrap{

    width:100%;
    height:80px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.safe-brand-card-image-wrap img{

    max-width:100%;
    max-height:68px;

    object-fit:contain;

    transition:all .25s ease;
}

.safe-brand-list-card:hover img{

    transform:
        scale(1.05);
}


/* =========================================================
   BRAND NAME
========================================================= */

.safe-brand-card-name{

    font-size:15px;
    font-weight:600;

    color:#0f172a;

    line-height:1.4;
}


/* =========================================================
   SELECTED BRAND VIEW
========================================================= */

.safe-selected-brand-view{
    padding:0 18px 28px;
}


/* =========================================================
   BRAND HERO
========================================================= */

.safe-selected-brand-hero{

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    padding:
        12px 0 22px;
}

.safe-selected-brand-logo{

    width:180px;
    height:180px;

    background:#fff;

    border:
        1px solid #e2e8f0;

    border-radius:32px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:22px;

    margin-bottom:20px;
}

.safe-selected-brand-logo img{

    max-width:100%;
    max-height:100%;

    object-fit:contain;
}

.safe-selected-brand-title{

    margin:0;

    font-size:28px;
    font-weight:700;

    color:#0f172a;
}

.safe-selected-brand-info{

    margin-top:12px;

    background:#f0fdf4;

    color:#15803d;

    padding:
        8px 14px;

    border-radius:999px;

    font-size:13px;
    font-weight:600;
}


/* =========================================================
   BRAND DESCRIPTION
========================================================= */

.safe-selected-brand-short-desc{

    font-size:16px;
    font-weight:600;

    color:#0f172a;

    line-height:1.6;

    margin-bottom:16px;
}

.safe-selected-brand-long-desc{

    font-size:15px;

    color:#475467;

    line-height:1.8;
}


/* =========================================================
   ACTION BUTTONS
========================================================= */

.safe-selected-brand-actions{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:14px;

    margin-top:28px;
}

.safe-brand-knowledge-btn,
.safe-brand-shop-btn{

    height:52px;

    border-radius:16px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:all .25s ease;
}

.safe-brand-knowledge-btn{

    background:#f8fafc;

    color:#0f172a;

    border:
        1px solid #e2e8f0;
}

.safe-brand-shop-btn{

    background:#16a34a;

    color:#fff;
}

.safe-brand-knowledge-btn:hover{

    background:#eef2f6;
}

.safe-brand-shop-btn:hover{

    background:#f97316;

    color:#ffffff;

    border-color:#fd6900;

    box-shadow:
        0 8px 20px rgba(249,115,22,0.22);

    transform:translateY(-2px);
}

.safe-brand-knowledge-btn:hover{

    background:#fff7ed;

    border-color:#fdba74;

    color:#f97316;
}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .safe-brand-list-view{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:12px;

        padding:
            0 14px 22px;
    }

    .safe-brand-list-card{

        border-radius:18px;

        min-height:150px;

        padding:14px;
    }

    .safe-brand-card-image-wrap{

        height:64px;
    }

    .safe-brand-card-image-wrap img{

        max-height:52px;
    }

    .safe-brand-card-name{

        font-size:14px;
    }

    .safe-selected-brand-logo{

        width:160px;
        height:160px;

        border-radius:28px;
    }

    .safe-selected-brand-title{

        font-size:24px;
    }

    .safe-selected-brand-actions{

        grid-template-columns:1fr;
    }

}

/* =========================================================
   BRAND PRODUCTS HEADER
========================================================= */

.safe-brand-products-header{

    padding:
        4px 24px 10px;
}