/* ==========================================================================
   QEMOSA redesign - GRID LAYER
   Author: TEDBG - https://tedbg.com
   Loaded after Journal's generated CSS (style.min.css) and after
   qemosa-r-base.css, so it wins at equal specificity.

   Scope: HOMEPAGE product modules only.
     module ids: 311 (Podbrani produkti), 485 (Razprodazba / Sale),
                 477, 488 (Novi produkti)
     selector prefix: body.route-common-home div.module-products-<id>

   Uses design tokens from qemosa-r-base.css: --qr-font, --qr-bg,
   --qr-photo-bg, --qr-ink, --qr-muted, --qr-line, --qr-red, --qr-badge
   and the --qr-w-* weight variables. Does not redefine tokens, does not
   touch .module-title (owned by qemosa-r-base.css).

   Does not touch body.route-product-category (owned by qemosa-custom.css)
   or the product page (qemosa-r-product.css).
   ========================================================================== */

/* ----- 1. Grid container: 2 columns mobile, 2px gap, full-bleed ---------- */
/* Journal renders .product-grid.ipr-grid as a flex-wrap row with per-module
   item counts baked into inline head styles we cannot see/edit here, so we
   replace it outright with a CSS grid that always gives us 2/4 columns. */
html.route-common-home body div.module-products-311 .module-body .product-grid.ipr-grid,
html.route-common-home body div.module-products-485 .module-body .product-grid.ipr-grid,
html.route-common-home body div.module-products-477 .module-body .product-grid.ipr-grid,
html.route-common-home body div.module-products-488 .module-body .product-grid.ipr-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 0 !important;
}

/* kill the row separator Journal draws between .product-layout items when
   the grid is not in "auto-grid" mode */
html.route-common-home body div.module-products-311 .module-body .product-layout,
html.route-common-home body div.module-products-485 .module-body .product-layout,
html.route-common-home body div.module-products-477 .module-body .product-layout,
html.route-common-home body div.module-products-488 .module-body .product-layout {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}

/* ----- 2. Borderless product card: no card chrome, no hover lift --------- */
html.route-common-home body div.module-products-311 .module-body .product-thumb,
html.route-common-home body div.module-products-485 .module-body .product-thumb,
html.route-common-home body div.module-products-477 .module-body .product-thumb,
html.route-common-home body div.module-products-488 .module-body .product-thumb {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    transform: none !important;
    transition: none !important;
    --scale: 1 !important;
}

html.route-common-home body div.module-products-311 .module-body .product-thumb:hover,
html.route-common-home body div.module-products-485 .module-body .product-thumb:hover,
html.route-common-home body div.module-products-477 .module-body .product-thumb:hover,
html.route-common-home body div.module-products-488 .module-body .product-thumb:hover {
    box-shadow: none !important;
    transform: none !important;
}

