/*
 * beauty-care.bg — overrides layered on top of the compiled Vite bundle.
 *
 * The build toolchain (node/npm) is not available on the hosting account, so
 * the SCSS sources cannot be recompiled here. Anything that needs changing in
 * the meantime lives in this file, which loads after the bundle.
 */

/* ------------------------------------------------------------------ *
 * Промоции — the one menu item that should pull the eye
 * ------------------------------------------------------------------ */

/* Desktop bar: a pill, because the item sits in a row of plain text links. */
.primary-menu .nav-link[href$="/categories/promocii/products"] {
    position: relative;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #e5195f 0%, #ff5c8a 100%);
    border-radius: 999px;
    padding-inline: 16px;
    box-shadow: 0 2px 10px rgba(229, 25, 95, 0.35);
    transition: box-shadow 150ms ease, transform 150ms ease;
}

.primary-menu .nav-link[href$="/categories/promocii/products"]:hover,
.primary-menu .nav-link[href$="/categories/promocii/products"]:focus-visible {
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(229, 25, 95, 0.5);
    transform: translateY(-1px);
}

/* Mobile drawer: the same link is a full-width row, so a pill would stretch
   across the panel. A tinted row with a left marker reads better there. */
.sidebar-menu a[href$="/categories/promocii/products"] {
    display: block;
    color: #e5195f !important;
    font-weight: 700;
    background: rgba(229, 25, 95, 0.08);
    border-left: 3px solid #e5195f;
    border-radius: 4px;
    padding-block: 8px;
    padding-inline: 12px;
}

.sidebar-menu a[href$="/categories/promocii/products"]:hover {
    background: rgba(229, 25, 95, 0.14);
    color: #e5195f !important;
}

/* The bundle draws a hover underline on nav links; it reads as a glitch on a
   pill, so suppress it here only. */
.primary-menu .nav-link[href$="/categories/promocii/products"]::after,
.primary-menu .nav-link[href$="/categories/promocii/products"]::before {
    display: none !important;
}

.footer-link-promo {
    color: #e5195f !important;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .primary-menu .nav-link[href$="/categories/promocii/products"] {
        transition: none;
    }
    .primary-menu .nav-link[href$="/categories/promocii/products"]:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------ *
 * Ratings — only the products that actually carry one
 * ------------------------------------------------------------------ */

/* x-cloak keeps the stars from flashing before Alpine decides whether the
   product has reviews at all. */
[x-cloak] {
    display: none !important;
}

.product-card .product-rating,
.vertical-product .product-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 4px;
}

.product-card .product-rating .rating-count {
    font-weight: 600;
    color: #4a4550;
}

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */

.footer-info-section .footer-description {
    margin-bottom: 10px;
    line-height: 1.65;
}

.footer-info-section .footer-description strong {
    font-weight: 600;
}

.footer-usp {
    list-style: none;
    margin: 14px 0 12px;
    padding: 0;
}

.footer-usp li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
    line-height: 1.5;
}

.footer-usp i {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 17px;
    color: #e5195f;
}

.footer-about-link {
    display: inline-block;
    margin-bottom: 14px;
    font-weight: 600;
    color: #e5195f !important;
    text-decoration: none;
}

.footer-about-link:hover {
    text-decoration: underline;
}

/* ================================================================== *
 * Mega navigation
 *
 * Replaces the swiper bar + "Всички категории" dropdown. Hover and
 * focus-within drive the panel, so no JS is involved and the whole thing
 * is keyboard reachable.
 * ================================================================== */

.mm-wrap {
    --mm-accent: #e5195f;
    --mm-ink: #2b2333;
    --mm-muted: #6e6577;
    --mm-line: rgba(43, 35, 51, 0.08);
    --mm-panel-bg: #fff;

    position: relative;
    z-index: 60;
}

.mm-wrap .container {
    position: relative;
}

.mm {
    border: 1px solid var(--mm-line);
    border-radius: 16px;
    background: var(--mm-panel-bg);
    box-shadow: 0 1px 2px rgba(43, 35, 51, 0.04);
}

.mm-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 6px 10px;
    list-style: none;
}

.mm-item {
    position: static; /* panel anchors to .mm, not to the item */
}

.mm-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--mm-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 140ms ease, color 140ms ease;
}

.mm-link:hover,
.mm-link:focus-visible {
    background: rgba(43, 35, 51, 0.05);
    color: var(--mm-ink);
}

.mm-caret {
    font-size: 10px;
    color: var(--mm-muted);
    transition: transform 160ms ease;
}

.mm-item.has-panel:hover .mm-caret,
.mm-item.has-panel:focus-within .mm-caret {
    transform: rotate(180deg);
}

/* -- the panel ---------------------------------------------------- */

.mm-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 70;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;

    border: 1px solid var(--mm-line);
    border-radius: 18px;
    background: var(--mm-panel-bg);
    box-shadow:
        0 1px 2px rgba(43, 35, 51, 0.05),
        0 12px 28px -8px rgba(43, 35, 51, 0.16),
        0 32px 64px -20px rgba(43, 35, 51, 0.2);
    overflow: hidden;

    transition:
        opacity 160ms ease,
        transform 160ms ease,
        visibility 0s linear 160ms;
}

.mm-item.has-panel:hover .mm-panel,
.mm-item.has-panel:focus-within .mm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 60ms, 60ms, 0s;
}

.mm-panel-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    padding: 26px 28px 22px;
}

/* -- columns ------------------------------------------------------ */

.mm-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 22px 26px;
}

/* The bundle ships `ul { padding-left: 2rem }` plus list rules of its own, so
   the panel resets its own lists rather than relying on those. */
.mm-panel ul,
.mm-panel li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-indent: 0;
}

