/* ================================================================
   STEAMPUNK THEME — custom.css
   Inspirat din MindGearSoftware (mindgearsoftware.com)
   Fonturi: Cinzel Decorative · Pirata One · Metamorphous
   Fundal: Lemn deschis / Pergament cald
   ================================================================ */

/* === FONTS IMPORT (bunny.net — EU CDN, Google Fonts drop-in) === */
@import url('https://fonts.bunny.net/css?family=cinzel-decorative:400,700,900|pirata-one:400|metamorphous:400|libre-baskerville:400,400i,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Metamorphous&family=Pirata+One&display=swap');

/* ===== VARIABILE STEAMPUNK ===== */
:root {
    --brass:        #8B4513;
    --copper:       #B7410E;
    --brass-light:  #c47a3a;
    --copper-light: #c8602a;
    --gold-vivid:   #B7410E;

    --bg-main:  #F4E4BC;
    --bg-panel: #EBD8AA;
    --bg-card:  #E2D1A4;
    --bg-dark:  #34544F;
    --bg-dark2: #1a1410;

    --text:       #2D1B02;
    --text-sub:   #5a3a10;
    --text-light: #f5f5dc;

    --border:      #c8a060;
    --border-dark: #3a2e1e;

    /* Bootstrap overrides */
    --bs-body-bg:           #F4E4BC;
    --bs-body-color:        #2D1B02;
    --bs-primary:           #8B4513;
    --bs-body-font-family:  'Metamorphous', Georgia, serif;
    --bs-link-color:        #B7410E;
    --bs-link-hover-color:  #8B4513;
    --bs-border-color:      #c8a060;
    --bs-secondary-color:   #8B4513;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar         { width: 10px; }
::-webkit-scrollbar-track   { background: #c4a870; }
::-webkit-scrollbar-thumb   { background: linear-gradient(#8a6200, #7a3800); border-radius: 5px; }

/* ===== BODY ===== */
body {
    font-family: 'Metamorphous', Georgia, serif !important;
    background-color: #F4E4BC !important;
    color: #2D1B02 !important;
}

/* ===== TITLURI ===== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass) !important;
    letter-spacing: 2px;
}

/* ===== LINK-URI ===== */
a { color: var(--copper) !important; text-decoration: none !important; }
a:hover { color: var(--brass) !important; }

/* ================================================================
   HEADER
   ================================================================ */
.header {
    background-color: rgba(52, 84, 79, 0.98) !important;
    border-bottom: 3px solid var(--copper-light) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px);
    color: var(--text-light) !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Wrapper: logo | ---- meniu ---- | actiuni */
.header__wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Logo — primul, nemiscabil */
.header__logo {
    order: 0 !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    flex-shrink: 0 !important;
}

.header__logo-text,
.header__logo a,
.header__logo span {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass-light) !important;
    font-weight: 900 !important;
    letter-spacing: 4px;
}

/* Meniu — al doilea, ia tot spatiul ramas, O SINGURA LINIE */
.header__menu {
    order: 1 !important;
    margin-left: auto !important;
    flex-shrink: 1 !important;
    overflow: visible !important;
}

.header__menu-list {
    flex-wrap: nowrap !important;
    overflow: visible !important;
    white-space: nowrap;
    gap: 0 !important;
}

/* Item meniu — padding redus, fara letter-spacing, sa incapa pe o linie */
.header__menu a,
.header__menu a:active,
.header__menu-list > li > a {
    font-family: 'Metamorphous', Georgia, serif !important;
    color: var(--text-light) !important;
    text-decoration: none !important;
    padding: 7px 10px !important;
    border: 2px solid transparent !important;
    transition: 0.3s !important;
    letter-spacing: 0 !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    display: block !important;
}

.header__menu a:hover,
.header__menu-item--active > a,
.header__menu-wide .nav-link:hover,
.header__menu-wide .nav-link:focus,
.header__menu-wide .nav-link.active {
    color: var(--brass-light) !important;
    border-color: var(--copper-light) !important;
    background: rgba(181, 166, 66, 0.12) !important;
}

/* Actiuni — al treilea */
.header__actions {
    order: 2 !important;
    margin-left: 16px !important;
    flex-shrink: 0 !important;
}

.header__actions a, .header__actions button { color: var(--text-light) !important; }
.header__actions a:hover, .header__actions button:hover { color: var(--brass-light) !important; }

/* Valuta (EUR/RON) — span/div care nu sunt a sau button */
.header__actions span,
.header__actions [class*="currency"],
.header__actions [class*="money"],
.header__actions [class*="price-format"],
.header__actions [class*="switcher"] > span,
.header__actions [class*="switcher"] > div {
    color: var(--text-light) !important;
}

/* Dropdown selector limba — text inchis pe fundal deschis */
.header__actions [role="tooltip"] a,
.header__actions [role="tooltip"] span,
.header__actions .tooltip a,
.header__actions .tooltip span,
.header__actions .dropdown-menu a,
.header__actions [class*="lang"] a,
.header__actions [class*="language"] a,
.header__actions [class*="switcher"] a {
    color: var(--text) !important;
    white-space: nowrap !important;
}

/* Container dropdown limba — latime suficienta */ac
.header__actions [role="tooltip"],
.header__actions .tooltip,
.header__actions [class*="lang"] ul,
.header__actions [class*="language"] ul,
.header__actions [class*="switcher"] ul {
    min-width: 140px !important;
    width: auto !important;
}

.header__actions [role="tooltip"] a:hover,
.header__actions .tooltip a:hover,
.header__actions .dropdown-menu a:hover,
.header__actions [class*="lang"] a:hover,
.header__actions [class*="language"] a:hover {
    color: var(--brass) !important;
    background-color: rgba(139, 69, 19, 0.08) !important;
}

/* Tab-uri (Detalii, Descriere etc.) */
.nav-tabs .nav-link {
    color: var(--text) !important;
    background: transparent !important;
    border-color: transparent !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 1px;
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link.active {
    color: var(--brass) !important;
    border-color: var(--border) var(--border) var(--bg-main) !important;
    background: var(--bg-main) !important;
}

/* ================================================================
   HERO / SLIDER
   ================================================================ */
.widget-slider, .bslots__content, [class*="hero"] {
    border-bottom: 2px solid var(--border-dark);
    position: relative;
}

.widget-slider::after, .bslots__content::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(52,84,79,0.2) 0%, rgba(52,84,79,0.5) 100%);
    pointer-events: none;
    z-index: 1;
}

.bslots__content h2, .bslots__content h3, .bslots__content p,
.widget-slider h2, .widget-slider h3, .widget-slider p,
.slider-text, .slider-caption {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text-light) !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7) !important;
}

.bslots__content .btn, .widget-slider .btn {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text-light) !important;
    background: rgba(52, 84, 79, 0.7) !important;
    border: 2px solid var(--brass-light) !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 2;
    position: relative;
}

/* ── BSLOT SLIDER — titlu fluid + fundal steampunk ── */
/* Font + marime fluida: 24px (mobil mic) → 60px (desktop) */
.bslot-slider__title {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text-light) !important;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.7) !important;
    font-size: clamp(1.5rem, 5vw, 3.75rem) !important;
    line-height: 1.18 !important;
    word-break: break-word !important;
}

.bslot-slider__subtitle {
    font-family: 'Metamorphous', Georgia, serif !important;
    color: var(--text-light) !important;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.8) !important;
    font-size: clamp(0.75rem, 1.8vw, 1.125rem) !important;
    line-height: 1.4 !important;
}

/* Fundal continut slider — inlocuim albul semitransparent cu steampunk */
/* Platforma seteaza padding: 15px 30px 0px — corectam la padding egal sus/jos */
.bslot-slider__content {
    background: rgba(26, 16, 8, 0.62) !important;
    border: 1px solid rgba(200, 160, 60, 0.3) !important;
    border-radius: 3px !important;
    backdrop-filter: blur(3px) !important;
    padding: 16px 30px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Titlu fara margin-bottom ca sa nu dezechilibreze centrarea */
.bslot-slider__title {
    margin-bottom: 0 !important;
}

/* Subtitle gol — ascuns ca sa nu adauge spatiu */
.bslot-slider__subtitle:empty {
    display: none !important;
}

/* Subtitle cu continut — spatiu deasupra */
.bslot-slider__subtitle:not(:empty) {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}

/* Mobil: fortam latime mai mare si reducem letter-spacing ca sa incapa textul */
@media (max-width: 767px) {
    .bslot-slider__content {
        width: 88% !important;
        max-width: 88% !important;
        padding: 12px 14px 12px !important;
    }
    .bslot-slider__title {
        letter-spacing: 0.5px !important;
        font-size: clamp(1.5rem, 6.5vw, 2.5rem) !important;
    }
    .bslot-slider__subtitle {
        font-size: 0.8rem !important;
    }
}

/* ================================================================
   BANDA FEATURES
   ================================================================ */
.widget-features, .widget-features__wrapper,
[class*="widget-features"], .features-bar {
    background-color: #c0a068 !important;
    border-top: 2px solid var(--border) !important;
    border-bottom: 2px solid var(--border) !important;
    color: var(--text) !important;
}

/* Aliniere iconiță + text la TOP în fiecare celulă */
.bslot-multi-icon__cell {
    align-items: start !important;
}

/* Eliminare fundal alb din spatele iconițelor logo */
.bslot-multi-icon__image-wrapper {
    background: transparent !important;
}
.bslot-multi-icon__image {
    background: transparent !important;
    mix-blend-mode: multiply;
}

[class*="widget-features"] strong, [class*="widget-features"] h6,
[class*="widget-features"] .h6, [class*="features"] strong, [class*="features"] b {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text) !important;
    letter-spacing: 1px;
    font-size: 0.8rem !important;
}

[class*="widget-features"] span, [class*="widget-features"] p,
[class*="widget-features"] small, [class*="features"] span, [class*="features"] small {
    color: var(--text-sub) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

/* ================================================================
   BANNERE
   ================================================================ */
.widget-banner, .widget-banner__wrapper {
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

/* Fix: wrapper banner cu aspect-ratio forțat → înălțime determinată de imagine */
.bslot-single-file__image-wrapper {
    aspect-ratio: auto !important;
    height: auto !important;
}
.bslot-single-file__image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    vertical-align: top !important;
}

.widget-banner__heading, .widget-banner h2,
.widget-banner h3, .widget-banner a {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text-light) !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.widget-banner .btn, .widget-banner__cta {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text-light) !important;
    background: rgba(52, 84, 79, 0.65) !important;
    border: 2px solid var(--brass-light) !important;
    padding: 10px 24px !important;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: 0.3s !important;
    border-radius: 3px !important;
}
.widget-banner .btn:hover, .widget-banner__cta:hover {
    background: rgba(52, 84, 79, 0.85) !important;
    border-color: var(--copper-light) !important;
    color: var(--brass-light) !important;
    box-shadow: 0 0 20px rgba(181, 166, 66, 0.3);
    transform: translateY(-3px);
}

/* ================================================================
   CATEGORII
   ================================================================ */
.categories__content--grid, .categories__content,
.category-block, [class*="widget-categories"] {
    background-color: var(--bg-panel) !important;
    color: var(--text) !important;
}

.categories__content--grid .category__name, .category-block__name, .category__name {
    color: var(--text) !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 0.65rem !important;
    letter-spacing: 1px;
}

.categories__content--grid .category__image-container img,
.categories__content--grid .category__no-image img,
.category-block__image-container img { border: 3px solid var(--brass) !important; }

.category:hover img, .category-block:hover img { border-color: var(--copper) !important; }
.category:hover .category__name, .category-block:hover .category__name { color: var(--brass) !important; }

/* ================================================================
   PRODUSE — CARD
   border auriu permanent · hover gradient luminos · umbra 3D
   ================================================================ */
.product--compact {
    background-color: var(--bg-card) !important;
    color: color-mix(in srgb, var(--bg-card), black 85%) !important;
    border: 2px solid var(--border) !important;
    position: relative !important;
    overflow: hidden !important;
    /* Umbra 3D — card „flotant" */
    box-shadow:
        0 2px  0   rgba(0, 0, 0, 0.18),
        0 6px 16px rgba(0, 0, 0, 0.18),
        0 1px  3px rgba(212, 168, 0, 0.18) !important;
    transition:
        border-color 0.35s ease,
        box-shadow   0.35s ease,
        transform    0.35s ease !important;
}

.product--grid {
    background-color: var(--bg-card) !important;
    color: color-mix(in srgb, var(--bg-card), black 85%) !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2) !important;
    transition:
        box-shadow   0.35s ease,
        transform    0.35s ease !important;
}

.product--grid::before {
    content: '';
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    border: 10px solid transparent !important;
    border-image-source: url('https://f.cdnmp.net/401754215/content/border.png?rv=1778711632') !important;
    border-image-slice: 65 !important;
    border-image-repeat: round !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Strat lumina aurie — invizibil pana la hover */
.product--compact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(255, 215, 0, 0.18) 0%,
        rgba(181, 166, 66, 0.10) 40%,
        transparent 68%
    );
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

.product--grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(255, 215, 0, 0.18) 0%,
        rgba(181, 166, 66, 0.10) 40%,
        transparent 68%
    );
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

/* Continut deasupra stratului de lumina */
.product--compact > *, .product--grid > * { position: relative; z-index: 1; }

/* Hover */
.product--compact:hover {
    border-color: var(--gold-vivid) !important;
    box-shadow:
        0 0   0  2px  rgba(212, 168, 0, 0.55),
        0 10px 30px   rgba(0, 0, 0, 0.30),
        0 0  24px     rgba(212, 168, 0, 0.22) !important;
    transform: translateY(-6px) !important;
}

.product--grid:hover {
    box-shadow:
        0 0   0  2px  rgba(212, 168, 0, 0.55),
        0 10px 30px   rgba(0, 0, 0, 0.30),
        0 0  24px     rgba(212, 168, 0, 0.22) !important;
    transform: translateY(-6px) !important;
}

.product--compact:hover::before { opacity: 1; }
.product--grid:hover::after { opacity: 1; }

/* ================================================================
   SLIDER PRODUCTS — Same steampunk border as grid
   ================================================================ */
.product--slider {
    background-color: var(--bg-card) !important;
    color: color-mix(in srgb, var(--bg-card), black 85%) !important;
    border: none !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2) !important;
    transition:
        box-shadow   0.35s ease,
        transform    0.35s ease !important;
}

.product--slider::before {
    content: '';
    position: absolute !important;
    top: -10px !important;
    left: -10px !important;
    right: -10px !important;
    bottom: -10px !important;
    border: 10px solid transparent !important;
    border-image-source: url('https://f.cdnmp.net/401754215/content/border.png?rv=1778711632') !important;
    border-image-slice: 65 !important;
    border-image-repeat: round !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.product--slider::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 30%,
        rgba(255, 215, 0, 0.18) 0%,
        rgba(181, 166, 66, 0.10) 40%,
        transparent 68%
    );
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
    z-index: 0;
}

.product--slider > * { position: relative; z-index: 1; }

.product--slider:hover {
    box-shadow:
        0 0   0  2px  rgba(212, 168, 0, 0.55),
        0 10px 30px   rgba(0, 0, 0, 0.30),
        0 0  24px     rgba(212, 168, 0, 0.22) !important;
    transform: translateY(-6px) !important;
}

.product--slider:hover::after { opacity: 1; }

/* Imagine */
.product__image, .slider-image {
    background-color: #d4bc82 !important;
    border-bottom: 1px solid var(--border);
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

.product__image img, .slider-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
    max-height: none !important;
}

/* Date produs */
.product__data { background-color: var(--bg-card) !important; padding: 10px 12px 14px !important; color: var(--text) !important; }

/* Nume */
.product__name, .product__name a,
.product--compact .product__name, .product--grid .product__name {
    font-family: 'Metamorphous', Georgia, serif !important;
    color: var(--text) !important;
}
.product__name a:hover { color: var(--brass) !important; }

