/*
 * Purple Business Academy
 * Stable archive CSS
 *
 * IMPORTANT:
 * - No price filter
 * - No language filter
 * - Category filter only
 * - Product cards never stretch to the row height
 */

/* Bengali font fallback. If your site already loads a Bengali font,
   that font remains first through inherit. */
.pba-archive{
    --pba-purple:#47208f;
    --pba-purple-dark:#2c1264;
    --pba-purple-soft:#f7f1ff;
    --pba-border:#e6dfeb;
    --pba-text:#30283a;
    --pba-muted:#7f7787;
    font-family:inherit;
    color:var(--pba-text);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}

.pba-archive,
.pba-archive *{box-sizing:border-box}

.pba-archive a{text-decoration:none!important}
.pba-archive img{max-width:100%}
.pba-wrap{width:min(100% - 32px,1260px);margin:0 auto}

/* HERO */
.pba-hero{
    width:min(100% - 32px,1260px);
    margin:16px auto 0;
    border-radius:18px;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(circle at 90% 15%,rgba(190,90,225,.20),transparent 21%),
        linear-gradient(115deg,#2c1264,#472395 65%,#3b1c7c);
}

.pba-hero-inner{
    min-height:365px;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:38px 40px;
}

.pba-hero-copy{position:relative;z-index:2}
.pba-hero-tag{
    display:inline-block;
    padding:7px 13px;
    border-radius:99px;
    background:rgba(255,255,255,.11);
    font-size:11px;
    color:#fff;
}

.pba-hero h1{
    margin:18px 0 14px;
    font-size:clamp(40px,5vw,62px);
    line-height:1.12;
    letter-spacing:-1px;
    color:#fff;
    font-weight:600;
}

.pba-hero h1 em{
    font-style:normal;
    color:#d995e7;
}

.pba-hero p{
    max-width:530px;
    margin:0 0 20px;
    color:#eee8f7;
    font-size:14px;
    line-height:1.8;
}

.pba-primary{
    display:inline-flex;
    gap:18px;
    align-items:center;
    padding:12px 17px;
    border-radius:8px;
    background:#fff!important;
    color:#44218e!important;
    font-size:12px;
    font-weight:800;
}

.pba-primary b{font-size:18px}

.pba-hero-art{
    height:310px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.pba-dots{
    position:absolute;
    right:0;
    top:0;
    width:130px;
    height:130px;
    background-image:radial-gradient(#9c4ed0 1.7px,transparent 1.7px);
    background-size:15px 15px;
    opacity:.45;
}

.pba-ring{
    position:absolute;
    bottom:27px;
    width:300px;
    height:75px;
    border-radius:50%;
    background:rgba(25,7,65,.5);
}

.pba-books{
    position:relative;
    width:380px;
    height:300px;
    z-index:2;
}

.pba-book{
    position:absolute!important;
    left:50%;
    top:50%;
    width:190px!important;
    height:245px!important;
    object-fit:contain!important;
    margin:0!important;
    filter:drop-shadow(0 18px 12px rgba(0,0,0,.28));
}

.pba-book-1{transform:translate(-80%,-50%) rotate(-10deg);z-index:1}
.pba-book-2{transform:translate(-20%,-50%) rotate(8deg);z-index:2}
.pba-book-3{transform:translate(-50%,-53%) rotate(2deg);z-index:3}

/* BENEFITS */
.pba-benefits{padding:15px 0 24px}

.pba-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid var(--pba-border);
    border-radius:15px;
    padding:5px;
}

.pba-benefit-grid>div{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px 18px;
    border-right:1px solid #eeeaf1;
}

.pba-benefit-grid>div:last-child{border-right:0}

.pba-benefit-grid b{
    width:43px;
    height:43px;
    flex:0 0 43px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f6efff;
    color:#6233aa;
}

.pba-benefit-grid span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.pba-benefit-grid strong{font-size:17px;color:#5c2a9d;font-weight:700}
.pba-benefit-grid small{font-size:13px;line-height:1.55;color:#777080}

/* PRODUCTS */
.pba-products{padding:18px 0 42px}

.pba-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin-bottom:18px;
}

.pba-heading h2{
    margin:0 0 7px;
    font-size:28px;
    line-height:1.15;
    color:#2d2635;
    font-weight:600;
}

.pba-heading h2 sup{
    font-size:12px;
    color:#a56bd9;
}

.pba-heading p{
    margin:0;
    font-size:11px;
    color:#817989;
}

/*
 * MAIN FILTER + GRID
 * align-items:start is critical.
 */
.pba-main{
    display:grid;
    grid-template-columns:205px minmax(0,1fr);
    gap:27px;
    align-items:start!important;
}

/* SIDEBAR */
.pba-filter{
    align-self:start!important;
    height:auto!important;
    min-height:0!important;
    border:1px solid var(--pba-border);
    border-radius:12px;
    padding:20px 16px;
    background:#fff;
}

.pba-filter h3{
    margin:0 0 20px;
    font-size:21px;
    line-height:1.3;
    font-weight:600;
    color:#3b3343;
}

.pba-filter-title{
    padding:14px 0 10px;
    border-top:1px solid #eeeaf1;
    font-size:15px;
    font-weight:700;
    color:#4a4052;
}

/* Clickable category links */
.pba-category-filter{
    width:100%;
    min-height:40px;
    display:flex!important;
    align-items:center;
    gap:9px;
    padding:7px 0!important;
    color:#777080!important;
    font-size:14px;
    cursor:pointer;
}

.pba-category-filter:hover{color:#51249d!important}

.pba-radio{
    width:16px;
    height:16px;
    flex:0 0 16px;
    border:1.5px solid #cfc7d7;
    border-radius:50%;
    position:relative;
}

.pba-category-filter.is-active .pba-radio{
    border-color:#5a27a6;
}

.pba-category-filter.is-active .pba-radio:after{
    content:"";
    position:absolute;
    inset:3px;
    border-radius:50%;
    background:#5a27a6;
}

.pba-cat-name{
    flex:1;
    min-width:0;
    overflow-wrap:anywhere;
}

.pba-category-filter em{
    font-style:normal;
    min-width:29px;
    padding:5px 6px;
    text-align:center;
    border-radius:6px;
    background:#f1edf5;
    color:#756b7e;
    font-size:11px;
}

.pba-category-filter.is-active .pba-cat-name{
    color:#54249f;
    font-weight:700;
}

.pba-category-filter.is-active em{
    background:#ede3fa;
    color:#54249f;
}

.pba-no-filter{
    margin:9px 0 0;
    padding-top:10px;
    border-top:1px solid #eeeaf1;
    color:#9a929f;
    font-size:11px;
    line-height:1.7;
}

.pba-reset{
    display:flex!important;
    justify-content:center;
    align-items:center;
    gap:7px;
    border:1px solid #ddd6e6;
    border-radius:7px;
    padding:10px;
    margin-top:14px;
    color:#6e6577!important;
    font-size:11px;
}

.pba-reset:hover{
    border-color:#6a35b1;
    color:#54249f!important;
}

/* GRID */
.pba-grid{
    min-width:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
    align-items:start!important;
    align-content:start!important;
}

/* CARD - compact cards, image fills the full card width */
.pba-card{
    width:100%;
    height:auto!important;
    min-height:0!important;
    align-self:start!important;
    display:block!important;
    overflow:hidden;
    border:1px solid #e5e0e9;
    border-radius:11px;
    background:#fff;
    box-shadow:none!important;
}

.pba-card-image{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    position:relative;
    overflow:hidden;
    background:#a70db2;
    line-height:0;
    padding:0!important;
    margin:0!important;
}

.pba-card-image img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    min-width:100%!important;
    object-fit:fill!important;
    margin:0!important;
    padding:0!important;
}

.pba-card-image>span{
    position:absolute;
    left:10px;
    top:10px;
    z-index:2;
    background:#ead8ff;
    color:#6030a3;
    border-radius:6px;
    padding:7px 10px;
    font-size:11px;
    font-weight:700;
    line-height:1.2;
}

.pba-card-body{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    padding:14px 14px 15px!important;
}

.pba-card-body h3{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:52px!important;
    overflow:hidden;
    margin:0 0 10px!important;
    font-size:18px!important;
    line-height:1.55!important;
    font-weight:700!important;
}

.pba-card-body h3 a{color:#3c3345!important}

.pba-price{
    margin:0 0 13px;
    font-size:19px!important;
    font-weight:900;
    color:#42208d;
    line-height:1.25;
}

.pba-details{
    width:100%;
    min-height:42px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:7px!important;
    background:#4b2098!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:1!important;
    padding:11px 12px!important;
    text-align:center;
}

.pba-details:hover{
    background:#35146f!important;
    color:#fff!important;
}

.pba-details span{
    font-size:16px;
    line-height:1;
}

/* EMPTY */
.pba-empty{
    grid-column:1/-1;
    padding:50px 20px;
    text-align:center;
    border:1px dashed #ddd5e7;
    border-radius:10px;
}

.pba-empty h3{margin:0 0 10px;font-size:16px}
.pba-empty a{color:#54249f!important;font-size:11px;font-weight:700}

/* PAGINATION */
.pba-pagination{
    text-align:center;
    margin-top:24px;
}

.pba-pagination ul{
    display:flex;
    justify-content:center;
    gap:6px;
    list-style:none;
    padding:0;
    margin:0;
}

.pba-pagination li{margin:0}

.pba-pagination a,
.pba-pagination span{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border:1px solid #e4dfe9;
    border-radius:6px;
    color:#625b6b!important;
    font-size:11px;
}

.pba-pagination .current{
    background:#5727a7;
    color:#fff!important;
    border-color:#5727a7;
}

/* WHY */
.pba-why{
    width:min(100% - 32px,1260px);
    margin:8px auto 35px;
    padding:24px 0;
    background:linear-gradient(100deg,#f8f1ff,#f3ebfd);
    border:1px solid #e9e0f4;
    border-radius:13px;
}

.pba-why-head{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:17px;
}

.pba-why-head span{
    font-size:9px;
    font-weight:900;
    letter-spacing:1px;
    color:#9b48c3;
}

.pba-why-head h2{
    font-size:21px;
    margin:0;
    color:#4b238d;
    font-weight:600;
}

.pba-why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.pba-why-grid>div{
    display:flex;
    gap:9px;
    align-items:center;
}

.pba-why-grid b{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    border:1px solid #dccbef;
    color:#6737aa;
    background:#fff;
}

.pba-why-grid span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.pba-why-grid strong{font-size:10px}
.pba-why-grid small{font-size:8px;line-height:1.5;color:#777080}

/* RESPONSIVE */
@media(max-width:1050px){
    .pba-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pba-benefit-grid{grid-template-columns:repeat(2,1fr)}
    .pba-benefit-grid>div:nth-child(2){border-right:0}
    .pba-benefit-grid>div:nth-child(-n+2){border-bottom:1px solid #eeeaf1}
    .pba-why-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:800px){
    .pba-hero-inner{grid-template-columns:1fr;padding:32px 26px}
    .pba-hero-art{height:220px}
    .pba-main{grid-template-columns:1fr}
    .pba-filter{width:100%}
    .pba-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .pba-heading{align-items:flex-start}
}

@media(max-width:540px){
    .pba-wrap{width:calc(100% - 20px)}
    .pba-hero,.pba-why{width:calc(100% - 20px)}

    .pba-hero h1{font-size:34px}
    .pba-hero p{font-size:13px;line-height:1.7}

    /* Benefits: two columns on phones, larger readable type */
    .pba-benefit-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:3px;
    }
    .pba-benefit-grid>div{
        min-width:0;
        gap:9px;
        padding:13px 9px;
        border-right:1px solid #eeeaf1!important;
        border-bottom:1px solid #eeeaf1!important;
    }
    .pba-benefit-grid>div:nth-child(2n){border-right:0!important}
    .pba-benefit-grid>div:nth-last-child(-n+2){border-bottom:0!important}
    .pba-benefit-grid b{
        width:38px;
        height:38px;
        flex:0 0 38px;
    }
    .pba-benefit-grid strong{font-size:12px}
    .pba-benefit-grid small{font-size:10px;line-height:1.45}

    .pba-products{padding-top:14px}
    .pba-heading{display:block;margin-bottom:15px}
    .pba-heading h2{font-size:25px}
    .pba-heading p{font-size:12px;line-height:1.6}

    .pba-main{gap:14px}
    .pba-filter{padding:17px 14px}
    .pba-filter h3{font-size:20px}
    .pba-filter-title{font-size:14px}
    .pba-category-filter{
        min-height:44px;
        font-size:14px;
        gap:10px;
    }
    .pba-category-filter em{font-size:11px}
    .pba-no-filter{font-size:11px}

    /* Keep two product columns, but never force a fixed image height */
    .pba-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }
    .pba-card-image{
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
    }
    .pba-card-image img{
        width:100%!important;
        height:auto!important;
        object-fit:contain!important;
    }
    .pba-card-body{
        min-height:0!important;
        padding:10px!important;
    }
    .pba-card-body h3{
        font-size:14px!important;
        line-height:1.5!important;
        max-height:44px!important;
        margin-bottom:8px!important;
    }
    .pba-price{
        font-size:16px!important;
        margin-bottom:10px;
    }
    .pba-details{
        min-height:38px;
        padding:10px 8px!important;
        font-size:12px!important;
    }

    .pba-why-head{display:block}
    .pba-why-head span{display:block;margin-bottom:7px}
    .pba-why-head h2{font-size:21px}
    .pba-why-grid{grid-template-columns:1fr}
}


/* Final mobile readability + full-width image override */
@media(max-width:540px){
    .pba-benefit-grid strong{font-size:14px!important}
    .pba-benefit-grid small{font-size:11px!important}

    .pba-heading h2{font-size:28px!important}
    .pba-heading p{font-size:14px!important}

    .pba-filter h3{font-size:22px!important}
    .pba-filter-title{font-size:17px!important}
    .pba-category-filter{font-size:15px!important;min-height:46px}
    .pba-no-filter{font-size:12px!important}

    .pba-card-image{
        width:100%!important;
        height:auto!important;
        padding:0!important;
        margin:0!important;
        display:block!important;
        background:#a70db2!important;
    }
    .pba-card-image img{
        width:100%!important;
        min-width:100%!important;
        max-width:none!important;
        height:auto!important;
        display:block!important;
        object-fit:fill!important;
        margin:0!important;
    }

    .pba-card-body{padding:12px!important}
    .pba-card-body h3{
        font-size:16px!important;
        line-height:1.55!important;
        max-height:50px!important;
    }
    .pba-price{font-size:18px!important}
    .pba-details{
        min-height:42px!important;
        font-size:14px!important;
    }
}
@media(max-width:360px){
    .pba-grid{grid-template-columns:1fr}
    .pba-benefit-grid{grid-template-columns:1fr}
    .pba-benefit-grid>div,
    .pba-benefit-grid>div:nth-child(2n){border-right:0!important}
    .pba-benefit-grid>div:nth-last-child(-n+2){border-bottom:1px solid #eeeaf1!important}
    .pba-benefit-grid>div:last-child{border-bottom:0!important}
}