@charset "UTF-8";

/* ============================================================
   COSME-BLOCK — сітка категорій космецевтики
   ============================================================ */
.cosme-block{
    --cs-paper:#ffffff;
    --cs-ink:#2b1b3d;
    --cs-ink-soft:#7a688a;
    --cs-purple:var(--dp-primary);
    --cs-purple-bright:var(--dp-primary);
    --cs-mist:#f4eefa;
    --cs-line:#e8ddf2;
    --cs-shadow:rgba(80,35,110,.07);
    --cs-shadow-hover:rgba(80,35,110,.16);

    max-width:1100px;
    margin:0 auto;
    padding:8px 10px 4px;
    font-family:'Rubik','Work Sans',-apple-system,'Segoe UI',Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
.cosme-block *{ box-sizing:border-box; }

/* ===== СІТКА ===== */
.cosme-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

/* ===== КАРТКА ===== */
.cosme-card{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:86px;
    padding:18px 14px;
    background:var(--cs-paper);
    border:1px solid var(--cs-line);
    border-radius:16px;
    box-shadow:0 2px 10px var(--cs-shadow);
    text-decoration:none;
    text-align:center;
    color:var(--cs-ink);
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
    white-space:normal !important;
    word-wrap:break-word;
    word-break:break-word;
}
/* тонка акцентна смужка згори, з'являється на ховері */
.cosme-card::before{
    content:'';
    position:absolute;
    top:0; left:50%;
    width:0; height:3px;
    border-radius:0 0 3px 3px;
    background:linear-gradient(90deg,var(--cs-purple),var(--cs-purple-bright));
    transform:translateX(-50%);
    transition:width .3s ease;
}
.cosme-card:hover,
.cosme-card:focus-visible{
    transform:translateY(-4px);
    border-color:#dcc8ec;
    background:linear-gradient(180deg,#ffffff 0%,#fbf6ff 100%);
    box-shadow:0 12px 28px var(--cs-shadow-hover);
    color:var(--cs-purple);
}
.cosme-card:hover::before,
.cosme-card:focus-visible::before{ width:56%; }

/* ===== НАЗВА / ПІДПИС ===== */
.cosme-name{
    font-weight:500;
    font-size:14.5px;
    line-height:1.35;
    color:inherit;
    letter-spacing:.1px;
    transition:color .25s ease;
}
.cosme-sub{
    margin-top:4px;
    font-size:11.5px;
    font-weight:400;
    line-height:1.25;
    color:var(--cs-ink-soft);
}

/* ===== ЗАГОЛОВОК-РОЗДІЛЮВАЧ ===== */
.cosme-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin:34px 0 16px;
    text-decoration:none;
}
.cosme-head-rule{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,rgba(155,77,202,0) 0%,var(--cs-line) 45%,var(--cs-line) 55%,rgba(155,77,202,0) 100%);
}
.cosme-head-text{
    flex:0 0 auto;
    font-size:17px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--cs-purple);
    line-height:1.2;
    padding:0 2px;
    transition:color .25s ease, letter-spacing .25s ease;
}
.cosme-head:hover .cosme-head-text{
    color:var(--cs-purple-bright);
    letter-spacing:2px;
}

/* ===== БЛОК «КОСМЕТОЛОГУ» — трохи акцентніший ===== */
.cosme-grid--pro .cosme-card{
    background:linear-gradient(160deg,#faf5fe 0%,#f4ecfb 100%);
    border-color:#e4d5f1;
}
.cosme-grid--pro .cosme-card:hover,
.cosme-grid--pro .cosme-card:focus-visible{
    background:linear-gradient(160deg,#ffffff 0%,#f7f0fd 100%);
    border-color:#cbaee0;
}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:992px){
    .cosme-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
    .cosme-card{ min-height:74px; padding:15px 11px; border-radius:14px; }
    .cosme-name{ font-size:13.5px; }
    .cosme-head{ margin:28px 0 14px; gap:12px; }
    .cosme-head-text{ font-size:15.5px; }
}

@media (max-width:576px){
    .cosme-block{ padding:6px 6px 2px; }
    .cosme-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
    .cosme-card{
        min-height:64px;
        padding:13px 9px;
        border-radius:13px;
        box-shadow:0 2px 8px var(--cs-shadow);
    }
    .cosme-name{ font-size:12.5px; }
    .cosme-sub{ font-size:10.5px; }
    .cosme-head{ margin:22px 0 12px; gap:10px; }
    .cosme-head-text{ font-size:14px; letter-spacing:1px; }
    .cosme-card:hover{ transform:none; box-shadow:0 2px 8px var(--cs-shadow); }
    .cosme-card:hover::before{ width:0; }
}

@media (max-width:400px){
    .cosme-grid{ gap:8px; }
    .cosme-card{ min-height:56px; padding:11px 7px; border-radius:11px; }
    .cosme-name{ font-size:11.5px; }
    .cosme-head-text{ font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
    .cosme-card, .cosme-card::before, .cosme-head-text{ transition:none !important; }
    .cosme-card:hover{ transform:none; }
}