/* Category names here run long ("Душ гелове | Сапуни | Кристали | Бомбички за
   вана | Гъби за баня"), so no uppercasing — it doubles the wrapped height —
   and the title is clamped to two lines. The rule below it lives on the list,
   not as padding here: `overflow: hidden` clips at the padding edge, which
   would let a third line bleed into the gap. */
.mm-group-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.7em;
    margin-bottom: 8px;
    color: var(--mm-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.mm-group-title + .mm-group-list {
    padding-top: 9px;
    border-top: 1px solid var(--mm-line);
}

.mm-group-title:hover {
    color: var(--mm-accent);
}

.mm-group-list,
.mm-flat {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-group-list li + li {
    margin-top: 5px;
}

.mm-group-list a,
.mm-flat a {
    color: var(--mm-muted);
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
    transition: color 120ms ease;
}

.mm-group-list a:hover,
.mm-flat a:hover {
    color: var(--mm-accent);
}

.mm-more {
    font-weight: 600;
    color: var(--mm-accent) !important;
}

/* A long flat branch reads best as newspaper columns. */
.mm-flat {
    column-count: 4;
    column-gap: 26px;
    margin-top: 4px;
}

.mm-groups + .mm-flat {
    padding-top: 18px;
    border-top: 1px solid var(--mm-line);
}

.mm-flat li {
    break-inside: avoid;
    margin-bottom: 7px;
}

.mm-flat a {
    display: block;
}

/* -- promo card --------------------------------------------------- */

.mm-promo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(160deg, #fff1f5 0%, #ffe3ec 55%, #ffd9e6 100%);
    text-decoration: none;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.mm-promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(229, 25, 95, 0.45);
}

.mm-promo-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--mm-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.mm-promo-image {
    align-self: center;
    width: 128px;
    height: 128px;
    margin-bottom: 12px;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.mm-promo-label {
    margin-bottom: 4px;
    color: var(--mm-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-promo-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
    color: var(--mm-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}

.mm-promo-cta {
    margin-top: auto;
    color: var(--mm-accent);
    font-size: 13px;
    font-weight: 700;
}

.mm-promo-card-generic {
    justify-content: center;
}

/* -- panel footer ------------------------------------------------- */

.mm-panel-foot {
    padding: 13px 28px;
    border-top: 1px solid var(--mm-line);
    background: rgba(43, 35, 51, 0.02);
}

.mm-panel-foot a {
    color: var(--mm-ink);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.mm-panel-foot a:hover {
    color: var(--mm-accent);
}

/* -- Промоции keeps its pill, now inside the new bar --------------- */

.mm-link[href$="/categories/promocii/products"] {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #e5195f 0%, #ff5c8a 100%);
    box-shadow: 0 2px 10px rgba(229, 25, 95, 0.3);
}

.mm-link[href$="/categories/promocii/products"]:hover,
.mm-link[href$="/categories/promocii/products"]:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #d0154f 0%, #f24d7c 100%);
    box-shadow: 0 4px 16px rgba(229, 25, 95, 0.45);
}

.mm-link[href$="/categories/promocii/products"] .mm-caret {
    color: rgba(255, 255, 255, 0.85);
}

/* -- narrower desktops -------------------------------------------- */

@media screen and (max-width: 1199px) {
    .mm-panel-inner {
        grid-template-columns: minmax(0, 1fr) 220px;
        gap: 22px;
        padding: 22px;
    }

    .mm-flat {
        column-count: 3;
    }

    .mm-link {
        padding: 9px 11px;
        font-size: 13.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-panel,
    .mm-caret,
    .mm-promo-card,
    .mm-link {
        transition: none;
    }

    .mm-panel {
        transform: none;
    }

    .mm-promo-card:hover {
        transform: none;
    }
}

/* ================================================================== *
 * Mega navigation — sizing, hover bridge, full-screen menu
 * ================================================================== */

/* Single row. When the bar wrapped, a panel opened below both rows and the
   pointer crossed the second row on its way down, swapping panels.

   The clip is only there to stop items spilling in the moment before the
   script measures the bar. It has to go afterwards: small and medium panels
   anchor to their own item, which lives inside this box, so a permanent
   `overflow: hidden` would cut them off entirely. */
.mm-bar {
    flex-wrap: nowrap;
    overflow: hidden;
}

.mm.is-ready .mm-bar {
    overflow: visible;
}

.mm-item.is-overflowing {
    display: none;
}

.mm-link-text {
    display: block;
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The "Меню" button pins to the right and never overflows. */
.mm-item-all {
    margin-left: auto;
    flex: 0 0 auto;
}

.mm-all-trigger {
    border: 1px solid var(--mm-line);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}

.mm-all-trigger .mm-link-text {
    max-width: none;
}

.mm-all-trigger:hover {
    background: rgba(43, 35, 51, 0.05);
}

/* -- panel opening is now class driven, not :hover ----------------- */

.mm-item.has-panel:hover .mm-panel,
.mm-item.has-panel:focus-within .mm-panel {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
}

.mm-item.has-panel.is-open .mm-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0s;
}

.mm-item.has-panel.is-open .mm-caret {
    transform: rotate(180deg);
}

.mm-item.has-panel:hover .mm-caret {
    transform: none;
}

/* The 8px gap between bar and panel used to drop :hover mid-move. The panel
   now reaches back up over it with a transparent bridge. */
.mm-panel::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

/* -- panel widths -------------------------------------------------- */

/* Two or three children do not need a full-width sheet. Small and medium
   panels sit under their own item instead of spanning the bar. */
.mm-item--sm,
.mm-item--md {
    position: relative;
}

.mm-panel--sm,
.mm-panel--md {
    right: auto;
    left: 0;
    width: max-content;
}

.mm-panel--sm {
    max-width: 320px;
}

.mm-panel--md {
    max-width: 720px;
}

.mm-panel--sm .mm-panel-inner,
.mm-panel--md .mm-panel-inner {
    grid-template-columns: minmax(0, 1fr);
}

.mm-panel--sm .mm-panel-inner {
    padding: 16px 18px 12px;
}

.mm-panel--sm .mm-flat,
.mm-panel--md .mm-flat {
    column-count: 1;
}

.mm-panel--md .mm-flat {
    column-count: 2;
    column-gap: 32px;
}

.mm-panel--sm .mm-panel-foot,
.mm-panel--md .mm-panel-foot {
    padding-inline: 18px;
}

/* Medium panels keep the promo rail, just narrower. */
.mm-panel--md .mm-panel-inner:has(.mm-promo) {
    grid-template-columns: minmax(0, 1fr) 200px;
}

/* Nudge panels that would run off the right edge back inside. */
.mm-item--sm:nth-last-child(-n + 3) .mm-panel,
.mm-item--md:nth-last-child(-n + 3) .mm-panel {
    left: auto;
    right: 0;
}

/* -- full-screen menu ---------------------------------------------- */

.mm-full {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.mm-full-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 34, 0.55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 200ms ease;
}

.mm-full.is-open .mm-full-backdrop {
    opacity: 1;
}

.mm-full-sheet {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.mm-full.is-open .mm-full-sheet {
    opacity: 1;
    transform: translateY(0);
}

.mm-full-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--mm-line, rgba(43, 35, 51, 0.08));
}

.mm-full-title {
    color: #2b2333;
    font-size: 18px;
    font-weight: 700;
}

.mm-full-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(43, 35, 51, 0.12);
    border-radius: 50%;
    background: transparent;
    color: #2b2333;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.mm-full-close:hover {
    background: rgba(43, 35, 51, 0.06);
}

.mm-full-body {
    flex: 1;
    padding: 28px 32px 40px;
    overflow-y: auto;
}

.mm-full-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px 32px;
    max-width: 1400px;
    margin: 0 auto;
}

.mm-full-col-title {
    display: block;
    margin-bottom: 10px;
    padding-bottom: 9px;
    border-bottom: 2px solid #e5195f;
    color: #2b2333;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.mm-full-col-title:hover {
    color: #e5195f;
}

.mm-full-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-full-list li {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.mm-full-list a {
    color: #6e6577;
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
}

.mm-full-list a:hover {
    color: #e5195f;
}

@media (prefers-reduced-motion: reduce) {
    .mm-full-backdrop,
    .mm-full-sheet {
        transition: none;
    }

    .mm-full-sheet {
        transform: none;
    }
}

/* ================================================================== *
 * Full-screen menu — layout rework
 *
 * The first pass used a CSS grid, where a row is as tall as its tallest
 * cell: the 24-item "Грижа за лицето" block left a canyon of white space
 * beside it and shoved four categories below the fold. Columns pack the
 * blocks instead, lists are capped, and childless branches become banners
 * rather than empty headings.
 * ================================================================== */

/* Overrides the flex row set up earlier — the inner wrapper owns the layout
   now, so the title and close button sit at the edges of the content column
   instead of huddling together in the middle. */
.mm-full-head {
    display: block;
    padding: 0;
}

.mm-full-head-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1360px;
    margin: 0 auto;
    padding: 18px 32px;
}

.mm-full-body {
    padding: 0;
}

.mm-full-inner {
    max-width: 1360px;
    margin: 0 auto;
    padding: 26px 32px 48px;
}

/* -- banner row for childless branches (Промоции) ------------------ */

.mm-full-banners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 30px;
}

.mm-full-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #e5195f 0%, #ff5c8a 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 18px -8px rgba(229, 25, 95, 0.6);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.mm-full-banner:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -8px rgba(229, 25, 95, 0.7);
}

.mm-full-banner-name {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.mm-full-banner-cta {
    font-size: 13.5px;
    font-weight: 600;
    opacity: 0.92;
    white-space: nowrap;
}

/* -- category blocks ----------------------------------------------- */

.mm-full-cols {
    column-count: 4;
    column-gap: 34px;
}

.mm-full-block {
    break-inside: avoid;
    margin-bottom: 28px;
}

.mm-full-block-title {
    display: block;
    margin-bottom: 11px;
    padding-bottom: 9px;
    border-bottom: 2px solid #e5195f;
    color: #2b2333;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

.mm-full-block-title:hover {
    color: #e5195f;
}

/* The bundle's `ul { padding-left: 2rem }` was indenting every list against
   its own heading. */
.mm-full ul,
.mm-full li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-indent: 0;
}

.mm-full-list li {
    margin-bottom: 7px;
}

.mm-full-list a {
    color: #6e6577;
    font-size: 13.5px;
    line-height: 1.45;
    text-decoration: none;
    transition: color 120ms ease;
}

.mm-full-list a:hover {
    color: #e5195f;
}

.mm-full-more {
    display: inline-block;
    margin-top: 3px;
    color: #e5195f;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.mm-full-more:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1399px) {
    .mm-full-cols {
        column-count: 3;
    }
}

@media screen and (max-width: 991px) {
    .mm-full-cols {
        column-count: 2;
    }

    .mm-full-inner,
    .mm-full-head-inner {
        padding-inline: 20px;
    }
}

/* ================================================================== *
 * Econt delivery picker (checkout)
 * ================================================================== */

.econt-delivery {
    --ec-accent: #e5195f;
    --ec-ink: #2b2333;
    --ec-muted: #6e6577;
    --ec-line: rgba(43, 35, 51, 0.12);

    margin-bottom: 28px;
}

.econt-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.econt-mode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 12px;
    border: 1.5px solid var(--ec-line);
    border-radius: 12px;
    background: #fff;
    color: var(--ec-ink);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.econt-mode i {
    font-size: 19px;
}

.econt-mode:hover {
    border-color: var(--ec-accent);
}

.econt-mode.active {
    border-color: var(--ec-accent);
    background: rgba(229, 25, 95, 0.06);
    color: var(--ec-accent);
}

/* -- city typeahead ------------------------------------------------ */

.econt-city-group {
    position: relative;
}

.econt-city-input {
    position: relative;
}

.econt-city-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 4px;
    border: 0;
    background: transparent;
    color: var(--ec-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.econt-spinner {
    position: absolute;
    top: 50%;
    right: 34px;
    width: 15px;
    height: 15px;
    margin-top: -8px;
    border: 2px solid rgba(43, 35, 51, 0.15);
    border-top-color: var(--ec-accent);
    border-radius: 50%;
    animation: econt-spin 700ms linear infinite;
}

@keyframes econt-spin {
    to { transform: rotate(360deg); }
}

.econt-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    margin: 4px 0 0;
    padding: 6px;
    border: 1px solid var(--ec-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 28px -10px rgba(43, 35, 51, 0.25);
    list-style: none;
    overflow-y: auto;
}

.econt-suggestions li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.econt-suggestions button {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.econt-suggestions button:hover {
    background: rgba(229, 25, 95, 0.07);
}

.econt-suggestion-name {
    color: var(--ec-ink);
    font-size: 14px;
    font-weight: 600;
}

.econt-suggestion-meta {
    color: var(--ec-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

/* -- office list --------------------------------------------------- */

.econt-office-filter {
    margin-bottom: 10px;
}

.econt-offices {
    max-height: 320px;
    padding: 6px;
    border: 1px solid var(--ec-line);
    border-radius: 12px;
    overflow-y: auto;
}

.econt-office {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 4px;
    padding: 11px 12px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.econt-office:hover {
    background: rgba(43, 35, 51, 0.035);
}

.econt-office.active {
    border-color: var(--ec-accent);
    background: rgba(229, 25, 95, 0.06);
}

.econt-office input[type="radio"] {
    flex: 0 0 auto;
    margin-top: 3px;
    accent-color: var(--ec-accent);
}

.econt-office-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.econt-office-name {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--ec-ink);
    font-size: 14px;
    font-weight: 600;
}

.econt-office-tag {
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(43, 35, 51, 0.08);
    color: var(--ec-muted);
    font-size: 11px;
    font-weight: 600;
}

.econt-office-address {
    color: var(--ec-muted);
    font-size: 13px;
    line-height: 1.4;
}

.econt-empty,
.econt-hint {
    margin: 8px 0 0;
    color: var(--ec-muted);
    font-size: 13.5px;
}

/* -- chosen summary ------------------------------------------------ */

.econt-summary {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(76, 175, 80, 0.09);
    color: #1f6d27;
    font-size: 13.5px;
    line-height: 1.5;
}

.econt-summary i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 17px;
}

@media screen and (max-width: 575px) {
    .econt-modes {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .econt-mode,
    .econt-office {
        transition: none;
    }

    .econt-spinner {
        animation-duration: 2s;
    }
}

/* -- office list + map side by side -------------------------------- */

.econt-picker-split .econt-offices {
    max-height: 360px;
}

.econt-map-wrap {
    position: sticky;
    top: 16px;
}


.econt-map-hint {
    margin: 7px 0 0;
    color: var(--ec-muted);
    font-size: 12.5px;
    text-align: center;
}

.econt-summary-method {
    display: block;
    margin-top: 3px;
    font-weight: 600;
}

/* Leaflet paints its own controls above everything; keep it under the
   site header and any open menu panel. */
.econt-map .leaflet-pane,
.econt-map .leaflet-top,
.econt-map .leaflet-bottom {
    z-index: 5;
}

@media screen and (max-width: 991px) {
    .econt-picker-split {
        grid-template-columns: 1fr;
    }

    .econt-map-wrap {
        position: static;
    }

    .econt-map {
        height: 260px;
    }
}

@media screen and (max-width: 575px) {
    .econt-modes {
        grid-template-columns: 1fr;
    }
}


@media screen and (max-width: 991px) {
    .econt-locator {
        height: 340px;
    }
}

/* -- "pick from the map" button ------------------------------------ */

.econt-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.econt-picker-label {
    margin: 0;
}

.econt-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1.5px solid var(--ec-accent);
    border-radius: 10px;
    background: #fff;
    color: var(--ec-accent);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.econt-map-btn i {
    font-size: 17px;
}

.econt-map-btn:hover {
    background: rgba(229, 25, 95, 0.07);
}

/* -- Econt Office Locator dialog ----------------------------------- */

.econt-locator-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.econt-locator-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 34, 0.6);
}

.econt-locator-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    height: min(760px, 92vh);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 60px -18px rgba(28, 22, 34, 0.5);
    overflow: hidden;
}

.econt-locator-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ec-line);
}

.econt-locator-title {
    color: var(--ec-ink);
    font-size: 15.5px;
    font-weight: 700;
}

.econt-locator-close {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--ec-line);
    border-radius: 50%;
    background: transparent;
    color: var(--ec-ink);
    font-size: 18px;
    cursor: pointer;
}