/* image area: flush, no radius, background = photo token */
html.route-common-home body div.module-products-311 .module-body .image-group,
html.route-common-home body div.module-products-485 .module-body .image-group,
html.route-common-home body div.module-products-477 .module-body .image-group,
html.route-common-home body div.module-products-488 .module-body .image-group,
html.route-common-home body div.module-products-311 .module-body .image-group .image,
html.route-common-home body div.module-products-485 .module-body .image-group .image,
html.route-common-home body div.module-products-477 .module-body .image-group .image,
html.route-common-home body div.module-products-488 .module-body .image-group .image {
    background: var(--qr-photo-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    position: relative !important;
}

html.route-common-home body div.module-products-311 .module-body .image-group .image a.product-img,
html.route-common-home body div.module-products-485 .module-body .image-group .image a.product-img,
html.route-common-home body div.module-products-477 .module-body .image-group .image a.product-img,
html.route-common-home body div.module-products-488 .module-body .image-group .image a.product-img {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

html.route-common-home body div.module-products-311 .module-body .image-group .image a img,
html.route-common-home body div.module-products-485 .module-body .image-group .image a img,
html.route-common-home body div.module-products-477 .module-body .image-group .image a img,
html.route-common-home body div.module-products-488 .module-body .image-group .image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
}

html.route-common-home body div.module-products-311 .module-body .image-group .image a:hover img,
html.route-common-home body div.module-products-485 .module-body .image-group .image a:hover img,
html.route-common-home body div.module-products-477 .module-body .image-group .image a:hover img,
html.route-common-home body div.module-products-488 .module-body .image-group .image a:hover img {
    transform: none !important;
}

/* ----- 3. Discount badge: rectangle glued to top-left corner ------------- */
/* Journal's default label id for automatic discount labels on this store is
   494 (confirmed on every sale product in the homepage DOM sample). Any
   other group label (e.g. id 476, the "Lyubim produkt" promo text) is hidden
   so only one badge is ever visible, per spec. */
html.route-common-home body div.module-products-311 .module-body .product-labels,
html.route-common-home body div.module-products-485 .module-body .product-labels,
html.route-common-home body div.module-products-477 .module-body .product-labels,
html.route-common-home body div.module-products-488 .module-body .product-labels {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    inset: 0 !important;
}

html.route-common-home body div.module-products-311 .module-body .product-labels .product-label-group:not(.product-label-494),
html.route-common-home body div.module-products-485 .module-body .product-labels .product-label-group:not(.product-label-494),
html.route-common-home body div.module-products-477 .module-body .product-labels .product-label-group:not(.product-label-494),
html.route-common-home body div.module-products-488 .module-body .product-labels .product-label-group:not(.product-label-494) {
    display: none !important;
}

html.route-common-home body div.module-products-311 .module-body .product-labels .product-label-494,
html.route-common-home body div.module-products-485 .module-body .product-labels .product-label-494,
html.route-common-home body div.module-products-477 .module-body .product-labels .product-label-494,
html.route-common-home body div.module-products-488 .module-body .product-labels .product-label-494 {
    display: block !important;
    order: 0 !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    background: var(--qr-badge) !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
}

html.route-common-home body div.module-products-311 .module-body .product-labels .product-label-494 strong,
html.route-common-home body div.module-products-485 .module-body .product-labels .product-label-494 strong,
html.route-common-home body div.module-products-477 .module-body .product-labels .product-label-494 strong,
html.route-common-home body div.module-products-488 .module-body .product-labels .product-label-494 strong {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #ffffff !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-bold) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-transform: none !important;
}

/* ----- 4. Hide non-essential caption blocks (f) --------------------------- */
/* NOTE: .stats (the brand line) is NOT hidden - the client wants the brand
   visible on the homepage cards, styled like the category page cards (brand
   name with a short underline, above the product name). See section 4b. */
html.route-common-home body div.module-products-311 .module-body .description,
html.route-common-home body div.module-products-485 .module-body .description,
html.route-common-home body div.module-products-477 .module-body .description,
html.route-common-home body div.module-products-488 .module-body .description,
html.route-common-home body div.module-products-311 .module-body .rating,
html.route-common-home body div.module-products-485 .module-body .rating,
html.route-common-home body div.module-products-477 .module-body .rating,
html.route-common-home body div.module-products-488 .module-body .rating,
html.route-common-home body div.module-products-311 .module-body .buttons-wrapper,
html.route-common-home body div.module-products-485 .module-body .buttons-wrapper,
html.route-common-home body div.module-products-477 .module-body .buttons-wrapper,
html.route-common-home body div.module-products-488 .module-body .buttons-wrapper,
html.route-common-home body div.module-products-311 .module-body .button-group,
html.route-common-home body div.module-products-485 .module-body .button-group,
html.route-common-home body div.module-products-477 .module-body .button-group,
html.route-common-home body div.module-products-488 .module-body .button-group,
html.route-common-home body div.module-products-311 .module-body .cart-group,
html.route-common-home body div.module-products-485 .module-body .cart-group,
html.route-common-home body div.module-products-477 .module-body .cart-group,
html.route-common-home body div.module-products-488 .module-body .cart-group,
html.route-common-home body div.module-products-311 .module-body .quickview-button,
html.route-common-home body div.module-products-485 .module-body .quickview-button,
html.route-common-home body div.module-products-477 .module-body .quickview-button,
html.route-common-home body div.module-products-488 .module-body .quickview-button,
html.route-common-home body div.module-products-311 .module-body .wish-group,
html.route-common-home body div.module-products-485 .module-body .wish-group,
html.route-common-home body div.module-products-477 .module-body .wish-group,
html.route-common-home body div.module-products-488 .module-body .wish-group {
    display: none !important;
}

/* ----- 4b. Brand line above the name - same look as the category cards ---- */
/* markup: .caption > .stats > .stats-group > .stat-1 >
   (.stats-label "Производител:") + (a BRAND). The label is hidden, the brand
   link stays, with the short underline divider like on the category page. */
html.route-common-home body div.module-products-311 .module-body .caption .stats,
html.route-common-home body div.module-products-485 .module-body .caption .stats,
html.route-common-home body div.module-products-477 .module-body .caption .stats,
html.route-common-home body div.module-products-488 .module-body .caption .stats {
    display: block !important;
    text-align: left !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--qr-line) !important;
    background: none !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .stats .stats-label,
html.route-common-home body div.module-products-485 .module-body .caption .stats .stats-label,
html.route-common-home body div.module-products-477 .module-body .caption .stats .stats-label,
html.route-common-home body div.module-products-488 .module-body .caption .stats .stats-label {
    display: none !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .stats a,
html.route-common-home body div.module-products-485 .module-body .caption .stats a,
html.route-common-home body div.module-products-477 .module-body .caption .stats a,
html.route-common-home body div.module-products-488 .module-body .caption .stats a {
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 13px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--qr-ink) !important;
    text-decoration: none !important;
}

/* ----- 5. Caption box + product name (d, g) -------------------------------- */
/* The grid is full-bleed (100vw), so the outermost column has no page gutter
   at all - without this padding the brand line and the product name sit hard
   against the edge of the screen. The images stay flush (that is the approved
   look); only the text block is inset. Desktop gets more because the browser
   window edge is much closer to the eye than a phone bezel. */
html.route-common-home body div.module-products-311 .module-body .caption,
html.route-common-home body div.module-products-485 .module-body .caption,
html.route-common-home body div.module-products-477 .module-body .caption,
html.route-common-home body div.module-products-488 .module-body .caption {
    padding: 10px 12px 22px !important;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .name,
html.route-common-home body div.module-products-485 .module-body .caption .name,
html.route-common-home body div.module-products-477 .module-body .caption .name,
html.route-common-home body div.module-products-488 .module-body .caption .name {
    text-align: left !important;
    margin: 0 !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .name a,
html.route-common-home body div.module-products-485 .module-body .caption .name a,
html.route-common-home body div.module-products-477 .module-body .caption .name a,
html.route-common-home body div.module-products-488 .module-body .caption .name a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--qr-ink) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ----- 6. Price block (e) -------------------------------------------------- */
html.route-common-home body div.module-products-311 .module-body .caption .price,
html.route-common-home body div.module-products-485 .module-body .caption .price,
html.route-common-home body div.module-products-477 .module-body .caption .price,
html.route-common-home body div.module-products-488 .module-body .caption .price {
    text-align: left !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .price > div,
html.route-common-home body div.module-products-485 .module-body .caption .price > div,
html.route-common-home body div.module-products-477 .module-body .caption .price > div,
html.route-common-home body div.module-products-488 .module-body .caption .price > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .price .price-new,
html.route-common-home body div.module-products-485 .module-body .caption .price .price-new,
html.route-common-home body div.module-products-477 .module-body .caption .price .price-new,
html.route-common-home body div.module-products-488 .module-body .caption .price .price-new {
    order: 0 !important;
    font-weight: var(--qr-w-bold) !important;
    font-size: 17px !important;
    color: var(--qr-red) !important;
    text-decoration: none !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .price .price-old,
html.route-common-home body div.module-products-485 .module-body .caption .price .price-old,
html.route-common-home body div.module-products-477 .module-body .caption .price .price-old,
html.route-common-home body div.module-products-488 .module-body .caption .price .price-old {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-weight: var(--qr-w-light) !important;
    font-size: 15px !important;
    color: var(--qr-ink) !important;
    text-decoration: none !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .price .price-tax,
html.route-common-home body div.module-products-485 .module-body .caption .price .price-tax,
html.route-common-home body div.module-products-477 .module-body .caption .price .price-tax,
html.route-common-home body div.module-products-488 .module-body .caption .price .price-tax {
    display: none !important;
}

/* ----- 6a. Desktop: more air around the caption text ---------------------- */
/* On a wide screen the first and last column touch the window edge, which
   made "NEW BALANCE" and the product name unreadable against the frame. */
@media (min-width: 992px) {
    html.route-common-home body div.module-products-311 .module-body .caption,
    html.route-common-home body div.module-products-485 .module-body .caption,
    html.route-common-home body div.module-products-477 .module-body .caption,
    html.route-common-home body div.module-products-488 .module-body .caption {
        padding: 14px 20px 30px !important;
    }
}

/* ----- 6b. KATEGORII tiles - module-banners_grid-516 ---------------------- */
/* New banners_grid module (id 516, "Kategorii - Home"): 6 category tiles,
   2 per row, minimal 2px gap, name on a semi-transparent dark strip across
   the middle of the photo, whole tile is a link. Section title "KATEGORII"
   is added by the module title handled in qemosa-r-base.css. */
html.route-common-home body .module-banners_grid-516 .banners-grid,
html.route-common-home body .module-banners_grid-516 .banners-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    padding: 0 !important;
}

html.route-common-home body .module-banners_grid-516 .banners-grid {
    /* outer wrapper stays in flow; inner wrapper does the columns */
    display: block !important;
    width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
}

html.route-common-home body .module-banners_grid-516 .banners-wrapper {
    width: 100% !important;
    left: auto !important;
    margin-left: 0 !important;
}

html.route-common-home body .module-banners_grid-516 .module-item {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

html.route-common-home body .module-banners_grid-516 .module-item img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    display: block !important;
}

/* the category name strip across the middle of the tile */
html.route-common-home body .module-banners_grid-516 .slide-cols {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    pointer-events: none !important;
}

/* Journal re-enables clicks on .module-subitem (pointer-events:auto, z-index:3),
   which makes the name strip swallow clicks. Kill it so the click falls through
   to the full-tile .slide-link and the whole banner, text included, is a link. */
html.route-common-home body .module-banners_grid-516 .slide-cols .module-subitem,
html.route-common-home body .module-banners_grid-516 .slide-cols * {
    pointer-events: none !important;
}

html.route-common-home body .module-banners_grid-516 .slide-col,
html.route-common-home body .module-banners_grid-516 .slide-layers {
    width: 100% !important;
    padding: 0 !important;
}

html.route-common-home body .module-banners_grid-516 .slide-text {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    background: rgba(40, 40, 40, .65) !important;
    padding: 14px 0 !important;
    margin: 0 !important;
}

/* the text layer is an auto-width inline box by default - stretch it so the
   centered text really sits in the middle of the full-width strip */
html.route-common-home body .module-banners_grid-516 .slide-text .slide-text-layer {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.route-common-home body .module-banners_grid-516 .slide-text .slide-text-item,
html.route-common-home body .module-banners_grid-516 .slide-text span {
    display: block !important;
    text-align: center !important;
    color: #ffffff !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 24px !important;
    line-height: 1.1 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* hide any stray carousel chrome on this module */
html.route-common-home body .module-banners_grid-516 .auto-carousel-controls,
html.route-common-home body .module-banners_grid-516 .swiper-buttons,
html.route-common-home body .module-banners_grid-516 .swiper-pagination {
    display: none !important;
}

/* ----- 7. Desktop: 4 columns, same borderless treatment ------------------- */
@media (min-width: 992px) {
    html.route-common-home body div.module-products-311 .module-body .product-grid.ipr-grid,
    html.route-common-home body div.module-products-485 .module-body .product-grid.ipr-grid,
    html.route-common-home body div.module-products-477 .module-body .product-grid.ipr-grid,
    html.route-common-home body div.module-products-488 .module-body .product-grid.ipr-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2px !important;
    }

    /* categories: 3 per row on desktop */
    html.route-common-home body .module-banners_grid-516 .banners-wrapper {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ----- 8. Banner 3 (module 487) - FOLLOW US ON SOCIAL MEDIA --------------- */
/* item 1 = photo across the full width with a translucent title strip,
   items 2-3 = white boxes with the FB / IG logos linking to the profiles.
   NOTE: .module-item:before is Journal's proportional-height spacer - the
   title strip has to live on ::after, and the logo boxes kill :before. */

html.route-common-home body .module-banners_grid-487 .banners-wrapper.auto-grid-items {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

/* Същата пропорция като банера "QEMOSA COMMUNITY" (модул 486, 2200x933),
   за да четат двата блока като двойка - бележка на клиента 35. */
html.route-common-home body .module-banners_grid-487 .module-item-1 {
    grid-column: 1 / -1 !important;
    position: relative;
    aspect-ratio: 21 / 9 !important;
    height: auto !important;
    overflow: hidden !important;
}

/* the photo is a 3:2 file - crop it to a band, keeping the group in frame */
html.route-common-home body .module-banners_grid-487 .module-item-1::before {
    display: none !important;
    content: none !important;
}

html.route-common-home body .module-banners_grid-487 .module-item-1 .slide-content,
html.route-common-home body .module-banners_grid-487 .module-item-1 .slide-content > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 72% !important;
}

/* Лентата стои по средата на снимката, както заглавието на банера
   "QEMOSA COMMUNITY" - иначе единият надпис е горе, другият в средата и
   двата блока не си пасват (бележка на клиента 35). */
html.route-common-home body .module-banners_grid-487 .module-item-1::after {
    content: "FOLLOW US ON SOCIAL MEDIA" !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    z-index: 3;
    display: block !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, .25) !important;
    color: #ffffff !important;
    text-align: center;
    font-family: var(--qr-font);
    font-weight: var(--qr-w-regular);
    font-size: clamp(15px, 2.2vw, 30px);
    line-height: 1.1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: none;
    pointer-events: none;
}

/* the two logo boxes: no proportional spacer, fixed comfortable padding */
html.route-common-home body .module-banners_grid-487 .module-item-2,
html.route-common-home body .module-banners_grid-487 .module-item-3 {
    background: #ffffff !important;
    border: 1px solid #e2e2e2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 26px 0 !important;
    min-height: 0 !important;
    height: auto !important;
}

html.route-common-home body .module-banners_grid-487 .module-item-2::before,
html.route-common-home body .module-banners_grid-487 .module-item-3::before,
html.route-common-home body .module-banners_grid-487 .module-item-2::after,
html.route-common-home body .module-banners_grid-487 .module-item-3::after {
    display: none !important;
    content: none !important;
    padding: 0 !important;
}

html.route-common-home body .module-banners_grid-487 .module-item-2 .slide-content,
html.route-common-home body .module-banners_grid-487 .module-item-3 .slide-content {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html.route-common-home body .module-banners_grid-487 .module-item-2 .slide-content > img,
html.route-common-home body .module-banners_grid-487 .module-item-3 .slide-content > img {
    position: static !important;
    width: auto !important;
    height: 56px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    align-self: center !important;
}

/* hide any stray carousel chrome on this module */
html.route-common-home body .module-banners_grid-487 .auto-carousel-controls,
html.route-common-home body .module-banners_grid-487 .swiper-buttons,
html.route-common-home body .module-banners_grid-487 .swiper-pagination {
    display: none !important;
}

@media (min-width: 992px) {
    html.route-common-home body .module-banners_grid-487 .module-item-2,
    html.route-common-home body .module-banners_grid-487 .module-item-3 {
        padding: 34px 0 !important;
    }

    html.route-common-home body .module-banners_grid-487 .module-item-2 .slide-content > img,
    html.route-common-home body .module-banners_grid-487 .module-item-3 .slide-content > img {
        width: auto !important;
        height: 64px !important;
    }
}

/* ----- 9. Price treatment on the rest of the shop ------------------------- */
/* korekcii.md т. 14 и 30: активната цена е по-дебела, старата е под нея и е
   по-тънка (без зачеркване). Секция 6 прави това за модулите на началната
   страница; тук същото се прилага и на останалите места, където Journal
   рендерира продуктова мрежа - категория (вкл. НОВИ ПРОДУКТИ и OUTLET),
   производител, промоции, търсене и каросела "подобни продукти" на
   продуктовата страница. Без него старата цена стои ОТГОРЕ и зачеркната.

   Двойната валута "X € / Y лв" е span.second-currency от OCMOD-а. Journal
   прави span-овете вътре в .price flex елементи, затова price-old/new трябва
   да са flex row nowrap - иначе " / Y лв" пада на втори ред. */
html.route-product-category body #content .product-thumb .price > div,
html.route-product-manufacturer-info body #content .product-thumb .price > div,
html.route-product-special body #content .product-thumb .price > div,
html.route-product-search body #content .product-thumb .price > div,
html.route-product-product body .module-products .product-thumb .price > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
}

html.route-product-category body #content .product-thumb .price,
html.route-product-manufacturer-info body #content .product-thumb .price,
html.route-product-special body #content .product-thumb .price,
html.route-product-search body #content .product-thumb .price,
html.route-product-product body .module-products .product-thumb .price {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 6px 0 !important;
}

html.route-product-category body #content .product-thumb .price .price-new,
html.route-product-manufacturer-info body #content .product-thumb .price .price-new,
html.route-product-special body #content .product-thumb .price .price-new,
html.route-product-search body #content .product-thumb .price .price-new,
html.route-product-product body .module-products .product-thumb .price .price-new {
    order: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-weight: var(--qr-w-bold) !important;
    font-size: 15px !important;
    color: var(--qr-red) !important;
    text-decoration: none !important;
}

html.route-product-category body #content .product-thumb .price .price-old,
html.route-product-manufacturer-info body #content .product-thumb .price .price-old,
html.route-product-special body #content .product-thumb .price .price-old,
html.route-product-search body #content .product-thumb .price .price-old,
html.route-product-product body .module-products .product-thumb .price .price-old {
    order: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    font-weight: var(--qr-w-light) !important;
    font-size: 14px !important;
    color: var(--qr-ink) !important;
    text-decoration: none !important;
}

html.route-product-category body #content .product-thumb .price .price-tax,
html.route-product-manufacturer-info body #content .product-thumb .price .price-tax,
html.route-product-special body #content .product-thumb .price .price-tax,
html.route-product-search body #content .product-thumb .price .price-tax,
html.route-product-product body .module-products .product-thumb .price .price-tax {
    display: none !important;
}

/* Тесни екрани: картата на категорийната мрежа е ~110px широка отвътре, а
   "66.82 € / 130.69 лв" на един ред иска повече. Свиваме страничния padding
   и караме цената да следва ширината на екрана, за да не излиза извън картата
   (мерено: преливаше с 42px на 390px и с 55px на 360px). */
@media (max-width: 767px) {
    html.route-product-category body #content .product-thumb .caption,
    html.route-product-manufacturer-info body #content .product-thumb .caption,
    html.route-product-special body #content .product-thumb .caption,
    html.route-product-search body #content .product-thumb .caption {
        padding: 12px 10px 16px !important;
    }

    html.route-product-category body #content .product-thumb .price,
    html.route-product-manufacturer-info body #content .product-thumb .price,
    html.route-product-special body #content .product-thumb .price,
    html.route-product-search body #content .product-thumb .price {
        padding: 4px 0 0 !important;
        margin: 4px 0 6px !important;
    }

    html.route-product-category body #content .product-thumb .price .price-new,
    html.route-product-manufacturer-info body #content .product-thumb .price .price-new,
    html.route-product-special body #content .product-thumb .price .price-new,
    html.route-product-search body #content .product-thumb .price .price-new {
        font-size: clamp(9px, 3.1vw, 15px) !important;
    }

    html.route-product-category body #content .product-thumb .price .price-old,
    html.route-product-manufacturer-info body #content .product-thumb .price .price-old,
    html.route-product-special body #content .product-thumb .price .price-old,
    html.route-product-search body #content .product-thumb .price .price-old {
        font-size: clamp(8px, 2.85vw, 14px) !important;
    }
}

/* Под 400px картата е под 100px отвътре - тук всеки пиксел от padding-а е
   нужен на цената. */
@media (max-width: 400px) {
    html.route-product-category body #content .product-thumb .caption,
    html.route-product-manufacturer-info body #content .product-thumb .caption,
    html.route-product-special body #content .product-thumb .caption,
    html.route-product-search body #content .product-thumb .caption {
        padding: 12px 8px 14px !important;
    }
}

/* ----- 10. Един ляв ръб за марка, име и цена (навсякъде) ------------------ */
/* Journal слага собствени странични padding-и по блоковете в .caption -
   .stats 7px, .name 12px, .price 12px (стойностите идват от настройките на
   модула), затова трите реда тръгват от три различни места. Измерено преди
   фикса на 390px в категория: марка 53.6px, име 58.6px, цена 46.6px; на
   началната десктоп: марка 12.5px, име и цена 24.5px.

   Тук страничните отстояния на самите блокове стават 0, така че всичко тръгва
   от вътрешния ръб на .caption - единственото място, което определя отстъпа.
   Правилото НЕ е вързано за маршрут или id на модул, защото трябва да важи и
   за категориите, и за Journal модулите (начална, каросели, "подобни
   продукти", производител, промоции, търсене). */
html body .product-thumb .caption > .stats,
html body .product-thumb .caption > .name,
html body .product-thumb .caption > .price,
html body .product-thumb .caption > .description,
html body .product-thumb .caption > .stats > .stats-group,
html body .product-thumb .caption > .price > div {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

html body .product-thumb .caption > .stats,
html body .product-thumb .caption > .name,
html body .product-thumb .caption > .price {
    align-items: flex-start !important;
}

/* Journal държи .price > div с margin-left:-2.5px, а децата с +2.5px (негов
   трик за разстояние между стара и нова цена, когато са на един ред). Нулира
   се, за да не изместват цената спрямо името с 2-3px. */
html body .product-thumb .caption > .price > div {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body .product-thumb .caption > .price > div > span {
    margin-left: 0 !important;
}

/* ----- 11. Borderless cards inside the categories too --------------------- */
/* The client saw the category pages still in the old style: white boxes with
   borders, rounded corners, hover lift, rating stars and the badge floating
   top-right. Sections 1-6 only covered the homepage modules; this repeats the
   approved card design for every other product grid in the shop (category,
   manufacturer, promotions, search).

   Difference from the homepage: the grid is NOT pulled full-bleed on desktop,
   because these pages have a left filter column - breaking out of the content
   column there would slide the products under the sidebar. On phones there is
   no sidebar, so the grid does go edge to edge exactly like the homepage.

   These selectors carry the same "#content" weight as the older card rules in
   qemosa-custom.css and load after it, so they win the tie. */
html.route-product-category body #content .main-products.product-grid,
html.route-product-manufacturer-info body #content .main-products.product-grid,
html.route-product-special body #content .main-products.product-grid,
html.route-product-search body #content .main-products.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2px !important;
    background: none !important;
}

html.route-product-category body #content .main-products .product-layout,
html.route-product-manufacturer-info body #content .main-products .product-layout,
html.route-product-special body #content .main-products .product-layout,
html.route-product-search body #content .main-products .product-layout {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* card chrome off - this is what still made them look "old" */
html.route-product-category body #content .product-layout .product-thumb,
html.route-product-manufacturer-info body #content .product-layout .product-thumb,
html.route-product-special body #content .product-layout .product-thumb,
html.route-product-search body #content .product-layout .product-thumb,
html.route-product-category body #content .product-layout:hover .product-thumb,
html.route-product-manufacturer-info body #content .product-layout:hover .product-thumb,
html.route-product-special body #content .product-layout:hover .product-thumb,
html.route-product-search body #content .product-layout:hover .product-thumb {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
    margin: 0 !important;
    --scale: 1 !important;
}

html.route-product-category body #content .product-thumb .image-group,
html.route-product-manufacturer-info body #content .product-thumb .image-group,
html.route-product-special body #content .product-thumb .image-group,
html.route-product-search body #content .product-thumb .image-group,
html.route-product-category body #content .product-thumb .image-group .image,
html.route-product-manufacturer-info body #content .product-thumb .image-group .image,
html.route-product-special body #content .product-thumb .image-group .image,
html.route-product-search body #content .product-thumb .image-group .image {
    background: var(--qr-photo-bg) !important;
    border: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
}

