@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   Lavvvs mega menu — hover ilə açılır, tam enli panel,
   sütunlu alt kateqoriyalar + sağda promo kart
   subcategory columns + right-side promo card
   Add this to the lavvvs child theme custom CSS
   (themes/lavvvs/assets/css/custom.css)
   ============================================================ */
@media (min-width: 1200px) {

  /* Positioning context so the panel can span the full width.
     .lv-header__nav — yeni header quruluşundakı naviqasiya sətri;
     .header-bottom  — köhnə Hummingbird quruluşu (geri qayıtsaq işləsin). */
  .header-bottom,
  .lv-header__nav { position: relative; }

  /* Hide the dropdown by default (kills hover-open). Only .lv-open shows it. */
  .ps-mainmenu--desktop .ps-mainmenu__tree-item .submenu { display: none !important; }
  .ps-mainmenu--desktop .ps-mainmenu__tree-item.lv-open .submenu { display: block !important; }

  /* Full-width dropdown panel, just under the header bar */
  .ps-mainmenu--desktop .ps-mainmenu__tree-item { position: static; }
  .ps-mainmenu--desktop .ps-mainmenu__tree-item .submenu {
    position: absolute; top: 100%; left: 0; right: 0; width: 100%;
    margin: 0; z-index: 1050; background: #fff;
    border-top: 1px solid #eaeaea; box-shadow: 0 22px 40px rgba(0,0,0,.12);
    padding: 22px 0 24px;

    /* ⚠️ EKRANI DOLDURMA MƏHDUDİYYƏTİ — müştərinin 3-cü iradı.
       "Alle mærker" panelini ölçdüm: 1366×768-də 856px hündürlüyündə idi,
       yəni ekrandan 221px kənara çıxırdı — alt hissəsinə çatmaq və ordan
       çıxmaq mümkün olmurdu. İndi panel ekranın altına qədər uzanır, qalanı
       panelin İÇİNDƏ sürüşür; arxadakı səhifə həmişə görünür və klik ilə
       bağlanır. Dəqiq dəyəri JS verir (panelin yuxarı kənarına görə),
       aşağıdakı `calc` yalnız JS işləmədikdə ehtiyatdır. */
    max-height: var(--lv-mega-max, calc(100vh - 9.5rem));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Sürüşən panel olduğu bilinsin deyə nazik, həmişə görünən sürüşdürücü */
    scrollbar-width: thin;
    scrollbar-color: #C3D6C6 transparent;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-item .submenu::-webkit-scrollbar { width: 8px; }
  .ps-mainmenu--desktop .ps-mainmenu__tree-item .submenu::-webkit-scrollbar-thumb {
    background: #C3D6C6; border-radius: 4px;
  }

  /* Row = link columns (left) + promo card (right) */
  .ps-mainmenu--desktop .submenu .submenu__row {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 44px !important; margin: 0 !important; align-items: flex-start !important;
  }
  .ps-mainmenu--desktop .submenu .submenu__left {
    flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 240px)) !important;
    column-gap: 20px !important; row-gap: 4px !important; align-content: start !important;
  }
  .ps-mainmenu--desktop .submenu .submenu__right {
    display: block !important; flex: 0 0 260px !important; max-width: 260px !important; width: 260px !important;
  }
  /* hide the theme's empty native right content */
  .ps-mainmenu--desktop .submenu .submenu__right-items { display: none !important; }

  .ps-mainmenu--desktop .submenu .submenu__left-item {
    display: block; padding: 9px 12px; margin: 0; color: #222;
    font-size: 15.5px; font-weight: 600; line-height: 1.35;
    border-radius: 8px; text-decoration: none; background: transparent;
    transition: background .12s, color .12s;
  }
  .ps-mainmenu--desktop .submenu .submenu__left-item.active { background: transparent; color: #222; }
  .ps-mainmenu--desktop .submenu .submenu__left-item:hover { color: #2f8a3d; background: #f2f8f3; }

  /* Section label + "see all" link (both added by the JS) */
  .lv-mega-head {
    font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: #8a8a8a; font-weight: 700; padding: 0 12px 14px;
  }
  .lv-mega-all {
    grid-column: 1 / -1;
    display: inline-flex; align-items: center; gap: 6px; margin: 16px 12px 0;
    color: #2f8a3d; font-weight: 700; font-size: 14.5px; text-decoration: none;
  }
  .lv-mega-all:hover { text-decoration: underline; }

  /* ── Sağdakı promo kart — YIĞCAM ──────────────────────────────────────
     ⚠️ MÜŞTƏRİNİN 3-cü İRADININ ƏSAS SƏBƏBİ BU KART İDİ. Ölçdüm: kart
     315px hündürlüyündə idi və `align-items: flex-start` sətrində ən hündür
     element o olduğu üçün BÜTÜN panellərin hündürlüyünü təyin edirdi —
     linkləri cəmi 104px yer tutan "Tag" menyusu da 427px açılırdı.
     Müştərinin təxmini düz idi: kartı kiçiltmək panelin özünü kiçildir.

     İndi: şəkil zolağı yoxdur (ikon başlığın yanındadır), CTA isə dolu
     düymə yox, ox işarəli yaşıl linkdir. Kart ~120px-ə düşür, yəni panelin
     hündürlüyünü artıq linklərin sayı təyin edir, kart yox.
     `img` verilən kateqoriyada nazik (96px) şəkil zolağı qayıdır. */
  .lv-mega-promo {
    display: flex; flex-direction: column;
    background: #f4f8f4; border: 1px solid #e6efe6; border-radius: 12px; overflow: hidden;
  }
  .lv-mega-promo__media {
    height: 96px; display: flex; align-items: center; justify-content: center;
    background: #e7f1e8; background-size: cover; background-position: center;
  }
  .lv-mega-promo__media svg { width: 38px; height: 38px; color: #2f8a3d; }
  .lv-mega-promo__body { padding: 14px 16px 15px; }
  .lv-mega-promo__head { display: flex; align-items: center; gap: 9px; margin: 0 0 5px; }
  .lv-mega-promo__icon { flex: 0 0 auto; display: block; line-height: 0; color: #2f8a3d; }
  .lv-mega-promo__icon svg { width: 22px; height: 22px; display: block; }
  .lv-mega-promo__title { font-size: 15px; font-weight: 800; color: #1e2b22; line-height: 1.25; margin: 0; }
  .lv-mega-promo__text { font-size: 12.5px; color: #586258; line-height: 1.4; margin: 0 0 10px; }
  .lv-mega-promo__btn {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
    background: transparent; color: #2f8a3d !important;
    padding: 0; border-radius: 0; font-weight: 700; font-size: 13.5px; text-decoration: none !important;
  }
  .lv-mega-promo__btn:hover { background: transparent; text-decoration: underline !important; }

  /* ── OX ARTIQ AYRICA DÜYMƏDİR ─────────────────────────────────────────
     ƏVVƏL: modulun öz düyməsi gizlədilirdi (`display:none`), ox isə linkin
     `::after`-i kimi çəkilirdi. Yəni tabda TƏK toxunma sahəsi var idi və
     onun mənası cihazdan asılı olurdu — siçanda klik kateqoriyaya keçirdi,
     barmaqla birinci toxunuş paneli açır, ikincisi keçid edirdi. Müştərinin
     4-cü iradı məhz budur: "bəzisi üstünə gələndə, bəzisi basanda, bəzisində
     iki dəfə basanda açılır".

     İNDİ (W3C "disclosure navigation" nümunəsi, iri mağazaların standartı):
        ad     → HƏMİŞƏ kateqoriyaya keçid (hər cihazda eyni)
        ox     → HƏMİŞƏ paneli açıb-bağlayır (hər cihazda eyni)
     Siçanlı cihazda üstəlik hover da açır — bu, əlavə rahatlıqdır, qaydanı
     dəyişmir. Modulun öz düyməsini işlədirik: onun `aria-expanded`,
     `aria-controls` və `aria-label`-ı hazırdır, JS yalnız dəyərini yeniləyir. */
  /* ⚠️ ENİ DİQQƏTLƏ SEÇİLİB. Zolaqdakı bəndlərin cəmi eni 1200px-də
     konteynerə (1116px) güclə sığır. Əvvəl ox linkin `padding-right`-ı
     (2.15rem ≈ 34px) içində çəkilirdi; ayrıca düymə ondan geniş olsaydı
     sətir ikiyə bölünürdü — ölçdüm, 2.25rem-də 1200/1280/1366-da məhz belə
     olurdu. İndi düymə 1.75rem + linkin 0.3rem sağ boşluğu ≈ 33px, yəni
     əvvəlkindən bir az DAR. */
  .ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; min-height: 100%;
    padding: 0; margin: 0; border: 0; background: transparent;
    color: inherit; cursor: pointer;
  }
  /* Bootstrap `.dropdown-toggle`-ın öz ::after üçbucağı — bizim oxumuz var */
  .ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle::after {
    content: ""; display: block;
    width: 7px; height: 7px; margin: 0;
    border: 0;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);        /* aşağı baxır */
    transition: transform .18s ease; opacity: .85;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-item.lv-open .ps-mainmenu__tree-dropdown-toggle::after {
    transform: translateY(2px) rotate(-135deg);       /* yuxarı baxır */
    opacity: 1;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle:focus-visible {
    outline: 2px solid currentColor; outline-offset: -4px;
  }
  .ps-mainmenu--desktop .ps-mainmenu__tree-link { cursor: pointer; }

  /* No focus outline / box on the top-level items */
  .ps-mainmenu--desktop .ps-mainmenu__tree-link,
  .ps-mainmenu--desktop .ps-mainmenu__tree-link:focus,
  .ps-mainmenu--desktop .ps-mainmenu__tree-link:focus-visible,
  .ps-mainmenu--desktop .ps-mainmenu__tree-item-wrapper,
  .ps-mainmenu--desktop .ps-mainmenu__tree-item-wrapper:focus-within {
    outline: none !important; box-shadow: none !important;
  }

  /* Open item: green text + bold green underline */
  .ps-mainmenu--desktop .ps-mainmenu__tree-item.lv-open .ps-mainmenu__tree-link {
    color: #2f8a3d !important;
    text-decoration: underline !important;
    text-decoration-color: #2f8a3d !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 7px !important;
  }
}



/* Only show the custom autocomplete, hide PrestaShop's default search dropdown */
#ps_searchbar_dropdown { display: none !important; }

/* ============================================================
   Lavvvs child theme  |  Brand override for Hummingbird 2.0
   Hummingbird is Bootstrap 5.3 based. These override Bootstrap's
   own CSS variables (unlayered rules win over @layer), so the
   whole theme recolours to the brand without touching parent files.
   ============================================================ */

:root,
[data-bs-theme="light"] {
  /* Brand green as Bootstrap primary */
  --bs-primary: #39A949;
  --bs-primary-rgb: 57, 169, 73;

  /* Links use the accessible action green */
  --bs-link-color: #2F8A3D;
  --bs-link-color-rgb: 47, 138, 61;
  --bs-link-hover-color: #277A34;
  --bs-link-hover-color-rgb: 39, 122, 52;

  /* Typography + shape */
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-color: #1A1A18;
  --bs-border-radius: .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .75rem;
}

/* Body font, in case the theme sets it directly */
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* Primary button = accessible action green with white text (Bootstrap 5.3 component vars) */
.btn-primary {
  --bs-btn-bg: #2F8A3D;
  --bs-btn-border-color: #2F8A3D;
  --bs-btn-hover-bg: #277A34;
  --bs-btn-hover-border-color: #277A34;
  --bs-btn-active-bg: #277A34;
  --bs-btn-active-border-color: #277A34;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #2F8A3D;
  --bs-btn-disabled-border-color: #2F8A3D;
}

/* Outline / secondary actions in brand green */
.btn-outline-primary {
  --bs-btn-color: #2F8A3D;
  --bs-btn-border-color: #2F8A3D;
  --bs-btn-hover-bg: #2F8A3D;
  --bs-btn-hover-border-color: #2F8A3D;
  --bs-btn-hover-color: #fff;
}

/* Yellow is accent only: badges/highlights with dark text */
.badge.bg-accent, .lv-badge-accent {
  background-color: #FFC200 !important;
  color: #4A3B00 !important;
}

/* ⚠️ QİYMƏT RƏNGİ — yaşıldan QARAYA
   Müştərinin iradı. Səbəb də var: yaşıl bu saytda "əlçatan / əməliyyat"
   rəngidir (Səbətə at düyməsi, stok nişanı, linklər). Qiymət də yaşıl
   olanda səhifədə eyni rəng üç ayrı mənada işləyirdi və qiymət
   klikləniləsi kimi oxunurdu. İndi qiymət neytral mətn rəngindədir;
   yaşıl yalnız hərəkətlərdə qalır.
   Endirim qiyməti QIRMIZI qalır — o, məlumat daşıyır. */
.product-price, .price, .current-price, .has-discount .price { color: var(--lv-p-text, #303030); }

/* ============================================================
   Component styles for the custom product/category/checkout
   templates (built in the next step). Harmless until those
   templates use the .lv-* classes.
   ============================================================ */

/* ============================================================
   Product page — Crutchfield-style enhancement of Hummingbird
   Targets Hummingbird 2.0 real BEM classes (verified on store).
   ============================================================ */

/* Keep the buy box in view while scrolling the specs (desktop) */
@media (min-width: 992px) {
  .product__right { position: sticky; top: 1rem; align-self: flex-start; }
}

/* Product name: tighter, confident */
.product__name { font-weight: 600; font-size: 1.55rem; line-height: 1.25; margin-bottom: .5rem; }

/* Qiymət: iri və neytral; vergi qeydi sakit */
.product__prices .product__price,
.product__price { color: var(--lv-p-text, #303030); font-weight: 700; font-size: 1.75rem; }
.product__tax-label, .product__tax-infos { color: #6B6B66; font-size: .8rem; }

/* Availability status: readable weight (let PS keep in/out-of-stock colour) */
.product__availability-status { font-weight: 500; }

/* Add-to-cart: full width, prominent primary action */
.product__add-to-cart-button,
.product__add-to-cart .btn-primary,
.product__add-to-cart button[type="submit"] {
  width: 100%;
  padding: .8rem 1rem;
  font-size: 1.05rem;
  font-weight: 500;
}

/* Even rhythm down the buy box */
.product__right > * + * { margin-top: .9rem; }

/* Trust / reassurance block: compact and clean */
.blockreassurance--product .reassurance__title { font-weight: 500; font-size: .85rem; color: #1A1A18; }
.blockreassurance--product .reassurance__desc  { font-size: .78rem; color: #6B6B66; }
.blockreassurance--product .reassurance__image svg,
.blockreassurance--product .reassurance__image img { max-width: 22px; height: auto; }

/* Accordions: open and information-forward, the Crutchfield way.
   Show all sections, turn the toggle headers into static headings. */
.product__accordion .accordion-collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}
.product__accordion .accordion-button {
  pointer-events: none;
  font-weight: 600;
  font-size: 1.05rem;
  color: #1A1A18;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}
.product__accordion .accordion-button::after { display: none; }
.product__accordion .accordion-item {
  border: 0;
  border-bottom: 1px solid #E6E4DD;
}
.product__accordion .accordion-body { padding: .25rem 0 1rem; }

/* Feature / spec tables: scannable */
.product-features .data-sheet li,
.product__accordion table td { font-size: .9rem; }
.product-features .data-sheet li:nth-child(odd) { background: #F7F5EF; }

/* Reviews spacing */
.product-comments-wrapper { margin-top: 1.5rem; }

/* ============================================================
   Category / listing (browse) — real Hummingbird 2.0 classes
   ============================================================ */

/* Breadcrumb: quiet, brand hover */
.breadcrumb { background: transparent; padding-left: 0; font-size: .8rem; margin-bottom: .75rem; }
.breadcrumb-item a { color: #6B6B66; text-decoration: none; }
.breadcrumb-item a:hover { color: #2F8A3D; }

/* Category header */
.category__header h1, .category__header .h1 { font-weight: 600; }

/* Listing toolbar: result count + sort */
.products__count { color: #6B6B66; font-size: .85rem; }
.products__sort-dropdown-button {
  font-size: .85rem; border: 1px solid #E6E4DD; border-radius: .5rem;
  padding: .45rem .85rem; background: #fff;
}

/* Product cards: clean, brand price, subtle hover */
.product-miniature__inner {
  border: 1px solid #E6E4DD; border-radius: .75rem; overflow: hidden;
  background: #fff; height: 100%; display: flex; flex-direction: column;
  transition: border-color .15s ease;
}
.product-miniature:hover .product-miniature__inner { border-color: #39A949; }
.product-miniature__image-container { background: #F7F5EF; }
.product-miniature__bottom, .product-miniature__details { padding: .75rem .85rem; }
.product-miniature__title a {
  color: #1A1A18; font-size: .9rem; line-height: 1.35; text-decoration: none; font-weight: 500;
}
.product-miniature__title a:hover { color: #2F8A3D; }
.product-miniature__price { color: #39A949; font-weight: 600; font-size: 1.05rem; }
.product-miniature__discount-price { color: #9A9A93; }

/* Flags / badges: yellow "new", muted out-of-stock */
.product-flags .badge.new { background: #FFC200; color: #4A3B00; }
.product-flags .badge.out_of_stock { background: #F1EFE8; color: #6B6B66; }

/* Pagination: brand current page */
.pagination__number { border-radius: .5rem; }
.pagination__number.current,
.pagination .active > a,
.pagination .active > span { background: #2F8A3D; border-color: #2F8A3D; color: #fff; }

/* Active filter chips (works for native facets; Amazzing styled on install) */
.active-filters .filter-block,
.active-filters li a { background: #EAF5EC; color: #277A34; border-radius: .5rem; font-size: .8rem; }

/* Sidebar column that will hold the filter */
.col-lg-3 .block-categories,
.col-lg-3 { --lv-sidebar: 1; }

/* ============================================================
   Global polish
   ============================================================ */

/* Form controls: brand-green focus ring */
.form-control:focus, .form-select:focus, .input-group .form-control:focus {
  border-color: #2F8A3D;
  box-shadow: 0 0 0 .2rem rgba(57,169,73,.15);
}

/* Text links inside real content (descriptions, CMS, accordions) go green */
.rte a, .cms-content a, .product__description a,
.product__accordion .accordion-body a { color: #2F8A3D; }

/* Header + footer link hover in brand */
header a:hover, #header a:hover, .header a:hover,
footer a:hover, #footer a:hover, .footer a:hover { color: #2F8A3D; }

/* Search + cart focus states */
.header__search .form-control:focus { border-color: #2F8A3D; }

/* ============================================================
   Card fixes
   ============================================================ */
.product-miniature__title { color: #1A1A18 !important; font-weight: 500; text-decoration: none; }
.product-miniature__title:hover { color: #2F8A3D !important; }
.product-flags .badge.new,
.product-miniature__top .badge.new { background-color: #FFC200 !important; color: #4A3B00 !important; }

/* ============================================================
   Cart page summary
   ============================================================ */
/* Yekun qutusu saytın digər "yaşıl sahələri" ilə eyni tonda — müştərinin
   iradı ("bg color the same green as the other placement boxes"). */
.cart-grid__aside .cart-summary,
.cart-summary:not(.checkout__summary-accordion-wrapper) {
  border: 1px solid var(--lv-green-100) !important; border-radius: .75rem; padding: 1rem 1.15rem;
  background: var(--lv-green-50);
}
.cart-summary__total .cart-summary__value { color: #2F8A3D !important; font-weight: 700; font-size: 1.2rem; }
.cart-summary__line--bold { font-weight: 600; }

/* ⚠️ "STICKY" — ƏVVƏLKİ QAYDA İŞLƏMİRDİ.
   `.cart-grid__aside`-ın özünə `position: sticky` verilmişdi, amma sticky
   yalnız VALİDEYNİN içində sürüşür. Ölçdüm: `.cart-grid` 688px, yan sütun
   isə 656px — yəni cəmi 32px yol var idi, praktikada qutu dərhal yuxarı
   çıxırdı. Müştəri "sticky" yazıb ox çəkməsinin səbəbi budur.
   İNDİ: sticky olan yan sütun yox, YEKUN QUTUSUDUR (306px). Sütun tam
   sətir hündürlüyünə uzadılır, ona görə qutu bütün səbət siyahısı boyunca
   ekranda qalır — "Fortsæt til betaling" həmişə əlin altındadır.
   Aşağıdakı etimad ikonları normal sürüşür. */
@media (min-width: 992px) {
  .cart-grid__aside { position: static; align-self: stretch; }
  .cart-grid__aside-wrapper { height: 100%; }
  .cart-grid__aside .cart-summary { position: sticky; top: 1rem; z-index: 2; }
}

/* ── Səbətin alt düymələri: "Fortsæt med at handle" + "Send forespørgsel"
   BİR SƏTİRDƏ, EYNİ GÖRÜNÜŞDƏ ─────────────────────────────────────────────
   Əvvəl "Send forespørgsel" tam enli (893px), dolu yaşıl düymə idi və
   səhifədəki ƏN İRİ düymə olduğu üçün əsas addım kimi oxunurdu — halbuki
   əsas addım sağdakı "Fortsæt til betaling"dir. İndi hər ikisi eyni ölçülü
   kontur düymədir və yan-yanadır; vizual üstünlük ödəniş düyməsindədir.
   Valideyn (`.cart-grid__products-details`) ajax ilə əvəz olunur, ona görə
   həll JS köçürməsi deyil, CSS-dir — yeniləmədən sonra da qalır. */
.cart-grid__products-details > .cart__continue-shopping,
.cart-grid__products-details > .quop-cart-quotation {
  display: inline-flex; vertical-align: middle;
  margin: .25rem .5rem .25rem 0;
}
/* Modul düyməyə SƏTİRİÇİ stil yazır (background-color:#39A949…) — yalnız
   `!important` onu üstələyə bilir. */
.quop-cart-quotation__button {
  background-color: transparent !important;
  border: 1px solid #2F8A3D !important;
  color: #2F8A3D !important;
  box-shadow: none !important;
  display: inline-flex; align-items: center; gap: .3rem;
  height: 38px; padding: 0 .9rem; border-radius: .375rem;
  font-size: .875rem; font-weight: 500; line-height: 1; white-space: nowrap;
}
.quop-cart-quotation__button .material-icons { flex: 0 0 auto; }
.quop-cart-quotation__button:hover,
.quop-cart-quotation__button:focus {
  background-color: #2F8A3D !important; color: #fff !important; border-color: #2F8A3D !important;
}
.quop-cart-quotation__button .material-icons { font-size: 1.15rem; line-height: 1; }
.cart__continue-shopping { height: 38px; align-items: center; }

/* ============================================================
   Checkout — real Hummingbird classes (forced past theme cascade)
   ============================================================ */
.checkout-steps__step--current .checkout-steps__number { background: #2F8A3D !important; border-color: #2F8A3D !important; color: #fff !important; }
.checkout-steps__step--current .checkout-steps__title { color: #2F8A3D !important; font-weight: 600; }

.checkout-grid__content .step {
  border: 1px solid #E6E4DD !important; border-radius: .75rem !important;
  padding: 1.25rem !important; margin-bottom: 1rem !important; background: #fff !important;
}
.step__title, .step__title-left { font-weight: 600; font-size: 1.1rem; }
.step--current .step__title, .step--current .step__title-left { color: #2F8A3D !important; }
.step__content { padding-top: .5rem; }

@media (min-width: 992px){ .checkout-grid__aside { position: sticky !important; top: 1rem; } }

.delivery-option, .payment-option {
  border: 1px solid #E6E4DD !important; border-radius: .5rem;
  padding: .85rem 1rem; margin-bottom: .6rem;
  cursor: pointer;                /* kartın hamısı kliklənir — JS qoşur */
}
.delivery-option:hover, .payment-option:hover { border-color: #39A949 !important; }
/* Kartın içində açılan sahələr adi məzmundur — orada ox qursoru qalsın */
.payment-option .js-payment-option-form,
.payment-option .js-additional-information,
.delivery-option .js-additional-information { cursor: auto; }
/* Etiket də kartın eninə yayılsın: mətnin yanındakı boşluq da "canlı" olsun
   (JS onsuz da işləyir, bu sadəcə native label sahəsini genişləndirir) */
.payment-option__label, .delivery-option__label { cursor: pointer; }
.checkout .btn-primary, #customer-form .btn-primary { font-weight: 500; }

/* ============================================================
   Product page — "Anmod om tilbud" (Request a quote) button
   Injected into the buy box by custom.js, directly under add-to-cart.
   Secondary action: brand-green outline that fills on hover. Colour
   and border are inherited from .btn-outline-primary above, so this
   stays on-brand automatically.
   ============================================================ */
.lv-quote-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: .6rem;
  padding: .8rem 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.2;
}
.lv-quote-btn svg { flex: 0 0 auto; }
.lv-quote-btn:disabled,
.lv-quote-btn.disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================
   Product page — buy-box enrichment (delivery, includes, expert)
   Injected by custom.js into .product__right. Honest static trust
   blocks styled to match the Crutchfield-style buy box. Icons are
   inline SVG using currentColor, so they inherit the brand green.
   ============================================================ */
/* Çatdırılma sətri də yaşıl ailəyə keçdi: satın-alma blokunda bej və
   yaşıl yan-yana iki fərqli aksent ailəsi yaradırdı. İndi blokda tək
   tonal dil var. */
.lv-pdp-delivery {
  display: flex; gap: .55rem; align-items: flex-start;
  background: var(--lv-green-50, #F4F9F4);
  border: 1px solid var(--lv-green-100, #E4F1E6);
  border-radius: .5rem; padding: .7rem .9rem;
  font-size: .9rem; color: #26311F;
}
.lv-pdp-delivery .lv-ico { color: #2F8A3D; flex: 0 0 auto; line-height: 0; margin-top: 1px; }

/* ⚠️ Bu blok gözümdən qaçmışdı: yanındaki ekspert qutusu yaşıl, bu isə ağ
   qalmışdı — ikisi yan-yana durduğu üçün fərq gözə dəyirdi.
   İndi satın-alma blokundaki bütün etibar səthləri eyni yaşıl ailədədir:
   çatdırılma sətri, aksesuar bloku, bu siyahı və ekspert qutusu. */
.lv-pdp-includes {
  border: 1px solid var(--lv-green-100, #E4F1E6);
  border-radius: .6rem;
  padding: .5rem .9rem;
  background: var(--lv-green-50, #F4F9F4);
}
.lv-pdp-includes .lv-inc { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .88rem; color: #26311F; }
.lv-pdp-includes .lv-inc .i { color: #39A949; flex: 0 0 auto; line-height: 0; }

/* Expert help block: a light green callout so it reads as a "talk to a person"
   invite rather than a second plain bordered box like the reassurance list above
   it. Solid green badge with a white headset icon, and the two contacts as
   outlined pill buttons so the actions are obvious. Kept generic (no named rep
   or advisor count) to suit a Danish VVS store. */
.lv-pdp-expert { display: flex; gap: .9rem; align-items: center; background: var(--lv-green-50, #F4F9F4); border: 1px solid var(--lv-green-100, #E4F1E6); border-radius: .65rem; padding: .9rem 1rem; }
.lv-pdp-expert .lv-exp-av { width: 44px; height: 44px; border-radius: 50%; background: #2F8A3D; color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lv-pdp-expert .lv-exp-body { flex: 1; }
.lv-pdp-expert .lv-exp-title { font-weight: 600; font-size: .94rem; color: #1A1A18; line-height: 1.25; }
.lv-pdp-expert .lv-exp-sub { font-size: .82rem; color: #6B6B66; margin-top: 1px; }
.lv-pdp-expert .lv-exp-links { margin-top: .55rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.lv-pdp-expert .lv-exp-pill { display: inline-flex; align-items: center; gap: .38rem; font-size: .82rem; font-weight: 600; color: #277A34; border: 1.5px solid #2F8A3D; border-radius: 999px; padding: .32rem .8rem; line-height: 1; text-decoration: none; transition: background .15s, color .15s; }
.lv-pdp-expert .lv-exp-pill:hover { background: #2F8A3D; color: #fff; }

/* Short description reads as a comfortable highlights lead */
.product__description-short { font-size: 1rem; color: #33332F; }
.product__description-short ul { padding-left: 1.15rem; margin-bottom: 0; }
.product__description-short li { margin-bottom: .3rem; }

/* ============================================================
   Product page — buy-box header (brand, rating, stock) and the
   Produkthøjdepunkter / Specifikationer content restructure.
   Injected/transformed by custom.js. Honest states only.
   ============================================================ */
.lv-pdp-brand { display: inline-block; color: #2F8A3D; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; text-decoration: none; }
.lv-pdp-brand:hover { color: #277A34; }

.lv-pdp-rate { display: flex; align-items: center; gap: .5rem; font-size: .86rem; margin: .15rem 0 .45rem; }
.lv-pdp-rate .lv-stars { letter-spacing: 1px; font-size: .95rem; }
.lv-pdp-rate .lv-star { color: #D9D6CE; }
.lv-pdp-rate .lv-star.on { color: #FFC200; }
.lv-pdp-rate .lv-rev-link { color: #2F8A3D; font-weight: 500; text-decoration: none; }
.lv-pdp-rate .lv-rev-link:hover { text-decoration: underline; }

.lv-pdp-stock { display: inline-flex; align-items: center; gap: .4rem; color: #2F8A3D; font-weight: 600; font-size: .92rem; margin-bottom: .35rem; }
.lv-pdp-stock.out { color: #9A2A2A; }

/* Content sections rendered as clean white cards */
.product__accordion { margin-top: 1.5rem; }
.product__accordion .accordion-item { border: 1px solid #E6E4DD !important; border-radius: .75rem !important; background: #fff; padding: 1.1rem 1.35rem !important; margin-bottom: 1rem !important; }
.product__accordion .accordion-button { font-size: 1.15rem !important; border-bottom: 2px solid #E6E4DD !important; padding: 0 0 .55rem 0 !important; margin-bottom: .5rem; width: 100%; }
.product__accordion .accordion-body { padding: .4rem 0 .2rem !important; }

/* Highlights callout + list */
/* ⚠️ Sarı fon götürüldü — müştəri digər bölmələrdəki açıq yaşılı istədi.
   Sarı burada xəbərdarlıq kimi oxunurdu, halbuki bu, məhsulun əsas
   üstünlüyüdür. İndi eyni yaşıl ailədən, solda aksent zolağı ilə. */
.lv-hl-callout {
  display: flex; gap: .5rem;
  background: var(--lv-green-50, #F4F9F4);
  border: 1px solid var(--lv-green-100, #E1EFE3);
  border-left: 3px solid var(--lv-green-500, #39A949);
  border-radius: .5rem;
  padding: .6rem .85rem;
  font-weight: 500; margin-bottom: .8rem;
  color: #26311F;
}
.lv-hl-list { padding-left: 1.15rem; margin: 0; }
.lv-hl-list li { margin-bottom: .4rem; }

/* Specifikationer table (two columns, key/value rows) */
/* ⚠️ `1fr 1fr` sabit iki sütun idi və `min-width:0` yox idi: təsvir kartı
   daralanda (yan-yana quruluşda) uzun dəyər sətri kənardan çıxırdı —
   render-də üfüqi sürüşmə kimi tutdum (1024px-də 9px, 1600px-də 2px).
   `auto-fit` + `min-width:0` + `overflow-wrap` bunu bağlayır. */
.lv-spec-table { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 2rem; }
/* Sətir flex + `justify-content: space-between` idi: qısa dəyərlərdə gözəl
   görünürdü, amma uzun dəyər ikinci sətrə keçəndə sağa yapışıq qalırdı və
   sol kənarı pilləli olurdu (655-də "Kan opsættes i alle miljøer…" belə idi).
   İndi qrid: açar solda, dəyər öz sütununda soldan başlayır — mövzunun öz
   "Produktinformation" kartı ilə də eyni oxunuşdur. */
.lv-spec-row {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: .15rem 1rem;
  min-width: 0; padding: .55rem 0; border-bottom: 1px solid #E6E4DD; font-size: .92rem;
}
.lv-spec-row .k { color: #6B6B66; min-width: 0; overflow-wrap: anywhere; }
.lv-spec-row .v { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

/* Reviews block as a card */
.product-comments-wrapper { border: 1px solid #E6E4DD; border-radius: .75rem; background: #fff; padding: 1.1rem 1.35rem; margin-top: 1rem; }

/* ============================================================
   Checkout — show the order items in the summary, add a
   request-a-quote action, hide the now-redundant details toggle.
   ============================================================ */
.checkout__summary-accordion-wrapper .accordion-collapse { display: block !important; height: auto !important; visibility: visible !important; }
.checkout__summary-accordion-wrapper .accordion-button { display: none !important; }
/* ⚠️ GÖRÜNÜŞ DƏYİŞDİ — bax custom.js-dəki izaha.
   Əvvəl sağ sütunda tam enli, çərçivəli, mərkəzlənmiş DÜYMƏ idi və irəli
   aparan əsas addımla yarışırdı. İndi sol sütunda, düymələr sətrinin altında,
   sola yapışıq adi LİNKDİR — tapılır, amma gözü özünə çəkmir. */
.lv-checkout-quote-box {
  margin-top: .85rem; padding-top: .85rem;
  border-top: 1px solid var(--lv-p-border, #E6E4DD);
}
.lv-checkout-quote {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #2F8A3D; font-weight: 600; font-size: 14px; text-decoration: none;
}
.lv-checkout-quote:hover { color: #235D2B; text-decoration: underline; }
.lv-checkout-note { font-size: 12px; color: #6B6B66; margin-top: .3rem; line-height: 1.4; }

/* ============================================================
   Header search — enlarged, branded field (ps-searchbar). The
   Danish placeholder is set by custom.js; the permanent fix for
   the placeholder is the front-office translation string.
   ============================================================ */
/* The Hummingbird header puts the search in an auto-width column pushed to the
   right with ms-auto, so it never widens. Grow that column and let the field
   fill the header like the prototype and the live store. Desktop only, the
   column is d-none below md so the mobile search is untouched. */
.header-bottom__row > .order-2 {
  flex: 1 1 auto !important;
  margin-left: 1.75rem !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}
.header-bottom__row > .order-2 .ps-searchbar,
.ps-searchbar__form { width: 100% !important; max-width: 720px; }
.ps-searchbar__input {
  height: auto; padding: .8rem 1.05rem .8rem 2.7rem; font-size: 1.02rem;
  border-radius: .6rem; border: 1.5px solid #E6E4DD;
}
.ps-searchbar__input:focus { border-color: #2F8A3D; box-shadow: 0 0 0 .2rem rgba(57,169,73,.15); }
.ps-searchbar__button, .ps-searchbar__submit, .ps-searchbar [type="submit"] { color: #2F8A3D; }

/* ============================================================
   Product gallery — professional circular arrows on the image
   carousel and the fullscreen modal, and a click-to-zoom cursor.
   custom.js opens the built-in fullscreen viewer when the image
   itself is clicked. The magnifier lens is click-through so the
   click reaches the image.
   ============================================================ */
.product__images .carousel-control-prev, .product__images .carousel-control-next,
.product-images-modal .carousel-control-prev, .product-images-modal .carousel-control-next {
  width: 46px; height: 46px; top: 50%; bottom: auto; transform: translateY(-50%);
  background: #fff; border: 1px solid #E6E4DD; border-radius: 50%;
  box-shadow: 0 3px 12px rgba(0,0,0,.14); opacity: 1;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s, box-shadow .15s;
}
.product__images .carousel-control-prev { left: 14px; }
.product__images .carousel-control-next { right: 14px; }
.product-images-modal .carousel-control-prev { left: 22px; }
.product-images-modal .carousel-control-next { right: 22px; }
.product__images .carousel-control-prev:hover, .product__images .carousel-control-next:hover,
.product-images-modal .carousel-control-prev:hover, .product-images-modal .carousel-control-next:hover {
  border-color: #39A949; box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3 L5 8 L10 13'/%3E%3C/svg%3E") !important;
  width: 18px; height: 18px;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231A1A18' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3 L11 8 L6 13'/%3E%3C/svg%3E") !important;
  width: 18px; height: 18px;
}
.lv-zoom-lens { pointer-events: none; }
.lv-zoom img, .product-cover img { cursor: zoom-in; }

/* Fullscreen image viewer: fill the viewport with a clean white stage, image
   centered and capped to the viewport height so it never scrolls (matches the
   reference site). A photo with white padding baked in will look small here,
   which is a source-photo trait, not the layout. */
.product-images-modal { overflow: hidden !important; padding: 0 !important; }
.product-images-modal .modal-dialog { max-width: 100% !important; width: 100% !important; height: 100vh !important; margin: 0 !important; }
.product-images-modal .modal-content { width: 100%; height: 100vh; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.product-images-modal .modal-body { height: 100vh; display: flex; align-items: center; justify-content: center; padding: 3rem 4.5rem; overflow: hidden; }
.product-images-modal .carousel, .product-images-modal .carousel-inner { width: 100%; height: 100%; }
.product-images-modal .carousel-item { height: 100%; }
.product-images-modal .carousel-item.active { display: flex !important; align-items: center; justify-content: center; }
.product-images-modal .carousel-item img {
  max-height: calc(100vh - 6rem) !important; max-width: 100% !important;
  width: auto !important; height: auto !important; object-fit: contain; margin: 0 auto; display: block;
}
.product-images-modal .btn-close, .product-images-modal .close { position: fixed; top: 1.25rem; right: 1.5rem; z-index: 10; opacity: .9; }

/* Declutter the buy box: the standalone zoom button is redundant now that the
   image opens the viewer, the product reassurance list duplicates the includes
   panel, and the share row is low value for this store. The image click still
   triggers the hidden zoom button, so the viewer keeps working. */
.product__zoom { display: none !important; }
.blockreassurance--product { display: none !important; }
.ps-sharebuttons { display: none !important; }

/* Fullscreen viewer controls (added by custom.js): a counter top-left, and a
   zoom in/out button plus a browser fullscreen toggle top-right, to the left of
   the theme's close button. The side arrows and close are the theme's own. */
.lv-mv-counter { position: fixed; top: 1.5rem; left: 1.6rem; z-index: 11; font-size: 14px; color: #1A1A18; font-weight: 500; }
.lv-mv-controls { position: fixed; top: 1rem; right: 4.2rem; z-index: 11; display: flex; gap: .4rem; }
.lv-mv-btn { width: 40px; height: 40px; border: 0; background: transparent; color: #1A1A18; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lv-mv-btn:hover { background: #EFEEE8; }
.product-images-modal.lv-mv-zoomed .carousel-item img { cursor: grab; transition: none !important; }
.product-images-modal.lv-mv-dragging .carousel-item img { cursor: grabbing; }

/* ── Back-to-top button (added by custom.js) ───────────────────────────────
   Round button pinned bottom-right, fades in past the fold. */
#lv-totop { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #E6E4DD; box-shadow: 0 4px 14px rgba(0,0,0,.15); color: #2F8A3D; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1040; }
#lv-totop.show { opacity: 1; pointer-events: auto; }
#lv-totop:hover { border-color: #39A949; }

/* ── Full-width product content ────────────────────────────────────────────
   The theme lays the lower product area out as a two-column CSS grid
   (content left, a reassurance block right). Since custom.js moves the
   highlights and specification tables into the left column and the
   reassurance block is hidden, let the content span the full grid width so
   the specification tables get the room they need, like the reference site.
   Note: this is a grid child, so grid-column controls the span — flex/width
   rules are ignored by the grid parent. */
.product__bottom-left { grid-column: 1 / -1 !important; }
.product__bottom-right { display: none !important; }

/* ── Instant search autocomplete (added by custom.js) ──────────────────────
   Dropdown under the header search, following the approved search prototype:
   suggestions and categories on the left, product results with thumbnail,
   brand and price on the right, and a see-all footer. Data is the native
   search ajax endpoint, so there is nothing to keep in sync here. */
.ps-searchbar__form { position: relative; }
/* ⚠️ iPad-də PANEL KƏSİLİRDİ — düzəlişi
   Panel axtarış sahəsi qədər ENLİDİR. Planşetdə başlıqda Menu düyməsi,
   loqo, axtarış və üç ikon bir sətirdədir, ona görə sahə ~260pt-ə düşür.
   İki sütun (1fr / 1.4fr) həmin enə bölünəndə məhsul sütunu ~150pt qalır:
   ad sətir-sətir sınır və `overflow:hidden` onu kəsir. Müştərinin
   göndərdiyi ekran görüntüsündə məhz bu görünür.

   Düzəliş EKRAN eninə görə deyil, PANELİN öz eninə görədir — konteyner
   sorğusu ilə. Defolt TƏK sütundur; iki sütun yalnız panel 30rem-dən geniş
   olanda açılır. Konteyner sorğusunu tanımayan brauzer tək sütunda qalır,
   yəni pis hal oxunaqlıdır, kəsik deyil.
   Əlavə: klaviatura açılanda panel ekrandan aşağı çıxırdı — indi öz içində
   sürüşür. */
.lv-ac {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid #E6E4DD; border-radius: .7rem;
  box-shadow: 0 18px 40px rgba(26,26,24,.15);
  overflow: hidden auto;
  /* Hündürlüyü JS klaviaturaya görə dəqiqləşdirir (aşağıda izah var);
     dəyişən təyin olunmayıbsa bu ehtiyat hədd işləyir. */
  max-height: var(--lv-ac-max, min(70vh, 34rem));
  overscroll-behavior: contain;
  z-index: 1050; text-align: left;
  container-type: inline-size;
}

/* ⚠️ PLANŞETDƏ PANEL SAHƏDƏN GENİŞ OLMALIDIR
   Əvvəlki düzəlişdə paneli tək sütuna saldım — kəsilmə getdi, amma panel
   İKİ DƏFƏ UZUN oldu və müştəri haqlı olaraq dedi ki, klaviatura açılanda
   nəticələrin çoxu görünmür.
   Ölçdüm: 1024-1199px arası axtarış sahəsi cəmi ~305px-dir (başlıqda Menu,
   loqo və üç ikonla eyni sətirdədir), halbuki başlıq konteyneri 936px-dir.
   Yəni yer var — sadəcə panel sahəyə bağlı idi.
   İndi panel sahənin mərkəzinə görə genişlənir: iki sütun qayıdır, hündürlük
   təxminən yarıya düşür. Ekrandan çıxmır — en `100vw - 3rem` ilə hədlənib. */
@media (max-width: 1199.98px) {
  .lv-ac {
    left: 50%; right: auto;
    width: min(46rem, calc(100vw - 3rem));
    transform: translateX(-50%);
  }
}
.lv-ac-grid { display: grid; grid-template-columns: 1fr; }
@container (min-width: 30rem) {
  .lv-ac-grid { grid-template-columns: 1fr 1.4fr; }
}
.lv-ac-col { padding: 14px 16px; }
.lv-ac-left { border-right: 1px solid #E6E4DD; }
.lv-ac-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6B6B66; margin: 0 0 8px; font-weight: 600; }
.lv-ac-h2 { margin-top: 14px; }
.lv-ac-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: .4rem; font-size: 14px; color: #1A1A18; text-decoration: none; cursor: pointer; }
.lv-ac-row:hover, .lv-ac-row.on { background: #EAF5EC; color: #277A34; }
.lv-ac-sug svg { color: #6B6B66; flex: 0 0 auto; }
.lv-ac-sug b { font-weight: 700; }
.lv-ac-cat { font-size: 13.5px; color: #33332F; }
.lv-ac-prod { gap: 12px; padding: 9px 8px; }
.lv-ac-prod:hover, .lv-ac-prod.on { background: #F7F5EF; }
.lv-ac-th { width: 46px; height: 46px; background: #F7F5EF; border: 1px solid #E6E4DD; border-radius: .4rem; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; }
.lv-ac-th img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lv-ac-info { flex: 1; min-width: 0; }
.lv-ac-br { display: block; font-size: 11px; color: #6B6B66; text-transform: uppercase; letter-spacing: .03em; }
.lv-ac-nm { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: #1A1A18; }
/* Qiymət neytral — səhifənin qalanı ilə eyni qayda (yaşıl = hərəkət) */
.lv-ac-pr { margin-left: auto; color: var(--lv-p-text, #303030); font-weight: 700; font-size: 14px; white-space: nowrap; padding-left: 8px; }
.lv-ac-empty { font-size: 13px; color: #6B6B66; padding: 6px 8px; }
.lv-ac-foot { display: block; border-top: 1px solid #E6E4DD; background: #F7F5EF; padding: 12px 16px; text-align: center; color: #277A34; font-weight: 600; font-size: 14px; text-decoration: none; }
.lv-ac-foot:hover, .lv-ac-foot.on { background: #EAF5EC; }
/* Tək sütunda ayırıcı aşağıda olmalıdır; iki sütunda isə sağda */
.lv-ac-left { border-right: 0; border-bottom: 1px solid #E6E4DD; }
@container (min-width: 30rem) {
  .lv-ac-left { border-right: 1px solid #E6E4DD; border-bottom: 0; }
}
/* Uzun məhsul adı kəsilməsin. `anywhere` YOX, `break-word`:
   `anywhere` min-content ölçüsünə də təsir edir və ad lazım olmadan
   söz ortasından qırılırdı ("Ventilationsanlæ | g" — render-də gördüm). */
.lv-ac-nm { overflow-wrap: break-word; }

/* Dar panel (tək sütun): qiymət adla eni bölüşməsin, ALTINA düşsün.
   Ada minimum en veririk ki, sətir sınması normal qalsın. */
@container (max-width: 29.99rem) {
  .lv-ac-prod { flex-wrap: wrap; }
  .lv-ac-info { min-width: 11rem; }
  .lv-ac-pr { margin-left: calc(46px + 12px); padding-left: 0; }
}

/* ── Reviews (productcomments) first pass ──────────────────────────────────
   The module is installed and rendering on the product page. This gives the
   section the lavvvs rhythm, a branded heading and a clean empty state and
   review card. The brand-gold stars, the rating summary and the distribution
   bars are a precise live pass once there are real reviews to render against,
   since the module draws its stars as icons rather than plain text. */
.product-comments-wrapper { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #E6E4DD; }
.product-comments-wrapper .section-title { font-size: 1.35rem; font-weight: 600; color: #1A1A18; margin-bottom: 1rem; }
.product-comment-list-item { border: 1px solid #E6E4DD; border-radius: .6rem; padding: 1rem 1.15rem; background: #fff; color: #33332F; }
.product-comment-list-item.py-3 { color: #6B6B66; }
.product-comments-wrapper .star-rating-group { margin: .35rem 0 1rem; }
/* ══════════════════════════════════════════════════════════════════════════
   HOME — Kateqoriya şəkil-naviqasiyası (image navigation boxes)
   Template: templates/_partials/home/lv-image-boxes.tpl
   Sətirdəki sütun sayı .lv-image-rows--N ilə gəlir, nisbət isə
   --lv-ib-ratio inline dəyişəni ilə (hər sətir üçün ayrı).
   ══════════════════════════════════════════════════════════════════════════ */

.lv-image-boxes {
  --lv-ib-gap: 1.5rem;
  padding-block: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
}

.lv-image-boxes .lv-section-title {
  margin: 0 0 .25rem;
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--bs-body-color, #1A1A18);
}

.lv-image-boxes .lv-section-subtitle {
  margin: 0 0 clamp(1.25rem, 1rem + .8vw, 2rem);
  font-size: 1rem;
  line-height: 1.5;
  color: #5B6660;
}

/* ── Rows ───────────────────────────────────────────────────────────────── */

.lv-image-rows {
  display: grid;
  gap: var(--lv-ib-gap);
  margin-bottom: var(--lv-ib-gap);
}
.lv-image-rows:last-child { margin-bottom: 0; }

.lv-image-rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lv-image-rows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lv-image-rows--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lv-image-rows--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Tile ───────────────────────────────────────────────────────────────── */

.lv-image-tile {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--lv-ib-ratio, 555 / 310);
  border-radius: var(--bs-border-radius-lg, .75rem);
  /* Şəkil hələ yüklənməyibsə (və ya fayl yoxdursa) kart sınmış görünməsin —
     brend qradienti qalır, başlıq oxunaqlıdır. */
  background-image: linear-gradient(155deg, #3E7F4A 0%, #1F4F2A 100%);
  color: #fff;
  text-decoration: none;
}
.lv-image-tile:hover,
.lv-image-tile:focus { color: #fff; text-decoration: none; }

.lv-image-tile:focus-visible {
  outline: 3px solid var(--bs-primary, #39A949);
  outline-offset: 3px;
}

.lv-image-tile__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.lv-image-tile:hover .lv-image-tile__img,
.lv-image-tile:focus-visible .lv-image-tile__img { transform: scale(1.045); }

/* Mətn hər şəkildə oxunaqlı qalsın — inline brightness() tək başına
   açıq şəkillərdə kifayət etmir. */
/* ⚠️ PƏRDƏ GÜCLƏNDİRİLDİ — səbəbi ölçmədən yox, baxmaqdan gəlir.
   Yeni kateqoriya şəkilləri (Gevindfittings, Pressfittings, Filter…) kataloq
   fotolarıdır: ağ fonda açıq-boz məhsul. Köhnə pərdə tünd şəkillər üçün
   qurulmuşdu və ağ mətn bu fotoların üstündə oxunmurdu.
   Şəkillər BO-dan gəlir və dəyişəcək, ona görə `brightness` ilə tək-tək
   tənzimləmək əvəzinə pərdəni özünü gücləndirmək daha davamlıdır:
   aşağıda tünd, yuxarıda tamamilə şəffaf — şəkil nə qədər açıq olsa da
   mətnin arxası həmişə tünd qalır. */
.lv-image-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .86) 0%,
              rgba(0, 0, 0, .74) 30%,
              rgba(0, 0, 0, .50) 55%,
              rgba(0, 0, 0, .18) 78%,
              rgba(0, 0, 0, 0)   96%);
}

.lv-image-tile__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .3rem;
  padding: clamp(.9rem, .6rem + 1vw, 1.5rem);
}

.lv-image-tile__title {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1.0625rem, .9rem + .55vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .35);
  /* "Badeværelsesmøbler" kimi uzun danimarka sözləri dar sütunda kartdan
     kənara çıxırdı — sözü yalnız məcbur qalanda bölürük. */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Sıx sətirlərdə sütun daralır — başlıq da bir ölçü kiçilsin ki, uzun
   danimarka sözləri söz ortasından bölünməsin. */
.lv-image-rows--4 .lv-image-tile__title,
.lv-image-rows--5 .lv-image-tile__title {
  font-size: clamp(1rem, .85rem + .42vw, 1.25rem);
}

.lv-image-tile__text {
  font-size: .9375rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
}

/* ── Ox: hover-də biri sola çıxır, digəri sağdan gəlir ──────────────────── */

.lv-image-tile__arrow {
  --lv-arrow-w: 1.5rem;
  display: block;
  width: var(--lv-arrow-w);
  height: 1rem;
  margin-top: .4rem;
  overflow: hidden;
}

.lv-image-tile__arrow-track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.2, .6, .2, 1);
}
.lv-image-tile__arrow-track svg {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
}
.lv-image-tile:hover .lv-image-tile__arrow-track,
.lv-image-tile:focus-visible .lv-image-tile__arrow-track { transform: translateX(-50%); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .lv-image-boxes { --lv-ib-gap: 1rem; }
  .lv-image-rows--3,
  .lv-image-rows--4,
  .lv-image-rows--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .lv-image-boxes { --lv-ib-gap: .75rem; }
  /* 2 sütun qalır: 7 kartı tam enli düzsək, ~3500px sürüşmə olur */
  .lv-image-rows--2,
  .lv-image-rows--3,
  .lv-image-rows--4,
  .lv-image-rows--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tək saylı sətirdə axırıncı kart 2 sütun tutsun — yoxsa yanında boşluq qalır */
  .lv-image-rows--3 > .lv-image-tile:last-child,
  .lv-image-rows--5 > .lv-image-tile:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
  /* Dar sütunda başlıq 2 sətrə düşür — bir az hündür nisbət lazımdır */
  .lv-image-tile { aspect-ratio: 4 / 3; }
  .lv-image-tile__body { padding: .75rem .8rem; }
  .lv-image-tile__arrow { --lv-arrow-w: 1.25rem; margin-top: .25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-image-tile__img,
  .lv-image-tile__arrow-track { transition: none; }
  .lv-image-tile:hover .lv-image-tile__img,
  .lv-image-tile:focus-visible .lv-image-tile__img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Paylaşılan komponent — animasiyalı ox
   Şablon: templates/_partials/home/lv-arrow.tpl
   ══════════════════════════════════════════════════════════════════════════ */

.lv-arrow { display: inline-grid; place-items: center; color: inherit; }

.lv-arrow__win {
  width: 1.5rem;
  height: 1rem;
  overflow: hidden;
}
.lv-arrow__track {
  display: flex;
  width: 200%;
  height: 100%;
  transform: translateX(0);
  transition: transform .42s cubic-bezier(.2, .6, .2, 1);
}
.lv-arrow__track svg { flex: 0 0 50%; width: 50%; height: 100%; }

/* Dairə içində variant */
.lv-arrow--outline {
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  opacity: .9;
  transition: background-color .2s, color .2s;
}

@media (prefers-reduced-motion: reduce) {
  .lv-arrow__track { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   HOME — Mosaic
   Şablon: templates/_partials/home/lv-mosaic.tpl
   Şəbəkə: 4 sütun. Böyük kart 2×2 xana tutur (sol yarı),
   qalan 4 kart sağ yarını 2×2 doldurur.
   ══════════════════════════════════════════════════════════════════════════ */

.lv-mosaic {
  --lv-mo-gap: 1.25rem;
  --lv-mo-radius: var(--bs-border-radius-lg, .75rem);
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.lv-mosaic__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lv-mo-gap);
}

.lv-mosaic__cell {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: 1;                       /* kiçik xanalar kvadratdır */
  border-radius: var(--lv-mo-radius);
  text-decoration: none;
  /* şəkil yüklənməsə də kart sınmasın */
  background-image: linear-gradient(155deg, #3E7F4A 0%, #1F4F2A 100%);
}
.lv-mosaic__cell:hover,
.lv-mosaic__cell:focus { text-decoration: none; }
.lv-mosaic__cell:focus-visible {
  outline: 3px solid var(--bs-primary, #39A949);
  outline-offset: 3px;
}

/* Böyük kart: 2 sütun + 2 sətir. Hündürlüyü kiçik xanalardan gəlir,
   ona görə burada aspect-ratio vermirik — özü kvadrat alınır. */
.lv-mosaic__cell--big {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

/* ── Kəşf kartı ─────────────────────────────────────────────────────────── */

.lv-mosaic__cell--discover { color: #fff; }
.lv-mosaic__cell--discover:hover { color: #fff; }

.lv-mosaic__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}
.lv-mosaic__cell:hover .lv-mosaic__img,
.lv-mosaic__cell:focus-visible .lv-mosaic__img { transform: scale(1.045); }

.lv-mosaic__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .60) 0%,
              rgba(0, 0, 0, .26) 40%,
              rgba(0, 0, 0, 0)   72%);
}

.lv-mosaic__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  padding: clamp(1rem, .7rem + 1vw, 1.75rem);
}

.lv-mosaic__text {
  max-width: 22ch;
  font-size: clamp(1rem, .9rem + .35vw, 1.25rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  overflow-wrap: break-word;
  hyphens: auto;
}
.lv-mosaic__cell--big .lv-mosaic__text {
  max-width: 16ch;
  font-size: clamp(1.375rem, 1.05rem + 1.15vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

/* Böyük kartın ağ konturlu düyməsi */
.lv-mosaic__btn {
  display: inline-block;
  padding: .65rem 1.4rem;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: var(--bs-border-radius, .5rem);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background-color .2s, color .2s, border-color .2s;
}
.lv-mosaic__cell:hover .lv-mosaic__btn,
.lv-mosaic__cell:focus-visible .lv-mosaic__btn {
  background: #fff;
  border-color: #fff;
  color: #1A1A18;
}

/* Kiçik kartlarda ox */
.lv-mosaic__cell:hover .lv-arrow__track,
.lv-mosaic__cell:focus-visible .lv-arrow__track { transform: translateX(-50%); }
.lv-mosaic__cell:hover .lv-arrow--outline,
.lv-mosaic__cell:focus-visible .lv-arrow--outline { background: rgba(255, 255, 255, .16); opacity: 1; }

/* ── Məhsul kartı ───────────────────────────────────────────────────────── */

.lv-mosaic__cell--product {
  background-image: none;
  background-color: var(--lv-mo-bg, #EFF2F0);
  color: var(--bs-body-color, #1A1A18);
}
.lv-mosaic__cell--bg1 { --lv-mo-bg: #E9F1EB; }   /* brend yaşılın çox açıq tonu */
.lv-mosaic__cell--bg2 { --lv-mo-bg: #F2EFE8; }   /* isti neytral */

/* ⚠️ ŞƏKİL SAHƏSİ İKİ DƏFƏ BÖYÜDÜLDÜ — ölçmə ilə.
   Başlanğıc: `inset: 0 0 38% 0` + `padding: 12%` → 403px-lik xanada şəkil
   cəmi 226px idi, thumbnail kimi görünürdü.
   Səbəb: mətn üçün ayrılan 38% + iri padding şəkil qutusunu ENLİ və ALÇAQ
   edirdi; kvadrat məhsul fotosu isə `contain` ilə hündürlüyə görə sığır,
   yəni yanlarda boş yer qalırdı və şəkil kiçilirdi.
   Həll: `discover` xanalarındakı kimi şəkil bütün xananı tutur, mətn isə
   üstünə düşür — fon rəngindən şəffafa keçən yumşaq zolaqla, ona görə ad və
   qiymət yenə oxunaqlıdır.
   Ölçdüm: 403px-lik xanada şəkil 226 → 371px (+64%). */
.lv-mosaic__media {
  position: absolute;
  inset: 0;
  padding: 4%;
}
/* Mətn zolağı: fon rəngi aşağıda tam, yuxarı doğru şəffaflaşır */
.lv-mosaic__cell--product .lv-mosaic__info {
  padding-top: 1.75rem;
  background: linear-gradient(to top,
              var(--lv-mo-bg) 0%,
              var(--lv-mo-bg) 58%,
              rgba(255, 255, 255, 0) 100%);
}
/* Qeyd: burada grid + max-height:100% işləmir — faiz max-height qeyri-müəyyən
   yüksəkliyə qarşı həll olunmur və şəkil qutudan daşırdı. width/height 100% +
   object-fit:contain həm mərkəzləşdirir, həm də daşmanın qarşısını alır. */
.lv-mosaic__media {
  overflow: hidden;              /* `zoom` böyüdəndə şəkil qutudan çıxmasın */
}
.lv-mosaic__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* `--lv-mo-zoom` şablondan gəlir (xana başına). Bəzi kataloq fotolarında
     məhsul kadrın ortasında kiçikdir və ətrafı ağdır — bu, həmin ağ haşiyəni
     kəsib məhsulu böyüdür. Verilməyibsə 1, yəni heç nə dəyişmir. */
  transform: scale(var(--lv-mo-zoom, 1));
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.lv-mosaic__cell:hover .lv-mosaic__media img,
.lv-mosaic__cell:focus-visible .lv-mosaic__media img {
  transform: scale(calc(var(--lv-mo-zoom, 1) * 1.06));
}

.lv-mosaic__info {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: clamp(.8rem, .6rem + .7vw, 1.25rem);
}
.lv-mosaic__title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--bs-body-color, #1A1A18);
  /* uzun məhsul adları kartı dağıtmasın */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lv-mosaic__price {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--bs-primary, #39A949);
}
/* Qiymət xanası şablonda həmişə render olunur (dinamik rejimdə JS doldurur).
   Boş qalırsa yer tutmasın. */
.lv-mosaic__price:empty { display: none; }
/* Başlıq da boş gələ bilər (sabit rejimdə ad yazılmayıbsa) */
.lv-mosaic__title:empty { display: none; }

/* Sarı nişan (məsələn "På lager") */
.lv-mosaic__splash {
  position: absolute;
  top: .85rem;
  left: .85rem;
  z-index: 2;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: #FFC200;
  color: #4A3B00;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
}

/* Brend loqosu */
.lv-mosaic__logo {
  position: absolute;
  top: clamp(.85rem, .6rem + .8vw, 1.4rem);
  right: clamp(.85rem, .6rem + .8vw, 1.4rem);
  z-index: 2;
  max-width: 30%;
  max-height: 2.25rem;
  object-fit: contain;
}
.lv-mosaic__logo--white { filter: brightness(0) invert(1); opacity: .95; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .lv-mosaic { --lv-mo-gap: 1rem; }
  .lv-mosaic__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Böyük kart enli banner olur, yoxsa 2 sütunda həddən artıq hündür qalır */
  .lv-mosaic__cell--big { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
}

@media (max-width: 575.98px) {
  .lv-mosaic { --lv-mo-gap: .75rem; }
  .lv-mosaic__cell--big { aspect-ratio: 4 / 3; }
  /* Dar kartda sarı nişan məhsulun üstünə düşür — şəkli bir az aşağı salırıq */
  .lv-mosaic__media { padding: 10% 6% 6%; }
  /* Dar kartda (177px) mətn 2 sətir olur və tam enli şəkil onun altına
     düşürdü — məhsulun aşağısı yazının arxasında qalırdı. Telefonda şəkli
     mətnin üstündə saxlayırıq. */
  .lv-mosaic__cell--product .lv-mosaic__media { inset: 0 0 44% 0; padding: 7% 8% 0; }
  .lv-mosaic__cell--product .lv-mosaic__info { padding-top: .6rem; background: none; }
  .lv-mosaic__logo { max-height: 1.5rem; }
  .lv-arrow--outline { width: 2.125rem; height: 2.125rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME — Məhsul karuseli (ps_featuredproducts override-ı)
   Şablon: modules/ps_featuredproducts/views/templates/hook/ps_featuredproducts.tpl
   Kart:   templates/_partials/home/lv-product-card.tpl
   Sürüşmə CSS overflow + scroll-snap ilədir; JS yalnız oxlar və göstərici üçün.
   ══════════════════════════════════════════════════════════════════════════ */

.lv-plist {
  --lv-pl-gap:  1rem;
  --lv-pl-card: 275px;      /* referansın şəkil ölçüsü də 275x275-dir */
  padding-block: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

.lv-plist__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1rem, .85rem + .6vw, 1.5rem);
}

.lv-plist__nav { display: flex; flex: 0 0 auto; gap: .5rem; }

.lv-plist__arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #D8DEDA;
  border-radius: 50%;
  background: #fff;
  color: var(--bs-body-color, #1A1A18);
  cursor: pointer;
  transition: border-color .18s, color .18s, background-color .18s, opacity .18s;
}
.lv-plist__arrow svg { width: 1.05rem; height: 1.05rem; }
.lv-plist__arrow:hover:not(:disabled) {
  border-color: var(--bs-primary, #39A949);
  color: var(--bs-primary, #39A949);
}
.lv-plist__arrow:disabled { opacity: .3; cursor: default; }
.lv-plist__arrow:focus-visible {
  outline: 3px solid var(--bs-primary, #39A949);
  outline-offset: 2px;
}

/* ── Sürüşən lent ───────────────────────────────────────────────────────── */

.lv-plist__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
  /* kartın hover kölgəsi kəsilməsin */
  padding-block: .25rem;
}
.lv-plist__viewport::-webkit-scrollbar { display: none; }

.lv-plist__track { display: flex; gap: var(--lv-pl-gap); }

/* ── Kart ───────────────────────────────────────────────────────────────── */

.lv-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--lv-pl-card);
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid #E7EBE8;
  border-radius: var(--bs-border-radius-lg, .75rem);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.lv-pcard:hover {
  border-color: #D3DBD6;
  box-shadow: 0 8px 24px rgba(16, 32, 22, .09);
}

.lv-pcard__media { position: relative; aspect-ratio: 1; }
.lv-pcard__media-link { display: block; height: 100%; }
.lv-pcard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
  transition: transform .4s cubic-bezier(.2, .6, .2, 1);
}
.lv-pcard:hover .lv-pcard__img { transform: scale(1.05); }

.lv-pcard__badges {
  position: absolute;
  top: .6rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  pointer-events: none;
}
.lv-pcard__badges:empty { display: none; }
.lv-pcard__badges--start { left: .6rem;  align-items: flex-start; }
.lv-pcard__badges--end   { right: .6rem; align-items: flex-end; }

.lv-pcard__variants,
.lv-pcard__badge {
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1.35;
}
.lv-pcard__variants     { background: #fff; border: 1px solid #E2E7E3; color: #5B6660; }
.lv-pcard__badge--offer { background: #FFC200; color: #4A3B00; font-weight: 700; }
.lv-pcard__badge--new   { background: var(--bs-primary, #39A949); color: #fff; font-weight: 600; }

/* ── Mətn ───────────────────────────────────────────────────────────────── */

.lv-pcard__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem 1rem 1rem;
}

.lv-pcard__brand {
  font-size: .8125rem;
  line-height: 1.2;
  color: #6B7770;
}

.lv-pcard__title {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bs-body-color, #1A1A18);
  text-decoration: none;
  /* uzun VVS adları kartı dağıtmasın */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lv-pcard__title:hover { color: var(--bs-link-color, #2F8A3D); text-decoration: underline; }

/* productcomments modulu yoxdursa bu blok boş qalır — yer tutmasın */
.lv-pcard__rating:empty { display: none; }
/* Rəyi olmayan məhsulda `productcomments` boş ulduzlar və "( ) anmeldelse(r)"
   sətri buraxır — 560 kartın hamısında təkrarlanır. Sinfi custom.js qoyur
   (CSS `:empty` etibarlı deyil: modul bəzən "0" yazır). Say dolan kimi
   sinif düşür və blok özü görünür. */
.lv-pcard__rating--empty { display: none !important; }

/* Qiymət və stok səbət düyməsinin altına girməsin */
.lv-pcard__prices,
.lv-pcard__stock { padding-right: 0; }

.lv-pcard__prices {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: auto;          /* kartların hündürlüyü fərqli olsa da qiymət altda hizalanır */
}
.lv-pcard__price {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--bs-body-color, #1A1A18);
}
.lv-pcard__price--offer { color: #C4322A; }
.lv-pcard__regular {
  font-size: .8125rem;
  color: #7A857E;
  text-decoration: line-through;
}

.lv-pcard__stock {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: #5B6660;
}
.lv-pcard__dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #9AA5A0;
  flex: 0 0 auto;
}
.lv-pcard__stock--available            .lv-pcard__dot { background: var(--bs-primary, #39A949); }
.lv-pcard__stock--last_remaining_items .lv-pcard__dot { background: #E8A100; }
.lv-pcard__stock--unavailable          .lv-pcard__dot { background: #C4322A; }

/* ── Səbətə at ──────────────────────────────────────────────────────────── */

/* ⚠️ KÖHNƏ SƏHVİN DÜZƏLİŞİ — düymə `position:absolute` idi və qiymət/stok
   sətrinə `padding-right` verməklə yer açılırdı. Reytinq və stok sətri
   olmayan məhsulda (kataloqun böyük hissəsi) kart qısalır və düymə BAŞLIĞIN
   üstünə düşürdü. İndi düymə normal axındadır: qiymətlə eyni sətirdə,
   sağa dayanmış — üst-üstə düşməsi mümkün deyil. */
.lv-pcard__foot {
  display: flex;
  flex-wrap: wrap;          /* sığmasa düymə alt sətrə keçsin — kəsilməsin */
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-top: auto;
  padding-top: .35rem;
}
.lv-pcard__actions { flex: 0 0 auto; }
.lv-pcard__form { margin: 0; }

.lv-pcard__add {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--bs-primary, #39A949);
  border-radius: 50%;
  background: #fff;
  color: var(--bs-primary, #39A949);
  cursor: pointer;
  transition: background-color .18s, color .18s;
}
.lv-pcard__add svg { width: 1.15rem; height: 1.15rem; }
.lv-pcard__add:hover,
.lv-pcard__add:focus-visible {
  background: var(--bs-primary, #39A949);
  color: #fff;
}
.lv-pcard__add:focus-visible { outline: 3px solid var(--bs-primary, #39A949); outline-offset: 2px; }

/* ── Sürüşmə göstəricisi ────────────────────────────────────────────────── */

.lv-plist__progress {
  height: 3px;
  margin-top: clamp(1rem, .85rem + .5vw, 1.5rem);
  border-radius: 999px;
  background: #E7EBE8;
  overflow: hidden;
}
.lv-plist__progress-bar {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bs-primary, #39A949);
  transition: transform .12s linear;
  transform-origin: left center;
}

.lv-plist__footer { margin-top: clamp(1rem, .85rem + .5vw, 1.5rem); text-align: center; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  .lv-plist { --lv-pl-card: 235px; }
}
@media (max-width: 575.98px) {
  .lv-plist { --lv-pl-card: 180px; --lv-pl-gap: .75rem; }
  .lv-plist__nav { display: none; }        /* barmaqla sürüşdürmək daha rahatdır */
  .lv-pcard__body { padding: .7rem .8rem .8rem; }
  .lv-pcard__prices, .lv-pcard__stock { padding-right: 0; }
  .lv-pcard__actions { position: static; margin-top: .5rem; }
  .lv-pcard__price { font-size: 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-plist__viewport { scroll-behavior: auto; }
  .lv-pcard__img { transition: none; }
  .lv-pcard:hover .lv-pcard__img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SAYT ENİ
   Bootstrap-ın .container-i standart olaraq 1320px-dir — 1920px ekranda hər
   tərəfdə ~300px boş yer qalır ("kataloq ortada sıxılıb" hissi).
   Ölçdüyümüz referans: məzmun 1725px, yan boşluq 98px (1920-də).
   1749 = 1725 məzmun + 24px Bootstrap gutter.
   calc(100vw - 4rem) kiçik ekranlarda kənara yapışmanın qarşısını alır.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --lv-shell-max: 1749px; }

@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: min(var(--lv-shell-max), calc(100vw - 4rem));
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   HEADER — iki sətir: loqo/axtarış/ikonlar + kateqoriya naviqasiyası
   Şablon: templates/_partials/header.tpl
   ══════════════════════════════════════════════════════════════════════════ */

.lv-header { background: #fff; }

.lv-header__bar { border-bottom: 1px solid #EDEFEE; }

.lv-header__top {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, .4rem + 1.4vw, 2rem);
  min-height: 4.75rem;
  padding-block: .75rem;
}

/* ── Menyu düyməsi ──────────────────────────────────────────────────────── */

.lv-header__menu {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
  padding: .5rem .25rem;
  border: 0;
  background: none;
  color: var(--bs-body-color, #1A1A18);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.lv-header__burger {
  display: grid;
  gap: 4px;
  width: 1.35rem;
}
.lv-header__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s, opacity .18s;
}
.lv-header--nav-open .lv-header__burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lv-header--nav-open .lv-header__burger span:nth-child(2) { opacity: 0; }
.lv-header--nav-open .lv-header__burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Loqo ───────────────────────────────────────────────────────────────── */

.lv-header__logo {
  flex: 0 0 auto;
  display: block;
  text-decoration: none;
}
/* ⚠️ LOQO ÖLÇÜSÜ — İKİ MANEƏ VAR, İKİSİ DƏ NƏZƏRƏ ALINIB

   1) `clamp(min, ARZUOLUNAN, max)` — böyüdən maksimum DEYİL, ortadakı
      ifadədir. Köhnə ifadə `1.4rem + 1.4vw` idi: 1600px ekranda
      22.4 + 22.4 = 44.8px verir. Maksimumu 2.75rem-dən 3.75rem-ə
      qaldırsaydıq belə loqo 44px-dən 44.8px-ə qalxardı — gözlə
      görünməzdi. 60px-ə çatmaq üçün həmin ifadənin özü artmalıdır
      (köhnə düsturla 60px yalnız ~2686px enində alınırdı).

   2) `max-width` — loqo 394×125-dir, nisbət 3.15:1. Hündürlük 60px
      olanda en 60 × 3.15 = 189px olur. Köhnə 190px hədd tam sərhəddə
      idi; bir piksel keçsə `object-fit: contain` şəkli qutunun içində
      kiçildib mərkəzləyir — yəni loqo böyümür, sadəcə boş yer qazanır.
      Ona görə hədd 15rem-ə (240px) qaldırıldı: bu ölçüdə heç vaxt
      məhdudlaşdırıcı olmur.

   Yeni ifadə 1366px-dən yuxarı 3.75rem-ə çatır, aşağıda tədricən
   kiçilir. Başlıq sətrinin hündürlüyü dəyişmir: axtarış sahəsi onsuz da
   68px-dir, loqo 60px onun içinə sığır (ölçdüm). */
.lv-header__logo img {
  display: block;
  width: auto;
  height: clamp(2rem, .98rem + 3.17vw, 3.75rem);
  max-width: 15rem;
  object-fit: contain;
}
.lv-header__logo-text {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--bs-body-color, #1A1A18);
}

/* ── Axtarış ────────────────────────────────────────────────────────────── */

.lv-header__search {
  flex: 1 1 auto;
  min-width: 0;                     /* flex uşağının daşmasının qarşısı */
}
/* Köhnə header üçün yazılmış `.ps-searchbar__form { max-width: 720px }` qaydası
   burada sahəni süni şəkildə daraldırdı — yeni headerdə eni flex konteyner
   idarə edir, ona görə tavanı götürürük (referansda da doldurur). */
.lv-header__search .ps-searchbar,
.lv-header__search .ps-searchbar__form {
  width: 100%;
  max-width: none;
}

/* ── Sağdakı ikonlar ────────────────────────────────────────────────────── */

.lv-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, .2rem + 1vw, 1.5rem);
  flex: 0 0 auto;
}

.lv-header__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .35rem .25rem;
  color: var(--bs-body-color, #1A1A18);
  font-size: .75rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: color .16s;
}
.lv-header__action:hover { color: var(--bs-link-color, #2F8A3D); text-decoration: none; }
.lv-header__action svg { width: 1.3rem; height: 1.3rem; }

/* Səbət modulu öz markup-unu gətirir — yalnız hizalayırıq */
.lv-header__action--cart > * { display: flex; flex-direction: column; align-items: center; }

/* ── Naviqasiya sətri ───────────────────────────────────────────────────── */

.lv-header__nav {
  border-bottom: 1px solid #EDEFEE;
  background: #fff;
}
.lv-header__nav .ps-mainmenu__tree,
.lv-header__nav .ps-mainmenu__tree-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.5rem, .2rem + 1vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.lv-header__nav .ps-mainmenu__tree-link {
  display: inline-block;
  padding: .9rem 0;
  color: var(--bs-body-color, #1A1A18);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  /* Axtarış öz sətrinə düşür — dar ekranda loqo ilə yanaşı sıxılmasın */
  .lv-header__top { flex-wrap: wrap; }
  .lv-header__search { order: 10; flex: 1 0 100%; }
  .lv-header__logo { margin-right: auto; }
}

@media (max-width: 767.98px) {
  .lv-header__menu-label { display: none; }
  .lv-header__action span { display: none; }
  .lv-header__action svg { width: 1.45rem; height: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lv-header__burger span { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BREND YAŞIL ŞKALASI
   billigvvs göy rəngin ton şkalasından istifadə edir (--color-brand-700 və s.).
   Bu, onun yaşıl qarşılığıdır. 500 və 600 mövcud brend dəyərləridir —
   dəyişmədim ki, indiyə qədər yazılmış CSS sınmasın; qalanları onların
   ətrafında hesablanıb (eyni çalar 129°, işıqlıq pilləli).

   KONTRAST QEYDİ: ağ mətn üçün 700 və daha tünd tonları işlət.
   600 (#2F8A3D) ağ üzərində 4.35-dir — WCAG AA (4.5) həddinin altında.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --lv-green-50:  #F4F9F4;
  --lv-green-100: #E4F1E6;
  --lv-green-200: #C8E4CC;
  --lv-green-300: #A1D6A9;
  --lv-green-400: #72C87E;
  --lv-green-500: #39A949;   /* = --bs-primary */
  --lv-green-600: #2F8A3D;   /* = action green */
  --lv-green-700: #2C7E38;   /* ağ mətn üçün ən açıq təhlükəsiz ton */
  --lv-green-750: #276D31;   /* naviqasiya zolağı — aşağıdakı ölçmədən */
  --lv-green-800: #235D2B;
  --lv-green-900: #1A3F1F;

  /* ── SEMANTİK TOKENLƏR ──────────────────────────────────────────────────
     Bunlar billigvvs-in FAKTİKİ fonlarından çıxarılıb (sənin brauzerində
     ölçdüyümüz dəyərlər), rəng adlarından yox — onların tokenləri
     --color-* kimi açıq deyil, ona görə ölçmə ilə getdik:

       #megamenu       rgb(0,100,150)  = #006496   CIE L* 40.1
       .cms-newsletter rgb(0,60,90)    = #003C5A   CIE L* 23.6
       header, footer  şəffaf/ağ

     Yaşıl qarşılıqlar EYNİ qavrayış işıqlığında (L*) seçilib, ona görə
     zolaq "eyni tündlükdə" görünür, sadəcə yaşıldır:
       --lv-green-750  #276D31  L* 40.6   ← #006496-nın qarşılığı
       --lv-green-900  #1A3F1F  L* 23.3   ← #003C5A-nın qarşılığı           */
  /* ⚠️ ZOLAĞIN RƏNGİ DƏYİŞDİ — müştərinin 2-ci iradı: "menyu loqodakı və
     saytın qalanındakı yaşılla eyni olsun".
     Əvvəl --lv-green-750 (#276D31) idi: billigvvs-in tünd mavisinin eyni
     işıqlıqdakı qarşılığı. Referansla ölçüsü düz idi, amma Lavvvs-in öz
     palitrasında ən tünd yaşıl o idi — loqo #39A949, düymələr #2F8A3D,
     zolaq isə hamısından tünd. Rəng çaları (hue 128°) eyni olsa da göz bunu
     "başqa yaşıl" kimi oxuyurdu.
     İndi zolaq saytın hər yerində işlənən ƏMƏLİYYAT YAŞILIDIR (#2F8A3D).
     Ağ mətnlə kontrast 4.35:1 — 750-nin 6.33-ündən aşağı, amma zolaqdakı
     mətn 14px qalın böyük hərflərlə yazılır, ona görə oxunaqlı qalır.
     Loqonun öz rəngi (#39A949) fon kimi işlənə bilməzdi: ağ mətnlə cəmi
     3.02:1 verir. Daha ciddi kontrast istənsə --lv-green-700 (#2C7E38,
     5.06:1) demək olar — gözlə fərq az, uyğunluq tam. */
  --lv-nav-bg:        var(--lv-green-600);
  --lv-nav-fg:        #fff;
  --lv-nav-fg-dim:    rgba(255, 255, 255, .78);
  --lv-nav-line:      rgba(255, 255, 255, .16);
  --lv-deep-bg:       var(--lv-green-900);   /* newsletter bloku üçün — hazır */
}


/* ══════════════════════════════════════════════════════════════════════════
   HEADER — yaşıl tonlar + hamburger yalnız mobil
   ══════════════════════════════════════════════════════════════════════════ */

/* Naviqasiya sətri DOLU yaşıl zolaqdır — billigvvs-də #megamenu #006496-dır,
   açıq çalar deyil. Sətrin özü rəngi daşıyır, içindəki modul şəffaf qalır. */
.lv-header__nav {
  background: var(--lv-nav-bg);
  border-bottom: 0;
}
/* ⚠️ `:not(.offcanvas)` HƏYATİ ƏHƏMİYYƏTLİDİR — MOBİL MENYU BUNA GÖRƏ SINIRDI.
   ps_mainmenu modulu mobil menyunu da `.ps-mainmenu` sinfi ilə render edir
   (`#mobileMenu.ps-mainmenu.ps-mainmenu--mobile.offcanvas`) və o, DOM-da
   `.lv-header__nav`-ın içindədir. Yəni aşağıdakı "şəffaf" qaydası zolağın
   içindəki modulu deyil, AÇILAN MOBİL PANELİ də şəffaflaşdırırdı: Bootstrap-ın
   `--bs-offcanvas-bg` ağ fonu ləğv olunurdu, panel açılanda arxadakı səhifə
   mətnin içindən görünürdü və menyu oxunmaz olurdu (müştərinin 1-ci iradı).
   Ölçdüm: `#mobileMenu` üçün `background-color: rgba(0,0,0,0)` idi. */
.lv-header__nav .ps-mainmenu:not(.offcanvas),
.lv-header__nav .ps-mainmenu__tree,
.lv-header__nav .ps-mainmenu__tree-list,
.lv-header__nav .ps-mainmenu__tree-item,
.lv-header__nav .ps-mainmenu__tree-item-wrapper { background: transparent; }

/* Yuxarı sətir ağ qalır (referansda da header şəffafdır) — yalnız nazik ayırıcı */
.lv-header__bar { border-bottom-color: var(--lv-green-100); }

/* Linklər ağ.
   `!important` MƏCBURİDİR: həm Hummingbird-in öz `:hover` qaydası, həm də
   sətir 118-dəki köhnə `.lv-open{color:#2f8a3d!important}` bu linki brend
   yaşılına boyayırdı — yaşıl zolağın üstündə mətn itirdi. */
.lv-header__nav .ps-mainmenu__tree-link,
.lv-header__nav .ps-mainmenu__tree-link:visited,
.lv-header__nav .ps-mainmenu__tree-link:active { color: var(--lv-nav-fg) !important; }

/* ⚠️ OX DA AĞ OLMALIDIR.
   Ox düyməsi linkin QARDAŞIDIR, uşağı deyil — ona görə yuxarıdakı ağ rəngi
   miras almırdı. `color: inherit` ilə sarğıdan, oradan da mövzunun mətn
   rəngindən (#1A1A18) alırdı və yaşıl zolağın üstündə qara görünürdü
   (ölçdüm: ox rgb(26,26,24), ad isə ağ). İndi hər iki vəziyyət açıq verilir:
     yaşıl zolaqda  → ağ
     tab ağ olanda  → tünd yaşıl (adla eyni) */
.lv-header__nav .ps-mainmenu__tree-dropdown-toggle { color: var(--lv-nav-fg) !important; }
.lv-header__nav .ps-mainmenu__tree-item:hover > * > .ps-mainmenu__tree-dropdown-toggle,
.lv-header__nav .ps-mainmenu__tree-item.lv-open .ps-mainmenu__tree-dropdown-toggle,
.lv-header__nav .ps-mainmenu__tree-item-wrapper:focus-within > .ps-mainmenu__tree-dropdown-toggle {
  color: var(--lv-green-800) !important;
}

.lv-header__nav .ps-mainmenu__tree-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ── Üst səviyyə = TAB (referansdakı kimi) ───────────────────────────────
   billigvvs-də açıq bənd AĞ FONLU tab olur, tünd mətnlə; alt panel də ağdır,
   ikisi bir bütöv ağ forma kimi oxunur. Alt xətt yerinə bunu qururuq —
   həm referansa uyğundur, həm də "mətn fonda itir" problemini kökündən həll
   edir, çünki hover-də fon ağ, mətn tünd olur.                            */
@media (min-width: 768px) {
  .lv-header__nav .ps-mainmenu__tree,
  .lv-header__nav .ps-mainmenu__tree-list { gap: 0; }

  /* Zolağın hündürlüyü referansdakı ~40px-ə uyğunlaşdırılıb */
  .lv-header__nav .ps-mainmenu__desktop,
  .lv-header__nav .ps-mainmenu--desktop { padding: 0; }

  .lv-header__nav .ps-mainmenu__tree-link {
    padding: .6rem 1.05rem;
    font-size: .875rem;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color .12s ease, color .12s ease;
  }

  /* Hummingbird-in öz hamburgeri desktopda lazım deyil */
  .lv-header__nav .ps-mainmenu__mobile-toggle { display: none !important; }

  /* ── TAB = AD + OX DÜYMƏSİ ────────────────────────────────────────────
     Ağ tab fonu əvvəl birbaşa linkin üstündə idi. İndi tabın içində iki
     element var (ad + ox düyməsi), ona görə fon SARĞIYA verilir ki, ikisi
     bir bütöv ağ forma kimi görünsün. */
  .lv-header__nav .ps-mainmenu__tree-item-wrapper {
    display: flex; align-items: stretch;
    transition: background-color .12s ease;
  }
  .lv-header__nav .ps-mainmenu__tree-item:hover > .ps-mainmenu__tree-item-wrapper,
  .lv-header__nav .ps-mainmenu__tree-item.lv-open > .ps-mainmenu__tree-item-wrapper,
  .lv-header__nav .ps-mainmenu__tree-item-wrapper:focus-within { background: #fff; }

  /* hover, fokus və açıq vəziyyət — üçü də eyni görünür */
  .lv-header__nav .ps-mainmenu__tree-link:hover,
  .lv-header__nav .ps-mainmenu__tree-link:focus,
  .lv-header__nav .ps-mainmenu__tree-item:hover > * > .ps-mainmenu__tree-link,
  .lv-header__nav .ps-mainmenu__tree-item-wrapper:focus-within > .ps-mainmenu__tree-link,
  .lv-header__nav .ps-mainmenu__tree-item.lv-open .ps-mainmenu__tree-link {
    background: transparent !important;
    color: var(--lv-green-800) !important;
    text-decoration: none !important;
  }
}

/* Açılan ağ panel yaşıl zolağın altından çıxır — kənar xətt də yaşıl olsun */
@media (min-width: 1200px) {
  .lv-header__nav .ps-mainmenu--desktop .ps-mainmenu__tree-item .submenu {
    border-top-color: var(--lv-green-800);
  }

  /* Ox artıq ayrıca düymədir, ona görə link üçün sağ boşluq saxlamağa
     ehtiyac yoxdur — düymə yanında öz yerini tutur. Oxu olmayan bənd
     (alt kateqoriyası yox) tam boşluqla qalır, çünki modul o bəndlərdə
     düyməni ümumiyyətlə render etmir. */
  .lv-header__nav .ps-mainmenu--desktop .ps-mainmenu__tree-link { padding-right: .3rem; }
  .lv-header__nav .ps-mainmenu--desktop .ps-mainmenu__tree-item:not(:has(.ps-mainmenu__tree-dropdown-toggle)) .ps-mainmenu__tree-link {
    padding-right: 1.05rem;
  }
}

/* Dar masaüstü (1200–1399): səkkiz bənd bir sətirdə qalsın deyə yan boşluq
   bir qədər azalır. Ölçmə: bu enlərdə konteyner 1116px, bəndlərin cəmi isə
   bu qayda olmadan 1165px olurdu və zolaq iki sətrə bölünürdü. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .lv-header__nav .ps-mainmenu--desktop .ps-mainmenu__tree-link { padding-left: .8rem; }
  .lv-header__nav .ps-mainmenu--desktop .ps-mainmenu__tree-item:not(:has(.ps-mainmenu__tree-dropdown-toggle)) .ps-mainmenu__tree-link {
    padding-right: .8rem;
  }

  /* Açıq tab ağ panelin üstündədir — aralarında kölgə/xətt olmasın ki,
     ikisi bir bütöv ağ forma kimi görünsün (referansdakı kimi). */
  .lv-header__nav .ps-mainmenu--desktop .ps-mainmenu__tree-item.lv-open .submenu { border-top: 0; }
}

/* ⚠️ MOBİL/TABLET — ƏSASLI DÜZƏLİŞ
   Hummingbird-in ps_mainmenu widget-i İKİ menyu render edir:
     .ps-mainmenu--desktop  → içindəki <nav> `d-none d-xl-block`, yəni
                              1200px-dən aşağıda Bootstrap onu gizlədir;
                              yanında öz hamburger düyməsi var
     .ps-mainmenu--mobile   → Bootstrap offcanvas (#mobileMenu), tam hazır
   Yəni 1200px-dən aşağıda yaşıl zolağın içində kateqoriya siyahısı YOXDUR —
   yalnız Hummingbird-in öz hamburgeri qalırdı və mənim hamburgerimlə birlikdə
   iki düymə görünürdü. Ona görə:
     · 1200px-dən aşağı zolağı yığırıq və desktop bloku (öz düyməsi ilə) gizlədirik
     · bizim hamburger birbaşa Hummingbird-in offcanvas menyusunu açır (header.tpl)
   Offcanvas `position:fixed`-dir və `.ps-mainmenu--desktop`-un içində deyil,
   ona görə zolağın yığılması ona təsir etmir.                                */
@media (max-width: 1199.98px) {
  .lv-header__nav {
    background: transparent;
    border: 0;
  }
  .lv-header__nav > .container { padding: 0; }
  .lv-header__nav .ps-mainmenu--desktop { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBİL / PLANŞET MENYUSU (offcanvas #mobileMenu)
   ──────────────────────────────────────────────────────────────────────────
   Bura qədər bu panel heç cür bəzədilməmişdi — Hummingbird-in öz görünüşünə
   buraxılmışdı. Yuxarıdakı `:not(.offcanvas)` düzəlişi onu yenidən ağ edir;
   aşağıdakılar isə panelin brendə uyğun və barmaqla rahat işlənən olmasını
   təmin edir. Hər fon AÇIQ verilir — modulun gələcək yeniləməsi yenidən
   şəffaflaşdırmasın deyə.
   ══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ ID TOQQUŞMASI — PrestaBlog modulu vs Hummingbird menyusu
   ──────────────────────────────────────────────────────────────────────────
   Nasazlıq: planşet enində (iPad, 820px) burger menyusu AÇILIR, amma panel
   tamamilə ağ və boşdur. Telefonda isə işləyir.

   Səbəb ölçmə ilə tapıldı — 820px-də `#menu-mobile` `display: none`,
   390px-də `display: block`. Mənbə temanın CSS-i deyil, PrestaBlog
   modulunun `prestablog.css`-idir:

       #menu-mobile { display: none; }                  ← media YOXDUR
       @media (max-width: 770px) {
         #menu-mobile { display: block; background:#333; color:#fff; ... }
       }

   Modul öz bloq kateqoriya menyusunu nəzərdə tutur, amma Hummingbird-in
   mobil menyusunun `<nav>`-ı DA eyni id-ni daşıyır (`#menu-mobile`).
   ID seçicisi (1,0,0) temanın `.ps-mainmenu--mobile .menu--current`
   qaydasından (0,3,0) güclüdür, ona görə:
     ≤770px → modulun media qaydası təsadüfən `block` verir → işləyir
     ≥771px → `display:none` qalib gəlir → boş ağ panel  ← müştərinin gördüyü

   Düzəliş: modulun faylına toxunmuruq (yeniləmə silər). Temanın ÖZ
   vəziyyət siniflərini ID səviyyəsində təkrar yazırıq — beləliklə panel
   məntiqi (cari/valideyn sürüşməsi) olduğu kimi qalır, yalnız modulun
   təsadüfi təsiri sıfırlanır. Modulun öz bloq menyusuna toxunmur, çünki
   hər şey `.ps-mainmenu--mobile` altında məhdudlaşdırılıb. */
.ps-mainmenu--mobile #menu-mobile.menu--current { display: block; left: 0; }
.ps-mainmenu--mobile #menu-mobile.menu--parent  { display: none; }
/* Modulun ≤770px-də verdiyi bəzək də bizim panelə düşür — sıfırlayırıq */
.ps-mainmenu--mobile #menu-mobile {
  background: transparent;
  color: inherit;
  padding: 0;
  margin-bottom: 0;
  cursor: auto;
}

.ps-mainmenu--mobile.offcanvas {
  --bs-offcanvas-bg: #fff;
  --bs-offcanvas-width: min(21rem, 88vw);
  background-color: #fff !important;
  color: var(--lv-p-text, #303030);
}
.ps-mainmenu--mobile.offcanvas .ps-mainmenu__mobile,
.ps-mainmenu--mobile.offcanvas .menu,
.ps-mainmenu--mobile.offcanvas .menu__list { background-color: #fff; }

/* Başlıq zolağı — brend yaşılı, bağla düyməsi ağ */
.ps-mainmenu--mobile.offcanvas .offcanvas-header {
  background: var(--lv-nav-bg);
  color: #fff;
  min-height: 3.25rem;
  padding: .5rem .75rem;
}
.ps-mainmenu--mobile.offcanvas .offcanvas-header .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
  opacity: .9;
}
.ps-mainmenu--mobile.offcanvas .js-back-button,
.ps-mainmenu--mobile.offcanvas .js-back-button:hover { color: #fff; text-decoration: none; }

/* Bəndlər: 48px toxunma hündürlüyü, aydın ayırıcı, tünd mətn */
.ps-mainmenu--mobile.offcanvas .menu__list { list-style: none; margin: 0; padding: 0; }
.ps-mainmenu--mobile.offcanvas .menu__list > li {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--lv-p-border, #E6E4DD);
  background-color: #fff;
}
.ps-mainmenu--mobile.offcanvas .menu__link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  min-height: 3rem; padding: .5rem 1rem;
  color: var(--lv-p-text, #303030) !important;
  font-size: 1rem; font-weight: 500; text-decoration: none;
}
.ps-mainmenu--mobile.offcanvas .menu__link:active { background: var(--lv-green-50); }

/* Alt kateqoriya düyməsi — linkdən ayrı, öz toxunma sahəsi ilə.
   Beləliklə mobilde də qayda eynidir: ad = keçid, ox = aç. */
.ps-mainmenu--mobile.offcanvas .menu__toggle-child {
  flex: 0 0 3rem; width: 3rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--lv-green-700) !important;
  border-left: 1px solid var(--lv-p-border, #E6E4DD);
  border-radius: 0; padding: 0; text-decoration: none;
}
.ps-mainmenu--mobile.offcanvas .menu__toggle-child:active { background: var(--lv-green-50); }
/* Bootstrap-ın `.btn-link` rəngi içəridəki <i>-yə düşürdü — ox mavi görünürdü */
.ps-mainmenu--mobile.offcanvas .menu__toggle-child * { color: inherit; }

/* Alt səviyyənin başlığı */
.ps-mainmenu--mobile.offcanvas .menu__title {
  display: block; padding: .85rem 1rem .5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lv-p-text-sub, #6B6B66);
  background: var(--lv-green-50); border-bottom: 1px solid var(--lv-p-border, #E6E4DD);
}

/* Uzun siyahılar (məs. "Alle mærker") panelin içində sürüşsün */
.ps-mainmenu--mobile.offcanvas .ps-mainmenu__mobile {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Səbət/hesab ikonları hover-də brend yaşılına keçir */
.lv-header__action:hover { color: var(--lv-green-700); }

/* Səbət modulunun öz <a>-sı brauzerin standart link rəngini gətirir
   (mavi + alt xətt). Qonşu ikonlarla eyniləşdiririk. */
.lv-header__action--cart a { color: inherit; text-decoration: none; }
.lv-header__action--cart a:hover { color: var(--lv-green-700); text-decoration: none; }

/* Hamburger yalnız kateqoriya zolağı olmayan enlərdə görünür.
   Zolaq (desktop menyu) 1200px-dən yuxarı işləyir — orada düymə gizlənir. */
@media (min-width: 1200px) {
  .lv-header__menu { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEGA MENYU PANELİ — referansdakı sütun quruluşu
   2-ci səviyyə = sütun başlığı, 3-cü səviyyə = altındakı linklər.
   Markup-u JS yığır (custom.js), mənbə Hummingbird-in ps_mainmenu.tpl-idir.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

  /* Köhnə düz siyahı gizlənir — yerinə .lv-mega-grid gəlir.
     Silmirik ki, Hummingbird-in öz tab JS-i xəta verməsin. */
  .ps-mainmenu--desktop .submenu .submenu__left.lv-mega-built {
    display: block !important;
  }
  .ps-mainmenu--desktop .submenu .submenu__left.lv-mega-built > .submenu__left-item {
    display: none !important;
  }

  /* Çoxsütunlu axın: qrupların hündürlüyü fərqlidir (bəzi kateqoriyaların
     3-cü səviyyəsi yoxdur), `columns` bunu boşluq qoymadan yığır. */
  .lv-mega-grid {
    column-count: 4;
    column-gap: 36px;
  }
  @media (min-width: 1600px) {
    .lv-mega-grid { column-count: 5; }
  }

  /* Şaquli boşluqlar bir qədər yığcamlaşdırıldı — panel ekranı doldurmasın
     (müştərinin 3-cü iradı). Oxunaqlılıq eynidir, sadəcə hava azalıb. */
  .lv-mega-group {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 18px;
  }

  .lv-mega-group__head {
    display: block;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #1E2B22;
    line-height: 1.3;
    padding: 0 0 8px;
    text-decoration: none;
  }
  .lv-mega-group__head:hover { color: var(--lv-green-700); text-decoration: underline; }

  .lv-mega-group__link {
    display: block;
    font-size: 14.5px;
    color: #47524A;
    line-height: 1.35;
    padding: 4px 0;
    text-decoration: none;
  }
  .lv-mega-group__link:hover { color: var(--lv-green-700); text-decoration: underline; }

  /* Alt kateqoriyası olmayan bənd: tək başlıqdır, az yer tutsun */
  .lv-mega-group--flat { margin-bottom: 16px; }
  .lv-mega-group--flat .lv-mega-group__head { padding-bottom: 0; }

  /* Köhnə qayda bunu grid hüceyrəsi kimi yerləşdirirdi — indi blokdur */
  .lv-mega-all { margin: 8px 0 0 !important; }
}

/* Kartların qradient ehtiyat fonu da şkaladan gəlsin */
.lv-image-tile,
.lv-mosaic__cell {
  background-image: linear-gradient(155deg, var(--lv-green-700) 0%, var(--lv-green-900) 100%);
}

/* Mosaic məhsul kartlarının pastel fonları */
.lv-mosaic__cell--bg1 { --lv-mo-bg: var(--lv-green-50); }
.lv-mosaic__cell--bg2 { --lv-mo-bg: #F2EFE8; }   /* isti neytral — kontrast üçün */

/* ⚠️ MƏHSUL XANASI QRADİENT ALMAMALIDIR — ölçdüm, alırdı.
   Yuxarıdakı qradient `discover` xanaları üçün EHTİYATdır (kateqoriyanın
   şəkli yoxdursa kart sınmasın). Amma seçici bütün `.lv-mosaic__cell`-ə
   düşürdü, ona görə məhsul xanasının açıq pastel fonunun (#F4F9F4 / #F2EFE8)
   üstünə tünd yaşıl qradient çəkilirdi və:
     · məhsul adı (tünd mətn) tünd yaşıl fonda oxunmurdu,
     · kataloq fotoları ağ fonlu JPEG olduğu üçün yaşıl kartda ağ yamaq kimi
       görünürdü.
   Dinamik məhsullardan sonra bu daha da nəzərə çarpdı — indi qradient yalnız
   `discover` xanalarında qalır. */
.lv-mosaic__cell--product { background-image: none; }


/* ══════════════════════════════════════════════════════════════════════════
   ANA SƏHİFƏ — SLAYDER ƏN ÜSTDƏ
   ──────────────────────────────────────────────────────────────────────────
   `index.tpl` əvvəlcə bizim iki bloku (lv-image-boxes, lv-mosaic), sonra
   `{$HOOK_HOME}`-u çıxarır. `{$HOOK_HOME}` isə displayHome-a qoşulmuş BÜTÜN
   modulların hazır HTML-idir — onu Smarty-də parçalamaq mümkün deyil, yəni
   "yalnız slayderi yuxarı çək" şablondan alınmır. `{hook mod='ps_imageslider'}`
   yazsaydıq slayder iki dəfə render olunardı.

   Xoşbəxtlikdən Hummingbird `#content.page-content--home`-u GRID kimi qurur
   (ölçdüm: `display: grid`, bölmələr arası `gap: 40px`). Grid-də `order`
   işlədiyinə görə bir sətir bəsdir. Üstünlüyü: digər modullara toxunmur və
   gələcəkdə displayHome-a yeni modul əlavə olunsa sıra pozulmur.           */
body#index #content.page-content--home > .ps-imageslider { order: -1; }

/* Creative Slider (modul qovluğu: `layerslider`) da displayHome-a qoşulsa
   eyni qaydada ən üstə qalxsın. Köhnə saytda markup belədir:
     <div class="ls-slide-container …"><div id="layerslider_11" class="ls-wp-container">
   Hook adı sarğının ikinci sinfini dəyişir (top-column-content və s.), ona
   görə sabit olan `.ls-slide-container`-ə və `#layerslider_*`-a bağlanırıq. */
body#index #content.page-content--home > .ls-slide-container,
body#index #content.page-content--home > .ls-wp-container,
body#index #content.page-content--home > [id^="layerslider_"] { order: -1; }

/* Modul gələcəkdə sarğını dəyişsə də tutsun — ayrıca blok, çünki qrupdakı
   bir etibarsız selektor bütün qaydanı ləğv edir. */
body#index #content.page-content--home > *:has([id^="layerslider_"]) { order: -1; }


/* ══════════════════════════════════════════════════════════════════════════
   KATEQORİYA SƏHİFƏSİ
   Referans: https://www.billigvvs.dk/Koekken.html
   Quruluş: tam enli hero → alt kateqoriya zolağı → alət sətri → şəbəkə

   ⚠️ BO TƏLƏBİ: Design → Theme & Logo → kateqoriya səhifəsinin layout-u
   "Full width" olmalıdır. Sol sütun qalarsa hero mərkəzdən sürüşür
   (tam enlilik `calc(50% - 50vw)` ilə qurulur və o, yalnız mərkəzlənmiş
   konteynerdə düz işləyir).
   ══════════════════════════════════════════════════════════════════════════ */

/* Hero-nun içində öz breadcrumb-ımız var — mövzunun öz zolağı təkrar olmasın */
body#category .breadcrumb__wrapper { display: none; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* ⚠️ AÇIQ (BOZ-AĞ) HERO — TÜND YAŞIL PƏRDƏDƏN İMTİNA
   ──────────────────────────────────────────────────────────────────────────
   ƏVVƏLKİ SƏHV: hero-nun fonu brend yaşılı qradient idi, şəklin üstünə isə
   `rgba(10,24,14,.74)` — tünd yaşıl pərdə düşürdü. Mətn ağ idi.

   Bu, redaksiya tipli (tünd, geniş planlı) banner şəkli üçün doğru olardı.
   Amma sənin kateqoriya şəkilləri belə deyil: onlar AĞ FONDA kəsilmiş
   məhsul fotolarıdır — yoxladım, 2000×400 çərçivənin orta rəngi 241…246,
   sol tərəf isə tam ağdır (255,255,255). Yəni pərdə boş ağ sahənin üstünə
   düşəndə həmin sahə bütöv tünd yaşıl bloka çevrilirdi. Məhsul kadrın
   ortasındadırsa (35-ventilation) solda ümumiyyətlə heç nə görünmür —
   "arxası tam yaşıldır" məhz budur. 17-varme-də isə Panasonic bloku daha
   geniş yer tutduğu üçün keçid yumşaq görünürdü. Səhv şəkillərdə deyil,
   mənim rəng seçimimdə idi.

   İNDİ: fon ağ, pərdə AĞDIR (soldan sağa şəffaflaşır), mətn tünddür.
   Ağ pərdə ağ fonun üstündə görünmür — keçid tam hamar olur; yalnız
   məhsulun özü solda yumşaq şəkildə pərdələnir. Sol kənarda pərdə 0.97
   qatılığındadır, ona görə hansısa kateqoriyaya tünd foto qoyulsa belə
   tünd mətn oxunaqlı qalır. */
.lv-cathero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* 13–20rem idi; təsvir bannerdən çıxarıldığına görə banner də alçaldıldı
     — müştərinin "şəkil çox yer tutur" iradı. */
  min-height: clamp(10rem, 12.5vw, 14.5rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-bottom: 0;
  background-color: #fff;
  border-bottom: 1px solid var(--lv-p-border);
}

/* ŞƏKİL SAĞ YARIDA — mətnin ÜSTÜNDƏ deyil, YANINDA
   Kateqoriya şəkilləri ağ fonda kəsilmiş məhsul fotolarıdır və məhsul
   kadrın ortasında olur. Şəkil tam enli qalsaydı məhsul düz mətnin altına
   düşürdü (yuxarıdakı görüntüdə "Ventilation" təsviri borunun üstünə
   minirdi). Ona görə şəkli sağ 52%-ə sıxırıq: mətn solda, məhsul sağda,
   üst-üstə düşmür.
   Kəsik yeri görünmür, çünki şəklin öz fonu da ağdır — zolağın fonu ilə
   eynidir. Hansısa kateqoriyaya tünd foto qoyulsa kənar sərt görünməsin
   deyə aşağıdakı pərdə şəklin sol kənarını ağa qarışdırır. */
.lv-cathero__media {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 52%;
}
.lv-cathero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Şəklin sol kənarını zolağın ağ fonuna qarışdırır */
.lv-cathero__scrim {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 52%;
  background: linear-gradient(90deg,
    #fff 0%,
    rgba(255, 255, 255, .82) 12%,
    rgba(255, 255, 255, .28) 26%,
    rgba(255, 255, 255, 0)   40%);
}

/* Dar ekranda iki sütuna yer yoxdur — şəkil fona keçir, üstündən açıq
   pərdə salınır ki, tünd mətn hər halda oxunsun. */
@media (max-width: 991.98px) {
  .lv-cathero__media { width: 100%; }
  .lv-cathero__scrim {
    width: 100%;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .93) 0%,
      rgba(255, 255, 255, .88) 100%);
  }
  .lv-cathero__body { max-width: none; }
}

.lv-cathero > .container { position: relative; }

.lv-cathero__body {
  color: var(--lv-p-text);
  padding: clamp(1.25rem, 2vw, 2.25rem) 0;
  /* Şəkil sağ 52%-i tutur. Mətn ona çatmamalıdır — ona görə həm mütləq
     (44rem), həm də nisbi (44vw) hədd qoyulur. Sabit `rem` tək qalsaydı
     1280-1400px arası mətn şəklin üstünə minirdi (yoxladım: 102px). */
  max-width: min(44rem, 44vw);
}

/* Boşluq azaldıldı: təsvir artıq hero-da deyil, ona görə banneri süni
   yüksəkliyə dartmağa ehtiyaq qalmayıb (əvvəl 3.5rem idi). */
.lv-cathero__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-bottom: clamp(.75rem, 1.6vw, 1.5rem);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lv-p-text-sub);
}
.lv-cathero__crumbs a { color: var(--lv-p-text-sub); text-decoration: underline; }
.lv-cathero__crumbs a:hover { color: var(--lv-green-700); }
.lv-cathero__crumb-sep { opacity: .55; }

/* Başlıq kiçildildi — müştərinin iradı. 1440px-də 44.8px → 34px,
   1920px-də 48px → 36px. Kateqoriya adı hələ də səhifənin ən iri
   elementidir, sadəcə banner boyda deyil. */
.lv-cathero__title {
  margin: 0;
  font-size: clamp(1.5rem, .95rem + 1.35vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  color: #1A1A18;
}

/* ── Kateqoriya təsviri — bannerin altında, tam oxu enində ───────────────
   2 sətir göstərilir, qalanı "Vis mere" ilə açılır. `line-clamp` mətni
   KƏSMİR, sadəcə gizlədir — açılanda tam HTML olduğu kimi görünür.
   Düyməni JS yalnız mətn həqiqətən sığmayanda göstərir. */
.lv-catdesc {
  margin: 1.25rem 0 0;
  font-size: clamp(.9375rem, .9rem + .15vw, 1rem);
  line-height: 1.6;
  color: var(--lv-p-text-sub);
}
.lv-catdesc__text { max-width: 78ch; }
.lv-catdesc__text > *:last-child { margin-bottom: 0; }
.lv-catdesc__text a { color: var(--lv-green-700); text-decoration: underline; }

/* ⚠️ MİQRASİYA QALIĞI — `href`-siz <a> teqləri.
   /7-rustfri-gevindfittings-roer kateqoriyasının təsvirində bütün mətn
   `<a class="attribute-value">` içindədir (yanında `id="line28"`,
   `id="line29"` — köçürülmüş HTML-in izləri). Heç bir ünvana getmir, amma
   link kimi rənglənib alt xətt alırdı: bütöv abzas yaşıl-altxətli görünürdü.
   `href`-i olmayan <a> link deyil — normal mətn kimi göstərilir.
   ⚑ Əsl həlli BO-dadır: həmin təsvirləri təmizləmək lazımdır (mətn hətta
     söz ortasından iki spana bölünüb: "h" + "os"). Bu qayda yalnız
     görünüşü düzəldir. */
.lv-catdesc__text a:not([href]),
.lv-cathero__text a:not([href]),
.rich-text a:not([href]) { color: inherit; text-decoration: none; cursor: inherit; }

/* Yığılmış vəziyyət — dəqiq 2 sətir */
.lv-catdesc:not(.is-open) .lv-catdesc__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lv-catdesc__more {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: .4rem 0 0; padding: 0;
  border: 0; background: transparent;
  color: var(--lv-green-700);
  font: inherit; font-weight: 700; font-size: .875rem;
  cursor: pointer;
}
.lv-catdesc__more:hover { text-decoration: underline; }
.lv-catdesc__more:focus-visible { outline: 2px solid var(--lv-green-600); outline-offset: 2px; border-radius: .25rem; }
.lv-catdesc__more::after {
  content: ""; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.lv-catdesc.is-open .lv-catdesc__more::after { transform: translateY(1px) rotate(-135deg); }

/* Köhnə selektorlar — hero-nun içindəki təsvir üçün idi. Şablon artıq onu
   render etmir; qaydalar yalnız keş/köhnə səhifə üçün zərərsiz qalır. */
.lv-cathero__text {
  font-size: clamp(.875rem, .8rem + .2vw, 1rem);
  line-height: 1.6;
  color: var(--lv-p-text-sub);
}
.lv-cathero__text p:last-child { margin-bottom: 0; }
.lv-cathero__text a { color: var(--lv-green-700); text-decoration: underline; }

/* Şəkilsiz variant: neytral açıq fon (yaşıl qradient DEYİL), pərdə lazım deyil */
.lv-cathero--plain {
  min-height: 0;
  background-image: linear-gradient(180deg, #FAFAFA 0%, #F2F2F2 100%);
}
.lv-cathero--plain .lv-cathero__crumbs { margin-bottom: 1.25rem; }

/* ── Alt kateqoriya zolağı ──────────────────────────────────────────────── */

.lv-subcats {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(1rem, 2vw, 1.75rem) 0;
  background: var(--lv-green-50);
}

.lv-subcats__row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* Şəkilli rejim — referansdakı kart görünüşü.
   Kart məzmuna görə enlənir, amma uzun adlar sıranı dağıtmasın deyə
   maksimum en qoyulub və ad iki sətirdən sonra kəsilir. */
.lv-subcats__item {
  display: inline-flex;
  align-items: center;
  gap: .875rem;
  max-width: 20rem;
  min-height: 4.5rem;               /* referansda kart 73px-dir */
  padding: .5rem 1.125rem .5rem .625rem;
  border: 1px solid #E4E9E5;
  border-radius: .625rem;
  background: #fff;
  color: var(--bs-body-color, #1A1A18);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.lv-subcats__item:hover {
  border-color: var(--lv-green-300);
  box-shadow: 0 6px 18px rgba(16, 32, 22, .08);
  color: var(--lv-green-700);
  text-decoration: none;
}
.lv-subcats__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   ŞƏKİL XANASI — "şəkillər çox balacadır" probleminin əsl səbəbi
   ──────────────────────────────────────────────────────────────────────────
   Xananı böyütmək tək başına kifayət etmirdi. Sənin kateqoriya şəkillərini
   ölçdüm — hamısı 870×340 kətanda, məhsul isə ORTADA, yanlarda böyük ağ
   boşluqla:
       176 varmepumper  → məzmun 326×318  (enin yalnız 37%-i)
       19  radiatortilb.→ məzmun 219×337  (25%)
       18  ventiler     → məzmun 331×219  (38%)
   Köhnə qayda `width:auto; height:auto; max-width/max-height:100%` idi —
   yəni şəkil layout ilə "letterbox" olunurdu: 870×340 kətan 36px-lik
   xanaya 36×14 kimi sığırdı, məhsul ondan da 37% → görünən mürəkkəb
   cəmi ~13×13 piksel. Səhv "şəkillər kiçikdir"də deyil, ağ boşluğun da
   şəkil sayılmasında idi.

   Həlli: `object-fit: cover`. Kvadrat xanada geniş şəkil HÜNDÜRLÜYƏ görə
   miqyaslanır, ağ yanlar isə kəsilir:
       870×340 → 56px xana → 143×56, yanlardan kəsilir
       məhsul  → 0.37×143 ≈ 53px  (xananın 95%-i)
   Sabit `scale()` rəqəmi işlətmirəm — `cover` nisbətdən özü çıxarış edir,
   ona görə gələcəkdə düzgün kəsilmiş kvadrat şəkil yüklənsə də düz işləyir
   (kvadratda `cover` = `contain`).

   İkon və şəkil EYNİ grid xanasındadır: şəkil yüklənməsə (`onerror` özünü
   gizlətsə) arxadakı neytral ikon görünür, yüklənsə onun üstünü örtür.
   ══════════════════════════════════════════════════════════════════════════ */
.lv-subcats__thumb {
  flex: 0 0 3.5rem;
  width: 3.5rem; height: 3.5rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: .375rem;
}
.lv-subcats__icon {
  grid-area: 1 / 1;
  width: 1.75rem; height: 1.75rem;
  color: #9AA79E;
}
.lv-subcats__thumb .lv-subcats__img,
.lv-subcats__thumb img {
  grid-area: 1 / 1;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover;
  object-position: center;
  background: #fff;
}

/* Şəkilsiz rejim (defolt) — yığcam "pill" sətri.
   15 alt kateqoriya kart kimi verilsə divar effekti yaranır; pill kimi
   iki sətirdə rahat yerləşir. Açar şablondadır: $lvSubUseImages. */
.lv-subcats__row--compact { gap: .5rem; }
.lv-subcats__row--compact .lv-subcats__item {
  min-height: 0;
  max-width: none;
  padding: .45rem 1rem;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 500;
}
.lv-subcats__row--compact .lv-subcats__name { -webkit-line-clamp: 1; }

/* ⚠️ Burada `.lv-subcats__thumb` üçün İKİNCİ, təkrar blok var idi
   (3.25rem, `object-fit: contain`, `grid-area` olmadan). Sonra gəldiyi
   üçün yuxarıdaki düzgün qaydaları üstələyirdi — şəkillərin kiçik
   qalmasının ikinci səbəbi bu idi. Silindi; ölçü yalnız bir yerdə
   təyin olunur. */

/* ══════════════════════════════════════════════════════════════════════════
   ALƏT SƏTRİ, FİLTR ÇİPLƏRİ VƏ PANEL — Shopify Polaris estetikası
   ══════════════════════════════════════════════════════════════════════════
   Dizayn dili qəsdən Polaris-dən götürülüb: neytral boz kənarlar, 8px radius,
   nazik "yüksəklik" kölgəsi, 13px idarəedici mətni, 4px addımlı boşluqlar,
   aydın fokus halqası. Brend yaşılı yalnız AKSENT kimi işlədilir (əsas düymə,
   seçilmiş vəziyyət) — Polaris-də də rəng bu cür az və məqsədli işlənir.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --lv-p-border:        #E3E3E3;
  --lv-p-border-strong: #C9C9C9;
  --lv-p-border-hover:  #B5B5B5;
  --lv-p-surface:       #FFFFFF;
  --lv-p-surface-sub:   #F7F7F7;
  --lv-p-surface-hover: #F1F1F1;
  --lv-p-text:          #303030;
  --lv-p-text-sub:      #616161;
  --lv-p-radius:        .5rem;     /* 8px */
  --lv-p-radius-sm:     .375rem;   /* 6px */
  --lv-p-shadow:        0 1px 0 0 rgba(26, 26, 26, .07);
  --lv-p-shadow-pop:    0 4px 12px rgba(26, 26, 26, .12), 0 0 0 1px rgba(26, 26, 26, .06);
  --lv-p-h:             2.25rem;   /* idarəedicilərin ümumi hündürlüyü, 36px */
}

/* ── Sətir ──────────────────────────────────────────────────────────────── */

/* ⚠️ SƏTİR QURULUŞU DƏYİŞDİ — müştərinin iradı: "say + sıralama + Filtrer
   birinci sətirdə sabitlənsin".
   Əvvəl `.lv-toolbar` özü `flex-wrap: wrap` idi: çiplər çoxalanda
   `.lv-toolbar__meta` ikinci sətrə düşürdü (ölçdüm — /3-roer-fittings-də
   sətir 142px hündürlüyündə, iki mərtəbə idi).
   İndi sətir sınmır (`nowrap`): çiplər ÖZ qutusunun içində alt-alta düşür,
   sağdakı blok isə həmişə birinci sətirdə, yuxarı kənarda qalır.

   Fon da yaşıla keçdi — müştəri bu sahənin "seçilməsini" istəyirdi. Ağ
   çiplər açıq yaşıl fonun üstündə daha aydın oxunur. */
.lv-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: .75rem;
  margin: 1rem 0 0;
  padding: .5rem;
  /* Yuxarıdakı alt-kateqoriya zolağı da --lv-green-50-dir; sətir eyni tonda
     olsaydı ikisi bir-birinə qarışardı. Ona görə bir pillə tünd (green-100)
     — ağ çiplər onun üstündə aydın seçilir. */
  border: 1px solid var(--lv-green-200);
  border-radius: .75rem;
  background: var(--lv-green-100);
  box-shadow: var(--lv-p-shadow);
}

.lv-toolbar__filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  flex: 1 1 auto; min-width: 0;
}
.lv-toolbar__filters:empty { display: none; }
/* Hook filtrdən başqa nə versə (ps_categorytree və s.) sətirdə görünməsin */
.lv-toolbar__filters > *:not(#amazzing_filter) { display: none !important; }

.lv-toolbar__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
  margin-left: auto;
}

/* Dar ekranda bir sətirdə yer yoxdur — orada köhnə davranış (alt-alta) qalır.
   Hədd 768 deyil, 992-dir: 768-də sağdakı blok 355px tutur, çiplərə cəmi
   ~355px qalırdı və sətir 318px hündürlüyə qalxırdı (ölçdüm). */
@media (max-width: 991.98px) {
  .lv-toolbar { flex-wrap: wrap; }
  .lv-toolbar__meta { flex-wrap: wrap; width: 100%; margin-left: 0; }
}

.lv-toolbar__count {
  font-size: .8125rem;
  color: var(--lv-p-text-sub);
  white-space: nowrap;
  padding: 0 .25rem;
}

/* ── Ümumi idarəedici görünüşü (Polaris "Button"/"Select") ──────────────── */

.lv-toolbar__sort .products__sort-label { display: none; }

.lv-toolbar__sort .products__sort-dropdown-button,
#amazzing_filter .af_subtitle {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: var(--lv-p-h);
  margin: 0;
  padding: 0 .75rem;
  border: 1px solid var(--lv-p-border);
  border-radius: var(--lv-p-radius);
  background: var(--lv-p-surface);
  box-shadow: var(--lv-p-shadow);
  color: var(--lv-p-text);
  font-size: .8125rem;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color .1s ease, border-color .1s ease;
}
.lv-toolbar__sort .products__sort-dropdown-button:hover,
#amazzing_filter .af_subtitle:hover {
  background: var(--lv-p-surface-hover);
  border-color: var(--lv-p-border-hover);
  color: var(--lv-p-text);
}
.lv-toolbar__sort .products__sort-dropdown-button:focus-visible,
#amazzing_filter .af_subtitle:focus-visible {
  outline: 2px solid var(--lv-green-600);
  outline-offset: 1px;
}

/* Əsas düymə — tək aksent nöqtəsi */
.lv-toolbar__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  height: var(--lv-p-h);
  padding: 0 .875rem;
  border: 0;
  border-radius: var(--lv-p-radius);
  background: var(--lv-green-800);
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, .12);
  transition: background-color .1s ease;
}
.lv-toolbar__filter-btn:hover { background: var(--lv-green-900); color: #fff; }
.lv-toolbar__filter-btn:focus-visible { outline: 2px solid var(--lv-green-600); outline-offset: 2px; }
.lv-toolbar__filter-btn svg { width: 1rem; height: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   ⚠️ ARALIQ QABLARIN LAYOUT-DAN ÇIXARILMASI  (`display: contents`)
   ──────────────────────────────────────────────────────────────────────────
   PROBLEM: çiplər sətrin ORTASINDA doğulur, klikdən sonra sola qayıdır.

   ƏVVƏLKİ (SƏHV) YANAŞMA: modulun qablarına `width:auto !important`,
   `justify-content:flex-start !important` və s. yazırdım. Bu, mübarizədir —
   modulun hansı qabına hansı qaydanı verdiyini bilmədən təxmin etmək
   deməkdir. Bir qab siyahıdan kənarda qalsa (məsələn `.block_content`
   birbaşa uşaq deyilsə, ya da modul əlavə sarğı qoyubsa) mərkəzləmə yenə
   işləyir. Məhz bu baş verirdi — buna görə də dəfələrlə "düzəltdim,
   dəyişmədi" oldu.

   İNDİKİ YANAŞMA: modulun qablarını `display: contents` ilə tamamilə
   LAYOUT-DAN ÇIXARIRIQ. `display: contents` olan element ümumiyyətlə qutu
   yaratmır — ona verilən `width`, `margin: auto`, `text-align: center`,
   `justify-content`, `float`, `position` HEÇ BİR TƏSİR ETMİR, çünki
   hizalanacaq qutu yoxdur. Uşaqları birbaşa `.lv-toolbar__filters`
   flex-konteynerinin uşaqları kimi düzülür.

   Nəticə: çiplər `.lv-toolbar__filters`-in birbaşa flex elementləridir və
   onların yerini YALNIZ bizim `justify-content: flex-start` təyin edir.
   Modulun CSS-i nə yazsa da mərkəzləmə fiziki olaraq mümkün deyil.

   İki qayda bloku var və qəsdən AYRIDIR:
     1) `:has()` ilə — çip saxlayan İSTƏNİLƏN qab tutulur (dərinlikdən asılı
        deyil). Köhnə brauzer bu seçicini tanımasa bütün bloku atır.
     2) Açıq zəncir — `:has()` olmayan brauzerlər üçün ehtiyat.
   Ona görə birləşdirmirik: qrupda bir etibarsız seçici bütün qaydanı ləğv
   edir.

   Panel rejimi (`lv-af--drawer`) bundan KƏNARDADIR — orada blok həqiqətən
   qutu olmalıdır (`position: fixed` panel).
   ══════════════════════════════════════════════════════════════════════════ */
.lv-toolbar__filters {
  flex: 0 1 auto !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
}

/* 1) Müasir brauzerlər — dərinliyindən asılı olmayaraq hər sarğı */
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer):has(.af_filter),
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) *:has(.af_filter) {
  display: contents !important;
}

/* 2) Ehtiyat — modulun məlum DOM zənciri */
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer),
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) > .block_content,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) > .block_content > .af-form,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) > .block_content > form,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) > .af-form,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) > form {
  display: contents !important;
}

/* Qab olmayan, çip də olmayan hissələr sətirdə görünməməlidir.
   `display: contents` sayəsində bunlar indi birbaşa sətrin uşağı kimi
   düzülərdi — hamısını açıq şəkildə söndürürük. `.selectedFilters` yalnız
   blokun İÇİNDƏ ikən gizlidir; JS onu `.lv-toolbar__selected`-ə köçürəndə
   bu seçici artıq uyğun gəlmir və çiplər görünür. */
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) > .title_block,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .hidden_inputs,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .btn-holder,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .compact-toggle,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .selectedFilters,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .lv-af__head,
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .lv-af__foot {
  display: none !important;
}

/* Çipin özü — sətrin birbaşa flex elementi. Açılan qutu üçün mütləq
   mövqe bazası olmalıdır, ona görə `position: relative`. */
.lv-toolbar__filters #amazzing_filter:not(.lv-af--drawer) .af_filter {
  display: block !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  background: none !important;
  text-align: left !important;
}

/* ── Filtr bloku sətirdə ────────────────────────────────────────────────── */

#amazzing_filter,
#amazzing_filter > .block_content,
#amazzing_filter .af-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  width: auto;
}
#amazzing_filter .hidden_inputs,
#amazzing_filter > .title_block,
#amazzing_filter .btn-holder { display: none !important; }
#amazzing_filter > .lv-af__head,
#amazzing_filter > .lv-af__foot { display: none; }
@media (min-width: 768px) {
  #amazzing_filter > .compact-toggle.sticky { display: none !important; }
}

#amazzing_filter .af_filter { position: relative; margin: 0; padding: 0; border: 0; float: none; }

/* Modulun öz ::before oxu — ikiqat ox verirdi, söndürülür */
#amazzing_filter .af_subtitle::before { content: none !important; display: none !important; }
#amazzing_filter .af_subtitle > i,
#amazzing_filter .af_subtitle > .icon,
#amazzing_filter .af_subtitle > svg { display: none !important; }

#amazzing_filter .af_subtitle::after {
  content: "";
  width: 6px; height: 6px;
  margin-left: .125rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .12s ease;
  opacity: .55;
}
#amazzing_filter .af_filter.lv-open > .af_subtitle {
  background: var(--lv-p-surface-hover);
  border-color: var(--lv-p-border-hover);
}
#amazzing_filter .af_filter.lv-open > .af_subtitle::after {
  transform: translateY(1px) rotate(-135deg);
  opacity: .85;
}
/* Seçim edilmiş qrup — Polaris-də bu, incə aksent kənarıdır, dolğun fon yox */
/* Seçim edilmiş qrup — Polaris-də bu, tünd neytral kənar və qalın mətndir.
   Rəngli halqa Polaris dilinə yaddır, ona görə yaşıldan imtina edildi. */
#amazzing_filter .af_filter.lv-has-value > .af_subtitle,
#amazzing_filter .af_filter.has-selection > .af_subtitle {
  border-color: #8A8A8A;
  box-shadow: 0 0 0 1px #8A8A8A;
  color: var(--lv-p-text);
  font-weight: 650;
}

/* ── Açılan qutu (Polaris "Popover") ────────────────────────────────────── */

#amazzing_filter .af_filter > .af_filter_content { display: none !important; }
#amazzing_filter .af_filter.lv-open > .af_filter_content {
  display: block !important;
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  z-index: 60;
  width: max-content;
  min-width: 16rem;
  max-width: 22rem;
  max-height: 20rem;
  overflow-y: auto;
  padding: .25rem;
  border: 0;
  border-radius: var(--lv-p-radius);
  background: var(--lv-p-surface);
  box-shadow: var(--lv-p-shadow-pop);
}
#amazzing_filter .af_filter.lv-open.lv-flip > .af_filter_content { left: auto; right: 0; }

#amazzing_filter .af_filter_content ul { margin: 0; padding: 0; list-style: none; }
#amazzing_filter .af_filter_content li { margin: 0; }

#amazzing_filter .af_filter_content label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .4375rem .5rem;
  border-radius: var(--lv-p-radius-sm);
  font-size: .8125rem;
  font-weight: 450;
  color: var(--lv-p-text);
  line-height: 1.35;
  cursor: pointer;
}
#amazzing_filter .af_filter_content label:hover { background: var(--lv-p-surface-hover); }
#amazzing_filter .af_filter_content .name  { flex: 1 1 auto; }
#amazzing_filter .af_filter_content .count { color: var(--lv-p-text-sub); font-size: .75rem; }
#amazzing_filter .af_filter_content input[type="radio"],
#amazzing_filter .af_filter_content input[type="checkbox"] {
  flex: 0 0 auto; margin: 0; accent-color: var(--lv-green-700);
}

#amazzing_filter .af-select {
  width: 100%;
  height: var(--lv-p-h);
  padding: 0 .625rem;
  border: 1px solid var(--lv-p-border);
  border-radius: var(--lv-p-radius-sm);
  background: var(--lv-p-surface);
  font-size: .8125rem;
  color: var(--lv-p-text);
}

#amazzing_filter .af-slider { min-width: 14rem; padding: 1.25rem .5rem .25rem; }
#amazzing_filter .slider-values {
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  margin-top: .75rem; font-size: .75rem; color: var(--lv-p-text-sub);
}
#amazzing_filter .slider-values .input-text {
  width: 5.5rem; height: 2rem; padding: 0 .5rem;
  border: 1px solid var(--lv-p-border); border-radius: var(--lv-p-radius-sm);
  font-size: .8125rem; color: var(--lv-p-text);
}

/* ── Seçilmiş filtrlər (Polaris "removable Tag") ────────────────────────── */

/* Modul bu bloku filtrin içinə salır — orada çiplərin üstünə düşürdü.
   JS onu daim öz evinə qaytarır; burada isə hər ehtimala qarşı gizlədirik. */
#amazzing_filter > .selectedFilters { display: none !important; }
/* ⚠️ `:not(.hidden)` VACİBDİR. Modul heç nə seçilməyəndə bloka `hidden`
   sinfi qoyur. Əvvəlki qayda bunu nəzərə almırdı və seçicilik baxımından
   `.selectedFilters.hidden`-dən güclü olduğu üçün paneldə BOŞ blok
   göstərilirdi — panelin yuxarısında "CLEAR" düyməsi və altında boş
   sahə məhz bu idi. */
#amazzing_filter.lv-af--drawer > .selectedFilters:not(.hidden) { display: flex !important; }

.lv-toolbar__selected:empty { display: none; }
.lv-toolbar__selected { margin: .5rem 0 0; }

.selectedFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .375rem;
  margin: 0;
  font-size: .8125rem;
}
.selectedFilters.hidden { display: none !important; }
.selectedFilters .selected-filters-label { display: none; }

.selectedFilters .filter-block,
.selectedFilters li,
.selectedFilters .af-selected {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem;
  margin: 0 !important;
  padding: .25rem .5rem !important;
  border: 0 !important;
  border-radius: var(--lv-p-radius-sm) !important;
  background: var(--lv-p-surface-hover) !important;
  color: var(--lv-p-text) !important;
  font-size: .75rem !important;
  font-weight: 450;
  line-height: 1.4;
  list-style: none;
  float: none !important;
}
/* Modul silmə (×) linkini bəzi hallarda mütləq mövqedə verir:
       .selectedFilters .cf a { position: absolute; right: 7px }
   və yeri `padding-right: 25px` ilə ayırır. Biz padding-i öz ölçümüzə
   salırıq — mütləq mövqe qalsaydı × mətnin son hərflərinin üstünə düşərdi.
   Ona görə linki normal axına qaytarırıq. */
.selectedFilters .filter-block > a,
.selectedFilters .cf > a,
.selectedFilters li > a {
  position: static !important;
  right: auto !important;
  float: none !important;
  margin-left: .125rem;
}
.selectedFilters .filter-block a,
.selectedFilters li a { color: var(--lv-p-text-sub); text-decoration: none; }
.selectedFilters .filter-block a:hover,
.selectedFilters li a:hover { color: var(--lv-p-text); }

/* Modulun öz "Clear" düyməsi boz qutu kimi gəlir — Polaris-də bu, sadə
   mətn düyməsidir.

   ⚠️ SƏHVİN DÜZƏLİŞİ: əvvəl yalnız `a`-ya qayda yazmışdım. Modulun real
   markup-u belədir (serverdən oxudum):
       .clearAll > a.all > span.txt + i.icon-eraser
   Boz fon və BÖYÜK HƏRFLƏR daxildəki `.txt`-dədir. Övladın öz elanı
   valideyndən miras dəyəri üstələyir — ona görə `a`-dakı
   `text-transform: none !important` işləmirdi. İndi hər üç səviyyə
   (`.clearAll`, `a`, `.txt`) sıfırlanır. */
.selectedFilters .clearAll { order: 99; }
.selectedFilters .clearAll,
.selectedFilters .clearAll a,
.selectedFilters .clearAll a .txt {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  float: none !important;
}
.selectedFilters .clearAll { padding: 0 !important; }
.selectedFilters .clearAll a {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem;
  padding: .25rem .375rem !important;
  border-radius: var(--lv-p-radius-sm) !important;
  color: var(--lv-p-text-sub) !important;
  font-size: .75rem !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}
.selectedFilters .clearAll a .txt {
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  text-decoration: inherit;
}
.selectedFilters .clearAll a:hover,
.selectedFilters .clearAll a:hover .txt { color: var(--lv-p-text) !important; }
.selectedFilters .icon-eraser { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PANEL (Polaris "Sheet") — sağdan açılır
   ══════════════════════════════════════════════════════════════════════════ */

.lv-af-backdrop {
  position: fixed; inset: 0;
  z-index: 1060;
  background: rgba(26, 26, 26, .4);
  opacity: 0;
  transition: opacity .18s ease;
}
.lv-af-backdrop.is-on { opacity: 1; }
body.lv-af-locked { overflow: hidden; }

#amazzing_filter.lv-af--drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1061;
  display: flex;
  flex-direction: column;
  align-items: stretch;      /* MÜTLƏQ — əsas qayda `center` verir, qruplar sıxılırdı */
  width: min(24rem, 100vw);
  padding: 0;
  gap: 0;
  background: var(--lv-p-surface);
  box-shadow: -8px 0 24px rgba(26, 26, 26, .18);
  transform: translateX(100%);
  transition: transform .2s ease;
}
#amazzing_filter.lv-af--drawer.is-on { transform: none; }

#amazzing_filter.lv-af--drawer > .block_content {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  overflow-y: auto;
  padding: .25rem 1rem 1rem;
}
#amazzing_filter.lv-af--drawer .af-form { display: block; width: 100%; }
#amazzing_filter.lv-af--drawer .af_filter { width: 100%; border-bottom: 1px solid var(--lv-p-border); }
#amazzing_filter.lv-af--drawer .af_filter:last-child { border-bottom: 0; }

/* ⚠️ SƏHVİN DÜZƏLİŞİ — "Pris"in ətrafındakı qəribə xətlər
   Sətirdə çipin seçim olduğunu bildirmək üçün halqa var:
       .af_filter.has-selection > .af_subtitle { box-shadow: 0 0 0 1px #8A8A8A }
   Paneldə sətirlər çip deyil — orada halqa tam enli qutuya çevrilirdi.
   (Ekran görüntüsündən piksel oxudum: kənar rəngi məhz #8A8A8A idi.)
   Panel qaydası yalnız `.lv-has-value`-nu sıfırlayırdı; modulun ÖZ
   `.has-selection` sinfi kənarda qalırdı — qiymət sürgüsünə modul məhz
   onu qoyur, buna görə xətlər yalnız "Pris"də görünürdü.
   İndi sıfırlama `!important` ilə əsas qaydadadır: modulun bundan sonra
   əlavə edəcəyi hər hansı yeni vəziyyət sinfi də halqa yarada bilməz. */
#amazzing_filter.lv-af--drawer .af_subtitle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  padding: .875rem 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: .875rem;
  font-weight: 600;
}
/* Seçim olan qrup panelde YALNIZ rənglə fərqlənir — halqa yox */
#amazzing_filter.lv-af--drawer .af_filter.lv-has-value > .af_subtitle,
#amazzing_filter.lv-af--drawer .af_filter.has-selection > .af_subtitle {
  color: var(--lv-green-900);
}
#amazzing_filter.lv-af--drawer .af_filter.lv-open > .af_filter_content {
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  max-height: none;
  padding: 0 0 .75rem;
  border-radius: 0;
  box-shadow: none;
}

#amazzing_filter.lv-af--drawer > .selectedFilters {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--lv-p-border);
}

.lv-af__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--lv-p-border);
}
#amazzing_filter.lv-af--drawer > .lv-af__head,
#amazzing_filter.lv-af--drawer > .lv-af__foot { display: flex; }
.lv-af__title { margin: 0; font-size: 1rem; font-weight: 650; color: var(--lv-p-text); }
.lv-af__close {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: var(--lv-p-radius-sm);
  background: transparent; color: var(--lv-p-text-sub);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.lv-af__close:hover { background: var(--lv-p-surface-hover); color: var(--lv-p-text); }

.lv-af__foot {
  flex: 0 0 auto;
  display: flex; gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--lv-p-border);
  background: var(--lv-p-surface);
}
.lv-af__apply {
  flex: 1 1 auto;
  height: 2.25rem;
  border: 0; border-radius: var(--lv-p-radius);
  background: var(--lv-green-800); color: #fff;
  font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.lv-af__apply:hover { background: var(--lv-green-900); }
.lv-af__reset {
  flex: 0 0 auto;
  height: 2.25rem;
  padding: 0 .875rem;
  border: 1px solid var(--lv-p-border); border-radius: var(--lv-p-radius);
  background: var(--lv-p-surface); color: var(--lv-p-text);
  font-size: .8125rem; font-weight: 550; cursor: pointer;
  box-shadow: var(--lv-p-shadow);
}
.lv-af__reset:hover { background: var(--lv-p-surface-hover); border-color: var(--lv-p-border-hover); }

#amazzing_filter.lv-af--drawer > .compact-toggle.sticky { display: none !important; }

/* ── Mobil ──────────────────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  #amazzing_filter,
  #amazzing_filter > .block_content,
  #amazzing_filter .af-form { flex-direction: column; align-items: stretch; width: 100%; }
  #amazzing_filter .af_subtitle { justify-content: space-between; }
  #amazzing_filter .af_filter.lv-open > .af_filter_content {
    position: static;
    width: auto;
    max-width: none;
    box-shadow: none;
    border: 1px solid var(--lv-p-border);
    margin-top: .25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #amazzing_filter.lv-af--drawer,
  .lv-af-backdrop { transition: none; }
}


/* ── Məhsul şəbəkəsi ────────────────────────────────────────────────────── */

#products .products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Karusel üçün yazılmış eni şəbəkədə ləğv olunur —
   grid elementi flex elementi deyil, ona görə flex-basis işləmir,
   amma max-width qalsa kart hüceyrəni doldurmazdı. */
#products .products .lv-pcard { flex: initial; width: auto; max-width: none; }

@media (max-width: 575.98px) {
  #products .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
}

/* Səhifələmə */
.products__pagination { margin-top: 2rem; display: flex; justify-content: center; }

/* Filtr ajax-ı işləyəndə siyahı sönür — mövzunun öz davranışı, saxlayırıq */

/* ══════════════════════════════════════════════════════════════════════════
   KATEQORİYA — TAM EN + ÜFÜQİ FİLTR SƏTRİ (Amazzing Filter)
   ══════════════════════════════════════════════════════════════════════════

   NİYƏ BO-da "Full width" seçmirik:
   Layout seçimi theme.yml-in `theme_settings.layouts` bölməsindədir və onu
   dəyişmək mövzunun sıfırlanmasını tələb edir — bu da hook konfiqurasiyanı
   silə bilər. Ona görə layout `layout-left-column` qalır.

   Sol sütun İKİ yerdə boşaldılır:
     1) templates/layouts/layout-left-column.tpl — siyahı səhifələrində
        `displayLeftColumn` hook-u orada ÇAĞIRILMIR (filtr artıq alət
        sətrində, server tərəfində render olunur)
     2) buradakı CSS — qalan boş <div> yer tutmasın
   ══════════════════════════════════════════════════════════════════════════ */

/* Hər iki sütun bütün enlərdə yığılır: filtri JS alət sətrinə köçürür,
   kateqoriya ağacını isə alt kateqoriya kartları + mega menyu əvəz edir.
   Sütunu yalnız 768px-dən yuxarı gizlətsək, mobildə boş qutu qalırdı. */
body#category #left-column,
body#category #right-column,
.left-column--empty { display: none !important; }

/* ⚠️ SƏHVİN DÜZƏLİŞİ — /tilbud səhifəsində sağda boş sahə
   Sol sütunu gizlətmək kifayət deyil: `#center-column` hələ də
   `col-md-8 col-lg-9` sinifləri ilə enin 75%-ni tutur, qalan 25% isə
   heç kimə qalmır. Kateqoriya səhifəsində bunun düzəlişi vardı, amma
   `body#category` ilə məhdud idi — ona görə problem YALNIZ orada
   görünmürdü.

   Ölçdüm (1834px ekranda, /tilbud):
       konteyner 1749px → məhsul şəbəkəsi 1272px → sağda 477px boş
   Eyni səhv `search`, `new-products`, `best-sales`, `manufacturer` və
   `supplier` səhifələrində də var idi.

   İndi qayda BOŞ SÜTUNUN ÖZÜNDƏN asılıdır: hansı siyahı səhifəsi olursa
   olsun, sol sütun boşdursa yanındaki sütun tam enə çıxır. Sonradan yeni
   siyahı səhifəsi əlavə olunsa da özü işləyəcək. */
.left-column--empty ~ #center-column,
body#category #center-column {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}


/* Referansda da çiplərlə yanaşı "Alle filtre" düyməsi var — hamısını bir
   yerdə göstərən panel açır (aşağıdakı .lv-af--drawer). Gizlətmirik. */

/* ══════════════════════════════════════════════════════════════════════════
   Məhsul səhifəsi — sütunların dartılması
   `.product__container` grid-dir və `align-items` verilmədiyi üçün uşaqlar
   sətrin hündürlüyünə DARTILIR. `start` ilə hər sütun öz məzmunu qədər
   olur — qalereya yuxarıda qalır, süni uzanma yoxdur.
   (Boşluğun özünü custom.js-dəki balanslaşdırıcı doldurur.)
   ══════════════════════════════════════════════════════════════════════════ */
.product__container { align-items: start; }

/* Qalereyanın altına köçürülən etibar blokları üçün ev */
.lv-pdp-under { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; }
.lv-pdp-under:empty { display: none; margin: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   MƏHSUL SƏHİFƏSİ — YENİ QURULUŞ
   Referans: billigvvs məhsul səhifəsi (Cloudflare bloklayır, ona görə
   ölçüləri deyil, PATTERN-i götürdüm; görünüş kateqoriya səhifəsi ilə
   eyni Polaris dilindədir).

   Səhifənin sırası (yuxarıdan aşağı):
     1. Qalereya + satın-alma bloku   ← thumbnail-lar SOLDA, şaquli zolaq
     2. Əlaqəli məhsullar / tilbehør  ← əsas blokun DƏRHAL altında
     3. Təsvir  |  Spesifikasiyalar   ← YAN-YANA, iki sütun
     4. Rəylər

   ⚠️ Sıralama JS ilə DOM köçürməsi ilə DEYİL, flex `order` ilə edilir.
   Bu layihədə DOM köçürməsi mənə bir dəfə baha oturdu (filtr bloku ajax
   ilə silinirdi) — burada node yerini dəyişmir, yalnız vizual sıra dəyişir,
   ona görə heç bir modulun məntiqi pozulmur.
   Sıra YALNIZ məhsul səhifəsində (`body#product`) tətbiq olunur.
   ══════════════════════════════════════════════════════════════════════════ */

body#product #center-column { display: flex; flex-direction: column; }
/* Adı çəkilməyən hər şey (skript, modal və s.) sonda qalsın */
body#product #center-column > * { order: 6; }
body#product #center-column > .product__container    { order: 1; }
/* Hummingbird-in ƏSL aksesuar bölməsi `.product__accessories`-dir
   (templates/catalog/_partials/product-accessories.tpl → `module_products_name`).
   Yalnız məhsulun BO-da aksesuarı varsa render olunur (`{if $accessories}`).
   Aksesuar daha uyğun təklifdir, ona görə "eyni kateqoriya"dan ƏVVƏL. */
body#product #center-column > .product__accessories,
body#product #center-column > .product-accessories   { order: 2; }
body#product #center-column > .product__bottom       { order: 3; }
body#product #center-column > .product-comments-wrapper { order: 4; }
/* "4 andre produkter i samme kategori" ÖZ KÖHNƏ YERİNDƏ qalır — ən altda,
   rəylərdən sonra. Yuxarı yalnız aksesuar qalxır. Karusel görünüşü isə
   burada da saxlanılır: məhsul sayı artanda səhifə aşağı uzanmasın. */
/* Aşağı qrup — DOM sırası öz aralarında qərar verir. "Kunder købte også"
   da buradadır; yuxarı, aksesuarın yanına istəsən bir sözlə dəyişirəm. */
body#product #center-column > .ps-categoryproducts,
body#product #center-column > .ps-crossselling,
body#product #center-column > .ps-viewedproduct      { order: 5; }


/* ── 1. Qalereya: thumbnail zolağı SOLDA ────────────────────────────────── */

/* `.product__images` üç uşaqlıdır: karusel, thumbnail-lar və zoom modalı.
   Modal `display:none` olduğu üçün flex elementi olmur — xüsusi qayda
   lazım deyil. */
.product__images {
  display: flex;
  align-items: stretch;          /* zolaq karuselin hündürlüyünə uyğunlaşsın */
  gap: .75rem;
}
.product__carousel {
  order: 2;                      /* DOM-da birincidir, vizual olaraq sağda */
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--lv-p-border);
  border-radius: .75rem;
  background: #fff;
  overflow: hidden;
}
.product__thumbnails {
  order: 1;
  flex: 0 0 5.25rem;             /* 84px */
  margin: 0;
  min-width: 0;
}
.product__thumbnails-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;              /* şəkil çox olsa zolaq öz içində sürüşür */
  scrollbar-width: thin;
}
.product__thumbnail {
  flex: 0 0 auto;
  width: 5.25rem; height: 5.25rem;
  padding: .1875rem;
  border: 1px solid var(--lv-p-border);
  border-radius: .5rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.product__thumbnail:hover { border-color: var(--lv-p-border-hover); }
.product__thumbnail.active,
.product__thumbnail[aria-current="true"] {
  border-color: var(--lv-green-500);
  box-shadow: 0 0 0 1px var(--lv-green-500);
}
.product__thumbnail img,
.product__thumbnail picture {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: .375rem;
}

/* Karusel oxları — Polaris dairəvi düymələri, yalnız qalereyaya hover-də */
.product__carousel .carousel-control-prev,
.product__carousel .carousel-control-next {
  width: 2.5rem; height: 2.5rem;
  top: 50%; transform: translateY(-50%);
  margin: 0 .625rem;
  border: 1px solid var(--lv-p-border);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--lv-p-shadow-pop);
  opacity: 0;
  transition: opacity .14s ease;
}
.product__images:hover .carousel-control-prev,
.product__images:hover .carousel-control-next,
.product__carousel .carousel-control-prev:focus-visible,
.product__carousel .carousel-control-next:focus-visible { opacity: 1; }

/* Dar ekran: zolaq şəklin ALTINA, üfüqi.
   ⚠️ Kəsim 992 deyil, 1200px-dir. 1024px-də sol sütun ~480px olur; zolaq
   solda qalsa karusel 384px-ə düşür və qalereya sağ sütundan 248px qısa
   qalırdı (ölçdüm). Zolaq alta keçəndə karusel tam en alır və boşluq
   ~190px azalır. */
@media (max-width: 1199.98px) {
  .product__images { display: block; }
  .product__thumbnails { margin-top: .75rem; }
  .product__thumbnails-list {
    flex-direction: row;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .25rem;
  }
  .product__thumbnail { width: 4.5rem; height: 4.5rem; }
  .product__carousel .carousel-control-prev,
  .product__carousel .carousel-control-next { opacity: 1; }
}


/* ── 2. Modul məhsul lentləri — hamısı KARUSEL ──────────────────────────
   Dörd bölmə eyni Hummingbird komponentindən doğulur
   (`components/module-products.tpl`), ona görə markup-ları eynidir:
       section > .module-products > h2.section-title + .module-products__list > .products
   Bölmələr:
       .product__accessories  → "Tilbehør"          (BO-da təyin olunubsa)
       .product-accessories   → köhnə/alternativ ad
       .ps-categoryproducts   → "4 andre produkter i samme kategori"
       .ps-viewedproduct      → "Sete varer"        (yalnız baxış cookie-si varsa)

   ⚠️ `body#product` prefiksi QƏSDƏN YOXDUR. "Sete varer" bloku yalnız
   məhsul səhifəsində deyil, istifadəçi məhsula baxandan sonra başqa
   səhifələrdə də çıxa bilir; prefiks qalsaydı orada kart ölçüləri tətbiq
   olunmazdı və karusel dağılardı.

   Şəbəkə əvəzinə karusel: məhsul sayı artanda səhifə aşağı uzanmasın.
   Kartlar ana səhifədən kiçikdir (275px yerinə 200px) — bunlar əsas
   məhsul deyil, təklifdir.
   ⚠️ JS işləməsə də səhifə sınmır: `flex-wrap: wrap` ehtiyat şəbəkəsidir,
   karusel qoşulanda `.lv-plist__track` sinfi `nowrap` edir. */

.ps-categoryproducts,
.product__accessories,
.product-accessories,
.ps-viewedproduct,
.ps-crossselling {
  --lv-pl-card: 200px;
  --lv-pl-gap: .875rem;
  padding-block: 0;                 /* `.lv-plist`-in öz paddingini əvəz edir */
}

/* Kart görünüşü. `.ps-viewedproduct`-da `container` sinfi BÖLMƏNİN ÖZÜNDƏ
   deyil, içindəki `.module-products`-dadır — orada kartı həmin elementə
   veririk ki, kənar səhifənin konteyner enində düzülsün, tam enə yayılmasın. */
.ps-categoryproducts,
.product__accessories,
.product-accessories,
.ps-viewedproduct > .module-products,
.ps-crossselling > .module-products {
  margin: 2rem 0 0;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--lv-p-border);
  border-radius: .75rem;
  background: var(--lv-p-surface);
}
.ps-viewedproduct > .module-products,
.ps-crossselling > .module-products { margin-inline: auto; }

.ps-categoryproducts .section-title,
.product__accessories .section-title,
.product-accessories .section-title,
.ps-viewedproduct .section-title,
.ps-crossselling .section-title {
  margin: 0 0 1rem;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--lv-p-text);
}

.ps-categoryproducts .products,
.product__accessories .products,
.product-accessories .products,
.ps-viewedproduct .products,
.ps-crossselling .products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lv-pl-gap);
}
.ps-categoryproducts .products.lv-plist__track,
.product__accessories .products.lv-plist__track,
.product-accessories .products.lv-plist__track,
.ps-viewedproduct .products.lv-plist__track,
.ps-crossselling .products.lv-plist__track {
  flex-wrap: nowrap;
}

/* Başlıq sətri: ad solda, oxlar sağda. Ana səhifədəki ilə eynidir,
   sadəcə daha yığcam — bu, bölmə başlığı deyil, kartın içindəki sətirdir.
   `--compact` sinfini custom.js qoyur. */
.lv-plist--compact .lv-plist__head { margin-bottom: .875rem; align-items: center; }
.lv-plist--compact .lv-plist__arrow { width: 2.25rem; height: 2.25rem; }
.lv-plist--compact .lv-plist__arrow svg { width: .9rem; height: .9rem; }
.lv-plist--compact .lv-plist__progress { margin-top: .875rem; }

@media (max-width: 991.98px) {
  .ps-categoryproducts,
  .product__accessories,
  .product-accessories,
  .ps-viewedproduct,
  .ps-crossselling { --lv-pl-card: 170px; }
}
@media (max-width: 575.98px) {
  .ps-categoryproducts,
  .product__accessories,
  .product-accessories,
  .ps-viewedproduct,
  .ps-crossselling { --lv-pl-card: 150px; --lv-pl-gap: .625rem; }
  .lv-plist--compact .lv-plist__nav { display: none; }   /* barmaqla sürüşür */
}


/* ── 3. Təsvir | Spesifikasiyalar — yan-yana ────────────────────────────── */

/* `#product_accordion` iki uşaqlıdır:
     #product_description   → "Produkthøjdepunkter" (uzun mətn)
     .js-product-details    → "Specifikationer" + "Produktinformation"
   Mətn həmişə spesifikasiyalardan uzun olur, ona görə sol sütun sərbəst
   (1fr), sağ sütun sabit genişlikdədir. `align-items: start` olmasa
   spesifikasiya kartı boş yerə dartılardı. */
@media (min-width: 1200px) {
  body#product .product__bottom-left { max-width: none; }

  #product_accordion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: 1.5rem;
    align-items: start;
  }
  #product_accordion > #product_description { grid-column: 1; }
  #product_accordion > .js-product-details  { grid-column: 2; display: grid; gap: 1.5rem; align-content: start; }

  /* Sağ sütun uzun səhifədə ekranla birlikdə gəlsin */
  #product_accordion > .js-product-details { position: sticky; top: 1.5rem; }

  /* ── Qısa təsvirli məhsullar ────────────────────────────────────────────
     Bəzi məhsullarda təsvir cəmi bir sətirdir (məs. 655 — yalnız bir
     callout), spesifikasiya kartları isə uzun olur. Yuxarıdakı 1fr|24rem
     bölgüsü onda sol sütunun altında ~500px deşik qoyurdu.

     JS hündürlükləri ölçür (aşağıda "lv-pd--flat" bloku) və fərq gözə
     dəyəcək qədər böyükdürsə bu sinfi verir:
       • `.js-product-details` qabı layoutdan çıxır (display:contents),
         beləliklə HƏR ÜÇ kart birbaşa qrid elementi olur;
       • sütunlar bərabərləşir (auto-fit — dar ekranda özü 2-yə düşür);
       • `stretch` ilə kartların alt kənarı bir xəttə düşür, yəni boşluq
         kartın İÇİNDƏ qalır, səhifədə deşik kimi görünmür.
     Sinif verilməzsə yuxarıdakı normal quruluş toxunulmamış qalır. */
  #product_accordion.lv-pd--flat {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    align-items: stretch;
  }
  #product_accordion.lv-pd--flat > .js-product-details {
    display: contents;
    position: static;
  }
  #product_accordion.lv-pd--flat > #product_description,
  #product_accordion.lv-pd--flat > .js-product-details > * { grid-column: auto; }
  /* `accordion-flush` kartlara alt boşluq verir — stretch-də bu, alt kənarı
     bir neçə piksel aşağı-yuxarı edirdi */
  #product_accordion.lv-pd--flat > *,
  #product_accordion.lv-pd--flat > .js-product-details > * { margin-bottom: 0; }
  /* Kartın içi yuxarıdan başlasın — dartılan yer kartın altında toplansın.
     `.show` yalnız tam açıq vəziyyətdə olur; yığılma anında Bootstrap onu
     silib `.collapsing` qoyur, ona görə animasiya pozulmur. */
  #product_accordion.lv-pd--flat .accordion-item { display: flex; flex-direction: column; }
  #product_accordion.lv-pd--flat .accordion-collapse.show { flex: 1 1 auto; }
}

/* Hər iki blok kart görünüşündə — mövzunun "accordion-flush" xətləri
   yan-yana quruluşda sərgərdan görünürdü */
#product_accordion .accordion-item {
  border: 1px solid var(--lv-p-border);
  border-radius: .75rem;
  background: var(--lv-p-surface);
  overflow: hidden;
}
#product_accordion .accordion-header { margin: 0; }
#product_accordion .accordion-button {
  padding: .875rem 1.125rem;
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--lv-p-text);
  background: var(--lv-p-surface-sub);
  box-shadow: none;
}
#product_accordion .accordion-button:not(.collapsed) { background: var(--lv-p-surface-sub); color: var(--lv-p-text); }
#product_accordion .accordion-button:focus { box-shadow: none; }
#product_accordion .accordion-button:focus-visible { outline: 2px solid var(--lv-green-600); outline-offset: -2px; }
#product_accordion .accordion-body { padding: 1.125rem; }

/* Spesifikasiya cədvəlləri — Polaris "DataTable" sətirləri */
#product_accordion .accordion-body table { width: 100%; margin: 0; border-collapse: collapse; }
#product_accordion .accordion-body th,
#product_accordion .accordion-body td {
  padding: .5rem .625rem;
  border: 0;
  border-bottom: 1px solid var(--lv-p-border);
  font-size: .8125rem;
  line-height: 1.4;
  text-align: left;
  vertical-align: top;
}
#product_accordion .accordion-body th { font-weight: 600; color: var(--lv-p-text-sub); width: 45%; }
#product_accordion .accordion-body tr:last-child th,
#product_accordion .accordion-body tr:last-child td { border-bottom: 0; }

/* Spesifikasiya siyahısı 384px sütuna sığmalıdır.
   ⚠️ Mövzu `.details__list`-i üfüqi sətir kimi verir — dar sütunda
   "Varenummer 5478000823  EAN 5705157…" bir sətrə düşüb kənardan çıxırdı
   (render-də gördüm). İki sütunlu grid sətrinə çeviririk və uzun dəyərlərə
   sətir keçidi icazəsi veririk. */
#product_accordion .details__list {
  display: flex; flex-direction: column;
  margin: 0; padding: 0; list-style: none;
}
#product_accordion .details__item {
  display: grid;
  grid-template-columns: minmax(5.5rem, 42%) minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  margin: 0;
  padding: .5rem 0;
  border-bottom: 1px solid var(--lv-p-border);
}
#product_accordion .details__item:last-child { border-bottom: 0; }
#product_accordion .details__left,
#product_accordion .details__right { min-width: 0; }
#product_accordion .details__title {
  font-size: .8125rem; font-weight: 600; color: var(--lv-p-text-sub);
}
#product_accordion .details__right {
  font-size: .8125rem; color: var(--lv-p-text);
  overflow-wrap: anywhere;      /* EAN kimi uzun rəqəm sırası kəsilməsin */
}
#product_accordion .details__manufacturer-logo { max-width: 5.5rem; height: auto; }

/* Sağ sütunda hər ehtimala qarşı üfüqi daşma qoruyucusu */
#product_accordion > .js-product-details .accordion-body { overflow-x: auto; }

/* ⚠️ Bunu məhsul səhifəsini ölçərkən tapdım: 1024px-də bütün saytda 10px
   üfüqi sürüşmə var idi. Səbəb məhsul səhifəsi deyil — FOOTER-dəki uzun
   e-poçt ünvanı sətir keçidi qəbul etmirdi (`ps_contactinfo`). */
.ps-contactinfo__email,
.ps-contactinfo__email a,
.ps-contactinfo__phone,
.ps-contactinfo__phone a { overflow-wrap: anywhere; min-width: 0; }

/* Aksesuar kartı 200px-dir — ana səhifədəki 275px-lik kartın tipoqrafiyası
   bura sığmır. Render-də gördüm: "16.700,00 kr." + 44px dairəvi düymə
   məzmun sahəsindən bir neçə piksel çıxırdı və kart `overflow:hidden`
   olduğu üçün düymə kəsilirdi. Ölçüləri kartın eninə uyğunlaşdırırıq. */
.lv-plist--compact .lv-pcard__body { padding: .625rem .75rem .75rem; }
.lv-plist--compact .lv-pcard__brand { font-size: .6875rem; }
.lv-plist--compact .lv-pcard__title { font-size: .875rem; }
.lv-plist--compact .lv-pcard__price { font-size: 1.0625rem; }
.lv-plist--compact .lv-pcard__regular { font-size: .75rem; }
.lv-plist--compact .lv-pcard__stock { font-size: .75rem; }
.lv-plist--compact .lv-pcard__add { width: 2.25rem; height: 2.25rem; }
.lv-plist--compact .lv-pcard__add svg { width: 1rem; height: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   Ana səhifə — "Særlige tilbud" (`ps_specials`)
   ──────────────────────────────────────────────────────────────────────────
   Bu, köməkçi lent DEYİL — ana səhifənin əsas bloklarından biridir.
   Ona görə YIĞCAM (200px) yox, ana səhifədəki "Udvalgte varer" karuseli
   ilə EYNİ miqyasdadır (275px). Əks halda ana səhifədə iki fərqli kart
   ölçüsü alt-alta düşərdi.
   `.lv-plist` sinfini custom.js qoyur; `--lv-pl-card: 275px` onun öz
   defoltudur, ona görə burada ölçü yazmırıq — bir yerdən idarə olunsun.
   Kart kənarı da vermirik: ana səhifədəki bölmələr açıqdır, çərçivəsiz.
   ══════════════════════════════════════════════════════════════════════════ */
.ps-specials .section-title {
  margin: 0;
  font-size: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--bs-body-color, #1A1A18);
}

/* "Alle rabatter" düyməsi — `.lv-plist__footer` ilə eyni. Modulun öz
   markup-unda `.module-products__buttons` adlanır. */
.ps-specials .module-products__buttons,
.lv-plist .module-products__buttons {
  margin-top: clamp(1rem, .85rem + .5vw, 1.5rem);
  text-align: center;
}
/* Düymənin içindəki material-icons hərfi mövzuda yüklənməyəndə "kvadrat"
   kimi görünür — mətn onsuz da aydındır. */
.ps-specials .module-products__buttons .material-icons { display: none; }

/* Endirimli kartda "26,99 kr. Before 29,99 kr." sətri uzun olur və səbət
   düyməsi alt sətrə düşürdü (/tilbud səhifəsində render-də gördüm).
   `min-width: 0` ilə qiymət bloku sıxılıb ÖZ İÇİNDƏ sətir keçidi verir —
   düymə qiymətlə eyni sətirdə qalır. */
/* ⚠️ `flex-basis` SIFIR olmalıdır, `auto` yox.
   `auto` ilə flex sətir kəsimi elementin MAX-CONTENT ölçüsünə baxır:
   "26,99 kr." + "Before 29,99 kr." ≈ 208px, üstünə 44px düymə → 260px,
   kartın 244px məzmun sahəsinə sığmır və düymə alt sətrə düşür.
   `flex: 1 1 0` ilə hipotetik ölçü 0-dır: düymə eyni sətirdə qalır,
   qiymət bloku isə boş yerə genişlənib ÖZ İÇİNDƏ ("Before …" aşağı)
   sətir keçidi verir. */
.lv-pcard__foot-main { flex: 1 1 0; min-width: 0; }
.lv-pcard__prices { overflow-wrap: anywhere; }


/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT — müştərinin istəmədiyi sahələr
   ──────────────────────────────────────────────────────────────────────────
   1. addım (Personlige oplysninger):
       Titel (Hr./Fru.)                  → çıxarılır
       Fornavn + Efternavn               → YAN-YANA bir sətirdə
       Fødselsdato                       → çıxarılır
       "Modtag tilbud fra vores partnere"→ çıxarılır
       "Tilmeld dig vores nyhedsbrev"    → çıxarılır
       İki razılıq qutusu                → qutu çıxarılır, mətn bir sətrə
   2. addım (Adresser):
       Adressesupplement (address2)      → çıxarılır

   ⚠️ ŞABLON DEYİL, CSS+JS: checkout formasının sahələri PrestaShop-un PHP
   `FormField` obyektlərindən doğulur — şablon override-ı ilə sahə silinmir,
   bunun üçün modul/override lazımdır (server girişi yoxdur). Ona görə
   sahələr burada gizlədilir, JS isə göndərilmə məntiqini qoruyur.

   ⚠️ ƏN VACİB: `psgdpr` və `customer_privacy` qutuları `required`-dir.
   Sadəcə `display:none` etsək brauzer formanı GÖNDƏRMİR — Chrome
   "An invalid form control with name='psgdpr' is not focusable" deyib
   göndərməni dayandırır və müştəri səbəbini görmür. Üstəlik PrestaShop
   bu dəyərləri SERVER tərəfində də yoxlayır: göndərilməsə qeydiyyat
   xəta verir. Ona görə custom.js həmin qutuları işarələyib `required`-i
   götürür — dəyər POST-a düşür, forma işləyir.
   ══════════════════════════════════════════════════════════════════════════ */

#customer-form .mb-3:has([name="id_gender"]),
#customer-form .mb-3:has(#field-birthday),
#customer-form .mb-3:has([name="optin"]),
#customer-form .mb-3:has([name="newsletter"]),
#customer-form .mb-3:has([name="psgdpr"]),
#customer-form .mb-3:has([name="customer_privacy"]) { display: none !important; }

/* Ünvan formasında "Adressesupplement". `#field-address2` yalnız ünvan
   formasında olur, ona görə əlavə əhatə lazım deyil; səhifədə iki ünvan
   forması olsa (çatdırılma + faktura) hər ikisində işləyir. */
.mb-3:has(#field-address2) { display: none !important; }

/* Ad + Soyad bir sətirdə. Sarğını custom.js qoyur — iki `.mb-3` bloku
   qonşudur, CSS tək başına onları bir sətrə yığa bilmir. */
.lv-co-names { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 575.98px) {
  .lv-co-names { grid-template-columns: 1fr; }
}

/* Geri düyməsi davam düyməsinin sətrinə köçəndə boşalan köhnə sətir
   (JS `lv-co-emptyrow` verir) — yoxsa altda nahaq boşluq qalır. */
.lv-co-emptyrow { display: none !important; }

/* Addım naviqasiyası hər addımda eyni yerdə: geri solda, davam sağda,
   kartın altında. 3-cü və 4-cü addımlar mövzuda onsuz da belədir;
   2-ci addım JS ilə bu quruluşa gətirilir. */
#checkout-addresses-step .buttons-wrapper--split,
.checkout-grid__content .buttons-wrapper--split {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
@media (max-width: 575.98px) {
  .checkout-grid__content .buttons-wrapper--split { flex-direction: column-reverse; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════════════
   CHECKOUT — YAN SÜTUN SADƏLƏŞDİRİLİR (müştərinin iradı)
   ──────────────────────────────────────────────────────────────────────────
   Müştəri: "here you can also type in a discount code it should only be on
   page one … The cart summery is also not needed on this page. Page 1 is
   cart summery."

   Yəni checkout addımlarında yan sütun yalnız MƏBLƏĞLƏRİ göstərməlidir:
     · məhsul siyahısı ("1 vare" + "Vis detaljer" + kartlar) → gizlənir
     · rabatkode forması                                     → gizlənir
   Qalır: Subtotal / Levering / I alt, etimad ikonları.

   Hər ikisi səbət səhifəsində (`/kurv`) olduğu kimi qalır — qayda yalnız
   `body#checkout` ilə məhdudlaşdırılıb, `.cart-grid__aside`-a toxunmur.

   ⚑ Nəzərə al: rabatkode artıq checkout-da yoxdur, yəni kodu olan müştəri
     səbətə qayıtmalıdır. Müştəri məhz bunu istəyib; fikir dəyişsə bu iki
     sətri silmək kifayətdir. */
body#checkout .checkout-grid__aside .cart-summary__products,
body#checkout .checkout-grid__aside .cart-summary__voucher { display: none !important; }

/* ── İrəli düyməsi: sağ sütunda, məbləğlərin altında ─────────────────────
   Sol kartdakı əsl düymə gizlənir (JS `lv-co-hidden` verir), sağda onun
   vəkili dayanır — səbət səhifəsindəki "Fortsæt til betaling" ilə eyni
   görünüşdə: tam enli, iri, brend yaşılı. */
body#checkout .lv-co-hidden { display: none !important; }
.lv-co-cta { margin-top: .85rem; }
.lv-co-cta__btn {
  display: flex !important; align-items: center; justify-content: center; gap: .45rem;
  width: 100% !important; min-height: 48px; padding: .5rem 1rem;
  font-size: 1rem; font-weight: 600; line-height: 1.2;
}
.lv-co-cta__btn[disabled] { opacity: .55; cursor: not-allowed; }
.lv-co-cta__btn svg { flex: 0 0 auto; }

/* ── Şərtlər qutusu (4-cü addım): məbləğlə "Place Order" arasında ────────
   Müştəri onu sol kartdan çıxarıb qiymət hesablamasının altına istədi.
   JS `#conditions-to-approve` qovşağının ÖZÜNÜ köçürür (nüsxə yaratmır),
   ona görə PrestaShop-un düyməni aktivləşdirən dinləyicisi toxunulmaz qalır.
   Bootstrap `.form-check`-i `padding-left` + `float` ilə qurur; burada dar
   sütunda iki sətirlik mətn üçün flex daha dəqiqdir. */
body#checkout .checkout-grid__aside-wrapper .lv-co-terms {
  /* Mənfi yan margin: fon qırmızıya dönəndə sütunun tam eninə yayılsın,
     mətn isə yuxarıdakı məbləğlərlə eyni xətdə qalsın. */
  margin: .85rem -.55rem 0;
  padding: .45rem .55rem;
  border: 1px solid transparent;
  border-radius: .5rem;
  transition: background-color .18s ease, border-color .18s ease;
}
body#checkout .checkout-grid__aside-wrapper .lv-co-terms .form-check {
  display: flex; align-items: flex-start; gap: .55rem;
  margin: 0 0 .35rem; padding: 0;
}
body#checkout .checkout-grid__aside-wrapper .lv-co-terms .form-check:last-child { margin-bottom: 0; }
body#checkout .checkout-grid__aside-wrapper .lv-co-terms .form-check-input {
  flex: 0 0 auto; float: none; margin: .15rem 0 0;
}
body#checkout .checkout-grid__aside-wrapper .lv-co-terms .form-check-label {
  margin: 0; font-size: .8125rem; line-height: 1.45;
  color: var(--lv-p-text, #303030);
}
body#checkout .checkout-grid__aside-wrapper .lv-co-terms a {
  color: var(--lv-green-700, #26702F); text-decoration: underline;
}
/* Şərtlər varsa düymə ona daha yaxın dayansın — bir qrup kimi oxunsun */
body#checkout .lv-co-terms + .lv-co-cta { margin-top: .6rem; }

/* ── "Nə çatmır?" — qırmızı hal + nəbz ───────────────────────────────────
   Müştərinin qərarı: son addımda düyməni söndürmək əvəzinə basılan saxlamaq,
   çatışmayanı isə göstərmək. Səbəbi haqlıdır — sönük düymə niyə sönük
   olduğunu demir, müştəri ilişib qalır və səbəti atır.

   ⚠️ Ölçü DƏYİŞMİR, yalnız rəng: qutunun padding/border-i normal halda da
   var (yuxarıda, şəffaf border ilə), ona görə qırmızıya dönəndə düymə
   aşağı sıçramır. */
@keyframes lv-attn {
    0% { transform: scale(1); }
   15% { transform: scale(1.045); }
   30% { transform: scale(.995); }
   45% { transform: scale(1.03); }
   60% { transform: scale(1); }
  100% { transform: scale(1); }
}

body#checkout .lv-attn {
  animation: lv-attn .62s ease-in-out 2;
  transform-origin: center;
}
body#checkout .checkout-grid__aside-wrapper .lv-co-terms.lv-attn {
  border-color: #D64545;
  background: #FDF2F2;
}
body#checkout .checkout-grid__aside-wrapper .lv-co-terms.lv-attn .form-check-label { color: #A32222; }
body#checkout .checkout-grid__aside-wrapper .lv-co-terms.lv-attn .form-check-input { border-color: #D64545; }
body#checkout .checkout-grid__aside-wrapper .lv-co-terms.lv-attn a { color: #A32222; }

/* Ödəniş üsulu seçilməyibsə — eyni dil, sol sütunda */
body#checkout .payment-options__list.lv-attn {
  border: 1px solid #D64545;
  border-radius: .65rem;
  background: #FDF2F2;
  padding: .5rem;
}

/* İzah sətri — YALNIZ ekran oxuyucusu üçün, gözlə görünmür.
   ⚠️ Görünən mətn kimi qoymuşdum, ölçdüm: qutu 56 → 73px olurdu və düymə
   düz basılma anında 17px aşağı sıçrayırdı. Vizual siqnal onsuz da var
   (qırmızı fon + qırmızı etiket + nəbz + fokus halqası), ona görə mətn
   axından çıxarılıb — `role="alert"` ilə yenə oxunur. */
.lv-attn-msg {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hərəkəti azaldılmış rejim: rəng qalır, nəbz getmir */
@media (prefers-reduced-motion: reduce) {
  body#checkout .lv-attn { animation: none; }
}

/* Çıxarılan razılıq qutularının yerinə bir sətir mətn — müştəri nəyi
   qəbul etdiyini görməlidir. Düymənin dərhal üstündədir. */
.lv-co-consent {
  margin: 0 0 1rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--lv-p-text-sub);
}
.lv-co-consent a { color: var(--lv-green-700); text-decoration: underline; }


/* ══════════════════════════════════════════════════════════════════════════
   Aksesuar bloku — satın-alma blokunun içində
   Quruluşu custom.js qurur. Görünüş: "Səbətə at"-ın üstündə yığcam sətir,
   bir anda bir aksesuar; çox olanda oxlarla keçilir.
   Fon açıq yaşıldır — müştəri bu tonu bəyəndi və burada işi də var:
   blok məhsulun öz məlumatı deyil, ƏLAVƏ təklifdir, ona görə fonla ayrılır.
   ══════════════════════════════════════════════════════════════════════════ */

.lv-acc {
  margin: 0 0 .85rem;
  padding: .75rem .85rem .85rem;
  border: 1px solid var(--lv-green-100, #E1EFE3);
  border-radius: .65rem;
  background: var(--lv-green-50, #F4F9F4);
}
.lv-acc__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .6rem;
}
.lv-acc__title {
  margin: 0;
  font-size: .9375rem; font-weight: 650;
  color: var(--lv-p-text, #303030);
}
.lv-acc__nav { display: flex; gap: .3rem; flex: 0 0 auto; }
.lv-acc__nav[hidden] { display: none; }
.lv-acc__arrow {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: 1px solid var(--lv-green-200, #CFE5D3);
  border-radius: 50%;
  background: #fff;
  color: var(--lv-green-800, #235D2B);
  cursor: pointer;
  transition: border-color .12s ease, opacity .12s ease;
}
.lv-acc__arrow svg { width: .8rem; height: .8rem; }
.lv-acc__arrow:hover:not(:disabled) { border-color: var(--lv-green-500, #39A949); }
.lv-acc__arrow:disabled { opacity: .35; cursor: default; }
.lv-acc__arrow:focus-visible { outline: 2px solid var(--lv-green-600, #2F8A3D); outline-offset: 2px; }

.lv-acc__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lv-acc__viewport::-webkit-scrollbar { display: none; }
.lv-acc__track { display: flex; gap: .75rem; }

.lv-acc__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  gap: .7rem;
  align-items: center;
  padding: .6rem .7rem;
  border: 1px solid var(--lv-p-border, #E3E3E3);
  border-radius: .5rem;
  background: #fff;
}
.lv-acc__media {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  overflow: hidden; border-radius: .375rem; background: #fff;
}
.lv-acc__media img { width: 100%; height: 100%; object-fit: contain; }
.lv-acc__body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.lv-acc__name {
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
  color: var(--lv-p-text, #303030); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lv-acc__name:hover { color: var(--lv-green-700, #2C7E38); text-decoration: underline; }
.lv-acc__price {
  font-size: .9375rem; font-weight: 700;
  color: var(--lv-p-text, #303030);
  font-variant-numeric: tabular-nums;
}
.lv-acc__action { flex: 0 0 auto; }
.lv-acc__action .lv-pcard__form { margin: 0; }
.lv-acc__action .lv-pcard__add { width: 2.25rem; height: 2.25rem; }
.lv-acc__action .lv-pcard__add svg { width: 1rem; height: 1rem; }

/* Aşağıdakı orijinal bölmə köçürüldükdən sonra gizlənir */
.lv-acc-moved { display: none !important; }


/* ══════════════════════════════════════════════════════════════════════════
   Açıq yaşıl fon — təklif zolaqlarında
   Müştəri bu tonu bəyəndi ("enhances the different placements").
   Məntiqli yer: məhsulun ÖZ məlumatı olmayan, TƏKLİF olan bölmələr.
   Beləliklə səhifədə ritm yaranır: ağ = bu məhsul, açıq yaşıl = təklif.
   Ana səhifəyə və mətn bloklarına toxunmuram — hər şey yaşıl olsa
   ayırdetmə itir.
   ══════════════════════════════════════════════════════════════════════════ */
body#product .ps-categoryproducts,
body#product .product__accessories,
body#product .product-accessories,
body#product .ps-crossselling > .module-products,
body#product .ps-viewedproduct > .module-products {
  border-color: var(--lv-green-100, #E1EFE3);
  background: var(--lv-green-50, #F4F9F4);
}

/* Satın-alma blokundaki təkrar rəy düyməsi — gizli, amma klikləniləndir
   (ulduz linki onu klikləyir). `visibility`/`display:none` yox, çünki
   `display:none` elementi klik üçün yararsız edir. */
.lv-rev-dup {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}