/* DK Personalized Products — visual reference based on the supplied screenshot */
.dkpp-section{
    --dkpp-card-width: 140px;
    --dkpp-gap: 10px;
    width:100%;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:12px;
    padding:14px 18px 0;
    margin:18px 0;
    overflow:hidden;
    font-family:Tahoma, Arial, sans-serif;
    direction:rtl;
}
.dkpp-header{
    height:50px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    direction:ltr;
}
.dkpp-title{
    direction:rtl;
    text-align:right;
    font-size:20px;
    line-height:30px;
    font-weight:700;
    color:#171717;
    margin-left:auto;
}
.dkpp-see-all{
    direction:rtl;
    border:0;
    background:#f1f1f3;
    color:#555;
    border-radius:8px;
    padding:10px 13px;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
}
.dkpp-see-all span{font-size:20px;line-height:10px;vertical-align:-2px;margin-right:4px;}
.dkpp-rail-wrap{position:relative;}
.dkpp-rail{
    display:flex;
    gap:var(--dkpp-gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scrollbar-width:none;
    padding:0 0 14px;
    direction:rtl;
}
.dkpp-rail::-webkit-scrollbar{display:none;}
.dkpp-card{
    flex:0 0 var(--dkpp-card-width);
    width:var(--dkpp-card-width);
    min-width:var(--dkpp-card-width);
    box-sizing:border-box;
    text-decoration:none!important;
    color:#202020!important;
    background:#fff;
    border:1px solid #ededed;
    border-radius:10px;
    overflow:hidden;
    display:block;
    direction:rtl;
}
.dkpp-image{
    width:100%;
    height:155px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:7px;
    box-sizing:border-box;
}
.dkpp-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.dkpp-name{
    height:44px;
    padding:5px 9px 0;
    box-sizing:border-box;
    font-size:12px;
    line-height:21px;
    font-weight:500;
    color:#444;
    overflow:hidden;
    text-align:right;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.dkpp-price-row{
    height:22px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    padding:0 8px;
    box-sizing:border-box;
    direction:rtl;
}
.dkpp-discount{
    background:#d62f2f;
    color:#fff;
    border-radius:6px;
    font-size:10px;
    line-height:19px;
    min-width:28px;
    text-align:center;
    font-weight:700;
}
.dkpp-old{
    color:#9a9a9a;
    font-size:10px;
    text-decoration:line-through;
    white-space:nowrap;
}
.dkpp-final-price{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    padding:0 8px 8px;
    box-sizing:border-box;
    direction:rtl;
}
.dkpp-final-price strong{font-size:13px;color:#222;white-space:nowrap;}
.dkpp-final-price span{font-size:9px;color:#555;white-space:nowrap;}
.dkpp-nav{
    position:absolute;
    z-index:3;
    top:50%;
    transform:translateY(-50%);
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid #e4e4e4;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
    font-size:27px;
    line-height:32px;
    color:#777;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}
.dkpp-prev{right:4px;}
.dkpp-next{left:4px;}
.dkpp-loading{display:flex;gap:var(--dkpp-gap);direction:rtl;width:100%;}
.dkpp-skeleton-card{
    flex:0 0 var(--dkpp-card-width);
    height:267px;
    border:1px solid #eee;
    border-radius:10px;
    padding:8px;
    box-sizing:border-box;
}
.dkpp-skeleton-card div{height:155px;background:linear-gradient(90deg,#f4f4f4,#fafafa,#f4f4f4);border-radius:7px;}
.dkpp-skeleton-card i,.dkpp-skeleton-card b,.dkpp-skeleton-card em{
    display:block;height:9px;background:#f2f2f2;border-radius:5px;margin-top:10px;
}
.dkpp-skeleton-card b{width:80%}.dkpp-skeleton-card em{width:55%;}
@media (max-width:900px){
    .dkpp-section{padding:12px 10px 0;border-radius:10px;}
    .dkpp-title{font-size:17px;}
    .dkpp-card{--dkpp-card-width:150px;}
    .dkpp-image{height:150px;}
}
@media (max-width:600px){
    .dkpp-section{margin:12px 0;padding:10px 8px 0;}
    .dkpp-header{height:44px;}
    .dkpp-title{font-size:15px;line-height:27px;}
    .dkpp-see-all{font-size:10px;padding:8px 10px;}
    .dkpp-card{--dkpp-card-width:145px;}
    .dkpp-image{height:145px;}
    .dkpp-name{font-size:11px;}
    .dkpp-nav{width:32px;height:32px;font-size:23px;}
    .dkpp-prev{right:2px}.dkpp-next{left:2px}
}