html.route-product-category body #content .product-thumb .image a.product-img,
html.route-product-manufacturer-info body #content .product-thumb .image a.product-img,
html.route-product-special body #content .product-thumb .image a.product-img,
html.route-product-search body #content .product-thumb .image a.product-img {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
}

html.route-product-category body #content .product-thumb .image a img,
html.route-product-manufacturer-info body #content .product-thumb .image a img,
html.route-product-special body #content .product-thumb .image a img,
html.route-product-search body #content .product-thumb .image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transform: none !important;
}

/* badge: flat rectangle in the top-left corner, promo text label hidden */
html.route-product-category body #content .product-thumb .product-labels,
html.route-product-manufacturer-info body #content .product-thumb .product-labels,
html.route-product-special body #content .product-thumb .product-labels,
html.route-product-search body #content .product-thumb .product-labels {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.route-product-category body #content .product-thumb .product-labels .product-label-group:not(.product-label-494),
html.route-product-manufacturer-info body #content .product-thumb .product-labels .product-label-group:not(.product-label-494),
html.route-product-special body #content .product-thumb .product-labels .product-label-group:not(.product-label-494),
html.route-product-search body #content .product-thumb .product-labels .product-label-group:not(.product-label-494) {
    display: none !important;
}

html.route-product-category body #content .product-thumb .product-labels .product-label-494,
html.route-product-manufacturer-info body #content .product-thumb .product-labels .product-label-494,
html.route-product-special body #content .product-thumb .product-labels .product-label-494,
html.route-product-search body #content .product-thumb .product-labels .product-label-494 {
    display: block !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    background: var(--qr-badge) !important;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
}

