/* دیباگ | ویترین محصولات
   کارت محصول همان کارت فروشگاه است (همان کلاس‌ها، همان توکن‌ها)، تا
   محصول در بلاگ و فروشگاه یک شکل دیده شود. */

@layer components{

    .di9sc.band{position:relative;padding-block:var(--block,4rem)}
    .di9sc.band::before{
        content:"";position:absolute;z-index:-1;inset-block:0;
        inset-inline-start:50%;margin-inline-start:-50vw;inline-size:100vw;
        background:var(--bg-2);border-block:1px solid var(--line);
    }
    .di9sc .section-head h2{font-size:1.35rem}
    .di9sc .section-desc{color:var(--muted);font-size:var(--fs-sm);margin-block-start:.2rem}
    .di9sc--inline{margin-block:1.6rem;max-inline-size:none}

    .p-grid{
        display:grid;gap:var(--gap,1.2rem);
        grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
    }
    @supports selector(:has(*)){
        .p-grid:not(:has(> :nth-child(3))){
            grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),24rem));
            justify-content:start;
        }
    }

    .p-card{
        container-type:inline-size;position:relative;display:flex;flex-direction:column;
        background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
        transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
    }
    .p-card:hover{transform:translateY(-2px);border-color:var(--accent-300);box-shadow:var(--shadow-2)}
    .p-card::after{
        content:"";position:absolute;inset-block-start:0;inset-inline:0;z-index:2;block-size:2px;
        background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;
        transition:transform var(--dur-2) var(--ease);
    }
    .p-card:hover::after,.p-card:focus-within::after{transform:scaleX(1)}

    .p-card__media{position:relative;display:block;aspect-ratio:16/10;background:var(--surface-2);overflow:hidden}
    .p-card__media img{
        inline-size:100%;block-size:100%;object-fit:cover;border:0;border-radius:0;
        transition:transform .5s var(--ease);
    }
    .p-card:hover .p-card__media img{transform:scale(1.06)}
    .p-card__media .badge{position:absolute;inset-block-start:.7rem;inset-inline-start:.7rem}
    .p-card__empty{display:grid;place-items:center;block-size:100%;color:var(--muted);font-size:var(--fs-xs)}

    .p-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1rem;flex:1}
    .p-card__cat{font-size:var(--fs-xs);color:var(--muted)}
    .p-card__title{
        font-size:var(--fs-base);font-weight:700;line-height:1.65;color:var(--ink);margin:0;padding:0;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .p-card__title::before{display:none}
    .p-card__title a{color:inherit;text-decoration:none}
    .p-card__title a:hover{color:var(--accent-text)}
    .p-card__excerpt{
        font-size:var(--fs-sm);color:var(--muted);line-height:1.8;margin:0;
        display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    }
    .p-card__meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-block-start:auto;padding-block-start:.5rem}
    .p-card__foot{
        display:flex;align-items:center;justify-content:space-between;gap:.7rem;
        padding-block:.8rem;padding-inline:1rem;border-block-start:1px solid var(--line);background:var(--bg-2);
    }
    .p-card__add{padding:0 1rem 1rem;background:var(--bg-2)}
    .p-card__add .btn{inline-size:100%;text-decoration:none}

    @container (max-width:15rem){
        .p-card__excerpt{display:none}
        .p-card__foot{flex-direction:column;align-items:stretch}
    }

    .badge{
        display:inline-flex;align-items:center;gap:.3rem;padding-block:.22rem;padding-inline:.6rem;
        border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;line-height:1.7;
    }
    .badge-accent{background:var(--accent);color:var(--accent-ink)}

    .price{
        display:inline-flex;align-items:baseline;gap:.3rem;font-weight:800;font-size:var(--fs-lg);
        color:var(--ink);font-variant-numeric:tabular-nums;
    }
    .price small{font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
    .price-old{font-size:var(--fs-xs);color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
    .price-free{color:var(--ok)}
}

@media print{
    .di9sc{display:none !important}
}