/**
 * Aragold — Category page (Alt A: Editorial classic)
 *
 * Toate culorile sunt gated pe variabilele --cp-* injectate din header-meta
 * (theme_option). Fallback-uri inline pentru SSR safety + browsers fără var
 * cascade (rare).
 *
 * NU folosim --card-* aici (cardurile reused din opt-text-subsection-ecommerce-
 * product-card). Nu folosim --pp-* (acelea sunt pe pagina produs).
 *
 * Variabile consumate (toate definite în header-meta.blade.php):
 *   --cp-hero-overlay, --cp-hero-text
 *   --cp-filter-bg, --cp-filter-border, --cp-filter-accent, --cp-filter-label
 *   --cp-toolbar-bg
 *   --cp-pagination-bg, --cp-pagination-active-bg, --cp-pagination-active-text
 *   --cp-subcat-chip-bg
 *   --cp-faq-question
 *   --cp-editorial-accent
 */

/* ============================================================
 * 0. Hero image — base rules (any design variant: alt-a, alt-f, etc).
 *    Default browser background-size: auto + repeat → imaginea iese din
 *    container la dimensiune originala cu repetitie. Fix: cover + center
 *    + no-repeat = imaginea umple containerul fara distorsiune.
 *    Aplicabil la TOATE variantele cp-hero (override per-variant urmeaza mai jos).
 * ============================================================ */
.cp-hero__image,
.tp-category-hero-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* ============================================================
 * 1. Hero — Alt A Editorial Classic (split 50/50, serif H1)
 *    Override .tp-category-hero-area pentru a obține look editorial
 *    chiar daca categoria nu are imagine setată (fallback gradient cream).
 * ============================================================ */