html.route-product-category body #content .product-thumb .product-labels .product-label-494 strong,
html.route-product-manufacturer-info body #content .product-thumb .product-labels .product-label-494 strong,
html.route-product-special body #content .product-thumb .product-labels .product-label-494 strong,
html.route-product-search body #content .product-thumb .product-labels .product-label-494 strong {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #ffffff !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-bold) !important;
    font-size: 11px !important;
    line-height: 1 !important;
    text-transform: none !important;
}

/* only image, brand, name and price stay - same as the homepage cards */
html.route-product-category body #content .product-thumb .description,
html.route-product-manufacturer-info body #content .product-thumb .description,
html.route-product-special body #content .product-thumb .description,
html.route-product-search body #content .product-thumb .description,
html.route-product-category body #content .product-thumb .rating,
html.route-product-manufacturer-info body #content .product-thumb .rating,
html.route-product-special body #content .product-thumb .rating,
html.route-product-search body #content .product-thumb .rating,
html.route-product-category body #content .product-thumb .buttons-wrapper,
html.route-product-manufacturer-info body #content .product-thumb .buttons-wrapper,
html.route-product-special body #content .product-thumb .buttons-wrapper,
html.route-product-search body #content .product-thumb .buttons-wrapper,
html.route-product-category body #content .product-thumb .price-tax,
html.route-product-manufacturer-info body #content .product-thumb .price-tax,
html.route-product-special body #content .product-thumb .price-tax,
html.route-product-search body #content .product-thumb .price-tax {
    display: none !important;
}