.econt-locator-close:hover {
    background: rgba(43, 35, 51, 0.06);
}

.econt-locator-frame {
    flex: 1;
    width: 100%;
    border: 0;
}

@media screen and (max-width: 767px) {
    .econt-locator-modal {
        padding: 0;
    }

    .econt-locator-sheet {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }

    .econt-picker-head {
        flex-direction: column;
        align-items: stretch;
    }

    .econt-map-btn {
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ *
 * Безплатна доставка — нежният ред под избора на начин на доставка
 * ------------------------------------------------------------------ */

.econt-freeship {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #857d90;
}

.econt-freeship strong {
    color: #e5195f;
    font-weight: 700;
}

.econt-freeship .is-free {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1f9d55;
    font-weight: 600;
}

.econt-freeship .is-free i {
    font-size: 16px;
}

/* Съгласие за маркетинг в чекаута */

.bc-mkt {
    margin-top: 2px;
}

.bc-mkt .form-check-label {
    font-size: 13.5px;
    color: #4a4453;
}

.bc-mkt-note {
    color: #a49dab;
    font-size: 12.5px;
}

/* ================================================================== *
 * Homepage intro band
 *
 * The slider carries the shop's message inside its images, so the page
 * had no <h1> and almost nothing for a crawler to read. This says the
 * same thing in text, and doubles as the first thing a shopper sees.
 * ================================================================== */

.home-intro {
    padding: 30px 0 6px;
}

.home-intro-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px 40px;
    align-items: center;
    padding: 26px 30px;
    border: 1px solid rgba(43, 35, 51, 0.08);
    border-radius: 18px;
    background: linear-gradient(120deg, #fff 0%, #fff6f9 100%);
}

.home-intro-title {
    margin: 0 0 10px;
    color: #2b2333;
    font-size: clamp(22px, 2.4vw, 31px);
    font-weight: 700;
    line-height: 1.22;
}

.home-intro-text {
    margin: 0 0 16px;
    color: #5d5566;
    font-size: 15px;
    line-height: 1.65;
}

.home-intro-text strong {
    color: #2b2333;
    font-weight: 600;
}

.home-intro-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.home-intro-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e5195f 0%, #ff5c8a 100%);
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 14px -4px rgba(229, 25, 95, 0.5);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.home-intro-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(229, 25, 95, 0.6);
}

.home-intro-link {
    color: #2b2333 !important;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
}

.home-intro-link:hover {
    color: #e5195f !important;
}

.home-intro-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-intro-points li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 13px;
    padding: 0;
    list-style: none;
    color: #5d5566;
    font-size: 14px;
    line-height: 1.5;
}

