/* P!NK UX — Karta e produktit: një komponent për gjithë faqen.
   Markup-i: templates/content-product.php  →  li.product.ppx-card > article.ppx-card__inner
   (.ppx-card__media > a > img.ppx-card__img, .ppx-card__badges, .ppx-card__actions)
   (.ppx-card__body > h2.ppx-card__title, .ppx-card__price, .ppx-card__action) */

:root {
    --ppx-c-radius: 14px;
    --ppx-c-line: #ece9f1;
    --ppx-c-line-hover: #f0b3d0;
    --ppx-c-ink: #1b1830;
    --ppx-c-muted: #6a6679;
    --ppx-c-pad: 14px;
    --ppx-c-title: 14px;
    --ppx-c-title-lh: 1.4;
    --ppx-c-btn: 42px;
    --ppx-c-gap-x: 16px;
    --ppx-c-gap-y: 20px;
    --ppx-c-accent: var(--ppx-accent-ink, #c2126d);
}

/* ---------- Grid: same columns, gutters and row heights everywhere ---------- */
ul.products { --ppx-cols: 4; }
ul.products:has(> li.ppx-card):not(.splide__list):not(.splide__track > ul) {
    display: grid !important;
    grid-template-columns: repeat(var(--ppx-cols), minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: var(--ppx-c-gap-y) var(--ppx-c-gap-x) !important;
    width: 100%;
    max-width: 100%;
    margin: 0 0 32px !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
}
ul.products:has(> li.ppx-card)::before, ul.products:has(> li.ppx-card)::after { content: none !important; display: none !important; }
@media (min-width: 1025px) {
    ul.products.grid-lg-col-3:has(> li.ppx-card), ul.products.columns-3:has(> li.ppx-card) { --ppx-cols: 3; }
    ul.products.grid-lg-col-5:has(> li.ppx-card), ul.products.columns-5:has(> li.ppx-card) { --ppx-cols: 5; }
    ul.products.grid-lg-col-6:has(> li.ppx-card), ul.products.columns-6:has(> li.ppx-card) { --ppx-cols: 6; }
}
@media (max-width: 1024px) { ul.products:has(> li.ppx-card):not(.splide__list) { --ppx-cols: 3; } }
/* Lista produktesh në widget / panel anësor të temës (p.sh. sirtari i kokës): 2 kolona, kurrë 4–5 karta të ngushta. */
.widget-area ul.products:has(> li.ppx-card),
.popup-drawer ul.products:has(> li.ppx-card),
ul.products.product_list_widget:has(> li.ppx-card) { --ppx-cols: 2 !important; }
@media (max-width: 640px) {
    :root { --ppx-c-pad: 10px; --ppx-c-title: 13px; --ppx-c-btn: 38px; --ppx-c-gap-x: 10px; --ppx-c-gap-y: 12px; --ppx-c-radius: 12px; }
    ul.products:has(> li.ppx-card):not(.splide__list) { --ppx-cols: 2; }
}

/* Në grid karta merr gjerësinë e kolonës. Në karusel (Splide i temës) gjerësinë e vendos karuseli në style="width:…",
   ndaj këtu nuk preket — përndryshe kartat bëhen 2 px të gjera dhe rreshti duket bosh. */
ul.products:not(.splide__list):not(.splide__track > ul) > li.product.ppx-card {
    width: auto !important;
    max-width: none !important;
}
.splide__track ul.products > li.product.ppx-card,
.splide__list > li.product.ppx-card { flex-shrink: 0 !important; }

/* Plugin-et e tjera (p.sh. Trustpilot) fusin elemente brenda kartës me JavaScript dhe e shtyjnë poshtë.
   Karta tregon vetëm përmbajtjen e saj, që çdo produkt të ketë foton, titullin, çmimin dhe butonin në të njëjtin pozicion. */
li.product.ppx-card > :not(.ppx-card__inner),
li.product.ppx-card [id^="trustpilot-widget-trustbox"],
li.product.ppx-card .trustpilot-widget { display: none !important; }

li.product.ppx-card,
.woocommerce ul.products li.product.ppx-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    list-style: none !important;
}
li.product.ppx-card::before, li.product.ppx-card::after { content: none !important; display: none !important; }
.splide__list:has(> li.ppx-card) { align-items: stretch !important; }
.splide__list > li.product.ppx-card { height: auto !important; padding: 0 calc(var(--ppx-c-gap-x) / 2) !important; }

/* ---------- Card ---------- */
.ppx-card__inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid var(--ppx-c-line);
    border-radius: var(--ppx-c-radius);
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) {
    .ppx-card__inner:hover { border-color: var(--ppx-c-line-hover); box-shadow: 0 12px 28px rgba(27, 24, 48, .09); transform: translateY(-2px); }
    .ppx-card__inner:hover .ppx-card__img { transform: scale(var(--ppx-fit-h, 1.04)); }
}
.ppx-card__inner:focus-within { border-color: var(--ppx-c-line-hover); }