/* brand line with the thin divider, exactly like the homepage cards */
html.route-product-category body #content .product-thumb .caption .stats,
html.route-product-manufacturer-info body #content .product-thumb .caption .stats,
html.route-product-special body #content .product-thumb .caption .stats,
html.route-product-search body #content .product-thumb .caption .stats {
    display: block !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--qr-line) !important;
    background: none !important;
}

html.route-product-category body #content .product-thumb .caption .stats .stats-label,
html.route-product-manufacturer-info body #content .product-thumb .caption .stats .stats-label,
html.route-product-special body #content .product-thumb .caption .stats .stats-label,
html.route-product-search body #content .product-thumb .caption .stats .stats-label {
    display: none !important;
}

html.route-product-category body #content .product-thumb .caption .stats a,
html.route-product-manufacturer-info body #content .product-thumb .caption .stats a,
html.route-product-special body #content .product-thumb .caption .stats a,
html.route-product-search body #content .product-thumb .caption .stats a {
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 13px !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--qr-ink) !important;
    text-decoration: none !important;
}

html.route-product-category body #content .product-thumb .caption .name a,
html.route-product-manufacturer-info body #content .product-thumb .caption .name a,
html.route-product-special body #content .product-thumb .caption .name a,
html.route-product-search body #content .product-thumb .caption .name a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    overflow: hidden !important;
    font-family: var(--qr-font) !important;
    font-weight: var(--qr-w-regular) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: var(--qr-ink) !important;
    text-transform: none !important;
}

