/*
 * Product grid + card, and the category page header.
 * Applies on top of the existing markup — no template changes to the card itself, so every JS hook
 * (.ps-product, .ps-product__title, .add-to-cart-button, the in-cart indicator) keeps working.
 */
.ps-shopping-product {
    --pc-accent: var(--color-1st, #9b2321);
    --pc-border: #e7e9ee;
    --pc-text: #2c3340;
    --pc-muted: #8b93a3;
}

/* Cards in a row must be equal height, so the prices line up. */
.ps-shopping-product .row { align-items: stretch; }
.ps-shopping-product .row > [class*='col-'] { display: flex; margin-bottom: 22px; }

/*
 * The grid rules below must NOT touch the list layout: `.ps-product--wide` is the same element
 * with a different class, so an unscoped `.ps-product` rule forces the list rows into a column
 * with a full-width image. Hence the :not() on every grid-only rule.
 */

/* ===== Card ============================================================== */
.ps-shopping-product .ps-product:not(.ps-product--wide) {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.ps-shopping-product .ps-product:not(.ps-product--wide):hover {
    border-color: #d5d9e0;
    box-shadow: 0 8px 24px rgba(16, 25, 43, .08);
    transform: translateY(-2px);
}

/* ===== Image ============================================================= */
.ps-shopping-product .ps-product__thumbnail {
    position: relative;
    margin: 0;
    background: #f7f8f9;
    overflow: hidden;
}

.ps-shopping-product .ps-product__thumbnail > a {
    display: block;
    aspect-ratio: 1 / 1;
}

.ps-shopping-product .ps-product__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.ps-shopping-product .ps-product:not(.ps-product--wide):hover .ps-product__thumbnail img { transform: scale(1.04); }

/* Badges (sale %, labels, out of stock) */
.ps-shopping-product .ps-product__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}

.ps-shopping-product .ps-product__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 3px;
    background: var(--pc-accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
}

.ps-shopping-product .ps-product__badge.out-stock {
    background: #6b7280;
}

/* ===== Body ============================================================== */
.ps-shopping-product .ps-product__container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 14px 16px;
}

.ps-shopping-product .ps-product__content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/*
 * Two lines, always: a one-line title and a two-line title must occupy the same space or the
 * prices below them will not line up across the row.
 */
.ps-shopping-product .ps-product__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    margin: 0 0 10px;
    color: var(--pc-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    transition: color .15s ease;
}

.ps-shopping-product .ps-product__title:hover { color: var(--pc-accent); text-decoration: none; }