.home-intro-points li:last-child {
    margin-bottom: 0;
}

.home-intro-points i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 21px;
    color: #e5195f;
}

.home-intro-points strong {
    color: #2b2333;
    font-weight: 600;
}

@media screen and (max-width: 991px) {
    .home-intro-inner {
        grid-template-columns: 1fr;
        padding: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-intro-btn {
        transition: none;
    }

    .home-intro-btn:hover {
        transform: none;
    }
}

/* ================================================================== *
 * Homepage hero
 *
 * Cross-fading slides with the copy in HTML over the clean half of each
 * image. Autoplay pauses on hover, on focus and when the section scrolls
 * out of view.
 * ================================================================== */

.hero {
    padding: 18px 0 6px;
}

.hero-frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #f6f2f4;
    isolation: isolate;
}

/* Slides stack; only the active one is painted. */
.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 620ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 620ms;
}

.hero-slide:first-child {
    position: relative;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    z-index: 2;
}

.hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The clean half is on the left, the products on the right; anchoring
       right keeps the subject whole as the frame narrows. */
    object-position: right center;
    z-index: -1;
}

/* A soft wash so the copy holds up over any artwork. */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        100deg,
        rgba(255, 252, 250, 0.94) 0%,
        rgba(255, 252, 250, 0.86) 28%,
        rgba(255, 252, 250, 0.35) 52%,
        rgba(255, 252, 250, 0) 68%
    );
}