/* phones: edge to edge, no sidebar in the way */
@media (max-width: 991px) {
    html.route-product-category body #content .main-products.product-grid,
    html.route-product-manufacturer-info body #content .main-products.product-grid,
    html.route-product-special body #content .main-products.product-grid,
    html.route-product-search body #content .main-products.product-grid {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* The sort + "per page" toolbar was 16px wider than a 360px screen, which
   gave the whole category page a horizontal scroll. Let the two selects
   share the row and shrink instead of keeping their fixed widths. */
@media (max-width: 767px) {
    html.route-product-category body #content .products-filter .select-group,
    html.route-product-manufacturer-info body #content .products-filter .select-group,
    html.route-product-special body #content .products-filter .select-group,
    html.route-product-search body #content .products-filter .select-group {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 8px !important;
    }

    html.route-product-category body #content .products-filter .select-group > div,
    html.route-product-manufacturer-info body #content .products-filter .select-group > div,
    html.route-product-special body #content .products-filter .select-group > div,
    html.route-product-search body #content .products-filter .select-group > div {
        flex: 1 1 140px !important;
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    html.route-product-category body #content .products-filter select.form-control,
    html.route-product-manufacturer-info body #content .products-filter select.form-control,
    html.route-product-special body #content .products-filter select.form-control,
    html.route-product-search body #content .products-filter select.form-control {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 992px) {
    html.route-product-category body #content .main-products.product-grid,
    html.route-product-manufacturer-info body #content .main-products.product-grid,
    html.route-product-special body #content .main-products.product-grid,
    html.route-product-search body #content .main-products.product-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    html.route-product-category body #content .product-thumb .caption,
    html.route-product-manufacturer-info body #content .product-thumb .caption,
    html.route-product-special body #content .product-thumb .caption,
    html.route-product-search body #content .product-thumb .caption {
        padding: 14px 20px 30px !important;
    }
}