/* Price sits at the bottom of the card whatever the title length. */
.ps-shopping-product .ps-product__price {
    margin: auto 0 0;
    color: var(--pc-text);
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ps-shopping-product .ps-product__price.sale { color: var(--pc-accent); }

.ps-shopping-product .ps-product__price del {
    margin-left: 6px;
    color: var(--pc-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Rating */
.ps-shopping-product .rating_wrap { margin-bottom: 8px; }

/* Already in the basket */
.ps-shopping-product .ps-product__in-cart-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 4px 9px;
    border-radius: 3px;
    background: #ecfdf3;
    border: 1px solid #a6f4c5;
    color: #027a48;
    font-size: 11px;
    font-weight: 600;
}

/* ===== Category page header ============================================== */
/*
 * The category name stays a real <h1> — search engines read the markup, not the type size — but it
 * is styled as a compact badge so the descriptive H2 below it carries the visual weight.
 */
.ps-block--shop-features .ps-block__header {
    margin-bottom: 14px;
    padding: 0;
    border: 0;
}

.ps-block--shop-features .ps-block__header .h1 {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 6px 12px;
    border-radius: 3px;
    border: 1px solid color-mix(in srgb, var(--color-1st, #9b2321) 22%, transparent);
    background: color-mix(in srgb, var(--color-1st, #9b2321) 6%, transparent);
    color: var(--color-1st, #9b2321);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1.4;
}

@supports not (background: color-mix(in srgb, red 6%, transparent)) {
    .ps-block--shop-features .ps-block__header .h1 {
        border-color: #e3c9c9;
        background: #faf1f1;
    }
}

/* The SEO block right under the badge becomes the page's visual heading. */
.cat-seo--above { margin-top: 4px; }

@media (max-width: 767px) {
    .ps-shopping-product .ps-product__title { font-size: 13px; }
    .ps-shopping-product .ps-product__price { font-size: 15px; }
    .ps-shopping-product .ps-product__container { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-shopping-product .ps-product,
    .ps-shopping-product .ps-product__thumbnail img { transition: none; }
}


/* ===== List layout (.ps-product--wide) ==================================== */
.ps-shopping-product .ps-product--wide {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: 3px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ps-shopping-product .ps-product--wide:hover {
    border-color: #d5d9e0;
    box-shadow: 0 6px 18px rgba(16, 25, 43, .07);
}

/* Image column: fixed, square, on the left. */
.ps-shopping-product .ps-product--wide .ps-product__thumbnail {
    flex: 0 0 190px;
    width: 190px;
    margin: 0;
    background: #f7f8f9;
    position: relative;
    overflow: hidden;
}

.ps-shopping-product .ps-product--wide .ps-product__thumbnail > a {
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
}

.ps-shopping-product .ps-product--wide .ps-product__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Content column */
.ps-shopping-product .ps-product--wide .ps-product__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
}

.ps-shopping-product .ps-product--wide .ps-product__title {
    display: block;
    min-height: 0;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--pc-text);
    text-decoration: none;
}

.ps-shopping-product .ps-product--wide .ps-product__title:hover { color: var(--pc-accent); }

.ps-shopping-product .ps-product--wide .ps-product__description {
    margin: 0 0 10px;
    color: var(--pc-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.ps-shopping-product .ps-product--wide .ps-product__price {
    margin: 0 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: var(--pc-text);
}

.ps-shopping-product .ps-product--wide .ps-product__price.sale { color: var(--pc-accent); }

/* The add-to-cart button must not stretch across the whole row. */
.ps-shopping-product .ps-product--wide .ps-btn,
.ps-shopping-product .ps-product--wide .add-to-cart-button {
    align-self: flex-start;
    width: auto;
    min-width: 190px;
    border-radius: 3px;
}

@media (max-width: 575px) {
    .ps-shopping-product .ps-product--wide { flex-direction: column; }
    .ps-shopping-product .ps-product--wide .ps-product__thumbnail { flex: none; width: 100%; }
    .ps-shopping-product .ps-product--wide .ps-btn,
    .ps-shopping-product .ps-product--wide .add-to-cart-button { width: 100%; }
}


/* ===== Toolbar: only the two things asked for ============================= */
/*
 * The original bar is left exactly as it was. Two changes only:
 *   1. the found-count becomes a badge, in the same language as the sidebar counts;
 *   2. the grid/list icons are SVG and use the brand colour.
 *
 * The badge is styled on the bare <strong> because after an AJAX filter backend.js rewrites
 * `.products-found` to `<strong>5</strong><span>Produktai rasti</span>` — a class would be lost.
 */
/*
 * "Rasti produktai: [24]" — the same count badge as the category sidebar (.cn-count):
 * grey chip, muted text, 3px radius.
 *
 * Two things to work around, both caused by backend.js rewriting `.products-found` after every
 * AJAX filter into `<strong>24</strong><span>Produktai rasti</span>`:
 *   - the class is lost, so the badge is styled on the bare <strong>;
 *   - the number comes FIRST, so flex `order` pins the label ahead of it either way.
 */
.ps-shopping .products-found {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    color: #2c3340;
    font-size: 13px;
    font-weight: 500;
}

.ps-shopping .products-found span {
    order: 1;
    margin: 0 !important;
}

.ps-shopping .products-found strong {
    order: 2;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #f0f1f4;
    color: #8b93a3;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Grid / list icons */
.ps-shopping .products-layout a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 3px;
    color: #8b93a3;
    transition: color .15s ease, background-color .15s ease;
}

.ps-shopping .products-layout a:hover { color: var(--color-1st, #9b2321); }

.ps-shopping .products-layout li.active a {
    color: var(--color-1st, #9b2321);
    background: color-mix(in srgb, var(--color-1st, #9b2321) 8%, transparent);
}

@supports not (background: color-mix(in srgb, red 8%, transparent)) {
    .ps-shopping .products-layout li.active a { background: #f7eeee; }
}

/* ===== Sort dropdown ======================================================
 * main.js enhances the native <select> with select2 on DOM-ready, so the browser paints the raw
 * 20px-tall control first and then swaps in the 34px styled widget — an ugly flash plus a jump in
 * the toolbar.
 *
 * Hide the select until select2 has wrapped it (select2 adds .select2-hidden-accessible to the
 * original element) and hold its final height so nothing moves. `visibility`, not `display`, so the
 * box is still reserved. sort.blade.php carries a <noscript> counter-rule: with scripting off
 * select2 never runs, and this would otherwise hide the only sorting control for good.
 */
.ps-shopping select.ps-select-shop-sort:not(.select2-hidden-accessible) {
    visibility: hidden;
    height: 34px;
}

/* ===== Active filter chips ================================================
 * Sit next to "Products found: N" and mirror the sidebar's visual language: 3px radius, the same
 * grey chip as the count, brand red only for the thing you are about to remove.
 */
.toolbar-found {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 1rem;
}

/* .products-found carries Bootstrap's .pt-3 (an !important utility); the flex row above now owns
   the spacing, so the extra padding would push the label out of line with the chips. */
.toolbar-found .products-found {
    padding-top: 0 !important;
}

.active-filters {
    display: contents;
}

.fc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid #e7e9ee;
    border-radius: 3px;
    background: #f0f1f4;
    color: #5a6273;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.fc-chip:hover {
    border-color: var(--color-1st, #9b2321);
    background: #fff;
    color: var(--color-1st, #9b2321);
}

.fc-chip__x {
    flex: none;
    opacity: .55;
}

.fc-chip:hover .fc-chip__x {
    opacity: 1;
}

.fc-chip:focus-visible,
.fc-clear:focus-visible {
    outline: 2px solid var(--color-1st, #9b2321);
    outline-offset: 2px;
}

.fc-clear {
    padding: 3px 4px;
    border: none;
    background: none;
    color: #8b93a3;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.fc-clear:hover {
    color: var(--color-1st, #9b2321);
}

/* ===== Empty state ========================================================
 * Replaces the yellow `alert-warning`, which read like something had broken.
 */
.shop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 1.5rem;
    padding: 56px 24px;
    border: 1px solid #e7e9ee;
    border-radius: 3px;
    background: #fbfbfc;
    text-align: center;
}

.shop-empty__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 3px;
    background: #fff;
    border: 1px solid #e7e9ee;
    color: var(--color-1st, #9b2321);
}

.shop-empty__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #2c3340;
}

.shop-empty__text {
    max-width: 380px;
    margin: 0;
    color: #8b93a3;
    font-size: 13px;
    line-height: 1.6;
}

.shop-empty__reset {
    margin-top: 18px;
    padding: 9px 18px;
    border: 1px solid var(--color-1st, #9b2321);
    border-radius: 3px;
    background: var(--color-1st, #9b2321);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.shop-empty__reset:hover {
    background: #fff;
    color: var(--color-1st, #9b2321);
}

.shop-empty__reset[hidden] {
    display: none;
}