/* Photo: square, white, identical margins (the margin is inside the normalized 1200×1200 file) */
.ppx-card__media {
    position: relative;
    flex: none;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-bottom: 1px solid #f3f0f5;
    background: #fff;
}
.ppx-card__imglink { position: absolute; inset: 0; display: block; }
.ppx-card__media .ppx-card__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center;
    background: #fff;
    transition: transform .35s ease;
}
/* Not yet normalized photos: shown at 85% like the normalized ones (front.js measures the product) */
.ppx-card__media .ppx-card__img[data-ppx-fit] { transform: translate(var(--ppx-fx, 0), var(--ppx-fy, 0)) scale(var(--ppx-fit, 1)); }
@media (hover: hover) {
    .ppx-card__inner:hover .ppx-card__media .ppx-card__img[data-ppx-fit] { transform: translate(var(--ppx-fx, 0), var(--ppx-fy, 0)) scale(calc(var(--ppx-fit, 1) * 1.03)); }
}
.ppx-card__media .ppx-card__img:not([data-ppx-norm]):not([data-ppx-fit]) { inset: 7.5%; width: 85% !important; height: 85% !important; }
.ppx-card__noimg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #b9b4c4; background: #faf9fb; font-size: 12.5px; font-weight: 600; }
.ppx-card__noimg span { color: var(--ppx-c-muted); }

