/* ==============================================================
   ROW HEADER
================================================================ */
.shop-row{margin-bottom:60px;}
.row-header{margin-bottom:15px;}

.row-header-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
}

.row-icon,
.row-icon--placeholder{
    width:25px;
    height:25px;
}
.row-icon--placeholder{
    border-radius:50%;
    background:var(--surface-4);
}

.row-title{
    font-size:20px;          /* ← explicit size */
    font-weight:700;
    line-height:1;
    font-family:var(--font-family-heading,var(--font-family,inherit));
    color:var(--text-body);
    transition:color .15s;
}
.row-header-link:hover .row-title{color:var(--cta);}

/* ==============================================================
   SCROLL STRIP & CUSTOM BAR
================================================================ */
.row-scroll-wrapper{
    position:relative;
    margin-bottom:34px;           /* gap for custom bar */
}

.row-scroll{
    display:flex;
    gap:16px;
    overflow-x:auto;
    overflow-y: hidden;
    position: relative;
    padding-bottom:8px;
}

/* ==============================================================
   GREY PILL
================================================================ */
.pill{
    flex:0 0 auto;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:var(--border-radius);
    padding:10px;
    display:flex;
    gap:10px;
    align-items:flex-start;
    box-shadow:0 12px 28px rgba(var(--brand-primary-rgb), 0.05);
}

/* ==============================================================
   PARENT / "ALL" CARD
================================================================ */
.cat-card{
    position:relative;
    flex:none;
    width:var(--card-w);
    aspect-ratio:16/9;
    border-radius:calc(var(--border-radius) + 2px);

    /* placeholder + thumbnail */
    background-color:var(--background-grey);
    background-image:var(--thumb);
    background-size:cover;
    background-position:center;

    filter:brightness(100%);
    transition:filter .15s;
}
.cat-card:hover{filter:brightness(108%);}

.cat-title{
    position:absolute;
    left:50%;
    bottom:12px;
    transform:translateX(-50%);
    width:90%;
    text-align:center;
    color:var(--white);
    font-size:16px;
    font-weight:600;
    text-shadow:0 0 3px rgba(0,0,0,.7);
}

/* ==============================================================
   KID GRID   (2 rows, no row-gap)
================================================================ */
.kid-grid{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(2,1fr);
    column-gap:8px;
    row-gap:0;
    height:100%;
    min-width:calc(var(--card-w) * 0.5);
}

/* -------------------------------------------------------------- */
.kid-card{
    position:relative;
    width:calc(var(--card-w) * 0.5);
    aspect-ratio:16/9;
    border-radius:calc(var(--border-radius) + 2px);

    background-color:var(--background-grey);
    background-image:var(--thumb);
    background-size:cover;
    background-position:center;

    filter:brightness(100%);
    transition:filter .15s;
}
.kid-card:hover{filter:brightness(108%);}

.kid-title{
    position:absolute;
    left:50%;
    bottom:6px;
    transform:translateX(-50%);
    width:90%;
    text-align:center;
    color:var(--white);
    font-size:13px;
    font-weight:600;
    text-shadow:0 0 3px rgba(0,0,0,.7);
}

/* ==============================================================
   MOBILE  (narrower kids)
================================================================ */
@media (max-width:480px){
    .kid-card{width:calc(var(--card-w) * 0.55);}
    .kid-grid{min-width:calc(var(--card-w) * 0.55);}
}