.hero-slide--pink::before {
    background: linear-gradient(
        100deg,
        rgba(255, 244, 248, 0.95) 0%,
        rgba(255, 244, 248, 0.86) 28%,
        rgba(255, 244, 248, 0.32) 52%,
        rgba(255, 244, 248, 0) 68%
    );
}

.hero-body {
    position: relative;
    z-index: 1;
    width: min(52%, 620px);
    padding: 48px clamp(24px, 4vw, 60px);
}

/* Staggered entrance — each element arrives just after the one above it. */
.hero-slide.is-active .hero-eyebrow { animation: hero-rise 620ms 60ms both cubic-bezier(0.2, 0.7, 0.3, 1); }
.hero-slide.is-active .hero-heading { animation: hero-rise 620ms 140ms both cubic-bezier(0.2, 0.7, 0.3, 1); }
.hero-slide.is-active .hero-text    { animation: hero-rise 620ms 220ms both cubic-bezier(0.2, 0.7, 0.3, 1); }
.hero-slide.is-active .hero-actions { animation: hero-rise 620ms 300ms both cubic-bezier(0.2, 0.7, 0.3, 1); }

@keyframes hero-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(229, 25, 95, 0.1);
    color: #c2144f;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hero-heading {
    margin: 0 0 12px;
    color: #241d2c;
    font-size: clamp(26px, 3.6vw, 50px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.hero-text {
    max-width: 46ch;
    margin: 0 0 26px;
    color: #574e60;
    font-size: clamp(14px, 1.15vw, 17px);
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 30px;
    border-radius: 999px;
    background: #241d2c;
    color: #fff !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.hero-btn:hover {
    background: #e5195f;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(229, 25, 95, 0.6);
}

.hero-link {
    color: #241d2c !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    transition: border-color 160ms ease, color 160ms ease;
}

.hero-link:hover {
    color: #e5195f !important;
    border-bottom-color: #e5195f;
}

/* -- arrows -------------------------------------------------------- */

.hero-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
    color: #241d2c;
    font-size: 17px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms ease, background-color 160ms ease;
}

.hero-frame:hover .hero-nav,
.hero-nav:focus-visible {
    opacity: 1;
}

.hero-nav:hover {
    background: #fff;
}

.hero-nav--prev { left: 16px; }
.hero-nav--next { right: 16px; }

/* -- progress bars ------------------------------------------------- */