.cp-hero--alt-a.tp-category-hero-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Override shofy theme.css `.tp-category-hero-area { height: 600px; }` */
    height: 480px !important;
    min-height: 480px !important;
    color: var(--cp-hero-text, #010F1C);
    overflow: hidden;
    flex-direction: row !important;
}
.cp-hero--alt-a .cp-hero__image,
.cp-hero--alt-a .tp-category-hero-image {
    grid-column: 2;
    grid-row: 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100% !important;
    height: 100% !important;
    min-height: 480px !important;
    max-height: 480px !important;
    /* Override shofy theme.css `.tp-category-hero-image { width: 75%; }` */
    flex: none !important;
}
.cp-hero--alt-a .cp-hero__wrapper,
.cp-hero--alt-a .tp-category-hero-wrapper {
    /* Override shofy `.tp-category-hero-wrapper { width: 25%; }` */
    flex: none !important;
}
.cp-hero--alt-a .cp-hero__image--gradient {
    background:
        linear-gradient(135deg, var(--cp-hero-overlay, rgba(1,15,28,.05)) 0%, transparent 60%),
        linear-gradient(135deg, #FAF7F2 0%, #F0ECE4 50%, #E8DFCF 100%);
    position: relative;
}
.cp-hero--alt-a .cp-hero__image--gradient::after {
    content: 'AR';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 180px;
    font-weight: 400;
    color: var(--cp-editorial-accent, #BD844C);
    opacity: .12;
    letter-spacing: -.02em;
}
.cp-hero--alt-a .cp-hero__wrapper {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    background: #fff;
    width: 100% !important;
    padding: 48px 64px !important;
    margin: 0 !important;
}
.cp-hero--alt-a .cp-hero__content {
    max-width: 480px;
    width: 100%;
}
.cp-hero--alt-a .cp-hero__kicker {
    font-size: 13px;
    font-weight: 500;
    color: var(--cp-editorial-accent, #BD844C);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0 0 12px;
}
.cp-hero--alt-a.tp-category-hero-area h1 {
    font-family: Georgia, 'Cormorant Garamond', serif;
    font-size: 64px !important;
    line-height: 1.05;
    color: var(--cp-hero-text, #010F1C);
    margin: 0 0 18px;
    font-weight: 500;
    letter-spacing: -.01em;
}
.cp-hero--alt-a .cp-hero__desc,
.cp-hero--alt-a.tp-category-hero-area p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pp-body-text, #3D3D3D);
    margin: 0;
    max-width: 420px;
}
/* On mobile: stack vertical, image above content */
@media (max-width: 991.98px) {
    .cp-hero--alt-a.tp-category-hero-area {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .cp-hero--alt-a .cp-hero__image {
        grid-column: 1;
        grid-row: 1;
        min-height: 280px;
    }
    .cp-hero--alt-a .cp-hero__wrapper {
        grid-column: 1;
        grid-row: 2;
        padding: 32px 20px !important;
    }
    .cp-hero--alt-a.tp-category-hero-area h1 {
        font-size: 38px !important;
    }
    .cp-hero--alt-a .cp-hero__image--gradient::after {
        font-size: 100px;
    }
}

/* ============================================================
 * 2. Sidebar filter — desktop visible (alt-a editorial classic)
 *    Override .bb-filter-offcanvas-area sa NU se ascunda pe desktop.
 * ============================================================ */
@media (min-width: 992px) {
    .cp-listing--alt-a .bb-filter-offcanvas-area,
    .cp-listing--alt-c .bb-filter-offcanvas-area,
    .cp-listing--alt-e .bb-filter-offcanvas-area,
    .cp-listing--alt-f .bb-filter-offcanvas-area {
        position: static !important;
        transform: none !important;
        background: var(--cp-filter-bg, #FFFFFF) !important;
        width: 100% !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        padding: 0 !important;
        z-index: auto !important;
    }
    .cp-listing--alt-a .bb-filter-offcanvas-wrapper,
    .cp-listing--alt-c .bb-filter-offcanvas-wrapper,
    .cp-listing--alt-e .bb-filter-offcanvas-wrapper,
    .cp-listing--alt-f .bb-filter-offcanvas-wrapper {
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .cp-listing--alt-a .bb-filter-offcanvas-close,
    .cp-listing--alt-c .bb-filter-offcanvas-close,
    .cp-listing--alt-e .bb-filter-offcanvas-close,
    .cp-listing--alt-f .bb-filter-offcanvas-close {
        display: none;
    }
    /* Backdrop gone on desktop */
    .cp-listing--alt-a ~ .bb-filter-offcanvas-overlay,
    .cp-listing--alt-c ~ .bb-filter-offcanvas-overlay,
    .cp-listing--alt-e ~ .bb-filter-offcanvas-overlay,
    .cp-listing--alt-f ~ .bb-filter-offcanvas-overlay {
        display: none !important;
    }
}

/* === Sidebar polish (alt-a Editorial classic) === */
/* Container uniformization */
.cp-listing__sidebar {
    padding-right: 8px;
}

/* Search box (top of sidebar) */
.cp-listing__sidebar .tp-sidebar-search {
    margin-bottom: 18px;
    background: transparent;
    border: 0;
    padding: 0;
}
.cp-listing__sidebar .tp-sidebar-search form,
.cp-listing__sidebar .tp-sidebar-search-form {
    position: relative;
}
.cp-listing__sidebar .tp-sidebar-search input,
.cp-listing__sidebar .tp-sidebar-search [type="search"],
.cp-listing__sidebar .tp-sidebar-search [type="text"] {
    width: 100%;
    height: 42px;
    padding: 0 44px 0 14px;
    background: #fff;
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 6px;
    font-size: 13px;
    color: var(--cp-filter-label, #010F1C);
    transition: border-color .15s;
}
.cp-listing__sidebar .tp-sidebar-search input:focus {
    outline: none;
    border-color: var(--cp-filter-accent, #BD844C);
}
.cp-listing__sidebar .tp-sidebar-search button,
.cp-listing__sidebar .tp-sidebar-search-button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--cp-filter-label, #010F1C);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-listing__sidebar .tp-sidebar-search button:hover {
    color: var(--cp-filter-accent, #BD844C);
}

/* Each filter as clean card */
.cp-listing__sidebar .bb-product-filter {
    background: var(--cp-filter-bg, #FFFFFF);
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 12px;
}
.cp-listing__sidebar .bb-product-filter-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--cp-filter-label, #010F1C);
    margin: 0 0 12px;
    padding: 0;
    border-bottom: 0;
    /* Caret indicator pe dreapta — paritate cu prototype .cp-filter-group__title::after */
    position: relative;
    padding-right: 22px;
}
.cp-listing__sidebar .bb-product-filter-title::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--pp-muted, #727578);
    border-bottom: 2px solid var(--pp-muted, #727578);
    transform: translateY(-65%) rotate(45deg);
    transition: transform .2s;
}
.cp-listing__sidebar .bb-product-filter-content {
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--cp-filter-border, #E5E7EB) transparent;
    padding-right: 4px;
}
.cp-listing__sidebar .bb-product-filter-content::-webkit-scrollbar {
    width: 4px;
}
.cp-listing__sidebar .bb-product-filter-content::-webkit-scrollbar-thumb {
    background: var(--cp-filter-border, #E5E7EB);
    border-radius: 2px;
}

/* Filter items list (categories tree, tags, brands) */
.cp-listing__sidebar .bb-product-filter-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cp-listing__sidebar .bb-product-filter-items.active {
    display: block;
}
.cp-listing__sidebar .bb-product-filter-item {
    margin: 0;
    padding: 0;
}
.cp-listing__sidebar .bb-product-filter-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--cp-filter-label, #010F1C);
    text-decoration: none;
    border-radius: 4px;
    transition: background .15s, color .15s;
    word-break: break-word;
}
.cp-listing__sidebar .bb-product-filter-link:hover {
    background: var(--cp-toolbar-bg, #F8F9FA);
    color: var(--cp-filter-accent, #BD844C);
}
.cp-listing__sidebar .bb-product-filter-link.active,
.cp-listing__sidebar .bb-product-filter-item.active > .bb-product-filter-link,
.cp-listing__sidebar .bb-product-filter-item--active > .bb-product-filter-link {
    color: var(--cp-filter-accent, #BD844C);
    font-weight: 600;
}
.cp-listing__sidebar .bb-product-filter-link svg.icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.cp-listing__sidebar .bb-product-filter-link .count {
    margin-left: auto;
    font-size: 11px;
    color: var(--pp-muted, #727578);
}

/* Nested category items: subtle indent (not 4 levels deep cascade) */
.cp-listing__sidebar .bb-product-filter-items .bb-product-filter-items {
    margin-left: 12px;
    padding-left: 8px;
    border-left: 1px solid var(--cp-filter-border, #E5E7EB);
}

/* === Parent categories: distinct visual hierarchy === */
.cp-listing__sidebar .bb-product-filter-item {
    position: relative;
}

/* Replace Tabler folder icon (rendered native pe active parent link) cu un
 * ring icon custom (cerc band + gem deasupra) — context jewelry. */
.cp-listing__sidebar .bb-product-filter-link svg.svg-icon-ti-ti-folder {
    display: none !important;
}
.cp-listing__sidebar .bb-product-filter-link:has(svg.svg-icon-ti-ti-folder)::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex-shrink: 0;
    background-color: var(--cp-filter-accent, #BD844C);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='15' r='6'/><path d='M12 4l-2.5 3l2.5 3l2.5 -3z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='15' r='6'/><path d='M12 4l-2.5 3l2.5 3l2.5 -3z'/></svg>") no-repeat center / contain;
}
/* Parent = li care contine sub-lista (`> ul.bb-product-filter-items`) */
.cp-listing__sidebar .bb-product-filter-item:has(> .bb-product-filter-items) > .bb-product-filter-link {
    font-weight: 600;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cp-filter-label, #010F1C);
    padding: 8px 32px 8px 8px;
}
.cp-listing__sidebar .bb-product-filter-item:has(> .bb-product-filter-items) > .bb-product-filter-link.active {
    color: var(--cp-filter-accent, #BD844C);
    background: rgba(189, 132, 76, .08);
    border-radius: 6px;
}
/* Sub-categorii: inapoi la weight normal pentru leafs din interior parent */
.cp-listing__sidebar .bb-product-filter-items .bb-product-filter-items .bb-product-filter-link {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    padding: 5px 8px;
}
/* Leaf items la nivelul 1 (fara sub-list) — normal weight */
.cp-listing__sidebar .bb-product-filter-item:not(:has(> .bb-product-filter-items)) > .bb-product-filter-link {
    font-weight: 400;
    text-transform: none;
    font-size: 13px;
    padding: 5px 8px;
}

/* === Toggle button: hide SVG plus/minus, use clean chevron === */
.cp-listing__sidebar .bb-product-filter [data-bb-toggle="toggle-product-categories-tree"] {
    position: absolute;
    right: 0;
    top: 6px;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    /* Hide ALL native button content (both SVGs) by zeroing typography */
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden;
    text-indent: -9999px;
    color: transparent;
    transition: background .15s;
    border-radius: 4px;
}
.cp-listing__sidebar .bb-product-filter [data-bb-toggle="toggle-product-categories-tree"]:hover {
    background: var(--cp-toolbar-bg, #F8F9FA);
}
/* Native SVGs forced hidden */
.cp-listing__sidebar .bb-product-filter [data-bb-toggle="toggle-product-categories-tree"] svg,
.cp-listing__sidebar .bb-product-filter [data-bb-toggle="toggle-product-categories-tree"] svg.icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* Chevron via mask-image — Tabler Icons chevron-down 16×16 (identic ca
 * toolbar nice-select dropdowns "Default" / "12" pentru consistență).
 * Default = chevron-down (state collapsed). Mask permite recolor via
 * background-color (gold pentru active state). */
.cp-listing__sidebar .bb-product-filter [data-bb-toggle="toggle-product-categories-tree"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    background-color: var(--cp-filter-label, #010F1C);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M6 9l6 6l6 -6'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M6 9l6 6l6 -6'/></svg>") no-repeat center / contain;
    transform: translate(-50%, -50%);
    transition: transform .25s ease, background-color .15s;
    text-indent: 0;
}
/* Cand sub-lista e expandata: chevron rotit 180deg (chevron-up effect) */
.cp-listing__sidebar .bb-product-filter-item:has(> .bb-product-filter-items.active) > [data-bb-toggle="toggle-product-categories-tree"]::before {
    transform: translate(-50%, -50%) rotate(180deg);
}
/* Active parent: chevron in culoare gold (recolor via background-color) */
.cp-listing__sidebar .bb-product-filter-item:has(> .bb-product-filter-link.active) > [data-bb-toggle="toggle-product-categories-tree"]::before {
    background-color: var(--cp-filter-accent, #BD844C);
}
/* Checkboxes accent */
.cp-listing__sidebar input[type="checkbox"],
.cp-listing__sidebar input[type="radio"] {
    accent-color: var(--cp-filter-accent, #BD844C);
}

/* Price slider (jQuery UI / range slider) — gold track */
.cp-listing__sidebar .noUi-connect,
.cp-listing__sidebar .ui-slider-range,
.cp-listing__sidebar .tp-price-filter-handle,
.cp-listing__sidebar .tp-price-filter .ui-slider-range {
    background: var(--cp-filter-accent, #BD844C) !important;
}
.cp-listing__sidebar .ui-slider-handle {
    background: #fff !important;
    border: 2px solid var(--cp-filter-accent, #BD844C) !important;
    border-radius: 50% !important;
    width: 14px !important;
    height: 14px !important;
    top: -5px !important;
    cursor: grab;
}
.cp-listing__sidebar .ui-slider-handle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(189, 132, 76, .25);
}
.cp-listing__sidebar .ui-slider {
    background: var(--cp-filter-border, #E5E7EB) !important;
    height: 4px !important;
    border: 0 !important;
    margin: 14px 6px !important;
}
.cp-listing__sidebar .tp-price-filter-input {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    font-size: 13px;
    color: var(--cp-filter-label, #010F1C);
}

/* On-sale checkbox row */
.cp-listing__sidebar .bb-product-filter-content > label,
.cp-listing__sidebar .bb-product-filter > label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cp-filter-label, #010F1C);
    cursor: pointer;
    padding: 4px 0;
}

/* Tags / brands / attribute lists (.filter-checkbox structure) — paritate prototype:
 * fiecare item: checkbox + label flexbox cu gap 8px, padding row */
.cp-listing__sidebar .filter-checkbox .bb-product-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 4px;
    margin: 0;
    border-radius: 4px;
    transition: background .15s;
}
.cp-listing__sidebar .filter-checkbox .bb-product-filter-item:hover {
    background: var(--cp-toolbar-bg, #F8F9FA);
}
.cp-listing__sidebar .filter-checkbox .bb-product-filter-item input[type="checkbox"] {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}
.cp-listing__sidebar .filter-checkbox .bb-product-filter-item label {
    margin: 0;
    font-size: 13px;
    color: var(--cp-filter-label, #010F1C);
    line-height: 1.3;
    cursor: pointer;
    flex: 1;
    word-break: break-word;
}

/* Attribute swatches (for color/size attribute filters) */
.cp-listing__sidebar .bb-product-filter-attributes .bb-product-filter-content {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 140px;
}
.cp-listing__sidebar .bb-product-filter-attributes .bb-product-filter-link {
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 14px;
}
.cp-listing__sidebar .bb-product-filter-attributes .bb-product-filter-link:hover,
.cp-listing__sidebar .bb-product-filter-attributes .bb-product-filter-link.active {
    background: var(--cp-filter-accent, #BD844C);
    color: #fff;
    border-color: var(--cp-filter-accent, #BD844C);
}

/* ============================================================
 * 3. Toolbar (sort/view bar)
 * ============================================================ */
.cp-shop-main .tp-shop-top {
    background: var(--cp-toolbar-bg, #F8F9FA);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 22px;
}

/* Product card title în grid pagina categorie — 14px / w400 (consistent cu homepage cards) */
.cp-page .bb-product-items-wrapper .tp-product-title-3,
.cp-page .bb-product-items-wrapper .tp-product-title-3 a {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.3;
}

/* ============================================================
 * 4. Pagination
 * ============================================================ */
.cp-grid-wrapper .tp-pagination .pagination .page-item .page-link,
.cp-grid-wrapper .tp-pagination .pagination .page-item .pages-number {
    background: var(--cp-pagination-bg, #FFFFFF);
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
}
.cp-grid-wrapper .tp-pagination .pagination .page-item.active .page-link,
.cp-grid-wrapper .tp-pagination .pagination .page-item .page-link.active,
.cp-grid-wrapper .tp-pagination .pagination .page-item.active .pages-number,
.cp-grid-wrapper .tp-pagination .pagination .page-item .pages-number.active {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: var(--cp-pagination-active-text, #FFFFFF) !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}

/* ============================================================
 * 5. Sub-categorii carusel
 * ============================================================ */
.cp-subcat {
    padding: 40px 0;
}
.cp-subcat__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.cp-subcat__head h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--pp-text, #010F1C);
    margin: 0;
}
.cp-subcat__head a {
    font-size: 14px;
    color: var(--pp-text, #010F1C);
    text-decoration: none;
}
.cp-subcat__list {
    display: flex;
    gap: 11px;
    overflow-x: auto;
    /* overflow-y: clip permite y:visible-style (clip nu trigger-uie scroll
     * pe Y) + padding-top 8px = spatiu pentru hover lift (translateY(-2px))
     * sa nu fie crop. Pattern uniform cu PDP scrollere + homepage swiper. */
    overflow-y: clip;
    scroll-snap-type: x mandatory;
    padding-top: 8px;
    padding-bottom: 12px;
    /* Ascunde scrollbar nativ — folosim doar .cp-subcat__scrollbar decorativ */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.cp-subcat__list::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.cp-subcat__card {
    flex: 0 0 144px;
    height: 188px;
    padding: 8px;
    background: var(--cp-subcat-chip-bg, #FFFFFF);
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--pp-text, #010F1C);
    transition: border-color .15s, transform .15s;
}
.cp-subcat__card:hover {
    border-color: var(--cp-filter-accent, #BD844C);
    transform: translateY(-2px);
}
.cp-subcat__card .cp-subcat__thumb {
    width: 128px;
    height: 128px;
    overflow: hidden;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cp-subcat__card .cp-subcat__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cp-subcat__card .cp-subcat__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FAF7F2, #F0ECE4, #E8DFCF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 36px;
    color: var(--cp-filter-accent, #BD844C);
}
.cp-subcat__card span {
    font-size: 14px;
    text-align: center;
    line-height: 1.3;
}
.cp-subcat__scrollbar {
    height: 4px;
    background: #D9D9D9;
    border-radius: 2px;
    margin-top: 12px;
    position: relative;
}
.cp-subcat__scrollbar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 12%;
    background: var(--pp-text, #010F1C);
    border-radius: 2px;
}

/* ============================================================
 * 6. FAQ accordion
 * ============================================================ */
.cp-faq {
    padding: 48px 64px;
    background: #EFF1F5;
    border-radius: 12px;
    margin: 32px 0;
}
.cp-faq__head {
    text-align: center;
    max-width: 380px;
    margin: 0 auto 24px;
}
.cp-faq__kicker {
    font-size: 14px;
    color: var(--cp-editorial-accent, #BD844C);
    margin: 0;
}
.cp-faq__head h3 {
    font-size: 32px;
    font-weight: 500;
    color: var(--cp-faq-question, #000000);
    line-height: 1.25;
    margin: 4px 0 0;
}
.cp-faq__list {
    max-width: 800px;
    margin: 0 auto;
}
.cp-faq__item {
    padding: 16px 0;
    border-bottom: 1px solid #3D3D3D;
}
.cp-faq__item summary {
    font-size: 14px;
    color: var(--cp-faq-question, #000000);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cp-faq__item summary::-webkit-details-marker {
    display: none;
}
.cp-faq__icon {
    width: 14px;
    height: 14px;
    position: relative;
    flex-shrink: 0;
}
.cp-faq__icon::before,
.cp-faq__icon::after {
    content: '';
    position: absolute;
    background: var(--cp-faq-question, #000000);
    transition: transform .2s ease;
}
.cp-faq__icon::before {
    top: 6px;
    left: 0;
    width: 14px;
    height: 2px;
}
.cp-faq__icon::after {
    top: 0;
    left: 6px;
    width: 2px;
    height: 14px;
}
.cp-faq__item[open] .cp-faq__icon::after {
    transform: scaleY(0);
}
.cp-faq__a {
    font-size: 13px;
    color: var(--pp-muted, #727578);
    margin-top: 10px;
    line-height: 1.5;
}

/* ============================================================
 * 7a. Editorial carousel (per Figma node 221:349 + scrollbar 349:1021)
 *     Replaces single-card .cp-editorial — pull from children categories
 *     with descriptions or fallback hardcoded set.
 * ============================================================ */
.cp-editorial-carousel {
    padding: 48px 0;
    position: relative; /* anchor pentru .cp-editorial-carousel__nav */
}
.cp-editorial-carousel__track {
    display: flex;
    gap: 150px;
    overflow-x: scroll;
    overflow-y: clip;
    /* `mandatory` + scroll-snap-stop:always — fiecare scroll/swipe se opreste
     * obligatoriu la urmatorul card, indiferent de viteza/distanta. Realizeaza
     * navigare strict "un card pe tura". */
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 24px;
    -webkit-overflow-scrolling: touch;
    /* Cursor grab pentru click-and-drag (paritate Swiper). JS schimba la
     * `grabbing` pe mousedown. */
    cursor: grab;
    user-select: none; /* impiedica selectarea textului in timpul drag */
}
.cp-editorial-carousel__track:active {
    cursor: grabbing;
}
.cp-editorial-carousel__track::-webkit-scrollbar { display: none; }

.cp-editorial-carousel__card {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 16px;
    align-items: start;
    scroll-snap-align: start;
    /* always: orice scroll forteaza pas la urmatorul card, fara skip-uri pe
     * swipe rapide (Chrome 89+/Firefox 87+/Safari 15+). */
    scroll-snap-stop: always;
}

/* Sageti prev/next — paritate cu .hp-categories__nav (rotund, edge, hover gold).
 * Click → scroll by exact 1 card width via JS (vezi category-page.js). */
.cp-editorial-carousel__nav {
    align-items: center;
    background: #fff;
    border: 1px solid var(--cp-border, #E5E7EB);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    color: var(--cp-text, #010F1C);
    cursor: pointer;
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: calc(50% - 12px); /* center pe media area, deasupra scrollbar-ului */
    transform: translateY(-50%);
    transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    width: 40px;
    z-index: 10;
}
.cp-editorial-carousel__nav:hover,
.cp-editorial-carousel__nav:focus-visible {
    border-color: var(--cp-accent, #BD844C);
    color: var(--cp-accent, #BD844C);
    outline: none;
}
.cp-editorial-carousel__nav--prev { left: -8px; }
.cp-editorial-carousel__nav--next { right: -8px; }
.cp-editorial-carousel__nav[disabled],
.cp-editorial-carousel__nav.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.cp-editorial-carousel--single .cp-editorial-carousel__nav {
    display: none; /* Hide cand e doar un card */
}

.cp-editorial-carousel__media {
    width: 500px;
    height: 500px;
    overflow: hidden;
    border-radius: 10px;
    background: #d9d9d9;
    flex-shrink: 0;
}
.cp-editorial-carousel__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cp-editorial-carousel__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FAF7F2, #F0ECE4, #E8DFCF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 40px;
    color: var(--cp-editorial-accent, #BD844C);
}

.cp-editorial-carousel__text {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.cp-editorial-carousel__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.06;
    color: var(--pp-text, #010F1C);
    margin: 0;
}
.cp-editorial-carousel__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--pp-text, #010F1C);
}
.cp-editorial-carousel__body p {
    margin: 0 0 14px;
}

/* Custom scrollbar (sub track, mirror Figma 349:1021).
 * Auto-hide: ascuns implicit; visibil pe hover sau cand carusel-ul e in scroll
 * activ (.is-scrolling, toggled de JS pentru ~1.2s dupa fiecare scroll event). */
.cp-editorial-carousel__scrollbar {
    height: 4px;
    background: #d3d8dd;
    border-radius: 22px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.cp-editorial-carousel:hover .cp-editorial-carousel__scrollbar,
.cp-editorial-carousel.is-scrolling .cp-editorial-carousel__scrollbar,
.cp-editorial-carousel:focus-within .cp-editorial-carousel__scrollbar {
    opacity: 1;
}
.cp-editorial-carousel__thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 33%;
    background: var(--pp-text, #010F1C);
    border-radius: 22px;
    transition: left .15s linear, width .15s linear;
}

/* Responsive: smaller media on tablet/mobile */
@media (max-width: 991.98px) {
    .cp-editorial-carousel__card {
        grid-template-columns: 1fr;
    }
    .cp-editorial-carousel__media {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1;
    }
    .cp-editorial-carousel__heading {
        font-size: 32px;
    }
    .cp-editorial-carousel__track {
        gap: 60px;
    }
}

/* ============================================================
 * 7b. Editorial section (legacy single card — kept for backward compat
 *     dacă alt-uri folosesc altă structură)
 * ============================================================ */
.cp-editorial {
    display: grid;
    grid-template-columns: minmax(300px, 500px) 1fr;
    gap: 32px;
    padding: 48px 0;
    align-items: start;
}
.cp-editorial__media {
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 10px;
    background: #d9d9d9;
}
.cp-editorial__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cp-editorial__placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FAF7F2, #F0ECE4, #E8DFCF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 40px;
    color: var(--cp-editorial-accent, #BD844C);
}
.cp-editorial__text {
    padding: 24px 0;
}
.cp-editorial__text h2 {
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1.1;
    color: var(--pp-text, #010F1C);
    margin: 0 0 24px;
    font-weight: 500;
}
.cp-editorial__body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--pp-body-text, #3D3D3D);
}
.cp-editorial__body p {
    margin: 0 0 14px;
}

/* ============================================================
 * 8. Responsive
 * ============================================================ */
@media (max-width: 991.98px) {
    .cp-faq {
        padding: 32px 20px;
    }
    .cp-faq__head h3 {
        font-size: 24px;
    }
    .cp-editorial {
        grid-template-columns: 1fr;
        padding: 32px 0;
    }
    .cp-editorial__text {
        padding: 8px 0;
    }
    .cp-editorial__text h2 {
        font-size: 32px;
    }
}


/* ============================================================
 * 9. ALT B — Tiffany minimal
 *    Hero: full-width crem centrat + thin serif + gold underline
 *    Listing: drawer sidebar (offcanvas, ascuns desktop) + grid 4 col
 *    Sectiuni: no FAQ, no editorial, +subcat
 *    Source prototype: public/product-category-page-reference/alt-b.html
 * ============================================================ */
.cp-hero--alt-b.tp-category-hero-area {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100%;
    background: #FAF7F2;
    padding: 80px 24px 64px;
    text-align: center;
    flex-direction: column !important;
    position: relative;
}
.cp-hero--alt-b .cp-hero__image,
.cp-hero--alt-b .tp-category-hero-image {
    display: none !important;
}
.cp-hero--alt-b .cp-hero__wrapper,
.cp-hero--alt-b .tp-category-hero-wrapper {
    width: 100% !important;
    flex: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
}
.cp-hero--alt-b .cp-hero__content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.cp-hero--alt-b .cp-hero__kicker {
    font-size: 11px; font-weight: 500;
    color: var(--cp-editorial-accent, #BD844C);
    text-transform: uppercase;
    letter-spacing: .28em;
    margin: 0 0 18px;
}
.cp-hero--alt-b.tp-category-hero-area h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 56px !important;
    font-weight: 300;
    color: var(--cp-hero-text, #010F1C);
    margin: 0 0 16px;
    line-height: 1.1;
    letter-spacing: .01em;
    text-align: center !important;
}
.cp-hero--alt-b .cp-hero__desc,
.cp-hero--alt-b.tp-category-hero-area p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--pp-body-text, #3D3D3D);
    max-width: 540px;
    margin: 0 auto 22px;
    text-align: center;
}
.cp-hero--alt-b .cp-hero__content::after {
    content: '';
    display: block;
    width: 60px;
    height: 1px;
    background: var(--cp-editorial-accent, #BD844C);
    margin: 22px auto 0;
}
@media (max-width: 991.98px) {
    .cp-hero--alt-b.tp-category-hero-area { padding: 56px 20px 44px; }
    .cp-hero--alt-b.tp-category-hero-area h1 { font-size: 38px !important; }
}

/* alt-b listing: ascunde sidebar pe desktop (drawer-only) */
@media (min-width: 992px) {
    .cp-listing--alt-b .cp-listing__sidebar {
        display: none;
    }
    .cp-listing--alt-b .cp-listing__main,
    .cp-listing--alt-b .col-xl-9.col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Trigger drawer button (cu Botble offcanvas) */
    .cp-listing--alt-b .bb-filter-offcanvas-area {
        position: fixed !important;
        z-index: 99 !important;
    }
}
/* Grid 4 col (override product-listing default 3 col) */
.cp-listing--alt-b .bb-product-items-wrapper .row > .col,
.cp-listing--alt-b .bb-product-items-wrapper .row > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}
@media (max-width: 1199.98px) {
    .cp-listing--alt-b .bb-product-items-wrapper .row > .col,
    .cp-listing--alt-b .bb-product-items-wrapper .row > [class*="col-"] {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}
@media (max-width: 767.98px) {
    .cp-listing--alt-b .bb-product-items-wrapper .row > .col,
    .cp-listing--alt-b .bb-product-items-wrapper .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


/* ============================================================
 * 10. ALT C — Mejuri lookbook
 *     Hero: split flip (image stanga + content dreapta cu 2 CTA)
 *     Listing: sidebar dreapta (flex-row-reverse) + grid 3 col
 *     Sectiuni: +FAQ, +editorial, +subcat
 *     Source prototype: public/product-category-page-reference/alt-c.html
 * ============================================================ */
.cp-hero--alt-c.tp-category-hero-area {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    height: 540px !important;
    min-height: 540px !important;
    color: var(--cp-hero-text, #010F1C);
    overflow: hidden;
    flex-direction: row !important;
}
.cp-hero--alt-c .cp-hero__image,
.cp-hero--alt-c .tp-category-hero-image {
    grid-column: 1; /* image LEFT (flip from alt-a) */
    grid-row: 1;
    width: 100% !important;
    height: 100% !important;
    min-height: 540px !important;
    flex: none !important;
}
.cp-hero--alt-c .cp-hero__wrapper,
.cp-hero--alt-c .tp-category-hero-wrapper {
    grid-column: 2;
    grid-row: 1;
    flex: none !important;
    background: #fff !important;
    width: 100% !important;
    padding: 48px 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.cp-hero--alt-c .cp-hero__content {
    max-width: 480px;
    width: 100%;
    text-align: left;
}
.cp-hero--alt-c .cp-hero__image--gradient {
    background:
        linear-gradient(135deg, var(--cp-hero-overlay, rgba(1,15,28,.05)) 0%, transparent 60%),
        linear-gradient(135deg, #FAF7F2 0%, #F0ECE4 50%, #E8DFCF 100%);
}
.cp-hero--alt-c .cp-hero__kicker {
    font-size: 12px; font-weight: 500;
    color: var(--cp-editorial-accent, #BD844C);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0 0 12px;
}
.cp-hero--alt-c.tp-category-hero-area h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 48px !important;
    line-height: 1.05;
    font-weight: 500;
    color: var(--cp-hero-text, #010F1C);
    margin: 0 0 14px;
    letter-spacing: -.01em;
}
.cp-hero--alt-c .cp-hero__desc,
.cp-hero--alt-c.tp-category-hero-area p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-body-text, #3D3D3D);
    margin: 0 0 22px;
    max-width: 420px;
}
@media (max-width: 991.98px) {
    .cp-hero--alt-c.tp-category-hero-area {
        grid-template-columns: 1fr;
        height: auto !important;
        min-height: auto !important;
    }
    .cp-hero--alt-c .cp-hero__image,
    .cp-hero--alt-c .tp-category-hero-image {
        grid-column: 1; grid-row: 1;
        min-height: 280px !important;
    }
    .cp-hero--alt-c .cp-hero__wrapper,
    .cp-hero--alt-c .tp-category-hero-wrapper {
        grid-column: 1; grid-row: 2;
        padding: 32px 20px !important;
    }
    .cp-hero--alt-c.tp-category-hero-area h1 { font-size: 32px !important; }
}

/* alt-c listing: sidebar dreapta */
.cp-listing--alt-c { flex-direction: row-reverse; }


/* ============================================================
 * 11. ALT D — Cartier formal
 *     Hero: full-bleed cream gradient + serif mare 64px
 *     Listing: top horizontal filter bar + grid 4 col (no sidebar col)
 *     Sectiuni: +FAQ, no editorial, +subcat
 *     Source prototype: public/product-category-page-reference/alt-d.html
 * ============================================================ */
.cp-hero--alt-d.tp-category-hero-area {
    display: block !important;
    position: relative;
    width: 100%;
    height: 480px !important;
    min-height: 480px !important;
    overflow: hidden;
    flex-direction: column !important;
    background:
        linear-gradient(180deg, transparent 30%, rgba(1,15,28,.15) 100%),
        linear-gradient(135deg, #FAF7F2 0%, #F0ECE4 40%, #E8DFCF 100%);
    color: var(--cp-hero-text, #010F1C);
}
.cp-hero--alt-d .cp-hero__image,
.cp-hero--alt-d .tp-category-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: 0;
    opacity: .6;
    flex: none !important;
}
.cp-hero--alt-d .cp-hero__image--gradient { display: none; }
.cp-hero--alt-d .cp-hero__wrapper,
.cp-hero--alt-d .tp-category-hero-wrapper {
    position: relative;
    z-index: 1;
    width: 100% !important;
    flex: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
}
.cp-hero--alt-d .cp-hero__content {
    max-width: 700px;
    width: 100%;
    padding: 0 60px 60px;
}
.cp-hero--alt-d .cp-hero__kicker {
    font-size: 11px; font-weight: 500;
    color: var(--cp-editorial-accent, #BD844C);
    text-transform: uppercase;
    letter-spacing: .32em;
    margin: 0 0 14px;
}
.cp-hero--alt-d.tp-category-hero-area h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 72px !important;
    line-height: 1.05;
    font-weight: 500;
    color: var(--cp-hero-text, #010F1C);
    margin: 0 0 14px;
    letter-spacing: -.005em;
}
.cp-hero--alt-d .cp-hero__desc,
.cp-hero--alt-d.tp-category-hero-area p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pp-body-text, #3D3D3D);
    margin: 0;
    max-width: 540px;
}
@media (max-width: 991.98px) {
    .cp-hero--alt-d.tp-category-hero-area { height: 360px !important; min-height: 360px !important; }
    .cp-hero--alt-d .cp-hero__content { padding: 0 24px 32px; }
    .cp-hero--alt-d.tp-category-hero-area h1 { font-size: 40px !important; }
    .cp-hero--alt-d .cp-hero__kicker { letter-spacing: .22em; }
}

/* alt-d listing: ascunde sidebar pe desktop (filter bar este top, prin filtrele top in-page) */
@media (min-width: 992px) {
    .cp-listing--alt-d .cp-listing__sidebar {
        display: none;
    }
    .cp-listing--alt-d .cp-listing__main,
    .cp-listing--alt-d .col-xl-9.col-lg-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Top filter bar accent — folosim .product-filters-top din Botble standard
     * stilizat prin filter-bar look cream surface. */
    .cp-listing--alt-d .bb-product-filters-top,
    .cp-listing--alt-d .tp-shop-top {
        background: var(--cp-toolbar-bg, #F8F9FA) !important;
        border: 1px solid var(--cp-filter-border, #E5E7EB);
        padding: 16px 20px !important;
        border-radius: 8px;
        margin-bottom: 24px;
    }
}
/* Grid 4 col */
.cp-listing--alt-d .bb-product-items-wrapper .row > .col,
.cp-listing--alt-d .bb-product-items-wrapper .row > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}
@media (max-width: 1199.98px) {
    .cp-listing--alt-d .bb-product-items-wrapper .row > .col,
    .cp-listing--alt-d .bb-product-items-wrapper .row > [class*="col-"] {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}
@media (max-width: 767.98px) {
    .cp-listing--alt-d .bb-product-items-wrapper .row > .col,
    .cp-listing--alt-d .bb-product-items-wrapper .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}


/* ============================================================
 * 12. ALT E — Pandora dense
 *     Hero: compact strip 180px cu meta inline (count, subcat, pret)
 *     Listing: sidebar fix densa + grid 4 col
 *     Sectiuni: no FAQ, +editorial bottom, +subcat
 *     Source prototype: public/product-category-page-reference/alt-e.html
 * ============================================================ */
.cp-hero--alt-e.tp-category-hero-area {
    display: flex !important;
    flex-direction: row !important;
    height: 220px !important;
    min-height: 220px !important;
    align-items: stretch;
    background: linear-gradient(135deg, #FAF7F2 0%, #F0ECE4 100%);
    color: var(--cp-hero-text, #010F1C);
}
/* alt-e: NO image (purely typographic compact strip) */
.cp-hero--alt-e .cp-hero__image,
.cp-hero--alt-e .tp-category-hero-image {
    display: none !important;
}
.cp-hero--alt-e .cp-hero__wrapper,
.cp-hero--alt-e .tp-category-hero-wrapper {
    width: 100% !important;
    flex: none !important;
    background: transparent !important;
    padding: 32px 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
.cp-hero--alt-e .cp-hero__content {
    max-width: 1200px;
    width: 100%;
    text-align: left;
}
.cp-hero--alt-e .cp-hero__kicker {
    font-size: 11px; font-weight: 500;
    color: var(--cp-editorial-accent, #BD844C);
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 0 0 6px;
}
.cp-hero--alt-e.tp-category-hero-area h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px !important;
    line-height: 1;
    font-weight: 700;
    color: var(--cp-hero-text, #010F1C);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}
.cp-hero--alt-e .cp-hero__desc,
.cp-hero--alt-e.tp-category-hero-area p {
    font-size: 13px;
    line-height: 1.5;
    color: var(--pp-body-text, #3D3D3D);
    margin: 0;
    max-width: none;
}
@media (max-width: 991.98px) {
    .cp-hero--alt-e.tp-category-hero-area { flex-direction: column !important; height: auto !important; min-height: auto !important; }
    .cp-hero--alt-e .cp-hero__image,
    .cp-hero--alt-e .tp-category-hero-image { display: none !important; }
    .cp-hero--alt-e .cp-hero__wrapper,
    .cp-hero--alt-e .tp-category-hero-wrapper { width: 100% !important; padding: 28px 20px !important; }
    .cp-hero--alt-e.tp-category-hero-area h1 { font-size: 28px !important; }
}

/* alt-e listing: grid 4 col */
.cp-listing--alt-e .bb-product-items-wrapper .row > .col,
.cp-listing--alt-e .bb-product-items-wrapper .row > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}
@media (max-width: 1199.98px) {
    .cp-listing--alt-e .bb-product-items-wrapper .row > .col,
    .cp-listing--alt-e .bb-product-items-wrapper .row > [class*="col-"] {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}
@media (max-width: 767.98px) {
    .cp-listing--alt-e .bb-product-items-wrapper .row > .col,
    .cp-listing--alt-e .bb-product-items-wrapper .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}
/* Sidebar dense — reduce padding, more compact */
.cp-listing--alt-e .cp-listing__sidebar .bb-product-filter {
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
}
.cp-listing--alt-e .cp-listing__sidebar .bb-product-filter-title {
    font-size: 11px !important;
    margin-bottom: 6px !important;
    padding-bottom: 6px !important;
}


/* ============================================================
 * 13. ALT F — Net-a-Porter editorial
 *     Hero: full-bleed warm gradient (dark overlay) cu text alb
 *     Listing: sidebar fix + sticky toolbar + grid 3 col
 *     Sectiuni: +FAQ, +editorial inline mid-grid, +subcat
 *     Source prototype: public/product-category-page-reference/alt-f.html
 * ============================================================ */
.cp-hero--alt-f.tp-category-hero-area {
    display: block !important;
    position: relative;
    width: 100%;
    height: 520px !important;
    min-height: 520px !important;
    overflow: hidden;
    flex-direction: column !important;
    background:
        linear-gradient(135deg, #2C1B0E 0%, #5A3A1F 50%, #BD844C 100%);
    color: #fff;
}
.cp-hero--alt-f .cp-hero__image,
.cp-hero--alt-f .tp-category-hero-image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    z-index: 0;
    opacity: .35;
    flex: none !important;
    mix-blend-mode: luminosity;
}
.cp-hero--alt-f .cp-hero__image--gradient { display: none; }
.cp-hero--alt-f::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 100%);
    z-index: 1;
}
.cp-hero--alt-f .cp-hero__wrapper,
.cp-hero--alt-f .tp-category-hero-wrapper {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    flex: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
}
.cp-hero--alt-f .cp-hero__content {
    max-width: 720px;
    padding: 0 60px 60px;
}
.cp-hero--alt-f .cp-hero__kicker {
    font-size: 11px; font-weight: 500;
    color: #FAE7C8;
    text-transform: uppercase;
    letter-spacing: .26em;
    margin: 0 0 18px;
}
.cp-hero--alt-f.tp-category-hero-area h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 64px !important;
    line-height: 1.05;
    font-weight: 500;
    color: #fff !important;
    margin: 0 0 14px;
    letter-spacing: -.005em;
}
.cp-hero--alt-f .cp-hero__desc,
.cp-hero--alt-f.tp-category-hero-area p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.92);
    margin: 0;
    max-width: 540px;
}
@media (max-width: 991.98px) {
    .cp-hero--alt-f.tp-category-hero-area { height: 380px !important; min-height: 380px !important; }
    .cp-hero--alt-f .cp-hero__content { padding: 0 24px 36px; }
    .cp-hero--alt-f.tp-category-hero-area h1 { font-size: 40px !important; }
}

/* alt-f listing: sticky toolbar pe top */
@media (min-width: 992px) {
    .cp-listing--alt-f .tp-shop-top,
    .cp-listing--alt-f .bb-product-filters-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255,255,255,.94) !important;
        backdrop-filter: blur(8px);
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--cp-filter-border, #E5E7EB);
        margin-bottom: 22px;
    }
}


/* ============================================================
 * 14. BASELINE — Shofy default (NOT a custom variant)
 *     Layout: 75% imagine + 25% wrapper text dreapta
 *     No overrides — cade pe shofy/assets/sass/category-hero.scss native.
 *     Doar marker class pentru disambiguare cand .cp-hero--alt-* nu se aplica.
 * ============================================================ */
.cp-hero--baseline.tp-category-hero-area {
    /* Reset overrides if any cascade leak — keep as Shofy native */
    height: 600px;
}

/* baseline listing: NO sidebar overrides, default 3 col Shofy */


/* Desktop category/dynamic hero: 50/50 split, full image without crop. */
@media (min-width: 992px) {
    .cp-hero--category-page.cp-hero--has-image.tp-category-hero-area,
    .cp-hero--dynamic-page.cp-hero--has-image.tp-category-hero-area {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
    }

    .cp-hero--category-page.cp-hero--has-image .cp-hero__image,
    .cp-hero--category-page.cp-hero--has-image .tp-category-hero-image,
    .cp-hero--dynamic-page.cp-hero--has-image .cp-hero__image,
    .cp-hero--dynamic-page.cp-hero--has-image .tp-category-hero-image {
        position: relative !important;
        inset: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-image: none !important;
        background-color: #FAF7F2;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
    }

    .cp-hero--category-page.cp-hero--has-image .cp-hero__image img,
    .cp-hero--category-page.cp-hero--has-image .tp-category-hero-image img,
    .cp-hero--dynamic-page.cp-hero--has-image .cp-hero__image img,
    .cp-hero--dynamic-page.cp-hero--has-image .tp-category-hero-image img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    .cp-hero--category-page.cp-hero--has-image .cp-hero__wrapper,
    .cp-hero--category-page.cp-hero--has-image .tp-category-hero-wrapper,
    .cp-hero--dynamic-page.cp-hero--has-image .cp-hero__wrapper,
    .cp-hero--dynamic-page.cp-hero--has-image .tp-category-hero-wrapper {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: stretch !important;
    }
}


/* ============================================================
 * 15. Hero CTA buttons (alt-c Mejuri lookbook)
 * ============================================================ */
.cp-hero__ctas {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.cp-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none !important;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    border: 1px solid transparent;
    min-width: 132px;
}
.cp-hero__cta--primary {
    background: var(--cp-hero-text, #010F1C);
    color: #fff !important;
    border-color: var(--cp-hero-text, #010F1C);
}
.cp-hero__cta--primary:hover {
    background: var(--cp-editorial-accent, #BD844C);
    border-color: var(--cp-editorial-accent, #BD844C);
    color: #fff !important;
    transform: translateY(-1px);
}
.cp-hero__cta--secondary {
    background: transparent;
    color: var(--cp-hero-text, #010F1C) !important;
    border-color: var(--cp-hero-text, #010F1C);
}
.cp-hero__cta--secondary:hover {
    background: var(--cp-hero-text, #010F1C);
    color: #fff !important;
    transform: translateY(-1px);
}


/* ============================================================
 * 16. Hero meta inline (alt-e Pandora dense)
 *     Format: "X piese · Y sub-categorii · Pret de la Z Lei"
 * ============================================================ */
.cp-hero__meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--pp-body-text, #3D3D3D);
}
.cp-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cp-hero__meta-item:not(:last-child)::after {
    content: '·';
    margin-left: 18px;
    color: var(--pp-muted, #727578);
    opacity: .5;
}
.cp-hero__meta-item strong {
    color: var(--cp-hero-text, #010F1C);
    font-weight: 600;
}


/* ============================================================
 * 17. Filter button visibility — alt-b/d desktop forced visible
 *     Default Shofy: .tp-shop-top-filter este d-lg-none. Override.
 * ============================================================ */
@media (min-width: 992px) {
    .cp-page--alt-b .tp-shop-top-filter,
    .cp-page--alt-d .tp-shop-top-filter {
        display: block !important;
    }
    /* Make button more prominent — alt-b/d se bazeaza pe el complet pe desktop */
    .cp-page--alt-b .tp-shop-top-filter .tp-filter-btn,
    .cp-page--alt-d .tp-shop-top-filter .tp-filter-btn {
        background: var(--cp-hero-text, #010F1C);
        color: #fff;
        border-color: var(--cp-hero-text, #010F1C);
        padding: 10px 18px;
        font-weight: 500;
        border-radius: 8px !important;
        height: 41px;
    }
    .cp-page--alt-b .tp-shop-top-filter .tp-filter-btn svg path,
    .cp-page--alt-d .tp-shop-top-filter .tp-filter-btn svg path {
        stroke: #fff;
    }
    .cp-page--alt-b .tp-shop-top-filter .tp-filter-btn:hover,
    .cp-page--alt-d .tp-shop-top-filter .tp-filter-btn:hover {
        background: var(--cp-editorial-accent, #BD844C);
        border-color: var(--cp-editorial-accent, #BD844C);
    }

    /* Top toolbar pe alt-d: layout horizontal filter bar look */
    .cp-page--alt-d .tp-shop-top {
        background: var(--cp-toolbar-bg, #F8F9FA);
        border: 1px solid var(--cp-filter-border, #E5E7EB);
        padding: 16px 20px !important;
        border-radius: 8px;
        margin-bottom: 24px;
    }
}


/* ============================================================
 * 18. ALT F sticky toolbar (fixed selector)
 *     Botble's actual class is .tp-shop-top, NOT .bb-product-filters-top
 * ============================================================ */
@media (min-width: 992px) {
    .cp-page--alt-f .tp-shop-top {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255,255,255,.94) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--cp-filter-border, #E5E7EB);
        border-radius: 0;
        margin: 0 -16px 22px;
    }
}


/* ============================================================
 * 19. ALT F editorial inline mid-grid
 *     Editorial section gets injected via JS after the 6th product card.
 *     This rule styles it inline (smaller, narrower, fits 3-col grid).
 * ============================================================ */
.cp-grid-inline-editorial {
    grid-column: 1 / -1;
    margin: 12px 0;
    padding: 32px 28px;
    background: linear-gradient(135deg, #FAF7F2 0%, #F0ECE4 50%, #E8DFCF 100%);
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: center;
}
.cp-grid-inline-editorial__media {
    aspect-ratio: 4/3;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    background-color: var(--cp-toolbar-bg, #F8F9FA);
}
.cp-grid-inline-editorial__text h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--cp-hero-text, #010F1C);
}
.cp-grid-inline-editorial__text p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--pp-body-text, #3D3D3D);
    margin: 0 0 16px;
}
.cp-grid-inline-editorial__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cp-hero-text, #010F1C);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .14em;
    border-bottom: 1px solid var(--cp-hero-text, #010F1C);
    padding-bottom: 4px;
}
.cp-grid-inline-editorial__cta:hover {
    color: var(--cp-editorial-accent, #BD844C);
    border-bottom-color: var(--cp-editorial-accent, #BD844C);
}
@media (max-width: 767.98px) {
    .cp-grid-inline-editorial { grid-template-columns: 1fr; padding: 24px; }
    .cp-grid-inline-editorial__text h3 { font-size: 26px; }
}


/* ============================================================
 * 20. Card style variations per variant
 *     - alt-b: compact "Adauga" button
 *     - alt-c: "Vezi mai mult" / load-more button styling
 * ============================================================ */
/* alt-b: compact ATC */
.cp-listing--alt-b .tp-product-btn-3 .tp-product-add-cart-btn-large,
.cp-listing--alt-b .bb-btn-add-cart {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 36px;
}

/* alt-c: hero CTA-uri pe hero, plus pagination button stile mai prominent */
.cp-listing--alt-c .tp-pagination .pagination .page-link {
    padding: 10px 14px;
}


/* ============================================================
 * 21. ALT A — refinement to match prototype 1:1
 *     User feedback 2026-05-10: cele 6 zone (trust strip / sidebar /
 *     toolbar / cards / pagination / icons) trebuie sa replice exact
 *     prototipul din public/product-category-page-reference/alt-a.html
 *     (paritate 100%, nu doar foundation).
 * ============================================================ */

/* 21.1 Trust strip static (NO marquee animation pe alt-a) */
.cp-page--alt-a .ara-trust-strip.ara-trust-marquee {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
.cp-page--alt-a .ara-trust-strip .ara-trust-track {
    animation: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 18px 0;
    width: 100%;
    transform: none !important;
}
/* Hide duplicated items (marquee uses array_merge to double the list) */
.cp-page--alt-a .ara-trust-strip .ara-trust-track .ara-trust-item[aria-hidden="true"] {
    display: none !important;
}

/* 21.2 Toolbar — rounded corners 8px + cleaner SVG sizing */
.cp-page--alt-a .tp-shop-top {
    background: var(--cp-toolbar-bg, #F8F9FA);
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 10px;
    padding: 14px 18px !important;
    margin-bottom: 22px !important;
}
.cp-page--alt-a .tp-shop-top-tab .nav-tabs {
    gap: 6px;
    border: 0 !important;
}
.cp-page--alt-a .tp-shop-top-tab .nav-link {
    width: 41px !important;
    height: 41px !important;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-filter-label, #010F1C);
}
.cp-page--alt-a .tp-shop-top-tab .nav-link.active {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
}
.cp-page--alt-a .tp-shop-top-tab .nav-link svg.icon {
    width: 18px !important;
    height: 18px !important;
}
.cp-page--alt-a .tp-shop-top-result {
    margin-left: 14px;
    font-size: 14px;
    color: var(--pp-muted, #727578);
}
.cp-page--alt-a .tp-shop-top-result p {
    margin: 0;
}
/* Sort + Per-page dropdowns rounded */
.cp-page--alt-a .tp-shop-top-select .nice-select,
.cp-page--alt-a .tp-shop-top-select .form-select {
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    padding: 9px 36px 9px 14px !important;
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    color: var(--cp-filter-label, #010F1C) !important;
    min-height: 41px;
}
.cp-page--alt-a .tp-shop-top-select .nice-select:hover {
    border-color: var(--cp-editorial-accent, #BD844C) !important;
}
.cp-page--alt-a .tp-shop-top-select .nice-select .list {
    border-radius: 8px !important;
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    margin-top: 4px;
}
.cp-page--alt-a .tp-shop-top-select .nice-select .option:hover {
    background: var(--cp-toolbar-bg, #F8F9FA);
}
.cp-page--alt-a .tp-shop-top-select .nice-select .option.selected {
    color: var(--cp-editorial-accent, #BD844C);
    font-weight: 500;
}
/* Filter trigger button (mobile) — rounded */
.cp-page--alt-a .tp-shop-top-filter .tp-filter-btn {
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px;
    padding: 10px 16px;
    height: 41px;
}

/* 21.3 Pagination — rounded 8px + dark active state (proto Alt A) */
.cp-page--alt-a .tp-pagination .pagination {
    gap: 6px;
    margin-top: 32px;
    margin-bottom: 24px;
}
.cp-page--alt-a .tp-pagination .pagination .page-item .page-link {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--cp-filter-label, #010F1C) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: background .15s, color .15s, border-color .15s;
}
.cp-page--alt-a .tp-pagination .pagination .page-item .page-link:hover {
    border-color: var(--cp-editorial-accent, #BD844C) !important;
    color: var(--cp-editorial-accent, #BD844C) !important;
}
.cp-page--alt-a .tp-pagination .pagination .page-item.active .page-link {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: var(--cp-pagination-active-text, #FFFFFF) !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}
.cp-page--alt-a .tp-pagination .pagination .page-item.disabled .page-link {
    color: var(--pp-muted, #727578) !important;
    background: var(--cp-toolbar-bg, #F8F9FA) !important;
}
.cp-page--alt-a .tp-pagination .pagination .page-item .page-link svg {
    width: 14px !important;
    height: 14px !important;
}

/* 21.4 Heart/eye/compare icons — fix dimensions, no pixelation */
/* Product card hover actions: keep icons geometrically centered in every category variant. */
.tp-shop-area .tp-product-action .tp-product-action-item,
.tp-shop-area .tp-product-action-3 .tp-product-action-item-3 {
    align-items: center !important;
}
.tp-shop-area .tp-product-action .tp-product-action-btn,
.tp-shop-area .tp-product-action-3 .tp-product-action-btn-3 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
}
.tp-shop-area .tp-product-action .tp-product-action-btn > svg,
.tp-shop-area .tp-product-action-3 .tp-product-action-btn-3 > svg {
    display: block !important;
    flex: 0 0 auto;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    vertical-align: middle !important;
}
.cp-page--alt-a .tp-product-action-3 .tp-product-action-btn-3 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, .8);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    color: var(--cp-filter-label, #010F1C);
    transition: background .15s, color .15s;
}
.cp-page--alt-a .tp-product-action-3 .tp-product-action-btn-3:hover {
    background: var(--cp-pagination-active-bg, #010F1C);
    color: #fff;
}
.cp-page--alt-a .tp-product-action-3 .tp-product-action-btn-3 svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px;
    max-height: 16px;
}

/* 21.5 Card layout — make ATC button fit cleanly under content */
.cp-page--alt-a .tp-product-item-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.cp-page--alt-a .tp-product-item-3:hover {
    box-shadow: 0 4px 14px 0 rgba(130, 130, 130, .18);
}
.cp-page--alt-a .tp-product-item-3 .tp-product-thumb-3 {
    margin-bottom: 0 !important;
}
.cp-page--alt-a .tp-product-item-3 .tp-product-content-3 {
    padding: 14px 14px 0 14px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.cp-page--alt-a .tp-product-item-3 .tp-product-content-3 .tp-product-title-3 {
    font-size: 14px !important;
    line-height: 1.4;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.cp-page--alt-a .tp-product-item-3 .tp-product-content-3 .tp-product-price-review,
.cp-page--alt-a .tp-product-item-3 .tp-product-content-3 .tp-product-price-3 {
    margin-bottom: 0 !important;
}

/* 21.6 ATC button injectat de JS — alt-a only */
.cp-alt-a-atc {
    margin: 12px 14px 14px;
    padding: 11px 14px;
    background: var(--cp-pagination-active-bg, #010F1C);
    color: #fff;
    border: 0;
    border-radius: 8px;
    width: calc(100% - 28px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    transition: background .15s, color .15s;
}
.cp-alt-a-atc:hover {
    background: var(--cp-editorial-accent, #BD844C);
    color: #fff;
}
.cp-alt-a-atc.is-loading {
    opacity: .6;
    pointer-events: none;
}
.cp-alt-a-atc svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.cp-alt-a-atc-success {
    background: var(--cp-editorial-accent, #BD844C);
}

/* 21.7 Sidebar polish — small refinements to match prototype card-style */
.cp-page--alt-a .cp-listing__sidebar .bb-product-filter {
    background: #fff;
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}


/* ============================================================
 * 22. ATC button — generic styling (toate variantele)
 *     Rebrand from .cp-alt-a-atc → .cp-cat-atc + per-variant suffix
 *     pentru a evita redundanta CSS.
 * ============================================================ */
.cp-cat-atc {
    margin: 12px 14px 14px;
    padding: 11px 14px;
    background: var(--cp-pagination-active-bg, #010F1C);
    color: #fff !important;
    border: 0;
    border-radius: 8px;
    width: calc(100% - 28px);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    transition: background .15s, color .15s;
    text-decoration: none !important;
}
.cp-cat-atc:hover {
    background: var(--cp-editorial-accent, #BD844C);
    color: #fff !important;
}
.cp-cat-atc svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* Variant overrides */
.cp-cat-atc--alt-b,
.cp-cat-atc--alt-d,
.cp-cat-atc--alt-e {
    /* Compact (short text "Adaugă") */
    padding: 9px 12px;
    font-size: 12px;
    margin: 10px 12px 12px;
    width: calc(100% - 24px);
}
.cp-cat-atc--alt-b svg,
.cp-cat-atc--alt-d svg,
.cp-cat-atc--alt-e svg {
    width: 14px;
    height: 14px;
}
/* Backward compat: keep old class working */
.cp-alt-a-atc { /* shortcut for legacy */ }


/* ============================================================
 * 23. ALT B — Tiffany minimal: pattern application
 *     - Card: HEART only (hide eye + compare icons)
 *     - Toolbar: hide view toggle (drawer-only filter)
 *     - Trust strip: standard horizontal (already from alt-a)
 *     - Card flex column for ATC
 * ============================================================ */
/* Hide compare + quick-view, keep wishlist */
.cp-page--alt-b .tp-product-action-3 .tp-product-compare-btn,
.cp-page--alt-b .tp-product-action-3 .tp-product-quick-view-btn {
    display: none !important;
}
/* Hide view toggle on alt-b (no list mode in prototype) */
.cp-page--alt-b .tp-shop-top-tab {
    display: none !important;
}
/* Compact toolbar pe alt-b */
.cp-page--alt-b .tp-shop-top {
    background: var(--cp-toolbar-bg, #F8F9FA);
    border-radius: 10px;
    padding: 12px 16px !important;
    margin-bottom: 22px !important;
}
/* Card flex column pentru ATC */
.cp-page--alt-b .tp-product-item-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.cp-page--alt-b .tp-product-item-3:hover {
    box-shadow: 0 4px 14px 0 rgba(130, 130, 130, .18);
}
.cp-page--alt-b .tp-product-item-3 .tp-product-thumb-3 { margin-bottom: 0 !important; }
.cp-page--alt-b .tp-product-item-3 .tp-product-content-3 {
    padding: 12px 12px 0 12px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.cp-page--alt-b .tp-product-item-3 .tp-product-content-3 .tp-product-title-3 {
    font-size: 13px !important;
    line-height: 1.4;
    margin-bottom: 4px;
}
/* Heart icon dimensions */
.cp-page--alt-b .tp-product-action-3 .tp-product-action-btn-3 {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, .8);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    color: var(--cp-filter-label, #010F1C);
}
.cp-page--alt-b .tp-product-action-3 .tp-product-action-btn-3 svg {
    width: 14px !important;
    height: 14px !important;
}
/* Pagination rounded — same as alt-a */
.cp-page--alt-b .tp-pagination .pagination .page-item .page-link {
    min-width: 38px;
    height: 38px;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--cp-filter-label, #010F1C) !important;
}
.cp-page--alt-b .tp-pagination .pagination .page-item.active .page-link {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}


/* ============================================================
 * 24. ALT C — Mejuri lookbook: pattern application
 *     - Card: heart + eye (no compare)
 *     - Toolbar: count left + sort + VIEW toggle right
 *     - Subcat below grid, FAQ + editorial after
 *     - Trust strip standard
 * ============================================================ */
.cp-page--alt-c .tp-product-action-3 .tp-product-compare-btn {
    display: none !important;
}
/* Card flex column pentru ATC */
.cp-page--alt-c .tp-product-item-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.cp-page--alt-c .tp-product-item-3:hover {
    box-shadow: 0 4px 14px 0 rgba(130, 130, 130, .18);
}
.cp-page--alt-c .tp-product-item-3 .tp-product-thumb-3 { margin-bottom: 0 !important; }
.cp-page--alt-c .tp-product-item-3 .tp-product-content-3 {
    padding: 14px 14px 0 14px;
    flex: 1 1 auto;
}
/* Action buttons polish */
.cp-page--alt-c .tp-product-action-3 .tp-product-action-btn-3 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, .8);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cp-page--alt-c .tp-product-action-3 .tp-product-action-btn-3 svg {
    width: 16px !important;
    height: 16px !important;
}
/* Toolbar rounded */
.cp-page--alt-c .tp-shop-top {
    background: var(--cp-toolbar-bg, #F8F9FA);
    border-radius: 10px;
    padding: 12px 16px !important;
    margin-bottom: 22px !important;
}
.cp-page--alt-c .tp-shop-top-tab .nav-link {
    width: 41px !important;
    height: 41px !important;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    background: #fff;
}
.cp-page--alt-c .tp-shop-top-tab .nav-link.active {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
}
/* Pagination rounded */
.cp-page--alt-c .tp-pagination .pagination .page-item .page-link {
    min-width: 38px;
    height: 38px;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
}
.cp-page--alt-c .tp-pagination .pagination .page-item.active .page-link {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}


/* ============================================================
 * 25. ALT D — Cartier formal: pattern application
 *     - Card: HEART only (no eye, no compare)
 *     - Toolbar: count + view toggle (no sort — moved to top filter bar)
 *     - Top horizontal filter bar (folosim Filter button + dropdowns existente)
 *     - No editorial, FAQ + subcat
 * ============================================================ */
.cp-page--alt-d .tp-product-action-3 .tp-product-compare-btn,
.cp-page--alt-d .tp-product-action-3 .tp-product-quick-view-btn {
    display: none !important;
}
/* Card flex column */
.cp-page--alt-d .tp-product-item-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.cp-page--alt-d .tp-product-item-3:hover {
    box-shadow: 0 4px 14px 0 rgba(130, 130, 130, .18);
}
.cp-page--alt-d .tp-product-item-3 .tp-product-thumb-3 { margin-bottom: 0 !important; }
.cp-page--alt-d .tp-product-item-3 .tp-product-content-3 {
    padding: 12px 12px 0 12px;
    flex: 1 1 auto;
}
.cp-page--alt-d .tp-product-action-3 .tp-product-action-btn-3 {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, .8);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cp-page--alt-d .tp-product-action-3 .tp-product-action-btn-3 svg {
    width: 14px !important;
    height: 14px !important;
}
/* Pagination rounded */
.cp-page--alt-d .tp-pagination .pagination .page-item .page-link {
    min-width: 38px;
    height: 38px;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
}
.cp-page--alt-d .tp-pagination .pagination .page-item.active .page-link {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}


/* ============================================================
 * 26. ALT E — Pandora dense: pattern application
 *     - Card: HEART only (compact)
 *     - Toolbar: count + sort + per-page (NO view toggle)
 *     - Sidebar dense (already from earlier)
 *     - Editorial bottom (no FAQ)
 * ============================================================ */
.cp-page--alt-e .tp-product-action-3 .tp-product-compare-btn,
.cp-page--alt-e .tp-product-action-3 .tp-product-quick-view-btn {
    display: none !important;
}
/* Hide view toggle pe alt-e (compact toolbar) */
.cp-page--alt-e .tp-shop-top-tab {
    display: none !important;
}
.cp-page--alt-e .tp-shop-top {
    background: var(--cp-toolbar-bg, #F8F9FA);
    border-radius: 10px;
    padding: 10px 14px !important;
    margin-bottom: 18px !important;
}
/* Card flex column compact */
.cp-page--alt-e .tp-product-item-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.cp-page--alt-e .tp-product-item-3:hover {
    box-shadow: 0 4px 12px 0 rgba(130, 130, 130, .14);
}
.cp-page--alt-e .tp-product-item-3 .tp-product-thumb-3 { margin-bottom: 0 !important; }
.cp-page--alt-e .tp-product-item-3 .tp-product-content-3 {
    padding: 10px 10px 0 10px;
    flex: 1 1 auto;
}
.cp-page--alt-e .tp-product-item-3 .tp-product-content-3 .tp-product-title-3 {
    font-size: 12px !important;
    line-height: 1.3;
    margin-bottom: 4px;
}
.cp-page--alt-e .tp-product-action-3 .tp-product-action-btn-3 {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, .8);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cp-page--alt-e .tp-product-action-3 .tp-product-action-btn-3 svg {
    width: 12px !important;
    height: 12px !important;
}
/* Pagination rounded */
.cp-page--alt-e .tp-pagination .pagination .page-item .page-link {
    min-width: 36px;
    height: 36px;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
}
.cp-page--alt-e .tp-pagination .pagination .page-item.active .page-link {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}


/* ============================================================
 * 27. ALT F — Net-a-Porter editorial: pattern application
 *     - Card: heart + eye (no compare)
 *     - Toolbar: sticky cu backdrop blur (already done)
 *     - Editorial INLINE mid-grid (already done via JS)
 *     - Pagination rounded
 * ============================================================ */
.cp-page--alt-f .tp-product-action-3 .tp-product-compare-btn {
    display: none !important;
}
/* Card flex column */
.cp-page--alt-f .tp-product-item-3 {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .2s;
}
.cp-page--alt-f .tp-product-item-3:hover {
    box-shadow: 0 4px 14px 0 rgba(130, 130, 130, .18);
}
.cp-page--alt-f .tp-product-item-3 .tp-product-thumb-3 { margin-bottom: 0 !important; }
.cp-page--alt-f .tp-product-item-3 .tp-product-content-3 {
    padding: 14px 14px 0 14px;
    flex: 1 1 auto;
}
.cp-page--alt-f .tp-product-action-3 .tp-product-action-btn-3 {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, .8);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}
.cp-page--alt-f .tp-product-action-3 .tp-product-action-btn-3 svg {
    width: 16px !important;
    height: 16px !important;
}
/* Pagination rounded */
.cp-page--alt-f .tp-pagination .pagination .page-item .page-link {
    min-width: 38px;
    height: 38px;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
}
.cp-page--alt-f .tp-pagination .pagination .page-item.active .page-link {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
}
/* Toolbar buttons rounded — view-toggle + sort + per-page + Filter */
.cp-page--alt-f .tp-shop-top-tab .nav-tabs {
    gap: 6px;
    border: 0 !important;
}
.cp-page--alt-f .tp-shop-top-tab .nav-link {
    width: 41px !important;
    height: 41px !important;
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    background: #fff;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--cp-filter-label, #010F1C);
}
.cp-page--alt-f .tp-shop-top-tab .nav-link.active {
    background: var(--cp-pagination-active-bg, #010F1C) !important;
    border-color: var(--cp-pagination-active-bg, #010F1C) !important;
    color: #fff !important;
}
.cp-page--alt-f .tp-shop-top-tab .nav-link svg.icon {
    width: 18px !important;
    height: 18px !important;
}
.cp-page--alt-f .tp-shop-top-select .nice-select,
.cp-page--alt-f .tp-shop-top-select .form-select {
    border: 1px solid var(--cp-filter-border, #E5E7EB) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    padding: 9px 36px 9px 14px !important;
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 13px !important;
    color: var(--cp-filter-label, #010F1C) !important;
    min-height: 41px;
}
.cp-page--alt-f .tp-shop-top-select .nice-select:hover {
    border-color: var(--cp-editorial-accent, #BD844C) !important;
}
.cp-page--alt-f .tp-shop-top-select .nice-select .list {
    border-radius: 8px !important;
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    margin-top: 4px;
}
.cp-page--alt-f .tp-shop-top-filter .tp-filter-btn {
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px !important;
    padding: 10px 16px;
    height: 41px;
}


/* ============================================================
 * 28. Trust strip — variant overrides
 *     alt-d/c/f: standard static (la fel ca alt-a)
 *     alt-e: integrated in hero (NO standalone strip)
 *     alt-b: standalone static container
 * ============================================================ */
.cp-page--alt-b .ara-trust-strip.ara-trust-marquee,
.cp-page--alt-c .ara-trust-strip.ara-trust-marquee,
.cp-page--alt-d .ara-trust-strip.ara-trust-marquee,
.cp-page--alt-f .ara-trust-strip.ara-trust-marquee {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
}
.cp-page--alt-b .ara-trust-strip .ara-trust-track,
.cp-page--alt-c .ara-trust-strip .ara-trust-track,
.cp-page--alt-d .ara-trust-strip .ara-trust-track,
.cp-page--alt-f .ara-trust-strip .ara-trust-track {
    animation: none !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 18px 0;
    width: 100%;
    transform: none !important;
}
.cp-page--alt-b .ara-trust-strip .ara-trust-track .ara-trust-item[aria-hidden="true"],
.cp-page--alt-c .ara-trust-strip .ara-trust-track .ara-trust-item[aria-hidden="true"],
.cp-page--alt-d .ara-trust-strip .ara-trust-track .ara-trust-item[aria-hidden="true"],
.cp-page--alt-f .ara-trust-strip .ara-trust-track .ara-trust-item[aria-hidden="true"] {
    display: none !important;
}
/* alt-e: hide trust strip standalone (e in hero) */
.cp-page--alt-e + .ara-trust-strip-section,
.cp-page--alt-e .ara-trust-strip-section,
section.ara-trust-strip-section:has(+ .cp-page--alt-e),
.cp-hero--alt-e ~ .ara-trust-strip-section {
    /* heuristic — ascundem dupa alt-e hero. Daca structura nu permite,
     * folosim simplu display:none la nivel global pe alt-e prin parent */
}
.tp-shop-area.cp-page--alt-e ~ .ara-trust-strip-section,
body:has(.cp-page--alt-e) .container > .ara-trust-strip-section {
    display: none !important;
}

/* ===== Clean-hero pe /products (cp-hero--shop) ============================
 * Variantă a hero-ului alt-a folosită pe pagina /products când utilizatorul
 * alege Layout = "Hero curat" în theme options. Reutilizează stilurile
 * cp-hero--alt-a și adaugă doar breadcrumb-ul intern (link Home → titlu).
 */
.cp-hero--shop .cp-hero__breadcrumb {
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--pp-muted, #727578);
}
.cp-hero--shop .cp-hero__breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.cp-hero--shop .cp-hero__breadcrumb li {
    display: inline-flex;
    align-items: center;
}
.cp-hero--shop .cp-hero__breadcrumb li + li::before {
    content: "›";
    margin-right: 8px;
    color: var(--pp-muted, #727578);
}
.cp-hero--shop .cp-hero__breadcrumb a {
    color: var(--pp-body-text, #3D3D3D);
    text-decoration: none;
    transition: color .2s ease;
}
.cp-hero--shop .cp-hero__breadcrumb a:hover {
    color: var(--pp-accent, #BD844C);
}
.cp-hero--shop .cp-hero__breadcrumb [aria-current="page"] {
    color: var(--pp-text, #010F1C);
    font-weight: 500;
}

/* ===== Product categories index page (/product-categories) ============== */
.pcix-section {
    background: var(--card-media-bg, #F2F2F2);
}
.pcix-root {
    background: var(--card-bg, #fff);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--card-border, #CED4DA);
}
.pcix-root__title {
    font-family: Georgia, 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--pp-text, #010F1C);
    letter-spacing: .01em;
}
.pcix-root__title a {
    color: inherit;
    text-decoration: none;
}
.pcix-root__title a:hover {
    color: var(--pp-accent, #BD844C);
}
.pcix-root__view-all {
    font-size: 13px;
    color: var(--pp-accent, #BD844C);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pcix-root__view-all:hover {
    color: var(--pp-text, #010F1C);
}
.pcix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}
.pcix-card {
    display: block;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border, #CED4DA);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pcix-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    border-color: var(--pp-accent, #BD844C);
}
.pcix-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: var(--card-media-bg, #F2F2F2);
}
.pcix-card__image--placeholder {
    background-image: url('/themes/aragold/images/placeholder-aragold.svg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
}
.pcix-card__body {
    padding: 12px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pcix-card__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--pp-text, #010F1C);
    letter-spacing: .04em;
    text-transform: uppercase;
}
.pcix-card--root .pcix-card__name {
    color: var(--pp-accent, #BD844C);
}
.pcix-card__meta {
    font-size: 12px;
    color: var(--pp-muted, #727578);
}
@media (max-width: 575.98px) {
    .pcix-root { padding: 16px; }
    .pcix-root__title { font-size: 22px; }
    .pcix-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ===== Toolbar baseline (orice cp-page, inclusiv baseline) ============= */
/* Aragold: rotunjire colțuri pe toate elementele toolbar din listing
 * (grid/list toggle, sort dropdown, per-page dropdown, filter button mobile).
 *
 * NOTĂ specificitate: shofy/public/css/theme.css define
 *   .tp-shop-top-tab .nav-tabs .nav-item .nav-link  (specificitate 0,4,0)
 *   .tp-shop-top-tab .nav-tabs .nav-item .nav-link.active  (0,4,1)
 * cu border-radius:0 și color: var(--tp-common-black). Trebuie să folosim
 * același nivel (.nav-tabs .nav-item .nav-link) ca să batem specificitatea —
 * altfel border-radius și color nu se aplică, rezultă icon invizibil pe
 * background dark active.
 */
.tp-shop-top-tab .nav-tabs {
    gap: 6px;
    border: 0;
}
.tp-shop-top-tab .nav-tabs .nav-item .nav-link {
    width: 41px;
    height: 41px;
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px;
    padding: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-filter-label, #010F1C);
    transition: border-color .2s ease, background .2s ease;
}
.tp-shop-top-tab .nav-tabs .nav-item .nav-link:hover {
    border-color: var(--pp-accent, #BD844C);
}
.tp-shop-top-tab .nav-tabs .nav-item .nav-link.active {
    background: var(--cp-pagination-active-bg, #010F1C);
    border-color: var(--cp-pagination-active-bg, #010F1C);
    color: #fff;
}
.tp-shop-top-tab .nav-tabs .nav-item .nav-link svg.icon {
    /* viewBox e 24x24 cu stroke-width=2. La 18px scalat → stroke 1.5px subpixel
     * → anti-aliasing pixelate. La 20px (5/6 din 24) stroke = 1.66px, mai
     * apropiat de pixel-grid + shape-rendering geometricPrecision elimina
     * artifacts pe stroke-linecap round. */
    width: 20px;
    height: 20px;
    shape-rendering: geometricPrecision;
    display: block; /* elimina baseline gap inline-default care decentreaza icon */
    vertical-align: middle;
    transform: none; /* shofy theme.css aplica translateY(-2px) — eliminam */
}

.tp-shop-top-select .nice-select,
.tp-shop-top-select .form-select {
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px;
    background-color: #fff;
    padding: 0 36px 0 14px;
    height: 41px;
    line-height: 41px;
    font-size: 13px;
    color: var(--cp-filter-label, #010F1C);
    transition: border-color .2s ease;
    display: flex;
    align-items: center;
}
/* NiceSelect chevron alignment (::after pseudo)
 * Shofy default: top: calc(50% + 3px); transform: translateY(-50%) — produce
 * un offset de 3px in jos fata de centru. Eliminam ofsetul (top:50%) +
 * resetam margin-top ca sa nu ramana mostenirea. transform: translateY(-50%)
 * vine din shofy si o pastram (centreaza chevron-ul corect cu ancora pe centru). */
.tp-shop-top-select .nice-select::after {
    top: 50% !important;
    right: 14px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
}
/* Force the current-text span to use flex line for accurate vertical center */
.tp-shop-top-select .nice-select .current {
    line-height: 1;
    display: inline-flex;
    align-items: center;
    height: 100%;
}
.tp-shop-top-select .nice-select:hover {
    border-color: var(--pp-accent, #BD844C);
}
.tp-shop-top-select .nice-select .list {
    border-radius: 8px;
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    margin-top: 4px;
    overflow: hidden;
}
.tp-shop-top-select .nice-select .option:hover {
    background: var(--cp-toolbar-bg, #F8F9FA);
}
.tp-shop-top-select .nice-select .option.selected {
    color: var(--pp-accent, #BD844C);
    font-weight: 500;
}

.tp-shop-top-filter .tp-filter-btn {
    border: 1px solid var(--cp-filter-border, #E5E7EB);
    border-radius: 8px;
    padding: 10px 16px;
    height: 41px;
}

/* Theme option aragold_category_show_title = "no" → ascunde si h1-ul block-header
 * (bb-product-listing-page-description) suplimentar fata de cel din cp-hero.
 * Cel din cp-hero e ascuns conditional in blade direct; pe asta o tinem via CSS
 * pentru ca markup-ul vine dintr-un include Botble pe care nu il modificam. */
.cp-page--hide-category-title .bb-product-listing-page-description .bb-block__header {
    display: none !important;
}