/* P!NK UX — Rekomandimet: seksione me karta që rrëshqasin, "Bleni bashkë", lidhje të shpejta dhe dërgesë falas.
   Ngjyrat dhe kartat vijnë nga cards.css (--ppx-c-*), që gjithçka të duket si pjesë e së njëjtës faqe. */

.ppx-recs-mount { display: block; min-height: 1px; } /* bosh por i dukshëm: IntersectionObserver duhet ta shohë që ta ngarkojë */
.ppx-recs-mount.is-ready { margin: 8px 0 24px; }
.ppx-recs-outer { width: 100%; max-width: var(--global-content-width, 1290px); margin: 0 auto; padding: 8px var(--global-content-edge-padding, 1.5rem) 24px; box-sizing: border-box; }
body.ppx-recs-noresults .search-featured-wrapper { display: none !important; }
.single-product .ppx-recs-mount { clear: both; padding-top: 8px; }

.ppx-recs {
    --ppx-r-cols: 5;
    --ppx-r-gap: var(--ppx-c-gap-x, 16px);
    --ppx-r-acc: var(--ppx-c-accent, #c2126d);
    --ppx-r-soft: #fff1f8;
    position: relative;
    margin: 0 0 36px;
    clear: both;
}
.ppx-recs + .ppx-recs { margin-top: 8px; }

/* ---------- Titulli ---------- */
.ppx-recs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; }
.ppx-recs__titles { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ppx-recs__eyebrow {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 4px 10px 4px 8px;
    border-radius: 999px; background: var(--ppx-r-soft); color: var(--ppx-r-acc);
    font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
}
.ppx-recs__eyebrow svg { flex: none; animation: ppx-twinkle 2.8s ease-in-out infinite; }
.ppx-recs__title {
    position: relative; display: inline-block; margin: 0 !important; padding: 0 0 8px;
    color: var(--ppx-c-ink, #1b1830); font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
}
.ppx-recs__title::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 56px; border-radius: 3px;
    background: linear-gradient(90deg, var(--ppx-r-acc), #ff7ab8, var(--ppx-r-acc)); background-size: 200% 100%;
    transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .8, .2, 1) .15s;
    animation: ppx-flow 4s linear infinite;
}
.ppx-recs.is-in .ppx-recs__title::after, .ppx-recs:not(.ppx-reveal) .ppx-recs__title::after { transform: scaleX(1); }

.ppx-recs__nav { display: flex; gap: 8px; flex: none; }
.ppx-recs__btn {
    display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ppx-c-line, #ece9f1);
    border-radius: 50%; background: #fff; color: var(--ppx-c-ink, #1b1830); cursor: pointer;
    box-shadow: 0 2px 8px rgba(27, 24, 48, .06); transition: background .2s, color .2s, border-color .2s, transform .2s, opacity .2s;
}
.ppx-recs__btn:hover { background: var(--ppx-r-acc); border-color: var(--ppx-r-acc); color: #fff; transform: translateY(-1px); }
.ppx-recs__btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--ppx-r-acc) 40%, transparent); outline-offset: 2px; }
.ppx-recs.at-start .ppx-recs__btn[data-dir="-1"], .ppx-recs.at-end .ppx-recs__btn[data-dir="1"] { opacity: .35; pointer-events: none; }
.ppx-recs.no-scroll .ppx-recs__nav, .ppx-recs.no-scroll .ppx-recs__progress { display: none; }

/* ---------- Rreshti që rrëshqet ---------- */
.ppx-recs .ppx-recs__rail { position: relative; margin: 0; }
.ppx-recs .ppx-recs__rail ul.products.ppx-recs__list:has(> li.ppx-card),
.ppx-recs .ppx-recs__rail ul.products.ppx-recs__list {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    grid-auto-columns: calc((100% - (var(--ppx-r-cols) - 1) * var(--ppx-r-gap)) / var(--ppx-r-cols)) !important;
    gap: var(--ppx-r-gap) !important;
    margin: 0 !important; padding: 4px 2px 14px !important;
    overflow-x: auto !important; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.ppx-recs.at-start .ppx-recs__rail ul.products.ppx-recs__list { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%); }