/* ----- 12. По-малко празно поле под цената (бележка на клиента 2026-08-04) - */
/* Мерено преди промяната на 390px, начална: от текста на старата цена до
   следващия ред снимки има 53px - price padding 12 + price margin 7 + caption
   padding-bottom 22 + 12 разстояние в мрежата. Клиентът: "полето много е
   голямо". Тук се свиват само вертикалните отстояния под цената; страничният
   въздух от секции 5/6a остава непокътнат, снимките не се местят. */
html.route-common-home body div.module-products-311 .module-body .caption,
html.route-common-home body div.module-products-485 .module-body .caption,
html.route-common-home body div.module-products-477 .module-body .caption,
html.route-common-home body div.module-products-488 .module-body .caption {
    padding-bottom: 12px !important;
}

html.route-common-home body div.module-products-311 .module-body .caption .price,
html.route-common-home body div.module-products-485 .module-body .caption .price,
html.route-common-home body div.module-products-477 .module-body .caption .price,
html.route-common-home body div.module-products-488 .module-body .caption .price {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
    margin: 2px 0 0 !important;
}

@media (min-width: 992px) {
    html.route-common-home body div.module-products-311 .module-body .caption,
    html.route-common-home body div.module-products-485 .module-body .caption,
    html.route-common-home body div.module-products-477 .module-body .caption,
    html.route-common-home body div.module-products-488 .module-body .caption {
        padding-bottom: 18px !important;
    }
}

/* Името държи min-height 39.2px (2 реда) - това е на Journal и се пази нарочно,
   за да стоят цените на една линия в целия ред карти. Свива се обаче собственият
   му padding от 12px на 4px, което сваля още 16px от височината на картата. */
html.route-common-home body div.module-products-311 .module-body .caption .name,
html.route-common-home body div.module-products-485 .module-body .caption .name,
html.route-common-home body div.module-products-477 .module-body .caption .name,
html.route-common-home body div.module-products-488 .module-body .caption .name {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}