/* Badges: always top-left; wishlist: always top-right */
.ppx-card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.ppx-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; }
.ppx-badge--sale { background: var(--ppx-c-accent); color: #fff; }
.ppx-badge--out { background: var(--ppx-c-ink); color: #fff; }
.ppx-card__actions { position: absolute; top: 8px; right: 8px; z-index: 3; }
.ppx-card__actions .woosw-btn {
    display: inline-grid !important; place-items: center; width: 36px !important; height: 36px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
    border: 1px solid var(--ppx-c-line) !important; border-radius: 50% !important; background: rgba(255, 255, 255, .94) !important; color: var(--ppx-c-ink) !important;
    font-size: 0 !important; line-height: 1 !important; box-shadow: none !important; overflow: hidden;
}
.ppx-card__actions .woosw-btn .woosw-btn-icon, .ppx-card__actions .woosw-btn i { font-size: 17px !important; margin: 0 !important; }
.ppx-card__actions .woosw-btn .woosw-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ppx-card__actions .woosw-btn.woosw-added { color: var(--ppx-c-accent) !important; border-color: var(--ppx-c-line-hover) !important; }

/* Body: equal heights — title has a fixed 2-line slot, price a fixed 1-line slot, button pinned to the bottom */
.ppx-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; padding: var(--ppx-c-pad) var(--ppx-c-pad) calc(var(--ppx-c-pad) + 2px); min-width: 0; }
.ppx-card .ppx-card__title,
.woocommerce ul.products li.product.ppx-card .woocommerce-loop-product__title {
    height: calc(2em * var(--ppx-c-title-lh));
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-family: inherit;
    font-size: var(--ppx-c-title) !important;
    font-weight: 500 !important;
    line-height: var(--ppx-c-title-lh) !important;
    letter-spacing: .01em;
    text-transform: none;
}
.ppx-card__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: var(--ppx-c-ink) !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}
.ppx-card__title a:hover, .ppx-card__title a:focus-visible { color: var(--ppx-c-accent) !important; }
.ppx-card__price { display: flex; align-items: center; height: 24px; min-width: 0; overflow: hidden; white-space: nowrap; }
.ppx-card__price .price, .woocommerce ul.products li.product.ppx-card .price { display: inline-flex; align-items: baseline; gap: 6px; margin: 0 !important; color: var(--ppx-c-ink) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; }
.ppx-card__price del { color: var(--ppx-c-muted) !important; font-size: 13px; font-weight: 500; opacity: 1; }
.ppx-card__price ins { color: var(--ppx-c-accent); text-decoration: none; }
.ppx-card__locked { display: inline-flex; align-items: center; gap: 6px; overflow: hidden; color: var(--ppx-c-muted); font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; }
.ppx-card__locked svg { flex: none; color: var(--ppx-c-accent); }
.ppx-card__action { margin-top: auto; }
.ppx-card__action .button,
.woocommerce ul.products li.product.ppx-card .ppx-card__action .button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: var(--ppx-c-btn);
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1.5px solid var(--ppx-c-accent) !important;
    border-radius: 999px !important;
    background: var(--ppx-c-accent) !important;
    color: #fff !important;
    font-family: inherit;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: .01em;
    text-align: center;
    text-transform: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: filter .15s ease, background .15s ease;
}
.ppx-card__action .button:hover { filter: brightness(.92); }
/* Secondary actions (out of stock → "Shiko produktin", variable → "Zgjidh opsionet"): same size, outlined */
.woocommerce ul.products li.product.ppx-card .ppx-card__action .button:not(.add_to_cart_button):not(.ppx-card__btn--login),
li.product.ppx-card .ppx-card__action .button.product_type_variable { background: #fff !important; color: var(--ppx-c-accent) !important; }
.woocommerce ul.products li.product.ppx-card .ppx-card__action .button:not(.add_to_cart_button):not(.ppx-card__btn--login):hover { background: var(--ppx-soft, #fff1f8) !important; filter: none; }
.ppx-card__action .button.loading { opacity: .7 !important; }
.ppx-card__action .added_to_cart { display: none !important; }
.ppx-card a:focus-visible, .ppx-card .button:focus-visible { outline: 2px solid var(--ppx-accent, #e81985) !important; outline-offset: 2px; }
@media (max-width: 640px) {
    .ppx-card__body { gap: 6px; }
    .ppx-card__price { height: 22px; }
    .ppx-card__price .price { font-size: 14.5px !important; }
    .ppx-card__locked { font-size: 11.5px; }
    .ppx-card__action .button { font-size: 12.5px !important; padding: 0 8px !important; }
    .ppx-badge { padding: 3px 8px; font-size: 10px; }
    .ppx-card__actions .woosw-btn { width: 32px !important; height: 32px !important; }
}
/* Narrow cards (sliders, phones): shorter labels instead of cut text */
.ppx-card .ppx-s, .ppx-card .ppx-xs { display: none; }
@container (max-width: 229px) { .ppx-card .ppx-l { display: none; } .ppx-card .ppx-s { display: inline; } }
@container (max-width: 149px) { .ppx-card .ppx-s { display: none; } .ppx-card .ppx-xs { display: inline; } .ppx-card__body { padding: 10px 8px 12px; } }
@media (prefers-reduced-motion: reduce) { .ppx-card__inner, .ppx-card__img { transition: none !important; } .ppx-card__inner:hover { transform: none; } }

/* ======================================================================
   Fallback: lists that a theme widget draws with its own markup (not content-product.php).
   ====================================================================== */
/* ---------- Grid: no fixed card widths; the theme decides columns, we only set even gutters ---------- */
ul.products.content-wrap:not(:has(> li.ppx-card)) { gap: 0 !important; align-items: stretch; }
ul.products.content-wrap::before, ul.products.content-wrap::after { content: none; }
.woocommerce ul.products li.product.loop-entry:not(.ppx-card),
ul.products li.product.loop-entry:not(.ppx-card) {
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto;
    margin: 0 !important;
    padding: var(--ppx-card-gap) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    transition: filter .2s ease;
}
/* Slides of the theme's product carousels stretch to the tallest slide */
.splide__list > li.product.loop-entry:not(.ppx-card) { height: auto !important; }

/* ---------- Photo frame: fixed 1:1, same background and margin, never cropped or stretched ---------- */
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail {
    position: relative;
    display: block !important;
    flex: none;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--ppx-card-line);
    border-bottom: 0;
    border-radius: var(--ppx-card-radius) var(--ppx-card-radius) 0 0;
    background: var(--ppx-card-img-bg);
}
@supports not (aspect-ratio: 1 / 1) {
    ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail { height: 0 !important; padding-top: 100% !important; }
}
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail > a { position: absolute; inset: 0; display: block; }
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail img {
    position: absolute;
    inset: var(--ppx-card-img-pad);
    width: calc(100% - 2 * var(--ppx-card-img-pad)) !important;
    height: calc(100% - 2 * var(--ppx-card-img-pad)) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center;
    transform-origin: center;
    transition: opacity .25s ease, transform .35s ease;
}
/* Auto-fit (front.js): files with a lot of empty white border are scaled up so products look the same size */
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail img[data-ppx-fit] { transform: translate(var(--ppx-fx, 0), var(--ppx-fy, 0)) scale(var(--ppx-fit, 1)); }
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail img.secondary-product-image { opacity: 0; }
ul.products li.product.loop-entry:not(.ppx-card):hover .product-thumbnail .product-has-hover-image img:not(.secondary-product-image) { opacity: 0; }
ul.products li.product.loop-entry:not(.ppx-card):hover .product-thumbnail .product-has-hover-image img.secondary-product-image { opacity: 1; }
@media (hover: none) { ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail img.secondary-product-image { display: none; } }

/* Products without a photo: calm placeholder + label instead of a grey box */
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail img.woocommerce-placeholder { opacity: .22; filter: grayscale(1); }
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail:has(img.woocommerce-placeholder)::before {
    content: "Foto së shpejti"; position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
    padding: 6px 12px; border-radius: 999px; background: #f4f2f7; color: #6a6679; font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none;
}

/* ---------- Badges and icons: always the same corners ---------- */
ul.products li.product.loop-entry:not(.ppx-card) .onsale,
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail .onsale {
    position: absolute !important; top: calc(var(--ppx-card-gap) + 10px) !important; left: calc(var(--ppx-card-gap) + 10px) !important; right: auto !important; z-index: 3;
    display: inline-block !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; aspect-ratio: auto !important; margin: 0 !important; padding: 4px 10px !important; border-radius: 999px !important; white-space: nowrap;
    background: var(--ppx-accent-ink, #c2126d) !important; color: #fff !important; font-size: 11px !important; font-weight: 700; line-height: 1.4 !important; letter-spacing: .03em; text-transform: uppercase;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail .onsale { top: 10px !important; left: 10px !important; }
ul.products li.product.loop-entry:not(.ppx-card) .onsale::before, ul.products li.product.loop-entry:not(.ppx-card) .onsale::after { content: none !important; display: none !important; }
ul.products li.product.loop-entry:not(.ppx-card).outofstock .product-thumbnail::after {
    content: "Pa stok"; position: absolute; top: 10px; left: 10px; z-index: 3;
    padding: 4px 10px; border-radius: 999px; background: #1b1830; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; pointer-events: none;
}
ul.products li.product.loop-entry:not(.ppx-card).outofstock .product-thumbnail:has(.onsale)::after { top: 40px; }
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail .product-actions {
    position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important; z-index: 4;
    display: flex; flex-direction: column; gap: 6px; margin: 0 !important; transform: none;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail .product-actions:empty { display: none; }
ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail .product-actions > * { margin: 0 !important; }

/* ---------- Text block: equal heights, title max 2 lines, price/login and button on one line across the row ---------- */
ul.products li.product.loop-entry:not(.ppx-card) .product-details {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 12px 14px 14px !important;
    border: 1px solid var(--ppx-card-line);
    border-top: 0;
    border-radius: 0 0 var(--ppx-card-radius) var(--ppx-card-radius);
    background: #fff !important;
    text-align: left;
}
ul.products li.product.loop-entry:not(.ppx-card) .woocommerce-loop-product__title {
    display: block;
    height: calc(2 * var(--ppx-card-title-lh) * var(--ppx-card-title));
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: var(--ppx-card-title) !important;
    font-weight: 500 !important;
    line-height: var(--ppx-card-title-lh) !important;
    letter-spacing: .01em;
}
ul.products li.product.loop-entry:not(.ppx-card) .woocommerce-loop-product__title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #1b1830 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
}
ul.products li.product.loop-entry:not(.ppx-card) .woocommerce-loop-product__title a:hover { color: var(--ppx-accent-ink, #c2126d) !important; }
ul.products li.product.loop-entry:not(.ppx-card) .product-details .price {
    display: flex !important;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    min-height: 22px;
    margin: 0 !important;
    color: #1b1830 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-details .price del { color: #6a6679; font-size: 13px; font-weight: 500; }
ul.products li.product.loop-entry:not(.ppx-card) .product-details .price ins { text-decoration: none; }
/* Visitors: the price slot becomes a quiet one-line note (the button below is the action) */
ul.products li.product.loop-entry:not(.ppx-card) .product-details .price .pinkpro-login-for-price,
ul.products li.product.loop-entry:not(.ppx-card) .product-details .ppx-guestprice {
    display: inline-flex; align-items: center; gap: 6px; overflow: hidden;
    color: #6a6679 !important; font-size: 12.5px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap; text-overflow: ellipsis;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-details .price .pinkpro-login-for-price::before {
    content: ""; flex: none; width: 13px; height: 13px; background: var(--ppx-accent-ink, #c2126d);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-excerpt:empty { display: none; }
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap,
ul.products li.product.loop-entry:not(.ppx-card) .product-details > .button {
    position: static !important;
    display: flex !important;
    margin: auto 0 0 !important;   /* pushes the button to the bottom of every card */
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button,
ul.products li.product.loop-entry:not(.ppx-card) .product-details > .button {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 42px; margin: 0 !important; padding: 0 12px !important;
    border: 1px solid var(--ppx-accent-ink, #c2126d) !important; border-radius: 999px !important;
    background: var(--ppx-accent-ink, #c2126d) !important; color: #fff !important;
    font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.2 !important; letter-spacing: .01em; text-align: center; text-transform: none !important; white-space: nowrap;
    box-shadow: none !important; transition: filter .15s ease;
}
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button:hover { filter: brightness(.92); }
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button.ppx-loop-login { background: #fff !important; color: var(--ppx-accent-ink, #c2126d) !important; }
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button.ppx-loop-login:hover { background: var(--ppx-soft, #fff1f8) !important; filter: none; }
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .added_to_cart { display: none !important; }
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button.loading { opacity: .7; }
ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button.added::after { margin-left: 4px; }
ul.products li.product.loop-entry:not(.ppx-card) a:focus-visible, ul.products li.product.loop-entry:not(.ppx-card) .button:focus-visible { outline: 2px solid var(--ppx-accent, #e81985) !important; outline-offset: 2px; }

/* Hover: one shadow around the whole card */
@media (hover: hover) {
    ul.products li.product.loop-entry:not(.ppx-card):hover { filter: drop-shadow(0 10px 18px rgba(27, 24, 48, .10)); }
    ul.products li.product.loop-entry:not(.ppx-card):hover .product-thumbnail img[data-ppx-fit] { transform: translate(var(--ppx-fx, 0), var(--ppx-fy, 0)) scale(calc(var(--ppx-fit, 1) * 1.03)); }
}

/* ---------- Tablet / phone ---------- */
@media (max-width: 1024px) { :root { --ppx-card-gap: 6px; } }
@media (max-width: 600px) {
    /* Phones: always two columns (same as the theme's own mobile setting), never four squeezed cards */
    ul.products.content-wrap:not(.splide__list) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    ul.products.content-wrap:not(.splide__list) > li.product.loop-entry { width: auto !important; max-width: none !important; float: none !important; }
    :root { --ppx-card-gap: 5px; --ppx-card-radius: 10px; --ppx-card-title: 13px; --ppx-card-img-pad: 7%; }
    ul.products li.product.loop-entry:not(.ppx-card) .product-details { gap: 6px; padding: 10px 10px 12px !important; }
    ul.products li.product.loop-entry:not(.ppx-card) .product-details .price { font-size: 14px !important; min-height: 20px; }
    ul.products li.product.loop-entry:not(.ppx-card) .product-details .price .pinkpro-login-for-price { font-size: 11.5px !important; }
    ul.products li.product.loop-entry:not(.ppx-card) .product-action-wrap .button { min-height: 38px; padding: 0 8px !important; font-size: 12.5px !important; }
    ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail .product-actions { top: 6px !important; right: 6px !important; }
    ul.products li.product.loop-entry:not(.ppx-card) .onsale, ul.products li.product.loop-entry:not(.ppx-card).outofstock .product-thumbnail::after { top: 8px; left: 8px; font-size: 10px !important; padding: 3px 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
    ul.products li.product.loop-entry:not(.ppx-card), ul.products li.product.loop-entry:not(.ppx-card) .product-thumbnail img { transition: none !important; }
}