/* Descriere */
.product__description, .product--compact .product__description {
    color: var(--text) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

/* Categorie */
.product__category, .product__category a, .product--compact .product__category {
    color: var(--text-sub) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem !important;
}

/* Preturi — listing catalog */
/* Fix centrare text slider pe mobil (inclusiv ultimele slide-uri) */
@media (max-width: 767px) {
    .splide__slide { text-align: center !important; }
    .bslot-slider__content, .slider-text, .slider-caption {
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
.product__info--price-net,
.product__info--price-gross,
[class*="price-net"],
[class*="price-gross"],
.price {
    color: #2D1B02 !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-weight: 900 !important;
    font-size: 1.18rem !important;
    text-shadow: none !important;
}

/* Pret vechi */
.product__info--rrp-price-gross, [class*="rrp-price"], del, s, .old-price {
    color: #8a7060 !important;
    opacity: 0.75;
    font-size: 0.85rem !important;
    text-decoration: line-through !important;
}

/* Badge discount */
.slider-image__badge,
.grid-image__badge,
.grid-image__badge--price-discount,
[class*="badge-discount"], [class*="badge-promo"],
.discount-badge, .product__badge,
.badge--promo, .badge--discount, .badge--sale,
[class*="badge"][class*="promo"],
[class*="badge"][class*="sale"],
[class*="badge"][class*="new"],
.product-badge {
    background-color: #6B1F2A !important;
    color: #f5e6d0 !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 2px !important;
    border: 1px solid #8B2535 !important;
    text-shadow: none !important;
}

/* Wishlist */
.product__actions button, .product__actions a {
    color: var(--text) !important;
    background: rgba(226, 207, 160, 0.85) !important;
    border: 1px solid var(--border) !important;
    transition: 0.3s !important;
}
.product__actions button:hover, .product__actions a:hover {
    color: var(--brass) !important;
    border-color: var(--brass) !important;
    background: rgba(226, 207, 160, 1) !important;
}

/* ================================================================
   PRODUSE — COS: muta butonul langa inimioară (pe imagine)
   Inimioară stânga · Coș dreapta · același strip 41px
   ================================================================ */

/* ================================================================
   STRIP INIMIOARĂ — reset complet de la regulile globale .btn
   Cauza problemelor: .grid-image__save-wishlist are clasa btn btn-icon,
   deci primea gradient întunecat, border brass și transform:translateY(-3px) la hover.
   ================================================================ */

/* Strip inimioară: position: absolute ancorată la bottom: 0 al imaginii.
    CAUZA BUG: .grid-image__actions are top fix (px) setat de platformă.
    La resize, imaginea se micșorează → top fix depășește înălțimea imaginii
    → strip-ul iese din .grid-image → tăiat de overflow: hidden al .product--grid.
    FIX: pe desktop ridicăm containerul imaginii în față, ca să nu fie acoperit. */
/* ================================================================
   PRODUCT DATA — LAYERING FIX
   Push product description behind heart/cart buttons
   ================================================================ */

.product--grid .product__data {
    position: static !important;
    z-index: auto !important;
    pointer-events: none !important;
    padding-bottom: 52px !important; /* 41px strip + 11px breathing room */
}

/* Re-activam pointer events doar pe link-uri si butoane din product__data */
.product--grid .product__data a,
.product--grid .product__data button {
    pointer-events: auto !important;
}

.product--grid .grid-image {
    position: static !important;
}

/* Strip inimioară: sempre vizibil */
.product--grid .grid-image__actions {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    width: 50% !important;
    height: 41px !important;
    background: rgba(226,207,160,0.95) !important;
    border-top: 1px solid #c8a060 !important;
    border-right: 1px solid #c8a060 !important;
    border-bottom: 1px solid #c8a060 !important;
    border-left: 1px solid #c8a060 !important;
    justify-content: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    align-items: center !important;
    transition: opacity 0.3s !important;
    z-index: 1000 !important;
    overflow: visible !important;
}

.product--grid .grid-image__actions:hover {
    background: rgba(226, 207, 160, 0.85) !important;
    box-shadow: inset 0 0 0 2px var(--border) !important;
}

.product--grid .grid-image__save-wishlist {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: #2D1B02 !important;
    transition: color 0.3s !important;
    padding: 0 !important;
    font-size: 26px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.product--grid .grid-image__save-wishlist::before {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background-image: url('https://f.cdnmp.net/401754215/content/steamheart.png?rv=1777887586') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: opacity 0.2s !important;
}

.product--grid .grid-image__save-wishlist:hover::before {
    opacity: 0.75 !important;
}

.product--grid .grid-image__save-wishlist svg,
.product--grid .grid-image__save-wishlist img,
.product--grid .grid-image__save-wishlist i {
    display: none !important;
}

/* Strip coș — jumătatea dreaptă */
.product--grid .product__actions {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    right: 0 !important;
    width: 50% !important;
    height: 41px !important;
    background: rgba(226,207,160,0.95) !important;
    border-top: 1px solid #c8a060 !important;
    border-right: 1px solid #c8a060 !important;
    border-bottom: 1px solid #c8a060 !important;
    border-left: 1px solid #c8a060 !important;
    box-shadow: none !important;
    padding: 0 !important;
    z-index: 999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s !important;
}

.product--grid .product__actions:hover {
    background: rgba(226, 207, 160, 0.85) !important;
    box-shadow: inset 0 0 0 2px var(--border) !important;
}

.product--grid .product__add-to-cart {
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.product--grid .product__actions .product__add-to-cart::before {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    flex-shrink: 0 !important;
    background-image: url('https://f.cdnmp.net/401754215/content/steambasket.png?rv=1777888489') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transition: opacity 0.2s !important;
}

.product--grid .product__actions .product__add-to-cart:hover::before {
    opacity: 0.75 !important;
}

/* ================================================================
   ANIMATIE FADE-IN STAGGERED — 40 produse, easing fluid
   Easing: cubic-bezier(0.22, 1, 0.36, 1) = ease-out-quart
   Durata: 0.55s, delay: 0.05s per produs
   animation-fill-mode: both => invizibil inainte de start
   ================================================================ */
@keyframes steamFadeIn {
    from { opacity: 0; transform: translateY(18px) scale(0.975); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* Spacing between products — show borders clearly */
.products-grid__items,
.products-list__items {
    gap: 40px !important;
    padding: 30px 20px 20px 30px !important;
}

/* Mobile: reduce spacing so products aren't cramped */
@media (max-width: 1024px) {
    .products-grid__items,
    .products-list__items {
        gap: 20px !important;
        padding: 20px 15px 15px 20px !important;
    }
}

@media (max-width: 767px) {
    .products-grid__items,
    .products-list__items {
        gap: 14px !important;
        padding: 15px 10px 10px 15px !important;
    }
}

.products-grid__items > .product--grid,
.products-list__items > .product--compact {
    animation: steamFadeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.products-grid__items > .product--grid:nth-child(1),
.products-list__items > .product--compact:nth-child(1)  { animation-delay: 0.03s; }
.products-grid__items > .product--grid:nth-child(2),
.products-list__items > .product--compact:nth-child(2)  { animation-delay: 0.08s; }
.products-grid__items > .product--grid:nth-child(3),
.products-list__items > .product--compact:nth-child(3)  { animation-delay: 0.13s; }
.products-grid__items > .product--grid:nth-child(4),
.products-list__items > .product--compact:nth-child(4)  { animation-delay: 0.18s; }
.products-grid__items > .product--grid:nth-child(5),
.products-list__items > .product--compact:nth-child(5)  { animation-delay: 0.23s; }
.products-grid__items > .product--grid:nth-child(6),
.products-list__items > .product--compact:nth-child(6)  { animation-delay: 0.28s; }
.products-grid__items > .product--grid:nth-child(7),
.products-list__items > .product--compact:nth-child(7)  { animation-delay: 0.33s; }
.products-grid__items > .product--grid:nth-child(8),
.products-list__items > .product--compact:nth-child(8)  { animation-delay: 0.38s; }
.products-grid__items > .product--grid:nth-child(9),
.products-list__items > .product--compact:nth-child(9)  { animation-delay: 0.43s; }
.products-grid__items > .product--grid:nth-child(10),
.products-list__items > .product--compact:nth-child(10) { animation-delay: 0.48s; }
.products-grid__items > .product--grid:nth-child(11),
.products-list__items > .product--compact:nth-child(11) { animation-delay: 0.53s; }
.products-grid__items > .product--grid:nth-child(12),
.products-list__items > .product--compact:nth-child(12) { animation-delay: 0.58s; }
.products-grid__items > .product--grid:nth-child(13),
.products-list__items > .product--compact:nth-child(13) { animation-delay: 0.63s; }
.products-grid__items > .product--grid:nth-child(14),
.products-list__items > .product--compact:nth-child(14) { animation-delay: 0.68s; }
.products-grid__items > .product--grid:nth-child(15),
.products-list__items > .product--compact:nth-child(15) { animation-delay: 0.73s; }
.products-grid__items > .product--grid:nth-child(16),
.products-list__items > .product--compact:nth-child(16) { animation-delay: 0.78s; }
.products-grid__items > .product--grid:nth-child(17),
.products-list__items > .product--compact:nth-child(17) { animation-delay: 0.83s; }
.products-grid__items > .product--grid:nth-child(18),
.products-list__items > .product--compact:nth-child(18) { animation-delay: 0.88s; }
.products-grid__items > .product--grid:nth-child(19),
.products-list__items > .product--compact:nth-child(19) { animation-delay: 0.93s; }
.products-grid__items > .product--grid:nth-child(20),
.products-list__items > .product--compact:nth-child(20) { animation-delay: 0.98s; }
.products-grid__items > .product--grid:nth-child(21),
.products-list__items > .product--compact:nth-child(21) { animation-delay: 1.03s; }
.products-grid__items > .product--grid:nth-child(22),
.products-list__items > .product--compact:nth-child(22) { animation-delay: 1.08s; }
.products-grid__items > .product--grid:nth-child(23),
.products-list__items > .product--compact:nth-child(23) { animation-delay: 1.13s; }
.products-grid__items > .product--grid:nth-child(24),
.products-list__items > .product--compact:nth-child(24) { animation-delay: 1.18s; }
.products-grid__items > .product--grid:nth-child(25),
.products-list__items > .product--compact:nth-child(25) { animation-delay: 1.23s; }
.products-grid__items > .product--grid:nth-child(26),
.products-list__items > .product--compact:nth-child(26) { animation-delay: 1.28s; }
.products-grid__items > .product--grid:nth-child(27),
.products-list__items > .product--compact:nth-child(27) { animation-delay: 1.33s; }
.products-grid__items > .product--grid:nth-child(28),
.products-list__items > .product--compact:nth-child(28) { animation-delay: 1.38s; }
.products-grid__items > .product--grid:nth-child(29),
.products-list__items > .product--compact:nth-child(29) { animation-delay: 1.43s; }
.products-grid__items > .product--grid:nth-child(30),
.products-list__items > .product--compact:nth-child(30) { animation-delay: 1.48s; }
.products-grid__items > .product--grid:nth-child(31),
.products-list__items > .product--compact:nth-child(31) { animation-delay: 1.53s; }
.products-grid__items > .product--grid:nth-child(32),
.products-list__items > .product--compact:nth-child(32) { animation-delay: 1.58s; }
.products-grid__items > .product--grid:nth-child(33),
.products-list__items > .product--compact:nth-child(33) { animation-delay: 1.63s; }
.products-grid__items > .product--grid:nth-child(34),
.products-list__items > .product--compact:nth-child(34) { animation-delay: 1.68s; }
.products-grid__items > .product--grid:nth-child(35),
.products-list__items > .product--compact:nth-child(35) { animation-delay: 1.73s; }
.products-grid__items > .product--grid:nth-child(36),
.products-list__items > .product--compact:nth-child(36) { animation-delay: 1.78s; }
.products-grid__items > .product--grid:nth-child(37),
.products-list__items > .product--compact:nth-child(37) { animation-delay: 1.83s; }
.products-grid__items > .product--grid:nth-child(38),
.products-list__items > .product--compact:nth-child(38) { animation-delay: 1.88s; }
.products-grid__items > .product--grid:nth-child(39),
.products-list__items > .product--compact:nth-child(39) { animation-delay: 1.93s; }
.products-grid__items > .product--grid:nth-child(40),
.products-list__items > .product--compact:nth-child(40) { animation-delay: 1.98s; }

@media (prefers-reduced-motion: reduce) {
    .products-grid__items > .product--grid,
    .products-list__items > .product--compact {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ================================================================
   BUTOANE GLOBALE
   ================================================================ */
.btn,
button[type="submit"],
button[type="button"] {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--text-light) !important;
    background: linear-gradient(135deg, #2a1a06, #3d2810) !important;
    border: 2px solid var(--brass) !important;
    border-radius: 3px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.4s !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.3) !important;
}

.btn:hover, .btn:focus,
button[type="submit"]:hover, button[type="button"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 15px rgba(138,98,0,0.25) !important;
    border-color: var(--copper) !important;
    color: var(--brass-light) !important;
    background: linear-gradient(135deg, #3d2810, #5a3c18) !important;
}

.btn-primary {
    background: linear-gradient(135deg, #2a1a06, #3d2810) !important;
    border-color: var(--brass) !important;
    color: var(--text-light) !important;
}

/* Quantity stepper +/- — Bootstrap seteaza culoare inchisa pe <strong>,
   o resetam explicit la culoarea luminoasa */
.quantity-spinner__button strong {
    color: var(--text-light) !important;
    -webkit-text-fill-color: var(--text-light) !important;
}

/* btn-link — trebuie transparent, fara gradient (ex: buton lupa search) */
.btn-link,
button.btn-link {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--copper) !important;
    text-transform: none !important;
    transform: none !important;
}
.btn-link:hover,
button.btn-link:hover {
    background: transparent !important;
    color: var(--brass) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* btn-close (Bootstrap) — specificitate crescuta (0,2,1) ca sa bata button[type="button"] (0,1,1) */
button[type="button"].btn-close,
button.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f5f5dc'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
    border: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    transform: none !important;
    opacity: 0.8 !important;
}
button[type="button"].btn-close:hover,
button.btn-close:hover { opacity: 1 !important; transform: none !important; box-shadow: none !important; }

/* btn-close din search drawer — stilizat steampunk (vezi sectiunea SEARCH DRAWER) */

/* Iconite SVG din header (lupa, cont, cos) — culoare luminoasa pe bg inchis */
.header__action svg,
.header__action .icon,
.header__action-icon svg {
    color: var(--text-light) !important;
    fill: var(--text-light) !important;
}

/* ================================================================
   SEARCH DRAWER — bara de cautare
   ================================================================ */
.search-drawer,
.offcanvas-top.search-drawer {
    background-color: var(--bg-panel) !important;
    border-bottom: 2px solid var(--border) !important;
}

/* Layout: body (cu form) + header (cu X) pe aceeasi linie */
.search-drawer .offcanvas-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

/* Ascundem offcanvas-header-ul subtire (slicer-ul bej) */
.search-drawer .offcanvas-header {
    order: 2 !important;
    flex-shrink: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 12px !important;
    background-color: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.search-drawer .offcanvas-title {
    display: none !important;
}

/* Body — ocupa spatiul ramas */
.search-drawer .offcanvas-body {
    order: 1 !important;
    flex: 1 !important;
    padding: 0 !important;
}

/* Div-ul .search are bg alb din platforma — il resetam */
.search-drawer .search {
    background-color: transparent !important;
}

/* Inputul de search — culoare usor mai deschisa decat fundalul */
.search-drawer .search__input,
.search-drawer input[type="search"] {
    background-color: var(--bg-main) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    height: auto !important;
    color: var(--text) !important;
}
.search-drawer .search__input:focus,
.search-drawer input[type="search"]:focus {
    background-color: var(--bg-main) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* X nativ webkit din input[type=search] — ascuns */
.search-drawer input[type="search"]::-webkit-search-cancel-button,
.search-drawer input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none !important;
    display: none !important;
}

/* Butonul de clear al platformei — ascuns */
.search-drawer .search__button-clear {
    display: none !important;
}

/* Butonul lupa (submit) — transparent, fara border */
.search-drawer .search__button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 16px !important;
    color: var(--text-sub) !important;
    transform: none !important;
}
.search-drawer .search__button:hover {
    color: var(--brass) !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.search-drawer .search__button svg,
.search-drawer .search__button .icon {
    color: var(--text-sub) !important;
    fill: var(--text-sub) !important;
}

/* ── X STEAMPUNK — buton inchidere search drawer ──
   Specificitate (0,3,1) ca sa bata button[type="button"].btn-close (0,2,1) */
.search-drawer button[type="button"].btn-close,
.search-drawer button.btn-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 40% 35%, #5a3c18, #2a1a06) !important;
    border: 2px solid var(--brass) !important;
    box-shadow:
        0 0 8px rgba(139, 69, 19, 0.5),
        inset 0 1px 0 rgba(200, 160, 60, 0.2) !important;
    opacity: 1 !important;
    transform: none !important;
    cursor: pointer !important;
    transition: box-shadow 0.25s, border-color 0.25s !important;
    flex-shrink: 0 !important;
    /* Inlocuim SVG-ul Bootstrap cu X-ul nostru via pseudo */
    color: transparent !important;
    font-size: 0 !important;
}
.search-drawer button[type="button"].btn-close::after,
.search-drawer button.btn-close::after {
    content: '✕' !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 0.9rem !important;
    color: var(--brass-light) !important;
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 0 6px rgba(196, 122, 58, 0.6) !important;
}
.search-drawer button[type="button"].btn-close:hover,
.search-drawer button.btn-close:hover {
    border-color: var(--copper-light) !important;
    box-shadow:
        0 0 14px rgba(184, 115, 51, 0.7),
        inset 0 1px 0 rgba(200, 160, 60, 0.3) !important;
    transform: none !important;
    background: radial-gradient(circle at 40% 35%, #7a5020, #3d2810) !important;
}

/* Autocomplete dropdown — alb → pergament */
.search__list,
[class*="search__autocomplete"],
[data-search-autocomplete-results],
.search__results,
.autocomplete__list {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25) !important;
    color: var(--text) !important;
}

.search__list-item,
.search__result,
.autocomplete__item {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
    border-bottom: 1px solid rgba(200,160,96,0.3) !important;
}

.search__list-item:hover,
.search__result:hover,
.autocomplete__item:hover {
    background-color: var(--bg-panel) !important;
    color: var(--brass) !important;
}

/* ================================================================
   BUTON PREFERINTE COOKIE-URI — platforma
   Selectori mirrored din cookie-policy.css pentru specificitate maxima
   ================================================================ */
.cookie-policy-overlay .btn-link,
.cookie-policy-overlay .cookie-policy-overlay__preferences,
.cookie-policy-overlay .cookie-policy-overlay__preferences--desktop,
.cookie-policy-overlay .cookie-policy-overlay__preferences--mobile {
    color: #ffffff !important;
    opacity: 0.9 !important;
    text-decoration: none !important;
}
.cookie-policy-overlay .btn-link:hover,
.cookie-policy-overlay .cookie-policy-overlay__preferences:hover,
.cookie-policy-overlay .cookie-policy-overlay__preferences--desktop:hover,
.cookie-policy-overlay .cookie-policy-overlay__preferences--mobile:hover {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: underline !important;
}

/* ================================================================
   COOKIE BANNER — #cookie-banner (cookie-consent.js)
   Regulile globale button[type="button"] cu !important suprascriu
   inline styles. Resetam explicit pentru acest banner.
   ================================================================ */
#cookie-banner button[type="button"],
#cookie-banner button {
    font-family: inherit !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: 0.2s !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 8px 20px !important;
    border-radius: 2px !important;
}

/* Buton Refuz */
#cookie-banner button:first-of-type {
    background: transparent !important;
    border: 2px solid rgba(181, 166, 66, 0.35) !important;
    color: #f5f5dc !important;
}
#cookie-banner button:first-of-type:hover {
    background: rgba(181, 166, 66, 0.08) !important;
    border-color: rgba(181, 166, 66, 0.65) !important;
    color: #f5f5dc !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Buton Accept */
#cookie-banner button:last-of-type {
    background: rgba(181, 166, 66, 0.18) !important;
    border: 2px solid #b5a642 !important;
    color: #b5a642 !important;
}
#cookie-banner button:last-of-type:hover {
    background: rgba(181, 166, 66, 0.32) !important;
    border-color: #d4a800 !important;
    color: #d4a800 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ================================================================
   FILTRE SIDEBAR — Steampunk Enhanced
   Titluri: cerneala #1A0F00 · Optiuni: piele #4E2C10
   Checkboxes: surub alama → nivet cupru aprins
   Separator: teava cupru dubla
   ================================================================ */

/* Titluri sectiuni filtre — cerneala inchisa */
.facets-sidebar .facet__title > span, .facet__title > span {
    background: var(--bg-main) !important;
    color: #1A0F00 !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 0 8px 0 0 !important;
}

.facets-sidebar .facet__title, .facet__title {
    border-left: 3px solid #8B4513 !important;
    color: #1A0F00 !important;
    padding-left: 6px !important;
}

/* Separator — linie dubla de cupru cu punct central */
.facets-sidebar .facet__title::before, .facet__title::before {
    background: linear-gradient(to right,
        transparent 0%,
        #b87333 15%,
        #b87333 85%,
        transparent 100%) !important;
    height: 2px !important;
    box-shadow: 0 3px 0 rgba(184,115,51,0.25) !important;
}

.facet__title .icon, .facet__title svg, .facet__title i {
    color: var(--brass) !important;
    fill: var(--brass) !important;
}

/* Optiuni filtre — text piele */
.facets-sidebar .facet__option, .facets-sidebar .facet__path {
    padding-left: 10px !important;
    color: #4E2C10 !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}
.facet__option label, .facet__option span {
    color: #4E2C10 !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

/* Tag-uri tip pill (ex: Material — Metal, Wood, Fabric...) */
.facet__options--tag {
    background: transparent !important;
}
.facet__option--tag,
.facets-sidebar .facet__option--tag {
    padding-left: 10px !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
}

.facet__option--tag a,
.facets-sidebar .facet__option--tag a {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-panel)) !important;
    color: #4E2C10 !important;
    border: 1.5px solid #c8902a !important;
    border-radius: 3px !important;
    padding: 3px 10px !important;
    font-family: 'Metamorphous', Georgia, serif !important;
    font-size: 0.82rem !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: inset 0 1px 0 rgba(255,220,120,0.25), 0 1px 3px rgba(0,0,0,0.18) !important;
}

.facet__option--tag a:hover,
.facets-sidebar .facet__option--tag a:hover {
    background: linear-gradient(135deg, #d4a850, #c8902a) !important;
    color: var(--text-light) !important;
    border-color: #e8b840 !important;
    box-shadow: 0 0 8px rgba(200,144,42,0.45), 0 1px 4px rgba(0,0,0,0.25) !important;
    transform: translateY(-1px) !important;
}

/* Opțiune tag activă/selectată — bec aprins steampunk */
.facet__option--tag a.active,
.facet__option--active .facet__option--tag a,
.facets-sidebar .facet__option--tag a.active,
.facets-sidebar .facet__option--active .facet__option--tag a {
    background: linear-gradient(135deg, #ff8c00, #c04800) !important;
    color: #fffdf0 !important;
    border-color: #ffe060 !important;
    font-weight: 700 !important;
    box-shadow:
        0 0  6px rgba(255, 220,   0, 0.90),
        0 0 14px rgba(255, 140,   0, 0.65),
        0 0 28px rgba(255,  80,   0, 0.35),
        0 1px 4px rgba(0, 0, 0, 0.30) !important;
    transform: none !important;
}

/* Hover — glow cupru incins */
.facets-sidebar .facet__option:hover,
.facet__option:hover {
    background: rgba(184, 115, 51, 0.10) !important;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.facets-sidebar .facet__option:hover label,
.facet__option:hover label {
    color: #8B4513 !important;
    text-shadow: 0 0 10px rgba(184, 115, 51, 0.55) !important;
}

/* ── BEC STEAMPUNK: stins (sticlă fumurie vizibilă) → aprins (incandescent) ── */
.facets-sidebar input[type="checkbox"],
.facet__option input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% 50% 38% 38% / 58% 58% 42% 42% !important;
    border: 2px solid #c8902a !important;
    /* Sticla fumurie — vizibila ca bec, usor inchisa */
    background: radial-gradient(
        circle at 35% 28%,
        #c8b478 0%,
        #9e7830 30%,
        #6a4a10 60%,
        #3e2404 85%,
        #1e0c00 100%
    ) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow:
        inset 0 2px 5px rgba(0, 0, 0, 0.45),
        inset 0 -2px 4px rgba(200, 160, 60, 0.20),
        0 0 0 1px rgba(200, 144, 42, 0.35),
        0 1px 3px rgba(0, 0, 0, 0.35) !important;
    transition: all 0.35s ease !important;
    vertical-align: middle !important;
}

/* Bifat — bec aprins, incandescent */
.facets-sidebar input[type="checkbox"]:checked,
.facet__option input[type="checkbox"]:checked {
    background: radial-gradient(
        circle at 36% 30%,
        #fffdf0 0%,
        #fff280 12%,
        #ffcc30 32%,
        #ff8c00 58%,
        #c04800 80%,
        #6a2000 100%
    ) !important;
    border-color: #ffe060 !important;
    box-shadow:
        inset 0 1px 6px rgba(255, 255, 220, 0.35),
        0 0  6px rgba(255, 220,   0, 1.00),
        0 0 14px rgba(255, 160,   0, 0.85),
        0 0 28px rgba(255, 100,   0, 0.55),
        0 0 50px rgba(255,  60,   0, 0.25),
        0 2px 5px rgba(0, 0, 0, 0.35) !important;
}

/* ================================================================
   SIDEBAR CATALOG — rama masina de scris
   ================================================================ */
.catalog__aside, .page__aside, .facets-sidebar, .catalog__sidebar {
    background-color: var(--bg-panel) !important;
    color: var(--text) !important;
    border-right: 3px double #c8902a !important;
    border-left: 2px solid #e8c870 !important;
    box-shadow:
        inset -4px 0 10px rgba(0,0,0,0.07),
        3px 0 8px rgba(0,0,0,0.12) !important;
}

/* ================================================================
   MAIN CONTENT
   ================================================================ */
main, .main, #main-content, .page-content,
[class*="page__content"], .page__body, .catalog__products {
    background-color: transparent !important;
    color: var(--text) !important;
}

/* ================================================================
   HEADING PAGINA — animatie handwriting
   ================================================================ */
@keyframes steamHandwrite {
    from {
        clip-path: inset(0 100% 0 0);
        opacity: 0.2;
    }
    to {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
    }
}

.page__heading, h1.page__heading,
.catalog__heading, h1.catalog__heading {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 2.6rem !important;
    background: linear-gradient(90deg,
        #8B4513 0%, #c47a3a 30%, #e8b840 55%, #c47a3a 75%, #8B4513 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: steamHandwrite 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

/* ================================================================
   HEADING SECTIUNI PRODUSE
   ================================================================ */
.products-compact > h2, .products-slider > h2,
.widget h2, .widget h3,
[class*="section"] > h2, [class*="section"] > h3 {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass) !important;
    border-bottom: 2px solid var(--border) !important;
    padding-bottom: 10px !important;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ================================================================
   TABS PRODUS
   ================================================================ */
.nav-tabs { border-bottom: 2px solid var(--border) !important; background-color: transparent !important; }

.nav-tabs-content, .tab-content, .tab-pane {
    background-color: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    color: var(--text) !important;
    padding: 1.5rem !important;
}

/* ================================================================
   TABEL DETALII PRODUS
   ================================================================ */
table, .table { color: var(--text) !important; background-color: var(--bg-panel) !important; }

th {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass) !important;
    border-color: var(--border) !important;
    background-color: var(--bg-card) !important;
}

td { border-color: var(--border) !important; color: var(--text) !important; background-color: var(--bg-panel) !important; }

.table-striped > tbody > tr:nth-of-type(odd) > *,
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
    --bs-table-striped-bg: var(--bg-card) !important;
    --bs-table-striped-color: var(--text) !important;
    --bs-table-accent-bg: var(--bg-card) !important;
}

tbody tr:nth-child(even) td, tbody tr:nth-child(even) {
    background-color: var(--bg-panel) !important;
    color: var(--text) !important;
}

tbody tr:hover td, tbody tr:hover { background-color: rgba(138, 98, 0, 0.12) !important; }

/* ================================================================
   ACCORDION
   Bootstrap classes + Platform BEM classes (accordion__item etc.)
   ================================================================ */
.accordion, .accordion-item,
.accordion__item, .accordion__item--flush,
.accordion__item--description {
    background-color: var(--bg-panel) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.accordion-button,
.accordion__header, .accordion__header button {
    background: var(--bg-card) !important;
    color: var(--text) !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 1px;
    border-color: var(--border) !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) { background-color: var(--brass) !important; color: var(--text-light) !important; }
.accordion-body,
.accordion__collapse,
.accordion__body { background-color: var(--bg-panel) !important; color: var(--text) !important; }

/* Justified text in description */
.accordion__collapse p,
.accordion-body p, .accordion__body p,
.accordion__collapse li,
.accordion-body li, .accordion__body li { text-align: justify !important; }

/* Exceptie: cutia dark Repere Tehnice (div cu inline style #111111) */
.accordion__collapse [style*="111111"] li,
.accordion__collapse [style*="111111"] p { text-align: left !important; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer, footer {
    background-color: #34544F !important;
    border-top: 3px solid var(--copper-light) !important;
    color: var(--text-light) !important;
}

.footer__widgets, .footer__widgets > section {
    background-color: #34544F !important;
    border-bottom: 1px solid var(--border-dark) !important;
    color: var(--text-light) !important;
}

.footer__blocks { background-color: #34544F !important; color: var(--text-light) !important; }
.footer a { color: var(--copper-light) !important; }
.footer a:hover { color: var(--brass-light) !important; }

.footer h5, .footer h6, .footer .h5, .footer .h6, .footer__heading {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass-light) !important;
    letter-spacing: 2px;
}

.footer p, .footer span, .footer li {
    color: #c4a574 !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

/* ================================================================
   INPUTURI / FORMULARE
   ================================================================ */
input, textarea, select, .form-control, .form-select, .search-inline__form input {
    background-color: #f0e4c4 !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
    border-radius: 2px !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus, .form-select:focus {
    background-color: #f8efd8 !important;
    color: var(--text) !important;
    border-color: var(--brass) !important;
    box-shadow: 0 0 0 3px rgba(138, 98, 0, 0.2) !important;
    outline: none !important;
}

input::placeholder, textarea::placeholder { color: #7a5a30 !important; opacity: 0.8 !important; }

/* ================================================================
   CARDURI GENERICE
   ================================================================ */
.card { background-color: var(--bg-card) !important; border-color: var(--border) !important; color: var(--text) !important; }
.card-body { background-color: var(--bg-card) !important; color: var(--text) !important; }
.card-header {
    background-color: var(--bg-panel) !important;
    border-bottom-color: var(--border) !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass) !important;
}
.card-footer { background-color: var(--bg-panel) !important; border-top-color: var(--border) !important; color: var(--text) !important; }

/* ================================================================
   DROPDOWN-URI
   ================================================================ */
.dropdown-menu, .autocomplete-results, .search-results__dropdown {
    background-color: #f0e4c4 !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.25) !important;
}

.dropdown-item, .dropdown-item a { color: var(--text) !important; font-family: 'Metamorphous', Georgia, serif !important; }
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(138, 98, 0, 0.12) !important; color: var(--brass) !important; }
.dropdown-divider { border-color: var(--border) !important; }

/* ================================================================
   PAGINARE
   ================================================================ */
.page-link {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--copper) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}
.page-link:hover { background-color: var(--bg-panel) !important; border-color: var(--brass) !important; color: var(--brass) !important; }
.page-item.active .page-link { background-color: var(--brass) !important; border-color: var(--copper) !important; color: var(--text-light) !important; }

/* ================================================================
   ALERTE
   ================================================================ */
.alert {
    background-color: #e8d8a8 !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}
.alert-success { border-left: 4px solid #4a7a4a !important; }
.alert-warning  { border-left: 4px solid var(--brass) !important; }
.alert-danger, .alert-error { border-left: 4px solid #8a3a3a !important; }

/* ================================================================
   DIVERSE
   ================================================================ */
hr { border-color: var(--border) !important; opacity: 0.6; }
.text-muted, .text-secondary { color: #5a3a10 !important; }
.bg-white, .bg-light, .bg-gray-100 { background-color: var(--bg-panel) !important; color: var(--text) !important; }
section, .container, .container-fluid { background-color: transparent; color: var(--text); }

/* ================================================================
   MODAL
   ================================================================ */
.modal-content { background-color: var(--bg-panel) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
.modal-header {
    border-bottom-color: var(--border) !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
}
.modal-title { color: var(--brass) !important; font-family: 'Cinzel Decorative', Georgia, serif !important; }
.modal-footer { border-top-color: var(--border) !important; background-color: var(--bg-card) !important; }
.modal-backdrop { background-color: rgba(52, 84, 79, 0.75) !important; }

@media (max-width: 767px) {
    .modal-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        margin: 0.5rem auto !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .modal-body {
        overflow-x: hidden !important;
        word-break: break-word;
    }
}

/* ================================================================
   COOKIE POLICY (platforma)
   ================================================================ */
.cookie-policy, [class*="cookie-policy"] {
    background-color: var(--bg-panel) !important;
    border-top: 2px solid var(--copper) !important;
    color: var(--text) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

/* ================================================================
   CART / WISHLIST / OFFCANVAS
   ================================================================ */
.cart-summary, .wishlist, .offcanvas {
    background-color: var(--bg-panel) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.offcanvas-header {
    border-bottom: 1px solid var(--border) !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    color: var(--brass) !important;
    background-color: var(--bg-card) !important;
}

/* ================================================================
   SORT / SELECT CATALOG
   ================================================================ */
.catalog-actions select, .catalog-actions .form-select {
    background-color: var(--bg-card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

.catalog-actions .btn, .catalog-actions button {
    background: linear-gradient(135deg, #2a1a06, #3d2810) !important;
    color: var(--text-light) !important;
    border-color: var(--border) !important;
}

/* ================================================================
   GALERIE PRODUS — thumbnails
   Nu atingem layout-ul principal (Splide slider imagini mari).
   Doar facem toate thumbnailurile vizibile.
   ================================================================ */

/* Track-ul principal: overflow:hidden explicit - slide-urile sa nu iasa */
.product-summary__main-images .splide__track {
    overflow: hidden !important;
}

/* Track thumbnailuri: overflow visible - toate se vad */
.product-summary__thumbnails--ttb .splide__track {
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
}

/* Lista thumbnailuri: wrap + transform blocat */
.product-summary__thumbnails--ttb .splide__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    transform: none !important;
    height: auto !important;
    gap: 6px !important;
    width: 100% !important;
}

/* Thumbnail: 90px patrat, border steampunk */
.product-summary__thumbnails--ttb .splide__slide {
    width: 90px !important;
    min-width: 90px !important;
    height: 90px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    transition: border-color 0.2s !important;
}

.product-summary__thumbnails--ttb .splide__slide:hover,
.product-summary__thumbnails--ttb .splide__slide.is-active {
    border-color: var(--brass) !important;
}

.product-summary__thumbnails--ttb .splide__slide img,
.product-summary__thumbnails--ttb .splide__slide figure {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    display: block !important;
}

.product-summary__thumbnails--ttb .splide__arrows,
.product-summary__thumbnails--ttb .splide__pagination { display: none !important; }

/* ================================================================
   PRETURI PAGINA PRODUS — contrast + umbra text
   ================================================================ */
.product-summary__info--price-gross {
    color: #2D1B02 !important;
    font-size: 1.65rem !important;
    font-weight: 900 !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    text-shadow: none !important;
}

.product-summary__info--old-price-gross {
    color: #8a7060 !important;
    opacity: 0.8 !important;
    font-size: 0.95rem !important;
    text-decoration: line-through !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

.product-summary__info--price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

/* ================================================================
   TEXT GRI → GALBEN AURIU
   ================================================================ */
.breadcrumb-item.active,
.breadcrumb-item.active > span,
.breadcrumb-item + .breadcrumb-item::before { color: #5a3a10 !important; opacity: 1 !important; }

.product-attributes__value, .product-attributes__name { color: #5a3a10 !important; }

.product-summary__info--sku,
.product-summary__info--sku span,
.product-summary__info--shipping { color: #5a3a10 !important; font-style: italic; }

/* Descriere catalog (text sub titlul categoriei) */
.catalog__description,
.catalog__heading + p,
.catalog-description,
[class*="catalog__desc"],
.page__description,
.category__description,
.category-summary__description-collapse,
.category-summary__description-collapse *,
.brand-summary__description p,
.brand-summary__description li {
    color: var(--text) !important;
    opacity: 1 !important;
}

.brand-summary__description p,
.brand-summary__description li { text-align: justify !important; }

/* ================================================================
   BLOG — Titlu steampunk + border ornamentat cu colțuri
   ================================================================ */

/* ── Titlu BLOG injectat deasupra articolelor ── */
.widget-articles .widget-header {
    display: block;
    text-align: center;
    padding-bottom: 16px;
}

.widget-articles .widget-header::before {
    content: '⚙ BLOG ⚙';
    display: block;
    font-family: 'Cinzel Decorative', Georgia, serif;
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--brass);
    letter-spacing: 0.35em;
    text-align: center;
    text-shadow: 1px 2px 4px rgba(0,0,0,0.18);
    padding: 28px 0 14px;
}

.widget-articles .widget-header::after {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent     0%,
        var(--border)  10%,
        var(--brass)   30%,
        var(--copper)  50%,
        var(--brass)   70%,
        var(--border)  90%,
        transparent   100%
    );
    margin: 0 60px;
}

/* ── Articol — container cu border dublu ornamentat ── */
/* Grid pe ul = randuri de inaltime egala; li flex = article umple celula */
.widget-articles ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.widget-articles li {
    display: flex !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .widget-articles ul {
        grid-template-columns: 1fr !important;
    }
}

.article {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    padding: 28px 24px 20px !important;
    background: var(--bg-card) !important;
    border: 2px solid var(--brass) !important;
    box-shadow:
        0 0 0 1px var(--border),
        inset 0 0 0 1px rgba(200, 160, 96, 0.35),
        0 6px 18px rgba(45, 27, 2, 0.15);
    transition: box-shadow 0.3s ease, transform 0.25s ease;
}

.article:hover {
    box-shadow:
        0 0 0 1px var(--brass),
        inset 0 0 0 1px rgba(200, 160, 96, 0.5),
        0 10px 26px rgba(45, 27, 2, 0.25);
    transform: translateY(-2px);
}

/* ── Colțuri ornamentate — stil ┌ ┐ └ ┘ ── */

/* Colț stânga-sus */
.article::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border-top: 3px solid var(--copper);
    border-left: 3px solid var(--copper);
    pointer-events: none;
    z-index: 2;
}

/* Colț dreapta-jos */
.article::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-bottom: 3px solid var(--copper);
    border-right: 3px solid var(--copper);
    pointer-events: none;
    z-index: 2;
}

/* article__data creste si impinge article__info la baza */
.article__data {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Colț dreapta-sus (via .article__data, nearest positioned ancestor = .article) */
.article__data::before {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 22px;
    height: 22px;
    border-top: 3px solid var(--copper);
    border-right: 3px solid var(--copper);
    pointer-events: none;
    z-index: 2;
}

/* Colț stânga-jos (via .article__data) */
.article__data::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 5px;
    width: 22px;
    height: 22px;
    border-bottom: 3px solid var(--copper);
    border-left: 3px solid var(--copper);
    pointer-events: none;
    z-index: 2;
}

/* ── Linie decorativă sub titlul articolului ── */
.article__name {
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.article__name::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--brass)  30%,
        var(--copper) 50%,
        var(--brass)  70%,
        transparent
    );
}

/* ── Titlu link articol ── */
.article__name-link {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--brass) !important;
    letter-spacing: 0.04em;
}

.article__name-link:hover {
    color: var(--copper) !important;
    text-decoration: none !important;
}

/* ── Excerpt ── */
.article__excerpt {
    flex: 1 !important;
    color: var(--text-sub) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 12px;
    text-align: justify !important;
}

/* ── Metadate: dată, categorie, autor ── */
.article__info {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    align-items: center !important;
    margin-top: auto !important;
    padding-top: 10px !important;
    font-size: 0.78rem !important;
    color: var(--text-sub) !important;
    font-family: 'Metamorphous', Georgia, serif !important;
}

.article__date { color: var(--text-sub) !important; }

.article__category-link {
    color: var(--copper) !important;
    font-weight: 600 !important;
    border: 1px solid var(--copper) !important;
    padding: 1px 7px !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    transition: background 0.2s, color 0.2s;
}

.article__category-link:hover {
    background: var(--copper) !important;
    color: var(--text-light) !important;
}

.article__author {
    color: var(--text-sub) !important;
    font-style: italic;
}

/* ================================================================
   MOBILE — strip-uri mereu vizibile + border responsive
   ================================================================ */
@media (max-width: 767px) {
    .product--grid {
        border: none !important;
    }

    .product--grid::before {
        top: -4px !important;
        left: -4px !important;
        right: -4px !important;
        bottom: -4px !important;
        border: 4px solid transparent !important;
        border-image-source: url('https://f.cdnmp.net/401754215/content/border.png?rv=1778711632') !important;
        border-image-slice: 40 !important;
        border-image-repeat: round !important;
    }

    .product--slider {
        border: none !important;
    }

    .product--slider::before {
        top: -4px !important;
        left: -4px !important;
        right: -4px !important;
        bottom: -4px !important;
        border: 4px solid transparent !important;
        border-image-source: url('https://f.cdnmp.net/401754215/content/border.png?rv=1778711632') !important;
        border-image-slice: 40 !important;
        border-image-repeat: round !important;
    }

    .product--grid .grid-image {
        position: static !important;
    }

    .product--grid .product__data {
        position: static !important;
        pointer-events: none !important;
        padding-bottom: 52px !important;
    }

    .product--grid .grid-image__actions {
        position: absolute !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: auto !important;
        width: 50% !important;
        height: 41px !important;
        z-index: 1000 !important;
        opacity: 1 !important;
    }

    .product--grid .grid-image__save-wishlist {
        z-index: 1001 !important;
        opacity: 1 !important;
    }

    .product--grid .product__actions {
        position: absolute !important;
        bottom: 0 !important;
        top: auto !important;
        right: 0 !important;
        left: auto !important;
        width: 50% !important;
        height: 41px !important;
        z-index: 999 !important;
        opacity: 1 !important;
    }

    .product--grid .product__add-to-cart {
        z-index: 1001 !important;
        opacity: 1 !important;
    }
}

/* Desktop override final — pune inimioara deasupra oricarui layer al platformei */
.catalog__products .product--grid .grid-image,
.products-grid__items .product--grid .grid-image,
.product--grid .grid-image {
    position: static !important;
}

.catalog__products .product--grid .grid-image__actions,
.products-grid__items .product--grid .grid-image__actions,
.product--grid .grid-image__actions {
    z-index: 1001 !important;
}

/* Card overflow: hidden taia strip-ul — forțăm visible pe card si compact */
.product--grid,
.product--compact {
    overflow: visible !important;
}

/* ================================================================
   LANSĂRI — titlu secțiune: mărit, centrat, steampunk
   ================================================================ */
#widget-w_b1n7sbaayr > div:nth-child(1) > div > h2 {
    text-align: center !important;
    margin-bottom: 24px !important;
    display: block !important;
    width: 100% !important;
}

#widget-w_b1n7sbaayr > div:nth-child(1) > div > h2 > span {
    color: rgb(139, 69, 19) !important;
    -webkit-text-fill-color: rgb(139, 69, 19) !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
    font-weight: 900 !important;
    letter-spacing: 6px !important;
    text-align: center !important;
    display: block !important;
    text-shadow: 1px 2px 6px rgba(0,0,0,0.18) !important;
}

/* ================================================================
   BANNER PAGINARE — puncte active vizibile (Splide .is-active)
   Vizate: bannere cu slider în afara sliderului principal hero.
   ================================================================ */

/* Punct inactiv — sticlă fumurie */
.widget-banner .splide__pagination__page,
.bslot-multi-banner .splide__pagination__page,
#widget-w_b1n7sbaayr .splide__pagination__page,
[id^="widget-"] .splide__pagination__page {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    background: rgba(200, 160, 96, 0.30) !important;
    border: 2px solid rgba(200, 160, 96, 0.60) !important;
    opacity: 1 !important;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    margin: 0 4px !important;
}

/* Punct activ — bec aprins steampunk */
.widget-banner .splide__pagination__page.is-active,
.bslot-multi-banner .splide__pagination__page.is-active,
#widget-w_b1n7sbaayr .splide__pagination__page.is-active,
[id^="widget-"] .splide__pagination__page.is-active {
    background: rgb(139, 69, 19) !important;
    border-color: #e8b840 !important;
    transform: scale(1.45) !important;
    box-shadow:
        0 0  6px rgba(232, 184,  64, 0.90),
        0 0 14px rgba(255, 140,   0, 0.65),
        0 0 26px rgba(255,  80,   0, 0.30) !important;
}

/* IMPORTANT. Daca nu mai apare mesajul care anunta ca nu mai platesc shipping de aici
este problema!!!
=============
=============
=============*/
.header-sticky {
  padding-top: 0 !important;
  transition: none !important;
}
body.header-sticky {
  padding-top: 0 !important;
}



/* ================================================================
   STEAMHEART — grid-image + slider-image (precomenzi + lansari)
   ================================================================ */
.grid-image__save-wishlist svg,
.grid-image__save-wishlist img,
.grid-image__save-wishlist i,
.slider-image__save-wishlist svg,
.slider-image__save-wishlist img,
.slider-image__save-wishlist i {
    display: none !important;
}

.grid-image__save-wishlist,
.slider-image__save-wishlist {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: transparent !important;
    font-size: 0 !important;
}

.grid-image__save-wishlist::before,
.slider-image__save-wishlist::before {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 28px !important;
    background-image: url('https://f.cdnmp.net/401754215/content/steamheart.png?rv=1777887586') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: opacity 0.2s !important;
    flex-shrink: 0 !important;
}

.grid-image__save-wishlist:hover::before,
.slider-image__save-wishlist:hover::before {
    opacity: 0.75 !important;
}

/* ================================================================
   FLOATING BUTTON — Oscar AI Agent
   Pozitionarea si stilizarea Oscar se face via JS (oscar-shadow-fix.js)
   direct pe .app-container si .floating-button din shadow DOM.
   Aici doar setam z-index-ul host-ului.
   ================================================================ */

#mp-chatbot-root {
    z-index: 9999 !important;
}

/* ── CHECKOUT: butonul e în Light DOM (div > div > section > button).
   Îl stilizăm direct: Oscar ca background, X vizibil deasupra. ── */
button.floating-button {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background-image: url('https://f.cdnmp.net/401754215/content/oscar.png?rv=1778704755') !important;
    background-color: #34544F !important;
    background-size: 90% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: 2px solid #8B4513 !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,160,96,0.25) !important;
    outline: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

button.floating-button:hover {
    border-color: #c8602a !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,0.45),
        0 0 18px rgba(183,65,14,0.4),
        0 0 0 2px rgba(200,160,96,0.4) !important;
    transform: scale(1.08) rotate(-8deg) !important;
}

/* Ascundem iconița nativă de chat, lăsăm X-ul vizibil */
button.floating-button .mp-icon--bubbleMessageText {
    display: none !important;
}

button.floating-button .mp-icon--altClose {
    color: #f5f5dc !important;
    position: relative !important;
    z-index: 1 !important;
}

button.floating-button .notification-badge {
    display: none !important;
}

/* Mobile — Oscar deasupra săgeților */
@media (max-width: 767px) {
    #mp-chatbot-root {
        bottom: 134px !important;
        right: 19px !important;
        width: 50px !important;
        height: 50px !important;
        max-width: calc(100vw - 24px) !important;
    }

    button.floating-button {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ===== DISPONIBILITATE VIZIBILĂ — 16.08.2026 ===== */                                                                                                                                                                                                                                                          
  .product-summary__info--availability .product-summary__info--message {      
    display: block;                                                                  
    font-family: 'Metamorphous', Georgia, serif;                                   
    font-size: 1.25rem;                                                           
    font-weight: 700;                                                              
    line-height: 1.35;                                                              
    padding: 10px 14px;                                                              
    margin: 10px 0;                                                               
    border: 1px solid #8b5a2b;                                                       
    border-radius: 4px;                                                           
    background: #f4e4bc;                                                         
    color: #4a2f18;                                       
    letter-spacing: .02em;                                                                                                                                                                                                                                                                                         
  }

/* ================================================================
   MINDGEAR — FUNDALURI DE PERGAMENT & DESIGN DE LUX   (06.09.2026)
   ================================================================

   Două secțiuni, două fundaluri:
     ȘAH          -> fundalsah.png    (tot ce ține de Șah)
     BOARD GAMES  -> boardgames.png   (Board Games + Accesorii + produsele lor)

   ⚙️ O SINGURĂ LINIE DE REGLAT: --mg-fundal-opacitate.
      0.35 = foarte discret · 0.65 = actual · 0.85 = foarte apăsat.
      Mobilul are propria valoare, mai jos, în @media (max-width: 767px).

   ----------------------------------------------------------------
   CUM ȘTIE CSS-UL PE CE PAGINĂ E
   `<body>` nu are NICIO clasă pe MerchantPro, deci trebuie două cârlige:

     1. paginile de SUBCATEGORIE și cele de PRODUS au breadcrumb, iar
        primul element trimite la categoria-rădăcină
        (`/catalog/sah-58` sau `/catalog/board-games-38`);
     2. paginile de CATEGORIE PRINCIPALĂ **nu au breadcrumb deloc** —
        acolo cârligul e `nav[data-facets-menu][data-category-id="58|38"]`.

   ⚠️ Meniul de sus conține linkurile către ambele categorii pe TOATE
   paginile — de-aia primul cârlig e ancorat în `.breadcrumb`. Fără
   ancoră, fundalul ar apărea peste tot.

   Dacă browserul nu suportă :has() (Chrome <105, Safari <15.4), nu se
   aplică nimic din blocul ăsta și site-ul rămâne exact cum e azi.
   ================================================================ */


/* --- 1. Care pagini, ce fundal ---------------------------------- */

body:has(.breadcrumb a[href="/catalog/sah-58"]),
body:has(nav[data-facets-menu][data-category-id="58"]) {
    --mg-fundal: url("https://f.cdnmp.net/401754215/content/fundaluri/fundalsah.png?rv=1788643838");
}

body:has(.breadcrumb a[href="/catalog/board-games-38"]),
body:has(nav[data-facets-menu][data-category-id="38"]) {
    --mg-fundal: url("https://f.cdnmp.net/401754215/content/fundaluri/boardgames.png?rv=1788644885");
}

/* Prima pagină (`.page-top` există DOAR acolo — verificat pe 8 pagini)
   și „Produse noi" (`data-page-type="new"` pe nav-ul de filtre). */
body:has(.page-top),
body:has(nav[data-facets-menu][data-page-type="new"]) {
    --mg-fundal: url("https://f.cdnmp.net/401754215/content/fundaluri/mainfundal.jpg?rv=1789330301");
}

body:has(.breadcrumb a[href="/catalog/sah-58"]),
body:has(nav[data-facets-menu][data-category-id="58"]),
body:has(.breadcrumb a[href="/catalog/board-games-38"]),
body:has(nav[data-facets-menu][data-category-id="38"]),
body:has(.page-top),
body:has(nav[data-facets-menu][data-page-type="new"]) {
    --mg-fundal-opacitate: 0.65;

    /* baza caldă de sub imagine — pagina nu rămâne niciodată albă */
    background-color: #F4E4BC !important;
}


/* --- 2. Stratul de fundal: FIX și semi-transparent --------------- */

body:has(.breadcrumb a[href="/catalog/sah-58"])::before,
body:has(nav[data-facets-menu][data-category-id="58"])::before,
body:has(.breadcrumb a[href="/catalog/board-games-38"])::before,
body:has(nav[data-facets-menu][data-category-id="38"])::before,
body:has(.page-top)::before,
body:has(nav[data-facets-menu][data-page-type="new"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--mg-fundal);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: var(--mg-fundal-opacitate);
}

/* Vignetă subțire: adâncime la margini, centrul rămâne curat. */
body:has(.breadcrumb a[href="/catalog/sah-58"])::after,
body:has(nav[data-facets-menu][data-category-id="58"])::after,
body:has(.breadcrumb a[href="/catalog/board-games-38"])::after,
body:has(nav[data-facets-menu][data-category-id="38"])::after,
body:has(.page-top)::after,
body:has(nav[data-facets-menu][data-page-type="new"])::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 38%,
        rgba(244, 228, 188, 0.00) 0%,
        rgba(244, 228, 188, 0.10) 55%,
        rgba(40, 32, 18, 0.16) 100%);
}


/* --- 3. Foaia de pergament pe care stă conținutul ---------------- */

body:has(.breadcrumb a[href="/catalog/sah-58"]) .page__content,
body:has(.breadcrumb a[href="/catalog/sah-58"]) .page__aside-main,
body:has(nav[data-facets-menu][data-category-id="58"]) .page__content,
body:has(nav[data-facets-menu][data-category-id="58"]) .page__aside-main,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .page__content,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .page__aside-main,
body:has(nav[data-facets-menu][data-category-id="38"]) .page__content,
body:has(nav[data-facets-menu][data-category-id="38"]) .page__aside-main,
body:has(nav[data-facets-menu][data-page-type="new"]) .page__content,
body:has(nav[data-facets-menu][data-page-type="new"]) .page__aside-main {
    background: linear-gradient(178deg,
        rgba(250, 240, 214, 0.955) 0%,
        rgba(240, 225, 189, 0.945) 100%) !important;
    border: 1px solid var(--border, #c8a060) !important;
    border-radius: 3px !important;
    box-shadow:
        0 0 0 1px rgba(139, 69, 19, 0.22),
        0 2px 0 rgba(255, 250, 235, 0.75) inset,
        0 18px 45px rgba(38, 26, 10, 0.28),
        0 3px 10px rgba(38, 26, 10, 0.14) !important;
    padding: 26px 28px !important;
    margin-bottom: 22px !important;
}

@media (max-width: 991px) {
    body:has(.breadcrumb a[href="/catalog/sah-58"]) .page__content,
    body:has(.breadcrumb a[href="/catalog/sah-58"]) .page__aside-main,
    body:has(nav[data-facets-menu][data-category-id="58"]) .page__content,
    body:has(nav[data-facets-menu][data-category-id="58"]) .page__aside-main,
    body:has(.breadcrumb a[href="/catalog/board-games-38"]) .page__content,
    body:has(.breadcrumb a[href="/catalog/board-games-38"]) .page__aside-main,
    body:has(nav[data-facets-menu][data-category-id="38"]) .page__content,
    body:has(nav[data-facets-menu][data-category-id="38"]) .page__aside-main {
        padding: 16px 14px !important;
        box-shadow:
            0 0 0 1px rgba(139, 69, 19, 0.20),
            0 10px 26px rgba(38, 26, 10, 0.24) !important;
    }
}


/* --- 4. Breadcrumb: gravat, dar CITEȚ ---------------------------- */
/* Tema stilizează `.breadcrumb-item` (cu cratimă), dar markup-ul folosește
   `.breadcrumb__item` (cu underscore) — de-aia culoarea rămăsese cea implicită
   și abia se vedea pe pergament. Punem culoarea explicit, pe clasa reală.   */

body:has(.breadcrumb a[href="/catalog/sah-58"]) .breadcrumb,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .breadcrumb {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    background: transparent !important;
    padding: 4px 0 10px !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .breadcrumb__item,
body:has(.breadcrumb a[href="/catalog/sah-58"]) .breadcrumb__item span,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .breadcrumb__item,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .breadcrumb__item span {
    color: #4a2a08 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 252, 240, 0.75);
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .breadcrumb__item a,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .breadcrumb__item a {
    color: #7a3d0c !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .breadcrumb__item a:hover,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .breadcrumb__item a:hover {
    color: var(--copper, #B7410E) !important;
    border-bottom-color: rgba(183, 65, 14, 0.5);
}

/* --- 5. Titlul paginii: aur adânc + filet de alamă ---------------- */
/* Titlul temei e auriu deschis cu background-clip:text, iar pe pergament
   se pierde aproape complet. text-shadow NU ajută (textul e transparent,
   umbra s-ar vedea prin el) — se folosește filter: drop-shadow, care
   lucrează pe pixelii deja desenați.                                  */

body:has(.breadcrumb a[href="/catalog/sah-58"]) h1,
body:has(nav[data-facets-menu][data-category-id="58"]) h1,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) h1,
body:has(nav[data-facets-menu][data-category-id="38"]) h1,
body:has(nav[data-facets-menu][data-page-type="new"]) h1 {
    background: linear-gradient(90deg,
        #4a2408 0%,
        #8B4513 22%,
        #c9922f 50%,
        #8B4513 78%,
        #4a2408 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter:
        drop-shadow(0 1px 0 rgba(255, 250, 235, 0.85))
        drop-shadow(0 2px 5px rgba(60, 40, 12, 0.28));
    letter-spacing: 0.03em !important;
    padding-bottom: 14px !important;
    position: relative;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) h1::after,
body:has(nav[data-facets-menu][data-category-id="58"]) h1::after,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) h1::after,
body:has(nav[data-facets-menu][data-category-id="38"]) h1::after,
body:has(nav[data-facets-menu][data-page-type="new"]) h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--copper, #B7410E) 0%,
        var(--brass-light, #c47a3a) 24%,
        rgba(200, 160, 96, 0.55) 55%,
        rgba(200, 160, 96, 0) 100%);
    border-radius: 2px;
}


/* --- 6. Cardurile de produs: plachete de pergament ---------------- */

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product--grid,
body:has(nav[data-facets-menu][data-category-id="58"]) .product--grid,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product--grid,
body:has(nav[data-facets-menu][data-category-id="38"]) .product--grid,
body:has(nav[data-facets-menu][data-page-type="new"]) .product--grid {
    background: linear-gradient(170deg, #fbf3e0 0%, #f0e0bb 100%) !important;
    border: 1px solid rgba(139, 69, 19, 0.30) !important;
    border-radius: 3px !important;
    box-shadow:
        0 1px 0 rgba(255, 252, 242, 0.9) inset,
        0 6px 16px rgba(45, 27, 2, 0.13) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease,
                border-color 0.28s ease !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product--grid:hover,
body:has(nav[data-facets-menu][data-category-id="58"]) .product--grid:hover,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product--grid:hover,
body:has(nav[data-facets-menu][data-category-id="38"]) .product--grid:hover,
body:has(nav[data-facets-menu][data-page-type="new"]) .product--grid:hover {
    transform: translateY(-5px) !important;
    border-color: var(--copper, #B7410E) !important;
    box-shadow:
        0 1px 0 rgba(255, 252, 242, 0.9) inset,
        0 16px 34px rgba(45, 27, 2, 0.26),
        0 0 0 1px rgba(183, 65, 14, 0.35) !important;
}

/* Doar spațierea literelor. NU umbla la line-height: cardul are înălțime
   fixă cu line-clamp, iar o valoare mai mare taie numele peste preț.   */
body:has(.breadcrumb a[href="/catalog/sah-58"]) .product__name,
body:has(nav[data-facets-menu][data-category-id="58"]) .product__name,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product__name,
body:has(nav[data-facets-menu][data-category-id="38"]) .product__name {
    letter-spacing: 0.015em !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product__info--price-gross,
body:has(nav[data-facets-menu][data-category-id="58"]) .product__info--price-gross,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product__info--price-gross,
body:has(nav[data-facets-menu][data-category-id="38"]) .product__info--price-gross {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 0 rgba(255, 250, 235, 0.7);
}


/* --- 7. Pagina de produs ----------------------------------------- */

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product-summary__main-image-wrapper,
body:has(.breadcrumb a[href="/catalog/sah-58"]) .product-summary__main-image,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product-summary__main-image-wrapper,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product-summary__main-image {
    border-radius: 3px !important;
    box-shadow: 0 8px 24px rgba(45, 27, 2, 0.20) !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product-content__block,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product-content__block {
    background: rgba(255, 250, 235, 0.55) !important;
    border-left: 3px solid var(--brass, #8B4513) !important;
    padding: 16px 20px !important;
    margin-bottom: 18px !important;
    border-radius: 0 3px 3px 0 !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product-content__block-heading,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product-content__block-heading {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    font-size: 0.95rem !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .product-attributes__item--odd,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product-attributes__item--odd {
    background: rgba(200, 160, 96, 0.14) !important;
}


/* --- 8. Filtrele din stânga --------------------------------------- */

body:has(.breadcrumb a[href="/catalog/sah-58"]) .facets-sidebar,
body:has(nav[data-facets-menu][data-category-id="58"]) .facets-sidebar,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .facets-sidebar,
body:has(nav[data-facets-menu][data-category-id="38"]) .facets-sidebar {
    background: transparent !important;
}

body:has(.breadcrumb a[href="/catalog/sah-58"]) .facet,
body:has(nav[data-facets-menu][data-category-id="58"]) .facet,
body:has(.breadcrumb a[href="/catalog/board-games-38"]) .facet,
body:has(nav[data-facets-menu][data-category-id="38"]) .facet {
    border-bottom: 1px solid rgba(139, 69, 19, 0.18) !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}


/* --- 9. Mobil ----------------------------------------------------- */

@media (max-width: 767px) {
    body:has(.breadcrumb a[href="/catalog/sah-58"])::before,
    body:has(nav[data-facets-menu][data-category-id="58"])::before,
    body:has(.breadcrumb a[href="/catalog/board-games-38"])::before,
    body:has(nav[data-facets-menu][data-category-id="38"])::before,
    body:has(.page-top)::before,
    body:has(nav[data-facets-menu][data-page-type="new"])::before {
        background-position: center center;
    }
    /* pe ecran mic textul stă peste mai multă imagine -> o stingem puțin */
    body:has(.breadcrumb a[href="/catalog/sah-58"]),
    body:has(nav[data-facets-menu][data-category-id="58"]),
    body:has(.breadcrumb a[href="/catalog/board-games-38"]),
    body:has(nav[data-facets-menu][data-category-id="38"]),
    body:has(.page-top),
    body:has(nav[data-facets-menu][data-page-type="new"]) {
        --mg-fundal-opacitate: 0.53;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.breadcrumb a[href="/catalog/sah-58"]) .product--grid,
    body:has(nav[data-facets-menu][data-category-id="58"]) .product--grid,
    body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product--grid,
    body:has(nav[data-facets-menu][data-category-id="38"]) .product--grid {
        transition: none !important;
    }
    body:has(.breadcrumb a[href="/catalog/sah-58"]) .product--grid:hover,
    body:has(nav[data-facets-menu][data-category-id="58"]) .product--grid:hover,
    body:has(.breadcrumb a[href="/catalog/board-games-38"]) .product--grid:hover,
    body:has(nav[data-facets-menu][data-category-id="38"]) .product--grid:hover {
        transform: none !important;
    }
}


/* ================================================================
   MENIUL DE SUS — banda decorativă + rame de alamă     (06.09.2026)
   ----------------------------------------------------------------
   Fundal: header.png (hartă veche, felinar, roți dințate). Imaginea
   are banda utilă doar în treimea de sus, restul e negru — de-aia
   `background-position: center top` + `cover`: se vede fix banda.
   Sub ea rămâne gradientul verde ca plasă de siguranță, ca headerul
   să arate corect și cât se încarcă imaginea, și dacă nu se încarcă.
   Culorile verzi sunt luate cu pipeta din y.png (#33504a margini,
   #05372f mijloc); înainte era o singură culoare plată.
   Se aplică pe TOT site-ul — meniul e același peste tot.
   ================================================================ */

.header {
    background-color: #143a34 !important;
    background-image:
        url("https://f.cdnmp.net/401754215/content/fundaluri/header_banda.jpg?rv=1789331402"),
        linear-gradient(90deg,
            #33504a 0%,
            #24433d 13%,
            #143a34 31%,
            #05372f 50%,
            #143a34 69%,
            #24433d 87%,
            #33504a 100%) !important;
    background-size: cover, auto !important;
    background-position: center top, center !important;
    background-repeat: no-repeat, no-repeat !important;
    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, 0.35),
        0 4px 22px rgba(0, 0, 0, 0.55) !important;
}

/* Rama de sus — filet auriu cu gradient, ca în y.png */
.header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(140, 100, 40, 0.55) 0%,
        rgba(214, 172, 96, 0.95) 18%,
        rgba(252, 231, 176, 1) 50%,
        rgba(214, 172, 96, 0.95) 82%,
        rgba(140, 100, 40, 0.55) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Rama de jos — mai groasă, cu aceeași sclipire spre mijloc */
.header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(120, 84, 32, 0.45) 0%,
        rgba(200, 160, 96, 0.90) 15%,
        rgba(245, 220, 160, 1) 50%,
        rgba(200, 160, 96, 0.90) 85%,
        rgba(120, 84, 32, 0.45) 100%);
    box-shadow: 0 1px 4px rgba(120, 80, 20, 0.45);
    pointer-events: none;
    z-index: 2;
}

/* ================================================================
   BUTOANELE DE CUMPĂRARE — după macheta y.png       (06.09.2026)
   ----------------------------------------------------------------
   În machetă NU sunt amândouă maro:
     „Cumpără acum"  = mahon  (#4b2309), ramă de alamă, text auriu
     „Adaugă în coș" = verde închis (#2e371f), ramă de alamă, text fildeș
     Butonul cu inimă (`a.product-summary__save-wishlist`) merge tot pe verde,
     ca în machetă.
   Culorile sunt mediana pixelilor din corpul fiecărui buton (fără text
   și fără ramă), nu alese din ochi.

   Rama în gradient se face cu două straturi de fundal (`padding-box` +
   `border-box`) peste un `border: 3px solid transparent`. Așa rama are
   degrade ȘI colțurile rămân rotunjite — `border-image` ar fi ignorat
   `border-radius`.
   ================================================================ */

button[data-buy-now-form] {
    background:
        linear-gradient(180deg, #5f2f10 0%, #4b2309 55%, #3a1904 100%) padding-box,
        linear-gradient(155deg, #f0d194 0%, #b98a3c 32%, #8a6224 58%, #e3c07a 100%) border-box !important;
    border: 3px solid transparent !important;
    color: #f6e2ab !important;
}

button[data-cart-add-form],
a.product__add-to-cart,
.product__add-to-cart.btn,
a.product-summary__save-wishlist {
    background:
        linear-gradient(180deg, #3d4a28 0%, #2e371f 60%, #222a16 100%) padding-box,
        linear-gradient(155deg, #f0d194 0%, #b98a3c 32%, #8a6224 58%, #e3c07a 100%) border-box !important;
    border: 3px solid transparent !important;
    color: #f2e8cd !important;
}

button[data-buy-now-form],
button[data-cart-add-form],
a.product__add-to-cart,
.product__add-to-cart.btn,
a.product-summary__save-wishlist {
    border-radius: 4px !important;
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
    /* linia subțire de alamă din interior, ca rama dublă din machetă */
    box-shadow:
        inset 0 0 0 1px rgba(240, 209, 148, 0.35),
        inset 0 1px 0 rgba(255, 232, 180, 0.18),
        0 3px 9px rgba(30, 18, 4, 0.40) !important;
    transition: filter 0.22s ease, box-shadow 0.22s ease,
                transform 0.22s ease !important;
}

button[data-buy-now-form]:hover,
button[data-cart-add-form]:hover,
a.product__add-to-cart:hover,
.product__add-to-cart.btn:hover,
a.product-summary__save-wishlist:hover {
    filter: brightness(1.18) saturate(1.05) !important;
    transform: translateY(-2px) !important;
    color: #fff3d4 !important;
    box-shadow:
        inset 0 0 0 1px rgba(250, 226, 175, 0.55),
        inset 0 1px 0 rgba(255, 240, 200, 0.28),
        0 9px 20px rgba(30, 18, 4, 0.45),
        0 0 16px rgba(214, 168, 84, 0.35) !important;
}

button[data-buy-now-form]:active,
button[data-cart-add-form]:active,
a.product__add-to-cart:active,
.product__add-to-cart.btn:active,
a.product-summary__save-wishlist:active {
    transform: translateY(0) !important;
    filter: brightness(0.95) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55) !important;
}


/* ================================================================
   CASETA DE SPECIFICAȚII + FONTUL DIN DESCRIERI       (06.09.2026)
   ----------------------------------------------------------------
   Caseta „Specificații Tehnice" din descrierile de produs e scrisă cu
   stil INLINE în HTML (`background-color:#111111; border:2px solid
   #D4880A`), deci n-are clasă pe care s-o prinzi. O țintim după chiar
   conținutul atributului `style`; `!important` dintr-o foaie de stil
   bate stilul inline.

   ⚠️ MerchantPro NORMALIZEAZĂ stilul inline când salvezi descrierea:
   produsele vechi au `background-color:#111111`, cele editate prin API
   au `background-color: #111111` (cu spațiu). De-aia selectorul caută
   doar `#111111`, nu șirul întreg. Culoarea nu apare nicăieri altundeva.

   Rama de alamă vine acum din imagine, deci `border` se scoate — altfel
   ies două rame una peste alta. `background-size: 100% 100%` (nu
   `cover`) ca rama desenată în imagine să rămână pe margini oricât de
   înaltă ar fi caseta.

   Fontul: Libre Baskerville, importat SUS în fișier lângă celelalte —
   un `@import` pus aici, la coadă, ar fi ignorat de browser (regula CSS
   cere importurile înaintea oricărei alte reguli). Se aplică doar
   textului: casetei și paragrafelor din descriere. Titlurile rămân
   Cinzel Decorative.

   ⚠️ Descrierea NU stă în `.product-content__block` (acela e blocul de
   review-uri) ci în `.accordion__body`.
   ================================================================ */

[style*="#111111"] {
    background-color: #17140f !important;
    background-image: url("https://f.cdnmp.net/401754215/content/fundaluri/gears.png?rv=1788645559") !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border: 0 !important;
    border-radius: 5px !important;
    padding: 34px 40px !important;
    box-shadow:
        0 10px 28px rgba(20, 12, 2, 0.35),
        inset 0 0 60px rgba(0, 0, 0, 0.35) !important;
}

/* --- Baskerville: caseta + paragrafele explicative, NU titlurile --- */

[style*="#111111"],
[style*="#111111"] li,
[style*="#111111"] p,
[style*="#111111"] strong,
[style*="#111111"] span,
.accordion__body p,
.accordion__body li,
.product-content__block p,
.product-content__block li {
    font-family: 'Libre Baskerville', Baskerville, 'Baskerville Old Face',
                 'Hoefler Text', Garamond, Georgia, serif !important;
}

.accordion__body p,
.accordion__body li,
.product-content__block p,
.product-content__block li {
    line-height: 1.75 !important;
    font-size: 0.95rem !important;
}

[style*="#111111"] li {
    line-height: 1.9 !important;
    font-size: 0.92rem !important;
}

.accordion__body h2,
.accordion__body h3,
.product-content__block h2,
.product-content__block h3 {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
}

/* Titlul casetei era #d4880a (stil inline) — pe fundalul cu roți dințate
   se stinge. Îl luminăm și îi punem umbră, ca să se desprindă de textură. */
[style*="#111111"] h3 {
    color: #f4cf7a !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7) !important;
    font-size: 1rem !important;
    letter-spacing: 0.14em !important;
}


/* ================================================================
   HEADER — „Produse noi" și „Blog" nu se puteau apăsa  (06.09.2026)
   ----------------------------------------------------------------
   CAUZA, măsurată în pagină, nu ghicită: tema de bază pune pe
   `.header__actions` un `flex: 0 0 45%` (610 px). Blocul ăla începe la
   x=902, dar lista de meniu se întinde până la x=1054, așa că ultimele
   două intrări rămâneau FIZIC dedesubtul lui. `elementFromPoint` pe
   centrul lor întorcea `div.header__actions`, nu linkul — de-aia nu era
   nici mână, nici hover, nici click. Identic la 1500 și la 1920 px,
   deci nu ține de lățimea ferestrei.

   Reparația: blocul de acțiuni ia doar cât îi trebuie (`flex: 0 0 auto`)
   — are în el doar câteva iconițe și selectorul de monedă. În plus,
   meniul primește un `z-index` propriu, ca plasă de siguranță dacă
   vreodată se mai suprapun.

   ⛔ NU ȘTERGE blocul ăsta. A fost tăiat din greșeală de două ori și de
   fiecare dată cele două intrări din meniu au devenit iar neapăsabile.
   ================================================================ */

.header__actions {
    flex: 0 0 auto !important;
}

.header__menu {
    position: relative !important;
    z-index: 3 !important;
}


/* ================================================================
   BUTONUL DE MENIU PE MOBIL — nu se vedea             (06.09.2026)
   ----------------------------------------------------------------
   Butonul există și funcționează (`a.header__menu-toggle`, 31x24 px,
   colț stânga-sus). Problema: cele trei bare sunt UN singur <span>
   plus `::before` și `::after`, toate cu `background-color:#212529`
   (aproape negru) — pe banda închisă din header.png dispar complet.
   Nu era layout: măsurat cu și fără blocul ăsta, aceeași poziție și
   aceeași dimensiune. Și nu era `color`, ci `background-color` —
   prima încercare a luminat doar bara din mijloc, fiindcă celelalte
   două sunt pseudo-elemente și trebuie țintite separat.

   ⛔ NU ȘTERGE blocul ăsta.
   ================================================================ */

.header__menu-toggle {
    color: #f6e6bd !important;
}

.header__menu-toggle-line,
.header__menu-toggle-line::before,
.header__menu-toggle-line::after {
    background-color: #f6e6bd !important;
    height: 3px !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
                0 0 8px rgba(0, 0, 0, 0.55) !important;
}

.header__menu-toggle:hover .header__menu-toggle-line,
.header__menu-toggle:hover .header__menu-toggle-line::before,
.header__menu-toggle:hover .header__menu-toggle-line::after {
    background-color: #ffd98a !important;
}


/* ================================================================
   SLIDER-UL DE PE PRIMA PAGINĂ — ridicat din fundal    (06.09.2026)
   ----------------------------------------------------------------
   Umbra NU se pune pe `.bslot-slider__cell`: acela e rândul întreg,
   1364x500 și transparent, iar umbra iese ca două linii subțiri pe
   margini. Blocul care se vede efectiv e `.bslot-slider__image-wrapper`
   (500x500) — acolo se pune.

   `section.widget-banner` are `overflow: hidden`, deci orice umbră care
   iese din secțiune e TĂIATĂ. Măsurat: secțiunea 1500x644, imaginea
   500x500 centrată — jos rămân ~33 px. De-aia umbra e dimensionată să
   încapă (offset 10 px + blur 22 px = 32 px); una mai mare s-ar reteza
   drept, urât.

   Relief: umbră mare dedesubt + linie de lumină sus + ramă de alamă.
   ================================================================ */

.widget-banner .bslot-slider__image-wrapper {
    border-radius: 6px !important;
    border: 1px solid rgba(139, 90, 30, 0.45) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 232, 0.55),
        0 2px 4px rgba(38, 24, 6, 0.22),
        0 10px 22px rgba(38, 24, 6, 0.48) !important;
    transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}

.widget-banner .bslot-slider__image-wrapper:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 232, 0.65),
        0 3px 6px rgba(38, 24, 6, 0.24),
        0 13px 26px rgba(38, 24, 6, 0.52) !important;
}

.widget-banner .bslot-slider__image {
    border-radius: 5px !important;
}

@media (prefers-reduced-motion: reduce) {
    .widget-banner .bslot-slider__image-wrapper,
    .widget-banner .bslot-slider__image-wrapper:hover {
        transition: none !important;
        transform: none !important;
    }
}


/* ================================================================
   BANNERUL MARE DE SUS — doar umbră pe margini          (06.09.2026)
   ----------------------------------------------------------------
   Prima variantă îl trăgea din margini, îi rotunjea colțurile și îi punea
   ramă de alamă — arăta ca o placă de sticlă lipită peste pagină. NU asta
   s-a cerut: doar o umbră pe marginea imaginilor, un fel de bordură umbroasă.

   Banner-ul rămâne exact cum era ca dimensiune și poziție. Umbra e
   INTERIOARĂ, pe marginile imaginii.

   ⚠️ Un `box-shadow: inset` pus direct pe wrapper sau pe `<img>` NU se
   vede: umbrele inset se desenează sub conținut, iar conținutul aici e
   chiar imaginea. De-aia se folosește un strat `::after` peste ea,
   cu `pointer-events: none` ca să nu blocheze click-ul pe slide.

   ⛔ NU ȘTERGE blocul ăsta.
   ================================================================ */

.page-top .bslot-slider--desktop .bslot-slider__image-wrapper {
    position: relative !important;
}

.page-top .bslot-slider--desktop .bslot-slider__image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 26px 4px rgba(24, 14, 3, 0.42),
        inset 0 0 80px 18px rgba(24, 14, 3, 0.32);
}


/* ================================================================
   temporary-hero-frame-test — RAMA STEAMPUNK + IconIțele de sub ea
   PROTOTIP TEMPORAR — 06.09.2026 (v2)
   ----------------------------------------------------------------
   CUM SE ELIMINĂ: se șterge tot ce e între START și END. Blocul e
   ADĂUGAT la finalul fișierului și doar suprascrie proprietăți —
   nu șterge și nu rescrie nicio regulă existentă.

   ── v2, ce s-a schimbat față de v1 ──────────────────────────────
   1. RAMA E STATICĂ. În v1 stătea pe `.bslot-slider__cell::before`,
      adică pe fiecare slide în parte, deci pleca la stânga odată cu
      caruselul. Acum stă pe `.splide::before` — element care NU se
      mișcă — iar pista (`.splide__track`) e tăiată cu `clip-path`
      fix pe fereastra ramei, ca slide-urile care intră și ies să se
      vadă DOAR înăuntru. Marginile tăieturii cad sub țevi (măsurat:
      banda opacă din stânga e la 8,6%..16,1% din casetă, tăietura e
      la 13%), deci nu se vede nicio muchie dreaptă.
   2. ANSAMBLUL E CU 25% MAI MARE: plafonul de lățime a trecut de la
      1920px la 2400px (`--thft-latime-max`). Ramă și banner cresc
      împreună, în aceeași proporție. Sub 2400px de ecran, lățimea e
      dată de ecran — la 1920 arată ca înainte, n-are de unde crește.
      Imaginea slide-ului (1920px nativ) rămâne AFIȘATĂ la ~1630px,
      deci tot micșorată, nu întinsă.
   3. Cele 4 iconițe de sub banner sunt înlocuite cu `four_icons.png`
      (2172x724). Imaginea are textele ARSE în ea, deci textele HTML
      vechi sunt ascunse (`visibility: hidden`) — rămân în DOM, se
      revine la ele ștergând blocul. Nu erau linkuri (verificat:
      `.bslot-multi-icon__cell` sunt `div`-uri), deci nu se pierde
      nicio navigare.

   ── Geometrie măsurată, nu ghicită ──────────────────────────────
   `chessborder.png` 1677x938, fereastra interioară pe alfa:
       x 178..1501 (10,61% / 10,44%), y 123..844 (13,11% / 10,02%).
   Ornamentele intră mai adânc decât țevile: felinar + flamură până
   la 16,4% stânga (sus), pergament + ceas până la 18,1% dreapta
   (jos). De-aia bannerul e tras 1,72% spre stânga și scalat 0,679 —
   logo-ul MINDGEAR, „EDUCAȚIE PRIN ȘAH", copiii și tabla rămân
   complet descoperite (verificat numeric pe alfa: ≈0% acoperire).
   ================================================================ */

/* ===== temporary-hero-frame-test — START ===== */

:root {
    --thft-rama:
        url("https://f.cdnmp.net/401754215/content/fundaluri/chessborder.webp?rv=1789330727");
    --thft-iconite:
        url("https://f.cdnmp.net/401754215/content/fundaluri/four_icons.png?rv=1788712617");

    /* lățimea ansamblului ramă+banner (o singură cifră de reglat) */
    --thft-latime-max: 2100px;

    /* cât se ridică ansamblul spre meniu, ca fracție din lățimea lui.
       Spațiul transparent de deasupra țevii de sus e 4,84% din lățime,
       deci 3,5% se apropie de meniu fără să bage țeava sub header —
       și rămâne valabil la orice lățime de ecran, nu doar la 2100. */
    --thft-ridicare: 0.035;

    /* rama: 86% din caseta sliderului, 7,24% sus/jos = proporția asset-ului */
    --thft-rama-inset-x: 7%;
    --thft-rama-inset-y: 7.24%;

    /* Bannerul UMPLE fereastra ramei, cu ~33px intrați sub țevi pe fiecare
       latură, ca să nu rămână nicio fâșie de perete între imagine și ramă.
       Fereastra e 67,86% din casetă pe lățime, centrată la 50,06% / 51,32%;
       scala 0,71 = fereastra + tucul. Ornamentele (felinar, flamură, ceas,
       pergament) cad peste marginile imaginii — Cosmin a zis explicit că e
       în regulă dacă acoperă și logo-ul. */
    --thft-banner-scala: 0.71;
    --thft-banner-dx: 0.06%;
    --thft-banner-dy: 1.32%;

    /* tăietura pistei: cade SUB țevi, nu pe muchia ferestrei */
    --thft-taietura: inset(13.9% 13% 13% 13%);
}

@media (min-width: 992px) {

    /* --- lățimea ansamblului --------------------------------- */
    .page-top .bslot-slider--desktop {
        max-width: var(--thft-latime-max);
        margin-left: auto;
        margin-right: auto;
        /* ridicat spre meniu; marginea negativă trage și tot ce urmează,
           deci nu apare gol între ramă și iconițe */
        margin-top: calc(min(var(--thft-latime-max), 100%) * var(--thft-ridicare) * -1);
    }

    /* wrapper-ul are `max-width: 1920px` INLINE de la MerchantPro;
       fără asta bannerul ar rămâne la 1920 în timp ce rama crește */
    .page-top .bslot-slider--desktop .bslot-slider__image-wrapper {
        max-width: none !important;
    }

    /* --- 1. rama, statică, deasupra carusel*ului ---------------- */
    .page-top .bslot-slider--desktop .splide {
        position: relative;
    }

    .page-top .bslot-slider--desktop .splide::before {
        content: "";
        position: absolute;
        top: var(--thft-rama-inset-y);
        right: var(--thft-rama-inset-x);
        bottom: var(--thft-rama-inset-y);
        left: var(--thft-rama-inset-x);
        z-index: 2;
        pointer-events: none;
        background-image: var(--thft-rama);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        /* umbră discretă pe forma țevilor (drop-shadow urmărește alfa),
           ca structura să stea PE perete. Fără border, fără card shadow. */
        filter:
            drop-shadow(0 7px 12px rgba(18, 10, 2, 0.48))
            drop-shadow(0 1px 2px rgba(18, 10, 2, 0.38));
    }

    /* --- 2. slide-urile se mișcă DOAR în fereastra ramei ------- */
    /* Fundalul = placa pe care sunt prinse afișele. Umple fâșia dintre
       marginea imaginii și ramă (bannerul nu poate fi împins mai la
       dreapta fără să intre logo-ul sub ceas) ȘI golul de la schimbarea
       slide-ului. Culoarea = mediana marginilor celor 3 imagini de
       slide (#42352c, #2d1a07, #201307), nu una inventată.
       Marginile plăcii cad sub țevi, deci nu se vede unde se termină. */
    .page-top .bslot-slider--desktop .splide__track {
        clip-path: var(--thft-taietura);
        background-image: linear-gradient(180deg, #38281a 0%, #241708 100%);
    }

    /* --- 3. bannerul intră în fereastra ramei ------------------ */
    .page-top .bslot-slider--desktop .bslot-slider__image-wrapper {
        transform-origin: 50% 50% !important;
        transform:
            translate(var(--thft-banner-dx), var(--thft-banner-dy))
            scale(var(--thft-banner-scala)) !important;
    }

    /* săgețile rămân peste ramă, cum erau */
    .page-top .bslot-slider--desktop .splide__arrow {
        z-index: 3;
    }
}

/* --- 4. cele 4 iconițe de sub banner ------------------------- */
/* Imaginea conține și textele, deci textele HTML se ascund.
   Se aliniază pe aceeași lățime cu ansamblul ramei. */
.page-top .bslot-multi-icon--horizontal {
    /* 1400px era lățimea naturală; -30% => 980px */
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    /* trase mai sus, spre banner; marginea negativă ridică și ce urmează */
    margin-top: calc(min(var(--thft-latime-max), 100%) * -0.06);
    aspect-ratio: 2172 / 724;
    height: auto !important;
    background-image: var(--thft-iconite);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.page-top .bslot-multi-icon--horizontal > .bslot-multi-icon__cell {
    visibility: hidden;
}


/* --- 5. liniile care despart secțiunile principale ----------- */
/* Erau 1px `var(--border)` pe `.widget-banner` — abia se vedeau pe
   pergament. Acum fiecare linie e o BARĂ DE ALAMĂ construită din
   straturi de fundal, nu un `border`:
       contur întunecat sus · lucire aproape albă · bară de alamă 4px ·
       șanț întunecat dedesubt · halou cald 22px
   Pe fond deschis, ce face metalul să „iasă" nu e miezul luminos, ci
   conturul întunecat de lângă el — de-aia sunt și hairline, și șanț.
   ⚠️ `.widget-banner` are `overflow: hidden`, deci `box-shadow` s-ar
   tăia; strălucirea e strat de fundal. Totul scopat pe prima pagină. */
body:has(.page-top) {
    --thft-filet: linear-gradient(90deg,
        rgba(120, 72, 24, 0)    0%,
        rgba(150, 96, 34, .95)  4%,
        #c8973f                16%,
        #f3d089                38%,
        #fffaea                50%,
        #f3d089                62%,
        #c8973f                84%,
        rgba(150, 96, 34, .95) 96%,
        rgba(120, 72, 24, 0)  100%);
    --thft-lucire: linear-gradient(90deg,
        rgba(255, 252, 235, 0)   0%,
        rgba(255, 252, 235, .55) 18%,
        rgba(255, 255, 250, .95) 50%,
        rgba(255, 252, 235, .55) 82%,
        rgba(255, 252, 235, 0)  100%);
    --thft-contur: linear-gradient(90deg,
        rgba(48, 26, 6, 0)   0%,
        rgba(48, 26, 6, .55) 10%,
        rgba(48, 26, 6, .72) 50%,
        rgba(48, 26, 6, .55) 90%,
        rgba(48, 26, 6, 0)  100%);
    --thft-sant: linear-gradient(90deg,
        rgba(58, 32, 8, 0)   0%,
        rgba(58, 32, 8, .40) 10%,
        rgba(58, 32, 8, .58) 50%,
        rgba(58, 32, 8, .40) 90%,
        rgba(58, 32, 8, 0)  100%);
    --thft-halou-jos: linear-gradient(180deg,
        rgba(232, 176, 78, .55) 0%,
        rgba(232, 176, 78, .18) 45%,
        rgba(232, 176, 78, 0)  100%);
    --thft-halou-sus: linear-gradient(0deg,
        rgba(232, 176, 78, .55) 0%,
        rgba(232, 176, 78, .18) 45%,
        rgba(232, 176, 78, 0)  100%);
}

/* bara de sus — se pune pe orice secțiune care începe o zonă nouă.
   ⚠️ La footer bara NU merge pe `.footer`: primul copil,
   `.footer__widgets`, are `background-color: #34544F !important` și
   acoperă fundalul părintelui. De-aia bara stă pe copil. */
body:has(.page-top) .widget-articles {
    background-image:
        var(--thft-lucire),
        var(--thft-contur),
        var(--thft-sant),
        var(--thft-filet),
        var(--thft-halou-jos);
    background-size:
        100% 1px, 100% 1px, 100% 2px, 100% 4px, 100% 22px;
    background-position:
        left top 1px, left top, left top 5px, left top 1px, left top;
    background-repeat: no-repeat;
}

/* La footer bara NU merge ca fundal: copiii (`.footer__widgets` și
   secțiunile din el) au `background-color: #34544F !important` și o
   acoperă pe bucăți — testat, ieșea linie doar la capete. Deci strat
   propriu, deasupra copiilor. `.footer::before` era liber. */
body:has(.page-top) .footer {
    border-top-color: transparent !important;
    position: relative;
}

body:has(.page-top) .footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 22px;
    z-index: 2;
    pointer-events: none;
    background-image:
        var(--thft-lucire),
        var(--thft-contur),
        var(--thft-sant),
        var(--thft-filet),
        var(--thft-halou-jos);
    background-size:
        100% 1px, 100% 1px, 100% 2px, 100% 4px, 100% 22px;
    background-position:
        left top 1px, left top, left top 5px, left top 1px, left top;
    background-repeat: no-repeat;
}

/* RECOMANDĂRI — bară sus ȘI jos (delimitează panoul) */
body:has(.page-top) .widget-banner {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    background-image:
        var(--thft-lucire), var(--thft-contur), var(--thft-sant),
        var(--thft-filet), var(--thft-halou-jos),
        var(--thft-lucire), var(--thft-contur), var(--thft-sant),
        var(--thft-filet), var(--thft-halou-sus);
    background-size:
        100% 1px, 100% 1px, 100% 2px, 100% 4px, 100% 22px,
        100% 1px, 100% 1px, 100% 2px, 100% 4px, 100% 22px;
    background-position:
        left top 1px, left top, left top 5px, left top 1px, left top,
        left bottom 4px, left bottom, left bottom 5px, left bottom 1px, left bottom;
    background-repeat: no-repeat;
}

/* Linia de sub meniu: `.header::after` există deja în temă (filet 3px).
   Nu-l dublez — îl îngroș și îi pun strălucire. Aici SE POATE folosi
   `box-shadow`, fiindcă e element propriu, nu fundal tăiat de overflow. */
body:has(.page-top) .header::after {
    height: 4px;
    background: var(--thft-filet);
    box-shadow:
        0 0 14px rgba(232, 176, 78, .85),
        0 2px 6px rgba(48, 26, 6, .45);
}

/* --- 6. titlul „Produse noi" ---------------------------------- */
/* Era 25,6px #8B4513 pe pergament — cel mai șters titlu din pagină
   (RECOMANDĂRI e 25,6px dar centrat cu umbră, BLOG are ornament).
   Nu-l recentrez și nu-i schimb fontul: doar contrast și corp. */
body:has(.page-top) .widget-products-grid__heading {
    font-size: clamp(1.9rem, 2.4vw, 2.5rem) !important;
    color: #4a2408 !important;
    -webkit-text-fill-color: #4a2408 !important;
    letter-spacing: 0.16em;
    /* Titlul cade peste o zonă ÎNCHISĂ din fundalul de atelier (harta
       rulată), deci maro pe maro. Halou cald în jurul literelor: ține
       și pe pergamentul deschis, și pe porțiunea închisă. */
    text-shadow:
        0 0 2px rgba(255, 248, 225, 0.95),
        0 0 7px rgba(255, 243, 208, 0.90),
        0 0 16px rgba(255, 238, 195, 0.70),
        0 2px 6px rgba(40, 22, 4, 0.35);
}

/* ===== temporary-hero-frame-test — END ===== */


/* ================================================================
   EAN ASCUNS PE PAGINA DE PRODUS                     (06.09.2026)
   ----------------------------------------------------------------
   REGULĂ FERMĂ (Cosmin): codul EAN nu se arată clientului — îl caută
   și găsește produsul mai ieftin în altă parte.
   Din DESCRIERI a fost scos prin API (95 de produse). Aici se ascund
   cele două locuri unde îl afișează TEMA:
     · caseta de sub preț  → `.product-summary__info--ean`
     · tabelul de atribute → rândul al cărui label e „EAN"
   ⚠️ `gtin13` din JSON-LD RĂMÂNE — Google Merchant Center are nevoie
   de el, iar datele structurate nu se văd pe pagină.
   ⛔ NU ȘTERGE blocul ăsta.
   ================================================================ */

.product-summary__info--ean {
    display: none !important;
}

/* Rândul „EAN" din tabelul Detalii. CSS n-are :contains(), deci nu pot ținti
   după text. Ancora sigură, verificată pe produse cu și fără EAN:
   caseta `.product-summary__info--ean` EXISTĂ doar când produsul are EAN, iar
   atunci rândul EAN e ÎNTOTDEAUNA primul din tabel (fără EAN, primul e
   „Categorii" — verificat pe 2221 și 2233, care n-au cod). Deci condiționez
   ascunderea primului rând de prezența casetei. */
body:has(.product-summary__info--ean) .product-attributes__item:first-child {
    display: none !important;
}


/* ================================================================
   VIDEO HERO PE PAGINA DE PRODUS                     (06.09.2026)
   ----------------------------------------------------------------
   Videoclipul stă în DESCRIERE (singurul câmp editabil prin API), deci
   în pagină ajunge jos de tot, în acordeonul „Descriere". Aici e ridicat
   vizual deasupra întregului produs.

   Cum: `.page__content` devine `position: relative` și primește un
   `padding-top` cât înălțimea clipului; blocul `.mg-video-hero` se scoate
   din flux și se ancorează sus. Merge fiindcă TOT lanțul de ascendenți
   dintre video și `.page__content` e `position: static` (verificat în
   browser, 14 niveluri) — deci blocul absolut se raportează direct la
   `.page__content`. `.accordion__body` are `overflow: auto`, dar nu-l
   taie: blocul de care aparține e în afara acelui scroller.

   Autoplay-ul NU se poate face din CSS — atributele `autoplay muted loop
   playsinline` sunt puse pe `<video>` în descriere, prin API. Browserele
   pornesc singure doar clipurile FĂRĂ sunet, de-aia `muted`.

   Se aplică doar pe paginile care chiar au clip (`body:has(.mg-video-hero)`).
   ⛔ NU ȘTERGE blocul ăsta.
   ================================================================ */

/* specificitate ridicata intentionat (clasa repetata): tema de baza pune
   padding pe `.page__content` cu !important si un selector mai specific,
   iar `position` prindea dar `padding-top` nu — masurat in browser (26px). */
body:has(.mg-video-hero) .page__content.page__content.page__content {
    position: relative !important;
    /* rama 667px + separator 96px + aer */
    padding-top: 785px !important;
}

body:has(.mg-video-hero) .mg-video-hero {
    position: absolute;
    top: 0;
    /* Clipul sta IN cadrul coloanei de produs, nu iese in lateral. */
    left: 0;
    right: 0;
    /* inaltime fixa: proportia ramei (1362/2,4 = 567px) plus 100px ceruti */
    height: 667px;
    margin: 0;
    /* Fara umplutura: clipul acopera singur toata fereastra, ca bannerul de
       pe prima pagina. O banda inchisa sub clip se vedea ca o dunga neagra. */
    background: none;
    border: 0;
    box-shadow: none;
}

/* Rama, ca strat PESTE clip — asset-ul are canal alfa si fereastra goala la
   mijloc, deci nu mai e nevoie nici de `border-image`, nici de fundal.
   (`gears.png` nu avea alfa: interiorul negru opac se vedea in jurul
   clipului. Asta e inlocuitorul lui.) */
body:has(.mg-video-hero) .mg-video-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Peste clip: altfel clipul ar acoperi felinarele, care atarna spre
       interior pana la 9,58%. */
    z-index: 2;
    pointer-events: none;
    background-image: url("https://f.cdnmp.net/401754215/content/fundaluri/bannervideoproduct.png?rv=1788720893");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    filter: drop-shadow(0 6px 12px rgba(18, 10, 2, 0.45));
}

/* Clipul intra in fereastra ramei, cu ~1% sub tevi pe fiecare latura ca sa nu
   ramana fisii. Fereastra, masurata pe alfa: x 7,31%..92,69%, y 18,54%..81,71%. */
body:has(.mg-video-hero) .mg-video-hero video {
    position: absolute;
    /* Clipul intra ADANC sub tevi: fereastra ramei e x 7,31%..92,69% si
       y 18,54%..81,71%, iar clipul e pus la 4% / 13%. Asa nu ramane nicio
       fasie de fundal intre imagine si rama, iar rama insasi pare mai
       subtire, fiindca marginea ei interioara e acoperita.
       Dimensiuni EXPLICITE, nu `inset` + `auto`: `<video>` e element inlocuit
       si la `auto` isi pastreaza proportia proprie (iesea 1362x766). */
    /* Clipul sta PESTE rama si o depaseste cu ~1,5% pe fiecare latura, ca sa
       acopere muchia interioara. Fereastra ramei, masurata pe alfa, e
       x 7,31%..92,69% si y 18,54%..81,71%; clipul e pus mai larg decat ea.
       Asa NU mai poate ramane gol nicaieri, iar bara de butoane e complet
       vizibila, fiindca nimic nu mai sta deasupra clipului. */
    z-index: 1;
    /* 🔴 MASURATOAREA CORECTA. Prima data am masurat fereastra pe RANDUL DIN
       MIJLOC, unde felinarele intra spre interior — si mi-a dat 7,31% lateral.
       Teava propriu-zisa intra insa mult mai putin. Minimul pe TOATE randurile
       si coloanele: stanga/dreapta 4,94%, sus 14,34%, jos 14,59%.
       Clipul trebuie sa treaca de minimul asta, altfel ramane gol exact acolo
       unde rama e cea mai subtire. Pus la 4,2% / 13,4%, cu marginea de jos la
       86% (teava de jos incepe la 85,41%), ca bara de butoane sa ramana
       deasupra ei. */
    top: 13.4%;
    left: 4.2%;
    width: 91.6%;
    /* Marginea de jos la 86%, adica sub teava: inset-ul ei minim e 14,59% si
       tine asa pe 83%% din latime (masurat pe alfa, din 20 in 20 de coloane),
       deci clipul iese de sub ea peste tot, fara dunga. Se ingroasa pana la
       21,38%% doar la colturi, unde acopera putin din butonul de play. */
    height: 72.6%;
    display: block;
    object-fit: cover;
}

/* Separatorul dintre clip si restul paginii: calul steampunk pe bara de
   alama, discret. `top: 100%` = imediat sub rama. */
body:has(.mg-video-hero) .mg-video-hero::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 96px;
    pointer-events: none;
    background-image: url("https://f.cdnmp.net/401754215/content/fundaluri/calseparator.png?rv=1788718984");
    background-repeat: no-repeat;
    background-position: center center;
    /* asset-ul e 3:1, deci 288px latime = 96px inaltime, exact cutia */
    background-size: 288px auto;
}

@media (max-width: 991px) {
    body:has(.mg-video-hero) .page__content.page__content.page__content { padding-top: 384px !important; }
    body:has(.mg-video-hero) .mg-video-hero { height: 300px; }
    body:has(.mg-video-hero) .mg-video-hero::after { height: 64px; background-size: 192px auto; }
    body:has(.mg-video-hero) .mg-video-hero::after { height: 64px; background-size: 192px auto; }
}



/* ================================================================
   PREȚUL DIN CARDUL DE PRODUS, PE MOBIL                (06.09.2026)
   ----------------------------------------------------------------
   Pe telefon catalogul are 2 produse pe rând, deci cardul ajunge la
   ~140px. Prețul e `Cinzel Decorative 900` la `1.18rem` (18,88px) —
   „3.899,00 RON" ocupă 137px și IESE 11px în afara cardului, peste
   ramă. Măsurat în browser la 412px lățime.

   Corecția scalează corpul cu lățimea ecranului și nu depășește
   niciodată valoarea de desktop:
     412px -> 14,0px · 360px -> 12,2px · peste 767px -> regula veche.
   `letter-spacing: 0` recuperează încă vreo 4px.
   ⛔ NU ȘTERGE blocul ăsta.
   ================================================================ */

@media (max-width: 767px) {
    .product .product__info--price-net,
    .product .product__info--price-gross,
    .product .product__info--old-price-net,
    .product .product__info--old-price-gross,
    .product [class*="price-net"],
    .product [class*="price-gross"] {
        font-size: clamp(0.76rem, 3.4vw, 1.18rem) !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
        max-width: 100%;
    }

    /* ⚠️ NU umbla la `.product__name`: cardul are înălțime fixă cu line-clamp,
       iar la alt corp de literă numele trece pe un rând în plus și intră
       peste preț. Am pățit-o exact aici. */
}


/* ================================================================
   START RAMĂ ANIMATĂ LA DESCRIERE — 09.09.2026
   Asset: bordergif.gif (1536x1024, 32 cadre, buclă 3,2 s).

   De ce `border-image` și NU `background-size:100% 100%`:
   cutia reală de descriere e ~668 x 1980 px (raport 0,34), iar
   asset-ul are 1,50. Întins ca fundal, roțile din colț se lungesc
   în dâre verticale — verificat pe produsul 2253. `border-image`
   taie colțul o singură dată și repetă doar țevile (`round`),
   deci rămâne nedeformată la orice înălțime de descriere.
   Felia 20%/15% = exact cât țin ornamentele de colț.

   ANIMAȚIA SE PĂSTREAZĂ pe border-image — verificat cu două
   capturi la 1,7 s distanță, în Chromium.

   Grosimea e SINGURA cifră de reglat: 30/34 px pe desktop.
   La 22px ornamentele devin puncte; la 40px se îngroașă.

   CA SĂ SCOȚI TOT: șterge blocul dintre START și END.
   ================================================================ */
.accordion__item--description .accordion__body {
    border-style: solid !important;
    border-width: 30px 34px !important;
    border-image: url("https://f.cdnmp.net/401754215/content/fundaluri/bordergif.gif?rv=1788905806") 20% 15% round !important;
    padding: 0 !important;
}

@media (max-width: 767px) {
    .accordion__item--description .accordion__body {
        border-width: 15px 17px !important;
    }
}
/* =============== END RAMĂ ANIMATĂ LA DESCRIERE =============== */

/* ================================================================
   START DESCRIERE LIZIBILĂ PE TELEFON — prototip 13.09.2026
   ----------------------------------------------------------------
   Măsurat la 390px (iPhone 13), pe produsele 1991, 2253, 451:
   textul descrierii avea 210px din 390 = 27-29 caractere pe rând,
   justificat, deci cu goluri mari între cuvinte. Marginile adunate:
     pagină 18 + foaie 15 + ramă animată 15-17 + panou inline 40.
   Plus rama animată trăgea bordergif.gif = 3,17 MB, adică 63% din
   greutatea paginii de produs.

   Doar sub 767px. Desktopul rămâne neatins.
   CA SĂ SCOȚI TOT: șterge blocul dintre START și END.
   ================================================================ */
@media (max-width: 767px) {

    /* 1. Fără ramă animată pe telefon. Cu border-image: none browserul
          nu mai descarcă deloc GIF-ul de 3,17 MB. */
    .accordion__item--description .accordion__body {
        border-width: 0 !important;
        border-image: none !important;
    }

    /* 2. Panoul de pergament e scris inline în fiecare descriere, cu
          padding: 40px. Pe telefon îl strângem. */
    .accordion__item--description .accordion__body > div[style] {
        padding: 20px 16px !important;
        border-top: 3px solid #b8863b !important;
        border-bottom: 3px solid #b8863b !important;
    }

    /* 3. Text justificat (cerut de Cosmin), dar cu despărțire în silabe,
          ca golurile dintre cuvinte să rămână mici pe coloana de telefon.
          Corp de 16px, rânduri aerisite. */
    .accordion__body p,
    .accordion__body li {
        text-align: justify !important;
        text-justify: inter-word;
        font-size: 16px !important;
        line-height: 1.65 !important;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    /* 4. Titlurile din descriere: Cinzel Decorative la 22px se rupea pe
          4 rânduri. */
    .accordion__body h1,
    .accordion__body h2 {
        font-size: 19px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.01em !important;
        word-break: normal !important;
    }
    .accordion__body h3 {
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    /* 5. Caseta de specificații: pe toată lățimea panoului, cu mai puțin
          padding, ca eticheta și valoarea să încapă pe un rând. */
    .accordion__body [style*="#111111"] {
        margin: 20px 0 !important;
        padding: 18px 16px !important;
    }
    .accordion__body [style*="#111111"] li {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 6px !important;
    }

    /* 6. Marginea paginii: 18px + 15px de foaie = 33px pe fiecare parte.
          Pe telefon ajung 10 + 8. */
    .page.page--product-details {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .page--product-details .page__content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* 7. Bannerul de cookies acoperea 341px din 664 (51% din ecran) la
          prima vizită, adică la fiecare vizitator din reclame. Textul era
          în Metamorphous, unde „u” arată ca „v”. */
    #cookie-policy-overlay .offcanvas-body {
        padding: 12px 14px !important;
    }
    #cookie-policy-overlay .cookie-policy-overlay__content {
        font-family: Georgia, "Times New Roman", serif !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
    }
    #cookie-policy-overlay .cookie-policy-overlay__actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    #cookie-policy-overlay .cookie-policy-overlay__actions .btn-primary {
        flex: 1 1 0 !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        font-size: 12.5px !important;
        line-height: 1.2 !important;
    }
    #cookie-policy-overlay .cookie-policy-overlay__preferences--mobile {
        flex-basis: 100% !important;
        padding: 4px !important;
        font-size: 12.5px !important;
        min-height: 32px !important;
    }

    /* 8. Butonul de accesibilitate stătea peste „Acceptă toate”. Cât timp
          bannerul e deschis, urcă deasupra lui. */
    body:has(#cookie-policy-overlay.show) .accessibility-button {
        bottom: 190px !important;
    }
}
/* =============== END DESCRIERE LIZIBILĂ PE TELEFON =============== */

/* ================================================================
   START ICONIȚE PE TELEFON — 13.09.2026
   ----------------------------------------------------------------
   Pe 390px, cele trei butoane fixe din dreapta jos (Oscar, „înapoi
   sus”, accesibilitate) stăteau la 20px de margine, 48-56px, și
   acopereau fiecare ultimii 27px din rândul de text.
   - „înapoi sus” dispare pe telefon (se derulează cu degetul);
   - accesibilitatea se lipește de margine, 44px (minimul pentru deget).
   Oscar e în Shadow DOM, deci NU se poate muta de aici: regula lui e
   în oscar.js pe VPS (@media max-width 767px, .fab).
   Doar sub 767px. CA SĂ SCOȚI TOT: șterge blocul dintre START și END.
   ================================================================ */
@media (max-width: 767px) {
    #scroll-to-top-arrow,
    .scroll-to-top-arrow {
        display: none !important;
    }
    a.accessibility-button {
        right: 4px !important;
        bottom: 12px !important;
        width: 44px !important;
        height: 44px !important;
    }
}
/* =============== END ICONIȚE PE TELEFON =============== */


/* ================================================================
   START FUNDAL LIFESTYLE (toata ramura 80: Pick-upuri, Viniluri, Audio,
   Accesorii vinil, Ceasuri)   (14.09.2026, extins 02.10.2026 cu vinyl.png)
   ----------------------------------------------------------------
   Același tratament ca Șah / Board Games (blocul FUNDALURI DE
   PERGAMENT de mai sus), cu imaginea vinyl.png (Cosmin 02.10.2026: „pentru tot ce tine de lifestyle”).
   Cârlige (verificate în HTML-ul live):
     - pagina categoriei: nav[data-facets-menu][data-category-id="80"]
     - subcategoriile + TOATE paginile de produs: breadcrumb cu /catalog/lifestyle-80
   Opacitatea se reglează tot din --mg-fundal-opacitate.
   CA SĂ SCOȚI TOT: șterge blocul dintre START și END.
   ================================================================ */

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]),
body:has(nav[data-facets-menu][data-category-id="80"]) {
    --mg-fundal: url("https://f.cdnmp.net/401754215/content/fundaluri/vinyl.png?rv=1790893276");
    --mg-fundal-opacitate: 0.65;
    background-color: #F4E4BC !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"])::before,
body:has(nav[data-facets-menu][data-category-id="80"])::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--mg-fundal);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: var(--mg-fundal-opacitate);
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"])::after,
body:has(nav[data-facets-menu][data-category-id="80"])::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 38%,
        rgba(244, 228, 188, 0.00) 0%,
        rgba(244, 228, 188, 0.10) 55%,
        rgba(40, 32, 18, 0.16) 100%);
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .page__content,
body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .page__aside-main,
body:has(nav[data-facets-menu][data-category-id="80"]) .page__content,
body:has(nav[data-facets-menu][data-category-id="80"]) .page__aside-main {
    background: linear-gradient(178deg,
        rgba(250, 240, 214, 0.955) 0%,
        rgba(240, 225, 189, 0.945) 100%) !important;
    border: 1px solid var(--border, #c8a060) !important;
    border-radius: 3px !important;
    box-shadow:
        0 0 0 1px rgba(139, 69, 19, 0.22),
        0 2px 0 rgba(255, 250, 235, 0.75) inset,
        0 18px 45px rgba(38, 26, 10, 0.28),
        0 3px 10px rgba(38, 26, 10, 0.14) !important;
    padding: 26px 28px !important;
    margin-bottom: 22px !important;
}

@media (max-width: 991px) {
    body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .page__content,
    body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .page__aside-main,
    body:has(nav[data-facets-menu][data-category-id="80"]) .page__content,
    body:has(nav[data-facets-menu][data-category-id="80"]) .page__aside-main {
        padding: 16px 14px !important;
        box-shadow:
            0 0 0 1px rgba(139, 69, 19, 0.20),
            0 10px 26px rgba(38, 26, 10, 0.24) !important;
    }
}

/* Pe pagina Lifestyle (80), breadcrumb-ul NU conține link spre lifestyle-80
   (pagina curentă nu e link), deci e nevoie și de cârligul pe nav-ul de filtre. */
body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .breadcrumb,
body:has(nav[data-facets-menu][data-category-id="80"]) .breadcrumb {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    background: transparent !important;
    padding: 4px 0 10px !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .breadcrumb__item,
body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .breadcrumb__item span,
body:has(nav[data-facets-menu][data-category-id="80"]) .breadcrumb__item,
body:has(nav[data-facets-menu][data-category-id="80"]) .breadcrumb__item span {
    color: #4a2a08 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 252, 240, 0.75);
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .breadcrumb__item a,
body:has(nav[data-facets-menu][data-category-id="80"]) .breadcrumb__item a {
    color: #7a3d0c !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .breadcrumb__item a:hover,
body:has(nav[data-facets-menu][data-category-id="80"]) .breadcrumb__item a:hover {
    color: var(--copper, #B7410E) !important;
    border-bottom-color: rgba(183, 65, 14, 0.5);
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) h1,
body:has(nav[data-facets-menu][data-category-id="80"]) h1 {
    background: linear-gradient(90deg,
        #4a2408 0%,
        #8B4513 22%,
        #c9922f 50%,
        #8B4513 78%,
        #4a2408 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter:
        drop-shadow(0 1px 0 rgba(255, 250, 235, 0.85))
        drop-shadow(0 2px 5px rgba(60, 40, 12, 0.28));
    letter-spacing: 0.03em !important;
    padding-bottom: 14px !important;
    position: relative;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) h1::after,
body:has(nav[data-facets-menu][data-category-id="80"]) h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg,
        var(--copper, #B7410E) 0%,
        var(--brass-light, #c47a3a) 24%,
        rgba(200, 160, 96, 0.55) 55%,
        rgba(200, 160, 96, 0) 100%);
    border-radius: 2px;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product--grid,
body:has(nav[data-facets-menu][data-category-id="80"]) .product--grid {
    background: linear-gradient(170deg, #fbf3e0 0%, #f0e0bb 100%) !important;
    border: 1px solid rgba(139, 69, 19, 0.30) !important;
    border-radius: 3px !important;
    box-shadow:
        0 1px 0 rgba(255, 252, 242, 0.9) inset,
        0 6px 16px rgba(45, 27, 2, 0.13) !important;
    transition: transform 0.28s ease, box-shadow 0.28s ease,
                border-color 0.28s ease !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product--grid:hover,
body:has(nav[data-facets-menu][data-category-id="80"]) .product--grid:hover {
    transform: translateY(-5px) !important;
    border-color: var(--copper, #B7410E) !important;
    box-shadow:
        0 1px 0 rgba(255, 252, 242, 0.9) inset,
        0 16px 34px rgba(45, 27, 2, 0.26),
        0 0 0 1px rgba(183, 65, 14, 0.35) !important;
}

/* NU umbla la line-height pe .product__name (cardul are line-clamp). */
body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product__name,
body:has(nav[data-facets-menu][data-category-id="80"]) .product__name {
    letter-spacing: 0.015em !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product__info--price-gross,
body:has(nav[data-facets-menu][data-category-id="80"]) .product__info--price-gross {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 0.02em !important;
    text-shadow: 0 1px 0 rgba(255, 250, 235, 0.7);
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product-summary__main-image-wrapper,
body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product-summary__main-image {
    border-radius: 3px !important;
    box-shadow: 0 8px 24px rgba(45, 27, 2, 0.20) !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product-content__block {
    background: rgba(255, 250, 235, 0.55) !important;
    border-left: 3px solid var(--brass, #8B4513) !important;
    padding: 16px 20px !important;
    margin-bottom: 18px !important;
    border-radius: 0 3px 3px 0 !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product-content__block-heading {
    font-family: 'Cinzel Decorative', Georgia, serif !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase;
    font-size: 0.95rem !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product-attributes__item--odd {
    background: rgba(200, 160, 96, 0.14) !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .facets-sidebar,
body:has(nav[data-facets-menu][data-category-id="80"]) .facets-sidebar {
    background: transparent !important;
}

body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .facet,
body:has(nav[data-facets-menu][data-category-id="80"]) .facet {
    border-bottom: 1px solid rgba(139, 69, 19, 0.18) !important;
    padding-bottom: 10px !important;
    margin-bottom: 10px !important;
}

@media (max-width: 767px) {
    body:has(.breadcrumb a[href="/catalog/lifestyle-80"])::before,
    body:has(nav[data-facets-menu][data-category-id="80"])::before {
        background-position: center center;
    }
    body:has(.breadcrumb a[href="/catalog/lifestyle-80"]),
    body:has(nav[data-facets-menu][data-category-id="80"]) {
        --mg-fundal-opacitate: 0.53;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product--grid,
    body:has(nav[data-facets-menu][data-category-id="80"]) .product--grid {
        transition: none !important;
    }
    body:has(.breadcrumb a[href="/catalog/lifestyle-80"]) .product--grid:hover,
    body:has(nav[data-facets-menu][data-category-id="80"]) .product--grid:hover {
        transform: none !important;
    }
}
/* =============== END FUNDAL LIFESTYLE =============== */


/* ================================================================
   INIMIOARA DE FAVORITE + COȘUL DE PE CARDURI — steampunk (Cosmin, 28.09.2026)   START
   Inimioara: heart.png (1254 px / 2 MB) → heart.webp 96 px, 6,6 KB.
   Coșul de pe CARDURI: iconița basket.png (rv=1790629572, medalionul rotund, fundal negru →
   transparent, doar negrul legat de margini) → cos-icon.webp 96 px, 6 KB (Cosmin: „folosește ca iconiță asta”).
   Pagina produsului: butonul „Adaugă în coș” rămâne CA ÎNAINTE (Cosmin: „pe pagina
   de produs să fie ca înainte. Doar inimioara se poate modifica dar trebuie să aibă
   aceeași dimensiune ca butonul de dinainte”) → butonul de favorite ține fix
   dimensiunea veche (45,6 × 55), doar poza din el e nouă.
   Bara de sus rămâne neatinsă (cerut). Suprascrie blocurile STRIP INIMIOARĂ,
   STEAMHEART și „Strip coș” (aceeași specificitate, declarat mai jos) — NU le șterge.
   ================================================================ */

/* — inimioara pe carduri (grid + slider) — */
.grid-image__save-wishlist::before,
.slider-image__save-wishlist::before,
.product--grid .grid-image__save-wishlist::before {
    background-image: url('https://89-44-137-177.nip.io/static/heart.webp') !important;
    width: 32px !important;
    height: 32px !important;
    transition: opacity 0.2s, transform 0.2s, filter 0.2s !important;
}

.grid-image__save-wishlist:hover::before,
.slider-image__save-wishlist:hover::before,
.product--grid .grid-image__save-wishlist:hover::before {
    opacity: 1 !important;
    transform: scale(1.12) !important;
}

/* salvat la favorite: halou auriu */
.grid-image__save-wishlist--saved::before,
.slider-image__save-wishlist--saved::before,
.product--grid .grid-image__save-wishlist--saved::before {
    filter: drop-shadow(0 0 5px rgba(255, 196, 90, 0.95)) !important;
}

/* — pagina produsului: butonul de favorite păstrează EXACT dimensiunea veche (45,6 × 55),
     doar poza din el se schimbă — */
a.product-summary__save-wishlist.btn {
    box-sizing: border-box !important;
    width: 45.6px !important;
    min-width: 45.6px !important;
    max-width: 45.6px !important;
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

a.product-summary__save-wishlist.btn svg.icon {
    background: url('https://89-44-137-177.nip.io/static/heart.webp') center / contain no-repeat !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: none !important;
    max-height: none !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
    fill: transparent !important;
    color: transparent !important;
    stroke: transparent !important;
}

a.product-summary__save-wishlist.btn svg.icon use {
    display: none !important;
}

a.product-summary__save-wishlist--saved.btn svg.icon {
    filter: drop-shadow(0 0 5px rgba(255, 196, 90, 0.95)) !important;
}

/* — coșul pe CARDURI: iconița rotundă, cât inimioara (în fâșie era deja doar iconiță) — */
.product--grid .product__actions a.product__add-to-cart {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.product--grid .product__actions .product__add-to-cart::before {
    background-image: url('https://89-44-137-177.nip.io/static/cos-icon.webp') !important;
    width: 34px !important;
    height: 34px !important;
    max-width: none !important;
    max-height: none !important;
    background-size: contain !important;
    transition: transform 0.2s, filter 0.2s !important;
}

.product--grid .product__actions .product__add-to-cart:hover::before {
    opacity: 1 !important;
    transform: scale(1.05) !important;
    filter: brightness(1.12) !important;
}
/* ================================================================
   INIMIOARA DE FAVORITE + COȘUL DE PE CARDURI — steampunk              END
   ================================================================ */