.ppx-recs.at-end .ppx-recs__rail ul.products.ppx-recs__list { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 100%); }
.ppx-recs.at-start.at-end .ppx-recs__rail ul.products.ppx-recs__list, .ppx-recs.no-scroll .ppx-recs__rail ul.products.ppx-recs__list { -webkit-mask-image: none; mask-image: none; }
.ppx-recs .ppx-recs__rail ul.products.ppx-recs__list::-webkit-scrollbar { display: none; }
.ppx-recs .ppx-recs__rail ul.products.ppx-recs__list.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; }
.ppx-recs .ppx-recs__rail ul.products.ppx-recs__list.is-dragging * { pointer-events: none; }
.ppx-recs .ppx-recs__rail ul.products.ppx-recs__list > li.product.ppx-card { scroll-snap-align: start; width: auto !important; min-width: 0; margin: 0 !important; }

/* Kartat: hyrje e shkallëzuar + dritë rozë kur kalon miu */
.ppx-recs .ppx-recs__list > li.ppx-card { transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .5s ease; }
.ppx-recs.ppx-reveal .ppx-recs__list > li.ppx-card { opacity: 0; transform: translateY(22px) scale(.98); }
.ppx-recs.ppx-reveal.is-in .ppx-recs__list > li.ppx-card { opacity: 1; transform: none; transition-delay: calc(var(--ppx-delay, 0ms) + min(var(--i, 0), 8) * 70ms); }
.ppx-recs .ppx-recs__list > li.ppx-card .ppx-card__inner { transition: box-shadow .3s, border-color .3s, transform .3s; }
.ppx-recs .ppx-recs__list > li.ppx-card:hover .ppx-card__inner {
    transform: translateY(-4px);
    border-color: var(--ppx-c-line-hover, #f0b3d0) !important;
    box-shadow: 0 14px 30px -12px rgba(194, 18, 109, .28), 0 4px 10px rgba(27, 24, 48, .05) !important;
}

/* Shiriti i progresit poshtë rreshtit */
.ppx-recs__progress { position: relative; height: 4px; margin: 2px auto 0; width: min(220px, 40%); border-radius: 4px; background: var(--ppx-c-line, #ece9f1); overflow: hidden; }
.ppx-recs__progress span { display: block; height: 100%; width: 30%; border-radius: 4px; background: linear-gradient(90deg, var(--ppx-r-acc), #ff7ab8); transition: transform .15s linear, width .3s; }

/* ---------- Shenjat te kartat ---------- */
.ppx-badge--best { position: relative; overflow: hidden; background: linear-gradient(110deg, #ff7a3d, #e0157f); color: #fff; }
.ppx-badge--best::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); transform: translateX(-120%); animation: ppx-sheen 3.2s ease-in-out infinite; }
.ppx-badge--pick { background: var(--ppx-c-ink, #1b1830); color: #fff; }
.ppx-badge--pick::before { content: "★ "; color: #ffd36b; }
.ppx-badge--new { background: #e7f8ef; color: #0b7a43; }
.ppx-badge--low { background: #fff3e6; color: #a34b00; }
.ppx-badge--low::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #ff7a00; vertical-align: middle; animation: ppx-pulse 1.4s ease-in-out infinite; }
.ppx-badge--pair { background: var(--ppx-r-soft, #fff1f8); color: var(--ppx-c-accent, #c2126d); }
.ppx-badge--again { background: #eef2ff; color: #3949ab; }
.ppx-card__badges { display: flex; flex-wrap: wrap; gap: 4px; }

/* ---------- Lidhje të shpejta (kërkimi pa rezultate) ---------- */
.ppx-recs__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 28px; }
.ppx-recs__chips-l { margin-right: 4px; color: var(--ppx-c-muted, #6a6679); font-size: 14px; font-weight: 600; }
.ppx-chip {
    text-transform: none; letter-spacing: 0;
    display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--ppx-c-line, #ece9f1); border-radius: 999px;
    background: #fff; color: var(--ppx-c-ink, #1b1830) !important; font-size: 14px; font-weight: 600; text-decoration: none !important;
    transition: background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.ppx-chip:hover { border-color: var(--ppx-c-accent, #c2126d); color: var(--ppx-c-accent, #c2126d) !important; transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(194, 18, 109, .45); }
.ppx-recs__chips.ppx-reveal .ppx-chip { opacity: 0; transform: translateY(8px); }
.ppx-recs__chips.ppx-reveal.is-in .ppx-chip { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease, background .2s, border-color .2s, color .2s, box-shadow .2s; transition-delay: calc(var(--i, 0) * 45ms); }

/* ---------- Dërgesa falas ---------- */
.ppx-ship {
    display: flex; align-items: center; gap: 14px; margin: 0 0 28px; padding: 14px 18px; border: 1px solid #f6d2e4; border-radius: var(--ppx-c-radius, 14px);
    background: linear-gradient(120deg, #fff 0%, #fff6fa 100%);
}
.ppx-ship__ico { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ppx-r-soft, #fff1f8); color: var(--ppx-c-accent, #c2126d); }
.ppx-ship.is-in .ppx-ship__ico svg, .ppx-ship:not(.ppx-reveal) .ppx-ship__ico svg { animation: ppx-drive 1.6s ease-in-out infinite; }
.ppx-ship__body { flex: 1; min-width: 0; }
.ppx-ship__text { margin: 0 0 8px !important; color: var(--ppx-c-ink, #1b1830); font-size: 15px; line-height: 1.4; }
.ppx-ship__text strong { color: var(--ppx-c-accent, #c2126d); }
.ppx-ship__bar { height: 8px; border-radius: 8px; background: #f3e7ee; overflow: hidden; }
.ppx-ship__bar span { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--ppx-c-accent, #c2126d), #ff7ab8, var(--ppx-c-accent, #c2126d)); background-size: 200% 100%; animation: ppx-flow 2.4s linear infinite; transition: width 1s cubic-bezier(.2, .8, .2, 1) .2s; }
.ppx-ship.is-in .ppx-ship__bar span, .ppx-ship:not(.ppx-reveal) .ppx-ship__bar span { width: var(--pct, 0%); }
.ppx-ship.is-done { border-color: #bfe8d2; background: linear-gradient(120deg, #fff 0%, #effaf4 100%); }
.ppx-ship.is-done .ppx-ship__ico { background: #e7f8ef; color: #0b7a43; }
.ppx-ship.is-done .ppx-ship__text strong { color: #0b7a43; }
.ppx-ship.is-done .ppx-ship__bar span { background: #22a565; }

/* ---------- Bleni bashkë ---------- */
.ppx-bundle { padding: 20px; border: 1px solid var(--ppx-c-line, #ece9f1); border-radius: calc(var(--ppx-c-radius, 14px) + 4px); background: radial-gradient(120% 140% at 100% 0%, #fff4f9 0%, #fff 55%); }
.ppx-bundle .ppx-recs__head { margin-bottom: 18px; }
.ppx-bundle__row { display: flex; align-items: stretch; gap: 10px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.ppx-bundle__row::-webkit-scrollbar { display: none; }
.ppx-bundle__item {
    position: relative; display: flex; flex-direction: column; flex: 1 1 0; min-width: 150px; max-width: 240px; padding: 12px;
    border: 2px solid var(--ppx-c-accent, #c2126d); border-radius: var(--ppx-c-radius, 14px); background: #fff; cursor: pointer;
    transition: border-color .25s, opacity .25s, transform .3s, box-shadow .3s;
}
.ppx-bundle__item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -14px rgba(194, 18, 109, .45); }
.ppx-bundle__item.is-main { cursor: default; }
.ppx-bundle__item.is-off { border-color: var(--ppx-c-line, #ece9f1); opacity: .55; }
.ppx-bundle__check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ppx-bundle__tick {
    position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    background: var(--ppx-c-accent, #c2126d); color: #fff; box-shadow: 0 2px 6px rgba(194, 18, 109, .35); transition: background .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.ppx-bundle__item.is-off .ppx-bundle__tick { background: #fff; color: transparent; border: 2px solid #cfcbd8; transform: scale(.9); }
.ppx-bundle__check:focus-visible + .ppx-bundle__tick { outline: 3px solid color-mix(in srgb, var(--ppx-c-accent, #c2126d) 40%, transparent); outline-offset: 2px; }
.ppx-bundle__img { display: block; aspect-ratio: 1; margin: 0 0 10px; border-radius: 10px; background: #fff; overflow: hidden; }
.ppx-bundle__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s; }
.ppx-bundle__item:hover .ppx-bundle__img img { transform: scale(1.05); }
.ppx-bundle__name { display: flex; flex-direction: column; gap: 2px; color: var(--ppx-c-ink, #1b1830); font-size: 13px; font-weight: 600; line-height: 1.35; }
.ppx-bundle__name a, .ppx-bundle__name span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: inherit !important; text-decoration: none !important; }
.ppx-bundle__name em { color: var(--ppx-c-accent, #c2126d); font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ppx-bundle__price { margin-top: auto; padding-top: 6px; color: var(--ppx-c-ink, #1b1830); font-size: 15px; font-weight: 800; }
.ppx-bundle__plus { display: grid; place-items: center; flex: none; align-self: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ppx-r-soft, #fff1f8); color: var(--ppx-c-accent, #c2126d); font-size: 18px; font-weight: 800; }
.ppx-bundle.is-in .ppx-bundle__plus span, .ppx-bundle:not(.ppx-reveal) .ppx-bundle__plus span { display: inline-block; animation: ppx-pop .6s cubic-bezier(.3, 1.6, .5, 1) both .4s; }
.ppx-bundle.ppx-reveal .ppx-bundle__item { opacity: 0; transform: translateY(16px); }
.ppx-bundle.ppx-reveal.is-in .ppx-bundle__item { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1), border-color .25s, box-shadow .3s; transition-delay: calc(var(--i, 0) * 110ms); }
.ppx-bundle.ppx-reveal.is-in .ppx-bundle__item.is-off { opacity: .55; }
.ppx-bundle__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed #f0c7dc; }
.ppx-bundle__total { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.ppx-bundle__total span { color: var(--ppx-c-muted, #6a6679); font-size: 13px; }
.ppx-bundle__total small { font-size: 12px; }
.ppx-bundle__amount { color: var(--ppx-c-ink, #1b1830); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ppx-bundle__cta {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
    background: linear-gradient(110deg, var(--ppx-c-accent, #c2126d), #e8408f 50%, var(--ppx-c-accent, #c2126d)); background-size: 200% 100%;
    color: #fff !important; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none !important; text-decoration: none !important; cursor: pointer; overflow: visible;
    box-shadow: 0 10px 22px -10px rgba(194, 18, 109, .65); transition: transform .2s, box-shadow .2s, background-position .6s;
}
.ppx-bundle__cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 14px 26px -10px rgba(194, 18, 109, .7); }
.ppx-bundle__cta:disabled { opacity: .85; cursor: progress; transform: none; }
.ppx-bundle__cta--login { background: var(--ppx-c-ink, #1b1830); box-shadow: none; }
.ppx-bundle.is-busy .ppx-bundle__cta svg { animation: ppx-spin .9s linear infinite; }
.ppx-bundle.is-added .ppx-bundle__cta { background: #22a565; box-shadow: 0 10px 22px -10px rgba(34, 165, 101, .7); }
.ppx-bundle__msg { flex-basis: 100%; margin: 0 !important; text-align: right; font-size: 14px; }
.ppx-bundle__msg:empty { display: none; }
.ppx-bundle__msg a { color: var(--ppx-c-accent, #c2126d) !important; font-weight: 700; }

.ppx-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.ppx-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ff7ab8; animation: ppx-burst .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.ppx-burst i:nth-child(3n) { background: #ffd36b; }
.ppx-burst i:nth-child(3n+1) { background: #22a565; }

/* ---------- Pamja e ngarkimit ---------- */
.ppx-recs--loading .ppx-recs__head { margin-bottom: 16px; }
.ppx-sk__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ppx-sk { padding: 12px; border: 1px solid var(--ppx-c-line, #ece9f1); border-radius: var(--ppx-c-radius, 14px); }
.ppx-sk__img, .ppx-sk__l, .ppx-sk__b { display: block; border-radius: 8px; background: linear-gradient(90deg, #f4f1f6 0%, #fbf9fc 40%, #f4f1f6 80%); background-size: 200% 100%; animation: ppx-sk 1.3s ease-in-out infinite; }
.ppx-sk__img { aspect-ratio: 1; margin-bottom: 12px; }
.ppx-sk__l { height: 12px; margin-bottom: 8px; }
.ppx-sk__l--s { width: 60%; }
.ppx-sk__l--eye { width: 160px; height: 20px; border-radius: 999px; }
.ppx-sk__l--title { width: 240px; height: 26px; margin-top: 8px; }
.ppx-sk__b { height: 38px; margin-top: 14px; border-radius: 999px; }

/* ---------- Madhësitë e ekranit ---------- */
@media (max-width: 1200px) { .ppx-recs { --ppx-r-cols: 4; } }
@media (max-width: 1024px) { .ppx-recs { --ppx-r-cols: 3; } .ppx-sk__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ppx-sk:nth-child(n+4) { display: none; } }
@media (max-width: 700px) {
    .ppx-recs { --ppx-r-cols: 2.15; --ppx-r-gap: 10px; margin-bottom: 28px; }
    .ppx-recs__nav { display: none; }
    .ppx-recs__head { margin-bottom: 12px; }
    .ppx-recs__eyebrow { font-size: 11px; }
    .ppx-sk__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ppx-sk:nth-child(n+3) { display: none; }
    .ppx-sk__l--title { width: 180px; }
    .ppx-bundle { padding: 14px; }
    .ppx-bundle__item { min-width: 128px; padding: 8px; }
    .ppx-bundle__plus { width: 24px; height: 24px; font-size: 15px; }
    .ppx-bundle__sum { justify-content: stretch; }
    .ppx-bundle__total { flex-direction: row; align-items: baseline; justify-content: space-between; width: 100%; }
    .ppx-bundle__cta { width: 100%; }
    .ppx-bundle__msg { text-align: center; }
    .ppx-ship { padding: 12px 14px; gap: 12px; }
    .ppx-ship__ico { width: 38px; height: 38px; }
    .ppx-ship__text { font-size: 14px; }
    .ppx-chip { min-height: 36px; padding: 0 14px; font-size: 13px; }
}

/* ---------- Animacionet ---------- */
@keyframes ppx-flow { to { background-position: -200% 0; } }
@keyframes ppx-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes ppx-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(18deg); opacity: .75; } }
@keyframes ppx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, .55); } 50% { box-shadow: 0 0 0 5px rgba(255, 122, 0, 0); } }
@keyframes ppx-drive { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(3px); } }
@keyframes ppx-pop { 0% { transform: scale(0) rotate(-90deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes ppx-spin { to { transform: rotate(360deg); } }
@keyframes ppx-sk { to { background-position: -200% 0; } }
@keyframes ppx-burst { 0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .ppx-recs *, .ppx-recs *::before, .ppx-recs *::after, .ppx-ship *, .ppx-recs__chips * { animation: none !important; transition: none !important; }
    .ppx-recs .ppx-recs__rail ul.products.ppx-recs__list { scroll-behavior: auto; }
}