.hero-progress {
    position: absolute;
    left: clamp(24px, 4vw, 60px);
    bottom: 26px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.hero-progress-item {
    position: relative;
    width: 46px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(36, 29, 44, 0.18);
    cursor: pointer;
    overflow: hidden;
}

.hero-progress-fill {
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: 999px;
    background: #e5195f;
}

.hero-progress-item.is-active .hero-progress-fill {
    width: 100%;
    transition: width linear var(--hero-duration, 6500ms);
}

.hero-progress-item.is-active.is-paused .hero-progress-fill {
    transition: none;
}

/* -- responsive ---------------------------------------------------- */

@media screen and (max-width: 991px) {
    .hero-frame {
        border-radius: 18px;
    }

    /* Narrow enough that the products would sit under the words, so the
       copy takes the full width and the artwork drops behind a heavier
       wash. */
    .hero-body {
        width: 100%;
        padding: 34px 24px 58px;
    }

    .hero-slide::before,
    .hero-slide--pink::before {
        background: linear-gradient(
            170deg,
            rgba(255, 252, 250, 0.95) 0%,
            rgba(255, 252, 250, 0.82) 45%,
            rgba(255, 252, 250, 0.55) 100%
        );
    }

    .hero-image {
        object-position: center bottom;
    }

    .hero-nav {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-btn,
    .hero-link,
    .hero-nav {
        transition: none;
    }

    .hero-slide.is-active .hero-eyebrow,
    .hero-slide.is-active .hero-heading,
    .hero-slide.is-active .hero-text,
    .hero-slide.is-active .hero-actions {
        animation: none;
    }

    .hero-progress-item.is-active .hero-progress-fill {
        transition: none;
        width: 100%;
    }
}

/* ================================================================== *
 * Product cards — 2026
 *
 * The card template (product_card.blade.php) renders explicit
 * .bc-title / .bc-desc spans and a labelled full-width .bc-add-btn,
 * so these rules style real structure. The old fights with the
 * compiled mixin markup are gone together with that markup.
 * ================================================================== */

.product-card {
    border-radius: 16px;
    border-color: rgba(43, 35, 51, 0.07);
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.product-card:hover {
    border-color: rgba(229, 25, 95, 0.25);
    box-shadow: 0 14px 32px -14px rgba(43, 35, 51, 0.28);
}

/* The theme centres the image with translate(-50%, -50%) — the hover
   zoom must repeat it, otherwise the image jumps down-right. */
.product-card .product-image img {
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.product-card:hover .product-image img {
    transform: translate(-50%, -50%) scale(1.05);
}

.product-card .product-badge .badge {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 2px 8px -2px rgba(43, 35, 51, 0.3);
}

/* Изчерпан — състояние, не спешност: неутрално тъмно. */
.product-card .product-badge .badge-danger { background: #4a4453; }

/* Ново — виолетов акцент, различим от отстъпката. */
.product-card .product-badge .badge-info {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

/* Отстъпката е най-важният етикет — най-голяма и в брандовото розово. */
.product-card .product-badge .badge-success {
    background: linear-gradient(135deg, #ff2e83, #e5195f);
    font-size: 13px;
    font-weight: 800;
    padding: 6px 12px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px -4px rgba(229, 25, 95, 0.6);
}

.section-title-wrap .section-title {
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* ------------------------------------------------------------------ *
 * Title + short description
 * ------------------------------------------------------------------ */

.product-card .product-name {
    padding-bottom: 4px;
}

.product-card .bc-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #241d2c;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    transition: color 160ms ease;
}

.product-card .bc-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 4px;
    color: #857d90;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
}

.product-card:hover .bc-title {
    color: #e5195f;
}

/* Equal media + text zones so prices and buttons line up across a row. */
.product-card .product-card-middle {
    min-height: 122px;
}

/* ------------------------------------------------------------------ *
 * Price row + full-width add button
 * ------------------------------------------------------------------ */

.product-card .product-card-bottom {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    padding: 0 12px 12px;
}

.product-card .product-price {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    overflow: visible;
    font-size: 16px;
}

.product-card .product-price .previous-price {
    color: #241d2c;
    font-size: 16px;
    font-weight: 700;
}

.product-card .product-price .special-price {
    color: #e5195f;
    font-size: 16px;
    font-weight: 700;
    overflow: visible;
}

.product-card .product-price .special-price + .previous-price {
    color: #a49dab;
    font-size: 12.5px;
    font-weight: 500;
    padding-bottom: 0;
    text-decoration: line-through;
}

.product-card .bc-add-btn {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: none !important;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff2e83, #e5195f) !important;
    box-shadow: 0 6px 14px -6px rgba(229, 25, 95, 0.55);
    color: #fff !important;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.product-card .bc-add-btn:hover,
.product-card .bc-add-btn:focus,
.product-card .bc-add-btn:active {
    background: linear-gradient(135deg, #ff2e83, #e5195f) !important;
    box-shadow: 0 10px 22px -8px rgba(229, 25, 95, 0.65);
    filter: brightness(1.06);
    transform: translateY(-1px);
    color: #fff !important;
}

.product-card .bc-add-btn > svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

.product-card .bc-add-btn > svg path {
    stroke: #fff !important;
}

.product-card .bc-add-btn .bc-add-label {
    line-height: 1;
}

.product-card .bc-add-btn[disabled],
.product-card .bc-add-btn.disabled {
    background: #f0eef2 !important;
    box-shadow: none;
    color: #a8a3b0 !important;
    transform: none;
    filter: none;
}

.product-card .bc-add-btn[disabled] > svg path,
.product-card .bc-add-btn.disabled > svg path {
    stroke: #a8a3b0 !important;
}

/* Keep the theme's conic spinner readable: hide icon and label while loading. */
.product-card .bc-add-btn.btn-loading > svg,
.product-card .bc-add-btn.btn-loading .bc-add-label {
    opacity: 0;
}

/* ------------------------------------------------------------------ *
 * Carousel chrome: pill tabs + round arrows
 * ------------------------------------------------------------------ */

.landscape-tab-products-wrap .tab-products-header,
.grid-products-wrap .tab-products-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.landscape-tab-products-wrap .tab-products-header hr,
.grid-products-wrap .tab-products-header hr {
    display: none !important;
}

.landscape-tab-products-wrap .tab-products-header .section-title {
    margin: 0;
    padding: 0;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item,
.grid-products-wrap .tabs:not(.featured-categories-tabs) .tab-item {
    padding: 9px 20px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f6f4f8;
    color: #4a4453;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 160ms ease, color 160ms ease;
}

.landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item::before,
.landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item::after,
.grid-products-wrap .tabs:not(.featured-categories-tabs) .tab-item::before,
.grid-products-wrap .tabs:not(.featured-categories-tabs) .tab-item::after {
    content: none !important;
}

.landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item:hover:not(.active),
.grid-products-wrap .tabs:not(.featured-categories-tabs) .tab-item:hover:not(.active) {
    background: #ede8f1;
    color: #241d2c;
}

.landscape-tab-products-wrap .tabs:not(.featured-categories-tabs) .tab-item.active,
.grid-products-wrap .tabs:not(.featured-categories-tabs) .tab-item.active {
    background: linear-gradient(135deg, #ff2e83, #e5195f);
    color: #fff;
    box-shadow: 0 6px 14px -8px rgba(229, 25, 95, 0.7);
}

.bc-car-nav {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex: 0 0 auto;
}

.bc-car-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(43, 35, 51, 0.14);
    border-radius: 50%;
    background: #fff;
    color: #241d2c;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.bc-car-btn:hover {
    background: #241d2c;
    border-color: #241d2c;
    color: #fff;
}

.bc-car-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* The stock Swiper arrows are replaced by .bc-car-nav on these sliders. */
.landscape-left-tab-products .swiper-button-prev,
.landscape-left-tab-products .swiper-button-next,
.grid-products .swiper-button-prev,
.grid-products .swiper-button-next {
    display: none !important;
}

@media screen and (max-width: 767px) {
    .bc-car-nav {
        display: none;
    }

    .landscape-tab-products-wrap .tab-products-header-overflow .tabs,
    .grid-products-wrap .tab-products-header-overflow .tabs {
        border-bottom: none !important;
    }

    /* The grid header has no overflow wrapper of its own — let the
       pill row scroll sideways instead of wrapping or clipping. */
    .grid-products-wrap .tab-products-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .grid-products-wrap .tab-products-header::-webkit-scrollbar {
        display: none;
    }

    .grid-products-wrap .tabs:not(.featured-categories-tabs) .tab-item {
        white-space: nowrap;
    }
}

@media screen and (max-width: 450px) {
    .product-card .product-card-middle {
        min-height: 116px;
    }

    .product-card .product-card-bottom {
        padding: 0 8px 10px;
    }

    .product-card .bc-add-btn {
        height: 38px;
        font-size: 13px;
    }

    .product-card .product-price .previous-price,
    .product-card .product-price .special-price {
        font-size: 15px;
    }
}

/* ================================================================== *
 * Euro only
 *
 * Hidden rather than removed everywhere — one line brings the lev
 * figures back if the changeover rules still require them.
 * ================================================================== */

.price-in-bgn,
.price-in-leva {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .product-card,
    .product-card .product-image img,
    .product-card .bc-add-btn {
        transition: none;
    }

    .product-card:hover .product-image img {
        transform: translate(-50%, -50%);
    }

    .product-card .bc-add-btn:hover {
        transform: none;
    }
}

/* ================================================================== *
 * First-order discount prompt
 * ================================================================== */

.wp-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.wp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 22, 34, 0.62);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 240ms ease;
}

.wp-overlay.is-open .wp-backdrop { opacity: 1; }

.wp-card {
    position: relative;
    width: min(420px, 100%);
    padding: 38px 34px 28px;
    border-radius: 22px;
    background: linear-gradient(165deg, #fff 0%, #fff4f8 100%);
    box-shadow: 0 28px 64px -20px rgba(28, 22, 34, 0.5);
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity 260ms cubic-bezier(0.2, 0.7, 0.3, 1),
                transform 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wp-overlay.is-open .wp-card {
    opacity: 1;
    transform: none;
}

.wp-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(43, 35, 51, 0.06);
    color: #6e6577;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 140ms ease;
}

.wp-close:hover { background: rgba(43, 35, 51, 0.12); }

.wp-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    background: rgba(229, 25, 95, 0.1);
    color: #c2144f;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.wp-figure {
    margin: 0;
    color: #e5195f;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.wp-figure span {
    font-size: 76px;
    letter-spacing: -0.04em;
}

.wp-title {
    margin: 4px 0 12px;
    color: #241d2c;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.wp-text {
    margin: 0 0 22px;
    color: #5d5566;
    font-size: 14.5px;
    line-height: 1.6;
}

.wp-text strong { color: #241d2c; font-weight: 600; }

.wp-btn {
    display: block;
    padding: 15px 24px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e5195f 0%, #ff5c8a 100%);
    color: #fff !important;
    font-size: 15.5px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 20px -6px rgba(229, 25, 95, 0.55);
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.wp-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -6px rgba(229, 25, 95, 0.65);
}

.wp-skip {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #837b8c;
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

.wp-skip:hover { color: #241d2c; }

.wp-fine {
    margin: 10px 0 0;
    color: #a49dab;
    font-size: 11.5px;
}

@media (prefers-reduced-motion: reduce) {
    .wp-backdrop, .wp-card, .wp-btn { transition: none; }
    .wp-card { transform: none; }
    .wp-btn:hover { transform: none; }
}

/* ================================================================== *
 * Footer — 2026 (bcf-*)
 *
 * Own class namespace: the old footer CSS lives partly in the admin's
 * custom_header_assets blob, which loads after custom.css and would win
 * every specificity tie. New names, no tie, no war.
 * ================================================================== */

.bcf {
    margin-top: 120px;
    padding: 0 0 34px;
    border-radius: 32px 32px 0 0;
    background: linear-gradient(160deg, #2c2136 0%, #241d2c 55%, #2a1e33 100%);
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.bcf a {
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.bcf a:hover {
    color: #ff7ab0;
}

/* ------------------------------------------------------------------ *
 * Newsletter card — floats over the footer's top edge
 * ------------------------------------------------------------------ */

.bcf-newsletter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 26px 34px;
    border-radius: 22px;
    background: linear-gradient(135deg, #ff2e83, #e5195f);
    box-shadow: 0 22px 44px -18px rgba(229, 25, 95, 0.55);
    transform: translateY(-54px);
    margin-bottom: -18px;
}

.bcf-nl-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #fff;
}

.bcf-nl-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.bcf-nl-sub {
    font-size: 13.5px;
    opacity: 0.92;
}

.bcf-nl-form {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 380px;
}

.bcf-nl-form input {
    flex: 1;
    height: 48px;
    padding: 0 20px;
    border: none;
    border-radius: 999px;
    background: #fff;
    color: #241d2c;
    font-size: 14px;
    outline: none;
}

.bcf-nl-form input::placeholder {
    color: #a49dab;
}

.bcf-nl-form button {
    height: 48px;
    padding: 0 26px;
    border: none;
    border-radius: 999px;
    background: #241d2c;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease;
    white-space: nowrap;
}

.bcf-nl-form button:hover {
    background: #171221;
    transform: translateY(-1px);
}

.bcf-nl-form button.bcf-nl-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Main grid
 * ------------------------------------------------------------------ */

.bcf-grid {
    display: grid;
    grid-template-columns: 1.6fr 0.9fr 1.1fr 1fr 1.4fr;
    gap: 44px;
    padding: 44px 0 40px;
}

/* Логото е тъмно върху бял фон — на белия чип си личи, вместо да се
   мъчим с филтри върху непрозрачен файл. */
.bcf-logo {
    height: 58px;
    width: auto;
    margin-bottom: 16px;
    padding: 9px 16px;
    border-radius: 14px;
    background: #fff;
}

.bcf-logo-text {
    display: block;
    margin-bottom: 16px;
    color: #fff;
    font-size: 24px;
    font-weight: 800;
}

.bcf-about {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.66);
}

.bcf-about strong {
    color: #fff;
}

.bcf-usp {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bcf-usp li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.bcf-usp i {
    flex: 0 0 auto;
    font-size: 17px;
    color: #ff7ab0;
    margin-top: 1px;
}

.bcf-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #ff7ab0 !important;
}

.bcf-more:hover {
    color: #ffa3c8 !important;
}

.bcf-more i {
    transition: transform 160ms ease;
}

.bcf-more:hover i {
    transform: translateX(3px);
}

.bcf-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.bcf-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 17px;
    transition: all 160ms ease;
}

.bcf-social a:hover {
    background: #ff2e83;
    border-color: #ff2e83;
    color: #fff;
}

.bcf-title {
    margin: 6px 0 18px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bcf-links,
.bcf-contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.bcf-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
}

.bcf-promo {
    color: #ff7ab0 !important;
    font-weight: 700;
}

.bcf-promo:hover {
    color: #ffa3c8 !important;
}

.bcf-contacts li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

.bcf-contacts i {
    flex: 0 0 auto;
    font-size: 17px;
    color: #ff7ab0;
    margin-top: 1px;
}

.bcf-map {
    margin-top: 18px;
    height: 150px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.bcf-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    filter: saturate(0.85);
}

/* ------------------------------------------------------------------ *
 * Bottom bar
 * ------------------------------------------------------------------ */

.bcf-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.45);
}

.bcf-copy p {
    margin: 0;
    line-height: 1.7;
}

.bcf-copy a {
    color: rgba(255, 255, 255, 0.7);
}

.bcf-copy a:hover {
    color: #ff7ab0;
}

.bcf-pay img {
    display: block;
    max-height: 30px;
    padding: 5px 10px;
    border-radius: 8px;
    background: #fff;
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media screen and (max-width: 1250px) {
    .bcf-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
    }

    .bcf-brand {
        grid-column: 1 / -1;
        max-width: 560px;
    }
}

@media screen and (max-width: 900px) {
    .bcf-newsletter {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 24px 20px;
    }

    .bcf-nl-form {
        min-width: 0 !important;
        width: 100%;
    }

    .bcf-nl-form input {
        min-width: 0;
        width: 100%;
    }

    .bcf-nl-text {
        width: 100%;
    }

    .bcf-nl-title {
        font-size: 18px;
    }

    .bcf-nl-sub {
        font-size: 12.5px;
    }

    .bcf-nl-title,
    .bcf-nl-sub {
        overflow-wrap: break-word;
    }
}

@media screen and (max-width: 767px) {
    .bcf {
        margin-top: 90px;
        border-radius: 22px 22px 0 0;
    }

    .bcf-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding-top: 34px;
    }

    .bcf-contact {
        grid-column: 1 / -1;
    }

    .bcf-bottom {
        flex-direction: column;
        text-align: center;
    }
}

/* Мобилната долна навигация на темата не бива да покрива копирайта. */
@media screen and (max-width: 991px) {
    .bcf {
        padding-bottom: 100px;
    }
}

@media screen and (max-width: 520px) {
    .bcf-grid {
        grid-template-columns: 1fr;
    }

    .bcf-nl-form {
        flex-direction: column;
    }

    .bcf-nl-form button {
        width: 100%;
    }
}